/* draft-sheet.css — the slide-out shell that hosts the Draft Surface over a grant page.
 *
 * Pairs with js/draft-sheet.src.js and css/draft-surface.css (which carries the `.ds-*`
 * rules and the tokens, scoped to `.ds-scope`).
 *
 * ⚠ Z-STACK. The grant page already runs three fixed/sticky layers: the section rail
 * (z-900), the AI-arrival bar (z-9000) and the premium bar (z-9998). The sheet has to clear
 * all of them, so it sits at 10000/10001. The premium bar is additionally hidden by JS while
 * the sheet is open — being on top is not enough when the thing underneath is a competing
 * ask for the same person's attention.
 */

/* ⚠ The HTML `hidden` attribute is silently beaten by ANY rule that sets `display` — without
   this the closed sheet stays a full-screen invisible click-blocker over the page. */
.dsheet[hidden] { display: none !important; }

.dsheet { position: fixed; inset: 0; z-index: 10000; }

.dsheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 25, 23, .38);
  opacity: 0;
  transition: opacity .22s ease;
}
.dsheet--in .dsheet__backdrop { opacity: 1; }

.dsheet__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  z-index: 10001;
  width: min(680px, 100vw);
  display: flex; flex-direction: column;
  background: var(--cream, #FAF7F2);
  box-shadow: -18px 0 46px rgba(28, 25, 23, .17);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1), width .26s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}
.dsheet--in .dsheet__panel { transform: translateX(0); }

/* ── the room is sized to what is in it ──────────────────────────────────────
   Before the draft exists the panel held one ~200px card above roughly 700 measured pixels of
   empty cream: a room built for a document, shown while we are still asking one question. The
   surface reports its stage (draft-surface.js setStage → DraftSheet.stage) and we narrow, then
   widen when the draft lands.

   ⚠ DESKTOP ONLY, and the media query is load-bearing rather than tidiness. `.dsheet--compact
   .dsheet__panel` is (0,0,2,0) and the mobile `.dsheet__panel{width:100%}` further down is
   (0,0,1,0) — so without this guard the compact rule would win on phones and shrink the bottom
   sheet, introducing a defect while fixing another. */
@media (min-width: 641px) {
  .dsheet--compact .dsheet__panel { width: min(520px, 100vw); }
}

