/* ============================================================
   DEBRIEF — brief.css. Added 2026-09-22 for the shared pages
   at /b/<id>, which are rendered on the server (api/brief.js)
   and cannot carry result.html's inline stylesheet.

   Everything up to the "shared page furniture" mark is
   result.html's OWN <style> block, lifted whole, with the font
   paths made absolute (a page at /b/<id> would otherwise look
   for /b/fonts/). If result.html's styles change, re-lift them;
   do not fork a second copy by hand.
   ============================================================ */
@font-face{font-family:'Gilda Display';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/gilda-display-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Gilda Display';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/gilda-display-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/libre-franklin-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/libre-franklin-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/libre-franklin-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/libre-franklin-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   DEBRIEF — the brief (result page). Exploration, 2026-09-02.

   Same language as bw-circle-scroll.html: one bright ground,
   one ink, Gilda + Libre Franklin. The page opens on the small
   resolved dot the home page ends on — you arrive already
   zoomed out.

   The content on this page is REAL tool output, pasted by
   Maciej. Nothing here is written to look like a result.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box }
body{
  margin:0;
  font-family:'Libre Franklin',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:#f7f7f5; color:#111;
  --bg:#f7f7f5; --fg:#111;
  --fg-dim: color-mix(in oklab, var(--fg) 66%, var(--bg));
  --fg-faint: color-mix(in oklab, var(--fg) 38%, var(--bg));
  --hair: color-mix(in oklab, var(--fg) 22%, var(--bg));
  --hair-soft: color-mix(in oklab, var(--fg) 11%, var(--bg));
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(22px,5vw,72px) }

/* ---------- top bar ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 0 0;
}
.brandline{ display:flex; align-items:baseline; gap:13px }
.wordmark{ font-family:'Gilda Display',Georgia,serif; font-size:19px; color:var(--fg) }
.standfirst{
  font-size:11.5px; letter-spacing:.05em; color:var(--fg-faint);
  border-left:1px solid var(--hair); padding-left:13px;
}
.again{
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--fg); text-decoration:none;
  border:1px solid var(--hair); border-radius:2px; padding:9px 15px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.again:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg) }

/* ---------- masthead: the resolved dot ---------- */
.head{
  display:grid; justify-items:center; text-align:center;
  padding: clamp(54px,9vh,104px) 0 clamp(40px,6vh,66px);
  border-bottom:1px solid var(--hair-soft);
}
/* the dot the home page ends on — you arrive already zoomed out */
.dot{ width:34px; height:34px; border-radius:50%; background:var(--fg); margin-bottom:34px }
.head__kicker{
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-faint); margin:0 0 16px;
}
.head h1{
  font-family:'Gilda Display',Georgia,serif; font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; letter-spacing:-.012em;
  margin:0 0 18px; color:var(--fg); max-width:20ch;
}
.meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);
  margin:0;
}
.meta b{ color:var(--fg-dim); font-weight:600 }

/* ---------- sections ---------- */
.sec{
  display:grid; grid-template-columns:270px 1fr; gap:clamp(28px,5vw,64px);
  padding: clamp(38px,6vh,58px) 0;
  border-bottom:1px solid var(--hair-soft);
}
.rail{ position:sticky; top:32px; align-self:start }
.rail__n{
  display:block; font-size:10px; font-weight:600; letter-spacing:.22em;
  color:var(--fg-faint); margin-bottom:13px;
}
.rail h2{
  font-family:'Gilda Display',Georgia,serif; font-weight:400;
  font-size:1.3rem; line-height:1.24; margin:0 0 12px; color:var(--fg);
}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-faint);
}
.tag i{ width:8px; height:8px; flex:none }
/* the notation, identical to the home page */
.tag--fact  i{ background:var(--fg) }
.tag--frame i{ background:var(--fg-dim) }
.tag--gap   i{ border:1px dashed var(--fg-dim) }

.content{ max-width:70ch }
.content > p{
  font-size:15px; line-height:1.72; color:var(--fg-dim); margin:0 0 16px;
}
.content > p:last-child{ margin-bottom:0 }

.claims{ list-style:none; margin:0; padding:0 }
.claims li{
  position:relative; padding-left:26px; margin-bottom:16px;
  font-size:15px; line-height:1.72; color:var(--fg-dim);
}
.claims li:last-child{ margin-bottom:0 }
.claims li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:8px; height:8px;
}
.claims--fact  li::before{ background:var(--fg) }
.claims--frame li::before{ background:var(--fg-dim) }
.claims--gap   li::before{ border:1px dashed var(--fg-dim) }

