/* Secureddy — client web app
   Deep charcoal and navy, warm off-white type, one brass accent. Serif
   display for headings, system sans for everything else. No remote fonts,
   no inline styles in templates (CSP). Scales down to 320px; phones get a
   bottom tab bar, laptops a sidebar. Dark is the brand; a warm light theme
   follows prefers-color-scheme or the Settings choice (data-theme).

   Everything is built from the tokens below: colours, an 8px spacing scale,
   radii, shadows and a type scale. The contrast of every text/background pair
   used on chips and buttons is checked by tests/unit/web/test_web_contrast.py. */

:root {
  color-scheme: dark;
  /* colour */
  --bg: #0e1318;
  --bg-raised: #11171d;
  --surface: #151c23;
  --surface-2: #1b232c;
  --surface-3: #222c36;
  --line: #26303a;
  --line-strong: #36424f;
  --text: #efe9dd;
  --text-muted: #a9b2bc;
  --text-dim: #8a95a1;
  --accent: #c9a35c;
  --accent-strong: #dcb86e;
  --accent-ink: #1a1507;
  --accent-soft: #2a2415;
  --accent-line: #5c4a22;
  --ok: #8fd3ad;
  --ok-bg: #173226;
  --ok-line: #2a5a40;
  --warn: #ecc477;
  --warn-bg: #3a2c12;
  --warn-line: #6a4f1d;
  --bad: #f2a3a0;
  --bad-bg: #3f1d1c;
  --bad-line: #7a3230;
  --bad-solid: #e8928d;
  --bad-ink: #2a0d0c;
  --grey: #c2c9d1;
  --grey-bg: #262f38;
  --focus: #e1c37a;

  /* space: 8px rhythm (4px half-step for tight spots) */
  --s-half: 4px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;

  /* shape */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.3);
  --ring: 0 0 0 3px rgba(225, 195, 122, 0.35);

  /* type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --lh-tight: 1.2;
  --lh: 1.55;

  --nav-w: 248px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tabbar-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* provider buttons (Microsoft's dark-theme button; Google's dark button) */
  --pbtn-bg: #1b2229;
  --pbtn-text: #f2efe8;
  --pbtn-line: #3a4552;
  --pbtn-hover: #232c35;
  --scrim: rgba(5, 8, 11, 0.62);
  --av-0-bg: #24303d; --av-0-fg: #cfe0f2;
  --av-1-bg: #2c2a3d; --av-1-fg: #ddd6f6;
  --av-2-bg: #213430; --av-2-fg: #c9eadf;
  --av-3-bg: #3a2f22; --av-3-fg: #f3dfc0;
  --av-4-bg: #352428; --av-4-fg: #f3d0d6;
  --av-5-bg: #2a3324; --av-5-fg: #dbebc9;
}

/* Warm light theme: the same brand in daylight. Two copies of the same
   tokens: one for "match my device", one for an explicit choice. */
:root[data-theme="light"] {
  --bg: #f6f1e7;
  --bg-raised: #efe8da;
  --surface: #fffdf8;
  --surface-2: #f4eee2;
  --surface-3: #eae1cf;
  --line: #e3d9c6;
  --line-strong: #cbbda3;
  --text: #1c2228;
  --text-muted: #4c5662;
  --text-dim: #5f6873;
  --accent: #7f5f1f;
  --accent-strong: #6e5118;
  --accent-ink: #fffaf0;
  --accent-soft: #f4e8cc;
  --accent-line: #d6bb7f;
  --ok: #1d6643;
  --ok-bg: #e3f2e8;
  --ok-line: #a8d2b8;
  --warn: #7c5200;
  --warn-bg: #fbefd3;
  --warn-line: #e3c47a;
  --bad: #9c2c27;
  --bad-bg: #fbe6e4;
  --bad-line: #e7aeaa;
  --bad-solid: #a8372f;
  --bad-ink: #ffffff;
  --grey: #46515d;
  --grey-bg: #ece6da;
  --focus: #8a6a26;
  --shadow-1: 0 1px 2px rgba(60, 45, 20, 0.08);
  --shadow-2: 0 12px 28px rgba(60, 45, 20, 0.12), 0 2px 6px rgba(60, 45, 20, 0.08);
  --ring: 0 0 0 3px rgba(138, 106, 38, 0.25);
  --pbtn-bg: #ffffff;
  --pbtn-text: #2b2b2b;
  --pbtn-line: #c9c2b5;
  --pbtn-hover: #f6f2ea;
  --scrim: rgba(40, 32, 18, 0.38);
  --av-0-bg: #dde7f1; --av-0-fg: #1f3a55;
  --av-1-bg: #e6e1f4; --av-1-fg: #3b2f6b;
  --av-2-bg: #dcefe7; --av-2-fg: #1d4a3a;
  --av-3-bg: #f3e6cf; --av-3-fg: #5a3f13;
  --av-4-bg: #f5dfe2; --av-4-fg: #6a2531;
  --av-5-bg: #e3edd8; --av-5-fg: #33491c;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f1e7;
    --bg-raised: #efe8da;
    --surface: #fffdf8;
    --surface-2: #f4eee2;
    --surface-3: #eae1cf;
    --line: #e3d9c6;
    --line-strong: #cbbda3;
    --text: #1c2228;
    --text-muted: #4c5662;
    --text-dim: #5f6873;
    --accent: #7f5f1f;
    --accent-strong: #6e5118;
    --accent-ink: #fffaf0;
    --accent-soft: #f4e8cc;
    --accent-line: #d6bb7f;
    --ok: #1d6643;
    --ok-bg: #e3f2e8;
    --ok-line: #a8d2b8;
    --warn: #7c5200;
    --warn-bg: #fbefd3;
    --warn-line: #e3c47a;
    --bad: #9c2c27;
    --bad-bg: #fbe6e4;
    --bad-line: #e7aeaa;
    --bad-solid: #a8372f;
    --bad-ink: #ffffff;
    --grey: #46515d;
    --grey-bg: #ece6da;
    --focus: #8a6a26;
    --shadow-1: 0 1px 2px rgba(60, 45, 20, 0.08);
    --shadow-2: 0 12px 28px rgba(60, 45, 20, 0.12), 0 2px 6px rgba(60, 45, 20, 0.08);
    --ring: 0 0 0 3px rgba(138, 106, 38, 0.25);
    --pbtn-bg: #ffffff;
    --pbtn-text: #2b2b2b;
    --pbtn-line: #c9c2b5;
    --pbtn-hover: #f6f2ea;
    --scrim: rgba(40, 32, 18, 0.38);
    --av-0-bg: #dde7f1; --av-0-fg: #1f3a55;
    --av-1-bg: #e6e1f4; --av-1-fg: #3b2f6b;
    --av-2-bg: #dcefe7; --av-2-fg: #1d4a3a;
    --av-3-bg: #f3e6cf; --av-3-fg: #5a3f13;
    --av-4-bg: #f5dfe2; --av-4-fg: #6a2531;
    --av-5-bg: #e3edd8; --av-5-fg: #33491c;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--bg); color-scheme: dark; font-size: 15.5px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/var(--lh) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--text);
}
h1 { font-size: var(--fs-xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-lg); line-height: 1.3; }
p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

.num, .stat-value, time { font-variant-numeric: tabular-nums; }

code, .url-text, .manual-key, .otpauth { font-family: var(--font-mono); font-size: 0.86em; }

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

.skip-link {
  position: absolute; left: -999px; top: var(--s-1); z-index: 50;
  background: var(--accent); color: var(--accent-ink); padding: var(--s-1) var(--s-2); border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--s-1); }

