/* Synthetic Audiences
 *
 * Layout, controls and tokens are the wromance-book-forms admin (admin.css),
 * recoloured: black and white, one accent. The accent is used sparingly — the
 * active menu item, focus rings, ticks, required marks — and never as a text
 * background, so the primary button is black.
 *
 * Accent alternatives, one token to swap:
 *   #FF4F00  signal orange (default)
 *   #2F5BFF  cobalt
 *   #00B37E  green
 */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    --white: #FFFFFF;
    --primary: #0A0A0A;
    --ink-soft: #262626;
    --accent: #FF4F00;
    --accent-dark: #D94300;
    --accent-ring: rgba(255, 79, 0, 0.18);
    --accent-wash: rgba(255, 79, 0, 0.14);
    --light-gray: #F5F5F5;
    --border-gray: #E5E5E5;
    --border-strong: #CFCFCF;
    --text-gray: #525252;
    --text-faint: #A3A3A3;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-width: 260px;
    --header-height: 72px;
    --ac-control-h: 44px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
        'Helvetica Neue', sans-serif;
    background-color: var(--light-gray);
    color: var(--primary);
    line-height: 1.7;
    font-size: 16px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

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

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--ink-soft);
    border-color: var(--ink-soft);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.btn-ghost {
    background: var(--white);
    color: var(--text-gray);
    border-color: var(--border-gray);
    padding: 10px 18px;
    font-size: 0.9rem;
}

.btn-ghost:hover:not(:disabled) {
    color: var(--primary);
    border-color: var(--primary);
}

/* A ghost button that fills black on hover. The text turns white with it: the
   ghost hover above would otherwise keep it black on black. */
.btn-ghost.btn-invert:hover:not(:disabled) {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.82rem;
}

.btn-xl {
    padding: 20px 40px;
    font-size: 1.1rem;
}

/* ---------- App shell ---------- */

.app {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--primary);
    color: var(--white);
    display: flex;
    flex-direction: column;
    padding: 28px 0;
    height: 100vh;
    overflow: hidden;
    transition: width 0.2s, flex-basis 0.2s;
}

.sidebar .brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    overflow: hidden;
    color: var(--white);
    text-decoration: none;
}

.brand__mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--white);
    color: var(--primary);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: -0.04em;
}

.brand__mark i {
    font-style: normal;
    color: var(--accent);
}

.brand__name {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.sidebar nav {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.nav-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px 6px;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    color: rgba(255, 255, 255, 0.4);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.nav-group__items {
    display: flex;
    flex-direction: column;
}

.nav-group__items .nav-item {
    padding-left: 32px;
    padding-right: 14px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-weight: 500;
    border: 0;
    border-left: 3px solid transparent;
    transition: var(--transition);
    cursor: pointer;
    background: none;
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item .icon {
    flex: 0 0 auto;
}

.nav-item__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
}

.nav-item.active {
    color: var(--white);
    border-left-color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
}

/* Reserved places: the rest of the cycle, shown so the menu has its final shape
   and nobody wonders where the other steps went. */
.nav-item--soon,
.nav-item--soon:hover {
    color: rgba(255, 255, 255, 0.32);
    background: none;
    cursor: default;
}

.nav-item__soon {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
}

.sidebar-footer {
    flex: 0 0 auto;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--transition);
}

.sidebar-toggle:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-toggle .icon {
    transition: transform 0.2s;
}

.app.sidebar-collapsed .sidebar-toggle .icon {
    transform: rotate(180deg);
}

.app.sidebar-collapsed .sidebar {
    width: 64px;
    flex-basis: 64px;
}

.app.sidebar-collapsed .nav-item__label,
.app.sidebar-collapsed .nav-item__soon,
.app.sidebar-collapsed .brand__name,
.app.sidebar-collapsed .nav-group__header {
    display: none;
}

.app.sidebar-collapsed .brand {
    padding: 0 0 24px;
    justify-content: center;
}

.app.sidebar-collapsed .nav-item,
.app.sidebar-collapsed .nav-group__items .nav-item,
.app.sidebar-collapsed .sidebar-toggle {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    gap: 0;
}

.app.sidebar-collapsed .nav-group ~ .nav-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--header-height);
    flex: 0 0 var(--header-height);
    background: var(--white);
    border-bottom: 1px solid var(--border-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 32px;
}

.topbar h1 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.topbar__side {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.stage-badge {
    padding: 3px 10px;
    border: 1px solid var(--border-gray);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gray);
    white-space: nowrap;
}

.stage-badge b {
    color: var(--accent);
}

.content {
    flex: 1;
    min-height: 0;
    padding: 32px;
    overflow: auto;
}

.panel {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 40px;
}

.panel + .panel {
    margin-top: 20px;
}

.icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 2;
}

.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 20px; height: 20px; }

/* ---------- Home ---------- */

.home {
    min-height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
}

.home__inner {
    max-width: 560px;
}

.home__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 14px;
}

.home h2 {
    font-size: 2.2rem;
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-weight: 800;
    margin-bottom: 14px;
}

.home h2 i {
    font-style: normal;
    color: var(--accent);
}

.home p {
    color: var(--text-gray);
    margin-bottom: 32px;
}

/* ---------- Questionnaire ---------- */

.form-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding-bottom: 96px;
}

.form-intro {
    margin-bottom: 20px;
    color: var(--text-gray);
    font-size: 0.95rem;
}

.form-intro .req {
    margin: 0 2px;
}

.section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 6px;
}

.section-head__num {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.section-head h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.section-note {
    color: var(--text-gray);
    font-size: 0.88rem;
    margin-bottom: 24px;
}

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

.form-group--wide {
    grid-column: 1 / -1;
}

.form-group label.form-label {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.req {
    color: var(--accent);
    font-weight: 800;
}

.field-note {
    display: block;
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-gray);
    margin-bottom: 8px;
}

.form-group.invalid .ac-select,
.form-group.invalid .ac-input {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.field-error {
    display: none;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--accent-dark);
}

.form-group.invalid .field-error {
    display: block;
}

.checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Fields: one field, the same everywhere (fields.js, 2026-10-01) ----------
 * label row → control → hint UNDER the control (the same slot turns into the error).
 * A hint never sits between the label and the control; long explanations go into the "i".
 * In a form grid (.fgrid) every field spans three grid rows — label / control / hint — as a
 * subgrid, so the controls of one row share a top even when a label wraps or a hint is longer. */
.fld { display: flex; flex-direction: column; min-width: 0; }
.fld__head { display: flex; align-items: flex-end; gap: 8px; min-width: 0; margin-bottom: 6px; }
.fld__head .form-label,
.form-group .fld__head label.form-label { margin-bottom: 0; }
.fld__head .fld__label { min-width: 0; }
.fld__head > :not(.fld__label) { margin-left: auto; flex: none; }
.fld__ctl { min-width: 0; }
.fld__ctl > .ac-input,
.fld__ctl > .ac-select { width: 100%; }
.fld__ctl > .tabs { margin-bottom: 0; }
.fld__hint {
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-gray);
}
.fld--hinted .fld__hint,
.fld--ruled .fld__hint,
.fld.invalid .fld__hint { margin-top: 5px; }
/* A field with a format rule keeps a line for its message, so typing never moves what is below. */
.fld--ruled .fld__hint { min-height: 1.45em; }
.fld__err { display: none; color: var(--accent-dark); font-weight: 600; }
.fld.invalid .fld__note { display: none; }
.fld.invalid .fld__err { display: block; }
.fld.invalid .ac-input,
.fld.invalid .ac-select { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.fld .field-error { display: none !important; }
.fld--action .fld__ctl { display: flex; align-items: center; gap: 10px; min-height: var(--ac-control-h); }
/* The button of an action field is as tall as the controls beside it (top and bottom level, ui:check-forms). */
.fld--action .fld__ctl > .btn { height: var(--ac-control-h); padding-top: 0; padding-bottom: 0; }
/* In a row it follows a field sideways — no column gap above it. */
.fld + .fld.fld--action { margin-top: 0; }
/* The compact look of toolbars, panels and dialogs (was .mkt-field): a small uppercase label. */
.fld--compact .fld__head { margin-bottom: 6px; }
.form-group.fld--compact .fld__head label.fld__label,
.fld--compact .fld__label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-gray); }
.fld--action .fld__label { visibility: hidden; }
/* Fields one under another (a dialog, a column). */
.fld + .fld,
.fld + .fgrid,
.fgrid + .fld,
.fgrid + .fgrid { margin-top: 16px; }
/* …unless the column already spaces them with its own gap. */
:is(.hyp__form, .profile-form, .seg-form) > :is(.fld, .fgrid) { margin-top: 0; }

.fgrid {
    --fgap: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
    margin-bottom: calc(-1 * var(--fgap));
}
.fgrid--1 { grid-template-columns: minmax(0, 1fr); }
.fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fgrid > * { margin-bottom: var(--fgap); }
.fgrid > .fld { grid-row: span 3; }
.fgrid > .fld + .fld { margin-top: 0; }
.fgrid > .fld--wide,
.fgrid > .form-group--wide,
.fgrid > :not(.fld) { grid-column: 1 / -1; }
@supports (grid-template-rows: subgrid) {
    .fgrid > .fld { display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .fgrid > .fld > .fld__head { align-self: end; }
}
@media (max-width: 860px) {
    .fgrid, .fgrid--3 { grid-template-columns: minmax(0, 1fr); }
    .fgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .fgrid--4 { grid-template-columns: minmax(0, 1fr); }
}


/* The bar that follows the form: how much is left, and the one action. */
.form-bar {
    position: sticky;
    bottom: 0;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.06);
}

.form-bar__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.progress {
    width: 140px;
    height: 6px;
    border-radius: 3px;
    background: var(--light-gray);
    overflow: hidden;
    flex: 0 0 auto;
}

.progress__fill {
    height: 100%;
    width: 0;
    background: var(--primary);
    transition: width 0.25s;
}

.progress.done .progress__fill {
    background: var(--accent);
}

.form-bar__count {
    font-size: 0.85rem;
    color: var(--text-gray);
    white-space: nowrap;
}

.form-bar__right {
    display: flex;
    gap: 10px;
}

.form-bar .btn-primary {
    padding: 10px 22px;
    font-size: 0.95rem;
}

/* ---------- Result ---------- */

.result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.result-head h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.result-head p {
    color: var(--text-gray);
    font-size: 0.88rem;
}

.result-acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tabs {
    display: inline-flex;
    padding: 3px;
    margin-bottom: 12px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    background: var(--light-gray);
}

.tabs button {
    padding: 6px 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-gray);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.tabs button.on {
    background: var(--white);
    color: var(--primary);
    font-weight: 600;
    box-shadow: var(--shadow);
}

.prompt-box {
    width: 100%;
    min-height: 60vh;
    padding: 20px 22px;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    background: #FAFAFA;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--primary);
    resize: vertical;
}

.prompt-box:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.next-step h3 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 4px;
}

.next-step p {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.88rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    z-index: 1000;
}

/* ---------- Table, toolbar, badges (from book-forms admin.css) ---------- */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.table-panel {
    padding: 0;
    overflow: hidden;
}

.table-scroll {
    overflow: auto;
}

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

.data-table th,
.data-table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-gray);
    white-space: nowrap;
}

.data-table th {
    background: var(--light-gray);
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-gray);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--border-gray);
}

.data-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.data-table tbody tr:hover {
    background: var(--light-gray);
}

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

.cell-strong { font-weight: 600; }
.cell-muted { color: var(--text-gray); }

.cell-clip {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-empty {
    padding: 48px;
    text-align: center;
    color: var(--text-gray);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(6ch + 20px);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge--pending   { background: #F1F1F1; color: #6B6B6B; }
.badge--running   { background: var(--accent-wash); color: var(--accent-dark); }
.badge--questions { background: #FFF4D6; color: #8A5A00; }
.badge--done      { background: var(--primary); color: var(--white); }
.badge--error     { background: #FDE8E8; color: #B42318; }

/* ---------- A run of the persona agent ---------- */

.run-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.run-head h2 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--text-gray);
    font-size: 0.85rem;
    text-decoration: none;
}

.back-link:hover { color: var(--primary); }

.run-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    color: var(--text-gray);
    font-size: 0.85rem;
}

.run-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-color: #F5C2C0;
    background: #FFF8F7;
}

.run-error h3 {
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.run-error p {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.thinking {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: var(--light-gray);
    font-size: 0.85rem;
    color: var(--text-gray);
    overflow: hidden;
}

.thinking__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    align-self: center;
    animation: pulse 1.2s ease-in-out infinite;
}

.thinking__label {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--primary);
}

.thinking__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
    min-width: 0;
}

@keyframes pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
}

.prompt-box--static {
    min-height: 0;
    white-space: pre-wrap;
    resize: none;
}

/* The agent's report, rendered from Markdown. */
.md {
    font-size: 0.95rem;
    line-height: 1.65;
}

.md:empty { display: none; }

.md > :first-child { margin-top: 0; }

.md h1, .md h2, .md h3, .md h4 {
    margin: 1.6em 0 0.5em;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.md h1 { font-size: 1.5rem; }
.md h2 { font-size: 1.2rem; padding-top: 1.2em; border-top: 1px solid var(--border-gray); }
.md h3 { font-size: 1.02rem; }
.md h4 { font-size: 0.95rem; }

.md p, .md ul, .md ol, .md blockquote, .md table { margin: 0.6em 0; }
.md ul, .md ol { padding-left: 1.3em; }
.md li + li { margin-top: 0.25em; }

.md blockquote {
    padding: 4px 14px;
    border-left: 3px solid var(--accent);
    color: var(--text-gray);
}

.md code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--light-gray);
    font-size: 0.85em;
}

.md table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.md th, .md td {
    padding: 8px 12px;
    border: 1px solid var(--border-gray);
    text-align: left;
    vertical-align: top;
}

.md th { background: var(--light-gray); }

/* Persona cards, over the report. */
.persona-grid {
    display: grid;
    /* SA-033: at most 9 personas per run — a 3 × 3 grid. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.persona-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.persona-card__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.persona-card__num {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent);
}

.persona-card h3 {
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.persona-card__meta {
    color: var(--text-gray);
    font-size: 0.84rem;
}

.persona-card__summary {
    font-size: 0.92rem;
}

.persona-card__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.persona-card__stance p {
    font-size: 0.9rem;
}

.persona-card__quote {
    margin-top: auto;
    padding-left: 12px;
    border-left: 3px solid var(--accent);
    font-style: italic;
    color: var(--text-gray);
    font-size: 0.9rem;
}

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

.chip {
    padding: 2px 9px;
    border: 1px solid var(--border-gray);
    border-radius: 999px;
    font-size: 0.76rem;
    color: var(--text-gray);
}

.chip b {
    font-weight: 600;
    color: var(--primary);
}

.reply .ac-input--area {
    margin-top: 4px;
}

.reply__acts {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

/* ---------- Interview with a persona (SA-003) ---------- */

.persona-card__talk {
    align-self: flex-start;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* The conversation fills the screen and scrolls inside itself; the input stays
   put under it. */
.chat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
    height: calc(100vh - var(--header-height) - 64px);
}

.chat-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 24px 28px;
}

.chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-gray);
}

.chat-head h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.chat-head__acts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-pick {
    width: 260px;
}

.chat-head__acts .btn {
    height: var(--ac-control-h);
    gap: 6px;
}

.chat-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 2px;
}

.chat-empty {
    margin: auto 0;
    text-align: center;
    color: var(--text-gray);
    font-size: 0.92rem;
}

.chat-empty p {
    max-width: 440px;
    margin: 0 auto 16px;
}

.chat-starters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 640px;
    margin: 0 auto;
}

.starter {
    padding: 8px 14px;
    border: 1px solid var(--border-gray);
    border-radius: 999px;
    background: var(--white);
    font: inherit;
    font-size: 0.84rem;
    color: var(--primary);
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.starter:hover {
    border-color: var(--primary);
}

.msg {
    display: flex;
}

.msg--me { justify-content: flex-end; }

.msg__body {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.93rem;
    line-height: 1.55;
    white-space: normal;
}

.msg--me .msg__body {
    background: var(--primary);
    color: var(--white);
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}

.msg--them .msg__body {
    background: var(--light-gray);
    border-bottom-left-radius: 4px;
}

.msg__body > :first-child { margin-top: 0; }
.msg__body > :last-child { margin-bottom: 0; }
.msg__body p + p { margin-top: 0.6em; }
.msg__body ul, .msg__body ol { padding-left: 1.2em; margin: 0.4em 0; }

.typing {
    color: var(--text-gray);
    font-size: 0.85rem;
}

.typing::after {
    content: '…';
    display: inline-block;
    animation: pulse 1.2s ease-in-out infinite;
}

.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-gray);
}

.chat-input .ac-input--area {
    flex: 1;
    min-height: 48px;
    max-height: 200px;
    resize: none;
}

.chat-input .btn {
    padding: 12px 18px;
    font-size: 0.92rem;
    gap: 8px;
}

.chat-profile {
    padding: 22px;
    overflow-y: auto;
    font-size: 0.88rem;
}

.chat-profile__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 10px;
}

.chat-profile__summary {
    margin-bottom: 14px;
}

.chat-profile__section {
    margin-top: 14px;
}

.chat-profile__section ul {
    padding-left: 1.1em;
}

.chat-profile__section li + li {
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .chat {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }
    .chat-main { height: calc(100vh - var(--header-height) - 48px); }
    .chat-head { flex-wrap: wrap; }
}

