/* =============================================================================
   Settings › General (Company Profile, Branding, Custom Domain) - AM Navy
   19 Oct 2026. Scoped to gx-* so the other settings pages that share gs-*
   are not restyled. Tokens from button-kit.css (--am-*).
   ============================================================================= */

.gx-page { --gx-line: var(--border-default); --gx-ink: var(--text-primary); --gx-muted: var(--text-secondary); --gx-faint: var(--text-muted); }

/* ---- Header and tabs ------------------------------------------------------- */
.gx-header { padding: 22px 28px 4px; }
.gx-header__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--gx-ink); }
.gx-header__description { margin: 4px 0 0; font-size: 13.5px; color: var(--gx-muted); }

/* The AM record tabs (records.css), text only; only the placement here. */
.record-tabs.gx-tabs { margin: 14px 28px 0; padding: 0; }
.record-tabs.gx-tabs .record-tab:focus-visible { outline: none; box-shadow: var(--am-focus); border-radius: 4px; }

.gx-notice {
    display: flex; align-items: center; gap: 10px; margin: 16px 28px 0; padding: 10px 14px;
    border: 1px solid var(--am-blue-soft); border-radius: 6px; background: var(--am-blue-tint);
    font-size: 13px; color: var(--text-secondary);
}
.gx-notice__icon { display: inline-flex; color: var(--gx-ink); }

.gx-body { padding: 20px 28px 0; }
.gx-loading { margin: 8px 0; font-size: 13.5px; color: var(--gx-muted); }

/* ---- Layout: form on the left, preview on the right ------------------------ */
.gx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.gx-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gx-aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---- Cards ------------------------------------------------------------------ */
.gx-card { border: 1px solid var(--gx-line); border-radius: var(--radius-medium); background: var(--surface-panel); }
.gx-card__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 0; }
.gx-card__icon {
    flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; background: var(--am-blue-tint); color: var(--gx-ink);
}
.gx-card__titles { min-width: 0; }
.gx-card__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--gx-ink); line-height: 1.3; }
.gx-card__hint { margin: 3px 0 0; font-size: 12.5px; color: var(--gx-muted); line-height: 1.5; }
.gx-card__body { padding: 16px 20px 20px; }

/* ---- Fields ----------------------------------------------------------------- */
.gx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.gx-stack { display: flex; flex-direction: column; gap: 12px; }
.gx-subtitle { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--gx-ink); }
/* Text fields are the AM notched field (kudio-field.css, built by gxNotch);
   the logo upload keeps its own label line above the slot. */
.gx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gx-field.form-field { gap: 0; margin: 0; }
.gx-field--wide { grid-column: 1 / -1; }
.gx-logo > .gx-field__label { font-size: var(--font-size-tiny); font-weight: 500; color: var(--text-muted); }
.gx-field__hint { font-size: var(--font-size-tiny); color: var(--gx-faint); line-height: 1.45; }
.cd-add__field { flex: 1 1 auto; min-width: 0; }

/* ---- Logo upload -------------------------------------------------------------- */
.gx-logo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gx-logo__slot {
    height: 104px; display: flex; align-items: center; justify-content: center; padding: 12px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-medium);
    background-color: var(--surface-subtle);
    background-image: linear-gradient(45deg, var(--border-subtle) 25%, transparent 25%), linear-gradient(-45deg, var(--border-subtle) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--border-subtle) 75%), linear-gradient(-45deg, transparent 75%, var(--border-subtle) 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.gx-logo__slot--dark { background: var(--surface-header); border-style: solid; border-color: var(--surface-header); }
.gx-logo__preview { max-width: 100%; max-height: 72px; object-fit: contain; }
.gx-logo__empty { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--gx-faint); }
.gx-logo__slot--dark .gx-logo__empty { color: rgba(255, 255, 255, .6); }
.gx-logo__actions { display: flex; gap: 8px; }

/* ---- Save bar ------------------------------------------------------------------ */
.gx-savebar {
    position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 20px -28px 0; padding: 12px 28px; border-top: 1px solid var(--gx-line);
    background: var(--surface-panel);
}
.gx-savebar__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gx-faint); }
.gx-savebar__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--status-success); }
.gx-savebar--dirty .gx-savebar__status { color: var(--status-warning); font-weight: 600; }
.gx-savebar--dirty .gx-savebar__status::before { background: var(--status-warning); }
.gx-savebar__actions { display: flex; gap: 8px; }

