/* ==========================================================================
   Admin area pages (redesign v2, handoff 2026-09-28 -> "Vault Admin"):
   System Status, Audit Log, Magento Sync, Workflows, Shift Handoff, and the
   sign-in page. ONE stylesheet for the area (the fab_stations.css pattern):
   linked from each page's {% block extra_css %} (the sign-in page, which does
   not extend base.html, links it itself). Nothing here restyles a shared
   component -- every rule is under a cds-admin-* / cds-audit-* / cds-wf-* /
   cds-handoff-* / cds-signin-* hook this file introduces, on top of the
   Browse / Overview kit already in carbon.css.

   Tokens, never literals (UI_STANDARDS section 4): --glass-*, --sp-*, --text-*,
   --radius-*, --font-*. The verdict colours come as rgba(var(--glass-*-rgb), a).
   The Admin area's accent is slate: .accent-system (carbon.css) -> --station-admin,
   applied to the title dot only by core/_page_header.html.
   ========================================================================== */

/* ---------- Cards: one service, one rule set, one count (Overview type) ---------- */
.cds-admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
}
.cds-admin-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border-hover);
    background: var(--glass-bg-surface);
}
/* A card that is NOT fine says so on its edge, in the five-hue vocabulary. */
.cds-admin-card--warning {
    border-color: rgba(var(--glass-warning-rgb), 0.35);
    background: rgba(var(--glass-warning-rgb), 0.05);
}
.cds-admin-card--error {
    border-color: rgba(var(--glass-error-rgb), 0.35);
    background: rgba(var(--glass-error-rgb), 0.05);
}
.cds-admin-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}
/* The status dot brings its own right margin; the head's gap is the only spacing. */
.cds-admin-card__head .cds-status-dot { margin-right: 0; }
.cds-admin-card__name {
    flex: none;
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--glass-text-primary);
}
.cds-admin-card__state {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--glass-text-secondary);
}
.cds-admin-card__meta {
    flex: none;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--glass-text-secondary);
    white-space: nowrap;
}
.cds-admin-card__rows {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin: 0;
    font-size: var(--text-xs);
}
.cds-admin-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    min-width: 0;
}
.cds-admin-card__row dt { flex: none; color: var(--glass-text-secondary); }
.cds-admin-card__row dd {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-family: var(--font-mono);
    color: var(--glass-text-primary);
    overflow-wrap: anywhere;
}
.cds-admin-card__row dd.is-warning { color: var(--glass-warning); }
.cds-admin-card__row dd.is-error { color: var(--glass-text-error); }
.cds-admin-card__row dd.is-ok { color: var(--glass-success); }
.cds-admin-card__note {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--glass-text-secondary);
}

/* ---------- System Status: the scheduled-jobs panel and the legacy list ---------- */
.cds-admin-panel__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--glass-text-primary);
    white-space: nowrap;
}
.cds-admin-panel__foot {
    margin: var(--sp-2) 0 0;
    font-size: var(--text-2xs);
    color: var(--glass-text-tertiary);
}
/* A long table scrolls inside its panel instead of lengthening the page; the region is
   focusable (tabindex) so a keyboard user can scroll it. */
.cds-admin-scroll {
    max-height: 30rem;
    overflow: auto;
    border-radius: var(--radius-md);
}
.cds-admin-scroll:focus-visible { outline: 2px solid var(--glass-link); outline-offset: 2px; }
.cds-admin-col--task { width: 17rem; }
.cds-admin-col--expects { width: 15rem; }
.cds-admin-col--when { width: 8.5rem; }
.cds-admin-col--result { width: 7.5rem; }
/* The table keeps a readable Note column: below that width the panel scrolls sideways
   (phones get the labelled-card view instead, carbon-mobile.css). */
