/* =============================================================================
   Xandev admin

   Loads after tokens.css, base.css, and ui.css, which are copied in from the
   public site by `console assets:sync`. Only admin-specific layout lives here;
   buttons, badges, tables, alerts, and form controls are reused as-is so the
   two surfaces cannot drift apart.

   Same rule as the public site: no inline style attributes anywhere, because
   the CSP has no 'unsafe-inline' and a nonce does not cover style attributes.
   ========================================================================== */

.admin {
    background: var(--surface-sunken);
}

/* -----------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.adm-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);

    display: flex;
    align-items: center;
    gap: var(--space-6);

    padding: var(--space-3) var(--space-5);
    border-block-end: 1px solid var(--line);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.adm-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;

    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-display);
    font-stretch: var(--width-display);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-tight);
}

.adm-brand svg {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--brand);
}

.adm-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.adm-nav::-webkit-scrollbar { display: none; }

.adm-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration) var(--ease),
                color var(--duration) var(--ease);
}

.adm-nav a:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.adm-nav a[aria-current="page"] {
    background: color-mix(in oklab, var(--brand) 16%, transparent);
    color: var(--brand-text);
}

.adm-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.adm-who {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.adm-signout {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.adm-signout:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 52rem) {
    .adm-who { display: none; }
    .adm-bar { gap: var(--space-4); padding-inline: var(--space-4); }
}

/* -----------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

.adm-main {
    max-width: 82rem;
    margin-inline: auto;
    padding: var(--space-6) var(--space-5) var(--space-10);
}

.adm-flash { display: grid; gap: var(--space-3); margin-block-end: var(--space-5); }

.adm-page { display: grid; gap: var(--space-6); }

.adm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.adm-head h1 {
    font-size: var(--text-2xl);
    margin-block-start: var(--space-2);
}

.adm-sub {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 400;
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */

.adm-stats {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.adm-stat {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);

    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--edge-highlight);

    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.adm-stat:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.adm-stat__label {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.adm-stat__value {
    font-family: var(--font-display);
    font-stretch: var(--width-display);
    font-weight: 800;
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-display);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Only a count that needs acting on gets the brand colour. If every tile were
   coloured, none of them would read as urgent. */
.adm-stat__value.is-live { color: var(--brand); }

/* -----------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.adm-split {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 64rem) {
    .adm-split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

.adm-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--edge-highlight);
    overflow: hidden;
}

.adm-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--line-faint);
}

.adm-card__head h2 { font-size: var(--text-base); letter-spacing: var(--tracking-tight); }
.adm-card__head a { font-size: var(--text-xs); font-weight: 600; text-decoration: none; }

.adm-card .table-wrap { border: none; border-radius: 0; }
.adm-card .empty-state { padding-block: var(--space-7); }

/* -----------------------------------------------------------------------------
   Event log
   -------------------------------------------------------------------------- */

.adm-events { display: grid; list-style: none; }

.adm-events li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-5);
    border-block-end: 1px solid var(--line-faint);
    font-size: var(--text-xs);
}

.adm-events li:last-child { border-block-end: none; }

.adm-events__event { color: var(--text-primary); font-size: var(--text-2xs); }

.adm-events__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--text-muted);
}

.adm-events__when { color: var(--text-muted); font-size: var(--text-3xs); }

/* -----------------------------------------------------------------------------
   Sign-in screen
   -------------------------------------------------------------------------- */

.adm-body--centred .adm-main {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding-block: var(--space-8);
}

.adm-signin {
    width: min(24rem, 100%);
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;

    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: var(--shadow-3), var(--edge-highlight);
}

.adm-signin__mark { width: 2.75rem; color: var(--brand); }
.adm-signin__mark svg { width: 100%; height: auto; }

.adm-signin h1 { font-size: var(--text-xl); }
.adm-signin__lead { font-size: var(--text-sm); color: var(--text-muted); }
.adm-signin form { width: 100%; }

.adm-signin .btn { gap: var(--space-3); }

