/* =====================================================================
   Noise Log
   Halftone aesthetic: soft gray bg, white cards, indigo accent, Manrope.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --bg:         #fafbfc;
    --card:       #ffffff;
    --ink:        #111827;
    --ink-2:      #374151;
    --ink-3:      #6b7280;
    --ink-4:      #9ca3af;
    --rule:       #e5e7eb;
    --rule-2:     #f3f4f6;
    --accent:     #4338ca;
    --accent-soft:#e0e7ff;
    --accent-hov: #3730a3;
    --alert:      #b91c1c;
    --alert-soft: #fee2e2;
    --warn:       #b45309;
    --warn-soft:  #fef3c7;
    --ok:         #15803d;
    --ok-soft:    #dcfce7;
    --gmail:      #ea4335;
    --outlook:    #0078d4;
    --shadow-sm:  0 1px 2px rgba(17,24,39,.04);
    --shadow-md:  0 1px 2px rgba(17,24,39,.04), 0 8px 24px -12px rgba(17,24,39,.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top nav ---------- */
.topbar {
    background: var(--card);
    border-bottom: 1px solid var(--rule);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.topbar .brand {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}
.topbar .brand::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
}
.topbar nav { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar nav a {
    font-size: 13px;
    color: var(--ink-3);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
.topbar nav a.active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}
.topbar .user {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 12px;
}
.topbar .user a {
    color: var(--ink-3);
    text-decoration: none;
}
.topbar .user a:hover { color: var(--ink); }

/* ---------- Page wrapper ---------- */
.page { padding: 32px 28px 80px; max-width: 1200px; margin: 0 auto; }
.page-h { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.page-h h1 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.page-h .sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* ---------- Buttons ---------- */
.btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn:hover { background: var(--accent-hov); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn.ghost:hover { background: var(--rule-2); }
.btn.danger { background: transparent; color: var(--alert); border: 1px solid var(--alert-soft); }
.btn.danger:hover { background: var(--alert-soft); }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn.block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Email client buttons */
.btn.gmail, .btn.outlook, .btn.mailto {
    background: white;
    color: var(--ink);
    border: 1px solid var(--rule);
}
.btn.gmail::before, .btn.outlook::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}
.btn.gmail::before    { background: var(--gmail); }
.btn.outlook::before  { background: var(--outlook); }
.btn.mailto::before   { content: '\2709'; font-size: 13px; width: auto; }

/* ---------- Form fields ---------- */
.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    color: var(--ink);
    background: white;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.field .hint { font-size: 11px; color: var(--ink-4); margin-top: 5px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* ---------- Cards / panels ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 20px 22px;
}
.card h2, .card h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -.01em;
}

/* ---------- Meta / mono text ---------- */
.meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}
.mono { font-family: 'JetBrains Mono', monospace; }

/* ---------- Pills ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 500;
    background: var(--rule-2);
    color: var(--ink-2);
}
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.pill.alert  { background: var(--alert-soft);  color: var(--alert); }
.pill.warn   { background: var(--warn-soft);   color: var(--warn);  }
.pill.ok     { background: var(--ok-soft);     color: var(--ok);    }

/* ---------- Severity dots ---------- */
.severity { display: inline-flex; gap: 2px; vertical-align: middle; }
.severity i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rule);
}
.severity i.on { background: var(--accent); }
.severity.s4 i.on { background: var(--alert); }

