/* ==========================================================================
   ClevaTreva UI kit -- shared page furniture (Standardising UI Views sprint)

   One place for the things every view shares: the page frame, the dark page
   band and its stat tiles. Views never hand-build these; they call
   setPageBand() in ui.js.

   Colour rule for this file: every colour is a named variable, in the :root
   block below or (for the band's own button colours) in the .ct-band rule.
   No hex values or colour names anywhere else in this file, so a second
   theme later is a second block of values, not a rewrite. Light values
   equal the colours the app already used.

   All selectors are single classes on purpose: they out-rank Tailwind's
   element-level resets (button, p, h2) whichever order the two load in.
   The one exception is BAND CONTROLS, which says why it needs two.
   ========================================================================== */

:root {
    /* The page band is dark in every theme. */
    --ct-band-from: #0f172a;                          /* slate-900 */
    --ct-band-to: #1e1b4b;                            /* indigo-950 */
    --ct-band-ink: #ffffff;
    --ct-band-ink-soft: #cbd5e1;                      /* slate-300 */
    --ct-band-ink-muted: #94a3b8;                     /* slate-400 */
    --ct-band-ink-hover: #e2e8f0;                     /* slate-200 */
    --ct-band-meter-track: rgba(255, 255, 255, 0.10);
    --ct-band-meter-fill: #8b5cf6;                    /* violet-500 */
    --ct-band-shadow: rgba(15, 23, 42, 0.18);

    /* Buttons, switches and choices on a LIGHT surface (page, cards, modals,
       wizards, login, onboarding). The band sets its own values for the
       same names (see .ct-band), so one set of classes serves both. */
    --ct-btn-height: 2.5rem;                          /* 40px; 44px on a phone */
    --ct-btn-height-sm: 2rem;                         /* 32px; 36px on a phone */
    --ct-btn-height-lg: 3rem;                         /* 48px */
    --ct-btn-primary-bg: #6f52ee;                     /* brand-600: the CT violet */
    --ct-btn-primary-bg-hover: #5a3ecb;               /* brand-700 */
    --ct-btn-primary-ink: #ffffff;
    --ct-btn-primary-shadow: rgba(111, 82, 238, 0.30);
    --ct-btn-outline-bg: #ffffff;
    --ct-btn-ink: #334155;                            /* slate-700 */
    --ct-btn-ink-hover: #6f52ee;                      /* brand-600 */
    --ct-btn-line: #e2e8f0;                           /* slate-200 */
    --ct-btn-line-hover: #8a73f3;                     /* brand-500 */
    --ct-btn-fill: #f1f5f9;                           /* slate-100: a ghost's or switch's hover, locked */
    --ct-btn-fill-hover: #ffffff;                     /* an outline's hover: stays white, border and text change */
    --ct-btn-ghost-ink: #64748b;                      /* slate-500 */
    --ct-btn-ghost-ink-hover: #334155;                /* slate-700 */
    --ct-btn-locked-ink: #94a3b8;                     /* slate-400 */
    --ct-btn-danger-bg: #e11d48;                      /* rose-600 */
    --ct-btn-danger-bg-hover: #be123c;                /* rose-700 */
    --ct-btn-danger-ink: #ffffff;
    --ct-btn-danger-shadow: rgba(225, 29, 72, 0.25);
    --ct-btn-danger-line: #fecdd3;                    /* rose-200 */
    --ct-btn-danger-fill-hover: #fff1f2;              /* rose-50 */
    --ct-btn-orange-bg: #ea580c;                      /* orange-600: Send */
    --ct-btn-orange-bg-hover: #c2410c;                /* orange-700 */
    --ct-btn-orange-ink: #ffffff;
    --ct-btn-orange-shadow: rgba(234, 88, 12, 0.30);
    --ct-btn-hero-from: #6f52ee;                      /* brand-600 */
    --ct-btn-hero-to: #4f46e5;                        /* indigo-600 */
    --ct-btn-hero-from-hover: #8a73f3;                /* brand-500 */
    --ct-btn-hero-to-hover: #6366f1;                  /* indigo-500 */
    --ct-btn-hero-ink: #ffffff;
    --ct-btn-hero-shadow: rgba(111, 82, 238, 0.30);
    --ct-seg-track: #f1f5f9;                          /* slate-100 */
    --ct-seg-ink: #64748b;                            /* slate-500 */
    --ct-seg-ink-hover: #1e293b;                      /* slate-800 */
    --ct-seg-on-bg: #ffffff;
    --ct-seg-on-ink: #6f52ee;                         /* brand-600 */
    --ct-seg-on-shadow: rgba(15, 23, 42, 0.08);

    /* Stat tile dots: whose move it is (Action Centre's colour language). */
    --ct-tone-amber: #fbbf24;                         /* amber-400 */
    --ct-tone-violet: #a78bfa;                        /* violet-400 */
    --ct-tone-emerald: #34d399;                       /* emerald-400 */
    --ct-tone-rose: #fb7185;                          /* rose-400 */

    /* Plain surfaces outside the band (light values = today's colours). */
    --ct-surface: #ffffff;
    --ct-surface-muted: #f8fafc;                      /* slate-50 */
    --ct-line: #e2e8f0;                               /* slate-200 */
    --ct-line-soft: #f1f5f9;                          /* slate-100 */
    --ct-ink: #1e293b;                                /* slate-800 */
    --ct-ink-body: #475569;                           /* slate-600 */
    --ct-ink-muted: #64748b;                          /* slate-500 */
    --ct-ink-faint: #94a3b8;                          /* slate-400 */
    --ct-accent: #6f52ee;                             /* brand-600 */
    --ct-danger: #e11d48;                             /* rose-600 */
    --ct-danger-soft: #fff1f2;                        /* rose-50 */
    --ct-danger-ink: #be123c;                         /* rose-700 */
    --ct-shadow: rgba(15, 23, 42, 0.18);
    --ct-scroll-thumb: #cbd5e1;                       /* slate-300: .custom-scroll in index.html */

    /* Layout: the same gutter and the same content cap on every view. */
    --ct-gutter: 1rem;
    --ct-content-max: 1600px;
    --ct-band-min-height: 6.5rem;
}