.adm-signin__note {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

.adm-signin .alert { text-align: left; width: 100%; }

/* -----------------------------------------------------------------------------
   Forms and detail pages
   -------------------------------------------------------------------------- */

.adm-page--narrow { max-width: 46rem; }

.adm-form {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

/* A form sitting inside a card that already has its own content above it. */
.adm-form--inset {
    border-block-start: 1px solid var(--line-faint);
    background: var(--surface-sunken);
}

.adm-form__submit { align-self: end; }

.adm-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.adm-details { display: grid; }

.adm-details > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-block-end: 1px solid var(--line-faint);
}

.adm-details > div:last-child { border-block-end: none; }

.adm-details dt {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.adm-details dd { font-size: var(--text-sm); text-align: right; word-break: break-word; }

.adm-notes {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-block-start: 1px solid var(--line-faint);
}

.adm-notes p { font-size: var(--text-sm); color: var(--text-secondary); }

/* Buttons stacked inside a table cell, each in its own form because they post
   to different endpoints. */
.adm-rowactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* -----------------------------------------------------------------------------
   One-time sign-in link

   Deliberately loud. This is a credential shown exactly once, and it should
   not look like ordinary page furniture the eye skips over.
   -------------------------------------------------------------------------- */

.adm-linkbox { border-color: color-mix(in oklab, var(--brand) 45%, var(--line)); }

.adm-linkbox__body { display: grid; gap: var(--space-3); padding: var(--space-5); }

.adm-linkbox__url {
    display: block;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--brand-text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    word-break: break-all;

    /* So a triple-click or drag selects the whole link and nothing else. */
    user-select: all;
}

/* -----------------------------------------------------------------------------
   Projects

   The project screen is the mirror of what a client reads on their portal, so
   it carries a lot of state in a small space: what is done, what is shared,
   what is internal. Shared and internal are the two that matter, and both are
   shown as a badge rather than a subtle colour shift.
   -------------------------------------------------------------------------- */

.adm-stack { display: grid; gap: var(--space-5); align-content: start; }

.adm-progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.adm-progress__bar {
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
}

.adm-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-strong), var(--brand));
}

/* Widths as classes, in 5% steps. An inline style attribute would be silently
   dropped: the CSP has no 'unsafe-inline' for styles and a nonce does not
   cover attributes. */
.adm-progress__fill--0   { width: 0; }
.adm-progress__fill--5   { width: 5%; }
.adm-progress__fill--10  { width: 10%; }
.adm-progress__fill--15  { width: 15%; }
.adm-progress__fill--20  { width: 20%; }
.adm-progress__fill--25  { width: 25%; }
.adm-progress__fill--30  { width: 30%; }
.adm-progress__fill--35  { width: 35%; }
.adm-progress__fill--40  { width: 40%; }
.adm-progress__fill--45  { width: 45%; }
.adm-progress__fill--50  { width: 50%; }
.adm-progress__fill--55  { width: 55%; }
.adm-progress__fill--60  { width: 60%; }
.adm-progress__fill--65  { width: 65%; }
.adm-progress__fill--70  { width: 70%; }
.adm-progress__fill--75  { width: 75%; }
.adm-progress__fill--80  { width: 80%; }
.adm-progress__fill--85  { width: 85%; }
.adm-progress__fill--90  { width: 90%; }
.adm-progress__fill--95  { width: 95%; }
.adm-progress__fill--100 { width: 100%; }

/* --- Lists of milestones, tasks, files ------------------------------------ */

.adm-list {
    margin: 0;
    padding: 0 var(--space-5);
    list-style: none;
}

.adm-list__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid var(--line-faint);
    padding: var(--space-4) 0;
}

.adm-list__row:last-child { border-bottom: 0; }

.adm-list__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.adm-list--files .adm-list__title a { color: var(--text-primary); }

/* The per-row controls: a status select and a couple of small buttons that
   have to sit on one line without wrapping under the label. */
