/* style.css — all styling lives here, never inline. Colours and text sizes are
   defined once in :root, so restyling the whole panel is a one-place edit.

   Brand: WEBBOS — web design & development studio.
   Black + orange accent on warm white, restrained and precise. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root {
    /* colors — WEBBOS brand */
    --color-bg:             #faf9f8; /* warm white page background — deliberately a shade off pure
                                         white (unlike the marketing site's flat #fff) so cards/panels
                                         still read as "lifted" against it; --color-surface below is
                                         the exact marketing-site white */
    --color-text:           #171512; /* near-black — exact match to the marketing site's --ink */
    --color-muted:          #6f6a63; /* warm slate — exact match to the marketing site's --muted */
    --color-faint:          #756b64; /* lighter warm slate — placeholders, faint text.
                                        Not lighter than this: #afa69d measured 2.40:1 on white,
                                        so every use of it failed WCAG AA. */
    --color-accent:         #ff5a1f; /* orange — exact match to the marketing site's --orange */
    --color-accent-soft:    #e04510; /* deeper orange — exact match to the marketing site's --orange-dark */
    --color-warning-text:   #8a6b06; /* the amber AS TEXT. #a37f08 measured 3.47:1 on its own
                                        pale badge ground. */
    --color-success-text:   #137a45; /* the success green AS TEXT. #16884d measured 4.10:1
                                        on its own pale badge ground — just short of AA. */
    --color-accent-text:    #a23e14; /* the accent AS TEXT. #ff5a1f measured 3.12:1 on white and
                                        2.82:1 on the pale tints, so it never passed as text. This
                                        value was already in the file, used by hover states only. */
    --color-border:         #e8e3db; /* exact match to the marketing site's --border */
    --color-line:           #f2f0ef; /* hairline dividers, lighter than border */
    --color-surface:        #ffffff; /* cards/panels — exact match to the marketing site's --white */
    --color-surface-border: #e8e3db;
    --color-success-bg:     #ecfdf5;
    --color-success-border: #10b981;
    --color-error-bg:       #fef2f2;
    --color-error-border:   #dc2626;
    --color-tag-bg:         #eae8e6;
    --color-badge-bg:       #fef4f0;
    --color-accent-fill:    #d1400c; /* the accent as a FILLED button ground. White on #ff5a1f is
                                        3.12:1 and fails AA; this is the smallest darkening that
                                        carries white text (4.72:1) while still reading as the
                                        brand orange rather than brick. #ff5a1f is untouched and
                                        still the accent everywhere it is not behind white text. */
    --color-on-accent:      #ffffff; /* text ON --color-accent-fill. Ink on the undarkened orange
                                        also passed (5.84:1) and was tried first, but it read as a
                                        disabled or warning control rather than a primary action —
                                        the icon almost disappeared. Rejected on sight, 2026-08-27. */

    /* text */
    --font-base:    'Inter', system-ui, sans-serif;       /* body / UI */
    --font-display: 'Space Grotesk', var(--font-base);    /* headings, logo, big numbers */
    --font-mono:    ui-monospace, "Courier New", monospace;
    --text-h1:    1.4rem;
    --text-h2:    1.05rem;
    --text-sm:    0.9rem;
    --text-xs:    0.75rem;

    /* motion — same strong, intentional curves as the marketing site
       (see webbos-site/assets/css/style.css): ease-out for entries/UI
       feedback, ease-in-out for on-screen movement. CSS's built-in eases
       read as weak/sluggish by comparison. */
    --ease:         cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
    --radius-pill:  999px;

    /* portal palette, hoisted from .portal-body (which redefines the same
       values) so the portal-analytics-* components shared with admin pages
       — the Google Ads report — keep their colors outside the portal. */
    --portal-navy:  #22201f;
    --portal-blue:  #f66223;
    --portal-ink:   #232120;
    --portal-muted: #928679;
    --portal-line:  #f0e7e3;
}

html, body {
    min-height: 100%;
    margin: 0;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--text-h1); }
.edit-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-top: 0;
    margin-left: .3rem;
    border: 0;
    background: none;
    color: var(--color-muted);
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
}
.edit-icon-btn:hover { background: var(--color-line); color: var(--color-text); }

h2 {
    font-size: var(--text-h2);
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
}
/* The rule above is a section separator for headings in document flow. An h2
   that OPENS a container is not separating anything from anything, and the
   border renders at the h2's own text width rather than the container's --
   a rule that stops a third of the way across the card. Seen on
   /account/security, where the h2 measured 413px inside a 1238px panel. */
h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.muted  { color: var(--color-muted); font-size: var(--text-sm); }
.empty  { color: var(--color-faint); }

.backlink { color: var(--color-accent); text-decoration: none; font-size: var(--text-sm); }
.backlink:hover { text-decoration: underline; }

/* messages */
.flash {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    padding: .6rem .8rem;
    border-radius: 6px;
}
.error {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    padding: .6rem .8rem;
    border-radius: 6px;
}

/* forms */
label {
    display: block;
    margin: .7rem 0 .2rem;
    font-size: var(--text-sm);
}
input, select, textarea {
    padding: .45rem;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
}
textarea { resize: vertical; }
button, a.btn, label.btn {
    display: inline-block;
    /* A full-width button on a phone sets width:100% and then adds its own
       horizontal padding on top, overflowing the viewport under content-box. */
    box-sizing: border-box;
    margin-top: 1rem;
    padding: .5rem 1.1rem;
    background: var(--color-accent-fill);
    color: var(--color-on-accent);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    transition: transform 160ms var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
button:active, a.btn:active, label.btn:active { transform: scale(0.97); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) {
    button:hover, a.btn:hover, label.btn:hover { background: var(--color-text); color: var(--color-surface); box-shadow: 0 10px 20px -10px rgba(255, 203, 31, .4); }
}

/* A form button that reads as a text link: Log out is a POST (see
   public/logout.php), but it should look like the link it replaced. */
.inline-form { display: inline; margin: 0; }
.link-button,
.link-button:hover,
.link-button:active {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    transform: none;
    cursor: pointer;
}

/* the {{token}} hint next to a field label */
.token {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
}

/* top navigation (shown on every logged-in page via src/nav.php) */
.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding-bottom: .8rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--text-sm);
}
.topnav-left, .topnav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.topnav a { color: var(--color-accent); text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
.topnav .brand { font-weight: 700; color: var(--color-text); }
.topnav .brand:hover { text-decoration: none; }

/* small grey hint text next to a label, e.g. "(9 digits)" */
.hint {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--color-faint);
}

/* section heading inside a long form (Company / Contact person / Address) */
h2.form-section {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    border-top: 1px solid var(--color-surface-border);
    margin-top: 1.2rem;
    padding-top: 1rem;
}
form h2.form-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

.card-main { display: flex; flex-direction: column; gap: .1rem; }

.block-item-actions { display: flex; gap: .3rem; }
.block-item-actions form { margin: 0; background: none; border: 0; padding: 0; }

/* contact form field builder (submissions.php) — a real aligned grid,
   with each field's controls split across multiple <form>s (save vs.
   move vs. delete are separate POSTs) that still line up as one row via
   display:contents, so the form boundaries are invisible to the grid. */
.fields-table {
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.fields-table-row {
    display: grid;
    grid-template-columns: 1.6fr 110px 1.4fr 80px 110px 60px 34px 34px 70px;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
}
.fields-table-row:last-child { border-bottom: 0; }
.fields-table-header {
    background: var(--color-badge-bg);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .5rem .8rem;
}
.fields-table-row .field-row-form { display: contents; }
.fields-table-row input[type="text"],
.fields-table-row select {
    margin: 0;
    width: 100%;
}
.fields-table-row input[disabled] {
    background: var(--color-line);
    cursor: not-allowed;
}
.fields-table-required {
    display: flex;
    justify-content: center;
    margin: 0;
}
.fields-table-required input { width: auto; margin: 0; }
.fields-table-row .token { justify-self: start; }
.fields-table-row button { margin: 0; white-space: nowrap; }
.fields-table-add .btn-icon { display: none; } /* no reorder/delete on the add-row */

@media (max-width: 960px) {
    .fields-table-row {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .fields-table-header { display: none; }
    .fields-table-required { justify-content: flex-start; gap: .5rem; }
    .fields-table-required::after { content: "Required"; font-size: var(--text-sm); }
}

.btn-icon {
    margin: 0;
    padding: .2rem .55rem;
    background: var(--color-badge-bg);
    color: var(--color-text);
    border: 1px solid var(--color-surface-border);
    border-radius: 5px;
    cursor: pointer;
    font-size: var(--text-sm);
}
.btn-icon:hover { background: var(--color-line); }
/* Some .btn-icons are links rather than form buttons — a download has to be a
   real href for the browser to save it. Without this they sit a pixel or two
   off the buttons beside them and carry a link underline. */
a.btn-icon { display: inline-flex; align-items: center; text-decoration: none; }
.btn-icon:disabled { opacity: .35; cursor: default; }
.btn-icon.btn-danger { color: var(--color-error-border); }
.mono { font-family: var(--font-mono); font-size: .85rem; }

/* code editor (template-edit.php) */
.code-editor {
    font-family: var(--font-mono);
    font-size: .85rem;
    line-height: 1.5;
    resize: vertical;
    tab-size: 4;
}

/* apply-from-library / save-to-library row (template-edit.php) */
/* layouts.php: single "+" button below the file list, replacing the old
   two-big-cards setup. Click reveals a small menu with both actions —
   one-click "New layout", or type a name for "New file". */
.add-file-trigger {
    position: relative;
    margin-bottom: 1.5rem;
}
.btn-add-circle {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: 0;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-add-circle:hover { background: var(--color-accent-soft); }
.add-file-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(61, 51, 46, .18);
    padding: .5rem;
    min-width: 220px;
    z-index: 30;
}
.add-file-menu.open { display: block; }
.add-file-menu form { margin: 0; background: none; border: 0; padding: 0; }
.add-file-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .55rem .6rem;
    border-radius: 6px;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
}
.add-file-menu-item:hover { background: var(--color-line); }

/* layouts.php: Files list (left) + Publishing panel (right). Both columns
   share the same "plain heading/description, then a boxed area below" shape. */
.files-two-col {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
.revision-preview {
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    background: var(--color-surface);
    max-height: 60vh;
    overflow-y: auto;
}
/* The revision preview is an <iframe> so the saved markup cannot run in the
   panel's origin. An iframe has no intrinsic height and does not scroll its
   parent, so it takes the height the div's max-height used to cap. */
iframe.revision-preview { display: block; width: 100%; height: 60vh; padding: 0; background: #fff; }
.files-main-col {
    flex: 2;
    min-width: 0;
}
.files-side-col {
    flex: 1;
    min-width: 0;
}
.publish-box {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
    margin-top: 1rem;
    position: sticky;
    top: 1.5rem;
}
.publish-box p:first-child { margin-top: 0; }
/* The state line replaces a sentence that used to claim every save publishes
   itself. It leads the panel, so it carries the weight the claim used to. */
.publish-state { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1rem; }
.publish-state strong { font-size: .95rem; }
.publish-state span { color: var(--color-faint); font-size: .8rem; line-height: 1.45; }
.publish-state--changes strong { color: var(--color-accent-text); }
.publish-state--live strong { color: var(--color-success-text); }
.publish-state--failed strong { color: var(--color-error-border); }
.publish-box-secondary { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.publish-box-secondary small { display: block; margin-top: .25rem; color: var(--color-faint); }
.publish-box form { margin-top: 0; }
@media (max-width: 1000px) {
    .files-two-col { flex-direction: column; }
    .publish-box { position: static; }
}

/* checkbox rows (layout "is default" etc.) */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--text-sm);
    margin: .7rem 0;
}
.checkbox-label input { width: auto; }

/* inline layout picker on page-edit.php */
.layout-picker {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 1.2rem;
}

.live-preview-frame {
    width: 100%;
    height: 480px;
    border: 0;
    display: block;
    background: #fff;
}
.layout-picker label { margin: 0; }
.layout-picker select { width: auto; }
.layout-picker button { margin: 0; padding: .4rem .8rem; }

.CodeMirror {
    border: 1px solid var(--color-border);
    border-radius: 0 0 5px 5px;
    font-family: var(--font-mono);
    font-size: .9rem;
    min-height: 200px;
    height: auto;
}
#layout-tab-panels {
    border: 1px solid var(--color-surface-border);
    border-radius: 0 8px 8px 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
/* full-page single-file code editor (layout-edit.php, site-css-edit.php, etc.) */
html, body.editor-page {
    height: 100%;
    margin: 0;
}
body.editor-page {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0;
}
/* The form wraps the topbar/meta/editor so they all submit together, but it
   needs to be a REAL flex participant (not display:contents — that isn't
   reliably supported on <form> across browsers) so it can grow to fill
   the screen instead of shrinking to its content's height. */
.editor-page form.editor-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.2rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
    flex: 0 0 auto;
}
.editor-topbar-left {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}
.editor-topbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
}
.editor-topbar .backlink { white-space: nowrap; }
.editor-filename {
    font-family: var(--font-mono);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.editor-topbar button { margin: 0; }
.editor-meta-fields {
    padding: .8rem 1.2rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
    flex: 0 0 auto;
}
.editor-meta-fields label { margin-top: 0; }
.rename-row {
    display: flex;
    gap: .6rem;
    align-items: stretch;
}
.rename-row input { flex: 1 1 auto; }
.rename-row button { margin: 0; flex: 0 0 auto; }
.editor-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.editor-flash, .editor-error {
    margin: 0;
    padding: .5rem 1.2rem;
    font-size: var(--text-sm);
    flex: 0 0 auto;
}
.editor-flash { background: var(--color-success-bg); color: var(--color-text); }
.editor-error { background: var(--color-error-bg); color: var(--color-text); }

/* CodeMirror (replaces .code-editor textareas — see admin.js). Fills the
   remaining vertical space via flex-grow rather than a height percentage,
   which is the reliable way to make it fill a flex column. */
.editor-body .CodeMirror {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: .9rem;
}

/* The page-body editor (page-edit.php) sits inside a settings panel rather
   than filling the viewport, so it takes an explicit height and keeps its
   border — the flex-fill rule above only works in a full-height column. */
.page-editor-body-section .CodeMirror {
    height: 32rem;
    width: 100%;
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: .9rem;
}

/* Text/HTML switch for the page body (see admin.js). Only the active mode's
   editor is in the layout — the other is display:none, not merely invisible,
   so it cannot be tabbed into or scrolled to. */
.body-editor-modes {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .6rem;
}
.body-editor-mode {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid var(--color-surface-border);
    border-radius: 6px;
    background: transparent;
    /* The global `button` rule sets color:var(--color-on-accent) for solid
       accent buttons. This one is transparent, so it has to reclaim the
       text colour or it renders white on white. */
    color: var(--color-text);
    font-size: .85rem;
    cursor: pointer;
}
.body-editor-mode.is-active {
    background: var(--color-tag-bg);
    font-weight: 600;
}
.body-editor-hint {
    margin-left: auto;
    font-size: .8rem;
    opacity: .7;
}
/* The Text view is an iframe (page-body-frame.php) so the customer's own
   stylesheet cannot leak into the admin UI. Everything inside it — including
   the editable-region outlines — is styled by that document, not from here. */
.body-editor-visual {
    display: block;
    width: 100%;
    height: 32rem;
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    background: #fff;
}
.page-editor-body-section.is-mode-visual .CodeMirror,
.page-editor-body-section.is-mode-visual textarea.code-editor { display: none; }
.page-editor-body-section.is-mode-code .body-editor-visual { display: none; }

/* file browser rows (layouts.php, template-library-edit.php) */
.file-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    overflow: hidden;
    min-height: 4.5rem;
}
.file-list li.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    color: var(--color-muted);
    text-align: center;
    padding: 1rem;
}
.file-list li {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-line);
}
.file-list li:last-child { border-bottom: 0; }
.file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    flex: 1 1 auto;
    min-width: 0;
}
.file-row:hover { background: var(--color-line); }
.file-row-name {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: .92rem;
}
.file-row-icon { color: var(--color-muted); }
.file-row-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .8rem;
    background: var(--color-surface);
    flex: 0 0 auto;
}
.file-row-actions form { margin: 0; background: none; border: 0; padding: 0; }
/* Four controls on every row, permanently, is most of the noise in this list —
   and the right-click menu already offers every one of them. On a pointer they
   appear for the row you are actually on, and for keyboard focus. Guarded by
   hover:hover so a touch device, which cannot hover, keeps them visible. */
@media (hover: hover) {
    .file-list li .file-row-actions { opacity: 0; transition: opacity .12s ease; }
    .file-list li:hover .file-row-actions,
    .file-list li:focus-within .file-row-actions,
    .file-list li.selected .file-row-actions { opacity: 1; }
}
.file-list li[data-is-asset] { position: relative; }
.asset-alt-details summary { list-style: none; }
.asset-alt-details summary::-webkit-details-marker { display: none; }
.asset-alt-details[open] summary { background: var(--color-line); }
.asset-alt-form {
    position: absolute;
    top: 100%;
    right: .8rem;
    z-index: 5;
    display: flex;
    gap: .4rem;
    padding: .6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.asset-alt-form input[type="text"] { width: 220px; margin: 0; }

/* file-list selection (click a row, press Delete) + drag-and-drop upload */
.file-list[data-file-list] li[data-file-row] { cursor: default; outline: none; }
.file-list li[data-file-row].selected {
    background: rgba(247, 115, 58, 0.1);
    box-shadow: inset 3px 0 0 var(--color-accent);
}
.file-list li[data-file-row].selected .file-row { background: transparent; }
.file-list[data-dropzone] {
    transition: background 120ms ease, box-shadow 120ms ease;
}
.file-list[data-dropzone].drag-over {
    background: rgba(247, 115, 58, 0.1);
    box-shadow: inset 0 0 0 2px var(--color-accent);
}
.file-list li[data-folder-drop-target].drop-target-hover,
.breadcrumbs a[data-folder-drop-target].drop-target-hover {
    background: rgba(247, 115, 58, 0.16);
    box-shadow: inset 0 0 0 2px var(--color-accent);
}
.breadcrumbs {
    margin: 0 0 .8rem;
    font-size: .9rem;
    color: var(--color-muted);
}
.breadcrumbs a { color: var(--color-accent); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs a:last-child { color: var(--color-text); font-weight: 600; pointer-events: none; text-decoration: none; }
.add-file-menu-divider {
    height: 1px;
    background: var(--color-line);
    margin: .6rem 0;
}
.add-file-menu-upload-link {
    display: block;
    padding: .3rem .6rem;
    font-size: .85rem;
    color: var(--color-muted);
    text-decoration: underline;
    cursor: pointer;
}
.add-file-menu-upload-link:hover { color: var(--color-accent); }

.file-row-rename-input {
    font: inherit;
    font-family: var(--font-mono);
    font-size: .92rem;
    padding: .1rem .3rem;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    min-width: 12rem;
}

.file-list li[data-file-row].cut-pending {
    opacity: .45;
}

.file-context-menu {
    display: none;
    position: fixed;
    z-index: 200;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(61, 51, 46, .18);
    padding: .3rem;
}
.file-context-menu.open { display: block; }
.file-context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .5rem .6rem;
    border-radius: 6px;
    font: inherit;
    font-size: .9rem;
    color: var(--color-text);
    cursor: pointer;
}
.file-context-menu-item:hover { background: var(--color-line); }
.file-context-menu-item.danger { color: #b91c1c; }
.file-context-menu-item.danger:hover { background: #fee2e2; }

/* login page — logo top-left, "Log in" form centered in the rest of the page */
body.login-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    max-width: none;
    padding: 0;
    background: var(--color-bg);
}
.login-header {
    padding: 1.6rem 2rem;
    flex: 0 0 auto;
}
.login-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-box {
    width: 100%;
    max-width: 320px;
    padding: 0 1rem;
    text-align: center;
}
.login-box h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

/* show/hide password toggle (any page — admin.js data-password-toggle) */
.password-field {
    position: relative;
    display: flex;
    align-items: center;
}
.password-field input {
    flex: 1 1 auto;
    padding-right: 4.2rem;
}
.password-field .password-toggle {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: .3rem .6rem;
    background: none;
    border: 0;
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    width: auto;
}
.password-field .password-toggle:hover { text-decoration: underline; }

/* statistics dashboard (src/statistics-view.php) */

/* New SVG area chart (src/stats-chart.php) — replaces the plain CSS bars
   for the main trend line, used both site-wide and per-page. */
.stats-areachart {
    position: relative;
    margin-bottom: 2rem;
}
.stats-areachart-svg {
    display: block;
    width: 100%;
    height: 220px;
}
/* The value axis. The SVG stretches (preserveAspectRatio="none"), so text put
   inside it would stretch with it — the numbers are HTML laid over the plot,
   and only the gridlines are drawn in the SVG. Both are positioned from the
   bottom of the same box, so they line up without either knowing the other's
   measurements. */
.stats-areachart-plot {
    position: relative;
    padding-left: 46px;
}
.stats-areachart-yaxis {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 46px;
}
.stats-areachart-yaxis span {
    position: absolute;
    right: 10px;
    transform: translateY(50%);
    color: var(--color-faint);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
.stats-areachart-grid {
    stroke: var(--color-line);
    stroke-width: 1;
}
.stats-areachart-grid--base { stroke: var(--color-surface-border); }
/* The date axis starts where the plot starts, not where the chart does. */
.stats-areachart-labels { padding-left: 46px; }
.stats-areachart-dot {
    opacity: 0;
    transition: opacity .15s ease;
}
.stats-areachart [data-chart-point]:hover + .stats-areachart-dot,
.stats-areachart [data-chart-point]:hover ~ .stats-areachart-dot {
    opacity: 1;
}
.stats-areachart-labels {
    display: flex;
    justify-content: space-between;
    color: var(--color-muted);
    font-size: .8rem;
    margin-top: .4rem;
}
.stats-tooltip {
    position: absolute;
    transform: translate(-50%, -130%);
    background: var(--color-text);
    color: #fff;
    padding: .35rem .6rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Headline stat cards — the "X views, up/down Y%" row at the top,
   replacing a single plain paragraph with a small grid of cards. */
.stats-headline {
    display: flex;
    gap: 1rem;
    margin: .5rem 0 1.5rem;
    flex-wrap: wrap;
}
.stats-headline-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    padding: .9rem 1.2rem;
    min-width: 160px;
}
.stats-headline-card .stats-headline-value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    display: block;
}
.stats-headline-card .stats-headline-label {
    color: var(--color-muted);
    font-size: .85rem;
}

.stats-callout {
    display: inline-block;
    background: var(--color-badge-bg);
    border-radius: 8px;
    padding: .5rem .9rem;
    font-size: .9rem;
    margin-bottom: 1.2rem;
}

.stats-chart {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    height: 160px;
    padding: 0 .5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-line);
}
.stats-bar-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: .4rem;
    min-width: 0;
}
.stats-bar {
    width: 100%;
    max-width: 22px;
    background: var(--color-accent);
    border-radius: 3px 3px 0 0;
}
.stats-bar-label {
    font-size: .65rem;
    color: var(--color-faint);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.stats-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}
.stats-list { list-style: none; margin: 0; padding: 0; }
.stats-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--text-sm);
}
.stats-device-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
    font-size: var(--text-sm);
}
.stats-device-row span:first-child { flex: 0 0 60px; }
.stats-device-bar {
    flex: 1 1 auto;
    height: 8px;
    background: var(--color-line);
    border-radius: 4px;
    overflow: hidden;
}
.stats-device-bar div {
    height: 100%;
    background: var(--color-accent);
}

