/* ==========================================================================
   SOCIAL HIPPO — CLIENT PLATFORM DESIGN SYSTEM
   Tokens are lifted verbatim from the live site's theme-modern.css so the app
   and www.socialhippo.io stay one visual system. What is new here is the
   dashboard vocabulary the marketing site has no need for: the stage rail,
   the lead table, the detail drawer and the board.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand — do not re-mix. These are the site's own values. */
    --sh-accent: #F9C252;
    --sh-accent-deep: #FDB913;
    --sh-accent-dark: #EFB237;
    --sh-accent-soft: #FCEBC7;
    --sh-accent-tint: #FFF8EA;
    --sh-accent-text: #C7820A; /* the accessible amber for text on white */
    --sh-on-accent: #1C1B18;
    --sh-accent-rgb: 249, 194, 82;

    /* Product accents, reused here as workflow-stage hues */
    --sh-purple: #7D6DD2;
    --sh-red: #D55F70;
    --sh-green: #71CCB7;

    /* Warm neutrals */
    --sh-ink: #1C1B18;
    --sh-ink-soft: #3F3C36;
    --sh-muted: #6B6862;
    --sh-faint: #93908A;
    --sh-paper: #FFFFFF;
    --sh-canvas: #F3F2F0;
    --sh-line: #E9E6E0;
    --sh-line-soft: #F1EEE9;

    /* Shape — the brand's pill language, scaled for dense UI */
    --sh-radius-xs: 8px;
    --sh-radius-sm: 12px;
    --sh-radius: 18px;
    --sh-radius-lg: 26px;
    --sh-radius-pill: 999px;

    /* Elevation, warm-tinted rather than neutral grey */
    --sh-shadow-xs: 0 1px 2px rgba(28, 27, 24, .05);
    --sh-shadow-sm: 0 1px 2px rgba(28, 27, 24, .05), 0 2px 8px rgba(28, 27, 24, .05);
    --sh-shadow: 0 2px 4px rgba(28, 27, 24, .04), 0 10px 24px -6px rgba(28, 27, 24, .10);
    --sh-shadow-lg: 0 4px 8px rgba(28, 27, 24, .05), 0 24px 48px -12px rgba(28, 27, 24, .18);
    --sh-shadow-accent: 0 8px 24px -6px rgba(var(--sh-accent-rgb), .55);

    /* Type */
    --sh-font-display: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
    --sh-font-body: 'Figtree', 'Poppins', system-ui, sans-serif;

    /* Motion */
    --sh-ease: cubic-bezier(.22, .61, .36, 1);
    --sh-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

    /* Layout */
    --sh-sidebar: 252px;
    --sh-topbar: 68px;
    --sh-gutter: 28px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--sh-canvas);
    color: var(--sh-ink-soft);
    font-family: var(--sh-font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--sh-font-display);
    color: var(--sh-ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0; }

a {
    color: var(--sh-accent-text);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

::selection {
    background: var(--sh-accent);
    color: var(--sh-on-accent);
}

/* Every interactive surface gets the same unmistakable ring. */
:focus-visible {
    outline: 3px solid rgba(var(--sh-accent-rgb), .55);
    outline-offset: 2px;
    border-radius: var(--sh-radius-xs);
}

/* Counts, dates and money must not shift width as digits change. */
.tabular { font-variant-numeric: tabular-nums; }

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

/* --------------------------------------------------------------------------
   3. APP SHELL
   -------------------------------------------------------------------------- */
.app {
    display: grid;
    grid-template-columns: var(--sh-sidebar) minmax(0, 1fr);
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 14px;
    background: var(--sh-paper);
    border-right: 1px solid var(--sh-line);
}

/* The brand sits in its own band, so the navigation below reads as a separate group rather than
   as a list that happens to start under a logo. The logo is the real lockup — hippo and wordmark
   in one image — so there is no type here to keep in step with it. */
.brand {
    display: block;
    padding: 6px 8px 16px;
    border-bottom: 1px solid var(--sh-line-soft);
}

.brand:hover { text-decoration: none; }

.brand__logo {
    display: block;
    height: 38px;
    width: auto;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav__label {
    padding: 0 10px 7px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--sh-faint);
}

/* Separates "what you can use" from "what is coming", so the two never compete. */
.nav + .nav {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--sh-line-soft);
}

.nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--sh-radius-sm);
    color: var(--sh-ink-soft);
    font-weight: 600;
    font-size: .94rem;
    transition: background .18s var(--sh-ease), color .18s var(--sh-ease);
}