.adm-inline {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

@media (max-width: 44rem) {
    .adm-list__row { flex-direction: column; }
}

/* --- Thread --------------------------------------------------------------- */

.adm-thread {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0 var(--space-5);
    list-style: none;
}

.adm-msg {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    padding: var(--space-4);
}

/* A client's message is the one to notice and answer, so it gets the brand
   edge. An internal note is the one never to paste into an email, so it is
   marked with the warning colour rather than left looking like a reply. */
.adm-msg--client { border-left: 3px solid var(--brand); }

.adm-msg--internal {
    border-left: 3px solid var(--warning);
    background: var(--warning-surface);
}

.adm-msg__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.adm-msg__who {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}

.adm-msg__head time { font-size: var(--text-3xs); color: var(--text-muted); }

.adm-msg__body {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

/* --- Project status badges ------------------------------------------------ */

.badge--in_progress,
.badge--review   { background: var(--info-surface);    color: var(--info); }
.badge--planning { background: var(--surface-overlay); color: var(--text-secondary); }
.badge--on_hold,
.badge--cancelled { background: var(--danger-surface); color: var(--danger); }
.badge--complete { background: var(--success-surface); color: var(--success); }

/* -----------------------------------------------------------------------------
   Leads
   -------------------------------------------------------------------------- */

.adm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.adm-tabs a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.adm-tabs a:where(:hover) {
    border-color: var(--line-strong);
    color: var(--text-primary);
}

.adm-tabs a[aria-current="page"] {
    border-color: transparent;
    background: var(--surface-overlay);
    color: var(--text-primary);
}

.adm-tabs__count {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    color: var(--text-muted);
}

.adm-tabs a[aria-current="page"] .adm-tabs__count { color: var(--brand-text); }

/* The enquiry itself. Given room, because it is the only part of the page
   that is actually worth reading. */
.adm-message {
    padding: var(--space-5);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    white-space: normal;
}

/* The exchange after the enquiry.
   Sides are marked by a rule down the edge rather than by the chat convention
   of pushing one side right, which wastes half the width and stops reading
   like a record the moment a message is longer than a sentence. */
.adm-thread {
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-thread__item {
    padding: var(--space-4) var(--space-5);
    border-left: 2px solid var(--line);
}

.adm-thread__item + .adm-thread__item {
    border-top: 1px solid var(--line);
}

.adm-thread__item--out { border-left-color: var(--brand); }

.adm-thread__item--in {
    border-left-color: var(--accent);
    background: var(--surface-sunken);
}

.adm-thread__meta {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.adm-thread__subject {
    margin: var(--space-1) 0 0;
    font-weight: 600;
    color: var(--text-primary);
}

.adm-thread .adm-message {
    padding: var(--space-2) 0 0;
}

.adm-preview {
    max-width: 34rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Referrers and user agents are long, unbroken, and not worth a horizontal
   scrollbar on the whole card. */
.adm-break { word-break: break-word; overflow-wrap: anywhere; }

/* --- Lead status badges --------------------------------------------------- */

.badge--new     { background: var(--info-surface);     color: var(--info); }
.badge--read    { background: var(--surface-overlay);  color: var(--text-secondary); }
.badge--replied { background: var(--warning-surface);  color: var(--warning); }
.badge--won     { background: var(--success-surface);  color: var(--success); }
.badge--lost,
.badge--spam    { background: var(--danger-surface);   color: var(--danger); }

/* -----------------------------------------------------------------------------
   Time

   The running clock is the one piece of UI here that has to be noticed from
   across the room, because the failure it guards against is forgetting it is
   on. It gets the brand colour and a pulse; nothing else on the page does.
   -------------------------------------------------------------------------- */

.adm-timer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid color-mix(in oklab, var(--brand) 45%, var(--line));
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--brand) 10%, transparent);
    padding: var(--space-2) var(--space-3);
}

.adm-timer__dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--brand);
    animation: adm-pulse 2s ease-in-out infinite;
}

/* Someone who has asked not to see motion still needs to see that it is on,
   so the dot stops moving and stays lit rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
    .adm-timer__dot { animation: none; }
}

@keyframes adm-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.adm-timer__what {
    display: grid;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.adm-timer__what span {
    color: var(--text-muted);
    font-weight: 400;
    font-size: var(--text-3xs);
}

.adm-timer__clock {
    color: var(--brand-text);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 62rem) {
    .adm-timer__what { display: none; }
}

/* --- Clock panel on the time page ----------------------------------------- */