/* ---------- Group interview (SA-011) ---------- */

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

.btn.icon-only {
    width: var(--ac-control-h);
    padding: 0;
}

.mode-switch {
    margin: 0;
}

.mode-switch button {
    padding: 8px 14px;
}

.avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 800;
}

.who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
}

.who--btn {
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--border-gray);
    border-radius: 999px;
    background: var(--white);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--transition);
}

.who--btn:hover {
    border-color: var(--primary);
}

.speaker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}

.speaker span {
    color: var(--text-gray);
}

.round {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.round + .round {
    margin-top: 10px;
}

.round__to {
    align-self: flex-end;
    margin-top: -6px;
    font-size: 0.78rem;
    color: var(--text-gray);
}

.round__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.round__divider::before,
.round__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-gray);
}

/* Panel: one column per persona, read across. */
.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.answer {
    padding: 14px 16px;
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    background: var(--white);
}

/* Discussion: a feed, in speaking order. */
.feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.say {
    max-width: 82%;
}

.say .answer__body {
    padding: 10px 14px;
    border-radius: 14px;
    border-top-left-radius: 4px;
    background: var(--light-gray);
}

.answer__body {
    font-size: 0.92rem;
    line-height: 1.55;
}

.answer__body > :first-child { margin-top: 0; }
.answer__body > :last-child { margin-bottom: 0; }
.answer__body p + p { margin-top: 0.6em; }

.group-people {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-gray);
}

.group-people + .chat-input {
    border-top: 0;
    padding-top: 10px;
}

.group-people__label {
    font-size: 0.78rem;
    color: var(--text-gray);
    margin-right: 2px;
}

.group-acts {
    display: flex;
    gap: 8px;
}

/* ---------- Dialog (book-forms controls.js dialog()) ---------- */

.ac-dialog__back {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ac-dialog {
    width: min(440px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    padding: 22px 24px 18px;
}

.ac-dialog--wide { width: min(1040px, 100%); }

.ac-dialog__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.ac-dialog__note {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: var(--text-gray);
}

.ac-dialog__error {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #FDE8E8;
    color: #B42318;
    font-size: 0.85rem;
}

.ac-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.ac-dialog__foot .btn {
    padding: 10px 18px;
    font-size: 0.9rem;
}

/* ---------- Hypotheses (SA-004) ---------- */

.hyp-section {
    margin-bottom: 20px;
}

.hyp-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.hyp-section__head h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hyp-section__head .section-note {
    margin: 2px 0 0;
}

.hyp-section__tools .tabs {
    margin: 0;
}

.hyp-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
}

.hyp {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 0.88rem;
}

.hyp--saved { border-color: var(--primary); }
.hyp--rejected { opacity: 0.6; }
.hyp--editing { grid-column: 1 / -1; }

.hyp__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-gray);
}

.hyp__kind {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.66rem;
}

.hyp__head .badge {
    margin-left: auto;
    min-width: 0;
}

.hyp__statement {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.hyp__field p {
    margin-top: 1px;
}

.stimuli {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 3px;
}

.stimulus {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--light-gray);
}

.stimulus__label {
    flex: 0 0 auto;
    min-width: 22px;
    font-weight: 800;
    font-size: 0.76rem;
    color: var(--accent);
}

.hyp__evidence summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
}

.hyp__evidence blockquote {
    margin: 8px 0 0;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
    font-style: italic;
    color: var(--text-gray);
}

.hyp__evidence cite {
    font-style: normal;
    font-weight: 600;
    color: var(--primary);
}

.hyp__why {
    margin-top: 8px;
    color: var(--text-gray);
}

.hyp__acts {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.hyp__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stim-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.stim-edit__row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.stim-edit__row .stim-edit__label {
    flex: 0 0 90px;
}

.stim-edit__row textarea {
    flex: 1;
}

.ac-dialog .hyp-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ---------- Personality data (SA-005) ---------- */

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

.tile {
    padding: 16px 18px;
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
}

.tile__value {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tile__label {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-gray);
}

.data-table--static tbody tr { cursor: default; }

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table .z { color: var(--text-gray); }
.data-table .row-thin td { opacity: 0.45; }
.data-table .z--up { color: var(--primary); font-weight: 700; }
.data-table .z--down { color: var(--accent-dark); font-weight: 700; }

.th-label {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.th-label:hover { color: var(--primary); }

.sort-arrow {
    font-size: 0.7rem;
    color: var(--accent);
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The search box (book-forms controls.js `search`). */
.ac-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ac-search input.ac-search__input {
    width: 280px;
    padding: 9px 32px 9px 36px;
}

.ac-search__icon {
    position: absolute;
    left: 12px;
    color: var(--text-faint);
    pointer-events: none;
}

.ac-search__clear {
    position: absolute;
    right: 8px;
    display: inline-flex;
    padding: 2px;
    background: none;
    border: 0;
    border-radius: 4px;
    line-height: 0;
    color: var(--text-faint);
    cursor: pointer;
}

.ac-search__clear:hover { color: var(--primary); }

/* ---------- Segment bounds (SA-006) ---------- */

.seg-summary {
    margin-bottom: 20px;
    /* The panel's own padding: its fold button stands where the other blocks' do. */
}

.seg-summary__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.seg-summary__head h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.seg-summary__head .section-note { margin: 2px 0 0; }

.seg-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    background: var(--light-gray);
    overflow: hidden;
}

.seg-bar__part + .seg-bar__part { border-left: 2px solid var(--white); }

.seg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 0.82rem;
}

.seg-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.seg-legend__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.seg-legend__rest {
    font-weight: 400;
    color: var(--text-gray);
}

.seg {
    padding-top: 12px;
    border-top: 1px dashed var(--border-gray);
    font-size: 0.84rem;
}

.seg:empty { display: none; }

.seg__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.seg__edit {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-dark);
    cursor: pointer;
}

.seg__edit:hover { text-decoration: underline; }

.seg__none { color: var(--text-gray); }

.seg__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--text-gray);
    margin-bottom: 8px;
}

.seg__share {
    color: var(--primary);
    font-weight: 700;
}

.seg__countries {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.seg__country {
    display: flex;
    align-items: center;
    gap: 8px;
}

.seg__country b { margin-left: auto; font-variant-numeric: tabular-nums; }
.seg__more { color: var(--text-gray); font-size: 0.78rem; }
.seg__people { color: var(--text-gray); font-size: 0.74rem; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.seg__country--other { color: var(--text-gray); }
.seg__country > * { flex-shrink: 0; }
.seg__country > span:first-child { flex-shrink: 1; min-width: 0; }
.seg__country .badge { min-width: 0; padding: 2px 8px; font-size: 0.68rem; }

.tilt--strong { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.tilt--clear { color: var(--primary); }
.tilt--slight { color: var(--text-gray); }

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

.seg-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.seg-form__shares {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.seg-form__share {
    display: grid;
    grid-template-columns: 1fr 110px 20px;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.seg-form__tilt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.seg-form__tiltrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 150px 44px;
    gap: 8px;
}

.seg-form__tiltrow .icon-only { height: var(--ac-control-h); }

@media (max-width: 860px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Our own form controls (from book-forms controls.js) ---------- */

.ac-select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: var(--ac-control-h);
    padding: 9px 12px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--primary);
    cursor: pointer;
    text-align: left;
}

.ac-select:hover {
    border-color: var(--border-strong);
}

.ac-select--open,
.ac-select:focus-visible {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.ac-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-select--empty .ac-select__label {
    color: var(--text-faint);
}

.ac-select__caret {
    flex: 0 0 auto;
    color: var(--text-gray);
}

.ac-pop {
    position: absolute;
    z-index: 500;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    padding: 6px;
    max-width: 420px;
}

.ac-pop__search {
    width: 100%;
    padding: 7px 9px;
    margin-bottom: 6px;
    border: 1px solid var(--border-gray);
    border-radius: 7px;
    font: inherit;
    font-size: 0.88rem;
}

.ac-pop__search:focus {
    outline: none;
    border-color: var(--primary);
}

.ac-pop__list {
    max-height: 260px;
    overflow-y: auto;
}

.ac-pop__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 7px 9px;
    background: none;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-size: 0.88rem;
    color: var(--primary);
    cursor: pointer;
    text-align: left;
}

.ac-pop__item:hover {
    background: var(--light-gray);
}

.ac-pop__item--on {
    font-weight: 600;
    color: var(--primary);
}

.ac-pop__item--off,
.ac-pop__item--off:hover {
    color: var(--text-faint);
    background: none;
    cursor: not-allowed;
}

.ac-pop__item--multi {
    justify-content: flex-start;
}

.ac-pop__item--multi .ac-pop__text {
    flex: 1 1 auto;
}

.ac-pop__tick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    visibility: hidden;
}

.ac-pop__item--on .ac-pop__tick {
    visibility: visible;
}

.ac-pop__note,
.ac-pop__empty {
    color: var(--text-gray);
    font-size: 0.8rem;
}

.ac-pop__empty {
    padding: 10px 9px;
}

.ac-pop__group {
    padding: 8px 9px 3px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ac-pop__group:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid var(--border-gray);
}

.ac-input {
    width: 100%;
    height: var(--ac-control-h);
    min-height: var(--ac-control-h);
    padding: 9px 12px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--primary);
}

.ac-input:hover {
    border-color: var(--border-strong);
}

.ac-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

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

.ac-input--area {
    height: auto;
    resize: vertical;
    line-height: 1.55;
}

.ac-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
}

.ac-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ac-check__box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--white);
    position: relative;
    transition: background 0.12s, border-color 0.12s;
}

.ac-check__box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0.6);
    opacity: 0;
    transition: opacity 0.12s, transform 0.12s;
}

.ac-check input:checked + .ac-check__box {
    background: var(--primary);
    border-color: var(--primary);
}

.ac-check input:checked + .ac-check__box::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.ac-check input:focus-visible + .ac-check__box {
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.ac-check__note {
    color: var(--text-gray);
    font-size: 0.8rem;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1440px) {
    .content { padding: 24px; }
}

@media (max-width: 860px) {
    .grid { grid-template-columns: minmax(0, 1fr); }
    .panel { padding: 24px; }
}

@media (max-width: 768px) {
    :root { --sidebar-width: 64px; }

    .nav-item__label,
    .nav-item__soon,
    .brand__name,
    .nav-group__header,
    .sidebar-toggle {
        display: none;
    }

    .sidebar .brand,
    .nav-item,
    .nav-group__items .nav-item {
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
        gap: 0;
    }

    .nav-group ~ .nav-group {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .topbar { padding: 0 16px; }
    .stage-badge { display: none; }
    .content { padding: 16px; }
    .home h2 { font-size: 1.7rem; }
    .progress { display: none; }
    .form-bar { padding: 10px 12px; }
}

.stim-edit__row .icon-only {
    height: var(--ac-control-h);
}

/* ---------- Segments: explicit 100% and the "i" window (SA-012) ---------- */

.seg-summary__head h2 {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* A round "i" beside a title: the icon button of the kit, shrunk to the line. */
.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-gray);
    cursor: pointer;
    transition: var(--transition);
}

.info-btn .icon { width: 19px; height: 19px; }
.info-btn:hover { background: var(--light-gray); color: var(--accent-dark); }
.info-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* Inline, not flex: the definition is a sentence and should wrap like one,
   with the size running on after it. */
.seg-market {
    margin: 0 0 10px;
    line-height: 1.5;
    font-size: 0.86rem;
    color: var(--text-gray);
}

.seg-market > span + span { margin-left: 6px; }
.seg-market__label { font-weight: 700; color: var(--primary); }
.seg-market__def { color: var(--ink-soft); }
.seg-market__def--none { color: var(--text-gray); font-style: italic; }
.seg-market__size { font-weight: 700; color: var(--primary); white-space: nowrap; }
.seg-market__range { font-size: 0.78rem; color: var(--text-faint); white-space: nowrap; }

/* SA-024: what changed since the last estimate (only then can it be recalculated),
   and the versions of the estimate under the bar. */
.seg-changes {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--accent);
    background: var(--accent-wash);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--ink-soft);
}
.seg-changes[hidden] { display: none; }
.seg-changes__line { margin: 0; line-height: 1.5; }
.seg-changes__line + .seg-changes__line { margin-top: 4px; }
.seg-changes__line b { color: var(--primary); font-weight: 700; }

.seg-versions { margin-top: 12px; font-size: 0.8rem; color: var(--text-gray); line-height: 1.5; }
.seg-versions[hidden] { display: none; }
.seg-versions p { margin: 0; }
.seg-versions__head b { color: var(--primary); font-weight: 700; }
.seg-versions__spread { margin-top: 2px !important; }
.seg-versions__link {
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent-dark);
    cursor: pointer;
}
.seg-versions__link:hover { text-decoration: underline; }
.seg-versions__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: 4px; }

.seg-info {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 880px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.seg-info__section + .seg-info__section {
    padding-top: 18px;
    border-top: 1px solid var(--border-gray);
}

.seg-info__h {
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-gray);
}

.seg-info__p { margin: 0 0 8px; }
.seg-info__p:last-child { margin-bottom: 0; }
.seg-info__muted { color: var(--text-gray); font-size: 0.85rem; }
.seg-info__strong { font-weight: 700; color: var(--primary); }

.seg-info__quote {
    padding-left: 12px;
    border-left: 3px solid var(--accent);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
}

.seg-info__size {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 8px;
    color: var(--text-gray);
}

.seg-info__size b { font-size: 1.1rem; color: var(--primary); }

.seg-info__list {
    margin: 0 0 8px;
    padding-left: 20px;
}

.seg-info__list li + li { margin-top: 4px; }

/* A read-only table inside a scrolling dialog: no sticky head (it slid over
   the text above), no row hover promising a click, and the reasons wrap. */
.seg-info__table { width: 100%; font-size: 0.86rem; }
.seg-info__table th { position: static; padding: 9px 12px; }
.seg-info__table td { vertical-align: top; padding: 10px 12px; }
.seg-info__table .seg-info__why { white-space: normal; min-width: 320px; }
.seg-info__table tbody tr { cursor: default; }
.seg-info__table tbody tr:hover { background: none; }
.seg-info__table .seg-legend__dot { display: inline-block; }
.seg-info__table .num { white-space: nowrap; }
.seg-info__why { color: var(--text-gray); font-size: 0.84rem; }
.seg-info__rest td { color: var(--text-gray); }

/* SA-027: the category assumption's control, cross-checks, the card's sources line. */
.seg-cat {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 8px;
}
.seg-cat .ac-select { min-width: 200px; }
.seg-cat__nums { display: flex; gap: 8px; }
.seg-cat__nums[hidden] { display: none; }
.seg-cat__num { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; }
.seg-cat__num input { width: 84px; }
.seg-info__scroll { max-width: 100%; overflow-x: auto; }
.seg-info__table--wrap td:not(.num) { white-space: normal; }
.seg-info__table .seg-info__note { white-space: normal; min-width: 150px; color: var(--text-gray); font-size: 0.84rem; }
.seg-cross { margin-top: 6px; color: var(--text-faint); font-size: 0.8rem; }
.seg-info__table td .badge { margin-left: 6px; }
.seg-info__table a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--border-gray); }
.seg__sources { display: flex; align-items: center; gap: 4px; margin-top: 6px; }

/* ---------- A note that opens on click (tip.js, SA-012) ---------- */

/* Whatever has a note looks pressable: a pointer, and a hover that answers. */
.has-tip { cursor: pointer; }
.has-tip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.chip.has-tip { transition: var(--transition); }
.chip.has-tip:hover,
.chip.has-tip--open { border-color: var(--primary); background: var(--light-gray); }
.badge.has-tip:hover,
.badge.has-tip--open { box-shadow: 0 0 0 2px var(--accent-ring); }
.seg-bar__part.has-tip:hover,
.seg-bar__part.has-tip--open { filter: brightness(0.88); }

.tip-icon {
    display: inline-flex;
    vertical-align: -2px;
    margin-left: 6px;
    color: var(--text-gray);
}

.tip-icon:hover,
.tip-icon.has-tip--open { color: var(--accent-dark); }

.tip-pop {
    position: absolute;
    z-index: 500;
    width: max-content;
    max-width: min(340px, calc(100vw - 32px));
    padding: 12px 34px 12px 14px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.tip-pop__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    padding: 3px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
}

.tip-pop__close:hover { color: var(--primary); background: var(--light-gray); }

.tip-pop__title {
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--primary);
}

.tip-pop__row {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 8px;
}

.tip-pop__key { color: var(--text-faint); }
.tip-pop__line { margin: 6px 0 0; }
.tip-pop__row + .tip-pop__line { margin-top: 8px; }
.tip-pop__note { margin: 8px 0 0; font-size: 0.76rem; color: var(--text-gray); }

/* ---------- Twins (SA-007) ---------- */

/* The line on a persona card, under its segment. */
.twins-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-gray);
    font-size: 0.84rem;
}

.twins-line__none { color: var(--text-gray); }