.nav__item:hover {
    background: var(--sh-canvas);
    text-decoration: none;
}

.nav__item.active {
    background: var(--sh-accent-tint);
    color: var(--sh-ink);
}

/* The active state is the tinted pill plus a weightier label. The previous left tick sat almost
   on the window edge and read as a rendering artefact rather than an indicator. */
.nav__item.active {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--sh-accent-soft);
}

.nav__item.active .nav__icon {
    color: var(--sh-accent-text);
}

/* Deliberately recessive. These features do not exist yet, so they must read as a quiet promise
   rather than as broken navigation — before, the badges were the loudest thing in the sidebar. */
.nav__item--disabled {
    color: var(--sh-faint);
    font-weight: 500;
    font-size: .88rem;
    padding: 7px 12px;
    cursor: default;
    pointer-events: none;
}

.nav__item--disabled .nav__icon {
    opacity: .55;
}

.nav__soon {
    margin-left: auto;
    color: var(--sh-faint);
    font-size: .68rem;
    font-weight: 600;
}

.nav__icon { flex: none; }

/* Anchors the bottom of the sidebar. Without it the column ended in a large empty gap with a
   single small link floating at the base. */
.sidebar__foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--sh-line-soft);
}

.account-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--sh-radius-sm);
    color: var(--sh-ink-soft);
    transition: background .18s var(--sh-ease);
}

.account-card:hover {
    background: var(--sh-canvas);
    text-decoration: none;
}

.account-card.active {
    background: var(--sh-accent-tint);
}

.account-card__body {
    min-width: 0;
    line-height: 1.25;
}

.account-card__name {
    font-weight: 700;
    font-size: .86rem;
    color: var(--sh-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-card__role {
    font-size: .74rem;
    color: var(--sh-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-card__chevron {
    margin-left: auto;
    color: var(--sh-faint);
    flex: none;
}

/* ---- Top bar ---- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--sh-topbar);
    padding: 0 var(--sh-gutter);
    background: rgba(243, 242, 240, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sh-line);
}

.topbar__spacer { margin-left: auto; }

/* Phones hide the sidebar, and with it the only place the logo appears. The mark comes back
   here so the app is still visibly ours on the screen most leads are read on. */
.topbar__brand { display: none; }

.topbar__brand img {
    display: block;
    width: 30px;
    height: 30px;
}

/* ---- Content ---- */
/* No width cap. This is a table and a board, not prose — on a wide monitor a cap left a few
   hundred pixels of dead space to the right while the table scrolled. The few genuinely
   text-heavy elements set their own measure (see .empty__body). */
.content {
    padding: 30px var(--sh-gutter) 72px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-head__sub {
    margin-top: 6px;
    color: var(--sh-muted);
    font-size: .95rem;
}

/* Pushed to the trailing edge, and allowed to drop below the title on a narrow screen rather than
   squeezing it. */
.page-head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
}

.page-head__note {
    color: var(--sh-muted);
    font-size: .85rem;
}

/* --------------------------------------------------------------------------
   4. SURFACES
   -------------------------------------------------------------------------- */
.card {
    background: var(--sh-paper);
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow-sm);
}

.card--flush { overflow: hidden; }

.card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sh-line-soft);
}

.card__body { padding: 20px; }

/* --------------------------------------------------------------------------
   5. STAGE RAIL — the signature element
   One continuous pill split into segments sized by each stage's real share of
   the funnel. It is the page summary and the stage filter at once, which is
   why it replaces the usual row of stat cards: same information, and you can
   act on it.
   -------------------------------------------------------------------------- */
.rail {
    padding: 18px 20px 16px;
}

.rail__track {
    display: flex;
    gap: 4px;
    height: 14px;
    margin-bottom: 16px;
}

.rail__seg {
    position: relative;
    min-width: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--sh-radius-pill);
    background: var(--sh-seg-color, var(--sh-accent));
    cursor: pointer;
    /* Grows from nothing on first paint — one orchestrated moment, then still. */
    animation: rail-grow .7s var(--sh-ease) both;
    transition: filter .18s var(--sh-ease), transform .18s var(--sh-ease);
}

.rail__seg:hover {
    filter: saturate(1.25);
    transform: scaleY(1.35);
}

.rail__seg[aria-pressed="true"] {
    box-shadow: 0 0 0 3px var(--sh-paper), 0 0 0 5px var(--sh-seg-color, var(--sh-accent));
}

.rail__seg--empty {
    background: var(--sh-line);
    cursor: default;
}