.ico { width: 16px; height: 16px; flex: none; }
.ico-sm { width: 14px; height: 14px; }
.ico-xl { width: 28px; height: 28px; }
.ico-title { width: 20px; height: 20px; color: var(--accent); margin-right: var(--s-1); vertical-align: -3px; }

/* ---------- shell & navigation ---------- */

.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; }

.nav {
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--line);
  background: var(--bg-raised);
}
.nav-top { display: flex; flex-direction: column; height: 100%; padding: var(--s-4) var(--s-2) var(--s-3); }
.nav-links { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 2px; }
.nav li a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 0.97rem;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.nav-ico { width: 17px; height: 17px; opacity: 0.85; }
.nav li a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.nav li a[aria-current="page"] { color: var(--text); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.nav li a[aria-current="page"] .nav-ico { color: var(--accent); opacity: 1; }
.nav-foot { margin-top: auto; display: grid; gap: 10px; padding-top: var(--s-2); border-top: 1px solid var(--line); }
.nav-user { display: grid; gap: 2px; min-width: 0; }
.nav-user strong { font-weight: 600; font-size: 0.95rem; }
.nav-user span { color: var(--text-dim); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-toggle-btn { display: none; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.4rem; color: var(--text); letter-spacing: 0.01em;
  padding: 0 12px;
}
.brand-word span { color: var(--accent); }
.brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand:hover { text-decoration: none; }
.brand-large { display: inline-block; font-size: 1.9rem; padding: 0; margin-bottom: 12px; }

.content { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--s-5) var(--s-6) var(--s-8); min-width: 0; }
.shell .content { padding-left: max(var(--s-6), var(--safe-l)); padding-right: max(var(--s-6), var(--safe-r)); }
.content-centered { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--s-4) var(--s-2); }

/* ---------- page furniture ---------- */

.page-head { margin-bottom: var(--s-3); }
.page-head h1 { margin-bottom: var(--s-1); }
.lede { color: var(--text-muted); font-size: 1.06rem; max-width: 66ch; }
.help { color: var(--text-dim); font-size: 0.9rem; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.block { display: block; }
.note { color: var(--warn); }
.note-decision { color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s-1) 12px; display: inline-block; }
.note-reason { color: var(--text-muted); }
.link { color: var(--accent-strong); }
.eyebrow { color: var(--text-muted); font-size: var(--fs-sm); letter-spacing: 0.04em; margin-bottom: var(--s-1); }

.crumbs { display: flex; gap: 10px; color: var(--text-dim); font-size: 0.88rem; margin-bottom: var(--s-2); flex-wrap: wrap; }
.crumbs a { color: var(--text-muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.card h2 { margin-bottom: 14px; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-bottom: 14px; }
.card-head h2 { margin-bottom: 0; }
.card-head-pad { padding: var(--s-3) var(--s-3) var(--s-1); margin: 0; }
.stack { display: grid; gap: 14px; }
.stack-lg { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); }
.two-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-3); align-items: start; }

.panel { width: 100%; }
.panel-narrow { max-width: 440px; margin: 0 auto; }
.panel .lede { margin-bottom: var(--s-3); }
.error-panel { text-align: left; }
.error-panel h1 { margin-bottom: 10px; }

.empty { text-align: left; }
.empty h2 { margin-bottom: var(--s-1); }
.empty-art { display: block; width: 104px; height: auto; color: var(--line-strong); margin-bottom: var(--s-2); }
.empty-art .ea-accent { color: var(--accent); stroke: var(--accent); }
.empty-art .ea-soft { stroke: var(--line); }
.steps { margin: 0 0 var(--s-3); padding-left: 1.3em; display: grid; gap: 12px; }
.steps li strong { display: block; }
.steps li span { color: var(--text-muted); }
.steps-compact { gap: var(--s-1); margin: 10px 0 6px; color: var(--text-muted); font-size: 0.93rem; }

.divider { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 0.85rem; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.dev-box { margin-top: 26px; border-top: 1px dashed var(--line-strong); padding-top: 12px; }
.dev-box summary { color: var(--text-dim); cursor: pointer; font-size: 0.88rem; margin-bottom: 12px; }

/* ---------- dashboard hero ---------- */

.hero { margin-bottom: var(--s-4); }
.hero-title { font-size: var(--fs-2xl); line-height: 1.15; display: flex; align-items: center; gap: 14px; margin-bottom: var(--s-1); }
.status-dot {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--grey); box-shadow: 0 0 0 5px var(--grey-bg);
}
.hero-ok .status-dot { background: var(--ok); box-shadow: 0 0 0 5px var(--ok-bg); }
.hero-warn .status-dot { background: var(--warn); box-shadow: 0 0 0 5px var(--warn-bg); }
.hero-bad .status-dot { background: var(--bad); box-shadow: 0 0 0 5px var(--bad-bg); }

/* ---------- stat cards ---------- */

ul.stats { list-style: none; padding: 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: 0 0 var(--s-3); }
.stats > li { display: flex; min-width: 0; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: grid; gap: 10px; box-shadow: var(--shadow-1);
}
.stat-link {
  width: 100%; color: inherit; text-decoration: none; position: relative;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.stat-link:hover { text-decoration: none; border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.stat-link:hover .stat-hint { color: var(--accent-strong); }
.stat-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-color: var(--accent); }
.stat-link:active { transform: translateY(0); }
.stat-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-1); }
.stat-label { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text); font-weight: 600; font-size: 0.95rem; }
.stat-ico { width: 18px; height: 18px; }
.stat-period { color: var(--text-dim); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.stat-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); }
.stat-value { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--text); }
.stat-hint { color: var(--text-dim); font-size: 0.84rem; display: inline-flex; align-items: center; gap: 6px; }
.stat-ok .stat-ico, .stat-ok .spark { color: var(--ok); }
.stat-warn .stat-ico, .stat-warn .spark, .stat-warn .stat-value { color: var(--warn); }
.stat-bad .stat-ico, .stat-bad .spark, .stat-bad .stat-value { color: var(--bad); }
.stat-ok .stat-value { color: var(--ok); }
.spark { flex: none; display: block; width: 112px; height: 32px; overflow: visible; }
.spark-line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: currentColor; opacity: 0.12; stroke: none; }
.spark-dot { fill: currentColor; }

/* ---------- dashboard layout ---------- */

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-3); align-items: start; }
.dash-main, .dash-side { min-width: 0; }

.ask-card h2 { display: flex; align-items: center; margin-bottom: var(--s-1); }
.ask-card p { margin-bottom: var(--s-2); }
.ask-form { margin-bottom: 12px; }
.ask-row, .composer-row { display: flex; gap: var(--s-1); align-items: flex-end; }
.ask-row .input { flex: 1; min-width: 0; }
.suggest-list { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; }
.suggest {
  font: inherit; font-size: var(--fs-sm); color: var(--text); text-align: left;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 7px 14px; cursor: pointer; line-height: 1.3;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.suggest:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.suggest:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- chips ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.4;
  border: 1px solid transparent;
}
.chip-ico { width: 13px; height: 13px; flex: none; }
.tone-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.tone-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.tone-bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.tone-grey { color: var(--grey); background: var(--grey-bg); border-color: var(--line-strong); }
.tone-accent { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-line); }
.chips { display: flex; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }

