/* ─────────────────────────────────────────────────────────────────────────
   Drop — the product stylesheet, served at /_/static/drop.css.
   Ported from design/mockups/_drop.css (the approved mockups); the right-hand
   illustration and the drag-over treatment come from the drop-v2 proposal
   Valsaraj chose on 2026-09-05.

   Every colour is copied from apps/hos-pro/src/tokens.css (the HOS Pro design
   language, docs/design.md). No colour is invented. Status hues are the fixed,
   never-themed set from design.md "Status — fixed, never themed".

   Type sizes come from docs/design/look.md's list — 40 / 23 / 18 / 15.5 / 13 /
   12.5 / 11 / 10.5 — so this surface adds no size to the repo. Geist Sans and
   Geist Mono are served from this directory as woff2 (SIL OFL).

   Theme follows the app rule: light is the hard default, `data-theme="dark"`
   is explicit, `data-theme="system"` follows prefers-color-scheme. drop.js
   stamps the root before first paint from localStorage.

   Motion budget, from docs/design.md "Motion" and HOS-028: only transform,
   opacity, background, color and border-color animate; nothing over 300ms;
   never ease-in; press feedback is pointer-only; reduced motion keeps the
   fades and drops movement. The one place this surface spends delight is the
   published moment, because publishing is the rare event on this page.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Geist";
  src: url(/_/static/geist.28258d06.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url(/_/static/geist-mono.5bc6413e.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  --canvas:      #ffffff;
  --panel:       #fbfbfb;
  --panel-2:     #f6f6f7;
  --raised:      #f0f0f2;
  --line:        rgba(0,0,0,0.08);
  --line-2:      rgba(0,0,0,0.14);

  --ink:         #08090a;   /* headings, values                 19.93:1 */
  --ink-2:       #6b6f76;   /* every caption and meta figure     5.05:1 */
  --ink-3:       #8a8f98;   /* outlines only, never a word       3.25:1 */

  --accent:      #5e6ad2;   /* a fill or a border, and the focus ring */
  --accent-bg:   rgba(94,106,210,0.10);
  --accent-br:   rgba(94,106,210,0.32);
  --accent-ink:  #5560c4;   /* all accent-coloured text          4.80:1 */
  --accent-solid:#5560c4;   /* a fill that carries white text    5.45:1 */

  --shade:       rgba(0,0,0,0.03);
  --ring-track:  rgba(0,0,0,0.08);
  --dot:         rgba(8,9,10,0.16);   /* the drop-zone dot field; a graphic, never text */

  /* Status — fixed, never themed. The mark is one value; the text ink flips. */
  --st-ok:       #0ca30c;
  --st-warn:     #fab219;
  --st-crit:     #d03b3b;
  --tx-ok:       #06630b;   /* 7.51:1 */
  --tx-warn:     #7a5300;   /* 6.85:1 */
  --tx-crit:     #9c2020;   /* 7.95:1 */

  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, monospace;

  --t-hero:  40px;   /* look.md "Hero figure" — the drop-zone headline */
  --t-door:  23px;   /* look.md "Door value"  — the published URL */
  --t-title: 18px;
  --t-name:  15.5px;
  --t-ui:    13px;
  --t-head:  12.5px;
  --t-meta:  11px;
  --t-mono:  10.5px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 100ms;
  --dur-hover: 100ms;
  --dur-state: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --canvas: #08090a; --panel: #0f1011; --panel-2: #16171a; --raised: #1c1d21;
    --line: rgba(255,255,255,0.07); --line-2: rgba(255,255,255,0.13);
    --ink: #f7f8f8; --ink-2: #8a8f98; --ink-3: #62666d;
    --accent: #7b83eb; --accent-bg: rgba(123,131,235,0.14); --accent-br: rgba(123,131,235,0.34);
    --accent-ink: #7b83eb; --accent-solid: #5560c4;
    --shade: rgba(255,255,255,0.04);
    --dot: rgba(255,255,255,0.14);
    --ring-track: rgba(255,255,255,0.09);
    --tx-ok: #7ede7e; --tx-warn: #fac95e; --tx-crit: #f08585;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #08090a; --panel: #0f1011; --panel-2: #16171a; --raised: #1c1d21;
  --line: rgba(255,255,255,0.07); --line-2: rgba(255,255,255,0.13);
  --ink: #f7f8f8; --ink-2: #8a8f98; --ink-3: #62666d;
  --accent: #7b83eb; --accent-bg: rgba(123,131,235,0.14); --accent-br: rgba(123,131,235,0.34);
  --accent-ink: #7b83eb; --accent-solid: #5560c4;
  --shade: rgba(255,255,255,0.04);
  --dot: rgba(255,255,255,0.14);
  --ring-track: rgba(255,255,255,0.09);
  --tx-ok: #7ede7e; --tx-warn: #fac95e; --tx-crit: #f08585;
}