@keyframes rail-grow {
    from { transform: scaleX(.02); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

.rail__keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

.rail__key {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 2px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--sh-muted);
    font-size: .82rem;
    font-weight: 600;
}

.rail__key:hover { color: var(--sh-ink); }

.rail__key[aria-pressed="true"] { color: var(--sh-ink); }

.rail__key-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sh-seg-color, var(--sh-accent));
    align-self: center;
    flex: none;
}

.rail__key-count {
    font-family: var(--sh-font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sh-ink);
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   6. CONTROLS
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-pill);
    font-family: var(--sh-font-body);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s var(--sh-ease), box-shadow .18s var(--sh-ease),
                background .18s var(--sh-ease), border-color .18s var(--sh-ease);
}

.btn:hover { text-decoration: none; }

.btn:active { transform: translateY(1px); }

.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
    background: linear-gradient(150deg, var(--sh-accent) 0%, var(--sh-accent-deep) 100%);
    color: var(--sh-on-accent);
    box-shadow: var(--sh-shadow-accent), inset 0 1.5px 0 rgba(255, 255, 255, .45);
}

.btn--primary:hover { box-shadow: 0 10px 28px -6px rgba(var(--sh-accent-rgb), .7); }

.btn--quiet {
    background: var(--sh-paper);
    border-color: var(--sh-line);
    color: var(--sh-ink-soft);
}

.btn--quiet:hover { border-color: var(--sh-accent-dark); color: var(--sh-ink); }

.btn--ghost {
    background: transparent;
    color: var(--sh-muted);
}

.btn--ghost:hover { background: var(--sh-canvas); color: var(--sh-ink); }

.btn--sm { padding: 6px 13px; font-size: .82rem; }

.btn--icon { padding: 8px; border-radius: var(--sh-radius-pill); }

/* ---- Filter chips ---- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.chip {
    padding: 7px 15px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-pill);
    background: var(--sh-paper);
    color: var(--sh-ink-soft);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s var(--sh-ease), background .18s var(--sh-ease);
}

.chip:hover { border-color: var(--sh-accent-dark); }

.chip[aria-pressed="true"],
.chip--active {
    background: var(--sh-ink);
    border-color: var(--sh-ink);
    color: var(--sh-paper);
}

.chip__count {
    margin-left: 6px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

/* A chip that opens a list of answers instead of toggling. Its label is a form question, and
   questions run long, so it is cut short here and readable in full inside the panel. */
.chip--menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chip--menu .chip__count { margin-left: 0; }

.chip__label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Inputs ---- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field__label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--sh-muted);
    letter-spacing: .01em;
}

.input, .select {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-pill);
    background: var(--sh-paper);
    color: var(--sh-ink);
    font-family: inherit;
    font-size: .9rem;
    transition: border-color .18s var(--sh-ease), box-shadow .18s var(--sh-ease);
}

.input:focus, .select:focus {
    outline: none;
    border-color: var(--sh-accent-dark);
    box-shadow: 0 0 0 3px rgba(var(--sh-accent-rgb), .3);
}

.input::placeholder { color: var(--sh-faint); }

.search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}

.search .input { padding-left: 40px; }

.search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sh-faint);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. BADGES
   -------------------------------------------------------------------------- */
.stage {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: var(--sh-radius-pill);
    background: var(--sh-canvas);
    font-size: .78rem;
    font-weight: 700;
    color: var(--sh-ink-soft);
    white-space: nowrap;
}

.stage__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sh-stage-color, var(--sh-accent));
    flex: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--sh-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.pill--new { background: var(--sh-accent-tint); color: var(--sh-accent-text); }
.pill--done { background: rgba(113, 204, 183, .2); color: #2C7A68; }
.pill--staff { background: rgba(125, 109, 210, .16); color: #5B4CAE; }
.pill--archived { background: var(--sh-canvas); color: var(--sh-muted); }

.cell-stage .pill { margin-left: 6px; }

/* An archived lead reads as set aside: the name loses its weight and the stage its colour. */
.row--archived .cell-name { color: var(--sh-muted); }
.row--archived .stage { color: var(--sh-faint); }
.row--archived .stage__dot { background: var(--sh-faint); }

.table td.cell-actions { text-align: right; }

/* A lead that has waited too long says so in the one place the eye already is. */
.age { color: var(--sh-muted); font-variant-numeric: tabular-nums; }
.age--overdue { color: var(--sh-red); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. TABLE
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.table th {
    padding: 11px 16px;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sh-faint);
    border-bottom: 1px solid var(--sh-line);
    white-space: nowrap;
    background: var(--sh-paper);
}

.table th button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.table th button:hover { color: var(--sh-ink); }

.table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--sh-line-soft);
    vertical-align: middle;
}

