/* =============================================================================
   DARTS — App stylesheet (built on tokens.css). Design intent:
   - Government-grade clarity, not startup gloss
   - Deep navy + gold accents, only used where they earn attention
   - 4px spacing rhythm; 13–14px base type for dense admin tables
   - Motion is short, transform/opacity-first, reduced-motion friendly
   ============================================================================= */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.link { color: var(--brand-primary); font-weight: 500; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-xs); }
.num   { text-align: right; font-variant-numeric: tabular-nums; }
.mono  { font-family: var(--font-mono); font-size: 13px; }
.req   { color: var(--danger); }
code, kbd, pre { font-family: var(--font-mono); font-size: 12px; }

/* ── App shell ─────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.main  { display: flex; flex-direction: column; min-width: 0; }

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(180deg, var(--brand-primary-700) 0%, var(--brand-primary) 100%);
    color: var(--text-inverse);
    padding: var(--sp-5) var(--sp-3) var(--sp-3);
    display: flex; flex-direction: column; gap: var(--sp-4);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); }
.brand-mark {
    width: 40px; height: 40px; border-radius: var(--radius);
    background: rgba(255,255,255,.08);
    display: grid; place-items: center; color: var(--brand-accent);
}
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: .3px; }
.brand-sub  { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 2px; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-3); }
.nav-section {
    margin: var(--sp-4) var(--sp-3) var(--sp-2);
    font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.nav-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px 14px;
    border-radius: var(--radius);
    color: rgba(255,255,255,.85);
    transition: background var(--motion-ui) var(--ease-standard), color var(--motion-ui);
    text-decoration: none;
}
.nav-item:hover {
    background: rgba(255,255,255,.06);
    color: var(--text-inverse);
    text-decoration: none;
}
.nav-item.is-active {
    background: rgba(201,162,39,.18);
    color: var(--brand-accent);
    box-shadow: inset 2px 0 0 var(--brand-accent);
}
.nav-ico { width: 20px; text-align: center; opacity: .9; }

.sidebar-footer { margin-top: auto; padding: var(--sp-3); }
.user-card {
    display: grid; grid-template-columns: 36px 1fr auto; gap: var(--sp-3); align-items: center;
    background: rgba(255,255,255,.06); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
}
.user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--brand-accent); color: #0a2540;
    display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.user-name { font-weight: 600; font-size: 13px; }
.user-role { font-size: 11px; color: rgba(255,255,255,.6); }
.user-out { color: rgba(255,255,255,.7); padding: 4px 8px; border-radius: 6px; }
.user-out:hover { background: rgba(255,255,255,.1); color: var(--text-inverse); }

/* ── Topbar ────────────────────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    display: flex; align-items: center; gap: var(--sp-4);
    padding: 0 var(--sp-6);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
}
.menu-toggle {
    display: none;
    background: none; border: none;
    font-size: 22px; color: var(--text-secondary); cursor: pointer;
}
.topsearch {
    flex: 1; max-width: 640px;
    display: flex; align-items: center; background: var(--bg-sunken);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 4px 4px 4px var(--sp-4);
    transition: border-color var(--motion-ui), background var(--motion-ui);
}
.topsearch:focus-within { border-color: var(--brand-primary); background: #fff; box-shadow: 0 0 0 4px var(--brand-primary-50); }
.topsearch input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; padding: 8px 4px; color: var(--text-primary); }
.topsearch button { background: var(--brand-primary); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px; }

.topright { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.env-pill, .time-pill {
    font-size: 11px; padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken); color: var(--text-muted);
    border: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: .8px; font-weight: 600;
}
.time-pill { letter-spacing: 0; text-transform: none; }

/* ── Content + page ────────────────────────────────────────────────────────── */
.content { flex: 1; padding: var(--sp-6); max-width: var(--content-max); width: 100%; margin: 0 auto; }
.page { display: flex; flex-direction: column; gap: var(--sp-5); }

.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
}
.page-head h1 { font-size: var(--fs-2xl); margin: 0; font-weight: 700; letter-spacing: -.4px; }
.page-head p  { margin: 4px 0 0; }
.page-head-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 9px 16px; font-size: 13px; font-weight: 600; line-height: 1;
    border-radius: var(--radius);
    cursor: pointer; user-select: none;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform var(--motion-fast) var(--ease-standard),
                background var(--motion-ui), border-color var(--motion-ui), box-shadow var(--motion-ui);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand-primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--brand-primary-600); box-shadow: var(--shadow); }
.btn-ghost   { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-sunken); border-color: var(--border-strong); }
.btn-mini    { padding: 4px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-block   { width: 100%; }
.btn-danger  { background: var(--danger); color: #fff; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
}
.card-flush { padding: 0; }
.card-flush > .card-head { padding: var(--sp-4) var(--sp-5); }
.card-flush > .data-table th:first-child,
.card-flush > .data-table td:first-child { padding-left: var(--sp-5); }
.card-flush > .data-table th:last-child,
.card-flush > .data-table td:last-child  { padding-right: var(--sp-5); }
.card-narrow { max-width: 480px; margin: 0 auto; }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-4); gap: var(--sp-3);
}
.card-head h2 { font-size: var(--fs-md); margin: 0; font-weight: 700; }
.card-foot { display: flex; justify-content: space-between; padding-top: var(--sp-3); }

/* ── Quick-status chip strip & grid ───────────────────────────────────────── */
.quick-tags {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-700) 100%);
    color: var(--text-inverse);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    box-shadow: var(--shadow);
}
.quick-tags-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.quick-tags-title { font-weight: 700; font-size: var(--fs-md); }
.quick-tags-head .muted { color: rgba(255,255,255,.7); }

.quick-tags-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-3);
}
.quick-chip {
    display: flex; align-items: center; gap: var(--sp-3);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--text-inverse);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    transition: background var(--motion-ui), transform var(--motion-fast), border-color var(--motion-ui);
    text-decoration: none;
}
.quick-chip:hover { background: rgba(201,162,39,.22); border-color: var(--brand-accent); transform: translateY(-2px); text-decoration: none; }
.chip-ico { font-size: 20px; }
.chip-label { font-weight: 600; font-size: 13px; }

.quick-tags-strip {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
}
.chip {
    display: inline-flex; align-items: center; padding: 6px 12px;
    background: var(--bg-sunken); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600; text-decoration: none;
    transition: background var(--motion-ui), color var(--motion-ui), border-color var(--motion-ui);
}
.chip:hover { background: var(--brand-primary-50); color: var(--brand-primary); border-color: var(--brand-primary-50); text-decoration: none; }
.chip.is-active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.chip-clear { color: var(--danger); border-color: rgba(239,68,68,.3); }
.chip-mini  { padding: 3px 8px; font-size: 11px; }

