/* =========================================================================
   poc-site - lead-kit multi-page site shell
   Design system for a bespoke client demo at the CRAFT.md bar
   (Vantage / Enchanted / Roof King / WealthHealth).

   Self-contained, zero dependencies. Theme is entirely in the :root tokens
   below; js/brief.js overrides the palette tokens at runtime from brief.json,
   so reskinning a lead = editing brief.json (or these defaults), nothing else.

   Sections:
     1. Tokens (:root)          5. Buttons + chips
     2. Reset + base            6. Cards (photo-first) + grids
     3. A11y + motion           7. Sections, hero, page-hero
     4. Chrome: ribbon/nav/foot 8. Forms (state machine) + footer
   ========================================================================= */

/* 1. TOKENS ------------------------------------------------------------- */
:root{
  /* Palette - placeholder defaults; brief.js overrides from brief.json.
     Keep these tasteful so an un-themed shell still reads as finished. */
  --ink:        #15171c;   /* primary text                 */
  --ink-soft:   #4a4f5a;   /* secondary text               */
  --paper:      #ffffff;   /* page background              */
  --paper-2:    #f5f6f8;   /* muted section background     */
  --line:       #e4e7ec;   /* hairlines / borders          */
  --brand:      #1f513f;   /* core brand (from logo)       */
  --brand-ink:  #ffffff;   /* text on brand                */
  --brand-soft: #eef4f1;   /* brand tint background        */
  --accent:     #c98a3a;   /* secondary brand accent       */
  --pop:        #e8703a;   /* energy / CTA pop             */
  --pop-ink:    #ffffff;   /* text on pop                  */
  --pb-green:   #0BC75E;   /* PlainBlack mark (fixed)      */

  /* Type - fluid, one clamp range per step, no breakpoint jumps */
  --font-display: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-h1:  clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem);
  --t-h2:  clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem);
  --t-h3:  clamp(1.18rem, 1rem + 0.8vw, 1.5rem);
  --t-lead:clamp(1.05rem, 0.98rem + 0.42vw, 1.28rem);
  --t-body:1.0625rem;
  --t-sm:  0.875rem;
  --t-xs:  0.75rem;

  /* Space - one scale, used everywhere (no ad-hoc values) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;  --s-7: 3rem;  --s-8: 4.5rem; --s-9: 7rem;

  --wrap: 1120px;
  --wrap-narrow: 760px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-btn: 8px;   /* buttons: modest radius, never a pill (style canon) */
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16,20,28,.06), 0 1px 1px rgba(16,20,28,.04);
  --shadow-2: 0 6px 20px rgba(16,20,28,.08), 0 2px 6px rgba(16,20,28,.05);
  --shadow-3: 0 22px 48px rgba(16,20,28,.16), 0 6px 16px rgba(16,20,28,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .55s;

  --ribbon-h: 34px;
  --topbar-h: 66px;
}