/* ── bar ─────────────────────────────────────────────────────────────────── */
.dsheet__bar {
  flex: 0 0 auto;                      /* ⚠ a flex column shrinks children before it scrolls */
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, rgba(28, 25, 23, .12));
  background: var(--paper, #FFFDF9);
}
.dsheet__kicker {
  /* ⚠ 0 0 auto, not 1 1 auto: as a grower it ate the row and wrapped "YOUR DRAFT" onto
     two lines in 11px mono, which reads as a broken bar. It is a label, so it sizes to
     its text and the TITLE is what grows. */
  flex: 0 0 auto; min-width: 0;
  white-space: nowrap;
  margin: 0;
  font-family: var(--mono, monospace);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest, #2D6A4F);
}
.dsheet__x {
  flex: 0 0 auto;
  order: 9;                            /* always last in the row, at either breakpoint */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;           /* full touch target, not a 24px glyph */
  margin: -6px -6px -6px 0;
  padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--ink-60, #5C5550);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.dsheet__x svg { width: 20px; height: 20px; }
.dsheet__x:hover { background: var(--cream-dk, #F1EBE1); color: var(--ink, #1C1917); }
.dsheet__x:focus-visible { outline: 2px solid var(--forest, #2D6A4F); outline-offset: 2px; }

.dsheet__prog {
  /* ⚠ On desktop this must GROW between the kicker and the close button, not claim a full
     row. With `order: 3` and `flex: 1 1 100%` the title rendered AFTER the ✕, so the close
     control sat between the label and the thing it labels — the bar read as three unrelated
     fragments. Mobile re-introduces the wrap deliberately (see the media query). */
  flex: 1 1 auto; min-width: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 15px; font-weight: 600; line-height: 1.25;
  color: var(--ink, #1C1917);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsheet__prog:empty { display: none; }

.dsheet__grabber { display: none; }

/* ── body ────────────────────────────────────────────────────────────────── */
.dsheet__body {
  flex: 1 1 auto; min-height: 0;       /* min-height:0 or the child never scrolls */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;        /* don't scroll the locked page behind */
}

/* The surface's page wrapper centres itself in a 1080px column — correct on draft.html,
   wrong inside a 680px panel. Re-home it rather than forking the surface's own CSS. */
.dsheet__body .ds { max-width: none; margin: 0; padding: 22px 20px 60px; }
/* Two columns cannot breathe in a side panel; the rail stacks under the document. */
.dsheet__body .ds-grid { display: block; }
.dsheet__body .ds-rail { margin-top: 22px; }
/* ⚠ The surface's head repeats the program title and a second kicker directly under a bar
   that already names it, over a page that names it again — the same fact three times in
   three visual languages. The bar owns the identity inside the sheet. */
.dsheet__body .ds-head { display: none; }

/* ── the page behind ─────────────────────────────────────────────────────── */
body.dsheet-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* ── mobile: a bottom sheet, because a 390px side panel IS a takeover ─────── */
@media (max-width: 640px) {
  .dsheet__panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 92vh; height: 92dvh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 40px rgba(28, 25, 23, .2);
    transform: translateY(100%);
  }
  .dsheet--in .dsheet__panel { transform: translateY(0); }
  /* ⚠ MEASURED 156px of fixed chrome on an 844px phone, with the close X CENTRED in the
     middle of it — it read as a stray glyph rather than a control, and the draft (the entire
     point) started below y=435. justify-content:center was doing that. One compact row:
     kicker and title on the left, X pinned top-right exactly as on desktop. */
  .dsheet__bar { padding: 8px 12px 10px; flex-wrap: wrap; justify-content: flex-start;
    align-items: center; column-gap: 8px; row-gap: 2px; }
  .dsheet__grabber {
    display: block; order: -1;
    flex: 0 0 100%;
    width: 40px; height: 4px; margin: 0 auto 8px;
    border-radius: 99px; background: var(--line, rgba(28, 25, 23, .12));
  }
  .dsheet__kicker { text-align: left; flex: 0 0 auto; }
  /* Mobile has the height to give the program its own line, and the bar is wider than the
     title is long far less often. */
  /* Title on its own line but CLAMPED to two, so a long program name cannot push the draft
     off the first screen. */
  .dsheet__prog { flex: 1 1 100%; order: 3; white-space: normal; font-size: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dsheet__x { order: 2; margin-left: auto; }
  .dsheet__body .ds { padding: 18px 16px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .dsheet__panel, .dsheet__backdrop { transition: none; }
}

/* ── The way back in ──────────────────────────────────────────────────────
   A draft the visitor can no longer reach is worse than one we never wrote: they watched us
   make it. This sits quietly at the bottom-right whenever a stored draft exists and the
   sheet is closed. Below the sheet's own layer, above the page's sticky bar. */
.dsheet-resume{
  position:fixed;right:18px;bottom:18px;z-index:9990;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:10px 16px;min-height:48px;
  border:1px solid rgba(45,106,79,.35);border-radius:12px;
  background:#FFFDF9;color:#1C1917;
  box-shadow:0 10px 30px rgba(28,25,23,.16);
  font-family:'DM Sans',system-ui,sans-serif;cursor:pointer;text-align:left;
  transition:transform .15s ease,box-shadow .15s ease;
}
.dsheet-resume:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(28,25,23,.2)}
.dsheet-resume:focus-visible{outline:2px solid #2D6A4F;outline-offset:2px}
.dsheet-resume__k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#2D6A4F}
.dsheet-resume__t{font-size:13.5px;font-weight:500}
@media (max-width:640px){
  .dsheet-resume{left:14px;right:14px;bottom:14px;align-items:center;text-align:center}
}