/* ── KPI grid ──────────────────────────────────────────────────────────────── */
.kpi-grid {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kpi-grid-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi {
    display: flex; align-items: center; gap: var(--sp-4);
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
    position: relative; overflow: hidden;
    transition: transform var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-icon {
    width: 44px; height: 44px; border-radius: var(--radius);
    display: grid; place-items: center; font-size: 22px;
    background: var(--bg-sunken); color: var(--text-secondary);
}
.kpi-num { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.kpi-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; font-weight: 600; }
.kpi-foot  { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.kpi-blue   .kpi-icon { background: rgba(59,130,246,.12);  color: #2563eb; }
.kpi-amber  .kpi-icon { background: rgba(245,158,11,.12);  color: #d97706; }
.kpi-green  .kpi-icon { background: rgba(16,185,129,.12);  color: #059669; }
.kpi-red    .kpi-icon { background: rgba(239,68,68,.12);   color: #dc2626; }
.kpi-violet .kpi-icon { background: rgba(139,92,246,.12);  color: #7c3aed; }
.kpi-gray   .kpi-icon { background: var(--bg-sunken);      color: var(--text-secondary); }

/* ── Status pills ─────────────────────────────────────────────────────────── */
.status-pill, .priority-pill, .privacy-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    background: color-mix(in oklab, var(--pill, #94a3b8) 16%, transparent);
    color: color-mix(in oklab, var(--pill, #94a3b8) 60%, #0f172a);
    border: 1px solid color-mix(in oklab, var(--pill, #94a3b8) 30%, transparent);
}
.privacy-pill { background: rgba(239,68,68,.08); color: #b91c1c; border-color: rgba(239,68,68,.20); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
    text-align: left; padding: 10px 14px;
    background: var(--bg-sunken); color: var(--text-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--motion-fast); }
.data-table tbody tr:hover { background: var(--bg-sunken); }
.row-overdue { background: rgba(239,68,68,.04); }
.row-overdue:hover { background: rgba(239,68,68,.08) !important; }

.empty-state { text-align: center; padding: var(--sp-9) var(--sp-4); }
.empty-state-inner { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-3); max-width: 360px; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.field input[type="text"], .field input[type="search"], .field input[type="email"],
.field input[type="password"], .field input[type="number"], .field input[type="date"],
.field input[type="file"], .field select, .field textarea, input.filter-search,
.filter-bar select, .filter-bar input {
    width: 100%;
    padding: 9px 12px;
    font: inherit; color: inherit;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--motion-ui), box-shadow var(--motion-ui);
}
.field input:focus, .field select:focus, .field textarea:focus,
.filter-bar input:focus, .filter-bar select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-50);
}
.field textarea { resize: vertical; min-height: 80px; font-family: var(--font-sans); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.form-grid-tight { gap: var(--sp-2); }
.form-grid .span-2 { grid-column: span 2; }
.form-row { display: flex; gap: var(--sp-2); justify-content: flex-end; }

.filter-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; padding: var(--sp-3); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.filter-search { flex: 1; min-width: 220px; }

/* ── Banners + flashes ─────────────────────────────────────────────────────── */
.banner {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}
.banner-success { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); color: #065f46; }

.flashes { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 var(--sp-6); padding-top: var(--sp-4); }
.flash {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
    animation: slideIn var(--motion-medium) var(--ease-standard);
}
.flash-success { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); color: #065f46; }
.flash-danger  { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.25);  color: #991b1b; }
.flash-info    { background: rgba(6,182,212,.08);  border-color: rgba(6,182,212,.25);  color: #155e75; }
.flash-warning { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); color: #92400e; }
.flash-close { margin-left: auto; background: none; border: none; font-size: 20px; cursor: pointer; color: inherit; opacity: .6; }

@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Doc detail page ──────────────────────────────────────────────────────── */
.doc-head { align-items: flex-start; }
.doc-tag-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.doc-tracking { font-size: 16px; color: var(--brand-primary); font-weight: 700; }
.doc-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); }
.doc-main, .doc-side { display: flex; flex-direction: column; gap: var(--sp-5); }

.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px var(--sp-4); margin-bottom: var(--sp-3); }
.kv dt { color: var(--text-muted); font-size: 12px; }
.kv dd { margin: 0; }
.kv-tight { grid-template-columns: 90px 1fr; gap: 4px var(--sp-3); }
.kv-h3 { font-size: var(--fs-md); margin: var(--sp-3) 0 var(--sp-2); }
.prose { white-space: pre-wrap; line-height: 1.6; color: var(--text-secondary); font-size: 13px; }

/* Action popovers */
.action-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.action-pop { position: relative; }
.action-pop > summary { list-style: none; cursor: pointer; }
.action-pop > summary::-webkit-details-marker { display: none; }
.action-pop[open] .popover-form { display: flex; }
.popover-form {
    display: none; flex-direction: column; gap: var(--sp-3);
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
    width: 320px; padding: var(--sp-4);
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    animation: slideIn var(--motion-medium) var(--ease-standard);
}
.action-pop-right .popover-form { left: auto; right: 0; }

/* Attachments */
.attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.attach-list li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--radius-sm); }
.attach-list li:hover { background: var(--bg-sunken); }
.attach-ico { font-size: 22px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-row { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-3); position: relative; }
.timeline-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg-elevated); margin-top: 2px; z-index: 1; }
.timeline-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.timeline-body-text { color: var(--text-secondary); font-size: 13px; margin-top: 2px; white-space: pre-wrap; }
.timeline-foot { margin-top: 4px; }

/* Activity feed */
.activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.activity-row { display: grid; grid-template-columns: 12px 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.activity-row:last-child { border-bottom: none; }
.activity-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.activity-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.activity-action { color: var(--text-secondary); font-size: 13px; }

/* Status list */
.status-list { display: flex; flex-direction: column; }
.status-row {
    display: grid; grid-template-columns: 14px 1fr auto; gap: var(--sp-3); align-items: center;
    padding: 8px 12px; border-radius: var(--radius-sm);
    color: inherit; text-decoration: none;
    transition: background var(--motion-fast);
}
.status-row:hover { background: var(--bg-sunken); text-decoration: none; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.status-name { font-size: 13px; font-weight: 500; }
.status-count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Trend bars */
.trend { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 140px; }
.trend-bar { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 4px; height: 100%; }
.trend-bar .bar {
    width: 100%; max-width: 28px;
    background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-700) 100%);
    border-radius: 4px 4px 0 0;
    transition: height var(--motion-medium) var(--ease-emphasized);
}
.bar-label { font-size: 10px; color: var(--text-muted); }

/* Metrics block */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--sp-3); }
.metric { background: var(--bg-sunken); border-radius: var(--radius); padding: var(--sp-3); text-align: center; }
.metric-num { font-size: var(--fs-xl); font-weight: 800; }
.metric-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }

/* Pagination */
.pagination { display: flex; gap: 4px; padding: var(--sp-3) var(--sp-5); justify-content: flex-end; align-items: center; flex-wrap: wrap; }

/* Two-column grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

/* Footer */
.footer {
    margin-top: auto;
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 12px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2);
}

/* ── AUTH (login) ─────────────────────────────────────────────────────────── */
.auth-stage { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); background: radial-gradient(ellipse at top, #0f4c81 0%, #061021 60%); }
.auth-flashes { width: min(960px, 100%); margin-bottom: var(--sp-4); }
.auth-grid {
    width: min(960px, 100%);
    display: grid; grid-template-columns: 1.2fr 1fr;
    background: rgba(15,34,62,.85); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.auth-side {
    padding: var(--sp-8) var(--sp-7);
    background: linear-gradient(160deg, rgba(15,76,129,.6) 0%, rgba(10,20,46,.8) 100%);
    color: var(--text-inverse);
    display: flex; flex-direction: column; gap: var(--sp-5);
}
.auth-brand { display: flex; align-items: flex-start; gap: var(--sp-4); }
.auth-brand h1 { font-size: var(--fs-xl); margin: 0; font-weight: 700; }
.auth-tag { color: rgba(255,255,255,.7); margin-top: 4px; }
.auth-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-bullets li { display: flex; align-items: center; gap: var(--sp-3); color: rgba(255,255,255,.85); }
.bullet-mark { width: 28px; height: 28px; border-radius: 50%; background: rgba(201,162,39,.18); color: var(--brand-accent); display: grid; place-items: center; font-weight: 700; }
.auth-foot { margin-top: auto; color: rgba(255,255,255,.5); font-size: 12px; }

.auth-card { padding: var(--sp-8) var(--sp-7); background: var(--bg-elevated); color: var(--text-primary); display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-card h2 { margin: 0; font-size: var(--fs-2xl); }
.auth-card .field input { background: var(--neutral-50); }
.auth-card .field input:focus { background: #fff; }
.auth-help { margin-top: var(--sp-4); font-size: 13px; color: var(--text-muted); }
.auth-help summary { cursor: pointer; color: var(--brand-primary); }

/* ── Error pages ──────────────────────────────────────────────────────────── */
.error-stage { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); }
.error-card { text-align: center; max-width: 480px; padding: var(--sp-8); background: var(--bg-elevated); border-radius: var(--radius-xl); box-shadow: var(--shadow); border: 1px solid var(--border); }
.error-code { font-family: var(--font-mono); font-size: 64px; font-weight: 800; color: var(--brand-accent); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .doc-grid { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: 1; }
}
@media (max-width: 820px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; left: -100%; top: 0; bottom: 0;
        width: 80%; max-width: 320px; z-index: 50;
        transition: left var(--motion-medium) var(--ease-standard);
    }
    .sidebar.open { left: 0; }
    .menu-toggle { display: inline-flex; }
    .topright .env-pill, .topright .time-pill { display: none; }
    .auth-grid { grid-template-columns: 1fr; }
    .auth-side { display: none; }
    .content { padding: var(--sp-4); }
}

/* ============================================================================
   Pre-login Landing page (.lp-*) — full-bleed marketing/explainer
   Brand-aligned navy + gold only. No purple-blob AI slop.

   Cinematic stage:
     base navy → top center light beam → diagonal corner glints
     → faint dot-grid texture → floating particles → bottom edge light line.
     All CSS, no images — scales perfectly, animatable, mobile-safe,
     prefers-reduced-motion respected.
   ============================================================================ */
.auth-body {
    background:
        /* Bottom edge light line */
        radial-gradient(ellipse 80% 8px at 50% 100%, rgba(56,189,248,.45), transparent 70%),
        /* Top center beam */
        radial-gradient(ellipse 60% 50% at 50% -10%, rgba(59,130,246,.30), transparent 70%),
        /* Left corner soft glow */
        radial-gradient(circle 600px at 0% 0%, rgba(15,76,129,.35), transparent 60%),
        /* Right corner soft glow */
        radial-gradient(circle 600px at 100% 30%, rgba(15,76,129,.30), transparent 60%),
        /* Base */
        linear-gradient(180deg, #061425 0%, #061021 60%, #030914 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}
.auth-body::before {
    /* Diagonal glint lines (top-left + top-right + bottom-right) */
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        /* Top-left diagonal slash */
        linear-gradient(135deg, transparent 0%, transparent 18%, rgba(56,189,248,.25) 19%, rgba(56,189,248,.04) 19.6%, transparent 20%),
        /* Top-right slash */
        linear-gradient(225deg, transparent 0%, transparent 8%, rgba(56,189,248,.18) 8.6%, transparent 9.2%),
        /* Bottom-right slash */
        linear-gradient(135deg, transparent 0%, transparent 78%, rgba(56,189,248,.20) 78.7%, rgba(56,189,248,.04) 79.4%, transparent 80%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
}
.auth-body::after {
    /* Subtle dot-grid texture */
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    opacity: .35;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}
/* Make sure all .lp content sits above the decoration layers */
.lp { position: relative; z-index: 1; }

/* Particle field — twinkling sparkles + slow drift */
.lp-particles {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden;
}
.lp-particle {
    position: absolute;
    width: 2px; height: 2px;
    background: #93c5fd;
    border-radius: 50%;
    box-shadow: 0 0 6px 1px rgba(147,197,253,.55);
    opacity: 0;
    animation: twinkle var(--lp-dur, 6s) ease-in-out infinite;
    animation-delay: var(--lp-delay, 0s);
}
.lp-particle.large {
    width: 3px; height: 3px;
    box-shadow: 0 0 12px 2px rgba(186,230,253,.7);
}
.lp-particle.drift {
    animation: twinkle 6s ease-in-out infinite, drift 18s linear infinite;
}
@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(.6); }
    50%      { opacity: 1; transform: scale(1.2); }
}
@keyframes drift {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(20px, -30px); }
    100% { transform: translate(0, 0); }
}

/* One-shot entrance animations for the hero (stagger via inline --d delay) */
.lp-reveal { opacity: 0; transform: translateY(14px); }
.lp-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease-emphasized) var(--d, 0s),
                transform .7s var(--ease-emphasized) var(--d, 0s);
}

/* Number counter — pop on enter */
@keyframes lpNumPop {
    0%   { transform: scale(.7); opacity: 0; }
    60%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}
.lp-numbers.is-in .lp-num-val {
    animation: lpNumPop .65s var(--ease-emphasized) both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

/* Hero sign-in card subtle float */
@keyframes lpSigninFloat {
    0%, 100% { transform: translateY(0); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
    50%      { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0,0,0,.55); }
}

/* Disable particles + heavy motion when user prefers reduced motion or on small screens */
@media (prefers-reduced-motion: reduce) {
    .lp-particles, .auth-body::before, .auth-body::after { display: none; }
    .lp-reveal { opacity: 1; transform: none; transition: none; }
    .lp-numbers.is-in .lp-num-val { animation: none; }
}
@media (max-width: 600px) {
    .lp-particles { display: none; }
}

.auth-body .flashes.auth-flashes {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 9999; max-width: 720px; width: 92%;
}

.lp { color: var(--text-inverse); max-width: 100%; margin: 0 auto; }

/* Sticky top nav */
.lp-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-3) var(--sp-6);
    background: rgba(6, 16, 33, .75);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lp-brand {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    color: var(--text-inverse); text-decoration: none; font-size: 14px;
}
.lp-brand strong { color: var(--brand-accent); }
.lp-brand:hover { text-decoration: none; }
.lp-nav-links { display: flex; gap: var(--sp-5); }
.lp-nav-links a {
    color: rgba(255,255,255,.75); text-decoration: none; font-size: 13px;
    padding: 6px 0;
    transition: color var(--motion-ui);
}
.lp-nav-links a:hover { color: var(--brand-accent); text-decoration: none; }
.lp-nav-cta { padding: 8px 16px; font-size: 12px; }

/* HERO */
.lp-hero {
    display: grid; grid-template-columns: 1.4fr 0.9fr; gap: var(--sp-9);
    max-width: 1280px; margin: 0 auto;
    padding: var(--sp-10) var(--sp-6) var(--sp-9);
    align-items: center;
}
.lp-eyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: var(--sp-3);
}
.lp-eyebrow-dark { color: var(--brand-primary); }