.table tbody tr {
    cursor: pointer;
    transition: background .14s var(--sh-ease);
}

.table tbody tr:hover { background: var(--sh-accent-tint); }

.table tbody tr[aria-selected="true"] { background: var(--sh-accent-tint); }

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

.cell-name {
    font-weight: 700;
    color: var(--sh-ink);
}

.cell-sub {
    color: var(--sh-muted);
    font-size: .82rem;
}

.cell-tight { white-space: nowrap; }

/* Answers to pinned questions. One line each: the table is for scanning, and the whole answer
   is a click away in the drawer. */
.table td.cell-pinned { color: var(--sh-ink-soft); }

.cell-pinned__text {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Avatar ---- */
.avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sh-accent-soft);
    color: var(--sh-accent-text);
    font-size: .72rem;
    font-weight: 800;
    flex: none;
    overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar--lg { width: 40px; height: 40px; font-size: .9rem; }

.avatar--empty {
    background: var(--sh-canvas);
    color: var(--sh-faint);
    border: 1px dashed var(--sh-line);
}

/* --------------------------------------------------------------------------
   9. PAGINATION
   -------------------------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--sh-line-soft);
    color: var(--sh-muted);
    font-size: .85rem;
}

.pager__spacer { margin-left: auto; }

/* --------------------------------------------------------------------------
   10. DRAWER — triage keeps its place in the list
   -------------------------------------------------------------------------- */
.drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(28, 27, 24, .38);
    backdrop-filter: blur(2px);
    animation: fade-in .2s var(--sh-ease) both;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(560px, 100vw);
    height: 100vh;
    background: var(--sh-paper);
    border-left: 1px solid var(--sh-line);
    box-shadow: var(--sh-shadow-lg);
    animation: drawer-in .32s var(--sh-ease) both;
}

@keyframes drawer-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.drawer__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--sh-line-soft);
}

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.drawer__section-title {
    margin-bottom: 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sh-faint);
}

/* Form answers read as the questionnaire the customer actually built. */
.answers {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.answer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 11px 14px;
    border-radius: var(--sh-radius-sm);
    background: var(--sh-canvas);
}

.answer + .answer { margin-top: 6px; }

.answer__q {
    font-size: .78rem;
    font-weight: 600;
    color: var(--sh-muted);
}

.answer__a {
    color: var(--sh-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.answer__a--empty { color: var(--sh-faint); font-weight: 400; font-style: italic; }

.answers__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 12px;
}

/* An answer whose question can be pinned keeps a second column for the pin, spanning both
   lines so it sits beside the answer rather than under it. */
.answer--pinnable {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
}

.answer--pinnable .answer__q,
.answer--pinnable .answer__a { grid-column: 1; }

.answer__pin {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--sh-faint);
}

/* The answer already sits on the canvas colour, so the usual ghost hover would not show. */
.answer__pin:hover { background: var(--sh-paper); }

.answer__pin--static {
    display: inline-flex;
    padding: 8px;
}

/* Pinned is the filled pin; the outline is the invitation to pin. */
.answer__pin[aria-pressed="true"],
.answer__pin--static { color: var(--sh-accent-text); }

.answer__pin[aria-pressed="true"] .icon,
.answer__pin--static .icon { fill: currentColor; }

/* ---- Timeline ---- */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 18px;
}

.timeline__item:last-child { padding-bottom: 0; }

/* The connecting line stops at the last event rather than trailing into space. */
.timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: var(--sh-line);
}

.timeline__marker {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sh-canvas);
    color: var(--sh-muted);
    border: 1px solid var(--sh-line);
    z-index: 1;
}

.timeline__marker--accent {
    background: var(--sh-accent-tint);
    border-color: var(--sh-accent-soft);
    color: var(--sh-accent-text);
}

.timeline__text { padding-top: 3px; font-size: .88rem; }

.timeline__meta {
    color: var(--sh-faint);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Notes ---- */
.note {
    padding: 13px 15px;
    border-radius: var(--sh-radius-sm);
    background: var(--sh-accent-tint);
    border: 1px solid var(--sh-accent-soft);
}

.note + .note { margin-top: 8px; }

.note__meta {
    margin-top: 7px;
    color: var(--sh-muted);
    font-size: .76rem;
}

/* --------------------------------------------------------------------------
   11. BOARD
   -------------------------------------------------------------------------- */
.board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    align-items: flex-start;
}