* { box-sizing: border-box; }
svg[hidden] { display: none; }   /* the UA's [hidden] rule does not reach the SVG namespace */

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-ui);
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One global focus rule, never removed per component (docs/design.md). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

/* Reduced motion keeps the fades and drops the movement (design.md, §15
   2026-08-12). A blanket `transition: none` cut the fades too — that was the
   defect, so this block names the properties it removes. */
@media (prefers-reduced-motion: reduce) {
  * { transition-property: background, background-color, color, border-color, opacity !important; }
  .drop-menu { transform: none !important; }
  .drop-btn:active:not(:focus-visible) { transform: none !important; }
  .drop-zone, .drop-zone * { animation: none !important; }
  .drop-art__sheet, .drop-zone { transform: none !important; }
  .drop-art__sheet--front { transform: rotate(8deg) !important; }
  .drop-art__sheet--back { transform: rotate(-13deg) !important; }
}
/* Skip link: visible only when focused. */
.drop-skip { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 8px 16px; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 6px; transform: translateY(-200%); }
.drop-skip:focus { transform: none; }

.drop-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .drop-mono { font-family: var(--mono); }
.drop-num { font-variant-numeric: tabular-nums; }

/* ── header: 44px, like every HOS Pro screen ───────────────────────────── */

.drop-header {
  height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.drop-wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-name); font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.drop-wordmark:hover { text-decoration: none; }
.drop-wordmark__glyph {
  width: 20px; height: 20px; border-radius: 6px; background: var(--accent-solid);
  display: grid; place-items: center; color: #fff;
}
.drop-wordmark__glyph svg { width: 12px; height: 12px; }
.drop-wordmark__of { color: var(--ink-2); font-weight: 400; }
.drop-header__right { position: relative; display: flex; align-items: center; gap: 8px; }
.drop-person__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-ok); }

/* the account menu: who is signed in, and where to go */
.drop-menu__btn {
  appearance: none; border: 1px solid transparent; border-radius: 6px; background: transparent;
  height: 28px; padding: 0 8px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-2);
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.drop-menu__btn svg { width: 12px; height: 12px; }
.drop-menu__btn[aria-expanded="true"] { background: var(--raised); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .drop-menu__btn:hover { background: var(--raised); color: var(--ink); } }
.drop-menu {
  position: absolute; top: 34px; right: 0; z-index: 20; min-width: 208px;
  padding: 4px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  transform-origin: top right; transform: scale(0.97); opacity: 0;
  transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out);
}
.drop-menu[data-open] { transform: none; opacity: 1; }
.drop-menu[data-instant] { transition-duration: 0ms; }
.drop-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 28px; padding: 0 8px;
  border: 0; border-radius: 5px; background: transparent; color: var(--ink); text-align: left;
  font: inherit; cursor: pointer; text-decoration: none;
  transition: background var(--dur-hover) ease;
}
.drop-menu__item:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .drop-menu__item:hover { background: var(--raised); } }
.drop-menu__item svg { width: 14px; height: 14px; color: var(--ink-2); flex: none; }
.drop-menu__value { margin-left: auto; color: var(--ink-2); font-size: var(--t-meta); }
.drop-menu__rule { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }

/* ── controls: 32px, 6px radius, pointer-only press ────────────────────── */