@media (min-width: 1024px) {
    :root { --ct-gutter: 1.5rem; }
}

/* Phone: every button is a comfortable tap target (44px / 36px). */
@media (max-width: 639px) {
    :root {
        --ct-btn-height: 2.75rem;
        --ct-btn-height-sm: 2.25rem;
    }
}

/* --------------------------------------------------------------------------
   PAGE FRAME
   #page-scroll wraps #page-band and #view-container.

   Phone / tablet (< 1024px): #page-scroll is the one scroller, so the band
   scrolls away with the page.

   Desktop (>= 1024px): #page-scroll is a fixed column. The band is pinned and
   #view-container scrolls underneath it, keeping a real height so two-pane
   and table views can fill what is left without hard-coded pixel maths.

   Side padding is max(gutter, (100% - cap) / 2): full width up to the cap,
   centred beyond it, with the scrollbar staying at the window edge.
   -------------------------------------------------------------------------- */

.ct-page-scroll {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    overflow: auto;
}

.ct-page-band {
    padding: var(--ct-gutter) max(var(--ct-gutter), calc((100% - var(--ct-content-max)) / 2)) calc(var(--ct-gutter) / 2);
}

.ct-page-view {
    padding: var(--ct-gutter) max(var(--ct-gutter), calc((100% - var(--ct-content-max)) / 2));
}

/* Band showing: the gap between band and content is split between the two. */
.ct-page-band:not(.hidden-ui) + .ct-page-view {
    padding-top: calc(var(--ct-gutter) / 2);
}

