/* ==========================================================================
   controls.css - one set of form controls for the whole application

   Buttons, fields, checkboxes, switches, chips, pills, status dots, segmented
   controls, tables and dialogs, as agreed in the "Formular-Elemente Audit"
   handoff. Loaded by static/index.html right after styles.css.

   NOT loaded by the lobby pages (visitor-checkin, -enrol, -register, -kiosk)
   or the Outlook add-in: they have their own look. That is why this is its
   own file and not part of styles.css, which visitor-checkin and
   visitor-enrol also load - and why color-scheme is set here, not there.

   SPECIFICITY IS KEPT LOW ON PURPOSE. The element rules (input, select,
   textarea, checkbox) sit at the weight of a bare element, so a module that
   still styles its own fields keeps winning until it is migrated - then its
   rules are deleted and these apply. The classes (.btn, .chip, ...) are
   single classes. No !important, except [hidden], which must win over every
   display rule in the application.
   ========================================================================== */

:root {
    --c-h-sm: 28px;
    --c-h-md: 32px;
    --c-h-xl: 56px;
    --c-radius: 2px;
    --c-font-sm: 13px;
    --c-font-md: 14px;
    --c-font-xl: 17px;
    --c-ease: cubic-bezier(.2, 0, 0, 1);

    --c-primary-bg: #8BF771;
    --c-primary-bg-hover: #a8f994;
    --c-primary-fg: #000000;
    --c-ink: var(--text, #000000);
    --c-field-bg: var(--surface, #ffffff);
    --c-field-border: #92959c;
    --c-hover-tint: #e2fddb;
    --c-focus-border: #228848;
    --c-ring: 0 0 0 3px #e2fddb;
    --c-danger: var(--status-red, #c0392b);
    --c-disabled-bg: #eceeef;
    --c-disabled-fg: #92959c;
    --c-placeholder: #92959c;
    --c-row-hover: var(--surface-muted, #f6f7f7);
    --c-row-selected: #e2fddb;
    --c-track: #d3d5d8;
    --c-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23515561' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    color-scheme: light;
}

/* Dark: chosen by hand, or by the system when nothing was chosen. The same
   values twice, because a custom property cannot be shared between a
   selector and a media query. */
html[data-theme="dark"] {
    --c-field-border: #6b6f73;
    --c-hover-tint: rgba(139, 247, 113, .14);
    --c-focus-border: #8BF771;
    --c-ring: 0 0 0 3px rgba(139, 247, 113, .28);
    --c-row-selected: rgba(139, 247, 113, .14);
    --c-disabled-bg: #2a2d2e;
    --c-disabled-fg: #92959c;
    --c-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9ea3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --c-field-border: #6b6f73;
        --c-hover-tint: rgba(139, 247, 113, .14);
        --c-focus-border: #8BF771;
        --c-ring: 0 0 0 3px rgba(139, 247, 113, .28);
        --c-row-selected: rgba(139, 247, 113, .14);
        --c-disabled-bg: #2a2d2e;
        --c-disabled-fg: #92959c;
        --c-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9ea3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        color-scheme: dark;
    }
}

/* Touch, or a phone-sized window: everything one can press grows. */
@media (pointer: coarse), (max-width: 600px) {
    :root {
        --c-h-sm: 40px;
        --c-h-md: 44px;
    }
}

/* What the application hid stays hidden, whatever display a rule gives it.
   Without this a .btn[hidden] is an inline-flex button. */
[hidden] { display: none !important; }


/* ------------------------------------------------------------------ focus */

:where(button, a, summary, [role="button"], [role="switch"]):focus-visible {
    outline: 2px solid var(--c-focus-border);
    outline-offset: 2px;
    box-shadow: none;
}


/* ---------------------------------------------------------------- buttons
   Standard (outline), primary (one per view), secondary (black), ghost,
   danger. Sizes md (default), sm, xl. Rectangles - round pills are for
   status only. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--c-h-md);
    padding: 0 14px;
    border: 1px solid var(--c-field-border);
    border-radius: var(--c-radius);
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--c-font-md);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 180ms var(--c-ease), border-color 180ms var(--c-ease),
                color 180ms var(--c-ease), transform 120ms var(--c-ease);
}

.btn:hover:not(:disabled) {
    background: var(--c-hover-tint);
    border-color: var(--c-ink);
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled {
    background: var(--c-disabled-bg);
    border-color: var(--c-disabled-bg);
    color: var(--c-disabled-fg);
    cursor: not-allowed;
}

.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {
    background: var(--c-primary-bg);
    border-color: var(--c-primary-bg);
    color: var(--c-primary-fg);
}

.btn-primary:hover:not(:disabled) {
    background: var(--c-primary-bg-hover);
    border-color: var(--c-primary-bg-hover);
}

.btn-secondary {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--bg, #ffffff);
}

.btn-secondary:hover:not(:disabled) {
    background: #515561;
    border-color: #515561;
}

.btn-ghost {
    border-color: transparent;
}

.btn-danger {
    border-color: var(--c-danger);
    color: var(--c-danger);
}

.btn-danger:hover:not(:disabled),
.btn-danger-solid {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #ffffff;
}

.btn-danger-solid:hover:not(:disabled) {
    background: var(--c-danger);
    border-color: var(--c-danger);
    filter: brightness(.92);
}

/* A button that reads as a link: no box. */
.btn-link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-green-dark, #228848);
    font-size: var(--c-font-sm);
    font-weight: 600;
}

.btn-link:hover:not(:disabled) {
    background: none;
    color: var(--c-ink);
    text-decoration: underline;
}

.btn-sm {
    min-height: var(--c-h-sm);
    padding: 0 10px;
    font-size: var(--c-font-sm);
}

.btn-xl {
    min-height: var(--c-h-xl);
    padding: 0 24px;
    font-size: var(--c-font-xl);
}

.btn-block { width: 100%; }

/* Square, for an icon alone. Give it an aria-label. */
.btn-icon {
    width: var(--c-h-sm);
    min-width: var(--c-h-sm);
    min-height: var(--c-h-sm);
    height: var(--c-h-sm);
    padding: 0;
}

/* Menu buttons: the same chevron as a select, turned while open. */
.c-caret {
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    margin-left: 2px;
    background: var(--c-chevron) no-repeat center / 12px 12px;
    transition: transform 180ms var(--c-ease);
}

[aria-expanded="true"] > .c-caret { transform: rotate(180deg); }


/* ----------------------------------------------------------------- fields
   Bare elements, at the weight of a bare element: styles.css's older field
   rules lose to these (same weight, later), a module's own rules still win
   until the module is migrated. */

input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"],
                 [type="color"], [type="hidden"], [type="submit"], [type="button"],
                 [type="reset"], [type="image"])),