/* ---------- buttons & forms ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  padding: 10px 16px; border-radius: var(--radius-sm); min-height: 40px;
  font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.btn:hover { text-decoration: none; background: var(--surface-3); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-quiet { background: transparent; }
.btn-calm { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.btn-calm:hover { border-color: var(--ok); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-danger { background: transparent; border-color: var(--bad-line); color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); }
.btn-danger-solid { background: var(--bad-solid); border-color: var(--bad-solid); color: var(--bad-ink); }
.btn-danger-solid:hover { background: var(--bad); border-color: var(--bad); }
.btn-small { padding: 6px 12px; font-size: 0.86rem; min-height: 34px; }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 44px; min-height: 44px; flex: none; }
.btn-icon .ico { width: 18px; height: 18px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-primary[disabled]:hover { background: var(--accent); }

.actions { display: flex; gap: 12px; align-items: center; }
.actions-wrap { flex-wrap: wrap; }
.actions form { margin: 0; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form .input { flex: 1 1 240px; min-width: 0; }
.actions .inline-form { flex: 1 1 420px; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 0.88rem; color: var(--text-muted); }
.field-inline { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.field-group { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 110px; }
.input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); min-height: 40px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line-strong);
  font: inherit;
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.input::placeholder { color: var(--text-dim); }
textarea.input { resize: vertical; line-height: 1.45; }
.input-code { max-width: 180px; letter-spacing: 0.2em; font-family: var(--font-mono); }
.input-short { max-width: 110px; }
select.input { appearance: none; padding-right: 32px; }

fieldset { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 12px; min-width: 0; }
legend { color: var(--text-muted); font-size: 0.88rem; margin-bottom: var(--s-1); padding: 0; }
.radio, .check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.radio input, .check input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.radio span { color: var(--text-muted); }
.radio strong { color: var(--text); }
.check { align-items: center; }

.filters {
  display: flex; gap: var(--s-2); align-items: end; flex-wrap: wrap;
  margin-bottom: 18px; padding: var(--s-2) 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.filters .field-inline { grid-template-columns: auto; }

.mode-form { margin: 14px 0 18px; padding-top: var(--s-2); border-top: 1px solid var(--line); }

.key-box {
  display: grid; gap: 6px; padding: 14px var(--s-2); margin: 12px 0 var(--s-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.manual-key { font-size: 1.05rem; letter-spacing: 0.08em; color: var(--accent-strong); }
.otpauth { word-break: break-all; color: var(--text-muted); font-size: 0.78rem; }

/* ---------- "Not suspicious?" / "This is fake" ---------- */

.decide { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: flex-start; margin-bottom: var(--s-2); }
.decide-item { min-width: 0; }
.decide-item[open] { flex-basis: 100%; }
.decide-item > summary { list-style: none; }
.decide-item > summary::-webkit-details-marker { display: none; }
.decide-item[open] > summary { box-shadow: var(--ring); }
.decide-form {
  margin-top: 10px; padding: var(--s-2); display: grid; gap: 14px;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.decide-safe .decide-form { border-left: 3px solid var(--ok); }
.decide-fake .decide-form { border-left: 3px solid var(--bad); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-1); margin: 0; }
.picks legend { grid-column: 1 / -1; color: var(--text); font-weight: 600; font-size: 0.92rem; margin-bottom: var(--s-1); }
.pick {
  display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 9px 12px; min-height: 40px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  font-size: 0.92rem;
}
.pick:hover { border-color: var(--accent-line); }
.pick input { accent-color: var(--accent); margin: 0; flex: none; }
.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pick:has(input:focus-visible) { box-shadow: var(--ring); }
.decide-submit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.decide-submit .help { margin: 0; }
.decide-compact { margin: 0; }

/* ---------- flashes ---------- */

.flashes { display: grid; gap: 10px; margin-bottom: var(--s-3); }
.flash {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 12px var(--s-2); border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
}
.flash-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.flash-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.flash-error { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); }
.flash-info { border-color: var(--accent-line); border-left: 3px solid var(--accent); }
.flash-close { background: transparent; border: 0; color: inherit; font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.panel .flash { margin-bottom: 18px; }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; padding: 0; }
.table-wrap.card { padding: 0; }
.card .table-wrap { margin: 0 calc(-1 * var(--s-3)) calc(-1 * var(--s-3)); padding: 0 var(--s-3) 6px; }
.table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.table th, .table td { text-align: left; padding: 12px 12px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--text-dim); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; border-top: 0; }
.table-wrap.card .table th, .table-wrap.card .table td { padding-left: 20px; }
.table-wrap.card .table th:last-child, .table-wrap.card .table td:last-child { padding-right: 20px; }
.table tbody tr:hover { background: var(--surface-2); }
.col-subject { max-width: 34ch; overflow-wrap: anywhere; }
.table td { overflow-wrap: anywhere; }
time { color: var(--text-muted); white-space: nowrap; }

.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: var(--s-1); }

/* ---------- lists ---------- */

