/* transfer on the sky kit. Everything shared (colour, type, motion, the
   components) comes from kit.css; this file only lays out this one tool and
   takes every value from the kit's --sk-* tokens. */

/* The kit sets `display` on .sk-drop, .sk-progress and friends, and a
   class-level display beats the `hidden` attribute's user-agent
   `display: none`. Without this the login card stays on screen behind the app
   and finished progress bars stay lit. Found by screenshotting, not reading. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- room --- */

/* The room: haze from the top, and the plate standing on the bottom edge
   of the page, as tall as the screen. A short page is all plate; a long one
   scrolls down through haze and lands on the canal. The plate is part of the
   room, so the fog reaches the last pixel whatever the page's length, and
   the dock's room is padding inside it rather than bare body below it. */
.sk-body {
  background: var(--sk-sky-haze);
}

.t-room {
  position: relative;
  /* flow-root: the header's top margin stays inside instead of collapsing
     through and making every short page scroll */
  display: flow-root;
  min-height: 100dvh;
  padding-bottom: var(--sk-space-8);
  isolation: isolate;
}

/* The plate is a kit .sk-sky of its own (its image URLs resolve inside
   kit.css), pinned to the bottom of the room, one screen tall at most. */
.t-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: min(100%, 100lvh);
  /* the plate's sky melts into the haze above it on a long page */
  -webkit-mask-image: linear-gradient(transparent, black 18%);
  mask-image: linear-gradient(transparent, black 18%);
  pointer-events: none;
}

/* the kit pads <body> for its dock, which shows bare body under the room;
   the room takes that space instead so the plate runs under the dock */
.sk-body:has(.sk-dock) {
  padding-bottom: 0;
}

.sk-body:has(.sk-dock:not([hidden])) .t-room {
  padding-bottom: calc(var(--sk-space-24) + var(--sk-space-6) + env(safe-area-inset-bottom));
}

.sk-body:has(.t-plate.sk-sky--lost) {
  background: var(--sk-cloud);
}

.t-server {
  scroll-margin-top: var(--sk-space-6);
}

/* nothing uploading: no empty row doubling the shell's gap */
.t-queue:empty {
  display: none;
}

.t-break {
  overflow-wrap: anywhere;
}

.t-quiet {
  color: var(--sk-fg-3);
}

.t-err {
  color: var(--sk-stop);
  font-weight: 500;
}

/* ------------------------------------------------------------- upload --- */

.t-send {
  display: grid;
  gap: var(--sk-space-4);
  padding: var(--sk-space-3);
}

.t-drop {
  gap: var(--sk-space-1);
  align-content: center;
}

.t-drop__doodle {
  width: var(--sk-doodle-lg);
  margin-bottom: var(--sk-space-2);
  color: var(--sk-fg-2);
  transition:
    transform var(--sk-dur-base) var(--sk-ease-out),
    color var(--sk-dur-fast) var(--sk-ease-hover);
}

/* the arrow rises to meet the file coming in */
.t-drop.is-over .t-drop__doodle {
  transform: translateY(calc(var(--sk-reveal-y) * -0.6));
  color: var(--sk-accent);
}

@media (hover: hover) and (pointer: fine) {
  .t-drop:hover {
    border-color: var(--sk-fg-2);
  }
}

.t-days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-space-3);
  padding: 0 var(--sk-space-2) var(--sk-space-1);
}

.t-days .sk-seg label {
  min-width: var(--sk-space-10);
}

/* --------------------------------------------------------------- rows --- */

.t-list {
  display: grid;
  gap: var(--sk-space-3);
}

.t-row {
  display: grid;
  gap: var(--sk-space-3);
  padding: var(--sk-space-4) var(--sk-space-5);
  border-radius: var(--sk-radius-lg);
}

/* A new upload settles into the list. Only the queue: the server list is
   rebuilt on every refresh and would flash. */
.t-queue > .t-row {
  transition:
    opacity var(--sk-dur-base) var(--sk-ease-out),
    transform var(--sk-dur-base) var(--sk-ease-out);
}