/* 2. RESET + BASE ------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.08; margin:0 0 var(--s-4); font-weight:800; letter-spacing:-.01em; }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); font-weight:700; }
p{ margin:0 0 var(--s-4); }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ font-weight:700; }
ul,ol{ margin:0 0 var(--s-4); padding-left:1.2em; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
.eyebrow{
  font-family:var(--font-mono); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
  margin:0 0 var(--s-3);
}
.section-lead{ font-size:var(--t-lead); color:var(--ink-soft); max-width:62ch; }
.center{ text-align:center; margin-inline:auto; }

/* 3. A11Y + MOTION ------------------------------------------------------ */
.skip-link{
  position:absolute; left:var(--s-3); top:calc(-1 * var(--topbar-h) - 60px);
  z-index:200; background:var(--ink); color:#fff; padding:.6rem 1rem;
  border-radius:var(--radius-sm); transition:top .2s var(--ease);
}
.skip-link:focus{ top:var(--s-3); text-decoration:none; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }
:where(a,button,input,textarea,select):focus:not(:focus-visible){ outline:none; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.revealed{ opacity:1; transform:none; }
.reveal[data-reveal-delay="1"]{ transition-delay:.08s; }
.reveal[data-reveal-delay="2"]{ transition-delay:.16s; }
.reveal[data-reveal-delay="3"]{ transition-delay:.24s; }
.reveal[data-reveal-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* 4. CHROME: demo ribbon, topbar, nav, mobile drawer -------------------- */
.demo-ribbon{
  background:var(--ink); color:#fff; font-size:var(--t-xs);
  letter-spacing:.01em; height:var(--ribbon-h); display:flex; align-items:center;
}
.demo-ribbon .wrap{ display:flex; gap:var(--s-4); align-items:center; justify-content:center; flex-wrap:wrap; }
.demo-ribbon span{ opacity:.86; }
.demo-ribbon a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }

.topbar{
  position:sticky; top:0; z-index:90; background:var(--paper);
  border-bottom:1px solid var(--line);
  /* No backdrop-filter / transform here: either would make .topbar the
     containing block for the position:fixed mobile drawer nested inside it,
     collapsing the drawer to the topbar's height instead of the viewport. */
}
.topbar__inner{ height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
.brand-lockup{ display:flex; align-items:center; gap:var(--s-3); font-family:var(--font-display); font-weight:800; font-size:1.16rem; color:var(--ink); letter-spacing:-.02em; }
.brand-lockup:hover{ text-decoration:none; }
.brand-lockup img{ height:30px; width:auto; }

.nav{ display:flex; align-items:center; gap:var(--s-5); }
.nav a{ color:var(--ink); font-size:var(--t-sm); font-weight:600; }
.nav a:hover{ color:var(--brand); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--brand); }
.nav a[aria-current="page"]::after{ content:""; display:block; height:2px; background:var(--brand); border-radius:2px; margin-top:3px; }
.nav .nav-cta{
  background:var(--pop); color:var(--pop-ink); padding:.55rem 1rem;
  border-radius:var(--radius-btn); font-weight:700;
}
.nav .nav-cta:hover{ filter:brightness(1.06); color:var(--pop-ink); }
.nav .nav-cta[aria-current="page"]::after{ display:none; }

.nav-toggle{
  display:none; appearance:none; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); width:42px; height:42px; border-radius:var(--radius-sm);
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-scrim{
  position:fixed; inset:0; background:rgba(16,20,28,.42); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease); z-index:99;
}
.nav-scrim.open{ opacity:1; visibility:visible; }

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:fixed; top:0; right:0; bottom:0; width:min(82vw,330px);
    flex-direction:column; align-items:flex-start; gap:var(--s-4);
    background:var(--paper); padding:calc(var(--topbar-h) + var(--s-5)) var(--s-6) var(--s-6);
    transform:translateX(100%); transition:transform .34s var(--ease);
    z-index:100; overflow-y:auto;
    /* NOTE: box-shadow lives ONLY on .open (below). A shadow on the base
       class bleeds a dark gradient onto the page's right edge - a recurring
       bug. Do not move it up here. */
  }
  .nav.open{ transform:translateX(0); box-shadow:-18px 0 50px rgba(16,20,28,.22); }
  .nav a{ font-size:1.05rem; }
  .nav .nav-cta{ margin-top:var(--s-2); }
}

/* 5. BUTTONS + CHIPS ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--brand); color:var(--brand-ink); border:1px solid transparent;
  font-family:var(--font-body); font-weight:700; font-size:var(--t-sm);
  padding:.8rem 1.35rem; border-radius:var(--radius-btn); cursor:pointer;
  transition:transform .15s var(--ease), filter .15s var(--ease), box-shadow .15s var(--ease);
  text-decoration:none; line-height:1.1;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); text-decoration:none; box-shadow:var(--shadow-2); }
.btn:active{ transform:translateY(0); }
.btn--pop{ background:var(--pop); color:var(--pop-ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); filter:none; box-shadow:none; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }

/* No pill/chip tag clusters: style canon (see CRAFT.md). */

