/* RestoAudit Pitch — application styles.
   THEME-220 (v2.2.0): the whole app carries the RestoZign.com standard —
   deep navy, frosted-glass cards, Luxury Gold accents, cream text,
   centered content column. Brand: navy #061725, gold #EDBD5A,
   amber #E79642, cream #FFFAF0. System font stack only; no external
   fonts or CDN resources. NO light page backgrounds anywhere: every
   surface below is navy glass, and every text token is measured
   >= 4.5:1 against the glass it sits on (see
   tools/visual-qa/THEME-220-REPORT.md). */

:root {
    --navy: #061725;
    --navy-soft: #0d2a40;
    --navy-muted: #A8BFD0;
    --gold: #EDBD5A;
    --gold-bright: #F3CD77;
    --gold-dark: #9a7b1e;
    --gold-text: #EDBD5A;
    --amber: #E79642;
    --amber-text: #FFD9A0;
    --cream: #FFFAF0;
    /* Glass surfaces: translucent navy panels over the ambient glow.
       --glass is the standard card; --glass-strong backs text-dense
       surfaces (forms, tables, sidebar); --glass-soft is a whisper
       tint for inset boxes. */
    --glass: rgba(13, 42, 64, 0.55);
    --glass-strong: rgba(10, 33, 51, 0.82);
    --glass-soft: rgba(255, 250, 240, 0.05);
    --glass-input: rgba(4, 15, 24, 0.55);
    --paper: rgba(13, 42, 64, 0.55);
    --ink: #FFFAF0;
    --ink-soft: #C9D6DF;
    --ink-faint: #A8BFD0;
    --line: rgba(237, 189, 90, 0.22);
    --line-strong: rgba(237, 189, 90, 0.48);
    --link: #8FC7EE;
    --link-hover: #BFE0F7;
    --ok-bg: #1E5C26;
    --ok-ink: #ABE3B0;
    --err-bg: #7A1F14;
    --err-ink: #FFB4A6;
    --info-bg: #1D3F5E;
    --info-ink: #A9CDF2;
    --warn-bg: #7A4D0F;
    --warn-ink: #FFD9A0;
    --radius: 14px;
    --shadow-glass: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 250, 240, 0.07);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--navy);
    background-image:
        radial-gradient(720px 480px at 85% -5%, rgba(237, 189, 90, 0.16), rgba(237, 189, 90, 0) 60%),
        radial-gradient(900px 620px at -10% 30%, rgba(231, 150, 66, 0.10), rgba(231, 150, 66, 0) 55%),
        radial-gradient(1100px 800px at 50% 115%, rgba(23, 80, 126, 0.20), rgba(23, 80, 126, 0) 60%),
        linear-gradient(160deg, #081c2e 0%, #061725 55%, #04101a 100%);
    background-attachment: fixed;
    color: var(--ink);
    line-height: 1.5;
    font-size: 15px;
    min-height: 100vh;
}

::selection { background: var(--gold); color: var(--navy); }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

h1 { font-size: 1.6rem; margin: 0 0 0.35rem; color: var(--cream); }
h2 { font-size: 1.2rem; margin: 0 0 0.7rem; color: var(--cream); }
h3 { font-size: 1.02rem; margin: 1.1rem 0 0.5rem; color: var(--cream); }
p { margin: 0 0 0.7rem; }

/* ------------------------------------------------------------------ */
/* Shell                                                               */
/* ------------------------------------------------------------------ */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: linear-gradient(180deg, rgba(13, 42, 64, 0.88), rgba(5, 18, 29, 0.94));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-right: 1px solid var(--line);
    color: #f2ead6;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 5;
}