/* ---------- Flash messages ---------- */
.flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    border: 1px solid;
}
.flash.error { background: var(--alert-soft); border-color: #fecaca; color: var(--alert); }
.flash.ok    { background: var(--ok-soft);    border-color: #bbf7d0; color: var(--ok); }
.flash.info  { background: var(--accent-soft);border-color: #c7d2fe; color: var(--accent); }

/* ---------- Empty state ---------- */
.empty {
    padding: 60px 20px;
    text-align: center;
    background: var(--card);
    border: 1px dashed var(--rule);
    border-radius: 12px;
}
.empty .ico { font-size: 32px; color: var(--ink-4); margin-bottom: 10px; }
.empty h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.empty p { font-size: 13px; color: var(--ink-3); max-width: 400px; margin: 0 auto 14px; }

/* ---------- Dashboard stats ---------- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.stat {
    background: var(--card);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 18px 20px;
}
.stat .num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
}
.stat .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 8px;
    font-weight: 600;
}
.stat .delta { font-size: 12px; color: var(--accent); margin-top: 8px; font-weight: 600; }
.stat.alert  { border-left-color: var(--alert); }
.stat.alert .delta { color: var(--alert); }

/* ---------- Login screen ---------- */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-md);
}
.login-card .brand {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.login-card .brand::before {
    content: '';
    width: 9px;
    height: 9px;
    background: var(--accent);
    border-radius: 50%;
}
.login-card h1 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin-bottom: 4px;
}
.login-card .greeting {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 24px;
}

/* ---------- Tables (used later) ---------- */
.table {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
}
.table .row {
    display: grid;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rule-2);
    align-items: center;
}
.table .row:last-child { border-bottom: 0; }
.table .row.head {
    background: var(--rule-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}
.table .row:not(.head):hover { background: var(--rule-2); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 18px;
    }
    .topbar nav {
        order: 3;
        width: 100%;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .topbar nav a { white-space: nowrap; }
    .page { padding: 22px 18px 60px; }
    .dash-grid { grid-template-columns: 1fr; }
    .field-row { flex-direction: column; gap: 0; }
}

/* =====================================================================
   Upload, library, video detail
   ===================================================================== */

/* ---------- Drop zone ---------- */
.drop-zone {
    border: 2px dashed var(--rule);
    background: var(--card);
    padding: 56px 24px;
    text-align: center;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    margin-bottom: 18px;
}
.drop-zone:hover,
.drop-zone.dragging {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.drop-zone .dz-icon { font-size: 32px; color: var(--ink-3); margin-bottom: 8px; }
.drop-zone .dz-big {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.drop-zone .dz-sm { font-size: 12px; color: var(--ink-3); }

/* ---------- Upload controls bar ---------- */
.upload-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 14px;
}
.upload-controls .uc-right { display: flex; gap: 8px; }

/* ---------- Upload queue items ---------- */
.upload-queue {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
}
.upload-queue:empty { display: none; }
.queue-item {
    display: grid;
    grid-template-columns: 80px 1fr 220px 1fr 90px;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule-2);
    align-items: center;
}
.queue-item:last-child { border-bottom: 0; }
.qi-thumb {
    width: 80px;
    height: 48px;
    border-radius: 4px;
    background: linear-gradient(135deg, #2a3548, #1a2332);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.qi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qi-name { font-size: 13px; font-weight: 600; word-break: break-all; }
.qi-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.qi-recorded { display: flex; flex-direction: column; gap: 4px; }
.qi-recorded label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}
.qi-recorded input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: white;
}
.qi-progress { display: flex; flex-direction: column; gap: 4px; }
.qi-bar { height: 4px; background: var(--rule-2); border-radius: 2px; overflow: hidden; }
.qi-bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width .25s; }
.qi-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
}
.qi-status.qi-need   { color: var(--warn); }
.qi-status.qi-upload { color: var(--accent); }
.qi-status.qi-done   { color: var(--ok); }
.qi-status.qi-error  { color: var(--alert); }
.qi-status a { color: inherit; text-decoration: underline; }
.qi-actions { display: flex; justify-content: flex-end; }

/* ---------- Library ---------- */
.lib-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
    background: var(--card);
    border: 1px solid var(--rule);
    padding: 12px;
    border-radius: 10px;
}
.lib-filters input,
.lib-filters select {
    font-family: inherit;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: white;
    color: var(--ink);
}
.lib-filters .lib-search { flex: 1 1 240px; min-width: 200px; }

.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.video-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.video-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-soft);
    text-decoration: none;
}
.vc-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #2a3548, #1a2332);
    position: relative;
    overflow: hidden;
}
.vc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-thumb::after {
    content: '\25B6';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.6);
    font-size: 24px;
    pointer-events: none;
    transition: color .15s;
}
.video-card:hover .vc-thumb::after { color: rgba(255,255,255,.9); }
.vc-duration {
    position: absolute;
    bottom: 6px;
    right: 8px;
    background: rgba(0,0,0,.75);
    color: white;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}
