/* The hidden attribute always hides, whatever display a class sets (DEF-020). */
[hidden] { display: none !important; }

/* Anjal webmail — application stylesheet.
   Built from the design system's exported screens. Colour, spacing,
   radius and type all come from tokens.css; nothing here hard-codes a
   value except the message body panel, which must stay white in every
   theme because the sender's HTML assumes a white page. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--surface-000); color: var(--ink);
       font-family: var(--font-sans); font-size: 15px; line-height: 22px;
       -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--brand); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img { max-width: 100%; }

/* ---- shell ---- */
.shell { min-height: 100%; display: flex; flex-direction: column; }
.app { display: grid; grid-template-columns: 196px 1fr; flex: 1; min-height: 0; }
.pane { min-width: 0; background: var(--surface-100); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: var(--surface-200);
              padding: 8px 12px; border-radius: var(--radius-sm); }


  * { box-sizing: border-box; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  a { color: var(--brand); }
  :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  /* the annotation markers the brief asks for */
  .t { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px;
       font-family: var(--font-mono); font-size: 9px; font-weight: 600; vertical-align: super;
       margin-left: 3px; line-height: 1; }
  /* app chrome */
  .top { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
         background: var(--surface-200); border-bottom: 1px solid var(--line); }
  .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75;
        stroke-linecap: round; stroke-linejoin: round; display: block; }
  .ic.s { width: 15px; height: 15px; }
  .btn { height: 32px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 13px;
         font-weight: 500; border: 1px solid transparent; display: inline-flex; align-items: center;
         gap: 7px; white-space: nowrap; }
  .btn-p { background: var(--brand); color: var(--on-brand); }
  .btn-s { border-color: var(--line-strong); color: var(--ink); }
  .btn-q { color: var(--ink-muted); }
  .btn-d { background: var(--danger); color: var(--on-danger); }
  .btn-sm { height: 27px; padding: 0 10px; font-size: 12px; }
  .btn[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
  .side { width: 196px; border-right: 1px solid var(--line); padding: 10px; background: var(--surface-000); }
  .fd { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 9px; width: 100%;
        border-radius: var(--radius-md); font-size: 14px; color: var(--ink-muted); text-decoration: none; }
  .fd.on { background: var(--brand-soft); color: var(--ink); font-weight: 600; }
  .fd .n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
  .fd .g { width: 17px; text-align: center; font-family: var(--font-tamil); font-size: 15px; }
  .quota { margin-top: 14px; padding: 9px; }
  .meter { height: 6px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
  .meter i { display: block; height: 100%; background: var(--accent); }
  .meter.hot { background: var(--danger-soft); } .meter.hot i { background: var(--danger); }
  .qr { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-subtle); margin-top: 5px; }
  /* notices */
  .notice { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-md);
            padding: 10px 12px; font-size: 13px; line-height: 19px; }
  .notice svg { flex: 0 0 16px; margin-top: 1px; }
  .n-info { background: var(--info-soft); } .n-info svg { color: var(--info); }
  .n-warn { background: var(--warning-soft); } .n-warn svg { color: var(--warning); }
  .n-err  { background: var(--danger-soft); }  .n-err svg  { color: var(--danger); }
  .n-ok   { background: var(--success-soft); } .n-ok svg   { color: var(--success); }
  .notice .act { margin-left: auto; white-space: nowrap; }
  .lite { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
          color: var(--ink-muted); white-space: nowrap; }
  .lite i { width: 8px; height: 8px; border-radius: 999px; background: var(--success); display: block; }
  .lite.off i { background: var(--ink-subtle); }
  .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
  .muted { color: var(--ink-muted); }
  .sub { color: var(--ink-subtle); }

/* ---- list ---- */


  .app { display: grid; grid-template-columns: 196px 1fr; min-height: 0; }
  .pane { min-width: 0; }
  .bulk { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
          border-bottom: 1px solid var(--line); background: var(--surface-200); font-size: 13px; }
  .bulk .lbl { color: var(--ink-muted); }
  table.ml { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
  table.ml th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .06em;
                text-transform: uppercase; color: var(--ink-subtle); padding: 8px 8px;
                border-bottom: 1px solid var(--line); }
  table.ml td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
  table.ml tr:hover td { background: var(--surface-300); }
  .c-cb { width: 30px; } .c-fl { width: 26px; } .c-from { width: 172px; }
  .c-time { width: 74px; } .c-size { width: 62px; } .c-score { width: 52px; }
  .from { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .subj a { color: var(--ink); text-decoration: none; }
  .unread .subj, .unread .from { font-weight: 700; }
  .udot { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); display: inline-block; }
  .fav { font-family: var(--font-tamil); font-size: 14px; font-weight: 600; color: var(--line-strong);
         text-decoration: none; }
  .fav.on { color: var(--brand); }
  .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono);
         font-size: 12px; color: var(--ink-subtle); }
  .score { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono);
           font-size: 11px; font-weight: 600; border-radius: var(--radius-xs); padding: 1px 5px; }
  .s-hi { background: var(--danger-soft); color: var(--ink); }
  .s-mid { background: var(--warning-soft); color: var(--ink); }
  .pg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px;
        color: var(--ink-muted); }
  .pg .of { margin-left: auto; font-family: var(--font-mono); font-size: 12px; }
  .pg a { white-space: nowrap; }
  .kb { display: flex; align-items: center; gap: 4px; padding: 0 12px 10px; font-size: 11px;
        color: var(--ink-subtle); }
  .kb b { font-family: var(--font-mono); font-weight: 600; background: var(--surface-inset);
          border-radius: var(--radius-xs); padding: 1px 5px; color: var(--ink-muted); }
  .empty { padding: 56px 16px; text-align: center; color: var(--ink-subtle); font-size: 14px; }