.twins-line__link {
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.twins-line__link:hover { color: var(--accent-dark); }
.twins-line .badge { min-width: 0; padding: 2px 8px; font-size: 0.68rem; }

.twins-acts { align-items: center; }
.twins-count .ac-select { min-width: 140px; }
.twins-acts .btn-primary { padding: 11px 18px; font-size: 0.9rem; }

.twins-note {
    margin-bottom: 20px;
    border-color: #F0D9A8;
    background: #FFFBF0;
    font-size: 0.9rem;
}

.tile__value .tip-icon { margin-left: 6px; vertical-align: middle; }
.twins-countries { margin-top: 16px; }

.data-table .row-group td {
    padding: 14px 16px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    background: none;
}

.data-table--static tbody tr.row-group:hover { background: none; }
.data-table .row-aimed td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.twins-facets td { padding-top: 8px; padding-bottom: 8px; }
.aim-word { color: var(--text-gray); font-size: 0.8rem; margin-right: 2px; }

/* A score on a strip from −1.5 to +1.5 standard deviations. */
.fstrip-cell { width: 42%; min-width: 220px; }

.fstrip {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: var(--light-gray);
}

.fstrip__zero {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-strong);
}

.fstrip__band {
    position: absolute;
    top: 4px;
    height: 8px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.12);
}

.fstrip__aim,
.fstrip__mean {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.fstrip__aim {
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent);
    background: var(--white);
}

.fstrip__mean {
    width: 8px;
    height: 8px;
    background: var(--primary);
}

.fstrip-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 4px 0 10px;
    font-size: 0.8rem;
    color: var(--text-gray);
}

.fstrip-legend span { display: inline-flex; align-items: center; gap: 6px; }

.fstrip-key { display: inline-block; border-radius: 50%; }
.fstrip-key--mean { width: 8px; height: 8px; background: var(--primary); }
.fstrip-key--aim { width: 12px; height: 12px; border: 2px solid var(--accent); }
.fstrip-key--band { width: 22px; height: 8px; border-radius: 999px; background: rgba(10, 10, 10, 0.12); }

.twin-words {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    white-space: normal !important;
    min-width: 320px;
}

.twin-card .chips { margin: 10px 0 14px; }
.twin-facets td { padding-top: 6px; padding-bottom: 6px; }
.twins-how .badge + .badge { margin-left: 6px; }

/* ---------- Facet chips from the twins (SA-014) ---------- */

.seg__tilt-label {
    margin: 2px 0 6px;
    font-size: 0.76rem;
    color: var(--text-gray);
}

/* ---------- The persona's personality (SA-015) ---------- */

.psych {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-gray);
    font-size: 0.84rem;
}

.psych[hidden] { display: none; }
.psych__head { display: flex; align-items: center; }
.psych__none,
.psych__fits,
.psych__note { margin: 0; color: var(--text-gray); font-size: 0.8rem; }

.psych__clash {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.psych__clash-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent-dark);
}

.psych__clash-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    padding: 4px 8px;
    border-left: 2px solid var(--accent);
    background: var(--light-gray);
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.psych__clash-row b { font-weight: 600; color: var(--primary); }
.psych__clash-arrow { color: var(--text-faint); }
.psych__clash-row.has-tip:hover,
.psych__clash-row.has-tip--open { background: var(--accent-wash); }

.psych__stale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    color: var(--text-gray);
    font-size: 0.8rem;
}

.psych__stale .badge { min-width: 0; padding: 2px 8px; font-size: 0.68rem; }
.psych__why { text-decoration: underline dotted; text-underline-offset: 3px; }
.psych__why:hover,
.psych__why.has-tip--open { color: var(--primary); }

.chat-profile__psych { margin: 4px 0 6px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-gray); }

/* ---------- Twin ages (SA-013) ---------- */

.twins-ages {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 18px;
    max-width: 640px;
    font-size: 0.84rem;
}

.twins-ages__head { font-weight: 700; color: var(--primary); margin-bottom: 2px; }

.twins-ages__row {
    display: grid;
    grid-template-columns: 56px 1fr 72px 110px;
    align-items: center;
    gap: 10px;
}

.twins-ages__label { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.twins-ages__track {
    position: relative;
    height: 10px;
    background: var(--light-gray);
    border-radius: 5px;
}

.twins-ages__bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--primary);
    border-radius: 5px;
}

/* Where an even spread would end: a thin accent tick. */
.twins-ages__even {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: var(--accent);
}

.twins-ages__num { font-variant-numeric: tabular-nums; font-weight: 600; }
.twins-ages__note { color: var(--text-gray); font-size: 0.78rem; }

@media (max-width: 640px) {
    .twins-ages__row { grid-template-columns: 48px 1fr 64px; }
    .twins-ages__note { display: none; }
}

/* The twins' trait chips: their own block after the segment facts (owner, 2026-09-25). */
.seg-tilt { font-size: 0.84rem; margin-top: -6px; }
.seg-tilt:empty { display: none; }
.psych__clash-key { font-weight: 700; color: var(--primary); }

/* Persona attributes (differs_by): rectangles, not pills — they are facts, not traits (owner, 2026-09-25). */
.chip.chip--attr { border-radius: 6px; padding: 3px 9px; }

.seg__where { display: flex; align-items: center; font-size: 0.76rem; color: var(--text-gray); margin-bottom: 4px; }
.raw-score { font-variant-numeric: tabular-nums; }

/* ---------- Tests of a hypothesis on twins (SA-008) ---------- */

/* On the card: the latest test, as one link-line. */
.hyp__test {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--light-gray);
    color: var(--primary);
    text-decoration: none;
    font-size: 0.82rem;
}

.hyp__test:hover { background: #EDEDED; }
.hyp__test .badge { min-width: 0; }
.hyp__test-headline { flex: 1 1 100%; color: var(--ink-soft); }
.hyp__test-link { margin-left: auto; font-weight: 600; color: var(--accent-dark); }
.hyp__acts .btn .icon { margin-right: 4px; }

/* The verdict, black and white plus the accent: confirmed is solid black,
   refuted the accent, unclear an outline. */
.verdict {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.verdict--confirmed { background: var(--primary); color: var(--white); }
.verdict--refuted { background: var(--accent); color: var(--white); }
.verdict--unclear { background: var(--white); color: var(--primary); border-color: var(--border-strong); }

/* The Validate dialog. */
.test-dlg__statement {
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 6px;
}

.test-dlg__groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 18px;
}

.test-dlg__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
}

.test-dlg__group.is-off { opacity: 0.55; }
.test-dlg__group .ac-check { flex: 0 0 auto; }
.test-dlg__tag { font-size: 0.75rem; color: var(--text-gray); }
.test-dlg__count { margin-left: auto; font-size: 0.8rem; color: var(--text-gray); }
.test-dlg__size { max-width: 320px; }
.test-dlg__hint { margin-top: 6px; font-size: 0.8rem; }

.test-estimate {
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: var(--light-gray);
    font-size: 0.86rem;
}

.test-estimate__main { font-size: 1rem; margin-bottom: 4px; }

/* The test page. */
.test-head { flex: 1 1 520px; min-width: 0; }
.test-head h2 { line-height: 1.35; }
.test-panel { margin-bottom: 20px; padding: 26px 32px; }
.test-panel .section-note .tip-icon { margin-left: 4px; }

.test-progress { margin: 6px 0 10px; height: 8px; }
.test-progress__text { font-size: 0.9rem; margin-bottom: 10px; }
.test-progress__groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.test-recent { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.test-error { color: #B42318; font-size: 0.86rem; margin-top: 8px; }

.test-quote {
    margin: 8px 0 0;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.86rem;
}

.test-quote cite {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--text-gray);
}

.test-verdict__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.test-verdict__head .verdict { font-size: 0.85rem; padding: 5px 14px; }
.test-verdict__headline { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.test-verdict__text { line-height: 1.6; margin-bottom: 14px; }
.test-verdict__expected { margin: 12px 0 16px; }

.test-checks { display: flex; flex-direction: column; gap: 8px; }
.test-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; }
.test-check__mark {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    border: 1px solid var(--border-strong);
}
.test-check--met .test-check__mark { background: var(--primary); color: var(--white); border-color: var(--primary); }
.test-check--not_met .test-check__mark { background: var(--accent); color: var(--white); border-color: var(--accent); }
.test-check__claim { font-weight: 600; }
.test-check__numbers { color: var(--text-gray); font-size: 0.82rem; }

.test-tiles { margin-top: 4px; }

.test-warn { border-left: 3px solid var(--accent); }
.test-warn__list { padding-left: 20px; font-size: 0.88rem; }
.test-warn__list li + li { margin-top: 4px; }

.test-table { font-size: 0.86rem; }
.test-table td { vertical-align: top; }
.test-row--base td { background: #FAFAFA; }
.test-grouphead { min-width: 170px; }
.data-table th.test-grouphead { white-space: normal; }
.test-grouphead__sub { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.72rem; color: var(--text-faint); }

.data-table td.test-stim { width: 38%; min-width: 260px; white-space: normal; }
.test-stim .stimulus__label { display: inline-block; min-width: 0; margin-right: 8px; }
.test-stim__text { color: var(--ink-soft); }

.test-cell { min-width: 170px; }
.test-cell__main { display: flex; align-items: baseline; gap: 8px; }
.test-cell__main b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.test-cell__range { font-size: 0.76rem; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.test-cell__sub { font-size: 0.74rem; color: var(--text-gray); margin-top: 3px; }

/* The 95% range as a whisker on a 0–100% track. */
.whisker { position: relative; height: 10px; margin: 6px 0 2px; background: var(--light-gray); border-radius: 5px; }
.whisker__range { position: absolute; top: 3px; height: 4px; background: var(--border-strong); border-radius: 2px; }
.whisker__dot { position: absolute; top: 1px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--primary); }
.whisker__zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-faint); }