/* ---- Company preview: an invoice header ------------------------------------------ */
.gx-preview .gx-card__head { padding-bottom: 14px; }
.gx-doc {
    margin: 0 16px 16px; padding: 18px; border: 1px solid var(--gx-line); border-radius: var(--radius-medium); background: var(--surface-panel);
    font-size: 12px; color: var(--text-secondary);
}
.gx-doc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.gx-doc__logo { height: 40px; display: flex; align-items: center; }
.gx-doc__logo img { max-height: 40px; max-width: 150px; object-fit: contain; }
.gx-doc__initials {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
    background: var(--am-blue); color: #fff; font-size: 14px; font-weight: 700;
}
.gx-doc__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--gx-faint); }
.gx-doc__name { font-size: 15px; font-weight: 700; color: var(--gx-ink); margin-bottom: 6px; overflow-wrap: anywhere; }
.gx-doc__name--empty { color: var(--text-muted); }
.gx-doc__lines { display: flex; flex-direction: column; gap: 3px; line-height: 1.45; overflow-wrap: anywhere; }
.gx-doc__placeholder { color: var(--gx-faint); font-style: italic; }
.gx-doc__rule { height: 1px; margin: 14px 0; background: var(--gx-line); }
.gx-doc__skeleton { display: flex; flex-direction: column; gap: 7px; }
.gx-doc__skeleton span { height: 7px; border-radius: 4px; background: var(--surface-row-band); }
.gx-doc__skeleton span:nth-child(2) { width: 80%; }
.gx-doc__skeleton span:nth-child(3) { width: 55%; }
.gx-doc__footer { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--gx-line); font-size: 11px; color: var(--gx-faint); text-align: center; }