/* ── BRANDMARK — primary identifier above the headline ───────────────────
   "DARTS" reads first (huge gold display), then the full name as a
   readable subhead. Per Open-Design craft/typography:
     - display ≥48px → -0.02 to -0.03em negative tracking (we use -.04 for
       extra-large display, intentional)
     - subhead → +0.01em (slight positive for the descriptive line)
   Text-shadow has 3 intentional layers: depth + glow + ambient. */
.lp-brandmark {
    display: flex; flex-direction: column;
    margin-bottom: var(--sp-5);
    line-height: 1;
}
.lp-brandmark-name {
    font-size: clamp(56px, 8.5vw, 110px);
    font-weight: 900;
    letter-spacing: -.04em;
    color: var(--brand-accent);
    line-height: .95;
    text-shadow:
        /* (1) inset-style top depth — type sits in the page */
        0 1px 0  rgba(0,0,0,.45),
        /* (2) close glow — gives the gold a halo on dark stage */
        0 4px 18px rgba(201,162,39,.35),
        /* (3) far ambient — anchors the type without lifting it */
        0 0 64px rgba(201,162,39,.18);
    /* Avoid clipping on the descender + tight tracking */
    padding-bottom: 4px;
}
.lp-brandmark-full {
    font-size: clamp(14px, 1.6vw, 19px);
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255,255,255,.88);
    margin-top: 6px;
    text-transform: none;
}
.lp-brandmark-amp {
    color: var(--brand-accent);
    font-style: italic;
    font-weight: 700;
    padding: 0 2px;
}