@media (min-width: 1024px) {
    .ct-page-scroll {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Both rows reserve the same scrollbar gutter, so the band's right edge
       and the content's right edge line up whether or not the view scrolls. */
    .ct-page-band {
        flex: 0 0 auto;
        overflow: hidden;
        scrollbar-gutter: stable;
    }

    .ct-page-view {
        flex: 1 1 0%;
        min-height: 0;
        overflow: auto;
        scrollbar-gutter: stable;
    }
}

/* --------------------------------------------------------------------------
   PAGE BAND
   Three slots: lead (scope eyebrow + purpose), stats, actions.
   -------------------------------------------------------------------------- */

.ct-band {
    /* Buttons, switches and choices INSIDE the band: the same classes as
       everywhere else, the band's own colours (white primary, translucent
       outline). These are the values the band has always had, and they are
       the same in every theme -- the band is dark in every theme. */
    --ct-btn-primary-bg: #ffffff;
    --ct-btn-primary-bg-hover: #f1f5f9;               /* slate-100 */
    --ct-btn-primary-ink: #0f172a;                    /* slate-900 */
    --ct-btn-primary-shadow: var(--ct-band-shadow);
    --ct-btn-outline-bg: transparent;
    --ct-btn-ink: #e2e8f0;                            /* slate-200 */
    --ct-btn-ink-hover: #e2e8f0;
    --ct-btn-line: rgba(255, 255, 255, 0.15);
    --ct-btn-line-hover: rgba(255, 255, 255, 0.15);
    --ct-btn-fill: rgba(255, 255, 255, 0.10);         /* hover, locked, a choice's track */
    --ct-btn-fill-hover: rgba(255, 255, 255, 0.10);
    --ct-btn-ghost-ink: #cbd5e1;                      /* slate-300 */
    --ct-btn-ghost-ink-hover: #ffffff;
    --ct-btn-locked-ink: #94a3b8;                     /* slate-400 */
    --ct-btn-amber-ink: #fcd34d;                      /* amber-300 */
    --ct-btn-amber-line: rgba(251, 191, 36, 0.40);
    --ct-btn-amber-fill: rgba(251, 191, 36, 0.10);
    --ct-btn-amber-fill-hover: rgba(251, 191, 36, 0.20);
    --ct-btn-emerald-ink: #6ee7b7;                    /* emerald-300 */
    --ct-btn-emerald-line: rgba(52, 211, 153, 0.40);
    --ct-btn-emerald-fill: rgba(52, 211, 153, 0.10);
    --ct-btn-emerald-fill-hover: rgba(52, 211, 153, 0.20);
    --ct-seg-track: rgba(255, 255, 255, 0.10);
    --ct-seg-ink: #cbd5e1;                            /* slate-300 */
    --ct-seg-ink-hover: #ffffff;
    --ct-seg-on-bg: #ffffff;
    --ct-seg-on-ink: #6f52ee;                         /* brand-600: violet on a white pill, in every theme */
    --ct-seg-on-shadow: var(--ct-band-shadow);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1.25rem;
    border-radius: 1rem;
    color: var(--ct-band-ink);
    background: linear-gradient(to right, var(--ct-band-from), var(--ct-band-to));
    box-shadow: 0 4px 10px -4px var(--ct-band-shadow);
}

.ct-band__lead {
    flex: 1 1 12rem;
    min-width: 0;
}

.ct-band__eyebrow {
    margin: 0;
    font-size: 0.625rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ct-band-ink-muted);
}

/* Optional identity line (e.g. the plan name on Billing) with room for
   small badges beside it. */
.ct-band__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.ct-band__purpose {
    margin: 0.125rem 0 0;
    max-width: 44rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--ct-band-ink-soft);
}

/* Eyebrow + title + purpose must still fit the fixed band height. */
.ct-band__title + .ct-band__purpose { margin-top: 0; }

.ct-band__stats {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.ct-band__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .ct-band { padding: 1.25rem 1.5rem; }
}

/* Same band height on every view, so the line where content starts never
   moves. Desktop only: on a phone the band should be as short as it can be. */