/* ---- message and compose ---- */


  .page { padding: 16px; }
  .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-decoration: none;
          color: var(--ink-muted); margin-bottom: 12px; }
  .tb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 12px;
        border-bottom: 1px solid var(--line); margin-bottom: 14px; }
  .tb .gap { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
  .tb .push { margin-left: auto; }
  h2.subj { font-family: var(--font-display); font-size: 21px; line-height: 27px; font-weight: 600;
            letter-spacing: -0.014em; margin: 0 0 10px; }
  .hdr { display: grid; grid-template-columns: 52px 1fr; gap: 3px 10px; font-size: 13px;
         margin-bottom: 14px; }
  .hdr dt { color: var(--ink-subtle); font-family: var(--font-mono); font-size: 11px; padding-top: 2px; }
  .hdr dd { margin: 0; }
  .scoreline { font-family: var(--font-mono); font-size: 12px; background: var(--warning-soft);
               border-radius: var(--radius-xs); padding: 3px 8px; display: inline-block; margin-bottom: 14px; }
  .scoreline.hi { background: var(--danger-soft); }
  .bodypanel { border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
               background: #ffffff; color: #1a1a1a; padding: 18px; margin: 14px 0;
               font-size: 15px; line-height: 23px; }
  .bodypanel .cap { font-family: var(--font-mono); font-size: 10px; color: #8a8a8a;
                    letter-spacing: .05em; margin-bottom: 10px; display: block; }
  .att { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
         border-radius: var(--radius-md); padding: 9px 11px; background: var(--surface-200);
         margin-bottom: 8px; }
  .att .fn { font-size: 13px; font-weight: 500; }
  .att .mt { font-size: 11px; color: var(--ink-subtle); font-family: var(--font-mono); }
  .att .dl { margin-left: auto; }
  details.confirm { display: inline-block; }
  details.confirm > summary { list-style: none; cursor: pointer; }
  details.confirm > summary::-webkit-details-marker { display: none; }
  details.confirm .inner { display: inline-flex; align-items: center; gap: 8px;
        background: var(--danger-soft); border-radius: var(--radius-sm); padding: 5px 8px;
        margin-left: 6px; font-size: 12px; }
  .fld { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center;
         padding: 8px 0; border-bottom: 1px solid var(--line); }
  .fld label { font-size: 13px; color: var(--ink-muted); }
  .fld input, .fld textarea, .fld select { width: 100%; border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm); background: var(--surface-200); color: var(--ink);
        font: inherit; font-size: 14px; padding: 8px 10px; }
  .fld textarea { min-height: 190px; resize: vertical; font-family: var(--font-mono); font-size: 13px;
        line-height: 20px; }
  .stack { display: flex; flex-direction: column; gap: 10px; }
  .panel { background: var(--surface-200); border: 1px solid var(--line);
           border-radius: var(--radius-lg); padding: 18px; }
  .panel h3 { font-family: var(--font-display); font-size: 17px; line-height: 23px; font-weight: 600;
              margin: 0 0 4px; }
  .panel p.lead { margin: 0 0 14px; color: var(--ink-muted); font-size: 13px; }
  .centre { display: grid; place-items: center; padding: 34px 16px; }
  .signin { width: 352px; }
  .signin .host { text-align: center; font-family: var(--font-mono); font-size: 11px;
                  color: var(--ink-subtle); margin-top: 14px; }
  .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-bottom: 5px; }
  .inp { width: 100%; height: 38px; border: 1px solid var(--line-strong);
         border-radius: var(--radius-sm); background: var(--surface-100); color: var(--ink);
         font: inherit; font-size: 15px; padding: 0 11px; }
  .inp.bad { border-color: var(--danger); }
  .err { display: flex; gap: 8px; align-items: flex-start; background: var(--danger-soft);
         border-radius: var(--radius-md); padding: 9px 11px; font-size: 13px; line-height: 19px;
         margin-bottom: 14px; }
  .err svg { flex: 0 0 16px; color: var(--danger); margin-top: 1px; }
  .wm-lg { font-family: var(--font-display); font-size: 26px; font-weight: 600;
           letter-spacing: -0.022em; text-align: center; margin-bottom: 4px; }
  .tamil { font-family: var(--font-tamil); color: var(--brand); }

/* ---- sign-in, search, settings, stop pages ---- */


  .page { padding: 16px; }
  .centre { display: grid; place-items: center; padding: 40px 16px; }
  .panel { background: var(--surface-200); border: 1px solid var(--line);
           border-radius: var(--radius-lg); padding: 20px; }
  .signin { width: 348px; }
  .wm-lg { font-family: var(--font-display); font-size: 26px; font-weight: 600;
           letter-spacing: -0.022em; text-align: center; margin: 0 0 2px; }
  .tamil { font-family: var(--font-tamil); color: var(--brand); }
  .hostline { text-align: center; font-family: var(--font-mono); font-size: 11px;
              color: var(--ink-subtle); margin: 0 0 20px; }
  .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-bottom: 5px; }
  .inp { width: 100%; height: 38px; border: 1px solid var(--line-strong);
         border-radius: var(--radius-sm); background: var(--surface-100); color: var(--ink);
         font: inherit; font-size: 15px; padding: 0 11px; }
  .inp.bad { border-color: var(--danger); }
  .row { margin-bottom: 14px; }
  .err { display: flex; gap: 8px; align-items: flex-start; background: var(--danger-soft);
         border-radius: var(--radius-md); padding: 9px 11px; font-size: 13px; line-height: 19px;
         margin-bottom: 16px; }
  .err svg, .note svg { flex: 0 0 16px; margin-top: 1px; }
  .err svg { color: var(--danger); }
  .note { display: flex; gap: 8px; align-items: flex-start; background: var(--info-soft);
          border-radius: var(--radius-md); padding: 9px 11px; font-size: 13px; line-height: 19px;
          margin-bottom: 16px; }
  .note svg { color: var(--info); }
  .full { width: 100%; height: 40px; border-radius: var(--radius-sm); background: var(--brand);
          color: var(--on-brand); font-size: 15px; font-weight: 600; }
  .qbar { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
          border-bottom: 1px solid var(--line); background: var(--surface-200); font-size: 14px; }
  .qbar .q { font-weight: 600; }
  .qbar .cnt { color: var(--ink-muted); font-size: 13px; }
  .qbar .sp { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  table.ml { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
  table.ml th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .06em;
                text-transform: uppercase; color: var(--ink-subtle); padding: 8px;
                border-bottom: 1px solid var(--line); }
  table.ml td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
  .c-fld { width: 86px; } .c-from { width: 180px; } .c-time { width: 78px; }
  .subj a { color: var(--ink); text-decoration: none; }
  .fldtag { font-family: var(--font-mono); font-size: 10px; background: var(--surface-300);
            border-radius: var(--radius-xs); padding: 1px 6px; color: var(--ink-muted); }
  .from { font-weight: 600; }
  .num { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); }
  .setrow { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center;
            padding: 11px 0; border-bottom: 1px solid var(--line); }
  .setrow label { font-size: 14px; }
  .setrow .hint { font-size: 12px; color: var(--ink-subtle); margin-top: 4px; }
  h3.sec { font-family: var(--font-display); font-size: 17px; line-height: 23px; font-weight: 600;
           margin: 0 0 3px; }
  p.lead { margin: 0 0 12px; color: var(--ink-muted); font-size: 13px; }
  .trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
  .stop { text-align: center; padding: 34px 20px; }
  .stop h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 12px 0 6px; }
  .stop p { margin: 0 0 14px; color: var(--ink-muted); font-size: 13px; line-height: 19px; }
  .stop .mk { color: var(--ink-subtle); }