@media (max-width: 600px) {
    .lp-brandmark-name { font-size: clamp(40px, 14vw, 64px); }
}
.lp-hero h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -1px;
    margin: 0 0 var(--sp-5);
    font-weight: 800;
}
.lp-accent { color: var(--brand-accent); }
.lp-lede { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 var(--sp-3); max-width: 60ch; }
.lp-sub  { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0 0 var(--sp-5); max-width: 60ch; font-style: italic; }
.lp-hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Sign-in card on the right of hero */
.lp-signin {
    background: rgba(15, 76, 129, .35);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-xl);
    padding: var(--sp-6);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.lp-signin h2 { margin: 0 0 var(--sp-1); color: var(--text-inverse); font-size: var(--fs-xl); }
.lp-signin .muted { color: rgba(255,255,255,.55); margin: 0 0 var(--sp-4); font-size: 13px; }
.lp-signin .field-label { color: rgba(255,255,255,.7); }
.lp-signin .field input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: var(--text-inverse); }
.lp-signin .field input:focus { background: rgba(255,255,255,.10); border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(201,162,39,.2); }
.lp-signin .auth-help { margin-top: var(--sp-4); font-size: 13px; color: rgba(255,255,255,.55); }
.lp-signin .auth-help summary { cursor: pointer; color: var(--brand-accent); }
.lp-signin .auth-help p { margin: 6px 0 0; }
.lp-signin .auth-help strong { color: rgba(255,255,255,.85); }

/* Live numbers strip */
.lp-numbers {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.06);
    margin: 0 auto var(--sp-9);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    max-width: 1280px;
}
.lp-num {
    background: #0c1c34;
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
}
.lp-num-val {
    font-size: 26px; font-weight: 800; letter-spacing: -.5px;
    color: var(--brand-accent);
    font-variant-numeric: tabular-nums;
}
.lp-num-lbl {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,.55); font-weight: 600; margin-top: 6px;
}

/* Sections */
.lp-section { padding: var(--sp-10) var(--sp-6); position: relative; }

/* ── LIGHT SECTION FIX (root cause: .auth-body globally redefined --text-*
   to white for the dark hero. Inside light sections we MUST scope those
   variables back to dark, otherwise headings render white on white.) ── */
