/* ==========================================================================
   Document Sanitizer — legal stationery
   --------------------------------------------------------------------------
   Printed-document manners rather than dashboard manners: a warm paper ground,
   a serif for anything that is read as prose, hairline rules instead of boxes
   and shadows, and one restrained ink accent. No gradients, no glow, no
   floating translucent cards.

   The rules do the work that borders and drop shadows used to. A rule costs
   one pixel and separates two things; a card costs a border, a radius, a
   shadow and a background, and separates the same two things while making the
   page look like software.
   ========================================================================== */

:root {
    --serif: 'Libre Baskerville', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --paper:        #faf7f0;
    --paper-raised: #fffdf8;
    --paper-sunk:   #f2eee4;
    --ink:          #1f1c17;
    --ink-soft:     #55504a;
    --ink-faint:    #8a837a;
    --rule:         #d8d0c0;
    --rule-strong:  #b3a894;

    --accent:       #2c4a6e;   /* ink navy, for links and primary actions */
    --accent-dark:  #1d3350;
    --accent-wash:  #e8eef5;
    --danger:       #7d2b32;   /* oxblood */
    --danger-wash:  #f6e9e9;
    --good:         #2f5d3f;
    --good-wash:    #e8f0e9;

    --measure: 68ch;           /* comfortable reading width for prose */

    /* Entity highlight tints. Muted on purpose: fifteen saturated colours on a
       page of text is a ransom note, and the reviewer has to read the text. */
    --tint-person:     #e3ecf6;
    --tint-company:    #e6efe8;
    --tint-address:    #f6ecdf;
    --tint-contact:    #f2e8f2;
    --tint-financial:  #eae9f5;
    --tint-identifier: #f6e9e9;
    --tint-other:      #eeeae1;
}

body.dark-theme {
    --paper:        #17150f;
    --paper-raised: #1e1b15;
    --paper-sunk:   #131109;
    --ink:          #ece5d6;
    --ink-soft:     #b3aa98;
    --ink-faint:    #837b6b;
    --rule:         #3a352a;
    --rule-strong:  #574f3f;

    --accent:       #8fb4dd;
    --accent-dark:  #a9c7e8;
    --accent-wash:  #23303f;
    --danger:       #d98d92;
    --danger-wash:  #382426;
    --good:         #93bfa1;
    --good-wash:    #22301f;

    --tint-person:     #23303f;
    --tint-company:    #24322a;
    --tint-address:    #3a3024;
    --tint-contact:    #33263200;
    --tint-financial:  #2a2838;
    --tint-identifier: #382426;
    --tint-other:      #2b2820;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* Reserve the scrollbar's width at all times. Otherwise a short section
       has no scrollbar, a long one does, and the centred page shifts sideways
       every time you change tab. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
}

.hidden { display: none !important; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

a { color: var(--accent); }

code, pre, .code-input, .mono { font-family: var(--mono); }

/* ==========================================================================
   Sign-in
   ========================================================================== */

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.login-sheet {
    width: 100%;
    max-width: 30rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    padding: 48px 44px 36px;
}

.login-sheet-wide { max-width: 40rem; }

.login-masthead {
    text-align: center;
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 3px double var(--rule-strong);
}

.login-eyebrow {
    margin: 0 0 10px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.login-title {
    font-size: 1.65rem;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}

.login-strap {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.login-step {
    margin: 0 0 20px;
    font-family: var(--serif);
    color: var(--ink-soft);
}

.login-foot {
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
    color: var(--ink-faint);
    text-align: center;
}

.login-lang {
    margin-top: 14px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--ink-faint);
}

.lang-btn {
    background: none;
    border: 0;
    padding: 2px 4px;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lang-btn[aria-pressed="true"] { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 20px; }

.field label,
.label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.98rem;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.code-input {
    font-family: var(--mono);
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    text-align: center;
    padding: 12px;
}

.help-text {
    display: block;
    margin-top: 5px;
    font-size: 0.82rem;
    color: var(--ink-faint);
}

.form-error {
    margin: 0 0 16px;
    padding: 10px 12px;
    background: var(--danger-wash);
    border-left: 3px solid var(--danger);
    color: var(--danger);
    font-size: 0.9rem;
}

.form-msg {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--good-wash);
    border-left: 3px solid var(--good);
    font-size: 0.9rem;
}

.form-msg.is-error {
    background: var(--danger-wash);
    border-left-color: var(--danger);
    color: var(--danger);
}

.stacked-form { max-width: 26rem; }

.inline-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.inline-form label { flex-basis: 100%; }
.inline-form input { width: auto; flex: 1 1 14rem; }

.radio-row { display: flex; gap: 24px; }
.radio-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink);
}
.radio-row input { width: auto; }

