/* Deliberately single-theme, and the theme is CAT's. These pages open out of
     ZMS cards inside the app, so a dark terminal here would read as a different
     site rather than a deeper part of the same one. Every colour is still
     painted explicitly, so a saved copy holds on any host ground rather than
     borrowing it. Palette lives in theme.py — CSS, chart and markers all read
     it, which is what stopped the three copies drifting. */
  :root{
    --ground:#FBFBFE;
    --panel:#FFFFFF;
    --raise:#F5F4FB;
    --hairline:#ECEAF4;
    --ink:#23212E;
    --dim:#615D70;
    --faint:#938FA3;
    --gain:#2F8F7A;
    --loss:#C0554F;
    --caution:#A9691F;
    --accent:#6E63C4;
    --accent-soft:#EEEBFB;
    --r:10px;
  }
  *{box-sizing:border-box}
  .zms{background:var(--ground);color:var(--ink);
       font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
       font-size:14px;line-height:1.55;margin:0;padding:0 0 28px}
  .zms .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
             font-variant-numeric:tabular-nums}
  .zms-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
            padding:20px 22px 16px;border-bottom:1px solid var(--hairline)}
  .zms-head h1{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;
               text-wrap:balance}
  .zms-head .sub{color:var(--dim);font-size:12.5px;
                 font-family:"IBM Plex Mono",ui-monospace,monospace;
                 font-variant-numeric:tabular-nums}
  .zms-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:16px;padding:16px 22px}
  @media (max-width:1080px){.zms-grid{grid-template-columns:minmax(0,1fr)}}
  .zms-col{display:flex;flex-direction:column;gap:16px;min-width:0}
  .card{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r);
        padding:14px 15px;min-width:0}
  .card > h2{margin:0 0 11px;font-size:10.5px;font-weight:600;color:var(--dim);
             text-transform:uppercase;letter-spacing:.11em}
  .card > h2 .note{text-transform:none;letter-spacing:0;color:var(--faint);font-weight:400}
  #zchart{height:440px;width:100%}
  #zeq{height:150px;width:100%}
  .tblwrap{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:12.5px;
        font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
  th,td{text-align:right;padding:5px 7px;border-bottom:1px solid var(--hairline);white-space:nowrap}
  th:first-child,td:first-child{text-align:left}
  th{color:var(--faint);font-weight:600;font-size:10.5px;text-transform:uppercase;
     letter-spacing:.07em}
  tbody tr:last-child td{border-bottom:none}
  .gain{color:var(--gain)} .loss{color:var(--loss)} .dim{color:var(--dim)}
  .zms-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;
           padding:9px 22px;border-bottom:1px solid var(--hairline);
           background:var(--panel);font-size:12.5px}
  .zms-nav a{padding:4px 10px;border-radius:99px;color:var(--dim);border-bottom:none}
  .zms-nav a:hover{background:var(--raise);color:var(--ink);border-bottom:none}
  .zms-nav a.here{background:var(--raise);color:var(--ink)}
  .zms-nav .brand{font-weight:600;color:var(--ink);padding:4px 12px 4px 0;margin-right:4px;
                  border-right:1px solid var(--hairline)}
  .zms-nav .spacer{flex:1 1 auto}
  .zms-nav .tag{color:var(--faint);font-size:11px;
                font-family:"IBM Plex Mono",ui-monospace,monospace}
  /* The card holds the measure, not the text block - otherwise a wide card
     sits half empty beside a 78ch column and the tables are cramped for no
     reason. Tables then get the full width the card allows. */
  .card:has(.prose){max-width:900px;margin:0 auto;padding:20px 24px}
  .prose{max-width:none;padding:0}
  .prose h1{font-size:20px;margin:0 0 6px;letter-spacing:-.01em;text-wrap:balance}
  .prose h2{font-size:15px;margin:26px 0 8px;text-transform:none;letter-spacing:0;
            color:var(--ink);font-weight:600}
  .prose h3{font-size:13px;margin:20px 0 6px;color:var(--dim);font-weight:600}
  .prose p,.prose li{color:var(--ink);font-size:13.5px}
  .prose li{margin:3px 0}
  .prose code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
              background:var(--raise);padding:1px 5px;border-radius:4px;color:var(--caution)}
  .prose pre{background:var(--raise);border:1px solid var(--hairline);border-radius:var(--r);
             padding:11px 13px;overflow-x:auto}
  .prose pre code{background:none;padding:0;color:var(--ink)}
  .prose blockquote{margin:12px 0;padding:2px 0 2px 13px;border-left:3px solid var(--accent);
                    color:var(--dim)}
  .prose table{margin:12px 0;font-size:12px}
  .prose table td,.prose table th{white-space:normal}
  .prose hr{border:none;border-top:1px solid var(--hairline);margin:22px 0}
  .prose strong{color:var(--ink);font-weight:600}
  .zms a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
  .zms a:hover{border-bottom-color:var(--accent)}
  .zms a:visited{color:var(--accent)}
  .vrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
        padding:6px 0;border-bottom:1px solid var(--hairline);font-size:12.5px}
  .vrow:last-child{border-bottom:none}
  .vrow.total{margin-top:2px;padding-top:9px;border-top:1px solid var(--hairline);
              border-bottom:none;font-weight:600}
  .pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;
        font-size:10.5px;font-weight:600;letter-spacing:.05em;
        font-family:"IBM Plex Mono",ui-monospace,monospace}
  .pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
  .pill.pass{background:rgba(47,143,122,0.1);color:var(--gain)}
  .pill.fail{background:rgba(192,85,79,0.1);color:var(--loss)}
  .pill.na{background:rgba(97,93,112,0.08);color:var(--dim)}
  .warn{display:flex;gap:9px;background:rgba(169,105,31,0.07);
        border:1px solid rgba(169,105,31,0.26);border-left:3px solid var(--caution);
        color:var(--caution);border-radius:var(--r);padding:10px 12px;font-size:12px}
  .legend{display:flex;flex-wrap:wrap;gap:6px 15px;font-size:11px;color:var(--dim);
          margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline)}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .legend i{width:12px;height:2px;border-radius:1px}
  .legend b{width:7px;height:7px;border-radius:50%}
  .months{display:flex;gap:1.5px;height:84px;margin-top:4px;
          background:linear-gradient(var(--hairline),var(--hairline)) 0 50%/100% 1px no-repeat}
  .months .m{flex:1 1 0;min-width:2px;position:relative}
  .months .m i{position:absolute;left:0;right:0;border-radius:1.5px;display:block}
  .capline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:-2px 0 9px;
           font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
           font-size:13px}
  .capline .from{color:var(--dim)}
  .capline .arrow{color:var(--faint)}
  .capline .to{font-size:15px;font-weight:600}
  .capline .pct{font-size:12px}
  .capline .dates{color:var(--faint);font-size:11px;margin-left:auto}
  .glossary{margin:0;font-size:12px;line-height:1.5}
  .glossary dt{color:var(--ink);font-weight:600;margin-top:9px;
               font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
  .glossary dt:first-child,.glossary div:first-child dt{margin-top:0}
  .glossary dd{margin:1px 0 0;color:var(--dim)}
  /* Full-width reference strip rather than the tallest card in the right rail:
     eleven terms stacked there left the left column ending ~800px short of it,
     which on a white ground reads as a broken page rather than a tall column. */
  .zms-wide{padding:0 22px 16px}
  .glossary.cols{columns:3;column-gap:26px}
  .glossary.cols dt{break-after:avoid}
  .glossary.cols div,.glossary.cols dd{break-inside:avoid}
  @media (max-width:900px){.glossary.cols{columns:2}}
  @media (max-width:620px){.glossary.cols{columns:1}}
  .sizing{margin:9px 0 0;padding-top:8px;border-top:1px solid var(--hairline);
          color:var(--faint);font-size:11px;line-height:1.5}
  .lede{margin:0;padding:13px 15px;background:var(--panel);
        border:1px solid var(--hairline);border-left:3px solid var(--caution);
        border-radius:var(--r);color:var(--dim);font-size:12.5px;max-width:none}
  /* On the index the lede is a card inside .zms-grid, which already carries the
     page gutter. On a tearsheet it sits directly under the header, outside the
     grid, so it has to supply its own or it runs edge to edge. */
  .zms > .lede{margin:0 22px 16px}
  .zms-foot{padding:2px 22px 0;color:var(--faint);font-size:11px;max-width:78ch}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  .notelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .notelist li{padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px}
  .notelist li:last-child{border-bottom:none}
  .notelist .note{color:var(--faint);font-size:11.5px}