/* ---- Branding preview: header and sign-in ------------------------------------------ */
.gx-mock-label { margin: 2px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gx-faint); }
.gx-mock-header {
    display: flex; align-items: center; justify-content: space-between; height: 44px; margin: 0 16px 14px; padding: 0 12px;
    border-radius: 6px; background: #0b0d12;
}
.gx-mock-header__brand { display: flex; align-items: center; min-width: 0; }
.gx-mock-header__brand img { max-height: 24px; max-width: 160px; object-fit: contain; }
.gx-mock-header__icons { display: flex; align-items: center; gap: 8px; }
.gx-mock-header__icons i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.gx-mock-header__icons b { width: 20px; height: 20px; border-radius: 6px; background: var(--am-blue); }
.gx-mock-empty { font-size: 11.5px; color: rgba(255, 255, 255, .45); }
.gx-mock-signin {
    display: grid; grid-template-columns: 1.2fr 1fr; height: 150px; margin: 0 16px 16px; overflow: hidden;
    border: 1px solid var(--gx-line); border-radius: 6px;
}
.gx-mock-signin__stage { display: flex; align-items: center; justify-content: center; padding: 14px; background: #0b0d12; }
.gx-mock-signin__stage img { max-width: 100%; max-height: 80px; object-fit: contain; }
.gx-mock-signin__default { max-height: 64px; }
.gx-mock-signin__card { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px; background: var(--surface-panel); }
.gx-mock-signin__card strong { font-size: 12px; color: var(--gx-ink); }
.gx-mock-signin__card span { height: 16px; border: 1px solid var(--gx-line); border-radius: 3px; }
.gx-mock-signin__card em { height: 18px; border-radius: 3px; background: var(--am-blue); }

/* The wordmark: your name in type, for when there is no logo. */
.gx-wordmark { display: inline-flex; align-items: baseline; gap: 6px; color: #fff; min-width: 0; }
.gx-wordmark__text { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-wordmark__suffix {
    padding: 1px 5px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 3px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.gx-mock-signin__stage .gx-wordmark__text { font-size: 22px; }

/* ---- Colours (look only; how they work is unchanged) ---------------------------------- */
.gx-colours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gx-colour {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--gx-line); border-radius: var(--radius-medium); background: var(--surface-panel);
}
.gx-colour .gs-colour__swatch { width: 34px; height: 34px; padding: 0; border: 1px solid var(--gx-line); border-radius: 6px; cursor: pointer; background: none; }
.gx-colour .gs-colour__text { flex: 1 1 auto; min-width: 0; }
.gx-colour .gs-colour__label { font-size: 13px; font-weight: 600; color: var(--gx-ink); }
.gx-colour__hint { font-size: 11.5px; color: var(--gx-faint); line-height: 1.4; }
.gx-colour .gs-colour__value { font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gx-muted); }

/* ---- Small screens ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .gx-layout { grid-template-columns: minmax(0, 1fr); }
    .gx-aside { position: static; order: -1; }
}
@media (max-width: 640px) {
    .gx-header { padding: 16px 16px 2px; }
    .gx-tabs { margin: 10px 16px 0; }
    .gx-notice { margin: 12px 16px 0; }
    .gx-body { padding: 16px 16px 0; }
    .gx-grid, .gx-colours { grid-template-columns: minmax(0, 1fr); }
    .gx-savebar { margin: 16px -16px 0; padding: 12px 16px; }
    .gx-card__head { padding: 14px 16px 0; }
    .gx-card__body { padding: 14px 16px 16px; }
}

/* =============================================================================
   Custom Domain (cd-*)
   ============================================================================= */
.cd-notice { margin: 0; }
.cd-list { display: flex; flex-direction: column; gap: 10px; }
.cd-row { border: 1px solid var(--gx-line); border-radius: var(--radius-medium); background: var(--surface-panel); transition: border-color .15s ease; }
.cd-row--open { border-color: var(--border-strong); }
.cd-row__main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.cd-row__icon {
    flex: 0 0 34px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; background: var(--am-blue-tint); color: var(--gx-ink);
}
.cd-row__text { flex: 1 1 260px; min-width: 0; }
.cd-row__host { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-row__name { font-size: 14.5px; font-weight: 700; color: var(--gx-ink); overflow-wrap: anywhere; }
.cd-row__line { margin-top: 3px; font-size: 12.5px; color: var(--gx-muted); line-height: 1.45; }
.cd-row__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.cd-row__actions .is-loading { opacity: .7; cursor: progress; }
.cd-row__actions .is-loading .icon { animation: cd-spin 0.9s linear infinite; }
@keyframes cd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cd-row__actions .is-loading .icon { animation: none; } }

.cd-badge {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.cd-badge--navy  { background: var(--am-blue); color: #fff; }
.cd-badge--grey  { background: var(--status-neutral-tint); color: var(--text-secondary); }
.cd-badge--green { background: var(--status-success-tint); color: var(--status-success); }
.cd-badge--amber { background: var(--status-warning-tint); color: var(--status-warning); }
.cd-badge--red   { background: var(--status-danger-tint); color: var(--status-danger); }

.cd-records { padding: 4px 14px 14px 60px; border-top: 1px solid var(--gx-line); }
.cd-records__intro { margin: 12px 0; font-size: 12.5px; color: var(--gx-muted); line-height: 1.5; }
.cd-records__note { margin: 10px 0 0; font-size: 12px; color: var(--gx-faint); }
.cd-table { border: 1px solid var(--gx-line); border-radius: 6px; overflow: hidden; }
.cd-table__row {
    display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1.4fr) 130px; gap: 12px; align-items: center;
    padding: 10px 12px; border-top: 1px solid var(--gx-line); font-size: 12.5px;
}
.cd-table__row:first-child { border-top: 0; }
.cd-table__row--head { background: var(--surface-subtle); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gx-faint); }
.cd-table__purpose { grid-column: 2 / -1; margin-top: -4px; font-size: 11.5px; color: var(--gx-faint); }
.cd-type { font-weight: 700; color: var(--gx-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cd-copy { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cd-copy__value {
    flex: 1 1 auto; min-width: 0; padding: 5px 8px; border-radius: 4px; background: var(--am-blue-tint); color: var(--gx-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; user-select: all;
}
.cd-copy__button {
    flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gx-line); border-radius: 4px; background: var(--surface-panel); color: var(--gx-muted); cursor: pointer;
}
.cd-copy__button:hover { color: var(--gx-ink); border-color: var(--border-strong); }
.cd-copy__button:focus-visible { outline: none; box-shadow: var(--am-focus); }

.cd-add { display: flex; gap: 10px; }
.cd-add .gx-field__input { flex: 1 1 auto; }

.cd-steps { margin: 0; padding: 0; list-style: none; counter-reset: cd-step; display: flex; flex-direction: column; gap: 12px; }
.cd-steps li { position: relative; padding-left: 34px; counter-increment: cd-step; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--gx-muted); line-height: 1.45; }
.cd-steps li::before {
    content: counter(cd-step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--am-blue-tint); color: var(--gx-ink); font-size: 11.5px; font-weight: 700;
}
.cd-steps strong { font-size: 13px; color: var(--gx-ink); }
.cd-target { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--gx-line); font-size: 12px; color: var(--gx-faint); }
.cd-target code { padding: 6px 8px; border-radius: 4px; background: var(--am-blue-tint); color: var(--gx-ink); font-size: 12.5px; overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .cd-records { padding-left: 14px; }
    .cd-table__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .cd-table__row--head { display: none; }
    .cd-table__purpose { grid-column: auto; margin-top: 0; }
    .cd-row__actions { margin-left: 0; }
    .cd-add { flex-direction: column; }
}

/* =============================================================================
   Themes (Branding). The preview is a small dashboard with a call panel open,
   painted from --t-* set by the page for the selected theme.
   ============================================================================= */
.gx-mock-header { background: var(--surface-header, #000); }
.gx-mock-header .gx-wordmark { color: var(--text-on-dark, #fff); }
.gx-mock-header .gx-mock-empty { color: var(--text-on-dark-muted, rgba(255, 255, 255, .45)); }
[data-am-header="light"] .gx-mock-header { box-shadow: inset 0 0 0 1px #e5e5e5; }

.gx-theme-stage { margin-bottom: 16px; }
.gx-shot {
    --t-header: #000; --t-header-text: #fff; --t-primary: var(--am-blue); --t-soft: var(--am-blue-soft); --t-tint: var(--am-blue-tint); --t-accent: var(--am-blue); --t-canvas: #e9eff0;
    overflow: hidden; border: 1px solid var(--gx-line); border-radius: 8px; background: var(--t-canvas);
    user-select: none; transition: background-color .2s ease;
}
.gx-shot * { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.gx-shot__header { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: var(--t-header); color: var(--t-header-text); }
.gx-shot--light-header .gx-shot__header { box-shadow: inset 0 -1px 0 #e5e5e5; }
.gx-shot__brand { font-size: 12px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.gx-shot__search { flex: 0 1 150px; height: 18px; border-radius: 4px; background: currentColor; opacity: .14; }
.gx-shot__icons { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.gx-shot__icons i { width: 10px; height: 10px; border-radius: 3px; background: currentColor; opacity: .35; }
.gx-shot__icons b { width: 18px; height: 18px; border-radius: 5px; background: var(--t-accent); box-shadow: 0 0 0 1.5px var(--t-header); }

.gx-shot__body { display: grid; grid-template-columns: 34px minmax(0, 1fr) 190px; min-height: 236px; }
.gx-shot__rail { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 0; background: var(--surface-panel); border-right: 1px solid var(--border-subtle); }
.gx-shot__rail i { width: 16px; height: 16px; border-radius: 4px; background: var(--border-default); }
.gx-shot__rail i.is-on { background: var(--t-soft); box-shadow: inset 0 0 0 2px var(--t-primary); }

.gx-shot__page { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gx-shot__title { display: flex; align-items: center; justify-content: space-between; }
.gx-shot__title span { width: 90px; height: 9px; border-radius: 4px; background: var(--text-primary); opacity: .8; }
.gx-shot__title em { font-style: normal; font-size: 9.5px; font-weight: 600; color: #fff; background: var(--t-primary); padding: 4px 8px; border-radius: 3px; }
.gx-shot__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gx-shot__tile { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 5px; background: var(--surface-panel); border: 1px solid var(--border-subtle); min-width: 0; }
.gx-shot__tile small { font-size: 8.5px; color: var(--text-muted); }
.gx-shot__tile strong { font-size: 12.5px; color: var(--text-primary); }
.gx-shot__tile u { display: block; height: 4px; border-radius: 2px; background: var(--t-accent); text-decoration: none; opacity: .85; }
.gx-shot__table { border-radius: 5px; background: var(--surface-panel); border: 1px solid var(--border-subtle); overflow: hidden; }
.gx-shot__table > div { display: grid; grid-template-columns: 1.2fr 1fr 44px; gap: 8px; align-items: center; padding: 6px 8px; border-top: 1px solid var(--border-subtle); }
.gx-shot__table > div:first-child { border-top: 0; }
.gx-shot__table > div.is-head { background: var(--t-tint); }
.gx-shot__table > div.is-on { background: var(--t-soft); }
.gx-shot__table span { height: 6px; border-radius: 3px; background: #dfe3ea; }
.gx-shot__table mark { font-size: 8px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 3px; background: var(--t-soft); color: var(--t-primary); }

.gx-shot__panel { display: flex; flex-direction: column; gap: 9px; padding: 10px; background: var(--surface-panel); border-left: 1px solid var(--border-default); box-shadow: -10px 0 20px -18px rgba(16, 24, 40, .5); }
.gx-shot__panel-head { display: flex; align-items: center; gap: 8px; margin: -10px -10px 0; padding: 10px; background: var(--t-tint); border-bottom: 1px solid var(--border-subtle); }
.gx-shot__panel-head strong { display: block; font-size: 10.5px; color: var(--text-primary); }
.gx-shot__panel-head small { font-size: 8.5px; color: var(--t-accent); font-weight: 600; }
.gx-shot__avatar { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--t-primary); color: #fff; font-size: 8.5px; font-weight: 700; }
.gx-shot__tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--border-subtle); }
.gx-shot__tabs span { padding-bottom: 4px; font-size: 8.5px; color: var(--text-muted); }
.gx-shot__tabs span.is-on { color: var(--t-primary); font-weight: 700; box-shadow: inset 0 -2px 0 var(--t-primary); }
.gx-shot__lines { display: flex; flex-direction: column; gap: 5px; }
.gx-shot__lines span { height: 6px; border-radius: 3px; background: var(--border-default); }
.gx-shot__chips { display: flex; gap: 5px; }
.gx-shot__chips mark { font-size: 8px; font-weight: 600; padding: 2px 6px; border-radius: 3px; background: var(--t-soft); color: var(--t-primary); }
.gx-shot__actions { display: flex; gap: 5px; margin-top: auto; }
.gx-shot__actions em, .gx-shot__actions s, .gx-shot__actions q { font-style: normal; text-decoration: none; font-size: 8.5px; font-weight: 600; padding: 5px 8px; border-radius: 3px; }
.gx-shot__actions em { background: var(--t-primary); color: #fff; }
.gx-shot__actions s { background: var(--t-soft); color: var(--t-primary); }
.gx-shot__actions q { margin-left: auto; background: var(--status-danger-tint); color: var(--status-danger); }
.gx-shot__actions q::before, .gx-shot__actions q::after { content: none; }

.gx-theme-stage__caption { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--gx-muted); }
.gx-theme-stage__caption strong { font-size: 13.5px; color: var(--gx-ink); }

.gx-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .gx-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gx-themes { grid-template-columns: minmax(0, 1fr); } }
.gx-theme {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px; text-align: left;
    border: 1px solid var(--gx-line); border-radius: var(--radius-medium); background: var(--surface-panel); cursor: pointer; font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gx-theme:hover:not(:disabled) { border-color: var(--border-strong); }
.gx-theme:focus-visible { outline: none; box-shadow: var(--am-focus); }
.gx-theme:disabled { cursor: default; }
.gx-theme--on { border-color: var(--am-blue); box-shadow: 0 0 0 1px var(--am-blue); }
.gx-theme__swatches { display: flex; height: 30px; overflow: hidden; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .08); }
.gx-theme__swatches i { flex: 1 1 0; }
.gx-theme__text { display: flex; flex-direction: column; gap: 2px; }
.gx-theme__name { font-size: 13px; color: var(--gx-ink); }
.gx-theme__blurb { font-size: 11.5px; color: var(--gx-muted); line-height: 1.4; }
.gx-theme__check {
    position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: none; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--am-blue); color: #fff; box-shadow: 0 0 0 2px var(--surface-panel);
}
.gx-theme--on .gx-theme__check { display: inline-flex; }

@media (max-width: 760px) {
    .gx-shot__body { grid-template-columns: 30px minmax(0, 1fr); }
    .gx-shot__panel { display: none; }
}

/* Theme preview, round 2: panel header band, badges, avatar and the Meeko
   icon in the header colour, as the app now draws them. */
.gx-mock-header__icons b { background: var(--am-gradient); }
.gx-shot { --t-accent: var(--am-blue); --t-panel: #1a253f; --t-gradient: var(--am-blue); --t-badge: var(--am-blue); --t-badge-text: #fff; }
.gx-shot__icons i { position: relative; opacity: 1; background: none; box-shadow: inset 0 0 0 1.5px currentColor; border-radius: 3px; }
.gx-shot__icons i em {
    position: absolute; top: -6px; right: -8px; min-width: 9px; height: 10px; padding: 0 2px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 6.5px; font-weight: 700;
    background: var(--t-badge); color: var(--t-badge-text); box-shadow: 0 0 0 1.5px var(--t-header);
}
.gx-shot__icons i.gx-shot__meeko { box-shadow: none; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.gx-shot__icons b { display: inline-flex; align-items: center; justify-content: center; font-size: 6.5px; font-weight: 700; color: #fff; background: var(--t-gradient); }
.gx-shot__panel-head { background: var(--t-panel); border-bottom: 0; }
.gx-shot__panel-head strong { color: #fff; }
.gx-shot__panel-head small { color: rgba(255, 255, 255, .72); }
.gx-shot__avatar { background: var(--t-gradient); }
.gx-shot__panel-cta {
    margin-left: auto; padding: 3px 7px; border-radius: 3px; font-size: 8px; font-weight: 700;
    background: var(--t-badge); color: var(--t-badge-text);
}

/* ---- Behaviour > Panel View (20 Oct 2026) -----------------------------------
   Two cards on the theme-card look (gx-theme), each with a small drawing of
   the layout: the page, the first panel, and where the second one lands. */
.gx-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
@media (max-width: 520px) { .gx-views { grid-template-columns: minmax(0, 1fr); } }
.gx-view__shot {
    position: relative; display: block; height: 118px; overflow: hidden;
    border: 1px solid var(--gx-line); border-radius: 6px; background: var(--surface-canvas);
}
.gx-view__page { position: absolute; top: 14px; left: 12px; width: 30%; display: flex; flex-direction: column; gap: 7px; }
.gx-view__page i { display: block; height: 6px; border-radius: 3px; background: var(--border-subtle); }
.gx-view__page i:nth-child(2) { width: 75%; }
.gx-view__page i:nth-child(3) { width: 55%; }
.gx-view__panel {
    position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px;
    background: var(--surface-panel); transition: right .25s ease, width .25s ease;
}
.gx-view__panel b { display: block; height: 16px; background: var(--am-blue); }
.gx-view__panel i { display: block; height: 5px; margin: 0 8px; border-radius: 3px; background: var(--border-subtle); }
.gx-view__panel i:nth-child(3) { width: 60%; }
.gx-view__panel--first { border-left: 1px solid var(--gx-line); }
.gx-view__panel--second b { background: var(--am-blue-soft); }

/* Side by side: the second sits flush to the right, the first moved left of it. */
.gx-view__shot--side_by_side .gx-view__panel--first { right: 36%; width: 30%; }
.gx-view__shot--side_by_side .gx-view__panel--second { right: 0; width: 36%; border-left: 1px solid var(--gx-line); }

/* Overlay: the first stays put, dimmed; the second lies over it with a shadow. */
.gx-view__shot--overlay .gx-view__panel--first { right: 0; width: 56%; }
.gx-view__shot--overlay .gx-view__panel--first::after {
    content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--text-primary) 12%, transparent);
}
.gx-view__shot--overlay .gx-view__panel--second { right: 0; width: 40%; z-index: 1; box-shadow: var(--shadow-slide-over); }

@media (prefers-reduced-motion: reduce) {
    .gx-view__panel { transition: none; }
}

/* ---- Templates (21 Oct 2026) -------------------------------------------------
   One card per document kind: the three designs on the theme-card look
   (gx-theme) with a live thumbnail, then the items header colour. Theme
   tokens only; the thumbnails are the real (paper white) document. */
.gx-tpl-stack { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }
.gx-tpl-empty {
    display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-medium);
    font-size: 13px; color: var(--gx-muted);
}
.gx-tpl-empty strong { color: var(--gx-ink); font-size: 14px; }
.gx-tpl-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; }
.gx-tpl-pill {
    display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-chip, 4px);
    background: var(--am-blue-tint); color: var(--gx-ink); font-size: 12px; font-weight: 600; line-height: 1.4;
}
.gx-tpl-status__text { font-size: 12.5px; color: var(--gx-muted); }
.gx-tpl-design { gap: 8px; }
.gx-tpl-thumb {
    position: relative; display: block; height: 196px; overflow: hidden;
    border: 1px solid var(--gx-line); border-radius: 6px; background: var(--surface-canvas);
}
.gx-tpl-thumb__frame { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; background: var(--surface-panel); }
.gx-tpl-colour { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.gx-tpl-yours__title { margin: 18px 0 10px; }
.gx-tpl-colour__controls { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 12px; }
.gx-tpl-swatch {
    flex: 0 0 44px; width: 44px; height: 44px; padding: 3px; margin: 0; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: var(--radius-medium); background: var(--surface-panel);
}
.gx-tpl-swatch:focus-visible { outline: none; box-shadow: var(--am-focus); }
.gx-tpl-swatch:disabled { cursor: default; opacity: .6; }
.gx-tpl-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.gx-tpl-swatch::-webkit-color-swatch { border: 0; border-radius: 4px; }
.gx-tpl-swatch::-moz-color-swatch { border: 0; border-radius: 4px; }
.gx-tpl-hex { flex: 0 1 180px; }
.gx-tpl-hex .kudio-field__control { font-variant-numeric: tabular-nums; text-transform: uppercase; }
.gx-tpl-hex__error:empty { display: none; }
.gx-tpl-colour__controls .am-btn { min-height: 44px; }
.gx-tpl-sample {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 72px); max-width: 520px; overflow: hidden;
    border: 1px solid var(--gx-line); border-radius: 6px;
    background: var(--tpl-head-bg); color: var(--tpl-head-ink);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.gx-tpl-sample span { padding: 9px 10px; }
.gx-tpl-sample span + span { text-align: right; }
.gx-tpl-sample__note { margin: 0; }
.gx-tpl-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}
.gx-tpl-footer .gx-savebar__status { margin-right: auto; font-size: 12.5px; color: var(--gx-muted); }
.gx-tpl-footer--dirty .gx-savebar__status { color: var(--gx-ink); font-weight: 600; }

@media (max-width: 560px) {
    .gx-tpl-thumb { height: 220px; }
    .gx-tpl-colour__controls { flex-direction: column; align-items: stretch; }
    .gx-tpl-hex { flex: 1 1 auto; }
    .gx-tpl-hex .kudio-field__control { font-size: 16px; }
    .gx-tpl-sample { grid-template-columns: minmax(0, 1fr) repeat(3, 52px); }
    .gx-tpl-footer { flex-direction: column; align-items: stretch; }
    .gx-tpl-footer .am-btn { min-height: 44px; justify-content: center; }
}

/* =============================================================================
   21 Oct 2026: settings reorganisation. Theme tokens only (every theme,
   Wood included), AM field UI, --radius-chip for chips.
   ============================================================================= */

/* ---- The selected tick in front of the card's own drawing -------------------
   The Panel View drawing and the template thumbnails are positioned, and the
   second panel in the drawing carries z-index 1, so it painted over the
   tick in the card's top right corner. Each card is its own stacking
   context; the drawing sits at 0 and the tick above it. */
.gx-theme { isolation: isolate; }
.gx-view__shot, .gx-tpl-thumb, .gx-theme__swatches { position: relative; z-index: 0; }
.gx-theme__check { z-index: 2; }

/* ---- Shared bits -------------------------------------------------------------- */
/* The kit's buttons set display, which beats the hidden attribute. */
.gx-page .am-btn[hidden] { display: none; }
.gx-tpl-footer--dirty .gx-savebar__status::before { background: var(--status-warning); }
.gx-count { align-self: flex-end; margin-top: 4px; font-size: var(--font-size-tiny); color: var(--gx-faint); font-variant-numeric: tabular-nums; }
.gx-count--over { color: var(--status-danger); font-weight: 600; }
.gx-card__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.gx-card__actions--start { justify-content: flex-start; }
.gx-savebar.gx-savebar--inline {
    position: static; margin: 18px 0 0; padding: 14px 0 0; background: transparent;
    border-top: 1px solid var(--border-subtle);
}

/* ---- Branding: favicon --------------------------------------------------------- */
.gx-favicon { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gx-favicon__slot {
    flex: 0 0 72px; width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-medium); background: var(--surface-subtle);
}
.gx-favicon__image { width: 32px; height: 32px; object-fit: contain; image-rendering: auto; }
.gx-favicon__image--default { opacity: .7; }
.gx-favicon__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 220px; }

/* ---- Branding preview: the browser tab ------------------------------------------- */
.gx-mock-tab {
    display: flex; align-items: flex-end; height: 40px; margin: 0 16px 14px; padding: 6px 8px 0;
    border-radius: 6px; background: var(--surface-subtle); border: 1px solid var(--gx-line);
}
.gx-mock-tab__pill {
    display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; height: 30px; padding: 0 10px;
    border-radius: 6px 6px 0 0; background: var(--surface-panel); box-shadow: 0 -1px 0 var(--gx-line), 1px 0 0 var(--gx-line), -1px 0 0 var(--gx-line);
}
.gx-mock-tab__icon { flex: none; width: 16px; height: 16px; object-fit: contain; }
.gx-mock-tab__title { min-width: 0; font-size: 12px; color: var(--gx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-mock-tab__pill i { flex: none; font-style: normal; font-size: 13px; color: var(--gx-faint); }

/* ---- Behaviour: login quotes ------------------------------------------------------- */
.gx-body > .gx-card + .gx-card { margin-top: 16px; }
.gx-body > .gx-card:last-child { margin-bottom: 28px; }
.gx-quotes__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; align-items: start; }
.gx-quotes__editor { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gx-quotes__defaults {
    margin: 0; padding: 10px 14px 10px 34px; display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--gx-line); border-radius: var(--radius-medium); background: var(--surface-subtle);
    font-size: 13px; color: var(--gx-muted); line-height: 1.45;
}
.gx-quote { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; border: 1px solid var(--gx-line); border-radius: var(--radius-medium); background: var(--surface-panel); }
.gx-quote__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gx-quote__number {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-chip, 4px);
    background: var(--am-blue-tint); color: var(--gx-ink); font-size: 12px; font-weight: 600;
}
.gx-quote__tools { display: flex; gap: 4px; }
.gx-quote__tool {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 1px solid var(--gx-line); border-radius: 6px; background: var(--surface-panel); color: var(--gx-muted); cursor: pointer;
}
.gx-quote__tool:hover:not(:disabled) { color: var(--gx-ink); border-color: var(--border-strong); }
.gx-quote__tool:focus-visible { outline: none; box-shadow: var(--am-focus); }
.gx-quote__tool:disabled { opacity: .4; cursor: default; }
.gx-quote textarea.kudio-field__control { resize: vertical; min-height: 56px; }

/* The preview: a small sign-in stage, the theme's night sky, the same fade. */
.gx-quote-preview {
    position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; min-height: 190px; padding: 22px 22px 24px;
    border-radius: var(--radius-medium); background: var(--signin-stage-bg, #000000); overflow: hidden;
}
.gx-quote-preview__label {
    align-self: flex-start; margin-bottom: 14px; padding: 2px 8px; border-radius: var(--radius-chip, 4px);
    background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.gx-quote-preview__line {
    margin: 0; font-size: 19px; font-weight: 700; line-height: 1.32; letter-spacing: -0.02em; color: #ffffff; overflow-wrap: anywhere;
    transition: opacity var(--duration-slow, 320ms) var(--easing-standard), transform var(--duration-slow, 320ms) var(--easing-standard);
}
.gx-quote-preview__note {
    margin: 10px 0 0; min-height: calc(2 * 1.55em); font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.56); overflow-wrap: anywhere;
    transition: opacity var(--duration-slow, 320ms) var(--easing-standard) 60ms, transform var(--duration-slow, 320ms) var(--easing-standard) 60ms;
}
.gx-quote-preview__line.is-leaving, .gx-quote-preview__note.is-leaving { opacity: 0; transform: translateY(-10px); }
@media (prefers-reduced-motion: reduce) {
    .gx-quote-preview__line, .gx-quote-preview__note { transition: none; }
}

/* ---- Templates: a soft navy backdrop so the white documents stand out ------------- */
.gx-body.gx-body--templates {
    background: color-mix(in srgb, var(--am-blue) 7%, var(--surface-canvas));
    padding-bottom: 8px;
}
.gx-body--templates .gx-card { box-shadow: 0 1px 2px color-mix(in srgb, var(--am-blue) 10%, transparent); }
.gx-body--templates .gx-tpl-thumb { background: color-mix(in srgb, var(--am-blue) 12%, var(--surface-canvas)); border-color: color-mix(in srgb, var(--am-blue) 18%, var(--gx-line)); }
.gx-body--templates .gx-tpl-design.gx-theme { background: color-mix(in srgb, var(--am-blue) 4%, var(--surface-panel)); }
.gx-tpl-identity { margin-bottom: 16px; }
.gx-tpl-identity:empty { display: none; }

@media (max-width: 900px) {
    .gx-quotes__layout { grid-template-columns: minmax(0, 1fr); }
    .gx-quote-preview { position: static; order: -1; min-height: 150px; }
}
@media (max-width: 560px) {
    .gx-quote .kudio-field__control, .gx-card .gx-field .kudio-field__control { font-size: 16px; }
    .gx-card__actions { flex-direction: column; align-items: stretch; }
    .gx-card__actions .am-btn { min-height: 44px; justify-content: center; }
    .gx-savebar.gx-savebar--inline { flex-direction: column; align-items: stretch; }
    .gx-savebar--inline .gx-savebar__actions { flex-direction: column; }
    .gx-savebar--inline .am-btn { min-height: 44px; justify-content: center; }
    .gx-logo__actions .am-btn { min-height: 40px; }
}

/* ---- RM-098: the templates footer as formatted text ------------------------- */
.gx-rich-footer__label { font-size: var(--font-size-tiny); font-weight: 500; color: var(--text-muted); }
.gx-rich-footer__editor .rich-text__editor { min-height: 110px; max-height: 280px; }

/* ---- RM-098: a template at full size ----------------------------------------- */
.gx-tpl-full {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: rgba(15, 17, 21, 0.72);
    backdrop-filter: blur(3px);
}
.gx-tpl-full__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--surface-panel, #fff);
    border-bottom: 1px solid var(--border-default);
}
.gx-tpl-full__title { flex: 1; min-width: 0; margin: 0; font-size: var(--font-size-medium); font-weight: 600; }
.gx-tpl-full__body { flex: 1; min-height: 0; overflow: auto; padding: 24px 16px; display: flex; justify-content: center; }
.gx-tpl-full__sheet {
    width: min(100%, 860px);
    height: 1216px;
    border: 0;
    border-radius: var(--radius-small);
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
@media (max-width: 560px) {
    .gx-tpl-full__body { padding: 12px 8px; }
    .gx-tpl-full__sheet { height: 860px; }
}