/* ============================================================================
MachineryCE — design system
Clean, modern, professional. Fully token-driven so light / dark / auto themes
are pure variable swaps. Theme is set server-side via .
========================================================================== */
:root {
/* surfaces */
--bg: #f4f6f9;
--surface: #ffffff;
--surface-2: #f8fafc;
--line: #e6e9ef;
--line-2: #eef1f5;
--topbar-bg: rgba(255,255,255,.86);
--chip-bg: #eef1f5;
/* ink */
--ink: #0f172a;
--ink-2: #334155;
--muted: #64748b;
/* A6: was #94a3b8 (~2.7:1 on --bg — fails WCAG AA for normal text).
#5f6b7a is ~5:1, so faint secondary text is legible. */
--faint: #5f6b7a;
/* brand + status */
--accent: #2563eb;
--accent-d: #1d4ed8;
--accent-2: #4f46e5; /* brand gradient endpoint */
--accent-bg: #eef3ff;
--on-accent: #ffffff;
--ok: #15803d; --ok-bg: #e8f6ec;
--warn: #b45309; --warn-bg: #fdf3e2;
--err: #dc2626; --err-d: #b91c1c; --err-bg: #fdecec;
/* interactive edges */
--line-hover: #cdd4df;
--card-hover: #dbe1ea;
--focus-ring: rgba(37,99,235,.16);
--focus-strong: rgba(37,99,235,.32);
/* code / calculation chain */
--code-bg: #0f172a;
--code-ink: #cbd5e1;
--code-line:#1e293b;
/* fs tree rails + scrollbar */
--rail-ch: #93b4f5;
--scroll: #cbd2dc;
--scroll-h: #aab3c0;
/* shape + depth */
--r-sm: 6px; --r: 9px; --r-lg: 13px; --r-pill: 999px;
--sh-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
--sh-2: 0 2px 4px rgba(15,23,42,.05), 0 6px 16px rgba(15,23,42,.08);
--header-h: 56px;
--ease: 160ms cubic-bezier(.4,0,.2,1);
}
/* ---- dark theme: re-declare the tokens, nothing else changes -------------- */
:root[data-theme="dark"] {
--bg: #0e1320;
--surface: #161c2b;
--surface-2: #1c2435;
--line: #2a3346;
--line-2: #232b3c;
--topbar-bg: rgba(22,28,43,.88);
--chip-bg: #232b3c;
--ink: #e6e9f0;
--ink-2: #b9c2d4;
--muted: #8b95ab;
/* A6: was #6b7589 (~3.7:1 on --surface — fails WCAG AA for normal text).
#8a93a6 is ~5.5:1. */
--faint: #8a93a6;
--accent: #5b8df6;
--accent-d: #7aa4f8;
--accent-2: #7c6ff0;
--accent-bg: #1b2740;
--on-accent: #ffffff;
--ok: #56c878; --ok-bg: #15291c;
--warn: #e0a44d; --warn-bg: #2b2113;
--err: #f1716b; --err-d: #d85249; --err-bg: #2c1719;
--line-hover: #3a4660;
--card-hover: #3a4660;
--focus-ring: rgba(91,141,246,.22);
--focus-strong: rgba(91,141,246,.40);
--code-bg: #0a0e18;
--code-ink: #c3ccdb;
--code-line:#1c2536;
--rail-ch: #4d6da8;
--scroll: #313c52;
--scroll-h: #45526e;
--sh-1: 0 1px 2px rgba(0,0,0,.4);
--sh-2: 0 4px 18px rgba(0,0,0,.5);
}
/* ---- auto: follow the OS unless the user pinned a theme ------------------- */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--bg:#0e1320; --surface:#161c2b; --surface-2:#1c2435; --line:#2a3346;
--line-2:#232b3c; --topbar-bg:rgba(22,28,43,.88); --chip-bg:#232b3c;
--ink:#e6e9f0; --ink-2:#b9c2d4; --muted:#8b95ab; --faint:#6b7589;
--accent:#5b8df6; --accent-d:#7aa4f8; --accent-2:#7c6ff0; --accent-bg:#1b2740;
--ok:#56c878; --ok-bg:#15291c; --warn:#e0a44d; --warn-bg:#2b2113;
--err:#f1716b; --err-d:#d85249; --err-bg:#2c1719;
--line-hover:#3a4660; --card-hover:#3a4660;
--focus-ring:rgba(91,141,246,.22); --focus-strong:rgba(91,141,246,.40);
--code-bg:#0a0e18; --code-ink:#c3ccdb; --code-line:#1c2536;
--rail-ch:#4d6da8; --scroll:#313c52; --scroll-h:#45526e;
--sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 18px rgba(0,0,0,.5);
}
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--ink);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background var(--ease), color var(--ease);
}
a { color: var(--accent); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--accent-d); }
::selection { background: var(--accent-bg); color: var(--accent-d); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-h); }
/* ---- top bar -------------------------------------------------------------- */
header.topbar {
position: sticky; top: 0; z-index: 50;
height: var(--header-h);
background: var(--topbar-bg);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 22px;
padding: 0 24px;
}
header.topbar .brand {
font-size: 16px; font-weight: 700; letter-spacing: -.01em;
color: var(--ink); display: flex; align-items: center; gap: 8px;
}
header.topbar .brand-mark {
width: 22px; height: 22px; border-radius: 7px;
box-shadow: var(--sh-1); flex: 0 0 auto; display: block;
}
header.topbar a {
color: var(--muted); font-weight: 500; font-size: 13.5px;
padding: 6px 2px;
}
header.topbar a:hover { color: var(--ink); }
header.topbar .spacer { flex: 1; }
header.topbar .topbar-user { color: var(--ink-2); font-weight: 500; font-size: 13px; }
/* theme toggle in the topbar */
.theme-toggle {
background: transparent; border: 1px solid var(--line);
color: var(--muted); padding: 5px 10px; border-radius: var(--r-sm);
font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-hover); }
/* language switcher in the topbar (plan R3.M1) — same visual weight as the
theme toggle. Native-language option labels keep dropdown legible. */
.lang-switcher {
background: transparent; border: 1px solid var(--line);
color: var(--muted); padding: 4px 6px; border-radius: var(--r-sm);
font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.2;
}
.lang-switcher:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-hover); }
/* Unify all top-bar control chips to one height, radius and border so the row
reads as a consistent set instead of mismatched pills/buttons. */
header.topbar .theme-toggle,
header.topbar .lang-switcher,
header.topbar .storage-meter,
header.topbar .topbar-admin {
height: 30px; box-sizing: border-box;
display: inline-flex; align-items: center;
border: 1px solid var(--line); border-radius: var(--r-sm);
font-size: 12px; font-weight: 600;
}
/* ---- layout --------------------------------------------------------------- */
.layout { display: flex; min-height: calc(100vh - var(--header-h)); }
nav.side {
width: 236px; flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--line);
padding: 14px 12px 28px;
position: sticky; top: var(--header-h);
height: calc(100vh - var(--header-h));
overflow-y: auto;
}
nav.side a {
display: flex; align-items: center;
padding: 7px 12px; margin: 1px 0;
color: var(--ink-2); font-size: 13px; font-weight: 500;
border-radius: var(--r-sm);
transition: background var(--ease), color var(--ease);
}
nav.side a:hover { background: var(--surface-2); color: var(--ink); }
nav.side a.active { background: var(--accent-bg); color: var(--accent-d); font-weight: 600; }
nav.side .group {
padding: 16px 12px 5px;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--faint);
}
nav.side .group:first-child {
padding-top: 4px; font-size: 13px; text-transform: none; letter-spacing: -.01em;
color: var(--ink); font-weight: 700;
}
main { flex: 1; min-width: 0; padding: 30px 38px 56px; max-width: 1180px; }
/* ---- typography ----------------------------------------------------------- */
h1 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 3px; }
h2 {
font-size: 15px; font-weight: 650; margin: 30px 0 12px;
padding-bottom: 7px; border-bottom: 1px solid var(--line);
letter-spacing: -.01em;
}
h3 { font-size: 13.5px; font-weight: 650; margin: 18px 0 8px; }
.sub { color: var(--muted); margin: 0 0 22px; font-size: 13.5px; max-width: 80ch; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
p { margin: 8px 0; }
/* ---- panels & cards ------------------------------------------------------- */
.panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 20px;
margin-bottom: 16px;
box-shadow: var(--sh-1);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
gap: 14px; margin-bottom: 18px;
}
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 16px 18px;
box-shadow: var(--sh-1);
transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); border-color: var(--card-hover); }
.card .lbl {
color: var(--muted); font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.card .big { font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.card a.small { display: inline-block; margin-top: 8px; font-weight: 600; }
/* ---- tables --------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
th, td {
text-align: left; padding: 9px 12px;
border-bottom: 1px solid var(--line-2); vertical-align: top;
}
th {
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .055em; color: var(--muted);
background: var(--surface-2); border-bottom: 1px solid var(--line);
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--ease); }
.panel table tr:hover td, main > table tr:hover td { background: var(--surface-2); }
table a { font-weight: 600; }
/* ---- forms ---------------------------------------------------------------- */
label {
display: block; font-size: 11.5px; font-weight: 600;
color: var(--ink-2); margin: 12px 0 4px;
}
label > input[type=checkbox] { margin-right: 6px; vertical-align: -1px; }
/* `input:not([type])` catches the same defaults a bare `` element gets —
browsers treat the missing attribute as type=text, but the `[type=text]`
attribute selector does NOT match unless the attribute is explicitly set,
which previously left some inputs un-styled and visually cramped. */
input:not([type]),
input[type=text], input[type=password], input[type=number], input[type=email],
input[type=date], input[type=file], select, textarea {
width: 100%; padding: 8px 11px;
border: 1px solid var(--line); border-radius: var(--r-sm);
font-size: 13px; font-family: inherit; color: var(--ink);
background: var(--surface);
transition: border-color var(--ease), box-shadow var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--line-hover); }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--focus-ring);
}
textarea { min-height: 70px; resize: vertical; line-height: 1.5; }
/* File inputs: style the native picker button so uploads match the rest of the
app instead of the OS-default "Velg fil / Choose file" control. Global —
applies to every . */
input[type=file] {
padding: 5px 8px; background: var(--surface-2); cursor: pointer;
color: var(--muted); font-size: 12.5px;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
font: inherit; font-weight: 600;
margin: 0 12px 0 0; padding: 6px 14px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface); color: var(--ink);
cursor: pointer;
transition: background var(--ease), border-color var(--ease), color var(--ease);
}
input[type=file]:hover::file-selector-button,
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover {
background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
/* Fully-branded file control built by site.js (button + filename text). The
native input is wrapped and visually hidden but stays in the form. */
.file-field { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-field input[type=file] {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); border: 0; background: none;
}
.file-field-btn {
font: inherit; font-weight: 600; font-size: 12.5px;
padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface); color: var(--ink); cursor: pointer;
transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.file-field-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.file-field-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.file-field-name { font-size: 12.5px; color: var(--muted); }
.file-field-name.has-file { color: var(--ink); font-weight: 500; }
/* Upload rows (file + caption + submit on one line): give the three visible
controls one uniform height and bottom-align them, so the label-less submit
button lines up neatly with the labelled inputs. */
.upload-row { align-items: flex-end; gap: 8px; }
.upload-row input[type=text],
.upload-row .file-field-btn,
.upload-row > button {
height: 38px; box-sizing: border-box;
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 160px; }
/* ---- buttons -------------------------------------------------------------- */
button, .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
padding: 8px 16px; border-radius: var(--r-sm);
font-size: 13px; font-weight: 600; font-family: inherit;
cursor: pointer; line-height: 1.2;
transition: background var(--ease), box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
button:hover, .btn:hover {
background: var(--accent-d); border-color: var(--accent-d);
/* Re-assert color: when the .btn is an , the global a:hover rule has
higher specificity (0,1,1) than .btn alone (0,1,0) and would otherwise
change the text colour to var(--accent-d) — i.e. invisible against the
hover background. .btn:hover is (0,2,0) so this wins. */
color: var(--on-accent);
text-decoration: none; box-shadow: var(--sh-1);
}
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-strong); }
.btn.ghost {
background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
}
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-hover); }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.danger:hover { background: var(--err-d); border-color: var(--err-d); color: #fff; }
.btn.sm, button.sm { padding: 4px 10px; font-size: 12px; border-radius: 5px; }
p > .btn, p > button { margin-right: 6px; }
/* ---- badges & tags -------------------------------------------------------- */
.badge {
display: inline-flex; align-items: center;
padding: 2px 9px; border-radius: var(--r-pill);
font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.badge-none { background: var(--chip-bg); color: var(--muted); }
.badge-pl-a, .badge-pl-b { background: var(--err-bg); color: var(--err); }
.badge-pl-c { background: var(--warn-bg); color: var(--warn); }
.badge-pl-d, .badge-pl-e { background: var(--ok-bg); color: var(--ok); }
.tag {
display: inline-flex; align-items: center;
background: var(--chip-bg); border: 1px solid var(--line);
border-radius: var(--r-pill); padding: 1px 9px;
font-size: 11px; font-weight: 600; color: var(--ink-2);
margin: 1px 2px 1px 0;
}
.tag.danger { background: var(--err-bg); color: var(--err); border-color: var(--err-bg); }
.pass { color: var(--ok); font-weight: 700; }
.fail { color: var(--err); font-weight: 700; }
/* ---- alerts --------------------------------------------------------------- */
.flash, .warnbox, .errbox, .okbox {
border-radius: var(--r); padding: 11px 15px;
margin-bottom: 16px; font-size: 13px;
border: 1px solid transparent; border-left-width: 3px;
}
.flash.info { background: var(--accent-bg); color: var(--accent-d); border-left-color: var(--accent); }
.flash.success, .okbox { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok); }
.flash.error, .errbox { background: var(--err-bg); color: var(--err); border-left-color: var(--err); }
.flash.warn, .warnbox { background: var(--warn-bg); color: var(--warn); border-left-color: var(--warn); }
.warnbox ul, .errbox ul, .okbox ul { margin: 6px 0 0; padding-left: 20px; }
/* ---- code / calculation chain -------------------------------------------- */
pre {
background: var(--code-bg); color: var(--code-ink);
padding: 14px 16px; border-radius: var(--r);
overflow-x: auto; font-size: 12px; line-height: 1.6;
font-family: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
border: 1px solid var(--code-line);
}
code {
background: var(--surface-2); border: 1px solid var(--line-2);
padding: 1px 5px; border-radius: 4px; font-size: 12px;
font-family: "SF Mono", Consolas, monospace; color: var(--ink-2);
}
pre code { background: none; border: none; padding: 0; color: inherit; }
/* ---- disclosure (details/summary) ---------------------------------------- */
details {
border: 1px solid var(--line); border-radius: var(--r);
padding: 0; margin: 8px 0; background: var(--surface);
}
details[open] { box-shadow: var(--sh-1); }
details summary {
cursor: pointer; font-weight: 600; color: var(--ink-2);
padding: 10px 14px; list-style: none; font-size: 13px;
transition: background var(--ease);
}
details summary:hover { background: var(--surface-2); }
details summary::-webkit-details-marker { display: none; }
details summary::before {
content: "›"; display: inline-block; margin-right: 8px;
transition: transform var(--ease); color: var(--faint); font-weight: 700;
}
details[open] summary::before { transform: rotate(90deg); }
details > *:not(summary) { padding: 0 14px 14px; }
details.panel { padding: 0; }
/* Global collapsible header = a lighter "title bar" (--chip-bg), so every
disclosure panel across the app reads the same way as the hazard interview:
bar (lightest) sits clearly above the panel body. */
details.panel > summary {
padding: 14px 18px;
background: var(--chip-bg);
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
details.panel:not([open]) > summary { border-radius: var(--r-lg); }
details.panel > summary:hover { background: var(--card-hover); }
details.panel[open] > summary { border-bottom: 1px solid var(--line); }
details.panel > *:not(summary) { padding: 14px 18px; }
/* ---- functional-safety tree ---------------------------------------------- */
.tree { font-size: 13px; }
.tree .sb {
border-left: 3px solid var(--accent); padding: 14px 16px;
margin: 12px 0; background: var(--surface); border-radius: 0 var(--r) var(--r) 0;
box-shadow: var(--sh-1);
}
.tree .ch { border-left: 2px solid var(--rail-ch); padding: 6px 0 6px 14px; margin: 10px 0; }
.tree .bl { border-left: 2px solid var(--line); padding: 4px 0 4px 14px; margin: 8px 0; }
/* ---- guidance layer (Module 23) ------------------------------------------ */
details.help-about {
border-color: var(--accent-bg); background: var(--accent-bg);
}
:root[data-theme="dark"] details.help-about,
:root[data-theme="auto"] details.help-about { background: var(--accent-bg); }
details.help-about > summary,
details.help-about > summary:hover {
color: var(--accent-d); font-weight: 650;
/* keep the blue guidance boxes blue — don't let the grey title-bar fill cover them */
background: transparent;
}
details.help-about > summary::before { color: var(--accent); }
details.help-about[open] > summary { border-bottom-color: rgba(37,99,235,.18); }
.help-body { color: var(--ink-2); font-size: 13px; }
.help-body p { margin: 7px 0; }
.help-body ul { margin: 8px 0; padding-left: 20px; }
.help-body li { margin: 4px 0; }
.field-hint {
display: block; font-size: 11.5px; color: var(--muted);
margin: 2px 0 4px; line-height: 1.45;
}
.field-q {
display: inline-flex; align-items: center; justify-content: center;
width: 15px; height: 15px; border-radius: 999px;
background: var(--accent-bg); color: var(--accent-d);
font-size: 10px; font-weight: 700; cursor: help; margin-left: 5px;
vertical-align: middle;
}
.help-inline {
background: var(--accent-bg); color: var(--accent-d);
border-radius: var(--r-sm); padding: 8px 12px; margin: 6px 0 12px;
font-size: 12.5px; line-height: 1.5;
}
/* option cards — radio-card picker for guided choices (project type, etc.) */
.option-cards { display: grid; gap: 10px; margin-top: 6px; }
.option-card {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--surface);
cursor: pointer;
transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
margin: 0;
}
.option-card:hover { border-color: var(--line-hover); background: var(--surface-2); }
.option-card input[type=radio] { margin-top: 3px; flex-shrink: 0; }
.option-card:has(input:checked) {
border-color: var(--accent); background: var(--accent-bg);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.oc-body { display: flex; flex-direction: column; gap: 4px; }
.oc-title { font-weight: 650; color: var(--ink); font-size: 14px; }
.oc-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.oc-result { font-size: 12px; color: var(--muted); margin-top: 4px;
padding-top: 6px; border-top: 1px solid var(--line-2); }
.option-card:has(input:checked) .oc-result { color: var(--accent-d); border-top-color: rgba(37,99,235,.15); }
/* wizard question rows */
.wizard-questions { margin: 8px 0; }
.wizard-q {
display: flex; align-items: flex-start; gap: 14px;
padding: 12px 14px; border-bottom: 1px solid var(--line-2);
}
.wizard-q:last-child { border-bottom: none; }
.wizard-q .yn { display: flex; gap: 8px; flex-shrink: 0; padding-top: 2px; }
.wizard-q .yn label {
display: inline-flex; align-items: center; gap: 4px;
margin: 0; padding: 4px 10px; border: 1px solid var(--line);
border-radius: var(--r-pill); cursor: pointer; font-size: 12px;
font-weight: 600; color: var(--ink-2); background: var(--surface);
transition: all var(--ease);
}
.wizard-q .yn label:hover { background: var(--surface-2); border-color: var(--line-hover); }
.wizard-q .yn input[type=radio] { width: 13px; height: 13px; }
.wizard-q .yn label:has(input:checked) {
background: var(--accent-bg); border-color: var(--accent); color: var(--accent-d);
}
.wizard-q .qtext { flex: 1; }
.wizard-q .qtext strong { display: block; color: var(--ink); margin-bottom: 2px; }
.wizard-q .qtext .qexp { font-size: 12px; color: var(--muted); line-height: 1.5; }
/* getting-started / onboarding panel */
.onboarding {
background: linear-gradient(135deg, var(--accent-bg), var(--surface));
border: 1px solid var(--line);
}
.onboarding ol { margin: 8px 0; padding-left: 22px; }
.onboarding li { margin: 5px 0; }
/* guided progress stepper */
.stepper { list-style: none; margin: 6px 0; padding: 0; }
.stepper li {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 12px; border-radius: var(--r-sm); margin: 2px 0;
transition: background var(--ease);
}
.stepper li:hover { background: var(--surface-2); }
.stepper .dot {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; margin-top: 1px;
}
.stepper .done .dot { background: var(--ok-bg); color: var(--ok); }
.stepper .todo .dot { background: var(--chip-bg); color: var(--muted); border: 1px dashed var(--line-hover); }
.stepper .next .dot { background: var(--accent); color: var(--on-accent); }
.stepper .step-label { font-weight: 600; color: var(--ink); }
.stepper .done .step-label { color: var(--muted); }
.stepper .step-hint { font-size: 12px; color: var(--muted); }
.next-banner {
background: var(--accent-bg); border: 1px solid transparent;
border-left: 3px solid var(--accent); color: var(--accent-d);
border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px;
}
.next-banner a.btn { margin-top: 8px; }
/* ---- misc ----------------------------------------------------------------- */
.inline-form { display: inline; }
/* Per-row action buttons in list tables (Edit / Delete). */
.row-actions { white-space: nowrap; display: flex; gap: 4px; align-items: center; }
.row-actions .btn.sm { padding: 3px 8px; }
.row-actions .inline-form { display: inline-flex; margin: 0; }
/* Inline-edit row that swaps in when ?edit=N is set. */
tr.editing > td { background: var(--accent-bg); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.row-edit-form { padding: 8px 4px; }
.row-edit-form .row { margin-bottom: 6px; }
/* SF schematic drag-and-drop palette + drop targets (Phase B). */
.sf-palette { margin: 10px 0; padding: 10px; }
.sf-palette-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin-top: 8px;
}
.sf-palette-section { display: flex; flex-direction: column; gap: 4px; }
.sf-palette-section > .lbl {
text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px;
color: var(--muted); margin-bottom: 2px;
}
.sf-palette-item {
padding: 6px 10px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
cursor: grab;
font-size: 12.5px;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
}
.sf-palette-thumb {
width: 28px; height: 28px;
object-fit: contain;
background: var(--surface-2);
border-radius: 3px;
padding: 2px;
flex-shrink: 0;
}
/* ============================================================== */
/* Component-library browser modal (Function detail page picker) */
/* ============================================================== */
.library-browser {
width: min(1100px, 92vw);
max-height: 86vh;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
color: var(--ink);
box-shadow: 0 12px 48px rgba(0,0,0,0.45);
}
.library-browser::backdrop {
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
}
.library-browser-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
border-radius: var(--r) var(--r) 0 0;
}
.library-browser-head .spacer { flex: 1; }
.library-browser-filters {
display: flex; flex-direction: column; gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
#lib-search {
width: 100%;
padding: 8px 12px;
font-size: 14px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-sm);
color: var(--ink);
}
.lib-filter-group {
display: flex; flex-wrap: wrap; gap: 4px;
}
.lib-pill {
padding: 4px 10px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink);
cursor: pointer;
font-size: 12px;
transition: background 0.1s, border-color 0.1s;
}
.lib-pill:hover { border-color: var(--accent); }
.lib-pill.is-active {
background: var(--accent-bg);
border-color: var(--accent);
color: var(--accent-d);
font-weight: 600;
}
.library-browser-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
padding: 14px;
overflow-y: auto;
max-height: 60vh;
}
.lib-card {
display: flex; gap: 10px;
padding: 10px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-sm);
cursor: pointer;
transition: border-color 0.1s, transform 0.05s;
}
.lib-card:hover {
border-color: var(--accent);
background: var(--accent-bg);
}
.lib-card:active { transform: scale(0.99); }
.lib-card.is-verified { border-left: 3px solid var(--ok); }
.lib-card-img,
.lib-card-img-placeholder {
width: 56px; height: 56px;
object-fit: contain;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 4px;
flex-shrink: 0;
}
.lib-card-img-placeholder {
display: flex; align-items: center; justify-content: center;
color: var(--muted);
font-size: 22px;
border-style: dashed;
}
.lib-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-card-head { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.lib-card-head .tag { font-size: 10px; padding: 1px 6px; }
.lib-card-title {
font-weight: 600;
font-size: 13px;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lib-card-desc {
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
margin: 2px 0;
}
/* Library item thumbnail (Library detail page). */
.lib-item-thumb {
width: 44px; height: 44px;
object-fit: contain;
background: var(--surface-2);
border-radius: 4px;
padding: 3px;
border: 1px solid var(--line);
}
.lib-item-thumb-placeholder {
display: inline-flex;
align-items: center; justify-content: center;
width: 44px; height: 44px;
background: var(--surface-2);
border: 1px dashed var(--line);
border-radius: 4px;
font-size: 18px;
color: var(--muted);
}
/* Photo galleries — machine front page, hazards, protective measures.
A flex-wrapped row of cards; thumbnails crop to a square via object-fit. */
.img-gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
margin: 4px 0;
}
.img-card {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
max-width: 160px;
}
.img-card figcaption { text-align: center; max-width: 160px; word-break: break-word; }
.img-thumb {
width: 140px; height: 140px;
object-fit: cover;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r);
display: block;
}
.img-thumb.sm { width: 64px; height: 64px; border-radius: var(--r-sm); }
/* Inline measure photos sit tighter than the full hazard/machine gallery. */
.m-photos { gap: 6px; margin-top: 6px; }
.m-photos .img-card { max-width: 64px; }
.m-photo-upload {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
font-size: 11px;
}
.m-photo-upload input[type=file] { max-width: 130px; font-size: 11px; }
/* Topbar storage meter — always-visible used/quota indicator. */
.storage-meter {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
color: var(--muted);
font-size: 12px;
padding: 3px 8px;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface-2);
white-space: nowrap;
}
.storage-meter:hover { border-color: var(--accent); color: var(--ink-2); }
.storage-meter-icon { font-size: 12px; line-height: 1; }
.storage-meter-bar {
width: 70px; height: 6px;
background: var(--line);
border-radius: var(--r-pill);
overflow: hidden;
}
.storage-meter-fill {
display: block; height: 100%;
background: var(--ok);
border-radius: var(--r-pill);
transition: width .3s ease;
}
.storage-meter.near .storage-meter-fill { background: var(--warn); }
.storage-meter.over .storage-meter-fill { background: var(--err); }
.storage-meter.near { color: var(--warn); border-color: var(--warn); }
.storage-meter.over { color: var(--err); border-color: var(--err); }
.storage-meter-label { font-variant-numeric: tabular-nums; }
.storage-kofi {
display: inline-flex; align-items: center;
font-size: 12px; text-decoration: none;
padding: 3px 8px; border-radius: var(--r-pill);
background: var(--warn-bg); color: var(--warn);
white-space: nowrap;
}
.storage-kofi:hover { filter: brightness(.97); }
.topbar-admin {
font-size: 12px; text-decoration: none; color: var(--ink-2);
padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.topbar-admin:hover { border-color: var(--accent); color: var(--accent); }
/* Storage breakdown page + admin usage bars. */
.storage-usage-bar {
width: 100%; height: 12px; background: var(--line);
border-radius: var(--r-pill); overflow: hidden; margin: 6px 0;
}
.storage-usage-fill { display: block; height: 100%; background: var(--ok); }
.storage-usage-fill.near { background: var(--warn); }
.storage-usage-fill.over { background: var(--err); }
@media (max-width: 720px) {
.storage-meter-label, .storage-meter-bar { display: none; }
}
.sf-palette-item:hover { border-color: var(--accent); background: var(--accent-bg); }
.sf-palette-item.dragging { opacity: 0.5; cursor: grabbing; }
.sf-droptarget { transition: background 0.1s, outline 0.1s; }
.sf-droptarget.drop-hover {
background: var(--accent-bg);
outline: 2px dashed var(--accent);
outline-offset: -2px;
}
/* "+ Add element from library" CTA inside each channel card. Full-width
so it's the obvious next action when a channel is empty. */
.fs-ch-add-btn {
display: block;
width: 100%;
margin-top: 8px;
font-size: 12px;
}
.disclaimer {
font-size: 11.5px; color: var(--faint);
border-top: 1px solid var(--line); margin-top: 36px; padding-top: 14px;
}
/* Global site footer — always visible (Privacy / Terms / Donate + the
liability note). Kept low-key so it doesn't compete with page content. */
.sitefooter {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
font-size: 11.5px; color: var(--faint);
border-top: 1px solid var(--line);
margin-top: 8px; padding: 14px 24px;
}
.sitefooter .sitefooter-note { max-width: 60ch; }
.sitefooter .spacer { flex: 1 1 auto; }
.sitefooter a { color: var(--faint); text-decoration: underline; }
.sitefooter a:hover { color: var(--text); }
/* Legal pages (Privacy, Terms) — comfortable reading measure. */
.legal-page { max-width: 70ch; }
.legal-page h2 { margin-top: 1.6em; font-size: 1.05rem; }
.legal-page .legal-meta { font-size: 12px; color: var(--faint); margin-bottom: 1.4em; }
/* Auth forms (Register / Login override) — narrow, single-column. */
.auth-form { max-width: 40ch; }
.auth-form .field { margin: 14px 0; }
.auth-form .field label { display: block; margin-bottom: 4px; }
.auth-form .field input[type="email"],
.auth-form .field input[type="password"] { width: 100%; }
.auth-form .field-check label { display: flex; gap: 8px; align-items: baseline; }
.auth-form .field-check input { width: auto; }
.field-error { display: block; color: var(--err); font-size: 12px; margin-top: 4px; }
.btn-primary { margin-top: 6px; }
/* ---- Accessibility (plan A6) -------------------------------------------- */
/* display:contents lets a semantic wrapper (e.g.