select,
textarea {
    min-height: var(--c-h-md);
    padding: 0 14px;
    border: 1px solid var(--c-field-border);
    border-radius: var(--c-radius);
    background-color: var(--c-field-bg);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--c-font-md);
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 180ms var(--c-ease), box-shadow 180ms var(--c-ease);
}

textarea {
    padding: 10px 14px;
    line-height: 1.5;
}

select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: var(--c-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}

select[multiple] { padding: 6px 8px; }

input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"],
                 [type="color"], [type="hidden"])):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--c-focus-border);
    box-shadow: var(--c-ring);
}

:where(input, select, textarea)[aria-invalid="true"] {
    border: 1.5px solid var(--c-ink);
}

:where(input, select, textarea):disabled {
    background-color: var(--c-disabled-bg);
    color: var(--c-disabled-fg);
    opacity: 1;
    cursor: not-allowed;
}

::placeholder {
    color: var(--c-placeholder);
    opacity: 1;
}

/* The browser's own password eye: the hold-to-reveal eye replaces it. */
input::-ms-reveal,
input::-ms-clear { display: none; }

/* A row of filters and actions: fields as wide as they need, not the full
   line styles.css gives every input. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.toolbar :where(input:not([type="checkbox"], [type="radio"]), select) {
    flex: 0 1 220px;
    width: auto;
    min-width: 0;
}

/* Small fields: in toolbars and tables, level with the small buttons. One
   class of weight, so they beat the bare-element rules above. */