.vc-info { padding: 12px 14px; }
.vc-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    /* line clamp to two lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vc-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 4px;
}
.vc-tags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.vc-more { font-size: 10px; color: var(--ink-4); align-self: center; }

/* ---------- Video detail page ---------- */
.vid-meta-form { margin: 0; }
.vid-meta-actions { display: flex; gap: 8px; align-items: center; }
.vid-delete-form { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.vid-player-wrap {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}
.vid-player-wrap video {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
}
.tag-preview-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dotted var(--rule-2);
}
.tag-preview-row:last-child { border-bottom: 0; }
.tag-preview-row .tp-quote { font-size: 13px; color: var(--ink); flex: 1; }
.tag-preview-row .ts { color: var(--accent); }

/* ---------- Key/value list (file integrity panel) ---------- */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 13px; }
.kv dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-3);
    font-weight: 600;
    align-self: center;
}
.kv dd { color: var(--ink); margin: 0; align-self: center; }

@media (max-width: 760px) {
    .queue-item {
        grid-template-columns: 60px 1fr;
        gap: 10px;
    }
    .qi-thumb { width: 60px; height: 36px; }
    .qi-recorded { grid-column: span 2; }
    .qi-progress { grid-column: span 2; }
    .qi-actions  { grid-column: span 2; justify-content: flex-start; }
    .kv { grid-template-columns: 1fr; gap: 2px; margin-bottom: 12px; }
    .kv dt { margin-top: 8px; }
}

/* =====================================================================
   Download UI and library selection
   ===================================================================== */

/* ---------- Card wrapper so checkbox can sit on top of the link ---------- */
.video-card-wrap { position: relative; }

/* ---------- Selection checkbox in card corner ---------- */
.vc-select {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(4px);
    border: 1px solid var(--rule);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s, border-color .15s;
}
.video-card-wrap:hover .vc-select,
.vc-select:has(input:checked),
.has-selection .vc-select {
    opacity: 1;
}
.vc-checkbox {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.vc-check-ind {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px solid var(--ink-3);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}
.vc-checkbox:checked + .vc-check-ind {
    background: var(--accent);
    border-color: var(--accent);
}
.vc-checkbox:checked + .vc-check-ind::after {
    content: '\2713';
    color: white;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

/* ---------- Sticky selection bar ---------- */
.selection-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: var(--ink);
    color: white;
    border-radius: 12px;
    padding: 10px 14px 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 50;
    box-shadow: 0 12px 32px -8px rgba(17,24,39,.4);
    min-width: 320px;
}
.selection-bar[hidden] { display: none; }
.selection-bar .sb-info { font-size: 13px; }
.selection-bar .sb-info strong { font-size: 16px; font-weight: 700; }
.selection-bar .sb-actions { display: flex; gap: 8px; margin-left: auto; }
.selection-bar .btn.ghost {
    background: transparent;
    color: white;
    border-color: rgba(255,255,255,.25);
}
.selection-bar .btn.ghost:hover { background: rgba(255,255,255,.1); }
.selection-bar .btn:not(.ghost) {
    background: white;
    color: var(--ink);
}
.selection-bar .btn:not(.ghost):hover { background: var(--rule-2); }

/* Make room above for content when bar is showing */
.has-selection main.page { padding-bottom: 100px; }

@media (max-width: 600px) {
    .selection-bar {
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        min-width: 0;
    }
    .vc-select { opacity: 1; }
}

/* =====================================================================
   Period chips, incidents list, compiled report,
   email compose
   ===================================================================== */

/* ---------- Period chips ---------- */
.period-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    align-items: center;
}
.period-chips .chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.period-chips .chip:hover { background: var(--rule-2); text-decoration: none; }
.period-chips .chip.active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}
.period-chips .chip-sep {
    width: 1px;
    height: 18px;
    background: var(--rule);
    margin: 0 6px;
}

