/* =============================================================
BAILEE — New Theme Stylesheet
bailee-new.css
Built incrementally — one screen at a time.
---------------------------------------------------------------
HOW THIS FILE IS USED
---------------------------------------------------------------
Every selector below is namespaced `bl-`, so this file can be
loaded alongside the existing bailee.css without affecting any
template that has not yet been migrated.
Load order:
THEME + TEXT SIZE
Both are driven by attributes. Set them once, from Settings,
on the element in layouts/main:
data-theme "light" | "dark" (omit to follow the OS setting)
data-text-size "standard" | "large" | "xlarge" (default: standard)
Until layouts/main is migrated, the attributes can sit on the
page wrapper instead — the tokens inherit either way.
MIGRATED SCREENS
- dashboard.php
============================================================= */
/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.cdnfonts.com/css/uknumberplate');
/* =============================================================
1. DESIGN TOKENS — LIGHT (default)
============================================================= */
:root {
/* ── Surfaces ── */
--bl-canvas: #EDEFEE; /* page background behind cards */
--bl-surface: #FFFFFF; /* cards, bars, sheets */
--bl-surface-2: #F5F7F6; /* inset areas, inputs */
--bl-surface-3: #E4E9E8; /* tracks, wells */
--bl-line: #DAE0DF;
--bl-line-soft: #E9EDEC;
/* ── Ink ── */
--bl-ink: #131A1B; /* primary text */
--bl-ink-2: #4C5A5B; /* secondary text */
--bl-ink-3: #7A8888; /* muted / hints */
--bl-ink-invert: #FFFFFF; /* text on accent fills */
/* ── Accent (deep teal) ── */
--bl-accent: #12676A;
--bl-accent-hov: #0D4F51;
--bl-accent-soft: #DFEDED;
--bl-accent-line: #A8CCCC;
--bl-accent-ink: #FFFFFF;
/* ── Status ──
teal = progressing normally
gold = waiting on something / needs attention
green = finished and ready
red = overdue
grey = closed */
--bl-wait: #9A6408;
--bl-wait-soft: #FBF1DC;
--bl-wait-line: #E8D0A0;
--bl-ready: #1B6B42;
--bl-ready-soft: #E1F1E8;
--bl-ready-line: #A9D3BC;
--bl-late: #B0413A;
--bl-late-soft: #FAE8E6;
--bl-late-line: #E9B8B3;
--bl-hold: #6B3FA0;
--bl-hold-soft: #F0E9FA;
--bl-hold-line: #CDBBE8;
--bl-closed: #79878A;
--bl-closed-soft: #ECEFEF;
/* ── Number plate — stays light in both themes ── */
--bl-plate-bg: #F4F4EF;
--bl-plate-ink: #141414;
--bl-plate-line: #C9CBC4;
/* ── Typography ── */
--bl-font-display: 'Schibsted Grotesk', system-ui, sans-serif;
--bl-font-body: 'Hanken Grotesk', system-ui, sans-serif;
--bl-font-mono: 'Spline Sans Mono', ui-monospace, monospace;
--bl-font-plate: 'UKNumberPlate', 'Arial Black', Arial, sans-serif;
/* Text scale — every size is multiplied by --bl-scale, so the
large-text setting works without touching a single rule. */
--bl-scale: 1;
--bl-fs-xs: calc(10px * var(--bl-scale));
--bl-fs-sm: calc(11px * var(--bl-scale));
--bl-fs-base: calc(12px * var(--bl-scale));
--bl-fs-md: calc(13px * var(--bl-scale));
--bl-fs-body: calc(14px * var(--bl-scale));
--bl-fs-nav: calc(15px * var(--bl-scale));
--bl-fs-title: calc(17px * var(--bl-scale));
--bl-fs-lg: calc(18px * var(--bl-scale));
--bl-fs-xl: calc(20px * var(--bl-scale));
--bl-fs-hero: calc(26px * var(--bl-scale));
/* ── Spacing (fixed — layout stays stable as text grows) ── */
--bl-space-xs: 4px;
--bl-space-sm: 8px;
--bl-space-md: 12px;
--bl-space-lg: 16px;
--bl-space-xl: 24px;
--bl-space-2xl: 32px;
/* ── Radii ── */
--bl-radius-xs: 4px;
--bl-radius-sm: 8px;
--bl-radius-md: 10px;
--bl-radius-lg: 14px;
--bl-radius-pill: 999px;
--bl-radius-circle: 50%;
/* ── Shadows ── */
--bl-shadow-card: 0 1px 2px rgba(19,26,27,.05);
--bl-shadow-lift: 0 2px 6px rgba(18,103,106,.10);
--bl-shadow-fab: 0 4px 14px rgba(18,103,106,.36);
--bl-shadow-focus: 0 0 0 3px rgba(18,103,106,.16);
/* ── Motion ── */
--bl-transition: .15s ease;
}
/* =============================================================
2. DESIGN TOKENS — DARK
Applied either by OS preference (when data-theme is absent)
or explicitly via data-theme="dark".
============================================================= */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bl-canvas: #0D1214;
--bl-surface: #151D1F;
--bl-surface-2: #1C2528;
--bl-surface-3: #26312F;
--bl-line: rgba(236,232,225,.12);
--bl-line-soft: rgba(236,232,225,.07);
--bl-ink: #ECE8E1;
--bl-ink-2: #A6B2B2;
--bl-ink-3: #7A8888;
--bl-ink-invert: #0D1214;
--bl-accent: #35A9AC;
--bl-accent-hov: #4EC0C3;
--bl-accent-soft: rgba(53,169,172,.16);
--bl-accent-line: rgba(53,169,172,.36);
--bl-accent-ink: #06211F;
--bl-wait: #E0A445;
--bl-wait-soft: rgba(224,164,69,.15);
--bl-wait-line: rgba(224,164,69,.34);
--bl-ready: #58C08A;
--bl-ready-soft: rgba(88,192,138,.14);
--bl-ready-line: rgba(88,192,138,.32);
--bl-late: #E58177;
--bl-late-soft: rgba(229,129,119,.15);
--bl-late-line: rgba(229,129,119,.32);
--bl-hold: #B79AE4;
--bl-hold-soft: rgba(183,154,228,.15);
--bl-hold-line: rgba(183,154,228,.32);
--bl-closed: #7A8888;
--bl-closed-soft: rgba(236,232,225,.07);
--bl-shadow-card: 0 1px 2px rgba(0,0,0,.4);
--bl-shadow-lift: 0 2px 8px rgba(0,0,0,.5);
--bl-shadow-fab: 0 4px 16px rgba(0,0,0,.55);
--bl-shadow-focus: 0 0 0 3px rgba(53,169,172,.26);
}
}
[data-theme="dark"] {
--bl-canvas: #0D1214;
--bl-surface: #151D1F;
--bl-surface-2: #1C2528;
--bl-surface-3: #26312F;
--bl-line: rgba(236,232,225,.12);
--bl-line-soft: rgba(236,232,225,.07);
--bl-ink: #ECE8E1;
--bl-ink-2: #A6B2B2;
--bl-ink-3: #7A8888;
--bl-ink-invert: #0D1214;
--bl-accent: #35A9AC;
--bl-accent-hov: #4EC0C3;
--bl-accent-soft: rgba(53,169,172,.16);
--bl-accent-line: rgba(53,169,172,.36);
--bl-accent-ink: #06211F;
--bl-wait: #E0A445;
--bl-wait-soft: rgba(224,164,69,.15);
--bl-wait-line: rgba(224,164,69,.34);
--bl-ready: #58C08A;
--bl-ready-soft: rgba(88,192,138,.14);
--bl-ready-line: rgba(88,192,138,.32);
--bl-late: #E58177;
--bl-late-soft: rgba(229,129,119,.15);
--bl-late-line: rgba(229,129,119,.32);
--bl-hold: #B79AE4;
--bl-hold-soft: rgba(183,154,228,.15);
--bl-hold-line: rgba(183,154,228,.32);
--bl-closed: #7A8888;
--bl-closed-soft: rgba(236,232,225,.07);
--bl-shadow-card: 0 1px 2px rgba(0,0,0,.4);
--bl-shadow-lift: 0 2px 8px rgba(0,0,0,.5);
--bl-shadow-fab: 0 4px 16px rgba(0,0,0,.55);
--bl-shadow-focus: 0 0 0 3px rgba(53,169,172,.26);
}
/* Explicit light — lets a user override a dark OS preference. */
[data-theme="light"] {
--bl-canvas: #EDEFEE;
--bl-surface: #FFFFFF;
--bl-surface-2: #F5F7F6;
--bl-surface-3: #E4E9E8;
--bl-line: #DAE0DF;
--bl-line-soft: #E9EDEC;
--bl-ink: #131A1B;
--bl-ink-2: #4C5A5B;
--bl-ink-3: #7A8888;
--bl-ink-invert: #FFFFFF;
--bl-accent: #12676A;
--bl-accent-hov: #0D4F51;
--bl-accent-soft: #DFEDED;
--bl-accent-line: #A8CCCC;
--bl-accent-ink: #FFFFFF;
--bl-wait: #9A6408;
--bl-wait-soft: #FBF1DC;
--bl-wait-line: #E8D0A0;
--bl-ready: #1B6B42;
--bl-ready-soft: #E1F1E8;
--bl-ready-line: #A9D3BC;
--bl-late: #B0413A;
--bl-late-soft: #FAE8E6;
--bl-late-line: #E9B8B3;
--bl-hold: #6B3FA0;
--bl-hold-soft: #F0E9FA;
--bl-hold-line: #CDBBE8;
--bl-closed: #79878A;
--bl-closed-soft: #ECEFEF;
}
/* =============================================================
3. TEXT SIZE
============================================================= */
/* Three steps. `standard` is the default and needs no attribute,
but it is declared so the Settings page can set it explicitly
to override an inherited value. */
[data-text-size="standard"] { --bl-scale: 1; } /* 14px body */
[data-text-size="large"] { --bl-scale: 1.125; } /* ~16px body */
[data-text-size="xlarge"] { --bl-scale: 1.3; } /* ~18px body */
/* =============================================================
4. SCOPE BASE
.bl-scope wraps the content of every migrated template. It
applies the new background and type without touching ,
so unmigrated screens are unaffected.
============================================================= */
.bl-scope {
background: var(--bl-canvas);
color: var(--bl-ink);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-body);
line-height: 1.55;
min-height: 100%;
-webkit-font-smoothing: antialiased;
}
.bl-scope *,
.bl-scope *::before,
.bl-scope *::after {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.bl-scope a { text-decoration: none; color: var(--bl-accent); }
.bl-scope :focus-visible {
outline: 2px solid var(--bl-accent);
outline-offset: 2px;
border-radius: var(--bl-radius-xs);
}
@media (prefers-reduced-motion: reduce) {
.bl-scope *,
.bl-scope *::before,
.bl-scope *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* Screen-reader-only text */
.bl-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* =============================================================
5. PAGE WRAPPER
============================================================= */
.bl-main-wrapper {
padding-bottom: var(--bl-space-2xl);
}
/* =============================================================
6. STAT TILES (dashboard.php)
============================================================= */
.bl-stat-row {
display: flex;
gap: var(--bl-space-sm);
padding: var(--bl-space-md) var(--bl-space-md) var(--bl-space-xs);
}
.bl-stat-tile {
flex: 1;
min-width: 0;
background: var(--bl-surface);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-lg);
padding: var(--bl-space-md) var(--bl-space-sm);
text-align: center;
box-shadow: var(--bl-shadow-card);
}
.bl-stat-tile__number {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-hero);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--bl-accent);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.bl-stat-tile__label {
font-size: var(--bl-fs-xs);
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--bl-ink-3);
margin-top: 6px;
}
/* Tone variants — apply to the tile to colour its number. */
.bl-stat-tile--wait .bl-stat-tile__number { color: var(--bl-wait); }
.bl-stat-tile--ready .bl-stat-tile__number { color: var(--bl-ready); }
/* =============================================================
7. LIST HEADING
============================================================= */
.bl-list-heading {
display: flex;
align-items: baseline;
gap: var(--bl-space-sm);
font-family: var(--bl-font-display);
font-size: var(--bl-fs-md);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--bl-ink);
padding: var(--bl-space-lg) var(--bl-space-md) var(--bl-space-sm);
}
.bl-list-heading__count {
font-family: var(--bl-font-body);
font-size: var(--bl-fs-sm);
font-weight: 500;
color: var(--bl-ink-3);
font-variant-numeric: tabular-nums;
}
/* =============================================================
8. STATUS BADGES
Covers both `awaiting` and `awaiting-parts` — the templates
generate the latter from the `awaiting_parts` status value.
============================================================= */
.bl-badge {
display: inline-block;
font-size: var(--bl-fs-xs);
font-weight: 600;
letter-spacing: .02em;
text-transform: capitalize;
padding: 3px 9px;
border-radius: var(--bl-radius-pill);
border: 1px solid transparent;
white-space: nowrap;
/* Default / unrecognised status */
background: var(--bl-closed-soft);
color: var(--bl-closed);
border-color: var(--bl-line);
}
.bl-badge--in-progress,
.bl-badge--in-process { background: var(--bl-accent-soft); color: var(--bl-accent); border-color: var(--bl-accent-line); }
.bl-badge--awaiting,
.bl-badge--awaiting-parts { background: var(--bl-wait-soft); color: var(--bl-wait); border-color: var(--bl-wait-line); }
.bl-badge--on-hold { background: var(--bl-hold-soft); color: var(--bl-hold); border-color: var(--bl-hold-line); }
.bl-badge--ready { background: var(--bl-ready-soft); color: var(--bl-ready); border-color: var(--bl-ready-line); }
.bl-badge--overdue { background: var(--bl-late-soft); color: var(--bl-late); border-color: var(--bl-late-line); }
.bl-badge--completed,
.bl-badge--archived { background: var(--bl-closed-soft); color: var(--bl-closed); border-color: var(--bl-line); }
/* =============================================================
9. JOB CARDS
============================================================= */
.bl-job-list {
padding: var(--bl-space-md) var(--bl-space-md) var(--bl-space-xs);
}
.bl-job-list--flush-top { padding-top: 0; }
.bl-job-card {
position: relative;
background: var(--bl-surface);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-lg);
padding: var(--bl-space-md) var(--bl-space-lg);
margin-bottom: var(--bl-space-sm);
box-shadow: var(--bl-shadow-card);
transition: box-shadow var(--bl-transition),
border-color var(--bl-transition);
}
.bl-job-card:hover {
border-color: var(--bl-accent-line);
box-shadow: var(--bl-shadow-lift);
}
/* Waiting on something — gold rail down the left edge. */
.bl-job-card--flagged {
border-left: 3px solid var(--bl-wait);
padding-left: calc(var(--bl-space-lg) - 2px);
}
.bl-job-card__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--bl-space-sm);
margin-bottom: var(--bl-space-xs);
}
.bl-job-card__vehicle {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-body);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--bl-ink);
}
.bl-job-card__reg {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
margin-top: 3px;
}
/* The registration itself, set as a plate. Stays light in dark
mode, because real plates do. */
.bl-job-card__plate {
font-family: var(--bl-font-plate);
font-size: var(--bl-fs-base);
letter-spacing: .04em;
color: var(--bl-plate-ink);
background: var(--bl-plate-bg);
border: 1px solid var(--bl-plate-line);
border-radius: var(--bl-radius-xs);
padding: 1px 5px;
line-height: 1.35;
}
.bl-job-card__service {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: var(--bl-space-sm);
font-size: var(--bl-fs-base);
color: var(--bl-ink-2);
margin: var(--bl-space-sm) 0 var(--bl-space-xs);
}
.bl-job-card__service-left {
grid-column: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bl-job-card__service-right {
grid-column: 2;
}
.bl-job-card__action {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--bl-fs-base);
font-weight: 600;
color: var(--bl-accent);
padding: 2px 0;
}
.bl-job-card__action:hover { color: var(--bl-accent-hov); }
.bl-job-card__action::after {
content: "";
width: 5px; height: 5px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform var(--bl-transition);
}
.bl-job-card__action:hover::after { transform: rotate(45deg) translate(1px, -1px); }
.bl-job-card__customer {
font-size: var(--bl-fs-sm);
font-weight: 500;
color: var(--bl-ink-2);
margin-top: 2px;
}
.bl-job-card__progress {
height: 5px;
background: var(--bl-surface-3);
border-radius: var(--bl-radius-pill);
margin: var(--bl-space-sm) 0 var(--bl-space-xs);
overflow: hidden;
}
.bl-job-card__progress-fill {
height: 100%;
border-radius: inherit;
background: var(--bl-accent);
transition: width .3s ease;
}
.bl-job-card--flagged .bl-job-card__progress-fill { background: var(--bl-wait); }
.bl-job-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--bl-space-sm);
}
.bl-job-card__stage {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
font-variant-numeric: tabular-nums;
}
.bl-job-card__due {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
font-variant-numeric: tabular-nums;
}
.bl-job-card__due--overdue {
color: var(--bl-late);
font-weight: 600;
}
/* =============================================================
10. EMPTY STATE
============================================================= */
.bl-empty {
text-align: center;
padding: var(--bl-space-2xl) var(--bl-space-xl);
color: var(--bl-ink-3);
}
.bl-empty__title {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-md);
font-weight: 600;
color: var(--bl-ink-2);
margin-bottom: var(--bl-space-xs);
}
.bl-empty__text {
font-size: var(--bl-fs-base);
line-height: 1.6;
}
/* =============================================================
11. FLOATING ACTION BUTTON
Sits bottom-right with an equal gap on both edges.
Because the FAB is fixed but the app shell is a centred,
max-width column, `right` is calculated so the button hugs the
shell's right edge on wide viewports instead of the browser's.
On narrow screens the calc goes negative and max() falls back
to the plain gap.
--bl-fab-gap the equal bottom/right margin
--bl-fab-lift extra bottom clearance for the nav bar,
if the footer nav overlaps the FAB
--bl-shell-max must match the app shell's max-width
============================================================= */
:root {
--bl-fab-gap: 20px;
--bl-fab-lift: 0px;
--bl-shell-max: 600px;
}
.bl-fab {
position: fixed;
bottom: calc(var(--bl-fab-gap) + var(--bl-fab-lift));
right: max(
var(--bl-fab-gap),
calc(50vw - (var(--bl-shell-max) / 2) + var(--bl-fab-gap))
);
width: 52px;
height: 52px;
background: var(--bl-accent);
border: none;
border-radius: var(--bl-radius-circle);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--bl-shadow-fab);
cursor: pointer;
z-index: 40;
transition: background var(--bl-transition), transform var(--bl-transition);
}
.bl-fab:hover { background: var(--bl-accent-hov); }
.bl-fab:active { transform: scale(.94); }
.bl-fab svg {
width: 24px;
height: 24px;
stroke: var(--bl-accent-ink);
fill: none;
}
/* =============================================================
12. SECTION DIVIDER & LABEL
============================================================= */
.bl-section-divider {
height: 8px;
background: var(--bl-canvas);
border-top: 1px solid var(--bl-line-soft);
border-bottom: 1px solid var(--bl-line-soft);
}
.bl-section-label {
display: block;
font-family: var(--bl-font-display);
font-size: var(--bl-fs-xs);
font-weight: 700;
color: var(--bl-ink-3);
text-transform: uppercase;
letter-spacing: .08em;
padding: var(--bl-space-lg) var(--bl-space-lg) var(--bl-space-xs);
}
.bl-section-note {
padding: 0 var(--bl-space-lg) var(--bl-space-sm);
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
line-height: 1.5;
}
/* =============================================================
13. FORM FIELDS
============================================================= */
.bl-field-wrap { padding: var(--bl-space-md) var(--bl-space-lg); }
.bl-field-wrap--tight { padding: var(--bl-space-sm) var(--bl-space-lg); }
.bl-field-wrap--no-top { padding-top: 0; }
.bl-field-label {
display: block;
font-size: var(--bl-fs-base);
font-weight: 600;
color: var(--bl-ink-2);
margin-bottom: 6px;
}
.bl-field-label__hint {
font-weight: 400;
color: var(--bl-ink-3);
}
.bl-field-input,
.bl-field-textarea,
.bl-field-select {
width: 100%;
background: var(--bl-surface-2);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-sm);
padding: 10px var(--bl-space-md);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-body);
color: var(--bl-ink);
outline: none;
transition: border-color var(--bl-transition),
box-shadow var(--bl-transition),
background var(--bl-transition);
}
.bl-field-input:focus,
.bl-field-textarea:focus,
.bl-field-select:focus {
border-color: var(--bl-accent);
box-shadow: var(--bl-shadow-focus);
background: var(--bl-surface);
}
.bl-field-input::placeholder,
.bl-field-textarea::placeholder { color: var(--bl-ink-3); }
.bl-field-textarea {
resize: vertical;
line-height: 1.55;
min-height: 66px;
}
.bl-field-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
.bl-field-error {
display: none;
font-size: var(--bl-fs-base);
color: var(--bl-late);
margin-top: 2px;
}
.bl-field-error.is-shown { display: block; }
.bl-field-row { display: flex; gap: var(--bl-space-sm); }
.bl-field-row > * { flex: 1; }
/* =============================================================
14. TOGGLE SWITCH
============================================================= */
.bl-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--bl-space-lg);
padding: var(--bl-space-md) var(--bl-space-lg);
border-bottom: 1px solid var(--bl-line-soft);
background: var(--bl-surface);
}
.bl-toggle-row:last-of-type,
.bl-toggle-row--flush { border-bottom: none; }
.bl-toggle-row__label {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-body);
font-weight: 600;
color: var(--bl-ink);
line-height: 1.3;
}
.bl-toggle-row__desc {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
margin-top: 3px;
max-width: 240px;
line-height: 1.4;
}
.bl-toggle {
position: relative;
width: 48px;
height: 26px;
flex-shrink: 0;
margin-top: 2px;
cursor: pointer;
}
.bl-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.bl-toggle__track {
position: absolute;
inset: 0;
background: var(--bl-surface-3);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-pill);
transition: background .2s ease, border-color .2s ease;
}
.bl-toggle__track::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 2px;
left: 2px;
background: var(--bl-surface);
border-radius: var(--bl-radius-circle);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
transition: transform .2s ease;
}
.bl-toggle input:checked ~ .bl-toggle__track {
background: var(--bl-accent);
border-color: var(--bl-accent);
}
.bl-toggle input:checked ~ .bl-toggle__track::after {
transform: translateX(22px);
}
.bl-toggle input:focus-visible ~ .bl-toggle__track {
box-shadow: var(--bl-shadow-focus);
}
/* =============================================================
15. BUTTONS
============================================================= */
.bl-btn-primary {
display: block;
width: calc(100% - (var(--bl-space-lg) * 2));
margin: var(--bl-space-sm) var(--bl-space-lg) var(--bl-space-lg);
padding: 14px;
background: var(--bl-accent);
color: var(--bl-accent-ink);
border: none;
border-radius: var(--bl-radius-lg);
font-family: var(--bl-font-display);
font-size: var(--bl-fs-nav);
font-weight: 700;
letter-spacing: -0.01em;
text-align: center;
cursor: pointer;
transition: background var(--bl-transition), transform var(--bl-transition);
}
.bl-btn-primary:hover { background: var(--bl-accent-hov); }
.bl-btn-primary:active { transform: scale(.985); }
.bl-btn-primary--disabled,
.bl-btn-primary:disabled {
background: var(--bl-surface-3);
color: var(--bl-ink-3);
cursor: not-allowed;
}
.bl-btn-primary--disabled:hover,
.bl-btn-primary:disabled:hover { background: var(--bl-surface-3); }
.bl-btn-outline {
background: var(--bl-surface);
border: 1.5px solid var(--bl-accent);
color: var(--bl-accent);
border-radius: var(--bl-radius-sm);
padding: 7px 14px;
font-family: var(--bl-font-body);
font-size: var(--bl-fs-base);
font-weight: 600;
cursor: pointer;
transition: background var(--bl-transition);
}
.bl-btn-outline:hover { background: var(--bl-accent-soft); }
.bl-btn-quiet {
background: none;
border: 1px solid var(--bl-line);
color: var(--bl-ink-2);
border-radius: var(--bl-radius-sm);
padding: 8px 16px;
font-family: var(--bl-font-body);
font-size: var(--bl-fs-body);
font-weight: 500;
cursor: pointer;
transition: background var(--bl-transition), border-color var(--bl-transition);
}
.bl-btn-quiet:hover { background: var(--bl-surface-2); border-color: var(--bl-ink-3); }
.bl-save-wrap {
padding: var(--bl-space-sm) 0;
}
/* =============================================================
16. INFO BANNER
============================================================= */
.bl-info-banner {
display: flex;
align-items: flex-start;
gap: var(--bl-space-sm);
margin: var(--bl-space-sm) var(--bl-space-lg);
padding: 10px var(--bl-space-md);
background: var(--bl-accent-soft);
border: 1px solid var(--bl-accent-line);
border-radius: var(--bl-radius-sm);
font-size: var(--bl-fs-base);
color: var(--bl-accent);
line-height: 1.5;
}
.bl-info-banner svg {
flex-shrink: 0;
margin-top: 1px;
stroke: currentColor;
fill: none;
}
/* =============================================================
17. ICON UPLOADER
Replaces the old .logo-uploader, which was a fixed 320px
circular avatar widget. A service icon is a square glyph, so
the preview is square and the panel is fluid.
============================================================= */
.bl-icon-uploader {
display: flex;
align-items: center;
gap: var(--bl-space-lg);
padding: var(--bl-space-md);
background: var(--bl-surface);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-lg);
}
.bl-icon-uploader__preview {
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: var(--bl-radius-md);
border: 1.5px dashed var(--bl-line);
background: var(--bl-surface-2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.bl-icon-uploader__preview img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
}
.bl-icon-uploader__preview svg {
width: 28px;
height: 28px;
stroke: var(--bl-ink-3);
fill: none;
}
.bl-icon-uploader__body { flex: 1; min-width: 0; }
.bl-icon-uploader__hint {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
line-height: 1.45;
margin-bottom: var(--bl-space-sm);
}
/* The real file input is hidden; the label is the button. */
.bl-icon-uploader__input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.bl-icon-uploader__btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bl-accent);
color: var(--bl-accent-ink);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-base);
font-weight: 600;
padding: 8px 16px;
border-radius: var(--bl-radius-sm);
cursor: pointer;
user-select: none;
transition: background var(--bl-transition), transform .05s ease;
}
.bl-icon-uploader__btn:hover { background: var(--bl-accent-hov); }
.bl-icon-uploader__btn:active { transform: scale(.97); }
.bl-icon-uploader__btn.is-uploading {
background: var(--bl-surface-3);
color: var(--bl-ink-3);
cursor: not-allowed;
pointer-events: none;
}
.bl-icon-uploader__status {
margin-top: 8px;
font-size: var(--bl-fs-base);
color: var(--bl-ink-3);
min-height: 16px;
}
.bl-icon-uploader__status.error { color: var(--bl-late); }
.bl-icon-uploader__status.success { color: var(--bl-ready); }
/* =============================================================
18. CUSTOM FIELD ROWS
============================================================= */
.bl-fields-card {
margin: 0 var(--bl-space-lg) var(--bl-space-sm);
background: var(--bl-surface);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-md);
overflow: hidden;
}
.bl-custom-field-row {
display: flex;
align-items: center;
gap: var(--bl-space-sm);
padding: 10px var(--bl-space-md);
border-bottom: 1px solid var(--bl-line-soft);
background: var(--bl-surface);
}
.bl-custom-field-row:last-of-type { border-bottom: none; }
.bl-custom-field-row__drag {
color: var(--bl-ink-3);
font-size: var(--bl-fs-nav);
cursor: grab;
flex-shrink: 0;
opacity: .6;
}
.bl-custom-field-row__drag:active { cursor: grabbing; }
.bl-custom-field-row__info { flex: 1; min-width: 0; }
.bl-custom-field-row__name {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-md);
font-weight: 600;
color: var(--bl-ink);
}
.bl-custom-field-row__type {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
margin-top: 1px;
text-transform: capitalize;
}
.bl-custom-field-row__delete {
color: var(--bl-ink-3);
font-size: var(--bl-fs-body);
cursor: pointer;
padding: 2px 5px;
border-radius: var(--bl-radius-xs);
opacity: .6;
transition: color var(--bl-transition), background var(--bl-transition), opacity var(--bl-transition);
}
.bl-custom-field-row__delete:hover {
color: var(--bl-late);
background: var(--bl-late-soft);
opacity: 1;
}
/* Small badge variant for the Required / Optional marker. */
.bl-badge--xs { font-size: calc(9px * var(--bl-scale)); padding: 2px 7px; }
.bl-add-field-row {
display: flex;
align-items: center;
justify-content: center;
gap: var(--bl-space-sm);
padding: 11px var(--bl-space-md);
font-size: var(--bl-fs-md);
font-weight: 600;
color: var(--bl-accent);
cursor: pointer;
border-top: 1px solid var(--bl-line-soft);
background: var(--bl-surface);
transition: background var(--bl-transition);
}
.bl-add-field-row:hover { background: var(--bl-accent-soft); }
.bl-add-field-row__plus {
font-size: var(--bl-fs-lg);
font-weight: 300;
line-height: 1;
}
/* =============================================================
19. COMPLETION METHODS
============================================================= */
.bl-completion-method {
display: flex;
align-items: flex-start;
gap: var(--bl-space-md);
padding: var(--bl-space-md) var(--bl-space-lg);
border-bottom: 1px solid var(--bl-line-soft);
background: var(--bl-surface);
cursor: pointer;
transition: background var(--bl-transition);
}
.bl-completion-method:hover { background: var(--bl-surface-2); }
.bl-completion-method:last-of-type { border-bottom: none; }
.bl-completion-method__checkbox {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 1px;
border: 2px solid var(--bl-line);
border-radius: var(--bl-radius-xs);
background: var(--bl-surface);
color: var(--bl-accent-ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--bl-transition), border-color var(--bl-transition);
}
.bl-completion-method__checkbox svg { display: none; stroke: currentColor; fill: none; }
.bl-completion-method__checkbox--checked {
border-color: var(--bl-accent);
background: var(--bl-accent);
}
.bl-completion-method__checkbox--checked svg { display: block; }
.bl-completion-method__icon {
width: 22px;
flex-shrink: 0;
margin-top: 1px;
display: flex;
align-items: center;
justify-content: center;
color: var(--bl-accent);
}
.bl-completion-method__icon svg { stroke: currentColor; fill: none; }
.bl-completion-method__info { flex: 1; min-width: 0; }
.bl-completion-method__label {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-body);
font-weight: 600;
color: var(--bl-ink);
}
.bl-completion-method__desc {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
margin-top: 2px;
line-height: 1.4;
}
/* =============================================================
20. LINK CARD
A tappable row that navigates elsewhere — used for
"Manage Stages". Replaces a block of inline styles.
============================================================= */
.bl-link-card {
display: flex;
align-items: center;
gap: var(--bl-space-md);
margin: 0 var(--bl-space-lg) var(--bl-space-md);
padding: var(--bl-space-md);
background: var(--bl-surface);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-md);
cursor: pointer;
transition: background var(--bl-transition), border-color var(--bl-transition);
}
.bl-link-card:hover {
background: var(--bl-accent-soft);
border-color: var(--bl-accent-line);
}
.bl-link-card__icon {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--bl-radius-sm);
background: var(--bl-accent-soft);
color: var(--bl-accent);
display: flex;
align-items: center;
justify-content: center;
}
.bl-link-card__icon svg { stroke: currentColor; fill: none; }
.bl-link-card__body { flex: 1; min-width: 0; }
.bl-link-card__title {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-body);
font-weight: 600;
color: var(--bl-ink);
}
.bl-link-card__meta {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
margin-top: 2px;
}
.bl-link-card__chevron {
flex-shrink: 0;
color: var(--bl-ink-3);
}
.bl-link-card__chevron svg { stroke: currentColor; fill: none; }
/* =============================================================
21. MODAL
============================================================= */
.bl-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(6, 12, 13, .55);
align-items: center;
justify-content: center;
padding: var(--bl-space-lg);
}
.bl-modal-overlay.is-open { display: flex; }
.bl-modal {
width: 100%;
max-width: 420px;
background: var(--bl-surface);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-lg);
overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.bl-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bl-space-md);
padding: var(--bl-space-md) var(--bl-space-lg);
border-bottom: 1px solid var(--bl-line-soft);
}
.bl-modal__title {
margin: 0;
font-family: var(--bl-font-display);
font-size: var(--bl-fs-title);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--bl-ink);
}
.bl-modal__close {
background: none;
border: none;
cursor: pointer;
font-size: var(--bl-fs-xl);
line-height: 1;
color: var(--bl-ink-3);
padding: 4px 8px;
border-radius: var(--bl-radius-xs);
transition: color var(--bl-transition), background var(--bl-transition);
}
.bl-modal__close:hover { color: var(--bl-ink); background: var(--bl-surface-2); }
.bl-modal__body {
padding: var(--bl-space-lg);
display: flex;
flex-direction: column;
gap: var(--bl-space-lg);
}
.bl-modal__foot {
display: flex;
justify-content: flex-end;
gap: var(--bl-space-sm);
padding: var(--bl-space-md) var(--bl-space-lg);
border-top: 1px solid var(--bl-line-soft);
background: var(--bl-surface-2);
}
.bl-modal__foot .bl-btn-primary {
display: inline-block;
width: auto;
margin: 0;
padding: 9px 18px;
font-size: var(--bl-fs-body);
border-radius: var(--bl-radius-sm);
}
.bl-modal .bl-field { display: flex; flex-direction: column; gap: 6px; }
.bl-checkbox-row {
display: flex;
align-items: center;
gap: 10px;
padding: 2px 0;
}
.bl-checkbox-row input {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--bl-accent);
}
.bl-checkbox-row label {
font-size: var(--bl-fs-body);
color: var(--bl-ink);
cursor: pointer;
}
/* =============================================================
22. SETTINGS / FORM PAGES
A card-based layout for long settings forms. Replaces the
pattern of full-bleed rows separated by grey dividers: each
logical group becomes a titled card on the canvas, so the page
has a shape you can scan rather than one continuous column.
============================================================= */
/* Page wrapper. Bottom padding clears the fixed action bar. */
.bl-form-page {
padding: var(--bl-space-md) 0
calc(78px + var(--bl-formbar-lift, 0px));
}
/* ── Card ── */
.bl-card {
display: block;
margin: 0 var(--bl-space-md) var(--bl-space-md);
background: var(--bl-surface);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-lg);
box-shadow: var(--bl-shadow-card);
overflow: hidden;
}
.bl-card__head {
padding: var(--bl-space-md) var(--bl-space-lg);
border-bottom: 1px solid var(--bl-line-soft);
}
.bl-card__title {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-md);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--bl-ink);
}
.bl-card__sub {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
line-height: 1.45;
margin-top: 3px;
}
.bl-card__body { padding: var(--bl-space-lg); }
.bl-card__body--stack { display: flex; flex-direction: column; gap: var(--bl-space-lg); }
.bl-card__body--tiles { display: grid; gap: var(--bl-space-sm); }
.bl-card__body--flush { padding: 0; }
/* A whole card that navigates somewhere. */
.bl-card--link { cursor: pointer; transition: border-color var(--bl-transition), background var(--bl-transition); }
.bl-card--link:hover { border-color: var(--bl-accent-line); background: var(--bl-accent-soft); }
/* ── Field, used inside cards instead of .bl-field-wrap ── */
.bl-field { display: flex; flex-direction: column; gap: 6px; }
.bl-field .bl-field-label { margin-bottom: 0; }
/* ── Inline note ── */
.bl-note {
display: flex;
align-items: flex-start;
gap: var(--bl-space-sm);
padding: 10px var(--bl-space-md);
background: var(--bl-accent-soft);
border: 1px solid var(--bl-accent-line);
border-radius: var(--bl-radius-sm);
font-size: var(--bl-fs-sm);
color: var(--bl-accent);
line-height: 1.45;
}
.bl-note svg { flex-shrink: 0; margin-top: 1px; stroke: currentColor; fill: none; }
/* ── Component adjustments when nested in a card ── */
.bl-card .bl-icon-uploader {
padding: 0;
background: none;
border: 0;
border-radius: 0;
}
.bl-card .bl-toggle-row {
padding: 0;
background: none;
border: 0;
}
.bl-card .bl-fields-card {
margin: 0;
border: 0;
border-radius: 0;
}
/* ── Completion methods as selectable tiles ──
The checked state is read off the checkbox with :has(), so the
existing toggleMethod() JS needs no changes. Browsers without
:has() simply show no tint; the checkbox still reads correctly. */
.bl-card__body--tiles .bl-completion-method {
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-md);
padding: var(--bl-space-md);
background: var(--bl-surface);
}
.bl-card__body--tiles .bl-completion-method:last-of-type { border-bottom: 1px solid var(--bl-line); }
.bl-card__body--tiles .bl-completion-method:hover { background: var(--bl-surface-2); }
.bl-card__body--tiles .bl-completion-method:has(.bl-completion-method__checkbox--checked) {
border-color: var(--bl-accent-line);
background: var(--bl-accent-soft);
}
.bl-completion-method__icon { color: var(--bl-ink-3); transition: color var(--bl-transition); }
.bl-completion-method:has(.bl-completion-method__checkbox--checked) .bl-completion-method__icon {
color: var(--bl-accent);
}
/* ── Stages summary row ── */
.bl-stage-summary {
display: flex;
align-items: center;
gap: var(--bl-space-md);
padding: var(--bl-space-lg);
}
.bl-stage-summary__count {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: var(--bl-radius-md);
background: var(--bl-accent-soft);
border: 1px solid var(--bl-accent-line);
color: var(--bl-accent);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bl-font-display);
font-size: var(--bl-fs-lg);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.bl-stage-summary__body { flex: 1; min-width: 0; }
.bl-stage-summary__title {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-body);
font-weight: 600;
color: var(--bl-ink);
}
.bl-stage-summary__meta {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
margin-top: 2px;
line-height: 1.45;
}
.bl-stage-summary__chevron { flex-shrink: 0; color: var(--bl-ink-3); }
.bl-stage-summary__chevron svg { stroke: currentColor; fill: none; display: block; }
/* ── Fixed action bar ──
Fixed rather than sticky, because .app-shell uses overflow:hidden
and position:sticky will not pin inside it.
--bl-formbar-lift raise the bar clear of a fixed bottom nav
--bl-shell-max must match the app shell's max-width
============================================================= */
.bl-form-bar {
position: fixed;
bottom: var(--bl-formbar-lift, 0px);
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--bl-shell-max);
z-index: 30;
padding: var(--bl-space-md) var(--bl-space-md)
calc(var(--bl-space-md) + env(safe-area-inset-bottom, 0px));
background: var(--bl-surface);
border-top: 1px solid var(--bl-line);
box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
[data-theme="dark"] .bl-form-bar { box-shadow: 0 -2px 12px rgba(0,0,0,.4); }
.bl-form-bar .bl-btn-primary {
width: 100%;
margin: 0;
}
/* =============================================================
23. CARD ICONS
A tinted glyph in each card header. Beyond decoration, the
colour gives each section of a long settings page its own
marker, so scrolling back to one is quicker.
============================================================= */
.bl-card__head--with-icon {
display: flex;
align-items: flex-start;
gap: var(--bl-space-md);
}
.bl-card__head--with-icon .bl-card__headtext { flex: 1; min-width: 0; }
.bl-card__icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--bl-radius-sm);
display: flex;
align-items: center;
justify-content: center;
background: var(--bl-accent-soft);
border: 1px solid var(--bl-accent-line);
color: var(--bl-accent);
}
.bl-card__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.bl-card__icon--gold { background: var(--bl-wait-soft); border-color: var(--bl-wait-line); color: var(--bl-wait); }
.bl-card__icon--green { background: var(--bl-ready-soft); border-color: var(--bl-ready-line); color: var(--bl-ready); }
.bl-card__icon--purple { background: var(--bl-hold-soft); border-color: var(--bl-hold-line); color: var(--bl-hold); }
.bl-card__icon--red { background: var(--bl-late-soft); border-color: var(--bl-late-line); color: var(--bl-late); }
/* =============================================================
24. SEGMENTED CONTROL
Radio inputs styled as a single switch. Used for the theme and
text-size settings, so the values post with the form like any
other field.
============================================================= */
.bl-segmented {
display: flex;
padding: 3px;
background: var(--bl-surface-2);
border: 1px solid var(--bl-line);
border-radius: var(--bl-radius-md);
}
.bl-segmented input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.bl-segmented label {
flex: 1;
text-align: center;
padding: 8px 6px;
border-radius: calc(var(--bl-radius-md) - 4px);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-base);
font-weight: 600;
color: var(--bl-ink-3);
cursor: pointer;
user-select: none;
transition: background var(--bl-transition), color var(--bl-transition);
white-space: nowrap;
}
.bl-segmented label:hover { color: var(--bl-ink-2); }
.bl-segmented input:checked + label {
background: var(--bl-surface);
color: var(--bl-accent);
box-shadow: var(--bl-shadow-card);
}
.bl-segmented input:focus-visible + label {
outline: 2px solid var(--bl-accent);
outline-offset: -2px;
}
/* =============================================================
25. CHARACTER COUNTER
Colour carries the meaning: quiet while there is room, gold as
the limit approaches, red once it is reached.
============================================================= */
.bl-char-hint {
font-family: var(--bl-font-mono);
font-size: var(--bl-fs-xs);
color: var(--bl-ink-3);
text-align: right;
margin-top: 4px;
font-variant-numeric: tabular-nums;
transition: color var(--bl-transition);
}
.bl-char-hint.is-warn { color: var(--bl-wait); font-weight: 500; }
.bl-char-hint.is-full { color: var(--bl-late); font-weight: 600; }
/* =============================================================
26. PLACEHOLDER CHIPS
============================================================= */
.bl-chip-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
}
.bl-chip {
font-family: var(--bl-font-mono);
font-size: calc(10px * var(--bl-scale));
font-weight: 500;
padding: 3px 7px;
border-radius: var(--bl-radius-xs);
background: var(--bl-hold-soft);
border: 1px solid var(--bl-hold-line);
color: var(--bl-hold);
white-space: nowrap;
}
/* =============================================================
27. READ-ONLY FIELD
============================================================= */
.bl-field-input[readonly] {
background: var(--bl-surface-3);
color: var(--bl-ink-2);
cursor: default;
}
.bl-field-input[readonly]:focus {
border-color: var(--bl-line);
box-shadow: none;
background: var(--bl-surface-3);
}
.bl-field-note {
font-size: var(--bl-fs-sm);
color: var(--bl-ink-3);
line-height: 1.45;
}
/* =============================================================
28. LOGO UPLOADER VARIANT
Larger, squarer preview than the service-icon uploader.
============================================================= */
.bl-icon-uploader--logo .bl-icon-uploader__preview {
width: 88px;
height: 88px;
border-radius: var(--bl-radius-lg);
border-style: solid;
background: var(--bl-surface-2);
}
.bl-icon-uploader--logo .bl-icon-uploader__preview img { padding: 10px; }
/* =============================================================
29. FIELD GRID
Two fields side by side, collapsing on very narrow screens.
============================================================= */
.bl-field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--bl-space-md);
}
@media (max-width: 22rem) {
.bl-field-grid { grid-template-columns: 1fr; }
}