/* ---- pieces the app needs beyond the mocks ---- */
.top .wm img { height: 20px; display: block; }
.top form.search { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.top .sbox { height: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
             padding: 0 12px; font: inherit; font-size: 13px; background: var(--surface-100);
             color: var(--ink); width: 240px; }
.top .scope { height: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
              font: inherit; font-size: 12px; background: var(--surface-100); color: var(--ink); }
.top .linkish { font-size: 13px; color: var(--brand); background: none; border: 0;
                padding: 0; cursor: pointer; text-decoration: underline; }
.side .compose { width: 100%; justify-content: center; margin-bottom: 12px; }
.fd .n.unreadn { color: var(--brand); font-weight: 700; }
.burger { display: none; }
.pagehead { display: flex; align-items: baseline; gap: 10px; padding: 12px 12px 0; }
.pagehead h1 { font-family: var(--font-display); font-size: 20px; line-height: 26px;
               font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.pagehead .cnt { color: var(--ink-muted); font-size: 13px; }
.stack { padding: 16px; }
.stack h1 { font-family: var(--font-display); font-size: 22px; line-height: 28px;
            font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; }
.stack p.lead { color: var(--ink-muted); font-size: 14px; margin: 0 0 18px; max-width: 62ch; }
.formcard { background: var(--surface-200); border: 1px solid var(--line);
            border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px; max-width: 560px; }
.formcard h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600;
               margin: 0 0 4px; }
.formcard p.hint { color: var(--ink-subtle); font-size: 12px; margin: 0 0 14px; }
.themepick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.themepick label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong);
                   border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; cursor: pointer; }
.sentas { font-family: var(--font-mono); font-size: 12px; color: var(--ink-subtle); margin: 6px 0 0; }
.notice a { color: inherit; }
.bodyframe { width: 100%; min-height: 420px; border: 0; background: #ffffff; display: block; }
.att .ic { color: var(--ink-subtle); }
.suggest { position: relative; }
.suggest ul { position: absolute; z-index: 5; left: 0; right: 0; margin: 2px 0 0; padding: 4px;
              list-style: none; background: var(--surface-200); border: 1px solid var(--line-strong);
              border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 240px;
              overflow-y: auto; }
.suggest li { padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--brand-soft); }
.suggest li .a { font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); display: block; }
.draftstate { font-size: 12px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
.draftstate i { width: 7px; height: 7px; border-radius: 999px; background: var(--success); display: block; }
.footnote { padding: 0 16px 20px; color: var(--ink-subtle); font-size: 12px; }

/* ---- mobile ---- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; width: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side.open { display: block; }
  .burger { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
            color: var(--ink-muted); }
  .top form.search { margin-left: 0; flex: 1; }
  .top .sbox { width: 100%; min-width: 0; }
  .top .who, .top .scope { display: none; }
  table.ml thead { display: none; }
  table.ml, table.ml tbody, table.ml tr, table.ml td { display: block; width: auto; }
  table.ml tr { border-bottom: 1px solid var(--line); padding: 10px 12px;
                display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 9px; align-items: start; }
  table.ml td { border: 0; padding: 0; }
  table.ml td.c-cb { grid-row: 1 / span 3; }
  table.ml td.c-fl { grid-column: 3; grid-row: 1; text-align: right; }
  table.ml td.c-from { grid-column: 2; grid-row: 1; }
  table.ml td.c-subject { grid-column: 2 / span 2; grid-row: 2; }
  table.ml td.c-time { grid-column: 2; grid-row: 3; }
  table.ml td.c-size { grid-column: 3; grid-row: 3; text-align: right; }
  table.ml td.c-score { grid-column: 3; grid-row: 4; text-align: right; }
  .bulk { flex-wrap: wrap; }
  .hdr { grid-template-columns: 44px 1fr; }
  .fld { grid-template-columns: 1fr; gap: 4px; }
  .fld label { color: var(--ink-subtle); font-size: 12px; }
  .tb { gap: 8px; }
  .tb .btn, .bulk .btn { min-height: 38px; }
  .fd { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
tr.kbfocus td { box-shadow: inset 3px 0 0 var(--brand); background: var(--surface-300); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   Refinement layer.
   The rules above come from the design system's exported mocks,
   which were drawn flat for a static gallery. These give the
   running application its depth, roundness and motion: larger
   radii, layered surfaces, real hover and focus states, and a
   top bar that holds one row at any width. Colour still comes
   only from tokens, so all four themes follow.
   ============================================================ */

:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --r-control: 10px;
  --r-panel: 16px;
}