/* 6. CARDS + GRIDS ------------------------------------------------------ */
.grid{ display:grid; gap:var(--s-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-5); box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.card__k{ font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin:0 0 var(--s-2); }
.card h3{ margin-bottom:var(--s-2); }
.card p:last-child{ margin-bottom:0; }
.card__icon{ width:38px; height:38px; color:var(--brand); margin-bottom:var(--s-3); }

/* Photo-first card: image bleeds to the card edges (negative-margin overflow) */
.card--photo{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card--photo .card__media{ aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); }
.card--photo .card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card--photo:hover .card__media img{ transform:scale(1.04); }
.card--photo .card__body{ padding:var(--s-5); }
.card--photo .card__body p:last-child{ margin-bottom:0; }
.img-slot{ display:grid; place-items:center; color:var(--ink-soft); font-size:var(--t-xs); font-family:var(--font-mono); background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 10px,#eef0f3 10px,#eef0f3 20px); }

/* 7. SECTIONS, HERO, PAGE-HERO ------------------------------------------ */
.section{ padding-block:var(--s-8); }
.section + .section{ padding-top:0; }
.section--muted{ background:var(--paper-2); }
.section--brand{ background:var(--brand); color:var(--brand-ink); }
.section--brand .eyebrow,.section--brand h2,.section--brand h3{ color:var(--brand-ink); }
.section--brand .section-lead{ color:color-mix(in srgb, var(--brand-ink) 82%, transparent); }
.section__head{ max-width:64ch; margin-bottom:var(--s-6); }

.hero{ padding-block:var(--s-8) var(--s-7); position:relative; }
.hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-7); align-items:center; }
@media (max-width: 860px){ .hero__grid{ grid-template-columns:1fr; gap:var(--s-6); } }
.hero h1{ margin-bottom:var(--s-4); }
.hero .section-lead{ margin-bottom:var(--s-2); }
.hero__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-3); background:var(--paper-2); }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:var(--s-6); margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--line); }
.stat__n{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,1.1rem+1.6vw,2rem); color:var(--brand); line-height:1; }
.stat__l{ font-size:var(--t-sm); color:var(--ink-soft); margin-top:var(--s-1); }

.page-hero{ background:var(--brand-soft); padding-block:var(--s-7); border-bottom:1px solid var(--line); }
.page-hero h1{ margin-bottom:var(--s-3); }
.crumb{ font-size:var(--t-sm); color:var(--ink-soft); margin-bottom:var(--s-4); }
.crumb a{ color:var(--ink-soft); }
.crumb a:hover{ color:var(--brand); }

.cta-strip{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-5); }
.cta-strip h2{ color:#fff; margin:0; max-width:22ch; }
.cta-strip p{ color:rgba(255,255,255,.78); margin:.4rem 0 0; }

.feature{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); align-items:center; }
.feature--flip{ direction:rtl; } .feature--flip > *{ direction:ltr; }
@media (max-width: 800px){ .feature{ grid-template-columns:1fr; gap:var(--s-5); } .feature--flip{ direction:ltr; } }
.feature__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow-2); background:var(--paper-2); }
.feature__media img{ width:100%; height:100%; object-fit:cover; }

/* 8. FORMS (state machine) + FOOTER ------------------------------------- */
.form{ max-width:var(--wrap-narrow); }
.fieldset{ border:0; padding:0; margin:0 0 var(--s-5); }
.fieldset legend{ font-family:var(--font-display); font-weight:700; font-size:var(--t-h3); padding:0; margin-bottom:var(--s-3); }
.field{ margin-bottom:var(--s-4); }
.field label{ display:block; font-weight:600; font-size:var(--t-sm); margin-bottom:var(--s-2); }
.input,.textarea,select.input{
  width:100%; font:inherit; font-size:var(--t-body); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.7rem .85rem; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus,.textarea:focus,select.input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none; }
.textarea{ min-height:120px; resize:vertical; }
.help{ display:block; font-size:var(--t-sm); color:var(--ink-soft); margin-bottom:var(--s-2); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.savebar{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-5); }
.savestatus{ display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--t-sm); color:var(--ink-soft); }
.savestatus .dot{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .2s var(--ease); }
.savestatus[data-state="saving"] .dot{ background:var(--accent); animation:pulse 1s var(--ease) infinite; }
.savestatus[data-state="saved"] .dot{ background:var(--pb-green); }
.savestatus[data-state="error"] .dot{ background:#d64545; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.site-footer{ background:var(--paper-2); border-top:1px solid var(--line); padding-block:var(--s-7) var(--s-6); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-6); margin-bottom:var(--s-6); }
@media (max-width: 720px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s-5); } }
.footer-col h4{ font-size:var(--t-sm); text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); color:var(--ink-soft); margin-bottom:var(--s-3); font-weight:600; }
.footer-col a{ display:block; color:var(--ink); font-size:var(--t-sm); margin-bottom:var(--s-2); }
.footer-col a:hover{ color:var(--brand); }
.footer-note{ font-size:var(--t-sm); color:var(--ink-soft); }
.footer-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); padding-top:var(--s-5); border-top:1px solid var(--line); font-size:var(--t-sm); color:var(--ink-soft); }
/* Resolved lead price. brief.js fills [data-price-chip] with the service label
   (e.g. "$2,500 +GST"); it stays empty for TBD/custom/absent, and :empty hides
   the whole chip (separator dot included) so nothing dangles. */