/* A password box with a reveal control sitting inside its right edge. */
.password-field { position: relative; }

.password-field input { padding-right: 4.5rem; }

.reveal-btn {
    position: absolute;
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
    height: calc(100% - 2px);
    padding: 0 10px;
    background: none;
    border: 0;
    border-left: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    cursor: pointer;
}

.reveal-btn:hover { color: var(--accent); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    background: var(--paper-raised);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.btn:hover:not(:disabled) { background: var(--paper-sunk); border-color: var(--ink-faint); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }

body.dark-theme .btn-primary { color: #14202c; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.1); }
body.dark-theme .btn-danger { color: #2a1315; }

.btn-quiet {
    background: none;
    border-color: transparent;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn-quiet:hover:not(:disabled) { background: none; color: var(--ink); }

.btn-block { display: block; width: 100%; margin-top: 8px; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }

.link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }

.btn-close {
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 0 4px;
}
.btn-close:hover { color: var(--ink); }

/* ==========================================================================
   Shell
   ========================================================================== */

.app-shell {
    max-width: 74rem;
    margin: 0 auto;
    padding: 0 24px 64px;
}

.masthead { padding-top: 28px; }

.masthead-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.masthead-title h1 {
    font-size: 1.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.masthead-account {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.account-name {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink);
}

.masthead-rule {
    margin: 12px 0 0;
    border-bottom: 3px double var(--rule-strong);
}

/* The wordmark's trailing letter-space would otherwise push the title box
   wider than the glyphs, which reads as a misalignment against the rule and
   the tab row beneath it. */
.masthead-title h1 { margin-right: -0.14em; }

/* Tabs: a row of names over a rule, the current one attached to the page. */
.tabs {
    display: flex;
    gap: 30px;
    margin-top: -1px;
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
}

.tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 12px 2px;
    margin-bottom: -1px;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    cursor: pointer;
    white-space: nowrap;
}

.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }

.subtabs {
    display: flex;
    gap: 22px;
    margin: 18px 0 26px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    flex-wrap: wrap;
}

.subtab {
    background: none;
    border: 0;
    padding: 2px 0;
    font-family: var(--serif);
    font-size: 0.95rem;
    color: var(--ink-faint);
    cursor: pointer;
}
.subtab:hover { color: var(--ink); }
.subtab.is-active { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

.sheet { padding-top: 34px; }

.section { animation: settle 0.16s ease-out; }

@keyframes settle {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .section { animation: none; }
    .btn { transition: none; }
}

.colophon {
    max-width: 74rem;
    margin: 0 auto;
    padding: 22px 24px 40px;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--ink-faint);
    text-align: center;
}

/* ==========================================================================
   Page furniture
   ========================================================================== */

.panel-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.block-title {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

/* Used on both <p> and <span>. Declared block so the width limit and the
   bottom margin apply either way -- on a span they are simply ignored, which
   is how the preview tip ended up running inline against the heading. */
.block-note {
    display: block;
    margin: 0 0 14px;
    max-width: var(--measure);
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/* A width-limited block does not centre itself just because its container
   centres text: the box still sits hard against the left edge, and only the
   line boxes inside it are centred. Anything constrained inside a centred
   panel needs the auto margins spelled out. */
.panel-centred .block-note,
.panel-centred .prose,
.login-sheet .block-note {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.rule { border-bottom: 1px solid var(--rule); margin: 30px 0; }

.prose-block { margin-bottom: 8px; }

.prose {
    max-width: var(--measure);
    font-family: var(--serif);
    font-size: 1rem;
}

.prose h3 {
    font-size: 1.1rem;
    margin: 34px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
}

.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose ol, .prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }

.prose .aside {
    margin: 18px 0;
    padding: 12px 16px;
    background: var(--paper-sunk);
    border-left: 3px solid var(--rule-strong);
    font-size: 0.94rem;
}

.detail-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 20px;
    align-items: baseline;
    margin: 0 0 12px;
    font-size: 0.92rem;
}

.detail-list dt {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.detail-list dd {
    margin: 0;
    font-family: var(--serif);
    min-width: 0;
    /* Filenames have no spaces to break at, and an overflowing one escaped the
       sidebar and printed over the document preview. */
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Upload
   ========================================================================== */

.upload-area {
    border: 1px dashed var(--rule-strong);
    padding: 52px 24px;
    text-align: center;
    background: var(--paper-raised);
}

/* `dragover` is the class the upload logic actually toggles. */
.upload-area.dragover {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.upload-lead {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-size: 1.15rem;
}

.upload-formats {
    margin: 0 0 20px;
    font-size: 0.86rem;
    color: var(--ink-faint);
}

.hidden-input { display: none; }

.keyword-row { display: flex; gap: 10px; max-width: 34rem; }
.keyword-row input { flex: 1; }

.tags-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    font-size: 0.86rem;
}

.tag-remove {
    background: none;
    border: 0;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
}
.tag-remove:hover { color: var(--danger); }

.panel-centred { text-align: center; padding: 70px 20px; }

.working-mark {
    width: 34px;
    height: 34px;
    margin: 0 auto 22px;
    border: 2px solid var(--rule-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: turn 0.9s linear infinite;
}

@keyframes turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .working-mark { animation-duration: 3s; }
}

/* ==========================================================================
   Review
   ========================================================================== */

.review {
    display: grid;
    grid-template-columns: 19rem 1fr;
    gap: 40px;
    align-items: start;
    /* Clearance for the sticky action bar, which otherwise floats over the
       last thing in the sidebar until you reach the very bottom. */
    padding-bottom: 3.5rem;
}

.review-aside { position: sticky; top: 20px; min-width: 0; }

.aside-block {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.category-list { display: flex; flex-direction: column; gap: 2px; }

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.category-item input { width: auto; margin: 0; }
.category-item .cat-name { flex: 1; }

.category-item .cat-count {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.stats-list { font-size: 0.9rem; }

.stat-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

/* Leader dots, the way a table of contents does it. */
.stat-row .stat-name { white-space: nowrap; }
.stat-row .stat-dots {
    flex: 1;
    border-bottom: 1px dotted var(--rule-strong);
    transform: translateY(-3px);
}
.stat-row .stat-value { font-family: var(--mono); font-size: 0.85rem; }

.suggest-list { margin-top: 12px; font-size: 0.88rem; }

.suggest-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
}

.suggest-item:last-child { border-bottom: 0; }

.suggest-item .suggest-text {
    font-family: var(--mono);
    font-size: 0.85rem;
    display: block;
    margin-bottom: 4px;
    word-break: break-word;
}

.suggest-item .suggest-why { color: var(--ink-faint); display: block; margin-bottom: 6px; }

.review-main { min-width: 0; }
.review-main-head .block-note { max-width: 100%; }

.review-main-head {
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}

.document-text {
    margin: 0;
    padding: 34px 38px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.9;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 68vh;
    overflow-y: auto;
}

/* Marked-up entities.
   --------------------------------------------------------------------------
   Each one carries the original text and its replacement; which of the two is
   shown depends on the reviewer's decision, so the preview reads as the
   document that will actually be produced. Every marking is a tinted ground
   *and* an underline, so it survives a colour-blind reader and a black-and-
   white print alike — colour alone would carry the meaning otherwise. */

.entity-span {
    cursor: pointer;
    padding: 1px 2px;
    border-bottom: 1px solid var(--rule-strong);
    background: var(--tint-other);
    transition: border-color 0.12s ease;
}

.entity-span:hover { border-bottom-color: var(--accent); border-bottom-width: 2px; }

/* The category label is for the popover and for screen readers, not the page. */
.entity-category-lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.entity-span.is-redacted .entity-orig-text { display: none; }
.entity-span.is-kept .entity-replacement-badge { display: none; }

.entity-span.is-redacted {
    background: var(--paper-sunk);
    border-bottom-style: solid;
}

.entity-span.is-redacted .entity-replacement-badge {
    font-family: var(--mono);
    font-size: 0.84em;
    letter-spacing: 0.01em;
    color: var(--ink-soft);
}

/* Kept: no fill, a dotted rule. Visibly a decision rather than an oversight. */
.entity-span.is-kept {
    background: none;
    border-bottom-style: dotted;
    border-bottom-color: var(--ink-faint);
}

.entity-span.category-name, .entity-span.category-person { background: var(--tint-person); }
.entity-span.category-company { background: var(--tint-company); }
.entity-span.category-address { background: var(--tint-address); }
.entity-span.category-email,
.entity-span.category-phone,
.entity-span.category-url { background: var(--tint-contact); }
.entity-span.category-iban,
.entity-span.category-card,
.entity-span.category-financial { background: var(--tint-financial); }
.entity-span.category-passport,
.entity-span.category-ssn,
.entity-span.category-registration,
.entity-span.category-dob,
.entity-span.category-credential { background: var(--tint-identifier); }

.entity-span.is-kept[class*="category-"] { background: none; }

.format-note {
    max-width: var(--measure);
    margin: 0 0 12px;
    padding: 9px 13px;
    background: var(--paper-sunk);
    border-left: 3px solid var(--rule-strong);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

/* Sticky, so the download controls and the caveat that goes with them are
   always in reach. Two rows rather than one: when the note sat outside the bar
   the sticky bar scrolled over the top of it and cut it off mid-sentence. */
.action-bar {
    position: sticky;
    bottom: 0;
    margin-top: 20px;
    padding: 14px 0;
    background: var(--paper);
    border-top: 1px solid var(--rule-strong);
}

.action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.action-count { font-size: 0.9rem; color: var(--ink-soft); }
.action-count strong { font-family: var(--mono); color: var(--ink); }

.action-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.export-selector { display: flex; align-items: center; gap: 8px; }
.export-selector label { margin: 0; }
.export-selector select { width: auto; padding: 7px 10px; }

/* ==========================================================================
   Documents table
   ========================================================================== */

.docs-table { width: 100%; }

.doc-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 20px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}

.doc-row:first-child { border-top: 1px solid var(--rule); }

.doc-name {
    font-family: var(--serif);
    font-size: 1rem;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--rule-strong);
}
.doc-name:hover { text-decoration-color: var(--accent); color: var(--accent); }

.doc-meta { font-size: 0.84rem; color: var(--ink-faint); white-space: nowrap; }

.doc-count {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.empty-note {
    padding: 30px 0;
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-faint);
}

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-panel { max-width: 100%; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }

.admin-table th {
    text-align: left;
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--rule-strong);
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 700;
}

.admin-table td {
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: 0; }

.pill {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--rule-strong);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.pill-on { border-color: var(--good); color: var(--good); background: var(--good-wash); }
.pill-off { border-color: var(--rule-strong); color: var(--ink-faint); }
.pill-admin { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.pill-danger { border-color: var(--danger); color: var(--danger); background: var(--danger-wash); }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-bottom: 28px;
}

.stat-cell { background: var(--paper-raised); padding: 16px 18px; }

.stat-cell .stat-figure {
    font-family: var(--serif);
    font-size: 1.7rem;
    line-height: 1.1;
}

.stat-cell .stat-label {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.notice {
    padding: 12px 16px;
    margin-bottom: 22px;
    background: var(--paper-sunk);
    border-left: 3px solid var(--rule-strong);
    font-size: 0.9rem;
}

.notice-warn { background: var(--danger-wash); border-left-color: var(--danger); }
.notice-good { background: var(--good-wash); border-left-color: var(--good); }

.secret-reveal {
    margin: 14px 0;
    padding: 14px 16px;
    background: var(--paper-sunk);
    border: 1px dashed var(--rule-strong);
}

.secret-reveal code {
    display: block;
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    font-size: 0.9rem;
    word-break: break-all;
    user-select: all;
}

.admin-form { max-width: 32rem; margin-bottom: 8px; }

.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-row .field { flex: 1 1 12rem; margin-bottom: 0; }

.dict-entry { padding: 12px 0; border-bottom: 1px solid var(--rule); }

.dict-entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dict-canonical { font-family: var(--serif); font-size: 1rem; }
.dict-aliases { font-size: 0.86rem; color: var(--ink-soft); margin-top: 3px; }

.enrol-steps {
    margin: 0;
    padding-left: 20px;
    font-family: var(--serif);
}

.enrol-steps li { margin-bottom: 24px; }

.enrol-qr {
    margin: 16px 0;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--rule);
    display: inline-block;
    line-height: 0;
}

.enrol-qr svg { display: block; }

.enrol-secret { font-size: 0.86rem; color: var(--ink-soft); font-family: var(--sans); }
.enrol-secret code { user-select: all; word-break: break-all; }

.enrol-form { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.enrol-form input { max-width: 12rem; }

/* ==========================================================================
   Overlays
   ========================================================================== */

.selection-prompt {
    position: fixed;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--paper-raised);
    border: 1px solid var(--rule-strong);
    box-shadow: 0 2px 8px rgba(31, 28, 23, 0.13);
}

.selection-preview {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 0.82rem;
}

.evaluation-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(40rem, 100%);
    z-index: 70;
    background: var(--paper-raised);
    border-left: 1px solid var(--rule-strong);
    box-shadow: -6px 0 20px rgba(31, 28, 23, 0.1);
    overflow-y: auto;
}

.evaluation-inner { padding: 26px 30px 36px; }

.evaluation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 3px double var(--rule-strong);
}

.evaluation-header h3 { font-size: 1.2rem; margin-bottom: 4px; }
.evaluation-actions { display: flex; align-items: center; gap: 8px; }

.evaluation-content {
    font-family: var(--serif);
    font-size: 0.96rem;
    max-width: var(--measure);
}

.evaluation-content h2 { font-size: 1.1rem; margin: 22px 0 8px; }
.evaluation-content h3 { font-size: 1rem; margin: 18px 0 6px; }
.evaluation-content p { margin: 0 0 12px; }
.evaluation-content ul, .evaluation-content ol { margin: 0 0 14px; padding-left: 22px; }
.evaluation-content code { font-size: 0.88em; background: var(--paper-sunk); padding: 1px 4px; }

.chat-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule); }