.drop-btn {
  appearance: none; border: 1px solid transparent; border-radius: 6px;
  height: 32px; padding: 0 12px;
  font: inherit; font-weight: 500; line-height: 30px; color: var(--ink);
  background: var(--panel-2);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease,
              border-color var(--dur-hover) ease, transform var(--dur-press) ease;
}
.drop-btn svg { width: 14px; height: 14px; flex: none; }
.drop-btn--primary { background: var(--accent-solid); color: #fff; }
.drop-btn--secondary { background: var(--panel); border-color: var(--line-2); }
.drop-btn--ghost { background: transparent; color: var(--ink-2); }
.drop-btn--icon { width: 32px; padding: 0; justify-content: center; }
.drop-btn--danger { background: transparent; border-color: var(--line-2); color: var(--tx-crit); }
.drop-btn--tall { height: 40px; padding: 0 16px; line-height: 38px; }
@media (hover: hover) and (pointer: fine) {
  .drop-btn--primary:hover { background: #4a55b8; }
  .drop-btn--secondary:hover, .drop-btn--ghost:hover { background: var(--raised); color: var(--ink); }
  .drop-btn--danger:hover { background: var(--raised); }
}
/* A focused button takes :active while Space is held, so press feedback is
   pointer-only (HOS-028). */
.drop-btn:active:not(:focus-visible) { transform: scale(0.97); }
.drop-btn[aria-busy="true"] { cursor: progress; }

/* ── page body ─────────────────────────────────────────────────────────── */

.drop-main {
  max-width: 1120px; margin: 0 auto;
  padding: 24px 16px 48px;
  display: flex; flex-direction: column; gap: 24px;
}

/* ── the drop zone: the hero IS the target ─────────────────────────────── */

.drop-zone {
  position: relative;
  min-height: 400px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--canvas);
  display: grid; place-items: center;
  overflow: hidden;
  transition: border-color 150ms ease, background 150ms ease;
}
/* The dashed target sits inside the card, so the frame and the target read as
   two things: a place, and the spot to let go. */
.drop-zone::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  border: 1px dashed var(--line-2); border-radius: 6px;
  transition: border-color 150ms ease;
}
/* The ground inside the target, restored from the mockups (Valsaraj,
   2026-09-09). Drawn by the browser, not the mockup's canvas: an 18px grid of
   1.1px dots is one gradient, so the field needs no script and there is nothing
   to switch off under reduced motion or with scripting disabled.
   Its own layer and not `::before`'s background, because a mask on that element
   would fade the dashed border with it. */
.drop-zone::after {
  content: ""; position: absolute; inset: 13px; pointer-events: none;
  border-radius: 6px;
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.1px);
  background-size: 18px 18px;
  /* Cleared where the words are, so the field is a ground and never texture
     behind text. The hole sits over the left copy column, not the middle as in
     the centred mockup, because this layout puts the copy left and the
     illustration right; below 720px the copy centres and so does the hole. */
  mask-image: radial-gradient(ellipse 42% 58% at 27% 50%, transparent 0 45%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 42% 58% at 27% 50%, transparent 0 45%, #000 100%);
}

/* Drag-over: the frame turns accent, the headline says what release does, the
   front sheet lifts. No scale, so nothing shifts under the pointer. */
body[data-state="drag"] .drop-zone { border-color: var(--accent); }
body[data-state="drag"] .drop-zone::before { border-color: var(--accent-br); }
/* Working and result states are panels, not targets: no inner dashes, sized
   to their content. */
body:is([data-state="uploading"],[data-state="published"],[data-state="refused"],[data-state="zip"],[data-state="offline"],[data-state="expired"],[data-state="failed"]) .drop-zone { min-height: 0; }
/* `:is()` takes no pseudo-element, so the frame and the dot field are two
   selectors rather than one list. */
body:is([data-state="uploading"],[data-state="published"],[data-state="refused"],[data-state="zip"],[data-state="offline"],[data-state="expired"],[data-state="failed"]) .drop-zone::before,
body:is([data-state="uploading"],[data-state="published"],[data-state="refused"],[data-state="zip"],[data-state="offline"],[data-state="expired"],[data-state="failed"]) .drop-zone::after { display: none; }