.board__col {
    flex: 0 0 292px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--sh-topbar) - 190px);
    background: var(--sh-paper);
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow-sm);
}

.board__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--sh-line-soft);
}

.board__title {
    font-family: var(--sh-font-display);
    font-weight: 700;
    font-size: .95rem;
    color: var(--sh-ink);
}

.board__count {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: var(--sh-radius-pill);
    background: var(--sh-canvas);
    color: var(--sh-muted);
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.board__cards {
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.board__more {
    padding: 10px 16px 14px;
    color: var(--sh-faint);
    font-size: .78rem;
    text-align: center;
}

.lead-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 13px 14px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-paper);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .16s var(--sh-ease), box-shadow .16s var(--sh-ease),
                transform .16s var(--sh-ease);
}

.lead-card:hover {
    border-color: var(--sh-accent-dark);
    box-shadow: var(--sh-shadow-sm);
    transform: translateY(-1px);
}

.lead-card__name {
    font-weight: 700;
    color: var(--sh-ink);
    margin-bottom: 3px;
}

.lead-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    color: var(--sh-faint);
    font-size: .76rem;
}

/* Answers to pinned questions: the question as a small caption, the answer underneath it.
   Answers tend to run longer than the questions, so the answer gets the card's full width
   and may wrap; past three lines it is cut off, and the drawer has the rest. */
.lead-card__answers {
    /* A grid with a shrinkable track, so a long answer wraps at the card's edge instead of
       pushing the whole column wider. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 9px;
    font-size: .78rem;
}

.lead-card__answer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
}

.lead-card__answer-q {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sh-faint);
}

.lead-card__answer-a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--sh-ink-soft);
    font-weight: 600;
    line-height: 1.35;
}

/* ---- Cards you can pick up ----
   The whole card is the drag handle, so the grip button is an affordance rather
   than the only way in. The card itself is no longer a button: it holds one, plus
   the move menu, and a button inside a button is not markup a browser accepts. */
.lead-card {
    position: relative;
    padding: 0;
    overflow: visible;
}

.lead-card__open {
    display: block;
    width: 100%;
    padding: 13px 34px 13px 14px;
    border: 0;
    border-radius: inherit;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}

.lead-card[draggable="true"] { cursor: grab; }

/* Dimmed rather than hidden: the gap it leaves is what tells you where it came from. */
.lead-card--dragging {
    opacity: .45;
    cursor: grabbing;
}

.lead-card__move {
    position: absolute;
    top: 8px;
    right: 6px;
}

/* Quiet until the card is hovered or the menu has focus — a row of grips would compete
   with the names, which are what the eye is here for. */
.lead-card__move .btn {
    opacity: 0;
    transition: opacity .14s var(--sh-ease);
}

.lead-card:hover .lead-card__move .btn,
.lead-card__move .btn:focus-visible,
.lead-card__move .btn[aria-expanded="true"] { opacity: 1; }

/* Coarse pointers get no hover, so the control is simply always there. */
@media (hover: none) {
    .lead-card__move .btn { opacity: 1; }
}

.lead-card__move .menu__panel {
    top: calc(100% + 4px);
    max-height: 320px;
    overflow-y: auto;
}

/* The card with an open menu is lifted above the cards after it. Hovering a card gives it a
   transform, and a transform starts a stacking context that traps the panel's z-index inside
   the card — so the next card, a later positioned sibling, would paint over the panel. The
   pointer then lands on that card instead of the panel, the hover ends, the panel pops
   forward, the pointer lands on the panel, the hover returns: a flicker. */
.lead-card--menu-open { z-index: 2; }

/* The drop target says so plainly. Dashed, because a solid accent border reads as
   selection rather than as "let go here". */
.board__col--over {
    border-color: var(--sh-accent-dark);
    border-style: dashed;
    background: var(--sh-accent-tint);
}

/* --------------------------------------------------------------------------
   12. STATES
   -------------------------------------------------------------------------- */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 64px 24px;
    text-align: center;
}

.empty__mark {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--sh-radius);
    background: var(--sh-accent-tint);
    color: var(--sh-accent-text);
    margin-bottom: 4px;
}

.empty__title {
    font-family: var(--sh-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--sh-ink);
}

.empty__body {
    max-width: 42ch;
    color: var(--sh-muted);
    font-size: .92rem;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--sh-radius-sm);
    background: rgba(213, 95, 112, .1);
    border: 1px solid rgba(213, 95, 112, .3);
    color: #9C2F41;
    font-size: .9rem;
}