body { font-feature-settings: "ss01", "cv11", "calt", "kern", "liga"; }

/* ---- top bar: one row, never wraps, sticky ---- */
.top {
  position: sticky; top: 0; z-index: 20;
  height: 60px; gap: 14px; padding: 0 16px;
  background: color-mix(in srgb, var(--surface-200) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  flex-wrap: nowrap;
}
.top .wm { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.top .wm img { height: 26px; width: 26px; display: block; }
.top .wm span { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.top form.search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 520px; margin-left: 8px; gap: 8px; }
.top form.search .si { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
                       color: var(--ink-subtle); pointer-events: none; }
.top .sbox {
  flex: 1 1 auto; min-width: 0; width: auto; height: 38px;
  border-radius: var(--radius-pill); padding: 0 14px 0 36px;
  border: 1px solid transparent; background: var(--surface-inset);
  transition: background 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.top .sbox::placeholder { color: var(--ink-subtle); }
.top .sbox:hover { background: var(--surface-300); }
.top .sbox:focus { background: var(--surface-200); border-color: var(--line-strong);
                   box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); outline: none; }
.top .scope {
  height: 38px; flex: 0 0 auto; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-inset); padding: 0 10px;
  transition: background 160ms var(--ease);
}
.top .scope:hover { background: var(--surface-300); }
.top .sp { gap: 8px; flex: 0 0 auto; min-width: 0; }
.top .who {
  max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-muted);
}
.iconbtn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-pill); color: var(--ink-muted); text-decoration: none;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.iconbtn:hover { background: var(--surface-300); color: var(--ink); }
.iconbtn:active { transform: scale(0.94); }
.lite { gap: 7px; padding: 5px 11px 5px 9px; border-radius: var(--radius-pill);
        background: var(--surface-inset); font-size: 12px; }
.lite i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.lite.off i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-subtle) 22%, transparent); }