.lp-section-light {
    /* Re-scope the cascade-leak from .auth-body */
    --text-primary:   #0a1f3a;
    --text-secondary: #334d6e;
    --text-muted:     #6b7c93;
    --border:         rgba(15, 76, 129, .12);
    --border-strong:  rgba(15, 76, 129, .22);
    --bg-elevated:    #ffffff;
    --bg-sunken:      #f1f5f9;
    color: var(--text-primary);

    /* TOP-TIER SHADING — three soft layers, no flat white, no slop gradient */
    background:
        /* faint top-center spotlight */
        radial-gradient(ellipse 60% 30% at 50% 0%, rgba(15,76,129,.06), transparent 70%),
        /* corner micro-warmth */
        radial-gradient(circle 540px at 100% 100%, rgba(201,162,39,.05), transparent 60%),
        /* base parchment-paper */
        linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
    /* Subtle inset rim — separates section from the dark hero above */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(15,76,129,.06);
}
.lp-section-light::before {
    /* Crisp top edge — looks like a paper sheet sitting on the dark stage */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15,76,129,.20), transparent);
    pointer-events: none;
}

.lp-section-light .lp-eyebrow { color: var(--brand-primary); }
.lp-section-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

/* TOP-TIER 3D TEXT — three-layer text shadow.
   1px white highlight on top + 1px navy depth + 4px diffused for body weight.
   Reads as engraved/embossed, never as cartoon shadow. */
.lp-section h2 {
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: -.5px;
    margin: 0 0 var(--sp-4);
    font-weight: 800;
}
.lp-section-light h2 {
    color: var(--brand-primary-700);
    text-shadow:
        0 1px 0  rgba(255,255,255,.95),
        0 2px 0  rgba(15,76,129,.10),
        0 4px 12px rgba(15,76,129,.10);
}
.lp-section h3 { color: var(--text-primary); }
.lp-section-light h3 { color: var(--brand-primary-700); }