@media (min-width: 1024px) {
    .ct-band { min-height: var(--ct-band-min-height); }
    /* The scope line, and the third line under a title, stay on ONE line
       (cut with an ellipsis if the band is tight), so a long workspace name
       or description never makes the band taller. */
    .ct-band__eyebrow,
    .ct-band__title + .ct-band__purpose {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 639px) {
    .ct-band { gap: 0.875rem; padding: 1rem; }
    .ct-band__lead { flex-basis: 100%; }
    /* With stat tiles on a phone, a third line that is only the page's
       standing description gives way to them. One carrying live
       information (Billing's cycle date, Team's waiting join requests)
       stays. ui.js marks the standing kind with --static. */
    .ct-band--has-stats .ct-band__purpose--static { display: none; }
    /* Phone: tiles share the band's width in equal columns and captions may
       wrap -- never a sideways-scrolling strip inside the page. Four tiles
       become two rows of two. */
    .ct-band__stats {
        display: grid;
        width: 100%;
        gap: 0.875rem 0.75rem;
        grid-template-columns: minmax(0, 1fr);
    }
    .ct-band__stats--count-2,
    .ct-band__stats--count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-band__stats--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ct-band__actions { width: 100%; }
}

/* --------------------------------------------------------------------------
   STAT TILE
   Every tile in a band is the same grid: value row, caption row -- plus a
   meter row for ALL tiles when ANY tile in that band has a meter. Same rows
   in every tile means every numeral sits on one line and every caption sits
   on one line.
   -------------------------------------------------------------------------- */

.ct-stat {
    display: grid;
    grid-template-rows: 2rem 1rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.ct-band__stats--meter .ct-stat {
    grid-template-rows: 2rem 0.875rem 1rem;
}

.ct-stat__value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    white-space: nowrap;
}

.ct-stat__dot {
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}

.ct-stat__dot--amber { background: var(--ct-tone-amber); }
.ct-stat__dot--violet { background: var(--ct-tone-violet); }
.ct-stat__dot--emerald { background: var(--ct-tone-emerald); }
.ct-stat__dot--rose { background: var(--ct-tone-rose); }

.ct-stat__suffix {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    color: var(--ct-band-ink-muted);
}

.ct-stat__meter {
    align-self: center;
    min-width: 8.125rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--ct-band-meter-track);
    overflow: hidden;
}

/* A tile with no meter, in a band where another tile has one: keeps the row. */
.ct-stat__meter--none {
    min-width: 0;
    background: none;
}

.ct-stat__meter-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--ct-band-meter-fill);
}

/* A short note in a tile's middle row, where a meter would otherwise be
   (Workspace Analytics: "+12% vs Sep"). --up / --down colour a change. */
.ct-stat__note {
    align-self: center;
    font-size: 0.6875rem;
    line-height: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ct-band-ink-muted);
}

.ct-stat__note--up { color: var(--ct-tone-emerald); }
.ct-stat__note--down { color: var(--ct-tone-rose); }

.ct-stat__caption {
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ct-band-ink-muted);
    transition: color 150ms ease;
}

@media (max-width: 639px) {
    .ct-stat { grid-template-rows: 2rem auto; }
    .ct-band__stats--meter .ct-stat { grid-template-rows: 2rem 0.875rem auto; }
    .ct-stat__meter { min-width: 0; }
    .ct-stat__caption { white-space: normal; }
}

