:root {
  --bg: #0d1117;
  --bg-elevated: #161b22;
  --bg-hover: #1c2330;
  --border: #30363d;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --accent: #2f81f7;
  --accent-hover: #4b94f8;
  --ok: #3fb950;
  --warn: #d29922;
  --danger: #f85149;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(1, 4, 9, 0.6);
  --header-h: 56px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  overscroll-behavior-y: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--accent);
}

code,
.mono {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
}

.hidden {
  display: none !important;
}

/* ------------------------------------------------------------------ controls */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elevated);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}

.btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: #484f58;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.btn.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn.danger {
  color: var(--danger);
  border-color: #5c2a28;
}

.btn.danger:hover:not(:disabled) {
  background: #2d1517;
}

.btn.small {
  padding: 4px 9px;
  font-size: 12px;
}

/* A secondary action sitting next to a solid one: readable, but clearly not the
   thing the eye should land on first. */
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
}

.btn.ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text);
}

.btn.icon {
  padding: 5px 8px;
  background: transparent;
  border-color: transparent;
}

.btn.icon:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border);
}

/* Every input that takes typing needs the dark background listed here: `input`
   inherits the body's light text colour, so an input left on the browser's white
   default renders white on white and looks empty. */
input[type='text'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='date'],
input[type='datetime-local'],
textarea,
select {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #0b0f15;
  color: var(--text);
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.25);
}

.field {
  display: block;
  margin-bottom: 12px;
}

.field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.field-row > .grow {
  flex: 1 1 140px;
  min-width: 0;
}

label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-dim);
  font-size: 13px;
}

label.check input {
  width: auto;
  margin: 0;
}

/* ----------------------------------------------------------------- shares */

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}

.badge.warn {
  border-color: var(--warn, #b7791f);
  color: var(--warn, #b7791f);
}

#share-picker-row {
  margin-bottom: 10px;
  align-items: center;
}

#share-picker-row .field {
  margin-bottom: 0;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.share-row:last-child {
  border-bottom: 0;
}

.share-row .share-name {
  font-weight: 600;
}

.share-row .share-path {
  flex: 1 1 120px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 12px;
}

/* ------------------------------------------------------------------ login */

#login-view {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 20px;
}

.login-card .sub {
  margin: 0 0 22px;
  color: var(--text-dim);
  font-size: 13px;
}

.login-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 11px;
}

/* ------------------------------------------------------------------ chrome */

header.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(8px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
}

.brand img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

nav.tabs {
  display: flex;
  gap: 2px;
  margin-left: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

nav.tabs::-webkit-scrollbar {
  display: none;
}

nav.tabs button {
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}

nav.tabs button:hover {
  color: var(--text);
  background: var(--bg-hover);
}

nav.tabs button.active {
  color: var(--text);
  background: var(--bg-elevated);
  border-color: var(--border);
}

.spacer {
  flex: 1;
}

.whoami {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 13px;
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* "used up" is two words; wrapped across two lines it doubles the row height. */
  white-space: nowrap;
}

.pill.ok {
  color: var(--ok);
  border-color: #1f4428;
}

.pill.warn {
  color: var(--warn);
  border-color: #4a3a12;
}

.pill.danger {
  color: var(--danger);
  border-color: #5c2a28;
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

h2.section {
  margin: 0 0 14px;
  font-size: 16px;
}

/* ------------------------------------------------------------------ cards */

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}

.kv:last-child {
  border-bottom: none;
}

.kv span:first-child {
  color: var(--text-dim);
}

.kv span:last-child {
  text-align: right;
  word-break: break-all;
}

.stat {
  font-size: 26px;
  font-weight: 600;
}

.bar {
  height: 8px;
  margin: 10px 0 6px;
  border-radius: 999px;
  background: #0b0f15;
  overflow: hidden;
}

.bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #58a6ff);
  transition: width 0.3s;
}

.url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.url-row .mono {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#qr-image {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 10px;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

/* ------------------------------------------------------------------ toolbar */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.toolbar .search {
  flex: 1;
  min-width: 160px;
  max-width: 320px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  color: var(--text-dim);
  font-size: 13px;
}

.crumbs button {
  padding: 3px 7px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.crumbs button:hover {
  background: var(--bg-hover);
}

/* ------------------------------------------------------------------ tables */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--text);
}

td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.45);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--bg-hover);
}

td.name {
  width: 100%;
}

td.name button.entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

td.name button.entry:hover {
  color: var(--accent);
}

