/*
  Shared design tokens and component classes for every page: a quiet,
  paper-toned theme — off-white ground, warm ink, boxed outlines and
  underline fields, one serif family throughout, color used only where it
  does real work (a positive action, a destructive one). Nothing filled
  unless it has to be.

  Custom properties pierce shadow DOM, so a component's own <style> can use
  these vars without importing this file itself; component CLASSES (.btn,
  .card, ...) do not cross the shadow boundary — shadow-DOM components adopt
  this stylesheet directly via static/component-theme.js instead of linking
  it in light DOM.

  Light values live in :root. A manual choice (<html data-theme="dark|light">,
  set by the nav's theme toggle and persisted to localStorage) always wins;
  with no manual choice, the OS preference decides.
*/
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;1,400;1,500&display=swap");

:root {
    color-scheme: light dark;
    --paper: #fdfcf9;
    --ink: #2e2a24;
    --ink-soft: #6d6557;
    --line: #ddd5c3;
    --accent: #7a5c3e;
    --card: #ffffff;
    --chip: #efe7d6;
    --neutral: #f1ede2;
    --chip-on: #7a5c3e;
    --chip-on-ink: #fdfcf9;
    --danger: #a3432f;
    /* A filled shape that says nothing — an unlit status dot. Quieter than
       --line, which is a rule, and never a signal colour. */
    --muted-fill: #cdc4b0;

    --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

    --radius-sm: 0.15rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.4rem;
    --radius-pill: 10px;

    --shadow-sm: 0 1px 2px rgba(30, 26, 18, 0.05);
    --shadow-md: 0 2px 6px rgba(30, 26, 18, 0.06);
    --shadow-lg: 0 6px 20px rgba(30, 26, 18, 0.1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --paper: #1c1a16;
        --ink: #ece7da;
        --ink-soft: #a39b88;
        --line: #3c362b;
        --accent: #c9a876;
        --card: #242019;
        --chip: #3f3527;
        --neutral: #2a261e;
        --chip-on: #c9a876;
        --chip-on-ink: #1c1a16;
        --danger: #e08b7d;
        --muted-fill: #55503f;
    }
}

:root[data-theme="dark"] {
    --paper: #1c1a16;
    --ink: #ece7da;
    --ink-soft: #a39b88;
    --line: #3c362b;
    --accent: #c9a876;
    --card: #242019;
    --chip: #3f3527;
    --neutral: #2a261e;
    --chip-on: #c9a876;
    --chip-on-ink: #1c1a16;
    --danger: #e08b7d;
    --muted-fill: #55503f;
}

:root[data-theme="light"] {
    --paper: #fdfcf9;
    --ink: #2e2a24;
    --ink-soft: #6d6557;
    --line: #ddd5c3;
    --accent: #7a5c3e;
    --card: #ffffff;
    --chip: #efe7d6;
    --neutral: #f1ede2;
    --chip-on: #7a5c3e;
    --chip-on-ink: #fdfcf9;
    --danger: #a3432f;
    --muted-fill: #cdc4b0;
}

* {
    box-sizing: border-box;
}

/* The same origin rule that bites <dialog> below bites the hidden attribute:
   it is a user-agent `display: none`, so any author rule setting display on the
   element wins and the element stays on screen. `.btn svg { display: block }`
   was enough to show both theme-toggle icons at once. Restated with !important
   because the author rules it has to beat are more specific than [hidden]. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover {
    color: var(--ink);
}

.text-muted {
    color: color-mix(in srgb, var(--ink) 58%, transparent);
    font-style: italic;
}

:focus {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
}

/* buttons — outlined boxes; filled only for a positive action */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    padding: 7px 16px;
    border-radius: var(--radius-md);
    transition:
        background 0.12s ease,
        opacity 0.12s ease;
    text-decoration: none;
}
.btn svg {
    display: block;
}
.btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}
.btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 85%, black);
}
.btn-secondary {
    background: transparent;
}
.btn-ghost {
    border-color: transparent;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 7px 4px;
}
.btn-ghost:hover:not(:disabled) {
    color: var(--ink);
    background: transparent;
}
.btn-icon {
    padding: 7px;
    border-radius: 50%;
}
.btn-block {
    width: 100%;
}
.btn.danger {
    color: var(--danger);
    border-color: var(--danger);
}
.btn.danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* fields — underline inputs, italic quiet labels, like a paper form */
.field > label {
    display: block;
    font-size: 12.5px;
    font-style: italic;
    margin-bottom: 4px;
    color: color-mix(in srgb, var(--ink) 65%, transparent);
}
.input {
    width: 100%;
    padding: 6px 2px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}