@starting-style {
  .t-queue > .t-row {
    opacity: 0;
    transform: translateY(calc(var(--sk-reveal-y) * -0.6));
  }
}

.t-row__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sk-space-3);
}

.t-row__name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.t-row__top > .sk-tag {
  flex: none;
}

.t-row__name strong {
  font-weight: 600;
  line-height: 1.35;
}

.t-stat {
  color: var(--sk-fg-2);
  font-size: var(--sk-size-xs);
}

.t-linkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-space-2);
}

.t-link {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 40px;
  border-color: var(--sk-edge-soft);
  background: var(--sk-surface-2);
  font-size: var(--sk-size-sm);
}

.t-actions {
  display: flex;
  gap: var(--sk-space-2);
}

.t-del[data-armed='1'] {
  background: var(--sk-stop);
  color: var(--sk-paper);
}

.t-done {
  display: grid;
  gap: var(--sk-space-1);
}

.t-note {
  display: flex;
  align-items: center;
  gap: var(--sk-space-2);
  color: var(--sk-fg-2);
}

.t-note__plane {
  width: var(--sk-doodle-lg);
  color: var(--sk-accent);
}

.t-note .sk-hand {
  font-size: var(--sk-size-lg);
}

.t-empty {
  display: flex;
  align-items: center;
  gap: var(--sk-space-3);
  padding: var(--sk-space-4) var(--sk-space-5);
  border-radius: var(--sk-radius-lg);
  background: color-mix(in oklab, var(--sk-surface) 55%, transparent);
  color: var(--sk-fg-2);
}

.t-empty .sk-doodle {
  width: var(--sk-doodle-md);
  color: var(--sk-fg-3);
}

/* --------------------------------------------------------------- lost --- */

.t-lost {
  display: grid;
  justify-items: center;
  gap: var(--sk-space-6);
  padding-top: clamp(0px, 8vh, var(--sk-space-16));
  text-align: center;
}

.t-lost .sk-lede {
  max-width: 34ch;
}

/* ----------------------------------------------------------- download --- */

.t-file {
  display: grid;
  gap: var(--sk-space-4);
}

.t-file__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sk-space-4);
}

.t-file__doodle {
  width: var(--sk-doodle-lg);
  color: var(--sk-accent);
}

.t-file__title {
  display: grid;
  gap: var(--sk-space-1);
  min-width: 0;
}

.t-expiry {
  justify-self: start;
}

.t-big {
  width: 100%;
  min-height: 56px;
  font-size: var(--sk-size-md);
}

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

/* The frame a file plays in. It is a size container so what is inside fits
   by the numbers: a picture is as wide as the frame or as tall as it,
   whichever runs out first (--arn is width over height, set by preview.js). */
.t-media__stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: size;
}

.t-media__stage > :is(video, img, .t-player).t-media__el {
  width: min(100cqw, 100cqh * var(--arn, 1.7778));
  height: auto;
  aspect-ratio: var(--ar, 16 / 9);
  object-fit: contain;
  background: center / contain no-repeat;
}

/* ------------------------------------------------------------- player --- */

/* Our own controls over a bare <video>. Light on dark whatever the page
   theme, since they always sit on a picture. */