/* ---------- Incidents list ---------- */
.incident-list {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
}
.incident-row {
    display: grid;
    grid-template-columns: 28px 160px 220px 1fr;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule-2);
    align-items: start;
    cursor: pointer;
}
.incident-row:last-child { border-bottom: 0; }
.incident-row:hover { background: var(--rule-2); }
.incident-row .ir-cb {
    position: static;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
    opacity: 1;
    cursor: pointer;
}
.incident-row .ir-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.incident-row .ir-date { font-size: 11px; color: var(--ink-3); }
.incident-row .ir-ts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.incident-row .ir-ts:hover { text-decoration: underline; }
.incident-row .ir-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.incident-row .ir-meta .severity { display: inline-flex; gap: 2px; }
.incident-row .ir-meta .severity i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rule);
}
.incident-row .ir-meta .severity i.on { background: var(--accent); }
.incident-row .ir-quote {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
}
.incident-row .ir-quote-empty {
    font-size: 13px;
    color: var(--ink-4);
    font-style: italic;
}
.incident-row .ir-video {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 4px;
}
.incident-row .ir-video a { color: var(--accent); text-decoration: none; }
.incident-row .ir-video a:hover { text-decoration: underline; }

/* ---------- Compiled report ---------- */
.compile-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}
.report-doc {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 40px 48px;
    max-width: 820px;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
}
.report-head {
    border-bottom: 2px solid var(--ink);
    padding-bottom: 18px;
    margin-bottom: 26px;
}
.report-head h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 6px;
}
.report-meta { font-size: 13px; color: var(--ink-3); }
.report-counts {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-2);
}
.report-counts strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.report-section { margin-bottom: 32px; }
.report-section h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -.01em;
}
.report-lede {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 18px;
    line-height: 1.55;
}
.report-cat {
    font-size: 14px;
    font-weight: 700;
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule-2);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.report-cat.is-quote { color: var(--accent); }
.report-cat-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
}
.report-incident {
    padding: 12px 0;
    border-bottom: 1px dotted var(--rule-2);
}
.report-incident:last-child { border-bottom: 0; }
.report-quote {
    font-size: 15px;
    line-height: 1.5;
    padding-left: 14px;
    border-left: 3px solid var(--accent);
    color: var(--ink);
    margin: 0 0 6px;
}
.report-quote-empty {
    font-size: 13px;
    color: var(--ink-4);
    font-style: italic;
    margin: 0 0 6px;
}
.report-incident-meta {
    font-size: 12px;
    color: var(--ink-3);
}
.report-incident-meta a { color: var(--accent); text-decoration: none; }
.report-incident-meta a:hover { text-decoration: underline; }
.report-videos {
    list-style: decimal;
    padding-left: 22px;
}
.report-video { padding: 14px 0; border-bottom: 1px dotted var(--rule-2); }
.report-video:last-child { border-bottom: 0; }
.report-video .rv-h h3 { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.report-video .rv-meta { font-size: 11px; color: var(--ink-3); }
.report-video .rv-desc { font-size: 13px; line-height: 1.55; margin: 8px 0; color: var(--ink-2); }
.report-video .rv-tags { list-style: none; padding-left: 0; margin-top: 6px; }
.report-video .rv-tags li { font-size: 12px; padding: 3px 0; color: var(--ink-2); line-height: 1.5; }
.report-video .rv-tags em { color: var(--ink-3); font-style: normal; font-weight: 500; }
.report-foot {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 11px;
    color: var(--ink-3);
}

/* ---------- Email compose ---------- */
.email-compose {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 18px;
}
.email-recipient { align-self: start; }
.email-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule-2);
}
.email-actions .btn { width: 100%; justify-content: center; }
.email-preview .meta { display: block; }
.email-body {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--rule-2);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0;
    max-height: 70vh;
    overflow-y: auto;
}

@media (max-width: 760px) {
    .incident-row { grid-template-columns: 28px 1fr 1fr; gap: 10px; padding: 12px 14px; }
    .incident-row .ir-body { grid-column: 1 / -1; }
    .email-compose { grid-template-columns: 1fr; }
    .report-doc { padding: 24px 20px; }
}