/* Answers 1 → 5 as one stacked bar: greys for 1–3, the accent for 4 and 5. */
.dist { display: flex; height: 6px; margin-top: 6px; border-radius: 3px; overflow: hidden; background: var(--light-gray); }
.dist__part { display: block; height: 100%; }
.dist__part--1 { background: #D4D4D4; }
.dist__part--2 { background: #A3A3A3; }
.dist__part--3 { background: #737373; }
.dist__part--4 { background: #FF9A6B; }
.dist__part--5 { background: var(--accent); }

.diff { font-variant-numeric: tabular-nums; }
.diff--up { color: var(--primary); }
.diff--down { color: var(--accent-dark); }

.test-drivers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.test-drivers__col { display: flex; flex-direction: column; gap: 10px; }
.test-driver { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; }
.test-driver__facet { align-self: flex-start; color: var(--primary); font-weight: 600; }
.test-driver--weak { opacity: 0.6; }
/* SA-018: lines left out of the twins' prompts; links between a test and its repeat */
.test-removed { display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem; padding: 8px 10px; border: 1px solid var(--border-gray); border-radius: 6px; }
.test-removed__text { color: var(--text, #111); }
.test-removed__label { font-weight: 600; }
.test-link { font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.test-link:hover { text-decoration: underline; }

.test-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.test-theme { padding: 16px; border: 1px solid var(--border-gray); border-radius: var(--radius); font-size: 0.86rem; }
.test-theme--for { border-top: 3px solid var(--primary); }
.test-theme--against { border-top: 3px solid var(--accent); }
.test-theme__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.test-theme__stance { font-size: 0.72rem; color: var(--text-gray); white-space: nowrap; }
.test-theme__text { color: var(--ink-soft); margin-bottom: 8px; }
.test-theme .chips { margin-bottom: 4px; }

.test-answers { font-size: 0.84rem; }
.data-table.test-answers td { vertical-align: top; white-space: normal; }
.test-answers__quote { font-style: italic; color: var(--ink-soft); min-width: 280px; }

.test-prompt { margin-top: 10px; }
.test-prompt summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.test-prompt .prompt-box { margin: 8px 0 12px; font-size: 0.76rem; }
.test-prompt .persona-card__label { margin-top: 6px; }

/* Trait tables (twins page, twin window): numeric headers wrap by words and
   the column stays as narrow as its numbers — a long header no longer sets
   the width (owner, 2026-09-25). */
.data-table th.th-wrap {
    white-space: normal;
    width: 1%;
    min-width: 76px;
    max-width: 118px;
    line-height: 1.3;
    vertical-align: bottom;
}
.data-table th.th-wrap.num { text-align: right; }
.data-table th.th-wrap:not(.num) { max-width: none; width: auto; }
.th-tail { white-space: nowrap; }
.th-tail .tip-icon { margin-left: 4px; }
.twins-facets th, .twins-facets td,
.twin-facets th, .twin-facets td { padding-left: 10px; padding-right: 10px; }
.twins-facets .fstrip-cell, .twin-facets .fstrip-cell { width: auto; min-width: 150px; }

/* A popover row's key column grows with its word ("Approximated" is wider
   than 76px and ran into the text beside it) — never narrower than before. */
.tip-pop__row { grid-template-columns: minmax(76px, max-content) 1fr; }
.tip-pop__key { white-space: nowrap; }

/* Badges in table cells stay on one line inside their cell: the cell grows. */
.data-table td .badge { flex-shrink: 0; }
.twins-how { white-space: normal; min-width: 150px; }
.twins-how .badge { margin: 2px 0; }
.twin-words { min-width: 240px; }

/* At narrower widths the strip gives way first. */
.twins-facets .fstrip-cell, .twin-facets .fstrip-cell { min-width: 120px; }

/* ---------- SA-021: what twins will not be told, before the survey ---------- */

.prime { display: flex; flex-direction: column; gap: 14px; }
.prime__basis { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed var(--border-gray); border-radius: 6px; }
.prime__group { display: flex; flex-direction: column; gap: 6px; }
.prime__line { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; padding: 7px 10px; border: 1px solid var(--border-gray); border-radius: 6px; }
.prime__line.is-out .prime__words { text-decoration: line-through; color: var(--text-gray); }
.prime__text { flex: 1 1 auto; min-width: 0; }
.prime__act { flex: 0 0 auto; }
.prime__fixed { flex: 0 0 auto; font-size: 0.75rem; color: var(--text-gray); padding: 4px 6px; }
.prime__rest { display: flex; flex-direction: column; gap: 6px; }
.prime__rest > summary { cursor: pointer; font-size: 0.85rem; color: var(--text-gray); margin: 2px 0 6px; }
.prime__rest > .prime__line + .prime__line { margin-top: 6px; }
.test-removed--back { border-style: dashed; }

/* ---------- SA-019: local prices on a hypothesis card ---------- */

.prices { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.prices > p { margin: 0; }
.prices__head { font-size: 0.86rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prices__warn { font-size: 0.82rem; color: #8A5A00; }
.prices__table { width: 100%; }
.prices__table > summary { cursor: pointer; font-size: 0.85rem; margin-bottom: 6px; }
.prices__template { font-size: 0.8rem; margin: 2px 0; }
.prices__grid td { vertical-align: top; }
.prices__row--main .prices__country > div:first-child { font-weight: 600; }
.prices__country { min-width: 150px; }
.prices__grid th, .prices__grid td { padding: 8px; white-space: normal; }
.prices__cell { min-width: 100px; }
.prices__input { width: 100%; min-width: 80px; }
.prices__why { font-size: 0.78rem; color: var(--text-gray); margin-top: 4px; line-height: 1.35; }
.seg__spread { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---------- SA-026: the reference database ---------- */

.ref-sub { font-size: 0.78rem; line-height: 1.35; }
.ref-licence { font-size: 0.84rem; line-height: 1.35; margin-bottom: 4px; }
.ref-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.ref-narrow { font-size: 0.84rem; line-height: 1.4; white-space: normal; }
.ref-notes { font-size: 0.8rem; line-height: 1.4; color: var(--text-gray); white-space: normal; }
#view-ref .data-table td { vertical-align: top; }
#view-ref .data-table .row-nolink { cursor: default; }
#view-ref .data-table tbody tr.is-picked td { background: var(--accent-wash); }
#view-ref .data-table .badge { cursor: pointer; }
#view-ref .data-table--static .badge { cursor: default; }

.ref-facts,
.ref-glossary {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: 10px 20px;
    font-size: 0.9rem;
}
.ref-facts dt,
.ref-glossary dt { color: var(--text-gray); font-weight: 600; }
.ref-facts dd,
.ref-glossary dd { margin: 0; min-width: 0; }
.ref-facts dd .badge { margin-left: 4px; }
.ref-request {
    display: block;
    font-size: 0.78rem;
    line-height: 1.45;
    padding: 8px 10px;
    background: var(--light-gray);
    border-radius: 6px;
    overflow-wrap: anywhere;
}
.ref-link { color: var(--primary); overflow-wrap: anywhere; }
.ref-link:hover { color: var(--accent-dark); }

@media (max-width: 720px) {
    .ref-facts,
    .ref-glossary { grid-template-columns: 1fr; gap: 2px 0; }
    .ref-facts dd,
    .ref-glossary dd { margin-bottom: 10px; }
}

/* ---------- SA-029: data pages grow with the window; tables fit without scrolling ---------- */

/* The block grows with the window up to a comfortable reading width. */
.form-wrap--wide { max-width: 1560px; }

/* Fixed layout: the header row sets the widths, text wraps inside its cell by
   words (a long code breaks only when it must), nothing runs into the next
   column and there is no sideways scroll. Numbers and dates stay narrow;
   names and descriptions (no width set) take the rest. */
.ref-table { table-layout: fixed; }
.ref-table th,
.ref-table td {
    white-space: normal;
    overflow-wrap: break-word;
    padding: 12px 12px;
    vertical-align: top;
}
.ref-table th { line-height: 1.3; vertical-align: bottom; }
.ref-table td { overflow-wrap: break-word; }
/* Narrow text columns may hyphenate long words; codes break anywhere, never hyphenated. */
.ref-table td.ref-narrow { hyphens: auto; -webkit-hyphens: auto; }
.ref-table .ref-sub { overflow-wrap: anywhere; hyphens: manual; }
.ref-table td .badge { white-space: nowrap; }
.ref-table .col-num { width: 100px; }
.ref-table .col-tiny { width: 76px; }
.ref-table .col-year { width: 96px; }
.ref-table .col-date { width: 120px; }
.ref-table .col-badge { width: 140px; }
.ref-table .col-mid { width: 15%; }
.ref-table--dense .col-mid { width: 12%; }
.ref-table td.num,
.ref-table th.num { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 1280px) {
    #view-ref .panel { padding: 24px; }
    .ref-table { font-size: 0.86rem; }
    .ref-table th { font-size: 0.68rem; letter-spacing: 0; }
    .ref-table th,
    .ref-table td { padding: 10px 8px; }
    .ref-table .col-num { width: 74px; }
    .ref-table .col-tiny { width: 60px; }
    .ref-table .col-year { width: 78px; }
    .ref-table .col-date { width: 90px; }
    .ref-table .col-badge { width: 130px; }
    .ref-table--dense .col-mid { width: 13%; }
}

/* ---------- SA-030: Market & segments ---------- */

.mkt { padding-bottom: 64px; }
.mkt .panel + .panel,
.mkt .panel + .mkt-cards,
.mkt .mkt-cards + .panel { margin-top: 20px; }
.mkt h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.mkt .section-head { margin-bottom: 6px; }
.mkt .section-note { margin-bottom: 18px; max-width: 980px; }

.mkt-head { align-items: flex-end; }
.mkt-head__side { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.mkt-field { display: flex; flex-direction: column; gap: 6px; }
.mkt-field__label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-gray); }
.mkt-run-pick { min-width: 260px; max-width: 340px; }
.mkt-head .tabs { margin-bottom: 0; }

/* The three markets */
.mkt-top { padding: 26px 32px; }
.mkt-def { font-size: 0.92rem; line-height: 1.5; margin-bottom: 6px; max-width: 1100px; }
.mkt-def--muted { color: var(--text-gray); font-size: 0.85rem; }
.mkt-def--warn { color: #8A5A00; font-size: 0.85rem; }
.mkt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.mkt-tile { padding: 18px 20px; border: 1px solid var(--border-gray); border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkt-tile--accent { border-color: var(--primary); box-shadow: inset 0 3px 0 var(--accent); }
.mkt-tile__head { display: flex; align-items: baseline; gap: 8px; }
.mkt-tile__name { flex: 1 1 auto; min-width: 0; }
.mkt-tile__abbr { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; background: var(--primary); color: var(--white); }
.mkt-tile--accent .mkt-tile__abbr { background: var(--accent); }
.mkt-tile__name { font-size: 0.86rem; font-weight: 600; }
.mkt-tile__value { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-top: 6px; }
.mkt-tile__range { font-size: 0.82rem; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.mkt-tile__rel { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.mkt-tile__line { font-size: 0.82rem; color: var(--text-gray); line-height: 1.45; margin-top: 6px; }

.mkt-save { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-gray); font-size: 0.84rem; }
.mkt-save__text { color: var(--ink-soft); }
.mkt-save__status { color: var(--text-gray); }
.mkt-save__status--bad { color: #B42318; }

/* The funnel: a grid of rows — step (with its bar), people, the share kept, the source. */
.mkt-funnel { display: flex; flex-direction: column; }
.mkt-frow {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) 104px minmax(250px, 1.35fr) minmax(0, 1.25fr);
    gap: 8px 18px;
    padding: 14px 0;
    border-top: 1px solid var(--border-gray);
    align-items: start;
}
.mkt-frow--head { border-top: 0; padding: 0 0 8px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-gray); }
.mkt-frow--branch { background: var(--light-gray); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 8px; border-top-color: transparent; }
.mkt-frow--branch + .mkt-frow { border-top-color: transparent; }
.mkt-frow--result .mkt-fstep__label { font-weight: 700; }
.mkt-fcell { min-width: 0; }
.mkt-fcell--1 { text-align: right; }
.mkt-frow--head .mkt-fcell--1 { text-align: right; }
.mkt-fstep { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mkt-fstep__label { font-weight: 600; font-size: 0.92rem; }
.mkt-fstep__why { font-size: 0.8rem; color: var(--text-gray); line-height: 1.45; margin: 3px 0 8px; }
.mkt-ftag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; color: var(--white); background: var(--primary); }
.mkt-ftag--tam { background: #737373; }
.mkt-ftag--sam { background: var(--accent); }
.mkt-ftag--som { background: var(--accent-dark); }
.mkt-fbar { height: 10px; background: var(--light-gray); border-radius: 0 4px 4px 0; margin-top: 4px; }
.mkt-frow--branch .mkt-fbar { background: var(--white); }
.mkt-fbar__fill { height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.mkt-fbar__fill--base { background: #A3A3A3; }
.mkt-fbar__fill--step { background: var(--ink-soft); }
.mkt-fbar__fill--tam { background: #737373; }
.mkt-fbar__fill--sam { background: var(--accent); }
.mkt-fbar__fill--som { background: var(--accent-dark); }
.mkt-fnum { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mkt-fnum__range { font-size: 0.76rem; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.mkt-fsrc { font-size: 0.78rem; color: var(--text-gray); line-height: 1.45; overflow-wrap: break-word; }

/* SA-034: the five stages of the funnel — a head per stage, "data / assumption / questionnaire" marks, what was left out. */
.mkt-fstage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 18px;
    padding: 20px 0 10px;
    border-top: 2px solid var(--primary);
    margin-top: 10px;
}
.mkt-frow--head + .mkt-fstage { margin-top: 0; }
.mkt-fstage__title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; }
.mkt-fstage__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: var(--white); font-size: 0.74rem; font-weight: 700;
}
.mkt-fstage__text { grid-column: 1; margin: 0; font-size: 0.82rem; color: var(--text-gray); line-height: 1.45; }
.mkt-fstage__num { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-gray); }
.mkt-fstage + .mkt-frow { border-top-color: transparent; }
.mkt-fkind {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--text-gray);
}
.mkt-fkind--assumption { border-color: var(--accent); color: var(--accent-dark); }
.mkt-fkind--brief { border-color: var(--primary); color: var(--primary); }
.mkt-fstep__reason { color: var(--ink-soft); }
.mkt-fnot {
    padding: 10px 12px; margin: 4px 0 6px; border-radius: 8px; background: var(--light-gray);
    font-size: 0.8rem; color: var(--text-gray); line-height: 1.55;
}
.mkt-fnot b { color: var(--ink-soft); }
.mkt-fnot__name { font-weight: 600; color: var(--ink-soft); }
.mkt-fnot__item--pending .mkt-fnot__name { color: var(--accent-dark); }

/* SA-034: questions to the marketer before the numbers are final. */
.mkt-questions { border-left: 3px solid var(--accent); }
.mkt-q { padding: 12px 0; border-top: 1px solid var(--border-gray); display: flex; flex-direction: column; gap: 8px; }
.mkt-q__head { display: flex; gap: 10px; align-items: baseline; }
.mkt-q__n {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 0.74rem; font-weight: 700;
}
.mkt-q__why { margin: 0 0 0 32px; font-size: 0.8rem; color: var(--text-gray); }
.mkt-q .ac-select, .mkt-q .ac-input { margin-left: 32px; width: calc(100% - 32px); max-width: 640px; }
.mkt-q .fld__ctl { display: flex; flex-direction: column; gap: 8px; }
.mkt-q .fld__head { margin-bottom: 0; }
.mkt-q .fld__hint { margin-top: 0; }
.mkt-q .fld__hint { margin-left: 32px; }
.mkt-q .mkt-q__head { display: inline-flex; }
.mkt-q + .mkt-q { margin-top: 0; }
.mkt-q__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border-gray); }
.mkt-q__done { margin: 10px 0 0; font-size: 0.8rem; }

.mkt-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mkt-ctl .ac-select { width: auto; min-width: 0; flex: 1 1 110px; }
.mkt-ctl .mkt-ctl__select--wide { flex-basis: 100%; }
.mkt-ctl__pct { display: inline-flex; align-items: center; gap: 4px; }
.mkt-ctl__pct[hidden] { display: none; }
.mkt-ctl__num { width: 76px; }
.mkt-over { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 8px; font-size: 0.78rem; }
.mkt-over__reset { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent-dark); cursor: pointer; }
.mkt-over__reset:hover { text-decoration: underline; }

/* Money settings */

.mkt-money.fgrid { --fgap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 28px; }
.mkt-money .tabs { margin-bottom: 0; align-self: flex-start; }
.mkt-money .mkt-ctl .ac-select { flex: 1 1 180px; }
.mkt-money__note { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--border-gray); font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); }

/* Countries: a ranked bar chart */
.mkt-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.mkt-panel-head .tabs { margin-bottom: 14px; }
.mkt-bars { display: flex; flex-direction: column; gap: 2px; }
.mkt-bars__row { display: grid; grid-template-columns: 26px minmax(130px, 210px) minmax(0, 1fr) 52px; gap: 12px; align-items: center; padding: 5px 6px; border-radius: 6px; font-size: 0.86rem; }
.mkt-bars__row:hover { background: var(--light-gray); }
.mkt-bars__rank { color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: right; }
.mkt-bars__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-bars__track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mkt-bars__fill { height: 14px; border-radius: 0 4px 4px 0; flex: 0 0 auto; max-width: calc(100% - 70px); }
.mkt-bars__fill--tam { background: #737373; }
.mkt-bars__fill--sam { background: var(--accent); }
.mkt-bars__fill--som { background: var(--accent-dark); }
.mkt-bars__val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt-bars__share { text-align: right; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.mkt-more { margin-top: 12px; }
.mkt-rest { font-size: 0.82rem; margin-top: 8px; }

/* Segments: one bar with the part no segment covers; segment × country */
.mkt-segbar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--light-gray); gap: 2px; }
.mkt-segbar__part { height: 100%; min-width: 2px; }
.mkt-segbar__part--rest { background: #E5E5E5; }
.mkt-h3 { font-size: 0.92rem; font-weight: 700; margin: 26px 0 10px; }
.mkt-heat-wrap { overflow-x: auto; }
.mkt-heat { table-layout: fixed; }
.mkt-heat th, .mkt-heat td { white-space: normal; padding: 10px 8px; }
.mkt-heat th:first-child, .mkt-heat td:first-child { width: 120px; }
.mkt-heat th { vertical-align: bottom; line-height: 1.3; }
.mkt-heat__sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); margin-top: 2px; }
.mkt-heat__cell { font-variant-numeric: tabular-nums; border-left: 2px solid var(--white); }
.mkt-heat__cell--dark { color: var(--white); font-weight: 600; }
.mkt-heat .seg-legend__dot { display: inline-block; }

/* Segment cards */
/* SA-033: at most 9 personas — a 3 × 3 grid (2 columns, then 1, on narrow screens). */
@media (max-width: 1100px) { .persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .persona-grid { grid-template-columns: 1fr; } }
.mkt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .mkt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .mkt-cards { grid-template-columns: 1fr; } }
.mkt-card { padding: 22px 24px; border-top: 4px solid var(--primary); display: flex; flex-direction: column; gap: 10px; }
.mkt .mkt-card + .mkt-card { margin-top: 0; }
.mkt-card--focus { box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow); }
.mkt-card__head h3 { font-size: 1.05rem; font-weight: 700; }
.mkt-card__persona { font-size: 0.8rem; color: var(--text-gray); }
.mkt-card__size { display: flex; flex-direction: column; gap: 2px; }
.mkt-card__size b { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
.mkt-card__size span { font-size: 0.8rem; color: var(--text-gray); }
.mkt-card__who { font-size: 0.88rem; line-height: 1.45; }
.mkt-card__countries { display: flex; flex-direction: column; gap: 5px; font-size: 0.84rem; }
.mkt-card__country { display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px; gap: 10px; align-items: center; }
.mkt-card__country b { text-align: right; font-variant-numeric: tabular-nums; }
.mkt-card__country--rest { display: block; color: var(--text-gray); font-size: 0.8rem; }
.mkt-card__track { height: 6px; background: var(--light-gray); border-radius: 0 3px 3px 0; }
.mkt-card__fill { display: block; height: 100%; border-radius: 0 3px 3px 0; }
.mkt-card__links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border-gray); }
.mkt-link { font-size: 0.84rem; font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.mkt-link:hover { text-decoration: underline; }

/* How it was calculated (collapsed) and the sources */
.mkt-details { padding: 0; }
.mkt-details__summary { cursor: pointer; padding: 20px 32px; display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; list-style-position: inside; }
.mkt-details__summary > span:first-child { font-size: 1.05rem; font-weight: 700; }
.mkt-details__summary .cell-muted { font-size: 0.82rem; }
.mkt-details[open] .mkt-details__summary { border-bottom: 1px solid var(--border-gray); }
.mkt-info { padding: 22px 32px 28px; }
.mkt-info .seg-info__table { width: 100%; }
.mkt-country-pick { max-width: 360px; margin-bottom: 12px; }
.mkt-src-extra { margin-top: 16px; font-size: 0.86rem; }
.mkt-src-note { font-size: 0.8rem; margin-top: 10px; }

.mkt-picklist { display: flex; flex-direction: column; gap: 10px; }
.mkt-pick { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border-gray); border-radius: var(--radius); text-decoration: none; color: inherit; font-size: 0.88rem; }
.mkt-pick:hover { border-color: var(--primary); }

.mkt-hover {
    position: fixed; z-index: 600; pointer-events: none; max-width: 300px;
    padding: 8px 10px; background: var(--primary); color: var(--white); border-radius: 6px;
    font-size: 0.78rem; line-height: 1.45; box-shadow: var(--shadow);
}
.mkt-hover[hidden] { display: none; }
.mkt-hover__title { font-weight: 700; }

@media (max-width: 1280px) {
    .mkt .panel { padding: 24px; }
    .mkt-details { padding: 0; }
    .mkt-details__summary { padding: 18px 24px; }
    .mkt-info { padding: 18px 24px 24px; }
    .mkt-frow { grid-template-columns: minmax(0, 1.6fr) 92px minmax(230px, 1.4fr); }
    .mkt-frow .mkt-fcell--3 { grid-column: 1 / -1; }
    .mkt-frow--head .mkt-fcell--3 { display: none; }
    .mkt-tile__value { font-size: 1.6rem; }
}
@media (max-width: 900px) {
    .mkt-tiles { grid-template-columns: 1fr; }
    .mkt-frow { grid-template-columns: minmax(0, 1fr) 92px; }
    .mkt-frow .mkt-fcell--2 { grid-column: 1 / -1; }
}

/* SA-030: the run page keeps a short line per persona and a link to Market & segments. */
.seg-link { font-weight: 600; color: var(--accent-dark); text-decoration: none; white-space: nowrap; }
.seg-link:hover { text-decoration: underline; }
.seg__compact { line-height: 1.5; margin-bottom: 4px; }
.seg__where-label { color: var(--text-gray); }
.mkt-ctl__hint { font-size: 0.76rem; color: var(--text-gray); margin-top: 6px; }
.mkt-info.seg-info { max-width: none; }
.mkt-info .seg-info__p, .mkt-info .seg-info__list { max-width: 1100px; }

/* SA-032: segments of the market, reviewed before the personas (run page) */
.sch-panel { margin-bottom: 20px; padding: 22px 28px; }
.sch-panel .seg-summary__head { margin-bottom: 14px; }
.sch-panel .seg-summary__head h2 { display: flex; align-items: center; gap: 6px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.sch-panel .section-note { max-width: 980px; }
.sch-cov { margin: 10px 0 18px; font-size: 0.9rem; }
.sch-cov--low b { color: #8A5A00; }
.sch-cards { margin-top: 4px; }
.sch-card { gap: 8px; }
.sch-card--off { opacity: 0.62; }
.sch-card__head { display: flex; flex-direction: column; gap: 2px; }
.sch-where { font-size: 0.84rem; line-height: 1.5; }
.sch-agree { font-size: 0.8rem; color: var(--text-gray); display: flex; align-items: center; gap: 6px; }
.sch-agree--weak { color: #8A5A00; }
.sch-beh { border-top: 1px dashed var(--border-gray); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sch-beh__head { display: flex; align-items: center; gap: 8px; }
.sch-beh__line { font-size: 0.84rem; line-height: 1.45; margin: 0; }
.sch-beh__line b { font-weight: 600; }
.sch-assume { cursor: pointer; }
.sch-card__foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-gray); display: flex; flex-direction: column; gap: 10px; }
.sch-card__tools { display: flex; gap: 10px; align-items: center; }
.sch-card__tools .ac-select, .sch-merge { flex: 1; min-width: 0; }
.sch-go { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.sch-go .cell-muted { font-size: 0.84rem; max-width: 760px; }
.sch-q { margin-top: 14px; font-size: 0.88rem; }
.sch-props { margin-top: 18px; border: 1px solid var(--border-gray); border-radius: var(--radius); }
.sch-props .mkt-fold__head { padding: 14px 18px; }
.sch-props .mkt-fold__title > span:first-child { font-size: 0.95rem; }
.sch-props__note { padding: 10px 18px 0; font-size: 0.8rem; }
.sch-props .mkt-heat-wrap { padding: 10px 18px 16px; }
.sch-props__table { table-layout: fixed; width: 100%; }
.sch-props__table th, .sch-props__table td { white-space: normal; vertical-align: top; font-size: 0.82rem; }
.sch-props__table th:nth-child(1), .sch-props__table td:nth-child(1) { width: 36px; }
.sch-props__table th:nth-child(2), .sch-props__table td:nth-child(2) { width: 150px; }
.sch-props__table th:nth-child(n+4), .sch-props__table td:nth-child(n+4) { width: 96px; }
.sch-props__segs { overflow-wrap: anywhere; }
.seg-bar__part--nopersona { opacity: 0.45; }

/* SA-033: cover more of the market (Market & segments) */
.mkt-cover { display: flex; flex-direction: column; gap: 12px; }
.mkt-cover .section-note { margin-bottom: 0; }
.mkt-cover__last { margin: 0; font-size: 0.9rem; }
.mkt-cover__gap { border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mkt-cover__who { margin: 0; font-weight: 600; }
.mkt-cover__gap .cell-muted { margin: 0; font-size: 0.84rem; max-width: 980px; }
.mkt-cover__merges { display: flex; flex-direction: column; gap: 6px; }
.mkt-cover__merge { display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 0.86rem; border-bottom: 1px dashed var(--border-gray); padding: 6px 0; }
.mkt-cards > .panel + .panel { margin-top: 0; }
.sch-panel .result-acts .btn { white-space: nowrap; }

/* SA-001: Settings — models */
.set-help { font-size: 0.88rem; line-height: 1.5; max-width: 980px; margin-bottom: 18px; }
.set-help p { margin: 0 0 6px; }
.set-efforts { margin: 0; padding-left: 18px; }
.set-table { table-layout: fixed; width: 100%; }
.set-table th:nth-child(1) { width: 40%; }
.set-table th:nth-child(2) { width: 25%; }
.set-table th:nth-child(3) { width: 17%; }
.set-table td { vertical-align: top; white-space: normal; }
.set-what { font-size: 0.8rem; color: var(--text-gray); margin-top: 4px; line-height: 1.4; }
.set-select { width: 100%; }
.set-last { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-status { font-size: 0.78rem; color: var(--text-gray); }
.set-status--err { color: #B42318; }

/* SA-038: folding blocks — the Book Forms icon button with an arrow at the right of a block's header */
.icon-btn {
    background: none; border: 0; cursor: pointer; padding: 6px; border-radius: 6px; line-height: 0;
    color: var(--text-gray); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition);
}
.icon-btn:hover:not(:disabled) { color: var(--primary); background: rgba(9, 18, 39, 0.06); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.fold-btn { width: 30px; height: 30px; flex-shrink: 0; margin-left: auto; }
/* One place in every block: the right end of the title's line, the arrow on the content's right edge. */
.fold-head-row > .fold-btn { margin-right: -6px; align-self: flex-start; }
.mkt-fold__head > .fold-btn { margin-top: -2px; }
.fold-btn .fold-btn__icon { width: 18px; height: 18px; transition: transform 0.18s ease; transform: rotate(180deg); }
.is-folded .fold-btn .fold-btn__icon { transform: rotate(0deg); }
.foldable.is-folded > :not(.fold-keep) { display: none !important; }
.fold-head--click { cursor: pointer; }
.fold-head { display: flex; align-items: flex-start; gap: 12px; }
.fold-head > :first-child { flex: 1 1 auto; min-width: 0; }
.panel.foldable.is-folded { padding-bottom: 18px; }
.persona-card.is-folded { gap: 0; }
.persona-card__head .fold-btn { align-self: flex-start; margin-top: -4px; margin-right: -6px; }
.persona-card__head > div { flex: 1 1 auto; min-width: 0; }
.run-report__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.run-report__head > div { flex: 1 1 auto; min-width: 0; }
.run-report__head .section-note { margin: 2px 0 0; }
.run-report__head h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.run-report.is-folded .run-report__head { margin-bottom: 0; }
.hyp-section.is-folded .hyp-section__head { margin-bottom: 0; }
/* The block's tabs under its header (the header: the title and the fold button only). */
.hyp-section__head { flex-wrap: nowrap; }
.hyp-section__head > div:first-child { flex: 1 1 auto; min-width: 0; }
.hyp-section__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hyp-section__tools:has(.tabs:not([hidden])) { margin-bottom: 16px; }
.seg-summary__head .result-acts { flex-shrink: 0; flex-wrap: nowrap; }
.seg-summary__head .result-acts .btn { white-space: nowrap; }
.mkt-fold__head { padding: 20px 32px; display: flex; gap: 12px; align-items: center; }
.mkt-fold__title { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.mkt-fold__title > span:first-child, .mkt-fold__title > h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.mkt-fold__title .cell-muted { font-size: 0.82rem; }
.mkt-fold:not(.is-folded) .mkt-fold__head { border-bottom: 1px solid var(--border-gray); }
.mkt-fold__body { padding: 22px 32px 28px; }
@media (max-width: 1280px) {
    .mkt-fold__head { padding: 18px 24px; }
    .mkt-fold__body { padding: 18px 24px 24px; }
}

/* SA-040: the Persona library fits the width; what the models cost */
.lib-table { table-layout: fixed; width: 100%; }
.lib-table th, .lib-table td { padding-left: 12px; padding-right: 12px; }
.lib-table .lib-company { width: 13%; }
.lib-table .lib-decision { width: auto; }
.lib-table .lib-num { width: 92px; }
.lib-table .lib-model { width: 15%; }
.lib-table .lib-status { width: 138px; }
.lib-table .lib-spent { width: 118px; white-space: normal; }
.lib-table .lib-date { width: 118px; }
.lib-table td { overflow: hidden; text-overflow: ellipsis; }
.lib-table td.cell-clip { max-width: none; }
.lib-table .lib-wrap { white-space: normal; line-height: 1.35; }
.lib-table th.num, .lib-table td.num { text-align: right; }
.lib-total { display: flex; align-items: baseline; gap: 6px; font-size: 0.9rem; }
.lib-spent__btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; border-bottom: 1px dashed var(--border-gray); }
.lib-spent__btn:hover { color: var(--accent); border-bottom-color: var(--accent); }
.lib-spent__note { font-size: 0.72rem; color: var(--text-gray); white-space: nowrap; }
.spend-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.spend-tile { border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.spend-tile__label { font-size: 0.76rem; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.02em; }
.spend-tile b { font-size: 1.4rem; }
.spend-table { margin-top: 10px; }
.spend-table td, .spend-table th { white-space: normal; vertical-align: top; font-size: 0.84rem; padding: 9px 10px; }
.spend-models { font-size: 0.74rem; color: var(--text-gray); font-weight: 400; margin-top: 2px; }

/* SA-039: rethinking the segments with an agent; the archive of a run */
.sd { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.sd--review { border-top: 1px solid var(--border-gray); padding-top: 20px; }
.sd-panel .sd { margin-top: 14px; }
.sd__title { font-size: 1.02rem; font-weight: 700; margin: 0; }
.sd .section-note { margin: 0; }
.sd__log { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; padding: 4px 2px; }
.sd__log .msg__body { max-width: 88%; }
.sd__form { display: flex; flex-direction: column; gap: 8px; }
.sd__acts { display: flex; justify-content: flex-end; gap: 8px; }
.sd__acts .btn { white-space: nowrap; }
.sd-prop { margin-top: 10px; background: var(--white); border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 12px 14px; }
.sd-prop__cols { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.sd-prop__arrow { font-size: 1.2rem; color: var(--text-gray); text-align: center; padding-top: 22px; }
.sd-prop__list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sd-seg { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; }
.sd-seg__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sd-seg__share { font-weight: 700; white-space: nowrap; }
.sd-seg--gone .sd-seg__name, .sd-seg--gone .sd-seg__share { text-decoration: line-through; color: var(--text-gray); }
.sd-seg__tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 4px; background: var(--light-gray); color: var(--text-gray); white-space: nowrap; }
.sd-seg__tag--new { background: var(--accent-ring); color: var(--accent-dark); }
.sd-prop__cov { font-size: 0.78rem; color: var(--text-gray); }
.sd-prop__note { font-size: 0.82rem; margin: 8px 0 0; color: var(--text-gray); }
.sd-prop__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sd-prop__foot:empty { display: none; }
.arch-list { display: flex; flex-direction: column; margin-top: 12px; }
.arch-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border-gray); font-size: 0.88rem; }
.arch-item .btn { white-space: nowrap; }
@media (max-width: 720px) { .sd-prop__cols { grid-template-columns: 1fr; } .sd-prop__arrow { display: none; } }
.sd-panel h2, .arch-panel h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.sd-panel .section-note, .arch-panel .section-note { margin: 2px 0 0; }
.arch-report { max-height: 60vh; overflow-y: auto; }

/* SA-042: Settings → Providers (keys, checks) and the price table; model marks on Settings → Models. */
.set-needs { color: var(--ink-soft); }
.set-marks { background: none; border: 0; padding: 0; margin-top: 4px; font: inherit; font-size: 0.8rem; color: var(--text-gray); text-decoration: underline dotted; cursor: pointer; }
.set-marks:hover { color: var(--accent); }
.set-fallback { margin-top: 6px; line-height: 1.4; }
/* SA-048: one provider for every task */
.set-mode { border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; max-width: 980px; }
.set-mode__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.set-mode__label { margin: 0; }
.set-mode__select { min-width: 260px; }
.set-mode p { margin: 6px 0 0; }
.set-role { color: var(--ink-soft); }
.set-mode-note { color: var(--ink-soft); border-left: 2px solid var(--accent); padding-left: 8px; }
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.prov-card { border: 1px solid var(--border-gray); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.prov-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.prov-card__head .badge { white-space: nowrap; }
.prov-card__body { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; min-width: 0; overflow-wrap: anywhere; }
.prov-card__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.prov-key code { font-size: 0.85rem; background: var(--light-gray); padding: 1px 6px; border-radius: 4px; }
.prov-del:hover { color: #B42318; }
.prov-foot { margin-top: 14px; max-width: 980px; }
.prov-bar { margin: 6px 0 10px; }
.prov-filter { min-width: 220px; }
.prov-prices { table-layout: fixed; width: 100%; }
/* Model · input · cached input · output · web search (SA-045) · source · edit */
.prov-prices th:nth-child(1) { width: 21%; }
.prov-prices th:nth-child(2), .prov-prices th:nth-child(4) { width: 10%; }
.prov-prices th:nth-child(3) { width: 12%; }
.prov-prices th:nth-child(5) { width: 15%; }
.prov-prices th:nth-child(7) { width: 110px; }
.prov-prices td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.prov-src a { color: inherit; }
.prov-key-input { width: 100%; font-family: ui-monospace, monospace; }
.prov-keys-link { display: inline-block; margin: 2px 0 14px; }

/* SA-035: "Find data" beside an assumption — the search, its results, a found value in use. */
.mkt-fkind--found { border-color: var(--primary); background: var(--primary); color: var(--white); }
.mkt-find { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mkt-find .btn-sm { padding: 4px 10px; font-size: 0.76rem; }
.mkt-find__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; font-size: 0.76rem; }
.mkt-find__status .badge { min-width: 0; padding: 2px 8px; font-size: 0.68rem; }
.mkt-find__status--error { color: #B42318; }
.mkt-find__link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.mkt-found { color: var(--primary); }
.mkt-found .cell-muted { margin-top: 2px; }
.fd { display: flex; flex-direction: column; gap: 10px; text-align: left; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.fd__now { margin: 0; font-size: 0.84rem; color: var(--text-gray); line-height: 1.5; }
.fd__summary { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.fd__nothing { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--light-gray); font-size: 0.86rem; line-height: 1.5; }
.fd__opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; }
.fd__opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fd__opt input[type="radio"] { margin: 3px 0 0; accent-color: var(--accent); }
.fd__opt-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fd__opt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 0.88rem; line-height: 1.4; }
.fd__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd__src { font-size: 0.8rem; line-height: 1.45; overflow-wrap: anywhere; }
.fd__src a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.fd__quote { margin: 0; padding: 4px 0 4px 10px; border-left: 2px solid var(--border-strong); font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; }
.fd__meta { margin: 0; font-size: 0.78rem; color: var(--text-gray); line-height: 1.45; }
.fd__warn { font-size: 0.78rem; color: #B42318; }
/* SA-045: a value the model gave without a sentence from its source. */
.fd__noquote { margin: 0; padding: 4px 0 4px 10px; border-left: 2px dashed var(--border-strong); font-size: 0.78rem; color: var(--text-gray); line-height: 1.45; }
/* SA-045: Google's Search Suggestions, shown with results found through Gemini's Google Search (Google's terms). */
.fd__google { display: flex; flex-direction: column; gap: 4px; }
.fd__google iframe { width: 100%; height: 48px; border: 0; background: transparent; }
.fd__fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.74rem; }
.fd__fitmark { padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border-strong); white-space: nowrap; }
.fd__fitmark--yes { background: var(--primary); border-color: var(--primary); color: var(--white); }
.fd__fitmark--partly { border-color: var(--accent); color: var(--accent-dark); }
.fd__fitmark--no { color: var(--text-gray); background: var(--light-gray); }
.fd__own { display: flex; flex-wrap: wrap; gap: 12px; }
.fd__own[hidden] { display: none; }
.fd__ownf { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.fd__num { width: 80px; }

/* SA-043: who they are in life — the data, then labelled hypotheses */
.sp { border-top: 1px dashed var(--border-gray); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.sp__head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.sp__head .fold-btn { width: 26px; height: 26px; margin-right: -6px; }
.sp__body { display: flex; flex-direction: column; gap: 6px; }
.sp__sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.sp__subtitle { font-size: 0.8rem; font-weight: 700; }
.sp__cov { font-size: 0.76rem; }
.sp__data, .sp__hyp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sp__fact { font-size: 0.84rem; line-height: 1.45; padding-left: 12px; position: relative; cursor: pointer; border-radius: 6px; }
.sp__fact::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.sp__fact:hover, .sp__fact.has-tip--open { background: var(--light-gray); }
.sp__fig { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; line-height: 1.4; cursor: pointer; border-radius: 6px; padding: 1px 4px; margin: 0 -4px; }
.sp__fig:hover, .sp__fig.has-tip--open { background: var(--light-gray); }
.sp__fig-label { color: var(--text-gray); min-width: 0; }
.sp__fig b { font-weight: 600; text-align: right; }
.sp__hyp li { font-size: 0.84rem; line-height: 1.45; color: var(--ink-soft); }
.sp__hyp b { font-weight: 600; }
.sp__check { font-size: 0.74rem; color: var(--text-faint); white-space: nowrap; }
.sp__more { display: flex; gap: 14px; flex-wrap: wrap; }
.sp__link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--accent-dark); cursor: pointer; }
.sp__link:hover { text-decoration: underline; }
.sp__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 2px; }
.sp__note { font-size: 0.78rem; line-height: 1.4; margin: 0; }
.sp-table__sec td { font-weight: 700; background: var(--light-gray); }

.sp-table { table-layout: fixed; }
.sp-table th:nth-child(1) { width: 25%; } .sp-table th:nth-child(2) { width: 20%; }
.sp-table th:nth-child(3) { width: 33%; } .sp-table th:nth-child(4) { width: 22%; }
.sp-table td { overflow-wrap: anywhere; }
.sp-table td:first-child { min-width: 0; }
.sp-table__src { white-space: normal; }

/* ---------- Market potential (SA-031) ---------- */
.pot .panel + .panel { margin-top: 20px; }
.pot-intro { padding: 20px 32px; }
.pot-intro .mkt-def { margin: 0 0 10px; max-width: 1100px; }
.pot-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.8rem; }
.pot-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 10px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--border-strong); color: var(--text-gray); background: var(--white); line-height: 1.5; }
.pot-tag--data { border-color: var(--border-gray); color: var(--text-faint); }
.pot-tag--assumption { border-color: var(--accent); color: var(--accent-dark); }
.pot-tag--found { border-color: var(--primary); background: var(--primary); color: var(--white); }
.pot-tag--yours { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-dark); }
.pot-tag--twins { border-color: var(--primary); color: var(--primary); }
.pot-legend .pot-tag { cursor: pointer; }

.pot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pot-block { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pot-block__head h3 { font-size: 0.98rem; font-weight: 700; margin: 0; }
.pot-block__note { font-size: 0.82rem; color: var(--text-gray); line-height: 1.45; margin: 0; }
.pot-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-gray); margin-top: 4px; }
.pot-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.8rem; }
.pot-row .cell-muted { font-size: 0.78rem; line-height: 1.4; }
.pot-status { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 0.78rem; }
.pot-status .badge { min-width: 0; padding: 2px 8px; font-size: 0.68rem; }
.pot-status__err { color: #B42318; font-size: 0.78rem; }
.pot-funnel { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; }
.pot-funnel__changed { color: #B54708; }
.pot-funnel-now { margin: 8px 0 0; font-size: 0.78rem; }
.pot-summary { font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); margin: 0; }
.pot-progress { display: inline-block; width: 120px; height: 6px; border-radius: 3px; background: var(--light-gray); overflow: hidden; }
.pot-progress__fill { display: block; height: 100%; background: var(--accent); }
.pot-comp { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pot-comp__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; width: 100%; padding-bottom: 6px; border-bottom: 1px solid var(--border-gray); }
.pot-comp__notes { grid-column: 1 / -1; }
.pot-comp__row .ac-input { min-width: 0; }

.pot-table-panel { overflow: visible; }
.pot-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border-gray); font-size: 0.82rem; }
.pot-bar .ac-select { width: 260px; }
.pot-bar__picked { font-weight: 700; }
.pot-table { table-layout: fixed; }
.pot-table th, .pot-table td { padding: 9px 12px; vertical-align: top; }
.pot-table th.pot-tick, .pot-table td.pot-tick { width: 44px; padding-right: 0; }
.pot-table th:nth-child(2) { width: 16%; }
.pot-table th:nth-child(3) { width: 10%; }
.pot-table td { white-space: normal; }
.pot-table .ac-check { gap: 0; }
.pot-table .ac-check__label:empty { display: none; }
.pot-th { white-space: nowrap; }
.pot-table th.num { text-align: right; }
.pot-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.pot-th.is-sorted .pot-sort { color: var(--primary); }
.pot-th .tip-icon { margin-left: 4px; vertical-align: -2px; }
.pot-segcell { display: table-cell; font-weight: 600; font-size: 0.84rem; line-height: 1.35; }
.pot-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pot-country { font-size: 0.86rem; }
.pot-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; position: relative; min-width: 72px; }
.pot-cell:hover, .pot-cell.has-tip--open { background: var(--light-gray); }
.pot-cell__top { display: flex; align-items: center; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
.pot-cell__v { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.pot-cell__sub { font-size: 0.72rem; color: var(--text-gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pot-cell--empty .pot-cell__v { font-weight: 500; color: var(--text-faint); font-size: 0.8rem; }
.pot-cell--edit { outline: 1px dashed transparent; }
.pot-cell--edit:hover { outline-color: var(--border-strong); }
.pot-sizebar { display: block; height: 3px; background: var(--primary); border-radius: 2px; opacity: 0.35; align-self: flex-end; }
.pot-table tr.is-picked td { background: var(--accent-wash); }
.pot-more { margin: 12px 20px 16px; }

.pot-scen__tools .ac-select { width: 260px; }
/* Its buttons stand level with the select between them (ui:check-forms: top and bottom ±1 px). */
.pot-scen__tools > .btn { height: var(--ac-control-h); padding-top: 0; padding-bottom: 0; }
.pot-scen__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.pot-scard { border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pot-scard__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pot-scard__head b { font-size: 0.98rem; }
.pot-scard__note { font-size: 0.78rem; }
.pot-scard__nums { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0 0; font-size: 0.84rem; }
.pot-scard__nums dt { color: var(--text-gray); }
.pot-scard__nums dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pot-scard__nums dd .cell-muted { font-weight: 500; font-size: 0.76rem; }
.pot-scard__risk-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-dark); margin-top: 4px; }
.pot-scard__risks { margin: 0; padding-left: 18px; font-size: 0.8rem; line-height: 1.45; display: flex; flex-direction: column; gap: 3px; }

.pot-dlg-field { margin-top: 12px; }
.pot-dlg-price { margin-top: 14px; font-weight: 600; }
.pot-checkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; margin-top: 10px; }
.pot-found { border-top: 1px solid var(--border-gray); padding: 10px 0; }
.pot-found__player { font-size: 0.84rem; line-height: 1.45; margin: 6px 0 0 26px; }
.pot-quote { font-size: 0.8rem; color: var(--text-gray); font-style: italic; margin-top: 2px; }
.pot-h3 { font-size: 0.92rem; font-weight: 700; margin: 18px 0 8px; }
.pot-note { white-space: normal; font-size: 0.82rem; line-height: 1.45; }
.pot-pick-note { margin: 18px 0 8px; }
@media (max-width: 1280px) { .pot-grid { grid-template-columns: 1fr; } }
.pot-scard__nums dd .cell-muted { display: block; line-height: 1.3; }

/* ---------- SA-009: the hypothesis library ---------- */

/* Book Forms' column filter (filter-popup.js) and its period panel, ported
   from admin.css: black and white, the accent for what is on. */
.th-inner { display: inline-flex; align-items: center; gap: 4px; }
.th-inner .tip-icon { margin-left: 0; }
.filter-btn {
    background: none; border: 0; padding: 2px; cursor: pointer; color: var(--text-faint);
    line-height: 0; border-radius: 4px; display: inline-flex;
}
.filter-btn:hover { color: var(--primary); }
.filter-btn.on { color: var(--accent); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--accent-dark); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.filter-pop,
.hint-pop {
    position: absolute; z-index: 60; background: var(--white);
    border: 1px solid var(--border-gray); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.filter-pop { width: 280px; padding: 12px; }
.filter-pop__head { display: flex; gap: 16px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border-gray); }
.filter-pop__search { margin-bottom: 8px; }
.filter-pop__search input {
    width: 100%; padding: 8px 12px; font-size: 0.88rem; border: 1px solid var(--border-strong);
    border-radius: 8px; font-family: inherit;
}
.filter-pop__search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.filter-pop__empty { padding: 12px 4px; color: var(--text-gray); font-size: 0.85rem; }
.filter-pop__list { max-height: 300px; overflow-y: auto; }
.filter-pop__list label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 0.88rem; cursor: pointer; border-radius: 6px; }
.filter-pop__list label:hover { background: var(--light-gray); }
.filter-pop__list label[hidden] { display: none; }
.hint-pop { max-width: 340px; padding: 12px 16px; font-size: 0.88rem; line-height: 1.6; }
.pick-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.pick-item {
    border: 0; background: none; font: inherit; font-size: 0.85rem; text-align: left; padding: 7px 10px;
    border-radius: 8px; cursor: pointer; color: var(--primary); white-space: nowrap;
}
.pick-item:hover { background: var(--light-gray); }
.pick-item.is-on { color: var(--accent-dark); font-weight: 600; }
.period-now { font-size: 0.85rem; font-weight: 600; color: var(--primary); padding: 0 10px 8px; }
.period-custom { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border-gray); }
.period-custom__title { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-gray); padding: 0 10px 8px; }
.period-row { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; }
.period-row__label { width: 34px; font-size: 0.8rem; color: var(--text-gray); }
.period-row__fields { display: flex; gap: 6px; flex: 1; }
.period-panel .period-row__fields .ac-input { height: 32px; min-height: 32px; padding: 5px 8px; font-size: 0.85rem; }
.period-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 2px; border-top: 1px solid var(--border-gray); flex-wrap: wrap; }
.period-error { font-size: 0.74rem; color: var(--accent-dark); line-height: 1.2; order: -1; flex: 1 0 100%; }
.period-error:empty { display: none; }
.period-empty { padding: 8px 6px 0; margin-top: 8px; border-top: 1px solid var(--border-gray); }