.drop-state { display: none; position: relative; z-index: 1; width: 100%; }
body[data-state="idle"]      .drop-state--idle,
body[data-state="drag"]      .drop-state--idle,
body[data-state="uploading"] .drop-state--uploading,
body[data-state="published"] .drop-state--published,
body[data-state="refused"]   .drop-state--refused,
body[data-state="zip"]       .drop-state--zip,
body[data-state="offline"]   .drop-state--offline,
body[data-state="expired"]   .drop-state--expired,
body[data-state="failed"]    .drop-state--failed,
body[data-state="first"]     .drop-state--first { display: block; }
body[data-state="pages"]     .drop-zone { display: none; }

.drop-zone__body, .drop-first {
  position: relative; width: 100%; min-height: 400px; margin: 0; padding: 56px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; text-align: left;
}
.drop-zone__body > :not(.drop-art), .drop-first > :not(.drop-art) { position: relative; z-index: 2; max-width: 50%; }
.drop-zone__body .drop-zone__actions, .drop-first .drop-zone__actions { margin-top: 8px; }
.drop-zone__title-stack { display: grid; }
.drop-zone__title-stack > * { grid-area: 1 / 1; transition: opacity 150ms ease; }
.drop-zone__h1 {
  margin: 0; font-size: var(--t-hero); line-height: 44px; font-weight: 600;
  letter-spacing: -0.035em; text-wrap: balance;
}
.drop-zone__h1--idle span { color: var(--ink-2); }
.drop-zone__h1--release { opacity: 0; color: var(--accent-ink); }
body[data-state="drag"] .drop-zone__h1--idle { opacity: 0; }
body[data-state="drag"] .drop-zone__h1--release { opacity: 1; }
.drop-zone__lede { margin: 0; font-size: var(--t-name); line-height: 24px; color: var(--ink-2); max-width: 44ch; }
.drop-zone__hint { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: var(--t-mono); line-height: 16px; color: var(--ink-2); }
.drop-zone__hint span + span::before { content: "·"; margin-right: 12px; }
.drop-zone__hint code { color: var(--ink); }
.drop-zone__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
body[data-state="drag"] .drop-zone__actions,
body[data-state="drag"] .drop-zone__hint { opacity: 0.4; transition: opacity 150ms ease; }

/* ── the illustration: a folder becomes one page — from the drop-v2 proposal.
   Two tilted sheets, the folder card, two orbit rings, a locked-link pill. It
   lifts on hover and on drag-over; nothing loops. ── */