.sidebar-brand { display: flex; gap: 10px; align-items: center; padding: 4px 6px 16px; border-bottom: 1px solid rgba(237, 189, 90, 0.35); text-decoration: none; color: inherit; border-radius: 8px 8px 0 0; }
.sidebar-brand:hover .sidebar-business { color: var(--gold); }
.sidebar-brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sidebar-logo { width: 44px; height: 44px; object-fit: contain; }
.sidebar-brand-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-business { font-weight: 700; color: #fff; font-size: 0.98rem; overflow-wrap: anywhere; }
.sidebar-product { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* Brand stays pinned; nav + demo + user scroll together beneath it so
   every group is reachable on short viewports. */
.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(237, 189, 90, 0.45) transparent; }
.sidebar-nav { display: flex; flex-direction: column; gap: 15px; margin-top: 16px; }
.nav-group { display: flex; flex-direction: column; gap: 3px; }
/* v2.7.6 (Seal #12): group headers are real toggle buttons. The
   label keeps its small-caps treatment; --navy-muted on the sidebar
   gradient measures ≈7.9:1 (WCAG), comfortably readable. */
.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px 7px;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}
.nav-group-toggle:hover { background: rgba(255, 250, 240, 0.05); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.nav-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--navy-muted);
}
.nav-group-chevron {
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--navy-muted);
    border-bottom: 2px solid var(--navy-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.nav-group-toggle[aria-expanded="false"] .nav-group-chevron { transform: rotate(-45deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 3px; }
.nav-group-items[hidden] { display: none; }
.nav-link {
    color: #e9e2cf;
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-link:hover { background: rgba(255, 250, 240, 0.07); color: #fff; }
.nav-link.is-active { background: #4A3D1E; color: var(--gold); font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); }
.nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.sidebar-demo {
    margin-top: 18px;
    border: 1px solid var(--amber);
    background: rgba(231, 150, 66, 0.14);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.83rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sidebar-demo strong { color: var(--amber-text); }

.sidebar-user { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(237, 189, 90, 0.25); display: flex; flex-direction: column; gap: 8px; }
.sidebar-user-email { font-size: 0.85rem; color: #d8cfb4; overflow-wrap: anywhere; }
.sidebar-admin-chip {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--gold);
    border-radius: 999px;
    padding: 2px 9px;
}
.logout-form { margin: 0; }

.main-column { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.main-content { flex: 1 1 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 30px 30px 44px; }

.app-footer {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 14px 30px 22px;
    color: var(--ink-faint);
    font-size: 0.85rem;
    border-top: 1px solid var(--line);
}
.app-footer-sep { margin: 0 6px; }

.page-intro { color: var(--ink-soft); max-width: 70ch; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-head-actions form { margin: 0; }

/* ------------------------------------------------------------------ */
/* Flash + notices                                                     */
/* ------------------------------------------------------------------ */

.flash { border-radius: var(--radius); padding: 11px 14px; margin-bottom: 14px; border: 1px solid transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.flash-success { background: var(--ok-bg); color: var(--ok-ink); border-color: rgba(171, 227, 176, 0.45); }
.flash-error { background: var(--err-bg); color: var(--err-ink); border-color: rgba(255, 180, 166, 0.45); }
.flash-info { background: var(--info-bg); color: var(--info-ink); border-color: rgba(169, 205, 242, 0.45); }
.flash-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: rgba(255, 217, 160, 0.45); }

.notice { border-radius: var(--radius); padding: 11px 14px; margin-bottom: 14px; border: 1px solid var(--line-strong); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.notice-info { background: var(--info-bg); color: var(--info-ink); border-color: rgba(169, 205, 242, 0.45); }
.notice-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: rgba(255, 217, 160, 0.45); }
.notice-error { background: var(--err-bg); color: var(--err-ink); border-color: rgba(255, 180, 166, 0.45); }
.notice-license { background: rgba(237, 189, 90, 0.13); color: var(--cream); border-color: var(--gold); }
.notice-license strong { color: var(--gold); }

/* Announcement banner (Super Admin > Defaults) — glass slab, gold rule. */
.announcement-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--cream);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.announcement-text { margin: 0; flex: 1 1 auto; }
.announcement-dismiss { margin: 0; flex: 0 0 auto; }
.announcement-banner .btn { background: transparent; border-color: rgba(237, 189, 90, 0.55); color: var(--gold); }
.announcement-banner .btn:hover { background: rgba(237, 189, 90, 0.15); color: var(--gold); }

/* ------------------------------------------------------------------ */
/* Cards, stats, tables                                                */
/* ------------------------------------------------------------------ */

.card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-glass);
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); color: #f2ead6; border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-glass); }
.stat-value { font-size: 1.7rem; font-weight: 700; color: #fff; }
.stat-of { font-size: 1rem; color: var(--gold); font-weight: 500; }
.stat-label { font-size: 0.9rem; }
.stat-sub { font-size: 0.8rem; color: var(--ink-faint); }

.table { width: 100%; border-collapse: collapse; margin-bottom: 0.6rem; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }
.table tr.row-dismissed td { opacity: 0.55; }
.cell-url { overflow-wrap: anywhere; font-size: 0.88rem; }
.cell-error { display: block; color: var(--err-ink); font-size: 0.83rem; }
.muted { color: var(--ink-faint); }
.count-note { color: var(--ink-faint); font-weight: 400; font-size: 0.9rem; }

.empty-state { color: var(--ink-soft); font-style: italic; }

.status-counts { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.status-counts li { display: flex; align-items: center; gap: 8px; }

.doc-list { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.doc-list li { margin-bottom: 5px; }

.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two-column .card { margin-bottom: 0; }

.quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.allowance-meter { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.allowance-meter-track { flex: 0 0 220px; height: 10px; background: rgba(255, 250, 240, 0.14); border-radius: 999px; overflow: hidden; }
.allowance-meter-fill { height: 100%; background: var(--gold); }
.allowance-meter-fill.is-full { background: var(--amber); }
.allowance-meter-text { font-weight: 600; color: var(--cream); }

.detail-list { margin: 0 0 0.8rem; }
.detail-list .detail-item { display: flex; gap: 14px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.detail-list dt { flex: 0 0 150px; font-weight: 600; color: var(--gold-text); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.detail-list-wide dt { flex-basis: 190px; }

.danger-zone { border-color: rgba(255, 180, 166, 0.55); }

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge-status-confirmed_issue { background: var(--err-bg); color: var(--err-ink); border-color: rgba(255, 180, 166, 0.4); }
.badge-status-needs_review { background: var(--warn-bg); color: var(--warn-ink); border-color: rgba(255, 217, 160, 0.4); }
.badge-status-appears_available { background: var(--ok-bg); color: var(--ok-ink); border-color: rgba(171, 227, 176, 0.4); }
.badge-status-not_applicable { background: rgba(255, 250, 240, 0.10); color: var(--ink-soft); border-color: var(--line); }
.badge-priority-high { background: #8c2f24; color: #fff; }
.badge-priority-medium { background: var(--amber); color: #3c2703; }
.badge-priority-low { background: rgba(51, 80, 95, 0.55); color: var(--ink-soft); border-color: var(--line); }
.badge-sample { background: var(--gold); color: #3c2f03; }
.badge-dismissed { background: rgba(255, 250, 240, 0.16); color: var(--ink-soft); }
.badge-muted { background: rgba(51, 80, 95, 0.55); color: var(--ink-soft); border-color: var(--line); }
.badge-category { background: var(--info-bg); color: var(--info-ink); border-color: rgba(169, 205, 242, 0.4); }
.badge-proposal-status { background: rgba(6, 23, 37, 0.65); color: var(--gold); border-color: var(--line-strong); }
.badge-http-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: rgba(171, 227, 176, 0.4); }
.badge-http-error { background: var(--err-bg); color: var(--err-ink); border-color: rgba(255, 180, 166, 0.4); }
.badge-http-other { background: var(--warn-bg); color: var(--warn-ink); border-color: rgba(255, 217, 160, 0.4); }

/* ------------------------------------------------------------------ */
/* Buttons + forms                                                     */
/* ------------------------------------------------------------------ */

.btn {
    display: inline-block;
    background: var(--glass-strong);
    color: var(--cream);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.35;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { border-color: var(--gold); color: #fff; background: rgba(23, 62, 92, 0.85); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: rgba(0, 0, 0, 0.35); color: #2e2303; box-shadow: 0 8px 22px rgba(237, 189, 90, 0.22); }
.btn-primary:hover { background: linear-gradient(180deg, #f8d98c, var(--gold-bright)); color: #2e2303; border-color: rgba(0, 0, 0, 0.35); transform: translateY(-1px); }
.btn-danger { background: rgba(128, 36, 24, 0.32); border-color: rgba(255, 180, 166, 0.55); color: var(--err-ink); }
.btn-danger:hover { background: rgba(160, 52, 38, 0.38); color: #ffd9d2; border-color: rgba(255, 180, 166, 0.8); }
.btn-small { padding: 4px 10px; font-size: 0.85rem; }
.btn-lg { padding: 11px 20px; font-size: 1rem; border-radius: 12px; }
/* Ghost buttons: transparent over glass, gold text (>= 8:1 on the
   glass tokens). */
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--gold-text); }
.btn-ghost:hover { background: rgba(237, 189, 90, 0.14); color: var(--gold-bright); border-color: var(--gold); }
.sidebar .btn-ghost { border-color: rgba(237, 189, 90, 0.5); color: var(--gold); }
.sidebar .btn-ghost:hover { background: rgba(237, 189, 90, 0.15); color: var(--gold); }
.btn-ghost-dark { background: transparent; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 6px; }
.form-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-row-wide { grid-column: 1 / -1; }
.form-row label { font-weight: 600; font-size: 0.9rem; color: var(--cream); }
.form-row input[type="text"],
.form-row input[type="url"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="search"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row input[type="file"],
.form-row select,
.form-row textarea {
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 0.94rem;
    background: var(--glass-input);
    color: var(--cream);
    width: 100%;
}
.form-row textarea { resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: 2px solid rgba(237, 189, 90, 0.65);
    outline-offset: 1px;
    border-color: var(--gold);
}
.field-hint { font-size: 0.84rem; color: var(--ink-faint); margin: 0; }

/* Simple stacked fields (auth screens + compact forms). */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; min-width: 0; }
.field label { font-weight: 600; font-size: 0.9rem; color: var(--cream); }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 0.95rem;
    background: var(--glass-input);
    color: var(--cream);
    width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid rgba(237, 189, 90, 0.65);
    outline-offset: 1px;
    border-color: var(--gold);
}
/* Glass controls that live outside .form-row/.field wrappers:
   builder create forms (bare inputs inside <label> in .form-grid),
   the video gallery's per-card format select, and the Quick Audit
   URL field. Same tokens as the wrapped controls above. */
.form-grid > label input[type="text"],
.form-grid > label input[type="url"],
.form-grid > label input[type="email"],
.form-grid > label input[type="password"],
.form-grid > label input[type="number"],
.form-grid > label select,
.form-grid > label textarea,
.video-tpl-form select,
#qa-url {
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 0.94rem;
    background: var(--glass-input);
    color: var(--cream);
}
.form-grid > label input,
.form-grid > label select,
.form-grid > label textarea { width: 100%; }
.form-grid > label input:focus,
.form-grid > label select:focus,
.form-grid > label textarea:focus,
.video-tpl-form select:focus,
#qa-url:focus {
    outline: 2px solid rgba(237, 189, 90, 0.65);
    outline-offset: 1px;
    border-color: var(--gold);
}
select option { background: var(--navy-soft); color: var(--cream); }
.auth-card { max-width: 480px; margin: 3.5vh auto 18px; }
.auth-brand { text-align: center; margin-bottom: 10px; }
.auth-logo { width: 92px; height: 92px; object-fit: contain; }
.auth-brand-name { display: block; font-weight: 700; color: #fff; font-size: 1.05rem; margin-top: 2px; }
.auth-brand-product { display: block; color: var(--gold); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.auth-card h1 { text-align: center; }
input::placeholder, textarea::placeholder { color: #93A9B8; opacity: 1; }

/* Password field with visibility eye toggle. The toggle button is
   type="button" in markup, so it can never submit the form. */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1 1 auto; padding-right: 46px; }
.password-toggle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 0;
}
.password-toggle:hover { color: var(--gold); border-color: var(--line-strong); }
.password-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.password-toggle svg { width: 20px; height: 20px; flex: 0 0 auto; }
.password-toggle .eye-off-icon { display: none; }
.password-toggle.is-on .eye-off-icon { display: block; }
.password-toggle.is-on .eye-icon { display: none; }
.required { color: var(--err-ink); }

.form-row-check { justify-content: flex-end; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.checkbox-label input { width: 17px; height: 17px; accent-color: var(--gold-dark); }

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.form-actions form { margin: 0; }

.filter-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filter-bar .form-row { flex: 1 1 180px; }

.item-editor { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 4px; margin: 0 0 14px; background: var(--glass-soft); }
.item-editor legend { font-weight: 700; color: var(--gold-text); padding: 0 6px; font-size: 0.9rem; }

.finding-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.finding-pick { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--glass-soft); cursor: pointer; font-weight: 400; }
.finding-pick input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--gold-dark); }

.edit-panel { border-color: var(--gold); }
/* Logo previews keep a light backing on purpose: uploaded logos are
   artwork (often dark-on-transparent) and must stay visible. This is
   an image well, not a text surface. */
.logo-preview { max-width: 260px; max-height: 110px; object-fit: contain; background: rgba(255, 250, 240, 0.94); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }

.feature-list, .help-steps { margin: 0 0 0.8rem; padding-left: 1.25rem; }
.feature-list li, .help-steps li { margin-bottom: 6px; }
.locked-feature { border-color: var(--gold); }

.compare-findings { margin: 0; padding-left: 1rem; }
.compare-findings li { margin-bottom: 7px; }
.compare-table td { width: auto; }

/* ------------------------------------------------------------------ */
/* Documents (reports / proposals)                                     */
/* On screen they are glass sheets like everything else; the print    */
/* block at the bottom restores the paper document for printing.      */
/* ------------------------------------------------------------------ */

.document {
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 40px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-glass);
}
.document-header { border-bottom: 3px solid var(--gold); padding-bottom: 16px; margin-bottom: 20px; }
.document-brand { display: flex; gap: 18px; align-items: flex-start; }
.document-logo { max-width: 170px; max-height: 84px; object-fit: contain; }
.document-business { font-weight: 700; color: var(--cream); font-size: 1.05rem; margin: 0; }
.document-title { font-size: 1.55rem; margin: 2px 0 6px; }
.document-meta { color: var(--ink-faint); margin: 0; }
.document-section { margin-bottom: 20px; }
.document-section h2 { border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.document-price { font-size: 1.25rem; font-weight: 700; color: var(--gold-text); }
.document-footer { border-top: 1px solid var(--line); padding-top: 12px; color: var(--ink-faint); font-size: 0.88rem; }
.acceptance-line { margin-top: 14px; color: var(--ink); }

.priority-list { padding-left: 1.3rem; }
.priority-list li { margin-bottom: 10px; }
.priority-observation { font-weight: 600; margin-bottom: 3px; }

.finding-block { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 14px; margin-bottom: 14px; }
.finding-observation { font-weight: 600; margin-bottom: 4px; }
.finding-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.scope-item { margin-bottom: 14px; }
.scope-item h3 { margin-top: 0; }

.print-body { background: var(--navy); }
.print-body .document { max-width: 820px; margin: 0 auto; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; flex: none; height: auto; position: static; padding: 14px; }
    .sidebar-scroll { overflow-y: visible; display: block; }
    .sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; margin-top: 12px; }
    /* v2.7.6: each group takes a full row of the stacked sidebar; the
       toggle stays on its own line and the items wrap inside the
       group, so groups collapse exactly as on desktop. */
    .nav-group { flex: 1 1 100%; }
    .nav-group-toggle { padding: 6px 2px 4px; }
    .nav-group-items { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .sidebar-user { margin-top: 14px; }
    .main-content { padding: 20px 16px 32px; }
    .form-grid { grid-template-columns: 1fr; }
    .two-column { grid-template-columns: 1fr; }
    .table { display: block; overflow-x: auto; }
    .document { padding: 24px 20px; }
    .detail-list .detail-item { flex-direction: column; gap: 2px; }
    .detail-list dt { flex: none; }
}

/* ------------------------------------------------------------------ */
/* Traffic on Demand                                                   */
/* ------------------------------------------------------------------ */

.badge-upgrade { background: var(--gold); color: #3c2f03; margin-left: 6px; }

.traffic-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.traffic-subnav a {
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    text-decoration: none;
    color: var(--cream);
    background: var(--glass);
    font-weight: 600;
    font-size: 0.9rem;
}
.traffic-subnav a.is-active { background: var(--gold); color: #2e2303; border-color: var(--gold); }

/* v2.7.21 (Seal E, X-E-7): Signature subnav group labels
   (Setup · Content · Guests · Grow) — chrome only, the tabs and
   their order are unchanged. The label aligns with the pills and
   starts a new row so each group reads as its own cluster. */
.sig-subnav .sig-group-label {
    flex: 1 0 100%;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}
.sig-subnav .sig-group-label:first-child { margin-top: 0; }

/* v2.7.21 (Seal E, X-E-7): the shared media picker
   (views/_media_picker.php + assets/media-picker.js) — one picker
   for every image field outside the builder. */
.rz-mp-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(4, 12, 20, 0.72); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.rz-mp-panel { background: var(--surface, #0d2233); color: var(--cream); border: 1px solid var(--line-strong); border-radius: 16px; max-width: 860px; width: 100%; padding: 18px; }
.rz-mp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rz-mp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rz-mp-tab { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--glass); color: var(--cream); font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.rz-mp-tab.is-active { background: var(--gold); color: #2e2303; border-color: var(--gold); }
.rz-mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 10px 0; }
.rz-mp-cell { padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: none; cursor: pointer; position: relative; }
.rz-mp-cell img { display: block; width: 100%; height: 84px; object-fit: cover; }
.rz-mp-cell-provider { position: absolute; left: 6px; bottom: 6px; background: rgba(4, 12, 20, 0.8); color: var(--cream); font-size: 0.68rem; padding: 2px 6px; border-radius: 999px; }
.rz-mp-group { margin: 8px 0 4px; }
.rz-mp-search { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.rz-mp-input-text { flex: 1 1 auto; width: 100%; }

.map-source { border-top: 1px solid var(--line); padding: 14px 0; }
.map-source:first-of-type { border-top: none; }
.map-source-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.map-source-head h3 { margin: 0 0 4px; }
.map-source-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.map-source-form .form-row { margin: 0; }
.map-source-notes { flex: 1 1 220px; }

.starter-box {
    background: var(--glass-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-top: 8px;
}
.starter-box p { margin: 0 0 8px; }

.today-row { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--line); padding: 12px 0; }
.today-row:first-of-type { border-top: none; }
.today-row .today-check { margin: 0; padding-top: 2px; }
.today-row .today-body { flex: 1 1 auto; }
.today-row.is-done .today-label { text-decoration: line-through; color: var(--ink-faint); }

.pack-item { border-top: 1px solid var(--line); padding: 12px 0; }
.pack-item:first-of-type { border-top: none; }
.pack-item p { white-space: pre-wrap; }

.progress-line { font-size: 1.02rem; }
.progress-line strong { color: var(--gold-text); }

/* ------------------------------------------------------------------ */
/* Demand Detective (v1.2.0)                                           */
/* ------------------------------------------------------------------ */

.badge-hot { background: #8c2f24; color: #fff; }
.badge-warm { background: var(--amber); color: #3c2703; }
.badge-watching { background: rgba(255, 250, 240, 0.10); color: var(--ink-soft); border-color: var(--line); }
.nav-link-sub { padding-left: 28px; font-size: 0.92rem; }

.detective-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.detective-toolbar h2 { margin-top: 0; }
.detective-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.detective-actions form { margin: 0; }
.detective-runlog { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.detective-filters { margin: 14px 0 6px; }
.detective-status-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

.signal-row { border-top: 1px solid var(--line); padding: 12px 0; }
.signal-title { font-weight: 700; font-size: 1.02rem; }
.signal-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0 2px; }
.signal-snippet { color: var(--ink-soft); margin: 4px 0 0; }
.signal-contact { font-size: 0.85rem; color: var(--ink-faint); }

.detective-today-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.detective-today-row .signal-title { font-size: 0.98rem; }

/* ------------------------------------------------------------------ */
/* ServiceDesk (template app rz_servicedesk)                           */
/* Staff surfaces are standalone pages (no app sidebar), so this      */
/* section carries its own shell: topbar, main column, board grids.   */
/* ------------------------------------------------------------------ */

.sd-topbar { background: rgba(5, 18, 29, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); color: var(--cream); padding: 10px 16px; }
.sd-topbar-inner { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.sd-topbar .muted { color: var(--ink-faint); }
.sd-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.sd-nav a { color: var(--cream); text-decoration: none; font-weight: 600; }
.sd-nav a:hover { text-decoration: underline; }
.sd-user { margin-left: auto; }
/* The account link and ghost "Sign out" button sit on the dark bar:
   both take the bar's own light tokens (gold on the bar's near-navy
   ground is ~8.7:1; cream ~14:1). */
.sd-topbar .sd-user a { color: var(--gold); }
.sd-topbar .btn-ghost { color: var(--cream); border-color: var(--gold); }
.sd-topbar .btn-ghost:hover { background: rgba(237, 189, 90, 0.18); color: var(--cream); }
.sd-topbar form { margin: 0; }
.sd-main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }
.sd-footer { max-width: 1200px; margin: 0 auto; padding: 0 16px 24px; }
.sd-floor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sd-table-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sd-table-card.has-orders { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.sd-table-card strong { font-size: 1.05rem; }
.sd-kitchen-card h2 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sd-kitchen-items li { font-size: 1.05rem; padding: 3px 0; }
.sd-order-block { padding: 10px 0; border-top: 1px solid var(--line); }
.sd-order-block:first-of-type { border-top: none; }
.sd-item-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
/* Second .badge-warm definition kept from the original file (the
   ServiceDesk copy below the Detective one): same dark-tint tokens. */
.badge-warm { background: rgba(122, 68, 10, 0.42); color: var(--amber-text); border: 1px solid rgba(231, 150, 66, 0.55); }

/* ------------------------------------------------------------------ */
/* Print: documents only — paper output keeps dark ink on white.     */
/* ------------------------------------------------------------------ */

@media print {
    @page { margin: 18mm 16mm; }

    body { background: #fff; font-size: 11pt; color: #1c2733; }
    .sidebar, .app-footer, .flash, .edit-panel, .page-head, .page-head-actions,
    .no-print, form, .quick-links, .allowance-meter { display: none !important; }

    .app-shell, .main-column, .main-content { display: block; max-width: none; padding: 0; margin: 0; }

    .card { border: none; box-shadow: none; padding: 0; background: transparent; color: #1c2733; }
    .document {
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        background: #fff;
        color: #1c2733;
        max-width: none;
    }
    .document h1, .document h2, .document h3, .document-business, .document-price { color: #061725; }
    .document-meta, .document-footer { color: #55636f; }
    .document-header { border-bottom: 3px solid var(--gold); }
    .finding-block, .scope-item, .priority-list li { break-inside: avoid; }
    .document-section { break-inside: auto; }
    a { color: #1c2733; text-decoration: none; }
}

/* ------------------------------------------------------------------ */
/* Funnels — centered hero + glass preset gallery (THEME-220)          */
/* ------------------------------------------------------------------ */

.funnel-hero {
    text-align: center;
    max-width: 780px;
    margin: 6px auto 26px;
}
.funnel-hero-logo { width: 74px; height: 74px; object-fit: contain; }
.funnel-eyebrow {
    margin: 6px 0 4px;
    color: var(--gold-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.funnel-hero h1 { font-size: 2rem; margin-bottom: 8px; }
.funnel-hero .page-intro { margin-left: auto; margin-right: auto; }
.funnel-hero-actions { margin: 14px 0 0; }
.funnel-section-title { text-align: center; margin-bottom: 14px; }
.funnel-after-note { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }

.funnel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 10px;
}
@media (max-width: 1280px) {
    .funnel-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
    .funnel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .funnel-grid { grid-template-columns: 1fr; }
}

.funnel-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-glass);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.funnel-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }

.funnel-cover {
    position: relative;
    aspect-ratio: 8 / 5;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-soft) 100%);
    border-bottom: 2px solid var(--gold);
}
.funnel-cover img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.funnel-cover-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    text-align: center;
}
.funnel-cover-fallback-name {
    color: var(--gold);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
}
.funnel-cover-fallback-steps {
    color: #f2ead6;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.funnel-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}
.funnel-card-body h3 { margin: 0; font-size: 1.05rem; }
.funnel-goal { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45; }
.funnel-locked-note { margin: 0; color: var(--amber-text); font-size: 0.88rem; }

.funnel-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.funnel-step-chip {
    background: var(--info-bg);
    color: var(--info-ink);
    border: 1px solid rgba(169, 205, 242, 0.35);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.funnel-step-arrow { color: var(--ink-faint); font-size: 0.75rem; }

.funnel-card-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.funnel-use-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.funnel-use-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); }
.funnel-use-form input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 0.94rem;
    background: var(--glass-input);
    color: var(--cream);
}
.funnel-use-form input[type="text"]:focus {
    outline: 2px solid rgba(237, 189, 90, 0.65);
    outline-offset: 1px;
    border-color: var(--gold);
}
.funnel-use-form .btn { align-self: flex-start; }

/* "Your funnels" — restyled list matching the gallery */
.my-funnel-list { list-style: none; margin: 0; padding: 0; }
.my-funnel-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.my-funnel-row:last-child { border-bottom: none; }
.my-funnel-thumb {
    position: relative;
    flex: 0 0 104px;
    width: 104px;
    aspect-ratio: 8 / 5;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-soft) 100%);
    border: 1px solid var(--line);
}
.my-funnel-thumb img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.my-funnel-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
}
.my-funnel-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.my-funnel-name { font-weight: 700; font-size: 1rem; }
.my-funnel-meta { font-size: 0.85rem; }
.my-funnel-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.my-funnel-actions { display: flex; gap: 6px; }
@media (max-width: 700px) {
    .my-funnel-row { flex-wrap: wrap; }
    .my-funnel-side { align-items: flex-start; }
}

/* Integrations hub (v2.1.0) — card grid + test-state badges. */
.int-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 18px; margin-bottom: 20px; }
.int-cards .card { margin-bottom: 0; }
.int-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.int-card-head h3 { margin: 0; }
.int-base { word-break: break-all; }
.int-test-line { margin: 12px 0 0; }
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: rgba(171, 227, 176, 0.4); }
.badge-error { background: var(--err-bg); color: var(--err-ink); border-color: rgba(255, 180, 166, 0.4); }
@media (max-width: 700px) {
    .int-cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Super Admin (v2.1.0, CREW ADMIN-UX)                                 */
/* ------------------------------------------------------------------ */

.admin-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.admin-subnav a {
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    text-decoration: none;
    color: var(--cream);
    background: var(--glass);
    font-weight: 600;
    font-size: 0.9rem;
}
.admin-subnav a.is-active { background: var(--gold); color: #2e2303; border-color: var(--gold); }
.admin-subnav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.badge-admin-on { background: var(--ok-bg); color: var(--ok-ink); border-color: rgba(171, 227, 176, 0.4); }
.badge-admin-off { background: rgba(255, 250, 240, 0.10); color: var(--ink-soft); border-color: var(--line); }
.badge-role-admin { background: rgba(6, 23, 37, 0.65); color: var(--gold); border-color: var(--line-strong); }

.admin-once {
    background: rgba(237, 189, 90, 0.13);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.admin-once code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold-text);
    overflow-wrap: anywhere;
}
.masked-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-actions form { margin: 0; }
.admin-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.admin-search .field { margin-bottom: 0; flex: 1 1 240px; }
.admin-audit-details { font-size: 0.82rem; color: var(--ink-faint); overflow-wrap: anywhere; max-width: 420px; }
.catalog-item-note { font-size: 0.85rem; color: var(--ink-faint); }
.admin-inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.admin-inline-form select { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px; font: inherit; font-size: 0.88rem; background: var(--glass-input); color: var(--cream); }
@media (max-width: 700px) {
    .announcement-banner { flex-direction: column; }
    .admin-search .field { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ */
/* Editor shell scope (v2.1.1 builder, body.pb-editor-body)            */
/* The full-screen editor renders through views/layout-editor.php,    */
/* which loads app.css for the shared primitives — but its panels     */
/* are light by the builder crew's own design (assets/builder.css:    */
/* #FFFAF0 / #fff panels), and its contrast proof was green against   */
/* the pre-theme primitives. Inside the editor scope ONLY, the        */
/* shared primitives therefore keep their light-surface values so     */
/* the v2.1.1 chrome contrast holds exactly as proven. The dashboard  */
/* theme above is untouched. (If the editor panels ever go glass,     */
/* that is a builder.css change for the builder crew — flagged in     */
/* THEME-220-REPORT.md.)                                              */
/* ------------------------------------------------------------------ */

body.pb-editor-body h1,
body.pb-editor-body h2,
body.pb-editor-body h3 { color: #061725; }
body.pb-editor-body a { color: #17507e; }
body.pb-editor-body a:hover { color: #0d2a40; }
/* v2.3.0 (INT merge, from CREW AI-SURFACES M5): the shared AI Agent
   Panel is a dark glass surface even inside the light editor shell,
   so the editor's dark-blue link colour above rendered panel links
   at 1.9:1 on navy. Scoped to .ai-panel, panel links keep the dark
   theme's link colours (#8FC7EE ≈ 8.9:1, hover #BFE0F7 ≈ 11.9:1 on
   navy #061725); the editor's own links are untouched. */
body.pb-editor-body .ai-panel a { color: #8FC7EE; }
body.pb-editor-body .ai-panel a:hover { color: #BFE0F7; }
body.pb-editor-body .muted { color: #55636f; }
body.pb-editor-body .btn {
    background: #fff;
    color: #061725;
    border-color: #cfc7ab;
    box-shadow: none;
}
body.pb-editor-body .btn:hover { background: #fff; border-color: #061725; color: #061725; transform: none; }
body.pb-editor-body .btn-primary {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    border-color: var(--gold-dark);
    color: #2e2303;
}
body.pb-editor-body .btn-primary:hover { background: linear-gradient(180deg, #f8d98c, var(--gold-bright)); color: #2e2303; border-color: var(--gold-dark); }
body.pb-editor-body .btn-ghost { background: transparent; border-color: var(--gold-dark); color: #7d5410; }
body.pb-editor-body .btn-ghost:hover { background: rgba(237, 189, 90, 0.18); color: #7d5410; border-color: var(--gold-dark); }
body.pb-editor-body .btn-danger { background: #fff; border-color: #d08a80; color: #8c2f24; }
body.pb-editor-body .field label,
body.pb-editor-body .form-row label { color: #061725; }
body.pb-editor-body .field input,
body.pb-editor-body .field select,
body.pb-editor-body .field textarea,
body.pb-editor-body .form-row input,
body.pb-editor-body .form-row select,
body.pb-editor-body .form-row textarea {
    background: #fff;
    color: #1c2733;
    border-color: #cfc7ab;
}
body.pb-editor-body input::placeholder,
body.pb-editor-body textarea::placeholder { color: #5f5f5f; }
body.pb-editor-body select option { background: #fff; color: #1c2733; }

/* ------------------------------------------------------------------ */
/* THEME-220 scoped overrides for crew stylesheets that load AFTER    */
/* app.css (assets/templates.css, assets/help.css). Their variables    */
/* already resolve to the glass tokens above; these rules use a       */
/* `body` prefix to outrank the light-surface rules hardcoded there.  */
/* The files themselves belong to other crews and are not edited.     */
/* ------------------------------------------------------------------ */

/* Templates gallery (templates.css, .tplx-) */
body .tplx-edition,
body .tplx-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: var(--line);
    box-shadow: var(--shadow-glass);
}
body .tplx-card:hover { border-color: var(--line-strong); }
body .tplx-filters { border-top-color: var(--line); }
body .tplx-filters label { color: var(--ink-faint); }
body .tplx-filters select,
body .tplx-filters input[type="search"] {
    background: var(--glass-input);
    color: var(--cream);
    border-color: var(--line-strong);
}
body .tplx-name a { color: var(--cream); }
body .tplx-name a:hover { color: var(--gold-bright); }
body .tplx-card.is-locked .tplx-name a { color: var(--ink-faint); }
body .tplx-style-name,
body .tplx-count,
body .tplx-tier-note { color: var(--ink-faint); }
body .tplx-tag {
    background: rgba(237, 189, 90, 0.14);
    color: var(--gold-text);
    border-color: var(--line);
}
body .tplx-frame { border-color: var(--line-strong); }

/* Help / Start Here / KB / Tutorials (help.css, .hz-) */
body .hz-navcard,
body .hz-step,
body .hz-kb-card,
body .hz-video-card,
body .hz-guide-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: var(--line);
    color: var(--ink);
}
body .hz-navcard-desc,
body .hz-step-body p,
body .hz-kb-card p,
body .hz-video-body p,
body .hz-guide-desc { color: var(--ink-soft); }
body .hz-firststep {
    background: rgba(237, 189, 90, 0.10);
    border-color: var(--line);
    color: var(--ink);
}
body .hz-progress { background: rgba(255, 250, 240, 0.14); }
body .hz-step-mark {
    background: rgba(6, 23, 37, 0.6);
    color: var(--gold-text);
    border-color: var(--line-strong);
}
body .hz-step.is-next { border-color: var(--amber); }
/* help.css paints the "next" step mark gold; the mark's number must
   stay deep navy on it (the base mark takes gold text on glass). */
body .hz-step.is-next .hz-step-mark { color: #2e2303; }
body .hz-step-state { color: var(--amber-text); }
body .hz-step.is-done .hz-step-state { color: var(--ok-ink); }
body .hz-firststep strong { color: var(--gold-text); }
body .hz-kb-cat { color: var(--amber-text); }
body .hz-search input[type="search"] {
    background: var(--glass-input);
    color: var(--cream);
    border-color: var(--line-strong);
}
body .hz-guide-tag { color: var(--amber-text); }
body .hz-edition-note {
    background: rgba(237, 189, 90, 0.10);
    border-color: var(--line);
    color: var(--ink);
}
/* Help-card CTA treatment on the dark theme (hotfix, post-v2.7.15):
   the group rule above flattens every border to --line, which erased
   the cards' gold top accent; restore it here, and pin the .hz-cta
   pill's ink so no broad span rule can ever recolour it. */
body .hz-navcard,
body .hz-kb-card,
body .hz-guide-card { border-top: 3px solid var(--gold); }
body .hz-cta { color: #2e2303; }

/* Per-tab help pills (v2.7.21, Seal E, X-E-8/X-E-9): the app shell
   loads app.css on every screen, but help.css is per-view — so the
   pill component's core treatment lives here too (same values as
   help.css, so the two never disagree): a help entry point must
   LOOK clickable everywhere it renders, not only on help views. */
.hz-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    background-color: #EDBD5A;
    background-image: linear-gradient(180deg, #F3CD77, #EDBD5A);
    color: #2e2303;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 6px 16px rgba(237, 189, 90, 0.25);
}
.hz-cta-sm {
    margin-top: 0.7rem;
    padding: 0.38rem 0.8rem;
    font-size: 0.83rem;
}
.hz-cta-arrow { display: inline-block; }
.hz-guide-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0.85rem;
}
.hz-guide-pills .hz-cta {
    margin-top: 0;
    text-decoration: none;
}
a.hz-cta:hover,
a.hz-cta:focus-visible {
    background-color: #F3CD77;
    background-image: linear-gradient(180deg, #f8d98c, #F3CD77);
    outline: 2px solid #E79642;
    outline-offset: 1px;
}
/* The pill row's (i) explainer button — the same component help.css
   styles on help views; the app shell needs it everywhere the pill
   renders (same values as help.css). Its behaviour (the bubble)
   lives in assets/help.js, loaded by the screens that carry pills
   with explainers through their own help.css link or the Signature
   brandbar; the button is a real focusable control either way. */
.help-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: 0.35rem;
    padding: 0;
    border: 1px solid #EDBD5A;
    border-radius: 50%;
    background: #061725;
    color: #EDBD5A;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: baseline;
    flex: none;
}
.help-i:hover,
.help-i:focus-visible {
    background: #EDBD5A;
    color: #061725;
    outline: 2px solid #E79642;
    outline-offset: 1px;
}

/* AI provider picker (v2.4.0, NAV-240) — sits beside the Audit /
   Fix-with-AI buttons and inside the run forms; same glass tokens as
   the other bare controls. */
.ai-provider-picker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.ai-provider-picker select {
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 0.94rem;
    background: var(--glass-input);
    color: var(--cream);
}
.ai-provider-picker select:focus {
    outline: 2px solid rgba(237, 189, 90, 0.65);
    outline-offset: 1px;
    border-color: var(--gold);
}

/* ---------------------------------------------------------------------
   v2.7.0 "All Niches": top-bar niche switcher + Niches hub
   ------------------------------------------------------------------- */
.topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 24px 0;
}
.niche-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}
.niche-switcher label {
    font-weight: 600;
    font-size: 0.85rem;
}
.niche-switcher select {
    max-width: 280px;
}
.niche-switcher-hub {
    font-size: 0.85rem;
}
.niche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}
.niche-card h3 {
    margin-top: 0;
}
.niche-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.niche-family-title {
    margin-top: 28px;
}
.niche-upgrade-card {
    border: 2px solid #b98a1c;
    background: #fffaf0;
}
.niche-price-line {
    font-size: 1.15rem;
}
.niche-check-list li {
    margin-bottom: 6px;
}
.detective-state {
    margin: 4px 0;
}

/* v2.7.1 — Agency Kit preview + Client CRM board (dark glass theme:
   text inherits --ink cream; surfaces use the app's glass tints so
   body text stays ≥ 4.5:1 — see the v2.7.1 contrast gate). */
.kit-preview {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.92rem;
    line-height: 1.55;
    background: var(--glass-strong);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    max-height: 34rem;
    overflow: auto;
}

.crm-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    align-items: start;
}

.crm-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.7rem;
    background: var(--glass-soft);
    color: var(--ink);
}

.crm-card h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.crm-card form {
    display: flex;
    gap: 0.45rem;
    align-items: end;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}