/*
* Portal stylesheet.
*
* Every value here comes from design.md. Nothing is sampled and nothing is
* invented. Where design.md has no answer, it is reported rather than filled in.
*
* Teal is the primary accent and is used as one, per amendment A19. The rule is
* what a person does with the color, not the contrast number on its own: teal
* is prohibited as small text on light and as a hairline carrying a visible
* edge, and correct as a filled surface with dark text on it or as any shape or
* indicator a person perceives rather than reads. Links stay Obsidian, because a
* link is small text.
*
* This is the first web surface, so the component set below is the one the rest
* of Phase 1 reuses: buttons, inputs, tables, tags, empty states, focus states.
*/
/* --- Type ---------------------------------------------------------------- */
/* The whole system: Medium, Regular, Light, and the italic of each. Medium is
* the heaviest weight in the product. There is no Bold. */
@font-face {
font-family: 'TT Hoves';
src: url('/portal/fonts/tt-hoves-300.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Hoves';
src: url('/portal/fonts/tt-hoves-300-italic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'TT Hoves';
src: url('/portal/fonts/tt-hoves-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Hoves';
src: url('/portal/fonts/tt-hoves-400-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'TT Hoves';
src: url('/portal/fonts/tt-hoves-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TT Hoves';
src: url('/portal/fonts/tt-hoves-500-italic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
/* --- Tokens, verbatim from design.md ------------------------------------- */
:root {
--color-steel-fog: #6b767e;
--color-tidal-teal: #00d1a7;
--color-chalk-cloud: #ffffff;
--color-frost-field: #f4f7fa;
--color-pewter-mist: #cdd7df;
--color-obsidian-core: #0a0d11;
--color-midnight-slate: #0b0c10;
--color-cinnabar: #a3261b;
--color-warning: #8a4b00;
--surface-warning: rgba(196, 112, 0, 0.12);
--font-tt-hoves: 'TT Hoves', ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--text-caption: 14px; --leading-caption: 1.4;
--text-body-sm: 14px; --leading-body-sm: 1.5;
--text-body: 16px; --leading-body: 1.5;
--text-heading-sm: 20px; --leading-heading-sm: 1.4;
--text-heading: 24px; --leading-heading: 1.4;
--text-heading-lg: 28px; --leading-heading-lg: 1.2;
--text-display-sm: 32px; --leading-display-sm: 1.2;
--text-figure: 32px; --leading-figure: 1.15;
--text-figure-lg: 48px; --leading-figure-lg: 1.05;
--text-display: 36px; --leading-display: 1.1;
--text-micro: 14px; --leading-micro: 1.4; --tracking-micro: 0.04em;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px;
--spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px;
--spacing-64: 64px; --spacing-80: 80px;
--card-padding: 24px;
--element-gap: 24px;
--section-gap-working: 32px;
--sidebar-width: 240px;
--sheet-width: 520px;
--row-height: 48px;
--status-size: 8px;
--radius-pill: 9999px;
--radius-tags: 6px;
--radius-cards: 12px;
--radius-inputs: 8px;
--radius-buttons: 8px;
--radius-surface: 20px;
--shadow-card-hover: 0 0 0 1px #cdd7df;
--duration-instant: 140ms;
--easing-instant: cubic-bezier(0.33, 1, 0.68, 1);
--duration-standard: 300ms;
--easing-standard: cubic-bezier(0.25, 1, 0.5, 1);
--duration-expressive: 450ms;
--easing-expressive: cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The browser's own [hidden] rule is display:none at user-agent weight, which
* any author rule that sets display beats. .btn and .picker both do, so
* `element.hidden = true` set the attribute and changed nothing on screen:
* Transactions showed its Load more button with nothing left to load, and its
* terminal filter with only one terminal to choose. A dead control, arrived at
* by accident rather than by shipping ahead of its function. */
[hidden] { display: none !important; }
body {
font-family: var(--font-tt-hoves);
font-size: var(--text-body);
line-height: var(--leading-body);
font-weight: var(--font-weight-regular);
color: var(--color-obsidian-core);
background: var(--color-chalk-cloud);
-webkit-font-smoothing: antialiased;
}
/* --- Focus --------------------------------------------------------------- */
/* Teal, and 2px rather than a hairline. A focus ring is a shape a person
* perceives, not text they read, which is the distinction that governs where
* teal is allowed. The offset keeps it clear of the control's own border so the
* ring reads as a ring rather than a thickened edge. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--color-tidal-teal);
outline-offset: 2px;
border-radius: var(--radius-inputs);
}
/* --- Buttons ------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-8);
min-height: 44px;
padding: 0 var(--spacing-24);
border: 1px solid transparent;
border-radius: var(--radius-buttons);
font: inherit;
font-weight: var(--font-weight-medium);
cursor: pointer;
/* A button that is an anchor still reads as a button, not a link. */
text-decoration: none;
/* Color only, and at the instant token. A button a person presses hundreds
* of times a day is the wrong place for movement. */
transition: background-color var(--duration-instant) var(--easing-instant),
border-color var(--duration-instant) var(--easing-instant),
color var(--duration-instant) var(--easing-instant);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Teal marks the single action that moves the user forward on this screen, and
* nothing else. At most one per screen, and a screen with no forward action has
* none. Teal as a filled surface carrying Obsidian text measures 9.9:1, which is
* why the accent works here and not as text on light.
*
* The three classes are named for the job rather than the color, because the
* rule is about which action this is, not which paint it takes. */
.btn-forward {
background: var(--color-tidal-teal);
color: var(--color-obsidian-core);
}
.btn-forward:hover:not(:disabled) {
background: color-mix(in srgb, var(--color-tidal-teal) 88%, var(--color-obsidian-core));
}
.btn-standard {
background: var(--color-obsidian-core);
color: var(--color-chalk-cloud);
}
.btn-standard:hover:not(:disabled) {
background: color-mix(in srgb, var(--color-obsidian-core) 88%, var(--color-chalk-cloud));
}
.btn-block { width: 100%; }
/* Destructive actions carry finality and the color says so. Cinnabar as text
* and as the border, never as a fill behind white text, per its own rules. */
.btn-danger {
background: var(--color-chalk-cloud);
color: var(--color-cinnabar);
border-color: var(--color-cinnabar);
}
.btn-danger:hover:not(:disabled) { background: var(--color-frost-field); }
/* --- Inputs -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--spacing-8); }
.label {
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
font-weight: var(--font-weight-medium);
}
.input {
min-height: 44px;
padding: 0 var(--spacing-16);
font: inherit;
color: var(--color-obsidian-core);
background: var(--color-frost-field);
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-inputs);
transition: border-color var(--duration-instant) var(--easing-instant);
}
.input::placeholder { color: var(--color-steel-fog); }
.input:hover { border-color: var(--color-steel-fog); }
.hint {
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-steel-fog);
}
/* Errors are inline and never in an alert. Cinnabar, per design.md, and never
* the only signal: the message itself carries the meaning for anyone who cannot
* see the color.
*
* Two things here are deliberate. margin: 0 because a bare keeps the
* browser's own 14px margins, and the reset only clears html and body. And
* :empty collapses the element entirely rather than reserving a line for it:
* reserving left 81px between the password field and the button, which reads as
* a missing element rather than as space. The error appears on submit, which is
* a moment the layout is allowed to move. */
.error {
margin: 0;
font-size: var(--text-body-sm);
line-height: var(--leading-body-sm);
color: var(--color-cinnabar);
}
.error:empty { display: none; }
/* A per-field message, quieter than the form-level one because it sits beside
* the thing it is about. Cinnabar, and never on its own: the sentence says what
* is wrong. */
.field-error {
margin: 0;
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-cinnabar);
}
.field-error:empty { display: none; }
.input[aria-invalid='true'] { border-color: var(--color-cinnabar); }
/* --- Cards --------------------------------------------------------------- */
.card {
background: var(--color-chalk-cloud);
border-radius: var(--radius-cards);
padding: var(--card-padding);
box-shadow: var(--shadow-card-hover);
}
/* --- Tags ---------------------------------------------------------------- */
.tag {
display: inline-flex;
align-items: center;
padding: 2px var(--spacing-8);
border-radius: var(--radius-tags);
font-size: var(--text-caption);
line-height: var(--leading-caption);
font-weight: var(--font-weight-medium);
background: var(--color-frost-field);
color: var(--color-steel-fog);
border: 1px solid var(--color-pewter-mist);
}
/* Teal as a fill carrying dark text is 9.9:1 and approved. Teal as text on a
* light surface is 2.0:1 and is never used. */
.tag-live {
background: var(--color-tidal-teal);
color: var(--color-obsidian-core);
border-color: transparent;
}
/* --- Status indicators --------------------------------------------------- */
/* A dot is a shape, so it carries teal. The word beside it carries the meaning
* for anyone who does not see color, which is why the dot never appears alone. */
.status { display: inline-flex; align-items: center; gap: var(--spacing-8); }
.status-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-steel-fog);
flex: none;
}
.status-online .status-dot { background: var(--color-tidal-teal); }
/* --- Tables -------------------------------------------------------------- */
/* Fixed, so the columns are the ones declared rather than the ones the content
* happens to negotiate. Under auto layout every column here is a control with
* its own intrinsic width, the excess was shared out among all nine, and the
* product name, the only column with something to say, settled at 130px at
* 1440 while the actions column took 248. Measured, not guessed. Fixed layout
* gives the declared widths to the controls and every remaining pixel to the
* one column with width: auto, which is the name. */
.table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1080px; }
/* The name is the auto column: no width, so it takes what the others leave. */
.table .cell-product { width: auto; min-width: 0; }
.table .cell-handle { width: 40px; }
.table .cell-thumb { width: 64px; }
.table .cell-slot { width: 130px; }
.table .cell-price { width: 124px; }
.table .cell-stock { width: 104px; }
.table .cell-lowstock { width: 116px; }
.table .cell-active { width: 84px; }
.table .cell-actions { width: 240px; }
.table th, .table td {
text-align: left;
padding: var(--spacing-8) var(--spacing-16);
border-bottom: 1px solid var(--color-pewter-mist);
}
.table tbody td { height: var(--row-height); }
/* Column headers take the micro role, the same as every .tx-head on the
* grid-built tables. This page is a real
because its rows carry
* inline controls and a drag handle, not because it is a different kind of
* table. */
.table th {
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
height: 40px;
}
.table tbody tr:last-child td { border-bottom: none; }
/* Numerals line up on the right, and the price is the column the eye lands on. */
.table .cell-price, .table .cell-stock { text-align: right; }
.table .cell-actions { white-space: nowrap; text-align: right; }
.table .cell-price .price-edit { justify-content: flex-end; }
.table .cell-price input, .table .cell-stock input { text-align: right; }
.table td.cell-price { font-weight: var(--font-weight-medium); }
/* No hover-scale, no row highlight on load. Section 7.5. */
/* --- Empty states -------------------------------------------------------- */
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-8);
padding: var(--spacing-64) var(--spacing-24);
text-align: center;
}
.empty p { margin: 0; color: var(--color-steel-fog); max-width: 46ch; }
/* --- Auth layout --------------------------------------------------------- */
.auth {
min-height: 100dvh;
display: grid;
place-items: center;
padding: var(--spacing-24);
}
.auth-card { width: 100%; max-width: 440px; }
/* design.md's Onboarding section: the title is left aligned at the reading
* measure and carries the Frame section's hairline rule, the way a working
* surface names a page. It was centered over a paragraph, which is the generic
* sign-in pattern and read as one on every other product too. There is no
* paragraph under it now, so there is nothing for a centered headline to sit
* over. */
.auth-card h1 {
margin: 0 0 var(--spacing-24);
padding-bottom: var(--spacing-16);
border-bottom: 1px solid var(--color-pewter-mist);
font-size: var(--text-heading-lg);
line-height: var(--leading-heading-lg);
font-weight: var(--font-weight-medium);
text-align: left;
}
/* Left with everything else. Only a status line uses this now, the confirmation
* after a request is sent; the subtitles that explained what the portal is came
* out under the interface-text rule. */
.auth-sub {
margin: var(--spacing-16) 0 0;
color: var(--color-steel-fog);
text-align: left;
}
.auth-form { display: flex; flex-direction: column; gap: var(--spacing-16); }
/* A step is a group of fields, and it needs the gap the form gives its own
* children. Without it the console's two sign-in fields sat flush, an input
* against the next label, which is the misalignment on that page. */
.auth-step { display: flex; flex-direction: column; gap: var(--spacing-16); }
/* The TOTP enrollment QR: white modules need a light, bordered surface to sit
* on, the same pairing .tag already uses, not a new one invented for this. */
.enroll-qr {
display: flex;
justify-content: center;
padding: var(--spacing-16);
background: var(--color-frost-field);
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-cards);
}
.enroll-qr svg { width: 180px; height: 180px; }
/* The utility paths, side by side as quiet buttons. They were underlined text
* links, which design.md's Onboarding section no longer allows: a working
* surface offers a button or it offers nothing. */
.auth-alt {
display: flex;
gap: var(--spacing-8);
margin: var(--spacing-8) 0 0;
}
.auth-alt .btn { flex: 1; }
/* The alternate action, the one direct child button the card holds outside the
* form. It sat flush against the form's own submit once the `or` between them
* came out, so the primary and the alternate read as one stacked group. */
.auth-card .card > .btn-block { margin-top: var(--spacing-16); }
/* The logo is the asset, never type set to look like it. Height is fixed and
* width follows, so the lockup can never be stretched off its proportions.
*
* align-self matters here rather than being belt and braces: the rail is a flex
* column, so the default align-items: stretch overrides width: auto and pulls
* the lockup to the full rail width. That is exactly the distortion this rule
* exists to prevent. */
.logo {
display: block;
height: 26px;
width: auto;
align-self: flex-start;
flex: none;
}
.auth-card .logo { margin: 0 0 var(--spacing-40); }
.rail .logo { margin: 0 0 var(--spacing-16); height: 20px; }
/* --- Shell --------------------------------------------------------------- */
/* The rail is fixed at full viewport height; the main column clears it with a
* margin rather than a grid track, so content scrolls and the rail never
* moves. */
.shell { min-height: 100dvh; }
.rail {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: var(--sidebar-width);
z-index:var(--z-inline);
display: flex;
flex-direction: column;
padding: var(--spacing-24);
background: var(--color-frost-field);
border-right: 1px solid var(--color-pewter-mist);
}
/* Scoped past .iconbtn, whose display:inline-grid is declared later in the
* file and would otherwise win the tie. */
.rail .rail-toggle { display: none; }
.rail-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rail-nav {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
overflow-y: auto;
/* Chromium paints an idle track here even with nothing to scroll. */
scrollbar-width: none;
}
.rail-nav::-webkit-scrollbar { display: none; }
.rail-link {
display: block;
padding: var(--spacing-8) var(--spacing-16);
border-radius: var(--radius-inputs);
color: var(--color-steel-fog);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: background-color var(--duration-instant) var(--easing-instant),
color var(--duration-instant) var(--easing-instant);
}
.rail-link:hover { background: var(--color-chalk-cloud); color: var(--color-obsidian-core); }
/* The selected-state marker is teal: a bar the eye lands on, not a color the
* label is set in. The label itself stays Obsidian, because it is small text. */
.rail-link[aria-current='page'] {
background: var(--color-chalk-cloud);
color: var(--color-obsidian-core);
position: relative;
}
.rail-link[aria-current='page']::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
border-radius: var(--radius-pill);
background: var(--color-tidal-teal);
}
/* The workspace, at the top: the operator's name as a pill picker, because an
* operator with two businesses switches here. Today it holds the one. Below
* it, "Pages": wayfinding, which is one of the micro role's sanctioned jobs. */
.rail-workspace { margin-bottom: var(--spacing-8); }
.rail-workspace .picker { width: 100%; }
.rail-label { margin: var(--spacing-24) 0 var(--spacing-8); padding: 0 var(--spacing-16); }
/* On a phone the top bar carries the workspace name beside the menu button. */
.rail-top-name {
display: none;
flex: 1;
min-width: 0;
margin: 0 var(--spacing-16);
font-weight: var(--font-weight-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rail-foot {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--spacing-8);
border-top: 1px solid var(--color-pewter-mist);
padding-top: var(--spacing-16);
}
.rail-user { display: flex; flex-direction: column; min-width: 0; }
.rail-foot-actions { display: flex; gap: var(--spacing-8); flex: none; }
.rail-email {
font-size: var(--text-caption);
color: var(--color-steel-fog);
overflow-wrap: anywhere;
}
/* No cap. A working surface with a fixed sidebar beside it has one job for
* the space it is given, which is to use it: these pages are tables and stat
* strips, and a column that could be readable is not improved by being
* squeezed so the page can end sooner. design.md's 1488px page max-width is a
* marketing-page number and its Working Surfaces section deliberately sets
* none; this used to carry a separate hardcoded 1240px, which never bound at
* 1280 or 1440 and cost 440px of empty space at 1920. Measured before it went. */
.main { margin-left: var(--sidebar-width); padding: var(--spacing-40); }
.main h1 {
margin: 0 0 var(--spacing-32);
font-size: var(--text-display);
line-height: var(--leading-display);
font-weight: var(--font-weight-medium);
text-wrap: balance;
}
.screen-note {
margin: 0;
margin-right: auto;
color: var(--color-steel-fog);
font-size: var(--text-body-sm);
max-width: 52ch;
}
.section-heading {
margin: var(--spacing-40) 0 var(--spacing-16);
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
font-weight: var(--font-weight-medium);
}
.muted { color: var(--color-steel-fog); }
/* Present to a screen reader, absent to the eye. Used for table headers that
* would be noise as visible text but are needed to navigate the table. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* A card whose child table draws its own edges. */
.card-flush { padding: 0; overflow: hidden; }
.card-flush .table th:first-child, .card-flush .table td:first-child { padding-left: var(--spacing-24); }
.card-flush .table th:last-child, .card-flush .table td:last-child { padding-right: var(--spacing-24); }
/* --- Products table ------------------------------------------------------ */
.thumb {
display: block;
width: 40px; height: 40px;
border-radius: var(--radius-tags);
object-fit: cover;
background: var(--color-frost-field);
}
/* An empty plate is reserved at the same size, so a row does not move when an
* image lands. The terminal spec reserves its own plates for the same reason. */
.thumb-empty { border: 1px dashed var(--color-pewter-mist); }
/* The one column with no natural width, so it takes what is left. Every other
* column here is a fixed control: a handle, a thumbnail, a price, two stock
* fields, a toggle, the actions. Without this the table sizes itself to its
* content, the remainder sits at the right as dead space, and the product name
* wraps at 1440 with seven hundred pixels free beside it. */
.product-name { display: block; font-weight: var(--font-weight-medium); }
.product-summary { display: flex; align-items: center; gap: var(--spacing-16); min-width: 260px; }
.product-catalog-table .cell-price { width: 150px; white-space: nowrap; }
.product-catalog-table .cell-actions { width: 150px; }
.product-summary .thumb-empty {
display: grid;
place-items: center;
font-size: var(--text-caption);
color: var(--color-steel-fog);
}
.product-search-wrap { display: flex; align-items: center; gap: var(--spacing-16); flex-wrap: wrap; }
.product-assignments { margin-top: var(--spacing-24); }
.product-machine-row {
display: grid;
grid-template-columns: minmax(130px, 1fr) 90px 90px auto;
gap: var(--spacing-16);
align-items: center;
padding: var(--spacing-16) 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.product-machine-row > div { display: flex; flex-direction: column; }
.product-detail-actions { flex-wrap: wrap; }
.product-desc {
display: block;
font-size: var(--text-caption);
color: var(--color-steel-fog);
max-width: 44ch;
}
/* No fixed width: three controls do not fit in 110px, and a fixed cap forced
the widest to overflow the card, which its overflow:hidden then clipped
rather than scrolled. Auto width plus wrapping row-actions lets the column
size to what is actually there and drop to a second line under real
pressure, instead of losing a control off the edge. */
.is-archived .product-name { color: var(--color-steel-fog); }
/* Inline edits read as editable: a visible box, always, because a field that
* only announces itself on hover reads as a value rather than a control. The
* price is one box with the $ inside it, so it reads as one amount. */
.price-edit {
display: inline-flex;
align-items: center;
gap: 2px;
min-height: 36px;
padding: 0 var(--spacing-8);
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-inputs);
background: var(--color-chalk-cloud);
}
.price-edit:focus-within {
outline: 2px solid var(--color-tidal-teal);
outline-offset: 2px;
}
.price-prefix { color: var(--color-steel-fog); }
.price-edit .input-inline {
border: none;
outline: none;
min-height: auto;
width: 64px;
padding: 0;
background: transparent;
font: inherit;
}
/* The same visible box for a bare cell input, stock. */
.input-cell {
min-height: 36px;
width: 100px;
padding: 0 var(--spacing-8);
}
/* --- Switch -------------------------------------------------------------- */
/* The track fills teal when on. It is a shape, not text, which is where teal
* carries meaning on a light surface. */
.switch { display: inline-flex; cursor: pointer; }
.switch input {
position: absolute;
opacity: 0;
width: 36px; height: 20px;
margin: 0;
cursor: pointer;
}
.switch-track {
display: block;
width: 36px; height: 20px;
border-radius: var(--radius-pill);
background: var(--color-pewter-mist);
transition: background-color var(--duration-instant) var(--easing-instant);
}
.switch-knob {
display: block;
width: 16px; height: 16px;
margin: 2px;
border-radius: var(--radius-pill);
background: var(--color-chalk-cloud);
transition: transform var(--duration-instant) var(--easing-instant);
}
.switch input:checked + .switch-track { background: var(--color-tidal-teal); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(16px); }
.switch input:focus-visible + .switch-track {
outline: 2px solid var(--color-tidal-teal);
outline-offset: 2px;
}
/* --- Buttons, small ------------------------------------------------------ */
.btn-sm { min-height: 34px; padding: 0 var(--spacing-16); font-size: var(--text-body-sm); }
/* --- Sheets -------------------------------------------------------------- */
.sheet {
border: none;
border-radius: var(--radius-cards);
padding: 0;
width: min(460px, calc(100vw - var(--spacing-32)));
background: var(--color-chalk-cloud);
color: var(--color-obsidian-core);
box-shadow: 0 0 0 1px var(--color-pewter-mist);
}
.sheet::backdrop { background: rgba(10, 13, 17, 0.45); }
.sheet-body { padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--spacing-16); }
.sheet-body h2 {
margin: 0;
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
font-weight: var(--font-weight-medium);
}
.sheet-body p { margin: 0; color: var(--color-steel-fog); }
.input-file { padding: var(--spacing-8); min-height: auto; }
textarea.input { padding: var(--spacing-8) var(--spacing-16); resize: vertical; min-height: auto; }
/* --- Toast --------------------------------------------------------------- */
/* Brief confirmation for edits that save without a button. It says what
* happened and leaves; it is never the only signal, because the field already
* shows the value that was kept. */
.toast {
position: fixed;
left: 50%;
bottom: var(--spacing-24);
transform: translate(-50%, 8px);
background: var(--color-obsidian-core);
color: var(--color-chalk-cloud);
padding: var(--spacing-8) var(--spacing-16);
border-radius: var(--radius-pill);
font-size: var(--text-body-sm);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-instant) var(--easing-instant),
transform var(--duration-instant) var(--easing-instant);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
/* --- Transactions --------------------------------------------------------- */
/* Its own grid rather than a , so the phone treatment for the products
* table cannot leak in and the read-only nature is structural: there is nothing
* in these rows that is an input. */
.input-date, .input-select { min-height: 40px; padding: 0 var(--spacing-8); }
/* overflow-x rather than card-flush's inherited hidden: between the 640px
card layout and a comfortably wide desktop, six real columns can ask for
more than the viewport has. Scrolling the table on its own axis keeps every
column reachable; card-flush's hidden was clipping Receipt outright at
exactly those widths, which is the bug item 9 named. */
/* The products table has the same shape of problem and the same answer: its
* declared columns need more width than a narrow desktop has, so it scrolls on
* its own axis. This has to sit after .card-flush, which sets overflow: hidden
* at equal specificity and would otherwise clip rather than scroll. */
.pr-wrap { padding: 0; overflow-x: auto; }
/* Sale, Total, Time, Method, Terminal, Receipt. Sale is the one column with
genuinely unbounded content (an item list), so it is the flexible track;
every other column holds a short, bounded value and gets a fixed width. */
/* A row is the record's own control. Hover lifts it to Frost Field, which is
* the affordance design.md gives a row that opens a sheet, and it is only
* added now that the sheet on the other end of the click exists. */
/* Never wraps: a name like "Coca-Cola \00d71" reads worse split across two
lines than trimmed. min-width:0 lets the grid track actually shrink to fit
an ellipsis instead of forcing the row wider than the card, which the
card's own overflow:hidden was then clipping outright. */
/* Count left, control right, per the reference's pagination row. The control
* is Load more rather than arrows because the API pages forward on a cursor
* and cannot step back; arrows would promise a direction that does not
* exist. */
/* -- Transactions summary, the breakdown ---------------------------------- */
/* --- Payouts --------------------------------------------------------------- */
.po-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--spacing-16);
margin-bottom: var(--spacing-24);
}
.po-asset {
margin: 0;
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-steel-fog);
}
.po-total {
margin: var(--spacing-8) 0 0;
font-size: var(--text-display-sm);
line-height: var(--leading-display-sm);
font-weight: var(--font-weight-medium);
}
.po-sales { margin: var(--spacing-8) 0 0; color: var(--color-steel-fog); font-size: var(--text-body-sm); }
.po-machine-row { grid-template-columns: 130px 1fr 90px 140px; }
/* When, kind, destination, amount: a movement out, not a sale. */
.po-recent-row { grid-template-columns: 150px 110px 1fr 100px; }
.po-simulated { margin-top: var(--spacing-16); }
/* -- The dark card's own controls ------------------------------------------
* The balance figure stays a real button (open Instant transfer) rather than
* static text; it is unstyled back to plain text so nothing about it reads as
* a control except that it responds like one. */
.po-lead-open {
all: unset;
display: block;
width: 100%;
cursor: pointer;
}
/* Withdraw is the card's one real, working action, so it carries the
* dark-surface CTA fill per design.md rather than the plain outlined
* treatment every other button on this card once shared with it. */
.po-lead-actions { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }
.po-lead-actions .btn {
flex: 1;
min-width: 76px;
background: var(--color-tidal-teal);
color: var(--color-obsidian-core);
border: none;
}
.po-lead-actions .btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--color-tidal-teal) 85%, black);
}
/* Convert, Send, Add and More, step 16, corrected: a preview of the
* circular row this card will eventually carry, not yet wired to
* anything. Not disabled or grayed, on direction, and no longer opening
* a sheet on tap either, on direction: purely visual for now. */
.po-lead-quick { display: flex; justify-content: space-between; gap: var(--spacing-8); }
.po-circle-action {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-8);
flex: 1;
min-width: 0;
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--color-chalk-cloud);
cursor: default;
}
.po-circle-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
display: grid;
place-items: center;
background: color-mix(in srgb, var(--color-chalk-cloud) 14%, var(--color-midnight-slate));
}
.po-circle-label { font-size: var(--text-body-sm); opacity: .85; }
/* -- The multi-segment ring's legend ---------------------------------------
* A dot per arc rather than curved on-ring labels, which is not something SVG
* text can do cleanly at this size once there is more than one segment. */
.po-ring-legend {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: var(--text-body-sm);
}
.po-ring-legend li { display: flex; align-items: center; gap: var(--spacing-8); }
.po-ring-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
/* Four classes rather than an inline style: the portal's CSP has no
'unsafe-inline' for style-src, so a per-segment color has to be picked
from a fixed set rather than written onto the element directly. Matches
RING_COLORS in screens.ts index for index. */
.po-ring-dot-0 { background: var(--color-tidal-teal); }
.po-ring-dot-1 { background: color-mix(in srgb, var(--color-tidal-teal) 70%, var(--color-obsidian-core)); }
.po-ring-dot-2 { background: color-mix(in srgb, var(--color-tidal-teal) 45%, var(--color-obsidian-core)); }
.po-ring-dot-3 { background: color-mix(in srgb, var(--color-tidal-teal) 25%, var(--color-obsidian-core)); }
/* A handful of screens center short confirmation text; not worth a whole
utility layer, but worth not reaching for an inline style the CSP blocks. */
.center { text-align: center; }
/* -- The transfer sheet's sending and sent states --------------------------- */
.sheet-progress {
height: 4px;
border-radius: var(--radius-pill);
background: var(--color-pewter-mist);
overflow: hidden;
position: relative;
}
.sheet-progress-fill {
position: absolute;
top: 0;
bottom: 0;
left: -40%;
width: 40%;
background: linear-gradient(90deg, transparent, var(--color-tidal-teal), transparent);
animation: sheet-progress-sweep 1.1s ease-in-out infinite;
}
@keyframes sheet-progress-sweep {
to { left: 100%; }
}
/* -- Vendpass ---------------------------------------------------------------- */
.vp-activity-row { grid-template-columns: 150px 100px minmax(140px, 1fr) 110px 110px; }
.vp-member-row { grid-template-columns: 100px minmax(160px, 1fr) 140px; }
.vp-member { color: var(--color-obsidian-core); }
.vp-what { min-width: 0; overflow-wrap: anywhere; }
.vp-amt { text-align: right; font-weight: var(--font-weight-medium); }
.vp-earn { color: var(--color-obsidian-core); }
.vp-redeem { color: var(--color-steel-fog); }
.vp-rate {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--spacing-16);
font-weight: var(--font-weight-medium);
}
/* -- Support tickets ----------------------------------------------------------
* Shared between the portal and the Admin Console; .admin-* row geometries
* override column widths only, on the same .sp- element classes. */
.sp-row {
grid-template-columns: 110px minmax(140px, 1fr) 110px 120px 100px;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.sp-row:hover { background: var(--color-frost-field); }
.sp-ref { font-weight: var(--font-weight-medium); }
.sp-subject { min-width: 0; overflow-wrap: anywhere; }
.sp-head { margin-top: var(--spacing-16); }
.sp-thread { margin-top: var(--spacing-24); }
.sp-reply-form { margin-top: var(--spacing-16); }
.sp-message { padding: var(--spacing-16); }
.sp-message-mine { background: var(--color-frost-field); }
.sp-body { margin: var(--spacing-8) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) {
.sp-row .sp-subject { grid-area: subject; font-weight: var(--font-weight-medium); }
.sp-row > div:nth-child(4) { grid-area: status; justify-self: end; }
.sp-row .sp-ref { grid-area: ref; }
.sp-row > div:nth-child(5) { grid-area: updated; text-align: right; }
.sp-row > div:nth-child(3) { grid-area: machine; }
}
.sheet-check {
width: 56px;
height: 56px;
border-radius: var(--radius-pill);
background: var(--color-tidal-teal);
color: var(--color-obsidian-core);
display: grid;
place-items: center;
margin: 0 auto;
}
@media (max-width: 640px) {
/* Each sale becomes a small card: what, when, how much, proof. The desktop
grid's own min-width (the sum of its six tracks) no longer applies here,
since this replaces grid-template-columns outright rather than shrinking
it, so nothing from that wider layout carries over to force a scrollbar. */
.po-machine-row { grid-template-columns: 1fr auto; grid-template-areas: none; }
/* Overrides the generic .tx-row shape above: this row carries its own
children, none named lines/total/settled/proof, so it needs its own areas
rather than inheriting a layout with nothing to fill it. The areas are
named for the cells that exist: when, type, terminal, instrument, amount. */
.vp-activity-row > div:nth-child(1) { grid-area: when; }
.vp-activity-row > div:nth-child(2) { grid-area: type; font-weight: var(--font-weight-medium); color: var(--color-obsidian-core); }
.vp-activity-row > div:nth-child(3) { grid-area: terminal; }
.vp-activity-row > div:nth-child(4) { grid-area: instrument; justify-self: end; }
.vp-activity-row > div:nth-child(5) { grid-area: amt; text-align: right; }
.vp-member-row .vp-member { grid-area: member; }
.vp-member-row .vp-amt { grid-area: amt; }
.vp-member-row .vp-meta { grid-area: meta; }
}
/* --- Phones --------------------------------------------------------------
*
* Not a fallback. The onboarding tells an operator to open the portal on their
* phone while a tablet sits in front of them, so a phone is a first-class way
* to use this, and the pairing code in particular is read off a phone held next
* to a tablet.
*
* 768px covers the rail, because that is where a 240px fixed column stops
* leaving room for content. 640px covers the tables, because that is where six
* columns stop fitting however they are trimmed.
*/
@media (max-width: 768px) {
/* The rail becomes a header: logo left, hamburger right, and the nav with
* the account block behind the menu. The sliding strip of tabs is gone. */
.rail {
right: 0;
bottom: auto;
width: auto;
padding: var(--spacing-8) var(--spacing-16);
border-right: none;
border-bottom: 1px solid var(--color-pewter-mist);
}
.rail .logo { margin: 0; height: 20px; }
.rail-top-name { display: block; }
.rail .rail-toggle { display: inline-grid; }
.rail-menu { display: none; }
.rail.is-open .rail-menu {
display: flex;
padding-top: var(--spacing-8);
}
.rail-nav { flex: none; overflow-y: visible; }
.rail-foot { margin-top: var(--spacing-8); }
.main {
margin-left: 0;
/* Clears the fixed header: its 44px row plus its vertical padding. */
padding: calc(44px + var(--spacing-16) + var(--spacing-24)) var(--spacing-16) var(--spacing-24);
}
}
@media (max-width: 640px) {
/* The products table becomes a list of cards. Six columns cannot be trimmed
* into 375px, and a table that scrolls sideways puts the price and the
* toggle off screen, which are the two things anyone came here to touch.
*
* One stroke: the outer card container gives up its own border and padding
* on a phone, so each row-card carries the single border. The image sits in
* its own column and can never ride over the name; the toggle aligns with
* the identity row; price and stock share a labeled row of their own. */
.card-flush { padding: 0; border: none; background: transparent; overflow: visible; }
.table, .table tbody, .table tr, .table td { display: block; width: 100%; }
.table { table-layout: auto; min-width: 0; }
/* The declared column widths belong to the desktop table and have to be
given back by name: they are set as .table .cell-x, which outranks the
.table td reset above, so without this every phone field keeps a desktop
column's width and the card comes out as a ladder of four different
control sizes. */
.table .cell-handle, .table .cell-slot, .table .cell-product,
.table .cell-price, .table .cell-stock, .table .cell-lowstock,
.table .cell-active, .table .cell-actions { width: auto; }
.table .cell-thumb { width: 48px; }
.pr-wrap { overflow-x: visible; }
.table thead { display: none; }
/* Nine cells, so nine placements. This grid had six areas and the handle,
the slot and the product name had none, while td:nth-child(2) handed the
thumbnail the name's area and the two stock cells shared one. Every cell
is placed by its own class now, and nth-child is not used for layout: the
column order has changed twice and would change it again. */
.table tr {
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-cards);
background: var(--color-chalk-cloud);
padding: var(--spacing-16);
margin-bottom: var(--spacing-8);
display: grid;
grid-template-columns: 16px 48px minmax(0, 1fr) 44px;
/* One field per row, which is design.md's rule for a form on a phone and
the end of a whole class of bug here. The columns are sized for the
identity row, so any pair placed across them is uneven by construction:
price beside stock put a full-width input next to a 44px one, and slot
beside low stock put the label over the wrong field. Stacking cannot
misalign, and each field already says what it is. */
grid-template-areas:
"handle thumb name active"
"price price price price"
"slot slot slot slot"
"stock stock stock stock"
"low low low low"
"act act act act";
gap: var(--spacing-16);
align-items: center;
}
.table tr:last-child { margin-bottom: 0; }
/* The row-height floor belongs to the desktop table; on a phone each row is
a card whose cells size to their own content. */
.table td { border-bottom: none; padding: 0; height: auto; }
.table .cell-price, .table .cell-stock { text-align: left; }
.table .cell-price .price-edit { justify-content: flex-start; }
.table .cell-price input, .table .cell-stock input { text-align: left; }
.cell-handle { grid-area: handle; display: block; color: var(--color-steel-fog); }
.cell-thumb { grid-area: thumb; display: block; width: 48px; }
.cell-thumb .thumb { width: 48px; height: 48px; }
.cell-product { grid-area: name; min-width: 0; }
.cell-slot { grid-area: slot; width: auto; }
/* Every field owns a full row now, so every field's control is the same
width. Left to their desktop widths they came out at four different
sizes down the card, which reads as four unrelated controls. */
.table td .input-cell,
.table td .input-inline,
.table td .price-edit { width: 100%; }
.cell-price { grid-area: price; width: auto; }
.cell-price .price-edit { width: 100%; }
.cell-price .price-edit .input-inline { width: 100%; }
.cell-stock { grid-area: stock; display: block; width: auto; }
.cell-lowstock { grid-area: low; }
.cell-stock .input-cell { width: 100%; }
.cell-active { grid-area: active; width: auto; justify-self: end; align-self: start; }
.cell-actions { grid-area: act; width: auto; white-space: normal; }
.row-actions { flex-wrap: wrap; }
/* The header row is hidden on a phone, so each field says what it is. */
.cell-slot::before, .cell-stock::before, .cell-lowstock::before, .cell-price::before {
display: block;
margin-bottom: 4px;
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
}
.cell-price::before { content: "Price"; }
.cell-slot::before { content: "Slot"; }
.cell-stock::before { content: "Stock"; }
.cell-lowstock::before { content: "Low stock"; }
.row-actions { display: flex; width: 100%; }
.row-actions .btn { flex: 1; }
/* The catalog overview has five read-only columns, not the nine editable
machine fields above. Give it its own compact card grammar so state and
assignment count do not fall into unnamed legacy grid cells. */
.product-catalog-table .table tr {
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"name name name"
"price state machines"
"act act act";
}
.product-catalog-table .cell-product { grid-area: name; }
.product-catalog-table .cell-price { grid-area: price; }
.product-catalog-table .product-machines { grid-area: machines; }
.product-catalog-table .cell-actions { grid-area: act; text-align: left; }
.product-catalog-table .product-machines::before{
display: block;
margin-bottom: 4px;
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
}
.product-catalog-table .cell-price::before { content: "Default price"; }
.product-catalog-table .product-machines::before { content: "Machines"; }
/* Sheets sit against the bottom, where a thumb is. */
.sheet {
width: calc(100vw - var(--spacing-16) * 2);
margin: auto auto var(--spacing-16);
}
.auth { padding: var(--spacing-16); }
}
/* =========================================================================
* The portal pass, A30. Everything below extends the system rather than
* replacing it: the tokens above are unchanged, and no color is new.
*
* The rules being implemented are in design.md, added at A27: two radius
* tiers, the figure tokens, the dark feature surface (one per screen), stat
* composition, icon chips and icon buttons, the ring, and the pill picker.
* ========================================================================= */
/* --- Icons ---------------------------------------------------------------
* Heroicons outline, vendored at A27. currentColor throughout, so a glyph
* inherits whatever surface it sits on and the dark surface needs no second
* copy. */
.rail-icon, .iconbtn, .chip { line-height: 0; }
/* The glyph sits beside its label, not above it: the rail link was a block
* before it had anything to sit beside. */
.rail-link { display: flex; align-items: center; gap: var(--spacing-16); }
.rail-icon svg, .iconbtn svg, .chip svg { display: block; }
svg { flex: none; }
/* --- The top bar --------------------------------------------------------- */
.topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-16);
margin-bottom: var(--spacing-32);
}
.topbar-title { min-width: 0; }
.topbar h1 { margin: 0; }
.page-description {
max-width: 72ch;
margin: var(--spacing-8) 0 0;
color: var(--color-steel-fog);
font-size: var(--text-body);
}
.topbar-actions { display: flex; gap: var(--spacing-8); flex: none; }
/* An icon button is a circle, which the no-pill rule never covered: that rule
* is scoped to text buttons. It is a control, so it takes the teal focus ring
* like every other one. */
.iconbtn {
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
display: inline-grid;
place-items: center;
background: var(--color-chalk-cloud);
border: 1px solid var(--color-pewter-mist);
color: var(--color-obsidian-core);
cursor: pointer;
text-decoration: none;
transition: background var(--duration-instant) var(--easing-instant);
}
.iconbtn:hover { background: var(--color-frost-field); }
/* An icon chip is 44px holding a 20px glyph. Teal fill takes an Obsidian
* glyph, never a white one. */
.chip {
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
display: inline-grid;
place-items: center;
flex: none;
}
.chip-teal { background: var(--color-tidal-teal); color: var(--color-obsidian-core); }
.chip-ink { background: var(--color-obsidian-core); color: var(--color-chalk-cloud); }
.chip-quiet { background: var(--color-frost-field); color: var(--color-steel-fog); }
/* --- Stat composition ----------------------------------------------------
* Label whispers, figure speaks. Sentence case on the label, because uppercase
* micro-labels keep their existing job as table headers and wayfinding. */
.stat-label {
margin: 0;
color: var(--color-steel-fog);
font-size: var(--text-body-sm);
}
.stat-figure {
margin: var(--spacing-8) 0 0;
font-size: var(--text-figure);
line-height: var(--leading-figure);
font-weight: var(--font-weight-medium);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--color-obsidian-core);
}
.stat-figure small {
font-size: var(--text-heading-sm);
font-weight: var(--font-weight-medium);
letter-spacing: 0;
color: var(--color-steel-fog);
}
.stat-sub { margin: var(--spacing-8) 0 0; color: var(--color-steel-fog); font-size: var(--text-body-sm); }
.stat-line { margin: var(--spacing-8) 0 0; font-weight: var(--font-weight-medium); }
/* Related facts share one card, separated by a hairline, rather than one card
* each. */
.stat-split { display: flex; gap: var(--spacing-24); flex-wrap: wrap; }
.stat-split > div { flex: 1; min-width: 180px; }
.stat-split > div + div {
border-left: 1px solid var(--color-pewter-mist);
padding-left: var(--spacing-24);
}
/* --- The dark feature surface --------------------------------------------
* At most one per screen, carrying that screen's single most important
* figure. Teal is permitted as text and as a pill here, measuring 9.9:1. */
.po-lead {
/* Two tracks wide whenever the grid has two to give: the single-track
* 220px minimum a plain card is happy with left the circular row
* below Withdraw cramped, and a wider card was the more direct fix
* than shrinking the row to fit a width sized for a plainer card.
* auto-fill clips the span to whatever the grid actually has, so this
* still collapses cleanly to one track on a narrow screen. */
grid-column: span 2;
background: var(--color-midnight-slate);
padding: var(--card-padding);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--spacing-24);
min-height: 200px;
}
.po-lead .stat-label, .po-lead .stat-sub { color: #e5ecf2; }
.po-lead .stat-label, .po-lead .stat-figure, .po-lead .stat-sub { margin: 0; }
/* design.md's dark feature surface, placed: one per screen, carrying that
* screen's single most important figure, with the related stats beside it
* rather than competing on it. Rewards already had this shape. Dashboard,
* Transactions and Analytics have a clear lead figure and take it now.
* Payouts, Terminals, Products and Settings have no single most important
* number, and the rule says a screen like that gets no dark surface. */
.lead-row {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
gap: var(--spacing-16);
align-items: stretch;
}
.lead-row-wide { grid-template-columns: minmax(240px, 1fr) minmax(0, 3.2fr); }
.lead-row .po-lead { grid-column: auto; min-height: 0; }
/* Scoped by its own class, not by .card: .lead-row .card outranks
* .stat-strip's display: grid, which turned the Dashboard's four stats into a
* flex column while getComputedStyle still reported four grid tracks. */
.lead-rest { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) {
.lead-row, .lead-row-wide { grid-template-columns: minmax(0, 1fr); }
}
.po-lead .stat-figure { color: var(--color-chalk-cloud); }
.po-lead .stat-figure small { color: #e5ecf2; }
.pill {
display: inline-flex;
align-items: center;
gap: var(--spacing-8);
align-self: flex-start;
border-radius: var(--radius-pill);
padding: 4px 12px;
font-size: var(--text-body-sm);
font-weight: var(--font-weight-medium);
}
.pill svg { flex: none; }
.pill-teal { background: var(--color-tidal-teal); color: var(--color-obsidian-core); }
/* --- The ring ------------------------------------------------------------
* One proportion, 8px stroke, round caps, teal on a Frost Field track. Drawn
* once and static, never a loop. */
.po-ring-card { display: flex; flex-direction: column; justify-content: space-between; }
.po-ring {
display: flex;
align-items: center;
gap: var(--spacing-16);
margin-top: var(--spacing-16);
flex-wrap: wrap;
}
.po-ring-label { margin: 0; display: flex; flex-direction: column; }
/* --- The pill picker -----------------------------------------------------
* A select styled as a pill. Permitted because the no-pill rule is scoped to
* text CTAs, and a picker is not a call to action. */
.picker { position: relative; display: inline-flex; align-items: center; }
/* Inside a .field, which is a flex column, a bare inline-flex still stretches
* to the full width and leaves the chevron stranded at the far edge while the
* select hugs its text. The same stretch that once pulled the logo out of
* shape. */
.field > .picker { align-self: flex-start; max-width: 100%; }
/* --- Panels, for screens that are sections rather than one list ---------- */
.panel { margin-bottom: var(--spacing-40); }
/* Outside a screen-head the note has no flex parent to space it, so it sat
* flush against the card below it. */
.panel > .screen-note { margin: 0 0 var(--spacing-16); }
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
margin-bottom: var(--spacing-16);
}
.panel-title {
margin: 0;
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
font-weight: var(--font-weight-medium);
}
.stack { display: flex; flex-direction: column; gap: var(--spacing-16); }
.form-actions { display: flex; justify-content: flex-start; gap: var(--spacing-8); margin-top: var(--spacing-8); }
.stack .form-actions { margin-top: 0; }
.obj { border-bottom: 1px solid var(--color-pewter-mist); }
.obj:last-child { border-bottom: none; }
/* The whole header is the control, so the chevron is not a separate hit area
* the way a row with its own buttons would need. */
.obj-head {
display: grid;
grid-template-columns: var(--status-size) auto 1fr auto auto;
align-items: center;
gap: var(--spacing-16);
width: 100%;
padding: var(--spacing-16) var(--spacing-24);
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.obj-head:hover { background: var(--color-frost-field); }
.obj-id { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.obj-name { color: var(--color-steel-fog); font-size: var(--text-body-sm); min-width: 0; }
.obj-summary { flex: none; font-size: var(--text-body-sm); color: var(--color-steel-fog); }
/* A chevron drawn rather than set, so it rotates against one origin and needs
* no icon font. */
.obj-chevron {
width: 8px;
height: 8px;
justify-self: end;
border-right: 1px solid var(--color-steel-fog);
border-bottom: 1px solid var(--color-steel-fog);
transform: translateY(-2px) rotate(45deg);
transition: transform var(--duration-instant) var(--easing-instant);
}
.obj-head[aria-expanded='true'] .obj-chevron { transform: translateY(2px) rotate(225deg); }
.obj-head .obj-chevron { margin-left: var(--spacing-8); }
.obj-body { padding: 0 var(--spacing-24) var(--spacing-24); }
/* The list is read as pairs, so it keeps a measure. Left to the card's own
* width a label sits a thousand pixels from its value at 1440 and the two stop
* reading as one row. */
.obj-body .kv { max-width: 560px; }
.obj-actions { display: flex; gap: var(--spacing-8); margin-top: var(--spacing-16); }
/* Add another sits inside the card under the last object, which is where the
* reference puts it: part of the list, not a page-level action. */
.obj-foot {
padding: var(--spacing-16) var(--spacing-24);
border-top: 1px solid var(--color-pewter-mist);
}
.obj-empty { padding: var(--spacing-24); }
.obj-empty-line { margin: 0 0 var(--spacing-8); font-weight: var(--font-weight-medium); }
.obj-value { margin: 0; font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.obj-set { display: flex; align-items: flex-start; gap: var(--spacing-16); }
/* A form is read at reading measure, not at panel width. Without this the
* password fields run the full 1440 and the eye has to travel the width of the
* page to get from a label to its own input. */
.form-measure {
display: flex;
flex-direction: column;
gap: var(--spacing-24);
max-width: 520px;
}
/* A block button inside a measured form stops at the measure with it, rather
* than stretching to the card. */
.form-measure .btn-block { width: 100%; }
/* design.md's forms rule is one column on mobile, and its Mobile rule is that
* nothing disappears, it reflows. The object header carries four things across
* one line at 1440; on a phone the identifier keeps the first line and the name
* and summary drop under it, with the chevron staying on the identifier's row
* where the thumb expects it. */
@media (max-width: 640px) {
.obj-head {
grid-template-columns: var(--status-size) 1fr auto;
grid-template-areas: "dot id chevron" ". name name" ". summary summary";
row-gap: 2px;
column-gap: var(--spacing-16);
padding: var(--spacing-16);
}
.obj-id { grid-area: id; }
.obj-name { grid-area: name; }
.obj-summary { grid-area: summary; }
.obj-chevron { grid-area: chevron; align-self: start; margin-top: 6px; }
.obj-body { padding: 0 var(--spacing-16) var(--spacing-16); }
.obj-foot { padding: var(--spacing-16); }
.obj-actions { flex-wrap: wrap; }
}
/* --- Brand marks ---------------------------------------------------------
* Official assets, vendored, full color. A bounding box, not a fixed
* height: Visa's own asset is a wide, flat wordmark (viewBox 1000x324.68,
* roughly 3:1) next to icon-style marks that are closer to square
* (Mastercard's two circles, Google's "G", Apple Pay's glyph). A single
* fixed height let the wordmark's own width run wherever its aspect ratio
* took it, which is what actually made Visa read as more dominant than
* the rest: not a mistake in the asset, a property of a wordmark next to
* icons. max-height and max-width together, with both width and height
* left auto, is what makes a plain img fit inside a box on its long axis
* without distorting: a fixed height alone can only ever cap the short
* axis. */
.brandmark { max-height: 20px; max-width: 32px; width: auto; height: auto; display: inline-block; vertical-align: middle; }
/* --- Transactions summary ------------------------------------------------ */
/* --- Reports ------------------------------------------------------------- */
.report-head { align-items: center; }
.report-method-card { margin-top: var(--spacing-16); }
.report-method-row {
display: grid;
grid-template-columns: minmax(160px, 220px) minmax(160px, 1fr) 56px;
gap: var(--spacing-16);
align-items: center;
padding: var(--spacing-16) 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.report-method-row:last-of-type { border-bottom: 0; }
.report-method-row strong { text-align: right; }
.report-method-track {
width: 100%; height: 8px;
border: 0; border-radius: var(--radius-pill);
overflow: hidden; background: var(--color-frost-field);
}
.report-method-track::-webkit-progress-bar { background: var(--color-frost-field); }
.report-method-track::-webkit-progress-value { background: var(--color-tidal-teal); }
.report-method-track::-moz-progress-bar { background: var(--color-tidal-teal); }
/* --- Support ------------------------------------------------------------- */
.support-tabs { margin: 0; }
.support-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
.support-list { margin: 0; padding-left: 20px; color: var(--color-steel-fog); }
.support-list li + li { margin-top: var(--spacing-8); }
/* --- Products, square thumbnails -----------------------------------------
* design.md Imagery: the product is shot square, on a plate. This was a pill,
* which cropped the corners off a square asset and read as an avatar. */
.thumb { border-radius: var(--radius-tags); }
/* The flex lives on a span inside the cell. Putting display:flex on the td
* itself removed its table-cell display and broke the whole row: the Selling
* column collapsed and the switch bled over the Archive button. */
.row-actions {
display: inline-flex;
gap: var(--spacing-8);
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
}
/* --- Auth, scaled up ----------------------------------------------------- */
.auth-card .card { border-radius: var(--radius-surface); padding: var(--spacing-32); }
.auth-card h1 { font-size: var(--text-display-sm); line-height: var(--leading-display-sm); }
/* --- Phones -------------------------------------------------------------- */
@media (max-width: 768px) {
.topbar { flex-direction: row; align-items: flex-start; }
.topbar h1 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); }
}
@media (max-width: 640px) {
.panel-head { flex-direction: column; align-items: stretch; }
.panel-head .btn { width: 100%; }
.stat-split > div + div {
border-left: none;
border-top: 1px solid var(--color-pewter-mist);
padding-left: 0;
padding-top: var(--spacing-16);
}
.addr { flex-wrap: wrap; }
.addr-main { flex-basis: 100%; }
.addr-actions { flex: 1; }
.addr-actions .btn { flex: 1; }
.picker{ width: 100%; }
.form-actions .btn { width: 100%; }
.product-search-wrap{ width: 100%; }
.product-machine-row { grid-template-columns: 1fr 1fr; }
.support-help-grid { grid-template-columns: 1fr; }
.report-method-row { grid-template-columns: 1fr auto; }
.report-method-track { grid-column: 1 / -1; grid-row: 2; }
}
/* =========================================================================
* The Admin Console, step 12. Same components, same tokens; only the row
* geometries below are new, one per staff table.
* ========================================================================= */
/* -- The dark rail ------------------------------------------------------------
* Obsidian rather than Chalk Cloud, so the console reads as a different
* surface from the operator portal at a glance; .main stays exactly as it
* already was, unchanged, which is the other half of that contrast. Every
* value below is an existing token or a color-mix of one: no new hue enters
* the system. The nav icons cycle through three lightness steps of Tidal
* Teal, toward white rather than toward Obsidian the way the Vendpass ring
* does, because the ring sits on a light track and this rail is dark. */
.rail-dark {
background: var(--color-obsidian-core);
border-right: none;
}
.rail-dark .rail-link { color: #e5ecf2; }
.rail-dark .rail-link:hover {
background: color-mix(in srgb, var(--color-chalk-cloud) 10%, var(--color-obsidian-core));
color: var(--color-chalk-cloud);
}
.rail-dark .rail-link[aria-current='page'] {
background: color-mix(in srgb, var(--color-chalk-cloud) 12%, var(--color-obsidian-core));
color: var(--color-chalk-cloud);
}
.rail-dark .rail-email { color: #e5ecf2; }
.rail-dark .rail-foot {
border-top-color: color-mix(in srgb, var(--color-chalk-cloud) 18%, var(--color-obsidian-core));
}
.rail-dark .iconbtn {
background: transparent;
border-color: color-mix(in srgb, var(--color-chalk-cloud) 24%, var(--color-obsidian-core));
color: var(--color-chalk-cloud);
}
.rail-dark .iconbtn:hover {
background: color-mix(in srgb, var(--color-chalk-cloud) 10%, var(--color-obsidian-core));
}
.rail-dark .rail-nav .rail-link:nth-child(1) .rail-icon { color: var(--color-tidal-teal); }
.rail-dark .rail-nav .rail-link:nth-child(2) .rail-icon { color: color-mix(in srgb, var(--color-tidal-teal) 70%, white); }
.rail-dark .rail-nav .rail-link:nth-child(3) .rail-icon { color: color-mix(in srgb, var(--color-tidal-teal) 45%, white); }
.rail-dark .rail-nav .rail-link:nth-child(4) .rail-icon { color: var(--color-tidal-teal); }
.rail-dark .rail-nav .rail-link:nth-child(5) .rail-icon { color: color-mix(in srgb, var(--color-tidal-teal) 70%, white); }
.rail-dark .rail-nav .rail-link:nth-child(6) .rail-icon { color: color-mix(in srgb, var(--color-tidal-teal) 45%, white); }
.rail-dark .rail-nav .rail-link:nth-child(7) .rail-icon { color: var(--color-tidal-teal); }
@media (max-width: 768px) {
.rail-dark { border-bottom: none; }
}
.admin-fleet-row { grid-template-columns: 110px minmax(140px, 1fr) 130px 80px 150px; }
/* Widths measured against the content rather than guessed: an email is the
* one unbounded value here and was breaking across two lines at 1440 while the
* status column, at 100px, was too narrow for its own square and word and sat
* under the Actions header instead of its own. */
.admin-op-row {
grid-template-columns:
minmax(140px, 1fr) minmax(220px, 1.4fr) 80px 70px 100px 120px 250px;
align-items: center;
}
.admin-op-email { overflow-wrap: anywhere; }
/* The actions track is declared rather than auto: as auto it was whatever the
* two flexible columns left over, which at 1440 was less than the buttons
* needed, so Reset password broke across two lines and Suspend left the card. */
.admin-op-actions .btn { white-space: nowrap; }
/* The product name took every spare pixel, so at 1440 it ran to 750px and
* pushed price, stock and status against the right edge of a mostly empty
* row. It is generous but bounded now, and a trailing flexible track absorbs
* the rest rather than any column having to. */
.admin-product-row { grid-template-columns: minmax(200px, 620px) 110px 110px 150px 1fr; }
/* The actions track is declared, not auto. The header's actions cell holds an
* sr-only word and measures zero; the body's holds a 152px button. Under auto
* the two rows resolved that track differently, the two 1fr columns absorbed
* the difference at 437px against 361px, and every header sat right of the
* value it named. Measured. This is the third grid in the console where a
* trailing auto did it, so it is worth naming rather than fixing quietly. */
.admin-del-row {
grid-template-columns: minmax(140px, 1fr) minmax(200px, 1fr) 150px 170px;
align-items: center;
}
/* Six columns since the receipt moved into the record: Sale, Total, Time,
* Method, Operator, Terminal. The 150px seventh track went with it. */
.admin-tx-row {
grid-template-columns:
minmax(180px, 1.4fr) 90px 140px 80px minmax(140px, 1fr) 120px;
}
.admin-vp-activity-row {
grid-template-columns: 150px 100px minmax(140px, 1fr) minmax(110px, 1fr) 140px;
}
.admin-sp-row {
grid-template-columns: 100px minmax(140px, 1fr) minmax(110px, 1fr) 100px 120px 100px;
}
/* Six columns, not nine. Type, size and uploaded were a column each holding
* one short value, and between them they took 260px that the creative's own
* name needed; they sit on the identity's second line now. The actions track
* is declared rather than auto, which is what let Deactivate run 51px past the
* card and get cut off mid-word. */
.admin-media-row {
grid-template-columns: 20px minmax(260px, 1fr) 150px 120px 150px 240px;
align-items: center;
}
.admin-media-identity {
display: flex;
align-items: center;
gap: var(--spacing-8);
min-width: 0;
}
.admin-media-thumb {
position: relative;
flex: none;
width: 40px;
height: 40px;
border-radius: var(--radius-tags);
overflow: hidden;
background: var(--color-frost-field);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-steel-fog);
}
.admin-media-text { min-width: 0; display: flex; flex-direction: column; }
.admin-media-name { overflow-wrap: anywhere; font-weight: var(--font-weight-medium); }
.admin-contract-rate .hint { display: block; }
/* --- The operator's advertising list -------------------------------------
* The categories were full-width cards carrying three big figures each, and
* a table underneath repeated the same impressions and accrued for every one
* of them. One list now, with the contract behind the row that owns it: the
* same object-state shape the address book uses. */
.ad-list { display: flex; flex-direction: column; }
.ad-row { border-bottom: 1px solid var(--color-pewter-mist); }
.ad-row:last-child { border-bottom: none; }
.ad-row-head, .ad-row.ad-head-row {
display: grid;
grid-template-columns: 44px minmax(160px, 1fr) 130px 130px 130px 24px;
align-items: center;
gap: var(--spacing-16);
width: 100%;
padding: var(--spacing-16) var(--spacing-24);
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
}
button.ad-row-head { cursor: pointer; }
button.ad-row-head:hover { background: var(--color-frost-field); }
.ad-row.ad-head-row {
border-bottom: 1px solid var(--color-pewter-mist);
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
}
.ad-row-identity { display: flex; flex-direction: column; min-width: 0; }
.ad-row-rate { font-weight: var(--font-weight-medium); }
.ad-row-num { justify-self: end; }
.ad-row.ad-head-row > div:nth-child(4),
.ad-row.ad-head-row > div:nth-child(5) { justify-self: end; }
.ad-row-head .obj-chevron { justify-self: end; }
.ad-row-body { padding: 0 var(--spacing-24) var(--spacing-24); }
.ad-row-body .kv { max-width: 560px; }
.ad-leave-line { margin: 0 0 var(--spacing-8); font-weight: var(--font-weight-medium); }
@media (max-width: 640px) {
.ad-row-head, .ad-row.ad-head-row {
grid-template-columns: 44px minmax(0, 1fr) 24px;
grid-template-areas: "thumb name chevron" ". rate rate" ". impressions accrued";
row-gap: var(--spacing-8);
padding: var(--spacing-16);
}
.ad-row-head > *:nth-child(1) { grid-area: thumb; }
.ad-row-head > *:nth-child(2) { grid-area: name; }
.ad-row-head > *:nth-child(3) { grid-area: rate; justify-self: start; }
.ad-row-head > *:nth-child(4) { grid-area: impressions; justify-self: start; }
.ad-row-head > *:nth-child(5) { grid-area: accrued; }
.ad-row.ad-head-row { display: none; }
.ad-row-body { padding: 0 var(--spacing-16) var(--spacing-16); }
}
/* Measured: the three media actions need 229px together and the two rate
* actions 164px, so both tracks are declared above them rather than left to
* guess. Without the nowrap, Change rate broke across two lines inside a
* track wide enough for it. */
.admin-media-row .btn, .admin-contract .btn { white-space: nowrap; }
.admin-media-handle {
display: flex;
align-items: center;
color: var(--color-steel-fog);
}
.admin-media-row[draggable="true"] { cursor: grab; }
.admin-media-row.is-dragging { opacity: .4; }
/* --- Rewards -------------------------------------------------------------- */
/* The Vendpass wordmark carries the brand inside the tab, so the nav can say
* "Rewards" (what it is) without the product name being lost. */
.vp-brand {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
align-items: flex-start;
margin-bottom: var(--spacing-16);
}
.vp-logo { height: 28px; width: auto; max-width: 100%; }
.vp-tiers { margin-top: var(--spacing-16); display: flex; flex-direction: column; }
.vp-tier-row {
display: flex;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-8) 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.vp-tier-row:last-child { border-bottom: none; }
.vp-terminals { margin-top: var(--spacing-16); display: flex; flex-direction: column; }
.vp-terminal-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-8) 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.vp-terminal-row:last-child { border-bottom: none; }
.vp-terminal-toggle { accent-color: var(--color-tidal-teal); }
.vp-tier-edit {
display: flex;
align-items: flex-end;
gap: var(--spacing-8);
flex-wrap: wrap;
padding: var(--spacing-8) 0;
}
.vp-tier-field { display: flex; flex-direction: column; gap: 2px; }
.vp-tier-field .input { width: 96px; }
.vp-tier-unit { padding-bottom: var(--spacing-8); }
.vp-tier-note { padding-bottom: var(--spacing-8); }
/* Admin Rewards: a row that opens rather than one carrying every field. */
.vp-activity-head { cursor: pointer; }
.vp-activity-head:focus-visible { outline: 2px solid var(--color-tidal-teal); outline-offset: -2px; }
.vp-activity-detail {
padding: var(--spacing-16) var(--spacing-24);
border-bottom: 1px solid var(--color-pewter-mist);
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.vp-detail-row { display: flex; justify-content: space-between; gap: var(--spacing-16); }
/* --- Category contracts, Admin Console ------------------------------------ */
.admin-rate-head { display: flex; flex-direction: column; gap: var(--spacing-8); }
/* A reply is written at reading measure, not at the width of the page. */
.sp-reply-form { max-width: 640px; }
/* The row is the link, so the row says so once. Every cell inside it was
* underlining, which read as five separate links to five different places. */
.admin-sp-link { text-decoration: none; color: inherit; }
.admin-sp-link:hover { background: var(--color-frost-field); }
.admin-sp-link:hover .sp-subject { text-decoration: underline; }
/* Selecting an asset is a small teal indicator on a light surface, the one
* use of teal design.md allows here. */
.admin-content-row input[type="checkbox"] { accent-color: var(--color-tidal-teal); }
/* Program controls were four native inputs on one line with no field
* structure. They are fields now, so the grid only has to place them. */
.admin-vp-settings-grid { margin-bottom: var(--spacing-24); }
/* A record opens from the row, so the row says so. */
.admin-tx-record { cursor: pointer; }
.admin-tx-record:hover { background: var(--color-frost-field); }
.admin-tx-record:focus-visible { outline: 2px solid var(--color-obsidian-core); outline-offset: -2px; }
.sheet-method { margin: 0; display: flex; align-items: center; gap: var(--spacing-8); }
.admin-contract-list {
display: flex;
flex-direction: column;
margin-top: var(--spacing-16);
}
/* A table, not a stack of bands. Four categories with no rate set were four
* near-identical full-width rows of empty state; as table rows with a header
* over them, an unset rate reads as one value missing from a row rather than
* as a section of nothing. */
.admin-contract {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) 150px 190px;
align-items: center;
gap: var(--spacing-16);
padding: var(--spacing-16) 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.admin-contract:last-child { border-bottom: none; }
/* align-items keeps a "No rate set" tag sized to its own text; a stretched
* tag in this column reads as an empty input field, not a status. */
.admin-contract-rate { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.admin-contract-history {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: var(--spacing-8);
padding-top: var(--spacing-8);
}
.admin-contract-history-row {
display: flex;
gap: var(--spacing-16);
font-size: var(--text-body-sm);
}
/* --- Operator Advertising ------------------------------------------------- */
.ad-summary { margin-bottom: var(--spacing-24); }
.ad-cards { display: flex; flex-direction: column; gap: var(--spacing-16); }
.ad-card { display: flex; flex-direction: column; gap: var(--spacing-16); }
.ad-card-head { display: flex; align-items: center; gap: var(--spacing-16); }
.ad-card-thumb {
flex: none;
width: 56px;
height: 56px;
border-radius: var(--radius-tags);
overflow: hidden;
background: var(--color-frost-field);
display: flex;
align-items: center;
justify-content: center;
}
.ad-card-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.ad-card-identity { min-width: 0; display: flex; flex-direction: column; }
.ad-card-name { font-weight: var(--font-weight-medium); font-size: var(--text-heading-sm); }
.ad-card-sample { font-size: var(--text-caption); overflow-wrap: anywhere; }
.ad-card-figures {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--spacing-16);
}
.ad-card-actions { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }
.ad-card-contract {
border-top: 1px solid var(--color-pewter-mist);
padding-top: var(--spacing-16);
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.ad-contract-row { display: flex; justify-content: space-between; gap: var(--spacing-16); }
.ad-leave-all { margin-top: var(--spacing-24); display: flex; flex-direction: column; gap: var(--spacing-16); align-items: flex-start; }
.po-report { align-self: flex-start; margin-top: var(--spacing-8); }
/* --- Content library ----------------------------------------------------- */
.admin-content-row {
grid-template-columns: 32px minmax(200px, 1.6fr) 110px 80px 90px 100px minmax(120px, 1fr);
align-items: center;
}
.content-use { display: block; }
.admin-content-summary {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-32);
margin-bottom: var(--spacing-16);
}
.admin-rate-card { margin-bottom: var(--spacing-16); }
.admin-rate-fields {
display: flex;
align-items: center;
gap: var(--spacing-8);
flex-wrap: wrap;
margin-top: var(--spacing-8);
}
.admin-rate-input { width: 64px; text-align: center; }
.admin-code { font-weight: var(--font-weight-medium); }
.admin-op a, .admin-op-name a{
color: var(--color-obsidian-core);
font-weight: var(--font-weight-medium);
}
.admin-op-email{ overflow-wrap: anywhere; }
@media (max-width: 640px) {
/* Each staff table collapses to the same card treatment the operator's
* transactions already use, with its own arrangement per row type. */
.admin-code { grid-area: code; }
.admin-status { grid-area: status; justify-self: end; }
.admin-op { grid-area: op; }
.admin-ver { grid-area: ver; }
.admin-seen { grid-area: seen; text-align: right; }
/* Category rates kept its four desktop columns on a phone, which squeezed
the two rate values and pushed Set rate off the card entirely. */
.admin-contract {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "name name" "rate gross" "act act";
row-gap: var(--spacing-16);
padding: var(--spacing-16) 0;
}
.admin-contract-rate { grid-area: rate; }
.admin-contract .row-actions { grid-area: act; display: flex; width: 100%; }
.admin-contract .row-actions .btn { flex: 1; }
.admin-contract-rate::before{
display: block;
margin-bottom: 4px;
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
}
.admin-contract-rate::before { content: "Operator rate"; }
/* Content had no phone arrangement at all, so its seven columns stayed and
the cells squeezed against each other. Placed by position, since only the
first two carry a class of their own. */
.admin-content-row > *:nth-child(1) { grid-area: pick; align-self: start; }
.admin-content-row > *:nth-child(2) { grid-area: name; }
.admin-content-row > *:nth-child(3) { grid-area: category; }
.admin-content-row > *:nth-child(4) { grid-area: type; justify-self: start; }
.admin-content-row > *:nth-child(5) { grid-area: size; }
.admin-content-row > *:nth-child(6) { grid-area: uploaded; }
.admin-content-row > *:nth-child(7) { grid-area: used; }
.admin-sp-row > *:nth-child(1) { grid-area: ref; }
.admin-sp-row > *:nth-child(2) { grid-area: subject; }
.admin-sp-row > *:nth-child(3) { grid-area: operator; }
/* The terminal keeps a place rather than being hidden: design.md's mobile
rule is that nothing on desktop disappears, it reflows. */
.admin-sp-row > *:nth-child(4) { grid-area: terminal; text-align: right; }
.admin-sp-row > *:nth-child(5) { grid-area: status; justify-self: end; }
.admin-sp-row > *:nth-child(6) { grid-area: updated; }
.admin-op-name { grid-area: name; }
.admin-op-status { grid-area: status; justify-self: end; }
.admin-op-email { grid-area: email; }
.admin-op-machines { grid-area: machines; }
.admin-op-sales { grid-area: sales; }
.admin-op-total { grid-area: total; text-align: right; }
.admin-op-actions { grid-area: act; }
.admin-op-actions .row-actions { display: flex; width: 100%; }
.admin-op-actions .btn { flex: 1; }
/* The header words, repeated as small labels where the header row is gone. */
.admin-op-machines::before, .admin-op-sales::before, .admin-op-total::before {
display: block;
font-size: var(--text-caption);
color: var(--color-steel-fog);
}
.admin-op-machines::before { content: 'Machines'; }
.admin-op-sales::before { content: 'Sales'; }
.admin-op-total::before { content: 'Total'; }
.admin-product-row > div:nth-child(1) { grid-area: pname; font-weight: var(--font-weight-medium); }
.admin-product-row > div:nth-child(2) { grid-area: pprice; text-align: right; }
.admin-product-row > div:nth-child(3) { grid-area: pstock; text-align: right; }
.admin-product-row > div:nth-child(4) { grid-area: pstatus; }
.admin-vp-activity-row .vp-member { grid-area: member; }
.admin-vp-activity-row .vp-what { grid-area: what; }
.admin-vp-activity-row .vp-amt { grid-area: amt; text-align: left; }
.admin-sp-row .sp-subject { grid-area: subject; font-weight: var(--font-weight-medium); }
.admin-sp-row > div:nth-child(5) { grid-area: status; justify-self: end; }
.admin-sp-row .sp-ref { grid-area: ref; }
.admin-sp-row > div:nth-child(6) { grid-area: updated; text-align: right; }
.admin-sp-row > div:nth-child(3) { grid-area: op; }
.admin-sp-row > div:nth-child(4) { grid-area: machine; }
/* Rewritten for the six-column row. The old one placed nine children, so
after type, size and uploaded moved onto the identity line it was giving
the status cell the type's slot and hiding the actions outright. */
/* The handle drops out on mobile: HTML5 drag and drop is unreliable
* enough on touch that offering it here would be offering something
* that mostly does not work. */
.admin-media-row > div:nth-child(1) { display: none; }
.admin-media-row .admin-media-identity { grid-area: name; }
.admin-media-row > div:nth-child(3) { grid-area: cat; }
.admin-media-row > div:nth-child(4) { grid-area: status; justify-self: end; }
.admin-media-row > div:nth-child(5) { grid-area: assigned; }
.admin-media-row > div:nth-child(6) { grid-area: act; margin-top: var(--spacing-8); }
.admin-media-row .row-actions { display: flex; width: 100%; }
.admin-media-row .row-actions .btn { flex: 1; }
.admin-rate-fields { justify-content: flex-start; }
.admin-content-row > div:nth-child(1) { grid-area: pick; align-self: start; }
.admin-content-row > div:nth-child(3) { grid-area: cat; }
.admin-content-row > div:nth-child(4) { grid-area: type; justify-self: end; }
.admin-content-row > div:nth-child(5) { grid-area: size; }
.admin-content-row > div:nth-child(6) { display: none; }
.admin-content-row > div:nth-child(7) { grid-area: used; justify-self: end; }
.admin-content-summary { gap: var(--spacing-16); }
}
/* --- Reduced motion ------------------------------------------------------ */
/* Written here rather than per-component, since every transition in this file
* is color only and none of them carry meaning. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* --- Receipt -------------------------------------------------------------- */
/* A button that reads as the link beside it: the XRPL row links out to an
* explorer, the simulated row opens a dialog, and the two should not look
* like different kinds of affordance when they answer the same question. */
.linkbtn {
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--color-obsidian-core);
text-decoration: underline;
cursor: pointer;
}
.linkbtn:hover { color: var(--color-steel-fog); }
.linkbtn:focus-visible { outline: 2px solid var(--color-tidal-teal); outline-offset: 2px; }
.receipt { display: flex; flex-direction: column; gap: var(--spacing-8); }
.receipt-row {
display: flex;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-8) 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.receipt-row:last-child { border-bottom: none; }
/* --- Drill-down ----------------------------------------------------------- */
.crumbs {
display: flex;
align-items: center;
gap: var(--spacing-8);
flex-wrap: wrap;
margin-bottom: var(--spacing-16);
font-size: var(--text-body-sm);
}
.crumbs a { color: var(--color-steel-fog); }
.crumbs a:hover { color: var(--color-obsidian-core); }
.crumbs [aria-current] { font-weight: var(--font-weight-medium); }
.crumb-sep { color: var(--color-pewter-mist); }
.admin-drill-row {
grid-template-columns: minmax(160px, 1.5fr) minmax(140px, 1fr) 110px 110px;
align-items: center;
color: var(--color-obsidian-core);
}
/* The whole row is the target, so it must not read as a paragraph of links.
* The name carries the affordance on hover; the figures beside it stay plain
* text, which is what they are. */
a.admin-drill-row { text-decoration: none; }
a.admin-drill-row:hover { background: var(--color-frost-field); }
a.admin-drill-row:hover .admin-drill-name { text-decoration: underline; }
.admin-drill-name { font-weight: var(--font-weight-medium); display: flex; align-items: center; gap: var(--spacing-8); }
/* The build a terminal reports, beside its code. Sits inline rather than in
* its own column so the four-column drill grid is untouched; it is a fact
* about the row, not a measure to sort by. */
.admin-drill-sub { font-size: var(--text-caption); font-weight: var(--font-weight-regular); }
a.admin-drill-row:hover .admin-drill-sub { text-decoration: none; }
.admin-drill-total { text-align: right; }
/* The internal owner is reachable but visibly not part of the business. */
.admin-drill-internal { opacity: .75; }
.admin-op-summary { margin-bottom: var(--spacing-24); }
.admin-op-actions-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
flex-wrap: wrap;
}
.admin-op-fleet-link { margin-top: var(--spacing-16); }
/* By operator, on Rewards. This row had no grid of its own and fell through to
* the .tx-row default, so five values shared whatever columns that gave and the
* operator name ended up under its own numbers. */
.admin-vp-op-row {
grid-template-columns: minmax(180px, 1.5fr) 110px 120px 140px 100px;
align-items: center;
}
@media (max-width: 640px) {
/* Four bare values with no words of their own, so each says what it is. */
.admin-vp-op-row > div:nth-child(1) { grid-area: name; }
.admin-vp-op-row > div:nth-child(2) { grid-area: card; }
.admin-vp-op-row > div:nth-child(3) { grid-area: wallet; }
.admin-vp-op-row > div:nth-child(4) { grid-area: outstanding; }
.admin-vp-op-row > div:nth-child(5) { grid-area: members; }
.admin-vp-op-row > div:nth-child(n + 2)::before {
display: block;
margin-bottom: 4px;
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
}
.admin-vp-op-row > div:nth-child(2)::before { content: "Card rate"; }
.admin-vp-op-row > div:nth-child(3)::before { content: "Wallet rate"; }
.admin-vp-op-row > div:nth-child(4)::before { content: "Outstanding"; }
.admin-vp-op-row > div:nth-child(5)::before { content: "Members"; }
.admin-drill-row > div:nth-child(1) { grid-area: name; }
.admin-drill-row > div:nth-child(2) { grid-area: terminals; }
.admin-drill-row > div:nth-child(3) { grid-area: sales; }
.admin-drill-row > div:nth-child(4) { grid-area: total; align-self: center; }
}
/* --- Notification badge --------------------------------------------------- */
/* A small red circle, per direction: a count inside it at this size becomes
* unreadable on the rail, and "something new is here" is the whole message. */
.rail-badge {
display: inline-block;
width: 8px;
height: 8px;
margin-left: var(--spacing-8);
border-radius: var(--radius-pill);
background: var(--color-cinnabar);
vertical-align: middle;
}
.sp-resolved {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
flex-wrap: wrap;
}
/* --- Product ordering ----------------------------------------------------- */
/* Same affordance as the Admin Console's Advertising list, deliberately: an
* operator who learns one has learned the other. */
.cell-handle { color: var(--color-steel-fog); vertical-align: middle; }
tr[draggable="true"] { cursor: grab; }
tr.is-dragging { opacity: .4; }
/* --- Dashboard and Analytics ---------------------------------------------- */
.dash-summary { margin-bottom: var(--spacing-24); }
.dash-row {
grid-template-columns: minmax(120px, 1.2fr) minmax(110px, 1fr) 110px 110px;
align-items: center;
}
.dash-taken { text-align: right; }
/* The two rail cards, equal width side by side; each line inside is a
* label-figure pair on one row, the same quiet list the receipt sheet uses. */
.po-rails {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-16);
margin-bottom: var(--spacing-16);
}
@media (max-width: 640px) { .po-rails { grid-template-columns: 1fr; } }
.po-asset-line {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-8);
padding: var(--spacing-8) 0;
}
/* Live status: one plain row per open issue, a square for the state and a
* sentence for anyone who does not see the color, same contract as .status.
* No amber: design.md admits no color beside teal and cinnabar, so low stock
* takes the Steel Fog square and the sentence does the work. */
.dash-issues {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
margin-top: var(--spacing-24);
font-size: var(--text-body-sm);
}
.dash-issue { display: flex; align-items: center; gap: var(--spacing-8); }
.admin-wallet-banner {
display: flex;
align-items: center;
gap: var(--spacing-16);
margin-bottom: var(--spacing-16);
}
.dash-alert-row {
grid-template-columns: minmax(140px, 1fr) 120px auto;
align-items: center;
}
.tag-danger {
background: var(--color-cinnabar);
color: var(--color-chalk-cloud);
}
/* The bar chart this page used is gone; the settlement chart and the Analytics
* line chart both use the shared .chart-* vocabulary now. Only the height
* classes below survived, because the settlement chart's stacked segments
* still take them. */
@media (max-width: 640px) {
.dash-row > div:nth-child(1) { grid-area: a; }
.dash-row > div:nth-child(2) { grid-area: b; justify-self: end; }
.dash-row > div:nth-child(3) { grid-area: c; }
.dash-row > div:nth-child(4) { grid-area: d; text-align: right; }
}
/* The stat strip: one top-level card, Frost Field, the stats side by side with
* hairline column rules and no inner cards. Two per row below lg, one below sm. */
.stat-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
padding: 0;
background: var(--color-frost-field);
}
/* Every cell carries both rules and the edges give theirs back, so the grid
* rewraps at any column count without a bespoke border rule per breakpoint. */
.stat-strip > div {
padding: var(--spacing-24);
min-width: 0;
border-left: 1px solid var(--color-pewter-mist);
border-top: 1px solid var(--color-pewter-mist);
}
.stat-strip > div:nth-child(5n + 1) { border-left: none; }
.stat-strip > div:nth-child(-n + 5) { border-top: none; }
/* Four across, for a strip standing beside a lead card rather than carrying
* the page alone. Same trick as above: every cell has both rules and the
* edge cells give theirs back, restated per breakpoint because the count
* changes. */
/* Two across, for a pair. Content's storage figures were two divs in a plain
* card with nothing between them; design.md puts related stats in one card
* separated by hairline column rules, which is what the strip is. */
.stat-strip-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-strip-2 > div { border-top: none; }
.stat-strip-2 > div:nth-child(2n + 1) { border-left: none; }
/* Three across, for a strip standing beside a lead card that carries the
* fourth figure. */
.stat-strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-strip-3 > div { border-top: none; }
.stat-strip-3 > div:nth-child(3n + 1) { border-left: none; }
.stat-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-strip-4 > div:nth-child(4n + 1) { border-left: none; }
.stat-strip-4 > div:nth-child(-n + 4) { border-top: none; }
@media (max-width: 1200px) {
.stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-strip > div:nth-child(5n + 1) { border-left: 1px solid var(--color-pewter-mist); }
.stat-strip > div:nth-child(-n + 5) { border-top: 1px solid var(--color-pewter-mist); }
.stat-strip > div:nth-child(3n + 1) { border-left: none; }
.stat-strip > div:nth-child(-n + 3) { border-top: none; }
.stat-strip-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-strip-4 > div:nth-child(4n + 1) { border-left: 1px solid var(--color-pewter-mist); }
.stat-strip-4 > div:nth-child(-n + 4) { border-top: 1px solid var(--color-pewter-mist); }
.stat-strip-4 > div:nth-child(odd) { border-left: none; }
.stat-strip-4 > div:nth-child(-n + 2) { border-top: none; }
}
@media (max-width: 900px) {
.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-strip > div:nth-child(3n + 1) { border-left: 1px solid var(--color-pewter-mist); }
.stat-strip > div:nth-child(-n + 3) { border-top: 1px solid var(--color-pewter-mist); }
.stat-strip > div:nth-child(odd) { border-left: none; }
.stat-strip > div:nth-child(-n + 2) { border-top: none; }
}
@media (max-width: 600px) {
.stat-strip { grid-template-columns: minmax(0, 1fr); }
.stat-strip > div { border-left: none; border-top: 1px solid var(--color-pewter-mist); }
.stat-strip > div:first-child { border-top: none; }
.stat-strip-4 { grid-template-columns: minmax(0, 1fr); }
}
/* --- The settlement chart -------------------------------------------------
* One hue in three renderings, which is the whole argument the page makes:
* solid teal has settled, 30% teal is pending, an outline is captured and not
* settled yet. Wallet money is solid the day it lands; card money is not.
* Flat, one accent, no second color, and never Cinnabar in a series. */
.chart-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
flex-wrap: wrap;
margin-bottom: var(--spacing-24);
}
.chart-legend { display: flex; align-items: center; gap: var(--spacing-16); flex-wrap: wrap; }
.chart-key {
display: inline-flex;
align-items: center;
gap: var(--spacing-8);
font-size: var(--text-caption);
color: var(--color-steel-fog);
}
.chart-swatch { width: 12px; height: 12px; flex: none; }
.chart-swatch.is-settled { background: var(--color-tidal-teal); }
.chart-swatch.is-pending {
background: color-mix(in srgb, var(--color-tidal-teal) 30%, var(--color-chalk-cloud));
}
.chart-swatch.is-awaiting { background: transparent; border: 1px solid var(--color-pewter-mist); }
/* A segment is a text button, so it takes the 8px radius and never a pill. */
.segmented {
display: inline-flex;
height: 40px;
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-buttons);
overflow: hidden;
flex: none;
}
.segment {
appearance: none;
border: none;
background: var(--color-chalk-cloud);
color: var(--color-obsidian-core);
font: inherit;
font-weight: var(--font-weight-medium);
padding: 0 var(--spacing-16);
cursor: pointer;
transition: background-color var(--duration-instant) var(--easing-instant),
color var(--duration-instant) var(--easing-instant);
}
.segment + .segment { border-left: 1px solid var(--color-pewter-mist); }
.chart-plot { display: flex; gap: var(--spacing-8); }
.chart-y {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
height: 200px;
font-size: var(--text-caption);
flex: none;
}
.chart-area { position: relative; flex: 1; min-width: 0; height: 200px; }
/* Horizontal only, per design.md: vertical gridlines fence the bars in. */
.chart-grid {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.chart-grid i { display: block; height: 1px; background: var(--color-pewter-mist); }
.chart-cols { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.chart-col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
/* The hovered column gets its Frost Field band, full chart height. */
.chart-col:hover, .chart-col:focus-visible { background: var(--color-frost-field); }
.chart-stack {
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
width: 100%;
height: 100%;
}
.chart-seg { width: 100%; }
.chart-seg.has-value { min-height: 2px; }
.chart-seg.is-settled { background: var(--color-tidal-teal); }
.chart-seg.is-pending {
background: color-mix(in srgb, var(--color-tidal-teal) 30%, var(--color-chalk-cloud));
}
.chart-seg.is-awaiting.has-value {
border: 1px solid var(--color-pewter-mist);
border-bottom: none;
}
.chart-tip {
position: absolute;
bottom: calc(100% + var(--spacing-8));
left: 50%;
transform: translateX(-50%);
min-width: 220px;
padding: var(--spacing-16);
z-index:var(--z-toolbar);
display: none;
box-shadow: var(--shadow-card-hover), var(--shadow-cookie-sheet);
}
.chart-col:hover .chart-tip, .chart-col:focus-visible .chart-tip { display: block; }
.chart-tip-head {
margin: 0 0 var(--spacing-8);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
}
.chart-tip-row {
display: grid;
grid-template-columns: 12px 1fr auto;
align-items: center;
gap: var(--spacing-8);
margin: 0;
padding: 2px 0;
font-size: var(--text-caption);
color: var(--color-steel-fog);
}
.chart-tip-total { border-top: 1px solid var(--color-pewter-mist); margin-top: var(--spacing-8); padding-top: var(--spacing-8); }
.chart-axis { display: flex; justify-content: space-between; margin-top: var(--spacing-8); font-size: var(--text-caption); }
.chart-disputed { display: inline-flex; align-items: center; gap: var(--spacing-8); }
.dash-payout-row { grid-template-columns: minmax(160px, 1.4fr) minmax(120px, 1fr) 130px minmax(120px, 1fr); }
@media (max-width: 640px) {
/* The bars keep their height and the plot scrolls, rather than thirty
* columns compressing into stripes. The tooltip is a pointer affordance and
* a phone has none; its figures stay in the column's text alternative. */
.chart-area { overflow-x: auto; }
.chart-cols { min-width: 480px; }
.chart-tip { display: none !important; }
.dash-payout-row > div:nth-child(1) { grid-area: period; font-weight: var(--font-weight-medium); }
.dash-payout-row > div:nth-child(2) { grid-area: status; justify-self: end; }
.dash-payout-row > div:nth-child(3) { grid-area: count; text-align: left; }
.dash-payout-row > div:nth-child(3)::after { content: " settlements"; }
.dash-payout-row > div:nth-child(4) { grid-area: amount; }
}
/* Table discipline: 48px rows, 16px horizontal cell padding, micro headers,
* body-sm cells, numbers right-aligned, the gross column in Medium. No row
* hover yet: a lift to Frost Field promises a click, and the detail sheet
* that click would open is a later page. */
.dash-num { text-align: right; }
.dash-gross { text-align: right; font-weight: var(--font-weight-medium); }
.dash-terminal-row {
grid-template-columns: minmax(100px, 0.9fr) minmax(180px, 1.4fr) 110px 130px minmax(140px, 1fr);
}
.dash-sales-row {
grid-template-columns: minmax(180px, 1.6fr) 110px minmax(110px, 0.9fr) minmax(140px, 1fr);
}
.dash-section { margin-top: var(--section-gap-working); }
.dash-issue { display: flex; align-items: center; gap: var(--spacing-8); }
/* A link is small text, so it is Obsidian Core, never the browser's blue. */
.hint a { color: var(--color-obsidian-core); }
@media (max-width: 640px) {
/* Each row carries its own labels' worth of structure: what, then the money.
* With the header row gone, a bare count or timestamp needs its word back. */
/* One inset for every row on a phone, not one per page. .tx-row is
16px 24px, and only .dash-table overrode it, so the Portal's tables sat at
16 and the console's at 24 and a reader moving between them felt the page
shift under them. Measured across all eighteen before and after. */
/* And one rhythm between sections. Five values were in play at 390: a
section heading brought 40 above and 16 below, panels 40, the working
section gap 32, and some cards their own. On a screen this narrow the
difference reads as inconsistency rather than as hierarchy. */
.section-heading { margin: var(--spacing-24) 0 var(--spacing-8); }
/* 64px above and below an empty state is a third of a phone screen spent
saying there is nothing here. The message is the same at half of it. */
.empty { padding: var(--spacing-32) var(--spacing-16); }
/* By terminal reflowed to four bare values, so a phone showed a code, an
asset and then 4 and 15 with nothing saying which was which. The header
row is hidden here, so each cell says what it is. */
.po-machine-row > div:nth-child(3)::before { content: "Sales"; }
.po-machine-row > div:nth-child(4)::before { content: "Received"; }
.po-machine-row > div:nth-child(3)::before,
.po-machine-row > div:nth-child(4)::before {
display: block;
margin-bottom: 2px;
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
}
.panel { margin-bottom: var(--spacing-24); }
.dash-section { margin-top: var(--spacing-24); }
.dash-terminal-row > div:nth-child(1) { grid-area: code; font-weight: var(--font-weight-medium); }
.dash-terminal-row > div:nth-child(2) { grid-area: status; justify-self: end; }
.dash-terminal-row > div:nth-child(3) { grid-area: sales; text-align: left; }
.dash-terminal-row > div:nth-child(3)::after { content: " sales today"; }
.dash-terminal-row > div:nth-child(4) { grid-area: revenue; }
.dash-terminal-row > div:nth-child(5) { grid-area: last; text-align: left; }
.dash-terminal-row > div:nth-child(5)::before { content: "Last sale "; }
.dash-sales-row > div:nth-child(1) { grid-area: lines; font-weight: var(--font-weight-medium); }
.dash-sales-row > div:nth-child(2) { grid-area: total; }
.dash-sales-row > div:nth-child(3) { grid-area: method; }
.dash-sales-row > div:nth-child(4) { grid-area: when; }
}
/* --- Stock alert bell ----------------------------------------------------- */
.topbar-alerts { display: flex; align-items: center; }
.topbar-bell { position: relative; }
.topbar-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-cinnabar);
}
.alerts-list { display: flex; flex-direction: column; gap: var(--spacing-8); }
.alerts-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-8) 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.alerts-row:last-child { border-bottom: none; }
/* --- Payouts: the configurable object and its batches ---------------------
* design.md's three designed states for one object. Managing addresses stays
* on Settings: the expanded state links there rather than growing a second
* editor for the same rows. */
.po-proceeds {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--spacing-24);
align-items: end;
padding: clamp(24px, 4vw, 40px);
margin-bottom: var(--section-gap-working);
border-radius: var(--radius-xl);
color: var(--color-chalk-cloud);
background: var(--color-obsidian-core);
box-shadow: var(--shadow-low);
}
.po-proceeds-head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--spacing-16);
align-items: start;
}
.po-asset-mark {
display: grid;
place-items: center;
width: 56px;
height: 56px;
flex: 0 0 56px;
border-radius: 50%;
background: var(--color-tidal-teal);
overflow: hidden;
}
.po-asset-mark img {
display: block;
width: 38px;
height: 38px;
object-fit: contain;
}
.po-eyebrow {
margin: 0 0 var(--spacing-8);
color: color-mix(in srgb, var(--color-chalk-cloud) 70%, transparent);
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
letter-spacing: .08em;
text-transform: uppercase;
}
.po-proceeds-amount {
margin: 0;
font-size: clamp(2.25rem, 5vw, 4.25rem);
font-weight: var(--font-weight-medium);
letter-spacing: -.045em;
line-height: 1;
}
.po-proceeds-detail {
margin: var(--spacing-12) 0 0;
color: color-mix(in srgb, var(--color-chalk-cloud) 72%, transparent);
font-size: var(--text-body-sm);
}
.po-direct-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-8);
min-height: 34px;
padding: 0 var(--spacing-12);
border: 1px solid color-mix(in srgb, var(--color-chalk-cloud) 18%, transparent);
border-radius: var(--radius-pill);
color: var(--color-chalk-cloud);
font-size: var(--text-caption);
white-space: nowrap;
}
.po-proceeds-actions {
display: flex;
gap: var(--spacing-16);
}
.po-action {
display: grid;
justify-items: center;
gap: var(--spacing-8);
min-width: 72px;
color: color-mix(in srgb, var(--color-chalk-cloud) 84%, transparent);
font-size: var(--text-caption);
text-decoration: none;
}
.po-action-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
color: var(--color-chalk-cloud);
background: color-mix(in srgb, var(--color-chalk-cloud) 9%, transparent);
transition: background var(--duration-instant) var(--easing-instant);
}
.po-action:hover .po-action-icon { background: color-mix(in srgb, var(--color-chalk-cloud) 16%, transparent); }
.po-action:focus-visible { outline: 2px solid var(--color-tidal-teal); outline-offset: 5px; border-radius: var(--radius-sm); }
.po-split {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--spacing-16);
margin-top: var(--section-gap-working);
}
@media (max-width: 900px) { .po-split { grid-template-columns: minmax(0, 1fr); } }
.po-object { display: flex; flex-direction: column; gap: var(--spacing-16); }
.po-object > .stat-label { margin: 0; }
.po-object-line { margin: 0; font-size: var(--text-body-sm); }
.po-object-head {
display: flex;
align-items: center;
gap: var(--spacing-8);
width: 100%;
padding: 0;
background: none;
border: none;
font: inherit;
color: var(--color-obsidian-core);
cursor: pointer;
text-align: left;
}
.po-object-id { font-weight: var(--font-weight-medium); }
.po-object-chevron {
margin-left: auto;
display: inline-flex;
color: var(--color-steel-fog);
transition: transform var(--duration-instant) var(--easing-instant);
}
.po-object-chevron.is-open { transform: rotate(180deg); }
.po-object-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
/* Initiated carries the period beneath it, so the batch reads as a window
* rather than a single day the money happened to be grouped on. */
.po-batch-row { grid-template-columns: minmax(160px, 1.4fr) minmax(120px, 1fr) 130px minmax(120px, 1fr); }
.po-batch-period { display: block; font-size: var(--text-caption); }
@media (max-width: 640px) {
.po-proceeds { grid-template-columns: minmax(0, 1fr); align-items: start; }
.po-proceeds-head { grid-template-columns: auto minmax(0, 1fr); }
.po-direct-badge { grid-column: 1 / -1; justify-self: start; }
.po-proceeds-actions { padding-left: 72px; }
.po-asset-mark { width: 48px; height: 48px; }
.po-asset-mark img { width: 32px; height: 32px; }
.po-batch-row > div:nth-child(1) { grid-area: initiated; font-weight: var(--font-weight-medium); }
.po-batch-row > div:nth-child(2) { grid-area: status; justify-self: end; }
.po-batch-row > div:nth-child(3) { grid-area: count; text-align: left; }
.po-batch-row > div:nth-child(3)::after { content: " settlements"; }
.po-batch-row > div:nth-child(4) { grid-area: amount; }
.po-machine-row > div:nth-child(1) { grid-area: code; font-weight: var(--font-weight-medium); }
.po-machine-row > div:nth-child(2) { grid-area: asset; justify-self: end; }
.po-machine-row > div:nth-child(3) { grid-area: sales; text-align: left; }
.po-machine-row > div:nth-child(4) { grid-area: received; }
}
/* --- Rewards: the configuration form --------------------------------------
* One top-level card, per the brief. The dark feature surface beside the two
* stat cards is this screen's one Midnight Slate, carrying credit outstanding,
* which is the single figure the page exists to answer. */
.vp-cards {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
gap: var(--spacing-16);
align-items: stretch;
}
.vp-cards .po-lead { grid-column: auto; min-height: 0; }
@media (max-width: 900px) { .vp-cards { grid-template-columns: minmax(0, 1fr); } }
.vp-config {
margin-top: var(--section-gap-working);
display: flex;
flex-direction: column;
gap: var(--spacing-24);
}
.vp-config-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-16);
}
.vp-config-title {
margin: 0;
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
font-weight: var(--font-weight-medium);
}
.vp-config-head .hint { margin: var(--spacing-8) 0 0; }
.vp-config-actions { display: flex; justify-content: flex-start; }
.vp-config-section {
border-top: 1px solid var(--color-pewter-mist);
padding-top: var(--spacing-24);
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.vp-config-section .label { margin: 0; }
.vp-config-section .hint { margin: 0 0 var(--spacing-8); }
.vp-terminals { display: flex; flex-direction: column; }
.vp-terminal-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-8) 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.vp-terminal-row:last-child { border-bottom: none; }
/* --- Analytics -----------------------------------------------------------
* Stat cards, a row of three, each a figure with a micro tag carrying the
* qualifier. A bordered Chalk Cloud card at the nested radius, not a strip:
* these stand apart because each answers a different question. */
/* The lead card takes the wider track, the same weighting Rewards uses, so
* the dark surface reads as the page's figure rather than as one of three. */
.an-cards {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
gap: var(--spacing-16);
align-items: stretch;
}
.an-cards .po-lead { grid-column: auto; min-height: 0; }
@media (max-width: 900px) { .an-cards { grid-template-columns: minmax(0, 1fr); } }
.an-card { display: flex; flex-direction: column; gap: var(--spacing-8); }
.an-card .stat-label, .an-card .stat-figure { margin: 0; }
.an-card-tag { margin: 0; }
/* The line sits under its own hover columns: the SVG draws the series, the
* columns carry the tooltip, so one chart vocabulary serves both shapes. */
.an-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.an-cols { position: relative; z-index:var(--z-decoration); }
.an-cols .chart-col:hover, .an-cols .chart-col:focus-visible {
background: color-mix(in srgb, var(--color-frost-field) 70%, transparent);
}
.an-tabs { margin-top: var(--section-gap-working); margin-bottom: var(--spacing-16); }
.an-product-row { grid-template-columns: minmax(180px, 1.6fr) 110px minmax(120px, 1fr); }
.an-ad-row { grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) 120px; }
@media (max-width: 640px) {
.an-product-row > div:nth-child(1), .an-ad-row > div:nth-child(1) {
grid-area: name; font-weight: var(--font-weight-medium);
}
.an-product-row > div:nth-child(2) { grid-area: meta; text-align: left; }
.an-product-row > div:nth-child(2)::after { content: " units"; }
.an-product-row > div:nth-child(3) { grid-area: value; }
.an-ad-row > div:nth-child(2) { grid-area: meta; }
.an-ad-row > div:nth-child(3) { grid-area: value; }
}
/* --- Terminals: the device table and its sheet ----------------------------
* A row is the device's own control, the way a transaction row is the record's.
* The chip stays in the row because a terminal is a physical object and the
* glyph is how the eye finds one in a list of codes. */
.trm-row {
grid-template-columns: minmax(150px, 1fr) minmax(150px, 1.1fr) minmax(130px, 1fr) 110px 110px;
align-items: center;
}
.trm-ident { display: inline-flex; align-items: center; gap: var(--spacing-8); min-width: 0; }
.trm-ident .chip { width: 32px; height: 32px; }
.trm-retired-row {
grid-template-columns: minmax(150px, 1fr) minmax(150px, 1.1fr) auto;
align-items: center;
}
.trm-retired-action { text-align: right; }
.trm-sheet-code { margin: 0; }
.trm-unit {
display: flex;
align-items: center;
gap: var(--spacing-16);
padding: var(--spacing-16);
background: var(--color-frost-field);
border-radius: var(--radius-cards);
}
.trm-unit-text { display: flex; flex-direction: column; min-width: 0; }
.trm-unit-name { font-weight: var(--font-weight-medium); }
@media (max-width: 640px) {
.trm-row > div:nth-child(1) { grid-area: ident; font-weight: var(--font-weight-medium); }
.trm-row > div:nth-child(2) { grid-area: status; justify-self: end; }
.trm-row > div:nth-child(3) { grid-area: address; }
.trm-row > div:nth-child(4) { grid-area: software; text-align: right; }
.trm-row > div:nth-child(5) { grid-area: impressions; text-align: left; }
.trm-row > div:nth-child(5)::after { content: " impressions"; }
.trm-retired-row > div:nth-child(1) { grid-area: ident; font-weight: var(--font-weight-medium); }
.trm-retired-row > div:nth-child(2) { grid-area: status; }
.trm-retired-action { grid-area: action; text-align: left; }
}
/* --- The record sheet -----------------------------------------------------
* design.md: a 480px panel from the right edge, surface radius on its leading
* corners, the cookie-sheet shadow, the page dimmed beneath it. It is the one
* element in the portal that carries that shadow, because it is the one that
* floats. Full screen on a phone. */
.sheet-side {
margin: 0 0 0 auto;
height: 100dvh;
max-height: 100dvh;
width: var(--sheet-width);
max-width: 100%;
border-radius: var(--radius-surface) 0 0 var(--radius-surface);
box-shadow: var(--shadow-cookie-sheet);
padding: 0;
}
.sheet-side::backdrop { background: rgba(10, 13, 17, 0.35); }
.sheet-side-body {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
padding: var(--card-padding);
height: 100%;
overflow-y: auto;
}
.sheet-side-body .stat-figure { margin: 0; }
/* Tabs: the active one in Obsidian under a 2px Obsidian rule, the rest Steel
* Fog. A text button, so no pill. */
.tabs { display: flex; gap: var(--spacing-24); border-bottom: 1px solid var(--color-pewter-mist); }
.tab {
appearance: none;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: var(--spacing-8) 0;
font: inherit;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
cursor: pointer;
transition: color var(--duration-instant) var(--easing-instant),
border-color var(--duration-instant) var(--easing-instant);
}
.tab:hover { color: var(--color-obsidian-core); }
.kv { display: flex; flex-direction: column; }
.kv-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-8) 0;
border-bottom: 1px solid var(--color-pewter-mist);
font-size: var(--text-body-sm);
}
.kv-row:last-child { border-bottom: none; }
.kv-row > span:last-child { text-align: right; overflow-wrap: anywhere; }
@media (max-width: 640px) {
.sheet-side {
width: 100%;
height: 100dvh;
border-radius: 0;
margin: 0;
}
}
/* --- Unpublished changes -------------------------------------------------- */
.admin-draft-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
flex-wrap: wrap;
margin-bottom: var(--spacing-16);
border-left: 3px solid var(--color-tidal-teal);
}
/* --- Releases -------------------------------------------------------------
* This page shipped without a single rule of its own, so every card sat on the
* default flow: no rhythm between builds, a rollout list with no alignment,
* and the download link jammed against whatever ended above it. It is the page
* a build is pushed from, so it is worth reading at a glance.
*
* The scale is the one everything else here uses. Nothing new is introduced.
*/
.admin-release + .admin-release { margin-top: var(--spacing-16); }
.admin-release .panel-title .muted {
font-weight: 400;
margin-left: var(--spacing-8);
}
/* One row per rollout: label left, state and its control right, and the rows
* aligned to each other rather than to their own contents. */
.admin-rollout-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: var(--spacing-16);
padding: var(--spacing-8) 0;
}
.admin-rollout-row + .admin-rollout-row { border-top: 1px solid var(--color-pewter-mist); }
/* The footer carries the two actions that are about the file rather than the
* rollout, so it is separated from the body rather than continuing it. */
.release-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
flex-wrap: wrap;
margin-top: var(--spacing-24);
padding-top: var(--spacing-16);
border-top: 1px solid var(--color-pewter-mist);
}
/* A section break, not another card heading: the gap above it is what says
* the list ended. */
.admin-archived-head {
margin-top: var(--spacing-48);
padding-top: var(--spacing-24);
border-top: 1px solid var(--color-pewter-mist);
}
/* Archived builds stay legible and stop competing. Recessive by surface, not
* by opacity: half-transparent text on a white card is just low contrast. */
.admin-release[data-archived="true"] {
background: var(--color-frost-field);
box-shadow: none;
}
/* A rate list wider than its card scrolls rather than being cut off.
*
* The four columns have minimum widths that add up to about 680px plus gaps,
* so below roughly 1100px of window the Change rate and Set rate buttons went
* off the right edge of the card with nothing to say they were there. The
* columns are deliberate and worth keeping, so the list scrolls instead: the
* card keeps its shape and nothing is hidden. */
.admin-contract-list { overflow-x: auto; }
.admin-contract { min-width: 700px; }
/* Fleet overview and terminal operations. The default view is a compact
* operations list; controls expand in place, so scanning twenty terminals is
* not twenty copies of the same form. */
.admin-fleet-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: var(--spacing-24);
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-cards);
overflow: hidden;
}
.admin-fleet-summary > div {
display: grid;
gap: var(--spacing-8);
min-height: 92px;
padding: var(--spacing-16) var(--spacing-24);
border-right: 1px solid var(--color-pewter-mist);
}
.admin-fleet-summary > div:last-child { border-right: 0; }
.admin-fleet-summary .eyebrow {
color: var(--color-steel-fog);
font-size: var(--text-caption);
letter-spacing: .04em;
text-transform: uppercase;
}
.admin-fleet-summary strong { font-size: var(--text-heading); font-weight: var(--font-weight-medium); }
.admin-console-note {
display: grid;
grid-template-columns: 8px minmax(0, 1fr);
align-items: start;
gap: var(--spacing-16);
margin-bottom: var(--spacing-24);
padding: var(--spacing-16);
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-cards);
background: var(--color-frost-field);
}
.admin-console-note p { margin: 0; color: var(--color-steel-fog); }
.admin-console-note strong { color: var(--color-obsidian-core); font-weight: var(--font-weight-medium); }
.admin-terminal-list { padding: 0; overflow: hidden; }
.admin-terminal-row {
display: grid;
grid-template-columns: 112px minmax(150px, 1fr) 118px 100px minmax(150px, 1fr) minmax(150px, 1.15fr) 24px;
align-items: center;
gap: var(--spacing-16);
min-height: 64px;
padding: 12px var(--spacing-24);
}
.admin-terminal-head {
min-height: 44px;
color: var(--color-steel-fog);
background: var(--color-frost-field);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
letter-spacing: .04em;
text-transform: uppercase;
}
.admin-terminal-update{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-terminal-row small { display: block; color: var(--color-steel-fog); font-size: var(--text-caption); }
/* Two facts a terminal reports about itself, and one the Platform works out
* about it. A description list rather than more hint paragraphs: these are
* label and value pairs, and the labels are what make a wall of sentences
* scannable when there are twenty machines rather than one. */
.admin-terminal-facts {
display: grid;
align-content: start;
gap: 0;
margin: 0;
font-size: var(--text-caption);
line-height: var(--leading-caption);
}
.admin-terminal-facts > div {
display: grid;
gap: 3px;
padding: 12px 0;
border-bottom: 1px solid var(--color-pewter-mist);
}
.admin-terminal-facts > div:first-child { padding-top: 0; }
.admin-terminal-facts dt {
color: var(--color-steel-fog);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-terminal-facts dd { margin: 0; color: var(--color-obsidian-core); }
.admin-terminal-fault { font-family: var(--font-mono, monospace); }
@media (max-width: 1180px) {
.admin-terminal-head { display: none; }
.admin-terminal-row {
grid-template-columns: minmax(120px, .7fr) minmax(180px, 1fr) minmax(120px, .7fr) 24px;
grid-template-areas:
"terminal business health chevron"
"software security update chevron";
row-gap: var(--spacing-8);
min-height: 92px;
}
.admin-terminal-update { grid-area: update; }
}
@media (max-width: 720px) {
.admin-fleet-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-fleet-summary > div:nth-child(2) { border-right: 0; }
.admin-fleet-summary > div:nth-child(-n + 2) { border-bottom: 1px solid var(--color-pewter-mist); }
.admin-terminal-row {
grid-template-columns: 1fr auto 24px;
grid-template-areas:
"terminal health chevron"
"business business chevron"
"software software chevron"
"security security chevron"
"update update chevron";
gap: 5px 12px;
padding: var(--spacing-16);
}
}
/* --- Operator Portal redesign: shared additions ---------------------------
* The rail, card, tag, status, tabs and side-sheet patterns already existed
* and are reused as-is (they are shared with the Admin Console; changing
* their meaning here would silently redesign that too). What follows is the
* handful of patterns the reference introduced that this file did not have
* yet: a metrics row, a warning tone alongside the existing live/danger
* tags, and the location/machine card grids. */
.tag-warning {
background: var(--surface-warning);
color: var(--color-warning);
border-color: transparent;
}
/* design.md 13.1's tertiary button: text only, with a real hover and focus
* surface rather than nothing. Did not exist; "View all"-style row actions
* had nothing to render as. */
.link-button {
padding: 0;
border: 0;
color: var(--color-obsidian-core);
background: none;
font-weight: var(--font-weight-medium);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.link-button:hover { text-decoration-thickness: 2px; }
/* --- Metrics row (Dashboard) ----------------------------------------------
* Four summary cards, the first dark. A metric card states label, figure and
* one line of context; it is not a chart and does not compress two numbers
* into one bar. */
.metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--spacing-16);
}
.metric-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 132px;
}
.metric-card .eyebrow {
font-size: var(--text-label);
font-weight: var(--font-weight-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-steel-fog);
}
.metric-card.card-dark {
color: var(--color-chalk-cloud);
background: var(--color-obsidian-core);
}
.metric-card.card-dark .eyebrow,
.metric-card.card-dark .metric-note { color: rgba(255, 255, 255, 0.62); }
.metric-figure {
margin: var(--spacing-16) 0 0;
font-size: var(--text-display-sm);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: var(--font-weight-medium);
font-variant-numeric: tabular-nums;
}
.metric-note { margin: var(--spacing-8) 0 0; color: var(--color-steel-fog); font-size: var(--text-body-sm); }
/* --- Attention queue (Dashboard) -------------------------------------------
* A callout is one row of one thing needing a decision: a status square, the
* fact, and the one link that addresses it. Reuses .status-square rather
* than a parallel color system. */
.callout {
display: grid;
grid-template-columns: 8px minmax(0, 1fr) auto;
align-items: center;
gap: var(--spacing-16);
min-height: 58px;
padding: var(--spacing-16);
border-bottom: 1px solid var(--color-pewter-mist);
}
.callout:last-child { border-bottom: none; }
.breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-8);
margin-bottom: var(--spacing-16);
color: var(--color-steel-fog);
font-size: var(--text-body-sm);
}
.breadcrumbs a { color: var(--color-obsidian-core); text-decoration: underline; text-underline-offset: 3px; }
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--spacing-16);
margin-bottom: var(--spacing-16);
}
.section-header p { margin-top: var(--spacing-4, 4px); color: var(--color-steel-fog); }
/* The Dashboard's existing issue rows, given the shared border and
* padding rather than a parallel row component. */
.dash-issues .dash-issue { min-height: 58px; padding: var(--spacing-16); border-bottom: 1px solid var(--color-pewter-mist); }
.dash-issues .dash-issue:last-child { border-bottom: none; }
.dash-issues { margin-top: 0; gap: 0; }
.dash-operational-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(260px, .85fr);
gap: var(--spacing-16);
align-items: stretch;
}
.dash-performance { min-width: 0; }
.dash-summary-column { display: grid; grid-template-rows: 1fr 1fr; gap: var(--spacing-16); }
.dash-summary-list { border-top: 1px solid var(--color-pewter-mist); }
.dash-summary-list > div {
display: flex;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-12) 0;
border-bottom: 1px solid var(--color-pewter-mist);
color: var(--color-steel-fog);
}
.dash-summary-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-summary-list strong { color: var(--color-obsidian-core); font-weight: var(--font-weight-medium); }
.callout-main > strong, .callout-main > span { display: block; }
.callout-main > span {
margin-top: 1px;
color: var(--color-steel-fog);
font-size: var(--text-body-sm);
overflow-wrap: anywhere;
}
/* --- Location and machine cards (Locations) --------------------------------
* Same construction as .metric-grid's stat row, reused rather than a third
* pattern: a figure, a label, a hairline above it. */
.location-grid, .machine-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-16);
}
.location-card, .machine-card { display: flex; flex-direction: column; gap: var(--spacing-16); }
.location-head, .machine-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-16);
}
.location-meta, .machine-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-12);
}
.location-stat, .machine-fact { padding-top: var(--spacing-12); border-top: 1px solid var(--color-pewter-mist); }
.location-stat strong, .location-stat span,
.machine-fact strong, .machine-fact span { display: block; }
.location-stat strong, .machine-fact strong {
font-size: var(--text-heading-sm);
font-variant-numeric: tabular-nums;
}
.location-stat span, .machine-fact span { margin-top: 2px; color: var(--color-steel-fog); font-size: var(--text-caption); }
.location-unassigned-row { grid-template-columns: minmax(180px, 1fr) minmax(120px, 1fr) auto; }
.location-machine-row { grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) minmax(120px, 1fr) auto; }
.inventory-stock-row { grid-template-columns: minmax(220px, 1.4fr) minmax(100px, 1.2fr) minmax(120px, 1fr) auto auto; }
/* --- Top bar search and help (all Portal pages) ---------------------------
* Two more icon buttons beside the existing bell, same .iconbtn. */
.topbar-search {
display: none;
}
@media (min-width: 768px) {
.topbar-search {
display: flex;
align-items: center;
gap: var(--spacing-8);
min-height: 40px;
padding: 0 var(--spacing-12);
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-buttons);
color: var(--color-steel-fog);
background: var(--color-frost-field);
}
}
/* The icon-only trigger is mobile's version of the same control, not a
* second feature: exactly one of the two is ever visible. */
#nav-search-open-mobile { display: inline-grid; }
@media (min-width: 768px) { #nav-search-open-mobile { display: none; } }
.topbar-search kbd {
margin-left: var(--spacing-16, 24px);
padding: 1px 6px;
border: 1px solid var(--color-pewter-mist);
border-radius: 4px;
font-family: inherit;
font-size: var(--text-caption);
color: var(--color-steel-fog);
background: var(--color-chalk-cloud);
}
/* --- Responsive: Portal redesign pages -------------------------------------
* Below tablet width the two-column grids collapse to one column, matching
* the existing pattern used elsewhere in this file for .metric-grid-alike
* layouts rather than introducing a new breakpoint scheme. */
@media (max-width: 900px) {
.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.location-grid, .machine-grid { grid-template-columns: 1fr; }
.dash-operational-grid { grid-template-columns: 1fr; }
.dash-summary-column { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
}
@media (max-width: 560px) {
.metric-grid { grid-template-columns: 1fr; }
.location-meta, .machine-facts { grid-template-columns: repeat(3, 1fr); }
.callout { grid-template-columns: 8px minmax(0, 1fr); }
.callout > .link-button, .callout > a { grid-column: 2; justify-self: start; }
.dash-summary-column { grid-template-columns: 1fr; }
.location-unassigned-row > div:nth-child(1) { grid-area: terminal; font-weight: var(--font-weight-medium); }
.location-unassigned-row > div:nth-child(2) { grid-area: status; }
.location-unassigned-row > div:nth-child(3) { grid-area: action; align-self: center; }
.location-machine-row > div:nth-child(1) { grid-area: terminal; font-weight: var(--font-weight-medium); }
.location-machine-row > div:nth-child(2) { grid-area: name; }
.location-machine-row > div:nth-child(3) { grid-area: status; }
.location-machine-row > div:nth-child(4) { grid-area: action; align-self: center; }
.inventory-stock-row > div:nth-child(1) { grid-area: product; }
.inventory-stock-row > div:nth-child(2) { grid-area: slot; }
.inventory-stock-row > div:nth-child(3) { grid-area: state; }
.inventory-stock-row > div:nth-child(4) { grid-area: stock; }
.inventory-stock-row > div:nth-child(5) { grid-area: count; align-self: center; }
}
/* =========================================================================
* Admin Console: the Platform shell redesign.
*
* A distinct structural shell from the Portal's 240px .rail: a 64px icon-only
* command rail that expands over the workspace (not into it, nothing below
* reflows) on hover or keyboard focus, plus a contextual second column for
* the active section's own destinations. .topbar keeps its existing meaning,
* the page-level heading block; .platform-bar is the new persistent strip
* above it carrying search, environment, and the staff account.
* ========================================================================= */
.platform-shell { min-height: 100dvh; }
.platform-workspace { min-width: 0; }
.platform-workspace > main {
padding: var(--spacing-40);
}
.platform-workspace > main > .topbar h1 {
font-size: var(--text-display);
line-height: var(--leading-display);
font-weight: var(--font-weight-medium);
text-wrap: balance;
}
.command-rail {
position: fixed;
inset: 0 auto 0 0;
z-index:var(--z-rail);
width: 64px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-16);
padding: 17px 8px 12px;
overflow: hidden;
color: var(--color-chalk-cloud);
background: var(--color-midnight-slate);
border-right: 1px solid color-mix(in srgb, var(--color-chalk-cloud) 10%, var(--color-midnight-slate));
transition: width var(--duration-standard) var(--easing-standard),
box-shadow var(--duration-standard) var(--easing-standard);
}
.command-rail:hover, .command-rail:focus-within {
width: 220px;
box-shadow: 14px 0 30px rgba(10, 13, 17, 0.2);
}
.command-rail .logo { width: 28px; height: auto; align-self: flex-start; margin-left: 6px; }
.command-nav {
display: grid;
gap: 4px;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
}
.command-item {
position: relative;
width: 48px;
height: 42px;
display: flex;
align-items: center;
gap: 12px;
padding: 0 13px;
border-radius: var(--radius-inputs);
color: #89949e;
background: transparent;
white-space: nowrap;
text-decoration: none;
transition: width var(--duration-standard) var(--easing-standard),
color var(--duration-instant) var(--easing-instant),
background var(--duration-instant) var(--easing-instant);
}
.command-rail:hover .command-item, .command-rail:focus-within .command-item { width: 204px; }
.command-item:hover {
color: var(--color-chalk-cloud);
background: color-mix(in srgb, var(--color-chalk-cloud) 10%, var(--color-midnight-slate));
}
.command-item[aria-current='page'] {
color: var(--color-chalk-cloud);
background: color-mix(in srgb, var(--color-chalk-cloud) 10%, var(--color-midnight-slate));
}
.command-item[aria-current='page']::before {
content: '';
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
background: var(--color-tidal-teal);
border-radius: 0 2px 2px 0;
}
.command-item .rail-icon { flex: none; width: 21px; height: 21px; }
.command-badge { position: absolute; left: 30px; top: 9px; }
.command-label {
max-width: 0;
overflow: hidden;
opacity: 0;
transform: translateX(-4px);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-medium);
transition: max-width var(--duration-standard) var(--easing-standard),
opacity var(--duration-instant) var(--easing-instant),
transform var(--duration-standard) var(--easing-standard);
}
.command-rail:hover .command-label, .command-rail:focus-within .command-label {
max-width: 148px;
opacity: 1;
transform: none;
}
.rail-account {
align-self: flex-start;
width: 38px;
height: 38px;
margin-top: auto;
margin-left: 5px;
border: 1px solid color-mix(in srgb, var(--color-chalk-cloud) 22%, var(--color-midnight-slate));
border-radius: var(--radius-pill);
color: var(--color-chalk-cloud);
background: color-mix(in srgb, var(--color-chalk-cloud) 10%, var(--color-midnight-slate));
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
}
.context-item {
min-height: 38px;
display: flex;
align-items: center;
padding: 0 10px;
border-radius: 7px;
color: var(--color-steel-fog);
background: transparent;
text-decoration: none;
font-size: var(--text-body-sm);
}
.context-item:hover { color: var(--color-obsidian-core); background: var(--color-chalk-cloud); }
.context-item[aria-current='page'] {
color: var(--color-obsidian-core);
background: var(--color-chalk-cloud);
font-weight: var(--font-weight-medium);
box-shadow: 0 1px 1px rgba(10, 13, 17, 0.04);
}
.platform-bar {
position: sticky;
top: 0;
z-index:var(--z-sticky);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
height: 64px;
padding: 0 var(--spacing-32);
border-bottom: 1px solid var(--color-pewter-mist);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
}
.platform-bar-brand { display: none; align-items: center; gap: 8px; }
.platform-bar-brand img { height: 19px; width: auto; }
.platform-bar-brand span {
padding-left: 8px;
border-left: 1px solid var(--color-pewter-mist);
color: var(--color-steel-fog);
font-size: var(--text-caption);
}
.platform-bar-actions { display: flex; align-items: center; gap: 6px; }
.env-pill, .role-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-pill);
color: var(--color-steel-fog);
font-size: 11px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.env-pill span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-cinnabar);
}
.role-pill { text-transform: none; letter-spacing: 0; }
.platform-drawer-toggle { display: none; }
/* -- Below tablet width: the rail and context panel give way to a drawer.
* 768px matches the breakpoint the rest of this file already collapses the
* Portal's own rail at, rather than the reference's own round 820px, so the
* two products change shape at the same width. */
@media (max-width: 768px) {
.command-rail { display: none; }
.platform-workspace { padding-left: 0; }
.platform-workspace > main { padding: var(--spacing-24) var(--spacing-16); }
.platform-bar { padding: 0 var(--spacing-16); }
.platform-bar-brand { display: flex; }
.platform-drawer-toggle { display: inline-grid; }
.platform-bar-search { display: none; }
/* The environment pill stays, even here: design.md 10.1 says production
must be unmistakable on every screen, and a phone is still a screen.
The role pill gives way instead; it says less, and the account sheet
still has it. */
.role-pill { display: none; }
.platform-context-inline {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
margin-bottom: var(--spacing-24);
}
.platform-context-inline a {
padding: 6px 12px;
border: 1px solid var(--color-pewter-mist);
border-radius: var(--radius-pill);
color: var(--color-steel-fog);
font-size: var(--text-body-sm);
text-decoration: none;
}
.platform-context-inline a[aria-current='page'] {
color: var(--color-chalk-cloud);
background: var(--color-obsidian-core);
border-color: var(--color-obsidian-core);
}
}
@media (min-width: 769px) {
.platform-workspace { padding-left: calc(64px + 216px); }
.platform-context-inline { display: none; }
}
/* The mobile drawer itself: the same command-rail destinations, full label,
* as a full-screen sheet rather than the hover-expand rail there is no room
* for. Built on the existing .sheet dialog primitive. */
.drawer-nav { display: grid; gap: 2px; }
.drawer-nav a {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 0 12px;
border-radius: var(--radius-inputs);
color: var(--color-obsidian-core);
text-decoration: none;
font-size: var(--text-body);
}
.drawer-nav a:hover { background: var(--color-frost-field); }
.drawer-nav a[aria-current='page'] {
background: var(--color-frost-field);
font-weight: var(--font-weight-medium);
}
.drawer-nav .rail-icon { flex: none; color: var(--color-steel-fog); }
/* Admin overview: one live command center assembled from the evidence the
* current service owns. Queue cards are links, so their whole surface is the
* target and the page stays useful at touch sizes. */
.admin-overview-audit-row {
grid-template-columns: minmax(180px, 1fr) minmax(140px, .8fr) minmax(220px, 1.2fr) 180px;
}
@media (max-width: 1000px) {
.admin-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.admin-overview-audit-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* Admin Console: Businesses/Onboarding, Businesses/Risk, Fleet/Locations,
* Fleet/Command history, Governance/Audit log. Same .tx-row base as every
* other console table; only the column widths are new, one row per table. */
.admin-onboard-row { grid-template-columns: minmax(200px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr); }
.admin-risk-row {
grid-template-columns: minmax(200px, 1fr) 110px minmax(200px, 1fr) 120px;
align-items: center;
}
.admin-loc-row { grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) 100px 90px; }
.admin-cmd-row { grid-template-columns: minmax(200px, 1fr) minmax(140px, 1fr) 160px 170px; }
.admin-audit-row { grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) 170px; }
@media (max-width: 640px) {
.admin-onboard-row > *:nth-child(1) { grid-area: biz; }
.admin-onboard-row > *:nth-child(2) { grid-area: invite; }
.admin-onboard-row > *:nth-child(3) { grid-area: activation; }
.admin-risk-row > *:nth-child(1) { grid-area: biz; }
.admin-risk-row > *:nth-child(2) { grid-area: status; justify-self: end; }
.admin-risk-row > *:nth-child(3) { grid-area: restriction; }
.admin-risk-row > *:nth-child(4) { grid-area: act; }
.admin-risk-row > *:nth-child(4) .btn { width: 100%; }
.admin-loc-row > *:nth-child(1) { grid-area: loc; }
.admin-loc-row > *:nth-child(2) { grid-area: biz; }
.admin-loc-row > *:nth-child(3) { grid-area: machines; }
.admin-loc-row > *:nth-child(4) { grid-area: online; }
.admin-cmd-row > *:nth-child(1) { grid-area: action; }
.admin-cmd-row > *:nth-child(2) { grid-area: target; }
.admin-cmd-row > *:nth-child(3) { grid-area: staff; }
.admin-cmd-row > *:nth-child(4) { grid-area: requested; }
.admin-audit-row > *:nth-child(1) { grid-area: actor; }
.admin-audit-row > *:nth-child(2) { grid-area: action; }
.admin-audit-row > *:nth-child(3) { grid-area: target; }
.admin-audit-row > *:nth-child(4) { grid-area: when; }
}
/* Exact payout identifiers remain readable within the existing table columns. */
.payout-report-table { overflow-wrap: anywhere; }
.portal-redesign .location-metrics .location-state { font-size:18px; line-height:1.3; letter-spacing:0; }
.portal-redesign .detail-card-action { display:flex; align-items:center; justify-content:space-between; font-size:13px; padding-top:16px; border-top:1px solid #d9e2e4; }
.portal-redesign .restock-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:20px; padding:16px 0; border-top:1px solid #d9e2e4; }
.portal-redesign .restock-row p { margin:4px 0 0; }
.portal-redesign .restock-row strong { font-weight:500; }
:is(.portal-redesign,.admin-redesign) .delivery-case-list { margin:24px 0 36px; }
:is(.portal-redesign,.admin-redesign) .delivery-case-list > h2 { font-size:18px; font-weight:500; }
:is(.portal-redesign,.admin-redesign) .delivery-case-list > p { color:#5b6d72; font-size:13px; }
:is(.portal-redesign,.admin-redesign) .delivery-case-row { padding:20px 0; border-top:1px solid #d9e2e4; overflow-wrap:anywhere; }
:is(.portal-redesign,.admin-redesign) .delivery-case-row h3 { margin:0 0 8px; font-size:18px; font-weight:500; }
:is(.portal-redesign,.admin-redesign) .delivery-case-row p,:is(.portal-redesign,.admin-redesign) .delivery-case-row li { font-size:13px; }
:is(.portal-redesign,.admin-redesign) .delivery-case-row ul { padding-left:20px; }
:is(.portal-redesign,.admin-redesign) .sp-conversation { max-width:760px; margin:20px 0; }
:is(.portal-redesign,.admin-redesign) .sp-head { margin-top:20px; }
:is(.portal-redesign,.admin-redesign) .sp-head .panel-title { font-size:22px; line-height:1.2; font-weight:500; }
:is(.portal-redesign,.admin-redesign) .sp-thread { gap:0; }
:is(.portal-redesign,.admin-redesign) .sp-message { border:0; border-bottom:1px solid #d9e2e4; border-radius:0; padding:20px 0; background:transparent; }
:is(.portal-redesign,.admin-redesign) .sp-message .stat-label { font-size:13px; color:#5b6d72; margin:0 0 8px; }
:is(.portal-redesign,.admin-redesign) .sp-body { font-size:16px; line-height:1.5; }
:is(.portal-redesign,.admin-redesign) .sp-reply-form { padding-top:24px; }
:is(.portal-redesign,.admin-redesign) dialog.sheet { position:fixed; inset:0 0 0 auto; width:min(560px,100%); height:100dvh; max-height:100dvh; margin:0; border-radius:0; border:0; border-left:1px solid #d9e2e4; padding:0; }
:is(.portal-redesign,.admin-redesign) .sheet-body,:is(.portal-redesign,.admin-redesign) .sheet-side-body { padding:24px; gap:20px; height:100%; overflow-y:auto; }
@media(max-width:520px) {
.portal-redesign .restock-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
.portal-redesign .restock-row .btn { grid-column:1/-1; justify-self:start; }
}
.portal-redesign .verified-proceeds-card > .card,
.portal-redesign .verified-balance-account { background:radial-gradient(ellipse at top right,rgba(0,209,167,.12),transparent 70%),var(--color-onyx-black); color:var(--color-white); min-height:220px; padding:28px; }
.portal-redesign .verified-proceeds-card > .card .muted,
.portal-redesign .verified-balance-account .muted,
.portal-redesign .verified-balance-account .stat-label { color:rgba(255,255,255,.7); }
.portal-redesign .verified-proceeds-card > .card h2 { margin:0 0 16px; font-size:28px; font-weight:400; letter-spacing:-.03em; }
/* Scoped adaptation of Bryan's October 5 Admin export. Real staff records and permissions remain authoritative. */
body.admin-redesign {
--color-onyx-black: #0a0d11;
--color-white: #ffffff;
--color-caribbean-mint: #00d1a7;
--color-stone-mist: #eaece4;
--color-midnight-core: #1c1e22;
--color-charcoal-grey: #4a4a48;
--color-steel-gray: #8a8a88;
--surface-secondary: #f2f6f7;
--surface-strong: #e8eef0;
--line: #d9e2e4;
--text-secondary: #5b6d72;
--accent-soft: #e7f9f4;
--accent-ink: #007f69;
--ink: var(--color-onyx-black);
--canvas: var(--color-white);
--on-dark-secondary: rgba(255,255,255,.72);
--color-steel-fog: var(--text-secondary);
--color-frost-field: var(--surface-secondary);
--color-pewter-mist: var(--line);
--color-obsidian-core: var(--color-onyx-black);
--radius-cards: 8px;
--radius-pill: 6px;
--sidebar-width: 64px;
--color-midnight-slate: var(--color-onyx-black);
--font-weight-semibold: 500;
--text-small: 13px;
--text-large: 18px;
--spacing-4: 4px; --spacing-6: 6px; --spacing-10: 10px;
--spacing-12: 12px; --spacing-14: 14px; --spacing-20: 20px;
--spacing-28: 28px; --spacing-36: 36px;
--gutter: 40px;
background: var(--canvas);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.admin-redesign .platform-workspace { padding-left: 64px; }
.admin-redesign .platform-workspace > main { margin-inline:auto; padding: 36px var(--gutter) 80px; max-width: calc(1560px + var(--gutter)*2); }
.admin-redesign .platform-bar { height: 72px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: #fff; gap: 12px; }
.admin-redesign .platform-bar-search { margin-right: auto; width: 380px; min-height: 40px; justify-content: flex-start; background: var(--surface-secondary); border: 0; border-radius: 6px; font-size: 13px; }
.admin-redesign .platform-bar-search kbd { margin-left: auto; }
.admin-redesign .env-pill { color: var(--ink); background: var(--surface-secondary); border: 0; font-size: 13px; }
.admin-redesign .command-rail { background: var(--ink); color: #fff; }
.admin-redesign .command-item { color: rgba(255,255,255,.72); border-radius: 6px; }
.admin-redesign .command-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-redesign .command-item[aria-current='page'] { color: #fff; background: rgba(255,255,255,.08); }
.admin-redesign .command-item[aria-current='page'] .rail-icon { color: var(--color-caribbean-mint); }
.admin-redesign .rail-account { border-radius: 50%; }
.admin-redesign .platform-context-inline { display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.admin-redesign .context-item { border-radius: 0; padding: 12px 0; min-height: 44px; color: var(--text-secondary); background: none; }
.admin-redesign .context-item[aria-current='page'] { color: var(--ink); border-bottom: 2px solid var(--color-caribbean-mint); }
.admin-redesign .btn { border-radius: 6px; min-height: 44px; padding: 0 20px; font-weight: 500; letter-spacing: -.01em; }
.admin-redesign .btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.admin-redesign .input { min-height: 44px; border-radius: 6px; }
.admin-redesign .card { border-radius: 8px; padding: 24px; }
.admin-redesign .card-flush { padding: 0; }
.admin-redesign .card-dark { background: var(--ink); }
.admin-redesign h2, .admin-redesign .card-title { font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.admin-redesign .small, .admin-redesign .stat-label, .admin-redesign .stat-sub, .admin-redesign .metric-note { font-size: 13px; }
.admin-redesign .metric-figure, .admin-redesign .stat-figure { font-size: 28px; font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.admin-redesign .table th { text-transform: none; font-size: 13px; letter-spacing: 0; font-weight: 500; background: var(--surface-secondary); }
.admin-redesign .sheet { border-radius: 8px; max-width: min(560px,calc(100vw - 32px)); }
.admin-redesign .sheet-body { padding: 24px; gap: 20px; }
.admin-redesign .sheet-body > * { min-height: min-content; flex-shrink: 0; }
.admin-redesign .sheet-body h2 { font-size: 22px; letter-spacing: -.025em; }
.admin-redesign .sheet-side-body { padding: 24px; }
.admin-redesign .admin-operator-tools { justify-content: space-between; gap: 12px; }
.admin-redesign .admin-operator-tools input { width: 380px; max-width: 100%; }
.admin-redesign .admin-fleet-summary { border-radius: 8px; padding: 20px 24px; gap: 20px; background: #fff; }
.admin-redesign .admin-fleet-summary strong { font-size: 28px; font-weight: 400; letter-spacing: -.035em; }
.admin-redesign .admin-fleet-summary .eyebrow { font-size: 13px; text-transform: none; letter-spacing: 0; }
.admin-redesign .admin-terminal-list { padding: 0; }
.admin-redesign .admin-console-note { font-size: 13px; margin: 20px 0; }
.admin-redesign .verified-proceeds-card { margin-bottom: 20px; }
.admin-redesign .verified-proceeds-table { overflow-x: auto; }
.admin-redesign .verified-proceeds-table table { min-width: 600px; }
.admin-redesign .auth { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 100dvh; padding: 0; align-items: stretch; }
.admin-redesign .admin-auth-art { background: var(--ink); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.admin-redesign .admin-auth-brand { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; }
.admin-redesign .admin-auth-brand img { width: 36px; height: 36px; }
.admin-redesign .admin-auth-title { font-size: 52px; letter-spacing: -.045em; line-height: 1.04; }
.admin-redesign .auth-card { max-width: none; width: 100%; padding: 32px var(--gutter); margin: 0; display: grid; align-content: center; justify-items: center; }
.admin-redesign .auth-card > .logo { display: none; }
.admin-redesign .auth-card > .card { width: min(400px,100%); background: none; border: 0; padding: 0; }
.admin-redesign .auth-card h1 { font-size: 34px; font-weight: 400; letter-spacing: -.03em; }
@media(max-width:1100px) { body.admin-redesign { --gutter: 28px; } }
@media(max-width:960px) {
.admin-redesign .platform-workspace { padding-left: 0; }
.admin-redesign .command-rail { display: none; }
.admin-redesign .platform-bar-brand { display: flex; }
.admin-redesign .platform-bar-search { display: flex; width: 40px; height: 40px; padding: 0; justify-content: center; margin-left: auto; margin-right: 0; }
.admin-redesign .platform-bar-search span, .admin-redesign .platform-bar-search kbd { display: none; }
.admin-redesign .auth { grid-template-columns: minmax(0,1fr); }
.admin-redesign .admin-auth-art { display: none; }
.admin-redesign .auth-card > .logo { display: block; width: 32px; height: 32px; justify-self: start; }
}
@media(max-width:720px) {
body.admin-redesign { --gutter: 20px; }
.admin-redesign .platform-workspace > main { padding-top: 24px; }
.admin-redesign .admin-operator-tools { flex-wrap: wrap; }
.admin-redesign .admin-operator-tools input { width: 100%; max-width: none; }
.admin-redesign .callout { flex-wrap: wrap; }
.admin-redesign .env-pill { padding: 0 8px; font-size: 11px; }
.admin-redesign .platform-bar-actions { gap: 6px; }
}
.admin-redesign .admin-runtime-settings { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 20px; align-items: start; }
.admin-redesign .admin-runtime-fact { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.admin-redesign .admin-runtime-fact h3 { font-size: 16px; font-weight: 500; margin: 0; }
.admin-redesign .admin-runtime-fact p { margin: 4px 0 0; }
.admin-redesign .admin-runtime-gates { display: grid; }
.admin-redesign .admin-runtime-gates > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 12px 0; font-size: 12px; overflow-wrap: anywhere; }
.admin-redesign .admin-runtime-gates > div > span:first-child { min-width: 0; }
@media(max-width:900px) { .admin-redesign .admin-runtime-settings { grid-template-columns: minmax(0,1fr); } }
.admin-redesign main > .section { margin-top: 32px; }
.admin-redesign .section-header { margin-bottom: 16px; }
.admin-redesign .section-header p { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
.admin-redesign .admin-drill-operators { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 20px; }
.admin-redesign .admin-drill-operator { border: 1px solid var(--line); border-radius: 8px; padding: 24px; color: var(--ink); text-decoration: none; display: grid; gap: 20px; }
.admin-redesign .admin-drill-operator:hover { background: var(--surface-secondary); }
.admin-redesign .admin-drill-operator h2 { margin: 0; font-size: 16px; }
@media(max-width:720px) { .admin-redesign .admin-drill-operators { grid-template-columns: minmax(0,1fr); } }
/* The old phone chip rules must not override the supplied inline tab treatment. */
.admin-redesign .platform-context-inline a { padding: 12px 0; border: 0; border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 13px; text-decoration: none; }
.admin-redesign .platform-context-inline a[aria-current='page'] { color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--color-caribbean-mint); }
@media(max-width:960px) { .admin-redesign .platform-drawer-toggle { display: inline-grid; } }
/* Page compositions from the supplied Admin reference, bound to live records. */
.admin-redesign .admin-home-columns { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:20px; align-items:stretch; }
.admin-redesign .admin-home-columns > * { min-width:0; }
.admin-redesign .admin-home-columns .section-header { align-items:center; }
.admin-redesign .admin-home-columns h2 { font-size:16px; }
.admin-redesign .admin-large-figure { font-size:36px; letter-spacing:-.04em; line-height:1.15; margin:12px 0 6px; }
.admin-redesign .admin-chart-bars { display:flex; gap:3px; height:200px; margin-top:24px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to top,transparent 0,transparent 49px,var(--surface-secondary) 49px,var(--surface-secondary) 50px); }
.admin-redesign .admin-chart-day { flex:1; min-width:0; height:100%; }
.admin-redesign .admin-chart-day svg { height:100%; width:100%; fill:var(--color-caribbean-mint); }
.admin-redesign .admin-chart-dates { display:flex; justify-content:space-between; color:var(--text-secondary); font-size:12px; margin-top:10px; }
.admin-redesign .admin-treasury { background:var(--ink); color:#fff; background-image:radial-gradient(ellipse at bottom right,rgba(0,209,167,.16),transparent 65%); }
.admin-redesign .admin-treasury .muted { color:rgba(255,255,255,.72); }
.admin-redesign .admin-treasury .tag { background:rgba(255,255,255,.08); color:#fff; }
.admin-redesign .admin-treasury-facts { margin:24px 0; padding:0 16px; border-radius:6px; background:rgba(255,255,255,.04); }
.admin-redesign .admin-treasury-facts > div { display:flex; justify-content:space-between; gap:12px; padding:14px 0; font-size:13px; }
.admin-redesign .admin-treasury-facts > div + div { border-top:1px solid rgba(255,255,255,.1); }
.admin-redesign .admin-treasury .link-button { color:#fff; }
.admin-redesign .admin-activity-item { display:flex; gap:12px; align-items:center; padding:16px 20px; color:var(--ink); text-decoration:none; }
.admin-redesign .admin-activity-item + .admin-activity-item { border-top:1px solid var(--line); }
.admin-redesign .admin-activity-item:hover { background:var(--surface-secondary); }
.admin-redesign .admin-activity-item > div { flex:1; min-width:0; }
.admin-redesign .admin-activity-item strong { font-size:14px; font-weight:500; }
.admin-redesign .admin-activity-item p { margin:4px 0 0; }
.admin-redesign .admin-activity-icon { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--surface-secondary); color:var(--text-secondary); }
.admin-redesign .admin-overview-date { margin:0 0 8px; font-size:13px; color:var(--text-secondary); }
.admin-redesign .admin-terminal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.admin-redesign .admin-terminal-card { color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.admin-redesign .admin-terminal-card:hover { background:var(--surface-secondary); }
.admin-redesign .admin-terminal-card-head { display:flex; gap:12px; padding:24px; align-items:center; }
.admin-redesign .admin-terminal-card-head > div { flex:1; min-width:0; }
.admin-redesign .admin-terminal-card-head h2 { font-size:16px; margin:0; }
.admin-redesign .admin-terminal-card-head p { margin:4px 0 0; }
.admin-redesign .admin-terminal-card-head .status { font-size:12px; }
.admin-redesign .admin-terminal-icon { display:grid; place-items:center; width:40px; height:40px; background:var(--surface-secondary); border-radius:8px; }
.admin-redesign .admin-terminal-card-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 24px 20px; }
.admin-redesign .admin-terminal-card-stats > div { display:grid; gap:4px; }
.admin-redesign .admin-terminal-card-stats span { font-size:13px; color:var(--text-secondary); }
.admin-redesign .admin-terminal-card-stats strong { font-size:22px; font-weight:400; letter-spacing:-.025em; }
.admin-redesign .admin-terminal-card-foot { display:flex; justify-content:space-between; gap:12px; padding:14px 20px; border-top:1px solid var(--line); font-size:12px; color:var(--text-secondary); }
@media(max-width:900px) { .admin-redesign .admin-home-columns { grid-template-columns:minmax(0,1fr); } }
@media(max-width:720px) { .admin-redesign .admin-terminal-grid { grid-template-columns:minmax(0,1fr); } .admin-redesign .admin-activity-item { flex-wrap:wrap; } }
/* Auth is a full viewport split, independent of legacy centered card layout. */
.admin-redesign main.auth { width:100%; max-width:none; margin:0; padding:0; justify-items:stretch; }
.admin-redesign .auth > .admin-auth-art { width:100%; min-width:0; }
.admin-redesign .auth > .auth-card { border:0; border-radius:0; }
.admin-redesign .auth-card > .card { border:0; box-shadow:none; border-radius:0; padding:0; }
.admin-redesign .auth-card h1 { border:0; padding:0; margin:0 0 32px; }
.admin-redesign .auth-card .auth-form { gap:20px; }
.admin-redesign .admin-auth-art { background-image:radial-gradient(ellipse at bottom right,rgba(0,209,167,.12),transparent 70%); }
.admin-redesign .admin-software-card { margin-bottom:20px; }
.admin-redesign .admin-software-card h2 { font-size:22px; letter-spacing:-.025em; }
.admin-redesign .admin-software-card .section-header { margin-bottom:12px; }
.admin-redesign .admin-release-notes { font-size:14px; margin:12px 0 24px; }
.admin-redesign .admin-release-stages { display:flex; list-style:none; padding:0; gap:0; margin:20px 0; }
.admin-redesign .admin-release-stages li { flex:1; font-size:12px; color:var(--text-secondary); display:grid; gap:8px; border-top:2px solid var(--line); padding-top:8px; }
.admin-redesign .admin-release-stages .is-reached { border-color:var(--color-caribbean-mint); color:var(--ink); }
.admin-redesign .admin-software-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.admin-redesign .sheet .admin-release { border:0; padding:0; }
.admin-redesign .sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.admin-redesign .sheet-head h2 { margin:0; }
.designed-tab-list { display:flex; gap:24px; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:24px; }
.designed-tab-list button { flex:none; border:0; border-bottom:2px solid transparent; background:transparent; padding:12px 0; font:inherit; font-size:14px; color:var(--text-secondary); cursor:pointer; }
.designed-tab-list button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--color-caribbean-mint); }
.designed-tab-list button:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.admin-redesign .admin-fleet-operator-head { display:flex; gap:12px; align-items:center; }
.admin-redesign .admin-fleet-operator-head > div { flex:1; min-width:0; }
.admin-redesign .admin-fleet-operator-head p { margin:4px 0 0; }
.admin-redesign .admin-fleet-online { display:flex; gap:8px; align-items:baseline; margin:0; }
.admin-redesign .admin-fleet-online strong { font-size:32px; font-weight:400; letter-spacing:-.03em; }
.admin-redesign .admin-fleet-online span { font-size:13px; color:var(--text-secondary); }
.admin-redesign .admin-fleet-stock { display:flex; gap:12px; justify-content:space-between; font-size:13px; }
.admin-redesign .admin-fleet-stock strong { font-weight:400; }
.vp-brand-designed { display:flex; align-items:center; padding:12px 0 24px; }
.vp-brand-designed .vp-logo { width:150px; height:auto; }
.vp-advanced-filter { margin-bottom:20px; font-size:13px; }
.vp-advanced-filter summary, .vp-recorded-activity summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.vp-designed-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:8px; margin:20px 0; }
.vp-designed-stats > div { display:grid; gap:8px; padding:20px; }
.vp-designed-stats > div + div { border-left:1px solid var(--line); }
.vp-designed-stats span { font-size:13px; color:var(--text-secondary); }
.vp-designed-stats strong { font-size:28px; font-weight:400; letter-spacing:-.03em; }
.vp-config { margin-bottom:20px; }
@media(max-width:720px){ .vp-designed-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .vp-designed-stats > div { padding:16px; } .vp-designed-stats > div:nth-child(3) { border-left:0; } .vp-designed-stats > div:nth-child(n+3) { border-top:1px solid var(--line); } }
.vp-designed-program { margin-bottom:32px; }
.vp-designed-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.vp-designed-heading p { max-width:60ch; color:var(--text-secondary); font-size:14px; margin:0; }
.vp-designed-heading h2 { margin:0 0 8px; }
.vp-designed-heading .vp-config-actions { flex-wrap:wrap; justify-content:flex-end; margin:0; gap:12px; }
.vp-designed-heading .status { font-size:12px; }
.vp-designed-columns { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:20px; align-items:start; margin-top:32px; }
.vp-designed-columns > * { min-width:0; }
.vp-designed-columns .section-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.vp-designed-columns .section-header h2 { margin:0 0 4px; }
.vp-designed-columns .section-header p { margin:0; }
@media(max-width:720px) {
body.admin-redesign .ui-vendpass .section-header { flex-direction:column; align-items:stretch; gap:16px; }
}
.vp-designed-aside { display:grid; gap:20px; }
.vp-designed-aside h2 { font-size:16px; margin:0 0 16px; }
.vp-designed-aside p { font-size:14px; color:var(--text-secondary); }
.vp-rule { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); font-size:13px; }
.vp-rule span { color:var(--text-secondary); }
.vp-rule strong { font-weight:400; text-align:right; }
.vp-designed-activity { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.vp-activity-row { display:flex; align-items:center; gap:12px; padding:16px 20px; font-size:14px; }
.vp-activity-row + .vp-activity-row { border-top:1px solid var(--line); }
.vp-activity-row > div { flex:1; min-width:0; }
.vp-activity-row strong { font-weight:500; }
.vp-activity-row p { margin:4px 0 0; }
.vp-activity-mark { display:grid; place-items:center; border-radius:50%; background:var(--surface-secondary); width:36px; height:36px; flex:none; }
.vp-activity-empty { padding:32px 20px; font-size:14px; color:var(--text-secondary); }
@media(max-width:900px){ .vp-designed-columns { grid-template-columns:minmax(0,1fr); } .vp-designed-heading { align-items:flex-start; flex-direction:column; } }
.admin-redesign .admin-support-ticket { display:flex; gap:16px; align-items:center; padding:20px 24px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.admin-redesign .admin-support-ticket:last-child { border-bottom:0; }
.admin-redesign .admin-support-ticket:hover { background:var(--surface-secondary); }
.admin-redesign .admin-support-copy { display:grid; gap:4px; flex:1; min-width:0; }
.admin-redesign .admin-support-copy strong { font-size:16px; font-weight:500; }
.admin-redesign .admin-audit-day { margin:28px 0; }
.admin-redesign .admin-audit-day h2 { font-size:13px; color:var(--text-secondary); }
.admin-redesign .admin-audit-entry { border-bottom:1px solid var(--line); }
.admin-redesign .admin-audit-entry:last-child { border-bottom:0; }
.admin-redesign .admin-audit-entry summary { display:flex; align-items:center; gap:16px; padding:20px 24px; cursor:pointer; }
.admin-redesign .admin-audit-entry summary > span:nth-child(2) { display:grid; gap:4px; flex:1; min-width:0; }
.admin-redesign .admin-audit-entry strong { font-size:16px; font-weight:500; }
.admin-redesign .admin-audit-entry dl { padding:0 24px 24px 80px; overflow-wrap:anywhere; }
@media(max-width:600px) { .admin-redesign .admin-support-ticket { flex-wrap:wrap; padding:16px; } .admin-redesign .admin-support-copy { flex-basis:calc(100% - 64px); } .admin-redesign .admin-audit-entry summary { padding:16px; } .admin-redesign .admin-audit-entry dl { padding:0 16px 16px; } }
.admin-redesign .admin-campaign-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.admin-redesign .admin-campaign-heading h2 { margin:0; }
.admin-redesign .sheet .card { border:0; padding:0; box-shadow:none; }
.admin-redesign .sheet .field { margin:16px 0; }
.admin-redesign .verified-balance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:20px; margin:24px 0; }
.admin-redesign .verified-balance-figure { font-size:28px; line-height:1.1; letter-spacing:-.035em; margin:16px 0; overflow-wrap:anywhere; }
.admin-redesign .verified-balance-figure span { font-size:16px; letter-spacing:0; }
.admin-redesign .verified-proceeds-card > details { margin:24px 0; }
.admin-redesign .admin-sales-chart { margin:28px 0; }
.admin-redesign .admin-home-columns .admin-sales-chart { margin:0; }
.admin-redesign .admin-sales-chart svg { width:100%; height:auto; display:block; }
/* Settings has one visible tab panel. A hundred-row navigation span creates
empty grid gaps, and long runtime identifiers need to wrap on phones. */
.admin-redesign #admin-settings > .subnav { grid-row:1; min-width:0; }
.admin-redesign #admin-settings > [role="tabpanel"] { grid-row:1; grid-column:2; min-width:0; }
.admin-redesign #admin-settings .trow-main { min-width:0; }
.admin-redesign #admin-settings .trow-main .strong { overflow-wrap:anywhere; }
@media (max-width:1100px) {
.admin-redesign #admin-settings > .subnav { grid-row:1; grid-column:1; }
.admin-redesign #admin-settings > [role="tabpanel"] { grid-row:2; grid-column:1; }
}
.admin-redesign .admin-sales-chart svg rect { fill:var(--color-caribbean-mint); }
.admin-redesign .admin-sales-chart .section-header,.admin-redesign .admin-software-card .section-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.admin-redesign .admin-sales-chart .admin-chart-total { font-size:34px; line-height:1.15; margin:20px 0; letter-spacing:-.035em; }
.admin-redesign .admin-home-columns .admin-empty-activity { min-height:0; }
.admin-redesign .admin-audit-entry summary > svg { flex:none; }
.admin-redesign .admin-activity-list .empty { min-height:0; padding:24px; }
.admin-redesign .admin-sales-tools { display:flex; align-items:center; gap:12px; justify-content:space-between; margin:0 0 16px; }
.admin-redesign .admin-sales-tools .input { width:min(420px,100%); }
.admin-redesign .admin-sales-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 28px; }
.admin-redesign .admin-sales-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; border-bottom:1px solid var(--line); padding:0 0 24px; margin:0 0 12px; }
.admin-redesign .admin-sales-metrics > div { display:grid; gap:8px; }
.admin-redesign .admin-sales-metrics span { color:var(--text-secondary); font-size:13px; }
.admin-redesign .admin-sales-metrics strong { font-size:34px; font-weight:400; line-height:1.1; letter-spacing:-.03em; }
@media(max-width:600px) {
.admin-redesign .admin-sales-tools { flex-wrap:wrap; }
.admin-redesign .admin-sales-tools .input { width:100%; }
.admin-redesign .admin-sales-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.admin-redesign .admin-sales-metrics strong { font-size:28px; }
}
.admin-redesign .admin-setting { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:52px; border-bottom:1px solid var(--line); cursor:pointer; }
.admin-redesign .admin-setting > span { order:0; }
.admin-redesign .admin-setting > input[type=checkbox] { order:1; flex:none; appearance:none; width:36px; height:20px; border:0; border-radius:999px; background:var(--color-steel-gray); position:relative; cursor:pointer; }
.admin-redesign .admin-setting > input[type=checkbox]::after { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--color-white); top:2px; left:2px; }
.admin-redesign .admin-setting > input[type=checkbox]:checked { background:var(--color-caribbean-mint); }
.admin-redesign .admin-setting > input[type=checkbox]:checked::after { left:18px; }
.admin-redesign .admin-setting > input[type=checkbox]:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.admin-redesign .admin-setting > input[type=checkbox]:disabled { opacity:.5; cursor:default; }
/* Campaign additions retain the supplied pane/card rhythm and detail sheet. */
.admin-redesign #admin-advertising .pane-body > .section-head { gap: 20px; }
.admin-redesign #admin-advertising .section-head > div { display: grid; gap: 6px; }
.admin-redesign #admin-advertising .ad-offer-card .ad-img { object-fit: cover; }
.admin-redesign #admin-advertising .ad-offer-card .card-top { align-items: flex-start; gap: 16px; }
.admin-redesign #admin-advertising .ad-offer-card .card-top .grow { min-width: 0; }
.admin-redesign #admin-advertising .ad-offer-card .status { flex-shrink: 0; }
.admin-redesign #admin-advertising .ad-offer-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.admin-redesign #admin-advertising .ad-offer-metrics > div { display: grid; gap: 4px; }
.admin-redesign #admin-advertising .ad-offer-metrics strong { font-size: 22px; font-weight: 500; line-height: 1.2; }
.admin-redesign #admin-advertising .ad-offer-card .camp-body > .btn { justify-self: start; }
.admin-redesign #admin-advertising .tabs { overflow-y: hidden; }
@media(max-width:480px) {
.admin-redesign .platform-bar { gap: 2px; padding-inline:8px; }
.admin-redesign .platform-bar-brand { gap:4px; }
.admin-redesign .platform-bar-brand > span { padding-left:4px; }
.admin-redesign .platform-bar-actions { gap:4px; }
.admin-redesign #staff-system-open { padding-inline:4px; letter-spacing:0; }
}
/* Receiving configuration uses the approved stylesheet, never CSP-blocked inline styles. */
.admin-redesign .receiving-setup .field{margin:16px 0}.admin-redesign .receiving-setup .input{width:100%;box-sizing:border-box}.admin-redesign .receiving-setup textarea{resize:vertical;overflow-wrap:anywhere}.admin-redesign .receiving-address{overflow-wrap:anywhere}.admin-redesign .receiving-setup .columns{align-items:start}.admin-redesign .receiving-actions{display:flex;gap:12px;flex-wrap:wrap}
/* Page links share the supplied workspace tab size while retaining link semantics. */
body.admin-redesign .platform-context-inline { gap:24px; flex-wrap:nowrap; overflow-x:auto; }
body.admin-redesign .platform-context-inline a { display:flex; align-items:center; flex:none; font-size:16px; line-height:1.3; padding:12px 0; min-height:44px; box-sizing:border-box; border-bottom:2px solid transparent; }
body.admin-redesign .platform-context-inline a[aria-current='page'] { border-bottom:2px solid var(--color-caribbean-mint); }
@media(max-width:960px) {
body.admin-redesign .platform-bar-search { align-items:center; justify-content:center; min-width:44px; min-height:44px; }
body.admin-redesign .platform-bar-search > svg { align-self:center; }
body.admin-redesign .platform-bar-actions .btn-icon,body.admin-redesign .platform-bar-brand .iconbtn { min-width:44px; min-height:44px; }
body.admin-redesign .env-pill { font-size:12px; }
}
body.admin-redesign .ui-runtime-capabilities { margin-top:24px; }
body.admin-redesign .ui-runtime-capabilities summary { display:flex; justify-content:space-between; align-items:center; min-height:44px; gap:12px; list-style:none; cursor:pointer; font-weight:500; }
body.admin-redesign .ui-runtime-capabilities summary::-webkit-details-marker { display:none; }
body.admin-redesign .ui-runtime-capabilities[open] summary>svg { transform:rotate(180deg); }
body.admin-redesign .ui-runtime-capabilities .trow-main { display:grid; gap:4px; min-width:0; }
body.admin-redesign .ui-runtime-capabilities .mono { overflow-wrap:anywhere; }
/* Matching header/cell tracks are scoped to each record list. */
body.admin-redesign :is(.rows--onboarding,.rows--locations,.rows--deletions,.rows--rates,.rows--content) .row { display:grid; align-items:center; gap:16px; }
body.admin-redesign :is(.rows--onboarding,.rows--locations,.rows--deletions,.rows--rates,.rows--content) .row>* { min-width:0; overflow-wrap:anywhere; }
body.admin-redesign .rows--onboarding .row { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.admin-redesign .rows--locations .row { grid-template-columns:minmax(0,3fr) minmax(0,2fr) 100px 100px; }
body.admin-redesign .rows--deletions .row { grid-template-columns:minmax(0,2fr) minmax(0,2fr) 160px auto; }
body.admin-redesign .rows--rates .row { grid-template-columns:minmax(0,3fr) 200px 160px auto; }
body.admin-redesign .rows--rates .admin-contract-history { grid-column:1/-1; }
body.admin-redesign .rows--content .row { grid-template-columns:32px minmax(0,3fr) 140px 80px 90px 110px minmax(0,2fr); }
body.admin-redesign #admin-advertising-panel-2 .section { margin-top:24px; }
@media(max-width:720px) {
body.admin-redesign .platform-workspace>main { min-width:0; }
body.admin-redesign :is(.rows--onboarding,.rows--locations,.rows--deletions,.rows--rates,.rows--content) .row { grid-template-columns:minmax(0,1fr); }
body.admin-redesign :is(.rows--onboarding,.rows--locations,.rows--deletions,.rows--rates,.rows--content) .row.head { display:none; }
body.admin-redesign :is(.rows--onboarding,.rows--locations,.rows--deletions,.rows--rates,.rows--content) [data-label]::before { content:attr(data-label); display:block; font-size:13px; color:var(--text-secondary); margin-bottom:4px; }
body.admin-redesign .rows--rates .row-actions .btn,body.admin-redesign .rows--deletions .btn { width:100%; }
}
.admin-redesign .admin-storage .figs { margin-bottom:24px; }
.admin-redesign .sheet-head .iconbtn,.admin-redesign [data-audit-copy] { min-width:44px; min-height:44px; }
.admin-redesign .ui-admin-audit .toolbar { align-items:end; gap:12px; margin-bottom:20px; }
.admin-redesign .ui-admin-audit .kv dd { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; overflow-wrap:anywhere; }
.admin-redesign .ui-admin-audit .kv-row { grid-template-columns:120px minmax(0,1fr); }
@media(max-width:720px) { .admin-redesign .ui-admin-audit .kv-row { grid-template-columns:minmax(0,1fr); gap:8px; } }
.admin-redesign .receiving-request-section { margin:24px 0; }
.admin-redesign .receiving-request-section [data-receiving-requests-list] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.admin-redesign .receiving-request .kv-row { grid-template-columns:100px minmax(0,1fr); }
.admin-redesign .receiving-request form { display:grid; gap:12px; }
.admin-redesign .receiving-request .input { width:100%; min-width:0; }
@media(max-width:720px) { .admin-redesign .receiving-request-section [data-receiving-requests-list] { grid-template-columns:minmax(0,1fr); } }
.admin-redesign .receiving-request details>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; cursor:pointer; }
.admin-redesign .receiving-request details>summary::-webkit-details-marker { display:none; }
.admin-redesign .receiving-request-section .section-header { gap:16px; flex-wrap:wrap; }
.admin-redesign .receiving-advanced>summary { padding:16px 0; cursor:pointer; }
/* Software uses the supplied release cards and the shared file-control anatomy. */
.admin-redesign .ui-admin-software .ui-file-input { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.admin-redesign .ui-admin-software .ui-file-input:focus-visible+label { outline:2px solid var(--accent-ink); outline-offset:3px; }
.admin-redesign .ui-admin-software #release-file-name { display:block; overflow-wrap:anywhere; margin-top:8px; }
.admin-redesign .ui-admin-software progress { width:100%; accent-color:var(--color-caribbean-mint); }
.admin-redesign .ui-admin-software progress[hidden] { display:none; }
.admin-redesign .ui-admin-software .release-foot { flex-wrap:wrap; }
.admin-redesign .ui-admin-software .admin-release .form-actions { flex-wrap:wrap; gap:12px; }
.admin-redesign .ui-admin-software .software-cohort { display:block; margin-top:4px; }
.admin-redesign .ui-admin-software .software-evidence { overflow-wrap:anywhere; }
.admin-redesign .ui-admin-software progress { appearance:none; height:6px; border:0; border-radius:4px; background:var(--surface-secondary); overflow:hidden; }
.admin-redesign .ui-admin-software progress::-webkit-progress-bar { background:var(--surface-secondary); border-radius:4px; }
.admin-redesign .ui-admin-software progress::-webkit-progress-value { background:var(--color-caribbean-mint); border-radius:4px; }
.admin-redesign .ui-admin-software progress::-moz-progress-bar { background:var(--color-caribbean-mint); border-radius:4px; }
@media(prefers-reduced-motion:no-preference) { .admin-redesign .ui-admin-software progress::-webkit-progress-value { transition:width var(--motion-slow) var(--ease-out); } }
@media(max-width:720px) { .admin-redesign .ui-admin-software .admin-rollout-row { grid-template-columns:minmax(0,1fr) auto; } .admin-redesign .ui-admin-software .admin-rollout-row>span:first-child { grid-column:1/-1; } }
.admin-redesign .staff-system-open { min-height:44px; cursor:pointer; font-family:inherit; }
.admin-redesign .staff-system-open[data-system-state=stale] { outline:1px solid var(--line); }
.admin-redesign #staff-system-sheet .trow { align-items:flex-start; gap:16px; }
.admin-redesign #staff-system-sheet .trow-main { min-width:0; }
@media(max-width:720px) { .admin-redesign #staff-system-sheet .trow { flex-wrap:wrap; } }
.admin-redesign .staff-system-open[data-system-state=attention]>span { background:var(--error-ink); }
.admin-redesign .staff-system-open[data-system-state=incomplete]>span,.admin-redesign .staff-system-open[data-system-state=stale]>span { background:var(--text-secondary); }
.admin-redesign #staff-system-sheet #staff-system-refresh { min-height:44px; flex:none; }
.admin-redesign .admin-operator-tools .field-search { position:relative; width:min(380px,100%); }
.admin-redesign .admin-operator-tools .field-search>.icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-secondary); pointer-events:none; }
.admin-redesign .admin-operator-tools .field-search .input { width:100%; min-height:44px; padding-left:44px; }
.admin-redesign .admin-internal-operators { margin-top:24px; }
.admin-redesign .admin-operator-tools .field-search { flex:0 0 auto; height:44px; }
.admin-redesign .admin-operator-tools { margin-bottom:16px; }
.admin-redesign .ui-staff-vendpass .field-search { display:block; position:relative; width:min(380px,100%); margin:24px 0 16px; }
.admin-redesign .ui-staff-vendpass .field-search>.icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-secondary); }
.admin-redesign .ui-staff-vendpass .field-search .input { padding-left:44px; min-height:44px; }
.admin-redesign .vp-program-list { max-height:480px; overflow:auto; border:1px solid var(--line); border-radius:8px; }
.admin-redesign .vp-program-list .trow[hidden] { display:none; }
.admin-redesign .vp-program-list .trow { text-decoration:none; min-height:64px; padding:16px; }
@media(max-width:720px) { .admin-redesign .vp-program-list { max-height:440px; } .admin-redesign .vp-program-list .trow { flex-wrap:wrap; } }
.admin-redesign .operator-activity { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--text-secondary); margin:0 0 16px; }
.admin-redesign .admin-operator-tools .operator-sort { flex:0 0 auto; }
.admin-redesign .admin-operator-tools .operator-sort select { width:220px; min-height:44px; }
@media(max-width:720px){ .admin-redesign .admin-operator-tools .operator-sort { width:100%; } .admin-redesign .admin-operator-tools .operator-sort select { width:100%; } }
.admin-redesign .ui-admin-fleet .figs + .toolbar { margin-top:24px; margin-bottom:24px; }
.admin-redesign .ui-admin-fleet > .section { margin-top:32px; }
.admin-redesign .admin-advertising-choice { border:0; padding:0; margin:0; }
.admin-redesign #ms-msg .status { white-space:normal; align-items:flex-start; }
.admin-redesign .admin-advertising-choice input[type=radio] { flex:none; width:20px; height:20px; accent-color:var(--primary); order:1; }
.admin-redesign .admin-terminal-head { text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; background:var(--surface-secondary); }
@media(max-width:720px){ .admin-redesign .admin-terminal-row [data-label]::before { content:attr(data-label); display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px; } .admin-redesign .admin-terminal-row > .status { display:block; } .admin-redesign .admin-terminal-update { white-space:normal; } }
.admin-redesign .fleet-service-note { margin:24px 0; }
.admin-redesign .admin-terminal-facts dt { text-transform:none; letter-spacing:0; font-size:13px; }
body.admin-redesign .rows--rates .row > [role=cell] { grid-area:auto; }
@media(max-width:720px){ body.admin-redesign .rows--rates [data-label]::before { text-transform:none; letter-spacing:normal; font-weight:400; line-height:1.4; } body.admin-redesign .rows--rates .row-actions { flex-wrap:wrap; gap:8px; } body.admin-redesign .rows--rates .row-actions::before { flex-basis:100%; } }
.admin-redesign .ad-agreement-note { margin-top:16px; }
body.admin-redesign .rows--rates .admin-contract-rate { align-items:flex-end; }
@media(max-width:720px){ body.admin-redesign .rows--rates .admin-contract-rate { align-items:flex-start; } }
.admin-redesign .cre-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); gap:8px; margin-top:12px; }
.admin-redesign .cre-actions .btn { width:100%; min-width:0; min-height:44px; font-size:13px; padding:0 4px; }
.admin-redesign .creative-order-controls { display:flex; gap:8px; margin-top:12px; }
.admin-redesign .creative-order-controls .btn { width:44px; min-width:44px; height:44px; min-height:44px; padding:0; }
.admin-redesign .creative-order-controls [data-move=up] .icon { transform:rotate(180deg); }
.admin-redesign :is(#media-sheet,#edit-sheet) .ui-file-input { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.admin-redesign :is(#media-sheet,#edit-sheet) .ui-file-input:focus-visible+label { outline:2px solid var(--accent-ink); outline-offset:3px; }
.admin-redesign :is(#media-sheet,#edit-sheet) .ui-file-input+label { margin-right:12px; }
body.admin-redesign .command-item .command-badge { left:auto; top:6px; right:6px; min-width:16px; width:auto; height:16px; padding:0 3px; border-radius:999px; background:var(--accent-ink); color:white; font-size:11px; line-height:16px; text-align:center; box-shadow:none; }
body.admin-redesign .drawer-nav [data-support-nav] .command-badge { position:static; width:auto; padding:0 3px; box-shadow:none; margin-left:auto; min-width:16px; height:16px; font-size:11px; line-height:16px; color:white; background:var(--accent-ink); }
.admin-redesign .fleet-activity { display:flex; flex-wrap:wrap; gap:4px 20px; padding:8px 0; min-width:0; }
.admin-redesign .admin-terminal-row > .fleet-activity, .admin-redesign .trow-f > .fleet-activity { grid-column:1/-1; }
.admin-redesign .fleet-activity time { white-space:normal; }
.admin-redesign #fleet-live-sample { margin:12px 0 24px; }
.admin-redesign #fleet-live-anchor { display:none; }
.admin-redesign .att .opchip { max-width:180px; flex-shrink:0; }
.admin-redesign .att .opchip > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.admin-redesign .att.att-with-operator { grid-template-columns:auto minmax(0,1fr) auto auto; }
@media(max-width:720px) { body.admin-redesign .att.att-with-operator { grid-template-columns:40px minmax(0,1fr) auto; gap:8px 12px; } .admin-redesign .att-with-operator .att-ic { grid-column:1; grid-row:1/3; } .admin-redesign .att-with-operator .att-main { grid-column:2/4; grid-row:1; } .admin-redesign .att-with-operator .opchip { grid-column:2; grid-row:2; min-width:0; max-width:100%; } .admin-redesign .att-with-operator .att-go { grid-column:3; grid-row:2; } }
.admin-redesign #admin-page-live { display:block; margin-top:8px; }
.admin-redesign #admin-page-live [data-state=stale] { color:var(--error-ink); }
body.admin-redesign .bh-figure.bh-figure--na { font-size:28px; }
body.admin-redesign .bh-figure--na .status { color:inherit; font-size:16px; letter-spacing:normal; }
.admin-redesign .treasury-state-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.admin-redesign .treasury-readiness { display:grid; gap:8px; margin:16px 0; font-size:14px; }
.admin-redesign .treasury-readiness > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; }
body.admin-redesign .bh-figure.ui-balance-empty { font-size:28px; }
.admin-redesign #treasury-content > .bal-hero { margin-bottom:24px; }
.admin-redesign .delivery-case-items { display:grid; gap:12px; padding-left:20px; }
.admin-redesign .delivery-case-items .btn { display:block; margin-top:8px; }
.admin-redesign [data-delivery-case] .detail-settings { margin-top:16px; }
/* Existing converted component rules, moved from the legacy stylesheet. */
.admin-media-thumb-img{ width: 100%; height: 100%; object-fit: cover; }
.admin-media-filename{ font-size: var(--text-caption); overflow-wrap: anywhere; }
.admin-contract-name{ font-weight: var(--font-weight-medium); }
.admin-rate-share{ display: flex; align-items: center; gap: var(--spacing-8); }
.admin-rate-share .input{ width: 96px; }
.admin-rate-preview{
font-weight: var(--font-weight-medium);
min-height: 1.2em;
}
.admin-content-name{ min-width: 0; display: flex; flex-direction: column; }
.admin-content-label{ overflow-wrap: anywhere; font-weight: var(--font-weight-medium); }
.admin-content-row.is-inuse .admin-content-label{ color: var(--color-steel-fog); font-weight: var(--font-weight-regular); }
.content-pick{ accent-color: var(--color-tidal-teal); }
/* This paired content header keeps its existing spacing over the shared toolbar. */
.admin-content-head, .screen-head.admin-content-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
}
.admin-shuffle{
display: flex;
align-items: center;
gap: var(--spacing-8);
font-size: var(--text-body-sm);
font-weight: var(--font-weight-medium);
}
.admin-shuffle input[type="checkbox"]{ accent-color: var(--color-tidal-teal); }@media (max-width: 640px){
.admin-contract-name{ grid-area: name; font-weight: var(--font-weight-medium); }
.admin-contract-gross{ grid-area: gross; }
.admin-contract-gross::before{
display: block;
margin-bottom: 4px;
font-size: var(--text-micro);
line-height: var(--leading-micro);
letter-spacing: var(--tracking-micro);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--color-steel-fog);
}
.admin-contract-gross::before{ content: "Advertiser pays"; }
.admin-content-row .admin-content-name{ grid-area: name; }}
/* Existing converted component rules, moved from the legacy stylesheet. */
.admin-del-name a{
color: var(--color-obsidian-core);
font-weight: var(--font-weight-medium);
}
.admin-del-email{ overflow-wrap: anywhere; }@media (max-width: 640px){
.admin-del-name{ grid-area: name; }
.admin-del-email{ grid-area: email; overflow-wrap: anywhere; }
.admin-del-when{ grid-area: when; }
.admin-del-actions{ grid-area: act; }
.admin-del-actions .btn{ width: 100%; }
.admin-del-name{ grid-area: dname; }
.admin-del-when{ grid-area: dwhen; text-align: right; }
.admin-del-email{ grid-area: demail; }
.admin-del-actions{ grid-area: dact; }
.admin-del-actions .btn{ width: 100%; }}
.admin-terminal{ border-top: 1px solid var(--color-pewter-mist); }
.admin-terminal:first-of-type{ border-top: 0; }
.admin-terminal summary{
cursor: pointer;
list-style: none;
transition: background var(--duration-instant) var(--easing-instant);
}
.admin-terminal summary::-webkit-details-marker{ display: none; }
.admin-terminal summary:hover{ background: var(--color-frost-field); }
.admin-terminal[open] summary{ background: var(--color-frost-field); }
.admin-terminal-code{ font-weight: var(--font-weight-medium); }
.admin-terminal-business{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-terminal-scheme{
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-steel-fog);
}
.admin-terminal-chevron{ display: grid; place-items: center; transition: transform var(--duration-standard) var(--easing-standard); }
.admin-terminal[open] .admin-terminal-chevron{ transform: rotate(180deg); }
.admin-terminal-editor{
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
gap: var(--spacing-32);
padding: var(--spacing-24);
border-top: 1px solid var(--color-pewter-mist);
}
.admin-terminal-controls{ display: grid; gap: var(--spacing-16); }@media (max-width: 1180px){
.admin-terminal:first-of-type{ border-top: 0; }
.admin-terminal-code{ grid-area: terminal; }
.admin-terminal-business{ grid-area: business; }
.admin-terminal-row > .status:not(.admin-terminal-scheme){ grid-area: health; }
.admin-terminal-software{ grid-area: software; }
.admin-terminal-scheme{ grid-area: security; }
.admin-terminal-chevron{ grid-area: chevron; }}@media (max-width: 720px){
.admin-terminal-editor{ grid-template-columns: 1fr; padding: var(--spacing-16); }
.admin-terminal-controls .form-actions{ align-items: stretch; }
.admin-terminal-controls .form-actions .btn{ width: 100%; }}
/* Deliberate expansion reserves the rail width; hover never covers the task. */
@media (min-width:961px) {
body.admin-redesign .command-rail { width:64px; background:var(--ink); box-shadow:none; transition:none; }
body.admin-redesign .command-rail .command-item { width:48px; min-height:44px; flex:none; }
body.admin-redesign .command-rail .command-label { max-width:0; opacity:0; transform:none; transition:none; }
body.admin-redesign .command-nav { align-content:start; flex:1; min-height:0; align-self:flex-start; }
body.admin-redesign .rail-account { width:44px; height:44px; margin-left:1px; flex:none; }
body.admin-redesign .command-rail-toggle { border:0; font:inherit; cursor:pointer; text-align:left; }
body.admin-redesign.admin-rail-expanded .command-rail { width:220px; }
body.admin-redesign.admin-rail-expanded .platform-workspace { padding-left:220px; }
body.admin-redesign.admin-rail-expanded .command-rail .command-item { width:204px; }
body.admin-redesign.admin-rail-expanded .command-rail .command-label { max-width:148px; opacity:1; }
body.admin-redesign .command-rail-toggle:focus-visible { outline:2px solid var(--color-caribbean-mint); outline-offset:-2px; }
}
body.admin-redesign .context-item { position:relative; }
body.admin-redesign .context-item[aria-current='page'] { border-bottom-color:transparent; }
body.admin-redesign .context-item::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--color-caribbean-mint); transform:scaleX(0); transform-origin:left; }
body.admin-redesign .context-item[aria-current='page']::after { transform:scaleX(1); }
@media(prefers-reduced-motion:no-preference) {
body.admin-redesign .command-label { transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-base) var(--ease-out); }
body.admin-redesign .context-item::after { transition:transform var(--motion-base) var(--ease-out); }
body.admin-redesign .stages :is(.sdone,.scur) > span[aria-hidden=true] { transform-origin:left; animation:admin-stage-fill var(--motion-slow) var(--ease-out); }
@starting-style { body.admin-redesign .context-item[aria-current='page']::after { transform:scaleX(0); } }
@keyframes admin-stage-fill { from { transform:scaleX(0); } }
}
@media(prefers-reduced-motion:reduce) {
body.admin-redesign :is(.command-rail,.command-label,.context-item,.stages span) { transition:none; animation:none; }
body.admin-redesign .command-rail::before,body.admin-redesign .context-item::after { transition:none; }
}
/* Money engine panels (src/engine/control.ts): Overview attention, network numbers and systems; Money switches and five buckets. */
body.admin-redesign .engine-overview { display: grid; gap: 16px; margin-bottom: 24px; }
body.admin-redesign .engine-kv .kv-row { display: grid; grid-template-columns: minmax(140px, .35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
body.admin-redesign .engine-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; text-align: left; }
body.admin-redesign .engine-attentions { display: grid; gap: 8px; }
body.admin-redesign .engine-attention { display: block; padding: 10px 12px; border: 1px solid var(--line, #dde2e5); border-radius: 6px; color: inherit; text-decoration: none; }
body.admin-redesign .engine-attention:hover { border-color: currentColor; }
body.admin-redesign .engine-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
body.admin-redesign .engine-figs .fig { min-width: 0; }
body.admin-redesign .engine-systems { display: grid; gap: 0; }
body.admin-redesign .engine-system { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #dde2e5); }
body.admin-redesign .engine-system:last-child { border-bottom: 0; }
body.admin-redesign .engine-system .muted { grid-column: 1 / -1; }
body.admin-redesign .engine-switches { display: grid; gap: 12px; }
body.admin-redesign .engine-switch { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line, #dde2e5); border-radius: 6px; }
body.admin-redesign .engine-switch-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
body.admin-redesign .engine-switch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.admin-redesign .engine-switch-row .input { flex: 1 1 16rem; min-width: 0; }
@media (max-width: 600px) { body.admin-redesign .engine-kv .kv-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
body.admin-redesign .engine-pipes { display: grid; }
body.admin-redesign .engine-pipe { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(0, 2fr); gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line, #dde2e5); }
body.admin-redesign .engine-pipe:last-child { border-bottom: 0; }
body.admin-redesign .engine-pipe-name { display: grid; min-width: 0; }
body.admin-redesign .engine-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.admin-redesign .engine-step { font-size: 13px; padding: 3px 8px; border: 1px solid var(--line, #dde2e5); border-radius: 6px; color: var(--text-secondary, #4f5a63); }
body.admin-redesign .engine-step.is-done { border-color: transparent; background: var(--teal-soft, #e3f3f1); color: var(--teal-ink, #0d5e56); }
body.admin-redesign .engine-step.is-failed { border-color: transparent; background: #fbe7e5; color: #a3312a; }
@media (max-width: 700px) { body.admin-redesign .engine-pipe { grid-template-columns: minmax(0, 1fr); } }
/* Advertising campaigns (src/engine/advertising.ts). */
body.admin-redesign .engine-campaigns { display: grid; gap: 16px; }
body.admin-redesign .engine-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 16px; }
body.admin-redesign .engine-form-grid .field { display: grid; gap: 6px; margin: 0; }
body.admin-redesign .engine-campaign-form { display: grid; gap: 16px; }
body.admin-redesign .engine-campaign-form .btn { justify-self: start; }
body.admin-redesign .engine-terminals { border: 1px solid var(--line, #dde2e5); border-radius: 8px; padding: 12px 16px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px 24px; }
body.admin-redesign .engine-terminals legend { padding: 0 6px; }
body.admin-redesign .engine-terminals > div { display: grid; gap: 6px; align-content: start; }
body.admin-redesign .engine-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
body.admin-redesign .engine-campaign { display: grid; gap: 10px; }
body.admin-redesign .engine-campaign .card-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
body.admin-redesign .engine-campaign .engine-kv dd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* The processor Dashboard's tables (src/engine/processor-dashboard.ts): scroll inside their card, never the page. */
body.admin-redesign .processor-shell .card { min-width: 0; }
body.admin-redesign .scroll-x { overflow-x: auto; margin: 0 -4px; }
body.admin-redesign .processor-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
body.admin-redesign .processor-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary, #4f5a63); padding: 8px 10px; border-bottom: 1px solid var(--line, #dde2e5); white-space: nowrap; }
body.admin-redesign .processor-table td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--line, #dde2e5); }
body.admin-redesign .processor-table tr:last-child td { border-bottom: 0; }
body.admin-redesign .processor-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.admin-redesign .processor-shell .block { display: block; }
body.admin-redesign .processor-table .status { white-space: normal; }
body.admin-redesign .processor-add .input { flex: 1 1 12rem; }
body.admin-redesign .processor-name { margin-right: auto; }
@media (max-width: 600px) { body.admin-redesign .processor-name { display: none; } }
/* Brands and member offers (src/engine/brands.ts). */
body.admin-redesign .engine-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.admin-redesign .engine-inline-form .input { flex: 0 1 16rem; min-width: 0; min-height: 36px; }
body.admin-redesign .engine-inline-form .input[type="number"] { flex: 0 0 5.5rem; }
body.admin-redesign section[aria-label="Member offers"] .engine-kv dd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.admin-redesign .vp-member-sub { display: block; font-size: 13px; overflow-wrap: anywhere; }
/* Merchant boarding on the processor Dashboard (engine/merchant-boarding.ts) */
body.admin-redesign .pd-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 12px; align-items: end; margin: 0; }
body.admin-redesign .pd-form label { display: grid; gap: 4px; min-width: 0; font-size: 12.5px; font-weight: 500; }
body.admin-redesign .pd-form .input { width: 100%; min-height: 36px; }
body.admin-redesign .pd-form .pd-wide { grid-column: span 2; }
body.admin-redesign .pd-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
body.admin-redesign .pd-form > .btn { justify-self: start; }
body.admin-redesign .pd-list { list-style: none; margin: 0; padding: 0; display: grid; }
body.admin-redesign .pd-list > li { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line, #e1e5e8); min-width: 0; }
body.admin-redesign .pd-list > li:first-child { border-top: 0; }
body.admin-redesign .pd-edit summary { cursor: pointer; font-size: 13px; font-weight: 500; }
body.admin-redesign .pd-edit[open] { display: grid; gap: 12px; }
body.admin-redesign .pd-edit[open] summary { margin-bottom: 4px; }
@media (max-width: 600px) { body.admin-redesign .pd-form .pd-wide { grid-column: 1 / -1; } }
body.admin-redesign .hint code { overflow-wrap: anywhere; }
body.admin-redesign .pd-form.pd-period { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
body.admin-redesign .pd-form.pd-period label { width: 11rem; }
body.admin-redesign .processor-table tr.total td { border-top: 2px solid var(--line, #e1e5e8); font-weight: 600; }
body.admin-redesign .fee-statement { max-width: 40rem; }
body.admin-redesign .brand-preview { margin-top: 12px; padding: 12px; border: 1px dashed var(--line, #e1e5e8); border-radius: 8px; max-width: 22rem; }
body.admin-redesign .brand-preview .rail-cobrand { display: flex; align-items: center; gap: 6px; font-size: 13px; }
body.admin-redesign .brand-preview .rail-cobrand img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
body.admin-redesign .pd-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
body.admin-redesign .pd-form .pd-check { display: flex; align-items: center; gap: 6px; align-self: center; font-weight: 400; }
/* Processor Dashboard (src/engine/processor-pages.ts): record pages, filters, timeline, phone tables. */
body.admin-redesign .processor-shell .page-body { display: grid; gap: var(--spacing-24); }
body.admin-redesign .processor-shell .page-body > * { min-width: 0; }
body.admin-redesign .processor-shell .page-head { align-items: flex-end; }
body.admin-redesign .processor-shell .ph-actions { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }
body.admin-redesign .processor-shell .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); margin-bottom: var(--spacing-12); flex-wrap: wrap; }
body.admin-redesign .processor-shell .section { margin: 0; }
body.admin-redesign .processor-shell .card.flush { padding: 0; overflow: hidden; }
body.admin-redesign .processor-shell .card.flush .processor-table th:first-child, body.admin-redesign .processor-shell .card.flush .processor-table td:first-child { padding-left: var(--spacing-20); }
body.admin-redesign .processor-shell .card.flush .processor-table th:last-child, body.admin-redesign .processor-shell .card.flush .processor-table td:last-child { padding-right: var(--spacing-20); }
body.admin-redesign .processor-shell .processor-table { min-width: 0; }
body.admin-redesign .processor-shell .processor-table td { vertical-align: middle; }
body.admin-redesign .processor-shell tr[data-href] { cursor: pointer; }
body.admin-redesign .processor-shell tr[data-href]:hover td { background: var(--surface-secondary); }
body.admin-redesign .processor-shell .row-link { color: inherit; text-decoration: none; font-weight: 500; }
body.admin-redesign .processor-shell .row-link:hover { text-decoration: underline; text-underline-offset: 3px; }
body.admin-redesign .processor-shell .pd-chev { width: 24px; color: var(--text-secondary); }
body.admin-redesign .processor-shell .chips { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }
body.admin-redesign .processor-shell .chip { text-decoration: none; color: var(--text-primary); background: var(--surface-secondary); border: 1px solid transparent; }
body.admin-redesign .processor-shell .chip:hover { border-color: var(--line); }
body.admin-redesign .processor-shell .chip.is-on { background: var(--color-onyx-black); color: var(--color-white); }
body.admin-redesign .processor-shell .chip.is-on .muted { color: rgba(255,255,255,.72); }
body.admin-redesign .processor-shell .toolbar { flex-wrap: wrap; gap: var(--spacing-12); }
body.admin-redesign .processor-shell .trend-up { color: var(--accent-ink); font-weight: 500; }
body.admin-redesign .processor-shell .trend-down { color: var(--error-ink); font-weight: 500; }
body.admin-redesign .processor-shell .caution { color: var(--caution-ink); }
body.admin-redesign .processor-shell .ocard { color: inherit; text-decoration: none; display: grid; gap: var(--spacing-16); }
body.admin-redesign .processor-shell .ocard:hover { border-color: var(--text-secondary); }
body.admin-redesign .processor-shell .card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-12); border-top: 1px solid var(--line); padding-top: var(--spacing-12); }
body.admin-redesign .processor-shell .fig-value .status { font-size: var(--text-body, 15px); }
body.admin-redesign .processor-shell .pd-filters { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(130px, 1fr)) repeat(2, minmax(130px, 1fr)) auto; gap: var(--spacing-12); align-items: end; }
body.admin-redesign .processor-shell .pd-filter-actions { display: flex; gap: var(--spacing-8); }
body.admin-redesign .processor-shell .pd-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-12); }
body.admin-redesign .processor-shell .pd-sheet-form { display: grid; gap: var(--spacing-16); }
body.admin-redesign .processor-shell .pd-sheet-form > .btn, body.admin-redesign .sheet .pd-sheet-form > .btn { justify-self: start; }
body.admin-redesign .sheet .pd-sheet-form { display: grid; gap: var(--spacing-16); margin-top: var(--spacing-16); }
body.admin-redesign .processor-shell .pd-inline { display: flex; gap: var(--spacing-8); align-items: end; flex-wrap: wrap; }
body.admin-redesign .processor-shell .pd-inline .field { flex: 1 1 220px; }
body.admin-redesign .processor-shell .pd-new { margin-top: var(--spacing-16); padding-top: var(--spacing-16); border-top: 1px solid var(--line); }
body.admin-redesign .processor-shell .row-actions { display: flex; gap: var(--spacing-8); flex-wrap: wrap; align-items: center; }
body.admin-redesign .processor-shell .pd-add-person { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
body.admin-redesign .processor-shell .pd-roles { margin-top: var(--spacing-16); }
body.admin-redesign .processor-shell .pd-person { flex-wrap: wrap; }
body.admin-redesign .processor-shell .pd-person .input-sm { min-height: 34px; }
body.admin-redesign .processor-shell .pd-checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-20); }
body.admin-redesign .processor-shell .pd-checks legend { margin-bottom: var(--spacing-8); }
body.admin-redesign .processor-shell .pd-url { overflow-wrap: anywhere; }
body.admin-redesign .processor-shell .pd-secret { overflow-wrap: anywhere; font-size: 14px; }
body.admin-redesign .processor-shell .pd-code { margin: var(--spacing-12) 0 0; padding: var(--spacing-16); border-radius: 6px; background: var(--color-onyx-black); color: #e8eef0; font-size: 13px; line-height: 1.5; overflow-x: auto; white-space: pre; }
body.admin-redesign .processor-shell .pd-docs h2 code { font-size: 15px; }
body.admin-redesign .processor-shell .pd-amount { font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; margin: var(--spacing-4) 0; font-variant-numeric: tabular-nums; }
body.admin-redesign .processor-shell .pd-sale-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-16); flex-wrap: wrap; }
body.admin-redesign .processor-shell .pd-split { margin: var(--spacing-16) 0; }
body.admin-redesign .processor-shell .pd-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
body.admin-redesign .processor-shell .pd-timeline li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--spacing-12); padding-bottom: var(--spacing-16); position: relative; }
body.admin-redesign .processor-shell .pd-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--line); }
body.admin-redesign .processor-shell .pd-timeline li.is-done:not(:last-child)::before { background: var(--color-onyx-black); }
body.admin-redesign .processor-shell .pd-timeline .pd-dot { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--canvas); }
body.admin-redesign .processor-shell .pd-timeline li.is-done .pd-dot { background: var(--color-onyx-black); border-color: var(--color-onyx-black); color: #fff; }
body.admin-redesign .processor-shell .pd-timeline li.is-failed .pd-dot { background: var(--error-ink); border-color: var(--error-ink); }
body.admin-redesign .processor-shell .pd-timeline .pd-dot .icon { width: 14px; height: 14px; }
body.admin-redesign .processor-shell .stages li.scur span { background: var(--color-caribbean-mint); }
body.admin-redesign .processor-shell .pd-readonly form, body.admin-redesign .processor-shell .pd-readonly button { display: none; }
body.admin-redesign .processor-shell .pd-readonly-note { margin: 0; }
body.admin-redesign .processor-shell .verified-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-16); }
body.admin-redesign .processor-shell .pd-acts .act { padding: var(--spacing-12) var(--spacing-20); }
body.admin-redesign .processor-shell .orows .orow { display: flex; align-items: center; gap: var(--spacing-12); padding: var(--spacing-10) 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
body.admin-redesign .processor-shell .orows .orow:last-child { border-bottom: 0; }
body.admin-redesign .processor-shell .orow .grow { display: grid; min-width: 0; }
body.admin-redesign .platform-bar-actions .pop-anchor { position: relative; }
body.admin-redesign .pd-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-caribbean-mint); color: var(--color-onyx-black); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
body.admin-redesign .pd-pop-atts { display: grid; gap: 0; max-height: 60vh; overflow-y: auto; }
body.admin-redesign .pd-pop-atts .att { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; grid-template-columns: auto minmax(0, 1fr); }
body.admin-redesign .pd-pop-atts .att-go { grid-column: 2; justify-self: start; }
body.admin-redesign .pd-alert-toggle { margin: 0; }
body.admin-redesign .pd-alert-toggle button { display: flex; align-items: center; gap: var(--spacing-12); width: 100%; border: 0; background: none; padding: var(--spacing-12) var(--spacing-16); font: inherit; color: inherit; cursor: pointer; text-align: left; }
body.admin-redesign .pd-alert-toggle button:hover { background: var(--surface-secondary); }
body.admin-redesign .processor-shell .pd-w-0 { width: 0%; }
body.admin-redesign .processor-shell .pd-w-5 { width: 5%; }
body.admin-redesign .processor-shell .pd-w-10 { width: 10%; }
body.admin-redesign .processor-shell .pd-w-15 { width: 15%; }
body.admin-redesign .processor-shell .pd-w-20 { width: 20%; }
body.admin-redesign .processor-shell .pd-w-25 { width: 25%; }
body.admin-redesign .processor-shell .pd-w-30 { width: 30%; }
body.admin-redesign .processor-shell .pd-w-35 { width: 35%; }
body.admin-redesign .processor-shell .pd-w-40 { width: 40%; }
body.admin-redesign .processor-shell .pd-w-45 { width: 45%; }
body.admin-redesign .processor-shell .pd-w-50 { width: 50%; }
body.admin-redesign .processor-shell .pd-w-55 { width: 55%; }
body.admin-redesign .processor-shell .pd-w-60 { width: 60%; }
body.admin-redesign .processor-shell .pd-w-65 { width: 65%; }
body.admin-redesign .processor-shell .pd-w-70 { width: 70%; }
body.admin-redesign .processor-shell .pd-w-75 { width: 75%; }
body.admin-redesign .processor-shell .pd-w-80 { width: 80%; }
body.admin-redesign .processor-shell .pd-w-85 { width: 85%; }
body.admin-redesign .processor-shell .pd-w-90 { width: 90%; }
body.admin-redesign .processor-shell .pd-w-95 { width: 95%; }
body.admin-redesign .processor-shell .pd-w-100 { width: 100%; }
@media (max-width: 1100px) {
body.admin-redesign .processor-shell .pd-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.admin-redesign .processor-shell .pd-filter-q { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
body.admin-redesign .processor-shell .pd-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.admin-redesign .processor-shell .pd-add-person { grid-template-columns: 1fr; }
body.admin-redesign .processor-shell .pd-amount { font-size: 34px; }
/* Tables become stacked rows: each cell labeled by its column, the first cell as the row's title. */
body.admin-redesign .processor-shell .processor-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.admin-redesign .processor-shell .processor-table, body.admin-redesign .processor-shell .processor-table tbody, body.admin-redesign .processor-shell .processor-table tr, body.admin-redesign .processor-shell .processor-table td { display: block; width: auto; }
body.admin-redesign .processor-shell .processor-table tr { padding: var(--spacing-12) var(--spacing-16); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-12); row-gap: 4px; }
body.admin-redesign .processor-shell .processor-table tr:last-child { border-bottom: 0; }
body.admin-redesign .processor-shell .processor-table td { border: 0; padding: 0 !important; text-align: left; display: flex; justify-content: space-between; gap: var(--spacing-12); grid-column: 1 / -1; font-size: 14px; }
body.admin-redesign .processor-shell .processor-table td[data-label]::before { content: attr(data-label); color: var(--text-secondary); font-size: 13px; flex: none; }
body.admin-redesign .processor-shell .processor-table td.num { text-align: right; }
body.admin-redesign .processor-shell .processor-table td:first-child::before { content: none; }
body.admin-redesign .processor-shell .processor-table td:first-child { font-weight: 500; }
body.admin-redesign .processor-shell .processor-table td.pd-chev, body.admin-redesign .processor-shell .processor-table td:empty { display: none; }
body.admin-redesign .processor-shell .processor-table tr.total { background: var(--surface-secondary); }
body.admin-redesign .processor-shell .card:not(.flush) > .scroll-x .processor-table tr, body.admin-redesign .processor-shell .card:not(.flush) .processor-table tr { padding-left: 0; padding-right: 0; }
}
body.admin-redesign .processor-shell .callout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: start; }
body.admin-redesign .processor-shell .callout > * { margin: 0; }
body.admin-redesign .processor-shell .bal-hero .mc-asset a { display: inline-block; margin-top: 4px; }
body.admin-redesign .processor-shell .chips .chip { flex: none; white-space: nowrap; width: auto; min-width: 0; max-width: none; height: auto; min-height: 32px; padding: 0 14px; border-radius: 999px; }
body.admin-redesign .processor-shell .toolbar .field-search { flex: 1 1 280px; }
body.admin-redesign .processor-shell .pd-filters .input { min-width: 0; width: 100%; box-sizing: border-box; }
body.admin-redesign .processor-shell .pd-filters .field { min-width: 0; }
@media (max-width: 720px) {
body.admin-redesign .processor-shell .pd-filter-actions { grid-column: 1 / -1; }
body.admin-redesign .processor-shell .pd-filter-actions .btn-primary { flex: 1; }
body.admin-redesign .processor-shell .figs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.admin-redesign .processor-shell .figs-3 .fig { padding: var(--spacing-14) var(--spacing-12); }
body.admin-redesign .processor-shell .figs-3 .fig-value { font-size: 20px; }
body.admin-redesign .processor-shell .figs-3 .fig-sub { display: none; }
}
@media (max-width: 720px) {
/* Sales on a phone: items and amount, then when, merchant, how paid and the payout. */
body.admin-redesign .processor-shell .pd-sales tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
body.admin-redesign .processor-shell .pd-sales td::before { content: none !important; }
body.admin-redesign .processor-shell .pd-sales td { grid-column: auto; font-weight: 400; }
body.admin-redesign .processor-shell .pd-sales .c-items { grid-column: 1; grid-row: 1; display: block; }
body.admin-redesign .processor-shell .pd-sales .c-items .block { display: none; }
body.admin-redesign .processor-shell .pd-sales .c-amount { grid-column: 2; grid-row: 1; font-weight: 600; }
body.admin-redesign .processor-shell .pd-sales .c-when { grid-column: 1; grid-row: 2; color: var(--text-secondary); font-size: 13px; display: block; }
body.admin-redesign .processor-shell .pd-sales .c-merchant, body.admin-redesign .processor-shell .pd-sales .c-paid { grid-column: 1; color: var(--text-secondary); font-size: 13px; display: inline; }
body.admin-redesign .processor-shell .pd-sales .c-merchant { grid-row: 3; }
body.admin-redesign .processor-shell .pd-sales .c-paid { grid-row: 4; }
body.admin-redesign .processor-shell .pd-sales .c-payout { grid-column: 2; grid-row: 2 / span 3; align-self: end; justify-content: flex-end; }
}
body.admin-redesign .processor-shell .pd-more { display: contents; }
body.admin-redesign .processor-shell .pd-more > summary { display: none; }
body.admin-redesign .processor-shell .pd-more-fields { display: contents; }
body.admin-redesign .processor-shell .pd-sales .c-amount { justify-content: flex-end; text-align: right; }
@media (max-width: 720px) {
body.admin-redesign .processor-shell .pd-filters { grid-template-columns: minmax(0, 1fr) auto; }
body.admin-redesign .processor-shell .pd-filter-q { grid-column: 1 / -1; }
body.admin-redesign .processor-shell .pd-more { display: block; grid-column: 1; }
body.admin-redesign .processor-shell .pd-more > summary { display: inline-flex; list-style: none; gap: 6px; }
body.admin-redesign .processor-shell .pd-more > summary::-webkit-details-marker { display: none; }
body.admin-redesign .processor-shell .pd-more[open] { grid-column: 1 / -1; }
body.admin-redesign .processor-shell .pd-more[open] .pd-more-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-12); margin-top: var(--spacing-12); }
body.admin-redesign .processor-shell .pd-filter-actions { grid-column: 2; grid-row: 2; }
body.admin-redesign .processor-shell .pd-more[open] ~ .pd-filter-actions { grid-column: 1 / -1; grid-row: auto; }
body.admin-redesign .processor-shell .pd-sales .c-when time { font-weight: 400; }
}
/* Canonical supplied component declarations. Identical ordered realm rules share one owner; realm differences remain explicit. */
/* Original HTML reset and page layout, scoped to operational web surfaces. */
/* Supplied October 5 HTML component declarations. Only selector scope changes. */
/* Real Inventory artwork uses img elements in the supplied background-image frames. */
/* Bind existing API hooks to the supplied components; no legacy table layout. */
/* Data-derived source bars without inline styles: preserve the production CSP. */
/* Remove spacing inherited from the retired Home layout. */
/* Preserve the supplied responsive tokens after the scoped source declarations. */
/* Clear effects retained from the retired shared card styles. */
/* The same source components adapt to the narrow Statement drawer itself. */
/* Retired shared drawer copy color must not override source component ink. */
/* Supplied Admin authentication composition, without the retired card wrapper. */
/* Creative library retains the supplied row composition; phone metadata stacks. */
/* Recorded finance facts must wrap under the existing strict CSP. */
/* Retained operator identity values must not widen the phone account page. */
@keyframes spin{ to { transform: rotate(360deg); } }
@keyframes spin{ to { transform: rotate(360deg); } }
:is(body.portal-redesign,body.admin-redesign) h1, :is(body.portal-redesign,body.admin-redesign) h2, :is(body.portal-redesign,body.admin-redesign) h3, :is(body.portal-redesign,body.admin-redesign) h4, :is(body.portal-redesign,body.admin-redesign) p, :is(body.portal-redesign,body.admin-redesign) dl, :is(body.portal-redesign,body.admin-redesign) dd, :is(body.portal-redesign,body.admin-redesign) figure, :is(body.portal-redesign,body.admin-redesign) ul, :is(body.portal-redesign,body.admin-redesign) ol{ margin: 0; padding: 0; }
:is(body.portal-redesign,body.admin-redesign) ul, :is(body.portal-redesign,body.admin-redesign) ol{ list-style: none; }
:is(body.portal-redesign,body.admin-redesign) img, :is(body.portal-redesign,body.admin-redesign) svg{ display: block; }
:is(body.portal-redesign,body.admin-redesign) svg{ flex: none; }
:is(body.portal-redesign,body.admin-redesign) button, :is(body.portal-redesign,body.admin-redesign) input, :is(body.portal-redesign,body.admin-redesign) select, :is(body.portal-redesign,body.admin-redesign) textarea{ font: inherit; color: inherit; }
:is(body.portal-redesign,body.admin-redesign) button{ cursor: pointer; }
:is(body.portal-redesign,body.admin-redesign) a{ color: inherit; }
:is(body.portal-redesign,body.admin-redesign) [hidden]{ display: none !important; }
:is(body.portal-redesign,body.admin-redesign) .sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(body.portal-redesign,body.admin-redesign) .num{ font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(body.portal-redesign,body.admin-redesign) :focus-visible{ outline: none; box-shadow: var(--focus-ring); }
:is(body.portal-redesign,body.admin-redesign) .on-dark :focus-visible, :is(body.portal-redesign,body.admin-redesign) .command-rail :focus-visible{ box-shadow: 0 0 0 2px var(--color-onyx-black), 0 0 0 4px var(--color-white); }
:is(body.portal-redesign,body.admin-redesign) .icon{ width: 20px; height: 20px; stroke-width: 1.5; }
:is(body.portal-redesign,body.admin-redesign) .icon-sm{ width: 16px; height: 16px; }
:is(body.portal-redesign,body.admin-redesign) .icon-lg{ width: 24px; height: 24px; }
:is(body.portal-redesign,body.admin-redesign) .content{ padding: var(--spacing-36) var(--gutter) var(--spacing-80); max-width: calc(var(--content-max) + var(--gutter) * 2); }
:is(body.portal-redesign,body.admin-redesign) .page-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-24); flex-wrap: wrap; }
:is(body.portal-redesign,body.admin-redesign) .page-head .lede{ margin-top: var(--spacing-10); }
:is(body.portal-redesign,body.admin-redesign) .page-actions{ display: flex; gap: var(--spacing-12); align-items: center; flex-wrap: wrap; }
:is(body.portal-redesign,body.admin-redesign) .page-body{ display: grid; gap: var(--spacing-48); margin-top: var(--spacing-32); }
:is(body.portal-redesign,body.admin-redesign) .section{ display: grid; gap: var(--spacing-16); align-content: start; }
:is(body.portal-redesign,body.admin-redesign) .section-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-16); flex-wrap: wrap; }
:is(body.portal-redesign,body.admin-redesign) .section-head .lede{ width: 100%; margin-top: calc(var(--spacing-8) * -1); }
:is(body.portal-redesign,body.admin-redesign) .columns{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--spacing-24); align-items: start; }
:is(body.portal-redesign,body.admin-redesign){
--color-onyx-black: #0a0d11;
--color-white: #ffffff;
--color-caribbean-mint: #00d1a7;
--color-stone-mist: #eaece4;
--color-midnight-core: #1c1e22;
--color-charcoal-grey: #4a4a48;
--color-steel-gray: #8a8a88;
--surface-secondary: #f2f6f7;
--surface-strong: #e8eef0;
--line: #d9e2e4;
--text-secondary: #5b6d72;
--accent-soft: #e7f9f4;
--accent-ink: #007f69;
--error-ink: #a33737;
--error-surface: #fff0ee;
--caution-ink: #76551c;
--caution-surface: #fff7e7;
--on-dark-secondary: rgba(255, 255, 255, 0.72);
--control-border: var(--color-steel-gray);
--canvas: var(--color-white);
--ink: var(--color-onyx-black);
--primary: var(--color-caribbean-mint);
--scrim: rgba(10, 13, 17, 0.56);
--font: "TT Hoves", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--text-eyebrow: 12px;
--text-small: 13px;
--text-body: 16px;
--text-large: 18px;
--text-h3: 22px;
--text-h2: 24px;
--text-h1: 34px;
--text-figure: 34px;
--text-hero: 52px;
--spacing-4: 4px; --spacing-6: 6px; --spacing-8: 8px; --spacing-10: 10px;
--spacing-12: 12px; --spacing-14: 14px; --spacing-16: 16px; --spacing-20: 20px;
--spacing-22: 22px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
--spacing-36: 36px; --spacing-44: 44px; --spacing-48: 48px; --spacing-60: 60px;
--spacing-64: 64px; --spacing-80: 80px;
--radius-control: 6px;
--radius-panel: 6px;
--radius-small: 3px;
--radius-round: 999px;
--rail-width: 248px;
--command-rail-width: 64px;
--command-rail-open: 232px;
--bar-height: 72px;
--content-max: 1200px;
--gutter: 40px;
--control-height: 44px;
--control-height-small: 36px;
--focus-ring: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-onyx-black);
--duration: 160ms;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
color-scheme: light;
}
:is(body.portal-redesign,body.admin-redesign) .h1{ font-size: var(--text-h1); line-height: 1.08; letter-spacing: -0.03em; font-weight: 400; text-wrap: balance; }
:is(body.portal-redesign,body.admin-redesign) .h2{ font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }
:is(body.portal-redesign,body.admin-redesign) .h3{ font-size: var(--text-body); line-height: 1.4; font-weight: 500; }
:is(body.portal-redesign,body.admin-redesign) .eyebrow{ font-size: var(--text-eyebrow); line-height: 1.33; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--text-secondary); }
:is(body.portal-redesign,body.admin-redesign) .lede{ font-size: var(--text-body); line-height: 1.5; color: var(--text-secondary); max-width: 62ch; }
:is(body.portal-redesign,body.admin-redesign) .small{ font-size: var(--text-small); line-height: 1.38; }
:is(body.portal-redesign,body.admin-redesign) .muted{ color: var(--text-secondary); }
:is(body.portal-redesign,body.admin-redesign) .strong{ font-weight: 500; }
:is(body.portal-redesign,body.admin-redesign) .link{ color: var(--ink); text-decoration: underline; text-decoration-color: var(--color-steel-gray); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:is(body.portal-redesign,body.admin-redesign) .link:hover{ text-decoration-color: var(--ink); }
:is(body.portal-redesign,body.admin-redesign) .link-more{ display: inline-flex; align-items: center; gap: var(--spacing-4); font-size: var(--text-small); font-weight: 500; text-decoration: none; }
:is(body.portal-redesign,body.admin-redesign) .link-more:hover{ text-decoration: underline; text-underline-offset: 3px; }
:is(body.portal-redesign,body.admin-redesign) .btn{
display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
min-height: var(--control-height); padding: 0 var(--spacing-20);
border: 0; border-radius: var(--radius-control);
font-size: var(--text-body); line-height: 1.1; font-weight: 500; letter-spacing: -0.01em;
text-decoration: none; white-space: nowrap;
transition: background-color var(--duration) var(--ease), filter var(--duration) var(--ease);
}
:is(body.portal-redesign,body.admin-redesign) .btn .icon{ width: 20px; height: 20px; }
:is(body.portal-redesign,body.admin-redesign) .btn-primary{ background: var(--primary); color: var(--ink); }
:is(body.portal-redesign,body.admin-redesign) .btn-secondary{ background: var(--surface-secondary); color: var(--ink); }
:is(body.portal-redesign,body.admin-redesign) .btn-secondary:hover, :is(body.portal-redesign,body.admin-redesign) .btn-secondary.is-hover{ background: var(--surface-strong); }
:is(body.portal-redesign,body.admin-redesign) .btn-primary:hover, :is(body.portal-redesign,body.admin-redesign) .btn-primary.is-hover{ filter: brightness(0.96); }
:is(body.portal-redesign,body.admin-redesign) .btn-primary:active, :is(body.portal-redesign,body.admin-redesign) .btn-primary.is-active{ filter: brightness(0.9); }
:is(body.portal-redesign,body.admin-redesign) .btn-secondary:active, :is(body.portal-redesign,body.admin-redesign) .btn-secondary.is-active{ background: #dbe4e7; }
:is(body.portal-redesign,body.admin-redesign) .btn-danger{ background: var(--error-surface); color: var(--error-ink); }
:is(body.portal-redesign,body.admin-redesign) .btn-danger:hover, :is(body.portal-redesign,body.admin-redesign) .btn-danger.is-hover{ filter: brightness(0.96); }
:is(body.portal-redesign,body.admin-redesign) .btn-danger:active, :is(body.portal-redesign,body.admin-redesign) .btn-danger.is-active{ filter: brightness(0.92); }
:is(body.portal-redesign,body.admin-redesign) .btn-small{ min-height: var(--control-height-small); padding: 0 var(--spacing-14); font-size: var(--text-small); }
:is(body.portal-redesign,body.admin-redesign) .btn-small .icon{ width: 16px; height: 16px; }
:is(body.portal-redesign,body.admin-redesign) .btn-icon{ width: var(--control-height); padding: 0; background: var(--surface-secondary); color: var(--ink); }
:is(body.portal-redesign,body.admin-redesign) .btn-icon.btn-small{ width: var(--control-height-small); }
:is(body.portal-redesign,body.admin-redesign) .btn-icon:hover{ background: var(--surface-strong); }
:is(body.portal-redesign,body.admin-redesign) .btn-block{ width: 100%; }
:is(body.portal-redesign,body.admin-redesign) .btn.is-focus{ box-shadow: var(--focus-ring); }
:is(body.portal-redesign,body.admin-redesign) .btn:disabled, :is(body.portal-redesign,body.admin-redesign) .btn[aria-disabled="true"]{ background: var(--surface-strong); color: var(--text-secondary); cursor: default; filter: none; }
:is(body.portal-redesign,body.admin-redesign) .btn.is-loading{ position: relative; color: transparent; pointer-events: none; }
:is(body.portal-redesign,body.admin-redesign) .btn.is-loading::after{
content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--ink); border-right-color: transparent; animation: spin 0.8s linear infinite;
}
:is(body.portal-redesign,body.admin-redesign) .btn-primary.is-loading::after{ border-color: var(--ink); border-right-color: transparent; }
:is(body.portal-redesign,body.admin-redesign) .btn.is-loading .icon{ visibility: hidden; }
:is(body.portal-redesign,body.admin-redesign) .status{ display: inline-flex; align-items: center; gap: var(--spacing-6); font-size: var(--text-small); line-height: 1.3; font-weight: 500; color: var(--ink); white-space: nowrap; }
:is(body.portal-redesign,body.admin-redesign) .status .icon{ width: 16px; height: 16px; stroke-width: 1.75; color: currentColor; }
:is(body.portal-redesign,body.admin-redesign) .table .status{ font-size: var(--text-body); font-weight: 400; line-height: 1.5; }
:is(body.portal-redesign,body.admin-redesign) .table .status .icon{ width: 18px; height: 18px; }
:is(body.portal-redesign,body.admin-redesign) .status-ok .icon{ color: var(--accent-ink); }
:is(body.portal-redesign,body.admin-redesign) .status-caution .icon{ color: var(--caution-ink); }
:is(body.portal-redesign,body.admin-redesign) .status-error .icon{ color: var(--error-ink); }
:is(body.portal-redesign,body.admin-redesign) .status-caution{ color: var(--caution-ink); }
:is(body.portal-redesign,body.admin-redesign) .status-error{ color: var(--error-ink); }
:is(body.portal-redesign,body.admin-redesign) .status-neutral{ color: var(--text-secondary); }
:is(body.portal-redesign,body.admin-redesign) .status-neutral .icon{ color: var(--text-secondary); }
:is(body.portal-redesign,body.admin-redesign) .chip{ display: inline-flex; align-items: center; gap: var(--spacing-6); min-height: 28px; padding: 0 var(--spacing-12); border-radius: var(--radius-round); background: var(--surface-secondary); font-size: var(--text-small); font-weight: 500; color: var(--ink); white-space: nowrap; }
:is(body.portal-redesign,body.admin-redesign) .chip-dot::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
:is(body.portal-redesign,body.admin-redesign) .avatar{ width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-strong); font-size: var(--text-small); font-weight: 500; }
:is(body.portal-redesign,body.admin-redesign) .panel{ background: var(--surface-secondary); border-radius: var(--radius-panel); padding: var(--spacing-24); }
:is(body.portal-redesign,body.admin-redesign) .panel-line{ background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-panel); }
:is(body.portal-redesign,body.admin-redesign) .panel-pad{ padding: var(--spacing-24); }
:is(body.portal-redesign,body.admin-redesign) .notice{ display: flex; gap: var(--spacing-12); padding: var(--spacing-16) var(--spacing-20); border-radius: var(--radius-small); border-left: 4px solid var(--primary); background: var(--accent-soft); font-size: var(--text-body); line-height: 1.4; }
:is(body.portal-redesign,body.admin-redesign) .notice .icon{ margin-top: 1px; color: var(--accent-ink); }
:is(body.portal-redesign,body.admin-redesign) .notice-title{ font-weight: 500; }
:is(body.portal-redesign,body.admin-redesign) .notice-body{ color: var(--ink); }
:is(body.portal-redesign,body.admin-redesign) .notice-caution{ border-left-color: var(--caution-ink); background: var(--caution-surface); }
:is(body.portal-redesign,body.admin-redesign) .notice-caution .icon{ color: var(--caution-ink); }
:is(body.portal-redesign,body.admin-redesign) .notice-error{ border-left-color: var(--error-ink); background: var(--error-surface); }
:is(body.portal-redesign,body.admin-redesign) .notice-error .icon{ color: var(--error-ink); }
:is(body.portal-redesign,body.admin-redesign) .empty{ display: flex; align-items: flex-start; gap: var(--spacing-16); padding: var(--spacing-24); background: var(--surface-secondary); border-radius: var(--radius-panel); }
:is(body.portal-redesign,body.admin-redesign) .empty > .icon{ width: 24px; height: 24px; color: var(--text-secondary); margin-top: 2px; }
:is(body.portal-redesign,body.admin-redesign) .empty-title{ font-weight: 500; }
:is(body.portal-redesign,body.admin-redesign) .empty-text{ color: var(--text-secondary); margin-top: var(--spacing-4); max-width: 56ch; }
:is(body.portal-redesign,body.admin-redesign) .empty .btn{ margin-top: var(--spacing-16); }
:is(body.portal-redesign,body.admin-redesign) .stats{ display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; }
:is(body.portal-redesign,body.admin-redesign) .stats-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(body.portal-redesign,body.admin-redesign) .stats-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(body.portal-redesign,body.admin-redesign) .stats-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(body.portal-redesign,body.admin-redesign) .stat{ padding: var(--spacing-24); background: var(--canvas); min-width: 0; }
:is(body.portal-redesign,body.admin-redesign) .stat-label{ font-size: var(--text-small); line-height: 1.38; color: var(--text-secondary); }
:is(body.portal-redesign,body.admin-redesign) .stat-figure{ margin-top: var(--spacing-8); font-size: var(--text-figure); line-height: 1.05; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
:is(body.portal-redesign,body.admin-redesign) .stat-note{ margin-top: var(--spacing-8); font-size: var(--text-small); line-height: 1.38; color: var(--text-secondary); }
:is(body.portal-redesign,body.admin-redesign) .hero{ background: var(--color-onyx-black); color: var(--color-white); border-radius: var(--radius-panel); padding: var(--spacing-32); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-24); flex-wrap: wrap; }
:is(body.portal-redesign,body.admin-redesign) .hero-label{ font-size: var(--text-small); color: var(--on-dark-secondary); }
:is(body.portal-redesign,body.admin-redesign) .hero-figure{ margin-top: var(--spacing-8); font-size: var(--text-hero); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
:is(body.portal-redesign,body.admin-redesign) .hero-note{ margin-top: var(--spacing-12); font-size: var(--text-small); color: var(--on-dark-secondary); }
:is(body.portal-redesign,body.admin-redesign) .hero .btn-secondary{ background: rgba(255, 255, 255, 0.12); color: var(--color-white); }
:is(body.portal-redesign,body.admin-redesign) .hero .btn-secondary:hover{ background: rgba(255, 255, 255, 0.2); }
:is(body.portal-redesign,body.admin-redesign) .kv{ display: grid; }
:is(body.portal-redesign,body.admin-redesign) .kv-row{ display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: var(--spacing-16); padding: var(--spacing-14) 0; border-bottom: 1px solid var(--line); }
:is(body.portal-redesign,body.admin-redesign) .kv-row:last-child{ border-bottom: 0; }
:is(body.portal-redesign,body.admin-redesign) .kv-compact .kv-row{ grid-template-columns: 1fr auto; }
:is(body.portal-redesign,body.admin-redesign) .kv-compact dt{ font-size: var(--text-body); color: var(--ink); padding-top: 0; }
:is(body.portal-redesign,body.admin-redesign) .kv dt{ font-size: var(--text-small); color: var(--text-secondary); padding-top: 2px; }
:is(body.portal-redesign,body.admin-redesign) .kv dd{ font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
:is(body.portal-redesign,body.admin-redesign) .kv dd .status{ font-size: var(--text-body); font-weight: 400; line-height: 1.5; }
:is(body.portal-redesign,body.admin-redesign) .list-row{ display: grid; grid-template-columns: auto 1fr auto; gap: var(--spacing-16); align-items: center; padding: var(--spacing-16) var(--spacing-20); border-bottom: 1px solid var(--line); }
:is(body.portal-redesign,body.admin-redesign) .list-row:last-child{ border-bottom: 0; }
:is(body.portal-redesign,body.admin-redesign) .list-row .status .icon{ width: 22px; height: 22px; }
:is(body.portal-redesign,body.admin-redesign) .list-title{ font-weight: 500; }
:is(body.portal-redesign,body.admin-redesign) .list-meta{ font-size: var(--text-small); color: var(--text-secondary); margin-top: 2px; }
:is(body.portal-redesign,body.admin-redesign) .table-wrap{ overflow-x: auto; }
:is(body.portal-redesign,body.admin-redesign) .table{ width: 100%; border-collapse: collapse; }
:is(body.portal-redesign,body.admin-redesign) .table th{ padding: var(--spacing-12) var(--spacing-20); text-align: left; font-size: var(--text-small); line-height: 1.3; font-weight: 500; color: var(--text-secondary); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--canvas); }
:is(body.portal-redesign,body.admin-redesign) .table td{ padding: var(--spacing-16) var(--spacing-20); border-bottom: 1px solid var(--line); vertical-align: middle; }
:is(body.portal-redesign,body.admin-redesign) .table tbody tr:last-child td{ border-bottom: 0; }
:is(body.portal-redesign,body.admin-redesign) .table tbody tr:hover td{ background: var(--surface-secondary); }
:is(body.portal-redesign,body.admin-redesign) .table .num, :is(body.portal-redesign,body.admin-redesign) .table th.num{ text-align: right; }
:is(body.portal-redesign,body.admin-redesign) .table .cell-sub{ display: block; font-size: var(--text-small); color: var(--text-secondary); margin-top: 2px; }
:is(body.portal-redesign,body.admin-redesign) .table .cell-end{ text-align: right; width: 1%; white-space: nowrap; }
:is(body.portal-redesign,body.admin-redesign) .table .code{ font-variant-numeric: tabular-nums; letter-spacing: 0; }
:is(body.portal-redesign,body.admin-redesign) .method{ display: inline-flex; align-items: center; gap: var(--spacing-8); }
:is(body.portal-redesign,body.admin-redesign) .method .icon{ color: var(--text-secondary); }
:is(body.portal-redesign,body.admin-redesign) .toolbar{ display: flex; align-items: center; gap: var(--spacing-12); flex-wrap: wrap; }
:is(body.portal-redesign,body.admin-redesign) .toolbar-spacer{ flex: 1; }
:is(body.portal-redesign,body.admin-redesign) .field-search{ position: relative; flex: 1 1 280px; max-width: 380px; }
:is(body.portal-redesign,body.admin-redesign) .field-search .icon{ position: absolute; left: var(--spacing-14); top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
:is(body.portal-redesign,body.admin-redesign) .field-search .input{ padding-left: 44px; }
:is(body.portal-redesign,body.admin-redesign) .pager{ display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); padding: var(--spacing-12) var(--spacing-20); border-top: 1px solid var(--line); font-size: var(--text-small); color: var(--text-secondary); }
:is(body.portal-redesign,body.admin-redesign) .pager-actions{ display: flex; gap: var(--spacing-8); align-items: center; }
:is(body.portal-redesign,body.admin-redesign) .tabs{ display: flex; gap: var(--spacing-24); border-bottom: 1px solid var(--line); overflow-x: auto; }
:is(body.portal-redesign,body.admin-redesign) .tab{ display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; font-size: var(--text-body); color: var(--text-secondary); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
:is(body.portal-redesign,body.admin-redesign) .tab:hover{ color: var(--ink); }
:is(body.portal-redesign,body.admin-redesign) .tab[aria-current="page"]{ color: var(--ink); font-weight: 500; border-bottom-color: var(--primary); }
:is(body.portal-redesign,body.admin-redesign) .segmented{ display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-secondary); border-radius: var(--radius-control); }
:is(body.portal-redesign,body.admin-redesign) .segmented button{ min-height: 34px; padding: 0 var(--spacing-14); border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font-size: var(--text-small); font-weight: 500; }
:is(body.portal-redesign,body.admin-redesign) .segmented button[aria-pressed="true"]{ background: var(--color-onyx-black); color: var(--color-white); }
:is(body.portal-redesign,body.admin-redesign) .field{ display: grid; gap: var(--spacing-8); align-content: start; min-width: 0; }
:is(body.portal-redesign,body.admin-redesign) .label{ font-size: var(--text-small); font-weight: 500; line-height: 1.3; }
:is(body.portal-redesign,body.admin-redesign) .hint{ font-size: var(--text-small); color: var(--text-secondary); line-height: 1.38; }
:is(body.portal-redesign,body.admin-redesign) .input, :is(body.portal-redesign,body.admin-redesign) .select, :is(body.portal-redesign,body.admin-redesign) .textarea{
width: 100%; min-height: var(--control-height); padding: 0 var(--spacing-14);
background: var(--canvas); border: 1px solid var(--control-border); border-radius: var(--radius-control);
font-size: var(--text-body); line-height: 1.3; color: var(--ink);
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
:is(body.portal-redesign,body.admin-redesign) .textarea{ padding: var(--spacing-12) var(--spacing-14); min-height: 96px; resize: vertical; }
:is(body.portal-redesign,body.admin-redesign) .input::placeholder{ color: var(--text-secondary); opacity: 1; }
:is(body.portal-redesign,body.admin-redesign) .input:hover, :is(body.portal-redesign,body.admin-redesign) .select:hover, :is(body.portal-redesign,body.admin-redesign) .textarea:hover{ border-color: var(--ink); }
:is(body.portal-redesign,body.admin-redesign) .input:focus, :is(body.portal-redesign,body.admin-redesign) .select:focus, :is(body.portal-redesign,body.admin-redesign) .textarea:focus, :is(body.portal-redesign,body.admin-redesign) .input.is-focus{ outline: none; border-color: var(--ink); box-shadow: var(--focus-ring); }
:is(body.portal-redesign,body.admin-redesign) .select{
appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,