/* ============================================================================
   Classified Doc — theme.  Scoped .cl-app.
   Wrapper: <div class="tool-app cl-app">
   Load order: styles.css → tool-base.css → this file.

   Do NOT re-declare anything tool-base.css already owns (body print reset, the
   ten light paper variables, .wrap, the .print-only masthead, the .grid print
   flex fix, break-inside on the atom list, print-color-adjust on
   .chart-track/.chart-fill). To override one of those, double this file's own
   wrapper class on that single rule — never wholesale.

   NOTHING IS DOUBLED IN THIS FILE, and that is correct rather than an omission.
   tool-base's print rules are written `.tool-app.tool-app …` = three classes,
   which already outranks this file's two-class screen rules even though this
   file loads later. Doubling here would only be needed to beat tool-base's
   PRINT rules, and this tool wants none of them changed.

   Touch sizes are px, never rem: styles.css:1142 steps :root down to 15px at
   480px, so a rem-based 44px target renders 41px on exactly the phones that
   need it most. Text inputs never below 16px on a phone — iOS Safari zooms the
   viewport on focus below that and does not zoom back out.
   ========================================================================= */

.cl-app {
    /* screen palette → site tokens. Same ten local names tool-base.css
       re-declares for paper; that pairing is the whole contract. */
    --bg: var(--color-bg-primary);
    --card: var(--color-surface);
    --raised: var(--color-raised);
    --ink: var(--color-text-primary);
    --dim: var(--color-text-secondary);
    --muted: var(--color-text-muted);
    --line: var(--color-border);
    --line-strong: var(--color-border-strong);
    --accent: var(--color-primary);
    --accent-soft: rgba(229, 163, 68, 0.12);

    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
}

/* The site's h1/h2/h3/p carry display-font and colour rules that must not reach
   into a tool's dense UI. */
.cl-app h1,
.cl-app h2,
.cl-app h3,
.cl-app p {
    font-family: inherit;
    color: inherit;
    margin: 0;
    letter-spacing: normal;
}

/* THE HIDDEN ATTRIBUTE LOSES TO ANY AUTHOR `display`. [hidden] is only a UA
   rule, so `.grid { display: grid }` silently defeats node.hidden = true — the
   logged pro/con defect, where a test asserting `.hidden === true` passed the
   whole time while the element stayed on screen. This tool hides a grid (#app),
   a flex bar (#bar) and several blocks, so it needs the cover. Assert COMPUTED
   DISPLAY in tests, never the property. */
.cl-app [hidden] {
    display: none !important;
}

.cl-app .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 112px 2rem 96px;   /* 112px clears the fixed navbar */
}

.cl-app .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== layout =========================================================== */

.cl-app .grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.cl-app .col-side .panel {
    position: sticky;
    top: 92px;
}

.cl-app .cl-gate {
    max-width: 720px;
    margin: 0 auto;
}

/* ===== cards ============================================================ */

.cl-app .panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}

.cl-app .panel > h2 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}

.cl-app .panel > .body {
    padding: 18px;
}

.cl-app .cl-lead {
    color: var(--dim);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 18px;
}

.cl-app .footnote {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.55;
    margin-top: 12px;
}

.cl-app .src-note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.5;
}

.cl-app code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--accent);
}

/* ===== controls ========================================================= */

.cl-app .field {
    margin-bottom: 14px;
}

.cl-app .field > label {
    display: block;
    font-size: 0.82rem;
    color: var(--dim);
    margin-bottom: 6px;
}

.cl-app input[type="text"],
.cl-app input[type="password"],
.cl-app input[type="date"],
.cl-app textarea {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 15px;
    padding: 9px 11px;
    min-height: 44px;          /* px, and unconditional — not only on phones */
    background: var(--raised);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.cl-app textarea {
    font-family: var(--font-primary);
    line-height: 1.65;
    resize: vertical;
    min-height: 320px;
}

.cl-app input:focus-visible,
.cl-app textarea:focus-visible,
.cl-app button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cl-app .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cl-app .cl-file {
    display: none;
}

/* ===== buttons ========================================================== */

.cl-app .cl-btn {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 10px 16px;
    min-height: 44px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    /* Kills the 300ms double-tap-zoom delay on touch. */
    touch-action: manipulation;
}

.cl-app .cl-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #14100a;
    font-weight: 600;
}