.price-chip{ font-weight:700; white-space:nowrap; }
.price-chip:empty, [data-price-blurb]:empty{ display:none; }
.demo-ribbon .price-chip{ opacity:1; }
.demo-ribbon .price-chip::before,
.footer-bar .price-chip::before{ content:"\00b7"; font-weight:400; opacity:.5; margin-inline:.5rem .35rem; }
/* PlainBlack watermark. The fibonacci spiral mark, icon-only (we never use a
   "Built by PlainBlack" wordmark). Recolored to the demo's accent via a CSS mask
   over the canonical /assets/pb-mark.svg; the icon fill and its pulsing glow both
   read --pb-c, so the colour and the glow ALWAYS match. Override --pb-mark on the
   footer to use the partner's colour when the footer BG would clash with --accent. */
.pb-mark-link{ display:inline-flex; align-items:center; line-height:0; }
.pb-mark-link:hover{ text-decoration:none; }
.pb-mark{
  --pb-c: var(--pb-mark, var(--accent));
  display:inline-block; width:26px; height:26px; background:var(--pb-c);
  -webkit-mask:url(/assets/pb-mark.svg) center / contain no-repeat;
          mask:url(/assets/pb-mark.svg) center / contain no-repeat;
  filter:drop-shadow(0 0 1px var(--pb-c));
  animation:pbpulse 2.6s var(--ease) infinite;
}
@keyframes pbpulse{
  0%,100%{ transform:scale(1);    opacity:.85; filter:drop-shadow(0 0 1px var(--pb-c)); }
  50%    { transform:scale(1.12); opacity:1;   filter:drop-shadow(0 0 8px var(--pb-c)); }
}
.pb-mark-link:hover .pb-mark{ filter:drop-shadow(0 0 9px var(--pb-c)); transform:scale(1.08); }

/* Default AI assistant. Injected by js/chat.js at the bottom-right. It never
   shares a corner with the PlainBlack mark (which sits in the footer, left), so
   the two icons never blend or overlay. */