/* ---------- Case context block inside compiled reports ---------- */
.report-context { background: var(--rule-2); border-radius: 10px; padding: 18px 22px; margin-bottom: 22px; }
.report-context h2 { margin-bottom: 12px; }
.report-kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    font-size: 13px;
    margin: 0 0 12px;
}
.report-kv dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
    font-weight: 600;
    align-self: start;
    padding-top: 2px;
}
.report-kv dd { margin: 0; align-self: start; color: var(--ink); }
.report-kv-q { color: var(--ink-3); font-size: 12px; }
.report-background {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink-2);
    border-left: 3px solid var(--accent);
    padding-left: 12px;
    margin: 0;
}

/* ---------- Narrative summary section ---------- */
.report-narrative {
    background: var(--card);
    border-left: 4px solid var(--accent);
    padding: 22px 28px;
    border-radius: 8px;
    margin-bottom: 32px;
}
.report-narrative h2 { margin-bottom: 8px; }
.report-narrative .report-lede { font-size: 12px; color: var(--ink-4); font-style: italic; margin-bottom: 18px; }
.report-narrative .narrative-para {
    font-family: 'Manrope', Georgia, serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink);
    margin: 0 0 14px;
    text-align: justify;
    hyphens: auto;
}
.report-narrative .narrative-para:last-child { margin-bottom: 0; }

/* =====================================================================
   Video page tagging UI
   ===================================================================== */

/* Two-column layout: player on the left, badges + tag list on the right. */
.video-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 22px;
    align-items: start;
}
.vp-main { display: flex; flex-direction: column; gap: 14px; }
.vp-side { display: flex; flex-direction: column; gap: 14px; }

/* Player + scrub. */
.vp-player-wrap { display: flex; flex-direction: column; gap: 8px; }
.scrub-wrap {
    position: relative;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 6px 10px 10px;
}
.waveform {
    display: block;
    width: 100%;
    height: 48px;
}
.scrub-track {
    position: relative;
    height: 22px;
    background: var(--rule-2);
    border-radius: 4px;
    margin-top: 4px;
    cursor: pointer;
}
.scrub-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background: var(--accent);
    cursor: pointer;
    border-radius: 1px;
    transition: transform .12s;
}
.scrub-marker:hover { transform: scaleY(1.3); width: 5px; margin-left: -2.5px; }
.scrub-marker.sev-3 { background: #f59e0b; }
.scrub-marker.sev-4 { background: #ef4444; }
.scrub-marker.is-quote { background: var(--accent); opacity: .65; }
.scrub-playhead {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    margin-left: -1px;
    background: var(--ink);
    pointer-events: none;
    border-radius: 1px;
}
.scrub-time {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 4px;
}

/* Meta form below the player. */
.vp-meta { padding: 16px 18px; }
.vp-meta h3 { margin-bottom: 10px; }

/* Right-side badge grid. */
.vp-badges { padding: 14px 16px; }
.vp-badges-head { margin-bottom: 12px; }
.vp-badges-head h3 { margin: 0 0 6px; font-size: 14px; }
.vp-badges-head .hint { margin: 0; }

.badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.cat-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--rule-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s, transform .12s;
    font-family: inherit;
}
.cat-badge:hover {
    background: white;
    border-color: var(--accent);
    color: var(--ink);
}
.cat-badge.is-quote {
    border-style: dashed;
}
.cat-badge.is-quote:hover {
    border-style: solid;
    background: #eef2ff;
}
.cat-badge.flash {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: scale(0.97);
}
.cat-badge .cb-key {
    flex: 0 0 18px;
    height: 18px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-3);
}
.cat-badge .cb-name {
    flex: 1;
    line-height: 1.3;
}
.cat-badge:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Tag list. */
.vp-taglist-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vp-taglist-head h3 { font-size: 14px; margin: 0; }
.vp-taglist-actions { display: flex; gap: 6px; }

.tag-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.tag-list-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--ink-4);
    background: var(--card);
    border: 1px dashed var(--rule);
    border-radius: 8px;
    font-size: 13px;
}
.tag-list-empty .ico { font-size: 24px; opacity: .4; margin-bottom: 6px; }
.tag-list-empty p { margin: 0; line-height: 1.5; }