/* Muted at rest, error red only on hover and press — the convention both
   shipped tools already set (`.pc-del`, `button.danger`). A delete control that
   sits permanently red reads as an error state on the page, and DESIGN.md
   demoted red to semantic error only. It keeps its hairline because it is a
   labelled standalone button, not a quiet glyph in a dense row. */
.cl-app .cl-danger {
    color: var(--muted);
    border-color: var(--line);
}

@media (hover: hover) {
    .cl-app .cl-danger:hover {
        color: var(--color-error);
        border-color: var(--color-error);
    }
}

.cl-app .cl-danger:active {
    color: var(--color-error);
    border-color: var(--color-error);
}

.cl-app .cl-small {
    font-size: 13px;
    padding: 8px 12px;
}

.cl-app .cl-wide {
    width: 100%;
    margin-bottom: 12px;
}

/* Every :hover is gated. Repo-wide there were zero such gates until the pro/con
   list: a touch browser fires hover on tap and leaves it applied until the next
   tap elsewhere, so a button kept an amber border while pointing at a control
   the user was no longer touching. :active below is the deliberate replacement
   — feedback while the finger is down, nothing after it lifts. */
@media (hover: hover) {
    .cl-app .cl-btn:hover {
        border-color: var(--accent);
    }

    .cl-app .cl-primary:hover {
        background: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
    }
}

.cl-app .cl-btn:active {
    background: var(--raised);
    border-color: var(--accent);
}

.cl-app .cl-primary:active {
    background: var(--color-primary-hover);
}

.cl-app .cl-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

.cl-app .cl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* ===== messages ========================================================= */

.cl-app .cl-err:empty,
.cl-app .cl-busy[hidden] {
    display: none;
}

.cl-app .cl-err {
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 0.86rem;
    color: var(--color-error);
    background: rgba(229, 72, 77, 0.08);
    border: 1px solid rgba(229, 72, 77, 0.35);
    border-radius: var(--radius-sm);
}

/* Not an error — the single most important sentence on the create screen. */
.cl-app .cl-warn {
    margin-top: 14px;
    padding: 10px 12px;
    font-size: 0.86rem;
    color: var(--ink);
    background: var(--accent-soft);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
}

.cl-app .cl-busy {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 12px;
}

.cl-app .cl-points {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.cl-app .cl-points li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--dim);
}

/* A hairline tick rather than a bullet glyph — the same line-work vocabulary as
   the hero figures and the rules everywhere else. */
.cl-app .cl-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 1px;
    background: var(--accent);
}

.cl-app .cl-points b {
    color: var(--ink);
    font-weight: 600;
}