/* The table: fixed layout, fits 1440 without a sideways scroll; the statement
   takes what is left and wraps. */
.hlib-toolbar .tabs { margin-bottom: 0; }
.hlib-search input.ac-search__input { width: 300px; }
.hlib-table { table-layout: fixed; width: 100%; }
.hlib-table th, .hlib-table td { padding-left: 12px; padding-right: 12px; vertical-align: top; }
.hlib-table td { white-space: normal; line-height: 1.4; overflow-wrap: break-word; }
/* Widths that fit at 1280 and 1440 without a horizontal scroll (owner, 2026-09-30): the statement takes the rest. */
.hlib-table th.hlib-statement { width: auto; }
.hlib-table .hlib-segments { width: 16%; }
.hlib-table .hlib-run { width: 108px; }
.hlib-table .hlib-countries { width: 88px; }
.hlib-table .hlib-evidence { width: 142px; }
.hlib-table .hlib-verdict { width: 124px; }
.hlib-table .hlib-date { width: 96px; }
/* The verdict badge stays inside its column (it used to run into "Created"). */
.hlib-table td.hlib-verdict .verdict,
.hlib-table td.hlib-verdict .badge { max-width: 100%; min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
/* SA-009 fix (owner, 2026-09-29): a header wider than its column (label + sort arrow + filter button) ran past the
   table and, inside the rounded panel, gave a sideways scroll with the header's edge cut off. Headers wrap within
   their column instead. */
.hlib-table th { white-space: normal; }
.hlib-table .th-inner { display: flex; flex-wrap: wrap; max-width: 100%; row-gap: 2px; }
.hlib-statement__text { color: var(--primary); font-weight: 600; text-decoration: none; }
.hlib-statement__text:hover { text-decoration: underline; }
.hlib-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 0.76rem; color: var(--text-gray); }
.hlib-kind { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.66rem; color: var(--primary); }
.hlib-status { font-weight: 600; }
.hlib-status--rejected { color: var(--accent-dark); }
.hlib-row--rejected td { opacity: 0.6; }
.hlib-seg { font-size: 0.82rem; line-height: 1.35; }
.hlib-seg + .hlib-seg { margin-top: 4px; }
.hlib-seg b { font-weight: 600; margin-right: 2px; }
.hlib-seg span { color: var(--text-gray); }
.hlib-arch { margin-left: 6px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint) !important; }
.hlib-countries { font-size: 0.82rem; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.hlib-level { font-size: 0.84rem; white-space: nowrap; }
.hlib-none { font-size: 0.8rem; color: var(--text-faint); }
.hlib-date { font-size: 0.84rem; color: var(--text-gray); white-space: nowrap; }
.hlib-link { color: var(--primary); text-decoration: underline; text-decoration-color: var(--border-strong); }
.hlib-link:hover { text-decoration-color: var(--primary); }
.hlib-clear { margin-left: 4px; }

/* One hypothesis. */
.hyp__page { margin-left: auto; font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.hyp__page:hover { text-decoration: underline; }
.hyp__head .badge + .hyp__page { margin-left: 0; }
.hpage-headtext { min-width: 0; }
.hpage-title { font-size: 1.3rem; line-height: 1.35; max-width: 820px; }
.hpage-running { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 14px 20px; color: var(--primary); text-decoration: none; }
.hpage-panel .hpage-field { margin-top: 14px; font-size: 0.9rem; }
.hpage-panel .hpage-field p { margin-top: 2px; line-height: 1.5; }
.hpage-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
.hpage-grid .hpage-field { margin-top: 8px; }
.hpage-seg { margin-top: 3px; font-size: 0.9rem; }
.hpage-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 6px 0 14px; font-size: 0.9rem; }
.hpage-quote { margin-top: 12px; }
.hpage-quote blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--accent); font-style: italic; color: var(--ink-soft); line-height: 1.5; }
.hpage-quote cite { font-style: normal; color: var(--text-gray); font-size: 0.84rem; }
.hpage-reply { margin: 6px 0 0 15px; }
.hpage-reply summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--text-gray); }
.hpage-reply__text { margin-top: 6px; padding: 10px 14px; background: var(--light-gray); border-radius: 8px; white-space: pre-wrap; font-size: 0.86rem; line-height: 1.55; }
.hpage-test { padding: 16px 0; border-top: 1px solid var(--border-gray); }
.hpage-test:first-of-type { margin-top: 8px; }
.hpage-test__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.84rem; }
.hpage-test__head .test-link { margin-left: auto; }
.hpage-test__headline { margin-top: 8px; font-weight: 600; line-height: 1.45; }
.hpage-results { margin-top: 10px; }
.hpage-table .test-cell { min-width: 140px; }
.hpage-history { list-style: none; margin: 10px 0 0; padding: 0; }
.hpage-history__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--border-gray); font-size: 0.88rem; }
.hpage-history__item:first-child { border-top: 0; }
.hpage-history__date { width: 64px; color: var(--text-gray); font-variant-numeric: tabular-nums; }