.adm-clock { padding: var(--space-5); }

.adm-clock__live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.adm-clock__what { margin: 0; font-size: var(--text-base); font-weight: 600; }
.adm-clock__what a { color: var(--text-primary); text-decoration: none; }

.adm-clock__elapsed {
    margin-left: auto;
    color: var(--brand-text);
    font-family: var(--font-display);
    font-stretch: var(--width-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.adm-clock__start {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
}

.adm-clock__start .field { flex: 1 1 14rem; }

/* --- Day strip ------------------------------------------------------------ */

.adm-days {
    display: flex;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-5);
}

.adm-days__col {
    display: grid;
    gap: var(--space-2);
    flex: 1 1 0;
    justify-items: center;
}

.adm-days__track {
    display: flex;
    align-items: end;
    width: 100%;
    height: 4rem;
    border-radius: var(--radius-xs);
    background: var(--surface-sunken);
}

.adm-days__bar {
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--brand), var(--brand-strong));
}

.adm-days__label { font-size: var(--text-3xs); color: var(--text-muted); }
.adm-days__value { font-size: var(--text-3xs); color: var(--text-secondary); }

/* Bar heights as classes, in 5% steps. An inline style attribute would be
   silently dropped by the CSP. A day with nothing on it keeps a 2px sliver so
   the column still reads as a day rather than as missing. */
.adm-days__bar--0   { height: 2px; background: var(--line-strong); }
.adm-days__bar--5   { height: 5%; }
.adm-days__bar--10  { height: 10%; }
.adm-days__bar--15  { height: 15%; }
.adm-days__bar--20  { height: 20%; }
.adm-days__bar--25  { height: 25%; }
.adm-days__bar--30  { height: 30%; }
.adm-days__bar--35  { height: 35%; }
.adm-days__bar--40  { height: 40%; }
.adm-days__bar--45  { height: 45%; }
.adm-days__bar--50  { height: 50%; }
.adm-days__bar--55  { height: 55%; }
.adm-days__bar--60  { height: 60%; }
.adm-days__bar--65  { height: 65%; }
.adm-days__bar--70  { height: 70%; }
.adm-days__bar--75  { height: 75%; }
.adm-days__bar--80  { height: 80%; }
.adm-days__bar--85  { height: 85%; }
.adm-days__bar--90  { height: 90%; }
.adm-days__bar--95  { height: 95%; }
.adm-days__bar--100 { height: 100%; }

/* --- Time summary on a project -------------------------------------------- */

.adm-timesum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    border-block-end: 1px solid var(--line-faint);
    padding: var(--space-4) var(--space-5);
}

.adm-timesum > div { display: grid; gap: var(--space-1); }

.adm-timesum__value {
    font-family: var(--font-display);
    font-stretch: var(--width-display);
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.adm-timesum__go { margin-left: auto; }

/* A note to self, set apart so it is never mistaken at a glance for the
   description the client reads. */
.adm-privatenote {
    border-left: 2px solid var(--warning);
    padding-left: var(--space-3);
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Billing time --------------------------------------------------------- */

.adm-bill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-5) var(--space-5) 0;
    border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--brand) 7%, transparent);
    padding: var(--space-4) var(--space-5);
}

.adm-bill p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.adm-bill strong { color: var(--text-primary); }

.adm-bill__note {
    margin: var(--space-2) var(--space-5) 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* A retired catalogue item still shows, dimmed, because charges raised from
   it point at it and hiding it would make that history look orphaned. */
.adm-list__row--retired { opacity: 0.55; }

.adm-form--edit { width: 100%; padding: 0; }

/* -----------------------------------------------------------------------------
   Media library
   -------------------------------------------------------------------------- */

.adm-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-4);
}

.adm-media__item {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    overflow: hidden;
}

/* Checkerboard, so a transparent PNG reads as transparent rather than as the
   card background. */
.adm-media__item > a {
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--surface-sunken);
    background-image:
        linear-gradient(45deg, var(--line-faint) 25%, transparent 25%, transparent 75%, var(--line-faint) 75%),
        linear-gradient(45deg, var(--line-faint) 25%, transparent 25%, transparent 75%, var(--line-faint) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.adm-media__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.adm-media__item figcaption {
    display: grid;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-4);
}