.ct-stat--action { cursor: pointer; }
.ct-stat--action:hover .ct-stat__caption { color: var(--ct-band-ink-hover); }
/* The tile whose filter is switched on. */
.ct-stat--current .ct-stat__caption,
.ct-stat--current:hover .ct-stat__caption {
    color: var(--ct-band-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ct-stat--action:focus-visible {
    outline: 2px solid var(--ct-band-meter-fill);
    outline-offset: 4px;
    border-radius: 0.375rem;
}

/* --------------------------------------------------------------------------
   TWO-PANE VIEWS (Inbox Triage, Action Centre's Drafted tab)
   .ct-split holds a list pane and a detail pane.

   Desktop: side by side, filling whatever height is left under the band.
   Each pane scrolls itself (the panes set their own overflow).

   Phone / tablet: one pane at a time. The list shows until a row is opened;
   .ct-split--detail-open then swaps it for the detail pane. The page itself
   is the only thing that scrolls.
   -------------------------------------------------------------------------- */

.ct-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.ct-split__list,
.ct-split__detail {
    min-width: 0;
}

@media (max-width: 1023px) {
    /* A phone never scrolls sideways. Anything wider than the screen (a
       long no-wrap label WebKit refuses to shrink, say) is clipped at the
       edge -- visible at once, and never able to drag the whole page. */
    .ct-page-scroll { overflow-x: hidden; }

    .ct-split--detail-open .ct-split__list { display: none; }
    .ct-split:not(.ct-split--detail-open) .ct-split__detail { display: none; }

    /* Focus mode (ui.js setPageFocus): the band steps aside while a detail
       pane is open, so what is being read gets the whole screen. */
    .ct-page-scroll--focus .ct-page-band { display: none; }
    .ct-page-scroll--focus .ct-page-band:not(.hidden-ui) + .ct-page-view { padding-top: var(--ct-gutter); }
}

@media (min-width: 1024px) {
    .ct-split {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-rows: minmax(0, 1fr);
        height: 100%;
        min-height: 26rem;
    }

    .ct-split__list,
    .ct-split__detail {
        min-height: 0;
    }

    /* A view with content ABOVE its split (Action Centre's tab row): .ct-fill
       on the view's root and .ct-fill__grow on the element holding the split
       hand the split the remaining height. Only while a split is actually
       inside -- any other content flows and scrolls normally. */
    .ct-fill:has(.ct-split) {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .ct-fill:has(.ct-split) > .ct-fill__grow {
        flex: 1 1 0%;
        min-height: 0;
    }
}

/* Phone-only action bar pinned to the bottom of the screen inside a detail
   pane (Inbox Triage: Add to Draft Queue / Dismiss). */
.ct-actionbar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--ct-surface);
    border-top: 1px solid var(--ct-line);
    border-radius: 0 0 1rem 1rem;
}

@media (min-width: 1024px) {
    .ct-actionbar { display: none; }
}

/* --------------------------------------------------------------------------
   SETTINGS ROWS (My AI Brain, Guardrails, Workspace Settings, My Settings)
   One .ct-row per setting, stacked inside a card. Desktop: what the setting
   is and why (title + help) on the left, the control on the right. Phone:
   the same two blocks, one above the other.
   -------------------------------------------------------------------------- */

.ct-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem 2.5rem;
    padding: 1.5rem;
}

.ct-row + .ct-row {
    border-top: 1px solid var(--ct-line-soft);
}

/* A row whose content is one block with no help / control split (Treva's
   Instructions: the autonomy card, the notifications card). The block
   takes the whole row at every width. Without this the desktop grid put
   it in the narrow help column, with an empty control column beside it. */
.ct-row.ct-row--full {
    grid-template-columns: minmax(0, 1fr);
}

.ct-row__title {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    font-weight: 700;
    color: var(--ct-ink);
}

/* A destructive setting's title (Workspace Settings: Danger Zone). */
.ct-row__title--danger {
    color: var(--ct-danger-ink);
}

.ct-row__help {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--ct-ink-muted);
}

/* A heading strip between groups of rows. */
.ct-rowgroup {
    margin: 0;
    padding: 0.75rem 1.5rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ct-ink-muted);
    background: var(--ct-surface-muted);
    border-top: 1px solid var(--ct-line-soft);
    border-bottom: 1px solid var(--ct-line-soft);
}

.ct-rowgroup:first-child {
    border-top: 0;
}