.mailbox-list, .notice-list, .url-list, .attachment-list, .signals { list-style: none; margin: 0; padding: 0; }
.mailbox-row { display: flex; justify-content: space-between; gap: var(--s-2); align-items: center; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mailbox-row:first-child { border-top: 0; padding-top: 0; }
.mailbox-row strong { display: block; overflow-wrap: anywhere; }
.mailbox-row .muted { font-size: 0.86rem; }
.mailbox-id { min-width: 0; }

.notice-list li { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.notice-list li:first-child { border-top: 0; padding-top: 0; }
.notice-head { display: flex; gap: 10px; align-items: center; }
.notice-title { font-weight: 600; }
.meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.86rem; align-items: center; }

/* ---------- message rows (dashboard + list) ---------- */

.mlist { list-style: none; margin: 0; padding: 0; }
.mlist-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; box-shadow: var(--shadow-1); overflow: hidden; }
.mrow + .mrow { border-top: 1px solid var(--line); }
.card-flush .mrow:first-child { border-top: 1px solid var(--line); }
.mrow-link {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px var(--s-2); align-items: start;
  padding: 14px var(--s-3); color: inherit;
  transition: background-color 140ms var(--ease);
}
.mrow-link:hover { background: var(--surface-2); text-decoration: none; }
.mrow-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
.mrow-main { display: grid; gap: 2px; min-width: 0; }
.mrow-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-2); min-width: 0; }
.mrow-who { display: flex; gap: var(--s-1); align-items: baseline; flex-wrap: wrap; min-width: 0; }
.mrow-from { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mrow-addr { color: var(--text-dim); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mrow-top time { font-size: 0.82rem; color: var(--text-dim); flex: none; }
.mrow-subject { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-reason { color: var(--text-muted); font-size: 0.88rem; }
.mrow-lane { color: var(--text-dim); }
.mrow-chip { padding-top: 1px; }
.mrow-actions { padding: 0 var(--s-3) 14px calc(var(--s-3) + 40px + var(--s-2)); margin-top: -4px; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; color: var(--text); background: var(--surface-3);
  border: 1px solid var(--line-strong); flex: none;
}
.av-0 { background: var(--av-0-bg); color: var(--av-0-fg); }
.av-1 { background: var(--av-1-bg); color: var(--av-1-fg); }
.av-2 { background: var(--av-2-bg); color: var(--av-2-fg); }
.av-3 { background: var(--av-3-bg); color: var(--av-3-fg); }
.av-4 { background: var(--av-4-bg); color: var(--av-4-fg); }
.av-5 { background: var(--av-5-bg); color: var(--av-5-fg); }

/* legacy hooks kept for older markup and tests */
.message-list { list-style: none; margin: 0; padding: 0; }

/* ---------- report ---------- */

.verdict-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: start;
  padding: var(--s-3); margin-bottom: var(--s-2);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.verdict-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-line);
}
.verdict-ok { border-left-color: var(--ok); }
.verdict-ok .verdict-icon { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.verdict-warn { border-left-color: var(--warn); }
.verdict-warn .verdict-icon { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.verdict-bad { border-left-color: var(--bad); }
.verdict-bad .verdict-icon { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.verdict-grey { border-left-color: var(--grey); }
.verdict-grey .verdict-icon { background: var(--grey-bg); color: var(--grey); border-color: var(--line-strong); }
.verdict-body { min-width: 0; }
.verdict-block { margin-bottom: 10px; }
.verdict-block .chip { font-size: 0.86rem; padding: 4px 12px 4px 10px; }
.headline { font-size: 2rem; margin-bottom: 10px; overflow-wrap: anywhere; }
.summary { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; color: var(--text); }
.summary-card { border-left: 3px solid var(--accent); }

.mail-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 6px var(--s-4);
  margin: 0 0 var(--s-3); padding: 0 var(--s-1);
}
.mail-meta div { min-width: 0; }
.mail-meta dt { color: var(--text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.mail-meta dd { margin: 0; overflow-wrap: anywhere; font-size: 0.94rem; }
.report-subject { color: var(--text); }
.report-meta { margin-top: 10px; overflow-wrap: anywhere; }

.action-bar h2 { margin-bottom: var(--s-2); }
.action-bar .actions { margin-bottom: 14px; }
.concierge-form { margin-bottom: 10px; }

.feedback { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.feedback form { margin: 0; }

.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reason {
  padding: 14px var(--s-2); background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm);
}
.reason-bad { border-left-color: var(--bad); }
.reason-warn { border-left-color: var(--warn); }
.reason-info { border-left-color: var(--grey); }
.reason-good { border-left-color: var(--ok); }
.reason-good .reason-title { color: var(--ok); }
.reason-title { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: 0 0 4px; }
.reason-meaning { color: var(--text-muted); margin: 0 0 4px; }
.reason-todo { margin: 0; font-size: 0.94rem; }
.reason-todo-label { color: var(--accent-strong); font-weight: 600; }
.good-title, .sub-title { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: var(--s-3) 0 10px; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.check-item { display: flex; gap: 10px; align-items: baseline; }
.check-mark { flex: none; width: 1.4em; height: 1.4em; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-size: 0.85rem; }
.check-ok .check-mark { color: var(--ok); background: var(--ok-bg); }
.check-bad .check-mark { color: var(--bad); background: var(--bad-bg); }
.check-none .check-mark { color: var(--grey); background: var(--grey-bg); }

.signals { display: grid; gap: 12px; }
.signal { padding: 12px 14px; background: var(--bg-raised); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); }
.signal-trust { border-left-color: var(--ok); }
.signal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.signal-title { font-weight: 600; }
.signal-detail { color: var(--text-muted); font-size: 0.92rem; margin: 6px 0 0; }
.bar { flex: none; width: 110px; height: 4px; background: var(--grey-bg); border-radius: 2px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--warn); }
.signal-trust .bar-fill { background: var(--ok); }
.bar-w0 { width: 0; } .bar-w10 { width: 10%; } .bar-w20 { width: 20%; } .bar-w30 { width: 30%; }
.bar-w40 { width: 40%; } .bar-w50 { width: 50%; } .bar-w60 { width: 60%; } .bar-w70 { width: 70%; }
.bar-w80 { width: 80%; } .bar-w90 { width: 90%; } .bar-w100 { width: 100%; }

.url-item, .attachment-item { padding: var(--s-2) 0; border-top: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; }
.url-item > *, .attachment-item > * { max-width: 100%; }
.url-item > .signals, .attachment-item > .signals, .url-item > .url-head { justify-self: stretch; }
.url-item:first-child, .attachment-item:first-child { border-top: 0; padding-top: 0; }
.url-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; min-width: 0; }
.url-text { overflow-wrap: anywhere; color: var(--text); background: var(--bg); padding: 4px var(--s-1); border-radius: 4px; border: 1px solid var(--line); min-width: 0; }
.filename { font-weight: 600; overflow-wrap: anywhere; }
.room-form { margin: 0; }

.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-2); }
.screenshot { margin: 0; display: grid; gap: 0; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.screenshot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--bg); border-bottom: 1px solid var(--line); }
.screenshot figcaption { display: flex; align-items: center; gap: var(--s-1); padding: 10px 12px; font-size: var(--fs-sm); color: var(--text-muted); min-width: 0; }
.shot-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-family: var(--font-mono); font-size: 0.8rem; }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) 20px; margin: 0; font-size: 0.94rem; }
.dl dt { color: var(--text-dim); }
.dl dd { margin: 0; overflow-wrap: anywhere; }

.tech summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.tech summary::-webkit-details-marker { display: none; }
.tech summary::before { content: "+"; color: var(--accent); font-weight: 700; width: 1em; }
.tech[open] summary::before { content: "\2212"; }
.tech summary h2 { margin: 0; font-size: 1.1rem; }
.tech[open] summary { margin-bottom: var(--s-2); }

.mobile-bar { display: none; }

.queue-item .card-head h2 { font-size: 1.15rem; }

/* ---------- message list tabs ---------- */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tab {
  padding: 10px 14px; color: var(--text-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; font-size: 0.95rem;
}
.tab:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.list-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.list-meta p { margin: 0; }
.list-meta .inline-form .input { flex: 0 1 260px; }

/* ---------- trusted & blocked senders ---------- */

.senders { margin-top: 18px; padding-top: var(--s-2); border-top: 1px solid var(--line); }
.senders h3 { font-size: 1.05rem; margin-bottom: 10px; }
.sender-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.sender-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sender-row form { margin: 0; }
.sender-value { margin-left: 6px; overflow-wrap: anywhere; }
.recheck-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }

/* ---------- Ask Secureddy ---------- */

.content-chat { max-width: 1240px; }
.chat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.chat-side { position: sticky; top: var(--s-3); display: grid; gap: var(--s-2); }
.conv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: calc(100vh - 160px); overflow-y: auto; }
.conv-link { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-muted); }
.conv-link:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.conv-link[aria-current="page"] { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; }
.conv-link time { font-size: var(--fs-xs); color: var(--text-dim); }
.conv-empty { padding: 0 12px; }

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 2 * var(--s-5)); }
.chat-head { margin-bottom: var(--s-2); }
.chat-head h1 { font-size: var(--fs-xl); margin-bottom: 4px; overflow-wrap: anywhere; }
.chat-off { margin-top: var(--s-1); }

.chat-log { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.bubble { max-width: min(680px, 88%); display: grid; gap: 6px; min-width: 0; scroll-margin-bottom: 128px; }
.bubble-user { align-self: flex-end; }
.bubble-assistant { align-self: flex-start; }
.bubble-body {
  padding: 12px var(--s-2); border-radius: var(--radius-lg); line-height: 1.55; overflow-wrap: anywhere; min-width: 0;
}
.bubble-user .bubble-body { background: var(--accent-soft); border: 1px solid var(--accent-line); border-bottom-right-radius: 4px; }
.bubble-assistant .bubble-body { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: var(--shadow-1); }
.bubble-failed .bubble-body { border-color: var(--warn-line); }
.bubble-body p { margin: 0 0 var(--s-1); }
.bubble-body p:last-child { margin: 0; }
.bubble-body ul, .bubble-body ol { margin: 0 0 var(--s-1); padding-left: 1.25em; display: grid; gap: 4px; }
.bubble-body ul:last-child, .bubble-body ol:last-child { margin-bottom: 0; }
.bubble-who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--accent-strong); }
.bubble-about { justify-self: end; font-size: var(--fs-xs); color: var(--text-dim); }