.stats-headline-card--live {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
}
.stats-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success-border);
    margin-right: .3rem;
    animation: stats-pulse 1.6s ease-in-out infinite;
}
@keyframes stats-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.stats-list--events li {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.stats-list--events li span:first-child {
    flex: 0 0 auto;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stats-event-bar {
    flex: 1 1 auto;
    height: 8px;
    background: var(--color-line);
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
.stats-event-bar div {
    height: 100%;
    background: var(--color-accent);
}

.stats-change {
    font-weight: 700;
    font-size: var(--text-sm);
    margin-left: .3rem;
}
.stats-change--up { color: var(--color-success-border); }
.stats-change--down { color: var(--color-error-border, #dc2626); }
.stats-change--flat { color: var(--color-muted); }

.stats-chart--small {
    height: 90px;
    gap: .15rem;
}
.stats-chart--small .stats-bar { max-width: 10px; }
.stats-chart--small .stats-bar-label {
    writing-mode: initial;
    transform: none;
    font-size: .6rem;
}

.stats-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-top: 1rem;
}
.stats-log-table th, .stats-log-table td {
    text-align: left;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--color-line);
}
.stats-log-table th { color: var(--color-muted); font-weight: 600; }
.stats-log-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
.stats-log-pagination .btn { margin-top: 0; }

.login-box form {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
}
.login-box input {
    margin-bottom: .8rem;
}
.login-box button { width: 100%; }
/* "Remember this device" on the 2FA step — a checkbox row, not a field. */
.login-box .login-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    cursor: pointer;
}
.login-box .login-remember input {
    width: auto;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------------------
   WEBBOS wordmark — the one signature element. Rendered as real type
   (Space Grotesk): "WEB" in ink, "BOS" always in the orange accent — same
   split used on the public marketing site. Used large on login, small in
   the dashboard header.
   --------------------------------------------------------------------- */
.brand-logo {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    line-height: 1;
}
.brand-logo--lg { font-size: 2.1rem; }
.brand-logo--sm { font-size: 1.15rem; }
.brand-logo-web { color: var(--color-text); }
.brand-logo-bos { color: var(--color-accent); }
.brand-logo-link { text-decoration: none; display: inline-flex; }
.brand-tagline {
    display: block;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-muted);
    letter-spacing: 0;
    margin-top: .35rem;
}

/* dashboard header (index.php) — hamburger + customer search, per wireframe */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
    position: relative;
}

.top-app-menu {
    background: var(--color-text);
    padding: .8rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.4rem;
    color: var(--color-bg);
    position: relative;
}

.top-app-menu a, .top-app-menu .muted {
    color: var(--color-bg);
}

.top-app-menu-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.top-app-menu .brand-logo-web { color: var(--color-bg); }

.app-search { flex: 0 0 auto; margin: 0; }
.app-search input {
    width: 260px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}
.app-search input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(247, 115, 58, .15);
}


.app-body {
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    /* width:100% plus the horizontal padding a media query adds below
       resolved to 422px inside a 390px viewport under the default
       content-box, which is what put a horizontal scrollbar on almost every
       admin screen on a phone. */
    box-sizing: border-box;
}

/* topbar kept for any page not yet migrated to .topnav */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: 1rem;
}
.topbar a { color: var(--color-accent); }

/* customer cards (list) */
.cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
}
.card {
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.card-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: .8rem 1rem;
    text-decoration: none;
    color: var(--color-text);
}
.card-link:hover { background: var(--color-line); border-radius: 8px; }
.card-title { font-weight: 600; }
.badge {
    align-self: flex-start;
    margin-top: .3rem;
    font-size: var(--text-xs);
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--color-badge-bg);
    color: var(--color-muted);
}

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left;
    padding: .5rem;
    border-bottom: 1px solid var(--color-line);
    font-size: .92rem;
}
.tag {
    font-size: var(--text-xs);
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--color-tag-bg);
}

.onboarding-pages-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem;
}
.onboarding-pages-preview .tag {
    font-size: var(--text-sm);
    padding: .3rem .8rem;
}

/* new-customer wizard stepper (customer-new.php / discovery / template) */
.wizard-steps {
    display: flex;
    flex-wrap: wrap; /* three steps do not fit a phone in one row */
    align-items: center;
    gap: .5rem;
    margin: 0 0 2rem;
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--color-faint);
    font-size: var(--text-sm);
}
.wizard-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    color: var(--color-faint);
    background: var(--color-surface);
    flex: 0 0 auto;
}
.wizard-step--active { color: var(--color-text); font-weight: 600; }
.wizard-step--active .wizard-step-num {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}
.wizard-step--done { color: var(--color-muted); }
.wizard-step--done .wizard-step-num {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: #047857; /* the border green is 2.4:1 as text; this is 5.5:1 */
}
a.wizard-step:hover { color: var(--color-accent); }
.wizard-step-sep {
    width: 28px;
    height: 1px;
    background: var(--color-border);
    flex: 0 0 auto;
}

/* selectable template cards (customer-template.php) */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px);
    gap: 1.25rem;
    margin: 1rem 0 1.5rem;
}
.template-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 0 0 1rem;
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    background: var(--color-surface);
    cursor: pointer;
    overflow: hidden;
}
.template-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.template-card:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-badge-bg);
}
.template-card-title { font-family: var(--font-display); font-weight: 700; padding: 0 1rem; }
.template-card .muted { padding: 0 1rem; }
.template-card-fullview {
    margin: .2rem 1rem 0;
    font-size: var(--text-xs);
    color: var(--color-accent-text);
    text-decoration: none;
}
.template-card-fullview:hover { text-decoration: underline; }

/* small thumbnail variant used inside the selectable template-card (wizard
   Step 3) — same live-iframe trick as the library grid, just smaller.
   Compound selectors (.template-thumb.template-thumb--small) so this wins
   regardless of where .template-thumb's own base rule sits in the file. */
.template-thumb.template-thumb--small {
    width: 220px;
    height: 140px;
    margin-bottom: .6rem;
}
.template-thumb.template-thumb--small iframe {
    width: 1100px;
    height: 700px;
    transform: scale(0.2);
}
.template-thumb {
    position: relative;
    display: block;
    width: 260px;
    height: 165px;
    overflow: hidden;
    background: var(--color-line);
    border-bottom: 1px solid var(--color-surface-border);
}
.template-thumb iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1300px;
    height: 825px;
    border: 0;
    transform: scale(0.2);
    transform-origin: top left;
    pointer-events: none; /* it's a thumbnail — click the card, not the page inside it */
}
.footer {
    margin-top: auto;
    padding: 1rem;
    text-align: center;
    color: var(--color-muted);
    border-top: 1px solid var(--color-line);
}

/* customer overview — three columns side by side (company info / extra
   info / sites), instead of one long vertical scroll */
.customer-columns {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    align-items: start;
}
/* 2-column field layout for long forms (e.g. Company & contact) — each
   label+input pair goes in a .field wrapper, and pairs flow 2-per-row. */
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.2rem;
}
.field-grid .field label { margin-top: .7rem; }
.field-grid .field:first-child label,
.field-grid .field:nth-child(2) label {
    margin-top: 0;
}

/* generic modal (extra info, etc.) — see admin.js */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(61, 51, 46, .45);
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: var(--color-surface);
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 460px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-box--wide { max-width: 640px; }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.modal-header h2 { margin: 0; padding: 0; border: 0; font-size: var(--text-h2); }
.modal-close {
    background: none;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-muted);
    margin: 0;
    padding: 0;
}
.form-actions {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.form-actions button { margin-top: 1rem; }
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* A destructive action that carries a LABEL rather than an icon.
   .team-remove-action is the icon-only version — fixed 32x32 with no padding
   — and it was being reused for "Disable two-factor authentication", whose
   label cannot fit a 32px box. The text simply overflowed and wrapped in red
   beside the button, which is what it looked like: broken, not dangerous. */
.btn-danger-quiet {
    background: var(--color-surface);
    color: #b03434;
    border: 1px solid #f0d9d9;
}
.btn-danger-quiet:hover { background: #fff4f4; border-color: #e4bcbc; }

/* themed confirm dialog (replaces native confirm() — see admin.js) */
.confirm-box { max-width: 380px; text-align: center; }
.confirm-message {
    margin: .5rem 0 1.2rem;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
}
.confirm-actions { justify-content: center; }
.confirm-actions button { margin-top: 0; }
.confirm-ok {
    background: var(--color-error-border);
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: .5rem 1.2rem;
    cursor: pointer;
}
.confirm-ok:hover { opacity: .9; }

/* upload name-conflict prompt (replace / rename / skip — see admin.js) */
.upload-conflict-box { max-width: 420px; }
.upload-conflict-message {
    margin: 0 0 1rem;
    color: var(--color-text);
    font-size: .95rem;
    line-height: 1.5;
}
.upload-conflict-label {
    display: block;
    margin: 0 0 1rem;
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.upload-conflict-input {
    display: block;
    width: 100%;
    margin-top: .35rem;
    box-sizing: border-box;
}
.upload-conflict-actions { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.upload-conflict-actions button { margin-top: 0; }
.upload-conflict-skip { background: transparent; color: var(--color-muted); border: 1px solid transparent; }
.upload-conflict-skip:hover { color: var(--color-text); }
.customer-col > h2:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

/* site backoffice — persistent sidebar (Pages / Statistics / Ads / Backoffice).
   Deliberately NOT inside .app-body — that's centered with a max-width, which
   is exactly why the sidebar used to float in the middle of the screen
   instead of sitting flush against the left edge. */
.site-shell {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: calc(100vh - 4.5rem); /* accounts for the footer below it */
}
.site-sidebar {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1.3rem;
    border-right: 1px solid var(--color-surface-border);
    background: var(--color-surface);
}
.site-sidebar-client {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}
.site-live-link {
    font-size: var(--text-xs);
    color: var(--color-accent-text);
    text-decoration: none;
    margin-top: .1rem;
}
.site-live-link:hover { text-decoration: underline; }
.site-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--color-text);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}
.site-client-name {
    font-weight: 600;
    font-family: var(--font-display);
}
.site-nav {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    border-top: 1px solid var(--color-line);
    padding-top: 1rem;
}
.site-nav a {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .6rem;
    border-radius: 6px;
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--color-text);
}
.site-nav a:hover { background: var(--color-line); }
.site-nav a.active { background: var(--color-badge-bg); color: var(--color-accent-text); font-weight: 600; }
.site-nav-sub {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0 0 .3rem .8rem;
    padding-left: .6rem;
    border-left: 2px solid var(--color-line);
}
.site-nav-sub a {
    padding: .35rem .5rem;
    font-size: .85rem;
    color: var(--color-muted);
}
.site-nav-sub a.active { color: var(--color-accent-text); background: var(--color-badge-bg); font-weight: 600; }
.site-nav-label {
    margin-top: .6rem;
    padding: 0 .6rem;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-faint);
}
.site-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2rem 2rem 2rem 2.5rem;
}
.site-main-inner {
    max-width: auto;
}

/* rich-text editor (Quill — see admin.js / richtext-scripts.php) */
.ql-toolbar.ql-snow {
    border-color: var(--color-border);
    border-radius: 5px 5px 0 0;
    font-family: var(--font-base);
}
.ql-container.ql-snow {
    border-color: var(--color-border);
    border-radius: 0 0 5px 5px;
    font-family: var(--font-base);
    font-size: 1rem;
    min-height: 200px;
}

