/* ============================================================
   Relvant — single global stylesheet (sectioned by component)
   ============================================================ */

/* --- tokens & reset --- */
:root {
  /* Brand palette sampled from static/images/logo.png:
     blue #0c64ae · charcoal #373737 · deep blue #234969 */
  --navy-900: #0b2036;
  --navy-800: #234969;
  --navy-700: #1b598d;
  --ink: #373737;
  --muted: #5b6472;
  --line: #e3e7ee;
  --bg: #f7f9fc;
  --card: #ffffff;
  --accent: #0c64ae;
  --accent-dark: #0a5290;
  --accent-on-dark: #5ea7e0;   /* brand blue lightened for navy backgrounds */
  --danger: #c0392b;
  --warn-bg: #fdf6e3;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 32, 54, .08), 0 8px 24px rgba(16, 32, 54, .06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* the HTML hidden attribute must beat component display rules */
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--navy-800); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   APP SHELL — Stripe-style left sidebar (authenticated app only)
   ============================================================ */
body.app { background: var(--bg); }
.app-sidebar {
  position: fixed; top: 0; inset-inline-start: 0; bottom: 0; width: 248px; z-index: 50;
  background: #fff; border-inline-end: 1px solid var(--line); color: var(--ink);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.side-logo { display: flex; align-items: center; padding: 4px 8px 20px; }
.side-logo:hover { text-decoration: none; }
.side-logo img { height: 34px; width: auto; display: block; }

.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-divider { height: 1px; background: var(--line); margin: 9px 12px; }
.side-nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 14px 12px 6px; }
.side-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: .95rem; font-weight: 500; }
.side-item i { width: 18px; text-align: center; font-size: .95rem; color: var(--muted); }
.side-item:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
.side-item:hover i { color: var(--navy-800); }
.side-item.active { background: #e9f1fb; color: var(--accent-dark); }
.side-item.active i { color: var(--accent); }

.side-bottom { margin-top: auto; }
.side-user { position: relative; padding-top: 10px; border-top: 1px solid var(--line); }
.user-pill { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: none; background: transparent; color: var(--ink); cursor: pointer; text-align: start; font-family: inherit; }
.user-pill:hover, .user-pill.open { background: var(--bg); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.user-pill-meta { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-width: 0; }
.user-pill-name { font-size: .85rem; font-weight: 600; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill > i { color: var(--muted); font-size: .72rem; }

.user-menu { position: absolute; z-index: 60; bottom: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 34px rgba(11, 32, 54, .22); padding: 6px; }
.user-menu-head { padding: 9px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu-name { font-weight: 700; color: var(--navy-900); font-size: .9rem; }
.user-menu-mail { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.user-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; }
.user-menu a:hover { background: var(--bg); text-decoration: none; }
.user-menu a i { width: 16px; text-align: center; color: var(--muted); }
.user-menu a.danger { color: var(--danger); }
.user-menu a.danger i { color: var(--danger); }

.app-main { margin-inline-start: 248px; min-height: 100vh; }
body.app .container { max-width: none; width: 100%; margin: 0; padding: 30px 44px; }
body.app .page-head { margin-top: 4px; }
.user-avatar { overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu .menu-btn { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; width: 100%; border: none; background: none; cursor: pointer; text-align: start; font-family: inherit; }
.user-menu .menu-btn:hover { background: var(--bg); }
.user-menu .menu-btn i { width: 16px; text-align: center; color: var(--muted); }

/* --- settings modal (Stripe/Slack-style, section nav) --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(11, 32, 54, .5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(11, 32, 54, .35); position: relative; }
.modal-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border: none; background: #eef1f6; border-radius: 50%; color: var(--muted); cursor: pointer; z-index: 2; }
.modal-close:hover { background: #e2e6ee; color: var(--navy-900); }
.settings-modal { display: grid; grid-template-columns: 196px 1fr; width: min(760px, 100%); height: 62vh; min-height: 460px; max-height: 92vh; overflow: hidden; }
.settings-nav { background: var(--bg); border-inline-end: 1px solid var(--line); padding: 18px 12px; }
.settings-nav-title { font-weight: 700; color: var(--navy-900); padding: 4px 10px 12px; font-size: 1.05rem; }
.set-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none; border-radius: 8px; color: var(--ink); font-size: .92rem; cursor: pointer; text-align: start; font-family: inherit; }
.set-tab i { width: 16px; text-align: center; color: var(--muted); }
.set-tab:hover { background: #fff; }
.set-tab.active { background: #e9f1fb; color: var(--accent-dark); font-weight: 600; }
.set-tab.active i { color: var(--accent); }
.settings-panels { padding: 30px 28px 26px; overflow-y: auto; }
.set-panel h3 { color: var(--navy-900); margin-bottom: 16px; }
.photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.photo-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; overflow: hidden; flex-shrink: 0; }
.photo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.set-msg { margin-inline-start: 12px; font-size: .85rem; font-weight: 600; }
.set-msg:empty { display: none; }
.set-msg.ok { color: #0d7a56; }
.set-msg.err { color: var(--danger); }
@media (max-width: 620px) {
  .settings-modal { grid-template-columns: 1fr; }
  .settings-nav { border-inline-end: none; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-title { width: 100%; }
  .set-tab { width: auto; }
}

@media (max-width: 820px) {
  .app-sidebar { position: sticky; top: 0; width: auto; flex-direction: row; align-items: center; padding: 10px 14px; border-inline-end: none; border-bottom: 1px solid var(--line); }
  .side-logo { padding: 0; padding-inline-end: 8px; }
  .side-logo img { height: 26px; }
  .side-nav { flex-direction: row; gap: 2px; margin-inline-start: 6px; }
  .side-nav-label { display: none; }
  .side-item span { display: none; }
  .side-user { margin-top: 0; margin-inline-start: auto; padding-top: 0; border-top: none; }
  .user-pill-meta, .user-pill > i { display: none; }
  .user-pill { padding: 4px; background: transparent; }
  .user-menu { inset-inline-start: auto; inset-inline-end: 0; bottom: auto; top: calc(100% + 8px); width: 240px; }
  .app-main { margin-inline-start: 0; }
  body.app .container { padding: 20px; }
}

/* --- top navigation --- */
.nav {
  background: var(--navy-900);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo img { height: 26px; width: auto; display: block; }
/* Full Relvant logo (folder + wordmark) rendered white for the dark nav/footer. */
.nav-logo-full { height: 30px !important; width: auto; display: block; filter: brightness(0) invert(1); }
.footer-brand .nav-logo-full { height: 34px !important; }
.nav-logo em { color: var(--accent-on-dark); font-style: normal; }
.nav-links { display: flex; gap: 18px; align-items: center; margin-inline-start: auto; }
.nav-links a { color: #d6deea; font-size: .95rem; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.active { color: #fff; font-weight: 600; }

/* --- app store badges in the top nav --- */
.store-btns { display: flex; align-items: center; gap: 8px; }
.store-btn { display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 0; background: none; padding: 0; transition: opacity .15s; }
.store-btn img { height: 34px; width: auto; display: block; border-radius: 6px; }
/* The Font Awesome kit rewrites <i> to <svg>, so both need hiding. */
.store-btn i, .store-btn svg { display: none; font-size: 1.05rem; }
.store-btn:hover { opacity: .85; text-decoration: none; }
/* Narrow screens: the two full badges are ~230px of nav, so collapse to icons. */
@media (max-width: 900px) {
  .store-btns { gap: 6px; }
  .store-btn img { display: none; }
  .store-btn i, .store-btn svg { display: block; width: 1em; height: 1em; }
  .store-btn { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .28); color: #d6deea; }
  .store-btn:hover { opacity: 1; color: #fff; border-color: rgba(255, 255, 255, .55); }
}

/* --- buttons --- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: none;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-outline { background: transparent; color: var(--navy-800); border: 1.5px solid var(--navy-800); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --- hero (marketing) --- */
.hero {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 70%, var(--navy-700) 100%);
  color: #fff;
  padding: 84px 0 72px;
}
.hero h1 {
  font-size: 2.7rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 640px;
}
.hero h1 em { color: var(--accent-on-dark); font-style: normal; }
.hero p.lead {
  margin: 18px 0 30px;
  font-size: 1.15rem;
  color: #c8d3e2;
  max-width: 560px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.country-chips { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .9rem;
  color: #e5ecf5;
}

/* --- sections --- */
.section { padding: 64px 0; }
.section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { font-size: 1.9rem; letter-spacing: -.02em; color: var(--navy-900); }
.section .sub { color: var(--muted); margin: 8px 0 34px; max-width: 620px; }

/* --- cards & grids --- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card h3 { font-size: 1.08rem; color: var(--navy-900); margin-bottom: 8px; }
.card p { font-size: .93rem; color: var(--muted); }
.card .meta { font-size: .8rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.badge {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
}
.badge-live { background: #e6f0fa; color: var(--accent-dark); }
.badge-soon { background: var(--warn-bg); color: #96700e; }
.badge-draft { background: #eef1f6; color: var(--muted); }
.badge-generated { background: #e2f5ec; color: #0d7a56; }
.badge-ready { background: #e8f0fb; color: var(--navy-800); }

/* --- steps (how it works) --- */
.steps { counter-reset: step; }
.step { position: relative; padding-inline-start: 0; }
.step .num {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  margin-bottom: 12px;
}

/* --- pricing --- */
.price-card { text-align: start; position: relative; }
.price-card.featured { border-color: var(--accent); border-width: 2px; }
.price-card .plan { font-weight: 700; color: var(--navy-900); }
.price-card .price { font-size: 2rem; font-weight: 700; margin: 10px 0; color: var(--navy-900); }
.price-card .price small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.price-card .price .per { font-size: .95rem; font-weight: 600; color: var(--muted); }
.grid-4 .price-card .price { font-size: 1.75rem; }
/* the premium (2 TB) tier */
.price-card.price-premium { border-color: var(--accent); }
/* the account's active plan row in the Storage panel */
.store-pack.is-current { border-color: var(--accent); background: var(--accent-tint, #f3f8fd); }
.plan-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .64rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.price-card ul { list-style: none; margin: 16px 0 22px; }
.price-card li { padding: 5px 0; padding-inline-start: 24px; position: relative; font-size: .92rem; color: var(--ink); }
.price-card li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 700; }

/* --- forms (inputs) --- */
.form-card { max-width: 460px; margin: 56px auto; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; color: var(--navy-900); }
.field .help { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy-700);
}
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.field .field-error { font-size: .8rem; color: var(--danger); margin-top: 3px; }
.field-check { display: flex; align-items: center; gap: 8px; }
.field-check input { width: auto; }

/* --- alerts --- */
.alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; }
.alert-success { background: #e2f5ec; color: #0d7a56; border: 1px solid #bfe8d9; }
.alert-info { background: #e8f0fb; color: var(--navy-800); border: 1px solid #cdddf3; }
/* Standing state that isn't an error — e.g. an archived document waiting for its
   replacement (ADR-0062). Amber so it reads as "needs you", not "went wrong". */
.alert-warn { background: #fdf6e7; color: #8a5a12; border: 1px solid #f0e0bd; }

/* --- re-read document: in-progress + done feedback --- */
@keyframes reread-spin { to { transform: rotate(360deg); } }
.reread-spin { animation: reread-spin .9s linear infinite; transform-origin: 50% 50%; }
.reread-working, .reread-done { display: flex; align-items: center; gap: 10px; }
.reread-done { animation: reread-pop .28s ease-out; }
@keyframes reread-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* the action button while its extraction request is in flight */
.act-btn.is-working { color: var(--accent); pointer-events: none; opacity: .85; }

/* --- tables --- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th { text-align: start; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fafbfd; }

/* --- app layout --- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 24px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; color: var(--navy-900); letter-spacing: -.02em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }

/* Dashboard icon stat cards */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s; }
a.stat-card:hover { box-shadow: 0 10px 26px rgba(16,32,54,.10); border-color: #cdd6e4; transform: translateY(-2px); text-decoration: none; }
.stat-ic { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 auto; }
.ic-accent { background: #e8f1fb; color: var(--accent); }
.ic-ok { background: #e2f5ec; color: #0d7a56; }
.ic-warn { background: var(--warn-bg); color: #96700e; }
.ic-danger { background: #fdeef0; color: var(--danger); }
.ic-muted { background: var(--bg); color: var(--muted); }
.stat-n { font-size: 1.7rem; font-weight: 800; color: var(--navy-900); line-height: 1.05; letter-spacing: -.01em; }
.stat-l { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.stat-card.is-danger { border-color: #f0c9cd; }
.stat-card.is-warn { border-color: #eddcb4; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.stat .n { font-size: 1.9rem; font-weight: 700; color: var(--navy-900); }
.stat .l { font-size: .85rem; color: var(--muted); }

/* --- filing editor --- */
.filing-head { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 32px 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.filing-head .title { font-size: 1.25rem; font-weight: 700; color: var(--navy-900); }
.filing-head .meta { font-size: .85rem; color: var(--muted); }
.filing-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-section { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.form-section h3 { color: var(--navy-900); margin-bottom: 4px; }
.form-section .desc { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }
.form-section .fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin-top: 14px; }
.form-section .fields .field { margin-bottom: 0; }
.form-section .fields .field.wide { grid-column: 1 / -1; }
#savebar { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 14px 0; margin-top: 10px; }
#savebar .container { display: flex; gap: 10px; align-items: center; }
#savestatus { font-size: .85rem; color: var(--muted); margin-inline-start: auto; }

/* --- vault --- */
.muted { color: var(--muted); font-size: .88rem; }
.crumbs { font-size: .88rem; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs strong { color: var(--navy-900); }
/* "Shared with you by <owner>" pill on a shared folder (ADR-0029). */
.shared-by { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 5px; padding-inline-end: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; color: var(--ink); }
.shared-by-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.shared-by-initials { background: #0c64ae; color: #fff; font-size: .74rem; font-weight: 700; }
.shared-by-txt strong { color: var(--navy-900); }
.shared-by-txt i { color: #0c64ae; margin-inline-end: 3px; }
.folder-grid { margin-top: 6px; }
.folder-card { text-align: center; padding: 22px 14px; display: block; }
.folder-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); transition: transform .12s, border-color .12s; }
.folder-card .folder-icon { font-size: 1.7rem; margin-bottom: 8px; color: var(--accent); }
.folder-tools { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.folder-tools form { display: flex; gap: 8px; align-items: center; }
.folder-tools input { padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .88rem; font-family: inherit; }
.doc-ic { color: var(--muted); margin-inline-end: 5px; }

/* --- modern uploader --- */
.uploader { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 26px; }
.uploader-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.uploader-title { font-weight: 700; color: var(--navy-900); font-size: 1rem; }
.uploader-title i { color: var(--accent); margin-inline-end: 6px; }
.uploader-close { width: 30px; height: 30px; border: none; background: #eef1f6; border-radius: 50%; color: var(--muted); cursor: pointer; }
.uploader-close:hover { background: #e2e6ee; color: var(--navy-900); }
.dropzone { border: 2px dashed #cdd6e4; border-radius: var(--radius); background: #fafbfe; transition: background .15s, border-color .15s; }
.dropzone.drag { border-color: var(--accent); background: #eef5fc; }
.dz-empty { text-align: center; padding: 40px 20px; }
.dz-icon { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%; background: #e9f1fb; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.dropzone.drag .dz-icon { background: var(--accent); color: #fff; }
.dz-title { font-size: 1.1rem; font-weight: 700; color: var(--navy-900); }
.dz-sub { color: var(--muted); font-size: .9rem; margin: 6px 0 18px; max-width: 460px; margin-inline-start: auto; margin-inline-end: auto; }
.dz-notice { margin: 0 16px 16px; padding: 10px 14px; border-radius: 8px; border: 1px solid #f0c8c2; background: #fdecea; color: #a03127; font-size: .9rem; }
.dz-notice i { margin-inline-end: 6px; }
.dz-selected { padding: 16px; }
.dz-selected-head { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pv-tile { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; transition: opacity .15s, border-color .15s; }
.pv-tile.uploading { opacity: .7; }
.pv-tile.done { border-color: #bfe8d9; background: #f4fcf8; }
.pv-tile.failed { border-color: #f5c6c0; background: #fdf4f3; }
.pv-thumb { height: 96px; border-radius: 7px; overflow: hidden; background: #f2f5fa; display: flex; align-items: center; justify-content: center; }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv-thumb-ic { font-size: 2rem; color: var(--navy-700); }
.pv-name { font-size: .82rem; color: var(--navy-900); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-meta { font-size: .74rem; color: var(--muted); }
.pv-remove { position: absolute; top: 4px; inset-inline-end: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(11,32,54,.62); color: #fff; cursor: pointer; font-size: .72rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.pv-remove:hover { background: var(--danger); }
.pv-status { font-size: .76rem; margin-top: 6px; min-height: 1.1em; }
.pv-status a { color: #0d7a56; }
.pv-tile.failed .pv-status { color: var(--danger); }

.uploader-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 4px 4px 0; }
.dest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dest-label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.dest-select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .9rem; font-family: inherit; background: #fff; max-width: 240px; }
.dest-picker { flex: 1 1 260px; max-width: 360px; }
.dest-picker .fp-input { padding: 8px 10px; border-width: 1.5px; border-radius: 8px; }
.dest-act { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; color: var(--navy-800); cursor: pointer; font-size: .85rem; font-weight: 600; font-family: inherit; }
.dest-act:hover { border-color: var(--accent); color: var(--accent); }
.dest-act i { color: var(--accent); }
.inline-forms { margin-top: 10px; padding: 0 4px; }
.newfolder-inline { display: inline-flex; align-items: center; gap: 8px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.newfolder-inline > i { color: var(--accent); }
.newfolder-inline input { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .9rem; font-family: inherit; min-width: 240px; }
.btn-upload { font-size: 1rem; padding: 12px 26px; }
.upload-done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; background: #e2f5ec; border: 1px solid #bfe8d9; border-radius: 8px; color: #0d7a56; font-size: .95rem; }

/* --- vault: Dropbox-style two-pane (folder tree + contents) --- */
.vault-2col { display: grid; grid-template-columns: var(--tree-w, 244px) 1fr; gap: 20px; align-items: start; margin-top: 6px; }
.folder-tree { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; position: sticky; top: 20px; }
/* Drag-to-resize handle for the folder pane. Sits in the 20px grid gap on the
   pane's right edge and drives --tree-w on .vault-2col; width persists to
   localStorage. Set the custom property, never grid-template-columns inline,
   so the <=760px single-column rule below still wins on mobile. */
.tree-resizer { position: absolute; top: 0; inset-inline-end: -13px; width: 7px; height: 100%; cursor: col-resize; touch-action: none; }
.tree-resizer::after { content: ""; position: absolute; inset: 0 2px; border-radius: 3px; background: transparent; transition: background .12s; }
.tree-resizer:hover::after, .tree-resizer.is-dragging::after { background: var(--accent); }
body.is-tree-resizing { user-select: none; cursor: col-resize; }
.tree-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; }
.tree-item:hover { background: var(--bg); text-decoration: none; }
.tree-item i { color: var(--muted); width: 16px; text-align: center; }
.tree-item.active { background: #e9f1fb; color: var(--accent-dark); font-weight: 600; }
.tree-item.active i { color: var(--accent); }
.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-recycle { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.tree-count { font-size: .72rem; color: var(--muted); background: var(--bg); border-radius: 10px; padding: 1px 7px; }
.tree-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; padding: 9px 5px; margin: -9px -6px -9px -6px; cursor: pointer; color: var(--muted); transition: color .12s, transform .12s; }
.tree-toggle i { width: auto !important; font-size: .82rem; color: inherit; pointer-events: none; }
.tree-toggle:hover { color: var(--accent); }
.tree-toggle.is-collapsed { transform: rotate(-90deg); }
.tree-toggle-empty { visibility: hidden; cursor: default; }
.tree-toggle.is-loading { transform: none; }
.tree-toggle.is-loading i { animation: tree-spin .8s linear infinite; }
@keyframes tree-spin { to { transform: rotate(360deg); } }
/* Lazy branches (sidebar scaling): a filter box and a "showing N of M" line live
   inside the branch, indented like its children. */
.tree-aux { display: flex; align-items: center; gap: 7px; padding: 4px 10px 6px; font-size: .78rem; color: var(--muted); }
.tree-filter input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink);
  font-size: .82rem; padding: 5px 8px; outline: none; }
.tree-filter input:focus { border-color: var(--accent); }
.tree-filter i { font-size: .78rem; flex-shrink: 0; }
.tree-more { font-style: italic; }
[data-theme="dark"] .tree-filter input { background: var(--card); }
.folder-contents { min-width: 0; }
.vault-table { margin: 0; }
.vault-table td:first-child a { color: var(--navy-900); font-weight: 500; }
.vault-table tr.row-folder td:first-child a { font-weight: 600; }
.row-ic { width: 18px; text-align: center; margin-inline-end: 7px; color: var(--muted); }
.row-ic-folder { color: var(--accent); }
.empty-contents { text-align: center; padding: 54px 20px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.empty-contents i,
.empty-contents svg { font-size: 3.25rem; color: #c3cfdf; display: block; margin: 0 auto 16px; }

@media (max-width: 760px) {
  .vault-2col { grid-template-columns: 1fr; }
  .folder-tree { position: static; }
  .tree-resizer { display: none; }
}

/* --- expiry badges & radar --- */
.badge-expired { background: #fdecea; color: var(--danger); }
.badge-warning { background: var(--warn-bg); color: #96700e; }
.badge-ok { background: #e2f5ec; color: #0d7a56; }
.radar-h { font-size: 1.15rem; margin-bottom: 14px; color: var(--navy-900); }
.radar-h-danger { color: var(--danger); }
.radar-h-warn { color: #96700e; }
.stat-danger .n { color: var(--danger); }
.stat-warn .n { color: #96700e; }

/* --- document page --- */
.doc-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
.doc-preview { padding: 12px; grid-column: 1; }
/* Pin the right column (Details + Reminders) to the top, spanning the left
   column's preview + attachments rows, so Details isn't pushed down. */
.doc-meta { grid-column: 2; grid-row: 1 / span 2; }
/* Document-page action bar — small icon buttons (Preview / Download / … / Delete) */
.doc-actbar { display: flex; align-items: center; gap: 6px; }
.doc-actbar form { margin: 0; }
.act-btn { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer;
  text-decoration: none; font-size: 1rem; }
.act-btn:hover { background: #eef1f6; color: var(--navy-900); border-color: var(--accent); text-decoration: none; }
.act-btn.act-danger:hover { color: var(--danger); border-color: var(--danger); background: #fdecea; }
/* Every document action now lives behind one menu (ADR-0064), so the bar holds a
   single button and the real controls sit offscreen for the menu to click.
   It carries a WORD as well as the dots: as a bare glyph it read as decoration
   and users didn't find it. Accent-tinted so it's clearly the thing to press. */
.act-btn.act-kebab {
  width: auto; gap: 9px; padding: 0 14px; border-color: var(--accent);
  color: var(--accent); background: var(--accent-soft, #e8f1fb);
  font-family: inherit; font-size: .87rem; font-weight: 600;
}
.act-btn.act-kebab i { font-size: 1rem; }
.act-btn.act-kebab:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.act-btn.act-kebab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Very narrow: drop the word rather than let it wrap or push the title. */
@media (max-width: 480px) {
  .act-btn.act-kebab span { display: none; }
  .act-btn.act-kebab { width: 38px; padding: 0; }
}
/* Offscreen rather than display:none — a file input in a display:none subtree
   can have its .click() ignored, which would silently break Reupload. */
.doc-act-forms { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* ---------- Document translation (ADR-0065) ---------- */
.doc-translate { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 18px; }
.dt-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dt-head h3 { margin: 0; font-size: 1rem; color: var(--navy-900); display: flex; align-items: center; gap: 8px; }
.dt-controls { display: flex; align-items: center; gap: 8px; }
.dt-controls select { padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: .88rem; color: var(--ink); background: #fff; }
.dt-body:not(:empty) { margin-top: 14px; }
.dt-meta { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
/* The translation keeps the document's own line structure, so it is <pre> — but
   wrapped, because a scanned table's lines are longer than any column. */
.dt-text { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: .93rem;
  line-height: 1.65; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px; margin: 0; max-height: 560px; overflow: auto; }
.dt-working { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; padding: 10px 0; }
.dt-error { color: var(--danger); font-size: .9rem; margin: 10px 0 0; }
.dt-note { font-size: .78rem; color: var(--muted); margin: 12px 0 0; display: flex; gap: 7px; align-items: flex-start; }
/* Collapse / expand: the header row (language picker, Translate, toggle) stays,
   the text and the disclaimer fold away so the preview is back in view. */
.dt-toggle { background: none; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px;
  font-family: inherit; font-size: .82rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.dt-toggle:hover { color: var(--ink); border-color: var(--navy-900); }
.dt-toggle i { margin-inline-end: 4px; }
.dt-toggle .dt-toggle-expand, .is-collapsed .dt-toggle .dt-toggle-collapse { display: none; }
.is-collapsed .dt-toggle .dt-toggle-expand { display: inline; }
.doc-translate.is-collapsed .dt-body, .doc-translate.is-collapsed .dt-note { display: none; }
[data-theme="dark"] .dt-controls select { background: #1c2836; color: var(--ink); border-color: var(--line); }

.doc-preview img { width: 100%; border-radius: 6px; display: block; }
.doc-preview iframe { width: 100%; height: 520px; border: none; border-radius: 6px; }
.doc-filemeta { font-size: .8rem; color: var(--muted); padding: 10px 4px 2px; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.doc-attach .attach-list { list-style: none; margin: 0 0 14px; }
.doc-attach .attach-list li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.doc-attach .attach-list li:last-child { border-bottom: none; }
.attach-ic { color: var(--navy-700); font-size: 1rem; }
.attach-name { flex: 1; color: var(--navy-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-dl { color: var(--muted); }
.attach-dl:hover { color: var(--accent); }
.attach-del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.attach-del:hover { color: var(--danger); }
.attach-list li form { display: inline-flex; }
.attach-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reminder-list { list-style: none; }
.reminder-list li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.reminder-list li:last-child { border-bottom: none; }
.rem-status { display: inline-block; min-width: 84px; font-size: .75rem; font-weight: 600; border-radius: 6px; padding: 2px 8px; margin-inline-end: 8px; text-align: center; }
.rem-0 { background: #e8f0fb; color: var(--navy-800); }
.rem-1 { background: #e2f5ec; color: #0d7a56; }
.rem-2 { background: #eef1f6; color: var(--muted); }
.rem-3 { background: #eef1f6; color: var(--muted); text-decoration: line-through; }
.linklike { background: none; border: none; color: var(--navy-800); cursor: pointer; font-size: .85rem; text-decoration: underline; padding: 0; font-family: inherit; }

/* --- members --- */
.member-card { margin-bottom: 12px; padding: 16px 20px; }
.member-card summary { cursor: pointer; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.member-card summary::-webkit-details-marker { display: none; }
.member-card .member-name { font-weight: 700; color: var(--navy-900); }
.member-edit { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }

/* --- footer --- */
.footer { background: var(--navy-900); color: #9fb0c6; margin-top: 72px; padding: 44px 0 30px; font-size: .9rem; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 26px; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.footer-brand img { height: 22px; width: auto; }
.footer-brand .wordmark { color: #fff; font-weight: 700; font-size: 1.05rem; }
.footer-brand .wordmark em { color: var(--accent-on-dark); font-style: normal; }
.footer a { color: #9fb0c6; display: block; padding: 2px 0; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer .fine { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; font-size: .8rem; }

/* --- responsive --- */
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 2.1rem; }
  .stats { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-meta { grid-column: 1; grid-row: auto; }
  .fields-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav-links { gap: 12px; }
  .nav-links a.nav-secondary { display: none; }
}

/* ============================================================
   Roles: admin panel, pills, impersonation, team (ADR-0013)
   ============================================================ */

/* ============================================================
   AI Assistant (ADR-0038) — floating button + chat panel
   ============================================================ */
.ai-fab { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 1.15rem;
  box-shadow: 0 6px 20px rgba(12, 100, 174, .38);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s, background .15s; }
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12, 100, 174, .46); }
.ai-fab.is-open { background: var(--navy-900); }

.ai-panel { position: fixed; inset-inline-end: 22px; bottom: 86px; z-index: 60;
  width: min(390px, calc(100vw - 44px)); height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(11, 32, 54, .22); }
.ai-head { display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: 13px 15px; background: var(--navy-900); color: #fff; font-weight: 600; font-size: .95rem; }
.ai-close { background: none; border: 0; color: #cfe1f4; cursor: pointer; font-size: 1rem; padding: 2px 4px; }
.ai-close:hover { color: #fff; }
.ai-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 88%; padding: 9px 13px; border-radius: 13px; font-size: .89rem; line-height: 1.5; white-space: normal; }
.ai-bot { align-self: flex-start; background: var(--surface-2, #f1f5fa); color: var(--ink); border-end-start-radius: 4px; }
.ai-user { align-self: flex-end; background: var(--accent); color: #fff; border-end-end-radius: 4px; }
.ai-msg.is-thinking { opacity: .55; letter-spacing: .18em; }
.ai-form { flex: none; display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--line); }
.ai-form input { flex: 1; min-width: 0; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 999px; font-size: .89rem; background: var(--card); color: var(--ink); }
.ai-form input:focus { outline: none; border-color: var(--accent); }
.ai-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ai-send:disabled { opacity: .5; cursor: default; }
@media (max-width: 560px) {
  .ai-panel { right: 10px; left: 10px; width: auto; bottom: 80px; height: calc(100vh - 120px); }
  .ai-fab { inset-inline-end: 14px; bottom: 14px; }
}
[data-theme="dark"] .ai-bot { background: #1c2836; color: #e7edf5; }

/* subscriber-owned document types (ADR-0036) — the list in Settings */
.dt-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dt-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #fbfdff; }
.dt-main { flex: 1; min-width: 0; }
.dt-title { display: block; font-weight: 600; font-size: .92rem; color: var(--navy-900); }
.dt-meta { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }
.dt-actions { display: flex; gap: 4px; flex: none; }
.dt-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted);
  font-size: .8rem; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.dt-btn:hover { color: var(--accent); border-color: var(--accent); }
.dt-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: #fdecea; }

/* premium features (ADR-0035) — kebab count chip + the grant checklist modal */
.feat-count { display: inline-block; min-width: 17px; padding: 0 5px; margin-inline-start: 2px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; }
.feat-list { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.feat-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.feat-row:hover { border-color: var(--accent); background: var(--accent-tint, #f3f8fd); }
.feat-row input { width: auto; margin-top: 2px; flex: none; }
.feat-name { display: block; font-weight: 600; font-size: .92rem; color: var(--navy-900); }
.feat-desc { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }

/* impersonation banner */
.imp-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #3a2a00; color: #ffe9b0; border: 1px solid #6b5100;
  padding: 10px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .92rem;
}
.imp-banner a { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.imp-banner a:hover { text-decoration: underline; }

/* admin panel */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.atab {
  padding: 9px 16px; text-decoration: none; color: var(--muted); font-weight: 600;
  font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.atab:hover { color: var(--ink); }
.atab.on { color: var(--accent); border-bottom-color: var(--accent); }

/* admin left sub-nav */
.admin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: start; margin-top: 18px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.anav {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 9px;
  text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; transition: background .12s, color .12s;
}
.anav i { width: 18px; text-align: center; color: var(--muted); font-size: 1rem; }
.anav:hover { background: var(--hover, #f1f4f9); color: var(--ink); }
.anav:hover i { color: var(--accent); }
.anav.on { background: var(--accent-soft, #e8f1fb); color: var(--accent); border-color: var(--accent-line, #cfe2f6); }
.anav.on i { color: var(--accent); }
.admin-content { min-width: 0; }
@media (max-width: 760px) {
  .admin-layout { grid-template-columns: 1fr; gap: 14px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .anav span { display: none; }
  .anav { padding: 9px 12px; }
}

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; position: relative;
}
.kpi-ic { color: var(--accent); font-size: 1.1rem; margin-bottom: 6px; }
.kpi-val { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kpi-lbl { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.kpi-warn .kpi-val { color: #b0620a; }
.kpi-warn .kpi-ic { color: #b0620a; }

.admin-table td, .admin-table th { vertical-align: middle; }
.admin-table .admin-actions { text-align: end; white-space: nowrap; }
/* Let row kebab menus escape the table box (the base .table clips with
   overflow:hidden for its rounded corners; re-round the corner cells here). */
.admin-table { overflow: visible; }
.admin-table tr:first-child th:first-child { border-start-start-radius: var(--radius); }
.admin-table tr:first-child th:last-child { border-start-end-radius: var(--radius); }
.admin-table tr:last-child td:first-child { border-end-start-radius: var(--radius); }
.admin-table tr:last-child td:last-child { border-end-end-radius: var(--radius); }

/* status / role pills (data-driven, Fasana convention) */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.pill.admin        { background: rgba(143,106,0,.14);  color: #8a6a00; }
.pill.subscriber   { background: rgba(12,100,174,.12); color: var(--accent); }
.pill.subuser      { background: #eef1f6;              color: var(--muted); }
.pill.active       { background: rgba(13,122,86,.14);  color: #0d7a56; }
.pill.pending      { background: rgba(176,98,10,.14);  color: #b0620a; }
.pill.disabled     { background: rgba(204,47,66,.12);  color: #c22f42; }
.pill.access-full  { background: rgba(13,122,86,.12);  color: #0d7a56; }
.pill.access-view  { background: #eef1f6;              color: var(--muted); }

/* kebab row menu (native <details>) */
.kebab { position: relative; display: inline-block; }
.kebab > summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  font-size: 1.15rem; user-select: none;
}
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary:hover { background: #eef1f6; color: var(--ink); }
.kebab-menu {
  position: absolute; inset-inline-end: 0; top: 34px; z-index: 40; min-width: 184px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16,32,54,.16); padding: 6px; text-align: start;
}
.kebab-menu form { margin: 0; }
.kebab-menu button {
  width: 100%; text-align: start; background: none; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 7px; font-size: .88rem; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.kebab-menu button:hover { background: #f2f5fa; }
.kebab-menu button.danger { color: #c22f42; }
.kebab-menu button i { width: 15px; text-align: center; }

/* ---------- Storage quota: sidebar usage bar + buy panel (ADR-0015) ---------- */
.side-quota { display: block; width: 100%; text-align: start; padding: 10px 12px; border-radius: 10px;
  background: rgba(12,100,174,.07); border: 1px solid rgba(12,100,174,.14); cursor: pointer; margin-bottom: 10px; }
.side-quota:hover { background: rgba(12,100,174,.12); border-color: rgba(12,100,174,.28); }
.side-quota-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.side-quota-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.side-quota-label i { margin-inline-end: 5px; }
.side-quota-pct { font-size: 11px; font-weight: 700; color: var(--accent); }
.side-quota-bar { height: 6px; background: rgba(12,100,174,.13); border-radius: 999px; overflow: hidden; }
.side-quota-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #5ea7e0); border-radius: 999px; min-width: 2px; transition: width .2s; }
.side-quota-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); }
.side-quota.is-warn .side-quota-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.side-quota.is-warn .side-quota-pct { color: #d97706; }
.side-quota.is-danger .side-quota-fill { background: linear-gradient(90deg, #f87171, #fca5a5); }
.side-quota.is-danger .side-quota-pct { color: #ef4444; }

.store-usage { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.store-usage-head { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.store-pct { color: var(--accent); }
.store-bar { height: 8px; background: rgba(12,100,174,.12); border-radius: 999px; overflow: hidden; }
.store-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #5ea7e0); border-radius: 999px; min-width: 3px; transition: width .25s; }
.store-usage.is-warn .store-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.store-usage.is-warn .store-pct { color: #d97706; }
.store-usage.is-danger .store-fill { background: linear-gradient(90deg, #f87171, #fca5a5); }
.store-usage.is-danger .store-pct { color: #ef4444; }
.store-pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.store-pack-title { font-weight: 700; color: var(--ink); }
.store-pack-buy { display: flex; align-items: center; gap: 12px; }
.store-price { font-weight: 700; font-size: 1.1rem; color: var(--navy-900); }
.store-history { margin-top: 18px; }
.store-history-h { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.store-txn { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--ink); }

/* ---------- Context menu (Wirasat-style: files + folders) ---------- */
.ctx { position: fixed; z-index: 300; min-width: 194px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 4px 10px rgba(11,32,54,.14), 0 12px 34px rgba(11,32,54,.16); padding: 6px; }
.ctx[hidden] { display: none; }
.ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.ctx-item i { width: 16px; text-align: center; color: var(--muted); }
.ctx-item:hover { background: #eaf2fb; }
.ctx-item:hover i { color: var(--accent); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger i { color: var(--danger); }
.ctx-item.danger:hover { background: #fdecea; }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 6px; }

/* drag & drop: move documents into folders */
tr.doc-row[draggable="true"] { cursor: grab; }
tr.dragging { opacity: .4; }
.drop-target { background: #eaf2fb !important; outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 6px; }
.tree-item.drop-target { outline-offset: -2px; }

.row-end { width: 44px; text-align: end; }
.row-kebab { border: 1px solid transparent; background: none; width: 30px; height: 30px; border-radius: 8px;
  cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity .12s; }
.vault-table tr:hover .row-kebab { opacity: 1; }
.row-kebab:hover { background: #eef1f6; border-color: var(--line); color: var(--navy-900); }

.ctx-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 320;
  background: var(--navy-900); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11,32,54,.3); }
.ctx-toast[hidden] { display: none; }

/* ---------- App toast (Relvant.Toast) ----------
   Success/error feedback for actions that happen inside a modal — notably the
   settings panels, where a save often re-renders the panel and would wipe an
   inline message. z-index sits above every overlay (modals are 200-320). */
.app-toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 400;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.app-toast { display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px));
  background: #0d7a56; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.35;
  padding: 12px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(11,32,54,.34);
  animation: app-toast-in .18s ease-out; }
.app-toast.is-err { background: #c0392b; }
.app-toast.is-out { animation: app-toast-out .22s ease-in forwards; }
.app-toast i { font-size: 1rem; flex: none; }
@keyframes app-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes app-toast-out { to { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .app-toast, .app-toast.is-out { animation: none; } }

/* ---------- Public share page (/s/<code>, ADR-0042) ----------
   Seen by people who have never used Relvant and aren't signed in, so it stays
   deliberately plain: the file, one action, and who it came from. */
.share-page { max-width: 860px; padding: 40px 20px 70px; }
.share-card { background: #fff; border: 1px solid var(--border, #e2e6ee); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(11,32,54,.08); padding: 26px; }
.share-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.share-icon { width: 52px; height: 52px; flex: none; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 1.35rem; }
.share-icon.is-muted { background: #e2e6ee; color: var(--muted); }
.share-title { min-width: 0; }
.share-title h1 { margin: 0; font-size: 1.25rem; color: var(--navy-900); overflow-wrap: anywhere; }
.share-title p { margin: 3px 0 0; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.share-preview { border: 1px solid var(--border, #e2e6ee); border-radius: 12px; overflow: hidden;
  background: #f4f7fb; min-height: 260px; display: flex; align-items: center; justify-content: center; }
.share-preview img { max-width: 100%; max-height: 70vh; display: block; }
.share-preview iframe { width: 100%; height: 70vh; border: 0; background: #fff; }
/* View-only PDF rendered page-by-page onto canvases (no native viewer chrome). */
.share-preview .pdf-pages { width: 100%; max-height: 70vh; overflow: auto; align-self: stretch; }
.pdf-pages canvas { display: block; width: 100%; margin: 0 0 8px; background: #fff; box-shadow: 0 1px 4px rgba(16,32,54,.15); }
.pdf-loading { text-align: center; color: var(--muted); padding: 44px 20px; font-size: .9rem; margin: 0; }
.share-noprev { text-align: center; color: var(--muted); padding: 44px 20px; }
.share-noprev i { font-size: 2.2rem; display: block; margin-bottom: 10px; color: var(--accent); }
.share-noprev p { margin: 0; font-size: .9rem; }
.share-actions { display: flex; justify-content: center; margin-top: 20px; }
.share-viewonly { font-size: .88rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.share-note { margin: 16px 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
.share-gate { max-width: 420px; margin: 40px auto; text-align: center; }
.share-gate .share-icon { margin: 0 auto 14px; }
.share-gate h1 { font-size: 1.2rem; margin: 0 0 6px; color: var(--navy-900); }
.share-gate p { margin: 0 0 4px; color: var(--muted); font-size: .92rem; }
.share-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.share-err { color: var(--danger); font-weight: 600; font-size: .85rem; margin-top: 10px; }
[data-theme="dark"] .share-card { background: var(--surface, #16202c); }
[data-theme="dark"] .share-preview { background: rgba(255,255,255,.04); }

/* ---------- Share this file (owner side) ---------- */
.sharelink-card { width: min(520px, 100%); }
.sl-row { display: flex; gap: 10px; align-items: flex-end; }
.sl-row .field { flex: 1; margin-bottom: 0; }
.sl-toggle { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--navy-900); margin: 14px 0 4px; cursor: pointer; }
.sl-warn { font-size: .82rem; color: #9a6a00; background: #fff6e0; border-radius: 8px; padding: 9px 11px; margin-top: 12px; display: flex; gap: 8px; }
.sl-out { margin-top: 18px; padding: 14px; border-radius: 10px; background: #f4f7fb; }
.sl-url { display: flex; gap: 8px; }
.sl-url input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.sl-list { margin-top: 20px; border-top: 1px solid var(--border, #e2e6ee); padding-top: 14px; }
.sl-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: .85rem; border-bottom: 1px solid #f0f3f8; }
.sl-item:last-child { border-bottom: 0; }
.sl-item .sl-meta { flex: 1; min-width: 0; color: var(--muted); }
.sl-item .sl-meta strong { display: block; color: var(--navy-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-revoke { background: none; border: 0; color: var(--danger); font-weight: 600; cursor: pointer; font-size: .82rem; }
.sl-empty { color: var(--muted); font-size: .85rem; padding: 6px 0; }
[data-theme="dark"] .sl-out, [data-theme="dark"] .share-preview { background: rgba(255,255,255,.05); }
[data-theme="dark"] .sl-warn { background: rgba(255,193,7,.12); color: #e8c07a; }

/* ---------- Email this file ----------
   Replaces the old prompt()/SweetAlert pair. The file being sent is shown as a
   chip above the input so the address is never typed against the wrong document. */
.emailfile-card { width: min(460px, 100%); }
.ef-file { display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 12px 14px; background: #f4f7fb; border-radius: 10px; }
.ef-icon { width: 38px; height: 38px; border-radius: 9px; flex: none; display: flex;
  align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 1rem; }
.ef-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* The name is user data and can be arbitrarily long — clamp, don't blow out the card. */
.ef-meta strong { font-size: .93rem; color: var(--navy-900); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ef-meta span { font-size: .8rem; color: var(--muted); }
.ef-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.field .help.is-err { color: var(--danger); font-weight: 600; }
.field input.has-err { border-color: var(--danger); }
@media (max-width: 460px) {
  .ef-actions { flex-direction: column-reverse; }
  .ef-actions .btn { width: 100%; }
}

/* ---------- Confirm / alert / prompt dialogs (static/js/ui.js) ----------
   The app's replacement for native confirm()/alert()/prompt(). Built on
   .modal-overlay/.modal-card so it inherits the card, shadow and dark theme
   the Share-link and Email-file modals already use. */
.dlg-overlay { z-index: 500; }          /* above every modal — a modal may raise one */
.dlg-card { width: min(440px, 100%); padding: 26px 24px 22px; }
.dlg-head { display: flex; gap: 14px; align-items: flex-start; padding-inline-end: 26px; }
.dlg-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 1.05rem; }
.dlg-icon.tone-warn { background: #fdf3e0; color: #b57b12; }
.dlg-icon.tone-danger { background: #fdecea; color: var(--danger); }
.dlg-icon.tone-info { background: #eaf2fb; color: var(--accent); }
.dlg-icon.tone-ok { background: #e7f5ec; color: #1d8a4c; }
.dlg-copy { min-width: 0; flex: 1; padding-top: 2px; }
.dlg-card h3 { margin: 0; font-size: 1.12rem; color: var(--navy-900); line-height: 1.35; }
/* Messages quote user-typed names — wrap them instead of overflowing the card. */
.dlg-text { margin: 7px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere; }
.dlg-text[hidden] { display: none; }
.dlg-field { margin: 18px 0 0; }
.dlg-field.is-err input { border-color: var(--danger); }
.dlg-field.is-err .help { color: var(--danger); font-weight: 600; }
.dlg-field label[hidden] { display: none; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dlg-actions .btn[hidden] { display: none; }
@media (max-width: 460px) {
  .dlg-actions { flex-direction: column-reverse; }
  .dlg-actions .btn { width: 100%; }
}

/* ---------- Document preview modal (image / PDF / Word / Excel) ---------- */
.pv-overlay { z-index: 260; padding: 24px; }
.pv-card { background: #fff; border-radius: 14px; width: min(980px, 100%); height: min(88vh, 100%);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(11,32,54,.4); }
.pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.pv-title { flex: 1; font-family: inherit; font-weight: 600; color: var(--ink); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-icon { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: #eef1f6; border: none; cursor: pointer; text-decoration: none; }
.pv-icon:hover { background: #e2e6ee; color: var(--navy-900); }
.pv-body { flex: 1; overflow: auto; background: #eef1f6; position: relative; }
.pv-img { display: block; max-width: 100%; margin: 0 auto; }
.pv-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.pv-doc { background: #fff; max-width: 820px; margin: 22px auto; padding: 44px 52px;
  box-shadow: 0 1px 6px rgba(11,32,54,.12); color: #222; line-height: 1.55; }
.pv-doc img { max-width: 100%; }
.pv-doc h1, .pv-doc h2, .pv-doc h3 { color: var(--navy-900); }
.pv-doc table { border-collapse: collapse; margin: 10px 0; }
.pv-doc td, .pv-doc th { border: 1px solid #ccc; padding: 5px 9px; }
.pv-sheets { padding: 16px; }
.pv-sheet-name { font-weight: 700; margin: 14px 0 6px; color: var(--navy-900); font-size: .9rem; }
.pv-sheets table { border-collapse: collapse; background: #fff; font-size: .84rem; margin-bottom: 8px; }
.pv-sheets td, .pv-sheets th { border: 1px solid var(--line); padding: 4px 9px; white-space: nowrap; }
.pv-loading, .pv-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 14px; color: var(--muted); padding: 40px; text-align: center; }
.pv-fallback i { font-size: 2.4rem; opacity: .5; }

/* ---------- People module (cards) ---------- */
/* Add/Edit person modal — a plain padded form card (settings modal gets its own
   spacing from the grid; this variant restores padding + width for the form). */
.modal-form { width: min(440px, 100%); max-height: 88vh; overflow-y: auto; padding: 26px 24px; }
.modal-form h3 { margin: 0 0 18px; padding-inline-end: 28px; font-size: 1.2rem; color: var(--navy-900); }
.modal-form .btn-primary { margin-top: 4px; }
/* Optional extra fields inside a form modal (entity contact block) — two-up grid
   tucked behind a disclosure so the common case stays a two-field form. */
.modal-form .field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
.modal-form .field-grid .field.wide { grid-column: 1 / -1; }
.modal-form textarea { min-height: 78px; resize: vertical; }
.form-more { border-top: 1px solid var(--line); margin: 4px 0 16px; padding-top: 12px; }
.form-more > summary { cursor: pointer; list-style: none; font-size: .88rem; font-weight: 600; color: var(--navy-900); display: flex; align-items: center; gap: 8px; }
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary .chev { transition: transform .18s ease; color: var(--muted); }
.form-more[open] > summary .chev { transform: rotate(90deg); }
.form-more > summary .hint { font-weight: 400; color: var(--muted); margin-inline-start: auto; }
.form-more .field-grid { margin-top: 14px; }

.people-tools { display: flex; align-items: center; gap: 12px; }
/* The bordered box is the container; the icon sits inside as a flex item and the
   input is borderless/transparent — so the search icon is always inside the box. */
.people-search { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; padding: 0 12px; }
.people-search:focus-within { border-color: var(--accent); }
.people-search i { color: var(--muted); font-size: .85rem; pointer-events: none; flex-shrink: 0; }
.people-search input {
  border: none; outline: none; background: transparent; padding: 10px 0; font-size: .9rem; min-width: 210px;
  -webkit-appearance: none; appearance: none;
}
.people-search input::-webkit-search-decoration,
.people-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.people-search input:focus { outline: none; border-color: var(--accent); }

.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.person-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 18px 18px; text-align: center;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.person-card:hover { box-shadow: 0 10px 26px rgba(16,32,54,.10); border-color: #cdd6e4; transform: translateY(-2px); }
/* While a right-click menu is open it is position:fixed — a transform on the
   card would turn the card into its containing block and misplace it. */
.person-card.menu-open, .person-card.menu-open:hover { transform: none; }
.person-hit { position: absolute; inset: 0; z-index: 2; border-radius: 14px; }
/* Clicking the avatar/name/type opens that person's/entity's vault folder. */
.person-open { display: block; text-decoration: none; color: inherit; }
.person-open:hover { text-decoration: none; }
.person-open:hover .person-name { color: var(--accent); }
.person-menu { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; }

.person-avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--accent); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; font-weight: 700; overflow: hidden;
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.entity-avatar { background: var(--navy-800); border-radius: 14px; }
.entity-avatar i { font-size: 1.5rem; }
.person-name { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.person-rel { color: var(--accent); font-size: .82rem; font-weight: 600; margin-top: 2px; }
/* linked entity after the relationship: "Employee | Company Name" (ADR-0044) */
.person-rel .person-ent { color: var(--muted); font-weight: 500; }
.person-stats { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.person-docs { color: var(--muted); font-size: .82rem; }

/* List / Cards view toggle (People + Entities) */
/* People filters — icon button before the search box; popover with relationship /
   entity selects. The badge shows how many filters are active. */
.people-filter { position: relative; }
.filter-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); cursor: pointer; font-size: .95rem;
  transition: background .12s, color .12s, border-color .12s; }
.filter-btn:hover { background: var(--bg); color: var(--ink); }
.filter-btn.is-active { border-color: var(--accent); color: var(--accent); }
.filter-btn .filter-count { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; }
.filter-pop { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 40; width: 260px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,32,54,.16); padding: 12px; }
.filter-pop .field { margin-bottom: 10px; }
.filter-pop label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.filter-pop select { width: 100%; max-width: none; }
.filter-pop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: .8rem; color: var(--muted); }
/* Folder picker (search-as-you-type; replaces all-folders <select>s) */
.fp { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fp-icon { color: var(--muted); font-size: .85rem; flex-shrink: 0; }
.fp-input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
  font-size: .9rem; padding: 9px 11px; outline: none; }
.fp-input:focus { border-color: var(--accent); }
.fp-input.fp-dirty { font-style: italic; }
.fp-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 45; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,32,54,.16); padding: 4px; text-align: start; }
.fp-inline { flex-wrap: wrap; }
.fp-inline .fp-list { position: static; width: 100%; max-height: 180px; box-shadow: none; margin-top: 6px; }
.fp-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; font-size: .88rem; color: var(--ink); cursor: pointer; }
.fp-item i { color: var(--muted); width: 15px; text-align: center; }
.fp-item:hover { background: #f2f5fa; }
.fp-item.is-current { font-weight: 600; }
.fp-empty { padding: 8px 10px; font-size: .8rem; color: var(--muted); }
[data-theme="dark"] .fp-input, [data-theme="dark"] .fp-list { background: var(--card); }
[data-theme="dark"] .fp-item:hover { background: rgba(255,255,255,.06); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 4px; }
.pager .pg-info { font-size: .82rem; color: var(--muted); }
.pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.people-none { grid-column: 1 / -1; text-align: center; padding: 40px 16px; color: var(--muted); }
.people-none i { font-size: 2rem; opacity: .55; }
.people-none p { margin: 10px 0 12px; }

.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.view-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 8px 11px; font-size: .92rem; display: inline-flex; align-items: center; transition: background .12s, color .12s; }
.view-btn + .view-btn { border-inline-start: 1px solid var(--line); }
.view-btn:hover { background: var(--bg); color: var(--ink); }
.view-btn.is-active { background: var(--accent); color: #fff; }

.people-grid.is-list { display: flex; flex-direction: column; gap: 10px; }
.people-grid.is-list .person-card { display: flex; flex-direction: row; align-items: center; text-align: start; gap: 16px; padding: 12px 16px; padding-inline-end: 44px; }
.people-grid.is-list .person-card:hover { transform: none; }
.people-grid.is-list .person-open { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; flex: 1 1 auto; min-width: 0; }
.people-grid.is-list .person-avatar { grid-row: 1 / span 2; width: 46px; height: 46px; margin: 0; font-size: 1.05rem; }
.people-grid.is-list .entity-avatar i { font-size: 1.05rem; }
.people-grid.is-list .person-name { grid-column: 2; align-self: end; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-grid.is-list .person-rel { grid-column: 2; align-self: start; margin-top: 0; }
.people-grid.is-list .person-stats { margin: 0; margin-inline-start: auto; justify-content: flex-end; flex: 0 0 auto; }

.people-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 48px 20px;
}
.people-empty i { font-size: 2rem; opacity: .5; display: block; margin-bottom: 10px; }

.person-menu > summary { background: rgba(255,255,255,.85); }
.kebab-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-size: .88rem; color: var(--ink); text-decoration: none;
}
.kebab-menu a:hover { background: #f2f5fa; }
.kebab-menu a i, .kebab-menu button i { width: 15px; text-align: center; }
.kebab-menu button[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 560px) {
  .people-search input { min-width: 0; width: 100%; }
  .people-tools { flex-wrap: wrap; }
}

/* team management (settings modal) */
.team-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.team-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.team-who { display: flex; flex-direction: column; margin-inline-end: auto; min-width: 0; }
.team-name { font-weight: 600; color: var(--ink); }
.team-mail { font-size: .8rem; color: var(--muted); }
.team-acts { display: flex; gap: 12px; flex-shrink: 0; }
.team-acts .linklike { font-size: .82rem; }
.team-count { font-size: .82rem; }
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.team-add { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.team-kebab { flex-shrink: 0; }
.linklike.danger { color: #c22f42; }

/* per-member folder access (ADR-0025) */
.fa-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; cursor: pointer; font-size: .88rem; color: var(--ink); }
.fa-opt input { width: auto; margin-top: 3px; }
.fa-tree { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; padding: 6px 2px; }
.fa-node { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: .88rem; color: var(--ink); }
.fa-node:hover { background: var(--bg); }
.fa-node input { width: auto; }

/* ---------- Duotone icons in Relvant blue (fa-duotone fa-light) ---------- */
.fa-duotone {
  --fa-primary-color: var(--accent);
  --fa-secondary-color: var(--accent);
  --fa-secondary-opacity: 0.32;
}
/* Keep icons legible where they sit on a filled/colored surface, or must match
   the element's own colour (white on buttons, red on danger items). */
.btn-primary .fa-duotone, .btn-navy .fa-duotone, .btn-danger .fa-duotone,
.entity-avatar .fa-duotone, .fab .fa-duotone,
.danger .fa-duotone, .ctx-item.danger .fa-duotone, .kebab-menu .danger .fa-duotone,
.imp-banner .fa-duotone, .side-logo .fa-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
}

/* ============================================================
   Reminders module — recurring bills / transfers (ADR-0017)
   ============================================================ */
.rem-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; margin-top: 6px; }
.rem-col-left { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (max-width: 900px) { .rem-cols { grid-template-columns: 1fr; } }
.rem-card-topright { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Upcoming / Completed tabs over the timeline (ADR-0093) */
.rem-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.rem-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-family: inherit;
  font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: 8px 8px 0 0; }
.rem-tab:hover { color: var(--ink); background: #f4f8fc; }
.rem-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.rem-tab-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
  font-size: .75rem; font-weight: 700; color: var(--muted); text-align: center; }
.rem-tab.active .rem-tab-n { background: #e9f1fb; border-color: #d9e7f7; color: var(--accent-dark); }
.rem-empty { text-align: center; padding: 34px; }
.rem-empty i { font-size: 2rem; color: var(--muted); opacity: .5; }
.rem-empty p { margin-top: 10px; }
/* In the Completed tab every row is done, so fading them all adds nothing. */
#remCompleted .rem-occ.done { opacity: .85; }

/* upcoming timeline */
.rem-upcoming { display: flex; flex-direction: column; gap: 8px; }
.rem-occ { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; }
.rem-occ.overdue { border-color: #f3c0c6; background: #fdf3f4; }
.rem-occ.done { opacity: .58; }
.rem-occ.done .rem-occ-title { text-decoration: line-through; }
.rem-check { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 1.25rem; padding: 0; line-height: 1; flex-shrink: 0; }
.rem-check:hover { color: var(--accent); }
.rem-occ.done .rem-check { color: var(--ok); }
.rem-occ.overdue .rem-check { color: var(--danger); }
.rem-check[disabled] { opacity: .4; cursor: default; }
.rem-occ-date { text-align: center; width: 62px; flex-shrink: 0; background: #f1f7ff; border: 1px solid #d9e7f7; border-radius: 9px; padding: 7px 3px; }
.rem-occ-day { display: block; font-weight: 800; font-size: 1.5rem; color: var(--accent); line-height: 1; }
/* nowrap + ellipsis is a safety net, not the fix: the month is rendered short
   ("Sep") so it fits the 62px tile. If anything ever puts a long value here
   again it clips quietly instead of spilling across the title. */
.rem-occ-mon { display: block; font-size: .7rem; font-weight: 700; color: var(--navy-900); line-height: 1.25; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rem-occ-yr { display: block; font-size: .64rem; color: var(--muted); line-height: 1.15; }
.rem-occ.overdue .rem-occ-date { background: #fdeef0; border-color: #f3c9cf; }
.rem-occ.overdue .rem-occ-day { color: var(--danger); }
.rem-occ-main { flex: 1; min-width: 0; }
.rem-occ-title { font-weight: 600; color: var(--ink); font-size: .95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rem-occ-sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.rem-overdue-lbl { color: var(--danger); font-weight: 700; }
.rem-occ-amt { font-weight: 700; color: var(--navy-900); font-size: .9rem; white-space: nowrap; }
/* Spelled-out twin of the circle toggle on the left of the row. */
.rem-done-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--accent); background: #fff;
  color: var(--accent); font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease; }
.rem-done-btn:hover { background: var(--accent); color: #fff; }
.rem-done-btn.is-done { border-color: var(--line); color: var(--muted); }
.rem-done-btn.is-done:hover { background: var(--bg); color: var(--ink); border-color: var(--muted); }
.rem-done-btn i { font-size: .85rem; }
/* Below ~560px the row is tight: keep the button, drop its label to the icon so
   the title keeps its space rather than the button wrapping under it. */
@media (max-width: 560px) {
  .rem-done-lbl { display: none; }
  .rem-done-btn { padding: 7px 9px; }
}

/* rule cards */
.rem-list { display: flex; flex-direction: column; gap: 10px; }
.rem-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.rem-card.is-paused { opacity: .7; }
.rem-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rem-card-title { font-weight: 700; color: var(--navy-900); }
.rem-paused-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #eef1f6; padding: 2px 7px; border-radius: 999px; }
.rem-freq { font-size: .82rem; color: var(--muted); margin-top: 3px; }
.rem-card-mid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: .86rem; }
.rem-amt { font-weight: 700; color: var(--navy-900); }
.rem-next { color: var(--accent); font-weight: 600; }
.rem-next i { margin-inline-end: 4px; }
.rem-actions { display: flex; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.rem-actions .linklike { font-size: .82rem; }

/* category chips */
.rem-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: var(--muted); white-space: nowrap; }
.cat-bill { background: rgba(192,57,43,.12); color: #c0392b; }
.cat-transfer { background: rgba(12,100,174,.12); color: var(--accent); }
.cat-payment, .cat-salary { background: rgba(13,122,86,.12); color: #0d7a56; }
.cat-subscription { background: rgba(124,58,237,.12); color: #7c3aed; }
.cat-rent { background: rgba(176,98,10,.14); color: #b0620a; }
.cat-loan { background: rgba(20,120,120,.14); color: #147878; }

/* ---------- Dashboard charts (Home) ---------- */
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 22px 0; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.chart-title { font-weight: 700; color: var(--navy-900); font-size: .92rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.chart-title i { color: var(--accent); }
.chart-wrap { position: relative; height: 210px; }
.chart-foot { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 10px; }

/* ---- Recycle Bin ---- */
.rb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rb-list { display: flex; flex-direction: column; gap: 10px; }
.rb-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.rb-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #f0f2f6; color: var(--muted); font-size: 1rem; }
.rb-icon.rb-document { background: #eaf3fd; color: var(--accent); }
.rb-main { flex: 1; min-width: 0; }
.rb-title { font-weight: 700; color: var(--navy-900); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-sub { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.rb-soon { color: var(--danger); font-weight: 600; }
.rb-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) { .rb-actions .rb-restore span { display: none; } }

/* ---- social sign-in (Google / Apple) on login + signup ---- */
.social-auth { margin-top: 18px; }
.social-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; margin: 4px 0 16px; }
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gsi-wrap { display: flex; justify-content: center; }
/* Apple sign-in button — sized to match the 300px Google button below it */
.apple-signin-btn { display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 300px; margin: 10px auto 0; padding: 0; height: 40px; border-radius: 4px;
  background: #000; color: #fff; border: 1px solid #000; cursor: pointer;
  font-size: 15px; font-weight: 500; font-family: inherit; }
.apple-signin-btn:hover { background: #1a1a1a; }
[data-theme="dark"] .apple-signin-btn { background: #fff; color: #000; border-color: #fff; }
[data-theme="dark"] .apple-signin-btn:hover { background: #e8e8e8; }

/* ---- Home: 50/50 split (expiring soon + recent) left · month calendar right ---- */
/* Two side-by-side dashboard columns (Upcoming reminders · Recently uploaded).
   auto-fit means a single present column fills the width; two split 50/50; and
   they stack on narrow screens. */
.home-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 26px; align-items: start; }
.home-duo-col { min-width: 0; }
.home-empty { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; padding: 20px; }
.home-item { cursor: pointer; }

/* "People Documents" — per-person avatar + proportional bar + count, with a
   custom (non-native) tooltip showing the full name on hover. */
.ppl-doc { display: flex; flex-direction: column; gap: 11px; padding: 6px 2px 2px; }
.ppl-row { display: flex; align-items: center; gap: 12px; position: relative; text-decoration: none; }
.ppl-row:hover { text-decoration: none; }
.ppl-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--line); }
.ppl-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppl-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #0c64ae; color: #fff; font-size: .78rem; font-weight: 700; }
.ppl-bar-wrap { flex: 1; height: 10px; min-width: 0; background: var(--line); border-radius: 6px; overflow: hidden; }
.ppl-bar { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #0c64ae, #5ea7e0); }
.ppl-n { min-width: 22px; text-align: end; font-size: .85rem; font-weight: 700; color: var(--ink); }
.ppl-row::after { content: attr(data-tip); position: absolute; inset-inline-start: 0; bottom: calc(100% + 9px); background: #0b2036; color: #fff; padding: 6px 11px; border-radius: 8px; font-size: .78rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; box-shadow: 0 6px 18px rgba(11,32,54,.28); z-index: 6; }
.ppl-row::before { content: ''; position: absolute; inset-inline-start: 14px; bottom: calc(100% + 3px); border: 6px solid transparent; border-top-color: #0b2036; opacity: 0; transition: opacity .15s ease; pointer-events: none; z-index: 6; }
.ppl-row:hover::after { opacity: 1; transform: translateY(0); }
.ppl-row:hover::before { opacity: 1; }

/* Small image preview inside the dashboard/calendar detail modal. */
.cal-item-thumb { margin: 4px 0 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); max-height: 200px; display: flex; align-items: center; justify-content: center; }
.cal-item-thumb img { max-width: 100%; max-height: 200px; object-fit: contain; display: block; }
.home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; margin-top: 6px; }
.home-split-left { min-width: 0; }
.home-split-right { min-width: 0; position: sticky; top: 18px; }
@media (max-width: 960px) { .home-split { grid-template-columns: 1fr; } .home-split-right { position: static; } }

.home-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.home-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .06s; }
.home-item:hover { border-color: #cfe2f6; box-shadow: 0 4px 14px rgba(12,100,174,.08); }
.home-item:active { transform: translateY(1px); }
.home-item-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: #eaf3fd; color: var(--accent); font-size: .95rem; }
.home-item-icon-muted { background: #f0f2f6; color: var(--muted); }
.home-item-icon-danger { background: #fdeaea; color: #c0392b; }
.home-item-amt { font-size: .8rem; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.home-item-od { color: #c0392b; font-weight: 700; }
.home-item-main { flex: 1; min-width: 0; }
.home-item-title { font-weight: 700; color: var(--navy-900); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-item-sub { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.home-item-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; }
.home-item-date { font-size: .72rem; color: var(--muted); white-space: nowrap; }

.home-cal .rem-cal-grid { margin-bottom: 14px; }
.home-cal-legend { display: flex; gap: 18px; padding: 12px 16px 0; }
.hcal-lg { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--muted); }
.hcal-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.hcal-dot.dot-rem { background: #e8f1fb; border-inline-start: 3px solid var(--accent); }
.hcal-dot.dot-exp { background: #fff2e2; border-inline-start: 3px solid #d98218; }
.hcal-dot.dot-alert { background: #f0ecfb; border-inline-start: 3px solid #7c3aed; }

/* ============================================================
   MARKETING SITE v2 — hero video landing (NativeSync-style, Relvant blue)
   ============================================================ */
.home-hero-dark .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: none; }
.home-hero-dark .nav .nav-logo span,
.home-hero-dark .nav .nav-links a { color: #fff; }
.home-hero-dark .nav .nav-links a.btn-primary { color: #fff; }
.home-hero-dark .nav .nav-links a:not(.btn):hover { color: #cfe1f4; }

.m-container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ---- hero ---- */
.hero-v2 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate; }
.hero-v2-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 80% 0%, #16324e 0%, #0b2036 55%); }
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-v2-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(11,32,54,.86) 0%, rgba(11,32,54,.66) 42%, rgba(11,32,54,.30) 78%, rgba(11,32,54,.12) 100%),
  linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,0) 26%, rgba(11,32,54,0) 68%, rgba(11,32,54,.45) 100%); }
.hero-v2-inner { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 150px 32px 110px; }
/* No overlay filter over the video — keep text legible with a shadow on the text only. */
.hero-v2-copy { max-width: 660px; text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); }
.hero-v2-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600;
  letter-spacing: .02em; color: #cfe1f4; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 7px 14px; border-radius: 999px; }
.hero-v2-pulse { width: 8px; height: 8px; border-radius: 50%; background: #5ea7e0; box-shadow: 0 0 0 0 rgba(94,167,224,.6); animation: heroPulse 2s infinite; }
@keyframes heroPulse { 0% { box-shadow: 0 0 0 0 rgba(94,167,224,.55); } 70% { box-shadow: 0 0 0 9px rgba(94,167,224,0); } 100% { box-shadow: 0 0 0 0 rgba(94,167,224,0); } }
.hero-v2-title { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 800; margin: 20px 0 0; letter-spacing: -.02em; }
.hero-v2-title .grad {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #eef3f9;                       /* bright, so it always reads on the dark video */
  animation: gradGlow 3.2s ease-in-out infinite;
}
@keyframes gradGlow {
  0%, 100% { text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 14px rgba(94,167,224,.45); }
  50%      { text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 30px rgba(122,199,255,.9), 0 0 60px rgba(94,167,224,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2-title .grad { animation: none; text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 20px rgba(122,199,255,.7); }
}
.hero-v2-lede { font-size: 1.12rem; line-height: 1.62; color: #d6e2ee; margin: 20px 0 0; max-width: 600px; }
.hero-v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-v2-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 26px 0 0; padding: 0; }
.hero-v2-proof li { font-size: .92rem; color: #cfe1f4; display: flex; align-items: center; gap: 8px; }
.hero-v2-proof i { color: #5ea7e0; }

/* ---- buttons ---- */
.btn-v2 { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 11px; font-weight: 600;
  font-size: .96rem; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s; border: 1px solid transparent; }
.btn-v2:hover { text-decoration: none; transform: translateY(-1px); }
.btn-v2-primary { background: #fff; color: var(--navy-900); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.btn-v2-primary:hover { background: #eaf2fb; color: var(--navy-900); }
.btn-v2-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-v2-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-v2-ghost-dark { background: transparent; color: var(--accent); border-color: var(--line); }
.btn-v2-ghost-dark:hover { background: var(--bg); color: var(--accent-dark); }

/* ---- section rhythm ---- */
.section-v2 { padding: 92px 0; }
.section-v2-alt { background: #fafbfd; }
.section-v2-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.eyebrow-v2 { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-bottom: 12px; }
.eyebrow-v2.on-dark { color: #7fb6e6; }
.title-v2 { font-size: clamp(1.7rem, 3.3vw, 2.4rem); line-height: 1.16; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.title-v2.on-dark { color: #fff; }
.lede-v2 { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.lede-v2.on-dark { color: #cbd8e6; }

/* ---- trust strip ---- */
.strip-v2 { background: #f6f8fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.strip-v2 .m-container { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.strip-v2-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.strip-v2-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; }
.strip-v2-langs li { font-size: .92rem; font-weight: 600; color: var(--navy-800); display: flex; align-items: center; gap: 8px; }
.strip-v2-langs i { color: var(--accent); }

/* ---- how it works ---- */
.how-v2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.how-v2-step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; }
.how-v2-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.how-v2-num { font-size: 1.6rem; font-weight: 800; color: var(--accent); opacity: .35; }
.how-v2-body h3 { color: var(--navy-900); font-size: 1.12rem; margin: 8px 0 8px; display: flex; align-items: center; gap: 9px; }
.how-v2-body h3 i { color: var(--accent); }
.how-v2-body p { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ---- quote band ---- */
.quote-band { background: var(--navy-900); color: #fff; padding: 60px 0; }
.quote-big { text-align: center; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; color: #eaf2fb; max-width: 900px; margin: 0 auto; }

/* ---- bento ---- */
.bento-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bento-v2-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; }
.bento-v2-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.bento-v2-card-lg { grid-column: span 2; background: linear-gradient(135deg, #0c64ae, #16324e); color: #fff; border-color: transparent; }
.bento-v2-icon { width: 46px; height: 46px; border-radius: 12px; background: #eaf2fb; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 14px; }
.bento-v2-card-lg .bento-v2-icon { background: rgba(255,255,255,.16); color: #fff; }
.bento-v2-card h3 { color: var(--navy-900); font-size: 1.15rem; margin-bottom: 8px; }
.bento-v2-card-lg h3 { color: #fff; font-size: 1.4rem; }
.bento-v2-card p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.bento-v2-card-lg p { color: #d6e2ee; }

/* ---- who ---- */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.who-card { text-align: center; padding: 28px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.who-card i { font-size: 1.9rem; color: var(--accent); }
.who-card h3 { color: var(--navy-900); font-size: 1.1rem; margin: 14px 0 8px; }
.who-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ---- security band ---- */
.security-band { background: var(--navy-900); color: #fff; padding: 84px 0; }
.security-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.security-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.security-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #eaf2fb; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; font-size: .92rem; }
.security-list i { color: #5ea7e0; font-size: 1.05rem; }

/* ---- stats ---- */
.stat-v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-v2-n { font-size: 1.9rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.stat-v2-l { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* ---- FAQ ---- */
.faq-v2 { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--navy-900); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--muted); font-size: .95rem; line-height: 1.6; padding: 0 0 16px; margin: 0; }

/* ---- CTA band ---- */
.cta-v2 { padding: 90px 0; text-align: center; background: radial-gradient(120% 120% at 50% 0%, #eaf2fb 0%, #fff 60%); }
.cta-v2-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.cta-v2-lede { color: var(--muted); font-size: 1.08rem; margin: 14px auto 30px; max-width: 560px; }

@media (max-width: 900px) {
  .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr 1fr; }
  .bento-v2-card-lg { grid-column: span 2; }
  .security-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr; }
  .bento-v2-card-lg { grid-column: span 1; }
  .security-list { grid-template-columns: 1fr; }
  .hero-v2-inner { padding: 120px 22px 80px; }
  .hero-v2-scrim { background: linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,.75) 60%, rgba(11,32,54,.9) 100%); }
}

/* Match SweetAlert2 inputs/selects to the app's field styling (Create Folder dialog, etc.)
   The side inset matters: `margin: 6px 0` with `width: 100%` made the field span
   the popup edge to edge while the title and text above it stayed inset, so it
   looked wedged into the corners. 1.6em is SweetAlert2's own content inset. */
.swal2-popup .swal2-input,
.swal2-popup .swal2-select {
  width: calc(100% - 3.2em); box-sizing: border-box; height: auto; margin: 6px 1.6em 0;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; box-shadow: none;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-select:focus { outline: none; border-color: var(--navy-700); box-shadow: none; }

/* ---------- Upload progress bar ---------- */
.upload-progress { padding: 20px 22px; }
.up-prog-head { font-weight: 600; color: var(--navy-900); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.up-prog-head i { color: var(--accent); }
.up-prog-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-prog-bar { height: 10px; background: #eaf0f7; border-radius: 999px; overflow: hidden; }
.up-prog-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #5ea7e0); transition: width .25s ease; }
.up-prog-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* AI-processing state — shown in place of the bar while extraction runs. */
.up-processing { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--navy-900); }
.up-spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid #dbe6f2; border-top-color: var(--accent); animation: up-spin .7s linear infinite; }
@keyframes up-spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .up-spinner { border-color: rgba(255,255,255,.14); border-top-color: var(--accent); }

/* folder star (Vault) */
.tree-star { color: #e8b93c; font-size: .72rem; margin-inline-start: 4px; }
.row-star { color: #e8b93c; font-size: .8rem; margin-inline-start: 6px; }
.tree-shared { color: var(--accent); font-size: .68rem; margin-inline-start: 4px; }
.row-shared { color: var(--accent); font-size: .74rem; margin-inline-start: 6px; }
.btn-icon { padding-inline-start: 12px; padding-inline-end: 12px; }
.btn-icon i { margin: 0; }
#starFilterBtn.on { background: #fff7e0; border-color: #e8b93c; color: #96700e; }
#starFilterBtn.on i { color: #e8b93c; }

/* vault search box */
/* Border sits on the container so the icon is unambiguously INSIDE the box. */
.vault-search {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
  transition: border-color .12s, box-shadow .12s;
}
.vault-search-results {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; width: min(420px, 88vw);
  max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 16px 40px rgba(16,32,54,.18); padding: 6px; z-index: 60; text-align: start;
}
.vsr-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px 4px; }
.vsr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.vsr-item:hover { background: #f2f5fa; }
.vsr-item > i { width: 18px; text-align: center; color: var(--accent); font-size: .95rem; flex-shrink: 0; }
.vsr-doc { display: flex; flex-direction: column; min-width: 0; }
.vsr-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsr-meta { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsr-empty { padding: 14px 12px; color: var(--muted); font-size: .88rem; text-align: center; }
.vault-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, #e8f1fb); }
.vault-search i { color: var(--muted); font-size: .9rem; flex-shrink: 0; }
.vault-search input {
  border: 0; outline: none; background: transparent; height: 100%; padding: 0; margin: 0;
  color: var(--ink); font-size: .92rem; width: 210px;
}
@media (max-width: 720px) { .vault-search input { width: 130px; } }

/* sidebar global search */
.side-search {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 0 4px 16px;
  padding: 0 12px; height: 38px; border: 1px solid var(--line); border-radius: 9px;
  background: #f7f9fc; transition: border-color .12s, box-shadow .12s;
}
.side-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, #e8f1fb); background: #fff; }
.side-search > i { color: var(--muted); font-size: .88rem; flex-shrink: 0; }
.side-search input { border: 0; outline: none; background: transparent; width: 100%; height: 100%; padding: 0; margin: 0; font-size: .9rem; color: var(--ink); }
.side-search-results {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; width: 320px; max-width: 82vw;
  max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 16px 44px rgba(16,32,54,.2); padding: 6px; z-index: 80; text-align: start;
}
.ssr-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px 4px; }
.ssr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.ssr-item:hover { background: #f2f5fa; }
.ssr-item > i { width: 18px; text-align: center; color: var(--accent); font-size: .95rem; flex-shrink: 0; }
.ssr-text { display: flex; flex-direction: column; min-width: 0; }
.ssr-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* linked-entity name shown inline right after a person's name (ADR-0044) */
.ssr-extra { font-size: .72rem; color: var(--muted); font-weight: 400; margin-inline-start: 7px; }
.ssr-empty { padding: 14px 12px; color: var(--muted); font-size: .86rem; text-align: center; }

/* format-aware date field (replaces native type=date) */
.df-wrap { position: relative; display: flex; align-items: stretch; }
.df-text { flex: 1; padding-inline-end: 38px; }
.df-btn {
  position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; width: 36px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer; border-radius: 0; border-start-end-radius: 8px; border-end-end-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.df-btn:hover { color: var(--accent); background: #f2f5fa; }
.df-cal {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 90;
  width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16,32,54,.18); padding: 10px;
}
.df-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.df-cal-title { display: flex; gap: 5px; }
.df-sel {
  border: 1px solid var(--line); background: #fff; color: var(--navy-900);
  border-radius: 7px; padding: 3px 5px; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.df-sel:hover { border-color: var(--accent); }
.df-nav { border: 0; background: #f2f5fa; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 1.05rem; color: var(--ink); line-height: 1; }
.df-nav:hover { background: var(--accent); color: #fff; }
.df-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.df-dowc { text-align: center; font-size: .68rem; color: var(--muted); text-transform: uppercase; padding: 2px 0; }
.df-day { border: 0; background: transparent; height: 30px; border-radius: 7px; cursor: pointer; font-size: .84rem; color: var(--ink); }
.df-day:hover { background: #eef1f6; }
.df-day.df-today { box-shadow: inset 0 0 0 1.5px var(--accent-line, #cfe2f6); }
.df-day.df-sel { background: var(--accent); color: #fff; font-weight: 700; }
.df-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.df-link { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: .82rem; font-weight: 600; }
.df-link:hover { text-decoration: underline; }

/* settings: reminder schedules */
.rem-policy { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.rem-policy-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rem-name, .rem-offsets, .rem-new-name, .rem-new-offsets {
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font-size: .95rem; font-family: inherit; background: #fff; color: var(--ink); width: 100%;
}
.rem-name:focus, .rem-offsets:focus, .rem-new-name:focus, .rem-new-offsets:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(12,100,174,.12); }
.rem-name { flex: 1; width: auto; }
.rem-del { margin-inline-start: auto; background: none; border: 0; cursor: pointer; color: #c22f42; }
.rem-del:hover { color: #a01f30; }
.rem-policy .rem-save { margin-top: 10px; }
.rem-policy .rem-msg { margin-inline-start: 10px; }
.rem-new { border: 1px dashed var(--line); border-radius: 10px; padding: 14px; margin-top: 4px; }
.rem-new h4 { font-size: .95rem; color: var(--navy-900); }

/* ===== Reminders: compact stat strip (one row) ===== */
.rem-stat-strip { display: flex; gap: 10px; margin: 6px 0 20px; flex-wrap: wrap; }
.rem-stat { flex: 1; min-width: 120px; display: flex; align-items: baseline; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.rem-stat-n { font-size: 1.35rem; font-weight: 800; color: var(--navy-900); line-height: 1; }
.rem-stat-l { font-size: .8rem; color: var(--muted); }
/* Currency code sits with the figure but shouldn't compete with it. */
.rem-stat-cur { font-size: .82rem; font-weight: 700; color: var(--muted); }
/* Extra currencies, when an account mixes them — under the label, not folded
   into the headline number (they can't legitimately be added together). */
.rem-stat-extra { display: block; font-size: .72rem; color: var(--muted); opacity: .85; }
.rem-stat.is-danger { border-color: #f0c4c4; background: #fdf3f3; }
.rem-stat.is-danger .rem-stat-n { color: #c0392b; }
.rem-stat.is-warn { border-color: #f0e0bd; background: #fdfaf1; }
.rem-stat.is-warn .rem-stat-n { color: #b0620a; }

/* ============================================================
   EXPIRATIONS — expiry command center
   ============================================================ */
.exp-strip .exp-seg { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .06s; user-select: none; }
.exp-strip .exp-seg:hover { border-color: #cfe2f6; }
.exp-strip .exp-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exp-strip .exp-seg.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.exp-strip .exp-seg.is-active .rem-stat-l { color: var(--navy-900); font-weight: 600; }

.exp-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.exp-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 0 14px; }
.exp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(12,100,174,.12); }
.exp-search i { color: var(--muted); font-size: .9rem; pointer-events: none; flex-shrink: 0; }
.exp-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: 10px 0; font-size: .92rem; color: var(--ink); -webkit-appearance: none; appearance: none; }
.exp-select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  font-size: .9rem; cursor: pointer; max-width: 200px; }
.exp-select:focus { outline: none; border-color: var(--accent); }
.exp-count { font-size: .82rem; color: var(--muted); margin-bottom: 12px; }

.exp-list { display: flex; flex-direction: column; gap: 10px; }
.exp-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px; padding-inline-start: 20px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .06s; }
.exp-card:hover { border-color: #cfe2f6; box-shadow: 0 6px 18px rgba(12,100,174,.09); }
.exp-card:active { transform: translateY(1px); }
.exp-stripe { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--muted); }
.exp-card.exp-red .exp-stripe { background: #c0392b; }
.exp-card.exp-orange .exp-stripe { background: #e08a1e; }
.exp-card.exp-green .exp-stripe { background: #0d7a56; }

.exp-av { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; color: #fff; letter-spacing: .02em; }
.exp-av.av-0 { background: #0c64ae; } .exp-av.av-1 { background: #0d7a56; } .exp-av.av-2 { background: #b0620a; }
.exp-av.av-3 { background: #7c3aed; } .exp-av.av-4 { background: #c0392b; } .exp-av.av-5 { background: #147878; }

.exp-main { flex: 1; min-width: 0; }
.exp-title { font-weight: 700; color: var(--navy-900); font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.exp-sub span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.exp-sub i { opacity: .7; }
.exp-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: end; }
.exp-date { font-size: .76rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

@media (max-width: 640px) {
  .exp-select { flex: 1; max-width: none; }
  .exp-card { flex-wrap: wrap; padding-inline-start: 18px; }
  .exp-right { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; margin-inline-start: 54px; margin-top: 2px; }
  .exp-sub { gap: 2px 10px; }
}

/* ===== Reminders: month calendar ===== */
.rem-cal-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 24px; overflow: hidden; box-shadow: 0 6px 22px rgba(12,100,174,.07); }
.rem-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; background: linear-gradient(135deg, #0c64ae 0%, #0a4f8c 100%); }
.rem-cal-nav { display: flex; align-items: center; gap: 12px; }
.rem-cal-actions { display: flex; align-items: center; gap: 10px; }
.cal-views { display: inline-flex; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 8px; overflow: hidden; }
.cal-view-btn { border: 0; background: transparent; color: #fff; font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 13px; cursor: pointer; transition: background .12s, color .12s; }
.cal-view-btn + .cal-view-btn { border-inline-start: 1px solid rgba(255,255,255,.25); }
.cal-view-btn:hover { background: rgba(255,255,255,.22); }
.cal-view-btn.is-active { background: #fff; color: var(--accent); }
.rem-cal-grid.is-day { grid-template-columns: 1fr; }
.rem-cal-grid.is-week .rem-cell, .rem-cal-grid.is-day .rem-cell { min-height: 260px; }
.cal-item-card { width: min(420px, 100%); }
/* Entities add/edit — wider than the shared .modal-form default so the two-column
   contact grid has room to breathe. Scoped to this modal only (same pattern as
   .cal-item-card) — .modal-form is shared by People, doc types and shares. */
.entity-modal-card { width: min(620px, 100%); }
.cal-item-h { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 1.15rem; color: var(--navy-900); }
.cal-item-h .hcal-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.cal-item-dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; font-size: .9rem; }
.cal-item-dl dt { color: var(--muted); font-weight: 600; white-space: nowrap; }
.cal-item-dl dd { margin: 0; color: var(--navy-900); text-align: end; word-break: break-word; }
.cal-item-act { margin-top: 18px; }
.cal-item-act .btn { width: 100%; justify-content: center; }
.rem-cal-title { font-size: 1.15rem; font-weight: 800; color: #fff; min-width: 160px; text-align: center; letter-spacing: -.01em; }
.rem-cal-arrow { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rem-cal-arrow:hover { background: #fff; color: var(--accent); border-color: #fff; }
.rem-cal-head #hcalToday, .rem-cal-head #calToday { background: rgba(255,255,255,.16) !important; border: 1.5px solid rgba(255,255,255,.5) !important; color: #fff !important; }
.rem-cal-head #hcalToday:hover, .rem-cal-head #calToday:hover { background: #fff !important; color: var(--accent) !important; border-color: #fff !important; }
.rem-cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 14px 16px 6px; }
.rem-cal-dow span { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rem-cal-dow span:first-child, .rem-cal-dow span:last-child { color: var(--accent); }
.rem-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 16px 16px; }
.rem-cell { position: relative; min-width: 0; min-height: 102px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fbfdff; display: flex; flex-direction: column; transition: background .12s, border-color .12s; }
/* quick-add: a small + in each day cell that opens the modal pre-dated to that day */
.rem-cell-add { position: absolute; top: 4px; inset-inline-end: 4px; width: 19px; height: 19px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: .72rem; cursor: pointer; opacity: 0;
  transition: opacity .12s, background .12s, color .12s, border-color .12s; }
.rem-cell:hover .rem-cell-add { opacity: 1; }
.rem-cell-add:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.rem-cell-add:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.rem-cell.is-today .rem-cell-add { color: var(--accent); }
.rem-cell.is-today .rem-cell-add:hover { color: #fff; }
/* No hover on touch — keep it visible but quiet so it stays discoverable. */
@media (hover: none) { .rem-cell-add { opacity: .5; } }
.rem-cell:not(.rem-cell-empty):hover { background: #f2f8ff; border-color: #cfe2f6; }
.rem-cell-empty { background: transparent; border: none; }
.rem-cell-adjacent { background: #f6f8fb; }
.rem-cell-adjacent .rem-cell-day { color: #b3bcc9; }
.rem-cell.is-today { background: linear-gradient(180deg, #eaf3fd, #fbfdff 70%); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rem-cell-day { font-size: .82rem; font-weight: 700; color: var(--navy-900); margin-bottom: 4px; }
.rem-cell.is-today .rem-cell-day { color: #fff; background: var(--accent); width: 21px; height: 21px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.rem-cell-chips { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.rem-chip { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; text-align: start; border: 0; cursor: pointer;
  background: #e8f1fb; color: #0c4c86; border-inline-start: 3px solid var(--accent); border-radius: 5px; padding: 4px 6px; font-size: .74rem; line-height: 1.25; }
.rem-chip:hover { filter: brightness(.97); }
.rem-chip-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rem-chip-amt { font-size: .68rem; opacity: .8; white-space: nowrap; }
.rem-chip.is-overdue { background: #fdeaea; color: #a3271b; border-inline-start-color: #c0392b; }
.rem-chip.is-done { background: #eaf6f0; color: #0d7a56; border-inline-start-color: #0d7a56; }
.rem-chip.is-done .rem-chip-t { text-decoration: line-through; opacity: .75; }
a.rem-chip { text-decoration: none; }
.rem-chip.is-expiry { background: #fff2e2; color: #9a5a08; border-inline-start-color: #d98218; }
.rem-chip.is-expiry.is-expired { background: #fdeaea; color: #a3271b; border-inline-start-color: #c0392b; }
.rem-chip.is-alert { background: #f0ecfb; color: #5b3ea8; border-inline-start-color: #7c3aed; }
@media (max-width: 720px) {
  .rem-cell { min-height: 82px; }
  .rem-chip-amt { display: none; }
  .rem-cal-title { font-size: 1rem; min-width: 120px; }
}

/* ============================================================
   DARK MODE — applied only when <html data-theme="dark">.
   Only the authenticated app shell (app_base.html) sets the
   attribute, so the public marketing site stays light.
   ============================================================ */
:root[data-theme="dark"] {
  --navy-900: #eaf1f8;   /* these read as strong TEXT in the app → flip light */
  --navy-800: #cbd8e8;
  --navy-700: #a3c0df;
  --ink: #dce4ed;
  --muted: #93a1b3;
  --line: #2b3644;
  --bg: #0e1621;
  --card: #161f2b;
  --accent: #4f99e6;
  --accent-dark: #7cb6ee;
  --danger: #ef7b70;
  --warn-bg: #2b2617;
  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
}

/* App-chrome surfaces that hardcode white in light mode. */
[data-theme="dark"] .app-sidebar,
[data-theme="dark"] .pv-tile,
[data-theme="dark"] .dest-select,
[data-theme="dark"] .dest-act,
[data-theme="dark"] .act-btn,
[data-theme="dark"] .view-toggle,
[data-theme="dark"] .people-search,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .side-search { background: var(--card); }

/* Elevated popovers/menus/modals — one step lighter than the page. */
[data-theme="dark"] .user-menu,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .pv-card,
[data-theme="dark"] .ctx,
[data-theme="dark"] .kebab-menu,
[data-theme="dark"] .filter-pop,
[data-theme="dark"] .side-search-results,
[data-theme="dark"] .vault-search-results,
[data-theme="dark"] .df-cal,
[data-theme="dark"] .set-tab:hover,
[data-theme="dark"] .rem-tab:hover,
[data-theme="dark"] .side-search:focus-within { background: #1c2735; }

/* Form fields. */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .rem-name,
[data-theme="dark"] .rem-offsets,
[data-theme="dark"] .rem-new-name,
[data-theme="dark"] .rem-new-offsets,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: #1c2836; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] ::placeholder { color: var(--muted); opacity: .85; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* SweetAlert dialogs. */
[data-theme="dark"] .swal2-popup { background: #1c2735; color: var(--ink); }
[data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--ink); }
[data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-select, [data-theme="dark"] .swal2-textarea {
  background: #1c2836; color: var(--ink); border-color: var(--line); }

/* Relvant dialogs — the card itself is covered by the .modal-card rule above;
   only the icon badge needs its own (tinted, not washed-out) dark values. */
[data-theme="dark"] .dlg-icon.tone-warn { background: rgba(255,193,7,.14); color: #e8c07a; }
[data-theme="dark"] .dlg-icon.tone-danger { background: rgba(192,57,43,.18); color: #ef8a7d; }
[data-theme="dark"] .dlg-icon.tone-info { background: rgba(12,100,174,.20); color: #7db4e8; }
[data-theme="dark"] .dlg-icon.tone-ok { background: rgba(29,138,76,.18); color: #6fc793; }

/* Navy-filled button: --navy-800 flips to a light TEXT color in dark, so give it its own fill. */
[data-theme="dark"] .btn-navy { background: #24405c; color: #fff; }
[data-theme="dark"] .btn-outline { border-color: var(--line); }

/* Sidebar + row states (light tints → subtle dark-accent). */
[data-theme="dark"] .side-item.active { background: rgba(79,153,230,.16); color: var(--accent-dark); }
[data-theme="dark"] .side-item:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .side-item.active i { color: var(--accent-dark); }
[data-theme="dark"] .table tr:hover td,
[data-theme="dark"] .vault-table tr:hover td { background: rgba(255,255,255,.03); }

/* Calendar cells (they hardcode near-white fills). */
[data-theme="dark"] .rem-cell { background: #131d29; }
[data-theme="dark"] .rem-cell:not(.rem-cell-empty):hover { background: #1a2836; border-color: #2b3f52; }
[data-theme="dark"] .rem-cell-adjacent { background: #101822; }
[data-theme="dark"] .rem-cell.is-today { background: linear-gradient(180deg, #1c3350, #131d29 70%); }

/* Icon-stat chips: tone down the pastel fills for a dark card. */
[data-theme="dark"] .ic-accent { background: rgba(79,153,230,.16); }
[data-theme="dark"] .ic-ok { background: rgba(13,122,86,.20); }
[data-theme="dark"] .ic-warn { background: rgba(176,98,10,.20); }
[data-theme="dark"] .ic-danger { background: rgba(192,57,43,.20); }
[data-theme="dark"] .ic-muted { background: rgba(255,255,255,.06); }

/* The dark-mode toggle button in the user menu. */
.menu-btn .fa-moon, .menu-btn .fa-sun-bright { width: 16px; }

/* ---- Dark-mode polish: tinted chips, badges, alerts, hovers, panels ---- */
/* Neutral gray chips / hovers → subtle raised surface. */
[data-theme="dark"] .modal-close,
[data-theme="dark"] .uploader-close,
[data-theme="dark"] .pill.subuser,
[data-theme="dark"] .pill.access-view,
[data-theme="dark"] .badge-draft,
[data-theme="dark"] .rem-2,
[data-theme="dark"] .rem-3,
[data-theme="dark"] .rem-paused-lbl,
[data-theme="dark"] .rem-cat,
[data-theme="dark"] .pv-icon,
[data-theme="dark"] .pv-body,
[data-theme="dark"] .rb-icon,
[data-theme="dark"] .up-prog-bar,
[data-theme="dark"] .table th { background: rgba(255,255,255,.06); color: var(--muted); }
/* The Actions button is accent-tinted, and `--accent-soft` is only ever a light
   literal fallback — so dark mode needs its own tint or the button turns into a
   pale patch. Placed before the shared :hover rule below, which it overrides. */
[data-theme="dark"] .act-btn.act-kebab {
  background: rgba(79,153,230,.16); border-color: rgba(79,153,230,.5); color: #a9cdf3; }
[data-theme="dark"] .act-btn.act-kebab:hover {
  background: var(--accent); border-color: var(--accent); color: #0f1720; }

[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .uploader-close:hover,
[data-theme="dark"] .act-btn:hover,
[data-theme="dark"] .kebab > summary:hover,
[data-theme="dark"] .kebab-menu button:hover,
[data-theme="dark"] .kebab-menu a:hover,
[data-theme="dark"] .row-kebab:hover,
[data-theme="dark"] .pv-icon:hover,
[data-theme="dark"] .vsr-item:hover,
[data-theme="dark"] .ssr-item:hover,
[data-theme="dark"] .df-day:hover,
[data-theme="dark"] .df-btn:hover,
[data-theme="dark"] .df-nav,
[data-theme="dark"] .table tr:hover td { background: rgba(255,255,255,.08); }

/* Accent tints. */
[data-theme="dark"] .set-tab.active,
[data-theme="dark"] .rem-tab.active .rem-tab-n,
[data-theme="dark"] .tree-item.active,
[data-theme="dark"] .badge-live,
[data-theme="dark"] .badge-ready,
[data-theme="dark"] .rem-0,
[data-theme="dark"] .rem-occ-date,
[data-theme="dark"] .rb-icon.rb-document,
[data-theme="dark"] .dz-icon,
[data-theme="dark"] .ctx-item:hover,
[data-theme="dark"] .drop-target,
[data-theme="dark"] .dropzone.drag { background: rgba(79,153,230,.16); color: var(--accent-dark); }
[data-theme="dark"] .alert-info { background: rgba(79,153,230,.14); color: #a9cdf3; border: 1px solid rgba(79,153,230,.3); }

/* Success / green. */
[data-theme="dark"] .badge-generated,
[data-theme="dark"] .badge-ok,
[data-theme="dark"] .rem-1,
[data-theme="dark"] .upload-done,
[data-theme="dark"] .pv-tile.done { background: rgba(63,174,134,.16); color: #6fd0a6; }
[data-theme="dark"] .alert-success { background: rgba(63,174,134,.14); color: #6fd0a6; border: 1px solid rgba(63,174,134,.3); }
[data-theme="dark"] .alert-warn { background: rgba(214,158,46,.14); color: #e0b45f; border: 1px solid rgba(214,158,46,.3); }

/* Danger / red. */
[data-theme="dark"] .badge-expired,
[data-theme="dark"] .act-btn.act-danger:hover,
[data-theme="dark"] .ctx-item.danger:hover,
[data-theme="dark"] .pv-tile.failed,
[data-theme="dark"] .rem-occ.overdue,
[data-theme="dark"] .rem-stat.is-danger { background: rgba(239,123,112,.16); color: #f19d95; }
[data-theme="dark"] .alert-error { background: rgba(239,123,112,.14); color: #f19d95; border: 1px solid rgba(239,123,112,.3); }

[data-theme="dark"] .ef-file { background: rgba(255,255,255,.05); }

/* Toasts keep a solid fill in both themes (white text needs the contrast);
   dark mode just lifts them off the darker page. */
[data-theme="dark"] .app-toast { background: #12946a; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
[data-theme="dark"] .app-toast.is-err { background: #d1483a; }
[data-theme="dark"] .set-msg.ok { color: #4fc79b; }

/* Warn / amber. */
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .rem-stat.is-warn,
[data-theme="dark"] #starFilterBtn.on { background: rgba(224,137,74,.18); color: #e6b06a; }

/* Panels. */
[data-theme="dark"] .dropzone,
[data-theme="dark"] .newfolder-inline { background: #131d29; border-color: var(--line); }
[data-theme="dark"] .pv-thumb { background: #1c2836; }

/* Calendar chips + legend dots. */
[data-theme="dark"] .rem-chip { background: rgba(79,153,230,.18); color: #a9cdf3; }
[data-theme="dark"] .rem-chip.is-overdue { background: rgba(239,123,112,.18); color: #f19d95; }
[data-theme="dark"] .rem-chip.is-done { background: rgba(63,174,134,.18); color: #6fd0a6; }
[data-theme="dark"] .rem-chip.is-expiry { background: rgba(217,130,24,.20); color: #e6b06a; }
[data-theme="dark"] .rem-chip.is-alert { background: rgba(124,58,237,.24); color: #c4a9ee; }
[data-theme="dark"] .hcal-dot.dot-rem { background: #4f99e6; }
[data-theme="dark"] .hcal-dot.dot-exp { background: #d98218; }
[data-theme="dark"] .hcal-dot.dot-alert { background: #7c3aed; }

/* White Relvant logo on the dark sidebar. */
[data-theme="dark"] .side-logo img { filter: brightness(0) invert(1); }

/* ===================== Tags (ADR-0028): colour-coded pills ===================== */
.tag-pills { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600; line-height: 1.35;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  text-decoration: none; border: 1px solid transparent;
}
a.tag-pill { cursor: pointer; }
a.tag-pill:hover { text-decoration: none; filter: brightness(.96); }
.tag-pills-sm .tag-pill { font-size: .66rem; padding: 1px 8px; }
.tag-pill .tag-x {
  opacity: .55; font-weight: 700; cursor: pointer; margin: 0; margin-inline: 1px -2px;
  font-size: .82rem; line-height: 1;
}
.tag-pill .tag-x:hover { opacity: 1; }

/* Row pills sit next to the file/folder name without pushing the layout. */
.row-tags { margin-inline-start: 8px; }
.doc-row .row-tags .tag-pill, .row-folder .row-tags .tag-pill { font-size: .66rem; padding: 1px 8px; }

/* Filter chips row (Vault) */
.tag-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 16px; align-items: center; }
.tag-chips-label { font-size: .74rem; color: var(--muted); margin-inline-end: 2px; }
.tag-chip-all {
  font-size: .72rem; font-weight: 600; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--card); text-decoration: none;
}
.tag-chip-all.active, .tag-chip-all:hover { border-color: var(--accent); color: var(--accent-dark); text-decoration: none; }

/* Tag editor (document page + swal) */
.tag-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.tag-editor:focus-within { border-color: var(--accent); }
.tag-editor .tag-input { border: none; outline: none; background: transparent; flex: 1 1 120px;
  min-width: 100px; font-size: .82rem; color: var(--ink); padding: 3px 2px; }
.tag-hint { font-size: .74rem; color: var(--muted); margin-top: 6px; }

/* Manage-tags list (settings) */
.tags-manage { display: flex; flex-direction: column; gap: 8px; }
.tags-manage-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.tags-manage-row .tm-count { font-size: .74rem; color: var(--muted); margin-inline-start: auto; }
.tags-manage-row .tm-act { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.tags-manage-row .tm-act:hover { background: var(--bg); color: var(--ink); }
.tags-manage-row .tm-act.danger:hover { color: var(--danger); }

/* palette — light */
.tag-slate  { background:#eef1f6; color:#48566b; }
.tag-red    { background:#fdecea; color:#c0392b; }
.tag-orange { background:#fceadd; color:#b5590f; }
.tag-amber  { background:#fdf6e3; color:#8a6608; }
.tag-green  { background:#e2f5ec; color:#0d7a56; }
.tag-teal   { background:#dff3f4; color:#0b6c7e; }
.tag-blue   { background:#e8f0fb; color:#0c64ae; }
.tag-indigo { background:#ebeafb; color:#4a44c4; }
.tag-purple { background:#f2eafb; color:#8134c0; }
.tag-pink   { background:#fce7ef; color:#bd2a70; }

/* palette — dark (translucent fill + light text) */
[data-theme="dark"] .tag-slate  { background:rgba(148,163,184,.20); color:#c6cfdb; }
[data-theme="dark"] .tag-red    { background:rgba(224,88,72,.20);   color:#f0a49b; }
[data-theme="dark"] .tag-orange { background:rgba(214,120,40,.22);  color:#f0b483; }
[data-theme="dark"] .tag-amber  { background:rgba(214,170,40,.20);  color:#e6c877; }
[data-theme="dark"] .tag-green  { background:rgba(40,180,120,.20);  color:#7ad3ab; }
[data-theme="dark"] .tag-teal   { background:rgba(30,170,190,.20);  color:#6fcbd8; }
[data-theme="dark"] .tag-blue   { background:rgba(60,140,230,.22);  color:#8dbdf0; }
[data-theme="dark"] .tag-indigo { background:rgba(110,104,224,.24); color:#a9a4ee; }
[data-theme="dark"] .tag-purple { background:rgba(150,80,200,.24);  color:#c79aea; }
[data-theme="dark"] .tag-pink   { background:rgba(200,60,120,.24);  color:#ec8fb8; }

/* ===================== Admin Users — storage usage bar ===================== */
.stor-cell { min-width: 104px; }
.stor-text { font-size: .76rem; color: var(--muted); white-space: nowrap; margin-bottom: 4px; }
.stor-pct { font-weight: 600; color: var(--muted); }
.stor-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.stor-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; min-width: 2px; }
.stor-fill.stor-warn { background: #d9920a; }
.stor-fill.stor-crit { background: var(--danger); }
[data-theme="dark"] .stor-bar { background: #2b3644; }
[data-theme="dark"] .stor-fill.stor-warn { background: #e0a53a; }

/* ===================== Admin Users — search / filters / pagination ===================== */
.admin-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.admin-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 380px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; }
.admin-search i { color: var(--muted); font-size: .9rem; }
.admin-search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--ink); font-size: .88rem; }
.admin-filter { border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
  padding: 9px 12px; font-size: .84rem; cursor: pointer; }
.admin-count { margin-inline-start: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.admin-empty { text-align: center; color: var(--muted); padding: 26px 10px; font-size: .9rem; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; }
.admin-pageinfo { font-size: .82rem; color: var(--muted); }
.admin-pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
[data-theme="dark"] .admin-search, [data-theme="dark"] .admin-filter { background: var(--card); }

/* Admin filter button (funnel icon) that drops a panel of selects — admin/documents */
.admin-filterbtn > summary {
  width: auto; height: auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font-size: .84rem; gap: 7px; color: var(--ink);
}
.admin-filterbtn > summary .feat-count { margin-inline-start: 2px; }
.admin-filterbtn[open] > summary { border-color: var(--accent); color: var(--accent); }
.admin-filter-menu { inset-inline-start: 0; inset-inline-end: auto; top: 42px; min-width: 260px; padding: 12px; display: grid; gap: 10px; }
.admin-filter-menu label { display: grid; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.admin-filter-menu select { width: 100%; }
.admin-filter-menu .btn { justify-self: start; }
/* Links inside kebab menus behave like the buttons */
.kebab-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-size: .88rem; color: var(--ink); text-decoration: none;
}
.kebab-menu a:hover { background: #f2f5fa; }
.kebab-menu a i { width: 15px; text-align: center; }

/* Settings: Account tab (delete account) */
.set-tab-danger { color: #c22f42 !important; margin-top: auto; }
.danger-zone { border: 1px solid rgba(204,47,66,.35); background: rgba(204,47,66,.05);
  border-radius: 12px; padding: 16px 18px; font-size: .92rem; color: var(--ink); }

/* Vault contents pager (ADR-0045 step 3) */
.pane-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0 6px; }
.pane-pageinfo { font-size: .82rem; color: var(--muted); }

/* ============================================================
   Language switcher (ADR-0070) — public nav, globe pill + dropdown menu
   ============================================================ */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  color: #e8eef7; font-size: .85rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
  cursor: pointer; user-select: none; transition: background .15s, border-color .15s; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover,
.lang-switch[open] summary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: #fff; }
.lang-switch summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-switch summary .fa-globe { font-size: .95rem; }
.lang-switch .lang-caret { font-size: .62rem; opacity: .8; transition: transform .2s; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }

/* Same card look as the app's .user-menu. */
.lang-menu { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 10px 34px rgba(11, 32, 54, .22);
  animation: lang-menu-in .14s ease-out; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Scoped under .nav .nav-links (and the dark home hero) so it beats the nav's
   white link colour rules. */
.nav .nav-links .lang-menu a,
.home-hero-dark .nav .nav-links .lang-menu a { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px; border-radius: 7px; color: var(--ink); font-size: .9rem; font-weight: 500; }
.nav .nav-links .lang-menu a:hover,
.home-hero-dark .nav .nav-links .lang-menu a:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
.nav .nav-links .lang-menu a.active,
.home-hero-dark .nav .nav-links .lang-menu a.active { color: var(--navy-800); font-weight: 700; }
.lang-menu a i { font-size: .8rem; color: var(--navy-700); }
.lang-names { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.lang-english { font-size: .74rem; font-weight: 400; color: var(--muted); }

/* ============================================================
   Reports (ADR-0075) — catalogue rail + filter card + result table
   ============================================================ */
.rep-cols { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .rep-cols { grid-template-columns: 1fr; } }

.rep-picker { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 980px) { .rep-picker { position: static; } }
.rep-group { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.rep-group-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 6px 8px 8px; font-weight: 700; }
.rep-pick { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px;
  width: 100%; text-align: start; background: transparent; border: 0; cursor: pointer;
  padding: 9px 10px; border-radius: 9px; }
.rep-pick:hover { background: var(--bg); }
/* Place all three children explicitly. Left to auto-placement the icon's
   `grid-row: 1 / span 2` pushes the description back into column 1 — the 20px
   icon column — and every word wraps onto its own line. */
.rep-pick i { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 3px;
  color: var(--muted); font-size: .95rem; text-align: center; }
.rep-pick-t { grid-column: 2; grid-row: 1; font-size: .9rem; font-weight: 650; color: var(--navy-900); }
.rep-pick-d { grid-column: 2; grid-row: 2; font-size: .76rem; color: var(--muted); line-height: 1.35; }
.rep-pick.is-on { background: #e9f1fb; }
.rep-pick.is-on i, .rep-pick.is-on .rep-pick-t { color: var(--accent-dark); }

.rep-main { min-width: 0; }
.rep-filters { padding: 16px 18px; }
.rep-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rep-filters-head h3 { margin: 0; }
.rep-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.rep-filter-grid .field { margin-bottom: 12px; }
.rep-filter-grid .field-check { align-self: end; margin-bottom: 18px; }
.rep-filter-grid .field-check label { margin-bottom: 0; font-weight: 500; }

.rep-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.rep-exports { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rep-exports .muted { margin-inline-end: 2px; }

.rep-empty { text-align: center; padding: 40px 24px; margin-top: 16px; }
.rep-empty i { font-size: 2.4rem; color: var(--muted); opacity: .5; }
.rep-empty p { margin: 12px auto 0; max-width: 46ch; }

.rep-result-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 22px 0 12px; }
.rep-result-head h2 { font-size: 1.2rem; color: var(--navy-900); letter-spacing: -.01em; }
.rep-stamp { font-size: .8rem; white-space: nowrap; }

.rep-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rep-tile { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.rep-tile-n { font-size: 1.3rem; font-weight: 800; color: var(--navy-900); line-height: 1.1; }
.rep-tile-l { font-size: .78rem; color: var(--muted); }
.rep-tile.tone-danger { border-color: #f0c4c4; background: #fdf3f3; }
.rep-tile.tone-danger .rep-tile-n { color: var(--danger); }
.rep-tile.tone-warn { border-color: #ecdcb4; background: var(--warn-bg); }
.rep-tile.tone-ok { border-color: #bfe3d3; background: #f2fbf7; }

.rep-filterline { font-size: .8rem; margin-bottom: 10px; }
.rep-trunc { background: var(--warn-bg); border: 1px solid #ecdcb4; border-radius: 9px;
  padding: 9px 14px; font-size: .84rem; color: var(--ink); margin-bottom: 10px; }

/* The register report is 23 columns wide on purpose — it scrolls sideways in
   its own box rather than forcing the whole page to. */
.rep-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.rep-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.rep-table th { position: sticky; top: 0; z-index: 1; background: var(--accent); color: #fff;
  text-align: start; font-weight: 650; font-size: .78rem; letter-spacing: .01em;
  padding: 9px 12px; white-space: nowrap; }
.rep-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink);
  vertical-align: top; }
.rep-table tbody tr:nth-child(even) td { background: #fafbfd; }
.rep-table tbody tr:hover td { background: #eef4fb; }
.rep-table .t-number, .rep-table .t-bytes, .rep-table .t-money, .rep-table .t-days { text-align: end; white-space: nowrap; }
.rep-table .t-date { white-space: nowrap; }
.rep-table td.is-warn { color: #b0620a; font-weight: 650; }
.rep-table td.is-danger { color: var(--danger); font-weight: 650; }
.rep-table .rep-none { text-align: center; color: var(--muted); padding: 28px 12px; }

/* Reports in dark mode. The rules above hardcode white panels and pastel
   tints, which stayed light when the rest of the page went dark. */
[data-theme="dark"] .rep-group,
[data-theme="dark"] .rep-tile,
[data-theme="dark"] .rep-table-wrap { background: var(--card); }
[data-theme="dark"] .rep-pick:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .rep-pick.is-on { background: rgba(79,153,230,.16); }
[data-theme="dark"] .rep-tile.tone-danger { background: rgba(192,57,43,.16); border-color: rgba(239,123,112,.35); }
[data-theme="dark"] .rep-tile.tone-warn { border-color: rgba(214,158,46,.35); }
[data-theme="dark"] .rep-tile.tone-warn .rep-tile-n { color: #e0b45f; }
[data-theme="dark"] .rep-tile.tone-ok { background: rgba(63,174,134,.14); border-color: rgba(63,174,134,.35); }
[data-theme="dark"] .rep-tile.tone-ok .rep-tile-n { color: #6fd0a6; }
[data-theme="dark"] .rep-trunc { border-color: rgba(214,158,46,.35); }
[data-theme="dark"] .rep-table th { background: #1f3a58; color: #e7edf5; }
[data-theme="dark"] .rep-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
[data-theme="dark"] .rep-table tbody tr:hover td { background: rgba(79,153,230,.10); }
[data-theme="dark"] .rep-table td.is-warn { color: #e0b45f; }

/* ===== Right-to-left (ADR-0087) =====
   Most direction handling above uses logical properties (margin-inline-*,
   inset-inline-*, text-align:start/end ...), which render identically in LTR
   and mirror automatically under <html dir="rtl">. This section covers what
   logical properties cannot express: transforms, gradients angled along the
   x-axis, icon mirroring, LTR islands (emails, codes), and Arabic typography.
   Everything here is scoped to [dir="rtl"] / [lang="ar|ms|zh|es"], so it
   never affects English. */

/* Directional icons (chevrons, arrows) marked up with class "rtl-flip". */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* Vault tree: a collapsed branch's caret points toward the inline end
   (left in RTL). Loading state keeps its un-rotated spinner. */
[dir="rtl"] .tree-toggle.is-collapsed { transform: rotate(90deg); }
[dir="rtl"] .tree-toggle.is-loading { transform: none; }

/* Collapsible form sections: the right-pointing chevron points left when
   closed, and down (unflipped, rotated) when open. */
[dir="rtl"] .form-more > summary .chev { transform: scaleX(-1); }
[dir="rtl"] .form-more[open] > summary .chev { transform: rotate(90deg); }

/* Progress / usage bars fill from the inline start, so their gradients run
   the other way. Specificity mirrors the LTR rules it overrides. */
[dir="rtl"] .side-quota-fill,
[dir="rtl"] .store-fill { background: linear-gradient(270deg, var(--accent), #5ea7e0); }
[dir="rtl"] .side-quota.is-warn .side-quota-fill,
[dir="rtl"] .store-usage.is-warn .store-fill { background: linear-gradient(270deg, #f59e0b, #fbbf24); }
[dir="rtl"] .side-quota.is-danger .side-quota-fill,
[dir="rtl"] .store-usage.is-danger .store-fill { background: linear-gradient(270deg, #f87171, #fca5a5); }
[dir="rtl"] .ppl-bar { background: linear-gradient(270deg, #0c64ae, #5ea7e0); }

/* Marketing hero: the scrim is darkest behind the copy, which sits on the
   right in RTL. */
[dir="rtl"] .hero-v2-scrim { background:
  linear-gradient(270deg, rgba(11,32,54,.86) 0%, rgba(11,32,54,.66) 42%, rgba(11,32,54,.30) 78%, rgba(11,32,54,.12) 100%),
  linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,0) 26%, rgba(11,32,54,0) 68%, rgba(11,32,54,.45) 100%); }

/* LTR islands: emails, passwords, phone numbers, URLs and code stay
   left-to-right (so "@", "." and digits don't reorder) but hug the RTL
   inline end like the surrounding fields. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .sl-url input,
[dir="rtl"] .user-menu-mail,
[dir="rtl"] .user-pill-sub,
[dir="rtl"] .team-mail { direction: ltr; text-align: end; }
[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }

/* Arabic typography — Noto Sans Arabic is loaded in <head> when Lang is 'ar'. */
html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] button { font-family: "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif; }
html[lang="ar"] .sl-url input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Arabic is a joined script: any letter-spacing breaks the joins, and it has
   no letter case. Neutralise the selectors that set either. */
html[lang="ar"] .side-nav-label,
html[lang="ar"] .nav-logo,
html[lang="ar"] .hero h1,
html[lang="ar"] .section h2,
html[lang="ar"] .card .meta,
html[lang="ar"] .plan-tag,
html[lang="ar"] .table th,
html[lang="ar"] .page-head h1,
html[lang="ar"] .stat-n,
html[lang="ar"] .exp-av,
html[lang="ar"] .side-quota-label,
html[lang="ar"] .store-history-h,
html[lang="ar"] .rem-paused-lbl,
html[lang="ar"] .rem-cat,
html[lang="ar"] .hero-v2-eyebrow,
html[lang="ar"] .hero-v2-title,
html[lang="ar"] .eyebrow-v2,
html[lang="ar"] .title-v2,
html[lang="ar"] .strip-v2-label,
html[lang="ar"] .quote-big,
html[lang="ar"] .stat-v2-n,
html[lang="ar"] .cta-v2-title,
html[lang="ar"] .vsr-group,
html[lang="ar"] .ssr-group,
html[lang="ar"] .df-dowc,
html[lang="ar"] .rem-cal-title,
html[lang="ar"] .rem-cal-dow span,
html[lang="ar"] .rep-group-h,
html[lang="ar"] .rep-result-head h2,
html[lang="ar"] .rep-table th { letter-spacing: normal; text-transform: none; }

/* Malay: long compound words can overflow narrow nav items, tabs, menus and
   buttons. break-word only breaks a word that would otherwise overflow and
   does not change min-content sizing, so layouts stay put. */
html[lang="ms"] .set-tab,
html[lang="ms"] .side-item,
html[lang="ms"] .user-menu a,
html[lang="ms"] .user-menu .menu-btn,
html[lang="ms"] .kebab-menu a,
html[lang="ms"] .kebab-menu button,
html[lang="ms"] .ctx-item,
html[lang="ms"] .btn,
html[lang="ms"] .cal-view-btn,
html[lang="ms"] .rem-status { overflow-wrap: break-word; }

/* Simplified Chinese: system CJK faces (no web font — a CJK web font is
   megabytes). Letter-spacing and uppercase transforms mean nothing for Han
   characters and only loosen the text, so neutralise them as for Arabic. */
html[lang="zh"] body,
html[lang="zh"] input,
html[lang="zh"] select,
html[lang="zh"] textarea,
html[lang="zh"] button { font-family: "Segoe UI", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif; }
html[lang="zh"] .sl-url input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
html[lang="zh"] .side-nav-label,
html[lang="zh"] .nav-logo,
html[lang="zh"] .hero h1,
html[lang="zh"] .section h2,
html[lang="zh"] .card .meta,
html[lang="zh"] .plan-tag,
html[lang="zh"] .table th,
html[lang="zh"] .page-head h1,
html[lang="zh"] .stat-n,
html[lang="zh"] .exp-av,
html[lang="zh"] .side-quota-label,
html[lang="zh"] .store-history-h,
html[lang="zh"] .rem-paused-lbl,
html[lang="zh"] .rem-cat,
html[lang="zh"] .hero-v2-eyebrow,
html[lang="zh"] .hero-v2-title,
html[lang="zh"] .eyebrow-v2,
html[lang="zh"] .title-v2,
html[lang="zh"] .strip-v2-label,
html[lang="zh"] .quote-big,
html[lang="zh"] .stat-v2-n,
html[lang="zh"] .cta-v2-title,
html[lang="zh"] .vsr-group,
html[lang="zh"] .ssr-group,
html[lang="zh"] .df-dowc,
html[lang="zh"] .rem-cal-title,
html[lang="zh"] .rem-cal-dow span,
html[lang="zh"] .rep-group-h,
html[lang="zh"] .rep-result-head h2,
html[lang="zh"] .rep-table th { letter-spacing: normal; text-transform: none; }

/* Spanish runs ~25% longer than English: same overflow guard as Malay. */
html[lang="es"] .set-tab,
html[lang="es"] .side-item,
html[lang="es"] .user-menu a,
html[lang="es"] .user-menu .menu-btn,
html[lang="es"] .kebab-menu a,
html[lang="es"] .kebab-menu button,
html[lang="es"] .ctx-item,
html[lang="es"] .btn,
html[lang="es"] .cal-view-btn,
html[lang="es"] .rem-status { overflow-wrap: break-word; }

/* Inline Word / Excel preview on the document page (ADR-0091): the modal's
   renderers drawn inside the preview card, scrolling within a fixed height. */
.doc-preview .doc-inline-preview { max-height: 620px; overflow: auto; border-radius: 6px; background: #f2f5fa; }
.doc-preview .doc-inline-preview .pv-doc { margin: 12px auto; padding: 28px 32px; box-shadow: none; border: 1px solid var(--line); }
.doc-preview .doc-inline-preview .pv-sheets { padding: 8px 10px; }
.doc-preview .doc-inline-preview .pv-loading, .doc-preview .doc-inline-preview .pv-fallback { min-height: 200px; }