.proposal {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--bg-raised); padding: 14px var(--s-2); display: grid; gap: 10px; min-width: 0;
}
.proposal-ok { border-left-color: var(--ok); }
.proposal-bad { border-left-color: var(--bad); }
.proposal-title { display: flex; align-items: center; gap: var(--s-1); margin: 0; font-weight: 600; }
.proposal-title .ico { color: var(--accent); }
.proposal-mail { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.proposal-sender { font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.proposal-sender .muted { font-weight: 400; }
.proposal-subject { color: var(--text); overflow-wrap: anywhere; }
.proposal-reason { color: var(--text-muted); margin: 0; }
.proposal-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.proposal-actions form { margin: 0; }
.proposal-status { display: flex; align-items: center; gap: var(--s-1); margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.proposal-done .proposal-status { color: var(--ok); }

.typing { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 var(--s-2); padding: 10px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.4; animation: typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
.typing em { font-style: normal; font-size: var(--fs-sm); color: var(--text-muted); margin-left: 6px; }
@keyframes typing { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.chat-suggest { margin-bottom: var(--s-2); }
.composer {
  position: sticky; bottom: 0; padding: 12px 0 var(--s-2); background: var(--bg);
  border-top: 1px solid var(--line); display: grid; gap: 6px; margin-top: auto;
}
.composer .composer-input { flex: 1; min-width: 0; resize: none; max-height: 200px; min-height: 44px; }
.composer-about { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.composer-help { margin: 0; font-size: var(--fs-xs); }

/* ---------- sign-in, offline ---------- */

.page-signin .content-centered { padding-top: max(var(--s-4), var(--safe-t)); padding-bottom: max(var(--s-4), var(--safe-b)); }
.signin { width: 100%; max-width: 400px; margin: 0 auto; text-align: center; display: grid; justify-items: center; }
.signin > * { width: 100%; }
.signin-mark {
  width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; margin-bottom: var(--s-3);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); color: var(--accent);
}
.signin-shield { width: 40px; height: 40px; }
.signin-title { font-size: 2.6rem; line-height: 1.05; letter-spacing: 0.005em; margin-bottom: 10px; }
.signin-title span { color: var(--accent); }
.signin-promise { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-muted); margin-bottom: var(--s-4); }
.signin .flash { text-align: left; margin-bottom: var(--s-2); }
.signin-buttons { display: grid; gap: 12px; margin-bottom: var(--s-3); }
.pbtn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px;
  padding: 12px 18px; border-radius: 10px; border: 1px solid var(--pbtn-line);
  background: var(--pbtn-bg); color: var(--pbtn-text); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.pbtn:hover { background: var(--pbtn-hover); border-color: var(--line-strong); text-decoration: none; box-shadow: var(--shadow-1); }
.pbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pbtn-microsoft { font-family: "Segoe UI", var(--font-body); }
.plogo { width: 20px; height: 20px; flex: none; }
.signin-trust {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px; text-align: left;
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; margin: 0 auto var(--s-3); max-width: 34ch;
}
.signin-trust .ico { color: var(--accent); margin-top: 2px; }
.signin-other { text-align: left; border-top: 1px solid var(--line); padding-top: var(--s-2); }
.signin-other > summary {
  cursor: pointer; color: var(--text-muted); font-size: 0.92rem; list-style: none; display: flex; justify-content: center;
  align-items: center; gap: 8px; min-height: 44px;
}
.signin-other > summary::-webkit-details-marker { display: none; }
.signin-other > summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.signin-other[open] > summary::after { content: "\2212"; }
.signin-other[open] > summary { margin-bottom: var(--s-1); }
.signin-form { text-align: left; }
.offline .btn { margin-top: var(--s-1); }

/* ---------- connect a mailbox ---------- */

.chooser { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chooser form { margin: 0; height: 100%; }
.tile {
  display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; min-height: 72px; text-align: left;
  padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg-raised);
  color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), transform 140ms var(--ease);
}
.tile:hover { border-color: var(--accent-line); background: var(--surface-2); text-decoration: none; }
.tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tile .plogo { width: 28px; height: 28px; }
.plogo-generic { color: var(--accent); }
.tile-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tile-text strong { font-size: 1rem; }
.tile-text span { color: var(--text-muted); font-size: 0.86rem; line-height: 1.35; }
.tile-go { color: var(--text-dim); }
.tile:hover .tile-go { color: var(--accent-strong); }

.mailbox-head { align-items: center; justify-content: flex-start; }
.mailbox-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-raised); border: 1px solid var(--line); flex: none; }
.mailbox-logo .plogo { width: 24px; height: 24px; }
.mailbox-title { min-width: 0; flex: 1; }
.mailbox-title h2 { overflow-wrap: anywhere; font-size: 1.25rem; }
.mailbox-head .chips { margin-left: auto; }

.page-head-logo { display: flex; gap: var(--s-2); align-items: flex-start; }
.page-head-logo > .plogo { width: 44px; height: 44px; margin-top: 4px; }
.two-col-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.big-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.big-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.big-steps p { color: var(--text-muted); margin: 4px 0 0; }
.big-step-num {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display);
  font-size: 1.1rem; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.input-mono { font-family: var(--font-mono); letter-spacing: 0.08em; }
.suggest-card { border-left: 3px solid var(--accent); }
.suggest-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.suggest-head h2 { margin: 0; }
.suggest-head .plogo { width: 26px; height: 26px; }
.suggest-imap { margin-top: var(--s-2); }
.suggest-imap > summary { cursor: pointer; color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }

/* ---------- trusted senders ---------- */

.sender-row { padding: 12px 0; border-top: 1px solid var(--line); }
.sender-row:first-child { border-top: 0; padding-top: 0; }
.sender-main { display: grid; gap: 4px; min-width: 0; }
.sender-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sender-value { margin-left: 0; }
.sender-label { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.sender-meta { color: var(--text-dim); font-size: 0.86rem; margin: 0; overflow-wrap: anywhere; }
.sender-meta q { color: var(--text-muted); quotes: "\201C" "\201D"; }
.sender-checks { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 0.86rem; margin: 2px 0 0; }
.sender-checks.is-changed { color: var(--bad); }
.sender-list { gap: 0; }

/* ---------- trust box, badges ---------- */

.trust-box {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px var(--s-3); margin: 0 0 var(--s-2); border-radius: var(--radius);
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--text);
}
.trust-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ok); border: 1px solid var(--ok-line); }
.trust-icon .ico { width: 18px; height: 18px; }
.trust-title { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; color: var(--ok); }
.trust-text { margin: 0; color: var(--text); }
.trust-changed { background: var(--bad-bg); border-color: var(--bad-line); border-left: 4px solid var(--bad); }
.trust-changed .trust-icon { color: var(--bad); border-color: var(--bad-line); }
.trust-changed .trust-title { color: var(--bad); font-size: 1.1rem; }
.trust-incomplete { background: var(--grey-bg); border-color: var(--line-strong); }
.trust-incomplete .trust-icon, .trust-incomplete .trust-title { color: var(--grey); }

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; border: 1px solid transparent;
}
.badge-ico { width: 12px; height: 12px; }
.badge-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.badge-bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.mrow-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- appearance ---------- */

.theme-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.segmented { display: inline-flex; gap: 0; margin: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-raised); }
.seg { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: 7px; color: var(--text-muted); font-weight: 600; font-size: 0.92rem; }
.seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---------- install hint ---------- */

.nav-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ios-hint {
  display: flex; align-items: center; gap: 12px; padding: 12px var(--s-2); margin-bottom: var(--s-3);
  border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--radius-sm); color: var(--text);
}
.ios-hint p { margin: 0; flex: 1; }
.ios-hint .ico { color: var(--accent-strong); }

/* ---------- tab bar (phones) and actions sheet ---------- */