.drop-art { position: absolute; width: 360px; height: 320px; right: 44px; top: 50%; transform: translateY(-50%); pointer-events: none; isolation: isolate; z-index: 1; }
.drop-art__orbit { position: absolute; width: 310px; height: 310px; border: 1px solid var(--line); border-radius: 50%; top: 0; left: 26px; }
.drop-art__orbit--inner { width: 244px; height: 244px; top: 33px; left: 59px; border-style: dashed; }
.drop-art__back { position: absolute; width: 224px; height: 155px; background: var(--accent-bg); border: 1px solid var(--accent-br); border-radius: 10px; top: 103px; left: 66px; transform: rotate(-6deg); }
.drop-art__back::before { content: ""; position: absolute; top: -15px; left: -1px; width: 90px; height: 20px; border-radius: 9px 14px 0 0; background: var(--accent-bg); border: 1px solid var(--accent-br); border-bottom: 0; }
.drop-art__sheet { position: absolute; width: 186px; height: 176px; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 7px; box-shadow: 0 8px 24px var(--shade); transition: transform 250ms var(--ease-out); }
.drop-art__sheet--back { left: 72px; top: 50px; transform: rotate(-13deg); padding: 14px; font: 11px var(--mono); color: var(--ink-2); }
.drop-art__sheet--back > i { display: block; height: 5px; width: 70%; background: var(--line); margin-top: 13px; }
.drop-art__sheet--back > i:nth-child(3) { width: 40%; }
.drop-art__sheet--front { left: 114px; top: 58px; transform: rotate(8deg); }
.drop-art__sheet-head { height: 34px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 10px; gap: 8px; font: 10.5px var(--mono); color: var(--ink-2); }
.drop-art__sheet-head b { font-weight: 400; color: var(--ink); flex: 1; }
.drop-art__sample { padding: 18px 14px; }
.drop-art__sample > b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.04em; white-space: nowrap; }
.drop-art__sample > i { display: block; height: 4px; background: var(--line-2); margin: 9px 0; width: 90%; }
.drop-art__sample > i:nth-child(3) { width: 60%; }
.drop-art__sample > div { display: flex; gap: 6px; margin-top: 14px; }
.drop-art__sample > div i { height: 35px; flex: 1; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; }
.drop-art__folder { position: absolute; left: 59px; top: 151px; width: 240px; height: 112px; border: 1px solid var(--accent-br); border-radius: 9px 9px 14px 14px; transform: rotate(-5deg); background: var(--canvas); box-shadow: 0 16px 26px var(--shade); padding: 23px 20px; color: var(--accent-ink); }
.drop-art__folder::before { content: ""; position: absolute; inset: 0; background: var(--accent-bg); border-radius: inherit; z-index: -1; }
.drop-art__folder svg { width: 26px; height: 26px; display: block; margin-bottom: 10px; }
.drop-art__folder span { font-size: var(--t-meta); }
.drop-art__folder > b { position: absolute; right: 16px; top: 23px; font: 10.5px var(--mono); letter-spacing: 0.04em; }
.drop-art__link { position: absolute; left: 89px; top: 279px; padding: 8px 12px; border: 1px solid var(--line-2); background: var(--canvas); border-radius: 30px; display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--ink); box-shadow: 0 4px 10px var(--shade); white-space: nowrap; }
.drop-art__link svg { width: 12px; height: 12px; }
.drop-art__link svg:last-child { color: var(--tx-ok); margin-left: 5px; }
@media (hover: hover) and (pointer: fine) {
  .drop-zone:hover .drop-art__sheet--front { transform: translateY(-6px) rotate(11deg); }
  .drop-zone:hover .drop-art__sheet--back { transform: translateY(-9px) rotate(-16deg); }
}
body[data-state="drag"] .drop-art__sheet--front { transform: translateY(-16px) rotate(5deg); }
body[data-state="drag"] .drop-art__sheet--back { transform: translateY(-9px) rotate(-16deg); }

/* ── the working and result panels ─────────────────────────────────────── */

.drop-panel {
  margin: 0 auto; width: 100%; max-width: 640px; padding: 32px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.drop-panel--centre { align-items: center; text-align: center; max-width: 520px; }
.drop-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.drop-panel__title { margin: 0; font-size: var(--t-title); line-height: 24px; font-weight: 600; letter-spacing: -0.015em; }
.drop-panel__figure { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-2); white-space: nowrap; }
.drop-panel__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.drop-panel--centre .drop-panel__actions { justify-content: center; }
.drop-panel__note { margin-left: auto; color: var(--ink-2); font-size: var(--t-meta); }
.drop-bar { height: 4px; border-radius: 2px; background: var(--ring-track); overflow: hidden; }
.drop-bar__fill {
  height: 100%; width: 100%; border-radius: 2px; background: var(--accent);
  transform-origin: left; transform: scaleX(var(--p, 0));
  transition: transform 200ms linear;   /* tied to real bytes: linear */
}
.drop-manifest { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); }
.drop-manifest__row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  height: 32px; padding: 0 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px;
}
.drop-manifest__row:first-child { border-top: 0; }
.drop-manifest__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-manifest__size { color: var(--ink-2); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.drop-manifest__glyph { width: 16px; height: 16px; color: var(--ink-3); }
.drop-manifest__row--more { color: var(--ink-2); font-size: var(--t-meta); }

/* ── published: the rare moment, so it gets the delight ────────────────── */

.drop-done__head { display: flex; flex-direction: column; gap: 8px; }
.drop-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: 5px; font-size: var(--t-meta); font-weight: 600; line-height: 16px;
  border: 1px solid var(--line-2); background: var(--panel);
  width: max-content;
}
.drop-tag svg { width: 12px; height: 12px; }
.drop-tag--ok   { color: var(--tx-ok);   border-color: color-mix(in srgb, var(--st-ok) 40%, transparent); }
.drop-tag--crit { color: var(--tx-crit); border-color: color-mix(in srgb, var(--st-crit) 40%, transparent); }
.drop-tag--warn { color: var(--tx-warn); border-color: color-mix(in srgb, var(--st-warn) 60%, transparent); }
.drop-done__meta { margin: 0; color: var(--ink-2); font-size: var(--t-meta); font-family: var(--mono); }