.field-sm,
.toolbar :where(input:not([type="checkbox"], [type="radio"]), select),
.data-table :where(input:not([type="checkbox"], [type="radio"]), select) {
    min-height: var(--c-h-sm);
    padding-left: 12px;
    font-size: var(--c-font-sm);
}

.field-label {
    display: block;
    margin: 0 0 8px;
    font-size: var(--c-font-sm);
    font-weight: 600;
    color: var(--c-ink);
    letter-spacing: 0;
    text-transform: none;
}

/* On a phone, 16px stops iOS from zooming into a field. */
@media (pointer: coarse), (max-width: 600px) {
    input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"],
                     [type="color"], [type="hidden"])),
    select,
    textarea,
    .field-sm {
        font-size: 16px;
    }
}


/* ----------------------------------------------------- checkboxes, radios */

input:where([type="checkbox"], [type="radio"]):where(:not([role="switch"], .switch)) {
    flex: none;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--brand-green-dark, #228848);
    cursor: pointer;
}

html[data-theme="dark"] input:where([type="checkbox"], [type="radio"]) { accent-color: #8BF771; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) input:where([type="checkbox"], [type="radio"]) { accent-color: #8BF771; }
}

/* A label around a checkbox, radio or switch: one row, all of it clickable. */
.check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--c-h-md);
    margin: 0;
    font-size: var(--c-font-md);
    font-weight: 400;
    color: var(--c-ink);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.check-row-sm {
    min-height: var(--c-h-sm);
    font-size: var(--c-font-sm);
}

/* A radio as a card. The card is the label; the radio sits inside it. */
.radio-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--c-field-border);
    border-radius: var(--c-radius);
    background: var(--c-field-bg);
    cursor: pointer;
    transition: border-color 180ms var(--c-ease), background-color 180ms var(--c-ease);
}

.radio-card:hover { border-color: var(--c-ink); }

.radio-card:has(input:checked) {
    border-color: var(--c-focus-border);
    background: var(--c-row-selected);
}

.radio-card:has(input:focus-visible) { box-shadow: var(--c-ring); }


/* --------------------------------------------------------------- switches
   <input type="checkbox" role="switch" class="switch">. One geometry: a
   44 x 24 track and an 18px knob. Put it in a .check-row so the whole row
   is the target. */

.switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--c-track);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 180ms var(--c-ease);
}

.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    transition: transform 180ms var(--c-ease);
}

.switch:checked { background: #228848; }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }


/* ------------------------------------------------------------ filter chips
   Chips are buttons, so they are rectangles: <button class="chip"
   aria-pressed="true|false">Errors <span class="chip-count">3</span>. */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--c-h-sm);
    padding: 0 14px;
    border: 1px solid var(--c-ink);
    border-radius: var(--c-radius);
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--c-font-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 180ms var(--c-ease), color 180ms var(--c-ease);
}

.chip:hover { background: var(--c-hover-tint); }

/* Pressed as a filter, or selected as a tab (Visitors uses them as tabs). */
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
    background: var(--c-ink);
    color: var(--bg, #ffffff);
}

