/* =========================================================
   FEATURE PAGES — /features/*
   Loaded after public.css (tokens) and landing.css (sections, cards).

   WHY THIS FILE EXISTS
   The feature pages need one thing the marketing system does not have:
   INTERFACE PREVIEWS. Not screenshots, and not generated pictures of a
   dashboard that does not exist — real markup, styled to match the
   product it is describing, so it can never drift into showing a
   feature we do not ship.

   EVERY VALUE HERE IS THE PRODUCT'S OWN. The status colours are
   cad.css's literals, the surfaces and radii are public.css's tokens,
   and the shapes (stat tiles, call rows, unit rows, pills, tables) are
   the ones web/public/assets/cad.js and the dashboard actually render.
   A preview that invented its own look would be a promise about a
   screen nobody will recognise when they open it.

   REPLACING A PREVIEW WITH A SCREENSHOT LATER
   Each one is a single `<figure class="ui-preview">` with a caption.
   Swap its `<div class="ui-preview__body">…</div>` for an `<img>` and
   nothing else on the page moves — the frame, the label and the caption
   are the figure's, not the body's.
   ========================================================= */

/* =========================================================
   PAGE HEADER
   ========================================================= */

.feature-hero {
    padding: 64px 0 8px;
    text-align: center;
}

.feature-hero__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}

.feature-hero h1 {
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    text-wrap: balance;
}

.feature-hero__lede {
    max-width: 660px;
    margin: 0 auto 26px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-muted);
}

.feature-hero__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* The one-line honesty strip under the hero: what a server gets without
   paying. Every feature page carries one, and its wording comes from the
   plan catalog rather than from whoever wrote the page. */
.feature-included {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 26px auto 0;
    padding: 12px 18px;
    max-width: 760px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
}

.feature-included strong { color: var(--text); }

/* =========================================================
   THE PREVIEW FRAME
   ========================================================= */

.ui-preview {
    margin: 0 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* A fake window bar. Three dots and a path — enough to read as "an
   application", without pretending to be a browser screenshot. */
.ui-preview__chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.ui-preview__dots {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.ui-preview__dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-strong);
}

.ui-preview__path {
    font-size: 12px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Says plainly that this is a mock. Required reading, not decoration —
   so it is in the chrome where the eye already is, not in small print. */
.ui-preview__tag {
    margin-inline-start: auto;
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 4px 9px;
}

.ui-preview__body {
    padding: 18px;
    display: grid;
    gap: 14px;
}

.ui-preview__caption,
figure.ui-figure figcaption {
    font-size: 13.5px;
    color: var(--text-faint);
    line-height: 1.6;
    margin: 0 0 34px;
}

figure.ui-figure { margin: 0 0 34px; }
figure.ui-figure .ui-preview { margin-bottom: 10px; }

/* =========================================================
   PRODUCT SHAPES — the same ones the real screens render
   ========================================================= */

.ui-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 16px;
}

.ui-card > h4 {
    margin: 0 0 12px;
    font-size: 14px;
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ui-muted { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.6; }
.ui-faint { color: var(--text-faint); font-size: 12.5px; }

/* Status pills — cad.css's exact colours, so a preview and the real
   board read the same. */
.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 650;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    white-space: nowrap;
}

.ui-pill--success { color: #7de6b4; background: rgba(62, 207, 142, 0.13); }
.ui-pill--warning { color: #ffd47a; background: rgba(241, 184, 75, 0.13); }
.ui-pill--danger { color: #ff9ca7; background: rgba(239, 102, 116, 0.13); }
.ui-pill--accent { color: var(--accent); background: var(--accent-soft); }

/* Buttons, non-interactive on purpose: a preview must not look clickable
   and then do nothing. Rendered as spans, styled like the real thing. */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
}

.ui-btn--primary { background: var(--accent); border-color: transparent; color: var(--accent-contrast); }
.ui-btn--danger { background: transparent; border-color: rgba(239, 102, 116, 0.55); color: #ff9ca7; }
.ui-btn--row { margin-inline-start: auto; }

.ui-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* =========================================================
   STAT TILES — the dispatch strip's shape
   ========================================================= */

.ui-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.ui-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.ui-stat__value { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.ui-stat__label { font-size: 11.5px; color: var(--text-muted); }
.ui-stat--urgent .ui-stat__value { color: #ff9ca7; }
.ui-stat--ready .ui-stat__value { color: #7de6b4; }
.ui-stat--quiet .ui-stat__value { color: var(--text-faint); }

/* =========================================================
   ROWS — calls, units, records
   ========================================================= */

.ui-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.ui-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    font-size: 13px;
}

.ui-row__name { font-weight: 600; }

/* A call, which is a block rather than a row: three lines, and the
   priority stripe down the side is how an urgent one is found without
   reading it. */
.ui-call {
    display: grid;
    gap: 6px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border-inline-start: 3px solid var(--border-strong);
}

.ui-call--urgent { border-inline-start-color: #ef6674; background: rgba(239, 102, 116, 0.05); }

.ui-call__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-call__number { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px; }
.ui-call__what { font-size: 13.5px; }
.ui-call__who { font-size: 12.5px; color: var(--text-muted); }

/* =========================================================
   TABLES — records lists
   ========================================================= */

.ui-table-wrap { overflow-x: auto; }

.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 460px;
}

.ui-table th {
    text-align: start;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    font-weight: 700;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.ui-table td {
    text-align: start;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

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

/* =========================================================
   FORM SHAPES — applications, tickets, settings
   ========================================================= */

.ui-field { display: grid; gap: 5px; }
.ui-field__label { font-size: 12px; font-weight: 650; color: var(--text-muted); }

.ui-input,
.ui-select,
.ui-textarea {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 8px 11px;
    font-size: 13px;
    color: var(--text-muted);
    min-height: 34px;
}

.ui-textarea { min-height: 62px; line-height: 1.55; }
.ui-select::after { content: "▾"; float: inline-end; color: var(--text-faint); }

.ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* =========================================================
   TWO-COLUMN EXPLAINERS
   ========================================================= */

.feature-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-top: 8px;
}

.feature-point h3 {
    font-size: 16px;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.feature-point p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.65; }

.feature-point__icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    flex: 0 0 auto;
}

/* Setup steps — numbered, because setup has an order and getting it
   wrong is the commonest support question. */
.feature-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }

.feature-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 13px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.feature-step::before {
    counter-increment: step;
    content: counter(step);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
    font-size: 13px;
}

.feature-step h3 { margin: 0 0 4px; font-size: 15px; }
.feature-step p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* A plain, unshouty note. Used for the honest limits — what is not
   built, what an integration does not do. */
.feature-note {
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    padding: 16px 18px;
    margin: 26px 0 0;
}

.feature-note h3 { margin: 0 0 8px; font-size: 15px; }
.feature-note p { margin: 0 0 8px; color: var(--text-muted); font-size: 14.5px; line-height: 1.65; }
.feature-note p:last-child { margin-bottom: 0; }

/* The other feature pages, at the bottom of each one. */
.feature-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.feature-link {
    display: block;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.feature-link:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.feature-link strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.feature-link span { font-size: 13px; color: var(--text-muted); line-height: 1.55; }

@media (max-width: 620px) {
    .feature-hero { padding-top: 42px; }
    .ui-preview__body { padding: 13px; gap: 11px; }
    .ui-grid-2 { grid-template-columns: 1fr; }
    .ui-preview__path { display: none; }
}