@media (min-width: 641px) {
    .cds-admin-jobs { min-width: 72rem; }
}
.cds-admin-jobs__label,
.cds-admin-jobs__key {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.cds-admin-jobs__key {
    font-size: var(--text-2xs);
    color: var(--glass-text-tertiary);
}

/* The Django-Q schedules: kept, but folded away and labelled for what they are. */
.cds-admin-legacy {
    margin: var(--sp-3) 0 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border-hover);
    background: var(--glass-bg-surface);
}
.cds-admin-legacy > summary {
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    font-size: var(--text-sm-tight);
    color: var(--glass-text-secondary);
}
.cds-admin-legacy > summary:hover { color: var(--glass-text-primary); }
.cds-admin-legacy > summary:focus-visible {
    outline: 2px solid var(--glass-link);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
}
.cds-admin-legacy__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: 0 var(--sp-4) var(--sp-3);
}
.cds-admin-legacy__table { font-size: var(--text-sm-tight); }

/* ---------- Audit Log ---------- */
/* Action tabs: only the ACTIVE tab carries a count (the paging total the page already needs);
   a count on the others would be a GROUP BY over a table with no index on action. The empty
   count span is hidden, scoped to this page. */
.cds-audit .cds-status-tabs__count:empty { display: none; }

/* Filter row: the kit's toolbar, with labelled selects and dates instead of bare ones. */
.cds-audit-toolbar { row-gap: var(--sp-2); }
.cds-audit-toolbar__field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.cds-audit-toolbar__label { font-size: var(--text-2xs); color: var(--glass-text-secondary); }
.cds-audit-toolbar .cds-select { width: 11rem; }   /* table names run to 26 characters */
.cds-audit-toolbar .cds-text-input {
    width: 9.5rem;
    height: 32px;
    padding: 0 var(--sp-2);
    font-size: var(--text-sm-tight);
}
.cds-audit-toolbar__check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: var(--text-sm-tight);
    color: var(--glass-text-secondary);
    cursor: pointer;
}
.cds-audit-toolbar__check input { width: 16px; height: 16px; }
@media (pointer: coarse) {
    .cds-audit-toolbar__check { min-height: 44px; }
}

/* Column widths (table-layout: fixed; the Summary column takes the rest). */
.cds-audit-col--when { width: 11rem; }      /* 2026-09-30 09:12:03 in mono */
.cds-audit-col--user { width: 8rem; }
.cds-audit-col--action { width: 6.5rem; }
.cds-audit-col--table { width: 13rem; }
.cds-audit-col--record { width: 7rem; }
.cds-audit-col--flags { width: 8rem; }

/* The diff: field / before / after. Before reads red, after green (the prototype's pair, on tokens). */
.cds-audit-diff {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--text-xs);
}
.cds-audit-diff th,
.cds-audit-diff td {
    padding: 4px var(--sp-2) 4px 0;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--glass-border);
}
/* A value keeps the spaces the database holds (the text is no longer whitespace-collapsed). */
.cds-audit-diff td { white-space: pre-wrap; }
.cds-audit-diff thead th {
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--glass-text-secondary);
}
.cds-audit-diff tbody th {
    width: 32%;
    font-weight: 500;
    color: var(--glass-text-secondary);
}
.cds-audit-diff thead .cds-audit-diff__head--before { color: var(--glass-text-error); }
.cds-audit-diff thead .cds-audit-diff__head--after { color: var(--glass-success); }
.cds-audit-diff__before { color: var(--glass-text-error); }
.cds-audit-diff__after { color: var(--glass-success); }
/* A side that does not carry the field at all is a dash, not a value. */
.cds-audit-diff td.is-absent { color: var(--glass-text-tertiary); }
/* A value cut in the cell: the whole of it, one click away, with no script. */
.cds-audit-diff__more { margin-top: 4px; white-space: normal; }
.cds-audit-diff__more > summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    cursor: pointer;
    font-size: var(--text-2xs);
    color: var(--glass-link);
}
.cds-audit-diff__full {
    margin: 4px 0 0;
    padding: 6px 8px;
    max-height: 18rem;
    overflow: auto;
    border-radius: var(--radius-sm);
    background: var(--glass-bg-surface);
    color: inherit;
    font: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.cds-audit-diff__note {
    margin: 4px 0 0;
    font-size: var(--text-2xs);
    color: var(--glass-text-secondary);
}
@media (pointer: coarse) {
    .cds-audit-diff__more > summary { min-height: 44px; }
}
.cds-audit-flags {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
}

/* The entry as a page: the panel, full width, for the row's own link. */
.cds-audit-entry {
    max-width: 44rem;
    border-radius: var(--radius-lg);
    background: var(--glass-work-card-bg);
    border: 1px solid var(--glass-work-card-border);
    border-top: 2px solid var(--station-color, var(--glass-link));
    box-shadow: var(--shadow-lg);
}
.cds-audit-entry__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    font-size: var(--text-sm-tight);
}
.cds-audit-entry__open {
    margin-left: auto;
    height: 34px;
    min-height: 34px;
    font-size: var(--text-xs);
}