/* ---------------------------------------------------------------------
   Responsive / mobile. Two breakpoints: 720px (tablet — things start
   wrapping instead of overflowing) and 480px (phone — tighter spacing,
   smaller numbers, single-column everywhere).
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
    .live-preview-frame { height: 320px; }
    /* dark bar: hamburger + login info — let it wrap if the email is long */
    .top-app-menu { flex-wrap: wrap; gap: .6rem; padding: .7rem 1rem; }
    .top-app-menu-right { margin-left: 0; }

    /* light bar: logo + search — stack instead of squeezing side by side */
    .app-header { flex-wrap: wrap; gap: .7rem; padding: .8rem 1rem; }
    .app-search { width: 100%; }
    .app-search input { width: 100%; }

    .app-body { padding: 1.5rem 1rem; }

    .customer-columns { grid-template-columns: 1fr; gap: 0; }
    .field-grid { grid-template-columns: 1fr; }
    .field-grid .field label { margin-top: .7rem !important; }
    .customer-col:not(:first-child) > h2:first-child {
        border-top: 1px solid var(--color-line);
        margin-top: 2rem;
        padding-top: 1rem;
    }

    .site-shell { flex-direction: column; }
    .site-sidebar {
        flex: 1 1 auto;
        width: 100%;
        box-sizing: border-box;
        border-right: 0;
        border-bottom: 1px solid var(--color-surface-border);
    }
    .site-main { padding: 1.5rem 1rem; }

    /* full-page code editors: let the topbar wrap rather than clip the filename */
    .editor-topbar { flex-wrap: wrap; gap: .6rem; padding: .6rem .9rem; }
    .editor-topbar-left { flex-wrap: wrap; }
    .editor-meta-fields { padding: .7rem .9rem; }

    .layout-picker { flex-wrap: wrap; }
    .block-item-actions { flex-wrap: wrap; }

    /* tables (site lists, etc.) — scroll horizontally rather than squeeze */
    table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 480px) {
    .login-header { padding: 1rem 1.2rem; }
    .brand-logo--lg { font-size: 1.6rem; }
    .login-box { max-width: 100%; }

    .card-link { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .file-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* Tickets */
.ticket-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: capitalize;
}
.ticket-status-open { background: #fee2e2; color: #b91c1c; }
.ticket-status-in_progress { background: #fef1c7; color: #92730e; }
.ticket-status-resolved { background: #dcfce7; color: #15803d; }
.ticket-priority-high { background: #fee2e2; color: #b91c1c; }

.ticket-overdue-text { color: #b91c1c; font-weight: 600; }

.ticket-attachment {
    margin: .4rem 0 0;
    font-size: .9rem;
}
.ticket-attachment a { color: var(--color-accent); text-decoration: none; }
.ticket-attachment a:hover { text-decoration: underline; }

/* agenda.php week-grid calendar */
.agenda-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border-radius: 10px;
}
.agenda-grid {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(110px, 1fr));
    min-width: 820px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface);
}
.agenda-grid-corner {
    border-bottom: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
}
.agenda-day-header {
    text-align: center;
    padding: .6rem .3rem;
    border-bottom: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
}
.agenda-day-header--today { background: rgba(247, 115, 58, .08); }
.agenda-day-name {
    display: block;
    font-size: .72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.agenda-day-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
}
.agenda-hours {
    border-right: 1px solid var(--color-line);
}
.agenda-hour-label {
    font-size: .7rem;
    color: var(--color-muted);
    padding: 2px 8px 0 0;
    text-align: right;
    box-sizing: border-box;
}
.agenda-day-col {
    position: relative;
    border-right: 1px solid var(--color-line);
}
.agenda-day-col:last-child { border-right: none; }
.agenda-day-col--today { background: rgba(247, 115, 58, .04); }
.agenda-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-line);
}
.agenda-block {
    position: absolute;
    left: 3px;
    right: 3px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 6px;
    padding: .25rem .45rem;
    font-size: .74rem;
    line-height: 1.25;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(61, 51, 46, .15);
    z-index: 1;
}
.agenda-block:hover { filter: brightness(1.08); }
.agenda-block--pending {
    background: var(--color-surface);
    border: 2px dashed var(--color-accent);
    color: var(--color-text);
}
.agenda-block-time { font-weight: 700; }
.agenda-block-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-block-company { opacity: .85; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Customer portal ---------------------------------------------------------
   Fully scoped so the agency dashboard and back-office sidebar are unchanged. */
.portal-body {
    --portal-navy: #22201f;
    --portal-blue: #f66223;
    --portal-ink: #232120;
    --portal-muted: #928679;
    --portal-line: #f0e7e3;
    background: #fcf9f8;
    color: var(--portal-ink);
}
.portal-topbar {
    height: 74px;
    margin-left: 280px;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: var(--portal-ink);
    font-size: 1.2rem;
    cursor: pointer;
}
.portal-account {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
.portal-notification-menu {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
}
.portal-notification {
    position: relative;
    width: 44px;
    height: 48px;
    flex: 0 0 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-ink);
    line-height: 1;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
}
.portal-notification-icon {
    width: 20px;
    height: 20px;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.portal-notification:hover {
    background: #fbf6f4;
    color: var(--portal-blue);
}
.portal-notification[aria-expanded="true"] {
    background: #fef3ef;
    color: var(--portal-blue);
}
.portal-notification-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}
.portal-notification-badge[hidden] { display: none; }
.portal-notification-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: -8px;
    z-index: 50;
    width: min(370px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(53, 45, 41, .18);
}
.portal-notification-dropdown[hidden] { display: none; }
.portal-notification-header {
    min-height: 54px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--portal-line);
}
.portal-notification-header strong {
    color: var(--portal-ink);
    font-size: .88rem;
}
.portal-notification-header-actions {
    display: flex;
    align-items: center;
    gap: 11px;
}
.portal-notification-header button {
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--portal-blue);
    font: inherit;
    font-size: .68rem;
    font-weight: 600;
    cursor: pointer;
}
.portal-notification-header button:hover { text-decoration: underline; }
.portal-notification-header button[hidden] { display: none; }
.portal-notification-header .portal-notification-clear { color: var(--color-faint); }
.portal-notification-header .portal-notification-clear:hover { color: #c43f3f; }
.portal-notification-list {
    max-height: min(430px, calc(100vh - 100px));
    overflow-y: auto;
}
.portal-notification-list[hidden] { display: none; }
.portal-notification-entry {
    position: relative;
}
.portal-notification-item {
    min-height: 80px;
    padding: 13px 48px 13px 14px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #f6f0ed;
    color: var(--portal-ink);
    text-decoration: none;
    box-sizing: border-box;
}
.portal-notification-entry:last-child .portal-notification-item { border-bottom: 0; }
.portal-notification-item:hover { background: #fffaf7; }
.portal-notification-item.is-unread { background: #fff7f4; }
.portal-notification-item.is-unread:hover { background: #fef3ee; }
.portal-notification-dismiss {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-faint);
    font-size: .68rem;
    opacity: .55;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.portal-notification-entry:hover .portal-notification-dismiss,
.portal-notification-dismiss:focus-visible { opacity: 1; }
.portal-notification-dismiss:hover {
    background: #fff0f0;
    color: #c63f3f;
}
.portal-notification-dismiss:focus-visible {
    outline: 2px solid rgba(246, 98, 35, .28);
    outline-offset: 1px;
}
.portal-notification-item-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: .88rem;
}
.portal-notification-item-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-notification-item-icon--green { background: #e8f8ef; color: var(--color-success-text); }
.portal-notification-item-icon--amber { background: #fff6d9; color: #b98f05; }
.portal-notification-item-icon--red { background: #ffeded; color: #dc3d3d; }
.portal-notification-item-copy {
    min-width: 0;
    display: block;
}
.portal-notification-item-copy strong,
.portal-notification-item-copy span,
.portal-notification-item-copy time {
    display: block;
}
.portal-notification-item-copy strong {
    overflow: hidden;
    color: var(--portal-ink);
    font-size: .76rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-notification-item-copy span {
    margin-top: 3px;
    overflow: hidden;
    color: #85796c;
    font-size: .68rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-notification-item-copy time {
    margin-top: 4px;
    color: var(--color-faint);
    font-size: .62rem;
    line-height: 1.2;
}
.portal-notification-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}
.portal-notification-item.is-unread .portal-notification-unread-dot {
    background: var(--portal-blue);
}
.portal-notification-empty {
    min-height: 175px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-notification-empty[hidden] { display: none; }
.portal-notification-empty > i {
    margin-bottom: 13px;
    color: var(--color-faint);
    font-size: 1.4rem;
}
.portal-notification-empty strong {
    color: var(--portal-ink);
    font-size: .8rem;
}
.portal-notification-empty span {
    margin-top: 5px;
    color: var(--portal-muted);
    font-size: .68rem;
}

/* Customer-managed modules. All structural layouts use flexbox. */
.credential-once {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 14px 0 20px;
    padding: 14px 16px;
    border: 1px solid #fccfbc;
    border-radius: 10px;
    background: #fef3ef;
}
.credential-once .mono {
    min-width: 0;
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #f9d7c8;
    border-radius: 8px;
    background: #fff;
    color: #bb3e08;
    font-size: 18px;
    overflow-wrap: anywhere;
    user-select: all;
}
.credential-once small { color: #82776b; }
.portal-access-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    padding: 14px;
    border: 1px solid #eeded7;
    border-radius: 12px;
    background: #fcf8f7;
}
.portal-access-summary-icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #feefe9;
    color: #dd4f12;
}
.portal-access-summary > div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.portal-access-summary small,
.portal-access-details small {
    color: var(--color-faint);
}
.portal-access-summary.is-active {
    border-color: #bfe7d0;
    background: #f1fbf5;
}
.portal-access-summary.is-active .portal-access-summary-icon {
    background: #dcf6e7;
    color: #16824d;
}
.portal-access-summary.is-expired {
    border-color: #f0e1ae;
    background: #fffbef;
}
.portal-access-state {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff;
    color: #70665c;
    font-size: 12px;
    font-weight: 700;
}
.portal-access-details {
    display: flex;
    gap: 10px;
}
.portal-access-details > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid #efe4e0;
    border-radius: 10px;
}
.portal-access-details strong {
    overflow-wrap: anywhere;
}
.portal-access-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 15px 0;
}
.portal-access-actions,
.portal-access-disable {
    display: flex;
}
.portal-access-actions button {
    width: 100%;
}
.portal-access-disable {
    justify-content: center;
    margin-top: 10px;
}
.portal-access-disable button {
    border: 0;
    background: transparent;
    color: #a44242;
    font-size: 13px;
}
@media (max-width: 560px) {
    .portal-access-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .portal-access-details {
        flex-direction: column;
    }
}
.portal-module-page { max-width: 1180px; }
.portal-module-layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.portal-module-list,
.portal-module-editor,
.portal-media-upload,
.portal-media-list {
    border: 1px solid #eee1dc;
    border-radius: 14px;
    background: #fff;
}
.portal-module-list {
    display: flex;
    flex: 0 0 310px;
    flex-direction: column;
    overflow: hidden;
}
.portal-module-editor {
    flex: 1 1 620px;
    min-width: 0;
    padding: 24px;
}
.portal-inline-create {
    display: flex;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid #f2e9e5;
}
.portal-inline-create input { min-width: 0; margin: 0; }
.portal-inline-create button { flex: 0 0 auto; margin: 0; }
.portal-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.portal-module-row:last-child { border-bottom: 0; }
.portal-module-row:hover,
.portal-module-row.active { background: #fef3ef; color: var(--color-accent-text); }
.portal-module-row > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.portal-module-row small { color: var(--color-faint); }
.portal-module-row form { margin: 0; }
.portal-module-empty {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-faint);
    text-align: center;
}
.portal-module-empty > i { font-size: 34px; color: #e8b49d; }
.portal-form-pair,
.portal-module-actions,
.portal-schedule-form,
.portal-media-upload,
.portal-media-list,
.portal-media-card {
    display: flex;
}
.portal-form-pair { gap: 14px; }
.portal-form-pair > label { flex: 1 1 0; }
.portal-module-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f2e9e5;
}
.portal-module-actions form,
.portal-module-actions button { margin: 0; }
.portal-schedule-form { align-items: center; gap: 6px; }
.portal-schedule-form input { width: auto; margin: 0; }
.portal-media-upload {
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 20px;
    padding: 18px;
}
.portal-media-upload label { flex: 1 1 auto; margin: 0; }
.portal-media-upload input,
.portal-media-upload button { margin: 0; }
.portal-media-list {
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px;
}
.portal-media-card {
    flex: 1 1 240px;
    max-width: 340px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #f0e5e1;
    border-radius: 12px;
}
.portal-media-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: #faf5f3;
}
.portal-media-card > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 13px;
}
.portal-media-alt-form { display: flex; gap: 6px; margin: 0; }
.portal-media-alt-form input { flex: 1 1 auto; margin: 0; }
.portal-media-alt-form button { margin: 0; white-space: nowrap; }
@media (max-width: 900px) {
    .portal-module-layout { flex-direction: column; }
    .portal-module-list,
    .portal-module-editor { width: 100%; flex-basis: auto; }
}
@media (max-width: 620px) {
    .portal-form-pair,
    .portal-media-upload { flex-direction: column; }
    .portal-media-card { max-width: none; }
}

/* Website project dashboard — deliberately flexbox-only. */
.project-dashboard { max-width: 1240px; }
.project-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: var(--color-faint);
    font-size: .82rem;
}
.project-breadcrumb a { color: #a1512e; text-decoration: none; }
.project-breadcrumb i { font-size: .62rem; color: var(--color-faint); }
.project-dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}
.project-dashboard-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--color-accent-text);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.project-dashboard-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
}
.project-dashboard-title h1 { margin: 0; font-size: 2rem; letter-spacing: -.035em; }
.project-dashboard-title p { margin: 7px 0 0; color: var(--color-faint); }
.project-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}
.project-status > span { width: 7px; height: 7px; border-radius: 50%; }
.project-status--live { background: #e9f8ef; color: var(--color-success-text); }
.project-status--live > span { background: #23b768; box-shadow: 0 0 0 3px rgba(35,183,104,.13); }
.project-status--draft { background: #f4f3f1; color: var(--color-faint); }
.project-status--draft > span { background: #a49a90; }
.project-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}
.project-dashboard-actions form,
.project-dashboard-actions button,
.project-dashboard-actions .btn { margin: 0; }
.project-dashboard-actions .btn,
.project-dashboard-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
}
.project-summary {
    display: flex;
    align-items: stretch;
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.project-summary article {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 5px;
    padding: 19px 21px;
    border-right: 1px solid #f1eae7;
}
.project-summary article:last-child { border-right: 0; }
.project-summary span { color: var(--color-faint); font-size: .74rem; font-weight: 700; }
.project-summary strong { color: #2d2b2a; font-size: 1.45rem; line-height: 1.1; }
.project-summary small { overflow: hidden; color: var(--color-faint); text-overflow: ellipsis; white-space: nowrap; }
.project-summary .project-summary-date,
.project-summary .project-summary-domain { overflow: hidden; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.project-dashboard-columns { display: flex; align-items: flex-start; gap: 22px; }
.project-dashboard-primary { display: flex; min-width: 0; flex: 1 1 62%; flex-direction: column; gap: 22px; }
.project-dashboard-secondary { display: flex; min-width: 300px; flex: 0 1 38%; flex-direction: column; gap: 22px; }
.project-panel {
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.project-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 21px;
    border-bottom: 1px solid #f2e9e6;
}
.project-panel-heading h2 { margin: 0; color: #2d2b2a; font-size: .98rem; }
.project-panel-heading p { margin: 4px 0 0; color: var(--color-faint); font-size: .78rem; }
.project-manage-links,
.project-tool-links,
.project-publication-list { display: flex; flex-direction: column; }
.project-manage-links > a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 20px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.project-manage-links > a:last-child { border-bottom: 0; }
.project-manage-links > a:hover { background: #fffaf7; }
.project-manage-links > a > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.project-manage-links small,
.project-tool-links small { color: var(--color-faint); }
.project-manage-links > a > i { color: var(--color-faint); font-size: .72rem; }
.project-link-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.project-link-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.project-link-icon.is-violet { background: #fef2ed; color: #db7c53; }
.project-link-icon.is-amber { background: #fff7db; color: #b99009; }
.project-link-icon.is-green { background: #e8f8ef; color: #189f59; }
.project-module-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #dad6d2;
    box-shadow: none;
}
.project-module-toggle:hover { background: #cfcac5; }
.project-module-toggle span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(52, 44, 41, .2);
    transition: transform .16s ease;
}
.project-module-toggle.is-on { background: #f45f1f; }
.project-module-toggle.is-on span { transform: translateX(16px); }
.project-tool-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 19px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.project-tool-links a:last-child { border-bottom: 0; }
.project-tool-links a:hover { background: #fffaf7; }
.project-tool-links a > i { width: 24px; color: #e1632d; text-align: center; }
.project-tool-links a > span { display: flex; flex-direction: column; gap: 3px; }
.project-publication-list article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid #f5efed;
}
.project-publication-list article:last-child { border-bottom: 0; }
.project-publication-list article > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.project-publication-list small { color: var(--color-faint); }
.project-publication-icon {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.project-publication-icon.is-success { background: #e7f8ee; color: var(--color-success-text); }
.project-publication-icon.is-failed { background: #ffeded; color: #d94444; }
.project-empty { display: flex; min-height: 130px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--color-faint); }
.project-empty i { font-size: 1.5rem; color: #d9b7a8; }

@media (max-width: 1040px) {
    .project-dashboard-columns { flex-direction: column; }
    .project-dashboard-primary,
    .project-dashboard-secondary { width: 100%; min-width: 0; flex-basis: auto; }
}
@media (max-width: 760px) {
    .project-dashboard-heading { flex-direction: column; }
    .project-dashboard-actions { justify-content: flex-start; }
    .project-summary { flex-wrap: wrap; }
    .project-summary article { min-width: 42%; border-bottom: 1px solid #f1eae7; }
}
@media (max-width: 520px) {
    .project-summary { flex-direction: column; }
    .project-summary article { min-width: 0; border-right: 0; }
    .project-dashboard-actions,
    .project-dashboard-actions .btn,
    .project-dashboard-actions form,
    .project-dashboard-actions button { width: 100%; }
}
.portal-account-menu {
    position: relative;
    display: flex;
    align-items: center;
}
.portal-account-trigger {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-ink);
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
}
.portal-account-trigger:hover { background: #fbf6f4; }
.portal-account-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #353231;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}
.portal-account-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1;
}
.portal-account-copy strong,
.portal-account-copy small { display: block; }
.portal-account-copy strong { font-size: .84rem; line-height: 1.15; }
.portal-account-copy small {
    margin-top: 3px;
    color: var(--portal-muted);
    font-size: .72rem;
    line-height: 1.1;
}
.portal-account-chevron {
    margin: 0 .2rem 0 .15rem;
    display: grid;
    place-items: center;
    color: var(--portal-muted);
    font-size: .65rem;
    line-height: 1;
    transition: transform .18s ease;
}
.portal-account-trigger[aria-expanded="true"] .portal-account-chevron { transform: rotate(180deg); }
.portal-account-dropdown {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 40;
    min-width: 145px;
    padding: .4rem;
    border: 1px solid var(--portal-line);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(53, 45, 41, .16);
}
.portal-account-dropdown[hidden] { display: none; }
.portal-account-dropdown a,
.portal-account-dropdown .link-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    border-radius: 6px;
    color: var(--portal-ink);
    text-decoration: none;
    font-size: .78rem;
}
.portal-account-dropdown a:hover,
.portal-account-dropdown .link-button:hover { background: #fdf6f3; color: var(--portal-blue); }
.portal-account-dropdown form { margin: 0; }

/* Norsk / English — src/portal-language-ui.php. */
.portal-language-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0;
    font-size: .78rem;
    color: var(--portal-muted);
}
.portal-language-switch-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}
.portal-language-switch-options {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    background: #fff;
}
.portal-language-switch-options button {
    min-width: 0;
    margin: 0;
    padding: .3rem .7rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--portal-ink);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}
.portal-language-switch-options button:hover { color: var(--portal-blue); background: transparent; }
.portal-language-switch-options button.is-active,
.portal-language-switch-options button.is-active:hover {
    background: var(--portal-ink);
    color: #fff;
}
.portal-language-switch-options button:focus-visible {
    outline: 2px solid var(--portal-blue);
    outline-offset: 1px;
}
.portal-language-switch--menu {
    margin-top: .3rem;
    padding: .6rem .75rem .35rem;
    border-top: 1px solid var(--portal-line);
}
.portal-account-dropdown:has(.portal-language-switch--menu) { min-width: 230px; }
.portal-auth-form-panel { position: relative; }
.portal-language-switch--auth {
    position: absolute;
    top: 24px;
    right: 28px;
}
@media (max-width: 820px) {
    /* The form panel stacks under the brand panel here, with less top padding. */
    .portal-language-switch--auth { top: 12px; right: 20px; }
    .portal-language-switch--auth .portal-language-switch-label { display: none; }
}

.portal-body .site-shell {
    display: block;
    min-height: calc(100vh - 120px);
}
.portal-body .portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    height: 100vh;
    margin: 0;
    padding: 25px 16px 0;
    gap: 0;
    border: 0;
    background: #0a0a0a;
    color: #fff;
    box-sizing: border-box;
    z-index: 20;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.portal-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 2px 12px 17px;
}
.portal-brand-mark {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #312e2d;
    font-size: 1.05rem;
    font-weight: 700;
}
.portal-brand-copy strong,
.portal-brand-copy small { display: block; }
.portal-brand-copy strong { font-size: 1rem; }
.portal-brand-copy small { color: #ddc4b9; font-size: .78rem; margin-top: .2rem; }
.portal-site-link {
    margin: 0 -16px;
    padding: 7px 28px 24px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.portal-site-link a { color: #f88554; text-decoration: none; font-size: .87rem; }
.portal-site-link i { margin-left: .3rem; font-size: .72rem; }
.portal-body .portal-sidebar .site-nav {
    gap: .25rem;
    padding: 16px 0 20px;
    border: 0;
}
.portal-body .portal-sidebar .site-nav > a, .portal-body .portal-sidebar .portal-nav-group > a {
    min-height: 44px;
    padding: 0 15px;
    gap: .85rem;
    border-radius: 8px;
    color: #fff;
    box-sizing: border-box;
}
.portal-body .portal-sidebar .site-nav > a, .portal-body .portal-sidebar .portal-nav-group > a,
.portal-quick-list a,
.portal-help-card a,
.portal-appointment > a,
.portal-talk-row > a {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.portal-body .portal-sidebar .site-nav > a > i:first-child,
.portal-body .portal-sidebar .portal-nav-group > a > i:first-child {
    width: 18px;
    color: #fee6dc;
    text-align: center;
    font-size: 1rem;
}
.portal-body .portal-sidebar .site-nav > a:hover,
.portal-body .portal-sidebar .portal-nav-group > a:hover { background: rgba(255,255,255,.08); }
.portal-body .portal-sidebar .site-nav > a.active,
.portal-body .portal-sidebar .portal-nav-group > a.active {
    color: #fff;
    background: var(--color-accent);
    box-shadow: 0 8px 20px rgba(190, 63, 8, .3);
}
.portal-nav-chevron { margin-left: auto; font-size: .65rem !important; }

/* The foldable "Pages" row: the link keeps the whole row, and the chevron sits
   on top of its right edge as a real button. */
.portal-nav-group { position: relative; }
.portal-nav-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fee6dc;
    font-size: .65rem;
    cursor: pointer;
}
.portal-nav-fold:hover { color: #fff; }
.portal-nav-fold i { transition: transform .16s ease; }
.portal-nav-fold[aria-expanded="false"] i { transform: rotate(-90deg); }
/* .site-nav-sub is display:flex, which outranks the user agent's
   [hidden] { display: none } — without this the button reports itself folded
   and the list stays on screen. */
.site-nav-sub[hidden] { display: none !important; }
.portal-body .portal-sidebar .site-nav-sub {
    margin: 0 0 .5rem 26px;
    padding: 0 0 0 14px;
    border-left: 1px solid rgba(255,255,255,.22);
}
.portal-body .portal-sidebar .site-nav-sub a {
    position: relative;
    min-height: 36px;
    padding: 0 12px;
    color: #f8ebe6;
    background: transparent;
    border-radius: 7px;
    box-sizing: border-box;
    transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.portal-body .portal-sidebar .site-nav-sub a:hover {
    color: #fff;
    background: rgba(255,255,255,.075);
    transform: translateX(2px);
}
.portal-body .portal-sidebar .site-nav-sub a.active {
    color: #fff;
    background: rgba(247, 118, 62, .2);
    box-shadow: inset 0 0 0 1px rgba(250, 164, 127, .16);
    font-weight: 600;
}
.portal-body .portal-sidebar .site-nav-sub a.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -18px;
    width: 7px;
    height: 7px;
    border: 2px solid #2b2928;
    border-radius: 50%;
    background: #f89063;
    box-sizing: border-box;
    transform: translateY(-50%);
}
.portal-body .portal-sidebar .badge {
    margin-left: auto;
    padding: .2rem .55rem;
    border: 0;
    background: #71675c;
    color: #fff;
    font-size: .58rem;
    text-transform: uppercase;
}
.portal-sidebar-logout {
    margin: auto -16px 0;
    min-height: 72px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: .9rem;
    border-top: 1px solid rgba(255,255,255,.09);
    color: #fff;
    text-decoration: none;
}
.portal-sidebar-logout:hover { background: rgba(255,255,255,.06); }
/* The Log out form takes no box of its own, so its button sits in the
   sidebar's column exactly where the link did. */
.portal-sidebar-logout-form { display: contents; }
button.portal-sidebar-logout { width: auto; border-top: 1px solid rgba(255,255,255,.09); }

.portal-body .site-main {
    position: relative;
    min-height: calc(100vh - 120px);
    margin-left: 280px;
    padding: 0;
    background: #fcf9f8;
}
.portal-body .site-main > .site-main-inner {
    transition: opacity .16s ease, transform .16s ease;
}
.portal-body .site-main.is-loading {
    pointer-events: none;
}
.portal-body .site-main.is-loading > .site-main-inner {
    opacity: .52;
}
.portal-body .site-main.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 80;
    width: 32%;
    height: 3px;
    border-radius: 999px;
    background: var(--color-accent);
    animation: portal-main-loading .85s ease-in-out infinite;
}
.portal-body .site-main.is-entering > .site-main-inner {
    animation: portal-main-enter .18s ease-out both;
}
@keyframes portal-main-loading {
    from { transform: translateX(-100%); }
    to { transform: translateX(312%); }
}
@keyframes portal-main-enter {
    from { opacity: .35; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}
.portal-body .site-main-inner:not(.portal-dashboard) {
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 36px;
}
.portal-dashboard {
    width: min(1220px, calc(100% - 72px));
    margin: 0 auto;
    padding: 33px 0 36px;
}
.portal-welcome h1 { margin: 0 0 .45rem; font-size: 1.8rem; letter-spacing: -.035em; }
.portal-welcome p { margin: 0 0 1.65rem; color: var(--portal-muted); }
.portal-summary-grid {
    display: grid;
    grid-template-columns: 1.13fr 1.05fr 1fr;
    gap: 15px;
}
.portal-summary-card,
.portal-help-card,
.portal-panel {
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-summary-card {
    min-height: 144px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}
.portal-summary-icon {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 1.6rem;
}
.portal-summary-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-summary-icon--green { background: #eaf9f1; color: #1bbb64; }
.portal-card-label,
.portal-card-note { display: block; color: var(--portal-muted); font-size: .78rem; }
.portal-metric { display: flex; align-items: center; gap: .7rem; margin: .3rem 0; font-size: 2.45rem; font-weight: 700; line-height: 1; }
.portal-metric .stats-change { padding: .35rem .55rem; border-radius: 1rem; background: #e5f8ed; font-size: .68rem; }
.portal-status { display: inline-block; margin: .4rem 0; padding: .25rem .6rem; border-radius: 1rem; font-size: .7rem; font-weight: 600; }
.portal-status.is-live { color: #0aab58; background: #e5f8ed; }
.portal-status.is-offline { color: #9a7600; background: #fff3cd; }
.portal-help-card {
    position: relative;
    overflow: hidden;
    padding: 23px;
    border: 0;
    color: #fff;
    background: var(--color-accent);
}
.portal-help-card strong,
.portal-help-card span { display: block; position: relative; z-index: 1; }
.portal-help-card strong { font-size: .9rem; }
.portal-help-card span { margin: .55rem 0 .9rem; font-size: .75rem; }
.portal-help-card a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: .65rem 1rem;
    border-radius: 6px;
    background: #fff;
    color: #3d3937;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 600;
}
.portal-help-card a:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(36, 31, 29, .16); }
.portal-help-art { position: absolute; right: 8px; bottom: -16px; color: rgba(255,255,255,.16); font-size: 6.5rem; }
.portal-dashboard-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-top: 24px; }
.portal-panel { overflow: hidden; }
.portal-panel > h2 { margin: 0; padding: 25px 24px 17px; font-size: .93rem; }
.portal-panel > h2 i { width: 20px; margin-right: .45rem; color: var(--portal-blue); text-align: center; }
.portal-appointment {
    margin: 0 23px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #fde2d6;
    border-radius: 10px;
    background: #fef5f2;
}
.portal-appointment--empty {
    min-height: 70px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    box-sizing: border-box;
}
.portal-row-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #feebe3;
    color: #f55c1b;
    line-height: 1;
}
.portal-row-icon i { display: block; line-height: 1; }
.portal-appointment > div { flex: 1; }
.portal-appointment--empty > div {
    min-width: 0;
    align-self: center;
}
.portal-appointment > div > strong,
.portal-appointment > div > span { display: block; }
.portal-appointment > div > strong { color: #b64717; font-size: .78rem; }
.portal-appointment > div > span { margin-top: .3rem; color: var(--portal-muted); font-size: .7rem; }
.portal-appointment > a,
.portal-talk-row > a {
    padding: .55rem .85rem;
    border: 1px solid #e5dad6;
    border-radius: 7px;
    background: #fff;
    color: var(--portal-ink);
    text-decoration: none;
    font-size: .7rem;
    font-weight: 600;
}
.portal-appointment > a:hover { border-color: var(--portal-blue); color: var(--portal-blue); }
.portal-appointment--empty > a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: end;
    line-height: 1;
    box-sizing: border-box;
}
.portal-empty-message {
    min-height: 106px;
    margin: 0 23px 28px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px dashed #e7ddd9;
    border-radius: 9px;
    box-sizing: border-box;
}
.portal-empty-message strong,
.portal-empty-message span { display: block; }
.portal-empty-message strong { font-size: .84rem; }
.portal-empty-message span { margin-top: .35rem; color: var(--portal-muted); font-size: .72rem; line-height: 1.45; }
.portal-empty-message > i { color: var(--color-faint); font-size: 3.25rem; }
.portal-message-list { margin: 0 23px 25px; border: 1px solid var(--portal-line); border-radius: 9px; overflow: hidden; }
.portal-message-list a { padding: .7rem 1rem; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: .75rem; border-bottom: 1px solid var(--portal-line); color: var(--portal-ink); text-decoration: none; }
.portal-message-list a:last-child { border-bottom: 0; }
.portal-message-list strong,.portal-message-list small { display: block; }
.portal-message-list strong { font-size: .78rem; }.portal-message-list small { margin-top: .2rem; color: var(--portal-muted); }
.portal-talk-row { min-height: 105px; padding: 21px 25px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--portal-line); box-sizing: border-box; }
.portal-talk-row > i { color: var(--portal-blue); font-size: 1.25rem; }
.portal-talk-row > div { flex: 1; }
.portal-talk-row strong,.portal-talk-row span { display: block; }
.portal-talk-row strong { font-size: .87rem; }.portal-talk-row span { margin-top: .3rem; color: var(--portal-muted); font-size: .7rem; }
.portal-talk-row > a { border-color: var(--portal-blue); color: var(--portal-blue); }
.portal-talk-row > a:hover { background: var(--portal-blue); color: #fff; }
.portal-quick-list { margin: 0 22px 23px; border: 1px solid var(--portal-line); border-radius: 9px; overflow: hidden; }
.portal-quick-list a { min-height: 66px; padding: 0 16px; display: grid; grid-template-columns: 29px 1fr 12px; align-items: center; border-bottom: 1px solid var(--portal-line); color: var(--portal-ink); text-decoration: none; box-sizing: border-box; }
.portal-quick-list a:last-child { border-bottom: 0; }
.portal-quick-list a:hover { background: #fffaf7; }
.portal-quick-list a > i:first-child { color: var(--portal-blue); }
.portal-quick-list a > i:last-child { color: var(--portal-muted); font-size: .7rem; }
.portal-quick-list strong,.portal-quick-list small { display: block; }
.portal-quick-list strong { font-size: .78rem; }.portal-quick-list small { margin-top: .25rem; color: var(--portal-muted); font-size: .67rem; }
.portal-blog-note { margin: -8px 24px 20px; color: var(--portal-muted); font-size: .7rem; }
.portal-footer { margin-left: 280px; padding: 17px; border-top: 1px solid var(--portal-line); background: #fff; text-align: center; color: var(--color-faint); font-size: .7rem; }

@media (max-width: 1120px) {
    .portal-summary-grid { grid-template-columns: 1fr 1fr; }
    .portal-help-card { grid-column: 1 / -1; min-height: 135px; }
    .portal-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .portal-topbar { height: 66px; margin-left: 0; padding: 0 20px; justify-content: space-between; }
    .portal-menu-toggle { display: block; }
    .portal-body .site-shell { flex-direction: row; }
    .portal-body .portal-sidebar {
        width: 280px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 14px 0 35px rgba(20, 17, 16, .24);
    }
    .portal-menu-open .portal-sidebar { transform: none; }
    .portal-menu-open::after { content: ""; position: fixed; inset: 0; z-index: 15; background: rgba(21, 18, 16, .42); }
    .portal-body .site-main { width: 100%; margin-left: 0; }
    .portal-dashboard { width: calc(100% - 32px); padding-top: 25px; }
    .portal-body .site-main-inner:not(.portal-dashboard) { padding: 25px 16px; }
    .portal-footer { margin-left: 0; }
}
@media (max-width: 540px) {
    .portal-account-copy { display: none; }
    .portal-notification { margin: 0; }
    .portal-notification-dropdown {
        position: fixed;
        top: 66px;
        right: 12px;
        width: calc(100vw - 24px);
    }
    .portal-welcome h1 { font-size: 1.5rem; }
    .portal-summary-grid { grid-template-columns: 1fr; }
    .portal-help-card { grid-column: auto; }
    .portal-summary-card { padding: 20px; }
    .portal-summary-icon { flex-basis: 58px; width: 58px; height: 58px; }
    .portal-appointment { align-items: flex-start; flex-wrap: wrap; }
    .portal-appointment > a { margin-left: 56px; }
    .portal-appointment--empty {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
    }
    .portal-appointment--empty > a {
        grid-column: 2;
        margin-left: 0;
        justify-self: start;
    }
    .portal-empty-message > i { display: none; }
    .portal-talk-row { align-items: flex-start; flex-wrap: wrap; }
    .portal-talk-row > a { margin-left: 34px; }
}

/* Portal submissions --------------------------------------------------- */
.portal-submissions-page {
    max-width: 1120px !important;
    padding-top: 34px !important;
    padding-bottom: 52px !important;
}
.portal-section-heading {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.portal-section-kicker {
    margin-bottom: 7px;
    display: block;
    color: var(--portal-blue);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.portal-section-heading h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 1.75rem;
    letter-spacing: -.035em;
}
.portal-section-heading p {
    margin: 7px 0 0;
    color: var(--portal-muted);
    font-size: .83rem;
}
.portal-submission-summary {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}
.portal-submission-stat {
    min-height: 126px;
    padding: 21px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
    box-sizing: border-box;
}
.portal-submission-stat-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.1rem;
}
.portal-submission-stat-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-submission-stat-icon--green { background: #e9f8f0; color: var(--color-success-text); }
.portal-submission-stat-icon--violet { background: #fef3ee; color: #dc7c53; }
.portal-submission-stat > div > span,
.portal-submission-stat > div > strong,
.portal-submission-stat > div > small { display: block; }
.portal-submission-stat > div > span {
    color: var(--portal-muted);
    font-size: .7rem;
    font-weight: 600;
}
.portal-submission-stat > div > strong {
    margin-top: 4px;
    color: var(--portal-ink);
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -.03em;
}
.portal-submission-stat > div > strong.portal-submission-stat-date {
    font-size: 1.25rem;
}
.portal-submission-stat > div > small {
    margin-top: 6px;
    color: var(--color-faint);
    font-size: .64rem;
}
.portal-submissions-panel {
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-submissions-panel-heading {
    min-height: 78px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-submissions-panel-heading h2 {
    margin: 0;
    color: var(--portal-ink);
    font-size: .95rem;
}
.portal-submissions-panel-heading p {
    margin: 5px 0 0;
    color: var(--portal-muted);
    font-size: .68rem;
}
.portal-submissions-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: #fef3ef;
    color: #c14e1d;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-submissions-empty {
    min-height: 310px;
    padding: 42px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-submissions-empty-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fef3ee;
    color: var(--portal-blue);
    font-size: 1.55rem;
}
.portal-submissions-empty h3 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 1rem;
}
.portal-submissions-empty p {
    max-width: 420px;
    margin: 9px 0 0;
    color: var(--portal-muted);
    font-size: .75rem;
    line-height: 1.55;
}
.portal-submissions-list {
    background: #fff;
}
.portal-submission-item {
    border-bottom: 1px solid var(--portal-line);
}
.portal-submission-item:last-child { border-bottom: 0; }
.portal-submission-item > summary {
    min-height: 86px;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 15px;
    list-style: none;
    cursor: pointer;
    box-sizing: border-box;
}
.portal-submission-item > summary::-webkit-details-marker { display: none; }
.portal-submission-item > summary:hover { background: #fffaf8; }
.portal-submission-item.is-unread > summary { background: #fff7f4; }
.portal-submission-item.is-unread > summary:hover { background: #fef3ef; }
.portal-submission-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fef1eb;
    color: var(--portal-blue);
}
.portal-submission-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    display: none;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--portal-blue);
}
.portal-submission-item.is-unread .portal-submission-unread-dot { display: block; }
.portal-submission-preview {
    min-width: 0;
}
.portal-submission-sender {
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-submission-sender strong {
    overflow: hidden;
    color: var(--portal-ink);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-submission-new {
    padding: 3px 6px;
    border-radius: 999px;
    background: #fee9e0;
    color: #cf4f19;
    font-size: .55rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}
.portal-submission-new[hidden] { display: none; }
.portal-submission-preview > span:last-child {
    margin-top: 6px;
    display: block;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: .69rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-submission-meta {
    min-width: 82px;
    text-align: right;
}
.portal-submission-meta time,
.portal-submission-meta small {
    display: block;
}
.portal-submission-meta time {
    color: #696662;
    font-size: .67rem;
    font-weight: 600;
}
.portal-submission-meta small {
    margin-top: 5px;
    color: var(--color-faint);
    font-size: .61rem;
}
.portal-submission-chevron {
    color: var(--color-faint);
    font-size: .62rem;
    transition: transform .18s ease;
}
.portal-submission-item[open] .portal-submission-chevron { transform: rotate(180deg); }
.portal-submission-detail {
    padding: 4px 20px 24px 79px;
    background: #fefcfb;
}
.portal-submission-detail-heading {
    padding: 17px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--portal-line);
}
.portal-submission-detail-heading span,
.portal-submission-detail-heading strong { display: block; }
.portal-submission-detail-heading span {
    color: var(--portal-muted);
    font-size: .62rem;
}
.portal-submission-detail-heading strong {
    margin-top: 4px;
    color: var(--portal-ink);
    font-size: .7rem;
}
.portal-submission-detail-heading a {
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #f2d9ce;
    border-radius: 7px;
    background: #fff;
    color: var(--portal-blue);
    text-decoration: none;
    font-size: .66rem;
    font-weight: 600;
}
.portal-submission-detail-heading a:hover {
    border-color: var(--portal-blue);
    background: #fff7f3;
}
.portal-submission-fields {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.portal-submission-fields > div {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #f0e7e3;
    border-radius: 9px;
    background: #fff;
}
.portal-submission-fields dt {
    margin-bottom: 6px;
    color: var(--color-faint);
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.portal-submission-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--portal-ink);
    font-size: .72rem;
    line-height: 1.55;
}
@media (max-width: 760px) {
    .portal-submissions-page { max-width: none !important; }
    .portal-submission-summary { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .portal-section-heading h1 { font-size: 1.5rem; }
    .portal-submission-stat { min-height: 108px; }
    .portal-submissions-panel-heading { min-height: 72px; padding: 0 16px; }
    .portal-submission-item > summary {
        grid-template-columns: 42px minmax(0, 1fr) 10px;
        gap: 12px;
        padding: 13px 15px;
    }
    .portal-submission-meta { display: none; }
    .portal-submission-detail { padding: 2px 15px 18px; }
    .portal-submission-detail-heading { align-items: flex-start; flex-direction: column; }
    .portal-submission-fields { grid-template-columns: 1fr; }
}

/* Portal booking ------------------------------------------------------- */
.portal-booking-page,
.portal-analytics-page {
    max-width: 1120px !important;
    padding-top: 34px !important;
    padding-bottom: 52px !important;
}
.portal-form-alert {
    margin-bottom: 14px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 9px;
    font-size: .72rem;
    line-height: 1.4;
}
.portal-form-alert--success { border-color: #bde9cf; background: #ecfaf2; color: #147943; }
.portal-form-alert--error { border-color: #f2c2c2; background: #fff1f1; color: #b52d2d; }
.portal-booking-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .72fr);
    gap: 18px;
    align-items: stretch;
}
.portal-booking-form-card,
.portal-booking-guide,
.portal-calls-panel {
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-booking-form-card { padding: 24px; }
.portal-card-heading {
    margin-bottom: 22px;
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--portal-line);
}
.portal-card-heading-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fef1eb;
    color: var(--portal-blue);
}
.portal-card-heading h2,
.portal-card-heading p { margin: 0; }
.portal-card-heading h2 { color: var(--portal-ink); font-size: .94rem; }
.portal-card-heading p { margin-top: 5px; color: var(--portal-muted); font-size: .67rem; }
.portal-booking-form label {
    margin: 0;
    display: block;
}
.portal-booking-form label > span:first-child {
    margin-bottom: 7px;
    display: block;
    color: #44403e;
    font-size: .68rem;
    font-weight: 700;
}
.portal-booking-form textarea,
.portal-booking-form input,
.portal-booking-form select,
.portal-reschedule input,
.portal-reschedule select {
    width: 100%;
    border: 1px solid #ece0db;
    border-radius: 8px;
    background: #fff;
    color: var(--portal-ink);
    font: inherit;
    font-size: .72rem;
    box-sizing: border-box;
}
.portal-booking-form textarea {
    min-height: 108px;
    padding: 12px 13px;
    resize: vertical;
    line-height: 1.5;
}
.portal-booking-form input,
.portal-booking-form select {
    height: 43px;
    padding: 0 11px;
}
.portal-booking-form textarea:focus,
.portal-booking-form input:focus,
.portal-booking-form select:focus,
.portal-reschedule input:focus,
.portal-reschedule select:focus {
    outline: 3px solid rgba(246, 98, 35, .12);
    border-color: var(--portal-blue);
}
.portal-booking-fields {
    margin-top: 17px;
    display: grid;
    grid-template-columns: 1fr .85fr .8fr;
    gap: 12px;
}
.portal-input-with-icon {
    position: relative;
    display: block;
}
.portal-input-with-icon > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: var(--color-faint);
    font-size: .7rem;
    transform: translateY(-50%);
    pointer-events: none;
}
.portal-input-with-icon input { padding-left: 34px; }
.portal-booking-submit {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.portal-booking-submit button,
.portal-call-action-buttons form button,
.portal-reschedule form > button {
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--portal-blue);
    border-radius: 8px;
    background: var(--portal-blue);
    color: #fff;
    font: inherit;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
}
.portal-booking-submit button:hover,
.portal-call-action-buttons form button:hover,
.portal-reschedule form > button:hover { background: #e64f0f; }
.portal-booking-submit > span { color: var(--color-faint); font-size: .62rem; }
.portal-booking-guide {
    overflow: hidden;
    border-color: #eb5312;
    background: var(--color-accent);
    color: #fff;
}
.portal-booking-guide-intro { padding: 24px 23px 18px; }
.portal-booking-guide-icon {
    width: 43px;
    height: 43px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.14);
    font-size: 1rem;
}
.portal-booking-guide h2 { margin: 0; font-size: .95rem; }
.portal-booking-guide p { margin: 7px 0 0; color: rgba(255,255,255,.75); font-size: .68rem; line-height: 1.5; }
.portal-booking-steps {
    margin: 0;
    padding: 2px 23px 23px;
    list-style: none;
}
.portal-booking-steps li {
    position: relative;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
}
.portal-booking-steps li > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    font-size: .62rem;
    font-weight: 700;
}
.portal-booking-steps strong,
.portal-booking-steps small { display: block; }
.portal-booking-steps strong { font-size: .7rem; }
.portal-booking-steps small { margin-top: 4px; color: rgba(255,255,255,.7); font-size: .61rem; line-height: 1.45; }
.portal-next-call {
    margin: 0 16px 16px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px;
    background: rgba(255,255,255,.1);
}
.portal-next-call span,
.portal-next-call strong,
.portal-next-call small { display: block; }
.portal-next-call span { color: rgba(255,255,255,.7); font-size: .57rem; font-weight: 700; text-transform: uppercase; }
.portal-next-call strong { margin-top: 5px; font-size: .72rem; }
.portal-next-call small { margin-top: 4px; color: rgba(255,255,255,.72); font-size: .61rem; }
.portal-calls-panel { margin-top: 22px; overflow: hidden; }
.portal-calls-heading {
    min-height: 78px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-calls-heading h2,
.portal-calls-heading p { margin: 0; }
.portal-calls-heading h2 { font-size: .94rem; }
.portal-calls-heading p { margin-top: 5px; color: var(--portal-muted); font-size: .67rem; }
.portal-calls-heading > span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #fef3ef;
    color: #c14e1d;
    font-size: .63rem;
    font-weight: 700;
}
.portal-calls-empty {
    min-height: 235px;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-calls-empty > span {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fef3ee;
    color: var(--portal-blue);
    font-size: 1.2rem;
}
.portal-calls-empty h3 { margin: 0; font-size: .85rem; }
.portal-calls-empty p { margin: 7px 0 0; color: var(--portal-muted); font-size: .67rem; }
.portal-call-card {
    padding: 18px 21px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    border-bottom: 1px solid var(--portal-line);
}
.portal-call-card:last-child { border-bottom: 0; }
.portal-call-date {
    width: 54px;
    height: 58px;
    overflow: hidden;
    border: 1px solid #f3e2db;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}
.portal-call-date span {
    height: 20px;
    display: grid;
    place-items: center;
    background: #fef1eb;
    color: #d35620;
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .06em;
}
.portal-call-date strong { display: block; padding-top: 5px; font-size: 1.1rem; }
.portal-call-copy { min-width: 0; }
.portal-call-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.portal-call-title-row h3 { margin: 0; font-size: .8rem; }
.portal-call-status {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-call-status--confirmed { background: #e5f8ed; color: #118345; }
.portal-call-status--completed { background: #f5f0ee; color: #81766a; }
.portal-call-status--requested { background: #fff6d8; color: #9b7807; }
.portal-call-status--action { background: #fff7dd; color: #b48f16; }
.portal-call-status--declined { background: #ffeded; color: #bd3333; }
.portal-call-copy > p { margin: 7px 0 0; color: #85796c; font-size: .66rem; }
.portal-call-copy > p i { margin-right: 4px; color: var(--portal-blue); }
.portal-call-copy > small { margin-top: 7px; display: block; color: var(--portal-muted); font-size: .64rem; line-height: 1.45; }
.portal-call-note { margin-top: 10px; padding: 9px 11px; border-radius: 7px; background: #fff2f2; color: #9e3a3a; font-size: .64rem; }
.portal-call-action {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #fbe1d6;
    border-radius: 9px;
    background: #fff7f4;
}
.portal-call-action > div:first-child strong,
.portal-call-action > div:first-child span { display: block; }
.portal-call-action > div:first-child strong { font-size: .7rem; }
.portal-call-action > div:first-child span { margin-top: 4px; color: var(--portal-muted); font-size: .62rem; }
.portal-call-action-buttons { margin-top: 12px; display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.portal-call-action-buttons form { margin: 0; }
.portal-reschedule > summary {
    min-height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #ebd5cb;
    border-radius: 8px;
    background: #fff;
    color: #554f4d;
    font-size: .66rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.portal-reschedule > summary::-webkit-details-marker { display: none; }
.portal-reschedule[open] { width: 100%; }
.portal-reschedule[open] > summary { margin-bottom: 10px; }
.portal-reschedule form {
    padding: 13px;
    border: 1px solid #f3e2db;
    border-radius: 8px;
    background: #fff;
}
.portal-reschedule form > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.portal-reschedule label { color: #696662; font-size: .61rem; font-weight: 700; }
.portal-reschedule input,
.portal-reschedule select { height: 38px; margin-top: 6px; padding: 0 9px; }
.portal-reschedule form > button { margin-top: 11px; }

/* Portal analytics ----------------------------------------------------- */
.portal-analytics-page { position: relative; }
.portal-analytics-page > * { transition: opacity .16s ease; }
.portal-analytics-page.is-loading {
    min-height: 420px;
    pointer-events: none;
}
.portal-analytics-page.is-loading > * { opacity: .5; }
.portal-analytics-page.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    width: 34%;
    height: 3px;
    border-radius: 999px;
    background: var(--color-accent);
    animation: portal-analytics-loading .85s ease-in-out infinite;
}
@keyframes portal-analytics-loading {
    from { transform: translateX(-100%); }
    to { transform: translateX(294%); }
}
.portal-analytics-heading { align-items: flex-end; }
.portal-analytics-back {
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7e7367;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 600;
}
.portal-analytics-back:hover { color: var(--portal-blue); }
.portal-period-switch {
    padding: 4px;
    display: flex;
    gap: 3px;
    border: 1px solid var(--portal-line);
    border-radius: 9px;
    background: #fff;
}
.portal-period-switch a {
    padding: 7px 11px;
    border-radius: 6px;
    color: #877b6e;
    text-decoration: none;
    font-size: .64rem;
    font-weight: 700;
}
.portal-period-switch a:hover { color: var(--portal-blue); }
.portal-period-switch a.is-active { background: var(--portal-blue); color: #fff; }
.portal-analytics-summary {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 13px;
}
.portal-analytics-summary--detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-analytics-metric {
    min-height: 128px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
    box-sizing: border-box;
}
.portal-analytics-metric-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: .95rem;
}
.portal-analytics-metric-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-analytics-metric-icon--violet { background: #fef3ee; color: #dc7c53; }
.portal-analytics-metric-icon--amber { background: #fff6d8; color: #ad8606; }
.portal-analytics-metric-icon--green { background: #e9f8f0; color: var(--color-success-text); }
.portal-analytics-metric > div > span,
.portal-analytics-metric > div > strong,
.portal-analytics-metric > div > small { display: block; }
.portal-analytics-metric > div > span { color: var(--portal-muted); font-size: .66rem; font-weight: 600; }
.portal-analytics-metric > div > strong {
    margin-top: 5px;
    color: var(--portal-ink);
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -.025em;
}
.portal-analytics-metric > div > strong.portal-analytics-date { font-size: 1.15rem; }
.portal-analytics-metric > div > small { margin-top: 7px; color: var(--color-faint); font-size: .58rem; line-height: 1.35; }
.portal-metric-change--up { color: #16844a !important; }
.portal-metric-change--down { color: #c84444 !important; }
.portal-metric-change--flat { color: #a59b90 !important; }
.portal-live-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #1ab463;
    vertical-align: middle;
    animation: stats-pulse 1.6s ease-in-out infinite;
}
.portal-analytics-panel,
.portal-analytics-empty {
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-analytics-panel { overflow: hidden; }
.portal-analytics-panel > header {
    min-height: 74px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-analytics-panel > header h2,
.portal-analytics-panel > header p { margin: 0; padding: 0; border: 0; }
.portal-analytics-panel > header h2 { font-size: .85rem; }
.portal-analytics-panel > header p { margin-top: 5px; color: var(--portal-muted); font-size: .62rem; }
.portal-analytics-panel > header > span {
    color: var(--color-faint);
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-analytics-chart-panel { margin-bottom: 18px; }
.portal-analytics-chart {
    --color-accent: var(--portal-blue);
    padding: 20px 20px 13px;
}
.portal-analytics-chart .stats-areachart { margin: 0; }
.portal-analytics-chart .stats-areachart-svg { height: 240px; }
.portal-analytics-chart .stats-areachart-labels { color: var(--color-faint); font-size: .6rem; }
.portal-analytics-chart .stats-tooltip { background: var(--portal-ink); font-size: .65rem; }
.portal-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.portal-analytics-grid--detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-ranking-list a,
.portal-source-list > div {
    min-height: 59px;
    padding: 0 17px;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #f6f0ed;
    color: var(--portal-ink);
    text-decoration: none;
    box-sizing: border-box;
}
.portal-ranking-list a:last-child,
.portal-source-list > div:last-child { border-bottom: 0; }
.portal-ranking-list a:hover { background: #fffaf7; }
.portal-ranking-number {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #fef3ef;
    color: #c05a2f;
    font-size: .59rem;
    font-weight: 800;
}
.portal-ranking-copy,
.portal-source-copy { min-width: 0; }
.portal-ranking-copy strong,
.portal-source-copy strong {
    display: block;
    overflow: hidden;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-ranking-copy > span,
.portal-source-copy > span {
    height: 4px;
    margin-top: 7px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #f6f0ed;
}
.portal-ranking-copy > span i,
.portal-source-copy > span i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--portal-blue);
}
.portal-ranking-list b,
.portal-source-list b {
    color: #696662;
    font-size: .64rem;
}
.portal-source-list > div { grid-template-columns: 30px minmax(0, 1fr) auto; }
.portal-source-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fef3ef;
    color: var(--portal-blue);
    font-size: .65rem;
}
.portal-device-list > div {
    min-height: 65px;
    padding: 0 17px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #f6f0ed;
}
.portal-device-list > div:last-child { border-bottom: 0; }
.portal-device-list > div > span {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fef3ee;
    color: #dc7c53;
    font-size: .7rem;
}
.portal-device-list > div > div { position: relative; min-width: 0; }
.portal-device-list strong,
.portal-device-list small { display: inline-block; font-size: .65rem; }
.portal-device-list small { position: absolute; right: 0; color: var(--color-faint); }
.portal-device-list > div > div > i {
    height: 5px;
    margin-top: 7px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #f6f0ed;
}
.portal-device-list > div > div > i b { height: 100%; display: block; border-radius: inherit; background: #dc7c53; }
.portal-device-list em { color: #696662; font-size: .63rem; font-style: normal; font-weight: 700; }
.portal-event-list > div {
    min-height: 55px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #f6f0ed;
}
.portal-event-list > div:last-child { border-bottom: 0; }
.portal-event-list span {
    min-width: 0;
    overflow: hidden;
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-event-list span i { width: 23px; color: var(--portal-blue); }
.portal-event-list strong {
    padding: 4px 7px;
    border-radius: 999px;
    background: #fef3ef;
    color: #ac4b21;
    font-size: .59rem;
}
.portal-panel-empty {
    min-height: 190px;
    padding: 30px;
    display: grid;
    place-items: center;
    color: var(--portal-muted);
    text-align: center;
    font-size: .67rem;
    box-sizing: border-box;
}
.portal-analytics-empty {
    min-height: 330px;
    padding: 45px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-analytics-empty > span {
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: #fef3ee;
    color: var(--portal-blue);
    font-size: 1.4rem;
}
.portal-analytics-empty h2 { margin: 0; font-size: .95rem; }
.portal-analytics-empty p { max-width: 430px; margin: 8px 0 0; color: var(--portal-muted); font-size: .7rem; line-height: 1.5; }
@media (max-width: 1000px) {
    .portal-analytics-grid--detail { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 850px) {
    .portal-booking-workspace { grid-template-columns: 1fr; }
    .portal-booking-guide { display: grid; grid-template-columns: .8fr 1.2fr; }
    .portal-booking-steps { padding-top: 18px; }
    .portal-next-call { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .portal-booking-page,
    .portal-analytics-page { max-width: none !important; }
    .portal-analytics-grid,
    .portal-analytics-grid--detail { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .portal-analytics-heading { align-items: flex-start; flex-direction: column; }
    .portal-booking-fields { grid-template-columns: 1fr; }
    .portal-booking-guide { display: block; }
    .portal-analytics-summary,
    .portal-analytics-summary--detail { grid-template-columns: 1fr; }
    .portal-call-title-row { align-items: flex-start; flex-direction: column; gap: 8px; }
    .portal-reschedule form > div { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .portal-booking-form-card { padding: 18px 16px; }
    .portal-booking-submit { align-items: flex-start; flex-direction: column; }
    .portal-call-card { padding: 16px; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .portal-call-date { width: 48px; }
    .portal-calls-heading { padding: 0 16px; }
    .portal-period-switch { width: 100%; box-sizing: border-box; }
    .portal-period-switch a { flex: 1; text-align: center; }
}

/* Portal page detail ----------------------------------------------------- */
.portal-page-detail {
    max-width: 960px !important;
    padding-top: 28px !important;
    padding-bottom: 50px !important;
}
.portal-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.3rem;
}
.portal-page-heading h1 {
    margin: 0;
    font-size: 1.65rem;
    letter-spacing: -.025em;
}
.portal-page-heading h1 span {
    margin-left: .25rem;
    color: var(--color-faint);
    font-weight: 500;
}
.portal-page-heading p {
    margin: .35rem 0 0;
    color: var(--portal-muted);
    font-size: .72rem;
}
.portal-page-heading > a {
    margin-top: .2rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #ba4513;
    text-decoration: none;
    font-size: .74rem;
    font-weight: 600;
}
.portal-page-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 2.1rem;
}
.portal-page-stats > div {
    min-height: 80px;
    padding: 17px 20px;
    border: 1px solid #f4efed;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(53, 45, 41, .025);
    box-sizing: border-box;
}
.portal-page-stats span,
.portal-page-stats strong { display: block; }
.portal-page-stats span { color: #766c61; font-size: .7rem; }
.portal-page-stats strong { margin-top: .2rem; font-size: 1.45rem; line-height: 1; }
.portal-page-section { margin-top: 2rem; }
.portal-page-section h2 { margin: 0 0 .4rem; font-size: 1.02rem; }
.portal-page-section > p { margin: 0 0 .8rem; color: #655c53; font-size: .72rem; }
.portal-search-preview,
.portal-social-preview,
.portal-change-request {
    border: 1px solid #e2dfdc;
    border-radius: 10px;
    background: #fff;
}
.portal-search-preview { padding: 16px 20px 18px; }
.portal-search-preview small,
.portal-search-preview strong,
.portal-search-preview span,
.portal-social-preview small,
.portal-social-preview strong,
.portal-social-preview span { display: block; }
.portal-search-preview small { color: #4d463f; font-size: .68rem; }
.portal-search-preview strong { margin: .2rem 0; color: #b84210; font-size: .94rem; }
.portal-search-preview span,
.portal-social-preview span { color: #433d37; font-size: .68rem; line-height: 1.45; }
.portal-social-preview {
    margin-top: .8rem;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.portal-social-image {
    flex: 0 0 88px;
    width: 88px;
    height: 66px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: #fee7dd;
    color: #b14111;
}
.portal-social-image img { width: 100%; height: 100%; object-fit: cover; }
.portal-social-preview small { color: var(--portal-muted); font-size: .66rem; }
.portal-social-preview strong { margin: .15rem 0; font-size: .75rem; }
.portal-change-request { padding: 15px 20px 13px; }
.portal-change-request p { margin: 0 0 .65rem; color: #655c53; font-size: .7rem; }
.portal-change-request textarea {
    width: 100%;
    min-height: 86px;
    padding: 12px 14px;
    resize: vertical;
    border: 1px solid #e2dfdc;
    border-radius: 5px;
    background: #fff;
    color: var(--portal-ink);
    font: inherit;
    font-size: .75rem;
    box-sizing: border-box;
}
.portal-change-request textarea:focus { outline: 2px solid rgba(246, 98, 35, .18); border-color: var(--portal-blue); }
.portal-request-actions {
    margin-top: .65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.portal-file-picker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #686561;
    font-size: .68rem;
    cursor: pointer;
}
.portal-file-picker:hover { color: var(--portal-blue); }
.portal-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.portal-request-actions button {
    margin: 0;
    padding: .6rem 1rem;
    border: 1px solid #cec9c3;
    border-radius: 7px;
    background: #fff;
    color: var(--portal-ink);
    font-size: .7rem;
    cursor: pointer;
}
.portal-request-actions button:hover { border-color: var(--portal-blue); color: var(--portal-blue); }
.portal-request-status {
    margin-top: .75rem;
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: 7px;
    background: #fff;
    color: #544d45;
    font-size: .68rem;
}
.portal-request-badge { padding: .25rem .55rem; border-radius: 5px; font-weight: 600; }
.portal-request-badge--open { background: #fff0bd; color: #806200; }
.portal-request-badge--in_progress { background: #feede6; color: #a6471f; }
.portal-request-badge--resolved { background: #dcf7e7; color: #197344; }
.portal-traffic-section { position: relative; }
.portal-page-chart {
    height: 145px;
    padding: 17px 16px 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}
.portal-page-bar { height: 100%; flex: 1 1 0; display: flex; align-items: flex-end; }
.portal-page-bar span { width: 100%; min-height: 5px; border-radius: 2px 2px 0 0; background: #d8622f; }
.portal-page-chart--empty { align-items: center; justify-content: center; color: var(--portal-muted); font-size: .72rem; }
.portal-traffic-note { margin-top: .55rem !important; color: var(--portal-muted) !important; font-size: .64rem !important; }
.portal-statistics-link {
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--portal-blue);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
}
@media (max-width: 760px) {
    .portal-page-detail { max-width: none !important; }
}
@media (max-width: 540px) {
    .portal-page-heading { align-items: flex-start; gap: 1rem; }
    .portal-page-heading h1 { font-size: 1.35rem; }
    .portal-page-heading > a { white-space: nowrap; }
    .portal-page-stats { grid-template-columns: 1fr; gap: 8px; }
    .portal-page-stats > div { min-height: 68px; }
    .portal-social-preview { align-items: flex-start; padding: 12px; }
    .portal-social-image { flex-basis: 72px; width: 72px; height: 58px; }
    .portal-request-actions { align-items: flex-end; }
    .portal-request-status { align-items: flex-start; flex-direction: column; }
    .portal-statistics-link { position: static; display: inline-flex; gap: .4rem; margin-top: .25rem; }
}

/* Portal pages overview ------------------------------------------------ */
.portal-pages-page {
    max-width: 1120px !important;
    padding-top: 34px !important;
    padding-bottom: 52px !important;
}
.portal-pages-analytics-link {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #f2d9ce;
    border-radius: 8px;
    background: #fff;
    color: #ac4b21;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(53, 45, 41, .035);
    white-space: nowrap;
}
.portal-pages-analytics-link:hover {
    border-color: var(--portal-blue);
    background: #fff7f4;
    color: var(--portal-blue);
}
.portal-pages-summary {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}
.portal-pages-stat {
    min-height: 126px;
    padding: 21px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
    box-sizing: border-box;
}
.portal-pages-stat-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.05rem;
}
.portal-pages-stat-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-pages-stat-icon--green { background: #e9f8f0; color: var(--color-success-text); }
.portal-pages-stat-icon--violet { background: #fef3ee; color: #dc7c53; }
.portal-pages-stat > div { min-width: 0; }
.portal-pages-stat > div > span,
.portal-pages-stat > div > strong,
.portal-pages-stat > div > small { display: block; }
.portal-pages-stat > div > span {
    color: var(--portal-muted);
    font-size: .7rem;
    font-weight: 600;
}
.portal-pages-stat > div > strong {
    margin-top: 4px;
    overflow: hidden;
    color: var(--portal-ink);
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-pages-stat > div > strong.portal-pages-stat-title { font-size: 1.05rem; }
.portal-pages-stat > div > small {
    margin-top: 7px;
    overflow: hidden;
    color: var(--color-faint);
    font-size: .63rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-pages-panel {
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-pages-panel-heading {
    min-height: 78px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-pages-panel-heading h2,
.portal-pages-panel-heading p { margin: 0; }
.portal-pages-panel-heading h2 {
    color: var(--portal-ink);
    font-size: .95rem;
}
.portal-pages-panel-heading p {
    margin-top: 5px;
    color: var(--portal-muted);
    font-size: .68rem;
}
.portal-pages-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: #fef3ef;
    color: #c14e1d;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-pages-list { background: #fff; }
.portal-page-row {
    min-height: 92px;
    padding: 15px 19px;
    display: grid;
    grid-template-columns: 48px minmax(170px, 1fr) minmax(145px, .6fr) 108px 10px;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--portal-line);
    color: var(--portal-ink);
    text-decoration: none;
    box-sizing: border-box;
    transition: background .15s ease;
}
.portal-page-row:last-child { border-bottom: 0; }
.portal-page-row:hover { background: #fffaf8; }
.portal-page-row-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fef1eb;
    color: var(--portal-blue);
    font-size: .9rem;
}
.portal-page-row-icon--warning { background: #fff8df; color: #b38c0a; }
.portal-page-row-copy { min-width: 0; }
.portal-page-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-page-row-title strong {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-page-type {
    padding: 4px 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #f6f2f0;
    color: #877b6f;
    font-size: .54rem;
    font-weight: 700;
}
.portal-page-type--homepage { background: #e7f7ee; color: #15804a; }
.portal-page-type--draft { background: #fdf1e0; color: #a15c07; }
.portal-page-path {
    margin-top: 6px;
    display: block;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-page-traffic > span {
    display: block;
    color: var(--color-faint);
    font-size: .57rem;
    font-weight: 600;
}
.portal-page-traffic > i {
    height: 6px;
    margin-top: 8px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #f6f0ed;
}
.portal-page-traffic > i > b {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--color-accent);
}
.portal-page-views { text-align: right; }
.portal-page-views strong,
.portal-page-views small { display: block; }
.portal-page-views strong {
    color: var(--portal-ink);
    font-size: .86rem;
}
.portal-page-views small {
    margin-top: 4px;
    color: var(--portal-muted);
    font-size: .57rem;
    white-space: nowrap;
}
.portal-page-row-chevron {
    color: var(--color-faint);
    font-size: .58rem;
    transition: transform .15s ease, color .15s ease;
}
.portal-page-row:hover .portal-page-row-chevron {
    color: var(--portal-blue);
    transform: translateX(2px);
}
.portal-pages-empty {
    min-height: 310px;
    padding: 42px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-pages-empty > span {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fef3ee;
    color: var(--portal-blue);
    font-size: 1.45rem;
}
.portal-pages-empty h3 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 1rem;
}
.portal-pages-empty p {
    max-width: 430px;
    margin: 9px 0 0;
    color: var(--portal-muted);
    font-size: .74rem;
    line-height: 1.55;
}
@media (max-width: 920px) {
    .portal-pages-summary { grid-template-columns: 1fr 1fr; }
    .portal-pages-stat:last-child { grid-column: 1 / -1; }
    .portal-page-row { grid-template-columns: 48px minmax(0, 1fr) 100px 10px; }
    .portal-page-traffic { display: none; }
}
@media (max-width: 760px) {
    .portal-pages-page { max-width: none !important; }
}
@media (max-width: 620px) {
    .portal-pages-heading { align-items: flex-start; flex-direction: column; }
    .portal-pages-summary { grid-template-columns: 1fr; }
    .portal-pages-stat:last-child { grid-column: auto; }
}
@media (max-width: 520px) {
    .portal-pages-analytics-link { width: 100%; justify-content: center; box-sizing: border-box; }
    .portal-pages-panel-heading { min-height: 74px; padding: 0 16px; }
    .portal-pages-panel-heading p { display: none; }
    .portal-page-row {
        min-height: 82px;
        padding: 13px 14px;
        grid-template-columns: 42px minmax(0, 1fr) 10px;
        gap: 12px;
    }
    .portal-page-row-icon { width: 42px; height: 42px; border-radius: 10px; }
    .portal-page-type { display: none; }
    .portal-page-views { display: none; }
}

/* Save website as template -------------------------------------------- */
.site-template-export {
    max-width: 1040px !important;
    padding-bottom: 3rem;
}
.site-template-export-heading {
    margin: 1.7rem 0 1.5rem;
}
.site-template-export-kicker {
    display: block;
    margin-bottom: .4rem;
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.site-template-export-heading h1 { margin: 0; font-size: 1.65rem; }
.site-template-export-heading p {
    margin: .55rem 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}
.site-template-export-summary {
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .7rem;
}
.site-template-export-summary article {
    min-height: 84px;
    padding: .9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--color-surface-border);
    border-radius: 9px;
    background: var(--color-surface);
    box-sizing: border-box;
}
.site-template-export-summary strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1;
}
.site-template-export-summary span {
    margin-top: .35rem;
    color: var(--color-muted);
    font-size: var(--text-xs);
}
.site-template-export-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 1rem;
    align-items: start;
}
.site-template-export-form,
.site-template-export-notes {
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: 0 5px 16px rgba(61, 51, 46, .035);
}
.site-template-export-form { padding: 1.35rem; }
.site-template-export-card-heading {
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-line);
}
.site-template-export-card-heading h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1rem;
}
.site-template-export-card-heading p {
    margin: .4rem 0 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}
.site-template-export-form label {
    margin-top: 1rem;
    font-weight: 600;
}
.site-template-export-form .site-template-export-card-heading + label { margin-top: 0; }
.site-template-export-form textarea { line-height: 1.5; }
.site-template-export-actions {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.site-template-export-actions button,
.site-template-export-actions a { margin-top: 0; }
.site-template-export-notes { overflow: hidden; }
.site-template-export-notes > div {
    padding: 1.05rem;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: .75rem;
    border-bottom: 1px solid var(--color-line);
}
.site-template-export-notes > div:last-child { border-bottom: 0; }
.site-template-export-note-icon {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #e8f8ef;
    color: #16844a;
    font-weight: 700;
}
.site-template-export-note-icon--muted {
    background: #f4f3f1;
    color: #908477;
}
.site-template-export-notes strong {
    display: block;
    font-size: .82rem;
}
.site-template-export-notes p {
    margin: .35rem 0 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1.55;
}
.site-template-export-notes .site-template-export-warning {
    display: block;
    background: #fffae9;
}
.site-template-export-warning strong { color: #8b6d0a; }
@media (max-width: 960px) {
    .site-template-export-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-template-export-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .site-template-export-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-template-export-actions { align-items: stretch; flex-direction: column; }
    .site-template-export-actions button,
    .site-template-export-actions a { width: 100%; text-align: center; box-sizing: border-box; }
}

/* Customer workspace — overview-first and flexbox-only. */
.customer-workspace {
    max-width: 1240px;
    padding-top: 30px;
}
.customer-workspace-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}
.customer-workspace-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}
.customer-workspace-avatar {
    display: inline-flex;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #0a0a0a;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 8px 20px rgba(67, 56, 51, .14);
}
.customer-workspace-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--color-accent-text);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.customer-workspace-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
}
.customer-workspace-title-row h1 {
    margin: 0;
    color: #2a2827;
    font-size: 2rem;
    letter-spacing: -.035em;
}
.customer-workspace-identity p {
    margin: 6px 0 0;
    color: var(--color-faint);
}
.customer-account-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e9f8ef;
    color: var(--color-success-text);
    font-size: .72rem;
    font-weight: 800;
}
.customer-account-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #23b768;
    box-shadow: 0 0 0 3px rgba(35,183,104,.13);
}
.customer-workspace-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}
.customer-workspace-actions .btn,
.customer-workspace-actions button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.customer-workspace-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 18px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid #eee3df;
    border-radius: 11px;
    background: #fff;
}
.customer-workspace-nav a,
.customer-workspace-nav button {
    display: inline-flex;
    min-height: 35px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #7f7468;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.customer-workspace-nav a:hover,
.customer-workspace-nav button:hover { background: #fdf6f3; color: var(--color-accent-text); }
.customer-workspace-nav .is-active { background: #fef1eb; color: var(--color-accent-text); }
.customer-summary {
    display: flex;
    align-items: stretch;
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.customer-summary article {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    padding: 18px 19px;
    border-right: 1px solid #f1eae7;
}
.customer-summary article:last-child { border-right: 0; }
.customer-summary article > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.customer-summary-icon {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.customer-summary-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.customer-summary-icon.is-amber { background: #fff7db; color: #b99009; }
.customer-summary-icon.is-violet { background: #fef2ed; color: #db7c53; }
.customer-summary-icon.is-green { background: #e8f8ef; color: #189f59; }
.customer-summary small {
    color: var(--color-faint);
    font-size: .7rem;
    font-style: normal;
    font-weight: 700;
}
.customer-summary strong {
    overflow: hidden;
    color: #2d2b2a;
    font-size: 1rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-summary em {
    overflow: hidden;
    color: var(--color-faint);
    font-size: .67rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-workspace-columns {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.customer-workspace-primary {
    display: flex;
    min-width: 0;
    flex: 1 1 64%;
    flex-direction: column;
    gap: 22px;
}
.customer-workspace-secondary {
    display: flex;
    min-width: 315px;
    flex: 0 1 36%;
    flex-direction: column;
    gap: 22px;
}
.customer-panel-action {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-accent-text);
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
}
.customer-panel-action:hover { background: transparent; color: #b23b08; }
.customer-website-overview {
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 22px;
}
.customer-website-main {
    display: flex;
    align-items: center;
    gap: 14px;
}
.customer-website-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: 1.05rem;
}
.customer-website-main > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}
.customer-website-main strong { color: #2d2b2a; font-size: 1.08rem; }
.customer-website-main p {
    margin: 0;
    overflow: hidden;
    color: var(--color-faint);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-website-facts {
    display: flex;
    overflow: hidden;
    border: 1px solid #f0e7e4;
    border-radius: 11px;
    background: #fefaf9;
}
.customer-website-facts > span {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-right: 1px solid #f0e7e4;
}
.customer-website-facts > span:last-child { border-right: 0; }
.customer-website-facts small { color: var(--color-faint); font-size: .68rem; font-weight: 700; }
.customer-website-facts strong {
    overflow: hidden;
    color: #33302f;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-website-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.customer-website-actions .btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.customer-create-site {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    padding: 25px;
}
.customer-create-site-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: 1.05rem;
}
.customer-create-site h3 { margin: 0; color: #2d2b2a; font-size: 1rem; }
.customer-create-site p { margin: 5px 0 0; color: var(--color-faint); font-size: .78rem; }
.customer-create-site form { width: 100%; margin: 0; }
.customer-inline-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.customer-inline-fields label {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.customer-inline-fields label span { color: #70665c; font-size: .74rem; font-weight: 700; }
.customer-inline-fields input,
.customer-inline-fields select { margin: 0; }
.customer-create-site form > button { margin-top: 12px; }
.customer-activity-list {
    display: flex;
    flex-direction: column;
}
.customer-activity-list > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.customer-activity-list > a:last-child { border-bottom: 0; }
.customer-activity-list > a:hover { background: #fffaf8; }
.customer-activity-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.customer-activity-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.customer-activity-icon.is-green { background: #e8f8ef; color: #189f59; }
.customer-activity-icon.is-amber { background: #fff7db; color: #b99009; }
.customer-activity-icon.is-violet { background: #fef2ed; color: #db7c53; }
.customer-activity-icon.is-red { background: #ffeded; color: #d94444; }
.customer-activity-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.customer-activity-copy strong {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-activity-copy small { color: var(--color-faint); font-size: .69rem; }
.customer-activity-list time { flex: 0 0 auto; color: var(--color-faint); font-size: .68rem; }
.customer-activity-list > a > i { color: var(--color-faint); font-size: .65rem; }
.customer-detail-list {
    display: flex;
    flex-direction: column;
}
.customer-detail-list > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    border-bottom: 1px solid #f5efed;
}
.customer-detail-icon {
    display: inline-flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fcf3f0;
    color: #cc6235;
    font-size: .73rem;
}
.customer-detail-list > div > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.customer-detail-list small { color: var(--color-faint); font-size: .66rem; }
.customer-detail-list strong {
    overflow: hidden;
    color: #151514;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 13px 17px;
}
.customer-detail-actions button,
.customer-detail-actions a.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #efe2dc;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
    color: var(--color-text);
    font-size: .68rem;
    font-weight: 600;
}
.customer-detail-actions button:hover,
.customer-detail-actions a.btn:hover { border-color: var(--color-accent); background: var(--color-line); color: var(--color-text); box-shadow: none; transform: none; }
.customer-side-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 19px;
    color: var(--color-faint);
}
.customer-side-empty > i {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fcf3f0;
    color: #cb6f48;
}
.customer-side-empty > span,
.customer-side-list a > span:last-child,
.customer-request-list a > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.customer-side-empty strong,
.customer-side-list strong,
.customer-request-list strong { color: #151514; font-size: .76rem; }
.customer-side-empty small,
.customer-side-list small,
.customer-request-list small { color: var(--color-faint); font-size: .67rem; }
.customer-side-list,
.customer-request-list { display: flex; flex-direction: column; }
.customer-side-list a,
.customer-request-list a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    border-bottom: 1px solid #f5efed;
    color: #151514;
    text-decoration: none;
}
.customer-side-list a:last-child,
.customer-request-list a:last-child { border-bottom: 0; }
.customer-side-list a:hover,
.customer-request-list a:hover { background: #fffaf8; }
.customer-side-date {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.customer-side-date strong { color: inherit; font-size: .86rem; line-height: 1; }
.customer-side-date small { color: inherit; font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.customer-request-list em {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: #f8f0ed;
    color: #807569;
    font-size: .59rem;
    font-style: normal;
    font-weight: 800;
    text-transform: capitalize;
}
.customer-request-list em.is-open { background: #fff7dc; color: #a78000; }
.customer-request-list em.is-in_progress { background: #fef1eb; color: var(--color-accent-text); }
.customer-request-list em.is-resolved { background: #e8f8ef; color: var(--color-success-text); }
.customer-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    border-top: 1px solid #f5efed;
    color: var(--color-accent-text);
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
}
.customer-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
}
.customer-form-fields > label {
    display: flex;
    min-width: 220px;
    flex: 1 1 calc(50% - 7px);
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
}
.customer-form-fields > label.is-wide { flex-basis: 100%; }
.customer-form-fields label span { font-size: .76rem; font-weight: 700; }
.customer-form-fields input { margin: 0; }
.modal-header > div p {
    margin: 4px 0 0;
    color: var(--color-faint);
    font-size: .74rem;
}
.customer-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}
.customer-modal-actions button {
    min-height: 39px;
    margin: 0;
}

@media (max-width: 1040px) {
    .customer-workspace-columns { flex-direction: column; }
    .customer-workspace-primary,
    .customer-workspace-secondary { width: 100%; min-width: 0; flex-basis: auto; }
    .customer-summary { flex-wrap: wrap; }
    .customer-summary article { min-width: 42%; border-bottom: 1px solid #f1eae7; }
}
@media (max-width: 780px) {
    .customer-workspace-heading { flex-direction: column; }
    .customer-workspace-actions { justify-content: flex-start; }
    .customer-inline-fields { flex-direction: column; align-items: stretch; }
    .customer-inline-fields label { width: 100%; }
}
@media (max-width: 560px) {
    .customer-workspace { padding-top: 22px; }
    .customer-workspace-identity { align-items: flex-start; }
    .customer-workspace-avatar { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
    .customer-workspace-title-row h1 { font-size: 1.55rem; }
    .customer-workspace-actions,
    .customer-workspace-actions .btn,
    .customer-workspace-actions button { width: 100%; }
    .customer-summary { flex-direction: column; }
    .customer-summary article { min-width: 0; border-right: 0; }
    .customer-website-facts { flex-direction: column; }
    .customer-website-facts > span { border-right: 0; border-bottom: 1px solid #f0e7e4; }
    .customer-website-facts > span:last-child { border-bottom: 0; }
    .customer-website-actions,
    .customer-website-actions .btn { width: 100%; }
    .customer-activity-list time { display: none; }
    .customer-form-fields > label { min-width: 100%; flex-basis: 100%; }
    .customer-modal-actions { flex-direction: column-reverse; }
    .customer-modal-actions button { width: 100%; }
}

/* Agency operations workspace: agenda, tickets, team and appointments.
   Every new layout in this section uses flexbox. */
.operations-workspace {
    max-width: 1240px;
    padding-top: 30px;
}
.operations-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}
.operations-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 15px;
}
.operations-title-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 1.05rem;
}
.operations-title-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.operations-title-icon.is-amber { background: #fff7db; color: #b99009; }
.operations-title-icon.is-violet { background: #fef2ed; color: #db7c53; }
.operations-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--color-accent-text);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.operations-title h1 {
    margin: 0;
    color: #2a2827;
    font-size: 2rem;
    letter-spacing: -.035em;
}
.operations-title p { margin: 5px 0 0; color: var(--color-faint); font-size: .83rem; }
.operations-primary-action {
    display: inline-flex;
    min-height: 41px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 0;
}
.operations-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 18px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid #eee3df;
    border-radius: 11px;
    background: #fff;
}
.operations-tabs a {
    display: inline-flex;
    min-height: 35px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 8px;
    color: #7f7468;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.operations-tabs a:hover { background: #fdf6f3; color: var(--color-accent-text); }
.operations-tabs a.is-active { background: #fef1eb; color: var(--color-accent-text); }
.operations-summary {
    display: flex;
    align-items: stretch;
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.operations-summary article,
.operations-summary > a {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    padding: 18px 19px;
    border-right: 1px solid #f1eae7;
    color: #302e2d;
    text-decoration: none;
}
.operations-summary article:last-child,
.operations-summary > a:last-child { border-right: 0; }
.operations-summary > a { position: relative; transition: background .15s ease; }
.operations-summary > a:hover { background: #fffaf8; }
.operations-summary > a.is-active { background: #fef6f3; }
.operations-summary > a.is-active::after {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #f26022;
    content: "";
}
.operations-summary article > span:last-child,
.operations-summary > a > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.operations-summary-icon {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.operations-summary-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.operations-summary-icon.is-amber { background: #fff7db; color: #b99009; }
.operations-summary-icon.is-violet { background: #fef2ed; color: #db7c53; }
.operations-summary-icon.is-green { background: #e8f8ef; color: #189f59; }
.operations-summary-icon.is-red { background: #ffeded; color: #d94444; }
.operations-summary small { color: var(--color-faint); font-size: .69rem; font-style: normal; font-weight: 700; }
.operations-summary strong {
    overflow: hidden;
    color: #2d2b2a;
    font-size: 1.18rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.operations-summary em {
    overflow: hidden;
    color: var(--color-faint);
    font-size: .66rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.operations-summary .operations-summary-date { font-size: .88rem; }
.operations-panel {
    overflow: visible;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.operations-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #f2e9e6;
}
.operations-panel-heading h2 { margin: 0; color: #2d2b2a; font-size: .98rem; }
.operations-panel-heading p { margin: 4px 0 0; color: var(--color-faint); font-size: .75rem; }
.operations-count,
.operations-step {
    display: inline-flex;
    min-width: 28px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #fbf1ed;
    color: #a1512e;
    font-size: .68rem;
    font-weight: 800;
}
.job-status-list { display: flex; flex-direction: column; }
.job-status-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 20px;
    border-bottom: 1px solid #f5efed;
}
.job-status-row:last-child { border-bottom: 0; }
.job-status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #b9b1a9; }
.job-status-dot.is-success { background: #21ad65; }
.job-status-dot.is-warning { background: #e2b933; }
.job-status-dot.is-danger { background: #d84a4a; }
.job-status-dot.is-neutral { background: #b9b1a9; }
.job-status-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.job-status-copy strong { color: #2d2b2a; font-size: .77rem; }
.job-status-copy code { align-self: flex-start; padding: 1px 6px; border-radius: 5px; background: #f9f4f2; color: var(--color-faint); font-size: .58rem; }
.job-status-copy small { color: var(--color-faint); font-size: .68rem; line-height: 1.45; }
.job-status-copy small.error { color: #ca4141; }
.job-status-meta { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 5px; }
.job-status-meta small { color: var(--color-faint); font-size: .58rem; white-space: nowrap; }
.operations-columns {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 22px;
}
.operations-column { min-width: 0; flex: 1 1 0; }
.agenda-request-list { display: flex; flex-direction: column; }
.agenda-request-list article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f5efed;
}
.agenda-request-list article:last-child { border-bottom: 0; }
.agenda-request-date {
    display: inline-flex;
    width: 40px;
    height: 42px;
    flex: 0 0 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.agenda-request-date.is-violet { background: #fef2ed; color: #db7c53; }
.agenda-request-date strong { font-size: .88rem; line-height: 1; }
.agenda-request-date small { margin-top: 2px; color: inherit; font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.agenda-request-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.agenda-request-copy strong { overflow: hidden; color: #151514; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.agenda-request-copy small { overflow: hidden; color: var(--color-faint); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.agenda-request-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}
.agenda-request-actions form { margin: 0; }
.agenda-request-actions button,
.agenda-request-actions .btn {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    font-size: .67rem;
}
.agenda-request-actions .operations-danger-action {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #c73b3b;
}
.agenda-calendar-panel { overflow: hidden; }
.agenda-calendar-heading { border-bottom: 0; }
.agenda-week-nav {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #efe2dc;
    border-radius: 8px;
}
.agenda-week-nav a {
    display: inline-flex;
    min-width: 34px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-right: 1px solid #efe2dc;
    color: #72685e;
    font-size: .69rem;
    font-weight: 700;
    text-decoration: none;
}
.agenda-week-nav a:last-child { border-right: 0; }
.agenda-week-nav a:hover,
.agenda-week-nav a.is-current { background: #fef3ee; color: var(--color-accent-text); }
.operations-agenda-scroll {
    max-height: 68vh;
    border: 0;
    border-top: 1px solid #f2e9e6;
    border-radius: 0;
}
.operations-agenda-scroll .agenda-grid {
    display: flex;
    min-width: 900px;
    flex-wrap: wrap;
    border: 0;
    border-radius: 0;
}
.operations-agenda-scroll .agenda-grid-corner,
.operations-agenda-scroll .agenda-hours {
    width: 60px;
    flex: 0 0 60px;
    box-sizing: border-box;
}
.operations-agenda-scroll .agenda-day-header,
.operations-agenda-scroll .agenda-day-col {
    width: calc((100% - 60px) / 7);
    flex: 0 0 calc((100% - 60px) / 7);
    box-sizing: border-box;
}
.operations-agenda-scroll .agenda-grid-corner,
.operations-agenda-scroll .agenda-day-header { min-height: 58px; }
.operations-empty {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--color-faint);
    text-align: center;
}
.operations-empty > i {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fcf2ee;
    color: #cb8669;
    font-size: 1rem;
}
.operations-empty > span { display: flex; flex-direction: column; gap: 4px; }
.operations-empty strong { color: #151514; font-size: .82rem; }
.operations-empty small { color: var(--color-faint); font-size: .7rem; }
.operations-empty .btn { margin: 8px 0 0; }
.operations-empty--compact {
    min-height: auto;
    flex-direction: row;
    justify-content: flex-start;
    border-top: 1px solid #f5efed;
    text-align: left;
}
.operations-text-link {
    color: var(--color-accent-text);
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
}
.operations-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid #f2e9e6;
    background: #fefaf9;
}
.operations-filter-bar select {
    width: auto;
    min-width: 160px;
    flex: 0 1 auto;
    margin: 0;
    background-color: #fff;
}
.operations-search-field {
    display: flex;
    min-width: 220px;
    flex: 1 1 280px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid var(--color-surface-border);
    border-radius: 7px;
    background: #fff;
    color: var(--color-faint);
}
.operations-search-field input {
    min-width: 0;
    flex: 1;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.operations-filter-bar .btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    margin: 0;
}
.operations-clear-filter { color: var(--color-faint); font-size: .7rem; font-weight: 700; }
.operations-ticket-list { display: flex; flex-direction: column; }
.operations-ticket-list > a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 19px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.operations-ticket-list > a:last-child { border-bottom: 0; }
.operations-ticket-list > a:hover { background: #fffaf8; }
.operations-ticket-priority {
    width: 4px;
    height: 34px;
    flex: 0 0 4px;
    border-radius: 99px;
    background: #dcccc5;
}
.operations-ticket-priority.is-high { background: #e55454; }
.operations-ticket-priority.is-normal { background: #e37647; }
.operations-ticket-priority.is-low { background: #ada49b; }
.operations-ticket-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.operations-ticket-copy > span { display: flex; align-items: center; gap: 7px; }
.operations-ticket-copy strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.operations-ticket-copy small { overflow: hidden; color: var(--color-faint); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.operations-new-badge {
    padding: 3px 6px;
    border-radius: 999px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: .56rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}
.operations-ticket-meta {
    display: flex;
    flex: 0 0 125px;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.operations-status {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: .58rem;
    font-style: normal;
    font-weight: 800;
    text-transform: capitalize;
}
.operations-status.is-open { background: #fff7dc; color: #a78000; }
.operations-status.is-in_progress { background: #fef1eb; color: var(--color-accent-text); }
.operations-status.is-resolved { background: #e8f8ef; color: var(--color-success-text); }
.operations-ticket-meta small { color: var(--color-faint); font-size: .64rem; }
.operations-ticket-meta small.is-overdue { color: #cf4141; font-weight: 800; }
.operations-ticket-list > a > i { color: var(--color-faint); font-size: .65rem; }
.operations-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 15px;
    border-top: 1px solid #f2e9e6;
}
.operations-pagination a,
.operations-pagination strong {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #7f7468;
    font-size: .7rem;
    text-decoration: none;
}
.operations-pagination a:hover { background: #fcf3f0; }
.operations-pagination strong { background: var(--color-accent); color: var(--color-on-accent); }
.team-summary article:nth-child(2) { flex-grow: 1.35; }
.team-summary-email { font-size: .82rem !important; }
.team-workspace-columns { margin-bottom: 0; }
.team-members-panel { flex: 1 1 68%; }
.team-guidance {
    display: flex;
    flex: 0 1 32%;
    flex-direction: column;
    gap: 16px;
}
.team-member-list { display: flex; flex-direction: column; }
.team-member-list > article {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 19px;
    border-bottom: 1px solid #f5efed;
}
.team-member-list > article:last-child { border-bottom: 0; }
.team-member-avatar {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: .8rem;
    font-weight: 800;
}
.team-member-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.team-member-copy > span { display: flex; align-items: center; gap: 7px; }
.team-member-copy strong { overflow: hidden; color: #151514; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.team-member-copy em {
    padding: 3px 6px;
    border-radius: 999px;
    background: #e8f8ef;
    color: var(--color-success-text);
    font-size: .55rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}
.team-member-copy small { color: var(--color-faint); font-size: .67rem; }
.team-member-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}
.team-member-actions form,
.team-member-actions .add-file-trigger { margin: 0; }
.team-member-actions .btn {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0 10px;
    font-size: .66rem;
}
.team-remove-action {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid #f0d9d9;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
    color: #cb4848;
}
.team-remove-action:hover { background: #fff4f4; }
.team-remove-action:disabled { opacity: .35; cursor: not-allowed; }
.team-password-menu { width: 280px; padding: 14px; }
.team-password-menu form { display: flex; flex-direction: column; gap: 8px; }
.team-password-menu label { margin: 0; font-size: .71rem; }
.team-password-menu input,
.team-password-menu button { width: 100%; margin: 0; }
.team-guidance-list { display: flex; flex-direction: column; }
.team-guidance-list article {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 17px;
    border-bottom: 1px solid #f5efed;
}
.team-guidance-list article:last-child { border-bottom: 0; }
.team-guidance-list article > span {
    display: inline-flex;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.team-guidance-list article > span.is-blue { background: var(--color-line); color: var(--color-text); }
.team-guidance-list article > span.is-green { background: #e8f8ef; color: #189f59; }
.team-guidance-list article > span.is-amber { background: #fff7db; color: #b99009; }
.team-guidance-list strong { color: #151514; font-size: .75rem; }
.team-guidance-list p { margin: 4px 0 0; color: var(--color-faint); font-size: .67rem; line-height: 1.45; }
.team-add-card {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 15px;
    border: 1px solid #fbdbce;
    border-radius: 12px;
    background: #fff8f5;
    box-shadow: none;
    color: #151514;
    text-align: left;
}
.team-add-card > span {
    display: inline-flex;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #feebe3;
    color: var(--color-accent-text);
}
.team-add-card > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.team-add-card strong { font-size: .75rem; }
.team-add-card p { margin: 0; color: var(--color-faint); font-size: .65rem; }
.team-add-card > i { color: #bf8871; font-size: .7rem; }
.team-security-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 13px 0 0;
    padding: 10px;
    border-radius: 8px;
    background: #fef5f1;
    color: #936551;
    font-size: .68rem;
    line-height: 1.45;
}
.totp-setup-body { display: flex; flex-wrap: wrap; gap: 22px; padding: 20px; }
.totp-qr {
    display: flex;
    width: 180px;
    height: 180px;
    flex: 0 0 180px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    background: #fff;
}
.totp-setup-manual { display: flex; min-width: 220px; flex: 1 1 260px; flex-direction: column; gap: 6px; }
.totp-setup-manual label { color: var(--color-faint); font-size: .63rem; font-weight: 700; }
.totp-setup-manual input[readonly] { font-family: ui-monospace, monospace; letter-spacing: .03em; }
.totp-confirm-form { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.totp-manage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 20px; }
.appointment-create-workspace { max-width: 1120px; }
.appointment-create-layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.appointment-form-panel { min-width: 0; flex: 1 1 68%; }
.appointment-create-sidebar {
    display: flex;
    min-width: 290px;
    flex: 0 1 32%;
    flex-direction: column;
    gap: 16px;
}
.appointment-create-form { margin: 0; }
.appointment-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #f2ebe8;
}
.appointment-form-section > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.appointment-form-section > label > span,
.appointment-form-row label > span { color: #70665c; font-size: .73rem; font-weight: 700; }
.appointment-form-section label span em { color: var(--color-faint); font-size: .62rem; font-style: normal; font-weight: 500; }
.appointment-form-section input,
.appointment-form-section textarea,
.appointment-form-section select { margin: 0; }
.appointment-section-label {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 1px;
}
.appointment-section-label > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.appointment-section-label > span.is-violet { background: #fef2ed; color: #db7c53; }
.appointment-section-label > span.is-green { background: #e8f8ef; color: #189f59; }
.appointment-section-label > div { display: flex; flex-direction: column; gap: 2px; }
.appointment-section-label strong { color: #151514; font-size: .78rem; }
.appointment-section-label small { color: var(--color-faint); font-size: .67rem; }
.appointment-form-row {
    display: flex;
    align-items: flex-end;
    gap: 11px;
}
.appointment-form-row > label {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.appointment-form-row .appointment-date-field { flex-grow: 1.35; }
.appointment-invite-option {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
    padding: 12px;
    border: 1px solid #efe4df;
    border-radius: 9px;
    background: #fefaf9;
    cursor: pointer;
}
.appointment-invite-option input { width: auto; flex: 0 0 auto; margin: 2px 0 0; }
.appointment-invite-option > span { display: flex; flex-direction: column; gap: 3px; }
.appointment-invite-option > span strong { color: #151514; font-size: .73rem; }
.appointment-invite-option > span small { color: var(--color-faint); font-size: .65rem; font-weight: 400; }
.appointment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 18px 20px;
}
.appointment-form-actions .btn,
.appointment-form-actions button {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.appointment-context-card > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 17px;
}
.appointment-context-card > div > span {
    display: inline-flex;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fff7db;
    color: #b99009;
}
.appointment-context-card > div > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.appointment-context-card strong { overflow: hidden; color: #151514; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.appointment-context-card small { color: var(--color-faint); font-size: .65rem; }
.appointment-context-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 17px;
    border-top: 1px solid #f5efed;
    color: var(--color-accent-text);
    font-size: .69rem;
    font-weight: 800;
    text-decoration: none;
}
.appointment-guidance-list { display: flex; flex-direction: column; }
.appointment-guidance-list article {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 17px;
    border-bottom: 1px solid #f5efed;
}
.appointment-guidance-list article:last-child { border-bottom: 0; }
.appointment-guidance-list article > span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: .62rem;
    font-weight: 800;
}
.appointment-guidance-list article > div { display: flex; flex-direction: column; gap: 3px; }
.appointment-guidance-list strong { color: #151514; font-size: .72rem; }
.appointment-guidance-list p { margin: 0; color: var(--color-faint); font-size: .64rem; line-height: 1.4; }
.appointment-private-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid #efe4df;
    border-radius: 11px;
    background: #fefaf9;
    color: #85796c;
}
.appointment-private-note > i { color: #af8270; }
.appointment-private-note > span { display: flex; flex-direction: column; gap: 3px; }
.appointment-private-note strong { color: #4a4543; font-size: .71rem; }
.appointment-private-note small { font-size: .63rem; }

@media (max-width: 1040px) {
    .operations-summary { flex-wrap: wrap; }
    .operations-summary article,
    .operations-summary > a { min-width: 42%; border-bottom: 1px solid #f1eae7; }
    .operations-columns,
    .appointment-create-layout { flex-direction: column; }
    .operations-column,
    .appointment-form-panel,
    .appointment-create-sidebar { width: 100%; min-width: 0; flex-basis: auto; }
}
@media (max-width: 760px) {
    .operations-heading { flex-direction: column; }
    .agenda-request-list article { align-items: flex-start; flex-wrap: wrap; }
    .agenda-request-actions { width: 100%; padding-left: 52px; }
    .job-status-row { align-items: flex-start; flex-wrap: wrap; }
    .job-status-meta { flex-direction: row; align-items: center; width: 100%; padding-left: 22px; }
    .totp-qr { width: 100%; height: auto; aspect-ratio: 1 / 1; flex-basis: 100%; }
    .operations-ticket-meta { flex-basis: auto; }
    .operations-filter-bar select { min-width: 0; flex: 1 1 180px; }
    .team-member-list > article { flex-wrap: wrap; }
    .team-member-actions { width: 100%; padding-left: 52px; }
    .appointment-form-row { flex-wrap: wrap; }
    .appointment-form-row > label { min-width: 145px; }
}
@media (max-width: 560px) {
    .operations-workspace { padding-top: 22px; }
    .operations-title { align-items: flex-start; }
    .operations-title-icon { width: 43px; height: 43px; flex-basis: 43px; }
    .operations-title h1 { font-size: 1.55rem; }
    .operations-primary-action { width: 100%; }
    .operations-summary { flex-direction: column; }
    .operations-summary article,
    .operations-summary > a { min-width: 0; border-right: 0; }
    .agenda-calendar-heading { align-items: flex-start; flex-direction: column; }
    .agenda-request-actions { padding-left: 0; }
    .agenda-request-actions form,
    .agenda-request-actions button,
    .agenda-request-actions .btn { flex: 1; }
    .operations-ticket-list > a { align-items: flex-start; }
    .operations-ticket-meta { display: none; }
    .operations-ticket-list > a > i { margin-top: 9px; }
    .team-member-actions { padding-left: 0; }
    .team-member-actions .add-file-trigger,
    .team-member-actions .btn { flex: 1; }
    .team-member-actions .btn { width: 100%; }
    .appointment-form-row { flex-direction: column; align-items: stretch; }
    .appointment-form-row > label { width: 100%; min-width: 0; }
    .appointment-form-actions { flex-direction: column-reverse; }
    .appointment-form-actions .btn,
    .appointment-form-actions button { width: 100%; }
}

/* Agency overview — a compact control centre, using flexbox only. */
.agency-overview {
    max-width: 1240px;
    padding-top: 30px;
}
.agency-overview-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}
.agency-overview-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--color-accent-text);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.agency-overview-heading h1 {
    margin: 0;
    color: #2a2827;
    font-size: 2rem;
    letter-spacing: -.035em;
}
.agency-overview-heading p { margin: 6px 0 0; color: var(--color-faint); font-size: .83rem; }
.agency-overview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}
.agency-overview-actions .btn {
    display: inline-flex;
    min-height: 41px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.agency-overview-tabs { margin-bottom: 18px; }
.agency-overview-summary > a.is-active::after { display: none; }
.agency-overview-columns {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.agency-overview-primary { min-width: 0; flex: 1 1 66%; }
.agency-overview-secondary {
    display: flex;
    min-width: 315px;
    flex: 0 1 34%;
    flex-direction: column;
    gap: 22px;
}
.agency-customer-heading .operations-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.agency-customer-search {
    margin: 0;
    padding: 13px 18px;
    border-bottom: 1px solid #f2e9e6;
    background: #fefaf9;
}
.agency-customer-search label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #efe2dc;
    border-radius: 8px;
    background: #fff;
    color: var(--color-faint);
}
.agency-customer-search input {
    min-width: 0;
    flex: 1;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.agency-customer-list {
    display: flex;
    flex-direction: column;
}
.agency-customer-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5efed;
}
.agency-customer-row:last-child { border-bottom: 0; }
.agency-customer-row:hover { background: #fffaf8; }
.agency-customer-row-link {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    color: #302e2d;
    text-decoration: none;
}
.agency-customer-portal-btn { margin: 0; padding: 0 14px 0 0; }
.agency-customer-portal-btn button {
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-muted);
    font-size: .78rem;
}
@media (hover: hover) and (pointer: fine) {
    .agency-customer-portal-btn button:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-line); box-shadow: none; transform: none; }
}
.agency-customer-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.agency-customer-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.agency-customer-copy strong {
    overflow: hidden;
    color: #151514;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-customer-copy small {
    overflow: hidden;
    color: var(--color-faint);
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-customer-project {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 800;
}
.agency-customer-project.is-ready { background: #e8f8ef; color: var(--color-success-text); }
.agency-customer-project.is-missing { background: #fff7db; color: #a78000; }
.agency-customer-number {
    width: 62px;
    flex: 0 0 62px;
    color: var(--color-faint);
    font-size: .67rem;
    text-align: right;
}
.agency-customer-row-link > .fa-chevron-right { color: var(--color-faint); font-size: .64rem; }
.agency-side-empty {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px;
}
.agency-side-empty > span {
    display: inline-flex;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.agency-side-empty > span.is-green { background: #e8f8ef; color: var(--color-success-text); }
.agency-side-empty > div { display: flex; flex-direction: column; gap: 3px; }
.agency-side-empty strong { color: #151514; font-size: .75rem; }
.agency-side-empty p { margin: 0; color: var(--color-faint); font-size: .66rem; }
.agency-today-list,
.agency-work-list { display: flex; flex-direction: column; }
.agency-today-list > a,
.agency-work-list > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    border-bottom: 1px solid #f5efed;
    color: #151514;
    text-decoration: none;
}
.agency-today-list > a:last-child,
.agency-work-list > a:last-child { border-bottom: 0; }
.agency-today-list > a:hover,
.agency-work-list > a:hover { background: #fffaf8; }
.agency-today-list time {
    display: inline-flex;
    width: 45px;
    height: 31px;
    flex: 0 0 45px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: .66rem;
    font-weight: 800;
}
.agency-today-list > a > span,
.agency-work-list > a > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.agency-today-list strong,
.agency-work-list strong {
    overflow: hidden;
    font-size: .73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-today-list small,
.agency-work-list small {
    overflow: hidden;
    color: var(--color-faint);
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-today-list > a > i,
.agency-work-list > a > i { color: var(--color-faint); font-size: .62rem; }
.agency-work-priority {
    width: 4px;
    height: 31px;
    flex: 0 0 4px;
    border-radius: 99px;
    background: #e37647;
}
.agency-work-priority.is-high { background: #e55454; }
.agency-work-priority.is-low { background: #b7afa7; }
.agency-work-list em { color: inherit; font-style: normal; }
.agency-work-list em.is-overdue { color: #cf4141; font-weight: 800; }
.agency-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    border-top: 1px solid #f5efed;
    color: var(--color-accent-text);
    font-size: .68rem;
    font-weight: 800;
    text-decoration: none;
}
.agency-quick-actions {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.agency-quick-actions > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid #f5efed;
    color: #151514;
    text-decoration: none;
}
.agency-quick-actions > a:last-child { border-bottom: 0; }
.agency-quick-actions > a:hover { background: #fffaf8; }
.agency-quick-actions > a > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.agency-quick-actions > a > span.is-blue { background: var(--color-line); color: var(--color-text); }
.agency-quick-actions > a > span.is-violet { background: #fef2ed; color: #db7c53; }
.agency-quick-actions > a > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.agency-quick-actions strong { font-size: .72rem; }
.agency-quick-actions small { color: var(--color-faint); font-size: .63rem; }
.agency-quick-actions > a > i { color: var(--color-faint); font-size: .65rem; }
.agency-search-results { overflow: hidden; }

@media (max-width: 1040px) {
    .agency-overview-columns { flex-direction: column; }
    .agency-overview-primary,
    .agency-overview-secondary { width: 100%; min-width: 0; flex-basis: auto; }
}
@media (max-width: 700px) {
    .agency-overview-heading { flex-direction: column; }
    .agency-overview-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .agency-overview { padding-top: 22px; }
    .agency-overview-heading h1 { font-size: 1.55rem; }
    .agency-overview-actions,
    .agency-overview-actions .btn { width: 100%; }
    .agency-customer-project,
    .agency-customer-number { display: none; }
}

.agency-module-page { max-width: 1200px; }
.agency-module-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.agency-module-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}
.agency-module-title .project-link-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 1rem;
}
.agency-module-title h1 {
    margin: 0;
    color: #2a2827;
    font-size: 1.8rem;
    letter-spacing: -.03em;
}
.agency-module-title p { margin: 6px 0 0; color: var(--color-faint); font-size: .78rem; }
.agency-module-placement {
    display: flex;
    max-width: 310px;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 10px;
}
.agency-module-placement > i {
    display: inline-flex;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.agency-module-placement > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.agency-module-placement strong { font-size: .7rem; }
.agency-module-placement small { font-size: .61rem; line-height: 1.4; }
.agency-module-placement.is-placed { border-color: #ccebd9; background: #f0faf4; color: var(--color-success-text); }
.agency-module-placement.is-placed > i { background: #dff5e8; }
.agency-module-placement.is-missing { border-color: #f0e3ba; background: #fffbee; color: #98770a; }
.agency-module-placement.is-missing > i { background: #fff5d2; }
.agency-module-layout { align-items: stretch; }
.agency-module-layout .portal-module-list { min-height: 560px; }
.agency-module-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border-bottom: 1px solid #f2e9e5;
}
.agency-module-list-heading > span { display: flex; flex-direction: column; gap: 3px; }
.agency-module-list-heading strong { color: #151514; font-size: .78rem; }
.agency-module-list-heading small { color: var(--color-faint); font-size: .65rem; }
.agency-module-list-empty {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 18px;
    color: var(--color-faint);
    font-size: .7rem;
    text-align: center;
}
.agency-module-list-empty i { color: #dcb6a6; font-size: 1.25rem; }
.agency-module-editor { padding: 0; }
.agency-module-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 21px;
    border-bottom: 1px solid #f2e9e6;
}
.agency-module-editor-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.agency-module-editor-heading span { color: var(--color-faint); font-size: .63rem; font-weight: 700; text-transform: uppercase; }
.agency-module-editor-heading h2 { margin: 0; overflow: hidden; color: #151514; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.agency-module-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0;
    padding: 21px;
}
.agency-module-form > label,
.agency-module-form .portal-form-pair > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.agency-module-form label > span { color: #70665c; font-size: .71rem; font-weight: 700; }
.agency-module-form input,
.agency-module-form textarea { margin: 0; }
.agency-module-form > button {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin: 3px 0 0;
}
.agency-module-actions {
    margin: 0 21px;
    padding: 17px 0 21px;
}
.agency-module-actions > span {
    width: 100%;
    color: var(--color-faint);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}
.agency-module-delete { margin-left: auto !important; }
.agency-module-delete button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.agency-booking-summary { margin-top: 0; }
.agency-booking-requests { margin-top: 22px; }
.agency-booking-service-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 17px;
    border-bottom: 1px solid #f2e9e6;
    background: #fefaf9;
}
.agency-booking-service-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}
.agency-booking-service-form label span { color: #70665c; font-size: .68rem; font-weight: 700; }
.agency-booking-service-form input,
.agency-booking-service-form textarea,
.agency-booking-service-form select { margin: 0; background: #fff; }
.agency-booking-service-form button {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    margin: 0;
}
.agency-booking-service-list,
.agency-booking-request-list { display: flex; flex-direction: column; }
.agency-booking-service-list article {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid #f5efed;
}
.agency-booking-service-list article:last-child { border-bottom: 0; }
.agency-booking-service-icon {
    display: inline-flex;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.agency-booking-service-list article > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.agency-booking-service-list strong { color: #151514; font-size: .72rem; }
.agency-booking-service-list small { overflow: hidden; color: var(--color-faint); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.agency-booking-service-list form { margin: 0; }
.agency-booking-delete {
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #c64a4a;
}
.agency-booking-request-list article {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid #f5efed;
}
.agency-booking-request-list article:last-child { border-bottom: 0; }
.agency-booking-request-date {
    display: inline-flex;
    width: 41px;
    height: 43px;
    flex: 0 0 41px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.agency-booking-request-date strong { font-size: .86rem; line-height: 1; }
.agency-booking-request-date small { margin-top: 2px; color: inherit; font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.agency-booking-request-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.agency-booking-request-copy > span { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.agency-booking-request-copy strong { color: #151514; font-size: .76rem; }
.agency-booking-request-copy small { color: var(--color-faint); font-size: .65rem; }
.agency-booking-request-copy a { color: #b0562f; font-size: .65rem; text-decoration: none; }
.agency-booking-request-copy p { margin: 4px 0 0; color: #807468; font-size: .67rem; line-height: 1.45; }

/* ── Customer onboarding / website brief ───────────────────────────────
   This flow intentionally uses flexbox throughout. The same components
   render on the full onboarding page and inside the customer modal. */
.onboarding-page { scroll-behavior: smooth; }
.onboarding-app-body {
    max-width: 1420px;
    padding: 28px 34px 56px;
}
.onboarding-back { margin: 0 0 18px; }
.onboarding-app-body .wizard-steps {
    margin-bottom: 30px;
    padding: 14px 18px;
    border: 1px solid #f1e1da;
    border-radius: 14px;
    background: #fff;
}
.onboarding-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 26px;
}
.onboarding-heading > div:first-child { max-width: 790px; }
.onboarding-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--color-accent-text);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.onboarding-heading h1 {
    margin: 0;
    color: #2a2827;
    font-size: clamp(1.65rem, 2.5vw, 2.35rem);
    line-height: 1.12;
}
.onboarding-heading p {
    max-width: 730px;
    margin: 10px 0 0;
    color: #908477;
    font-size: .88rem;
    line-height: 1.65;
}
.onboarding-progress {
    flex: 0 0 245px;
    padding: 16px 18px;
    border: 1px solid #f1e1da;
    border-radius: 13px;
    background: #fff;
}
.onboarding-progress > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: var(--color-faint);
    font-size: .68rem;
    font-weight: 700;
}
.onboarding-progress > span strong {
    color: var(--color-accent-text);
    font-size: 1.18rem;
}
.onboarding-progress > i {
    display: block;
    height: 6px;
    margin: 10px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #f7ece8;
}
.onboarding-progress > i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ff5a1f;
    transition: width .2s ease;
}
.onboarding-progress > small {
    color: var(--color-faint);
    font-size: .62rem;
}
.onboarding-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.onboarding-sections {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 20px;
}
.onboarding-guide {
    position: sticky;
    top: 88px;
    display: flex;
    flex: 0 0 270px;
    flex-direction: column;
    padding: 22px;
    border: 1px solid #f1e1da;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(46, 38, 35, .05);
}
.onboarding-guide-icon {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 11px;
    background: #fff7db;
    color: #ae880b;
}
.onboarding-guide h2 {
    margin: 0;
    padding: 0;
    border: 0;
    color: #302e2d;
    font-size: .92rem;
}
.onboarding-guide > p {
    margin: 8px 0 18px;
    color: var(--color-faint);
    font-size: .72rem;
    line-height: 1.6;
}
.onboarding-guide nav {
    display: flex;
    flex-direction: column;
    margin: 0 -8px 18px;
}
.onboarding-guide nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 8px;
    border-radius: 8px;
    color: #72685e;
    font-size: .69rem;
    font-weight: 700;
    text-decoration: none;
}
.onboarding-guide nav a:hover { background: #fef3ef; color: var(--color-accent-text); }
.onboarding-guide nav i { width: 15px; color: #c4886e; text-align: center; }
.onboarding-guide-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px;
    border-radius: 10px;
    background: #fdf7f4;
}
.onboarding-guide-note strong { color: #4a4543; font-size: .69rem; }
.onboarding-guide-note span { color: var(--color-faint); font-size: .62rem; line-height: 1.45; }

.discovery-section {
    scroll-margin-top: 90px;
    padding: 24px;
    border: 1px solid #f1e1da;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(46, 38, 35, .035);
}
.discovery-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 19px;
    border-bottom: 1px solid #f4ebe8;
}
.discovery-section-icon {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.discovery-section-header > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.discovery-section-header small {
    margin-bottom: 3px;
    color: var(--color-accent-text);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.discovery-section-header strong {
    color: #302e2d;
    font-size: .96rem;
}
.discovery-section-header p {
    max-width: 700px;
    margin: 5px 0 0;
    color: var(--color-faint);
    font-size: .7rem;
    line-height: 1.5;
}
.discovery-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 18px;
}
.discovery-field {
    display: flex;
    min-width: 240px;
    flex: 1 1 calc(50% - 9px);
    flex-direction: column;
}
.discovery-field--wide { flex-basis: 100%; }

/* Repeat blocks — one bordered card per service, so a twelve-field block
   reads as a unit rather than dissolving into the surrounding grid. */
.discovery-repeat {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.discovery-repeat-row {
    padding: 14px 16px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg);
}
.discovery-repeat-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
}
.discovery-repeat-row-header strong {
    color: #4a4543;
    font-size: .72rem;
    font-weight: 750;
}
.discovery-repeat-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
}
.discovery-repeat-field {
    display: flex;
    min-width: 200px;
    flex: 1 1 calc(50% - 7px);
    flex-direction: column;
}
.discovery-repeat-field--wide { flex-basis: 100%; }
.discovery-repeat-field > label {
    margin: 0 0 5px;
}
.discovery-repeat-field > label strong {
    color: var(--color-muted);
    font-size: .66rem;
    font-weight: 700;
}
.discovery-repeat-field input,
.discovery-repeat-field textarea,
.discovery-repeat-field select {
    box-sizing: border-box;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: #fff;
    font: inherit;
    font-size: .72rem;
}
.discovery-repeat-field textarea {
    min-height: 52px;
    resize: vertical;
}
.discovery-field > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 8px;
}
.discovery-field > label strong,
.discovery-field legend {
    color: #4a4543;
    font-size: .72rem;
    font-weight: 750;
}
.discovery-field > label small,
.discovery-hint {
    margin: 0;
    color: var(--color-faint);
    font-size: .62rem;
    font-weight: 500;
    line-height: 1.45;
}
.discovery-field input,
.discovery-field textarea,
.discovery-field select {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border-color: #ebdbd4;
    background: #fff;
    color: #151514;
    font-size: .76rem;
}
.discovery-field textarea {
    min-height: 94px;
    resize: vertical;
    line-height: 1.55;
}
.discovery-field input:focus,
.discovery-field textarea:focus,
.discovery-field select:focus {
    outline: none;
    border-color: #f19168;
    box-shadow: 0 0 0 3px rgba(242, 85, 18, .1);
}
.discovery-field fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.discovery-field legend { margin-bottom: 4px; }
.discovery-hint { margin-bottom: 9px; }
.discovery-choices,
.discovery-multi-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.discovery-choice {
    display: flex;
    min-width: 175px;
    flex: 1 1 175px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid #eee1db;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.discovery-choice:hover,
.discovery-choice.is-selected {
    border-color: #f1a07d;
    background: #fef6f3;
}
.discovery-choice.is-selected { box-shadow: inset 0 0 0 1px #f1a07d; }
.discovery-choice > input,
.discovery-multi-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.discovery-choice-icon {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.discovery-choice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.discovery-choice-copy strong { color: #151514; font-size: .69rem; }
.discovery-choice-copy small { color: var(--color-faint); font-size: .59rem; font-weight: 500; line-height: 1.35; }
.discovery-palette {
    display: flex;
    width: 46px;
    height: 30px;
    flex: 0 0 46px;
    overflow: hidden;
    border: 1px solid rgba(46, 38, 35, .08);
    border-radius: 8px;
}
.discovery-palette i { flex: 1 1 0; }
.discovery-multi-option {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid #eee1db;
    border-radius: 999px;
    background: #fff;
    color: #72685e;
    font-size: .66rem;
    font-weight: 700;
    cursor: pointer;
}
.discovery-multi-option:hover,
.discovery-multi-option.is-selected {
    border-color: #f1a07d;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.discovery-color-control {
    display: flex;
    align-items: center;
    gap: 9px;
}
.discovery-color-swatch {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #e6d5cd;
    border-radius: 9px;
    background-color: #f7f3f2;
    background-image:
        linear-gradient(45deg, #e9e0dc 25%, transparent 25%),
        linear-gradient(-45deg, #e9e0dc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e9e0dc 75%),
        linear-gradient(-45deg, transparent 75%, #e9e0dc 75%);
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    background-size: 10px 10px;
}
.discovery-color-control input {
    min-width: 0;
    flex: 1 1 auto;
    font-family: var(--font-mono);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.onboarding-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid #f1e1da;
    border-radius: 14px;
    background: #fff;
}
.onboarding-actions > span {
    display: flex;
    align-items: center;
    gap: 15px;
}
.onboarding-actions small { color: var(--color-faint); font-size: .63rem; }
.onboarding-actions button { display: flex; align-items: center; gap: 8px; margin: 0; }

.modal-box--onboarding {
    max-width: 1050px;
    padding: 22px;
}
.modal-box--onboarding > .modal-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f2e9e5;
}
.modal-box--onboarding > .modal-header p {
    margin: 4px 0 0;
    color: var(--color-faint);
    font-size: .7rem;
}
.modal-box--onboarding form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal-box--onboarding .discovery-section {
    padding: 20px;
    box-shadow: none;
}
.modal-box--onboarding .customer-modal-actions {
    position: sticky;
    bottom: -22px;
    z-index: 2;
    margin: 0 -22px -22px;
    padding: 15px 22px;
    border-top: 1px solid #f1e1da;
    background: #fff;
}

@media (max-width: 980px) {
    .onboarding-layout { flex-direction: column; }
    .onboarding-guide {
        position: static;
        width: auto;
        flex: 0 0 auto;
        order: -1;
    }
    .onboarding-guide nav { flex-direction: row; flex-wrap: wrap; }
    .onboarding-guide nav a { flex: 1 1 180px; }
}

@media (max-width: 720px) {
    .onboarding-app-body { padding: 20px 16px 40px; }
    .onboarding-heading { align-items: stretch; flex-direction: column; gap: 18px; }
    .onboarding-progress { flex-basis: auto; }
    .onboarding-app-body .wizard-steps {
        align-items: flex-start;
        overflow-x: auto;
    }
    .wizard-step-label { white-space: nowrap; }
    .discovery-section { padding: 18px 15px; }
    .discovery-field { min-width: 100%; flex-basis: 100%; }
    .discovery-choice { min-width: 100%; flex-basis: 100%; }
    .onboarding-actions { align-items: stretch; flex-direction: column-reverse; }
    .onboarding-actions > span { align-items: stretch; flex-direction: column; gap: 8px; }
    .onboarding-actions button { justify-content: center; }
    .modal-box--onboarding { padding: 15px; }
    .modal-box--onboarding .customer-modal-actions {
        bottom: -15px;
        margin: 0 -15px -15px;
        padding: 12px 15px;
    }
}

/* ── Customer portal requests ───────────────────────────────────────────
   Customer-visible request threads. Flexbox is used for the full layout,
   summaries, list rows and conversation timeline. */
.portal-nav-count {
    min-width: 20px;
    margin-left: auto;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}
.portal-body .portal-sidebar .site-nav > a.active .portal-nav-count , .portal-body .portal-sidebar .portal-nav-group > a.active .portal-nav-count { background: #fff; color: var(--color-accent-text); }
.portal-request-status { text-decoration: none; }
.portal-request-status > i { margin-left: auto; color: var(--color-faint); font-size: .65rem; }
.portal-request-status:hover { background: #fdf8f6; }

.portal-requests-page {
    max-width: 1240px !important;
    padding-bottom: 56px !important;
}
.portal-requests-heading { align-items: center; }
.portal-primary-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #ff5a1f;
    border-radius: 8px;
    background: #ff5a1f;
    color: #fff;
    font-size: .7rem;
    font-weight: 750;
    box-shadow: 0 5px 12px rgba(242, 85, 18, .16);
}
.portal-primary-action:hover { background: #de4a0a; }
.portal-request-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 20px;
}
.portal-request-summary article {
    display: flex;
    min-width: 220px;
    min-height: 105px;
    flex: 1 1 220px;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .04);
    box-sizing: border-box;
}
.portal-request-summary article > span {
    display: flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}
.portal-request-summary article > span.is-blue { background: var(--color-line); color: var(--color-text); }
.portal-request-summary article > span.is-green { background: #e8f8ef; color: #189f59; }
.portal-request-summary article > span.is-violet { background: #fef2ed; color: #db7c53; }
.portal-request-summary article > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.portal-request-summary small { color: var(--color-faint); font-size: .64rem; font-weight: 700; }
.portal-request-summary strong { margin: 2px 0; color: #302e2d; font-size: 1.35rem; line-height: 1; }
.portal-request-summary em { color: var(--color-faint); font-size: .6rem; font-style: normal; }
.portal-request-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid var(--portal-line);
    border-radius: 10px;
    background: #fff;
}
.portal-request-filters a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 7px;
    color: #807569;
    font-size: .66rem;
    font-weight: 750;
    text-decoration: none;
}
.portal-request-filters a:hover { background: #fdf6f3; color: var(--color-accent-text); }
.portal-request-filters a.is-active { background: #fef1eb; color: var(--color-accent-text); }
.portal-request-filters span {
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(242, 85, 18, .09);
    font-size: .56rem;
    line-height: 1.2;
    text-align: center;
}
.portal-requests-layout {
    display: flex;
    min-height: 610px;
    align-items: stretch;
    gap: 16px;
}
.portal-request-list-panel,
.portal-request-thread-panel {
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .04);
}
.portal-request-list-panel {
    display: flex;
    min-width: 330px;
    flex: 0 0 390px;
    flex-direction: column;
}
.portal-request-list-panel > header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-bottom: 1px solid var(--portal-line);
}
.portal-request-list-panel > header strong { color: #151514; font-size: .73rem; }
.portal-request-list-panel > header span {
    min-width: 22px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fef3ef;
    color: var(--color-accent-text);
    font-size: .58rem;
    font-weight: 800;
    text-align: center;
}
.portal-request-list {
    display: flex;
    flex-direction: column;
}
.portal-request-list > a {
    display: flex;
    min-height: 102px;
    align-items: flex-start;
    gap: 11px;
    padding: 15px;
    border-bottom: 1px solid var(--portal-line);
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}
.portal-request-list > a:last-child { border-bottom: 0; }
.portal-request-list > a:hover { background: #fffaf8; }
.portal-request-list > a.is-selected { background: #fef3ef; box-shadow: inset 3px 0 0 #ff5a1f; }
.portal-request-list-icon {
    display: flex;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.portal-request-list-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}
.portal-request-list-copy strong {
    overflow: hidden;
    color: #151514;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-request-list-copy small {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: var(--color-faint);
    font-size: .61rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.portal-request-list-copy time { margin-top: 7px; color: var(--color-faint); font-size: .56rem; }
.portal-request-list-meta {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}
.portal-request-list-meta small { color: var(--color-faint); font-size: .54rem; }
.portal-request-list-meta .portal-request-badge { font-size: .55rem; font-style: normal; white-space: nowrap; }
.portal-request-list-empty,
.portal-request-thread-empty {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 42px 25px;
    text-align: center;
}
.portal-request-list-empty > span,
.portal-request-thread-empty > span {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 13px;
    background: #fef3ee;
    color: var(--color-accent-text);
}
.portal-request-list-empty strong,
.portal-request-thread-empty strong { color: #151514; font-size: .75rem; }
.portal-request-list-empty p,
.portal-request-thread-empty p { max-width: 280px; margin: 6px 0 0; color: var(--color-faint); font-size: .63rem; line-height: 1.5; }

.portal-request-thread-panel {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}
.portal-request-thread-header {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-request-thread-header > div { min-width: 0; }
.portal-request-thread-header span { color: var(--color-accent-text); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.portal-request-thread-header h2 {
    margin: 3px 0 0;
    overflow: hidden;
    color: #302e2d;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-request-thread-header p { margin: 4px 0 0; color: var(--color-faint); font-size: .58rem; }
.portal-request-thread-header > em { flex: 0 0 auto; font-size: .58rem; font-style: normal; }
.portal-request-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    background: #fefaf9;
}
.portal-request-thread article {
    display: flex;
    max-width: 82%;
    align-items: flex-start;
    gap: 10px;
}
.portal-request-thread article.is-customer { align-self: flex-end; flex-direction: row-reverse; }
.portal-request-author {
    display: flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #302e2d;
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
}
.portal-request-thread article.is-customer .portal-request-author { background: #ff5a1f; }
.portal-request-thread article > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #f1e1da;
    border-radius: 4px 12px 12px;
    background: #fff;
}
.portal-request-thread article.is-customer > div {
    border-color: #fdddcf;
    border-radius: 12px 4px 12px 12px;
    background: #fef3ee;
}
.portal-request-thread article header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.portal-request-thread article header strong { color: #151514; font-size: .64rem; }
.portal-request-thread article header time { color: var(--color-faint); font-size: .52rem; white-space: nowrap; }
.portal-request-thread article p { margin: 7px 0 0; color: #70665c; font-size: .68rem; line-height: 1.55; }
.portal-request-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #f1e1da;
    border-radius: 8px;
    background: rgba(255,255,255,.8);
    color: #a1512e;
    text-decoration: none;
}
.portal-request-attachment > span { display: flex; min-width: 0; flex-direction: column; }
.portal-request-attachment strong { overflow: hidden; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-request-attachment small { margin-top: 2px; color: var(--color-faint); font-size: .52rem; }
.portal-request-reply {
    padding: 17px 20px;
    border-top: 1px solid var(--portal-line);
    background: #fff;
}
.portal-request-reply > label { margin: 0 0 7px; color: #4a4543; font-size: .65rem; font-weight: 750; }
.portal-request-reply textarea {
    width: 100%;
    margin: 0;
    border-color: #ecdcd5;
    font-size: .7rem;
    box-sizing: border-box;
    resize: vertical;
}
.portal-request-reply > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
}
.portal-request-reply button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.portal-request-reply > small { display: block; margin-top: 7px; color: #a07d0a; font-size: .57rem; }
.portal-new-request-modal .modal-header p { margin: 4px 0 0; color: var(--color-faint); font-size: .68rem; }
.portal-new-request-modal form { display: flex; flex-direction: column; }
.portal-new-request-modal form > label:not(.portal-file-picker) { margin: 12px 0 6px; color: #4a4543; font-size: .68rem; font-weight: 750; }
.portal-new-request-modal input,
.portal-new-request-modal textarea { margin: 0; }
.portal-file-picker--boxed {
    align-self: flex-start;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed #e8d3ca;
    border-radius: 8px;
    background: #fffaf8;
}

/* Agency ticket visibility controls */
.ticket-note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ticket-note-actions button { margin: 0; }

@media (max-width: 1050px) {
    .portal-requests-layout { flex-direction: column; }
    .portal-request-list-panel { min-width: 0; flex-basis: auto; }
    .portal-request-list { max-height: 360px; overflow-y: auto; }
    .portal-request-thread-panel { min-height: 560px; }
}

@media (max-width: 620px) {
    .portal-requests-heading { align-items: flex-start; }
    .portal-request-summary article { min-width: 100%; }
    .portal-request-filters { overflow-x: auto; }
    .portal-request-list > a { flex-wrap: wrap; }
    .portal-request-list-meta { width: 100%; align-items: center; flex-direction: row; padding-left: 46px; }
    .portal-request-thread article { max-width: 96%; }
    .portal-request-thread article header { align-items: flex-start; flex-direction: column; gap: 2px; }
    .portal-request-reply > div { align-items: stretch; flex-direction: column; }
    .portal-request-reply button { justify-content: center; }
}
.agency-booking-status { flex: 0 0 125px; margin: 0; }
.agency-booking-status select { width: 100%; margin: 0; }

@media (max-width: 860px) {
    .agency-module-heading { flex-direction: column; }
    .agency-module-placement { max-width: none; }
}
@media (max-width: 620px) {
    .agency-module-title { align-items: flex-start; }
    .agency-module-title h1 { font-size: 1.5rem; }
    .agency-module-actions { align-items: stretch; flex-direction: column; }
    .agency-module-actions form,
    .agency-module-actions button { width: 100%; }
    .agency-module-delete { margin-left: 0 !important; }
    .agency-booking-request-list article { flex-wrap: wrap; }
    .agency-booking-status { width: 100%; flex-basis: 100%; padding-left: 53px; }
}

/* Blog layout selection. */
.blog-presentation-panel { margin: 20px 0; overflow: hidden; }
.blog-presentation-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 19px 20px;
}
.blog-presentation-form > label {
    display: flex;
    min-width: 260px;
    flex: 1 1 320px;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.blog-presentation-form > label > span { color: #754f3f; font-size: .72rem; font-weight: 800; }
.blog-presentation-form select { width: 100%; margin: 0; }
.blog-presentation-form small { color: var(--color-faint); font-size: .63rem; line-height: 1.45; }
.blog-presentation-form code {
    padding: 2px 4px;
    border-radius: 4px;
    background: #faf1ee;
    color: #a1512e;
    font-size: .61rem;
}
@media (max-width: 560px) {
    .blog-presentation-form { padding: 16px; }
    .blog-presentation-form > label { min-width: 100%; }
}

/* Website module studio -------------------------------------------------
   These components belong to the redesigned site.php dashboard. Keep the
   layout flexbox-only so it behaves consistently with the rest of the app. */
.module-studio {
    margin: 0 0 22px;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(53, 45, 41, .045);
}
.module-studio-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-bottom: 1px solid #f2e9e6;
}
.module-studio-heading > div { min-width: 0; }
.module-studio-heading h3,
.module-studio-heading h2 {
    margin: 0;
    color: #2d2b2a;
    font-size: 1.18rem;
    letter-spacing: -.02em;
}
.module-studio-heading p {
    max-width: 670px;
    margin: 6px 0 0;
    color: var(--color-faint);
    font-size: .76rem;
    line-height: 1.5;
}
.module-studio-count {
    display: flex;
    min-width: 94px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.module-studio-count strong { color: var(--color-accent-text); font-size: 1.35rem; line-height: 1; }
.module-studio-count small { color: var(--color-faint); font-size: .62rem; font-weight: 700; }
.module-studio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    background: #fffaf8;
}
.module-card {
    display: flex;
    box-sizing: border-box;
    min-width: 285px;
    flex: 1 1 calc(50% - 8px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #efe2dc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(53, 45, 41, .045);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.module-card:hover {
    border-color: #ecd1c6;
    box-shadow: 0 10px 25px rgba(53, 45, 41, .08);
    transform: translateY(-2px);
}
.module-card.is-disabled { opacity: .78; }
.module-card.is-disabled:hover { opacity: 1; }
.module-card-visual {
    min-height: 158px;
    padding: 15px 17px 17px;
    background: #ffffff;
    box-sizing: border-box;
}
.module-card--catalogue .module-card-visual { background: #ffffff; }
.module-card--people .module-card-visual { background: #ffffff; }
.module-card--voices .module-card-visual { background: #ffffff; }
.module-card--answers .module-card-visual { background: #ffffff; }
.module-card--portfolio .module-card-visual { background: #ffffff; }
.module-card--calendar .module-card-visual { background: #ffffff; }
.module-card-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}
.module-card-visual-top > span {
    color: #825745;
    font-size: .59rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.module-card-toggle-form { margin: 0; }
/* An enabled module is status, not a sales preview: its card drops the
   artwork panel and the toggle moves up beside the name. */
.module-card--compact .module-card-title { align-items: center; }
.module-card--compact .module-card-title > div { flex: 1 1 auto; min-width: 0; }
.module-card--compact .module-card-footer { padding-top: 13px; }
.module-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 17px;
}
.module-card-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.module-card-title > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.module-card--people .module-card-title > span,
.module-card--portfolio .module-card-title > span { background: #fef3ee; color: #dc7c53; }
.module-card--voices .module-card-title > span { background: #fff7dc; color: #b68e0a; }
.module-card--answers .module-card-title > span,
.module-card--calendar .module-card-title > span { background: #e8f8ef; color: var(--color-success-text); }
.module-card-title h3 { margin: 0; color: #302e2d; font-size: .86rem; }
.module-card-title p { margin: 5px 0 0; color: var(--color-faint); font-size: .67rem; line-height: 1.45; }
.module-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 17px;
}
.module-card-state {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: #918578;
    font-size: .58rem;
    font-weight: 750;
}
.module-card-state.is-ready { color: var(--color-success-text); }
.module-card-state.is-warning { color: #a17d08; }
.module-card-state.is-off { color: var(--color-faint); }
.module-card-manage {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    color: var(--color-accent-text);
    font-size: .63rem;
    font-weight: 800;
    text-decoration: none;
}
.module-card-hint { flex: 0 0 auto; color: var(--color-faint); font-size: .59rem; }
.module-art {
    position: relative;
    display: flex;
    width: 100%;
    height: 96px;
    overflow: hidden;
    border: 1px solid rgba(166, 113, 90, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 6px 18px rgba(91, 75, 68, .08);
    box-sizing: border-box;
}
.module-art--editorial { flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px 122px 14px 16px; }
.module-art--editorial > span:not(.module-art-image) { display: block; height: 6px; border-radius: 99px; background: #eedad1; }
.module-art--editorial .module-art-kicker { width: 44px; height: 4px; background: #f2966f; }
.module-art--editorial .module-art-headline { width: 70%; height: 8px; background: #46413f; }
.module-art--editorial .module-art-headline.is-long { width: 94%; }
.module-art--editorial .module-art-byline { width: 48%; }
.module-art-image {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    display: flex !important;
    width: 96px;
    height: auto !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    background: #fce5db !important;
    color: #cd886b;
}
.module-art--catalogue { align-items: stretch; gap: 7px; padding: 11px; }
.module-art--catalogue > span {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    color: #ce5b29;
}
.module-art--catalogue b { margin-top: auto; color: #4a4543; font-size: .58rem; }
.module-art--catalogue small { color: #c1a497; font-size: .5rem; }
.module-art--people { align-items: flex-end; padding: 12px 15px; }
.module-person {
    position: absolute;
    bottom: 20px;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fbe0d4;
    color: #e38f6b;
}
.module-person.is-main { left: 18px; width: 58px; height: 58px; }
.module-person.is-second { left: 82px; }
.module-person.is-third { left: 132px; }
.module-people-line { position: absolute; right: 18px; bottom: 47px; width: 30%; height: 6px; border-radius: 99px; background: #eecdbf; }
.module-people-line.is-short { bottom: 32px; width: 22%; background: #f4dfd6; }
.module-art--voices { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 17px; color: #cfa829; }
.module-quote-line { display: block; width: 80%; height: 5px; border-radius: 99px; background: #eadeb8; }
.module-quote-line.is-short { width: 52%; }
.module-rating { display: flex; gap: 3px; margin-top: auto; font-size: .5rem; }
.module-art--answers { flex-direction: column; padding: 7px 12px; }
.module-art--answers > span {
    display: flex;
    min-height: 25px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2ede8;
    color: #3d6151;
}
.module-art--answers > span:last-child { border-bottom: 0; }
.module-art--answers b { font-size: .54rem; }
.module-art--answers small { display: none; }
.module-art--portfolio { flex-wrap: wrap; align-content: flex-start; gap: 7px; padding: 10px; }
.module-project {
    display: flex;
    width: calc(29% - 7px);
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f8e0d6;
    color: #d98967;
}
.module-project.is-large { width: 42%; }
.module-art--portfolio > b { width: 100%; color: #b1694a; font-size: .55rem; }
.module-art--calendar { flex-direction: column; padding: 10px 13px; }
.module-calendar-head,
.module-calendar-days,
.module-calendar-dates { display: flex; align-items: center; }
.module-calendar-head { justify-content: space-between; color: #277b53; font-size: .58rem; }
.module-calendar-days,
.module-calendar-dates { justify-content: space-between; margin-top: 7px; color: #6f8b7d; font-size: .47rem; }
.module-calendar-days > span,
.module-calendar-dates > span { display: inline-flex; width: 20px; align-items: center; justify-content: center; }
.module-calendar-dates .is-selected { height: 20px; border-radius: 50%; background: #23965f; color: #fff; }
.module-art--calendar > small { margin-top: auto; color: #27805a; font-size: .5rem; }
.module-art--agenda { flex-direction: column; justify-content: center; gap: 6px; padding: 9px 13px; }
.module-art--agenda > span { display: flex; align-items: center; gap: 9px; }
.module-art--agenda b {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fbe7c2;
    color: #a86a12;
    font-size: .52rem;
}
.module-art--agenda i { height: 5px; flex: 1; border-radius: 4px; background: #f3dcb4; }
.module-art--agenda i.is-short { flex: 0 0 45%; }

/* Agency pages management --------------------------------------------- */
.admin-pages-page { max-width: 1240px !important; }
.admin-pages-page .portal-pages-summary {
    display: flex;
    flex-wrap: wrap;
}
.admin-pages-page .portal-pages-stat {
    min-width: 240px;
    flex: 1 1 0;
}
.admin-pages-page .portal-pages-stat-icon--amber { background: #fff3da; color: #a66e00; }
.seo-health-badge { gap: 4px; }
.seo-health-badge.is-good { background: #e7f8ed; color: #177748; }
.seo-health-badge.has-warnings { background: #fff2d7; color: #976300; }
.admin-pages-panel { margin-bottom: 22px; }
.admin-pages-list {
    display: flex;
    flex-direction: column;
}
.admin-page-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--portal-line, #ede1dc);
}
.admin-page-row:last-child { border-bottom: 0; }
.admin-page-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
    border-bottom: 0;
}
.admin-page-main .portal-page-row-icon { flex: 0 0 48px; }

/* Google Ads report (src/google-ads-view.php), shared admin + portal.
   Composes the portal-analytics-* components above; only the pieces the
   statistics dashboard doesn't have live here. */
.ads-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: .62rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .01em;
}
.ads-pill--on   { background: #e9f8f0; color: #177748; }
.ads-pill--hold { background: #fff6d8; color: #976300; }
.ads-pill--off  { background: #f1edea; color: #877b6e; }

/* When the Ads figures are from, and the website enquiries panel (2026-09-29). */
.ads-freshness { margin: 0 0 12px; font-size: 13px; color: #6b6259; }
.ads-freshness.is-late { color: #976300; }
.ads-leads { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0 20px 20px; }
.ads-leads div { padding: 12px 14px; border-radius: 10px; background: #f7f4f1; }
.ads-leads dt { font-size: 13px; color: #6b6259; }
.ads-leads dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
@media (min-width: 600px) { .ads-leads { grid-template-columns: repeat(3, 1fr); } }

.ads-table-panel { margin-bottom: 18px; }
.ads-table-scroll { overflow-x: auto; }
.ads-table {
    width: 100%;
    min-width: 680px;
    margin: 0;
    border-collapse: collapse;
}
.ads-table th, .ads-table td {
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--portal-line);
}
.ads-table tbody tr:last-child td { border-bottom: 0; }
.ads-table tbody tr:hover td { background: #fcf9f8; }
.ads-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ads-name {
    color: var(--portal-ink);
    font-weight: 600;
    text-decoration: none;
}
.ads-name:hover { color: var(--portal-blue); }
.ads-channel { display: block; margin-top: 2px; color: var(--portal-muted); font-size: .68rem; }
.ads-keyword { font-weight: 600; }

.ads-drill-heading { margin: 0 0 18px; }
.ads-drill-heading h2 {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.15rem;
}
.ads-breadcrumbs { display: inline-flex; gap: 18px; }
.admin-page-main .portal-page-row-copy { flex: 1 1 auto; }
.admin-page-main .portal-page-traffic { width: 145px; flex: 0 0 145px; }
.admin-page-main .portal-page-views { width: 108px; flex: 0 0 108px; }
.admin-page-main .portal-page-row-chevron { width: 10px; flex: 0 0 10px; }
.admin-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    padding: 13px 15px 13px 5px;
}
.admin-page-actions form { margin: 0; }
.admin-row-action {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #82776b;
    font-size: .62rem;
    font-weight: 750;
    text-decoration: none;
}
.admin-row-action:hover { border-color: #f2ddd4; background: #fef6f3; color: var(--color-accent-text); }
.admin-row-action:disabled { opacity: .32; cursor: not-allowed; }
.admin-row-action.is-danger:hover { border-color: #f0cece; background: #fff1f1; color: #c83d3d; }
.admin-row-action span { display: none; }
.admin-create-panel { margin-top: 22px; overflow: hidden; }
.admin-inline-create-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
    padding: 20px;
}
.admin-inline-create-form > label {
    display: flex;
    min-width: 220px;
    flex: 1 1 280px;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}
.admin-inline-create-form > label > span { color: #754f3f; font-size: .68rem; font-weight: 800; }
.admin-inline-create-form > label em { color: var(--color-faint); font-size: .58rem; font-style: normal; font-weight: 600; }
.admin-inline-create-form input,
.admin-inline-create-form select { width: 100%; margin: 0; box-sizing: border-box; }
.admin-inline-create-form > button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
}
.admin-panel-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0 20px 20px;
    color: #968a7e;
    font-size: .66rem;
}

@media (max-width: 1080px) {
    .module-card { flex-basis: calc(50% - 16px); }
    .admin-page-row { flex-direction: column; }
    .admin-page-actions {
        justify-content: flex-end;
        padding: 0 15px 13px;
    }
    .admin-row-action span { display: inline; }
}
@media (max-width: 720px) {
    .module-studio-heading { align-items: flex-start; flex-direction: column; }
    .module-studio-count { align-items: flex-start; }
    .module-studio-list { padding: 14px; }
    .module-card { min-width: 100%; flex-basis: 100%; }
    .admin-pages-page .portal-pages-stat { min-width: 100%; }
    .admin-page-main {
        min-height: 82px;
        padding: 13px 14px;
    }
    .admin-page-main .portal-page-traffic,
    .admin-page-main .portal-page-views { display: none; }
    .admin-page-actions { justify-content: flex-start; overflow-x: auto; padding-left: 14px; }
    .admin-inline-create-form { align-items: stretch; flex-direction: column; }
    .admin-inline-create-form > label { min-width: 100%; flex-basis: auto; }
    .admin-inline-create-form > button { width: 100%; }
}

/* Site project workspaces ------------------------------------------------
   The project sidebar already defines the left edge of these screens. Let
   every agency-side workspace use the full remaining canvas instead of
   stopping at an old 1040/1200/1240px cap. Customer portal widths remain
   intentionally separate. */
body:not(.portal-body) .site-shell > .site-main > .site-main-inner {
    width: 100%;
    max-width: none !important;
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
}

body:not(.portal-body) .site-shell .publishing-page:not(.publishing-page--portal) {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
}

/* The agency Blog heading does not need decorative editorial artwork. */
.admin-blog-page .blog-workspace-cover {
    display: none;
}

/* Reduced motion.
   The craft floor requires this and the product had no handling at all: zero
   occurrences of prefers-reduced-motion across 344 KB of CSS, against 6
   animations, 21 transitions and one smooth-scroll.

   The !important here is the documented exception rather than a specificity
   fight — this block has to beat every author rule in the file, including the
   inline-styled ones, and that is the standard way the override is written.

   Durations go to .01ms rather than `none` on purpose: an animation that is
   removed outright never fires animationend, and any script waiting on that
   event would hang. Near-zero keeps the event and removes the motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* The row actions used to sit in the row's flex flow, so the metadata column
   ended wherever that strip happened to start: 55px of width for a folder
   (Delete), 86px for an image (Download, Delete), 130px for an HTML file
   (Download, Copy, Delete). Measured right edges 525 / 493 / 449 on the same
   list — "folder", a timestamp and a file size each stopping at a different
   place for no reason the eye can see.

   Revealing them on hover made it worse rather than better: the strip went
   invisible but kept its width, so the raggedness lost its only explanation.

   On a pointer they now overlay the row instead of displacing it. Every row's
   data ends at the same edge, and the buttons float above it when the cursor
   arrives. Without hover they stay in flow, because a permanent overlay would
   sit on top of the file size forever. */
@media (hover: hover) {
    .file-list li[data-file-row] { position: relative; }
    .file-list li[data-file-row] .file-row-actions {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        padding-left: 1.6rem;
        /* Fades the metadata out under the buttons rather than chopping it
           mid-character. */
        background: linear-gradient(to right, transparent, var(--color-surface) 1.6rem);
    }
    .file-list li[data-file-row]:hover .file-row-actions,
    .file-list li[data-file-row]:focus-within .file-row-actions,
    .file-list li[data-file-row].selected .file-row-actions {
        background: linear-gradient(to right, transparent, var(--color-line) 1.6rem);
    }
}

/* The Save button carries the unsaved state: a dot, not a colour change, so it
   reads the same to anyone who cannot separate the two colours. */
[data-save-shortcut].is-dirty::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: .5rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}
/* The fold arrows sit in their own gutter beside the line numbers. */
.CodeMirror-foldgutter { width: 14px; }
.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { color: var(--color-faint); cursor: pointer; }
.CodeMirror-foldgutter-open:hover, .CodeMirror-foldgutter-folded:hover { color: var(--color-accent-text); }

/* ---------------------------------------------------------------------------
   The dropdown component the workspace switcher is built from.

   Wears the same surface as the section rows beside it (white, #eee3df
   hairline, 11px radius, .78rem bold labels, warm hover) so a menu and a tab
   read as the same family. The switcher applies .app-nav--switcher on top for
   the dark bar; see the end of this file.

   The dropdown is absolutely positioned, so nothing in this component may take
   overflow: hidden or auto. That is exactly what clipped the old row.
   --------------------------------------------------------------------------- */
.app-nav { margin-bottom: 18px; }

.app-nav-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 5px;
    border: 1px solid #eee3df;
    border-radius: 11px;
    background: #fff;
    list-style: none;
}

.app-nav-group { position: relative; margin: 0; }

.app-nav-trigger {
    display: inline-flex;
    min-height: 35px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #7f7468;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    /* A group is a <button> when it opens a menu and an <a> when it goes
       somewhere. Both must read as the same control, so the link's
       underline goes and the button's font is inherited. */
    text-decoration: none;
    cursor: pointer;
}
.app-nav-trigger:hover { background: #fdf6f3; color: var(--color-accent-text); }

/* Keyboard focus is the one state a mouse never reveals, so it gets a ring
   rather than only a tint. */
.app-nav-trigger:focus-visible,
.app-nav-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* The group holding the current page, and any open group, read as selected —
   the same fill the old row used for its active tab. */
.app-nav-group.is-current > .app-nav-trigger,
.app-nav-trigger[aria-expanded="true"] {
    background: #fef1eb;
    color: var(--color-accent-text);
}

.app-nav-caret {
    font-size: .58rem;
    opacity: .55;
    transition: transform 160ms cubic-bezier(.2, .7, .3, 1);
}
.app-nav-trigger[aria-expanded="true"] .app-nav-caret { transform: rotate(180deg); }

.app-nav-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    min-width: 13.5rem;
    padding: 5px;
    border: 1px solid #eee3df;
    border-radius: 12px;
    background: #fff;
    /* Offset plus a soft blur — a halo with no offset is decoration, not depth. */
    box-shadow: 0 10px 26px -6px rgba(38, 26, 18, .18), 0 2px 6px -2px rgba(38, 26, 18, .10);
}

/* Animate the reveal only; [hidden] still hides it outright for anyone
   arriving with JS disabled or before the script runs. */
.app-nav-panel:not([hidden]) {
    animation: app-nav-open 150ms cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes app-nav-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.app-nav-item {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border-radius: 8px;
    color: #7f7468;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.app-nav-item:hover { background: #fdf6f3; color: var(--color-accent-text); }
.app-nav-item.is-active { background: #fef1eb; color: var(--color-accent-text); }

/* Icons keep one column so labels align down the menu regardless of glyph. */
.app-nav-item > i,
.app-nav-trigger > i:first-child { width: 1em; text-align: center; }

/* The last two groups would push their panels past the right edge on a narrow
   window; anchor those to the right instead of the left. */
@media (max-width: 640px) {
    .app-nav-group:nth-last-child(-n+2) .app-nav-panel { right: 0; left: auto; }
    .app-nav-trigger { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-nav-panel:not([hidden]) { animation: none; }
    .app-nav-caret { transition: none; }
}

/* ---------------------------------------------------------------------------
   Workspace switcher — the .app-nav dropdown wearing the dark top bar.

   Same component and the same keyboard handling as the section dropdowns;
   only the chrome differs. The panel stays light because it is a popover over
   the page, not part of the bar — which means it has to win back the
   `.top-app-menu a { color: var(--color-bg) }` rule above, or every item in it
   would be near-white text on white.
   --------------------------------------------------------------------------- */
.app-nav--switcher {
    /* Pushes the "logged in as / log out" side to the right without touching
       .top-app-menu's own justify-content, which other pages rely on. */
    margin: 0 auto 0 0;
}

.app-nav--switcher .app-nav-bar {
    padding: 0;
    border: 0;
    background: none;
}

.app-nav--switcher .app-nav-trigger {
    padding: 0 10px 0 0;
    color: var(--color-bg);
    font-size: .82rem;
}
.app-nav--switcher .app-nav-trigger:hover,
.app-nav--switcher .app-nav-trigger[aria-expanded="true"] {
    background: none;
    color: #fff;
}
.app-nav--switcher .app-nav-trigger:focus-visible {
    outline-color: var(--color-bg);
    outline-offset: 2px;
}
.app-nav--switcher .app-nav-caret { opacity: .7; }

.app-nav--switcher .app-nav-panel {
    min-width: 17rem;
    top: calc(100% + 10px);
}

/* Two lines per workspace: what it is, and what lives in it. Worth the space
   here — this switch changes the whole screen, so naming what is behind each
   one is the difference between a confident click and a guess. */
.app-nav--switcher .app-nav-item {
    min-height: 0;
    align-items: flex-start;
    padding: 9px 10px;
    color: #7f7468;
}
.app-nav--switcher .app-nav-item:hover,
.app-nav--switcher .app-nav-item.is-active { color: var(--color-accent-text); }

.app-nav--switcher .app-nav-item > i { margin-top: .15rem; }

.app-nav--switcher .app-nav-item span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.app-nav--switcher .app-nav-item em {
    color: var(--color-faint);
    font-size: .72rem;
    font-style: normal;
    font-weight: 500;
    white-space: normal;
}

@media (max-width: 640px) {
    /* The bar is short here; keep the panel anchored to the bar's own edge
       rather than letting it run off the right of a phone. */
    .app-nav--switcher .app-nav-panel { min-width: 0; width: max(15rem, 60vw); }
}

/* ===========================================================================
   FOUNDATION — spacing, surfaces, and the page gutter.

   Added last so it settles the disagreements above rather than joining them.
   An audit of this file found no spacing custom properties at all: 85 distinct
   margin/padding/gap values, 30 border radii, 35 shadows, and five
   near-identical border greys (#ede1dc #f1e1da #efe2dc #eee3df #f3e2db) that
   make adjacent panels look subtly misaligned. Literal numbers were the cause
   of the "unfinished" read, not the palette.

   Nothing below repaints anything. The warm palette, the type and the orange
   are the good part and are untouched.
   =========================================================================== */

:root {
    /* A 4px base, because the useful middle steps (12, 20, 28) are the ones an
       8-only scale misses — and this file already leans on 12, 14, 18 and 22. */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

    /* The page gutter, which grows with the viewport instead of vanishing
       above 720px. See the .app-body note below. */
    --page-gutter: clamp(var(--space-4), 3vw, var(--space-8));

    /* One border grey, replacing the five that were within two hex digits of
       each other, and one panel radius. */
    --surface-line: #ede1dc;
    --surface-radius: 14px;

    /* Offset plus a soft blur. A zero-offset halo is decoration, not depth. */
    --surface-shadow: 0 5px 14px -4px rgba(53, 45, 41, .07);
}

/* ---- The page gutter -------------------------------------------------------
   This was the single most visible fault. .app-body carried no padding at all,
   and the ONLY padding it ever received was inside @media (max-width: 720px) —
   so the panel had gutters on a phone and none on a laptop, with every
   heading and panel running flush into the browser edge at any desktop width.
   Base padding here; the narrow-screen rule above still overrides it, which is
   now a refinement rather than the only gutter in the product. */
.app-body {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    padding-bottom: var(--space-10);
}

/* The workspace modifiers set only padding-top, so the gutter survives them —
   but they each chose a different top offset (30px / 28px / 34px / 2rem) for
   the same "top of page" position. One value. */
.app-body.operations-workspace,
.app-body.customer-workspace,
.app-body.agency-overview { padding-top: var(--space-6); }

/* ---- Panel content ---------------------------------------------------------
   .project-panel is a bare shell — border, radius, white — and only its
   .project-panel-heading child is padded. Screens that put a plain paragraph,
   table or form directly inside it therefore had content hard against the
   border. This is the missing half of that component: one place that pads
   panel content, rather than every screen solving it again.

   Done with child selectors rather than a wrapper class, because every panel
   in the codebase already opens with .project-panel-heading and nothing else
   relies on an unpadded child — so this fixes the screens that were already
   wrong without editing a single view.

   Tables are the exception: their cells carry the padding, and adding more
   would detach the rule lines from the panel edge. */
.project-panel > p,
.project-panel > form,
.project-panel > ul,
.project-panel > ol,
.project-panel > .muted,
.project-panel > div:not([class]) {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}
.project-panel > :last-child { margin-bottom: var(--space-5); }
.project-panel > table:last-child { margin-bottom: 0; }
.project-panel > .project-panel-heading:last-child { margin-bottom: 0; }

/* ---- Field grids -----------------------------------------------------------
   .customer-form-fields is the field layout on most screens in the product,
   and it was `flex-wrap: wrap` with `gap: 0 14px` and no basis — so labels
   sized to their content and wrapped wherever they happened to run out of
   room. Two fields could sit on one line and the third drop alone, with the
   column edges never aligning. That is what makes a form read as raw markup
   rather than a designed control panel.

   auto-fit with a minimum gives real columns that collapse on a rule. */
.customer-form-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: start;
}
.customer-form-fields > .is-wide { grid-column: 1 / -1; }
.customer-form-fields > label { margin: 0; }

/* ---- The summary strip -----------------------------------------------------
   Was flex + flex-wrap with a basis that resolved to ~492px in a 985px row, so
   four cards always broke to a ragged 2x2 whatever the width. Wrapping is a
   reflow you hope for; a grid is a rule. Three explicit steps, and the count
   changes because the content stops fitting, not because a basis rounded. */
/* body:not(.portal-body) throughout this block: the customer portal shares
   this stylesheet and is explicitly out of scope for the panel work. */
.customer-summary,
body:not(.portal-body) .operations-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
@media (max-width: 1040px) {
    .customer-summary,
    body:not(.portal-body) .operations-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .customer-summary,
    body:not(.portal-body) .operations-summary { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Surfaces agree ---------------------------------------------------------
   Same border, same radius, same shadow, so two panels in one column stop
   looking a pixel out from each other. */
.project-panel,
body:not(.portal-body) .operations-panel,
.customer-summary,
body:not(.portal-body) .operations-summary {
    border-color: var(--surface-line);
    border-radius: var(--surface-radius);
    box-shadow: var(--surface-shadow);
}

/* .operations-panel already allows overflow; .project-panel clipped it, which
   would cut off any dropdown or popover placed inside one. Same visual
   pattern, so the same clipping behaviour. */
.project-panel { overflow: visible; }

/* ---- Dead and asymmetric --------------------------------------------------
   `max-width: auto` is not valid CSS and silently did nothing; the real cap
   comes from a later !important patch. And .site-main was 2rem left, 2.5rem
   right, putting content 8px off-centre on all 39 site-shell pages. */
body:not(.portal-body) .site-main-inner { max-width: none; }
body:not(.portal-body) .site-main { padding-left: var(--space-8); padding-right: var(--space-8); }

/* ---- Browser surfaces -------------------------------------------------------
   The parts nobody draws still carry the design, and they ship with defaults
   belonging to no design system. */
::selection { background: #ffd9c9; color: var(--color-text); }
:root { accent-color: var(--color-accent); }
input, textarea, select { caret-color: var(--color-accent); }

/* Money and dates line up column-to-column only if the digits are the same
   width. This product is full of both. */
table td, table th, .customer-summary strong, .operations-summary strong {
    font-variant-numeric: tabular-nums;
}

/* A focus ring that belongs to the palette, for everything that has not
   already declared one. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@supports (scrollbar-color: auto) {
    * { scrollbar-color: #d9cfc8 transparent; scrollbar-width: thin; }
}

/* ---- One content width -------------------------------------------------
   Five different caps were in play (1100/1220/1240/1420/1560), so sibling
   screens under the same nav centred at different widths and a 1920 display
   showed a third of itself empty. They were unified at 1720px, which still
   left an empty band either side at 1920; now every panel screen fills the
   width, as .panel does in panel.css. The portal keeps its own measure.
   -------------------------------------------------------------------- */
body:not(.portal-body) .app-body,
body:not(.portal-body) .app-body.operations-workspace,
body:not(.portal-body) .app-body.customer-workspace,
body:not(.portal-body) .app-body.agency-overview,
body:not(.portal-body) .app-body.onboarding-app-body,
body:not(.portal-body) .project-dashboard { max-width: none; }
body:not(.portal-body) .admin-pages-page { max-width: none !important; }