/* ---- Skeletons: the table's own shape, so nothing jumps when data lands ---- */
.skeleton {
    border-radius: var(--sh-radius-pill);
    background: linear-gradient(90deg, var(--sh-line-soft) 25%, var(--sh-canvas) 37%, var(--sh-line-soft) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
}

@keyframes shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

.skeleton--text { height: 11px; }

/* ---- Impersonation banner: never subtle, by design ---- */
/* A quiet band saying which slice of the data is on screen, and the one thing to do about it.
   Dashed rather than tinted: it is a note, not a warning. */
.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 18px;
    border-radius: var(--sh-radius-sm);
    background: var(--sh-paper);
    border: 1px dashed var(--sh-line);
}

.notice__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--sh-radius-xs);
    background: var(--sh-canvas);
    color: var(--sh-muted);
    flex: none;
}

.notice__text {
    flex: 1 1 24ch;
    min-width: 0;
}

.notice__title {
    font-weight: 700;
    font-size: .92rem;
    color: var(--sh-ink);
}

.notice__body {
    margin-top: 2px;
    color: var(--sh-muted);
    font-size: .85rem;
}

.impersonation {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px var(--sh-gutter);
    background: var(--sh-purple);
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
}

.impersonation .btn { border-color: rgba(255, 255, 255, .5); color: #fff; }
.impersonation .btn:hover { background: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------------------------
   13. TENANT SWITCHER / MENUS
   -------------------------------------------------------------------------- */
.menu { position: relative; }

.menu__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 13px 7px 9px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-pill);
    background: var(--sh-paper);
    color: var(--sh-ink);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s var(--sh-ease);
}

.menu__trigger:hover { border-color: var(--sh-accent-dark); }

.menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    z-index: 40;
    min-width: 248px;
    padding: 7px;
    background: var(--sh-paper);
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow-lg);
    animation: menu-in .16s var(--sh-ease) both;
}

.menu__panel--right { right: 0; }

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--sh-radius-sm);
    background: none;
    color: var(--sh-ink-soft);
    font-family: inherit;
    font-size: .89rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.menu__item:hover { background: var(--sh-canvas); text-decoration: none; }

.menu__item.active { background: var(--sh-accent-tint); color: var(--sh-ink); }

.menu__sep {
    height: 1px;
    margin: 6px 8px;
    background: var(--sh-line-soft);
}

.menu__meta {
    padding: 8px 12px 4px;
    color: var(--sh-faint);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Sits under an open panel and over everything else, so a click anywhere outside closes it. */
.menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
}

/* ---- Filtering on the answers to a pinned question ---- */
.answer-filter {
    width: max-content;
    min-width: 248px;
    max-width: min(340px, calc(100vw - 32px));
}

.answer-filter__options {
    max-height: 300px;
    overflow-y: auto;
}

.answer-filter__option { cursor: pointer; }

.answer-filter__option input {
    flex: none;
    accent-color: var(--sh-accent-deep);
}

.answer-filter__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13b. WORKING ON A LEAD — the drawer's own controls
   Acting on a lead is a form, but it must not look like one: these sit in the
   reading flow, one row of controls between the summary and the answers.
   -------------------------------------------------------------------------- */
.edit-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-canvas);
}

.edit-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.handling__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.handling__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.note-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.note-form textarea {
    flex: 1;
    resize: vertical;
    min-height: 44px;
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   13c. SETTINGS — boards and their columns
   A column is one row: its order, its name, its colour and what it means. Wide
   enough to scan down, and it collapses to a stack on a narrow screen rather
   than scrolling sideways.
   -------------------------------------------------------------------------- */
.settings-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.col-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.col-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-paper);
}

.col-row--over {
    border-color: var(--sh-accent-dark);
    border-style: dashed;
    background: var(--sh-accent-tint);
}

.col-row__grip {
    color: var(--sh-faint);
    cursor: grab;
}

.col-row__order {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.col-row__name { flex: 1 1 160px; min-width: 120px; }

/* A colour input styled down to the swatch itself; the browser's own chrome around
   it is bigger than the row can carry. */
.col-row__color {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-paper);
    cursor: pointer;
}

.col-row__count {
    min-width: 34px;
    padding: 2px 8px;
    border-radius: var(--sh-radius-pill);
    background: var(--sh-canvas);
    color: var(--sh-muted);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

.col-row__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.col-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--sh-line-soft);
}