td.name .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.num,
th.num {
  text-align: right;
  white-space: nowrap;
  color: var(--text-dim);
}

td.actions {
  white-space: nowrap;
  text-align: right;
}

/* The share-link table carries two columns of arbitrarily long text - a file name and
   a URL - so it is laid out with fixed columns. Left to itself a single long name
   stretches the table past the viewport and every other column gets pushed out of
   sight behind a horizontal scrollbar. */
.links-table {
  table-layout: fixed;
}

.links-table .col-link {
  width: 30%;
}

.links-table .col-expires {
  width: 92px;
}

.links-table .col-downloads {
  width: 108px;
}

.links-table .col-status {
  width: 104px;
  white-space: nowrap;
}

.links-table .col-actions {
  width: 206px;
}

.links-table td .note {
  margin: 2px 0 0;
}

/* Explains why a link that looks fine will fail for whoever you sent it to. */
.warn-text {
  color: var(--warn);
}

.cell-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cell-line .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-line .pill {
  flex: none;
}

.inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 13px;
}

.inline-field select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
}

.empty {
  padding: 40px 16px;
  color: var(--text-dim);
  text-align: center;
}

.icon-glyph {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

/* ------------------------------------------------------------------ dropzone */

#dropzone {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(13, 17, 23, 0.9);
  border: 3px dashed var(--accent);
  font-size: 20px;
  font-weight: 600;
  pointer-events: none;
}

/* ------------------------------------------------------------------ transfers */

#transfer-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: min(360px, calc(100vw - 32px));
  max-height: 45vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  overflow: hidden;
}

#transfer-panel header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

#transfer-list {
  max-height: calc(45vh - 40px);
  overflow-y: auto;
  padding: 6px 12px 10px;
}

.transfer {
  padding: 7px 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.4);
}

.transfer:last-child {
  border-bottom: none;
}

.transfer .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.transfer .row .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer .row .state {
  flex-shrink: 0;
  color: var(--text-dim);
}

.transfer.done .state {
  color: var(--ok);
}

.transfer.failed .state {
  color: var(--danger);
}

/* ------------------------------------------------------------------ toast */

#toasts {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  font-size: 13px;
  animation: toast-in 0.18s ease-out;
}

.toast.error {
  border-color: #5c2a28;
  color: #ff9b94;
}

.toast.ok {
  border-color: #1f4428;
  color: #7ee787;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ------------------------------------------------------------------ modal */

#modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 4, 9, 0.7);
}

.modal {
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}

.modal h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.modal .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* A two-column list of what a destructive action would actually cost, so the
   figures line up and can be read at a glance instead of as prose. */
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(110, 118, 129, 0.08);
  font-size: 13px;
}

.facts dt {
  color: var(--text-dim);
  white-space: nowrap;
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.modal-check {
  margin-top: 4px;
}

.modal-hint {
  margin: 4px 0 0 26px;
}

/* Roomier than a plain form dialog because it carries a folder list. */
.modal-wide {
  max-width: 560px;
}

/* ------------------------------------------------------------ folder picker */

/* Choosing a real folder instead of typing a path: the list shows what is
   actually on disk, which share is already using it, and whether it is empty. */
.picker {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(110, 118, 129, 0.06);
}

.picker-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.picker-here {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
  font-size: 12px;
  color: var(--text-dim);
}

.picker-roots {
  flex: none;
  max-width: 44%;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 12px;
}

.picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.picker-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 6px 0 0;
  border-bottom: 1px solid var(--border);
}

.picker-row:last-child {
  border-bottom: 0;
}

.picker-pick {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.picker-pick:hover:not(:disabled) {
  background: var(--bg-hover);
}

.picker-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.picker-pick.chosen {
  background: rgba(47, 129, 247, 0.18);
}

.picker-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

/* "shared as Movies · 12 items" - enough to spot a folder a removed share left
   behind without opening it. */
.picker-meta {
  flex: none;
  font-size: 11px;
  color: var(--text-dim);
}

.picker-row.used .picker-name {
  color: var(--text-dim);
}

.picker-empty {
  padding: 14px 12px;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}

/* Deliberately faint. It is an explanation for a short list, not a warning. */
.picker-skipped {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.75;
}

.picker-verdict {
  min-height: 16px;
  margin: 6px 0 2px;
}

.ok-text {
  color: var(--ok);
}

/* ------------------------------------------------------------------ preview */

/* Wider than a form dialog and bounded by the viewport, so a tall photo or a
   landscape video both end up fully visible instead of pushing the controls off
   the bottom of the screen. */
.preview-modal {
  display: flex;
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 40px);
  flex-direction: column;
  padding: 14px;
  gap: 10px;
}