.adm-media__name {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    word-break: break-word;
}

/* user-select: all so one click grabs the whole path, which is the only thing
   anyone ever wants to do with it. */
.adm-media__path {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--brand-text);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    word-break: break-all;
    user-select: all;
}

.adm-media__item .adm-form { padding: 0; gap: var(--space-2); }

.adm-media__preview { border-radius: var(--radius-md); }

.adm-usedby { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.adm-usedby li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

/* -----------------------------------------------------------------------------
   Content editor
   -------------------------------------------------------------------------- */

.adm-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
    gap: var(--space-4);
}

@media (max-width: 68rem) {
    .adm-editor { grid-template-columns: minmax(0, 1fr); }
}

.adm-editor__main { display: grid; gap: var(--space-4); }
.adm-editor__side { display: grid; gap: var(--space-4); }

.input--lg { font-size: var(--text-lg); font-weight: 600; }

/* Monospace and tall, because this is where the writing happens and prose in a
   proportional 3-line box is miserable. */
.adm-editor__body {
    min-height: 32rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    resize: vertical;
}

.adm-preview { padding: var(--space-4) var(--space-5); }
.adm-preview summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.adm-preview__body { margin-top: var(--space-4); }
.adm-preview__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* --- Image picker --------------------------------------------------------- */

.adm-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5);
    max-height: 18rem;
    overflow-y: auto;
}

.adm-picker__item {
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    cursor: pointer;
    overflow: hidden;
}

.adm-picker__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.adm-picker__item[aria-pressed="true"] { border-color: var(--brand); }

.adm-picker__empty { padding: 0 var(--space-5) var(--space-5); }

/* --- Delete ---------------------------------------------------------------- */

.adm-danger { border-color: color-mix(in oklab, var(--danger) 35%, var(--line)); }
.adm-danger .adm-card__head h2 { color: var(--danger); }

.adm-postrow { display: flex; align-items: center; gap: var(--space-4); }

.adm-postrow__thumb {
    flex: none;
    width: 4.5rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Lists edited as plain text: what a service includes, its process, its FAQs.
   Monospace because the line breaks are structural, not decorative. */
.adm-editor__list {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    resize: vertical;
}

/* --- Settings -------------------------------------------------------------- */

.adm-lede {
    max-width: 60ch;
    margin: calc(var(--space-2) * -1) 0 var(--space-5);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* One of the repeating home page cards. Bordered because the fields inside it
   belong together and the one below is a different card, not more of this one. */
.adm-repeat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.adm-repeat legend {
    padding: 0 var(--space-2);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- Analytics ------------------------------------------------------------- */

.adm-stat__delta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.adm-stat__delta--up   { color: var(--success); }
.adm-stat__delta--down { color: var(--warning); }

/* A bar chart with no library. The heights come from a nonced <style> block on
   the page itself, because a style attribute is not covered by the nonce and
   would silently do nothing. */
.adm-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 9rem;
    padding: var(--space-5);
    padding-block-end: var(--space-3);
}

.adm-chart__col {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 2px;
}

.adm-chart__bar {
    width: 100%;
    min-height: 1px;
    border-radius: 1px 1px 0 0;
    background: color-mix(in oklab, var(--brand) 62%, transparent);
    transition: background-color var(--duration) var(--ease);
}

.adm-chart__col:hover .adm-chart__bar { background: var(--brand); }

.adm-chart__axis {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--space-5) var(--space-4);
    font-size: var(--text-3xs);
    color: var(--text-muted);
}

/* Rows that are a label and a number, packed tighter than a list of records. */
.adm-list--tight .adm-list__row { padding-block: var(--space-2); }

.input--sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    min-width: 12rem;
}

/* The two counts in the analytics tabs. Live is a state, unread is a queue, so
   they are coloured differently on purpose. */