.chat{ position:fixed; right:clamp(14px,3vw,22px); bottom:clamp(14px,3vw,22px); z-index:70; }
.chat-fab{
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--brand); color:var(--brand-ink); box-shadow:var(--shadow-3);
  display:grid; place-items:center; transition:transform .16s var(--ease), filter .16s var(--ease);
}
.chat-fab:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.chat-fab svg{ width:26px; height:26px; }
.chat[data-open="true"] .chat-fab__open{ display:none; }
.chat-fab__close{ display:none; }
.chat[data-open="true"] .chat-fab__close{ display:block; }
.chat-panel{
  position:absolute; right:0; bottom:70px; width:min(86vw,340px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-3); overflow:hidden; display:flex; flex-direction:column;
}
.chat-panel[hidden]{ display:none; }
.chat-head{ background:var(--brand); color:var(--brand-ink); padding:.7rem .9rem; display:flex; align-items:center; justify-content:space-between; }
.chat-head strong{ font-family:var(--font-display); font-size:1rem; }
.chat-head button{ background:none; border:0; color:inherit; font-size:1.35rem; line-height:1; cursor:pointer; padding:0 .2rem; }
.chat-log{ display:flex; flex-direction:column; gap:.55rem; padding:1rem; max-height:46vh; overflow-y:auto; }
.chat-msg{ padding:.55rem .8rem; border-radius:13px; max-width:86%; font-size:var(--t-sm); line-height:1.45; }
.chat-msg--bot{ background:var(--paper-2); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-msg--me{ background:var(--brand); color:var(--brand-ink); align-self:flex-end; border-bottom-right-radius:4px; }
.chat-form{ display:flex; gap:.4rem; padding:.6rem; border-top:1px solid var(--line); }
.chat-form input{ flex:1; font:inherit; font-size:var(--t-sm); padding:.55rem .7rem; border:1px solid var(--line); border-radius:var(--radius-pill); }
.chat-form input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.chat-form button{ background:var(--brand); color:var(--brand-ink); border:0; border-radius:var(--radius-btn); padding:.5rem .9rem; font-weight:700; font-size:var(--t-sm); cursor:pointer; }
@media (prefers-reduced-motion: reduce){ .pb-mark{ animation:none; transform:none; filter:drop-shadow(0 0 4px var(--pb-c)); } .savestatus .dot{ animation:none; } .chat-fab{ transition:none; } }

/* =========================================================================
   Feedback annotation layer (modules/feedback/client/annotate.js) base styling.
   The poc-site shell ships these so the feedback widget renders styled out of the
   box; annotate.js injects ONLY the v2 reply/identity styles on top. Built from
   the shell's semantic palette vars, so it follows whatever theme brief.js applies
   (works light or dark). FAB sits bottom-LEFT to clear the chat FAB (bottom-right).
   Only shown when the Hub delivery toggle keeps feedback on.
   ========================================================================= */
.anno-fab { position: fixed; left: 18px; bottom: 18px; z-index: 130; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.anno-fab-main {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: .6rem .95rem; font-family: var(--font-display); font-weight: 700; font-size: .92rem; box-shadow: var(--shadow-3);
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.anno-fab-main svg { color: var(--brand); }
.anno-fab-main:hover { border-color: var(--brand); transform: translateY(-1px); }
.anno-fab-main[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.anno-fab-main[aria-pressed="true"] svg { color: var(--brand-ink); }
.anno-fab-count { background: var(--pb-green); color: #06241a; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; border-radius: var(--radius-pill); padding: .05rem .4rem; }

/* block affordance while in feedback mode */
body.annotating [data-anno] { cursor: pointer; }
body.annotating [data-anno]:hover { outline: 1px dashed var(--brand); outline-offset: 4px; }

/* pin marker on blocks that already have notes */
.anno-pin {
  position: absolute; top: -11px; right: -11px; z-index: 7; cursor: pointer;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--brand); color: var(--brand-ink); border: 2px solid var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,.35);
  font-family: var(--font-mono); font-weight: 700; font-size: .72rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.anno-pin.done { background: var(--ink-soft); color: var(--paper); }

/* popover */
.anno-pop {
  position: fixed; z-index: 140; width: 340px; max-width: calc(100vw - 24px); max-height: 78vh; overflow: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-3); padding: 1rem;
}
.anno-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.anno-pop-label { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .95rem; }
.anno-x { background: none; border: 0; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.anno-x:hover { color: var(--ink); }
.anno-notes { display: grid; gap: .6rem; margin-bottom: .8rem; }
.anno-note { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .75rem; }
.anno-note.resolved { opacity: .62; }
.anno-nmeta { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; font-size: .8rem; color: var(--ink-soft); }
.anno-nmeta b { color: var(--ink); }
.anno-time { font-size: .72rem; }
.anno-badge { margin-left: auto; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 5px; }
.anno-badge.open { color: var(--brand); background: var(--brand-soft); }
.anno-badge.resolved { color: var(--ink-soft); background: var(--paper-2); }
.anno-ntext { color: var(--ink); font-size: .9rem; white-space: pre-wrap; }
.anno-nact { display: flex; gap: .6rem; margin-top: .5rem; }
.anno-nact button { background: none; border: 0; color: var(--ink-soft); font-size: .76rem; cursor: pointer; padding: 0; }
.anno-nact button:hover { color: var(--brand); }
.anno-nact button.del:hover { color: #F2756E; }
.anno-empty { color: var(--ink-soft); font-size: .85rem; padding: .2rem 0 .6rem; }
.anno-addbox textarea {
  width: 100%; box-sizing: border-box; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem .7rem; font-family: var(--font-body); font-size: .92rem; resize: vertical; min-height: 70px;
}
.anno-addbox textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.anno-addrow { display: flex; align-items: center; gap: .7rem; margin-top: .5rem; }
.anno-send { font-family: var(--font-display); font-weight: 700; font-size: .88rem; cursor: pointer; background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand); border-radius: var(--radius-btn); padding: .5rem 1rem; }
.anno-send:hover { filter: brightness(1.08); }
.anno-send[disabled] { opacity: .6; cursor: progress; }
.anno-status { font-size: .8rem; color: var(--ink-soft); }
.anno-status.saving { color: var(--pop); }
.anno-status.saved { color: var(--pb-green); }
.anno-status.error { color: #C0392B; }
.anno-priv { font-size: .72rem; color: var(--ink-soft); margin: .5rem 0 0; }
.anno-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 560px) {
  .anno-fab { left: 12px; bottom: 12px; }
  .anno-fab-label { display: none; }
  .anno-fab-main { padding: .65rem; }
}

.read-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--pop); z-index:120; transition:width .1s linear; }