/*
 * Pediment — the Athenana identity. Values are from the design package's own
 * README, not sampled from a render, so they are exact rather than close.
 *
 * The mark is three columns under a lintel: Athena, a temple. That is also why
 * the accent is split — Oxblood carries the lintel on light grounds, Terracotta
 * on dark ones. They are not interchangeable and neither is a "brand colour"
 * to reach for generally.
 */
:root {
    --ink: #22201D;        /* Ink       — body text, the columns */
    /*
     * Muted, and a darker sibling for small text.
     *
     * The package specifies #8A8377 for secondary text, but it measures
     * 3.33:1 on Paper and 2.96:1 on the page ground — both under AA's 4.5:1
     * for body copy, and card descriptions and site names are body copy. It
     * is the identity's own value, so it is kept for anything large or
     * graphic; --mute-text is the same hue at 75% and clears AA on both
     * surfaces (5.37:1 and 4.78:1).
     *
     * A deviation from the package, deliberate and recorded. If the design
     * intends #8A8377 for small text everywhere, that is a conversation to
     * have rather than something to silently ship failing.
     */
    --mute: #8A8377;       /* Muted     — large or graphic use only */
    --mute-text: #676259;  /* the same hue, dark enough for small text */
    --paper: #F4F1EB;      /* Paper     — surfaces that sit above the ground */
    --ground: #E8E4DD;     /* the page behind those surfaces */
    --accent: #6B2A2A;     /* Oxblood   — accent ON LIGHT backgrounds */
    --accent-dark: #C97B5A;/* Terracotta— accent ON DARK backgrounds */

    /* Derived, not invented: the rule line is the ground darkened just enough
       to read against Paper, and the note tint is Terracotta at 12%. */
    --line: #D8D2C7;
    --warn: #6B2A2A;
    --note: rgba(201, 123, 90, 0.12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    /*
     * The identity specifies Archivo. It is NOT loaded here: a Google Fonts
     * link would add a third-party request to every page of a tool that was
     * self-hosted on purpose, and self-hosting the file needs a download that
     * has not been agreed. This stack is the closest grotesque already present
     * on the platforms this runs on. Swapping in Archivo later is one @font-face
     * and this line -- nothing else depends on it.
     */
    font: 15px/1.55 "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

/* The lockup: mark, then wordmark. The README fixes both the gap (one third of
   the mark width) and the wordmark's setting, so these are its numbers. */
header .brand { display: flex; align-items: center; gap: 7px; }
header .brand img { display: block; height: 22px; width: auto; }
header .brand span {
    font-weight: 500;
    letter-spacing: -0.035em;
    text-transform: lowercase;
    font-size: 19px;
}
header nav { display: flex; align-items: center; gap: 16px; }
header nav a { color: var(--mute-text); text-decoration: none; font-size: 14px; }
header nav a:hover { color: var(--ink); }

main { max-width: 1100px; margin: 0 auto; padding: 28px 22px; }
h1 { font-size: 24px; letter-spacing: -0.02em; }

.btn {
    display: inline-block;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    font: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.btn.secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }

.notice { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.error { color: var(--warn); margin-bottom: 14px; }

table { width: 100%; border-collapse: collapse; background: var(--paper); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--mute); font-weight: 500; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; color: var(--mute); margin-bottom: 4px; }
.field small { font-weight: 400; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    background: var(--paper);
}

/* --- board ------------------------------------------------------------ */

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.search {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    background: var(--paper);
}

.switch { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.switch button {
    border: 0;
    background: var(--paper);
    color: var(--mute);
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.board { column-count: 4; column-gap: 14px; }
@media (max-width: 1000px) { .board { column-count: 3; } }
@media (max-width: 700px)  { .board { column-count: 2; } }
@media (max-width: 460px)  { .board { column-count: 1; } }

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    break-inside: avoid;
    margin-bottom: 14px;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.card:hover { border-color: var(--mute); }
.card .pad { padding: 12px 14px; }
.card .ttl { font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.card .src { color: var(--mute-text); font-size: 12px; }
.card .quote { font-style: italic; line-height: 1.45; }
.card.note { background: var(--note); }
.card .tags { margin-top: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.card .tags span {
    background: #f1efeb;
    color: var(--mute-text);
    border-radius: 99px;
    padding: 2px 8px;
    font-size: 11px;
}
.card .noteflag { color: var(--mute); font-size: 12px; margin-top: 8px; }
/* Enrichment is queued and cron runs it once a minute, so this can sit on a
   card for a while. Deliberately quiet: it reports normal progress, not a
   problem, and it disappears on its own. */
.card .working { color: var(--mute-text); font-size: 12px; margin-top: 8px; font-style: italic; }
p.working { color: var(--mute-text); font-size: 13px; font-style: italic; }

/* List layout: the same cards, a different flow. */
.board.as-list { column-count: 1; }
.board.as-list .card { display: flex; align-items: center; gap: 12px; margin-bottom: 1px; border-radius: 0; }
.board.as-list .card .pad { padding: 9px 12px; flex: 1; }

/* The trailing pad holds tags and the note marker. Without this it also
   takes flex:1 and they drift into the middle of the row. */
.board.as-list .card .pad + .pad { flex: none; padding-top: 9px; text-align: right; }
.board.as-list .card .tags { margin-top: 0; justify-content: flex-end; }
.board.as-list .card .noteflag { margin-top: 4px; }
.board.as-list .card .working { margin-top: 4px; text-align: right; }

.empty { color: var(--mute-text); padding: 40px 0; }

/* The brand is a link now, so it must not inherit link styling. */
header .brand { color: var(--ink); text-decoration: none; }

/*
 * Oxblood, used sparingly and only where the identity says it belongs: on
 * light grounds, marking the active thing. The README calls it an accent, not
 * a fill — the mark uses it for a single 4.5px lintel above three ink columns,
 * and that ratio is the guide. Terracotta is its counterpart for dark grounds
 * and is deliberately unused here, because this interface has none.
 */
header nav a.is-active,
header nav a:hover { color: var(--accent); }

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

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

/* Ink on Oxblood is 3.1:1 — under AA for body text, fine for a 2px rule. It is
   a marker here, never a background for small type. */
.card .tags span { color: var(--mute-text); }