.cl-app .cl-facts {
    margin-top: 22px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.cl-app .cl-facts > summary {
    font-size: 0.86rem;
    color: var(--accent);
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.cl-app .cl-facts-body p {
    font-size: 0.88rem;
    color: var(--dim);
    line-height: 1.65;
    margin-bottom: 12px;
}

.cl-app .cl-facts-body b {
    color: var(--ink);
    font-weight: 600;
}

/* ===== the bar ========================================================== */

/* Sticky, and that is a consequence of the no-autosave decision rather than a
   flourish: Save is the only thing standing between a long session and lost
   writing, so it must not scroll out of reach while the user is writing. Found
   by a real-mouse check that measured the bar at top=-67 after typing.
   z-index stays far below the navbar's 1000 — the documented rule for anything
   this site lifts, since the navbar is fixed over the top 80px and wins presses. */
.cl-app .cl-bar {
    position: sticky;
    top: 92px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.cl-app .cl-bar-id {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    flex: 1 1 240px;
}

.cl-app .cl-bar-name {
    font-weight: 600;
    font-size: 1rem;
}

.cl-app .cl-bar-file {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
}

.cl-app .cl-dot {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

.cl-app .cl-bar-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cl-app .cl-savenote {
    flex: 1 1 100%;
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.5;
}

.cl-app .cl-bar .cl-err {
    flex: 1 1 100%;
    margin-top: 0;
}

.cl-app .cl-btn.is-dirty {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ===== entry list ======================================================= */

.cl-app .cl-count {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 8px;
}

.cl-app .cl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
    /* Gecko needs this explicitly; color-scheme: dark alone left .table-scroll
       drawing a solid white bar across a dark card elsewhere on this site. */
    scrollbar-color: var(--line-strong) var(--card);
}

.cl-app .cl-item {
    border-bottom: 1px solid var(--line);
}

.cl-app .cl-pick {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    padding: 10px 10px 10px 12px;
    min-height: 44px;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    touch-action: manipulation;
}

.cl-app .cl-item.is-cur .cl-pick {
    background: var(--raised);
    border-left-color: var(--accent);
}

@media (hover: hover) {
    .cl-app .cl-pick:hover {
        background: var(--raised);
    }
}

.cl-app .cl-pick:active {
    background: var(--raised);
}

.cl-app .cl-d {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--muted);
    letter-spacing: 0.06em;
}

.cl-app .cl-t {
    display: block;
    font-size: 0.92rem;
    color: var(--ink);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.cl-app .cl-s {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.cl-app .cl-empty {
    color: var(--muted);
    font-size: 0.82rem;
    padding: 1.25rem 0;
    text-align: center;
}

.cl-app .cl-editor-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.cl-app .cl-editor-foot .cl-count {
    margin-bottom: 0;
}

/* Destructive control gets the whole remaining line between it and its
   neighbour — a gap bump is not separation. */
.cl-app .cl-editor-foot .cl-danger {
    margin-left: auto;
}

/* ===== the printed document ============================================= */

/* Screen-invisible, paper-visible. Rendered from state as plain text, which is
   why this tool needs no print mirrors. */
.cl-app .cl-read {
    display: none;
}

/* ===== narrow ============================================================ */

@media (max-width: 900px) {
    .cl-app .wrap {
        padding: 96px 1rem 72px;
    }

    /* align-items: stretch is the required half-two — on a COLUMN flex box the
       screen rule's `align-items: start` is the cross axis and shrink-wraps
       every card. Same trap tool-base documents for print. */
    .cl-app .grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .cl-app .col-side .panel {
        position: static;
    }

    .cl-app .cl-list {
        max-height: 40vh;
    }
}

/* px throughout — see the header note. */
@media (max-width: 620px) {

    .cl-app input[type="text"],
    .cl-app input[type="password"],
    .cl-app input[type="date"],
    .cl-app textarea {
        /* 16px LITERAL. Below this iOS Safari zooms the viewport on focus and
           does not zoom back out, so every tap on an entry leaves the page
           magnified. */
        font-size: 16px;
        min-height: 44px;
        padding: 10px 12px;
    }

    .cl-app .row2 {
        grid-template-columns: 1fr;
    }

    .cl-app .cl-btn {
        min-height: 44px;
    }

    /* The bar wraps to three rows on a phone; sticking it there would eat a
       third of the viewport that the writing needs more. */
    .cl-app .cl-bar {
        position: static;
    }

    .cl-app .cl-bar-tools {
        width: 100%;
    }

    .cl-app .cl-bar-tools .cl-btn {
        flex: 1 1 auto;
    }

    .cl-app .panel > .body {
        padding: 1rem;
    }

    .cl-app textarea {
        min-height: 260px;
    }
}

/* ===== print ============================================================
   The report is the deliverable: the editor, the entry list and the bar are all
   `no-print` in the markup, and what prints is the reading view rendered from
   state. Consequence worth knowing — there is not one form control in the
   printed area, so this tool needs NO print mirrors. If a future revision
   prints the editor, that changes and the mirror contract in CLAUDE.md applies.

   Everything shared — body reset, the light palette, .wrap, the .print-only
   masthead, the .grid flex fix for Gecko, the page-break atoms — comes from
   tool-base.css and is deliberately not repeated here.
   ===================================================================== */
@media print {

    .cl-app .cl-read {
        display: block;
    }

    .cl-app .panel {
        border: 0;
        margin: 0;
    }

    .cl-app .cl-entry {
        /* An atom, not a card: break-inside on a card sends anything too tall
           for the remaining space to a fresh sheet and leaves half-empty pages.
           A long entry must be allowed to split. */
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line);
    }

    .cl-app .cl-eh {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 4px;
        /* Keep a heading with at least the start of its entry. */
        break-after: avoid;
    }

    .cl-app .cl-ed {
        font-family: var(--font-mono);
        font-size: 9pt;
        color: var(--muted);
        letter-spacing: 0.06em;
    }

    .cl-app .cl-et {
        font-size: 12pt;
        font-weight: 700;
    }

    .cl-app .cl-eb {
        /* The body is stored with real newlines and printed as text, so it must
           keep them — and wrap. Without pre-wrap every paragraph break in the
           document collapses into one run-on block. */
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font-size: 10.5pt;
        line-height: 1.5;
    }
}