/* Claimed (2026-09-23): a solid outline — something is asserted, nothing
   fills it in. Sits between the filled fact mark and the dashed absence. */
.tag--claim i{ border:1px solid var(--fg-dim) }
.claims--claim li::before{ border:1px solid var(--fg-dim) }
.subgroup{ margin-top:30px; padding-top:26px; border-top:1px solid var(--hair-soft) }
.subgroup > .tag{ display:flex; margin-bottom:16px }

/* the one-tap route back to the article (2026-09-23) */
.orig{ margin:18px 0 0; font-size:13px; letter-spacing:.01em }
.orig a{
  color:var(--fg-dim); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hair); transition:color .2s ease, text-decoration-color .2s ease;
}
.orig a:hover{ color:var(--fg); text-decoration-color:var(--fg) }
.brief-actions__sub b{ color:var(--fg); font-weight:600 }

/* This week's debrief (2026-09-23): Maciej's one line on why he picked it,
   in the display face, so it reads as the editor's voice and not the tool's. */
.pick{
  font-family:'Gilda Display',Georgia,serif; font-size:clamp(1.02rem,1.6vw,1.18rem);
  line-height:1.5; color:var(--fg-dim); max-width:52ch; margin:22px auto 0;
  text-wrap:balance;
}
.nowrap{ white-space:nowrap }
.end__week{ margin:18px 0 0; font-size:13px }
.end__week a{
  color:var(--fg-dim); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hair); transition:color .2s ease, text-decoration-color .2s ease;
}
.end__week a:hover{ color:var(--fg); text-decoration-color:var(--fg) }

/* ---------- provenance ---------- */
.prov{
  padding: clamp(38px,6vh,58px) 0 clamp(54px,8vh,86px);
}
.prov__inner{
  border:1px solid var(--hair); border-radius:2px;
  padding: clamp(24px,3.4vw,38px);
  max-width:820px;
}
.prov__label{
  font-size:9px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-faint); margin:0 0 14px;
}
.prov__inner p{
  font-size:14px; line-height:1.72; color:var(--fg-dim); margin:0 0 12px;
}
.prov__inner p:last-child{ margin:0 }

/* ---------- closing ---------- */
.end{
  text-align:center; padding: clamp(56px,9vh,110px) 0;
  border-top:1px solid var(--hair-soft);
}
.end .kicker{
  font-family:'Gilda Display',Georgia,serif;
  font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.26;
  color:var(--fg); max-width:24ch; margin:0 auto 32px;
}
.paste{
  display:flex; align-items:center; gap:10px;
  max-width:540px; margin:0 auto; text-align:left;
  border:1px solid var(--hair); border-radius:2px;
  padding:6px 6px 6px 18px;
  transition:border-color .3s ease;
}
.paste:focus-within{ border-color:var(--fg) }
.paste input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:15px; color:var(--fg); padding:14px 0;
}
.paste input::placeholder{ color:var(--fg-faint) }
.btn{
  flex:none; cursor:pointer; border:1px solid var(--fg);
  background:var(--fg); color:var(--bg);
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.02em;
  padding:13px 20px; border-radius:2px;
  transition:background .22s ease, color .22s ease;
}
.btn:hover{ background:transparent; color:var(--fg) }
.micro{ font-size:12px; color:var(--fg-faint); margin:16px 0 0 }

footer{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:28px 0 44px; border-top:1px solid var(--hair-soft);
  font-size:12px; color:var(--fg-faint);
}
footer a{ color:var(--fg-dim) }
.foot-links{ display:flex; flex-wrap:wrap; gap:18px; align-items:center }

@media (max-width:820px){
  .sec{ grid-template-columns:1fr; gap:20px }
  .rail{ position:static }
  .rail h2{ font-size:1.2rem }
  .paste{ flex-wrap:wrap; padding:7px }
  .paste input{ width:100%; padding:12px }
  .btn{ width:100% }
  footer{ flex-direction:column; align-items:flex-start; gap:8px }
}

.limit{ font-size:11.5px; line-height:1.5; color:var(--fg-faint);
  margin:11px auto 0; max-width:46ch; letter-spacing:.02em }
.limit[hidden]{ display:none }
.limit.is-over{ color:var(--fg); font-weight:600 }
.empty{ font-size:14.5px; color:var(--fg-dim); margin:0 }

