:root{
  --paper:#F8F7F3;
  --sheet:#FFFFFE;
  --ink:#1D2330;
  --ink-soft:#616878;
  --rule:#E4E2DA;
  --amber:#EFA400;       /* Tellmark Amber — the one working colour */
  --amber-wash:#F9EFD6;
  --green:#2F7A57;
  --amber-text:#9A6B00;  /* amber darkened for small text */
  --red:#C0392B;
  --mark:rgba(239,164,0,.15); /* amber wash for tells */
  --mark-line:#EFA400;
  --radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:var(--amber-wash)}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px;margin:0 auto;padding:0 20px 96px}

/* ---------- header ---------- */
header{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:26px 0 18px;border-bottom:2px solid var(--ink);
  flex-wrap:wrap;gap:8px;
}
.wordmark{display:inline-flex;align-items:baseline;letter-spacing:-.01em;text-transform:lowercase}
.wordmark .tell{position:relative;display:inline-block}
.wordmark .squig{position:absolute;left:0;bottom:-.18em;width:100%;height:.28em;overflow:visible}
.wordmark .squig path{fill:none;stroke:var(--amber);stroke-width:7;stroke-linecap:round}
.wordmark{
  font-family:'Newsreader',serif;font-optical-sizing:auto;
  font-size:1.9rem;font-weight:600;letter-spacing:-.01em;
}

.cat-chip{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  color:var(--ink-soft);border:1px solid var(--rule);
  border-radius:999px;padding:3px 10px;background:var(--sheet);
}

/* ---------- intro ---------- */
.intro{padding:34px 0 8px}
.intro h1{
  font-family:'Newsreader',serif;font-optical-sizing:auto;
  font-size:clamp(1.7rem,4.6vw,2.5rem);font-weight:500;line-height:1.18;
  max-width:26ch;
}
.intro h1 em{font-style:italic;color:var(--amber)}
.intro p{margin-top:14px;max-width:62ch;color:var(--ink-soft)}
.creed{
  margin-top:14px;font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;color:var(--ink-soft);
  border-left:3px solid var(--amber);padding-left:12px;
}

/* ---------- input sheet ---------- */
.sheet{
  margin-top:28px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(35,38,31,.06);
}
.sheet-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;border-bottom:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-soft);
}
textarea{
  width:100%;min-height:240px;border:0;resize:vertical;
  background:transparent;padding:18px;
  font-family:'Newsreader',serif;font-optical-sizing:auto;
  font-size:1.05rem;line-height:1.65;color:var(--ink);
}
textarea:focus{outline:none}
.sheet:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-wash)}
.controls{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}
button{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.92rem;
  border-radius:var(--radius);padding:11px 20px;cursor:pointer;
  border:1px solid transparent;transition:background .15s;
}
button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.btn-primary{background:var(--amber);color:var(--ink)}
.btn-primary:hover{background:#D89400}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{background:var(--sheet)}
.wc{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--ink-soft);margin-left:auto}

/* ---------- results ---------- */
#results{margin-top:44px}
.section-label{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:10px;
}

/* litmus strip — signature element */
.assay{
  background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--radius);padding:20px 20px 24px;
}
.assay-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px}
.tdi{
  font-family:'Newsreader',serif;font-size:2.6rem;font-weight:600;line-height:1;
}
.tdi small{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:400;color:var(--ink-soft);margin-left:8px;letter-spacing:.05em}
.band-name{font-weight:700;font-size:1.05rem}
.band-green .band-name,.band-green .tdi{color:var(--green)}
.band-amber .band-name,.band-amber .tdi{color:var(--amber-text)}
.band-red .band-name,.band-red .tdi{color:var(--red)}
.strip-holder{position:relative;margin-top:20px;padding-top:14px}
.strip{
  height:14px;border-radius:7px;border:1px solid rgba(35,38,31,.25);
  background:linear-gradient(90deg,
    #2F7A57 0%, #2F7A57 23%,
    #EFA400 27%, #EFA400 57%,
    #C0392B 62%, #C0392B 100%);
}
.needle{
  position:absolute;top:0;width:2px;height:34px;background:var(--ink);
  transition:left .5s ease;
}
.needle::before{
  content:"";position:absolute;top:-2px;left:-4px;
  border:5px solid transparent;border-top:7px solid var(--ink);
}
.strip-ticks{
  display:flex;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--ink-soft);
  margin-top:6px;
}
.assay-meaning{margin-top:16px;color:var(--ink-soft);max-width:60ch}
.disclaimer{
  margin-top:14px;padding:10px 14px;background:var(--amber-wash);
  border-radius:var(--radius);font-size:.85rem;color:var(--ink);
}
.notice{
  margin-top:14px;padding:10px 14px;border:1px dashed var(--rule);
  border-radius:var(--radius);font-size:.85rem;color:var(--ink-soft);
}