.lp-section-lede { font-size: 16px; line-height: 1.6; max-width: 60ch; margin: 0 0 var(--sp-6); color: var(--text-secondary); }
.lp-section:not(.lp-section-light) .lp-section-lede { color: rgba(255,255,255,.7); }
.lp-two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); }
.lp-section p, .lp-section ul, .lp-section ol { color: var(--text-secondary); }
.lp-section-light p, .lp-section-light ul, .lp-section-light ol { color: #2d4159; }
.lp-section-light strong { color: var(--brand-primary-700); }
.lp-section-light code { background: #e6eef7; color: var(--brand-primary-700); padding: 2px 6px; border-radius: 4px; }

/* Capability-bullet list — 3D pill cards instead of border-left slop */
.lp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.lp-list li {
    padding: var(--sp-3) var(--sp-4);
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, #ffffff, #fafcff),
        #fff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: var(--radius);
    font-size: 14px;
    color: #2d4159;
    box-shadow:
        inset 0 1px 0  rgba(255,255,255,1),
        inset 0 -1px 0 rgba(15,76,129,.05),
        0 2px 4px rgba(15,76,129,.05),
        0 6px 12px rgba(15,76,129,.05);
    transition: transform var(--motion-ui), box-shadow var(--motion-ui);
}
.lp-list li:hover {
    transform: translateX(2px);
    box-shadow:
        inset 0 1px 0  rgba(255,255,255,1),
        inset 0 -1px 0 rgba(15,76,129,.06),
        0 4px 8px rgba(15,76,129,.08),
        0 10px 20px rgba(15,76,129,.10);
}
.lp-list code { background: #e6eef7; padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--brand-primary-700); font-weight: 700; }
.lp-list strong { color: var(--brand-primary-700); font-weight: 800; }

/* Workflow — DUAL-TRACK: legislative + executive shown as labelled twins */
.lp-track-block {
    margin-top: var(--sp-6);
}
.lp-track-head {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: var(--sp-3);
}
.lp-track-badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 800;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(201,162,39,.14);
    color: var(--brand-accent);
    border: 1px solid rgba(201,162,39,.30);
}
.lp-track-badge-leg  { background: rgba(124,58,237,.14); color: #c4b5fd; border-color: rgba(167,139,250,.40); }
.lp-track-badge-exec { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(52,211,153,.38); }
.lp-track-head h3 {
    font-size: 15px; line-height: 1.4;
    margin: 0; color: rgba(255,255,255,.92); font-weight: 700;
    letter-spacing: -0.2px;
}
.lp-track-head p { margin: 0; color: rgba(255,255,255,.55) !important; max-width: 80ch; }

/* Workflow tracker (re-uses .tracker, dark variant) */
.tracker-demo {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    padding: var(--sp-6) var(--sp-5);
    margin-top: var(--sp-3);
}
.tracker-demo .tracker-rail { gap: 4px; }
.tracker-demo .tracker-step::before { background: rgba(255,255,255,.10); }
.tracker-demo .tracker-label { color: rgba(255,255,255,.85); }
.tracker-demo .tracker-meta  { color: rgba(255,255,255,.55); }
.tracker-demo .tracker-step.is-done .tracker-label { color: #fff; }
.tracker-demo .tracker-dot { background: #0a1a2e; border-color: rgba(255,255,255,.20); color: rgba(255,255,255,.55); }
.lp-tracker-foot { color: rgba(255,255,255,.55); margin-top: var(--sp-3); text-align: center; }

/* ── Inside-a-document demo block (mirrors the post-login detail page) ── */
.lp-detail-demo {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
}
@media (max-width: 880px) {
    .lp-detail-demo { grid-template-columns: 1fr; }
}
.lp-detail-card {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, #ffffff, #fafcff),
        #fff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow:
        inset 0 1px 0  rgba(255,255,255,1),
        inset 0 -1px 0 rgba(15,76,129,.05),
        0 2px 4px rgba(15,76,129,.06),
        0 8px 18px rgba(15,76,129,.07);
}
.lp-detail-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px dashed rgba(15,76,129,.12);
    gap: var(--sp-3);
}
.lp-detail-card-head h3 {
    margin: 0; font-size: 16px; font-weight: 800;
    color: var(--brand-primary-700) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.lp-detail-card-head .muted { color: #6b7c93 !important; }
.lp-detail-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lp-detail-buttons .btn { cursor: not-allowed; opacity: 0.92; }
.lp-detail-buttons .btn:hover { transform: translateY(-1px); }
.lp-demo-foot { margin: var(--sp-3) 0 0 !important; color: #6b7c93 !important; }

/* Timeline rows — light theme, audit-log feel */
.lp-demo-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.lp-demo-row {
    display: grid; grid-template-columns: 12px 1fr; gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-3); border-radius: var(--radius);
    background: #fbfdff;
    border: 1px solid rgba(15,76,129,.08);
}
.lp-demo-dot {
    width: 12px; height: 12px; border-radius: 50%; margin-top: 5px;
    box-shadow: 0 0 0 3px rgba(255,255,255,1), 0 0 0 4px rgba(15,76,129,.10);
}
.lp-demo-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.lp-demo-row-head strong { color: var(--brand-primary-700); font-weight: 800; font-size: 14px; }
.lp-demo-row-body { color: #2d4159; font-size: 13px; line-height: 1.5; margin-top: 4px; }
.lp-demo-row-foot { margin-top: 4px; }

/* ── Module grid — TOP-TIER 3D CARDS ──────────────────────────────────
   Multi-layer shadow (close + medium + ambient) + 1px inner top highlight
   + bottom rim shadow → real 3D depth, not faked gradient. Anti-slop:
   no Tailwind indigo, no two-stop gradient, no decorative left border.
   Hover: lift 4px + cast a longer shadow. Active: depress 2px. */
.lp-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); }
.lp-module {
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,1), rgba(252,253,255,1)),
        #ffffff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow:
        inset 0 1px 0  rgba(255,255,255,1),
        inset 0 -1px 0 rgba(15,76,129,.05),
        0 1px 2px rgba(15,76,129,.06),
        0 4px 8px rgba(15,76,129,.06),
        0 12px 24px rgba(15,76,129,.07);
    transition:
        transform var(--motion-medium) var(--ease-emphasized),
        box-shadow var(--motion-medium) var(--ease-emphasized),
        border-color var(--motion-medium);
}
.lp-module:hover {
    transform: translateY(-4px);
    border-color: rgba(15,76,129,.22);
    box-shadow:
        inset 0 1px 0  rgba(255,255,255,1),
        inset 0 -1px 0 rgba(15,76,129,.06),
        0 2px 4px rgba(15,76,129,.08),
        0 10px 20px rgba(15,76,129,.10),
        0 24px 48px rgba(15,76,129,.12);
}
.lp-module:active { transform: translateY(-1px); }

/* Icon chip — gives the card an anchor + repeats the brand accent */
.lp-module-ico {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    font-size: 22px;
    background: linear-gradient(180deg, #fff7e0 0%, #fdecc1 100%);
    color: var(--brand-accent-600);
    border-radius: 12px;
    margin-bottom: var(--sp-3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -2px 0 rgba(201,162,39,.20),
        0 2px 4px rgba(201,162,39,.18);
}
.lp-module h3 {
    font-size: 16px; margin: 0 0 var(--sp-2); font-weight: 800;
    color: var(--brand-primary-700) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
    letter-spacing: -.2px;
}
.lp-module p { font-size: 13px; line-height: 1.55; color: #2d4159 !important; margin: 0; }
.lp-module em { color: var(--brand-primary); font-style: italic; }

/* Compliance grid */
.lp-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.lp-comp {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(201,162,39,.20);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.lp-comp-num {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    color: var(--brand-accent);
    background: rgba(201,162,39,.12);
    padding: 4px 10px; border-radius: 999px;
    margin-bottom: var(--sp-3);
}
.lp-comp h3 { font-size: 18px; margin: 0 0 var(--sp-2); color: #fff; }
.lp-comp p  { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0; }
.lp-comp code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }

/* Roles — small 3D cards (lighter than module cards) */
.lp-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.lp-role {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, #ffffff, #fafcff),
        #fff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: var(--radius);
    padding: var(--sp-4);
    box-shadow:
        inset 0 1px 0  rgba(255,255,255,1),
        0 1px 2px rgba(15,76,129,.05),
        0 4px 10px rgba(15,76,129,.06);
    transition: transform var(--motion-ui), box-shadow var(--motion-ui);
}
.lp-role:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0  rgba(255,255,255,1),
        0 4px 8px rgba(15,76,129,.08),
        0 12px 24px rgba(15,76,129,.10);
}
.lp-role h3 {
    font-size: 14px; margin: 0 0 4px;
    color: var(--brand-primary-700) !important;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.lp-role p { font-size: 13px; line-height: 1.5; color: #2d4159 !important; margin: 0; }

/* Developer band */
.lp-dev-section {
    background: linear-gradient(160deg, rgba(15,76,129,.18) 0%, rgba(6,16,33,.0) 100%);
}
.lp-dev { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-7); align-items: center; }
.lp-dev-photo {
    width: 200px; height: 200px; object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--brand-accent);
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.lp-dev h2 { color: #fff; margin: 0 0 var(--sp-3); }
.lp-dev p  { color: rgba(255,255,255,.78); line-height: 1.65; margin: 0 0 var(--sp-4); max-width: 60ch; }
.lp-dev strong { color: var(--brand-accent); }
.lp-dev-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Final CTA + footer */
.lp-btn-light { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.15); background: transparent; }
.lp-btn-light:hover { background: rgba(255,255,255,.06); color: #fff; }

.lp-final {
    text-align: center;
    padding: var(--sp-10) var(--sp-6);
    background: linear-gradient(180deg, rgba(15,76,129,.40) 0%, rgba(6,16,33,1) 100%);
}
.lp-final h2 { color: #fff; font-size: clamp(22px, 3vw, 32px); margin: 0 0 var(--sp-3); }
.lp-final p  { color: rgba(255,255,255,.7); margin: 0 0 var(--sp-5); }
.lp-final-cta { display: inline-flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

.lp-foot {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.55); font-size: 12px;
}
.lp-foot a { color: rgba(255,255,255,.7); }
.lp-foot a:hover { color: var(--brand-accent); }

/* Responsive */
@media (max-width: 960px) {
    .lp-hero { grid-template-columns: 1fr; gap: var(--sp-6); padding-top: var(--sp-7); }
    .lp-numbers { grid-template-columns: repeat(3, 1fr); }
    .lp-two-col { grid-template-columns: 1fr; }
    .lp-dev { grid-template-columns: 1fr; text-align: center; }
    .lp-dev-photo { margin: 0 auto; }
}
@media (max-width: 600px) {
    .lp-nav-links { display: none; }
    .lp-numbers { grid-template-columns: repeat(2, 1fr); }
    .lp-section { padding: var(--sp-7) var(--sp-4); }
}

/* ============================================================================
   Universal search results page
   ============================================================================ */
.search-tips {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.search-tip {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-sunken);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.search-group { margin-top: var(--sp-4); }
.search-group .card-head h2 { font-size: 15px; }

.office-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.office-chip {
    display: inline-flex; flex-direction: column; gap: 2px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    text-decoration: none; color: inherit;
    transition: background var(--motion-ui), border-color var(--motion-ui);
}
.office-chip:hover { background: var(--brand-primary-50); border-color: var(--brand-primary); text-decoration: none; }
.office-chip strong { color: var(--brand-primary); font-weight: 700; }

.amount-group .amt-h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
    margin: var(--sp-4) 0 var(--sp-2); color: var(--brand-accent-600); font-weight: 700;
}
.amount-group .amt-h3:first-of-type { margin-top: var(--sp-2); }

/* ============================================================================
   Today's pulse — dashboard "what's happening right now" card
   ============================================================================ */
.pulse-grid {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pulse-cell {
    background: var(--bg-sunken); border-radius: var(--radius);
    padding: var(--sp-3); text-align: left;
}
.pulse-cell .pulse-num { font-size: 22px; font-weight: 800; line-height: 1; }
.pulse-cell .pulse-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.pulse-cell .pulse-link { display: inline-block; margin-top: 6px; font-size: 11px; }

/* ============================================================================
   Shopee/Lazada-style document tracker (the stepper component)
   - Each step is a circle. Connecting lines fill in as steps complete.
   - States: done (filled brand color), current (glowing, larger), pending (gray).
   - Horizontal on desktop, vertical on mobile.
   ============================================================================ */
.tracker {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-5);
}
.tracker-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-5); flex-wrap: wrap; gap: var(--sp-3);
}
.tracker-head h2 { font-size: 16px; margin: 0; font-weight: 700; }
.tracker-progress-text { color: var(--text-muted); font-size: 12px; font-weight: 600; }

.tracker-rail {
    display: grid;
    grid-template-columns: repeat(var(--steps, 8), 1fr);
    align-items: start; gap: 0;
    position: relative;
    counter-reset: step;
}

.tracker-step {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    position: relative;
    counter-increment: step;
    padding: 0 4px;
}

/* Connecting line — drawn on the LEFT half of every step except the first */
.tracker-step:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -50%; right: 50%; top: 22px;
    height: 4px;
    background: var(--neutral-200);
    z-index: 0;
}
.tracker-step.is-done:not(:first-child)::before,
.tracker-step.is-current:not(:first-child)::before {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

/* Circle */
.tracker-dot {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 22px;
    background: #fff;
    border: 3px solid var(--neutral-300);
    color: var(--text-muted);
    position: relative; z-index: 1;
    transition: transform var(--motion-medium) var(--ease-emphasized),
                box-shadow var(--motion-medium), background var(--motion-medium);
}
.tracker-step.is-done .tracker-dot {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, .35);
}
.tracker-step.is-current .tracker-dot {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-600) 100%);
    border-color: var(--brand-accent-600);
    color: #1a1a1a;
    box-shadow: 0 0 0 6px rgba(201, 162, 39, .18),
                0 8px 20px rgba(201, 162, 39, .35);
    transform: scale(1.15);
    animation: trackerPulse 2.5s ease-in-out infinite;
}
@keyframes trackerPulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(201,162,39,.18), 0 8px 20px rgba(201,162,39,.35); }
    50%      { box-shadow: 0 0 0 12px rgba(201,162,39,.06), 0 8px 24px rgba(201,162,39,.45); }
}
.tracker-step.is-done .tracker-dot::after {
    content: '✓';
    position: absolute;
    bottom: -2px; right: -2px;
    width: 18px; height: 18px;
    background: #059669;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 10px;
    display: grid; place-items: center;
    font-weight: 800;
}

.tracker-label {
    margin-top: var(--sp-2);
    font-size: 12px; font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.2; min-height: 28px;
}
.tracker-step.is-done    .tracker-label { color: var(--text-primary); }
.tracker-step.is-current .tracker-label { color: var(--brand-accent-600); }

.tracker-meta {
    margin-top: 4px;
    font-size: 10px; line-height: 1.3;
    color: var(--text-muted);
    min-height: 28px;
}
.tracker-step.is-done .tracker-meta { color: var(--text-secondary); }

@media (max-width: 760px) {
    .tracker-rail { grid-template-columns: 1fr; gap: var(--sp-3); }
    .tracker-step { flex-direction: row; gap: var(--sp-3); align-items: flex-start; text-align: left; }
    .tracker-step:not(:first-child)::before {
        top: -20px; bottom: auto; left: 22px; right: auto;
        width: 4px; height: 28px;
    }
    .tracker-label, .tracker-meta { min-height: auto; }
    .tracker-dot { flex-shrink: 0; }
    .tracker-text { flex: 1; }
}

/* ============================================================================
   3D buttons (Shopee/Lazada CTA aesthetic)
   - Bright color, top highlight + bottom shadow, lifts on hover, depresses on press.
   - .btn-3d turns ANY .btn into the 3D variant. Pair with a color: -orange/-red/-cyan/-pink/-violet/-green.
   ============================================================================ */
.btn-3d {
    position: relative;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 800;
    padding: 11px 20px;
    color: #fff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -3px 0 rgba(0,0,0,.20),
        0 4px 0 rgba(0,0,0,.12),
        0 6px 12px rgba(0,0,0,.18);
    border: none;
    transition: transform var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast),
                filter var(--motion-fast);
}
.btn-3d:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -3px 0 rgba(0,0,0,.20),
        0 6px 0 rgba(0,0,0,.12),
        0 10px 18px rgba(0,0,0,.22);
}
.btn-3d:active {
    transform: translateY(2px);
    filter: brightness(.95);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.20),
        0 1px 0 rgba(0,0,0,.10);
}
.btn-3d-orange { background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%); }
.btn-3d-red    { background: linear-gradient(180deg, #f87171 0%, #dc2626 100%); }
.btn-3d-cyan   { background: linear-gradient(180deg, #22d3ee 0%, #0891b2 100%); }
.btn-3d-yellow { background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%); color: #1a1a1a; }
.btn-3d-pink   { background: linear-gradient(180deg, #f472b6 0%, #db2777 100%); }
.btn-3d-violet { background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%); }
.btn-3d-green  { background: linear-gradient(180deg, #34d399 0%, #059669 100%); }
.btn-3d-gold   { background: linear-gradient(180deg, #facc15 0%, #c9a227 100%); color: #1a1a1a; }

/* ============================================================================
   Colorful 3D stat cards (the "Other Documents Detail" header look)
   Used in document view header to surface KINSAY/SESSION/ACTION/ATTACHMENT.
   ============================================================================ */
.stat-cards-3d {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: var(--sp-5);
}
.stat-card-3d {
    position: relative;
    border-radius: 16px;
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    color: #fff;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -3px 0 rgba(0,0,0,.18),
        0 8px 24px rgba(15,23,42,.18);
    transition: transform var(--motion-medium) var(--ease-emphasized),
                box-shadow var(--motion-medium);
}
.stat-card-3d:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -3px 0 rgba(0,0,0,.18),
        0 14px 32px rgba(15,23,42,.24);
}
.stat-card-3d::before {
    content: '';
    position: absolute; right: -30px; top: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,.10);
    pointer-events: none;
}
.stat-card-3d .stat-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
    font-weight: 700; opacity: .92;
    background: rgba(255,255,255,.18);
    padding: 4px 10px; border-radius: 999px;
    margin-bottom: var(--sp-3);
}
.stat-card-3d .stat-value {
    font-size: 18px; font-weight: 800; line-height: 1.25;
    word-break: break-word;
}
.stat-card-3d .stat-foot { margin-top: 4px; font-size: 12px; opacity: .85; }

.stat-card-3d.stat-violet { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.stat-card-3d.stat-green  { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.stat-card-3d.stat-pink   { background: linear-gradient(135deg, #f472b6 0%, #be185d 100%); }
.stat-card-3d.stat-orange { background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%); }
.stat-card-3d.stat-cyan   { background: linear-gradient(135deg, #22d3ee 0%, #0e7490 100%); }
.stat-card-3d.stat-blue   { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); }

/* ── About page ────────────────────────────────────────────────────────────── */
.about-stage {
    max-width: 980px; margin: 0 auto; padding: var(--sp-6) var(--sp-5);
    background: var(--bg-elevated); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
    color: var(--text-primary);
}
.about-stage .about-section + .about-section { margin-top: var(--sp-7); }
.about-hero {
    display: grid; grid-template-columns: 1fr auto; gap: var(--sp-7);
    align-items: center;
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-6);
}
.about-eyebrow {
    display: inline-block; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    font-weight: 700; color: var(--brand-accent); margin-bottom: var(--sp-3);
}
.about-hero h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 var(--sp-3); letter-spacing: -.5px; line-height: 1.1; }
.about-lede { font-size: 16px; line-height: 1.6; max-width: 640px; color: var(--text-secondary); margin: 0 0 var(--sp-5); }
.about-cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.about-hero-mark {
    width: 160px; height: 160px;
    border-radius: 50%; background: var(--bg-sunken);
    display: grid; place-items: center; padding: var(--sp-3);
    box-shadow: inset 0 0 0 4px var(--brand-primary-50);
}
.about-hero-mark img { width: 100%; height: auto; object-fit: contain; }

.about-section h2 { font-size: 22px; margin: 0 0 var(--sp-3); letter-spacing: -.3px; }
.about-section h3 { font-size: 14px; margin: var(--sp-4) 0 var(--sp-2); text-transform: uppercase; letter-spacing: .8px; color: var(--text-secondary); font-weight: 700; }
.about-section p { line-height: 1.65; color: var(--text-secondary); margin: 0 0 var(--sp-3); }
.about-section code {
    background: var(--bg-sunken); padding: 1px 6px; border-radius: 4px;
    font-size: 12px; color: var(--brand-primary);
}

.feature-grid {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: var(--sp-4);
}
.feature {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    transition: transform var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui);
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.feature-ico { font-size: 24px; margin-bottom: var(--sp-2); }
.feature h3 {
    text-transform: none; letter-spacing: 0;
    color: var(--text-primary); font-size: 15px; font-weight: 700;
    margin: 0 0 var(--sp-1);
}
.feature p { font-size: 13px; line-height: 1.55; margin: 0; color: var(--text-secondary); }

.compliance-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.compliance-list li {
    padding: var(--sp-3) var(--sp-4);
    background: var(--brand-primary-50);
    border-left: 3px solid var(--brand-primary);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 14px; line-height: 1.55;
}
.compliance-list strong { color: var(--brand-primary); }

.dev-card {
    background: linear-gradient(160deg, var(--brand-primary) 0%, var(--brand-primary-700) 100%);
    color: var(--text-inverse);
    border-radius: var(--radius-xl);
    padding: var(--sp-7) var(--sp-7);
    margin-top: var(--sp-7) !important;
}
.dev-card h2, .dev-card h3 { color: var(--text-inverse); }
.dev-card h3 { color: var(--brand-accent); }
.dev-card p, .dev-card .muted { color: rgba(255,255,255,.78); }
.dev-card .muted.small { color: rgba(255,255,255,.62); }

.dev-card-grid {
    display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-7); align-items: start;
}
.dev-portrait {
    margin: 0; text-align: center;
}
.dev-portrait img {
    width: 200px; height: 200px; border-radius: 50%; object-fit: cover;
    border: 4px solid var(--brand-accent);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.dev-portrait figcaption {
    margin-top: var(--sp-3); font-size: 14px; font-weight: 600; color: var(--text-inverse);
}
.dev-list { padding-left: 18px; margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: 4px; color: rgba(255,255,255,.85); font-size: 14px; }
.dev-cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }
.dev-cta .btn-primary { background: var(--brand-accent); color: #1a1a1a; }
.dev-cta .btn-primary:hover { background: var(--brand-accent-600); color: #1a1a1a; }
.dev-cta .btn-ghost { background: rgba(255,255,255,.08); color: var(--text-inverse); border-color: rgba(255,255,255,.16); }
.dev-cta .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }

.colophon dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-2) var(--sp-4); }
.colophon dt { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; padding-top: 2px; }
.colophon dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin: 0 2px; border: 1px solid rgba(0,0,0,.1); }

@media (max-width: 760px) {
    .about-hero { grid-template-columns: 1fr; text-align: left; }
    .about-hero-mark { width: 120px; height: 120px; }
    .dev-card-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
    .dev-portrait img { width: 160px; height: 160px; }
    .colophon dl { grid-template-columns: 1fr; gap: var(--sp-1) 0; }
    .colophon dt { padding-top: var(--sp-2); }
}

/* When the About page is embedded in the auth (logged-out) layout */
.auth-body .about-stage { max-width: 980px; }
.auth-body .about-section h2,
.auth-body .about-section h3 { color: var(--text-primary); }
.auth-body .about-eyebrow { color: var(--brand-accent); }

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .footer, .page-head-actions, .action-bar, .quick-tags, .quick-tags-strip { display: none !important; }
    .shell { grid-template-columns: 1fr; }
    .content { max-width: 100%; padding: 0; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}