/* The URL at a size someone can read aloud on a call. */
.drop-url {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--accent-br); border-radius: 8px; background: var(--accent-bg);
}
.drop-url__link {
  font-family: var(--mono); font-size: var(--t-door); line-height: 28px; letter-spacing: -0.01em;
  color: var(--accent-ink); white-space: nowrap; overflow-x: auto;
}
.drop-url__link:hover { text-decoration: underline; }
/* host on its own quiet line, so the path a person reads aloud never wraps */
.drop-url__host { display: block; color: var(--ink-2); font-size: var(--t-meta); line-height: 16px; letter-spacing: 0; }
.drop-copied {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px;
  background: var(--canvas); border: 1px solid var(--line-2);
  font-size: var(--t-meta); font-weight: 600; color: var(--tx-ok); white-space: nowrap;
}
.drop-copied svg { width: 12px; height: 12px; }

/* Ship the proof: the served page, inside the page that published it. */
.drop-preview { border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--canvas); }
.drop-preview__chrome {
  height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border-bottom: 1px solid var(--line); background: var(--panel-2);
  font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-2);
}
.drop-preview__dots { display: inline-flex; gap: 5px; }
.drop-preview__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
.drop-preview__addr { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-preview__frame { aspect-ratio: 2 / 1; display: block; width: 100%; border: 0; background: var(--canvas); pointer-events: none; }   /* a proof, not a second tab */
/* Published entrance: a short rise from a visible resting state — the panel
   is never parked at opacity 0 waiting on script. */
body[data-state="published"] .drop-panel > * { animation: drop-rise var(--dur-state) var(--ease-out) both; }
body[data-state="published"] .drop-panel > :nth-child(2) { animation-delay: 40ms; }
body[data-state="published"] .drop-panel > :nth-child(3) { animation-delay: 80ms; }
body[data-state="published"] .drop-panel > :nth-child(4) { animation-delay: 120ms; }
@keyframes drop-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── refused: a checklist sorted failed-first, each failure naming its fix ── */

.drop-checks { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); }
.drop-check {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 12px; border-top: 1px solid var(--line);
}
.drop-check:first-child { border-top: 0; }
.drop-check svg { width: 16px; height: 16px; margin-top: 2px; }
.drop-check__rule { font-weight: 500; }
.drop-check__fix { color: var(--ink-2); font-size: var(--t-ui); }
.drop-check--fail { color: var(--tx-crit); }
.drop-check--fail .drop-check__fix { color: var(--ink); }
.drop-check--pass { color: var(--tx-ok); }
.drop-check--pass .drop-check__rule { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }

/* failed shape: critical ink, icon AND word, the reason, the way to retry */
.drop-failed__word { display: inline-flex; align-items: center; gap: 8px; color: var(--tx-crit); font-weight: 600; font-size: var(--t-title); line-height: 24px; letter-spacing: -0.015em; }
.drop-failed__word svg { width: 18px; height: 18px; }
.drop-failed__why { margin: 0; color: var(--ink); max-width: 48ch; }
.drop-failed__why b { font-weight: 600; }

/* ── your pages: the tenth-visit reason to come here ───────────────────── */

/* the dashboard's target: a strip, because the list is the page here */
.drop-strip {
  display: none; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
  border: 1px dashed var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink-2);
}
.drop-strip > svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.drop-strip > span { flex: 1; }
body[data-state="pages"] .drop-strip { display: flex; }
body[data-state="pages"] .drop-section__more { display: none; }
body[data-state="pages"] .drop-section__hint { display: none; }   /* the strip already says it */
.drop-section__more { font-size: 11.5px; white-space: nowrap; }
.drop-section__head { gap: 12px; }
.drop-section__hint { flex: 1; text-align: right; }