.tabbar { display: none; }
.sheet-open, .sheet-backdrop, .sheet-head .sheet-close { display: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s-2); }
.sheet-head h2 { margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 var(--s-3); }
}

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .content { padding: var(--s-4) var(--s-3) var(--s-6); }
  .shell .content { padding-left: max(var(--s-3), var(--safe-l)); padding-right: max(var(--s-3), var(--safe-r)); }
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-side { position: static; order: 2; }
  .conv-list { max-height: none; }
  .mail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .nav { position: sticky; top: 0; z-index: 20; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-top { flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; padding: 10px var(--s-2); gap: 0; }
  .brand { padding: 0; font-size: 1.25rem; }
  .nav-toggle-btn {
    display: inline-flex; align-items: center; gap: var(--s-1); margin-left: auto; cursor: pointer;
    padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); font-weight: 600; font-size: 0.9rem;
  }
  .nav-burger, .nav-burger::before, .nav-burger::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
  .nav-burger::before, .nav-burger::after { content: ""; position: absolute; left: 0; }
  .nav-burger::before { top: -5px; }
  .nav-burger::after { top: 5px; }
  .nav-toggle:focus-visible + .nav-toggle-btn { outline: 2px solid var(--focus); outline-offset: 2px; }
  .nav-links { display: none; flex-basis: 100%; padding-top: var(--s-1); }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav ul { margin: 0; }
  .nav-foot { margin-top: var(--s-1); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .content { padding: var(--s-3) var(--s-2) var(--s-6); }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .stat { padding: var(--s-2); }
  .stat-value { font-size: 2.2rem; }
  .card { padding: 18px var(--s-2); }
  .card-flush { padding: 0; }
  .card-head-pad { padding: 18px var(--s-2) var(--s-1); }
  .card .table-wrap { margin: 0 calc(-1 * var(--s-2)) -18px; padding: 0 var(--s-2) 6px; }
  .col-hide-sm { display: none; }
  .field-group { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
  .hero-title { font-size: 1.75rem; }
  .headline { font-size: 1.55rem; }
  .summary { font-size: 1.1rem; }
  .verdict-banner { padding: 18px var(--s-2); }
  .mrow-link { grid-template-columns: 36px minmax(0, 1fr); padding: 12px var(--s-2); gap: 4px 12px; }
  .avatar { width: 36px; height: 36px; font-size: 0.8rem; }
  .mrow-chip { grid-column: 2; padding-top: 4px; }
  .mrow-addr { display: none; }
  .mrow-actions { padding: 0 var(--s-2) 12px calc(var(--s-2) + 36px + 12px); }
  .picks { grid-template-columns: 1fr; }
  .decide-compact { gap: 6px; }
  .decide-compact .btn-small { padding: 5px 10px; font-size: 0.82rem; gap: 6px; }
  .bubble { max-width: 94%; }
  .shell .content { padding-left: max(var(--s-2), var(--safe-l)); padding-right: max(var(--s-2), var(--safe-r)); }
  .verdict-banner { grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; }
  .verdict-banner .verdict-icon { width: 40px; height: 40px; }
  .verdict-banner .ico-xl { width: 22px; height: 22px; }
  code, .url-text { overflow-wrap: anywhere; word-break: break-word; }
  .has-sheet .sheet-open.sheet-open-quiet { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); }
  .has-sheet .sheet-open.sheet-open-quiet:hover { background: var(--surface-3); }

  /* header: brand + Menu (the rest of the places); safe area at the top */
  .nav { padding-top: var(--safe-t); background: color-mix(in srgb, var(--bg-raised) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .nav-top { padding-left: max(var(--s-2), var(--safe-l)); padding-right: max(var(--s-2), var(--safe-r)); min-height: 56px; }
  .nav-toggle-btn { min-height: 44px; }
  .nav-links .nav-tabbed { display: none; }
  .nav li a { min-height: 44px; }
  .nav-foot { flex-wrap: wrap; }
  .brand-mark { width: 24px; height: 24px; }

  /* bottom tab bar */
  .has-tabbar .content { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--s-4)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px max(8px, var(--safe-l)) calc(6px + var(--safe-b)) max(8px, var(--safe-r));
    background: color-mix(in srgb, var(--bg-raised) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .tab-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
    border-radius: 12px; color: var(--text-dim); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
  }
  .tab-link:hover { text-decoration: none; color: var(--text); }
  .tab-ico { width: 22px; height: 22px; }
  .tab-link[aria-current="page"] { color: var(--accent-strong); }
  .tab-link[aria-current="page"] .tab-ico { background: var(--accent-soft); border-radius: 10px; padding: 3px 12px; width: 48px; height: 28px; margin: -3px 0; }
  .tab-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

  /* report: actions in a bottom sheet */
  .has-sheet .action-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; max-height: 86vh; overflow-y: auto;
    border-radius: 20px 20px 0 0; border-bottom: 0; padding: 10px var(--s-2) calc(var(--s-3) + var(--safe-b));
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35); transform: translateY(105%); visibility: hidden;
    transition: transform 220ms var(--ease), visibility 0s linear 220ms;
  }
  .has-sheet .action-sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 12px; }
  .has-sheet .action-sheet:target { transform: translateY(0); visibility: visible; transition: transform 220ms var(--ease); }
  .has-sheet .sheet-head .sheet-close { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted); background: var(--surface-2); }
  .has-sheet .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); }
  .has-sheet .action-sheet:target + .sheet-backdrop { opacity: 1; pointer-events: auto; }
  .has-sheet .sheet-open {
    display: flex; align-items: center; justify-content: center; gap: 8px; position: fixed; z-index: 45;
    left: max(var(--s-2), var(--safe-l)); right: max(var(--s-2), var(--safe-r)); bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
    min-height: 50px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 700;
    box-shadow: var(--shadow-2);
  }
  .has-sheet .sheet-open:hover { text-decoration: none; background: var(--accent-strong); }
  .has-sheet { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 90px); }
  .action-sheet .decide-item .btn, .action-sheet .actions .btn { width: 100%; justify-content: center; }
  .action-sheet .decide { display: grid; }
  .action-sheet .actions form { flex: 1 1 auto; }
  .composer { bottom: calc(var(--tabbar-h) + var(--safe-b)); }

  /* comfortable cards for message rows */
  .mlist-card { background: transparent; border: 0; box-shadow: none; overflow: visible; display: grid; gap: 10px; }
  .mlist-card .mrow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
  .mlist-card .mrow + .mrow { border-top: 1px solid var(--line); }
  .mrow-link { min-height: 64px; }
  .btn { min-height: 44px; }
  .btn-small { min-height: 40px; }
  .chooser { grid-template-columns: minmax(0, 1fr); }
  .mailbox-head { flex-wrap: wrap; }
  .mailbox-head .chips { margin-left: 0; width: 100%; justify-content: flex-start; }
  .two-col-even { grid-template-columns: minmax(0, 1fr); }
  .signin-title { font-size: 2.3rem; }
  .trust-box { padding: 14px var(--s-2); }
  .sender-row { flex-direction: column; }
  .sender-row form .btn { padding-left: 0; }
  .chat-main { min-height: 0; }
  .shot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .signin-title { font-size: 2.1rem; }
  .signin-promise { font-size: 1.15rem; }
  .mrow-chip .chip { font-size: 0.72rem; }
  .bar { width: 70px; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dd { margin-bottom: var(--s-1); }
  .mail-meta { grid-template-columns: minmax(0, 1fr); }
  .spark { width: 96px; }
  .actions .btn, .actions form { flex: 1 1 auto; }
  .actions form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .stat-link:hover { transform: none; }
}

@media (pointer: coarse) {
  .btn, .input, .pick, .tile, .pbtn { min-height: 44px; }
  .flash-close { min-width: 44px; min-height: 44px; }
}

@media (min-width: 761px) {
  /* laptops: sidebar, comfortable reading width, a little more air */
  .nav { padding-top: var(--safe-t); }
  .nav-foot-actions .btn { flex: 0 0 auto; }
}