/* ---------- SA-046: Ad messages ---------- */
.adm .panel { padding: 24px 32px; }
.adm .msg-intro { padding: 0; }
.msg-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); max-width: 1100px; }
.msg-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin-bottom: 14px; }
.msg-bar h2 { font-size: 1.05rem; font-weight: 700; margin: 0; flex: 0 0 auto; align-self: center; }
.msg-bar > .cell-muted { font-size: 0.82rem; align-self: center; }
.msg-seg-pick { width: 360px; }
.msg-country-pick { width: 200px; }
.msg-note { font-size: 0.8rem; color: var(--text-gray); line-height: 1.45; margin: 8px 0 12px; max-width: 1100px; }
.msg-empty { font-size: 0.88rem; color: var(--text-gray); margin: 0; }
.msg-hyp { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border-gray); }
.msg-hyp .ac-check { margin-top: 2px; gap: 0; }
.msg-hyp .ac-check__label:empty { display: none; }
.msg-hyp__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.msg-hyp__title { color: var(--primary); font-weight: 600; text-decoration: none; line-height: 1.4; }
.msg-hyp__title:hover { text-decoration: underline; }
.msg-hyp__sub { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.8rem; line-height: 1.4; }
.msg-hyp__sub .badge { min-width: 0; padding: 2px 8px; font-size: 0.68rem; }
.msg-hyp__nums { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; }
.msg-chip { padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
.msg-chip--best { border-color: var(--primary); font-weight: 700; }
.msg-form.fgrid { grid-template-columns: minmax(0, 2fr) 140px minmax(0, 2fr); column-gap: 20px; --fgap: 16px; }
.msg-form__hint { font-size: 0.76rem; line-height: 1.4; }
.msg-form .ac-select, .msg-form .ac-input { width: 100%; }
.msg-actions { margin-top: 16px; }
.msg-drafts { margin-top: 14px; }
.msg-draft-pick { width: 320px; }
.adm .pot-status { margin-top: 10px; }
.msg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.msg-card { border: 1px solid var(--border-gray); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--white); }
.msg-card--control { background: var(--light-gray); }
.msg-card--winner { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.msg-card--dropped { opacity: 0.55; }
.msg-card__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg-card__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-gray); }
.msg-card__head .badge { min-width: 0; padding: 2px 8px; font-size: 0.68rem; }
.msg-win { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); background: var(--accent); border-radius: 10px; padding: 1px 8px; }
.msg-card__idea { font-weight: 700; margin: 0; line-height: 1.35; }
.msg-card__arg { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.msg-rests { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; line-height: 1.4; padding: 8px 10px; border-left: 3px solid var(--border-strong); background: var(--light-gray); border-radius: 0 6px 6px 0; }
.msg-rests__opt { color: var(--ink-soft); overflow-wrap: anywhere; }
.msg-rests__num { font-weight: 600; font-variant-numeric: tabular-nums; }
.msg-field { display: flex; flex-direction: column; }
.msg-field .fld__ctl { display: flex; flex-direction: column; gap: 6px; }
.msg-field .fld__head { align-items: center; justify-content: flex-start; }
.msg-field .fld__head > :not(.fld__label) { margin-left: 0; }
.msg-field__head { display: flex; gap: 8px; align-items: center; }
.msg-field__line { display: flex; gap: 8px; align-items: center; }
.msg-field__line .ac-select { width: 150px; flex: 0 0 auto; }
.msg-field__line .ac-input { flex: 1 1 auto; min-width: 0; }
.msg-field .ac-input--area { min-height: 0; resize: vertical; font-size: 0.86rem; line-height: 1.45; padding-top: 8px; padding-bottom: 8px; }
.msg-why { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-gray); overflow-wrap: anywhere; }
.msg-texts { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-gray); padding-top: 10px; }
.msg-text { display: flex; flex-direction: column; gap: 4px; }
.msg-text__head { display: flex; gap: 8px; align-items: center; font-size: 0.74rem; }
.msg-text__lang { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; }
.msg-text__edit { margin-left: auto; border: 0; background: none; font: inherit; font-size: 0.76rem; color: var(--text-gray); text-decoration: underline; cursor: pointer; padding: 0; }
.msg-text__edit:hover { color: var(--primary); }
.msg-text__body { margin: 0; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.msg-stale { padding-top: 4px; }
.msg-card__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; font-size: 0.78rem; }
.msg-prompt { margin-top: 10px; }
.msg-prompt .msg-text__edit { margin-left: 0; }
.msg-prompt p { font-size: 0.8rem; margin: 6px 0; }
.msg-prompt__text { white-space: pre-wrap; font-family: inherit; font-size: 0.78rem; line-height: 1.5; background: var(--light-gray); border-radius: 8px; padding: 12px 14px; max-height: 320px; overflow: auto; color: var(--ink-soft); }
.msg-result { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.msg-headline { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 8px; background: var(--light-gray); font-size: 0.88rem; line-height: 1.45; }
.msg-headline--win { background: var(--accent-wash); }
.msg-table-wrap { border: 1px solid var(--border-gray); border-radius: 8px; }
.msg-table { table-layout: fixed; }
.msg-table th, .msg-table td { padding: 9px 12px; vertical-align: top; white-space: normal; }
.msg-table th:nth-child(1) { width: 30%; }
.msg-table th:nth-child(2) { width: 16%; }
.msg-table th.num { width: 10.8%; text-align: right; white-space: normal; }
.msg-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.msg-table td.num b { display: block; }
.msg-table tbody tr { cursor: default; }
.msg-table .msg-row--win td { background: var(--accent-wash); }
.msg-table .msg-row--control td { color: var(--text-gray); }
.msg-range { display: block; font-size: 0.72rem; color: var(--text-faint); }
.msg-up { color: var(--primary); }
.msg-down { color: var(--accent-dark); }
.msg-cell-msg { overflow-wrap: anywhere; }
.msg-langs-result, .msg-quotes { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; }
.msg-lang-line { display: flex; flex-wrap: wrap; gap: 4px 12px; line-height: 1.45; }
.msg-quote { margin: 0; line-height: 1.45; }

/* ---------- SA-047: Validation ---------- */
/* The picked files of a dialog (Book Forms' ac-files chips). */
.ac-files { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ac-files__chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.ac-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--border-gray); border-radius: 8px; background: var(--light-gray); font-size: 0.8rem; color: var(--primary); text-decoration: none; }
.ac-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-chip__size { flex: 0 0 auto; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.ac-chip__drop { flex: 0 0 auto; border: 0; padding: 0 2px; background: none; color: var(--text-gray); font-size: 0.95rem; line-height: 1; cursor: pointer; }
.ac-chip__drop:hover { color: var(--accent); }

.val-seg-pick { width: 300px; }
.val-lang-pick { width: 180px; }
.val-bar-end { margin-left: auto; }
.val-winners { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.val-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.val-card { gap: 8px; }
.val-card--proposed { border-style: dashed; border-color: var(--accent); }
.val-card .pot-tag { font-size: 0.68rem; }
.val-changes__list { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.val-scenes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border-gray); }
.val-scene { padding: 8px 0; border-bottom: 1px solid var(--border-gray); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.val-scene:last-child { border-bottom: 0; }
.val-scene__head { display: flex; gap: 8px; align-items: baseline; font-size: 0.8rem; }
.val-scene__edit { margin-left: auto; }
.val-scene__line { margin: 0; font-size: 0.84rem; line-height: 1.45; overflow-wrap: anywhere; }
.val-scene__k { display: inline-block; min-width: 72px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-gray); margin-right: 6px; }
.val-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.val-thumbs img { max-width: 100%; max-height: 220px; border-radius: 6px; border: 1px solid var(--border-gray); object-fit: contain; background: var(--light-gray); }
.val-video { display: flex; flex-direction: column; gap: 6px; }
.val-video__player { width: 100%; max-height: 320px; border-radius: 8px; background: #000; }
.val-transcript { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.8rem; }
.val-transcript .msg-prompt__text { flex: 1 0 100%; margin: 0; }
.val-transcript .pot-row { flex: 1 0 100%; }
.val-dlg-grid.fgrid { --fgap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 16px; margin: 10px 0 calc(10px - var(--fgap)); }
.val-dlg-grid .ac-select, .val-dlg-grid .ac-input { width: 100%; }
.val-static { display: block; padding-top: 10px; font-size: 0.85rem; }
.val-dlg-note { font-size: 0.78rem; line-height: 1.45; }
.val-dlg-list { margin: 6px 0; padding-left: 18px; font-size: 0.8rem; line-height: 1.5; }
.val-dlg-warn { font-size: 0.8rem; color: var(--accent-dark); margin: 4px 0; }
.val-table th:nth-child(1) { width: 24%; }
.val-table th:nth-child(2) { width: 18%; }
.val-table th.num { width: 11.6%; }
.val-h3 { font-size: 0.92rem; font-weight: 700; margin: 6px 0 0; }
.val-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.val-map { border: 1px solid var(--border-gray); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.val-map--control { background: var(--light-gray); }
.val-map__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 0.84rem; }
.val-bars { display: flex; gap: 4px; align-items: flex-end; height: 120px; }
.val-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; cursor: pointer; }
.val-bar__v { font-size: 0.66rem; color: var(--text-gray); font-variant-numeric: tabular-nums; }
.val-bar__track { flex: 1 1 auto; width: 100%; max-width: 38px; background: var(--light-gray); border-radius: 4px 4px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.val-bar__fill { width: 100%; background: var(--primary); }
.val-bar--drop .val-bar__fill { background: var(--accent); }
.val-bar--drop .val-bar__v { color: var(--accent-dark); font-weight: 700; }
.val-bar__k { font-size: 0.7rem; color: var(--text-gray); }
.val-words { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.val-ba { border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.val-ba__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.val-ba__cell { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.val-ba__cell b { font-size: 1.05rem; }
.val .msg-bar h2 { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.val-bars { height: 150px; }
.val-ba__maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }

/* ---------- Ф5: versions of the audience (switcher, before → after) ---------- */
.av { display: flex; flex-direction: column; gap: 10px; }
.av__bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.av__label { font-size: 0.82rem; font-weight: 700; }
.av__bar .av__select { width: 380px; flex: 0 1 380px; min-width: 220px; max-width: 100%; }
.av__meta { margin: 0; font-size: 0.86rem; }
.av__note { margin: 0; font-size: 0.84rem; }
.av-cmp { margin-top: 0; }
.av-one { display: block; }
.av__people { margin: 10px 0 0; padding: 8px 0 0 18px; border-top: 1px solid var(--border-gray); font-size: 0.82rem; display: flex; flex-direction: column; gap: 4px; }
.sd-seg__tag--changed { background: #FFF4D6; color: #8A5A00; }
.av-block .av { padding: 12px 18px 16px; }
.run-meta__version { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Ф6: the wizard company → product → goal (wizard.js; merged from wizard.css in Ф7) ----------
 * Book Forms tokens; black and white, the accent only on the current step and the chosen goal. */

/* ---------- the stepper ---------- */
.wz-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.wz-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    color: var(--text-gray);
    text-decoration: none;
    min-width: 0;
}
a.wz-step:hover { border-color: var(--primary); color: var(--primary); }
.wz-step__num {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.wz-step__text { display: flex; flex-direction: column; min-width: 0; }
.wz-step__name { font-weight: 700; color: var(--primary); font-size: 0.92rem; }
.wz-step__sub { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-step.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.wz-step.is-current .wz-step__num { background: var(--accent); border-color: var(--accent); color: var(--white); }
.wz-step.is-done .wz-step__num { background: var(--primary); border-color: var(--primary); color: var(--white); }
.wz-step.is-todo { opacity: 0.6; }

/* The goal step's sub-steps (owner, 2026-09-30): a progress line, then one block at a time. */
.wz-sub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    margin: -6px 0 16px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
}
.wz-sub__line {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--light-gray);
    overflow: hidden;
}
.wz-sub__fill { height: 100%; background: var(--accent); transition: width 0.25s; }
.wz-sub__list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.wz-sub__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-gray);
}
button.wz-sub__item { cursor: pointer; }
button.wz-sub__item:hover .wz-sub__name { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.wz-sub__num {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.wz-sub__item.is-current { color: var(--primary); font-weight: 700; }
.wz-sub__item.is-current .wz-sub__num { background: var(--accent); border-color: var(--accent); color: var(--white); }
.wz-sub__item.is-done .wz-sub__num { background: var(--primary); border-color: var(--primary); color: var(--white); }
.wz-sub__item.is-todo { opacity: 0.6; }
.wz-sub__count { font-size: 0.8rem; color: var(--text-gray); white-space: nowrap; }

/* ---------- where to start ---------- */
.wz-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}
.wz-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}
.wz-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.wz-card.is-primary { border-color: var(--primary); }
.wz-card.is-off { pointer-events: none; opacity: 0.5; }
.wz-card__title { font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }
.wz-card__text { font-size: 0.85rem; color: var(--text-gray); }
.wz-links { margin-top: 18px; font-size: 0.85rem; color: var(--text-gray); }
.wz-links a { color: var(--primary); }

/* ---------- the goal catalogue ---------- */
.wz-group {
    margin: 22px 0 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-gray);
}
.wz-goals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.wz-goal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    background: var(--white);
    color: var(--primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}
.wz-goal:hover:not(:disabled) { border-color: var(--primary); }
.wz-goal.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.wz-goal.is-soon { cursor: default; background: var(--light-gray); color: var(--text-gray); }
.wz-goal__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wz-goal__name { font-weight: 700; font-size: 0.9rem; }
.wz-goal__soon {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    font-size: 0.7rem;
    font-weight: 600;
}
.wz-goal__text { font-size: 0.8rem; color: var(--text-gray); line-height: 1.45; }
.wz-goal__closest { font-size: 0.75rem; color: var(--text-faint); line-height: 1.4; }

/* ---------- fields ---------- */
.wz-fold { margin-bottom: 4px; }
.panel .wz-fold + .grid { margin-top: 16px; }
.wz-hint { margin-top: 8px; }
.wz-warn {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #FFF4D6;
    color: #8A5A00;
    font-size: 0.8rem;
    line-height: 1.45;
}
.wz-static { font-size: 0.9rem; padding: 10px 0; }

/* ---------- the steps of a template ---------- */
.wz-plan { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wz-plan__row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
}
.wz-plan__num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    font-size: 0.8rem;
    font-weight: 800;
}
.wz-plan__row.is-done .wz-plan__num { background: var(--primary); border-color: var(--primary); color: var(--white); }
.wz-plan__name { font-weight: 700; font-size: 0.92rem; }
.wz-plan__tool { font-size: 0.82rem; color: var(--text-gray); line-height: 1.45; }
.wz-plan__here { font-size: 0.8rem; color: var(--text-gray); padding: 0 8px; }
/* The goal's workflow: a card of its own under the goals (owner, 2026-09-30). */
.wz-plan-slot:not(:empty) { margin-top: 20px; }
.wz-workflow .section-head h2 { font-weight: 500; }
.wz-workflow .section-head h2 strong { font-weight: 800; }
.wz-workflow__sub { color: var(--text-gray); font-size: 0.85rem; margin: 0 0 12px; }

.wz-facts { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 18px; margin-top: 8px; font-size: 0.88rem; }
.wz-facts dt { color: var(--text-gray); }
.wz-facts dd { margin: 0; }
#view-wizard .back-link { margin-bottom: 14px; display: inline-flex; }
.wz-researches { width: 100%; table-layout: fixed; }
/* Ф7: header cells wrap between words only ("AUDIENC E VERSION" broke inside the word); the text cells may break anywhere. */
.wz-researches th { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
.wz-researches td { white-space: normal; overflow-wrap: anywhere; }
.wz-researches th:nth-child(1) { width: 26%; }
.wz-researches th:nth-child(3), .wz-researches th:nth-child(4) { width: 14%; }
.wz-researches th:nth-child(5) { width: 110px; }
.wz-researches .btn { white-space: nowrap; }

/* ---------- Ф7: the header — company ▸ product ▸ the way to the page ---------- */
.topbar__ctx { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.topbar__ctx h1 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; }
.ctx-pick { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ctx-select { width: 170px; }
.ctx-select--product { width: 190px; }
.ctx-empty, .ctx-add { font-size: 0.85rem; color: var(--text-gray); }
.ctx-add { color: var(--primary); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; overflow: hidden; font-size: 0.88rem; }
.crumbs__sep { color: var(--text-faint); flex: 0 0 auto; }
.crumbs__link { color: var(--primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.crumbs__link:hover { text-decoration: underline; }
.crumbs__text { color: var(--text-gray); white-space: nowrap; }
.topbar__side .topbar__new { white-space: nowrap; }
@media (max-width: 1360px) {
    .topbar { padding: 0 20px; }
    .ctx-select { width: 150px; }
    .ctx-select--product { width: 160px; }
    .crumbs__link { max-width: 170px; }
    .topbar__side .stage-badge { display: none; }
}

/* ---------- Ф7: tabs (Book Forms' storage tabs) ---------- */
.storage-tabs { display: flex; gap: 4px; background: var(--border-gray); padding: 4px; border-radius: var(--radius); flex-wrap: wrap; }
.tab {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: 8px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-gray);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}
.tab:hover { color: var(--primary); }
.tab.active { background: var(--white); color: var(--primary); box-shadow: 0 1px 3px rgba(9, 18, 39, 0.12); }

/* ---------- Ф7: the bar of a research ---------- */
.rbar {
    max-width: 1560px;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rbar__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rbar__who { min-width: 0; }
.rbar__title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.rbar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.85rem; color: var(--text-gray); }
.rbar__meta a { color: var(--primary); }
.rbar__market { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rbar__tabs { align-self: flex-start; }

/* Draft / frozen version (owner's decision §10.1). */
.vstate {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-strong);
    color: var(--text-gray);
    cursor: help;
    white-space: nowrap;
}
.vstate--frozen { border-color: var(--primary); color: var(--primary); }

/* ---------- Ф7: the product, its markets and researches ---------- */
.pv-facts { font-size: 0.88rem; color: var(--text-gray); margin-top: 6px; }
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.mcard {
    display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
    border: 1px solid var(--border-gray); border-radius: var(--radius); background: var(--white);
    color: var(--primary); text-decoration: none; transition: var(--transition); min-width: 0;
}
.mcard:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.mcard__name { font-weight: 800; font-size: 0.95rem; overflow-wrap: anywhere; }
.mcard__sub { font-size: 0.82rem; color: var(--text-gray); }
.mcard__facts { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--text-gray); }
.nav-table { table-layout: fixed; width: 100%; }
.nav-table th { white-space: normal; overflow-wrap: normal; word-break: normal; vertical-align: bottom; }
.nav-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.nav-table td.num, .nav-table th.num { text-align: right; }
.nav-table a { color: var(--primary); }
.nav-table .row-link { cursor: pointer; }
.nav-table .row-link:hover td { background: var(--light-gray); }
.nav-table .w-name { width: 22%; }
.nav-table .w-terr { width: 18%; }
.nav-table .w-ver { width: 150px; }
.nav-table .w-segs { width: 120px; }
.nav-table .w-num { width: 120px; }
.nav-table .w-few { width: 90px; }
.nav-table .w-date { width: 110px; }
.nav-table .w-goal { width: 16%; }
.nav-table .w-mk { width: 18%; }
.nav-table .w-status { width: 120px; }
.nav-table .cell-clip2 { display: table-cell; color: var(--text-gray); }
.res-table .w-goal { width: 13%; }
.res-table .w-dec { width: 22%; }
.res-table .w-mk { width: 15%; }
.res-table .w-ver { width: 11%; }
.res-table .w-few { width: 9%; }
.res-table .w-status { width: 13%; }
.res-table .w-num { width: 9%; }
.res-table .w-date { width: 8%; }
.res-table td.num, .res-table .badge { white-space: nowrap; overflow-wrap: normal; }
.nav-table td.cell-muted .vstate, .nav-table td .vstate { margin-left: 2px; }
.wz-facts a, .rv-markets a, .mk-rlist a { color: var(--primary); }
.seg-table .w-dec { width: 30%; }
.lib-total { font-size: 0.85rem; }
.section-head .result-acts { display: flex; align-items: center; gap: 12px; }

/* ---------- Ф7: a market ---------- */
#marketHead:empty { display: none; }
#marketHead { padding-bottom: 0; margin-bottom: 20px; }
.mk-researches { margin-top: 14px; }
.mk-rlist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; }
.mk-rlist a { color: var(--primary); }
.mk-below { margin-top: 12px; }

/* ---------- Ф7: an audience and its versions ---------- */
.av-tabs { margin-top: 10px; align-self: flex-start; display: inline-flex; }
.av-edits { margin: 0; padding-left: 18px; }
.av-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.av-persona { border: 1px solid var(--border-gray); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; min-width: 0; }
.av-persona__sum { margin: 4px 0 0; color: var(--primary); line-height: 1.45; }
.av-persona__acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.av-cmp-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.86rem; display: flex; flex-direction: column; gap: 3px; }

/* ---------- Ф7: a research's overview ---------- */
.rv-markets { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.rv-markets a { color: var(--primary); }
/* The overview's last block: deleting the research (text on the left, the button on the right). */
.rv-delete { display: flex; align-items: center; gap: 24px; }
.rv-delete > div { flex: 1 1 auto; min-width: 0; }
.rv-delete h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.rv-delete .section-note { margin: 4px 0 0; }
.rv-delete > .btn { flex-shrink: 0; }
.rv-work { margin: 4px 0 0; padding-left: 18px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 4px; }

/* Personas & Hypotheses tab (owner, 2026-09-30): segments, personas, hypotheses, the agent’s report. */
.hyp-empty { margin: 0; font-size: 0.88rem; }
.hyp-list .hyp-empty { grid-column: 1 / -1; }
.hyp-section__head .section-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* ---------- Ф9: kinds of data (privacy.js) ---------- */
.dc-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5; white-space: nowrap;
    border: 1px solid var(--border-strong); background: var(--white); color: var(--text-gray); cursor: pointer;
    vertical-align: middle; transition: var(--transition);
}
.dc-badge--commercial { border-color: var(--primary); color: var(--primary); }
.dc-badge--personal_aggregate { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-dark); }
.dc-badge--personal_raw { border-color: #B42318; background: #FDE8E8; color: #B42318; }
.dc-badge.has-tip:hover, .dc-badge.has-tip--open { box-shadow: 0 0 0 2px var(--accent-ring); }
.mkt-fstep .dc-badge { margin-left: 2px; }
.mkt-found .dc-badge, .mkt-q__done .dc-badge { margin-left: 6px; }
.pv-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.pv-option { margin: 0 0 10px; font-size: 0.84rem; }
.pv-option a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.pv-warn { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #FDE8E8; color: #B42318; font-size: 0.86rem; }
.pv-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-gray); }
.pv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-gray); font-size: 0.86rem; }
.pv-row__name { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.pv-row__text { color: var(--text-gray); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-options { display: flex; flex-direction: column; gap: 8px; }
.pv-opt--off { cursor: default; opacity: 0.72; }
.pv-status { margin: 8px 0 0; }

/* ---------- Ф8: the knowledge library (knowledge.js) ---------- */
.kn-tabs { margin: 0 0 0 auto; align-self: flex-start; }
.kn-links { margin: 0; font-size: 0.86rem; }
.kn-links a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kn-toolbar { margin-bottom: 8px; }
.kn-filters { flex-wrap: wrap; gap: 8px; }
.kn-filters .kn-filter { width: 190px; flex: none; }
.kn-total { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-gray); }
.kn-items { display: flex; flex-direction: column; }
.kn-item { display: flex; gap: 20px; padding: 16px 0; border-top: 1px solid var(--border-gray); align-items: flex-start; }
.kn-items .kn-item:first-child { border-top: 0; }
.kn-item__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.kn-item__top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kn-item__title { font-weight: 600; color: var(--primary); line-height: 1.4; overflow-wrap: anywhere; }
a.kn-item__title:hover { text-decoration: underline; text-underline-offset: 2px; }
.kn-item__text { margin: 0; font-size: 0.88rem; line-height: 1.45; }
.kn-item__numbers { margin: 0; font-size: 0.86rem; color: var(--primary); line-height: 1.45; overflow-wrap: anywhere; }
.kn-item__meta { margin: 0; font-size: 0.8rem; color: var(--text-gray); line-height: 1.5; overflow-wrap: anywhere; }
.kn-item__meta a { color: var(--text-gray); text-decoration: underline; text-underline-offset: 2px; }
.kn-item__acts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.kn-raised { font-size: 0.8rem; color: var(--accent-dark); white-space: nowrap; }
.kn-cal, .kn-history { margin: 0; padding-left: 18px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 4px; }
.kn-cal a { color: var(--primary); }
.kn-cat { margin-top: 18px; }
.kn-cat:first-of-type { margin-top: 0; }
.kn-cat__title { font-size: 0.95rem; font-weight: 700; margin: 0 0 4px; }
.kn-cat__empty { margin: 0; font-size: 0.86rem; }
.kn-cat .kn-item { padding: 12px 0; }
.kn-suggest { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.kn-price { font-size: 0.85rem; }
.kn-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.kn-hint-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.88rem; }
.kn-hint-list li { display: flex; gap: 8px; align-items: baseline; line-height: 1.45; }
.kn-hint__lvl { flex: none; }
.kn-hint__text { min-width: 0; overflow-wrap: anywhere; }
.kn-hint__text a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.kn-hint__type { color: var(--text-gray); }
.kn-hint__num { color: var(--text-gray); }
.kn-consent__text p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.5; }
.kn-consent__state { margin: 14px 0; font-size: 0.9rem; }
.kn-consent__row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.kn-consent__name { width: 320px; max-width: 100%; }
.kn-consent__who { font-size: 0.85rem; color: var(--text-gray); align-self: center; }
.kn-dry td, .kn-dry th { white-space: normal; }
.wz-facts + .kn-links { margin-top: 14px; }

