/* Annotated document reader. Generalised from custom-annotated-transcript.hbs:
   blocks replace turns, and the speaker/timestamp rail becomes generic left/right meta.
   Scoped under .atx so it cannot collide with main.css. Variables fall back to
   literals so the same file works standalone, outside the Ghost theme. */
.atx{
  --pine: var(--accent, #0B6E3B);
  --card: #FFFDF8; --rule-soft:#EFE9DA; --default-cat:#8A8073;
  --main:40rem; --rail:17rem; --colgap:2.75rem;
  position:relative;
  width:min(100% - 2rem, calc(var(--main) + var(--colgap) + var(--rail)));
  margin:2.5rem auto 4rem; color:var(--ink,#16130F);
  font-family:var(--font-body,'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif);
  line-height:1.6; font-variant-numeric:tabular-nums;
}
.atx .col{ max-width:var(--main); }

.atx-toggle{ position:fixed; top:5rem; right:1rem; z-index:60;
  font-family:var(--font-meta,ui-monospace,Menlo,monospace); font-size:.68rem; font-weight:600;
  letter-spacing:.04em; color:var(--pine); background:var(--card);
  border:1px solid var(--rule,#E2DBCB); border-radius:999px; padding:.45rem .85rem; cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,.08); display:inline-flex; align-items:center; gap:.45rem; }
.atx-toggle:hover{ border-color:var(--pine); }
.atx-toggle .dot{ width:.6rem; height:.6rem; border-radius:50%; background:var(--pine); flex:none; }
body.atx-notes-off .atx-toggle{ color:var(--ink-faint,#8A8073); }
body.atx-notes-off .atx-toggle .dot{ background:var(--ink-faint,#8A8073); }

.atx .doc-kicker{ font-family:var(--font-meta,ui-monospace,Menlo,monospace); font-size:.7rem;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--pine); margin-bottom:.8rem; }
.atx .doc-title{ font-family:var(--font-display,Georgia,serif);
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1; font-weight:700;
  font-size:clamp(1.7rem,4.5vw,2.6rem); line-height:1.1; letter-spacing:-.01em; margin:0; text-wrap:balance; }
.atx .doc-source{ font-family:var(--font-meta,ui-monospace,Menlo,monospace); font-size:.74rem;
  color:var(--ink-faint,#8A8073); margin-top:.7rem; }
/* the reproduction statement, last thing under the document */
.atx .doc-disclosure{ font-family:var(--font-meta,ui-monospace,Menlo,monospace);
  font-size:.72rem; line-height:1.65; color:var(--ink-faint,#8A8073);
  border-top:1px solid var(--rule,#E2DBCB); margin-top:3rem; padding-top:1.1rem; }
.atx .figure{ margin:1.6rem 0; }
.atx .figure img{ display:block; width:100%; height:auto; border:1px solid var(--rule,#E2DBCB); border-radius:4px; }
.atx .lede{ margin:1.4rem 0 0; }
.atx .lede p{ margin:0 0 .95rem; font-size:1rem; color:var(--ink-soft,#574E44); }
.atx .lede a{ color:var(--pine); text-decoration:underline; text-underline-offset:2px; }
.atx .divider{ border:0; border-top:1px solid var(--ink,#16130F); width:100%; margin:2rem 0 0; }

.atx .docbody{ position:relative; margin:1.75rem 0 0; }
.atx .blk{ padding:.55rem 0; }
.atx .blk.para + .blk.para{ padding-top:0; }
.atx .blk-meta{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:.35rem; flex-wrap:wrap; }
.atx .anchor{ font-family:var(--font-meta,ui-monospace,Menlo,monospace); font-size:.72rem; font-weight:600;
  color:var(--pine); border:1px solid var(--rule,#E2DBCB); border-radius:3px; padding:.1rem .45rem; flex:none; }
.atx .section{ font-size:.78rem; color:var(--ink-faint,#8A8073); }
.atx .blk-text{ margin:0; font-size:1.02rem; color:var(--ink,#16130F); }
.atx .blk.heading{ padding:1.6rem 0 .2rem; border-top:1px solid var(--rule-soft); margin-top:.8rem; }
.atx .blk.heading:first-child{ border-top:0; margin-top:0; }
.atx .blk.heading h2{ font-family:var(--font-display,Georgia,serif); font-size:1.16rem;
  font-weight:700; margin:0; letter-spacing:-.005em; }
.atx .blk.footnote .blk-text{ font-size:.86rem; color:var(--ink-soft,#574E44); }
.atx .blk.table .blk-text{ background:var(--card); border:1px solid var(--rule-soft);
  border-radius:5px; padding:.5rem .7rem; font-size:.92rem; }
.atx .blk.quote .blk-text{ border-left:3px solid var(--rule,#E2DBCB); padding-left:.9rem;
  color:var(--ink-soft,#574E44); }

.atx mark.anno{ color:inherit; padding:.05em .12em; border-radius:2px; cursor:pointer;
  background:var(--catbg,rgba(138,128,115,.15)); box-shadow:inset 0 -2px 0 var(--cat,var(--default-cat)); }
/* a highlight with no note has nothing to click through to */
.atx mark.anno.bare{ cursor:text; }
.atx .marker{ font-family:var(--font-meta,ui-monospace,Menlo,monospace); font-size:.6rem; font-weight:700;
  line-height:1; color:#fff; background:var(--cat,var(--default-cat)); border:none; cursor:pointer;
  border-radius:50%; min-width:1.25em; height:1.25em; padding:0 .2em; display:inline-flex;
  align-items:center; justify-content:center; vertical-align:super; margin-left:.15em;
  transition:transform .12s ease; }
.atx .marker:hover{ transform:scale(1.15); }

.atx .sidenote{ position:absolute; left:calc(var(--main) + var(--colgap)); width:var(--rail);
  font-size:.8rem; line-height:1.5; color:var(--ink-soft,#574E44);
  border-left:2px solid var(--cat,var(--default-cat)); padding-left:.85rem; }
.atx .sidenote.flash{ animation:atxflash 1s ease; }
@keyframes atxflash{ 0%,100%{background:transparent} 25%{background:var(--catbg)} }
.atx .sn-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.atx .sn-num{ font-family:var(--font-meta,ui-monospace,Menlo,monospace); font-size:.68rem; font-weight:700;
  color:#fff; background:var(--cat,var(--default-cat)); border-radius:50%; width:1.5rem; height:1.5rem;
  display:inline-flex; align-items:center; justify-content:center; flex:none; }
.atx .sn-avatar{ width:1.5rem; height:1.5rem; border-radius:50%; flex:none;
  background-size:cover; background-position:center; box-shadow:0 0 0 1px var(--rule,#E2DBCB); }
.atx .sn-name{ font-size:.75rem; font-weight:600; color:var(--ink,#16130F); }
.atx .sn-label{ font-family:var(--font-meta,ui-monospace,Menlo,monospace); font-size:.62rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--cat,var(--default-cat)); margin-left:auto; }
.atx .sidenote p{ margin:0; }

body.atx-notes-off .atx mark.anno{ background:transparent; box-shadow:none; padding:0; cursor:text; }
body.atx-notes-off .atx .marker{ display:none; }
body.atx-notes-off .atx .sidenote{ display:none; }

/* On a phone there is no rail to put a note in, so it reads inline, directly under the
   paragraph it belongs to. Shown by default rather than behind a tap: a note the reader
   has to discover is a note most readers never see. */
@media (max-width:900px){
  .atx{ width:calc(100% - 2rem); }
  .atx .col{ max-width:100%; }
  .atx .sidenote{ position:static; left:auto; width:auto; display:block;
    margin:.75rem 0 .35rem; background:var(--card);
    border-left:3px solid var(--cat,var(--default-cat));
    border-radius:0 5px 5px 0; padding:.7rem .85rem; }
  .atx .marker{ vertical-align:baseline; }
  body.atx-notes-off .atx .sidenote{ display:none; }
  .atx-toggle{ top:auto; bottom:1rem; right:1rem; }
  .atx .figure img{ border-radius:3px; }
}
@media (prefers-reduced-motion:reduce){ .atx .marker{ transition:none; } }