/* 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; }
.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; }