.input::placeholder {
    color: color-mix(in srgb, var(--ink) 45%, transparent);
    font-style: italic;
}
.input:hover {
    border-bottom-color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.input:focus-visible {
    border-bottom-color: var(--accent);
    outline: none;
}
textarea.input {
    min-height: 90px;
    resize: vertical;
    border: 1px solid var(--line);
    padding: 8px 10px;
}

/* cards — plain paper surfaces, a hairline border, no shadow noise */
.card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px;
    border-radius: var(--radius-md);
    background: var(--card);
    border: 1px solid var(--line);
}
.card-kicker {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.card-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
}
.card-body {
    font-size: 14px;
    opacity: 0.85;
    margin: 0;
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.tag {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-style: italic;
}
.tag-accent {
    background: var(--chip);
    color: var(--ink);
}
.tag-outline {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
}
.tag-neutral {
    background: var(--neutral);
    color: var(--ink);
}

/* navigation — a hairline rule, a serif wordmark, plain underlined links */
.nav {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--line);
}
.nav-brand {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    margin-right: auto;
}
.nav a {
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}
.nav a:hover,
.nav a[aria-current="page"] {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Held work — the one strip on the page meant to be hard to miss: model-heavy
   work waiting for the reader to say when it runs. Once they have, it quiets
   to a plain note. */
.held-work {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 11px 13px;
    font-size: 14px;
    background: color-mix(in srgb, var(--accent) 16%, var(--paper));
    border-bottom: 2px solid var(--accent);
}
.held-work.quiet {
    padding: 7px 13px;
    background: var(--neutral);
    border-bottom: 1px solid var(--line);
}
.held-work p {
    flex: 1 1 22rem;
    margin: 0;
}
.held-work .held-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Page head — a title with its one-line gloss, and opposite it the one thing
   the page is for: a search box, or its primary action. */
.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 19px;
}
.page-head p {
    margin: 4px 0 0;
}

/* Hairline rows. The shelf and the collections list are the same object — a
   flat run of items separated by a rule, not a stack of cards. */
.rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rows > li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    transition: background 0.12s ease;
}
.rows > li:hover {
    background: color-mix(in srgb, var(--ink) 3%, transparent);
}

.table {
    width: 100%;
    border-collapse: collapse;
}
.table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    padding: 6px;
    border-bottom: 1px solid var(--line);
}
.table td {
    padding: 6px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.table tbody tr:hover {
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* Native <dialog> + ::backdrop, not a plain overlay div — better focus
   handling and Esc-to-close than the mockup's div-based stand-in. */
/* display only while open. The user agent closes a <dialog> with
   `dialog:not([open]) { display: none }`, and an author rule setting display on
   the same element beats it whatever its specificity — origin decides first.
   A plain `.dialog { display: flex }` therefore leaves every dialog on the page
   standing open. */
.dialog[open] {
    display: flex;
}
.dialog {
    width: min(420px, 100%);
    flex-direction: column;
    gap: 9px;
    padding: 19px;
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
}
.dialog::backdrop {
    background: rgb(0 0 0 / 0.25);
}
.dialog-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 19px;
}
.dialog-body {
    font-size: 14px;
    opacity: 0.85;
}
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

/* Selection checkboxes are always present and tappable (works on touch, not
   just hover) but sit at low contrast until used. */
.doc-check {
    opacity: 0.4;
    transition: opacity 0.12s ease;
}
.doc-row:hover .doc-check,
.doc-row.selected .doc-check,
.doc-check:focus-visible {
    opacity: 1;
}