.t-player {
  --pl-fg: #fff;
  --pl-dim: rgb(255 255 255 / 0.62);
  --pl-track: rgb(255 255 255 / 0.22);
  --pl-glass: rgb(20 22 28 / 0.46);
  --pl-ease: var(--sk-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  position: relative;
  overflow: hidden;
  background: #000;
  color: var(--pl-fg);
  outline: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.t-player:focus-visible {
  box-shadow: inset 0 0 0 2px var(--sk-accent);
}

.t-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.t-player[data-idle] {
  cursor: none;
}

.t-player[data-idle] video {
  cursor: none;
}

.t-player button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.t-player svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* the big play in the middle, while paused */
.t-player__big {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  padding: 0 0 0 5px;
  border-radius: 50%;
  background: var(--pl-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14) inset, 0 12px 32px rgb(0 0 0 / 0.28);
  transition:
    opacity 200ms var(--pl-ease),
    transform 200ms var(--pl-ease),
    background-color 160ms ease;
}

.t-player__big svg {
  width: 30px;
  height: 30px;
}

.t-player__big:active {
  transform: scale(0.94);
}

.t-player[data-state='playing'] .t-player__big,
.t-player[data-wait] .t-player__big {
  opacity: 0;
  transform: scale(0.86);
  pointer-events: none;
}

/* buffering */
.t-player__spin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgb(255 255 255 / 0.2);
  border-top-color: var(--pl-fg);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  animation: t-spin 0.7s linear infinite;
}

.t-player[data-wait] .t-player__spin {
  opacity: 1;
  transition-delay: 250ms; /* a quick stall never flashes a spinner */
}

/* the bar along the bottom, on its own soft shadow */
.t-player__chrome {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 40px clamp(10px, 2.2cqw, 18px) clamp(6px, 1.4cqw, 12px);
  background: linear-gradient(to top, rgb(0 0 0 / 0.66), rgb(0 0 0 / 0.3) 55%, transparent);
  transition:
    opacity 260ms var(--pl-ease),
    transform 260ms var(--pl-ease);
}

.t-player[data-idle] .t-player__chrome {
  opacity: 0;
  transform: translateY(6px);
  transition-duration: 480ms;
  pointer-events: none;
}

/* before the first play the poster is the picture: keep it clean */
.t-player:not([data-started]) .t-player__chrome {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* the scrubber: a hit area much taller than the line it draws */
.t-player__scrub {
  --p: 0;
  --b: 0;
  --h: 0;
  position: relative;
  height: 22px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.t-player__track {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 4px;
  margin-top: -2px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--pl-track);
  transition: transform 180ms var(--pl-ease);
}

.t-player__buf,
.t-player__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
}

.t-player__buf {
  background: rgb(255 255 255 / 0.28);
  transform: scaleX(var(--b));
  transition: transform 300ms ease;
}

.t-player__fill {
  background: var(--sk-accent, #ff6a3d);
  transform: scaleX(var(--p));
}

.t-player__knob {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--pl-fg);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.4);
  transform: scale(0);
  transition: transform 180ms var(--pl-ease);
}

.t-player__tip {
  position: absolute;
  bottom: 100%;
  left: clamp(22px, calc(var(--h) * 100%), calc(100% - 22px));
  padding: 3px 7px;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.72);
  font-family: var(--sk-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms ease,
    transform 140ms var(--pl-ease);
  pointer-events: none;
}

.t-player__scrub:focus-visible .t-player__track {
  box-shadow: 0 0 0 2px var(--sk-accent);
}

@media (hover: hover) and (pointer: fine) {
  .t-player__scrub:hover .t-player__track {
    transform: scaleY(1.6);
  }

  .t-player__scrub:hover .t-player__knob {
    transform: scale(1);
  }

  .t-player__scrub:hover .t-player__tip {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.t-player[data-scrub] .t-player__track {
  transform: scaleY(1.6);
}

.t-player[data-scrub] .t-player__knob {
  transform: scale(1.15);
}

.t-player[data-scrub] .t-player__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* the buttons */
.t-player__row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.t-player__btn {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 10px;
  color: var(--pl-fg);
  opacity: 0.88;
  transition:
    opacity 160ms ease,
    background-color 160ms ease,
    transform 140ms var(--pl-ease);
}

.t-player__btn:active {
  transform: scale(0.9);
}

.t-player__btn:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  .t-player__btn:hover {
    opacity: 1;
    background-color: rgb(255 255 255 / 0.12);
  }
}

/* play and pause share a spot and swap through a blur */
.t-player__pp {
  display: grid;
  padding: 0;
}

.t-player__ico {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition:
    opacity 180ms var(--pl-ease),
    transform 180ms var(--pl-ease),
    filter 180ms var(--pl-ease);
}

.t-player[data-state='playing'] .t-player__ico--play,
.t-player[data-state='paused'] .t-player__ico--pause {
  opacity: 0;
  transform: scale(0.6);
  filter: blur(3px);
}

.t-player__time {
  padding: 0 8px;
  color: var(--pl-dim);
  font-family: var(--sk-font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.t-player__time b {
  color: var(--pl-fg);
  font-weight: 500;
}

.t-player__gap {
  flex: 1;
}

.t-player__speed {
  width: auto;
  min-width: 40px;
  padding: 0 8px;
  font-family: var(--sk-font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.t-player__speed[data-on='1'] {
  color: var(--sk-accent);
  opacity: 1;
}

/* volume: the slider slides out of the speaker on hover */
.t-player__vol {
  display: flex;
  align-items: center;
}

.t-player__wave,
.t-player__slash {
  transition: opacity 160ms ease;
}

.t-player[data-muted='1'] .t-player__wave,
.t-player[data-muted='0'] .t-player__slash {
  opacity: 0;
}

.t-player__level {
  --v: 1;
  width: 0;
  height: 40px;
  margin: 0;
  background: none;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    width 220ms var(--pl-ease),
    opacity 160ms ease,
    margin 220ms var(--pl-ease);
}

.t-player__level::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--pl-fg) calc(var(--v) * 100%), var(--pl-track) 0);
}

.t-player__level::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--pl-fg) calc(var(--v) * 100%), var(--pl-track) 0);
}