.col-add .input { flex: 1 1 180px; }

/* Destructive actions ask in place, next to the thing they would remove, rather
   than in a dialog that has left the row behind. */
.confirm {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--sh-accent-dark);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-accent-tint);
    font-size: .88rem;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    font-size: .88rem;
    cursor: pointer;
}

.check input { margin-top: 2px; accent-color: var(--sh-accent-deep); }

.check--inline {
    margin-top: 0;
    align-items: center;
    white-space: nowrap;
    color: var(--sh-muted);
    font-size: .78rem;
}

@media (max-width: 1080px) {
    .settings-grid { grid-template-columns: minmax(0, 1fr); }

    .col-row { flex-wrap: wrap; }

    .col-row__actions { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   14. MOBILE
   The audience checks leads on a phone between customers, so navigation moves
   into thumb reach rather than behind a hamburger.
   -------------------------------------------------------------------------- */
.mobile-nav { display: none; }

@media (max-width: 1080px) {
    :root { --sh-gutter: 18px; }

    .app { grid-template-columns: minmax(0, 1fr); }

    .sidebar { display: none; }

    .topbar__brand { display: block; }
    .topbar__brand:hover { text-decoration: none; }

    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        justify-content: space-around;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--sh-line);
    }

    .mobile-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 14px;
        border-radius: var(--sh-radius-sm);
        color: var(--sh-muted);
        font-size: .7rem;
        font-weight: 700;
    }

    .mobile-nav__item.active { color: var(--sh-accent-text); }
    .mobile-nav__item:hover { text-decoration: none; }

    .content { padding-bottom: 96px; }

    h1 { font-size: 1.55rem; }

    .drawer { width: 100vw; }
}

/* Tablets: the owner column is the first thing worth losing — it is the one value
   also visible on the card in the drawer. */
@media (max-width: 960px) {
    .table td.cell-hide-md,
    .table th.cell-hide-md { display: none; }
}

/* Below 720px the table stops being a table: each lead becomes one readable card,
   because a horizontally scrolling table on a phone is unusable.

   No "NAAM / FASE / ONTVANGEN" labels here. A name reads as a name and a stage pill
   reads as a stage, so the labels would be pure chrome on the smallest screen — the
   one place there is least room for it. */
@media (max-width: 720px) {
    .table thead { display: none; }

    .table, .table tbody { display: block; width: 100%; }

    .table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--sh-line-soft);
    }

    .table td {
        display: block;
        padding: 0;
        border: 0;
    }

    /* Name and contact take the full width; stage and age share the line below it. */
    .table td.cell-primary { grid-column: 1 / -1; }

    .table td.cell-stage { justify-self: start; }

    .table td.cell-age { justify-self: end; }

    .table td.cell-hide-sm { display: none; }

    /* A pinned answer becomes a line of the card, carrying its question along now that the
       header row is gone. A lead that never answered it shows nothing rather than a bare label. */
    .table td.cell-pinned {
        grid-column: 1 / -1;
        display: flex;
        gap: 6px;
        font-size: .82rem;
    }

    .table td.cell-pinned::before {
        content: attr(data-label);
        flex: 0 1 auto;
        max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--sh-muted);
    }

    .table td.cell-pinned--empty { display: none; }

    .cell-pinned__text {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        font-weight: 600;
    }

    /* On a phone the answers come up from the bottom edge: a panel hanging off a chip would run
       off the side of the screen. */
    .answer-filter {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    /* The restore button gets a line of its own; rows with nothing to do there drop the cell. */
    .table td.cell-actions { grid-column: 1 / -1; text-align: left; }

    .table td.cell-actions--empty { display: none; }

    /* Search gets its own line rather than competing with the filter chips. */
    .search {
        flex: 1 1 100%;
        max-width: none;
    }

    .rail__keys { gap: 4px 16px; }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --------------------------------------------------------------------------
   16. BOOT + FATAL ERROR
   Rendered by the host page before WebAssembly takes over, and by the framework
   when the circuit dies. Both are plain CSS so they work with no runtime.
   -------------------------------------------------------------------------- */
.boot {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    background: var(--sh-canvas);
    z-index: 100;
}

.boot__mark {
    display: block;
    height: 44px;
    width: auto;
    animation: boot-pulse 1.4s var(--sh-ease) infinite;
}

@keyframes boot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.boot__text {
    font-family: var(--sh-font-display);
    font-weight: 600;
    color: var(--sh-muted);
}

.error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    padding: 14px var(--sh-gutter);
    background: var(--sh-red);
    color: #fff;
    font-weight: 600;
}