/* annotated galley */
.galley{
  margin-top:36px;background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--radius);padding:26px 26px;
  font-family:'Newsreader',serif;font-optical-sizing:auto;
  font-size:1.08rem;line-height:1.75;
}
.galley p{margin-bottom:1.1em}
.galley p:last-child{margin-bottom:0}
mark.tell{
  background:var(--mark);
  text-decoration:underline wavy var(--mark-line) 2px;
  text-underline-offset:4px;
  padding:0 2px;border-radius:2px;cursor:help;position:relative;
}
mark.tell .tid{
  font-family:'IBM Plex Mono',monospace;font-size:.62em;
  color:var(--ink-soft);vertical-align:super;margin-left:2px;font-weight:600;
}

/* findings table */
.findings{margin-top:36px;overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius)}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);font-size:.9rem}
th{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;
}
tr:last-child td{border-bottom:0}
.tid-chip{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;font-weight:600;
  color:var(--ink-soft);white-space:nowrap;
}
td.num{font-family:'IBM Plex Mono',monospace;font-size:.82rem;white-space:nowrap}
.remedy{color:var(--ink-soft)}
.clean{
  padding:28px;text-align:center;color:var(--green);
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);
  font-family:'Newsreader',serif;font-size:1.15rem;
}


@media (prefers-reduced-motion:reduce){
  .needle{transition:none}
  html{scroll-behavior:auto}
}
@media (max-width:560px){
  .galley{padding:18px 16px}
  .tdi{font-size:2.1rem}
}