.t-player__level::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--pl-fg);
  -webkit-appearance: none;
  appearance: none;
}

.t-player__level::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--pl-fg);
}

@media (hover: hover) and (pointer: fine) {
  .t-player__vol:is(:hover, :focus-within) .t-player__level {
    width: 76px;
    margin: 0 8px 0 2px;
    opacity: 1;
  }
}

.t-player__out {
  display: none;
}

.t-player[data-fs='1'] .t-player__in {
  display: none;
}

.t-player[data-fs='1'] .t-player__out {
  display: inline;
}

.t-player:fullscreen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
}

/* small frames: the speed pill goes before the time does */
@container (max-width: 420px) {
  .t-player__speed {
    display: none;
  }

  .t-player__big {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
  }

  .t-player__big svg {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-player__chrome,
  .t-player__big,
  .t-player__ico,
  .t-player__knob,
  .t-player__track {
    transition-property: opacity;
  }
}

.t-media__stage > iframe.t-media__el {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--sk-paper);
}

/* the poster the Worker drew, until the player takes its place */
.t-media__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.t-media__text {
  align-self: stretch;
  justify-self: stretch;
  margin: 0;
  overflow: auto;
  border-radius: 0;
  font-size: var(--sk-size-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.t-media__audio {
  display: grid;
  justify-items: center;
  gap: var(--sk-space-4);
  width: min(100%, 520px);
  padding: var(--sk-space-6);
}

.t-media__audio .sk-doodle {
  width: var(--sk-doodle-xl);
  color: var(--sk-accent);
}

.t-media__audio audio {
  width: 100%;
}

/* nothing to play yet: the poster dimmed, the reason on top of it */
.t-media__empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sk-space-3);
  width: 100%;
  height: 100%;
  padding: var(--sk-space-6);
  text-align: center;
}

.t-media__empty .t-media__still {
  opacity: 0.28;
}

.t-media__empty .sk-doodle {
  width: var(--sk-doodle-lg);
  opacity: 0.7;
}

.t-media__empty p {
  position: relative;
  max-width: 36ch;
}

/* the share page: the player sits at the top of the file's card, dark like
   every player, with a line under it saying which copy is playing */
.t-media {
  display: grid;
  gap: var(--sk-space-2);
  margin: 0;
}

.t-media > .t-media__stage {
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  max-height: 72svh;
  border: var(--sk-stroke-ink) solid var(--sk-edge);
  border-radius: var(--sk-radius-md);
  background: var(--sk-ink);
  color: var(--sk-paper-3);
}

.t-media > .t-media__stage:is([data-kind='audio']) {
  aspect-ratio: auto;
  container-type: normal;
  background: var(--sk-surface-2);
  border-color: var(--sk-edge-soft);
  color: var(--sk-fg-2);
}