.drop-pages { display: flex; flex-direction: column; gap: 12px; }
.drop-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; height: 30px; }
.drop-section__title { margin: 0; font-size: var(--t-head); line-height: 16px; font-weight: 600; }
.drop-section__title .drop-count { color: var(--ink-2); font-weight: 400; margin-left: 6px; font-variant-numeric: tabular-nums; }
.drop-section__hint { margin: 0; color: var(--ink-2); font-size: 11.5px; }

.drop-table { width: 100%; border-collapse: collapse; }
/* 44px, not the 36px table row: this cell carries two lines, title and path */
.drop-table td { height: 44px; padding: 0 12px; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.drop-table tr:first-child td { border-top: 0; }
.drop-table tr { transition: background var(--dur-hover) ease; }
@media (hover: hover) and (pointer: fine) { .drop-table tbody tr:hover { background: var(--shade); } }
.drop-table__title { font-weight: 500; }
.drop-table__path { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-2); }
.drop-table__meta { color: var(--ink-2); font-size: var(--t-meta); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.drop-table__actions { text-align: right; }
.drop-table__actions .drop-btn { height: 26px; line-height: 24px; padding: 0 8px; font-size: 12px; }
.drop-table__actions .drop-btn--icon { width: 26px; }
.drop-table td:first-child { width: 44%; }
.drop-table td:first-child > div { display: flex; flex-direction: column; line-height: 16px; gap: 2px; }
.drop-table__frame { border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); overflow-x: auto; }
tr.drop-row--new td { background: var(--accent-bg); }
tr.drop-row--new .drop-table__meta { color: var(--accent-ink); }

/* Drop onto a row to replace that page and keep its URL. */
tr.drop-row--target td { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
tr.drop-row--target td:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
tr.drop-row--target td:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.drop-row__replace { color: var(--accent-ink); font-weight: 600; font-size: var(--t-meta); }

/* ── first visit: no pages yet, so no list — the zone is the whole screen.
   The mockups spend their one moment of delight here, rippling the dot field as
   the page lands. The shipped field is static CSS and has no ripple; the
   illustration carries the first visit instead. ── */

body[data-state="first"] .drop-pages { display: none; }
body[data-state="first"] .drop-zone, body[data-state="first"] .drop-first { min-height: 480px; }
.drop-first .drop-zone__h1 { max-width: 9ch; }

/* ── bare surfaces: sign-in, refusals, hand-off, CLI ───────────────────── */

.drop-bare {
  min-height: calc(100vh - 44px);
  display: grid; place-items: center;
  padding: 48px 16px;
}
.drop-bare .drop-state { width: 100%; }
.drop-card {
  width: 100%; max-width: 400px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.drop-card .drop-tag { align-self: center; }
.drop-card__glyph {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent-solid);
  display: grid; place-items: center; color: #fff;
}
.drop-card__glyph svg { width: 22px; height: 22px; }
.drop-card h1 { margin: 0; font-size: var(--t-title); line-height: 24px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.drop-card p { margin: 0; color: var(--ink-2); }
.drop-card p b { color: var(--ink); font-weight: 500; }
.drop-card .drop-mono { font-size: 12.5px; }
.drop-card__foot { color: var(--ink-2); font-size: var(--t-meta); line-height: 16px; }
.drop-card__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.drop-google {
  width: 100%; justify-content: center; height: 40px; line-height: 38px;
  background: var(--canvas); border-color: var(--line-2); font-weight: 500;
}
.drop-google svg { width: 16px; height: 16px; }
.drop-return {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
}
.drop-return svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.drop-return span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drop-code {
  width: 100%;
  font-family: var(--mono); font-size: var(--t-door); line-height: 28px; letter-spacing: 0.12em;
  padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel);
  color: var(--ink); text-align: center;
}
.drop-kv { display: grid; grid-template-columns: auto auto; gap: 4px 16px; font-size: var(--t-ui); text-align: left; }
.drop-kv dt { color: var(--ink-2); margin: 0; text-align: right; }
.drop-kv dd { margin: 0; font-family: var(--mono); font-size: 12.5px; }

/* the "signing you in" hand-off — three lines of HTML, nothing external */
.drop-handoff { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-2); }
.drop-handoff__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ring-track); border-top-color: var(--accent); animation: drop-spin 700ms linear infinite; }
@keyframes drop-spin { to { transform: rotate(360deg); } }