/* ---- buttons: pill, lifted, responsive to the pointer ---- */
.btn {
  height: 36px; padding: 0 16px; border-radius: var(--radius-pill);
  font-weight: 550; letter-spacing: -0.005em;
  transition: background 160ms var(--ease), border-color 160ms var(--ease),
              box-shadow 160ms var(--ease), transform 120ms var(--ease), color 160ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-p {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--brand) 92%, #fff 8%) 0%, var(--brand) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-p:hover { filter: brightness(1.06); box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 32%, transparent); }
.btn-s { background: var(--surface-200); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-s:hover { border-color: var(--line-strong); background: var(--surface-100); }
.btn-q:hover { background: var(--surface-300); color: var(--ink); }
.btn-d:hover { filter: brightness(1.06); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.side .compose { height: 42px; font-size: 14px; margin-bottom: 16px; }

/* ---- sidebar ---- */
.side { padding: 14px 12px; background: var(--surface-000); }
.fd {
  height: 38px; border-radius: var(--radius-pill); gap: 11px; padding: 0 12px; margin-bottom: 2px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.fd:hover { background: var(--surface-300); color: var(--ink); }
.fd.on { background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); }
.fd .n { font-size: 11px; background: var(--surface-inset); border-radius: var(--radius-pill);
         padding: 2px 8px; min-width: 22px; text-align: center; }
.fd.on .n, .fd .n.unreadn { background: var(--brand); color: var(--on-brand); }
.quota { margin-top: 18px; padding: 12px; border-radius: var(--r-panel); background: var(--surface-inset); }
.meter { height: 7px; }
.meter i { transition: width 400ms var(--ease); }

/* ---- content surfaces ---- */
.pane { overflow-x: auto; }
.pagehead { padding: 20px 20px 4px; }
.pagehead h1 { font-size: 22px; line-height: 28px; }
.bulk {
  gap: 9px; padding: 12px 20px; background: transparent; border-bottom: 0;
}
.bulk .lbl { font-size: 12px; }

/* ---- message list ---- */
table.ml { border-collapse: separate; border-spacing: 0; }
table.ml th { padding: 6px 12px; border-bottom: 1px solid var(--line); background: transparent; }
table.ml td { padding: 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
table.ml tr { transition: background 140ms var(--ease); }
table.ml tr:hover td { background: color-mix(in srgb, var(--surface-300) 60%, transparent); }
table.ml tbody tr:last-child td { border-bottom: 0; }
.c-cb { width: 38px; padding-left: 20px !important; }
.c-fl { width: 34px; }
.c-from { width: 190px; }
.c-time { width: 86px; }
.c-size { width: 74px; }
.c-score { width: 64px; padding-right: 20px !important; }
.from { display: flex; align-items: center; gap: 8px; }
.udot { flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.subj a { text-decoration: none; }
.subj a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fav { font-size: 16px; line-height: 1; padding: 4px; border-radius: var(--radius-pill);
       transition: color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease); }
.fav:hover { background: var(--surface-300); transform: scale(1.12); }
.score { border-radius: var(--radius-pill); padding: 2px 9px; font-size: 11px; }
.pg { padding: 16px 20px; gap: 14px; }
.kb { padding: 0 20px 16px; }
.empty { padding: 72px 16px; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

/* ---- message view ---- */
.page { padding: 20px 24px 32px; max-width: 1080px; }
.tb { gap: 8px; padding-bottom: 16px; margin-bottom: 18px; }
h2.subj { font-size: 24px; line-height: 31px; margin-bottom: 14px; }
.hdr { grid-template-columns: 56px 1fr; gap: 5px 12px; }
.scoreline { border-radius: var(--radius-pill); padding: 5px 12px; }
.notice { border-radius: var(--r-panel); padding: 12px 15px; align-items: center; }
.bodypanel { border-radius: var(--r-panel); box-shadow: var(--shadow-sm); overflow: hidden; }
.att { border-radius: var(--r-panel); padding: 12px 14px; box-shadow: var(--shadow-sm);
       transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.att:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
details.confirm .inner { border-radius: var(--radius-pill); padding: 6px 10px; }

/* ---- forms ---- */
.compose-page { max-width: 880px; }
.fld { grid-template-columns: 84px 1fr; gap: 14px; padding: 10px 0;
       border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.fld label { font-size: 13px; color: var(--ink-subtle); }
.inp, .fld input, .fld textarea, .fld select {
  height: 40px; border-radius: var(--r-control); border: 1px solid var(--line);
  background: var(--surface-200); padding: 0 13px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.inp:hover, .fld input:hover { border-color: var(--line-strong); }
.inp:focus, .fld input:focus, .fld textarea:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}
.inp.bad { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); }
textarea.inp { border-radius: var(--r-panel); line-height: 22px; }
.panel { border-radius: var(--r-panel); box-shadow: var(--shadow-md); padding: 26px; }
.signin { width: 380px; }
.full { border-radius: var(--radius-pill); height: 44px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff 8%) 0%, var(--brand) 100%);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
        transition: filter 160ms var(--ease), box-shadow 160ms var(--ease); }
.full:hover { filter: brightness(1.06); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 34%, transparent); }
.formcard { border-radius: var(--r-panel); padding: 22px; box-shadow: var(--shadow-sm); }
.themepick label { border-radius: var(--radius-pill); padding: 8px 14px; border-color: var(--line);
                   transition: border-color 160ms var(--ease), background 160ms var(--ease); }
.themepick label:hover { border-color: var(--line-strong); background: var(--surface-100); }
.themepick input:checked + span { font-weight: 650; color: var(--brand); }
.qbar { padding: 14px 20px; }
.suggest ul { border-radius: var(--r-panel); }

/* ---- motion, honoured only when the reader wants it ---- */
@media (prefers-reduced-motion: no-preference) {
  .pane > * { animation: rise 260ms var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 860px) {
  .top { height: 56px; padding: 0 12px; gap: 10px; }
  .top .wm span { display: none; }
  .top form.search { max-width: none; margin-left: 0; }
  .page, .compose-page { padding: 16px 14px 28px; }
  .pagehead { padding: 16px 14px 4px; }
  .bulk, .pg { padding-left: 14px; padding-right: 14px; }
  .c-cb { padding-left: 14px !important; }
}

/* ============================================================
   Reading and writing as a canvas with a rail.
   A mail client usually stacks From / To / Date above the message,
   pushing the thing you came to read below the fold while the space
   to the right sits empty. Anjal puts the message itself in a column
   at a comfortable measure and moves every piece of metadata into a
   rail beside it: details, security checks, attachments, actions.
   Compose mirrors it - the page is a writing surface, and the
   recipients, attachments and Send live in the same rail, in the
   same place on screen.
   ============================================================ */

.reading, .composer {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px; padding: 22px 26px 40px; align-items: start; max-width: 1360px;
}
.read, .write { min-width: 0; }

/* ---- the top bar's right cluster stays on one line, hard right ---- */
.top .sp { margin-left: auto; flex-wrap: nowrap; white-space: nowrap; }
.top .who { max-width: 22ch; }

/* ---- reading ---- */
.readsubj {
  font-family: var(--font-display); font-size: 30px; line-height: 37px;
  font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 12px; max-width: 26ch;
}
.byline { display: flex; align-items: center; gap: 11px; margin: 0 0 18px;
          font-size: 14px; color: var(--ink-muted); }
.byline b { color: var(--ink); font-weight: 600; }
.byline .sep { margin: 0 8px; color: var(--ink-subtle); }
.seal {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-display); font-size: 16px; font-weight: 650;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}
.readnotice { margin-bottom: 14px; }
.read .tb { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.read .bodypanel { margin: 0; }
.read .bodyframe { min-height: 60vh; }

/* ---- the rail ---- */
.rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.railcard {
  background: var(--surface-200); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: var(--r-panel); padding: 16px 16px 18px; box-shadow: var(--shadow-sm);
}
.railhead {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-subtle); margin: 0 0 12px;
}
.raildl { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; font-size: 13px; }
.raildl dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
             text-transform: uppercase; color: var(--ink-subtle); margin-top: 10px; }
.raildl dt:first-child { margin-top: 0; }
.raildl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; line-height: 19px; }
.railnote { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 18px;
            color: var(--ink-subtle); margin: 10px 0 0; overflow-wrap: anywhere; }
.railnote svg { flex: 0 0 14px; margin-top: 2px; }
/* v1.0.0-rc.8: the kept original and its fingerprint */
.railnote.evidence { color: var(--ink-muted); }
.railnote .fingerprint { display: block; font-size: 11px; color: var(--ink-subtle); }
.railnote .fingerprint code { font-size: 11px; }
.raillink { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-muted);
            text-decoration: none; padding: 8px 10px; border-radius: var(--r-control);
            transition: background 160ms var(--ease), color 160ms var(--ease); cursor: pointer; }
.raillink:hover { background: var(--surface-300); color: var(--ink); }
.raillink.danger { color: var(--danger); }
.raillink::-webkit-details-marker { display: none; }
details.confirm > summary.raillink { list-style: none; }
.attrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-control);
          text-decoration: none; color: var(--ink); transition: background 160ms var(--ease); }
.attrow:hover { background: var(--surface-300); }
.attrow .fn { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.attrow .mt { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-subtle); }
.attrow span { flex: 1 1 auto; min-width: 0; }
.attrow .dlic { flex: 0 0 auto; color: var(--ink-subtle); }
.rail .scoreline { margin: 0; }