@media (min-width: 1024px) {
    .ct-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        padding: 1.75rem 2rem;
    }

    .ct-rowgroup {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* --------------------------------------------------------------------------
   USER MENU
   Opens from the account button at the foot of the sidebar. Fixed to the
   window (the sidebar clips anything inside it), so it works the same with
   the sidebar open, collapsed to the icon rail, or as the phone drawer.
   -------------------------------------------------------------------------- */

.ct-usermenu {
    position: fixed;
    left: 0.75rem;
    bottom: 4.5rem;
    z-index: 60;
    width: 15rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.375rem;
    background: var(--ct-surface);
    border: 1px solid var(--ct-line);
    border-radius: 0.875rem;
    box-shadow: 0 12px 32px -8px var(--ct-shadow);
}

.ct-usermenu__who {
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.75rem 0.625rem;
    border-bottom: 1px solid var(--ct-line-soft);
}

.ct-usermenu__email {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    color: var(--ct-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-usermenu__role {
    margin: 0;
    font-size: 0.625rem;
    line-height: 1rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ct-accent);
}

.ct-usermenu__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 0.625rem;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: var(--ct-ink-body);
    text-align: left;
    cursor: pointer;
}

.ct-usermenu__item:hover { background: var(--ct-surface-muted); }
.ct-usermenu__item:disabled { opacity: 0.5; cursor: not-allowed; }
.ct-usermenu__item:disabled:hover { background: none; }
.ct-usermenu__item--danger:hover { color: var(--ct-danger); background: var(--ct-danger-soft); }

.ct-usermenu__icon {
    width: 1rem;
    text-align: center;
    color: var(--ct-ink-faint);
}

.ct-usermenu__item--danger:hover .ct-usermenu__icon { color: var(--ct-danger); }

/* --------------------------------------------------------------------------
   KPI CARDS IN THE BAND'S PLACE (System Metrics)
   That view puts a row of cards where every other view has its band (ui.js
   setPageBand customHtml). On desktop each card is as tall as the band, so
   the content below starts on the same line as everywhere else.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .ct-kpi-card { min-height: var(--ct-band-min-height); }
}

/* --------------------------------------------------------------------------
   BUTTONS, SWITCHES AND CHOICES
   One family for every button in the app: in the band and on a light
   surface (page, card, modal, wizard, login, onboarding). The classes are
   the same in both places; the COLOURS come from the --ct-btn-* and
   --ct-seg-* variables, which :root sets for light surfaces and .ct-band
   re-sets for itself. A button never needs to know where it is.

   Kinds (one --primary per card, modal footer, wizard step or band):
     --primary         the action: CT violet on a light surface, white in
                       the band
     --outline         secondary: bordered, no fill
     --ghost           tertiary: text only (Cancel, Back, a modal's close
                       cross)
     --danger          a destructive confirm, solid rose (Delete, Remove)
     --danger-outline  destructive but not final (Disconnect, Dismiss)
     --orange          Send: the one action that fires a real email. Also
                       the call to action on a dark-by-design card
     --hero            the brand gradient: Sign in, Upgrade, Generate AI
                       Draft, AI Lab Run. Nothing else.
     --switch          band only: a state that is on or off, with --amber
                       or --emerald while on
   Sizes: default 40px (44px on a phone); --sm 32px (36px); --lg 48px.
   --icon makes a square, icon-only button (give it a title and an
   aria-label); --block makes it full width.
   Choice: .ct-seg holding .ct-seg__btn buttons, the chosen one --on;
   --block on the .ct-seg spreads the options across the full width.

   Always an icon and a label on an action. A disabled .ct-btn looks locked
   whatever its kind: nothing to act on yet, or busy (helpers.js
   setButtonBusy).

   Two classes on every coloured rule, on purpose. A <button> that has a
   type attribute also matches Tailwind's [type='button'] / [type='submit']
   reset (background: transparent), which ranks the same as ONE class and
   loads after this file -- a single class would lose its background to it.
   -------------------------------------------------------------------------- */

.ct-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--ct-btn-height);
    margin: 0;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;                            /* an <a> used as a button */
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

/* Sizes. Each size re-sets the height variable on the element itself, so
   --icon (width = height) follows without a rule of its own. */