.t-media > .t-media__stage:is([data-kind='pdf']) {
  aspect-ratio: 4 / 5;
  max-height: 78svh;
}

.t-media > .t-media__stage:is([data-kind='text']) {
  aspect-ratio: auto;
  height: min(60svh, 520px);
  background: var(--sk-surface-2);
  border-color: var(--sk-edge-soft);
}

.t-media__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-2) var(--sk-space-4);
  min-height: 44px;
}

.t-media__note {
  flex: 1 1 220px;
  color: var(--sk-fg-2);
}

/* --------------------------------------------------------- list thumbs --- */

/* A 16:9 tile: the uploader's frame, or the kind's doodle when there is none.
   A video carries a small play badge so the tile reads as "press to watch". */
.t-thumb {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 112px;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: var(--sk-stroke-hair) solid var(--sk-edge-soft);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface-3);
  color: var(--sk-fg-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--sk-dur-press) var(--sk-ease-out),
    border-color var(--sk-dur-fast) var(--sk-ease-hover);
}

.t-thumb:disabled {
  cursor: default;
}

.t-thumb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity var(--sk-dur-base) var(--sk-ease-out),
    transform var(--sk-dur-base) var(--sk-ease-out);
}

.t-thumb.has-img .t-thumb__img {
  opacity: 1;
}

/* a page reads from the top: show its heading, not the middle of it */
.t-thumb[data-kind='pdf'] .t-thumb__img {
  object-position: top;
}

.t-thumb__glyph {
  width: var(--sk-doodle-md);
  transition: opacity var(--sk-dur-fast) var(--sk-ease-out);
}

.t-thumb.has-img .t-thumb__glyph {
  opacity: 0;
}

.t-thumb__play {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--sk-radius-pill);
  background: color-mix(in oklab, var(--sk-ink) 72%, transparent);
  color: var(--sk-paper);
}

.t-thumb__play svg {
  width: 10px;
  height: 10px;
  margin-left: 1px;
}

.t-thumb[data-kind='video'] .t-thumb__play {
  display: grid;
}

@media (hover: hover) and (pointer: fine) {
  .t-thumb:not(:disabled):hover {
    border-color: var(--sk-fg-2);
  }

  .t-thumb:not(:disabled):hover .t-thumb__img {
    transform: scale(1.04);
  }

  .t-row__open:not(:disabled):hover {
    text-decoration: underline;
    text-decoration-thickness: var(--sk-stroke-hair);
    text-underline-offset: 3px;
  }
}

.t-thumb:not(:disabled):active {
  transform: scale(var(--sk-press-scale));
}

/* the name opens the preview too, and still reads as the row's title */
.t-row__open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.t-row__open:disabled {
  cursor: text;
  user-select: text;
}

.t-row__top:has(.t-thumb) {
  align-items: center;
}

/* between the tile and the tag, the name takes the room, flush left */
.t-thumb + .t-row__name {
  flex: 1;
  justify-items: start;
}

/* -------------------------------------------------------------- viewer --- */

/* The lightbox is the whole screen: dark room, file in the middle, name and
   keys along the top, which copy is playing along the bottom. */
html.t-locked {
  overflow: hidden;
}

.t-viewer {
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--sk-space-4) var(--sk-space-5) var(--sk-space-5);
  border: 0;
  background: transparent;
  color: var(--sk-fg);
  font-family: var(--sk-font-sans);
  opacity: 1;
  transition:
    opacity var(--sk-dur-base) var(--sk-ease-out),
    display var(--sk-dur-base) allow-discrete,
    overlay var(--sk-dur-base) allow-discrete;
}

.t-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--sk-space-3);
}

.t-viewer:not([open]) {
  opacity: 0;
  transition-duration: var(--sk-dur-exit);
}

.t-viewer::backdrop {
  background: color-mix(in oklab, var(--sk-dusk-0, #0e1830) 94%, transparent);
  backdrop-filter: blur(8px);
}

@starting-style {
  .t-viewer[open] {
    opacity: 0;
  }

  .t-viewer[open] .t-viewer__stage {
    transform: scale(0.98);
  }
}

.t-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-4);
}