/* ── responsive: the honest small screen ───────────────────────────────── */

.drop-only-small { display: none; }
@media (max-width: 1000px) {
  .drop-art { right: 12px; transform: translateY(-50%) scale(0.85); }
  .drop-zone__body, .drop-first { padding: 40px; }
}
@media (max-width: 720px) {
  .drop-main { padding: 16px 12px 48px; gap: 24px; }
  .drop-zone, .drop-zone__body, .drop-first { min-height: 320px; }
  body[data-state="first"] .drop-zone, body[data-state="first"] .drop-first { min-height: 360px; }
  .drop-zone__body, .drop-first { padding: 32px 20px; align-items: center; text-align: center; }
  .drop-zone::after {
    mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, transparent 0 45%, #000 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, transparent 0 45%, #000 100%);
  }
  .drop-zone__body > :not(.drop-art), .drop-first > :not(.drop-art) { max-width: 100%; }
  .drop-first .drop-zone__h1 { max-width: none; }
  .drop-zone__h1 { font-size: 26px; line-height: 32px; }   /* look.md "Metric value" */
  .drop-zone__lede { font-size: var(--t-ui); line-height: 20px; }
  .drop-zone__actions, .drop-zone__hint { justify-content: center; }
  .drop-art { display: none; }
  .drop-only-large { display: none; }
  .drop-only-small { display: revert; }
  .drop-url { grid-template-columns: 1fr; }
  .drop-url__link { font-size: var(--t-name); line-height: 22px; }
  .drop-table td:nth-child(2) { display: none; }
  .drop-panel__note { margin-left: 0; width: 100%; }
}

/* ── toast and dialog ─────────────────────────────────────────────────── */

.drop-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translateX(-50%);
  padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--canvas);
  font-size: var(--t-ui); box-shadow: 0 8px 28px var(--shade); max-width: calc(100vw - 32px); text-align: center;
}
.drop-dialog {
  max-width: min(440px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: var(--t-ui); line-height: 20px;
}
.drop-dialog::backdrop { background: rgba(8,9,10,0.35); }
.drop-dialog h2 { margin: 0 0 12px; font-size: var(--t-title); line-height: 24px; font-weight: 600; letter-spacing: -0.015em; }
.drop-dialog p { margin: 0; color: var(--ink-2); }
.drop-dialog .drop-panel__actions { justify-content: flex-end; margin-top: 24px; }

/* ── the rename fields ─────────────────────────────────────────────────── */
.drop-field { display: block; margin-top: 16px; }
.drop-field__label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: var(--t-head); }
.drop-field__input {
  width: 100%; font-family: var(--sans); font-size: var(--t-name); line-height: 20px;
  padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--panel); color: var(--ink);
}
.drop-field__input:focus-visible { border-color: var(--accent); }
/* The slug is a URL, so it reads in the URL's own face, beside the two parts of
   the address the person does not choose. */
.drop-field__url { display: flex; align-items: center; gap: 0; font-family: var(--mono); font-size: 12.5px; }
.drop-field__prefix, .drop-field__suffix { color: var(--ink-2); white-space: nowrap; }
.drop-field__input--slug { font-family: var(--mono); font-size: 12.5px; min-width: 0; margin: 0 2px; }
/* Invalid only once something has been typed: an empty field on open is not an
   error the person has made yet. */
.drop-field__input--slug:not(:placeholder-shown):invalid { border-color: var(--st-crit); }
.drop-field__note { margin-top: 12px !important; color: var(--tx-warn) !important; font-size: var(--t-meta); }

/* ── the drop login approval form ──────────────────────────────────────── */
.drop-card__form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.drop-code { font: inherit; font-family: var(--mono); text-transform: uppercase; }
.drop-code:focus-visible { border-color: var(--accent); }