.tag-row {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tag-row.is-quote {
    border-left: 3px solid var(--accent);
}

.tr-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tr-ts {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
}
.tr-ts:hover { background: var(--rule-2); }
.tr-cat {
    font-size: 11px;
    color: var(--ink-2);
    background: var(--rule-2);
    padding: 2px 8px;
    border-radius: 999px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tag-row.is-quote .tr-cat {
    background: #eef2ff;
    color: var(--accent);
}
.tr-sev {
    display: inline-flex;
    gap: 2px;
}
.sev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rule);
    border: none;
    padding: 0;
    cursor: pointer;
}
.sev-dot.on { background: var(--accent); }
.sev-dot:hover { transform: scale(1.2); }

.tr-actions { display: flex; gap: 4px; }
.tr-improve, .tr-delete {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.tr-improve:hover { background: #eef2ff; color: var(--accent); border-color: var(--accent); }
.tr-delete:hover  { background: #fef2f2; color: #dc2626; border-color: #dc2626; }
.ai-glyph {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tr-quote, .tr-comment {
    width: 100%;
    border: 1px solid transparent;
    background: var(--rule-2);
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
    color: var(--ink);
}
.tr-quote { font-weight: 500; }
.tr-comment { font-size: 12px; color: var(--ink-2); }
.tr-quote:focus, .tr-comment:focus {
    background: white;
    border-color: var(--accent);
    outline: none;
}
.tr-quote::placeholder, .tr-comment::placeholder { color: var(--ink-4); }

.tr-status {
    font-size: 10px;
    height: 12px;
    color: var(--ink-3);
}
.tr-status.ok      { color: #059669; }
.tr-status.pending { color: var(--ink-3); }
.tr-status.error   { color: #dc2626; }

@media (max-width: 1024px) {
    .video-page {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .badge-grid { grid-template-columns: 1fr; }
    .tag-list   { max-height: none; }
    .waveform   { display: none; }
}

/* =====================================================================
   Data tables, category form, contacts, shares
   ===================================================================== */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table thead th {
    text-align: left;
    padding: 12px 16px;
    background: var(--rule-2);
    border-bottom: 1px solid var(--rule);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
    font-weight: 600;
}
.data-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule-2);
    vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--rule-2); }
.data-table tbody tr.row-editing {
    background: #eef2ff;
}
.data-table tbody tr.row-editing td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

.cat-name { font-weight: 600; color: var(--ink); }
.cat-name.is-quote { color: var(--accent); }
.cat-slug {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
}

.flag-pill {
    display: inline-block;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--rule-2);
    color: var(--ink-3);
    margin-right: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.flag-pill.accent {
    background: #eef2ff;
    color: var(--accent);
}

.cat-form {
    padding: 18px 22px;
    margin-bottom: 18px;
}
.cat-form h3 {
    font-size: 14px;
    margin: 0 0 14px;
}
.cat-form .field-row + .field-row {
    margin-top: 10px;
}
.checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}
.check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
}
.check-inline input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    margin: 0;
}
.hint-inline {
    font-weight: 400;
    color: var(--ink-3);
    font-size: 11px;
    margin-left: 4px;
}
.form-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}
.btn.danger {
    color: #b91c1c;
    border-color: #fecaca;
}
.btn.danger:hover {
    background: #fef2f2;
    border-color: #f87171;
    color: #991b1b;
}
.btn.small[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

/* Shares: status pills, freshly-minted link card */
.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-pill.active   { background: #ecfdf5; color: #047857; }
.status-pill.expired  { background: var(--rule-2); color: var(--ink-3); }
.status-pill.revoked  { background: #fef2f2; color: #b91c1c; }

.share-row.status-revoked,
.share-row.status-expired {
    opacity: .72;
}

.share-new {
    background: linear-gradient(180deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid #c7d2fe;
    margin-bottom: 18px;
}
.share-new h3 { color: var(--accent); margin-bottom: 4px; }
.share-url-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.share-url-row input {
    flex: 1;
    background: white;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--ink);
}

/* Share viewer (public, no app chrome) */
.topbar-share {
    justify-content: space-between;
}
.share-banner {
    font-size: 12px;
    color: var(--ink-3);
    background: var(--rule-2);
    padding: 4px 10px;
    border-radius: 999px;
}
.share-viewer { max-width: 900px; }
.share-note {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
    margin-bottom: 14px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.55;
}
.share-note strong { display: block; margin-bottom: 4px; }
.share-player-wrap { margin-top: 12px; }
.share-foot {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.6;
}
.share-foot p { margin: 0 0 6px; }

/* =====================================================================
   Timeline heatmap + hour-of-day bars
   ===================================================================== */

.timeline-card {
    padding: 22px 26px;
}
.timeline-card h3 { font-size: 14px; margin-bottom: 6px; }
.timeline-card .hint { margin: 0 0 14px; }

.heatmap-wrap {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 4px;
    align-items: start;
}
.heatmap-labels {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    gap: 3px;
    font-size: 10px;
    color: var(--ink-3);
    padding-top: 18px;
    line-height: 14px;
}
.heatmap-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}
.heatmap-months {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
    height: 14px;
}
.hm-month-label {
    width: 14px;
    font-size: 10px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: visible;
    flex-shrink: 0;
}
.heatmap-grid {
    display: flex;
    gap: 3px;
}
.hm-col {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    gap: 3px;
}
.hm-cell {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--rule-2);
    display: block;
    text-decoration: none;
    transition: transform .12s, outline-color .12s;
    outline: 1px solid transparent;
}
.hm-cell:hover {
    transform: scale(1.25);
    outline-color: var(--ink);
    z-index: 1;
    position: relative;
}
.hm-cell.hm-empty { visibility: hidden; }
.hm-cell.hm-b0 { background: var(--rule-2); }
.hm-cell.hm-b1 { background: #c7d2fe; }
.hm-cell.hm-b2 { background: #818cf8; }
.hm-cell.hm-b3 { background: #6366f1; }
.hm-cell.hm-b4 { background: var(--accent); }
.hm-cell.hm-video-only {
    background: transparent;
    border: 1px dashed var(--ink-3);
}
.heatmap-legend {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 12px;
    font-size: 11px;
}
.heatmap-legend .hm-cell { cursor: default; }
.heatmap-legend .hm-cell:hover { transform: none; outline: 0; }

.hour-bars {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 4px;
    align-items: end;
    margin-top: 12px;
}
.hour-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.hour-bar-track {
    width: 100%;
    height: 120px;
    background: var(--rule-2);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.hour-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    transition: height .25s;
}
.hour-col.after-hours .hour-bar { background: #b91c1c; }
.hour-col.after-hours .hour-bar-track {
    background: #fef2f2;
}
.hour-label {
    font-size: 9px;
    color: var(--ink-3);
}
.hour-count {
    font-size: 10px;
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 760px) {
    .heatmap-scroll { overflow-x: scroll; }
    .hour-bars { grid-template-columns: repeat(12, 1fr); }
    .hour-bars .hour-col:nth-child(2n) { display: none; }
}

/* =====================================================================
   Print stylesheet
   ---------------------------------------------------------------------
   Reports are the critical artefact of this app: a tagged recording
   compiled into evidence that gets printed to PDF and sent to a
   housing officer, social worker, or police liaison.

   When the user prints (or "save as PDF" in any browser), strip every
   piece of app chrome and tune the document for A4. The standalone
   HTML version saved via "Save as version" embeds these rules too, so
   downstream recipients get the same polish.
   ===================================================================== */
@media print {
    body {
        background: white;
        color: black;
        font-size: 11pt;
    }

    /* Hide everything that isn't report content. */
    .topbar,
    .topbar-share,
    .compile-actions,
    .share-foot,
    .share-banner,
    .flash,
    button,
    .btn,
    nav,
    .field-row,
    form,
    details,
    summary,
    .lib-filters,
    .vp-side,
    .scrub-wrap,
    video,
    audio { display: none !important; }

    main.page {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    article.report-doc {
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: 0;
    }

    .report-section {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .report-section h2 {
        page-break-after: avoid;
        break-after: avoid;
        margin-top: 18pt;
    }
    h1, h2, h3 {
        color: black;
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Indigo is too pale on paper. Demote to black with bold weight. */
    .report-narrative h2,
    .report-section h2 {
        color: black;
        border-bottom: 1pt solid #333;
        padding-bottom: 4pt;
    }
    .report-cat {
        color: black;
        border-left: 2pt solid #333;
        padding-left: 8pt;
        font-weight: 600;
    }
    .report-cat.is-quote {
        color: #333;
        border-left-color: #555;
        font-style: italic;
    }

    .report-quote {
        background: transparent;
        border-left: 2pt solid #555;
        padding: 4pt 10pt;
        color: black;
        font-style: italic;
    }
    .report-incident {
        page-break-inside: avoid;
        break-inside: avoid;
        margin-bottom: 10pt;
    }

    /* Force backgrounds for pill-like elements to render. Most
       browsers respect this with -webkit-print-color-adjust. */
    .report-section,
    .report-kv,
    .report-incident,
    .report-cat,
    .report-quote {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pill, .pill-soft, .pill.alert {
        border: 1pt solid #333;
        color: black;
        background: transparent;
        padding: 1pt 5pt;
        border-radius: 3pt;
    }

    /* Page breaks between top-level sections. */
    .report-narrative + .report-section { page-break-before: auto; }
    .report-head {
        border-bottom: 2pt solid black;
        padding-bottom: 10pt;
        margin-bottom: 14pt;
    }
    .report-head h1 { font-size: 18pt; margin-bottom: 4pt; }
    .report-head .mono { font-size: 9pt; color: #555; }

    /* Footnotes for hashes etc. */
    .mono { font-family: 'Courier New', monospace; }

    /* Helpful page metadata. */
    @page {
        margin: 18mm 15mm 18mm 15mm;
    }
}

/* =====================================================================
   Modal
   ---------------------------------------------------------------------
   Small reusable modal pattern used by Save-as-Version and any future
   "type a name and confirm" interactions. ESC and backdrop click both
   close.
   ===================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    animation: modalFade .15s ease-out;
}
@keyframes modalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(15, 23, 42, 0.08);
    max-width: 480px;
    width: 100%;
    padding: 26px 28px 22px;
    animation: modalPop .18s ease-out;
}
@keyframes modalPop {
    from { transform: translateY(8px) scale(.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
.modal h2 {
    font-size: 16px;
    margin: 0 0 4px;
}
.modal .modal-sub {
    font-size: 12px;
    color: var(--ink-3);
    margin: 0 0 18px;
}
.modal .field { margin-bottom: 12px; }
.modal .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.modal .modal-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 12px;
    display: none;
}
.modal .modal-error.shown { display: block; }

/* =====================================================================
   Account page
   ===================================================================== */
.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    align-items: start;
}
.account-card {
    padding: 22px 26px;
}
.account-card h3 {
    font-size: 14px;
    margin-bottom: 4px;
}
.account-card .hint {
    margin: 0 0 16px;
}
.account-card .field + .field { margin-top: 10px; }
.account-card .btn { margin-top: 6px; }
.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rule-2);
    font-size: 13px;
}
.status-row:last-of-type { border-bottom: 0; }
.status-label {
    color: var(--ink-3);
    font-size: 12px;
    min-width: 140px;
}

/* =====================================================================
   Dashboard
   ===================================================================== */
.dash-cards {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
    align-items: start;
}
.dash-card { padding: 18px 22px; }
.dash-card-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    margin: 0 0 12px;
}
.dash-card-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
}
.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dash-list li {
    border-bottom: 1px dashed var(--rule-2);
}
.dash-list li:last-child { border-bottom: 0; }
.dash-list-main {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
    transition: padding-left .15s;
}
.dash-list-main:hover {
    padding-left: 4px;
    background: linear-gradient(90deg, var(--rule-2), transparent);
}
.dash-list-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
}
.dash-list-meta {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
}
.dash-list-tags {
    margin-top: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.dash-quick {
    padding: 18px 22px;
    margin-top: 18px;
}
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.dash-quick-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--rule-2);
    transition: transform .15s, border-color .15s, background .15s;
}
.dash-quick-tile:hover {
    border-color: var(--accent);
    background: white;
    transform: translateY(-1px);
}
.dq-ico {
    font-size: 22px;
    color: var(--accent);
    margin-bottom: 4px;
    line-height: 1;
}
.dq-h {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 2px;
}
.dq-sub {
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.4;
}

@media (max-width: 760px) {
    .dash-cards { grid-template-columns: 1fr; }
}