.error-ui .reload {
    margin-left: 10px;
    color: #fff;
    text-decoration: underline;
}

/* A new version was deployed (Components/UpdateNotice.razor). Above everything, the fatal-error
   bar included, so nothing can be clicked until the app reloads. */
.update {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(243, 242, 240, .9);
    backdrop-filter: blur(6px);
    animation: update-in .25s var(--sh-ease);
}

.update__card {
    display: grid;
    justify-items: center;
    gap: 14px;
    width: min(440px, 100%);
    padding: 36px 32px 32px;
    background: var(--sh-paper);
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow-lg);
    text-align: center;
}

.update__mark {
    display: block;
    height: 36px;
    width: auto;
    margin-bottom: 6px;
}

.update__title {
    font-size: 1.15rem;
}

.update__body {
    margin: 0 0 8px;
    color: var(--sh-muted);
}

.update__spin {
    animation: spin .8s linear infinite;
}

@keyframes update-in {
    from { opacity: 0; }
}

/* --------------------------------------------------------------------------
   17. FULL-PAGE STATES (spinner, sign-in hand-off, no-access)
   -------------------------------------------------------------------------- */
.fullpage {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    min-height: 70vh;
    padding: 40px 24px;
    text-align: center;
}

.spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--sh-accent-soft);
    border-top-color: var(--sh-accent-deep);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Automations — the rule editor, the template editor and the DNS records
   ========================================================================== */

/* One action inside a rule. Neutral on purpose: .confirm is reserved for "are you sure?". */
.action-block {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-canvas);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 18px;
}

/* Editor and preview side by side where there is room, stacked where there is not. */
.template-editor {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 1180px) {
    .template-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

.template-preview {
    display: block;
    width: 100%;
    height: 420px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: #fff;
}

/* Files that go out with a template. One row per file, the picker beneath. */
.file-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: #fff;
}

.file-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 12px;
    font-size: .88rem;
}

.file-list__item + .file-list__item { border-top: 1px solid var(--sh-line); }

.file-list__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-list__size {
    flex: none;
    color: var(--sh-ink-soft);
    font-size: .8rem;
}

/* The rich-text editor. Quill's own "snow" theme supplies the mechanics; this makes it one of ours:
   the input's border and radius, the brand focus ring, the body face. */
.html-editor {
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: #fff;
    overflow: hidden;
    transition: box-shadow .16s var(--sh-ease, ease), border-color .16s var(--sh-ease, ease);
}

.html-editor:focus-within {
    border-color: var(--sh-accent-deep);
    box-shadow: 0 0 0 3px rgba(249, 194, 82, .35);
}

.html-editor .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid var(--sh-line);
    background: var(--sh-canvas);
    font-family: var(--sh-font-body);
    padding: 8px 10px;
}

.html-editor .ql-container.ql-snow {
    border: 0;
    font-family: var(--sh-font-body);
    font-size: .95rem;
}

.html-editor .ql-editor {
    min-height: 260px;
    max-height: 520px;
    overflow-y: auto;
    line-height: 1.55;
    color: var(--sh-ink);
}

.html-editor .ql-editor.ql-blank::before {
    color: var(--sh-faint);
    font-style: normal;
}

.html-editor .ql-snow.ql-toolbar button:hover,
.html-editor .ql-snow.ql-toolbar button.ql-active,
.html-editor .ql-snow.ql-toolbar .ql-picker-label:hover,
.html-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active {
    color: var(--sh-accent-text);
}

.html-editor .ql-snow.ql-toolbar button:hover .ql-stroke,
.html-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.html-editor .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: var(--sh-accent-text);
}

.html-editor .ql-snow.ql-toolbar button:hover .ql-fill,
.html-editor .ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--sh-accent-text);
}

/* DNS records: shown to be copied, so the value is monospace and never truncated. */
.dns-records {
    display: grid;
    gap: 12px;
}

.dns-record {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-canvas);
}

.dns-record__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dns-record__purpose {
    font-weight: 700;
    font-size: .9rem;
    margin-right: auto;
}

.dns-record__row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.dns-record__label {
    font-size: .78rem;
    color: var(--sh-muted);
}

.dns-record__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: var(--sh-radius-xs);
    background: #fff;
    border: 1px solid var(--sh-line);
    overflow-wrap: anywhere;
    user-select: all;
}

@media (max-width: 720px) {
    .dns-record__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dns-record__label {
        grid-column: 1 / -1;
    }
}