@media (min-width: 1400px) {
  .content { max-width: 1240px; }
}

@media (display-mode: standalone) {
  .install-btn { display: none !important; }
}

/* ======================================================================
   Accounts, inbox switch, search, reading mail, link check, lock screen,
   settings rows, assistant cards. Same tokens as everything above.
   ====================================================================== */

.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.page-head-row > div { min-width: 0; flex: 1 1 320px; }

/* ---------- account cards ---------- */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.acct-card { display: grid; gap: 14px; align-content: start; margin: 0; }
.acct-off { opacity: 0.82; }
.acct-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.acct-id { min-width: 0; flex: 1; }
.acct-id h2 { margin: 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 650; overflow-wrap: anywhere; }
.acct-id p { margin: 2px 0 0; }
.acct-head .chips { flex: none; }
.acct-problem { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--grey-bg); color: var(--text); }
.acct-problem p { margin: 0; }
.acct-problem .ico { flex: none; margin-top: 2px; }
.acct-problem-bad { background: var(--bad-bg); border: 1px solid var(--bad-line); }
.acct-problem-bad .ico { color: var(--bad); }
.acct-problem-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.acct-problem-warn .ico { color: var(--warn); }
.acct-detail summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 4px; }
.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.acct-stats div { padding: 10px 12px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.acct-stats dt { font-size: var(--fs-xs); color: var(--text-dim); }
.acct-stats dd { margin: 2px 0 0; font-weight: 650; font-size: 1.1rem; }
.acct-flagged { color: var(--warn); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-actions form { margin: 0; }
.acct-more { border-top: 1px solid var(--line); padding-top: 10px; }
.acct-more > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 44px; font-weight: 600; flex-wrap: wrap; }
.acct-more > summary::-webkit-details-marker { display: none; }
.acct-more > summary .muted { font-weight: 400; }
.acct-more[open] > summary { color: var(--accent-strong); }
.acct-more-body { display: grid; gap: var(--s-2); padding-top: var(--s-1); }
.acct-more .mode-form { margin: 0; border-top: 0; padding-top: 0; }
.danger-zone { border: 1px dashed var(--bad-line); border-radius: var(--radius-sm); padding: 10px 12px; }
.danger-zone > summary { list-style: none; cursor: pointer; display: inline-flex; }
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-body { display: grid; gap: 10px; padding-top: 10px; }
.danger-body p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- inbox switch ("All inboxes · a@x · b@y") ---------- */
.inbox-switch { margin: 0 0 var(--s-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.inbox-switch::-webkit-scrollbar { display: none; }
.inbox-switch ul { display: inline-flex; gap: 6px; list-style: none; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg-raised); }
.inbox-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--text-muted); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.inbox-pill .plogo, .inbox-pill .ico { width: 16px; height: 16px; }
.inbox-pill:hover { text-decoration: none; color: var(--text); background: var(--surface); }
.inbox-pill[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); outline: 1px solid var(--accent-line); }
.inbox-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.acct-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 1px 8px 1px 5px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-muted); font-size: var(--fs-xs); }
.acct-tag .plogo { width: 12px; height: 12px; }
.acct-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mini-logo { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--bg-raised); border: 1px solid var(--line); color: var(--accent); }
.mini-logo .plogo { width: 18px; height: 18px; }
.mailbox-row-link { display: flex; align-items: center; gap: 12px; color: inherit; border-radius: var(--radius-sm); padding: 12px 6px; }
.mailbox-row-link:hover { text-decoration: none; background: var(--surface-2); }
.mailbox-row-link[aria-current="true"] { background: var(--accent-soft); }
.mailbox-row-link .mailbox-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mailbox-row-link .mailbox-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-list > li + li { border-top: 1px solid var(--line); }

/* ---------- search ---------- */
.search { display: grid; gap: 8px; margin: 0 0 var(--s-2); }
.search-row { position: relative; display: flex; gap: 8px; align-items: center; }
.search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
.search-input { padding-left: 38px; padding-right: 64px; min-height: 44px; flex: 1; min-width: 0; }
.search-kbd { position: absolute; right: 104px; top: 50%; transform: translateY(-50%); font: 600 0.72rem var(--font-body); color: var(--text-dim); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 6px; pointer-events: none; }
.search-row .btn { min-height: 44px; }
.search-inside { font-size: var(--fs-sm); color: var(--text-muted); }
mark { background: var(--accent-soft); color: var(--text); border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--accent-line); }
.segmented-sm .seg span { min-height: 36px; padding: 4px 12px; font-size: 0.86rem; }
.view-form { margin: 0; }
.view-form fieldset { margin: 0; }
.live-results { margin-bottom: var(--s-3); }
.live-problem { margin: 0 var(--s-2) var(--s-1); }
.mrow-static { cursor: default; }
.mrow-static:hover { background: transparent; }
.inbox-section { margin-bottom: var(--s-2); }
.sec-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 1rem; font-weight: 650; min-width: 0; }
.sec-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-title .plogo { width: 20px; height: 20px; flex: none; }