.chip-count {
    font-weight: 400;
    color: var(--text-muted, #515561);
}

.chip[aria-pressed="true"] .chip-count,
.chip[aria-selected="true"] .chip-count { color: var(--bg, #ffffff); }

@media (max-width: 600px) {
    .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
}


/* ------------------------------------------------------------ status pills
   Round, because they are not buttons. */

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: #eceeef;
    color: var(--text, #000000);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pill-success { background: #e2fddb; color: #228848; }
.pill-danger { background: #000000; color: #ffffff; }
.pill-muted {
    background: transparent;
    color: var(--text-muted, #515561);
    box-shadow: inset 0 0 0 1px var(--border, #d3d5d8);
}

html[data-theme="dark"] .pill { background: #3a3d42; color: #ffffff; }
html[data-theme="dark"] .pill-success { background: rgba(139, 247, 113, .16); color: #8BF771; }
html[data-theme="dark"] .pill-danger { background: #ffffff; color: #000000; }
html[data-theme="dark"] .pill-muted { background: transparent; color: #b4b7bc; box-shadow: inset 0 0 0 1px #6b6f73; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pill { background: #3a3d42; color: #ffffff; }
    html:not([data-theme="light"]) .pill-success { background: rgba(139, 247, 113, .16); color: #8BF771; }
    html:not([data-theme="light"]) .pill-danger { background: #ffffff; color: #000000; }
    html:not([data-theme="light"]) .pill-muted { background: transparent; color: #b4b7bc; box-shadow: inset 0 0 0 1px #6b6f73; }
}


/* ------------------------------------------------------------- status dots
   <span class="status-dot status-dot-error" role="img" aria-label="Error"
   title="Error"></span> - the word stays for those who cannot see it. */

.status-dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--text-subtle, #92959c);
}

.status-dot-running { background: var(--brand-green-dark, #228848); }
.status-dot-setup { background: #F5C518; }
.status-dot-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-subtle, #92959c); }
.status-dot-error {
    background: var(--status-red, #c0392b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-red, #c0392b) 22%, transparent);
}


/* ------------------------------------------------------- segmented control
   <div class="segmented" role="group"><button aria-pressed="true">Week</button>
   ... */

.segmented {
    display: inline-flex;
    height: var(--c-h-sm);
    padding: 0;
    border: 1px solid var(--c-field-border);
    border-radius: var(--c-radius);
    overflow: hidden;
}

.segmented > button {
    min-height: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--c-font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 180ms var(--c-ease), color 180ms var(--c-ease);
}

.segmented > button + button { border-left: 1px solid var(--c-field-border); }
.segmented > button:not([aria-pressed="true"]):hover { background: var(--c-hover-tint); }
.segmented > button[aria-pressed="true"] {
    background: var(--c-ink);
    color: var(--bg, #ffffff);
}

.segmented > button:focus-visible { outline-offset: -2px; }


/* ------------------------------------------------------------------ tables
   <div class="data-table-wrap"><table class="data-table [data-table-compact]">.
   Standard rows are 52px; compact (configuration, database, dry run) 40px. */

.data-table-wrap {
    border: 1px solid var(--border, #d3d5d8);
    border-radius: 4px;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--c-font-md);
}

.data-table th {
    padding: 12px 16px;
    border-bottom: 1px solid #92959c;
    background: transparent;
    color: var(--text-muted, #515561);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid var(--row-divider, #eceded);
    color: var(--c-ink);
    vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--c-row-hover); }
.data-table tbody tr[aria-selected="true"] td { background: var(--c-row-selected); }

.data-table-compact { font-size: var(--c-font-sm); }
.data-table-compact th { padding: 10px 12px; }
.data-table-compact td { height: 40px; padding: 0 12px; }


/* ------------------------------------------------------------------ modals
   The shared confirm modal (index.html) and every module dialog. Called
   .modal, not .dialog: bulk_attendance has .dialog-* classes of its own,
   until it is migrated. */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}

.modal {
    width: 100%;
    max-width: 440px;
    padding: 24px;
    border: 0;
    border-radius: 4px;
    background: var(--surface, #ffffff);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    color: var(--c-ink);
}

.modal-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.modal-body {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted, #515561);
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* A destructive choice that is not the default goes left. */
.modal-actions > .modal-action-aside { margin-right: auto; }

@media (max-width: 600px) {
    .modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .modal-actions > .btn { width: 100%; }
    .modal-actions > .modal-action-aside { margin-right: 0; }

    .modal-actions > .btn-primary {
        width: 100%;
        min-height: 48px;
    }
}


/* ---------------------------------------------- password: hold-to-reveal
   static/controls.js wraps every password field: the eye shows the
   password only while it is held. */

.c-secret {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.c-secret > input {
    flex: 1;
    min-width: 0;
    padding-right: 52px;
}

.c-eye {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: grid;
    place-items: center;
    width: 44px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--border, #d3d5d8);
    border-radius: 0 var(--c-radius) var(--c-radius) 0;
    background: transparent;
    color: var(--text-muted, #515561);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.c-eye[aria-pressed="true"] {
    background: #e2fddb;
    color: #000000;
}

.c-eye svg { width: 20px; height: 20px; }


/* ------------------------------------------------------------- file picker
   static/controls.js puts a .c-file field right after each file input; only
   then is the native one hidden (it stays focusable). Without the script the
   native input simply shows. */

input[type="file"]:has(+ .c-file) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
}

.c-file {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: var(--c-h-md);
    margin: 0;
    padding: 0 4px 0 12px;
    border: 1px solid var(--c-field-border);
    border-radius: var(--c-radius);
    background: var(--c-field-bg);
    color: var(--text-muted, #515561);
    font-family: inherit;
    font-size: var(--c-font-sm);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: border-color 180ms var(--c-ease), box-shadow 180ms var(--c-ease);
}

.c-file:hover { border-color: var(--c-ink); }

.c-file.is-focus {
    border-color: var(--c-focus-border);
    box-shadow: var(--c-ring);
}

.c-file-icon {
    display: grid;
    flex: none;
    place-items: center;
    color: var(--text-muted, #515561);
}

.c-file-icon svg,
.c-file-action svg { width: 16px; height: 16px; }

.c-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-file.has-file .c-file-name { color: var(--c-ink); font-weight: 600; }
.c-file.has-file .c-file-icon { color: var(--c-focus-border); }

.c-file-meta {
    flex: none;
    font-size: 12px;
    color: var(--text-muted, #515561);
}

.c-file-meta:empty { display: none; }

.c-file-action {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: calc(var(--c-h-md) - 10px);
    padding: 0 10px;
    border-radius: var(--c-radius);
    color: var(--c-ink);
    font-size: var(--c-font-sm);
    font-weight: 600;
    transition: background-color 180ms var(--c-ease);
}

.c-file:hover .c-file-action { background: var(--c-hover-tint); }


/* --------------------------------------------------------------- the shell
   The black header and the title band, in index.html only. */

.topbar .chrome-pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--c-h-sm);
    padding: 0 10px;
    border: 1px solid #ffffff;
    border-radius: var(--c-radius);
    color: #ffffff;
    font-size: var(--c-font-sm);
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color 180ms var(--c-ease);
}

.topbar .chrome-pill:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #ffffff;
    color: #ffffff;
}

.topbar #themeToggle,
.topbar #headerRefreshBtn {
    width: var(--c-h-sm);
    height: var(--c-h-sm);
    border: 1px solid #ffffff;
    border-radius: var(--c-radius);
    color: #ffffff;
    transition: background-color 180ms var(--c-ease);
}

.topbar #themeToggle:hover,
.topbar #headerRefreshBtn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .12);
    border-color: #ffffff;
    color: #ffffff;
}

/* Black on near-black needs a line; dark green on near-black is unreadable. */
html[data-theme="dark"] .topbar { border-bottom: 1px solid var(--border, #3a3e3f); }
html[data-theme="dark"] .eyebrow { color: #8BF771; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .topbar { border-bottom: 1px solid var(--border, #3a3e3f); }
    html:not([data-theme="light"]) .eyebrow { color: #8BF771; }
}