.preview-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.preview-title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.preview-title .label {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-title .note {
  margin: 0;
}

.preview-stage {
  display: grid;
  min-height: 160px;
  flex: 1;
  border-radius: 10px;
  background: #010409;
  place-items: center;
  overflow: hidden;
}

/* The media sizes itself to whatever room is left after the header and footer,
   which is what keeps the dialog inside the viewport on a short window. */
.preview-stage img,
.preview-stage video {
  max-width: 100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
}

.preview-stage audio {
  width: min(520px, 100%);
  margin: 24px 14px;
}

.preview-error {
  margin: 0;
  color: var(--danger, #f85149);
}

.preview-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-spacer {
  flex: 1;
}

@media (max-width: 680px) {
  .preview-modal {
    padding: 10px;
  }

  .preview-stage img,
  .preview-stage video {
    max-height: calc(100vh - 260px);
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.chip:hover {
  border-color: #484f58;
}

.chip.on {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.insecure-note {
  margin: 0 0 14px;
  padding: 8px 11px;
  border: 1px solid #4a3a12;
  border-radius: 7px;
  background: #1d1a0f;
  color: var(--warn);
  font-size: 12px;
  line-height: 1.45;
}

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  font-size: 13px;
}

.banner.warn {
  border-color: #4a3a12;
  background: #1d1a0f;
}

.banner.danger {
  border-color: #5c2a28;
  background: #1f1211;
  color: var(--danger);
  margin-bottom: 14px;
}

.note {
  margin: 10px 0 0;
  color: var(--text-dim);
  font-size: 12px;
}

/* ------------------------------------------------------------- share link page */

.share-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  /* The page is dark, so the browser's own audio and video controls should be
     too, rather than a white bar dropped onto the card. */
  color-scheme: dark;
}

.share-card {
  width: 100%;
  max-width: 400px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  text-align: center;
}

.share-logo {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 10px;
}

.share-card h1 {
  margin: 0 0 6px;
  font-size: 19px;
  /* File names are arbitrary and often long; break them rather than widen the card. */
  overflow-wrap: anywhere;
}

.share-meta {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

.share-dot {
  margin: 0 5px;
}

.share-expiry {
  margin: 14px 0 18px;
  color: var(--warn);
  font-size: 13px;
}

.share-card .field {
  margin-bottom: 16px;
  text-align: left;
}

.share-card .insecure-note {
  text-align: left;
}

.share-preview {
  margin-bottom: 14px;
}

/* ---------------------------------------------- one frame for every file kind */

/* A photo is tall, a video is wide, a recording has nothing to show at all and
   plenty of files cannot be previewed in a browser. Left to themselves each one
   gives the page a different shape. They all land in this box instead. */
.share-frame {
  position: relative;
  min-height: 0;
  border-radius: 10px;
  background: #010409;
  overflow: hidden;
}

/* The poster and the player are both laid over the frame exactly: the poster is
   what is on screen until the viewer decides to spend a download on the player.
   Positioned rather than stretched because a stretched box has no height a
   percentage can resolve against, and a photo taller than the frame would then
   be cropped by it instead of fitted into it. */
.share-frame > * {
  position: absolute;
  inset: 0;
}

/* Centred with flex rather than the grid it uses elsewhere. A grid row sized
   `auto` takes its height from the picture, and the picture's `max-height: 100%`
   then measures itself against that row - so a tall photo sizes its own cage and
   escapes the frame. A flex item measures against the frame itself. */
.share-frame .preview-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 0;
  border-radius: 0;
  background: none;
}

.share-frame .preview-stage img,
.share-frame .preview-stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.preview-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-height: 100%;
  padding: 20px;
}

.share-frame .preview-stage audio {
  width: min(460px, 100%);
  margin: 0;
}

.preview-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.preview-glyph {
  display: block;
  color: var(--text-dim);
  opacity: 0.5;
}

.preview-glyph svg {
  display: block;
  width: 54px;
  height: 54px;
}

.preview-hint {
  margin: 0;
  max-width: 32ch;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.share-preview .share-frame {
  height: min(56vh, 440px);
  margin-bottom: 12px;
}

.share-preview-btn {
  justify-content: center;
}

.share-preview-note {
  margin: 8px 0 0;
  text-align: left;
}

.share-download {
  width: 100%;
  justify-content: center;
}

/* ---------------------------------------------- a link holding several files */

/* A list needs room a single file name never did, so the card grows only when
   there is actually a list in it. */
.share-card.wide {
  max-width: 580px;
}

/* Two panes side by side need the width of a window, not of a card. */
.share-card.split {
  max-width: 1040px;
  padding: 22px 24px 18px;
  text-align: left;
}

.share-card.split .share-logo {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
}

/* What the link holds on one side, how long it lasts on the other, instead of
   three short lines stacked down a corner of a wide card. */
.share-card.split .share-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.share-head-main {
  min-width: 0;
}

.share-card.split .share-head h1 {
  font-size: 21px;
}

.share-card.split .share-expiry {
  margin: 2px 0 0;
  padding: 5px 11px;
  border: 1px solid rgba(210, 153, 34, 0.35);
  border-radius: 999px;
  background: rgba(210, 153, 34, 0.12);
  font-size: 12px;
  white-space: nowrap;
}

.share-card.split .share-foot,
.share-card.split .share-error {
  text-align: center;
}

/* Files on the left, the file being looked at on the right. */
.share-split {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 16px;
  margin: 16px 0 4px;
  text-align: left;
  align-items: stretch;
  /* One height for the whole row, so the list is not left with a column of dead
     space beside a tall photo and the page does not resize under the pointer
     every time a different kind of file is opened. */
  height: clamp(380px, calc(100vh - 330px), 620px);
}

.share-pane {
  min-width: 0;
  min-height: 0;
}

.share-pane-list {
  display: flex;
  flex-direction: column;
}

.share-pane-detail {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(110, 118, 129, 0.06);
}

.share-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.share-detail-head {
  flex: none;
}

.share-detail-empty {
  margin: auto 0;
  text-align: center;
}

.share-detail-name {
  margin: 0 0 4px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

/* Whatever room is left once the name and the buttons have had theirs. */
.share-detail .share-frame {
  flex: 1;
  min-height: 0;
  margin: 12px 0;
}

.share-detail-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
}

/* Only ever needed when the panes are stacked one at a time. */
.share-back {
  display: none;
  align-self: flex-start;
  margin-bottom: 10px;
}

.share-list-foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.share-list-foot .btn {
  flex: 1 1 auto;
  justify-content: center;
}

.share-list-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.share-list-all {
  font-size: 13px;
  color: var(--text-dim);
}

.share-files {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(110, 118, 129, 0.06);
  /* Fifty files should scroll inside the card rather than turn the page into a
     mile of list with the buttons stranded at the bottom. Three files should
     still leave the column the same height as the file beside it. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.share-file {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--border);
}

.share-file:last-child {
  border-bottom: none;
}

.share-file:hover {
  background: var(--bg-hover);
}

.share-file.open {
  background: rgba(47, 129, 247, 0.18);
}

.share-file-pick {
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}

/* The row is the control: one target per file rather than a checkbox plus two
   buttons repeated fifty times. */
.share-file-open {
  flex: 1;
  min-width: 0;
  padding: 9px 2px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.share-file-name {
  display: block;
  font-size: 13px;
  /* Paths inside a shared folder can be long; keep them on one line with an
     ellipsis so every row stays the same height. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-file-size {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
}

.share-list-note {
  margin: 8px 0 0;
  text-align: left;
  flex-basis: 100%;
}

/* Below this there is not room for two panes, so they become one screen at a
   time: the list, then the file, with Files to get back. */
@media (max-width: 760px) {
  .share-card.split {
    max-width: 560px;
    padding: 20px 16px;
  }

  /* One pane at a time, so the row no longer has to be one height: each pane
     takes what it needs and the page scrolls. */
  .share-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    height: auto;
  }

  .share-pane-detail {
    display: none;
  }

  .share-split.detail-open .share-pane-list {
    display: none;
  }

  .share-split.detail-open .share-pane-detail {
    display: flex;
  }

  .share-back {
    display: inline-flex;
  }

  .share-files {
    flex: none;
    max-height: 52vh;
  }

  .share-detail .share-frame {
    flex: none;
    height: min(52vh, 380px);
  }
}

.share-error:empty {
  display: none;
}

.share-error {
  color: var(--danger);
}

.share-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 680px) {
  .brand span {
    display: none;
  }

  main {
    padding: 14px 10px 80px;
  }

  th.hide-sm,
  td.hide-sm {
    display: none;
  }

  /* With the Link column gone the toolbar picker is the only thing naming the
     address, so the file name gets the space instead. */
  .links-table .col-actions {
    width: 196px;
  }
}