.ct-btn--sm {
    --ct-btn-height: var(--ct-btn-height-sm);
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

.ct-btn--lg {
    --ct-btn-height: var(--ct-btn-height-lg);
    padding: 0 1.5rem;
    font-size: 0.9375rem;
}

.ct-btn--icon {
    width: var(--ct-btn-height);
    padding: 0;
}

.ct-btn--block { width: 100%; }

/* A ct-btn that a view also marks hidden / lg:hidden / lg:inline-flex
   (phone-only Back links, desktop-only header actions): those Tailwind
   display utilities must win over the kit's own display, whichever
   stylesheet the browser applied last. */
.ct-btn.hidden { display: none; }
@media (min-width: 1024px) {
    .ct-btn.lg\:hidden { display: none; }
    .ct-btn.lg\:inline-flex { display: inline-flex; }
}

/* Kinds */
.ct-btn.ct-btn--primary {
    background-color: var(--ct-btn-primary-bg);
    color: var(--ct-btn-primary-ink);
    box-shadow: 0 4px 6px -1px var(--ct-btn-primary-shadow);
}

.ct-btn.ct-btn--primary:hover { background-color: var(--ct-btn-primary-bg-hover); }

.ct-btn.ct-btn--outline,
.ct-btn.ct-btn--switch {
    background-color: var(--ct-btn-outline-bg);
    border-color: var(--ct-btn-line);
    color: var(--ct-btn-ink);
}

.ct-btn.ct-btn--outline:hover {
    background-color: var(--ct-btn-fill-hover);
    border-color: var(--ct-btn-line-hover);
    color: var(--ct-btn-ink-hover);
}

.ct-btn.ct-btn--switch:hover { background-color: var(--ct-btn-fill); }

.ct-btn--switch {
    padding: 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

/* A switch that is on. */
.ct-btn.ct-btn--amber {
    border-color: var(--ct-btn-amber-line);
    background-color: var(--ct-btn-amber-fill);
    color: var(--ct-btn-amber-ink);
}

.ct-btn.ct-btn--amber:hover { background-color: var(--ct-btn-amber-fill-hover); }

.ct-btn.ct-btn--emerald {
    border-color: var(--ct-btn-emerald-line);
    background-color: var(--ct-btn-emerald-fill);
    color: var(--ct-btn-emerald-ink);
}

.ct-btn.ct-btn--emerald:hover { background-color: var(--ct-btn-emerald-fill-hover); }

/* The Treva key (Core Engine Drop 6b-1): the Action Centre's "Pause
   Treva" switch carries her avatar and reads like a key. Down = Treva is
   on (pressed in: inset shadow, a hair lower, avatar in colour). Up =
   paused (released: raised shadow, amber, avatar greyed). Theme-safe:
   only kit variables. */
.ct-btn__avatar {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.ct-btn.ct-btn--key-down {
    background-color: var(--ct-btn-fill);
    box-shadow: inset 0 2px 4px var(--ct-btn-primary-shadow);
    transform: translateY(1px);
}

.ct-btn.ct-btn--key-down:hover { background-color: var(--ct-btn-fill-hover); }

.ct-btn.ct-btn--key-up {
    border-color: var(--ct-btn-amber-line);
    background-color: var(--ct-btn-amber-fill);
    color: var(--ct-btn-amber-ink);
    box-shadow: 0 3px 6px -1px var(--ct-btn-primary-shadow);
}

.ct-btn.ct-btn--key-up:hover { background-color: var(--ct-btn-amber-fill-hover); }

.ct-btn.ct-btn--key-up .ct-btn__avatar {
    filter: grayscale(1);
    opacity: 0.55;
}

.ct-btn.ct-btn--ghost {
    background-color: transparent;
    color: var(--ct-btn-ghost-ink);
}

.ct-btn.ct-btn--ghost:hover {
    background-color: var(--ct-btn-fill);
    color: var(--ct-btn-ghost-ink-hover);
}

.ct-btn.ct-btn--danger {
    background-color: var(--ct-btn-danger-bg);
    color: var(--ct-btn-danger-ink);
    box-shadow: 0 4px 6px -1px var(--ct-btn-danger-shadow);
}

.ct-btn.ct-btn--danger:hover { background-color: var(--ct-btn-danger-bg-hover); }

.ct-btn.ct-btn--danger-outline {
    background-color: var(--ct-btn-outline-bg);
    border-color: var(--ct-btn-danger-line);
    color: var(--ct-btn-danger-bg);
}

.ct-btn.ct-btn--danger-outline:hover { background-color: var(--ct-btn-danger-fill-hover); }

.ct-btn.ct-btn--orange {
    background-color: var(--ct-btn-orange-bg);
    color: var(--ct-btn-orange-ink);
    box-shadow: 0 4px 6px -1px var(--ct-btn-orange-shadow);
}

.ct-btn.ct-btn--orange:hover { background-color: var(--ct-btn-orange-bg-hover); }

/* Violet on a transparent background (Core Engine Drop 6b-3): the
   Action Centre's "Add to Outbox" -- an approval, quieter than the
   orange Send Now beside it. Brand ink and line, no fill until hover. */
.ct-btn.ct-btn--violet-ghost {
    background-color: transparent;
    border-color: var(--ct-btn-primary-bg);
    color: var(--ct-btn-primary-bg);
}

.ct-btn.ct-btn--violet-ghost:hover { background-color: var(--ct-btn-fill); }

.ct-btn.ct-btn--hero {
    background-image: linear-gradient(to right, var(--ct-btn-hero-from), var(--ct-btn-hero-to));
    color: var(--ct-btn-hero-ink);
    box-shadow: 0 10px 15px -3px var(--ct-btn-hero-shadow);
}

.ct-btn.ct-btn--hero:hover {
    background-image: linear-gradient(to right, var(--ct-btn-hero-from-hover), var(--ct-btn-hero-to-hover));
}

/* Locked. After the kinds above, so it wins over each of them (and over
   their hover). */
.ct-btn:disabled,
.ct-btn:disabled:hover {
    border-color: transparent;
    background-color: var(--ct-btn-fill);
    background-image: none;
    color: var(--ct-btn-locked-ink);
    box-shadow: none;
    cursor: not-allowed;
}

/* Choice */
.ct-seg {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: var(--ct-btn-height);
    padding: 0.25rem;
    border-radius: 0.75rem;
    background: var(--ct-seg-track);
}

.ct-seg--block {
    display: flex;
    width: 100%;
}

.ct-seg--block > .ct-seg__btn { flex: 1 1 0%; }

/* A choice with more options than a phone row holds (My AI Brain's
   working-hours presets): the pills wrap onto a second row instead of
   running off the screen. Same track, same pills, no new colour. */
.ct-seg--wrap {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    height: auto;
    min-height: var(--ct-btn-height);
}

.ct-seg--wrap > .ct-seg__btn { height: calc(var(--ct-btn-height) - 0.5rem); }

@media (max-width: 639px) {
    .ct-seg--wrap > .ct-seg__btn { flex: 1 1 40%; }
}

.ct-seg__btn {
    height: 100%;
    margin: 0;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ct-seg-ink);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.ct-seg__btn:hover { color: var(--ct-seg-ink-hover); }

.ct-seg__btn.ct-seg__btn--on,
.ct-seg__btn.ct-seg__btn--on:hover {
    background-color: var(--ct-seg-on-bg);
    color: var(--ct-seg-on-ink);
    box-shadow: 0 1px 2px var(--ct-seg-on-shadow);
}

/* An option that cannot be picked: the AI Models section of Edit
   Workspace only (a plan's default line cannot be taken away). Scoped to
   that section on purpose -- other choices are disabled only while a save
   is in flight and keep their look. Faded on whatever surface it sits, so
   it needs no dark value of its own. */
#tenant-model-grants-section .ct-seg__btn:disabled,
#tenant-model-grants-section .ct-seg__btn:disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
}

.ct-btn:focus-visible,
.ct-seg__btn:focus-visible {
    outline: 2px solid var(--ct-tone-violet);
    outline-offset: 2px;
}

/* A modal's footer row: buttons right-aligned, the primary last. On a
   phone they stack full width in the same order, so the primary ends up at
   the bottom, under the thumb. */
.ct-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 639px) {
    .ct-modal__footer {
        flex-direction: column;
        align-items: stretch;
    }
    .ct-modal__footer > .ct-btn { width: 100%; }

    /* Band buttons fill the row -- two that fit share it, otherwise each
       takes a row of its own. An icon-only button and a choice keep their
       size. */
    .ct-band__actions > .ct-btn { flex: 1 1 auto; }
    .ct-band__actions > .ct-btn--icon { flex: 0 0 auto; }
}


/* Rule 8: sizes that come from data (helpers.js applyDataSizes). These
   elements start at zero and are sized by script from data-ct-w /
   data-ct-h, so a bar that was never sized shows empty, never full. */
[data-ct-w] { width: 0; }
[data-ct-h] { height: 0; }

/* --------------------------------------------------------------------------
   TAGS (2026-10-26): every small uppercase label on a row -- the router's
   chip, "Queued by Treva", the verdict, "Booked", "Times proposed", Inbox
   Triage's badges -- drawn by ui.js ctTagHtml() so they share one height,
   one icon size and one baseline. The colour comes from Tailwind classes
   the helper adds (dark.css covers them); the border is always there,
   transparent when filled, so a hollow tag is never taller than a filled one.
   -------------------------------------------------------------------------- */
.ct-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.25rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.ct-tag i { font-size: 9px; line-height: 1; }