.chat-log { margin-bottom: 14px; }

.chat-turn { margin-bottom: 14px; }

.chat-turn .chat-role {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 3px;
}

.chat-turn .chat-body {
    font-family: var(--serif);
    font-size: 0.94rem;
    padding-left: 12px;
    border-left: 2px solid var(--rule);
}

.chat-turn.is-user .chat-body { border-left-color: var(--accent); }

.chat-form { display: flex; gap: 8px; }
.chat-input { flex: 1; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 90;
    padding: 11px 20px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.9rem;
    max-width: 90vw;
}

.toast.is-error { background: var(--danger); color: #fff; }

.edit-popover {
    position: fixed;
    z-index: 80;
    width: 20rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule-strong);
    box-shadow: 0 3px 14px rgba(31, 28, 23, 0.14);
}

.popover-arrow { display: none; }

.popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
}

.popover-header h4 {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.popover-body { padding: 16px; }

.input-group { margin-bottom: 14px; }
.input-group strong { font-family: var(--mono); font-size: 0.88rem; word-break: break-word; }

.toggle-group { display: flex; align-items: center; justify-content: space-between; }
.toggle-group .label { margin-bottom: 0; }

.switch-container { display: flex; align-items: center; gap: 8px; }
.switch-input { width: auto; }
.switch-label { margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
                font-size: 0.9rem !important; color: var(--ink) !important; }

.checkbox-group { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.checkbox-group input { width: auto; }
.checkbox-group label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.88rem;
                        font-weight: 400; color: var(--ink); }

.popover-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--rule);
    text-align: right;
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */

@media (max-width: 900px) {
    .review { grid-template-columns: 1fr; }
    .review-aside { position: static; }
    .document-text { padding: 22px 20px; max-height: none; }
}

@media (max-width: 640px) {
    .app-shell { padding: 0 16px 48px; }
    .login-sheet { padding: 32px 24px 26px; }
    .masthead-inner { align-items: flex-start; flex-direction: column; }
    .tabs { gap: 20px; }
    .doc-row { grid-template-columns: 1fr; gap: 6px; }
    .row-actions { justify-content: flex-start; }
    .evaluation-panel { width: 100%; }
    .action-row { flex-direction: column; align-items: stretch; }
}

@media print {
    .masthead-account, .tabs, .action-bar, .review-aside, .evaluation-panel { display: none !important; }
    body { background: #fff; }
    .document-text { border: 0; max-height: none; padding: 0; }
}