/* ---------- Ф10 А: sign-in page, profile, the foot of the menu ---------- */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    background-color: var(--light-gray);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 44px 40px 28px;
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}
.login-brand .brand__mark { background: var(--primary); color: var(--white); }
.login-brand__name { font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; }

.login-card h1 {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    text-align: center;
}

.login-card .subtitle {
    color: var(--text-gray);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 28px;
    text-align: center;
}

.login-field { margin-bottom: 18px; }
.login-field label {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 6px;
}
.login-field .field-note { margin: 6px 0 0; }
.login-field .fld__head label { margin-bottom: 0; }
.login-field.fld + .login-field.fld { margin-top: 0; }

.login-submit { width: 100%; margin-top: 6px; }

.login-message {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent-wash);
    color: var(--primary);
    font-size: 0.88rem;
    line-height: 1.45;
}
.login-message--ok { border-color: var(--border-strong); background: var(--light-gray); }

.login-note {
    margin-top: 18px;
    color: var(--text-gray);
    font-size: 0.82rem;
    text-align: center;
}

.login-out { display: block; margin: 14px auto 0; }

.login-version {
    margin-top: 24px;
    color: var(--text-faint);
    font-size: 0.75rem;
    text-align: center;
}

.env-badge {
    padding: 4px 28px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.env-badge--fixed {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* The foot of the menu: the user above Collapse, the version under it. */
.sidebar-user { padding-top: 12px; padding-bottom: 12px; }
.sidebar-user.active { border-left-color: var(--accent); }

.sidebar-version {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 0 24px 2px 27px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
}
.sidebar-version:empty { display: none; }
.sidebar-version__env {
    padding: 0 6px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
}
.app.sidebar-collapsed .sidebar-version { justify-content: center; padding: 0 0 2px; }
.app.sidebar-collapsed .sidebar-version__text { display: none; }
.app.sidebar-collapsed .sidebar-user { padding-left: 0; padding-right: 0; justify-content: center; gap: 0; }

/* A platform administrator has no client account: the admin menu instead of the product's, no context, no "New research". */
.app.is-platform-admin .sidebar .client-nav,
.app.is-platform-admin .topbar__ctx .ctx-pick,
.app.is-platform-admin .topbar__new,
.app.is-platform-admin .stage-badge { display: none; }
.sidebar .admin-nav { display: none; }
.app.is-platform-admin .sidebar .admin-nav { display: flex; }

.profile-wrap { max-width: 640px; }
.profile-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; overflow-wrap: anywhere; }
.profile-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 20px;
    margin: 0 0 20px;
    font-size: 0.9rem;
}
.profile-facts dt { color: var(--text-gray); }
.profile-facts dd { margin: 0; overflow-wrap: anywhere; }
.profile-form { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.profile-form .login-message { margin: 0; }

.profile-form .btn { align-self: flex-start; }


/* ---------- Ф10 Б: rights, the menu's groups, credits, users, the admin area ---------- */

/* What the user's rights do not cover (app.js applyRights) — [hidden] must win over display: flex. */
.nav-item[hidden], .nav-group[hidden], .btn[hidden], [data-perm][hidden] { display: none !important; }
.app.no-research_delete .rv-delete,
.app.is-read-only .rv-delete { display: none; }

/* A menu group folds by its title; the chevron turns. The narrow menu shows every item. */
.nav-group__header { cursor: pointer; transition: color 0.15s ease; }
.nav-group__header:hover { color: rgba(255, 255, 255, 0.75); }
.nav-group__header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-group__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-group__chev { width: 14px; height: 14px; margin-left: auto; transition: transform 0.2s; }
.nav-group.is-folded .nav-group__chev { transform: rotate(-90deg); }
.nav-group.is-folded .nav-group__items { display: none; }
.app.sidebar-collapsed .nav-group.is-folded .nav-group__items { display: flex; }
/* Only the menu between the logo and the foot scrolls. */
.sidebar .client-nav, .sidebar .admin-nav { flex: 1 1 auto; min-height: 0; }
.sidebar .admin-nav .nav-group:first-child .nav-group__header { padding-top: 0; }

/* The "view account" mode: a banner above the page, the whole app read-only. */
.view-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 32px;
    background: var(--accent);
    color: var(--white);
    font-size: 0.86rem;
    line-height: 1.4;
}
.view-banner[hidden] { display: none; }
.view-banner__text { flex: 1 1 auto; min-width: 0; }
.view-banner__exit { flex: 0 0 auto; background: var(--white); color: var(--primary); border: 0; }
.view-banner__exit:hover { background: var(--light-gray); }