.adm-live-dot,
.adm-unread {
    padding: 0 0.4rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.adm-live-dot { background: color-mix(in oklab, var(--success) 24%, transparent); color: var(--success); }
.adm-unread   { background: color-mix(in oklab, var(--brand) 26%, transparent); color: var(--brand-text); }

/* A visitor's history: one entry per page, with the visits marked off. */
.adm-trail { display: flex; flex-direction: column; gap: var(--space-1); }

.adm-trail__visit {
    margin-block-start: var(--space-4);
    padding-block-end: var(--space-2);
    border-block-end: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.adm-trail__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-1);
}

.adm-trail__row span { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }

/* The conversation on a visitor profile. Same shape as the widget the visitor
   sees, mirrored, so it is obvious which side said what. */
.adm-thread { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }

.adm-thread__line {
    max-width: 80%;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    overflow-wrap: anywhere;
}

.adm-thread__line--admin {
    align-self: flex-end;
    background: color-mix(in oklab, var(--brand) 22%, transparent);
    color: var(--text-primary);
}

.adm-thread__line--visitor {
    align-self: flex-start;
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.adm-thread__meta {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    color: var(--text-muted);
}

/* 0 to 100, as a bar rather than a number nobody can calibrate. */
.adm-score { display: flex; align-items: center; gap: var(--space-3); }

.adm-score__track {
    flex: 1;
    height: 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    overflow: hidden;
}

.adm-score__fill { height: 100%; background: var(--brand); }

/* A definition list read as label-above-value rather than as a table, so a
   long email or a fingerprint can wrap without pushing anything sideways. */
.adm-meta { display: grid; gap: var(--space-3); margin: 0; }

.adm-meta dt {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.adm-meta dd { margin: 0; color: var(--text-primary); font-size: var(--text-sm); }

.text-right { text-align: right; }

/* The reasons behind a score, listed under it. */
.adm-signals { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }

/* --- Quotes ---------------------------------------------------------------- */

.badge--danger {
    background: color-mix(in oklab, var(--danger) 20%, transparent);
    color: var(--danger);
}

/* The one block on the dashboard that is a to-do list rather than a report, so
   it gets a left edge in the brand colour to separate it from the panels
   below, which are history. */
.adm-needs { border-left: 2px solid var(--brand); }

/* -----------------------------------------------------------------------------
   The shell: slim bar across the top, grouped nav down the side

   Fifteen entries in one row had stopped being navigation and become a list to
   read. Down the side they are all visible at once, nothing hides behind a
   menu, and the group headings say which part of the business a screen belongs
   to without any extra words on the links themselves.

   The top bar stays because the running timer has to be impossible to miss,
   and because it is the one place in this design system allowed to use the
   backdrop blur.
   -------------------------------------------------------------------------- */

/* The nav used to have flex: 1 and did this job by being in the middle. */
.adm-bar__right { margin-inline-start: auto; }

.adm-shell {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    align-items: start;
}

.adm-side {
    position: sticky;
    /* Clears the top bar, whose height is padding plus a line of text. */
    top: 3.25rem;
    max-height: calc(100vh - 3.25rem);
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: var(--space-5);

    padding: var(--space-6) var(--space-4) var(--space-10);
    border-inline-end: 1px solid var(--line);
    scrollbar-width: thin;
}

.adm-side__group { display: flex; flex-direction: column; gap: 1px; }

.adm-side__heading {
    margin: 0 0 var(--space-2);
    padding-inline: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.adm-side a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration) var(--ease),
                color var(--duration) var(--ease);
}

.adm-side a:where(:hover) { background: var(--surface-hover); color: var(--text-primary); }

.adm-side a[aria-current="page"] {
    background: color-mix(in oklab, var(--brand) 16%, transparent);
    color: var(--brand-text);
}

/* The main column keeps its own measure and centres in what is left, so a wide
   monitor does not stretch a table to arm's length. */
.adm-shell .adm-main { max-width: 74rem; }

/*
   Narrow: back to the horizontal strip this used to be, which is the right
   shape for a phone and needs no JavaScript to switch between the two.
   The group headings go, because a row of them reads as more links.
*/
@media (max-width: 64rem) {
    .adm-shell { display: block; }

    .adm-side {
        position: static;
        max-height: none;
        flex-direction: row;
        gap: var(--space-1);
        overflow-x: auto;
        padding: var(--space-2) var(--space-4);
        border-inline-end: 0;
        border-block-end: 1px solid var(--line);
    }

    .adm-side::-webkit-scrollbar { display: none; }

    .adm-side__group { flex-direction: row; gap: var(--space-1); }
    .adm-side__heading { display: none; }

    /* A hairline between groups, so the run of links still reads as sections. */
    .adm-side__group + .adm-side__group {
        margin-inline-start: var(--space-2);
        padding-inline-start: var(--space-2);
        border-inline-start: 1px solid var(--line);
    }
}

/* --- Keyword checks --------------------------------------------------------
   A list of yes and no, not a score. The mark is a plain character rather than
   an icon font or an inline SVG per row, and it is aria-hidden with the verdict
   repeated for screen readers, because colour and a symbol are not an answer on
   their own. */

.adm-checks { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.adm-checks__row { display: flex; gap: var(--space-3); align-items: start; }

.adm-checks__mark {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-block-start: 0.1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.adm-checks__row--yes .adm-checks__mark {
    background: color-mix(in oklab, var(--success) 22%, transparent);
    color: var(--success);
}

.adm-checks__row--no .adm-checks__mark {
    background: color-mix(in oklab, var(--warning) 22%, transparent);
    color: var(--warning);
}

.adm-checks__what {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.adm-checks .adm-sub { display: block; margin-block-start: 0.15rem; }

/* A numbered set of one-time setup steps. Numbered because they genuinely are
   a sequence: the service account has to exist before it can be given access. */
.adm-steps {
    margin: 0;
    padding-inline-start: var(--space-5);
    display: grid;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.adm-steps li::marker { color: var(--brand-text); font-family: var(--font-mono); }

/* --- Drafting --------------------------------------------------------------
   A draft button sits under the field it fills, quieter than the save button
   beside it: this suggests, that decides. */

.adm-ai { display: flex; align-items: center; gap: var(--space-3); margin-block-start: var(--space-2); }

.adm-ai__status { font-size: var(--text-xs); }

/* --- Email templates -------------------------------------------------------
   The preview is an iframe so email styles and admin styles cannot reach each
   other. It needs a height because an iframe has no idea how tall its own
   document is. */

.adm-split--even { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 64rem) {
    .adm-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.adm-mailpreview {
    width: 100%;
    height: 26rem;
    margin-block-start: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #f5f6f9;
}

/* --- Brand guide ------------------------------------------------------------
   The one screen whose job is to be copied out of, so everything on it is a
   click target and every value is shown rather than described. */

.adm-logos {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

@media (min-width: 52rem) {
    .adm-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.adm-logo {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

/* Each mark is drawn for one background, so it is shown on that background
   rather than on whichever one the admin happens to be in. */
.adm-logo--dark { background: #0A0B0F; }
.adm-logo:not(.adm-logo--dark) { background: #F5F6F9; }
.adm-logo:not(.adm-logo--dark) .adm-list__title { color: #14161C; }
.adm-logo:not(.adm-logo--dark) .adm-sub { color: #4B5263; }

.adm-logo img { flex: none; width: 7.5rem; height: auto; }
.adm-logo figcaption { display: grid; gap: var(--space-2); justify-items: start; }

.adm-swatches { display: grid; gap: var(--space-4); padding: var(--space-5); }

@media (min-width: 60rem) {
    .adm-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-swatches--tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.adm-swatch { display: flex; gap: var(--space-4); align-items: flex-start; }

.adm-swatch__chip {
    flex: none;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
}

.adm-swatch__chip:where(:hover) { transform: scale(1.04); }
.adm-swatch__chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.adm-swatch__hex {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
}

.adm-swatch__hex:where(:hover) { color: var(--text-primary); border-color: var(--line-strong); }

/* A rule and its opposite, the second quieter than the first. */
.adm-rule .adm-sub { color: var(--text-muted); }

.adm-copied {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 80;

    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-overlay);
    border: 1px solid var(--line-strong);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);

    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration) var(--ease);
}

.adm-copied.is-shown { opacity: 1; }