/* ---------- reading an email ---------- */
.mail-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 var(--s-2); }
.tabs-tight { margin: 0; border-bottom: 0; }
.tabs-tight .tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.mail-actions form { margin: 0; }
.read-card { display: grid; gap: 12px; }
.read-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.read-note { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.read-images-note { margin: 0; }
.read-frame { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.advice { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: var(--fs-sm); }
.advice .ico { flex: none; margin-top: 2px; }
.advice-ok .ico { color: var(--ok); }
.advice-warn .ico { color: var(--warn); }
.advice-bad { color: var(--bad); }
.links-summary { margin: 0 0 8px; font-weight: 600; }

/* ---------- the link check page (/go) ---------- */
.go-panel { max-width: 640px; margin: var(--s-4) auto; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); display: grid; gap: 14px; }
.go-panel h1 { margin: 0; }
.go-panel .lede { margin: 0; }
.go-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.go-ok .go-icon { background: var(--ok-bg); color: var(--ok); }
.go-warn .go-icon { background: var(--warn-bg); color: var(--warn); }
.go-bad .go-icon { background: var(--bad-bg); color: var(--bad); }
.go-url { display: grid; gap: 6px; padding: 12px 14px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.go-host { font-size: 1.15rem; overflow-wrap: anywhere; }
.go-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.go-actions form { margin: 0; }
.go-risk { border-top: 1px solid var(--line); padding-top: 12px; }
.go-risk summary { cursor: pointer; color: var(--text-muted); min-height: 44px; display: flex; align-items: center; }
.go-risk p { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- lock screen ---------- */
.page-lock .content { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding-top: max(var(--s-4), var(--safe-t)); }
.lock { width: min(100%, 340px); display: grid; gap: var(--s-2); justify-items: center; text-align: center; }
.lock .signin-mark { margin: 0; }
.lock-title { font-size: 1.5rem; margin: 0; }
.lock-who { margin: -8px 0 0; }
.lock-form { display: grid; gap: var(--s-2); width: 100%; justify-items: center; }
.lock-form .field { width: 100%; text-align: left; }
.lock-error { width: 100%; }
.lock-input { max-width: 220px; text-align: center; font-size: 1.4rem; }
.has-pad .lock-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (pointer: fine) { .has-pad .lock-input { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; max-width: 220px; } }
.pin-dots { display: flex; gap: 14px; justify-content: center; min-height: 18px; }
.pin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background-color 120ms var(--ease), border-color 120ms var(--ease); }
.pin-dots span.on { background: var(--accent); border-color: var(--accent); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; justify-content: center; }
.pin-pad[hidden] { display: none; }
.pin-key { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 600 1.5rem var(--font-body); cursor: pointer; display: grid; place-items: center; }
.pin-key:hover { background: var(--surface-2); }
.pin-key:active { background: var(--surface-3); transform: scale(0.97); }
.pin-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pin-key-alt { border-color: transparent; background: transparent; color: var(--text-muted); }
.pin-key-alt .ico { width: 24px; height: 24px; }
.busy .pin-key { opacity: 0.5; }
.lock-passkey { width: 100%; display: grid; gap: 6px; }
.lock-passkey-msg { min-height: 1.2em; margin: 0; }
.lock-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lock-foot form { margin: 0; }

/* ---------- settings ---------- */
.settings-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--s-3); }
.settings-nav a { padding: 8px 12px; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--text-muted); font-size: 0.88rem; font-weight: 600; }
.settings-nav a:hover { text-decoration: none; color: var(--text); border-color: var(--line-strong); }
.card[id] { scroll-margin-top: 80px; }
.row-list { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; }
.row-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-width: 0; }
.row-item + .row-item { border-top: 1px solid var(--line); }
.row-item form { margin: 0; flex: none; }
.row-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.row-main strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.row-main .muted { overflow-wrap: anywhere; }
.add-ways { display: flex; gap: 10px; flex-wrap: wrap; }
.add-ways form { margin: 0; }
.add-ways .pbtn { width: auto; }
.sub-details { border-top: 1px solid var(--line); padding: 10px 0; }
.sub-details > summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.sub-details form { margin-top: 10px; }
.two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.install-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.install-art { width: 100%; height: auto; max-width: 200px; }
.ia-body { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; }
.ia-screen { fill: var(--bg); }
.ia-notch { fill: var(--surface-3); }
.ia-bar { fill: var(--surface-2); stroke: var(--line); }
.ia-line { fill: var(--surface-3); }
.ia-mark { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.ia-check { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ia-ring { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.ia-share { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ia-label { fill: var(--text); font: 600 12px var(--font-body); }

/* ---------- assistant result cards ---------- */
.scope-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); }
.ccard { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); min-width: 0; }
.ccard-title { margin: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); }
.ccard-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ccard-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--text); min-width: 0; }
.ccard-row:hover { text-decoration: none; border-color: var(--accent-line); }
.ccard-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ccard-row .plogo { width: 18px; height: 18px; flex: none; }
.ccard-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ccard-main strong, .ccard-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard-main .muted { overflow-wrap: anywhere; }
.ccard-rank { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: var(--fs-xs); }
.ccard-row .chip { flex: none; }
.ccard-link { display: grid; gap: 6px; min-width: 0; }
.ccard-link p { margin: 0; }
.ccard-more { font-size: var(--fs-sm); justify-self: start; }
.bubble-cards { display: grid; gap: 8px; }
.bubble-cards:empty { display: none; }
.bubble-draft { white-space: pre-wrap; }
.bubble-live .bubble-body:has(.bubble-draft:empty) { display: none; }
.composer-about-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.read-consent { font-size: var(--fs-sm); color: var(--text-muted); min-height: 40px; }
.admin-hint { margin-top: var(--s-2); text-align: left; }
.admin-hint code { font-size: 0.8em; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .acct-actions .btn { flex: 1 1 auto; }
  .acct-actions form { flex: 1 1 auto; }
  .acct-actions form .btn { width: 100%; }
  .mail-tools { align-items: stretch; }
  .mail-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mail-actions form .btn, .mail-actions > .btn { width: 100%; }
  .mail-actions > .btn { grid-column: 1 / -1; }
  .read-frame { height: 64vh; min-height: 360px; }
  .search-kbd { display: none; }
  .search-input { padding-right: 12px; }
  .two-fields { grid-template-columns: minmax(0, 1fr); }
  .install-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .go-panel { margin: var(--s-2) 0; padding: var(--s-3) var(--s-2); }
  .row-item { flex-wrap: wrap; }
  .row-item form { margin-left: 48px; }
  .page-head-row .btn { width: 100%; }
  .view-form { width: 100%; }
  .inbox-pill { min-height: 44px; }
}
@media (max-width: 420px) {
  .pin-pad { grid-template-columns: repeat(3, 68px); gap: 12px 18px; }
  .pin-key { width: 68px; height: 68px; }
  .acct-stats div { padding: 8px; }
}
.chips-start { justify-content: flex-start; margin-top: 4px; }
.mailbox-row-link { align-items: flex-start; }

/* Period filter (Today · 7 days · 1 month · 1 year) and the two stat cards. */
.period-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-2); }
.period-switch { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.period-switch::-webkit-scrollbar { display: none; }
.period-switch ul { display: inline-flex; gap: 2px; list-style: none; margin: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-raised); }
.period-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 7px; color: var(--text-muted); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.period-pill:hover { text-decoration: none; color: var(--text); }
.period-pill[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.period-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.period-total { margin: 0; color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.period-total .num { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; margin-right: 2px; }
.period-total .muted { font-weight: 400; }
.stats.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: -4px; }
.mrow-chip .chip + .chip { margin-top: 4px; }
.mrow-chip { display: inline-flex; flex-direction: column; align-items: flex-end; }
.list-period { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-2); }
@media (max-width: 640px) {
  .stats.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats-2 .stat-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .stats-2 .spark { width: 100%; max-width: 140px; height: auto; }
  .stats-2 .stat-period { display: none; }
  .period-bar { flex-direction: column; align-items: stretch; }
  .period-switch ul { display: flex; width: 100%; }
  .period-switch li { flex: 1 1 0; }
  .period-pill { justify-content: center; width: 100%; padding: 4px 6px; min-height: 40px; }
}
@media (max-width: 760px) {
  .mrow-chip { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .mrow-chip .chip + .chip { margin-top: 0; }
}
.list-note { margin: calc(-1 * var(--s-1)) 0 var(--s-2); }

/* Two-step sign-in: QR code, steps, setup key, recovery codes, the code page. */
.mfa-setup { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-3); align-items: start; margin: var(--s-2) 0; }
.mfa-qr { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.qr { display: block; width: 200px; height: 200px; border-radius: var(--radius); box-shadow: var(--shadow-1); border: 1px solid var(--line); }
.qr-bg { fill: #ffffff; }
.qr-fg { fill: #0e1318; }
.mfa-steps li span { display: block; }
.mfa-steps li span + span { margin-top: 4px; }
.mfa-steps li .key-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-top: var(--s-1); }
.key-row .manual-key { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); word-break: break-all; }
.mfa-confirm { margin-top: var(--s-1); }
.two-step-actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--s-3); margin: var(--s-2) 0; padding-left: 1.6em; }
.recovery-codes code { font-size: 1.05rem; letter-spacing: 0.06em; color: var(--text); }
.recovery-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-2); }
.mfa-lede { text-align: center; margin: 0 0 var(--s-2); }
.mfa-code { font-size: 1.4rem; letter-spacing: 0.2em; text-align: center; }
.mfa-cancel { margin-top: var(--s-2); text-align: center; }
.lock-totp { width: 100%; margin-top: var(--s-2); }
@media (max-width: 640px) {
  .mfa-setup { grid-template-columns: 1fr; }
  .mfa-qr { order: -1; }
  .recovery-codes { grid-template-columns: 1fr; }
}
.stats-2 .stat { display: flex; flex-direction: column; gap: 10px; }
.stats-2 .stat-hint { margin-top: auto; padding-top: 2px; }
@media (max-width: 640px) {
  .list-period { flex-direction: column; align-items: stretch; }
  .list-period .period-switch ul { display: flex; width: 100%; }
  .list-period .period-switch li { flex: 1 1 0; }
}
.mfa .lock-title { margin-bottom: var(--s-1); }
.mfa .input-code, .lock-totp .input-code { width: 100%; max-width: none; }
.mfa-open { text-align: center; }