/* Pages of the admin area, Billing and Users. */
.adm .panel { padding: 28px 32px; }
.adm-head { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.adm-head h2 { display: flex; align-items: center; gap: 10px; }
.adm-head .ac-select { min-width: 190px; }
.adm-table-wrap { overflow-x: auto; margin: 0 -4px; }
.adm-table td { vertical-align: top; }
.adm-table td.num, .adm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table .adm-what { white-space: normal; min-width: 180px; }
.adm-table .adm-what > b, .adm-table .adm-what > span:not(.adm-sub) { display: block; }
.adm-table td.adm-what { white-space: normal; }
.adm-table td.adm-rights { white-space: normal; min-width: 200px; max-width: 360px; color: var(--text-gray); font-size: 0.84rem; }
.adm-table td.adm-when { color: var(--text-gray); font-size: 0.84rem; }
.adm-sub { display: block; color: var(--text-gray); font-size: 0.8rem; white-space: normal; overflow-wrap: anywhere; }
.adm-name { font-weight: 600; color: var(--primary); text-decoration: none; }
.adm-name:hover { color: var(--accent-dark); }
.adm-row-link { cursor: pointer; }
.adm-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
.adm-plus { color: var(--primary); font-weight: 600; }
.adm-minus { color: var(--accent-dark); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.adm-table td.adm-actions, .adm-table td.adm-actions-cell { white-space: normal; }
.adm-table td.adm-actions { min-width: 150px; }
.adm-line { color: var(--text-gray); font-size: 0.88rem; margin: -8px 0 16px; }
.adm-more { font-size: 0.86rem; color: var(--text-gray); }
.adm-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-filters .ac-select { min-width: 180px; }

.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 4px 0 20px; }
.adm-kpi { border: 1px solid var(--border-gray); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.adm-kpi__label { color: var(--text-gray); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.adm-kpi__value { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; overflow-wrap: anywhere; }
.adm-kpi__note { color: var(--text-gray); font-size: 0.8rem; margin-top: 2px; }
.adm-kpi--warn { border-color: var(--accent); background: var(--accent-wash); }
.adm-kpi--warn .adm-kpi__value { color: var(--accent-dark); }
.adm-kpi--action { display: flex; flex-direction: column; align-items: flex-start; }
.adm-kpi--action .btn { margin-top: 10px; }

.adm-redeem, .adm-inline-form { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.adm-redeem .form-group, .adm-inline-form .form-group { flex: 0 1 280px; min-width: 200px; }
.adm-redeem .fld--action, .adm-inline-form .fld--action { flex: none; min-width: 0; }
.adm-redeem .login-message, .adm .login-message { margin: 12px 0 0; }
.adm .set-what { margin-top: 14px; }
.adm-toggles { display: flex; flex-direction: column; gap: 12px; }
.adm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }

/* The role and its rights (users.js). */
.rights { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.rights .form-group { max-width: 320px; }
.rights__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.rights__group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rights__title { color: var(--text-gray); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rights__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 900px) {
    .rights__groups, .rights__pair, .adm-form-grid { grid-template-columns: 1fr; }
}

/* The temporary password, shown once. */
.temp-pass { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.temp-pass__value {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: var(--light-gray);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    user-select: all;
    overflow-wrap: anywhere;
}

/* Settings → Models / Providers: which level the page shows (Ф10 Б). */
.set-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: var(--light-gray);
    font-size: 0.86rem;
}
.set-level__text { flex: 1 1 320px; min-width: 0; }
.app.is-platform-admin .crumbs:empty + .crumbs__sep--title { display: none; }
.adm-head .ac-select, .adm-filters .ac-select { width: auto; flex: 0 0 auto; }
.adm-filters { flex-direction: row; align-items: center; }
.adm-table a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.adm-table a:hover { color: var(--accent-dark); text-decoration-color: currentColor; }
.adm-table a.adm-name { text-decoration: none; }
/* A tick with its explanation under the label (rights, the account's sections). */
.rights .ac-check, .adm-toggles .ac-check {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
}
.rights .ac-check .ac-check__box, .adm-toggles .ac-check .ac-check__box { grid-row: 1; margin-top: 1px; }
.rights .ac-check .ac-check__label, .adm-toggles .ac-check .ac-check__label { grid-column: 2; font-weight: 600; }
.rights .ac-check .ac-check__note, .adm-toggles .ac-check .ac-check__note { grid-column: 2; color: var(--text-gray); font-size: 0.8rem; line-height: 1.4; margin: 0; }
/* The admin tables fit 1280 without a scroll of their own: headers and dates wrap. */
.adm-table th, .adm-table td { padding: 11px 12px; }
.adm-table th { white-space: normal; }
.adm-table td.adm-when { white-space: normal; min-width: 92px; }
.adm-table .adm-what { min-width: 140px; }
.adm-table .adm-what span { overflow-wrap: anywhere; }

/* ---------- SA-051: Voice of the audience (voice.js) ---------- */
.voa-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: -8px; }
.voa-caveat {
    display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
    line-height: 1.6; border: 1px solid var(--accent); background: var(--accent-wash); color: var(--accent-dark); cursor: pointer; white-space: nowrap;
}
.voa-caveat.has-tip:hover, .voa-caveat.has-tip--open { box-shadow: 0 0 0 2px var(--accent-ring); }
.voa-anon { font-size: 0.78rem; color: var(--text-gray); }
.voa-form { margin-top: 4px; }
.voa-subject { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.voa-subject > .link-btn { white-space: nowrap; }
.voa-subject > .btn { height: var(--ac-control-h); padding-top: 0; padding-bottom: 0; }
.voa-competitors { display: flex; flex-direction: column; gap: 10px; }
.voa-comp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.voa-known { cursor: pointer; border: 1px solid var(--border-gray); font: inherit; font-size: 0.8rem; }
.voa-known:hover { border-color: var(--primary); }
.voa-known-label { font-size: 0.8rem; margin-left: 6px; }
.voa-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.voa-sources .ac-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start; }
.voa-sources .ac-check__box { grid-row: 1; margin-top: 1px; }
.voa-sources .ac-check__label { grid-column: 2; font-weight: 600; }
.voa-sources .ac-check__note { grid-column: 2; color: var(--text-gray); font-size: 0.8rem; line-height: 1.4; margin: 0; }
.voa-sources .voa-later { opacity: 0.6; }
.voa-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-gray); }
.voa-price { font-size: 0.85rem; line-height: 1.5; flex: 1 1 400px; min-width: 0; }
.voa-parts { margin: 8px 0 10px 18px; font-size: 0.86rem; line-height: 1.5; }
.voa-apps { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.voa-app-row { text-align: left; background: var(--white); border: 1px solid var(--border-gray); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 0.86rem; cursor: pointer; }
.voa-app-row:hover { border-color: var(--primary); }
.voa-step { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 0 0 10px; }
.voa-sourcelist { margin: 0; padding-left: 18px; font-size: 0.84rem; line-height: 1.55; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.voa-meta { margin-bottom: 12px; overflow-wrap: anywhere; }
.voa-summary { margin: 14px 0 6px; font-size: 0.92rem; line-height: 1.55; }
.voa-tools { margin: 14px 0 6px; }
.voa-filters { flex-wrap: wrap; gap: 10px; align-items: center; }
.voa-filters .voa-filter { width: 220px; flex: none; }
.voa-kinds { margin: 0; }
.voa-total { margin: 0 0 12px; font-size: 0.84rem; }
.voa-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.voa-theme { border: 1px solid var(--border-gray); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--white); }
.voa-theme--motive { border-top: 3px solid var(--primary); }
.voa-theme--barrier { border-top: 3px solid var(--accent); }
.voa-theme--complaint { border-top: 3px solid var(--accent-dark); }
.voa-theme--praise { border-top: 3px solid #737373; }
.voa-theme__top { display: flex; align-items: center; gap: 8px; }
.voa-theme__n { font-size: 0.8rem; margin-left: auto; }
.voa-kind { font-size: 0.72rem; font-weight: 700; }
.voa-theme__title { font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.voa-theme__meaning { margin: 0; font-size: 0.86rem; color: var(--text-gray); line-height: 1.45; }
.voa-theme__by { margin: 0; font-size: 0.78rem; }
.voa-bars { display: flex; flex-direction: column; gap: 5px; margin: 2px 0; }
.voa-bar { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 0.78rem; }
.voa-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-gray); }
.voa-bar__track { height: 8px; border-radius: 4px; background: var(--light-gray); overflow: hidden; }
.voa-bar__fill { display: block; height: 100%; border-radius: 4px; }
.voa-bar__fill--product { background: var(--accent); }
.voa-bar__fill--comp { background: #737373; }
.voa-bar__num { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--primary); }
.voa-quotes { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.voa-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); background: var(--light-gray); border-radius: 0 8px 8px 0; }
.voa-quote__text { margin: 0; font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; }
.voa-quote__tr { margin: 4px 0 0; font-size: 0.82rem; color: var(--text-gray); line-height: 1.45; overflow-wrap: anywhere; }
.voa-quote__meta, .voa-snippet__meta { margin: 4px 0 0; font-size: 0.74rem; color: var(--text-gray); overflow-wrap: anywhere; }
.voa-quote__meta a, .voa-snippet__meta a { color: var(--text-gray); text-decoration: underline; text-underline-offset: 2px; }
.voa-theme__all { align-self: flex-start; }
.voa-theme__list:empty { display: none; }
.voa-snippets { display: flex; flex-direction: column; border-top: 1px solid var(--border-gray); }
.voa-snippet { padding: 8px 0; border-bottom: 1px solid var(--border-gray); }
.voa-snippet__text { margin: 0; font-size: 0.84rem; line-height: 1.45; overflow-wrap: anywhere; }
.voa-more { display: flex; gap: 10px; margin-top: 18px; }
.voa-more__box { margin-top: 10px; }
.voa-how__line { margin: 8px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-gray); }
.voa-history { display: flex; flex-direction: column; }
.voa-hrow { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border-gray); }
.voa-hrow:first-child { border-top: 0; }
.voa-hrow.is-on .voa-hrow__title { color: var(--accent-dark); }
.voa-hrow__main { flex: 1 1 auto; min-width: 0; }
.voa-hrow__title { font-weight: 600; color: var(--primary); overflow-wrap: anywhere; }
.voa-hrow__meta { margin: 2px 0 0; font-size: 0.8rem; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
    .voa-themes { grid-template-columns: 1fr; }
    .voa-subject { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* «Show password» eye inside every password field (password-toggle.js) */
.pw { position: relative; display: block; min-width: 0; }
.pw > .ac-input,
.pw > input { width: 100%; padding-right: 42px; }
.pw__btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-gray);
    cursor: pointer;
}
.pw__btn:hover,
.pw__btn:focus-visible { color: var(--text-dark, currentColor); }