/* ---- writing ---- */
.subjectline {
  width: 100%; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600;
  letter-spacing: -0.02em; padding: 6px 0 10px; margin-top: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: border-color 160ms var(--ease);
}
.subjectline::placeholder { color: var(--ink-subtle); font-weight: 500; }
.subjectline:focus { outline: none; border-bottom-color: var(--brand); box-shadow: none; }
.canvas {
  width: 100%; min-height: 58vh; margin-top: 18px; resize: vertical;
  border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px; padding: 0;
}
.canvas:focus { outline: none; box-shadow: none; }
.canvas::placeholder { color: var(--ink-subtle); }
.raillabel { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
             text-transform: uppercase; color: var(--ink-subtle); margin: 12px 0 5px; }
.raillabel:first-of-type { margin-top: 0; }
.railinp {
  width: 100%; height: 36px; padding: 0 11px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface-inset); color: var(--ink); font-family: inherit;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.railinp:hover { border-color: var(--line-strong); }
.railinp:focus { outline: none; background: var(--surface-200); border-color: var(--brand);
                 box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.railfile { width: 100%; font-size: 12px; color: var(--ink-muted); }
.railbtn { width: 100%; justify-content: center; margin-bottom: 8px; }
.rail .draftstate { margin: 10px 0 0; font-size: 12px; }
.suggest { display: block; }

/* ---- one column when the rail no longer fits ---- */
@media (max-width: 1080px) {
  .reading, .composer { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px 16px 32px; }
  .rail { position: static; }
  .composer .rail { order: -1; }        /* recipients come first when writing */
  .readsubj { font-size: 25px; line-height: 32px; max-width: none; }
  .subjectline { font-size: 23px; line-height: 30px; }
  .canvas { min-height: 44vh; }
  .read .bodyframe { min-height: 48vh; }
}

/* ============================================================
   Corrections after the first look at the running app.
   ============================================================ */

/* ---- top bar: the wordmark occupies the sidebar's width so the search
        field starts exactly where the message column starts ---- */
.top .wm { width: 196px; flex: 0 0 196px; gap: 10px; }
.top form.search { margin-left: 0; flex: 1 1 auto; max-width: 560px; min-width: 0; }
.top .sfield { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.top form.search .si { left: 13px; }
.top .sbox { width: 100%; }
.top .scope { max-width: 150px; text-overflow: ellipsis; }

/* Sign out sits on the same line as the address, never wrapping under it. */
.top .sp { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.top .sp form.signout { display: inline-flex; align-items: center; margin: 0; }
.top .sp > * { flex: 0 0 auto; }

/* Everything in the bar must be able to shrink rather than push the page wide. */
.top { min-width: 0; }
@media (max-width: 1240px) {
  .top .who { display: none; }
}
@media (max-width: 1040px) {
  .top .wm { width: auto; flex: 0 0 auto; }
}

/* ---- reading: one row for back + actions, quieter subject ---- */
.back.inrow { margin: 0 4px 0 0; padding: 7px; border-radius: var(--radius-pill);
              color: var(--ink-muted); transition: background 160ms var(--ease); }
.back.inrow:hover { background: var(--surface-300); color: var(--ink); }
.read .tb { margin-top: 2px; }
.readsubj { font-size: 19px; line-height: 27px; font-weight: 650; margin: 14px 0 10px; max-width: 46ch; }

/* ---- compose: subject and body share one sheet ---- */
.sheet {
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: var(--r-panel); background: var(--surface-200);
  padding: 18px 22px 22px; margin-top: 12px; box-shadow: var(--shadow-sm);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.sheet:focus-within { border-color: color-mix(in srgb, var(--brand) 45%, transparent);
                      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent); }
.sheet .subjectline { font-size: 19px; line-height: 27px; font-weight: 650; margin: 0; padding: 0 0 12px; }
.sheet .canvas { margin-top: 14px; min-height: 52vh; }

/* ---- bulk bar: nothing is actionable until something is ticked ---- */
.bulk [data-bulkaction][disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.bulk .lbl.armed { color: var(--ink); font-weight: 600; }
input[data-selectall], input[data-rowcheck] { vertical-align: middle; }

/* Junk, Drafts and Trash carry no flag column; the score gets the room. */
.pane .noflag .c-score { width: 84px; }
.pane .noflag .c-from { width: 210px; }

/* ============================================================
   Categories and the dashboard.
   A category is a colour slot and a name, always together: the
   chip carries both, and the charts repeat every number as text
   so nothing is locked behind a hue or a pointer.
   ============================================================ */

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
        border-radius: var(--radius-pill); padding: 3px 10px 3px 8px; background: var(--surface-inset);
        color: var(--ink); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip i, .dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; background: var(--ink-subtle); display: inline-block; }
.dot { margin-right: 7px; }
.c-cat { width: 128px; }

.slot-1 .bar, .bar.slot-1 { background: var(--label-1); }
.slot-2 .bar, .bar.slot-2 { background: var(--label-2); }
.slot-3 .bar, .bar.slot-3 { background: var(--label-3); }
.slot-4 .bar, .bar.slot-4 { background: var(--label-4); }
.slot-5 .bar, .bar.slot-5 { background: var(--label-5); }
.slot-6 .bar, .bar.slot-6 { background: var(--label-6); }
.slot-7 .bar, .bar.slot-7 { background: var(--label-7); }
.slot-8 .bar, .bar.slot-8 { background: var(--label-8); }
.chip.slot-1 { background: var(--label-1-soft); } .chip.slot-1 i { background: var(--label-1); }
.chip.slot-2 { background: var(--label-2-soft); } .chip.slot-2 i { background: var(--label-2); }
.chip.slot-3 { background: var(--label-3-soft); } .chip.slot-3 i { background: var(--label-3); }
.chip.slot-4 { background: var(--label-4-soft); } .chip.slot-4 i { background: var(--label-4); }
.chip.slot-5 { background: var(--label-5-soft); } .chip.slot-5 i { background: var(--label-5); }
.chip.slot-6 { background: var(--label-6-soft); } .chip.slot-6 i { background: var(--label-6); }
.chip.slot-7 { background: var(--label-7-soft); } .chip.slot-7 i { background: var(--label-7); }
.chip.slot-8 { background: var(--label-8-soft); } .chip.slot-8 i { background: var(--label-8); }
.dot.slot-1 { background: var(--label-1); } .dot.slot-2 { background: var(--label-2); }
.dot.slot-3 { background: var(--label-3); } .dot.slot-4 { background: var(--label-4); }
.dot.slot-5 { background: var(--label-5); } .dot.slot-6 { background: var(--label-6); }
.dot.slot-7 { background: var(--label-7); } .dot.slot-8 { background: var(--label-8); }

.bulkcat { display: inline-flex; align-items: center; gap: 6px; }
.bulkcat .scope { height: 30px; font-size: 12px; }
.checkline { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; font-size: 12px;
             line-height: 18px; color: var(--ink-muted); cursor: pointer; }
.catrow { display: flex; align-items: center; gap: 12px; padding: 9px 0;
          border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.catmeta { font-size: 12px; color: var(--ink-subtle); }
.catmeta.shared { margin-left: auto; }
.catdel { margin-left: auto; }
.catadd { display: flex; gap: 10px; margin-top: 16px; }
.catadd .inp { flex: 1 1 auto; }
.subhead { font-size: 13px; font-weight: 600; margin: 20px 0 6px; }

/* ---- dashboard ---- */
.dash { max-width: 1180px; }
.dashhead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.dashhead h1 { margin-bottom: 4px; }
.periodpick { margin-left: auto; display: flex; gap: 8px; }
.heroband { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.hero, .tile { background: var(--surface-200); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
               border-radius: var(--r-panel); padding: 20px; box-shadow: var(--shadow-sm); }
.figure { display: block; font-family: var(--font-display); font-size: 56px; line-height: 60px;
          font-weight: 650; letter-spacing: -0.03em; }
.tilefig { display: block; font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 650; }
.figlabel { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.figsub { margin: 10px 0 0; font-size: 12px; color: var(--ink-subtle); line-height: 18px; }
.dashgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.chart { min-width: 0; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-muted); margin-bottom: 10px; }
.sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.sw-received { background: var(--brand); } .sw-sent { background: var(--info); }
.linechart { width: 100%; height: 190px; display: block; }
.linechart .axis { stroke: var(--line); stroke-width: 1; }
.ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke;
      stroke-linejoin: round; stroke-linecap: round; }
.ln.received { stroke: var(--brand); } .ln.sent { stroke: var(--info); }
.axislabels { display: flex; justify-content: space-between; font-family: var(--font-mono);
              font-size: 11px; color: var(--ink-subtle); margin-top: 6px; }
.barrow { display: grid; grid-template-columns: 130px 1fr 46px; align-items: center; gap: 10px; margin-bottom: 9px; }
.barlabel { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.bartrack { background: var(--surface-inset); border-radius: var(--radius-pill); height: 14px; overflow: hidden; }
.bar { display: block; height: 100%; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
       transition: width 400ms var(--ease); }
.bar.neutral { background: var(--ink-subtle); }
.barvalue { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink-muted); }
table.plain { width: 100%; border-collapse: collapse; font-size: 13px; }
table.plain th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
                 text-transform: uppercase; color: var(--ink-subtle); padding: 6px 0; border-bottom: 1px solid var(--line); }
table.plain td { padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
table.plain .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .heroband, .dashgrid { grid-template-columns: 1fr; }
  .figure { font-size: 44px; line-height: 48px; }
  .c-cat { display: none; }
}

/* The unread dot carries a halo, so its row must not clip: the ellipsis
   moves to the name itself and the flex container stays visible. */
.from { overflow: visible; min-width: 0; }
.sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.unread .sname { font-weight: 700; }
.udot { margin-left: 1px; }

/* A read row keeps the dot's slot so sender names line up down the
   column whether or not a row is unread. */
.udot.off { background: transparent; box-shadow: none; }

/* ---- v0.17.0 list layout ---- */
/* Headers sit where their values sit: numbers are right-aligned, and the
   From header starts where the names do - the cell's 12px padding plus the
   unread-dot slot (7px dot + 8px gap) plus the dot's ring. Measured in a
   browser, not assumed. */
table.ml th.right { text-align: right; }
table.ml th.c-from.withdot { padding-left: 28px; }
/* A date never wraps onto a second line. */
table.ml td.c-time { white-space: nowrap; }
/* The message's category, shown under its subject. */
.readcat { margin: 4px 0 8px; }
/* Settings: add a sender rule on one line, wrapping on narrow screens. */
.ruleadd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.ruleadd .inp:first-of-type { flex: 1 1 260px; }

/* ---- Formatting editor (compose, reply, signature) ---- */
/* The toolbar: uniform square buttons in groups, with thin dividers. */
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 10px 0 2px; }
.rte-bar[hidden] { display: none !important; }
.rte-grp { display: inline-flex; gap: 2px; }
.rte-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.rte-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
           padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted);
           cursor: pointer; font: inherit; font-size: 15px; line-height: 1;
           transition: background 120ms var(--ease), color 120ms var(--ease); }