/* ---------- delta & reassurance ---------- */
.delta{
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;
  padding:3px 10px;border-radius:999px;margin-left:10px;vertical-align:middle;
}
.delta.down{background:#E6F0EA;color:var(--green)}
.delta.up{background:#F6E5E2;color:var(--red)}
.reassure{font-size:.78rem;color:var(--ink-soft);margin-top:10px}

@media print{
  header .acct,.sheet,.controls,.reassure,#inputMsg,#authPanel,#reportsPanel,
  .save-row,.subs,section[aria-label="Text input"],section[aria-label="Definitions"],footer{display:none !important}
  body{background:#fff}
  .assay,.galley,table{border:1px solid #999;box-shadow:none}
  #results{margin-top:10px}
  mark.tell{background:#eee;border-bottom:1.5px solid #555}
}

/* ---------- accounts & reports ---------- */
.acct{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct-email{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--ink-soft)}
.btn-small{padding:7px 14px;font-size:.82rem}
.panel{
  margin-top:16px;background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--radius);padding:18px;
}
.panel h2{font-family:'Newsreader',serif;font-weight:600;font-size:1.15rem;margin-bottom:10px}
.field{display:block;margin-bottom:10px}
.field span{display:block;font-size:.78rem;color:var(--ink-soft);margin-bottom:4px}
.field input{
  width:100%;max-width:360px;padding:10px 12px;font:inherit;
  border:1px solid var(--rule);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.field input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-wash)}
.form-msg{margin-top:8px;font-size:.85rem;min-height:1.2em}
.form-msg.err{color:var(--red)}
.form-msg.good{color:var(--green)}
.save-row{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.save-note{font-size:.78rem;color:var(--ink-soft);max-width:46ch}
.band-chip{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:600;
  padding:2px 9px;border-radius:999px;color:#fff;text-transform:uppercase;letter-spacing:.05em;
}
.band-chip.green{background:var(--green)} .band-chip.amber{background:var(--amber);color:var(--ink)}
.band-chip.red{background:var(--red)} .band-chip.none{background:var(--ink-soft)}
.rep-actions button{margin-right:6px}
.rep-title{cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.rep-title:hover{text-decoration-color:var(--amber);color:var(--ink)}

/* ---------- paragraph heat ---------- */
.heat{display:flex;gap:3px;height:16px}
.heat span{flex:1;border-radius:3px;border:1px solid rgba(35,38,31,.2);min-width:8px}
.heat .green{background:var(--green)} .heat .amber{background:var(--amber)} .heat .red{background:var(--red)}
.heat-note{font-size:.75rem;color:var(--ink-soft);margin-top:6px}

/* ---------- marking pass ---------- */
mark.tell.pending{background:transparent;text-decoration-color:transparent}
mark.tell.pending .tid{opacity:0}
mark.tell{transition:background .25s ease,text-decoration-color .25s ease}
mark.tell .tid{transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){
  mark.tell,mark.tell .tid{transition:none}
}

/* ---------- link states (no browser defaults) ---------- */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .15s,background .15s}
a:visited{color:var(--ink)}
a:hover{background:var(--amber-wash)}
a:active{color:var(--amber-text)}
a:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:2px}
.wordmark,.wordmark:hover{text-decoration:none;background:none}

/* ---------- header breathing room, esp. mobile ---------- */
header{row-gap:14px;padding-bottom:22px}
.wordmark{padding-bottom:10px}
@media (max-width:560px){
  header{padding-bottom:26px}
  .wordmark{padding-bottom:14px}
  .wordmark .squig{bottom:-.12em}
}

/* ---------- squiggle draw, gated on window load so it is always seen ---------- */
.wordmark .squig path{stroke-dasharray:220;stroke-dashoffset:220}
body.wm-go .wordmark .squig path{animation:squigdraw 1.4s ease-out forwards}
@keyframes squigdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .wordmark .squig path{stroke-dashoffset:0;animation:none !important}
}

/* ---------- hint popovers ---------- */
[data-hint]{position:relative;cursor:help}
.hintpop{
  position:absolute;z-index:60;max-width:240px;
  background:var(--ink);color:var(--paper);
  font-family:'Archivo',sans-serif;font-size:.8rem;line-height:1.45;
  padding:9px 12px;border-radius:6px;box-shadow:0 4px 14px rgba(29,35,48,.25);
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.hintpop.show{opacity:1;transform:translateY(0)}
.hintpop::before{content:"";position:absolute;top:-5px;left:16px;border:5px solid transparent;border-bottom:5px solid var(--ink);border-top:0}
@media (prefers-reduced-motion:reduce){.hintpop{transition:none}}

/* ---------- FAQ ---------- */
.faq{margin-top:44px}
.faq details{
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:14px 16px;font-weight:600;font-size:.95rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:10px;height:10px;flex:none;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .25s ease;margin-right:4px;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq details[open] .a{grid-template-rows:1fr}
.faq .a>div{overflow:hidden;padding:0 16px;color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.faq details[open] .a>div{padding-bottom:14px}
@media (prefers-reduced-motion:reduce){.faq .a{transition:none}}


/* ============ colophon footer (ink panel) ============ */
footer.colophon{
  display:block;margin-top:78px;padding:36px 32px 26px;
  background:var(--ink);color:#EDEEF0;border-radius:12px;border-top:0;
  font-size:.9rem;
}
.colophon::before{ /* the tellmark itself: wave resolving to line */
  content:"";display:block;width:96px;height:14px;margin-bottom:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M3 8 Q11 1 19 8 T35 8 Q43 8 51 8 L93 8' fill='none' stroke='%23EFA400' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.colo-brand{display:flex;justify-content:space-between;align-items:baseline;gap:18px 40px;flex-wrap:wrap;margin-bottom:30px}
.colo-wm{font-family:'Newsreader',serif;font-size:1.55rem;font-weight:500;color:#EDEEF0}
.colo-creed{font-family:'IBM Plex Mono',monospace;font-size:.72rem;line-height:1.6;color:rgba(237,238,240,.6);max-width:44ch}
.footnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px 22px;width:100%;margin-bottom:26px}
.footnav h3{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,238,240,.5);font-weight:500;margin-bottom:10px}
.footnav a{
  display:inline-block;font-size:.9rem;margin-bottom:8px;
  color:#EDEEF0;text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:2px;text-underline-offset:4px;
  transition:text-decoration-color .18s;
}
.footnav a:visited{color:#EDEEF0}
.footnav a:hover{background:none;text-decoration-color:var(--amber)}
.footnav a:active{color:var(--amber)}
.footnav a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.colo-bottom{
  border-top:1px solid rgba(237,238,240,.14);padding-top:20px;
  text-align:center;font-size:.78rem;color:rgba(237,238,240,.6);
}
.colo-qorym{display:flex;justify-content:center;padding-top:18px}
.qorym{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.03em;
  color:rgba(237,238,240,.6);text-decoration:none;
  transition:color .18s;
}
.qorym:hover{background:none;color:#EDEEF0}
.qorym:visited{color:rgba(237,238,240,.6)}
.qorym img{width:42px;height:42px;flex:none}
@media (max-width:560px){
  footer.colophon{padding:28px 20px 22px;border-radius:10px;margin-top:60px}
  .colo-brand{margin-bottom:24px}
}