/* ---------- Count tiles: one figure and what it counts (Overview type) ---------- */
.cds-admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 10px;
    margin: 0 0 var(--sp-3);
}
.cds-admin-tile {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--glass-border-hover);
    background: var(--glass-bg-surface);
}
.cds-admin-tile--warning {
    border-color: rgba(var(--glass-warning-rgb), 0.35);
    background: rgba(var(--glass-warning-rgb), 0.05);
}
.cds-admin-tile--error {
    border-color: rgba(var(--glass-error-rgb), 0.35);
    background: rgba(var(--glass-error-rgb), 0.05);
}
.cds-admin-tile__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cds-admin-tile__head .cds-status-dot { margin-right: 0; }
.cds-admin-tile__label { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cds-admin-tile__figure { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cds-admin-tile__num {
    flex: none;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1;
    color: var(--glass-text-primary);
}
.cds-admin-tile__num--warning { color: var(--glass-warning); }
.cds-admin-tile__num--error { color: var(--glass-text-error); }
.cds-admin-tile__sub { min-width: 0; font-size: var(--text-2xs); line-height: 1.35; color: var(--glass-text-secondary); }

/* ---------- Magento Sync ---------- */
.cds-mgs-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--sp-3);
    align-items: start;
}
.cds-mgs-main,
.cds-mgs-aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
@media (max-width: 1100px) {
    .cds-mgs-body { grid-template-columns: minmax(0, 1fr); }
}
.cds-mgs-col--order { width: 9rem; }
.cds-mgs-col--customer { width: 14rem; }
.cds-mgs-col--status { width: 9rem; }
.cds-mgs-col--when { width: 8rem; }
@media (min-width: 641px) {
    .cds-mgs-table { min-width: 48rem; }
}
.cds-browse-table__table td.cds-mgs-error { color: var(--glass-text-error); }
.cds-mgs-empty {
    margin: 0;
    padding: var(--sp-3) 0 var(--sp-1);
    font-size: var(--text-sm-tight);
    color: var(--glass-text-secondary);
}
.cds-mgs-rules {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--glass-text-primary);
}
.cds-mgs-rules li {
    padding-left: var(--sp-3);
    border-left: 2px solid var(--glass-border-emphasis);
}
.cds-mgs-map { font-size: var(--text-xs); }
.cds-mgs-links { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---------- Workflows: the list and the editor ---------- */
.cds-wf { min-width: 0; }
/* The structured controls ship `hidden` and the script reveals them. A class that sets `display` (.cds-btn)
   beats the attribute, so without this the mode buttons would show, dead, on a page with no script. */
.cds-wf [hidden] { display: none !important; }
.cds-wf-col--steps { width: 9rem; }
.cds-wf-col--default { width: 7rem; }
.cds-wf-col--count { width: 6.5rem; }
.cds-wf-col--actions { width: 6rem; }
.cds-wf-desc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-2xs);
    color: var(--glass-text-secondary);
}

.cds-wf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--sp-3);
    align-items: start;
}
@media (max-width: 1100px) {
    .cds-wf-layout { grid-template-columns: minmax(0, 1fr); }
}
.cds-wf-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
/* The one raised surface on the editor: the form (handoff section 5: one accent zone). */
.cds-wf-form {
    min-width: 0;
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
    background: var(--glass-work-card-bg);
    border: 1px solid var(--glass-work-card-border);
    border-top: 2px solid var(--station-color, var(--glass-link));
    box-shadow: var(--shadow-lg);
}
/* The two textareas keep their own height (the old page did this inline). */
.cds-wf-textarea,
.cds-wf-json {
    height: auto;
    padding: var(--sp-3) var(--sp-4);
}
.cds-wf-json { font-size: var(--text-xs); }
.cds-wf-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 32px;
    cursor: pointer;
}
@media (pointer: coarse), (max-width: 900px) {
    .cds-wf-check { min-height: 44px; }
}