.rte-btn:hover { background: var(--surface-300); color: var(--ink); }
.rte-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 1px; }
.rte-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.rte-b { font-weight: 800; font-style: normal; }
.rte-i { font-style: italic; font-weight: 600; font-family: Georgia, "Times New Roman", serif; }
/* The body writes straight onto the card: no inner box, grip or ring. The
   card itself (.sheet) shows focus. */
.rte-ed { overflow-y: auto; outline: none; white-space: normal; }
.rte-ed.rte-canvas { resize: none; border: 0; box-shadow: none; margin-top: 8px; }
.rte-ed.rte-canvas:focus, .rte-ed.rte-canvas:focus-visible { outline: none; box-shadow: none; }
.rte-ed blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--ink-muted); }
.rte-ed ul, .rte-ed ol { padding-left: 22px; }
.rte-ed [data-signature] { color: var(--ink-muted); }

/* ---- Attachment column: its own narrow slot, so every subject starts at
   the same place. ---- */
table.ml th.c-att, table.ml td.c-att { width: 22px; padding-left: 0; padding-right: 0; text-align: center; color: var(--ink-subtle); }
table.ml td.c-att svg { vertical-align: -2px; }
@media (max-width: 720px) {
  table.ml td.c-subject { grid-column: 2; }
  table.ml td.c-att { grid-column: 3; grid-row: 2; text-align: right; }
}