.t-viewer__title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.t-viewer__title strong {
  font-weight: 600;
  line-height: 1.3;
}

.t-viewer__title .sk-mono {
  color: var(--sk-fg-3);
}

.t-viewer__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sk-space-2);
}

.t-viewer__body {
  display: flex;
  align-items: center;
  gap: var(--sk-space-3);
  min-height: 0;
}

.t-viewer__stage {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  transition: transform var(--sk-dur-base) var(--sk-ease-out);
}

.t-viewer__stage > .t-media__el {
  border-radius: var(--sk-radius-sm);
}

.t-viewer__stage:is([data-kind='pdf'], [data-kind='text']) > * {
  width: min(100%, 980px);
  height: 100%;
  border-radius: var(--sk-radius-sm);
}

.t-viewer__stage.is-loading::after {
  content: '';
  width: 28px;
  height: 28px;
  border: var(--sk-stroke-ink) solid var(--sk-fg-4);
  border-top-color: var(--sk-fg);
  border-radius: var(--sk-radius-pill);
  animation: t-spin 0.8s linear infinite;
}

@keyframes t-spin {
  to { transform: rotate(1turn); }
}

.t-viewer__nav {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--sk-stroke-hair) solid var(--sk-edge-soft);
  border-radius: var(--sk-radius-pill);
  background: color-mix(in oklab, var(--sk-surface-2) 70%, transparent);
  color: var(--sk-fg);
  cursor: pointer;
  transition:
    transform var(--sk-dur-press) var(--sk-ease-out),
    border-color var(--sk-dur-fast) var(--sk-ease-hover);
}

.t-viewer__nav svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .t-viewer__nav:hover {
    border-color: var(--sk-fg-2);
  }
}

.t-viewer__nav:active {
  transform: scale(var(--sk-press-scale-icon));
}

.t-viewer__note {
  min-height: 1.5em;
  color: var(--sk-fg-2);
  text-align: center;
}

.t-viewer .t-media__empty {
  color: var(--sk-fg-2);
}

/* ------------------------------------------------------------- phone --- */

@media (max-width: 640px) {
  .t-file {
    padding: var(--sk-space-4);
  }

  .t-row {
    padding: var(--sk-space-4);
  }

  .t-linkrow > .sk-pill,
  .t-actions {
    width: 100%;
  }

  .t-actions > * {
    flex: 1;
  }

  .t-drop {
    min-height: 180px;
    padding: var(--sk-space-6);
  }

  .t-thumb {
    width: 88px;
  }

  /* the lightbox on a phone: close sits with the name, the keys go under
     it, and the file gets the full width (no side arrows) */
  .t-viewer {
    padding: var(--sk-space-3) var(--sk-space-3) calc(var(--sk-space-3) + env(safe-area-inset-bottom));
  }

  .t-viewer__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'title close' '. dl';
    gap: var(--sk-space-3);
  }

  .t-viewer__tools {
    display: contents;
  }

  .t-viewer__title { grid-area: title; }
  #vClose { grid-area: close; justify-self: end; }
  #vDl { grid-area: dl; justify-self: end; }

  .t-viewer__nav {
    display: none;
  }
}

/* ------------------------------------------------------------ arrivals --- */

/* Things that appear mid-task (the link once an upload lands, an upload's
   bar and numbers) settle in rather than
   teleport. Entry only, ease-out, under 250ms; the travel is a token that
   reduced motion zeroes, so there it is a plain fade. */
.t-done {
  transition:
    opacity var(--sk-dur-base) var(--sk-ease-out),
    transform var(--sk-dur-base) var(--sk-ease-out);
}

.t-progress,
.t-stat {
  transition: opacity var(--sk-dur-fast) var(--sk-ease-out);
}

@starting-style {
  .t-done {
    opacity: 0;
    transform: translateY(calc(var(--sk-reveal-y) * -0.4));
  }

  .t-progress,
  .t-stat {
    opacity: 0;
  }
}