.cds-wf-steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.cds-wf-steps__head { display: flex; align-items: center; gap: var(--sp-3); }
.cds-wf-steps__mode { margin-left: auto; display: flex; gap: var(--sp-1); }
.cds-wf-steps__mode .cds-btn[aria-pressed="true"] {
    background: var(--glass-bg-surface-active);
    color: var(--glass-text-primary);
}
.cds-wf-steps__hint { margin: 0; font-size: var(--text-xs); color: var(--glass-text-secondary); }
.cds-wf-steplist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 var(--sp-2);
    padding: 0;
    list-style: none;
}
.cds-wf-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    gap: var(--sp-3);
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border-hover);
    background: var(--glass-bg-surface);
}
/* A step the status-change code could not read: said on the row, in the error hue. */
.cds-wf-step--problem {
    border-color: rgba(var(--glass-error-rgb), 0.45);
    background: rgba(var(--glass-error-rgb), 0.05);
}
.cds-wf-step__num {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--glass-bg-surface-active);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--glass-text-primary);
}
.cds-wf-step__fields {
    display: grid;
    /* The widest values: the two statuses (grading_complete) and the station (encapsulation). */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr);
    gap: var(--sp-2);
}
.cds-wf-step__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.cds-wf-step__label { font-size: var(--text-2xs); color: var(--glass-text-secondary); }
.cds-wf-step__field .cds-text-input {
    height: 32px;
    padding: 0 var(--sp-2);
    font-size: var(--text-sm-tight);
}
.cds-wf-step__required {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: var(--text-xs);
    color: var(--glass-text-secondary);
    white-space: nowrap;
    cursor: pointer;
}
.cds-wf-step__actions { display: flex; gap: 4px; }
.cds-wf-step__btn { min-width: 32px; }
/* After the base rules above, so it wins (same specificity: the later rule does). */
@media (pointer: coarse), (max-width: 900px) {
    .cds-wf-step__required { min-height: 44px; }
    .cds-wf-step__btn { min-width: 44px; min-height: 44px; }
}
.cds-wf-status {
    min-height: 1.4em;
    margin: 0;
    font-size: var(--text-xs);
    color: var(--glass-text-secondary);
}
@media (max-width: 900px) {
    .cds-wf-step { grid-template-columns: 28px minmax(0, 1fr); }
    .cds-wf-step__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cds-wf-step__required,
    .cds-wf-step__actions { grid-column: 2; }
}
.cds-wf-notes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--glass-text-primary);
}
.cds-wf-notes li {
    padding-left: var(--sp-3);
    border-left: 2px solid var(--glass-border-emphasis);
}

/* ---------- Shift Handoff (Home area): the in-flight stages, the two attention lists, recent activity ---------- */
.cds-handoff-stages {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 1000px) {
    .cds-handoff-stages { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
}
.cds-handoff-stage {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label num" "meter meter";
    align-items: baseline;
    column-gap: var(--sp-2);
    row-gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--glass-border-hover);
    background: var(--glass-bg-surface);
}
.cds-handoff-stage__label {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
/* Narrow tiles: a stage name wraps rather than being cut ("Grading Complete"). After the base rule, so it wins. */
@media (max-width: 1000px) {
    .cds-handoff-stage__label { white-space: normal; }
}
.cds-handoff-stage__num {
    grid-area: num;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1;
    color: var(--glass-text-primary);
}
/* A real <meter> (value 0-100, the same percentage the old bar drew as an inline width), so it needs no
   inline style and carries its own role; the fill and track are drawn here in the old bar's colours. */
.cds-handoff-meter {
    grid-area: meter;
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-bg-surface);
    overflow: hidden;
}
.cds-handoff-meter::-webkit-meter-bar {
    height: 100%;
    border: 0;
    background: transparent;
}
.cds-handoff-meter::-webkit-meter-optimum-value,
.cds-handoff-meter::-webkit-meter-suboptimum-value,
.cds-handoff-meter::-webkit-meter-even-less-good-value {
    background: var(--glass-info);
    border-radius: var(--radius-full);
}
.cds-handoff-meter::-moz-meter-bar {
    background: var(--glass-info);
    border-radius: var(--radius-full);
}
.cds-handoff-empty {
    margin: 0;
    padding: var(--sp-3) 0 var(--sp-1);
    font-size: var(--text-sm-tight);
    color: var(--glass-text-secondary);
}
.cds-handoff-sub {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-2xs);
    color: var(--glass-text-tertiary);
}
.cds-handoff-col--item { width: 11rem; }
.cds-handoff-col--who { width: 7.5rem; }
.cds-handoff-col--when { width: 9rem; }
.cds-handoff-col--stage { width: 9rem; }
.cds-handoff-col--cart { width: 5.5rem; }
.cds-handoff-col--action { width: 10rem; }