/* ---------- brief actions (pro & share) ---------- */
.brief-actions{
  margin:clamp(38px,6vh,64px) auto 0;
  /* same space above and below, so the block sits centred between its two
     rules — it used to have none below, and Pro sat on the next line (2026-09-23) */
  padding:clamp(32px,5vh,48px) 16px;
  border-top:1px solid var(--hair-soft);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px;
}
/* Pro is a different decision from Share / PDF, so it is its own group: a
   wider gap above it, a tight one between the note and its button. */
.brief-actions__pro{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin-top:clamp(16px,2.5vh,24px);
}
.brief-actions__row{
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.brief-actions .btn--pro{
  background:var(--fg); color:var(--bg); border:1px solid var(--fg);
  font-size:14px; font-weight:600; padding:13px 26px; border-radius:2px;
  cursor:pointer; transition:transform .2s ease, opacity .2s ease;
}
.brief-actions .btn--pro:hover{
  opacity:.88; transform:translateY(-1px);
}
.brief-actions .btn--share{
  background:transparent; color:var(--fg); border:1px solid var(--hair);
  font-size:14px; font-weight:600; padding:13px 22px; border-radius:2px;
  cursor:pointer; display:inline-flex; align-items:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.brief-actions .btn--share:hover{
  border-color:var(--fg); background:rgba(17,17,17,.04); transform:translateY(-1px);
}
.brief-actions__sub{
  font-size:13.5px; line-height:1.55; color:var(--fg-dim);
  max-width:44ch; margin:0; text-wrap:balance;
}

/* ---------- the waitlist / pro modal ---------- */
.gate{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px }
.gate[hidden]{ display:none }
.gate__scrim{
  position:absolute; inset:0;
  background:color-mix(in oklab, var(--fg) 64%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:gateFade .35s ease;
}
.gate__panel{
  position:relative; width:min(100%,470px);
  background:var(--bg); border:1px solid var(--hair); border-radius:3px;
  padding:clamp(32px,4vw,46px); text-align:center;
  box-shadow:0 40px 90px -34px rgba(17,17,17,.45);
  animation:gateIn .45s cubic-bezier(.165,.84,.44,1);
}
.gate__dot{ display:block; width:12px; height:12px; border-radius:50%;
  background:var(--fg); margin:0 auto 24px }
.gate__panel h2{
  font-family:'Gilda Display',Georgia,serif;
  font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.14; margin:0 0 14px;
}
.gate__panel p{
  font-size:14.5px; line-height:1.65; color:var(--fg-dim);
  max-width:38ch; margin:0 auto 26px;
}
.gate__form{ display:flex; gap:8px; width:100% }
.gate__form[hidden]{ display:none }
.gate__form input{
  flex:1; min-width:0; font-family:inherit; font-size:15px; color:var(--fg);
  background:transparent; border:1px solid var(--hair); border-radius:2px;
  padding:13px 14px; outline:0;
  transition:border-color .2s ease;
}
.gate__form input:focus{ border-color:var(--fg) }
.gate__form input::placeholder{ color:var(--fg-faint) }
.gate__form .btn{ flex-shrink:0; white-space:nowrap }
.gate__micro{ font-size:11.5px; color:var(--fg-faint); margin:16px auto 0 !important }
.gate__x{
  position:absolute; top:10px; right:12px; width:32px; height:32px;
  background:none; border:0; cursor:pointer; color:var(--fg-faint);
  font-size:20px; line-height:1; border-radius:2px;
  transition:color .2s ease;
}
.gate__x:hover{ color:var(--fg) }
@keyframes gateIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes gateFade{ from{ opacity:0 } to{ opacity:1 } }

@media (max-width:760px){
  .brief-actions__row{ flex-direction:column; width:100% }
  .brief-actions .btn--pro, .brief-actions .btn--share{ width:100%; justify-content:center }
  .brief-actions__pro{ width:100% }
  .gate__panel{ padding:36px 20px 28px; width:min(100%, 390px) }
  .gate__form{ flex-direction:column; gap:10px }
  .gate__form input{ width:100%; min-height:48px; font-size:16px; text-align:center }
  .gate__form .btn{ width:100%; min-height:48px; justify-content:center }
}

/* ---------- print styles for PDF export ---------- */
@media print{
  body{ background:#fff !important; color:#000 !important; font-size:10.5pt }
  .top, .end, .brief-actions, .gate, footer, #limit, .shared{ display:none !important }
  .wrap{ max-width:100% !important; padding:0 !important; margin:0 !important }
  .head{ padding-top:10pt !important; margin-bottom:18pt !important; border-bottom:1.5pt solid #111 !important }
  .head::before{
    content:"DEBRIEF — INTELLIGENCE DECONSTRUCTION · DEBRIEF.DIGITAL";
    display:block; font-size:8pt; letter-spacing:.15em; font-weight:600;
    margin-bottom:12pt; color:#444;
  }
  .sec{ break-inside:avoid; page-break-inside:avoid; padding:14pt 0 !important; border-top:.5pt solid #ccc !important }
  .rail{ position:static !important }
  .orig__arrow{ display:none }
  .orig a{ color:#000 !important; text-decoration:none !important }
  .orig a::after{ content:" — " attr(href); color:#444; word-break:break-all }
  .prov{ break-inside:avoid; page-break-inside:avoid; padding:14pt 0 !important }
}

/* ---------- shared page furniture — /b/<id> only ---------- */
.end .btn{ display:inline-block; text-decoration:none }
.shared{
  font-size:11.5px; letter-spacing:.04em; color:var(--fg-faint);
  text-align:center; margin:0 0 26px;
}
.shared a{ color:var(--fg-dim) }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.brief-actions [hidden]{ display:none }
.brief-actions .btn--share svg{ margin-right:7px; flex:none }

/* Share (2026-09-23): a <details> so the menu opens with no script; the
   script swaps in the phone's own share sheet where there is one. */
.share{ position:relative }
.share > summary{ list-style:none; user-select:none }
.share > summary::-webkit-details-marker{ display:none }
.share[open] > summary{ border-color:var(--fg) }
.share__menu{
  position:absolute; z-index:20; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%); width:min(360px, calc(100vw - 32px));
  background:var(--bg); border:1px solid var(--hair); border-radius:3px;
  padding:14px; text-align:left;
  box-shadow:0 24px 60px -28px rgba(17,17,17,.4);
  animation:shareIn .22s cubic-bezier(.165,.84,.44,1);
}
@keyframes shareIn{ from{ opacity:0; transform:translate(-50%,-4px) } to{ opacity:1; transform:translate(-50%,0) } }
.share__row{ display:flex; gap:8px }
.share__row input{
  flex:1; min-width:0; font-family:inherit; font-size:13px; color:var(--fg);
  background:transparent; border:1px solid var(--hair); border-radius:2px;
  padding:10px 12px; outline:0;
}
.share__row input:focus{ border-color:var(--fg) }
.share__row .btn{ padding:10px 16px; width:auto }
.share__links{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px;
}
.share__links a{
  display:block; text-align:center; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--fg);
  border:1px solid var(--hair); border-radius:2px; padding:10px 4px;
  transition:border-color .2s ease, background .2s ease;
}
.share__links a:hover{ border-color:var(--fg); background:rgba(17,17,17,.04) }
@media (prefers-reduced-motion:reduce){ .share__menu{ animation:none } }
@media (max-width:760px){
  .brief-actions__row{ flex-direction:column; width:100%; align-items:stretch }
  .share > summary{ width:100%; justify-content:center }
  .share__links{ grid-template-columns:repeat(2,1fr) }
}
.gone{ text-align:center; padding:clamp(56px,9vh,110px) 0; display:grid; justify-items:center }
.gone__h{
  font-family:'Gilda Display',Georgia,serif; font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; margin:0 0 18px; color:var(--fg);
}
.gone__p{ font-size:15px; line-height:1.65; color:var(--fg-dim); max-width:46ch; margin:0 0 28px }
.gone .btn{ display:inline-block; text-decoration:none }

/* ---------- phone width ----------
   A shared page is what gets opened from a post on a phone, so the two
   things in the lifted stylesheet that can exceed a narrow screen are
   guarded here: the top bar (wordmark + standfirst + button cannot shrink
   below their content) and the headline's 20ch cap, which in Gilda can be
   wider than the screen. privacy.html hides the standfirst the same way. */
@media (max-width:820px){
  .standfirst{ display:none }
  .top{ flex-wrap:wrap }
  .head h1{ max-width:100%; overflow-wrap:anywhere }
  .content > p, .claims li, .prov__inner p{ overflow-wrap:anywhere }
  .shared{ padding:0 8px }
}