* { box-sizing: border-box; }

/* The `hidden` attribute is only `display: none` in the user-agent stylesheet,
   so ANY author rule setting `display` on the same element silently defeats it
   — which is how the board's outcome dialog came to show the Lost reason
   selector on a Won close (#83): `.field` below sets `display: flex`.
   `!important` is required, not lazy: `[hidden]` and `.field` have equal
   specificity (0,1,0), so without it the winner is source order, which would
   work today and break the next time a `display` rule lands below this one. */
[hidden] { display: none !important; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1a1a1a;
    margin: 0;
    background: #fafafa;
}

a { color: #0066cc; }
a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #1a1a1a;
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 1000;
}
.skip-link:focus { top: 0; }

.site-header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.site-brand a {
    font-weight: 600;
    text-decoration: none;
    color: #1a1a1a;
}

.site-nav ul {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-nav a {
    text-decoration: none;
}

.user-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-display {
    color: #555;
    font-size: 0.9em;
}

.logout-form { display: inline; margin: 0; }

.logout-button {
    background: none;
    border: 1px solid #ccc;
    color: #1a1a1a;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
}
.logout-button:hover { background: #f0f0f0; }

main {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* The Enquiries board opts out of the reading measure (#93). Six 200px columns
   need 1280px (#109 lowered the floor from 260px), so inside the 1152px content
   area five of six fit and the pipeline's two ends can never be on screen
   together. Board page only — every other template renders class="" and is
   unaffected. */
main.main-wide { max-width: none; }

h1, h2, h3 { margin-top: 0; }

.messages ul {
    list-style: none;
    margin: 1rem 1.5rem 0;
    padding: 0;
    max-width: 1200px;
}

.message {
    padding: 0.75rem 1rem;
    border-radius: 3px;
    margin-bottom: 0.5rem;
}
.message-success { background: #e6f4ea; color: #1e6f3f; }
.message-info    { background: #e7f1fb; color: #1c4f8a; }
.message-warning { background: #fff4d4; color: #7a5400; }
.message-error   { background: #fce4e4; color: #8a1c1c; }

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e0e0e0;
}
th { background: #f5f5f5; font-weight: 600; }

label { display: inline-block; margin-bottom: 0.25rem; }

input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="password"],
input[type="url"],
select,
textarea {
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font: inherit;
}

button.primary,
input[type="submit"] {
    padding: 0.5rem 1rem;
    background: #0066cc;
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font: inherit;
}
button.primary:hover,
input[type="submit"]:hover { background: #0052a3; }

ul.errorlist {
    list-style: none;
    margin: 0.25rem 0;
    padding: 0;
    color: #8a1c1c;
}

.signin-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #0066cc;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}
.signin-button:hover {
    background: #0052a3;
    text-decoration: none;
}

/* ============================================================
   Reusable UI components (added Step 12).
   Tokens below name the existing palette so a colour pass is a
   single-place edit. Existing rules above intentionally keep
   their literal values to avoid touching Rolls/Inks/core.
   ============================================================ */
:root {
    --ground: #fafafa;
    --surface: #fff;
    --ink: #1a1a1a;
    --muted: #555;
    --faint: #777;
    --border: #e0e0e0;
    --border-strong: #ddd;
    --accent: #0066cc;
    --accent-hover: #0052a3;
    --accent-tint: #eef4fc;
    --ok-bg: #e6f4ea;
    --ok-fg: #1e6f3f;
    --hover: #f2f2f2;
    --radius: 3px;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Layout utilities */
.stack   { display: flex; flex-direction: column; gap: 1rem; }
.row     { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.spread  { justify-content: space-between; }
.narrow  { max-width: 640px; }
.subhead { margin: 0; font-size: 1.15rem; }
.list-reset { list-style: none; margin: 0; padding: 0; }

/* Page header */
.page-header { margin-bottom: 1.5rem; }
.page-header .eyebrow {
    text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 0.72rem; font-weight: 600; color: var(--faint); margin: 0 0 0.25rem;
}
.page-header h1 { font-size: 1.6rem; margin: 0; text-wrap: balance; }
.page-meta { margin-top: 0.5rem; color: var(--muted); font-size: 0.9rem; }

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}
.card h2, .card h3 { margin: 0 0 0.5rem; }
.card h2 { font-size: 1.15rem; }
.card h3 { font-size: 0.95rem; }
.card form + form { margin-top: 0.75rem; }
.card-grid { display: grid; gap: 1rem; }
.card-title { font-size: 1.05rem; font-weight: 600; }
.card-sub { color: var(--muted); font-size: 0.9rem; }
.card-highlight { border-left: 3px solid var(--accent); }

/* Key/value detail table */
.kv th { width: 38%; }

/* Chips — reuse the message palette */
.chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.1rem 0.55rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; white-space: nowrap;
}
.chip::before {
    content: ""; width: 0.45rem; height: 0.45rem;
    border-radius: 50%; background: currentColor; opacity: 0.7;
}
.chip-todo    { background: #eef0f2; color: #5a636b; }
.chip-active  { background: #e7f1fb; color: #1c4f8a; }
.chip-done    { background: var(--ok-bg); color: var(--ok-fg); }
.chip-warning { background: #fff4d4; color: #7a5400; }

/* Buttons — including link-styled-as-button */
.btn, a.btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem; border-radius: var(--radius);
    font: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
}
.btn:hover, a.btn:hover { background: var(--hover); text-decoration: none; }
.btn-primary, a.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover, a.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Flow stepper — the document lifecycle */
.stepper { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.stepper li {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.75rem; border-radius: var(--radius);
    font-size: 0.85rem; background: #f1f2f4; color: var(--faint);
}
.stepper .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    font-size: 0.72rem; font-weight: 600; background: #d9dde1; color: #fff;
}
.stepper .done { background: var(--ok-bg); color: var(--ok-fg); }
.stepper .done .num { background: var(--ok-fg); }
.stepper .current { background: var(--accent-tint); color: var(--accent-hover); font-weight: 600; }
.stepper .current .num { background: var(--accent); }

/* Questionnaire: chat transcript */
.chat-layout { display: grid; grid-template-columns: 1fr 260px; gap: 1.25rem; align-items: start; }
.transcript { display: flex; flex-direction: column; gap: 0.75rem; }
.msg { max-width: 78%; padding: 0.6rem 0.85rem; border-radius: 10px; }
.msg .who { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin-bottom: 0.2rem; }
.msg-assistant { align-self: flex-start; background: #f1f3f5; border-bottom-left-radius: 2px; }
.msg-operator  { align-self: flex-end; background: var(--accent-tint); border-bottom-right-radius: 2px; }
.chat-input { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.chat-input textarea { width: 100%; min-height: 4.5rem; resize: vertical; }

/* Coverage sidebar */
.coverage { display: flex; flex-direction: column; gap: 0.5rem; }
.coverage li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; }

/* Monospace draft / preview panel */
.draft-panel {
    background: #f7f8f9; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.1rem; font-family: var(--mono); font-size: 0.85rem; line-height: 1.55;
    white-space: pre-wrap; overflow-x: auto; margin: 0; color: #24292f;
}

/* Section review: two-column content + progress list */
.review-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.25rem; align-items: start; }
.section-list { display: flex; flex-direction: column; gap: 0.35rem; }
.section-list li a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 0.7rem; border-radius: var(--radius); text-decoration: none;
    color: var(--ink); border: 1px solid transparent;
}
.section-list li a:hover { background: var(--hover); text-decoration: none; }
.section-list li a.current { background: var(--accent-tint); border-color: #cfe0f5; font-weight: 600; }
.section-list li .plain { padding: 0.5rem 0.7rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* Form field stacking */
.field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.9rem; }
.field label { font-weight: 500; margin: 0; }
.field input, .field textarea, .field select { width: 100%; }

/* Coming-soon disabled list */
.coming-soon { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.coming-soon li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.7rem; border: 1px dashed var(--border-strong); border-radius: var(--radius);
    color: var(--faint); font-size: 0.9rem;
}

/* Empty state */
.empty { text-align: center; color: var(--faint); padding: 2rem 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); }

/* Feedback thread inside a section */
.feedback { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.75rem 0; }
.feedback .turn { font-size: 0.9rem; }
.feedback .turn .lbl { font-weight: 600; }

/* Success receipt */
.receipt-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e6f4ea; color: #1e6f3f;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700;
}

/* Accessible visually-hidden label (kept in the a11y tree) */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
    white-space: nowrap;
}

/* Small button variant — compact card controls */
.btn-small, a.btn-small { padding: 0.3rem 0.6rem; font-size: 0.82rem; }

/* ============================================================
   Enquiries board (Sales) — a lightweight kanban.
   The column row is the ONLY horizontal-scroll container; the
   page body never scrolls sideways (PRD desktop/mobile NFR).
   ============================================================ */
.board {
    display: flex; gap: 1rem; align-items: flex-start;
    overflow-x: auto; padding-bottom: 0.75rem;
    /* position: relative is load-bearing (#117): it makes the board the
       containing block for absolutely positioned descendants — the cards'
       visually-hidden allocate labels — so their layout overflow lands in
       this scroll container instead of escaping its clip to the root
       element, where a card in a far column widens the page itself. */
    position: relative;
}
.board-column {
    flex: 1 0 200px; min-width: 0; max-width: 320px;
    background: var(--ground); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.75rem;
}
.board-column-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.95rem;
}
.board-column-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5rem; padding: 0 0.4rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; background: #e4e7ea; color: var(--muted);
}
.board-column-body { display: flex; flex-direction: column; gap: 0.6rem; min-height: 2.5rem; }
.board-column-empty { color: var(--faint); font-size: 0.85rem; margin: 0.25rem 0; }
/* The placeholder is always rendered, so a column emptied by a drag shows it
   again with no JavaScript. */
.board-column-body:has(.enquiry-card) .board-column-empty { display: none; }

/* The card box is shared with the master board's card (#147): same surface,
   border, radius, padding and column flow. Listed together rather than copied,
   so the two card families cannot drift. Everything below this rule is
   enquiry-specific. */
.enquiry-card,
.work-item-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.7rem 0.8rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
/* The card degrades by wrapping, with no breakpoint of any kind (#109). A flex
   container collects items into lines by each item's HYPOTHETICAL main size,
   then shrinks what is on each line, so `flex-wrap` degrades on max-content
   while `overflow-wrap` lowers the min-content floor shrinking cannot pass:
   wrap decides whether a row splits, breakability whether the split row fits.
   Both engage from the content, so a wide board is untouched and a ten-stage
   board (#103) needs no number revisited. The single "narrowest still-readable
   field" width is 7rem, used twice below and nowhere else. */
.enquiry-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
/* `flex: 1 1 7rem` is what keeps the head row a CARD-width rule: `flex-wrap`
   alone wraps whenever the name's max-content plus the value does not fit,
   which restyles wide cards that are fine today. The basis says "wrap when the
   name cannot keep 112px" instead. When the value does drop to its own line it
   lands at main-start, left-aligned under the name — `justify-content:
   space-between` places a lone item there, so no declaration is added for it. */
.enquiry-card-customer { font-weight: 600; text-decoration: none; color: var(--ink); flex: 1 1 7rem; overflow-wrap: anywhere; }
.enquiry-card-customer:hover { text-decoration: underline; }
.enquiry-card-value { font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* `anywhere`, not `break-word`: only `anywhere` lowers the element's
   min-content size, which is the floor a flex item cannot shrink past.
   `break-word` breaks glyphs at paint time and leaves intrinsic size alone, so
   an unbreakable token would still push the row wide. Applied to the two
   free-text render targets only — `customer_name` above and
   `product_type_display` here, both CharField(max_length=255). */
.enquiry-card-product { margin: 0; font-size: 0.88rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; overflow-wrap: anywhere; }
/* The dt labels are single unbreakable words ("RECEIVED" is 62px), so without
   the wrap the meta row escapes the card by 9.28px at a 200px column even with
   both free-text fields breakable. */
.enquiry-card-meta { margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.enquiry-card-meta div { display: flex; flex-direction: column; }
.enquiry-card-meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); margin: 0; }
.enquiry-card-meta dd { margin: 0; font-size: 0.85rem; }
.enquiry-card-allocate { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
/* `min-width: 7rem` replaces `min-width: 0`, which was dead weight: `flex: 1`
   gives the select a base size of ZERO, so its hypothetical main size is 0, the
   line never fills and the wrap above would be inert without this. The minimum
   raises it to 112px, which is what overflows the line and drops the button
   beneath at a narrow column. Safe only because the narrowest card content the
   board can produce is 146.41px — a future issue lowering the column floor
   below ~186px would turn this into an overflow (#109 risk 6). */
.enquiry-card-allocate select { flex: 1; min-width: 7rem; font-size: 0.82rem; padding: 0.3rem 0.4rem; }

/* Drag states (#71). board.js adds .is-draggable once SortableJS is wired, so
   the no-JS board keeps the default cursor — nothing there is draggable. */
.board.is-draggable .enquiry-card { cursor: grab; }
.enquiry-card.is-busy { opacity: 0.55; cursor: progress; }
.enquiry-card-ghost { opacity: 0.4; border-style: dashed; border-color: var(--accent); }

/* Outcome dialog (Won / Lost) */
.outcome-dialog {
    width: min(28rem, calc(100vw - 2rem));
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); padding: 1.25rem;
}
.outcome-dialog::backdrop { background: rgb(26 26 26 / 45%); }
.outcome-dialog h2 { margin-bottom: 0.25rem; }
.outcome-dialog .card-sub { margin: 0 0 1rem; }
.outcome-dialog .field:last-of-type { margin-bottom: 1.1rem; }
.field-hint { margin: 0; color: var(--faint); font-size: 0.82rem; }

/* ============================================================
   Enquiry detail (Sales) — the record beside its activity log.
   The .activity-* rules style WorkItemNote entries, a workitems concept,
   so they are not sales-owned despite living under this header.
   ============================================================ */
.detail-layout {
    display: grid; gap: 1rem; align-items: start;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.detail-text { margin: 0; overflow-wrap: anywhere; }
.activity-entry { border-left: 3px solid var(--border-strong); padding-left: 0.7rem; }
.activity-meta { margin: 0 0 0.15rem; font-size: 0.78rem; color: var(--faint); }

@media (max-width: 760px) {
    .chat-layout, .review-layout, .detail-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   Master board (Tasks): read-only, no JavaScript (#147).
   Reuses the .board / .board-column / .board-column-head /
   -count / -body / -empty layout above, and shares the card box
   with .enquiry-card. Only the filter row, the Waiting
   disclosure and the card's own text rules are new.
   ============================================================ */
.board-filters {
    display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
    margin-bottom: 1rem;
}
/* Only what differs from the shared .field: the row lays its controls out
   side by side, so the checkbox and its label sit on one line. */
.board-filters .field-inline {
    flex-direction: row; align-items: center; gap: 0.4rem;
}
.board-filters label { font-size: 0.82rem; color: var(--muted); }
.board-filters select { font-size: 0.85rem; padding: 0.3rem 0.4rem; }

.board-column-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
/* The disclosure triangle is the only affordance telling a user the column
   opens, and a <summary> only draws it while it stays display: list-item. So
   the shared flex head goes on a wrapper INSIDE the summary rather than on the
   summary itself, and no rule here has to undo the shared one. */
.board-column-disclosure > summary { cursor: pointer; }

/* `anywhere`, not `break-word`, for the same reason .enquiry-card-customer
   gives above: only `anywhere` lowers the element's min-content size, which is
   the floor a flex item cannot shrink past. Every field on this card is free
   text or a name, so every one of them can carry an unbreakable token. */
.work-item-card-title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.work-item-card-meta {
    margin: 0; display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap; font-size: 0.85rem; color: var(--muted);
    overflow-wrap: anywhere;
}
.work-item-card-owner {
    margin: 0; font-size: 0.85rem; color: var(--muted);
    overflow-wrap: anywhere;
}