/* Line-annotation grammar (epic gh#4908, gh#6301): struck IRS row, dated update block, check
    pill, added-row edge, section chip, roster bar, the owner-mode editor. ONE source for both
    surfaces that render an annotatable report: the public record.html and the HQ 990 Scout
    pane (gh#6308). Plain CSS, served as /990/static/report-annotations.<ASSET_V>.css (gh#12711). */
  /* Line annotations (epic gh#4908): the filed IRS row stays untouched (no strikethrough -- it was accurate for its year, Reif 9/28), the owner's dated
     update sits beneath it. Owner-mode controls (.annot-btn, .annot-editor) are injected by
     annotate.js only after the owner API answers 200 -- never in the cached HTML.

     COLOR: the published annotation reads in claim amber (--claim-*), the org's own voice
     (gh#8944, Reif's "Claimed and Verified Marks": "change everything - annotations, etc.
     to claim amber"). Blue (--real) is Verified only. Not --accent either: that is
     per-surface chrome, so an annotation styled with it changed color depending on where
     it was read. gh#9309: amber is the INK and the C mark only -- never a fill; a tinted
     amber box reads as the "Worth a look" warning tile. The owner's TOOLS (.annot-btn, .annot-editor) stay on --accent on
     purpose: those are controls, not claims, and they belong to the surface. */
  .person{flex-wrap:wrap;}
  /* gh#9309 (marks.png): an org note is labelled by the small amber C mark, not by a fill. */
  .person .update .lab::before,.prog .update .lab::before,.finrow .update .lab::before{content:"C";display:inline-grid;
    place-items:center;width:13px;height:13px;margin-right:6px;border-radius:50%;background:var(--claim-amber,#c27812);
    color:#fff;font:700 8px/1 var(--sans);letter-spacing:0;vertical-align:-2px;}
  .person .update{flex-basis:100%;margin:6px 0 2px;padding:10px 12px 10px 14px;background:#fff;border:1px solid var(--rule,#e6e9e4);border-radius:4px;}
  .person .update .lab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--claim-ink,#8a5306);margin-bottom:3px;}
  .person .update .lab span{color:var(--muted);text-transform:none;letter-spacing:0;font-size:11.5px;margin-left:8px;}
  @media (max-width:600px){.person .update .lab span{display:block;margin-left:0;}}
  .person .update p{margin:0;font-size:14px;color:var(--ink);}
  .person .update .now{font-family:"Instrument Serif",Georgia,serif;font-size:16px;font-weight:400;}
  /* gh#6301: confirmed = a check pill, no block, no strike; an added leader gets its own
     row grammar; a section chip says the roster was confirmed or how many updates it has. */
  .person>.ann-ok,.finrow>.ann-ok{flex-basis:100%;margin:6px 0 0;width:max-content;}
  .ann-ok a{color:inherit;font-weight:700;text-decoration:underline dotted;text-underline-offset:2px;}
  /* gh#6927 (Reif: "Interactive toast for saved?"): one toast per save, replaced not stacked,
     with the two things an owner wants next -- see it live, or take it back. Sits above the
     chat dock. */
  .annot-toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
    z-index:2147483001;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:calc(100vw - 24px);
    padding:10px 14px;border-radius:10px;background:#1a1c19;color:#fff;font:500 13.5px var(--sans);
    box-shadow:0 10px 30px rgba(0,0,0,.35);}
  .annot-toast>span{flex:none;white-space:nowrap;}
  .annot-toast a,.annot-toast button{color:#fff;font:600 13px var(--sans);background:none;border:0;padding:0;cursor:pointer;
    text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
  .annot-toast button:disabled{opacity:.5;cursor:default;}
  /* Reif 2026-10-02: confirmations "not pretty" -- the org's C mark and a plain label, no box. */
  .ann-ok{display:inline-flex;align-items:center;gap:5px;font:500 12px/1.3 var(--sans);padding:0;border:0;background:none;color:var(--claim-ink,#8a5306);white-space:nowrap;margin-left:8px;}
  .person.added{padding-left:11px;}
  .added-pill{display:inline-flex;align-items:center;gap:5px;font:500 12px/1.3 var(--sans);padding:0;border:0;background:none;color:var(--claim-ink,#8a5306);}
  .sec-chip{display:inline-flex;align-items:center;gap:5px;font:500 12px/1.3 var(--sans);padding:0;border:0;background:none;color:var(--claim-ink,#8a5306);margin:0 0 6px;}
  .annot-btn.quiet{background:transparent;border-color:var(--rule);color:var(--muted);}
  .annot-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
  .roster-bar .annot-btn{opacity:1;}
  .roster-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;background:var(--tint);border-radius:var(--r1);font-size:13px;color:var(--muted);}
  .annot-btn{font:500 12px inherit;font-family:inherit;color:var(--accent-ink);background:var(--accent-soft);border:1px solid transparent;border-radius:4px;padding:4px 9px;cursor:pointer;margin-left:10px;opacity:0;align-self:center;}
  .person:hover .annot-btn,.person:focus-within .annot-btn,.annot-btn:focus-visible{opacity:1;}
  .annot-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  @media (hover:none){.annot-btn{opacity:1;}}
  /* gh#6927: the chat dock and the feedback pill are position:fixed at z-index 2147483000,
     and on every device they sat over the composer's "Publish update" button (measured at
     390, 820 and 1400px wide). Same remedy _masthead.html uses for the drawer: duck both
     widgets while a composer is open. annotate.js removes .annot-editor on Cancel and on
     Publish, so :has() restores them the moment the composer closes. */
  html:has(.annot-editor) #scout-dock,
  html:has(.annot-editor) #pa-feedback{visibility:hidden}
  /* gh#6927 (Reif, phone screenshot: "Annotating this - unusable on mobile"): iOS zooms the
     whole page when a focused input's font is under 16px, and the composer's were 13.3px.
     The zoomed viewport is what made the row read as cut off. 16px on touch, unchanged on
     desktop. */
  @media (hover:none), (max-width:640px){
    .annot-editor input,.annot-editor textarea,.annot-editor select{font-size:16px;}
  }
  .annot-editor{flex-basis:100%;margin:8px 0 4px;padding:14px;border:1px solid var(--accent);border-radius:6px;background:#fff;font-size:13.5px;}
  .annot-editor .kind{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
  .annot-editor .kind label{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--rule);border-radius:4px;cursor:pointer;}
  .annot-editor .kind label.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);}
  .annot-editor input[type=radio]{accent-color:var(--accent);margin:0;}
  .annot-editor .field{display:grid;gap:4px;margin-bottom:10px;}
  .annot-editor .field label{font-size:12px;color:var(--muted);}
  .annot-editor input[type=text],.annot-editor textarea{font:14px inherit;font-family:inherit;color:var(--ink);background:#fbfbf8;border:1px solid var(--rule);border-radius:4px;padding:8px 10px;width:100%;box-sizing:border-box;}
  .annot-editor textarea{min-height:60px;resize:vertical;}
  .annot-editor .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted);}
  .annot-editor .count{font-family:var(--mono);}
  .annot-editor .btns{display:flex;gap:8px;}
  .annot-editor .btn{font:500 13px inherit;font-family:inherit;padding:7px 14px;border-radius:4px;border:1px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer;}
  .annot-editor .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
  .annot-editor .btn.danger{color:var(--burgundy);}
  .annot-editor .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .annot-editor .preview{margin-top:12px;padding-top:10px;border-top:1px dashed var(--rule);font-size:12px;color:var(--muted);}
  .annot-editor .err{color:var(--burgundy);font-size:12px;}
  /* Programs layout (Part III cards). Lived in record.html until gh#6561, which is why the
     HQ 990 Scout pane rendered Programs as flat stacked text: that pane includes THIS partial
     and not record.html, so it shipped the annotation rules below without the base grid they
     decorate. Both surfaces render the same section, so the layout belongs with it. */
  .progs{display:flex;flex-direction:column;gap:var(--s3);}
  .prog{display:grid;grid-template-columns:46px 1fr auto;gap:var(--s4);padding:var(--s4);
    border:1px solid var(--rule);border-radius:14px;background:var(--tint);align-items:start;}
  .prog .n{font-family:var(--serif);font-size:28px;line-height:1;color:var(--faint);font-weight:400;}
  .prog h3{font-size:16px;font-weight:600;margin:0 0 5px;color:var(--ink);}
  .prog p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6;font-family:var(--serif);}
  .prog .pbar{margin-top:14px;height:4px;border-radius:3px;background:var(--rule);overflow:hidden;max-width:640px;}
  .prog .pbar span{display:block;height:100%;background:var(--accent);border-radius:3px;}
  .prog .amt{font-family:var(--serif);font-size:24px;color:var(--accent);white-space:nowrap;text-align:right;
    font-weight:400;line-height:1.1;}
  .prog .amt .amt-l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--faint);
    font-weight:400;margin-top:4px;}
  .prog .amt .cite{font-size:11px;color:var(--faint);}
  @media(max-width:640px){.prog{grid-template-columns:34px 1fr;}
    .prog .amt{grid-column:2;text-align:left;margin-top:6px;font-size:21px;}}

  /* Line annotations, Programs rows (gh#6561, epic gh#6299 item 4) -- same grammar as
     .person/.finrow: the struck program stays legible with the strike in burgundy, the
     org's dated update sits beneath it, and an ADDED program gets the verified-blue edge + pill
     so it can never be read as filed data. .prog is a grid, so the update and the check
     span all columns rather than squeezing into the text cell. */
  .prog .update{margin:8px 0 2px;padding:10px 12px 10px 14px;background:#fff;border:1px solid var(--rule,#e6e9e4);border-radius:4px;}
  .prog .update .lab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--claim-ink,#8a5306);margin-bottom:3px;}
  .prog .update .lab span{color:var(--muted);text-transform:none;letter-spacing:0;font-size:11.5px;margin-left:8px;}
  @media (max-width:600px){.prog .update .lab span{display:block;margin-left:0;}}
  .prog .update p{margin:0;font-size:14px;color:var(--ink);}
  .prog .update .now{font-family:"Instrument Serif",Georgia,serif;font-size:16px;font-weight:400;}
    .prog.added .n{color:var(--muted);}
  /* An added program has no filed figure, so the third column holds only the pill. Beside
     the name it wins the track and wraps the program NAME to three lines, so it goes on its
     own row underneath instead -- the name gets the full width, the pill reads as a label
     on the row rather than as a value in the money column. */
  .prog.added{grid-template-columns:46px minmax(0,1fr);}
  .prog.added .amt{grid-column:1/-1;text-align:left;margin-top:2px;}
  .prog.added .added-pill{white-space:normal;display:inline-block;}
  .prog.added .amt .cite{display:inline-block;margin-left:8px;margin-top:0 !important;}
  /* Line annotations, Revenue/Expenses/Balance rows (epic gh#4908 seq:4) -- same overlay as
     .person above, reused on plain .row lines rather than duplicated: struck figure, dated
     update beneath it, .annot-btn/.annot-editor injected by annotate.js. */
  /* gh#8541: .row's gap is also the wrapped-line gap, so the owner-only .annot-actions box
     (its own line under the note, buttons hidden until hover) stacked a second 16px gap plus
     its height into a ~60px void under the blue note. No row-gap; the actions line hugs it. */
  .finrow{flex-wrap:wrap;position:relative;row-gap:0;}
  .finrow>.annot-actions{flex-basis:100%;justify-content:flex-end;margin-top:4px;}
  .finrow .update{flex-basis:100%;margin:6px 0 2px;padding:10px 12px 10px 14px;background:#fff;border:1px solid var(--rule,#e6e9e4);border-radius:4px;}
  .finrow .update .lab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--claim-ink,#8a5306);margin-bottom:3px;}
  .finrow .update .lab span{color:var(--muted);text-transform:none;letter-spacing:0;font-size:11.5px;margin-left:8px;}
  @media (max-width:600px){.finrow .update .lab span{display:block;margin-left:0;}}
  .finrow .update p{margin:0;font-size:14px;color:var(--ink);}
  .finrow .update .now{font-family:"Instrument Serif",Georgia,serif;font-size:16px;font-weight:400;}
  .finrow:hover .annot-btn,.finrow:focus-within .annot-btn{opacity:1;}
  /* gh#6561: .annot-btn ships at opacity:0 and is revealed by a per-row-shape hover rule.
     Programs had none, so the buttons annotate.js arms on a .prog row existed in the DOM
     and were invisible at every viewport -- the row-level half of the same defect as the
     missing SECTIONS entry. On touch the @media (hover:none) rule below pins them visible. */
  .prog:hover .annot-btn,.prog:focus-within .annot-btn{opacity:1;}
  /* The buttons sit at the foot of the card's text column (annotate.js puts them there, not
     as a fourth grid child), so they carry their own top margin and no left offset. */
  .prog .annot-actions{margin-top:10px;}
  .prog .annot-actions .annot-btn{margin-left:0;}