/* ---- Settings in two panes ---- */
.settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.setnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.setnav a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; }
.setnav a:hover { background: var(--surface-300); }
.setnav a.on { background: var(--surface-300); font-weight: 700; }
.sigbox { width: 100%; min-height: 120px; }
@media (max-width: 720px) {
  .settings { grid-template-columns: 1fr; }
  .setnav { flex-direction: row; flex-wrap: wrap; position: static; }
}

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The file picker's button matches the other secondary buttons; the native
   "No file chosen" text stays, quieter. Pure CSS, so it works without JavaScript. */
.railfile { font: inherit; font-size: 13px; color: var(--ink-subtle); max-width: 100%; }
.railfile::file-selector-button {
  font: inherit; font-size: 12px; font-weight: 550; height: 30px; padding: 0 14px; margin-right: 10px;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-200);
  color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.railfile::file-selector-button:hover { border-color: var(--line-strong); background: var(--surface-100); }

/* The bulk bar wraps whenever it runs out of room, not only on phones: at a
   tablet or split-screen width it used to scroll sideways and hide its last
   actions (DEF-036). */
.bulk { flex-wrap: wrap; row-gap: 6px; }

/* Sender checks (DEF-038): three small labelled results. */
.authline { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.av { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-muted); }
.av-ok { color: #1e6b3a; border-color: color-mix(in srgb, #1e6b3a 35%, transparent); background: color-mix(in srgb, #1e6b3a 8%, transparent); }
.av-bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.avwarn { color: var(--danger); }

/* The page shown when the service itself is unavailable (DEF-040). */
.errpage { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: var(--surface-200); }
.errcard { max-width: 520px; margin: 24px; padding: 28px 32px; background: var(--surface-100); border: 1px solid var(--line);
           border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.errcard h1 { margin: 0 0 12px; font-size: 22px; }
.errcard p { margin: 0 0 12px; color: var(--ink-muted); }
.errref { font-size: 13px; }

/* ============================================================
   v1.0.0-rc.5 (26 Sep 2026). Kept last in this file on purpose: DEF-060
   happened because a desktop rule further down silently undid the phone
   layout above it.
   ============================================================ */

/* ---- Decision 1B: a checked message with nothing suspicious shows a quiet
        0; a message that was never checked shows a dash. ---- */
.score.s-zero { color: var(--ink-subtle); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent); }
.score.s-none { color: var(--ink-subtle); background: transparent; }

/* ---- DEF-060: on phones each message took about four stacked bands -
        every cell kept the desktop padding and its own divider (the
        "table.ml td" rule and the !important paddings on .c-cb and .c-score
        come after the phone layout), and the score sat alone on a fourth
        row. Now a compact two-line row, as phone mail apps use:
          [ ]  Sender ........................ time   fav
               Subject ....................... score  clip          ---- */
@media (max-width: 860px) {
  table.ml tbody tr {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto auto;
    column-gap: 10px; row-gap: 2px; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  }
  table.ml tbody tr > td { display: block; padding: 0 !important; border: 0 !important;
                           width: auto !important; min-width: 0; background: transparent; }
  table.ml tbody tr:hover > td { background: transparent; }
  table.ml tbody tr:hover { background: color-mix(in srgb, var(--surface-300) 60%, transparent); }
  table.ml tbody tr > td.c-cb      { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  table.ml tbody tr > td.c-from    { grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.ml tbody tr > td.c-subject { grid-column: 2 / span 2; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.ml tbody tr > td.c-time    { grid-column: 3; grid-row: 1; text-align: right; font-size: 12px; }
  table.ml tbody tr > td.c-fl      { grid-column: 4; grid-row: 1; text-align: center; }
  table.ml tbody tr > td.c-score   { grid-column: 4; grid-row: 2; text-align: right; }
  table.ml tbody tr > td.c-att     { grid-column: 3; grid-row: 2; text-align: right; }
  table.ml tbody tr > td.c-att:empty { display: none; }
  table.ml tbody tr > td.c-size,
  table.ml tbody tr > td.c-cat     { display: none; }
  .kb { display: none; }
}

/* ---- Reading on a computer: the page fits the window. The reading area
        is exactly the window's height below the top bar; the message box
        takes whatever height is left and scrolls inside itself, so the page
        never scrolls. The rail scrolls on its own when it is taller than the
        window. The message frame's sandbox is unchanged. ---- */
@media (min-width: 1081px) {
  .reading { height: calc(100vh - 61px); box-sizing: border-box; padding: 16px 24px 16px;
             align-items: stretch; overflow: hidden; }
  .reading > .read { display: flex; flex-direction: column; min-height: 0; }
  .read .bodypanel { flex: 1 1 auto; min-height: 0; display: flex; }
  .read .bodyframe { flex: 1 1 auto; height: auto; min-height: 0 !important; }
  .reading > .rail { position: static; max-height: 100%; overflow-y: auto; gap: 10px;
                     padding-right: 2px; scrollbar-width: thin; }
  .reading .railcard { padding: 12px 14px 14px; }
  .reading .railhead { margin-bottom: 8px; }
  .readsubj { margin: 10px 0 6px; }
  .byline { margin-bottom: 12px; }
}

/* v1.0.0-rc.7: mail that arrived unencrypted (red open lock). */
.unenc { color: var(--danger); display: inline-flex; vertical-align: -2px; margin-right: 4px; }