/* Print Board: panels on white paper, no chrome. carbon.css already hides the rail, the top bar and every
   .cds-btn; this puts the page's own text on the paper colour (the glass text is near-white) and drops the
   fixed Report issue button, which nothing else hides. */
@media print {
    .cds-handoff,
    .cds-handoff * {
        color: CanvasText !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .cds-handoff .cds-overview__panel,
    .cds-handoff .cds-handoff-stage {
        border-color: CanvasText;
        break-inside: avoid;
    }
    .cds-handoff .cds-handoff-meter { border-color: CanvasText; }
    .cds-handoff .cds-admin-scroll { max-height: none; overflow: visible; }
    body:has(.cds-handoff) .exception-fab { display: none !important; }
}

/* ---------- Sign in (standalone page: no shell, no rail) ---------- */
.cds-signin {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    background:
        radial-gradient(700px 400px at 50% 30%, var(--glass-bg-surface), transparent 70%),
        var(--glass-bg-base);
    color: var(--glass-text-primary);
}
.cds-signin-wrap {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.cds-signin-brand { display: flex; align-items: center; gap: 12px; }
.cds-signin-logo { width: 40px; height: 40px; object-fit: contain; }
.cds-signin-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--glass-text-primary);
}
.cds-signin-tagline {
    margin: 0;
    font-size: var(--text-sm-tight);
    color: var(--glass-text-secondary);
}
/* The one raised surface on the page. */
.cds-signin-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    border-radius: var(--radius-lg);
    background: var(--glass-work-card-bg);
    border: 1px solid var(--glass-work-card-border);
    border-top: 2px solid var(--glass-border-emphasis);
    box-shadow: var(--shadow-lg);
}
.cds-signin-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.cds-signin-submit { min-height: 44px; }
.cds-signin-forgot {
    align-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: var(--text-sm-tight);
    color: var(--glass-link);
    text-decoration: none;
}
.cds-signin-forgot:hover { color: var(--glass-link-hover); text-decoration: underline; }
@media (pointer: coarse) {
    .cds-signin-forgot { min-height: 44px; }
}
/* Controls that ship `hidden` (the show-password button, until the script enables it): .cds-password-toggle sets
   `display`, which would beat the attribute, so say it here. */
.cds-signin [hidden] { display: none !important; }
/* Show / hide password: the two icons swap off aria-pressed, so the script never sets an inline style. */
.cds-signin-eye-off { display: none; }
.cds-signin [aria-pressed="true"] .cds-signin-eye { display: none; }
.cds-signin [aria-pressed="true"] .cds-signin-eye-off { display: inline; }

.cds-signin-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px var(--sp-3);
    font-size: var(--text-2xs);
    color: var(--glass-text-secondary);
}
.cds-signin-host,
.cds-signin-version { font-family: var(--font-mono); }
/* Host and build are each shown whole: when they do not fit on one line the second drops below. */
.cds-signin-host { min-width: 0; overflow-wrap: anywhere; }
.cds-signin-meta { white-space: nowrap; }
/* The word carries the state; the colour only reinforces it. */
.cds-signin-health[data-state="ok"] { color: var(--glass-success); }
.cds-signin-health[data-state="error"] { color: var(--glass-text-error); }