/* ==========================================================================================
Safety and compliance: the shared ss-* design system (phase 1 of the safety rebuild).
One stylesheet for every Safety page (Permits, Forms, Documents, SWMS and what follows) so they
read as one product. Source: the approved "Site-ready, combined" mockup, translated onto
design-tokens.css. Global on purpose: scoped .razor.css only styles markup in its own file.
Page shape:
data-uhover-off stops card-hover.js giving every panel its lift; ss-* controls own their hover.
Rules: colours come only from tokens. Red is only for overdue, expired, lapsed and incidents
(is-over) and destructive buttons (is-danger). Every state carries an icon or words as well as a
colour. Sentence case, no all-caps. Phone is <= 767.98px: 44px tap targets and nothing wider
than a 300px screen.
========================================================================================== */
/* Aliases onto tokens (no new colours): structural ink, hazard-tape yellow, fonts, spine colours. */
:root {
--ss-ink: var(--neutral-900, #1f2933);
--ss-hazard: var(--warning-500, #f59e0b);
--ss-sans: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
--ss-display: var(--font-display, 'Archivo', 'Segoe UI', Helvetica, Arial, sans-serif);
--ss-k-swms: var(--neutral-900, #1f2933);
--ss-k-check: var(--info-600, #0891b2);
--ss-k-talk: var(--warning-600, #d97706);
}
/* ---- State rungs ---------------------------------------------------------------------------
One set of colours per state, shared by every stateful primitive: --ss-k solid (bars, rails),
--ss-kt text, --ss-kb tint, --ss-kl line, --ss-ki icon. Each primitive re-declares the neutral
set, so a state never leaks from a parent into the chips inside it. */
:where(.ss-chip, .ss-row, .ss-card, .ss-tr, .ss-attn-item, .ss-count, .ss-pill-n, .ss-rec-ic, .ss-callout, .ss-meter, .ss-val),
:where(.ss-chip, .ss-row, .ss-card, .ss-tr, .ss-attn-item, .ss-count, .ss-pill-n, .ss-rec-ic, .ss-callout, .ss-meter, .ss-val):is(.is-neutral, .is-draft) {
--ss-k: var(--neutral-400, #cbd0d6);
--ss-kt: var(--neutral-800, #333d47);
--ss-kb: var(--neutral-100, #f4f4f2);
--ss-kl: var(--neutral-300, #e5e7eb);
--ss-ki: var(--neutral-600, #6b7280);
}
:where(.ss-chip, .ss-row, .ss-card, .ss-tr, .ss-attn-item, .ss-count, .ss-pill-n, .ss-rec-ic, .ss-callout, .ss-meter, .ss-val).is-ok {
--ss-k: var(--success-600, #16a34a);
--ss-kt: var(--success-800, #166534);
--ss-kb: var(--success-50, #f0fdf4);
--ss-kl: var(--success-200, #bbf7d0);
--ss-ki: var(--success-700, #15803d);
}
:where(.ss-chip, .ss-row, .ss-card, .ss-tr, .ss-attn-item, .ss-count, .ss-pill-n, .ss-rec-ic, .ss-callout, .ss-meter, .ss-val).is-soon {
--ss-k: var(--warning-500, #f59e0b);
--ss-kt: var(--warning-800, #92400e);
--ss-kb: var(--warning-50, #fffbeb);
--ss-kl: var(--warning-200, #fde68a);
--ss-ki: var(--warning-700, #b45309);
}
:where(.ss-chip, .ss-row, .ss-card, .ss-tr, .ss-attn-item, .ss-count, .ss-pill-n, .ss-rec-ic, .ss-callout, .ss-meter, .ss-val).is-over {
--ss-k: var(--danger-600, #dc2626);
--ss-kt: var(--danger-800, #991b1b);
--ss-kb: var(--danger-50, #fef2f2);
--ss-kl: var(--danger-200, #fecaca);
--ss-ki: var(--danger-700, #b91c1c);
}
:where(.ss-chip, .ss-row, .ss-card, .ss-tr, .ss-attn-item, .ss-count, .ss-pill-n, .ss-rec-ic, .ss-callout, .ss-meter, .ss-val).is-info {
--ss-k: var(--brand-600, #2563eb);
--ss-kt: var(--brand-800, #1e40af);
--ss-kb: var(--brand-50, #eff6ff);
--ss-kl: var(--brand-200, #bfdbfe);
--ss-ki: var(--brand-700, #1d4ed8);
}
/* is-neutral and is-draft use the neutral set (first rule); draft is told apart by a dashed edge. */
/* ---- Page ---------------------------------------------------------------------------------- */
/* Page wrapper: the warm canvas behind a Safety page. */
.ss-page { background: var(--neutral-100, #f4f4f2); min-height: 100vh; color: var(--neutral-900, #1f2933); }
/* Page body: lines up with the hero and the hub tab strip (1.6rem in on desktop, 1rem on a phone). */
.ss-body { min-width: 0; padding: 22px 1.6rem 56px; }
/* Stack: even vertical rhythm between the blocks of a page body. */
.ss-stack { display: grid; gap: 20px; min-width: 0; }
.ss-stack > * { min-width: 0; }
/* Visually hidden: read by screen readers, not shown. */
.ss-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* ---- Headings ------------------------------------------------------------------------------ */
/* Section heading: h2 with an optional count, a one-line explanation and a right-hand action. */
.ss-section + .ss-section { margin-top: 36px; }
.ss-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 14px; }
.ss-sechead-t { flex: 1 1 320px; min-width: 0; }
.ss-sechead h2 {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0;
font: 800 22px/1.15 var(--ss-display); letter-spacing: -0.02em; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere;
}
.ss-sechead p { margin: 6px 0 0; max-width: 720px; font-size: 14px; line-height: 1.5; color: var(--neutral-700, #4b5563); text-wrap: pretty; }
.ss-sechead-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Group heading inside a section (a day, a folder, a status): h3, a quiet note, an optional link. */
.ss-subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 10px; }
.ss-subhead:first-child { margin-top: 0; }
.ss-subhead h3 { margin: 0; font: 700 17px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
.ss-subhead > span { font-size: 13px; color: var(--neutral-700, #4b5563); }
.ss-subhead > :is(.ss-link, .ss-subhead-act) { margin-left: auto; }
/* Count badge beside a heading; is-over for a count of overdue things, is-soon for due soon. */
.ss-count {
display: inline-grid; place-items: center; flex: none; min-width: 24px; height: 24px; padding: 0 8px;
border-radius: var(--radius-pill, 999px); background: var(--ss-kb); color: var(--ss-kt); box-shadow: inset 0 0 0 1px var(--ss-kl);
font: 700 12.5px/1 var(--ss-sans); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
/* ---- Buttons and links --------------------------------------------------------------------- */
/* Buttons: ss-btn is the blue primary; is-secondary, is-quiet, is-danger (destructive only), is-sm, is-block. */
.ss-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; max-width: 100%;
min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px;
background: var(--brand-600, #2563eb); color: var(--neutral-0, #ffffff); box-shadow: var(--shadow-xs);
font: 600 14px/1.2 var(--ss-sans); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease), border-color var(--dur-fast, 120ms) var(--ease-out, ease), color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.ss-btn > i { font-size: 15px; line-height: 1; }
.ss-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--brand-700, #1d4ed8); color: var(--neutral-0, #ffffff); }
.ss-btn:disabled, .ss-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ss-btn.is-secondary { background: var(--neutral-0, #ffffff); color: var(--brand-700, #1d4ed8); border-color: var(--neutral-400, #cbd0d6); }
.ss-btn.is-secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--brand-50, #eff6ff); border-color: var(--brand-300, #93c5fd); color: var(--brand-800, #1e40af); }
.ss-btn.is-quiet { background: transparent; color: var(--neutral-800, #333d47); box-shadow: none; }
.ss-btn.is-quiet:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--neutral-200, #e9e9e6); color: var(--neutral-900, #1f2933); }
.ss-btn.is-danger { background: var(--neutral-0, #ffffff); color: var(--danger-700, #b91c1c); border-color: var(--danger-200, #fecaca); box-shadow: none; }
.ss-btn.is-danger:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--danger-50, #fef2f2); color: var(--danger-800, #991b1b); }
.ss-btn.is-sm { min-height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; }
.ss-btn.is-sm > i { font-size: 14px; }
.ss-btn.is-block { display: flex; width: 100%; }
/* Icon-only button for row actions (view, download, archive); always has an aria-label. */
.ss-icon-btn {
display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
border: 0; border-radius: 9px; background: transparent; color: var(--neutral-600, #6b7280);
font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer;
transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease), color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.ss-icon-btn:hover:not(:disabled) { background: var(--neutral-200, #e9e9e6); color: var(--neutral-900, #1f2933); }
.ss-icon-btn.is-danger:hover:not(:disabled) { background: var(--danger-50, #fef2f2); color: var(--danger-700, #b91c1c); }
.ss-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Quiet text link (Open, See every date); never an arrow after it. Works on and . */
.ss-link {
display: inline; padding: 0; border: 0; background: none; color: var(--brand-700, #1d4ed8);
font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ss-link:hover { color: var(--brand-800, #1e40af); text-decoration: underline; text-underline-offset: 3px; }
/* Keyboard focus: one visible ring on every interactive ss-* control. */
:is(.ss-btn, .ss-icon-btn, .ss-link, .ss-pill, .ss-attn-item, .ss-book, .ss-crumbs a, .ss-crumbs button, .ss-seg > button, .ss-seg > a, .ss-sort select):focus-visible {
outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px;
}
/* ---- Status chips -------------------------------------------------------------------------- */
/* Status chip: is-ok, is-soon, is-over (red: overdue, expired, lapsed, incidents), is-draft, is-neutral, is-info; always an icon. */
.ss-chip {
display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; min-height: 26px; padding: 3px 10px;
border: 1px solid var(--ss-kl); border-radius: var(--radius-pill, 999px); background: var(--ss-kb); color: var(--ss-kt);
font: 600 12.5px/1.25 var(--ss-sans); text-align: left; font-variant-numeric: tabular-nums;
}
.ss-chip > i { flex: none; font-size: 13px; line-height: 1; color: var(--ss-ki); }
.ss-chip.is-draft { border-style: dashed; border-color: var(--neutral-400, #cbd0d6); background: var(--neutral-0, #ffffff); }
.ss-chip.is-sm { min-height: 22px; padding: 2px 8px; gap: 5px; font-size: 12px; }
.ss-chip.is-sm > i { font-size: 12px; }
/* Value coloured by its state (a date, a count) inside text; pair it with an icon or words. */
.ss-val { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ss-kt); font-variant-numeric: tabular-nums; }
.ss-val > i { color: var(--ss-ki); }
/* High-risk construction work tag: the one hazard-tape mark; the stripes never colour text. */
.ss-hrcw {
position: relative; display: inline-flex; align-items: center; max-width: 100%; min-height: 24px; padding: 2px 9px 2px 15px;
overflow: hidden; border-radius: 6px; background: var(--neutral-50, #f8f8f7); box-shadow: inset 0 0 0 1px var(--neutral-300, #e5e7eb);
font: 600 12.5px/1.3 var(--ss-sans); color: var(--neutral-800, #333d47);
}
.ss-hrcw::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
background: repeating-linear-gradient(135deg, var(--ss-hazard) 0 3px, var(--ss-ink) 3px 6px);
}
/* ---- Record parts (shared by rows, cards and table cells) ---------------------------------- */
/* Record icon tile; takes a kind (is-over etc.) only when the record itself is in that state. */
.ss-rec-ic {
display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
background: var(--ss-kb); color: var(--ss-ki); box-shadow: inset 0 0 0 1px var(--ss-kl); font-size: 17px; line-height: 1;
}
/* Record text column: title, meta line and chips. */
.ss-rec-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
/* Record title; as a or it resets to text (add ss-stretch to make the whole record the target). */
.ss-rec-title { margin: 0; font: 600 15px/1.3 var(--ss-sans); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
:is(button, a).ss-rec-title { display: block; padding: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer; }
:is(button, a).ss-rec-title:hover { color: var(--brand-700, #1d4ed8); text-decoration: underline; text-underline-offset: 3px; }
/* Meta line: short facts separated by dots (type, number, "Raised by Luke", date). */
.ss-rec-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-rec-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background: var(--neutral-500, #9aa3ad); vertical-align: middle; }
.ss-rec-meta i { margin-right: 5px; color: var(--neutral-500, #9aa3ad); }
/* Chips under the title. */
.ss-rec-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
/* Trailing state column (chip, date, meter), right-aligned on desktop. */
.ss-rec-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; font-size: 13px; color: var(--neutral-700, #4b5563); }
/* Trailing actions (buttons, icon buttons); is-inline keeps them on the title's line on a phone. */
.ss-rec-act { display: flex; align-items: center; gap: 4px; flex: none; }
/* Who raised or submitted a record: a small avatar and "Raised by Luke". */
.ss-by { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--neutral-700, #4b5563); }
.ss-by > .ss-av { width: 22px; height: 22px; font-size: 9.5px; box-shadow: none; }
/* Stretched target: the record's title button covers its whole row or card; other controls sit above it. */
.ss-row, .ss-card, .ss-tr { position: relative; }
.ss-stretch { position: static; }
.ss-stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.ss-stretch:focus-visible { outline: none; }
.ss-stretch:focus-visible::after { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: -3px; }
.ss-card .ss-stretch::after { border-radius: var(--radius-lg, 16px); }
:where(.ss-row, .ss-card, .ss-tr) :where(button, a, input, select, textarea, summary):not(.ss-stretch) { position: relative; z-index: 1; }
/* ---- Record rows --------------------------------------------------------------------------- */
/* Record rows: a white list, one record per line; is-soon and is-over add a rail on the left. */
.ss-rows { min-width: 0; background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs); }
.ss-rows + .ss-rows { margin-top: 14px; }
/* Heading bar inside a rows list (a folder name and its count). */
.ss-rows-head {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 16px;
background: var(--neutral-50, #f8f8f7); border-bottom: 1px solid var(--neutral-200, #e9e9e6); border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
font-size: 13.5px; font-weight: 600; color: var(--neutral-800, #333d47);
}
.ss-rows-head > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ss-rows-head small { font-size: 12.5px; font-weight: 500; color: var(--neutral-600, #6b7280); }
.ss-row { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-rows > .ss-row:first-child { border-top: 0; border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; }
.ss-rows > .ss-row:last-child { border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px); }
.ss-rows > .ss-row:only-child { border-radius: var(--radius-lg, 16px); }
.ss-rows-head + .ss-row { border-top: 0; }
.ss-row:is(.is-soon, .is-over) { box-shadow: inset 3px 0 0 var(--ss-k); }
.ss-row.is-link, .ss-row:has(.ss-stretch) { cursor: pointer; transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease); }
.ss-row.is-link:hover, .ss-row:has(.ss-stretch):hover { background: var(--color-primary-glow-soft, var(--brand-50, #eff6ff)); }
/* ---- Record cards -------------------------------------------------------------------------- */
/* Record cards: the same record parts as a card, in a grid that goes to one column on a phone. */
.ss-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; min-width: 0; }
.ss-card {
display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs);
transition: border-color var(--dur-base, 200ms) var(--ease-out, ease), box-shadow var(--dur-base, 200ms) var(--ease-out, ease);
}
.ss-card:is(.is-soon, .is-over) { box-shadow: inset 3px 0 0 var(--ss-k), var(--shadow-xs); }
.ss-card.is-draft { border-style: dashed; border-color: var(--neutral-400, #cbd0d6); }
.ss-card.is-link, .ss-card:has(.ss-stretch) { cursor: pointer; }
.ss-card.is-link:hover, .ss-card:has(.ss-stretch):hover { border-color: var(--neutral-400, #cbd0d6); box-shadow: var(--shadow-md); }
.ss-card.is-link:is(.is-soon, .is-over):hover,
.ss-card:has(.ss-stretch):is(.is-soon, .is-over):hover { box-shadow: inset 3px 0 0 var(--ss-k), var(--shadow-md); }
/* Card top line: icon tile, text column, trailing action. */
.ss-card-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
/* Card footer: actions and small facts, pinned to the bottom of the card. */
.ss-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-card-foot > .ss-card-foot-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Facts: short label and value pairs on a card (Version, Expiry, File). */
.ss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: 8px 12px; margin: 0; }
.ss-facts > div { min-width: 0; }
.ss-facts dt { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--neutral-600, #6b7280); }
.ss-facts dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
/* ---- Dense list: a table on desktop, cards on a phone -------------------------------------- */
/* Dense list: columns come from --ss-cols (fixed px and minmax(0, Nfr) tracks only, so rows line up). */
.ss-table {
--ss-cols: minmax(0, 1fr) auto;
min-width: 0; background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb);
border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs);
}
.ss-thead, .ss-tr { display: grid; grid-template-columns: var(--ss-cols); align-items: center; column-gap: 16px; padding: 0 18px; }
/* Column headings row (role="row", children role="columnheader"). */
.ss-thead {
min-height: 40px; padding-top: 8px; padding-bottom: 8px; background: var(--neutral-50, #f8f8f7);
border-bottom: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--neutral-700, #4b5563);
}
.ss-thead > * { min-width: 0; }
.ss-thead > .is-num { text-align: right; }
/* One record (role="row"); is-soon and is-over add the left rail. */
.ss-tr { min-height: 64px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); }
.ss-tr:first-child { border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; }
.ss-tr:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px); }
.ss-tr:only-child { border-radius: var(--radius-lg, 16px); }
.ss-tr:is(.is-soon, .is-over) { box-shadow: inset 3px 0 0 var(--ss-k); }
.ss-tr.is-link, .ss-tr:has(.ss-stretch) { cursor: pointer; transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease); }
.ss-tr.is-link:hover, .ss-tr:has(.ss-stretch):hover { background: var(--color-primary-glow-soft, var(--brand-50, #eff6ff)); }
/* A cell (role="cell"); is-main holds the record parts, is-act the actions, is-num right-aligned figures. */
.ss-td { min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-td.is-main { display: flex; align-items: center; gap: 12px; }
.ss-td.is-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.ss-td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ss-td small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.ss-td[data-label]::before { content: none; }
/* ---- Launch band (the empty state) --------------------------------------------------------- */
/* Launch band: a short explanation and a real set-up checklist of 2 to 4 steps with buttons; never sample rows. */
.ss-launch {
min-width: 0; padding: 24px 26px 22px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px);
background-color: var(--neutral-50, #f8f8f7);
background-image: linear-gradient(var(--neutral-200, #e9e9e6) 1px, transparent 1px), linear-gradient(90deg, var(--neutral-200, #e9e9e6) 1px, transparent 1px);
background-size: 16px 16px; background-position: -1px -1px;
}
.ss-launch-head { display: flex; align-items: flex-start; gap: 16px; max-width: 780px; min-width: 0; }
.ss-launch-head > div { min-width: 0; }
.ss-launch-ic {
display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px;
background: var(--ss-ink); color: var(--neutral-0, #ffffff); font-size: 22px; line-height: 1; box-shadow: 0 0 0 6px var(--neutral-200, #e9e9e6);
}
.ss-launch-head h2 { margin: 0; font: 800 22px/1.2 var(--ss-display); letter-spacing: -0.02em; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-launch-head p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--neutral-700, #4b5563); text-wrap: pretty; }
/* The checklist (); each step is a white card with its number, words and one button. */
.ss-launch-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.ss-launch-step {
display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px 16px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-xs);
}
.ss-launch-step-h { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ss-launch-step-t { min-width: 0; }
.ss-launch-n {
display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
border: 1.5px solid var(--ss-ink); color: var(--ss-ink); background: var(--neutral-0, #ffffff); font: 700 13px/1 var(--ss-display);
}
.ss-launch-step b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-launch-step p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.ss-launch-step > :is(.ss-btn, .ss-chip, .ss-launch-step-act) { margin-top: auto; align-self: flex-start; }
.ss-launch-step.is-done .ss-launch-n { background: var(--success-600, #16a34a); border-color: var(--success-600, #16a34a); color: var(--neutral-0, #ffffff); font-size: 15px; }
.ss-launch-step.is-done b { color: var(--neutral-700, #4b5563); }
.ss-launch-foot { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-launch-foot > i { flex: none; margin-top: 1px; color: var(--neutral-500, #9aa3ad); }
/* No match: what a filtered list shows when nothing matches; one line and a way back. */
.ss-nomatch {
display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; text-align: center;
background: var(--neutral-0, #ffffff); border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-lg, 16px);
}
.ss-nomatch > i { font-size: 22px; line-height: 1; color: var(--neutral-500, #9aa3ad); }
.ss-nomatch b { font-size: 15px; font-weight: 600; color: var(--neutral-900, #1f2933); }
.ss-nomatch p { margin: 0; max-width: 460px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
/* ---- Attention strip ----------------------------------------------------------------------- */
/* Attention strip: one line of counted issues, each a button that filters the list; one scrolling line on a phone. */
.ss-attn {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; margin: 0 0 16px; padding: 8px 10px 8px 14px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-xs);
}
.ss-attn-lead { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 13.5px; font-weight: 600; color: var(--neutral-800, #333d47); }
.ss-attn-lead > i { color: var(--neutral-600, #6b7280); }
.ss-attn-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* One counted issue: count then words; kind sets the colour, the icon repeats it. */
.ss-attn-item {
display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 34px; padding: 0 12px;
border: 1px solid var(--ss-kl); border-radius: var(--radius-pill, 999px); background: var(--ss-kb); color: var(--ss-kt);
font: 500 13px/1.2 var(--ss-sans); white-space: nowrap; text-decoration: none;
}
.ss-attn-item > i { font-size: 13px; line-height: 1; color: var(--ss-ki); }
.ss-attn-item > b { font-weight: 700; font-variant-numeric: tabular-nums; }
:is(button, a).ss-attn-item { cursor: pointer; transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease); }
:is(button, a).ss-attn-item:hover { border-color: var(--ss-k); color: var(--ss-kt); }
.ss-attn-item[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ss-k); }
/* ---- Toolbar ------------------------------------------------------------------------------- */
/* Toolbar: search, filter pills, then ss-toolbar-end (sort, result count), laid out once for every list. */
.ss-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; margin: 0 0 16px; }
.ss-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; min-width: 0; }
/* Search: with an icon, a visually hidden label and Sort ... laid invisibly over a dashed box that says what to
choose; has-file turns it green once something is chosen. The input keeps keyboard focus. */
.ss-drop {
position: relative; min-width: 0; padding: 18px; border: 1.5px dashed var(--neutral-400, #cbd0d6);
border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.ss-drop:hover { border-color: var(--brand-500, #3b82f6); }
.ss-drop:focus-within { border-color: var(--brand-500, #3b82f6); outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-drop.has-file { border-color: var(--success-600, #16a34a); background: var(--success-50, #f0fdf4); }
.ss-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ss-drop-inner { display: flex; align-items: center; gap: 12px; min-width: 0; pointer-events: none; font-size: 13.5px; color: var(--neutral-700, #4b5563); }
.ss-drop-inner > i { flex: none; font-size: 22px; line-height: 1; color: var(--success-700, #15803d); }
.ss-drop-inner > div { min-width: 0; }
.ss-drop-inner b { display: block; font-weight: 600; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-drop-inner small { display: block; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-drop-inner.is-empty { flex-direction: column; gap: 6px; text-align: center; }
.ss-drop-inner.is-empty > i { color: var(--neutral-500, #9aa3ad); }
/* ---- File preview -------------------------------------------------------------------------- */
/* File preview (SsFilePreview) in a flush modal body: a PDF or photo fills the space. */
.ss-preview { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 0; overflow: auto; }
.ss-preview-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--neutral-0, #ffffff); }
.ss-preview-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
/* What the preview says while it opens, or when a file can't be shown in place. */
.ss-preview-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-preview-state > i { font-size: 26px; line-height: 1; color: var(--neutral-500, #9aa3ad); }
.ss-preview-state p { max-width: 420px; margin: 0; }
/* ---- People -------------------------------------------------------------------------------- */
/* Initials avatar; tone is-t1 to is-t5, is-wait (not signed yet), is-signed (green tick), is-more (+n), is-xs, is-lg. */
.ss-av {
position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: 0; border-radius: 50%;
background: var(--ss-av-bg, var(--neutral-700, #4b5563)); color: var(--neutral-0, #ffffff); box-shadow: 0 0 0 2px var(--neutral-0, #ffffff);
font: 700 11px/1 var(--ss-display); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.ss-av.is-t1 { --ss-av-bg: var(--ss-ink); }
.ss-av.is-t2 { --ss-av-bg: var(--brand-700, #1d4ed8); }
.ss-av.is-t3 { --ss-av-bg: var(--success-800, #166534); }
.ss-av.is-t4 { --ss-av-bg: var(--warning-800, #92400e); }
.ss-av.is-t5 { --ss-av-bg: var(--neutral-700, #4b5563); }
.ss-av.is-wait { background: var(--neutral-200, #e9e9e6); color: var(--neutral-700, #4b5563); box-shadow: 0 0 0 2px var(--neutral-0, #ffffff), inset 0 0 0 1px var(--neutral-400, #cbd0d6); }
.ss-av.is-signed::after {
content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%;
background: var(--success-600, #16a34a); box-shadow: 0 0 0 2px var(--neutral-0, #ffffff);
}
.ss-av.is-more { background: var(--neutral-100, #f4f4f2); color: var(--neutral-800, #333d47); box-shadow: 0 0 0 2px var(--neutral-0, #ffffff), inset 0 0 0 1px var(--neutral-300, #e5e7eb); font-family: var(--ss-sans); }
.ss-av.is-xs { width: 22px; height: 22px; font-size: 9.5px; }
.ss-av.is-lg { width: 40px; height: 40px; font-size: 13px; }
/* Avatar stack: overlapping initials; is-spaced lays them out side by side (sign-on lists). */
.ss-avs { display: inline-flex; align-items: center; flex: none; padding-left: 6px; }
.ss-avs > .ss-av { margin-left: -6px; }
.ss-avs.is-spaced { gap: 6px; padding-left: 0; }
.ss-avs.is-spaced > .ss-av { margin-left: 0; }
/* Signed meter: "3 of 4 signed" with a segment per person (a filled bar above 8); is-ok, is-soon, is-neutral. */
.ss-meter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ss-kt); font-variant-numeric: tabular-nums; }
.ss-meter-bar { display: inline-flex; gap: 3px; flex: none; width: 64px; }
.ss-meter-bar > i { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--neutral-300, #e5e7eb); }
.ss-meter-bar > i.is-on { background: var(--ss-k); }
.ss-meter-bar.is-fill { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--neutral-300, #e5e7eb); }
.ss-meter-bar.is-fill > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--ss-pct, 0%); height: auto; background: var(--ss-k); }
.ss-meter-t { min-width: 0; overflow-wrap: anywhere; }
/* ---- Library book tile --------------------------------------------------------------------- */
/* Library shelf: a grid of book tiles (). */
.ss-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 16px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-shelf > li { min-width: 0; }
/* Book tile: a document cover on graph paper, spine coloured by kind (is-swms, is-check, is-talk; never red); is-blank starts from nothing. */
.ss-book {
position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; overflow: hidden;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-xs);
color: inherit; font: inherit; text-align: left; text-decoration: none;
transition: box-shadow var(--dur-base, 200ms) var(--ease-out, ease), transform var(--dur-base, 200ms) var(--ease-out, ease), border-color var(--dur-base, 200ms) var(--ease-out, ease);
}
:is(a, button).ss-book { cursor: pointer; }
:is(a, button).ss-book:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--neutral-400, #cbd0d6); color: inherit; }
.ss-book.is-swms, .ss-sw.is-swms { --ss-spine: var(--ss-k-swms); }
.ss-book.is-check, .ss-sw.is-check { --ss-spine: var(--ss-k-check); }
.ss-book.is-talk, .ss-sw.is-talk { --ss-spine: var(--ss-k-talk); }
.ss-book-stage {
position: relative; display: block; flex: none; height: 150px; overflow: hidden; border-bottom: 1px solid var(--neutral-200, #e9e9e6);
background-color: var(--neutral-100, #f4f4f2);
background-image: linear-gradient(var(--neutral-200, #e9e9e6) 1px, transparent 1px), linear-gradient(90deg, var(--neutral-200, #e9e9e6) 1px, transparent 1px);
background-size: 14px 14px; background-position: -1px -1px;
}
.ss-book-paper {
position: absolute; left: 22px; right: 22px; top: 20px; display: block; height: 170px; padding: 12px 12px 0 19px;
background: var(--neutral-0, #ffffff); border-radius: 3px 4px 0 0; box-shadow: var(--shadow-md);
transform: rotate(-1.2deg); transform-origin: bottom center;
}
.ss-shelf > li:nth-child(even) .ss-book-paper { transform: rotate(1deg); }
.ss-book-paper::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: 3px 0 0 0; background: var(--ss-spine, var(--ss-k-swms)); }
.ss-book-kind { display: block; font: 700 9.5px/1 var(--ss-sans); letter-spacing: .02em; color: var(--neutral-600, #6b7280); }
.ss-book-ptitle {
display: -webkit-box; margin: 5px 0 8px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
font: 700 11.5px/1.25 var(--ss-display); color: var(--ss-ink);
}
.ss-book-line { display: block; width: 100%; height: 4px; margin-bottom: 5px; border-radius: 2px; background: var(--neutral-200, #e9e9e6); }
.ss-book-line.is-w80 { width: 80%; }
.ss-book-line.is-w70 { width: 70%; }
.ss-book-line.is-w60 { width: 60%; }
.ss-book-table { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; margin-top: 8px; border-top: 1px solid var(--neutral-300, #e5e7eb); border-left: 1px solid var(--neutral-300, #e5e7eb); }
.ss-book-table > i { height: 13px; border-right: 1px solid var(--neutral-300, #e5e7eb); border-bottom: 1px solid var(--neutral-300, #e5e7eb); }
.ss-book-table > i:nth-child(-n+3) { background: var(--neutral-100, #f4f4f2); }
.ss-book-check { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ss-book-check > i { flex: none; width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.25px var(--neutral-400, #cbd0d6); }
.ss-book-check > i.is-x { background: var(--ss-k-check); box-shadow: none; }
.ss-book-check > .ss-book-line { flex: 1 1 auto; margin: 0; }
.ss-book-sign { display: grid; gap: 8px; margin-top: 10px; }
.ss-book-sign > i { display: block; height: 9px; border-bottom: 1px solid var(--neutral-400, #cbd0d6); }
.ss-book-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 14px; }
.ss-book-title { display: block; font: 700 15px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-book-sub { display: block; font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
.ss-book-use { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--neutral-800, #333d47); }
.ss-book-use > i { color: var(--neutral-500, #9aa3ad); }
.ss-book-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.ss-book.is-blank { background: transparent; border: 1.5px dashed var(--neutral-400, #cbd0d6); box-shadow: none; }
.ss-book.is-blank .ss-book-stage { background: transparent; border-bottom: 1.5px dashed var(--neutral-300, #e5e7eb); }
.ss-book.is-blank .ss-book-paper {
display: grid; place-items: center; padding: 0 0 20px; background: var(--neutral-0, #ffffff);
box-shadow: inset 0 0 0 1.5px var(--neutral-300, #e5e7eb); transform: none; color: var(--brand-700, #1d4ed8); font-size: 26px;
}
.ss-book.is-blank .ss-book-paper::before { display: none; }
.ss-book.is-blank .ss-book-title { color: var(--brand-700, #1d4ed8); }
.ss-book.is-blank .ss-book-sub { color: var(--neutral-700, #4b5563); }
/* ---- Phone (<= 767.98px): 44px targets, one column, nothing wider than a 300px screen ------- */
@media (max-width: 767.98px) {
.ss-body { padding: 16px 1rem 32px; }
.ss-section + .ss-section { margin-top: 28px; }
.ss-sechead h2 { font-size: 19px; }
.ss-sechead p { font-size: 13.5px; }
.ss-subhead { margin-top: 18px; }
.ss-subhead h3 { font-size: 16px; }
.ss-btn, .ss-btn.is-sm { min-height: 44px; white-space: normal; }
.ss-icon-btn { width: 44px; height: 44px; }
.ss-crumbs :is(a, button) { min-height: 44px; }
.ss-seg > :is(button, a) { min-height: 40px; }
/* Rows: icon, title and chips on the first line; the trailing column and the actions drop under the title. */
.ss-row { flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 12px 14px; }
.ss-row > .ss-rec-main { flex: 1 1 0; }
.ss-row > .ss-rec-end { order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px; text-align: left; }
.ss-row > .ss-rec-act { order: 4; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
.ss-row > .ss-rec-act.is-inline { order: 0; flex: none; }
.ss-row > .ss-rec-ic ~ :is(.ss-rec-end, .ss-rec-act:not(.is-inline)) { padding-left: 52px; }
.ss-card-top > .ss-rec-end { align-items: flex-start; text-align: left; }
/* Dense list: the header goes, each record becomes its own card, each cell shows its data-label. */
.ss-table { display: grid; gap: 10px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.ss-thead { display: none; }
.ss-tr {
grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; min-height: 0; padding: 14px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-xs);
}
.ss-tr:is(:first-child, :last-child, :only-child) { border-bottom: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); }
.ss-tr:is(.is-soon, .is-over) { box-shadow: inset 3px 0 0 var(--ss-k), var(--shadow-xs); }
.ss-td { grid-column: 1 / -1; }
.ss-td.is-main { order: -1; }
.ss-td.is-num { text-align: left; }
.ss-td[data-label] {
display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); align-items: baseline; gap: 2px 12px;
padding-top: 8px; border-top: 1px solid var(--neutral-200, #e9e9e6);
}
.ss-td[data-label] > * { grid-column: 2; min-width: 0; }
.ss-td[data-label]::before { content: attr(data-label); grid-column: 1; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-td.is-act { order: 99; flex-wrap: wrap; justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-td.is-act.is-inline { order: 0; grid-column: 2; grid-row: 1; align-self: start; padding-top: 0; border-top: 0; }
.ss-tr:has(> .ss-td.is-act.is-inline) > .ss-td.is-main { grid-column: 1; grid-row: 1; }
.ss-stretch::after { border-radius: var(--radius-md, 12px); }
.ss-launch { padding: 18px 16px; }
.ss-launch-head { gap: 12px; }
.ss-launch-ic { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; box-shadow: 0 0 0 4px var(--neutral-200, #e9e9e6); }
.ss-launch-head h2 { font-size: 19px; }
.ss-launch-head p { font-size: 14px; }
.ss-launch-steps { margin-top: 16px; gap: 10px; }
.ss-launch-step > .ss-btn { align-self: stretch; }
/* Attention strip: one line; the lead keeps its icon, the items scroll sideways. */
.ss-attn { flex-wrap: nowrap; gap: 10px; padding: 4px 0 4px 12px; }
.ss-attn-lead > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ss-attn-items { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 12px 2px 2px; }
.ss-attn-items::-webkit-scrollbar { display: none; }
.ss-attn-items:has(> :nth-child(3)) { -webkit-mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); }
.ss-attn-item { min-height: 44px; }
/* Toolbar: search on its own line, pills on one scrolling line, then sort and count. */
.ss-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ss-search { max-width: none; height: 44px; }
.ss-search input { font-size: 16px; }
.ss-toolbar .ss-pills { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px; }
.ss-toolbar .ss-pills::-webkit-scrollbar { display: none; }
.ss-toolbar .ss-pills:has(> :nth-child(4)) { -webkit-mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); }
.ss-pill { min-height: 44px; }
.ss-toolbar-end { justify-content: space-between; margin-left: 0; }
.ss-sort select { height: 44px; font-size: 16px; }
.ss-toolbar .fd-trigger { min-height: 44px; }
.ss-toolbar .fd-menu { max-width: calc(100vw - 2rem); }
.ss-shelf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.ss-book-stage { height: 120px; }
.ss-book-paper { left: 16px; right: 16px; top: 16px; }
/* Modal: a bottom sheet, buttons sharing the foot, clear of the home bar. */
.ss-modal-layer { align-items: flex-end; padding: 0; }
.ss-modal { max-width: none; max-height: 92vh; border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0; }
.ss-modal.is-xl { height: 92vh; }
.ss-modal-head { padding-left: 16px; }
.ss-modal-body { padding: 16px; }
.ss-modal-body.is-flush { padding: 0; }
.ss-modal-foot { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
.ss-modal-foot .ss-btn { flex: 1 1 auto; }
/* Fields: 44px controls and 16px text, so iOS doesn't zoom into the field. */
.ss-input { min-height: 44px; font-size: 16px; }
}
/* Narrow phones (the phone audit runs down to 320px): smaller tiles so the text column keeps its room. */
@media (max-width: 359.98px) {
.ss-rec-ic { width: 34px; height: 34px; font-size: 15px; }
.ss-row > .ss-rec-ic ~ :is(.ss-rec-end, .ss-rec-act:not(.is-inline)) { padding-left: 46px; }
.ss-card, .ss-tr { padding: 12px; }
.ss-td[data-label] { grid-template-columns: minmax(72px, 36%) minmax(0, 1fr); }
.ss-launch-steps { grid-template-columns: minmax(0, 1fr); }
}
/* Reduced motion: no transitions, no lift. */
@media (prefers-reduced-motion: reduce) {
:is(.ss-btn, .ss-icon-btn, .ss-pill, .ss-row, .ss-card, .ss-tr, .ss-attn-item, .ss-book, .ss-seg > *) { transition: none !important; }
:is(a, button).ss-book:hover { transform: none; }
}
/* ==========================================================================================
Registers (/tradie/safety/registers), safety phase 2. Additive: every rule here is .ss-reg-*.
The page is the combined design's "Tickets and registers" screen: the register index, the
licences and tickets grid (cards on a phone), and record rows for every other register.
========================================================================================== */
/* Registers workspace: the register on the left, "who hears about it" beside it on a wide screen. */
.ss-reg-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
/* The register column. */
.ss-reg-main { min-width: 0; }
/* The side column (reminders); under the register below 1280px. */
.ss-reg-side { min-width: 0; }
@media (min-width: 1280px) {
.ss-reg-work { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
}
/* Register index: the register being shown carries a blue rail (state rails stay red and amber). */
.ss-reg-index .ss-tr.is-on { background: var(--brand-50, #eff6ff); box-shadow: inset 3px 0 0 var(--brand-600, #2563eb); }
.ss-reg-index .ss-tr.is-on .ss-rec-ic { background: var(--neutral-0, #ffffff); color: var(--brand-700, #1d4ed8); box-shadow: inset 0 0 0 1px var(--brand-200, #bfdbfe); }
.ss-reg-index .ss-td.is-num { font-size: 15px; font-weight: 600; }
/* One-record view (a reminder's link): the note above the toolbar. */
.ss-reg-focus { margin: 0 0 16px; }
/* A registers callout with a button (the focus note's "Show the whole register", "Try again"): the
button is an ss-btn (44px on a phone) and drops under the words when they need the room. */
.ss-reg-callout { flex-wrap: wrap; }
.ss-reg-callout > p { flex: 1 1 180px; }
.ss-reg-callout > .ss-btn { flex: none; }
/* Heading over the training refreshers under the grid. */
.ss-reg-subhead { margin-top: 26px; }
/* Licences and tickets grid (desktop): people down the side, one column per ticket. It scrolls
sideways inside its own frame when the screen is narrow; a phone gets the cards instead. */
.ss-reg-grid-wrap {
min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb);
border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs);
}
.ss-reg-grid-wrap:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* The table itself: fixed columns so every row lines up, each ticket column at least 108px (the page sets --ss-reg-cols). */
.ss-reg-grid {
width: 100%; min-width: calc(190px + var(--ss-reg-cols, 4) * 108px);
border-collapse: separate; border-spacing: 0; table-layout: fixed;
}
.ss-reg-grid thead th {
padding: 11px 8px 10px; text-align: left; vertical-align: bottom; font-size: 12.5px; font-weight: 600; line-height: 1.3;
color: var(--neutral-900, #1f2933); background: var(--neutral-50, #f8f8f7); border-bottom: 1px solid var(--neutral-300, #e5e7eb);
}
.ss-reg-grid thead th:first-child { border-top-left-radius: var(--radius-lg, 16px); }
.ss-reg-grid thead th:last-child { border-top-right-radius: var(--radius-lg, 16px); }
.ss-reg-grid tbody th, .ss-reg-grid tbody td {
padding: 6px 4px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); vertical-align: middle; text-align: left; font-weight: 400;
}
.ss-reg-grid tbody tr:last-child > * { border-bottom: 0; }
/* The person column. */
.ss-reg-grid .ss-reg-pcol { width: 190px; padding-left: 14px; }
/* A person in the grid: avatar, name, their job title. */
.ss-reg-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-reg-person > span:last-child { min-width: 0; }
.ss-reg-person b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-reg-person small { display: block; font-size: 12px; line-height: 1.3; color: var(--neutral-600, #6b7280); }
/* A grid cell: the expiry date and a few words of state; a button that opens the records behind it.
is-ok current, is-soon due, is-over expired (the only red), is-draft no expiry recorded (dashed),
is-empty nothing on file (quiet text, not a button). */
.ss-reg-cell {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; width: 100%; min-width: 0; min-height: 44px;
margin: 0; padding: 5px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent;
color: var(--neutral-900, #1f2933); font: 400 13px/1.25 var(--ss-sans); text-align: left;
}
button.ss-reg-cell { cursor: pointer; }
button.ss-reg-cell:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 1px; }
.ss-reg-cell b { font-size: 13px; font-weight: 500; white-space: nowrap; }
.ss-reg-cell small { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--neutral-600, #6b7280); }
button.ss-reg-cell.is-ok:hover { background: var(--neutral-0, #ffffff); border-color: var(--neutral-300, #e5e7eb); }
.ss-reg-cell.is-ok small { color: var(--success-700, #15803d); }
.ss-reg-cell.is-soon { background: var(--warning-50, #fffbeb); border-color: var(--warning-200, #fde68a); }
.ss-reg-cell.is-soon b, .ss-reg-cell.is-soon small { color: var(--warning-800, #92400e); }
.ss-reg-cell.is-soon b { font-weight: 600; }
.ss-reg-cell.is-over { background: var(--danger-50, #fef2f2); border-color: var(--danger-200, #fecaca); }
.ss-reg-cell.is-over b, .ss-reg-cell.is-over small { color: var(--danger-800, #991b1b); }
.ss-reg-cell.is-over b { font-weight: 600; }
.ss-reg-cell.is-draft { background: var(--neutral-0, #ffffff); border: 1.5px dashed var(--neutral-400, #cbd0d6); }
.ss-reg-cell.is-empty { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
/* Phone: one card per person instead of the grid (hidden above the phone breakpoint). */
.ss-reg-people { display: none; }
/* A person's card: the ss-card, with their name beside a large avatar. */
.ss-reg-pcard .ss-card-top { align-items: center; }
/* A person's tickets on their card, one line each: the ticket, then its cell. */
.ss-reg-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
/* One ticket line: a button that opens the records behind it. */
.ss-reg-line {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; width: 100%; min-height: 48px;
margin: 0; padding: 4px 0; border: 0; border-top: 1px solid var(--neutral-200, #e9e9e6); background: none;
color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ss-reg-lines > li:first-child .ss-reg-line { border-top: 0; }
.ss-reg-line:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* The ticket's name on a line. */
.ss-reg-line-l { flex: 1 1 120px; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-reg-line > .ss-reg-cell { flex: 0 1 auto; width: auto; min-height: 40px; }
/* What isn't on file for a person, one quiet line. */
.ss-reg-miss { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* "Only Mia can change it": in place of Edit when the record is on that person's own profile. */
.ss-reg-held { max-width: 180px; font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); text-align: right; }
/* "Who hears about it": when reminders go out and to whom. */
.ss-reg-who-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-reg-who-body p:last-child { margin-bottom: 0; }
/* The people a reminder goes to, one per line with an icon. */
.ss-reg-who { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.ss-reg-who li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--neutral-900, #1f2933); }
.ss-reg-who li > i {
display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
background: var(--neutral-100, #f4f4f2); color: var(--neutral-700, #4b5563); font-size: 14px;
}
/* Registers on a phone: the grid gives way to the person cards; nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-reg-grid-wrap { display: none; }
.ss-reg-people { display: grid; gap: 12px; min-width: 0; }
.ss-reg-held { max-width: none; text-align: left; }
.ss-reg-index .ss-td.is-num { font-size: 14px; }
/* The index stays short on a phone: its three counts share one line under the register's name. */
.ss-reg-index .ss-tr { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
.ss-reg-index .ss-td.is-main, .ss-reg-index .ss-td:not(.is-num) { grid-column: 1 / -1; }
.ss-reg-index .ss-td.is-num[data-label] { grid-column: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* End of the registers block. */
/* ==========================================================================================
Phase 2: the Overview (/tradie/safety). Additive: new classes only; nothing above changes.
The 30-day band, the week on site (the day strip, and job cards with a facts rail and the gaps
to sort), the side panels (Needs you, Registers) and the layout that sets them beside the week.
========================================================================================== */
/* State rungs for the Overview's own stateful parts: a day's job bars, a job's facts and its gaps. */
:where(.ss-day-bar, .ss-rail-i, .ss-gap),
:where(.ss-day-bar, .ss-rail-i, .ss-gap):is(.is-neutral, .is-draft) {
--ss-k: var(--neutral-400, #cbd0d6);
--ss-kt: var(--neutral-800, #333d47);
--ss-kb: var(--neutral-100, #f4f4f2);
--ss-kl: var(--neutral-300, #e5e7eb);
--ss-ki: var(--neutral-600, #6b7280);
}
:where(.ss-day-bar, .ss-rail-i, .ss-gap).is-ok {
--ss-k: var(--success-600, #16a34a);
--ss-kt: var(--success-800, #166534);
--ss-kb: var(--success-50, #f0fdf4);
--ss-kl: var(--success-200, #bbf7d0);
--ss-ki: var(--success-700, #15803d);
}
:where(.ss-day-bar, .ss-rail-i, .ss-gap).is-soon {
--ss-k: var(--warning-500, #f59e0b);
--ss-kt: var(--warning-800, #92400e);
--ss-kb: var(--warning-50, #fffbeb);
--ss-kl: var(--warning-200, #fde68a);
--ss-ki: var(--warning-700, #b45309);
}
:where(.ss-day-bar, .ss-rail-i, .ss-gap).is-over {
--ss-k: var(--danger-600, #dc2626);
--ss-kt: var(--danger-800, #991b1b);
--ss-kb: var(--danger-50, #fef2f2);
--ss-kl: var(--danger-200, #fecaca);
--ss-ki: var(--danger-700, #b91c1c);
}
:where(.ss-day-bar, .ss-rail-i, .ss-gap).is-info {
--ss-k: var(--brand-600, #2563eb);
--ss-kt: var(--brand-800, #1e40af);
--ss-kb: var(--brand-50, #eff6ff);
--ss-kl: var(--brand-200, #bfdbfe);
--ss-ki: var(--brand-700, #1d4ed8);
}
/* Overview layout: the week, with a side column (Needs you, Registers) beside it from 1200px; one column below. */
.ss-home { display: grid; gap: 28px 24px; min-width: 0; }
.ss-home > *, .ss-home-main { min-width: 0; }
.ss-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (min-width: 1200px) {
.ss-home { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
}
/* 30-day band: one line of counts, each a link to the filtered register; a toggle lists the dates behind them.
It is the attention strip's dated variant (.ss-attn, SsAttentionStrip): its counts are the strip's
.ss-attn-item links, and it adds what the strip hasn't got (a heading, the quiet line, the dates
toggle and the dates list). On a phone both shrink the lead to its icon and scroll the items
sideways under a fade; change the two together. */
.ss-band { min-width: 0; background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-xs); }
.ss-band-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; padding: 8px 10px 8px 14px; }
.ss-band-h { display: inline-flex; align-items: center; gap: 8px; flex: none; margin: 0; font: 700 15px/1.2 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
.ss-band-h > i { font-size: 15px; line-height: 1; color: var(--neutral-600, #6b7280); }
.ss-band-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* The band's quiet line when nothing is due; is-ok when records are on file and nothing runs out. */
.ss-band-quiet { display: inline-flex; align-items: center; gap: 7px; min-width: 0; min-height: 34px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--neutral-700, #4b5563); }
.ss-band-quiet > i { flex: none; font-size: 14px; line-height: 1; color: var(--neutral-500, #9aa3ad); }
.ss-band-quiet.is-ok > i { color: var(--success-700, #15803d); }
/* Show the dates / Hide the dates: a text button at the end of the line; its chevron turns when open. */
.ss-band-toggle { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; margin-left: auto; padding: 0 6px; font-size: 13.5px; }
.ss-band-toggle > i { font-size: 12px; line-height: 1; transition: transform var(--dur-fast, 120ms) var(--ease-out, ease); }
.ss-band-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
/* The dates behind the counts, soonest first; each opens that record in its register. */
.ss-band-more { padding: 2px 14px 12px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-band-more[hidden] { display: none; }
.ss-band-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.ss-band-date { min-width: 0; border-bottom: 1px solid var(--neutral-200, #e9e9e6); }
.ss-band-date > a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 9px 0; color: inherit; text-decoration: none; }
.ss-band-date > a:hover b { color: var(--brand-700, #1d4ed8); text-decoration: underline; text-underline-offset: 3px; }
.ss-band-date .ss-val { font-size: 12.5px; }
.ss-band-date b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-band-date small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-band-foot { margin: 10px 0 0; font-size: 13.5px; }
/* The line that shows while another week loads. */
.ss-week-wait { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 0; font-size: 13.5px; color: var(--neutral-700, #4b5563); }
/* Day strip: a tile per day (Monday to Friday, and a weekend day with work on it); a tile with jobs jumps to that day. */
.ss-week { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; min-width: 0; margin: 0 0 22px; padding: 0; list-style: none; }
.ss-week > li { display: flex; min-width: 0; }
.ss-day {
position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; min-height: 76px; padding: 10px 12px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px);
color: var(--neutral-800, #333d47); text-decoration: none;
transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease), box-shadow var(--dur-fast, 120ms) var(--ease-out, ease);
}
a.ss-day:hover { border-color: var(--neutral-400, #cbd0d6); box-shadow: var(--shadow-sm); color: var(--neutral-900, #1f2933); }
.ss-day.is-today { border: 2px solid var(--ss-ink); padding: 9px 11px; }
.ss-day.is-past { background: var(--neutral-50, #f8f8f7); }
.ss-day.is-empty { background: transparent; border-style: dashed; }
.ss-day.is-today.is-empty { border-style: solid; }
.ss-day-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font: 700 14px/1.2 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-day-name small { font: 500 12.5px/1.2 var(--ss-sans); color: var(--neutral-600, #6b7280); }
.ss-day-n { display: none; }
.ss-day-bars { display: flex; gap: 4px; min-height: 5px; }
/* A job's bar on its day: ink, amber when something waits, red when something on it has run out. */
.ss-day-bar { flex: 1 1 0; max-width: 56px; height: 5px; border-radius: 3px; background: var(--ss-k); }
.ss-day-bar.is-neutral { background: var(--ss-ink); }
.ss-day.is-past .ss-day-bar { opacity: .45; }
.ss-day-sum { font-size: 12.5px; line-height: 1.35; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
/* Nothing booked that week: says so plainly, where jobs come from, and where they're booked. */
.ss-week-empty { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 18px; background: var(--neutral-0, #ffffff); border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-lg, 16px); }
.ss-week-empty > i { flex: none; margin-top: 1px; font-size: 20px; line-height: 1; color: var(--neutral-500, #9aa3ad); }
.ss-week-empty > div { min-width: 0; }
.ss-week-empty b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); }
.ss-week-empty p { margin: 4px 0 0; max-width: 620px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-week-empty-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* A day's jobs under its heading; the heading is what the day strip jumps to, clear of the sticky top bar. */
.ss-day-group { min-width: 0; scroll-margin-top: 96px; }
.ss-day-group + .ss-day-group { margin-top: 24px; }
.ss-jobs { display: grid; gap: 12px; min-width: 0; }
/* Job card: an ss-card whose title opens the job; time, place and crew, then its facts rail and anything to sort. */
.ss-card.ss-job { gap: 0; padding: 0; }
.ss-job-top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; gap: 6px 16px; min-width: 0; padding: 16px 18px 14px; }
.ss-job-time { font: 800 18px/1.1 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); font-variant-numeric: tabular-nums; }
.ss-job-time small { display: block; margin-top: 3px; font: 500 12.5px/1.2 var(--ss-sans); letter-spacing: 0; color: var(--neutral-600, #6b7280); }
.ss-job-time.is-none { font: 500 12.5px/1.35 var(--ss-sans); letter-spacing: 0; color: var(--neutral-600, #6b7280); }
.ss-job-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-job .ss-rec-title { font: 700 16px/1.3 var(--ss-display); letter-spacing: -0.01em; }
/* The job's high-risk tags (from a linked permit), kept on a phone as the compact indicator. */
.ss-job-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; min-width: 0; }
/* A job with nothing linked to it yet says so in one quiet line. */
.ss-job-quiet { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-job-crew { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.ss-job-none { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.ss-job.is-compact .ss-job-top { padding-bottom: 16px; }
/* Facts rail: one cell per fact (SWMS, tickets, checks, permits); its top bar and its value take the fact's state. */
.ss-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px 16px; min-width: 0; margin: 0; padding: 0 18px 16px; list-style: none; }
.ss-rail-i { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 9px; border-top: 3px solid var(--ss-k); }
.ss-rail-i.is-draft { border-top-style: dashed; }
.ss-rail-l { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--neutral-600, #6b7280); }
.ss-rail-v { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ss-kt); text-decoration: none; overflow-wrap: anywhere; }
.ss-rail-v > i { flex: none; margin-top: 2px; font-size: 13px; line-height: 1; color: var(--ss-ki); }
a.ss-rail-v:hover { color: var(--ss-kt); text-decoration: underline; text-underline-offset: 3px; }
.ss-rail-i:is(.is-neutral, .is-draft) .ss-rail-v { font-weight: 500; color: var(--neutral-700, #4b5563); }
/* Gaps: what to sort on a job, one line each with the button that does it. */
.ss-gaps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-gap { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 18px; }
.ss-gap + .ss-gap { border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-gap-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ss-kb); color: var(--ss-ki); box-shadow: inset 0 0 0 1px var(--ss-kl); font-size: 14px; line-height: 1; }
.ss-gap > p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-gap > .ss-btn { flex: none; }
/* A side panel's heading as an h2 (Needs you and Registers are sections of the page), with an optional count. */
.ss-side .ss-panel-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 0; font: 700 16.5px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
/* Record rows straight inside a panel (no second box): lines between, the last one rounded to the panel. */
.ss-panel-rows { min-width: 0; }
.ss-side .ss-panel-rows:last-child > .ss-row:last-child { border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px); }
.ss-side p.ss-panel-foot { margin: 0; }
/* Needs you's foot when the list is cut short: the sentence and each link spaced apart, wrapping on a phone. */
.ss-needs-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
/* A panel with nothing in it: one plain line. */
.ss-panel-empty { margin: 0; padding: 2px 16px 16px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
/* The set-up checklist's anchor: clear of the sticky top bar when the band's count jumps to it. */
.ss-setup { min-width: 0; scroll-margin-top: 96px; }
/* Keyboard focus on the Overview's own links, the same ring as every other ss-* control. */
:is(.ss-day, .ss-band-date > a, .ss-rail-v):focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* Overview on a phone (<= 767.98px): the band stays one line, the strip shows short days, 44px targets, nothing wider than 300px. */
@media (max-width: 767.98px) {
/* Band: the heading keeps its icon, the counts scroll sideways, the toggle is a 44px chevron. */
.ss-band-line { flex-wrap: nowrap; gap: 8px; padding: 4px 4px 4px 12px; }
.ss-band-h > span, .ss-band-toggle-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ss-band-items { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 12px 2px 2px; }
.ss-band-items::-webkit-scrollbar { display: none; }
.ss-band-items:has(> :nth-child(3)) { -webkit-mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); }
.ss-band-items:has(> .ss-band-quiet) { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.ss-band-quiet { min-height: 44px; }
.ss-band-toggle { justify-content: center; min-width: 44px; min-height: 44px; margin-left: 0; padding: 0; }
.ss-band-toggle > i { font-size: 15px; }
.ss-band-more { padding: 2px 12px 10px; }
.ss-band-foot .ss-link { display: inline-flex; align-items: center; min-height: 44px; }
/* Day strip: the short day and its number; the full date and the summary are read out, not shown. */
.ss-week { grid-auto-columns: minmax(50px, 1fr); gap: 4px; margin-bottom: 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ss-week::-webkit-scrollbar { display: none; }
.ss-day { gap: 6px; min-height: 56px; padding: 7px 6px; border-radius: 10px; }
.ss-day.is-today { padding: 6px 5px; }
.ss-day-name { flex-direction: column; align-items: flex-start; gap: 1px; font-size: 13px; }
.ss-day-d, .ss-day-sum { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ss-day-n { display: block; }
/* Job cards: time beside the title, the crew under it, the facts two to a row, each gap's button under its words. */
.ss-day-group + .ss-day-group { margin-top: 20px; }
.ss-job-top { grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; padding: 14px; }
.ss-job-time { font-size: 16px; }
.ss-job-crew { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.ss-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 0 14px 14px; }
a.ss-rail-v { align-items: center; min-height: 44px; }
.ss-gap { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
.ss-gap > p { flex: 1 1 0; }
.ss-gap > .ss-btn { flex: 1 1 100%; }
.ss-week-empty { flex-direction: column; gap: 10px; padding: 16px; }
.ss-week-empty-act > .ss-btn { flex: 1 1 100%; }
.ss-side .ss-panel-head .ss-link, .ss-side .ss-panel-foot .ss-link { display: inline-flex; align-items: center; min-height: 44px; }
.ss-panel-empty { padding: 2px 14px 14px; }
}
/* Overview on a narrow phone (the phone audit runs down to 300px). */
@media (max-width: 359.98px) {
.ss-week { grid-auto-columns: minmax(46px, 1fr); }
.ss-job-top { grid-template-columns: 46px minmax(0, 1fr); gap: 6px 10px; padding: 12px; }
.ss-job-time { font-size: 15px; }
.ss-rail { gap: 10px; padding: 0 12px 12px; }
.ss-gap { padding: 12px; }
}
/* Overview, reduced motion: the tiles and the band's chevron don't animate. */
@media (prefers-reduced-motion: reduce) {
:is(.ss-day, .ss-band-toggle > i) { transition: none !important; }
}
/* ==========================================================================================
Phase 3: crew sign-on (/tradie/swms/{id}/sign, .ss-sign-*) and the job page's safety pack
(SsJobSafetyPack on /jobs/{id}, .ss-pack-*). Additive: every rule names its own class.
========================================================================================== */
/* Job pack: a white panel on the job page with the job's SWMS, who has signed and starting work. */
.ss-pack {
display: grid; gap: 16px; min-width: 0; margin: 0 0 24px; padding: 18px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px);
box-shadow: var(--shadow-xs); color: var(--neutral-900, #1f2933); font-family: var(--ss-sans);
}
/* Pack heading: the h2 and one line, with "Start a SWMS" on the right for a manager. */
.ss-pack-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; min-width: 0; }
.ss-pack-head-t { flex: 1 1 260px; min-width: 0; }
.ss-pack-head-t h2 { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 18px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
.ss-pack-head-t h2 > i { font-size: 17px; color: var(--neutral-600, #6b7280); }
.ss-pack-head-t p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
/* The high-risk work ticked across the job's SWMS, as hazard-tape tags. */
.ss-pack-hrcw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ss-pack-label { font-size: 12.5px; font-weight: 600; color: var(--neutral-700, #4b5563); }
.ss-pack-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
/* One SWMS on the job: title and status, needs review, the signed meter, each person, the buttons. */
.ss-pack-list { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-pack-swms { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
.ss-pack-swms-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ss-pack-review { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--warning-800, #92400e); overflow-wrap: anywhere; }
.ss-pack-review > i { flex: none; margin-top: 2px; color: var(--warning-700, #b45309); }
.ss-pack-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }
.ss-pack-still { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
/* The people who sign: an avatar, the name and where they stand on the version in force. */
.ss-pack-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px 16px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-pack-person { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ss-pack-person-t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ss-pack-person-t > b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-pack-person-t > small { font-size: 12px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
.ss-pack-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* Crew with no login, who can't sign in the app. */
.ss-pack-noacct { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-pack-noacct > i { flex: none; margin-top: 1px; color: var(--neutral-600, #6b7280); }
/* Starting work: the warning list with "Start anyway", or the refusal, and the check-in button. */
.ss-pack-start { display: grid; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-pack-h3 { margin: 0; font: 700 15.5px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
/* The start check's list inside its callout: a heading, the items, the note. */
.ss-callout.ss-pack-check { margin: 0; }
.ss-pack-check-h { margin: 0 0 4px; font-weight: 700; }
.ss-pack-items { margin: 0 0 6px; padding-left: 18px; }
.ss-pack-items > li + li { margin-top: 3px; }
.ss-pack-quiet { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-pack-start-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.ss-pack-done { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--success-800, #166534); }
.ss-pack-done > i { flex: none; margin-top: 1px; color: var(--success-700, #15803d); }
.ss-pack-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--warning-800, #92400e); }
.ss-pack-error > i { flex: none; margin-top: 2px; color: var(--warning-700, #b45309); }
.ss-note.ss-pack-foot { margin: 0; }
/* The share link, shown once: selectable in one tap. */
.ss-pack-url { font-size: 13px; user-select: all; }
/* A manager's one line on a job with no SWMS: start one from here. */
.ss-pack-prompt {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; margin: 0 0 24px; padding: 12px 16px;
background: var(--neutral-0, #ffffff); border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-md, 12px); font-family: var(--ss-sans);
}
.ss-pack-prompt-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--neutral-100, #f4f4f2); color: var(--neutral-700, #4b5563); font-size: 16px; }
.ss-pack-prompt-t { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-pack-prompt-t > b { display: block; color: var(--neutral-900, #1f2933); }
/* Sign-on page: one readable column, phone first. */
.ss-sign { display: grid; gap: 16px; min-width: 0; max-width: 720px; margin: 0 auto; }
/* The page's state (signed, saved on this phone, a new version to sign) as a callout with a heading. */
.ss-sign-state p { margin: 0 0 4px; }
.ss-sign-state p:last-child { margin-bottom: 0; }
.ss-sign-state .ss-sign-state-h { font-weight: 700; }
.ss-sign-state-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* The SWMS as text: kicker, title, version, high-risk work, then each part. */
.ss-sign-doc {
display: grid; gap: 14px; min-width: 0; padding: 18px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs);
color: var(--neutral-900, #1f2933); font-family: var(--ss-sans);
}
.ss-sign-kicker { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--neutral-600, #6b7280); }
.ss-sign-title { margin: -8px 0 0; font: 700 22px/1.2 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-sign-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -6px 0 0; font-size: 13.5px; color: var(--neutral-700, #4b5563); }
.ss-sign-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-sign-facts { display: grid; gap: 10px; min-width: 0; margin: 0; }
.ss-sign-facts > div { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); gap: 2px 12px; min-width: 0; }
.ss-sign-facts dt { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-sign-facts dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-900, #1f2933); white-space: pre-line; overflow-wrap: anywhere; }
.ss-sign-sec { display: grid; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-sign-sec > h3 { margin: 0; font: 700 16px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-sign-text { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
/* Steps: a number, the step, what could go wrong, how it's controlled (with its level), the risk. */
.ss-sign-steps { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-sign-step { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7); }
.ss-sign-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ss-ink); color: var(--neutral-0, #ffffff); font: 700 13px/1 var(--ss-sans); }
.ss-sign-step-b { display: grid; gap: 6px; flex: 1 1 auto; min-width: 0; }
.ss-sign-step-t { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ss-sign-sub { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--neutral-600, #6b7280); }
.ss-sign-hz, .ss-sign-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-sign-hz > li + li, .ss-sign-list > li + li { margin-top: 3px; }
.ss-sign-ctl { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-sign-ctl > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.ss-sign-lvl { display: inline-flex; flex: none; padding: 1px 8px; border-radius: var(--radius-pill, 999px); background: var(--brand-50, #eff6ff); box-shadow: inset 0 0 0 1px var(--brand-200, #bfdbfe); color: var(--brand-800, #1e40af); font-size: 12px; font-weight: 600; line-height: 1.5; }
.ss-sign-risk { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.ss-sign-ppe { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-sign-ppe > li { padding: 3px 10px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #f4f4f2); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--neutral-800, #333d47); }
/* An uploaded SWMS: a line and the button that opens its file. */
.ss-sign-upload { display: grid; justify-items: start; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-sign-upload > p { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
/* The signing form: the tick, the pad, location, and the one big button. */
.ss-sign-form {
display: grid; gap: 14px; min-width: 0; padding: 18px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs);
font-family: var(--ss-sans);
}
.ss-sign-form-h { margin: 0; font: 700 18px/1.25 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-sign-agree {
display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0; padding: 11px 12px; cursor: pointer;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933);
}
.ss-sign-agree > input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--brand-600, #2563eb); cursor: pointer; }
.ss-sign-agree:has(> input:checked) { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); }
.ss-sign-agree:has(> input:focus-visible) { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-sign-pad { display: grid; gap: 6px; min-width: 0; }
.ss-sign-pad-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--neutral-800, #333d47); }
.ss-sign-canvas {
display: block; width: 100%; height: 170px; border: 2px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-md, 12px);
background: var(--neutral-0, #ffffff); touch-action: none; cursor: crosshair;
}
.ss-sign-hint { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.ss-sign-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); }
.ss-sign-loc > i { flex: none; font-size: 15px; color: var(--neutral-600, #6b7280); }
.ss-sign-loc > span { flex: 1 1 200px; min-width: 0; }
.ss-sign-as { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.ss-sign-msg {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 10px 12px;
border: 1px solid var(--warning-200, #fde68a); border-radius: var(--radius-md, 12px); background: var(--warning-50, #fffbeb);
font-size: 13.5px; line-height: 1.45; color: var(--warning-800, #92400e);
}
.ss-sign-msg > i { flex: none; color: var(--warning-700, #b45309); }
.ss-sign-msg > span { flex: 1 1 200px; min-width: 0; }
.ss-btn.ss-sign-submit { min-height: 52px; font-size: 16px; }
.ss-sign-form > .ss-note { margin: 0; }
/* An uploaded SWMS: open it in place, or save a copy to read in the phone's own viewer. */
.ss-sign-upload-act { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Can't draw it? Type your name instead": a keyboard route into the signature box. */
.ss-sign-typed { margin-top: 6px; }
.ss-sign-typed > summary { display: list-item; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--brand-700, #1d4ed8); }
.ss-sign-typed > summary:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-sign-typed-b { display: grid; justify-items: start; gap: 8px; padding-top: 2px; }
.ss-sign-typed-b > .ss-input { width: 100%; max-width: 360px; }
/* What signing did, where the form was; its heading takes the focus (no ring for a tap). */
.ss-sign-result { min-width: 0; }
.ss-sign-state-h:focus:not(:focus-visible) { outline: none; }
/* Phase 3 on a phone (<= 767.98px): 44px targets, one column, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-pack { gap: 14px; padding: 14px; }
.ss-pack-head-t h2 { font-size: 17px; }
.ss-pack-swms { padding: 12px; }
.ss-pack-act > .ss-btn { flex: 1 1 auto; }
.ss-pack-start-act > .ss-btn { flex: 1 1 100%; }
.ss-pack-prompt { padding: 12px; }
.ss-pack-prompt > .ss-btn { flex: 1 1 100%; }
.ss-sign { gap: 12px; }
.ss-sign-doc, .ss-sign-form { padding: 14px; }
.ss-sign-title { font-size: 20px; }
.ss-sign-facts > div { grid-template-columns: minmax(0, 1fr); }
.ss-sign-step { gap: 10px; padding: 10px; }
.ss-sign-agree { min-height: 48px; font-size: 15px; }
.ss-sign-canvas { height: 180px; }
.ss-sign-loc > .ss-btn { flex: 1 1 100%; }
.ss-sign-state-act > .ss-btn { flex: 1 1 100%; }
.ss-sign-upload-act > .ss-btn { flex: 1 1 100%; }
.ss-sign-typed-b, .ss-sign-typed-b > .ss-btn { justify-items: stretch; width: 100%; }
}
/* Phase 3 on a narrow phone (the phone audit runs down to 300px). */
@media (max-width: 359.98px) {
.ss-pack, .ss-sign-doc, .ss-sign-form { padding: 12px; }
.ss-sign-step { flex-direction: column; }
}
/* End of the phase 3 sign-on and job pack block. */
/* ==========================================================================================
Phase 3: the SWMS tab (/tradie/safety-documents) and the public share page (/swms/share/{token}).
Additive: every rule here is .ss-shelf-*. The tab is the combined design's SWMS screen: the
viewer's own SWMS to sign, "SWMS for this week's jobs" (an ss-table, cards on a phone), the
library shelf of book tiles, then every safety document. The share page is one readable column.
========================================================================================== */
/* The tab's own sections: "Yours to sign" and the library. */
.ss-shelf-sign, .ss-shelf-lib { min-width: 0; }
/* "Yours to sign": a card per SWMS the viewer still has to sign, each with one big Sign button. */
.ss-shelf-sign-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-shelf-sign-card h3.ss-rec-title { font: 700 16px/1.3 var(--ss-display); letter-spacing: -0.01em; }
/* The Sign button: full width and tall, the thing a crew member is here to press. */
.ss-shelf-sign-btn { min-height: 48px; margin-top: auto; font-size: 15px; }
/* The week's dense list: the job's day and time over its title. */
.ss-shelf-when { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; }
/* A cell's own stack: the value, then a quieter line under it. */
.ss-shelf-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ss-shelf-cell > small { margin-top: 0; }
/* High-risk work tags in a cell, a card or the share page. */
.ss-shelf-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ss-shelf-sign-card .ss-shelf-tags { margin-top: 6px; }
/* Chips side by side in a cell (the status, Needs review). */
.ss-shelf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* The crew's avatars beside the signed meter's words. */
.ss-shelf-signers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ss-shelf-signers > .ss-val { font-size: 13px; }
/* A quiet value ("None ticked", "Couldn't be loaded"). */
.ss-shelf-quiet { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
/* The copy confirmation and the "couldn't be loaded" callout with its Try again. */
.ss-shelf-copied:not(:empty) { margin: 0 0 12px; }
.ss-shelf-retry { flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
/* "Copy sign link" says what it did in its own row, under the button. */
.ss-shelf-week .ss-td.is-act > .ss-shelf-copied-note {
display: flex; align-items: flex-start; gap: 6px; flex: 1 1 100%; margin: 4px 0 0;
font-size: 12.5px; line-height: 1.4; text-align: left; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere;
}
.ss-shelf-copied-note > i { flex: none; margin-top: 1px; color: var(--success-700, #15803d); }
/* A SWMS signed on this phone that hasn't sent yet: said in place of the Sign button. */
.ss-shelf-sign-queued {
display: flex; align-items: center; gap: 8px; min-height: 48px; margin: auto 0 0; padding: 10px 12px;
border-radius: 10px; background: var(--brand-50, #eff6ff); color: var(--brand-700, #1d4ed8);
font-size: 14px; font-weight: 600; line-height: 1.35;
}
/* The start-work rule: the owner's switch, or which it is for everyone else. */
.ss-shelf-rule { min-width: 0; }
.ss-shelf-rule-body { display: grid; gap: 8px; }
.ss-shelf-rule-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); cursor: pointer; }
.ss-shelf-rule-switch > input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ss-ink); }
.ss-shelf-rule-state { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-900, #1f2933); }
.ss-shelf-rule-msg:empty { margin: 0; }
.ss-shelf-retry > p { flex: 1 1 200px; }
/* The week's jobs with no SWMS linked: one quiet line, a toggle, and the list. */
.ss-shelf-others { display: grid; gap: 8px; min-width: 0; margin-top: 12px; }
.ss-shelf-others > .ss-note { margin: 0; }
.ss-shelf-toggle { justify-self: start; }
.ss-shelf-toggle > i { font-size: 12px; transition: transform var(--dur-fast, 120ms) var(--ease-out, ease); }
.ss-shelf-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
/* The library: the note under an empty shelf, and "Show all" under a long one. */
.ss-shelf-lib-empty { margin-top: 12px; }
.ss-shelf-libfoot { display: flex; justify-content: flex-end; margin-top: 12px; font-size: 13.5px; }
/* ---- The public share page --------------------------------------------------------------- */
/* One readable column, centred, on the warm canvas; nothing of the app's chrome around it. */
.ss-shelf-share { display: flex; flex-direction: column; }
.ss-shelf-share-wrap { display: grid; gap: 16px; width: 100%; max-width: 880px; min-width: 0; margin: 0 auto; padding: 28px 1.6rem 24px; }
/* The head: who shared it, the title, the version, the job, and the file's buttons. */
.ss-shelf-share-head { display: grid; gap: 8px; min-width: 0; padding: 20px; background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs); }
.ss-shelf-share-head h1 { margin: 0; font: 800 26px/1.15 var(--ss-display); letter-spacing: -0.02em; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-shelf-share-by { margin: 0; font-size: 13.5px; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-shelf-share-by > b { color: var(--neutral-900, #1f2933); }
.ss-shelf-share-jobs { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-shelf-share-jobs > i { flex: none; margin-top: 2px; color: var(--neutral-500, #9aa3ad); }
.ss-shelf-share-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* A section of the content: an ss-panel with an h2. */
.ss-shelf-share-sec .ss-panel-head h2 { margin: 0; font: 700 17px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
.ss-shelf-share-small { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--neutral-600, #6b7280); }
/* Labels and what was written against them; is-stacked puts each label over its text. */
.ss-shelf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 20px; margin: 0; }
.ss-shelf-facts.is-stacked { grid-template-columns: minmax(0, 1fr); }
.ss-shelf-facts > div { min-width: 0; }
.ss-shelf-facts dt { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--neutral-600, #6b7280); }
.ss-shelf-facts dd { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
/* Written text keeps the line breaks it was typed with. */
.ss-shelf-text { white-space: pre-line; overflow-wrap: anywhere; }
/* The steps: a numbered list, the number in a round badge, the hazards and controls under the step. */
.ss-shelf-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ss-shelf-step { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-shelf-step:first-child { padding-top: 4px; border-top: 0; }
.ss-shelf-step-n {
display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
background: var(--ss-ink); color: var(--neutral-0, #ffffff); font: 700 13px/1 var(--ss-display); font-variant-numeric: tabular-nums;
}
.ss-shelf-step-b { flex: 1 1 auto; min-width: 0; }
.ss-shelf-step-b h3 { margin: 4px 0 6px; font: 700 15.5px/1.35 var(--ss-display); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-shelf-step-l { margin: 8px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--neutral-600, #6b7280); }
.ss-shelf-step-meta { margin-top: 8px; }
/* A plain bulleted list of short items (hazards, controls, PPE, plant). */
.ss-shelf-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-shelf-list > li + li { margin-top: 2px; }
/* PPE, plant and permits side by side when there's room. */
.ss-shelf-kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 20px; }
.ss-shelf-kit h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--neutral-800, #333d47); }
/* Who signed: an avatar, the name and when. Names and dates only. */
.ss-shelf-signed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px 16px; margin: 0; padding: 0; list-style: none; }
.ss-shelf-signed > li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-shelf-signed > li > span { display: flex; flex-direction: column; min-width: 0; }
.ss-shelf-signed b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-shelf-signed small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
/* Earlier versions: one line each with its download. */
.ss-shelf-versions { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ss-shelf-versions > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-shelf-versions > li:first-child { padding-top: 2px; border-top: 0; }
.ss-shelf-version-t { display: flex; flex: 1 1 260px; flex-direction: column; gap: 2px; min-width: 0; }
.ss-shelf-version-t b { font-size: 14px; font-weight: 600; color: var(--neutral-900, #1f2933); }
.ss-shelf-version-t small { font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* Loading, closed, busy and failed: a centred message in a white box. */
.ss-shelf-share-state {
display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8vh; padding: 32px 20px; text-align: center;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs);
}
.ss-shelf-share-state > i { font-size: 28px; line-height: 1; color: var(--neutral-500, #9aa3ad); }
.ss-shelf-share-state h1 { margin: 0; font: 800 22px/1.2 var(--ss-display); letter-spacing: -0.02em; color: var(--neutral-900, #1f2933); }
.ss-shelf-share-state p { max-width: 460px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--neutral-700, #4b5563); }
/* The page's foot: where it was shared through. */
.ss-shelf-share-foot { margin-top: auto; padding: 16px 1.6rem 28px; text-align: center; font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.ss-shelf-share-foot p { margin: 0; }
.ss-shelf-share-foot a { color: var(--brand-700, #1d4ed8); font-weight: 600; text-decoration: none; }
.ss-shelf-share-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss-shelf-share-foot a:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* The SWMS tab and the share page on a phone: 44px targets, cards not columns, nothing wider than 300px. */
@media (max-width: 767.98px) {
.ss-shelf-sign-btn { min-height: 52px; }
/* A dense-list cell with nothing in it (no next step, a pack that couldn't be read) doesn't take a line. */
.ss-shelf-week .ss-td:empty { display: none; }
.ss-shelf-week .ss-td.is-act > .ss-btn { flex: 1 1 100%; }
.ss-shelf-week .ss-td.is-act > .ss-link { display: inline-flex; align-items: center; min-height: 44px; }
.ss-shelf-toggle { min-height: 44px; }
.ss-shelf-libfoot { justify-content: flex-start; }
.ss-shelf-libfoot .ss-link { display: inline-flex; align-items: center; min-height: 44px; }
.ss-shelf-share-wrap { padding: 16px 1rem 20px; }
.ss-shelf-share-head { padding: 16px; }
.ss-shelf-share-head h1 { font-size: 22px; }
.ss-shelf-share-act > .ss-btn { flex: 1 1 100%; }
.ss-shelf-versions > li > .ss-btn { flex: 1 1 100%; }
.ss-shelf-share-foot { padding: 12px 1rem 20px; }
.ss-shelf-share-foot a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Narrow phones (the phone audit runs down to 300px). */
@media (max-width: 359.98px) {
.ss-shelf-share-head { padding: 14px; }
.ss-shelf-step { gap: 10px; }
.ss-shelf-step-n { width: 26px; height: 26px; font-size: 12px; }
}
/* Reduced motion: the toggle's chevron doesn't turn. */
@media (prefers-reduced-motion: reduce) {
.ss-shelf-toggle > i { transition: none !important; }
}
/* End of the SWMS tab block. */
/* ==========================================================================================
Phase 3: the SWMS builder and the SWMS page (/tradie/swms/new, /tradie/swms/{id}/edit,
/tradie/swms/{id}). Additive: every rule names an .ss-swms-build-* (the builder and its parts),
.ss-swms-sheet-* (a built SWMS read on screen) or .ss-swms-detail-* (the SWMS page) class.
Risk ratings are shades of ink, never red; red stays for what has lapsed and incidents (is-over).
========================================================================================== */
/* Builder layout: the parts rail beside the part from 992px, and the suggestions beside the steps from 1280px. */
.ss-swms-build { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
@media (min-width: 992px) {
.ss-swms-build { grid-template-columns: 232px minmax(0, 1fr); }
.ss-swms-build-nav { position: sticky; top: 88px; }
}
@media (min-width: 1280px) {
.ss-swms-build.has-side { grid-template-columns: 232px minmax(0, 1fr) 340px; }
}
/* Suggestions beside the steps: a white side panel that scrolls on its own; below 1280px each step opens them in a sheet instead. */
.ss-swms-build-side {
display: none; min-width: 0; padding: 16px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs);
}
@media (min-width: 1280px) {
.ss-swms-build-side { display: block; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; }
.ss-btn.ss-swms-build-suggest { display: none; }
}
/* Parts rail: one button per part, a tick when nothing in it is missing, else how many things are left. */
.ss-swms-build-nav { min-width: 0; }
.ss-swms-build-nav ol { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-swms-build-nav-i {
position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px;
border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--neutral-800, #333d47);
font: inherit; text-align: left; cursor: pointer;
}
.ss-swms-build-nav-i:hover { background: var(--neutral-200, #e9e9e6); }
.ss-swms-build-nav-i:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-swms-build-nav-i.is-current { background: var(--neutral-0, #ffffff); border-color: var(--neutral-300, #e5e7eb); box-shadow: var(--shadow-xs); }
/* The part's number (a tick once done); ink for the part on screen. */
.ss-swms-build-nav-n {
display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
background: var(--neutral-0, #ffffff); box-shadow: inset 0 0 0 1.5px var(--neutral-400, #cbd0d6);
font: 700 13px/1 var(--ss-display); color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums;
}
.ss-swms-build-nav-i.is-done .ss-swms-build-nav-n { background: var(--success-600, #16a34a); box-shadow: none; color: var(--neutral-0, #ffffff); }
.ss-swms-build-nav-i.is-current .ss-swms-build-nav-n { background: var(--ss-ink); box-shadow: none; color: var(--neutral-0, #ffffff); }
.ss-swms-build-nav-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-swms-build-nav-name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-swms-build-nav-state { font-size: 12.5px; line-height: 1.3; color: var(--neutral-600, #6b7280); }
.ss-swms-build-nav-i.is-done .ss-swms-build-nav-state { color: var(--success-800, #166534); }
@media (min-width: 768px) and (max-width: 991.98px) {
.ss-swms-build-nav ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* One part on screen: its counter, heading and line, the saved line, the fields, then Back and Next. */
.ss-swms-build-part { min-width: 0; }
.ss-swms-build-part-head {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px;
padding: 18px 20px 14px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); scroll-margin-top: 96px;
}
.ss-swms-build-part-t { flex: 1 1 320px; min-width: 0; }
.ss-swms-build-part-n { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--neutral-600, #6b7280); }
.ss-swms-build-part-t h2 { margin: 2px 0 0; font: 800 21px/1.2 var(--ss-display); letter-spacing: -0.015em; color: var(--neutral-900, #1f2933); }
.ss-swms-build-part-t p { max-width: 640px; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-swms-build-part-body { display: grid; gap: 18px; min-width: 0; padding: 18px 20px 20px; }
.ss-swms-build-part-body > * { min-width: 0; }
.ss-swms-build-part-foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
padding: 12px 20px 16px; border-top: 1px solid var(--neutral-200, #e9e9e6);
}
/* Anything the page scrolls to (a part's top, a step, a field) clears the sticky top bar. */
.ss-swms-build [id^="swms-f-"], .ss-swms-build [id^="swms-step-"] { scroll-margin-top: 96px; }
/* The part's heading takes the focus when the part changes (tabindex -1): no ring for a tap or a click. */
.ss-swms-build-part-t h2:focus:not(:focus-visible) { outline: none; }
/* The saved line again beside Back and Next, on the left of the footer. */
.ss-swms-build-part-foot > .ss-swms-build-saved { margin-right: auto; }
/* Why Issue is held when the SWMS itself is complete: the draft couldn't be saved. */
.ss-swms-build-held { color: var(--warning-800, #92400e); }
/* Linking a SWMS to a job (the builder's job and site screen, the SWMS page's "Jobs it covers"). */
.ss-swms-build-link { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.ss-swms-build-link-pick { display: grid; gap: 8px; width: 100%; max-width: 520px; min-width: 0; }
.ss-swms-build-link-msg { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-swms-build-link-msg:empty { margin: 0; }
/* The saved line ("Saved 9:31 am"); amber when a change isn't saved (offline or refused). */
.ss-swms-build-saved { display: inline-flex; align-items: flex-start; gap: 7px; max-width: 360px; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--neutral-700, #4b5563); }
.ss-swms-build-saved > i { flex: none; margin-top: 1px; color: var(--neutral-500, #9aa3ad); }
.ss-swms-build-saved.is-ok > i { color: var(--success-700, #15803d); }
.ss-swms-build-saved.is-soon { color: var(--warning-800, #92400e); }
.ss-swms-build-saved.is-soon > i { color: var(--warning-700, #b45309); }
/* Small print under a field or a group; a row of buttons. */
.ss-swms-build-help { display: block; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-swms-build-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Text boxes in the builder grow with what's typed (where the browser can). */
.ss-swms-build textarea.ss-input { field-sizing: content; min-height: 42px; max-height: 360px; }
/* A group of fields with its own heading (a fieldset): what could go wrong, the controls, PPE, plant. */
.ss-swms-build-group { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-swms-build-group > legend, .ss-swms-build-group > h3 { display: block; margin: 0 0 8px; padding: 0; font-size: 14.5px; }
.ss-swms-build-group > .ss-swms-build-help { margin-bottom: 8px; }
/* A list of rows you can add to and remove from (hazards, controls, plant, permits). */
.ss-swms-build-items { display: grid; gap: 8px; min-width: 0; margin: 0 0 8px; padding: 0; list-style: none; }
.ss-swms-build-item { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.ss-swms-build-item > textarea, .ss-swms-build-item > input, .ss-swms-build-item > .ss-fields, .ss-swms-build-item > .ss-swms-build-control-t { flex: 1 1 auto; min-width: 0; }
/* A control: a white box holding its words and its type of control, side by side (stacked on a phone). */
.ss-swms-build-control { padding: 8px; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: 10px; background: var(--neutral-0, #ffffff); }
.ss-swms-build-control-t { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 6px; min-width: 0; }
/* A row with several fields (plant, a permit): a light box so each one reads as a unit. */
.ss-swms-build-pair { padding: 10px; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: 10px; background: var(--neutral-50, #f8f8f7); }
/* What's still missing on this screen (dashed) and prompts worth a look (a bulb). */
.ss-swms-build-todo {
display: grid; gap: 6px; margin: 0; padding: 12px 14px; list-style: none;
border: 1px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.ss-swms-build-todo > li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-swms-build-todo > li > i { flex: none; margin-top: 3px; font-size: 11px; color: var(--neutral-500, #9aa3ad); }
.ss-swms-build-todo > li.is-warn > i { color: var(--warning-700, #b45309); font-size: 13px; margin-top: 1px; }
/* Starting a SWMS: the job it's for, the SWMS the job already has, the one chosen to copy. */
.ss-swms-build-for .ss-panel-body, .ss-swms-build-start .ss-panel-body { display: grid; gap: 12px; }
.ss-swms-build-start .ss-panel-body > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-800, #333d47); }
.ss-swms-build-existing { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.ss-swms-build-existing > li > span { margin-left: 6px; font-size: 12.5px; color: var(--neutral-700, #4b5563); }
.ss-swms-build-source .ss-btn { margin-top: 10px; white-space: normal; }
/* The job(s) a SWMS is linked to, on the job and site screen. */
.ss-swms-build-jobs { display: grid; gap: 6px; min-width: 0; }
.ss-swms-build-jobs > ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-swms-build-jobs > ul > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.ss-swms-build-jobs > ul > li > span { color: var(--neutral-600, #6b7280); }
/* High-risk work: the state, then a card per category of that state's list; ticked cards take an ink edge. */
.ss-swms-build-hrcw { display: grid; gap: 14px; min-width: 0; }
.ss-swms-build-state { max-width: 360px; }
.ss-swms-build-hrcw-law { margin: 0; }
.ss-swms-build-hrcw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-swms-build-hrcw-i {
display: grid; gap: 10px; align-content: start; min-width: 0; padding: 12px 14px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.ss-swms-build-hrcw-i.is-on { border-color: var(--neutral-700, #4b5563); box-shadow: inset 0 0 0 1px var(--neutral-700, #4b5563); background: var(--neutral-50, #f8f8f7); }
.ss-swms-build-hrcw-pick { display: flex; align-items: flex-start; gap: 12px; min-width: 0; cursor: pointer; }
.ss-swms-build-hrcw-pick > input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ss-ink); }
.ss-swms-build-hrcw-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ss-swms-build-hrcw-text > small { font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-swms-build-hrcw-text > .ss-swms-build-hrcw-diff { font-weight: 500; color: var(--brand-800, #1e40af); }
.ss-swms-build-hrcw-text > .ss-swms-build-hrcw-ref { font-size: 12px; color: var(--neutral-600, #6b7280); }
.ss-swms-build-hrcw-note { padding-left: 32px; }
/* Task steps: a card each, numbered in ink; the step suggestions are going into has a blue edge. */
.ss-swms-build-steps { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-swms-build-step {
display: grid; gap: 14px; min-width: 0; padding: 16px 18px 18px; scroll-margin-top: 96px;
background: var(--neutral-50, #f8f8f7); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px);
}
.ss-swms-build-step.is-active { border-color: var(--brand-300, #93c5fd); box-shadow: inset 3px 0 0 var(--brand-600, #2563eb); }
.ss-swms-build-step-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-swms-build-step-n {
display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
background: var(--ss-ink); color: var(--neutral-0, #ffffff); font: 700 13px/1 var(--ss-display); font-variant-numeric: tabular-nums;
}
.ss-swms-build-step-t { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 16px/1.25 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-swms-build-step-act { display: flex; flex: none; gap: 2px; margin-left: auto; }
.ss-swms-build-step-foot { display: flex; flex-wrap: wrap; gap: 8px; }
/* A copied step's "checked for this site" tick, inside its callout. */
.ss-swms-build-copied > div > p { margin: 0; }
.ss-swms-build-tick { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-top: 8px; font-weight: 600; color: var(--neutral-900, #1f2933); cursor: pointer; }
.ss-swms-build-tick > input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ss-ink); }
/* No steps yet: what a step needs, and the button that adds the first one. */
.ss-swms-build-empty {
display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 18px;
border: 1.5px dashed var(--neutral-400, #cbd0d6); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.ss-swms-build-empty > i { flex: none; font-size: 22px; line-height: 1; color: var(--neutral-500, #9aa3ad); }
.ss-swms-build-empty b { display: block; font: 700 16px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-swms-build-empty p { margin: 4px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
/* Risk before and after: four radio buttons, Low to Extreme, the chosen one filled (lighter for low, ink for high). */
.ss-swms-build-risk { min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-swms-build-risk > legend { margin: 0 0 6px; padding: 0; }
.ss-swms-build-risk-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 440px; }
.ss-swms-build-risk-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.ss-swms-build-risk-opt > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ss-swms-build-risk-opt > span {
display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 6px;
border: 1px solid var(--neutral-400, #cbd0d6); border-radius: 9px; background: var(--neutral-0, #ffffff);
font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--neutral-800, #333d47); text-align: center; overflow-wrap: anywhere;
}
.ss-swms-build-risk-opt:hover > span { border-color: var(--neutral-600, #6b7280); }
.ss-swms-build-risk-opt > input:focus-visible + span { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-swms-build-risk-opt.is-on > span { font-weight: 800; box-shadow: inset 0 0 0 1px var(--neutral-800, #333d47); border-color: var(--neutral-800, #333d47); }
.ss-swms-build-risk-opt.is-on.is-low > span { background: var(--neutral-100, #f4f4f2); color: var(--neutral-900, #1f2933); }
.ss-swms-build-risk-opt.is-on.is-medium > span { background: var(--neutral-300, #e5e7eb); color: var(--neutral-900, #1f2933); }
.ss-swms-build-risk-opt.is-on.is-high > span { background: var(--neutral-700, #4b5563); color: var(--neutral-0, #ffffff); }
.ss-swms-build-risk-opt.is-on.is-extreme > span { background: var(--ss-ink); color: var(--neutral-0, #ffffff); }
/* PPE: removable pills, a box to add one, and one-tap common items. */
.ss-swms-build-ppe { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0 0 10px; padding: 0; list-style: none; }
.ss-swms-build-ppe > li {
display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 34px; padding: 0 2px 0 12px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #ffffff);
font-size: 13.5px; font-weight: 500; color: var(--neutral-800, #333d47);
}
.ss-swms-build-ppe > li > span { min-width: 0; overflow-wrap: anywhere; }
.ss-swms-build-ppe .ss-icon-btn { width: 30px; height: 30px; border-radius: 50%; font-size: 12px; }
.ss-swms-build-add { display: flex; gap: 8px; max-width: 420px; min-width: 0; }
.ss-swms-build-add > input { flex: 1 1 auto; min-width: 0; }
.ss-swms-build-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-width: 0; }
/* Crew tickets on record (from the people register): warnings only, a chip per ticket. */
.ss-swms-build-tickets { display: grid; gap: 8px; }
.ss-swms-build-tickets > h3 { margin: 0; }
.ss-swms-build-gaps, .ss-swms-detail-gaps { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-swms-build-gaps > li, .ss-swms-detail-gaps > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); }
.ss-swms-build-gaps > li > span, .ss-swms-detail-gaps > li > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ss-swms-build-gaps small, .ss-swms-detail-gaps small { color: var(--neutral-600, #6b7280); }
/* Suggestions: yours (white cards) kept apart from the starter library (dashed), each with Add. */
.ss-swms-build-sugg { display: grid; gap: 12px; min-width: 0; }
.ss-swms-build-sugg-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 16.5px/1.25 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-swms-build-sugg-head h3 > i { font-size: 15px; color: var(--neutral-600, #6b7280); }
.ss-swms-build-sugg-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-swms-build-sugg .ss-search { max-width: none; }
.ss-swms-build-sugg-trade { align-self: start; }
.ss-swms-build-sugg-group { display: grid; gap: 8px; min-width: 0; }
.ss-swms-build-sugg-group > .ss-subhead { margin: 4px 0 0; }
.ss-swms-build-sugg-list { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-swms-build-sugg-i { display: grid; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-0, #ffffff); }
.ss-swms-build-sugg-i.is-starter { border-style: dashed; background: var(--neutral-50, #f8f8f7); }
.ss-swms-build-sugg-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ss-swms-build-sugg-t { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.ss-swms-build-sugg-t > b { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-swms-build-sugg-t > small { font-size: 12px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
.ss-swms-build-sugg-controls { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0 0 0 12px; list-style: none; border-left: 2px solid var(--neutral-200, #e9e9e6); }
.ss-swms-build-sugg-controls > li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.ss-swms-build-sugg-ct { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-swms-build-sugg-ct > small { display: block; font-size: 11.5px; color: var(--neutral-600, #6b7280); }
.ss-swms-build-sugg-start { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 1.4; color: var(--neutral-700, #4b5563); }
.ss-swms-build-sugg-empty { display: grid; gap: 8px; justify-items: start; margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-swms-build-sugg-empty > p { margin: 0; }
/* Review and issue: what's left by part (each with a way to it), prompts, then the Issue box. */
.ss-swms-build-check { display: grid; gap: 14px; min-width: 0; }
.ss-swms-build-check-sum {
display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: var(--radius-md, 12px);
border: 1px solid var(--neutral-300, #e5e7eb); background: var(--neutral-100, #f4f4f2); font-size: 15px; color: var(--neutral-900, #1f2933);
}
.ss-swms-build-check-sum > i { flex: none; font-size: 18px; color: var(--neutral-600, #6b7280); }
.ss-swms-build-check-sum.is-ok { border-color: var(--success-200, #bbf7d0); background: var(--success-50, #f0fdf4); color: var(--success-800, #166534); }
.ss-swms-build-check-sum.is-ok > i { color: var(--success-700, #15803d); }
.ss-swms-build-check-part { min-width: 0; }
.ss-swms-build-check-part h4 { margin: 0 0 6px; font: 700 14.5px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-swms-build-check-part ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-swms-build-check-part li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); }
.ss-swms-build-check-part li > i { flex: none; font-size: 11px; color: var(--neutral-500, #9aa3ad); }
.ss-swms-build-check-part li > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ss-swms-build-check-part.is-warn li > i { font-size: 13px; color: var(--warning-700, #b45309); }
.ss-swms-build-check-part.is-warn > .ss-swms-build-help { margin-top: 6px; }
.ss-swms-build-issue {
display: grid; gap: 10px; min-width: 0; padding: 16px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.ss-swms-build-issue > h3 { margin: 0; font: 700 17px/1.25 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-swms-build-issue > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-swms-build-issue > .ss-note { margin: 0; }
.ss-swms-build-discard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-swms-build-discard > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
/* Folded sections (the builder's preview, the SWMS page's "read it here" and signature record): a 44px summary. */
.ss-swms-build-preview, .ss-swms-detail-read { min-width: 0; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
:is(.ss-swms-build-preview, .ss-swms-detail-read, .ss-swms-detail-record) > summary {
display: list-item; min-height: 44px; padding: 11px 14px; cursor: pointer;
font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--brand-700, #1d4ed8);
}
:is(.ss-swms-build-preview, .ss-swms-detail-read, .ss-swms-detail-record) > summary:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: -3px; }
:is(.ss-swms-build-preview, .ss-swms-detail-read)[open] > summary { border-bottom: 1px solid var(--neutral-200, #e9e9e6); }
:is(.ss-swms-build-preview, .ss-swms-detail-read) > .ss-swms-sheet { padding: 14px; }
/* A built SWMS read on screen: facts as label and value, each step a card (hazards, controls, risk before and after). */
.ss-swms-sheet { display: grid; gap: 20px; min-width: 0; }
.ss-swms-sheet-sec { min-width: 0; }
.ss-swms-sheet-sec h4 { margin: 0 0 8px; font: 700 15px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-swms-sheet-dl { display: grid; gap: 6px; margin: 0; }
.ss-swms-sheet-f { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 2px 14px; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.ss-swms-sheet-f > dt { font-weight: 500; color: var(--neutral-600, #6b7280); }
.ss-swms-sheet-f > dd { margin: 0; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; white-space: pre-line; }
.ss-swms-sheet-f > dd.ss-swms-sheet-none, .ss-swms-sheet-none { margin: 0; font-size: 13.5px; color: var(--neutral-600, #6b7280); }
.ss-swms-sheet-hrcw { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ss-swms-sheet-hrcw > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ss-swms-sheet-hrcw > li > small { min-width: 0; font-size: 13px; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-swms-sheet-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ss-swms-sheet-step { min-width: 0; overflow: hidden; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-0, #ffffff); }
.ss-swms-sheet-step-head { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); background: var(--neutral-50, #f8f8f7); }
.ss-swms-sheet-step-head > b { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.ss-swms-sheet-step-n {
display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
background: var(--ss-ink); color: var(--neutral-0, #ffffff); font: 700 12px/1 var(--ss-display);
}
.ss-swms-sheet-step-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px 16px; padding: 10px 12px 12px; font-size: 13.5px; line-height: 1.45; }
.ss-swms-sheet-step-body ul { margin: 2px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
.ss-swms-sheet-k { display: block; font-size: 12px; font-weight: 600; color: var(--neutral-600, #6b7280); }
.ss-swms-sheet-level { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--neutral-100, #f4f4f2); font-size: 11.5px; font-weight: 600; color: var(--neutral-700, #4b5563); }
.ss-swms-sheet-risks { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.ss-swms-sheet-risks > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-swms-sheet-risk { display: inline-grid; place-items: center; min-width: 64px; padding: 2px 8px; border: 1px solid var(--neutral-400, #cbd0d6); border-radius: 6px; background: var(--neutral-0, #ffffff); font-size: 12px; font-weight: 700; color: var(--neutral-800, #333d47); }
.ss-swms-sheet-risk.is-medium { background: var(--neutral-200, #e9e9e6); }
.ss-swms-sheet-risk.is-high, .ss-swms-sheet-risk.is-extreme { border-color: var(--ss-ink); background: var(--ss-ink); color: var(--neutral-0, #ffffff); }
.ss-swms-sheet-who { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--neutral-700, #4b5563); }
.ss-swms-sheet-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.ss-swms-sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-swms-sheet-tags > li { max-width: 100%; padding: 3px 10px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #f4f4f2); font-size: 13px; overflow-wrap: anywhere; }
.ss-swms-sheet-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.45; }
.ss-swms-sheet-list > li { min-width: 0; overflow-wrap: anywhere; }
.ss-swms-sheet-list > li > small { display: block; font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.ss-swms-sheet-p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
/* The SWMS page: the version in force, who signed and the versions; share links, tickets and keeping it beside them from 1200px. */
.ss-swms-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 24px; align-items: start; min-width: 0; }
@media (min-width: 1200px) {
.ss-swms-detail { grid-template-columns: minmax(0, 1fr) 360px; }
}
.ss-swms-detail-main, .ss-swms-detail-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.ss-swms-detail-main > .ss-section + .ss-section { margin-top: 12px; }
.ss-swms-detail-side .ss-panel-body { display: grid; gap: 10px; }
.ss-swms-detail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ss-swms-detail-quiet { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-swms-detail-review p, .ss-swms-detail-sign p { margin: 0; }
.ss-swms-detail-sign .ss-btn { margin-top: 8px; white-space: normal; }
.ss-swms-detail-change { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; white-space: pre-line; }
.ss-swms-detail-current { gap: 12px; }
.ss-swms-detail-k { font-size: 12.5px; font-weight: 500; color: var(--neutral-600, #6b7280); }
/* "Jobs it covers": the jobs the SWMS is linked to, and linking another (managers). */
.ss-swms-detail-jobs .ss-panel-body > ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-swms-detail-jobs .ss-panel-body > ul > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.ss-swms-detail-jobs .ss-panel-body > ul > li > span { color: var(--neutral-600, #6b7280); }
/* Who has signed the version in force: the meter, who still needs to, one line per person. */
.ss-swms-detail-signing { display: grid; gap: 12px; padding-top: 14px; }
.ss-swms-detail-still { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); }
.ss-swms-detail-people { display: grid; margin: 0; padding: 0; list-style: none; }
.ss-swms-detail-people > li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-swms-detail-person { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.ss-swms-detail-person > b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-swms-detail-person > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* Every signature on record, by version (a manager can see each drawn signature). */
.ss-swms-detail-record { border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-swms-detail-record[open] { padding-bottom: 14px; }
.ss-swms-detail-record-v { padding: 0 16px; }
.ss-swms-detail-record-v h4 { margin: 10px 0 4px; font: 700 14px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-swms-detail-record-v ul { display: grid; margin: 0; padding: 0; list-style: none; }
.ss-swms-detail-record-v li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; padding: 8px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-swms-detail-record > .ss-swms-detail-quiet { padding: 8px 16px 0; }
.ss-swms-detail-sig { display: block; max-width: 100%; max-height: 240px; margin: 0 auto; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-0, #ffffff); }
/* Share links: one entry each (name, state, when it stops, how often it's been opened, Turn it off). */
.ss-swms-detail-share .ss-panel-head .ss-btn { flex: none; }
.ss-swms-detail-links { display: grid; margin: 0; padding: 0; list-style: none; }
.ss-swms-detail-links > li { display: grid; justify-items: start; gap: 3px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-swms-detail-links > li > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-swms-detail-links > li > .ss-btn { margin-top: 6px; }
.ss-swms-detail-link-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.ss-swms-detail-link-t > b { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.ss-swms-detail-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.ss-swms-detail-ends { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-swms-detail-ends > legend { margin: 0 0 6px; padding: 0; }
.ss-swms-detail-choice { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; cursor: pointer; }
.ss-swms-detail-choice > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ss-ink); }
.ss-swms-detail-reasons { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--neutral-800, #333d47); }
/* The builder and the SWMS page on a phone (<= 767.98px): one part per screen, the parts as six numbered
buttons, 44px targets, 16px text in fields, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-swms-build { gap: 14px; }
.ss-swms-build-nav ol { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.ss-swms-build-nav-i { justify-content: center; min-height: 44px; padding: 7px 0; }
.ss-swms-build-nav-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ss-swms-build-part-head { padding: 14px 14px 12px; }
.ss-swms-build-part-body { padding: 14px; gap: 16px; }
.ss-swms-build-part-foot { padding: 12px 14px 14px; }
.ss-swms-build-part-foot .ss-btn { flex: 1 1 auto; }
.ss-swms-build-part-foot > .ss-swms-build-saved { flex: 1 1 100%; margin-right: 0; }
.ss-swms-build-part-t h2 { font-size: 19px; }
.ss-swms-build-saved { max-width: 100%; }
.ss-swms-build-link, .ss-swms-build-link-pick { justify-items: stretch; }
.ss-swms-build-link .ss-btn { min-height: 44px; }
.ss-swms-build-state, .ss-swms-build-add { max-width: none; }
.ss-swms-build-hrcw-pick { min-height: 44px; }
.ss-swms-build-hrcw-note { padding-left: 0; }
.ss-swms-build-step { padding: 14px 12px; gap: 12px; }
.ss-swms-build-step-head { flex-wrap: wrap; }
.ss-swms-build-control-t { grid-template-columns: minmax(0, 1fr); }
.ss-swms-build-risk-opts { max-width: none; gap: 4px; }
.ss-swms-build-risk-opt > span { min-height: 44px; padding: 4px 2px; font-size: 13px; }
.ss-swms-build-tick { min-height: 44px; }
.ss-swms-build-ppe > li { min-height: 44px; }
.ss-swms-build-ppe .ss-icon-btn { width: 44px; height: 44px; }
.ss-swms-build-check-part .ss-link { display: inline-flex; align-items: center; min-height: 44px; }
.ss-swms-build-empty { flex-direction: column; gap: 10px; padding: 14px; }
.ss-swms-sheet-f { grid-template-columns: minmax(0, 1fr); }
.ss-swms-sheet-step-body { grid-template-columns: minmax(0, 1fr); }
.ss-swms-sheet-risks { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.ss-swms-detail-choice { min-height: 44px; }
.ss-swms-detail-people > li { flex-wrap: wrap; }
.ss-swms-detail-row .ss-btn { flex: 1 1 auto; }
.ss-swms-detail-record-v { padding: 0 14px; }
}
/* Narrow phones (the phone audit runs down to 300px): smaller numbers and risk words so a row still fits.
The six parts wrap to two rows of three, so each button stays a 44px target at 300px. */
@media (max-width: 359.98px) {
.ss-swms-build-nav ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-swms-build-nav-n { width: 26px; height: 26px; font-size: 12px; }
.ss-swms-build-risk-opt > span { font-size: 12px; }
.ss-swms-build-step { padding: 12px 10px; }
}
/* End of the SWMS builder and SWMS page block. */
/* ==========================================================================================
Phase 4: toolbox talks, .ss-talk-* (/tradie/toolbox-talks, the new talk, one talk, its sign-on).
A talk is a consultation record: its mark is the library's talk colour, never red. The sign-on
page reuses the phase 3 .ss-sign-* column; only the visitor's name picks are added here.
========================================================================================== */
/* A talk's icon tile: the neutral tile with the library's talk colour on the icon. */
.ss-rec-ic.ss-talk-ic { color: var(--ss-k-talk, var(--warning-600, #d97706)); }
/* A talk in a list: the meter keeps its room beside the title. */
.ss-talk-row > .ss-rec-end { min-width: 120px; }
/* "Yours to sign": a card per open talk the viewer hasn't signed, each with one big Sign button. */
.ss-talk-tosign { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-talk-tosign-card { border-color: var(--brand-200, #bfdbfe); }
/* The Sign button on a card: full width and tall, the thing a crew member is here to press. */
.ss-btn.ss-talk-sign-btn { min-height: 48px; font-size: 15px; }
/* "Run it again" under a topic on the shelf. */
.ss-talk-again { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--brand-700, #1d4ed8); }
/* Words: plain text, a quieter line, a hint under a field, and a problem with a field (amber, never red). */
.ss-talk-plain { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-talk-quiet { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-talk-hint { font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-talk-error { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--warning-800, #92400e); overflow-wrap: anywhere; }
/* A callout with more than one line: paragraphs close up, a list keeps its marks. */
.ss-talk-callout p { margin: 0 0 4px; }
.ss-talk-callout p:last-child { margin-bottom: 0; }
.ss-talk-callout ul { margin: 4px 0 6px; padding-left: 18px; }
.ss-talk-callout-btn { margin-top: 8px; }
/* A row of buttons under a part of the page. */
.ss-talk-row-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* What stops a talk being recorded or closed, one line each. */
.ss-talk-problems { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--neutral-800, #333d47); }
/* ---- Recording a talk: one readable column, the fields in parts, the buttons in a footer ---- */
.ss-talk-form { display: grid; gap: 16px; width: 100%; max-width: 820px; min-width: 0; margin: 0 auto; }
.ss-talk-form-panel { overflow: hidden; }
.ss-talk-form-panel > .ss-panel-body { padding-top: 18px; }
.ss-talk-form-foot { display: grid; gap: 12px; padding: 14px 16px 16px; border-top: 1px solid var(--neutral-200, #e9e9e6); background: var(--neutral-50, #f8f8f7); }
.ss-talk-form-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ss-talk-form > .ss-note { margin: 0; }
/* The fields (SsTalkFields): parts with a heading each, a rule between them. */
.ss-talk-fields { display: grid; gap: 22px; min-width: 0; }
.ss-talk-part { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-talk-part + .ss-talk-part { padding-top: 18px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
/* A part's heading: a floated legend sits inside the part as its first row, not on its border. */
.ss-talk-part-h { float: left; width: 100%; margin: 0; padding: 0; font: 700 16px/1.3 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
/* A text box with its button beside it (a visitor's name, a person to add). */
.ss-talk-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ss-talk-add > .ss-input { flex: 1 1 200px; width: auto; }
.ss-talk-add > .ss-btn { flex: none; }
/* The team to tick: one box per person, the whole box is the target. */
.ss-talk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-talk-person {
display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; margin: 0; padding: 6px 10px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); cursor: pointer;
}
.ss-talk-person > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--brand-600, #2563eb); cursor: pointer; }
.ss-talk-person:has(> input:checked) { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); }
.ss-talk-person:has(> input:focus-visible) { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-talk-person-t { display: flex; flex-direction: column; min-width: 0; }
.ss-talk-person-t > b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-talk-person-t > small { font-size: 12px; line-height: 1.3; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* "Tick the crew on this job": one press for everyone booked on the job. */
.ss-talk-crew { justify-self: start; }
/* Visitors put on the list, each with a button to take them off. */
.ss-talk-visitors { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-talk-visitors > li {
display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 4px 4px 10px; font-size: 14px; overflow-wrap: anywhere;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.ss-talk-visitors > li > .ss-icon-btn { margin-left: auto; }
/* ---- One talk: the talk, who attended and the issues, beside the record and keeping it ---- */
.ss-talk-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
.ss-talk-main, .ss-talk-side { display: grid; gap: 24px; align-content: start; min-width: 0; }
.ss-talk-side { gap: 16px; }
.ss-talk-side > .ss-note { margin: 0; }
.ss-talk-main > .ss-section + .ss-section { margin-top: 0; }
/* The talk's facts: when, the job, where, who ran it; then what was covered, as it was written. */
.ss-talk-about { display: grid; gap: 14px; padding-top: 14px; }
.ss-talk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px 20px; margin: 0; }
.ss-talk-facts > div { min-width: 0; }
.ss-talk-facts dt { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--neutral-600, #6b7280); }
.ss-talk-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-talk-text { display: grid; gap: 6px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-talk-text > p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
/* A small heading inside a panel (What was covered, Actions, Add someone to the list). */
.ss-talk-text > h3, .ss-talk-subh, .ss-talk-addbox > h3 { margin: 0; font: 700 15px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
/* Who attended: the meter, then one line per person with their chips and buttons. */
.ss-talk-people-panel { display: grid; gap: 14px; padding-top: 14px; }
.ss-talk-attendees { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-talk-attendees > li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-talk-attendees > li:first-child { border-top: 0; }
.ss-talk-attendee { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ss-talk-attendee > b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-talk-attendee > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-talk-attendee-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 1 auto; max-width: 60%; }
/* Signatures taken on this phone that haven't sent yet. */
.ss-talk-queued { margin: 0; }
/* A box inside a panel for a small form (add someone, raise an action). */
.ss-talk-addbox { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7); }
/* Issues raised: one line each, with the button that raises it as an action or a chip once it has one. */
.ss-talk-issues { display: grid; gap: 14px; padding-top: 14px; }
.ss-talk-issue-list { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-talk-issue-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; padding: 8px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-talk-issue-list > li:first-child { border-top: 0; }
.ss-talk-issue-t { flex: 1 1 220px; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
/* The actions raised: what, who owns it, when it's due, and its state; an overdue one has the red rail. */
.ss-talk-actions { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-talk-action {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 12px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.ss-talk-action.is-over { box-shadow: inset 3px 0 0 var(--danger-600, #dc2626); }
.ss-talk-action-t { display: grid; gap: 2px; min-width: 0; }
.ss-talk-action-t > b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-talk-action-t > p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); white-space: pre-line; overflow-wrap: anywhere; }
.ss-talk-action-t > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* The record: closing it and its PDF. */
.ss-talk-record { display: grid; justify-items: start; gap: 12px; }
/* A signature, shown on white. */
.ss-talk-sig { display: block; width: 100%; max-width: 420px; height: auto; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
/* ---- Signing: the visitors on the list the runner can pick ---- */
.ss-talk-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ss-talk-picks-l { font-size: 13px; font-weight: 600; color: var(--neutral-700, #4b5563); }
/* A talk's page beside its record from a wide screen. */
@media (min-width: 1100px) {
.ss-talk-detail { grid-template-columns: minmax(0, 1fr) 320px; }
}
/* Toolbox talks on a phone (<= 767.98px): 44px targets, one column, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-talk-person { min-height: 48px; }
.ss-talk-add > .ss-input, .ss-talk-add > .ss-btn { flex: 1 1 100%; }
.ss-talk-crew { justify-self: stretch; }
.ss-talk-visitors > li { min-height: 48px; }
.ss-talk-form-act > .ss-btn, .ss-talk-row-act > .ss-btn { flex: 1 1 auto; }
.ss-talk-attendees > li { flex-wrap: wrap; align-items: flex-start; }
.ss-talk-attendee-end { flex: 1 1 100%; max-width: none; justify-content: flex-start; padding-left: 42px; }
.ss-talk-action { flex-direction: column; }
.ss-talk-addbox { padding: 12px; }
.ss-talk-picks > .ss-pill { min-height: 44px; }
.ss-talk-row > .ss-rec-end { min-width: 0; }
}
/* Toolbox talks on a narrow phone (the phone audit runs down to 300px). */
@media (max-width: 359.98px) {
.ss-talk-attendee-end { padding-left: 0; }
.ss-talk-form-foot { padding: 12px; }
}
/* End of the toolbox talks block. */
/* ==========================================================================================
Checks: the check builder (/tradie/form-builder/{id}, .ss-fb-*) and the fill page
(/tradie/form-fill/{id}, .ss-ff-*), safety phase 4. Additive: every rule here is .ss-fb-* or
.ss-ff-*. Both pages were left in their own style in phase 1; this moves them onto the ss-*
primitives (buttons, chips, callouts, fields, drop zone, modal) and keeps only what is theirs.
Flagged answers are amber, as on the Checks list (a flag is not overdue); red stays for overdue.
========================================================================================== */
/* ---- Shared: a state in place of the page (didn't load, not found, can't change, saved on the phone) ---- */
/* A callout that stands in for the page, with its heading and buttons. */
.ss-fb-state, .ss-ff-state { max-width: 720px; }
.ss-fb-state p, .ss-ff-state p { margin: 0 0 4px; }
.ss-fb-state p:last-child, .ss-ff-state p:last-child { margin-bottom: 0; }
.ss-fb-state-h, .ss-ff-state-h { font-weight: 700; }
.ss-ff-state-h:focus { outline: none; }
.ss-fb-state-act, .ss-ff-state-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* ---- Check builder ------------------------------------------------------------------------ */
/* The builder: messages above the three-column workspace. */
.ss-fb-main { display: grid; gap: 14px; min-width: 0; }
/* A message above the workspace (saved, refused, a library check), with a dismiss button. */
.ss-fb-alert { align-items: flex-start; }
.ss-fb-alert > p, .ss-fb-alert > div { flex: 1 1 auto; }
.ss-fb-alert p { margin: 0; }
.ss-fb-alert p + p { margin-top: 4px; }
.ss-fb-alert > .ss-icon-btn { flex: none; margin: -6px -6px -6px 0; }
/* The ways forward after a refused save or copy. */
.ss-fb-refused { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Workspace: the question types, the check, then the chosen question's or section's settings. */
.ss-fb-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 16px; align-items: start; min-width: 0; }
.ss-fb-palette, .ss-fb-canvas, .ss-fb-props {
min-width: 0; background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb);
border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs);
}
.ss-fb-palette, .ss-fb-props { position: sticky; top: 1rem; }
/* A library check: read, not changed. The question types can't be used. */
.ss-fb-layout.is-readonly .ss-fb-palette { opacity: .55; }
/* Question types: add a section or a page, then one button per type (tap to add, or drag). */
.ss-fb-palette { padding: 14px; }
.ss-fb-palette-head h2 { margin: 0; font: 700 15px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-fb-palette-head p { margin: 2px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-fb-palette-adds { display: grid; gap: 6px; margin-bottom: 12px; }
.ss-fb-add {
display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 10px;
border: 1.5px dashed var(--brand-300, #93c5fd); border-radius: 10px; background: var(--brand-50, #eff6ff);
color: var(--brand-700, #1d4ed8); font: 600 13px/1.25 var(--ss-sans); text-align: left; cursor: pointer;
}
.ss-fb-add:hover { border-color: var(--brand-500, #3b82f6); background: var(--brand-100, #dbeafe); }
.ss-fb-add.is-page { border-color: var(--neutral-400, #cbd0d6); background: var(--neutral-50, #f8f8f7); color: var(--neutral-800, #333d47); }
.ss-fb-add.is-page:hover { background: var(--neutral-200, #e9e9e6); }
.ss-fb-types { display: grid; gap: 4px; }
.ss-fb-type {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 5px 8px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-50, #f8f8f7);
color: var(--neutral-800, #333d47); font: 600 13px/1.25 var(--ss-sans); text-align: left; cursor: grab;
}
.ss-fb-type:hover { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); color: var(--brand-800, #1e40af); }
.ss-fb-type-ic {
display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px;
background: var(--neutral-0, #ffffff); box-shadow: inset 0 0 0 1px var(--neutral-300, #e5e7eb); color: var(--brand-700, #1d4ed8); font-size: 13px;
}
/* The check: its title, the settings, then its questions and sections. */
.ss-fb-canvas-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); }
.ss-fb-title {
flex: 1 1 auto; min-width: 0; min-height: 40px; margin-left: -8px; padding: 4px 8px;
border: 1px solid transparent; border-radius: 8px; background: transparent;
font: 700 18px/1.3 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933);
}
.ss-fb-title:hover:not([readonly]) { border-color: var(--neutral-300, #e5e7eb); }
.ss-fb-title:focus { border-color: var(--brand-500, #3b82f6); outline: 2px solid var(--brand-500, #3b82f6); outline-offset: 1px; background: var(--neutral-0, #ffffff); }
.ss-fb-title::placeholder { color: var(--neutral-500, #9aa3ad); opacity: 1; }
/* The check's settings (what it's for, category, icon, scoring), under the title. */
.ss-fb-settings { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 14px; border: 0; border-bottom: 1px solid var(--neutral-200, #e9e9e6); background: var(--neutral-50, #f8f8f7); }
.ss-fb-textarea { min-height: 64px; }
.ss-fb-textarea.is-tall { min-height: 96px; }
/* A quiet line of help under a control. */
.ss-fb-hint { display: block; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
/* Icon picker: a radio per icon, drawn as a tile; the chosen one is outlined in blue. */
.ss-fb-icons { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-fb-icons > legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; }
.ss-fb-icon-grid { clear: both; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ss-fb-icon {
position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin: 0;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-0, #ffffff);
color: var(--neutral-700, #4b5563); font-size: 17px; cursor: pointer;
}
.ss-fb-icon > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ss-fb-icon:hover { border-color: var(--brand-300, #93c5fd); color: var(--brand-700, #1d4ed8); }
.ss-fb-icon:has(> input:checked) { border-color: var(--brand-600, #2563eb); background: var(--brand-50, #eff6ff); color: var(--brand-700, #1d4ed8); box-shadow: inset 0 0 0 1px var(--brand-600, #2563eb); }
.ss-fb-icon:has(> input:focus-visible) { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-fb-settings:disabled .ss-fb-icon { cursor: default; }
/* A tick box and its words (Must be answered, Can be repeated, Score this check). */
.ss-fb-tick { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--neutral-800, #333d47); cursor: pointer; }
.ss-fb-tick > input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-600, #2563eb); cursor: pointer; }
.ss-fb-tick > input:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* An empty check, and the drop zones while something is dragged. */
.ss-fb-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; color: var(--neutral-600, #6b7280); }
.ss-fb-empty > i { font-size: 32px; color: var(--neutral-500, #9aa3ad); }
.ss-fb-empty p { max-width: 360px; margin: 0; font-size: 14px; line-height: 1.5; }
.ss-fb-drop {
display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px;
border: 2px dashed var(--brand-300, #93c5fd); border-radius: 12px; color: var(--brand-700, #1d4ed8); font-size: 13.5px; font-weight: 600;
}
.ss-fb-empty.is-over-drop, .ss-fb-drop.is-over-drop { background: var(--brand-50, #eff6ff); }
/* The questions: a label over questions in no section, then the sections. */
.ss-fb-list { display: grid; gap: 8px; min-width: 0; padding: 14px; }
.ss-fb-group-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--neutral-600, #6b7280); }
/* A question on the check: move buttons, the question (a button that chooses it), copy and remove. */
.ss-fb-item {
display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 4px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 12px; background: var(--neutral-0, #ffffff);
transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease), background-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.ss-fb-item:hover { border-color: var(--brand-300, #93c5fd); }
.ss-fb-item.is-selected { border-color: var(--brand-600, #2563eb); background: var(--brand-50, #eff6ff); box-shadow: inset 0 0 0 1px var(--brand-600, #2563eb); }
.ss-fb-item.is-heading { box-shadow: inset 3px 0 0 var(--ss-ink); }
.ss-fb-item.is-heading.is-selected { box-shadow: inset 3px 0 0 var(--ss-ink), inset 0 0 0 1px var(--brand-600, #2563eb); }
.ss-fb-item.is-dragging { opacity: .45; }
.ss-fb-item.is-drop-before { box-shadow: 0 -3px 0 0 var(--brand-600, #2563eb); }
.ss-fb-layout:not(.is-readonly) .ss-fb-item { cursor: grab; }
.ss-fb-layout:not(.is-readonly) .ss-fb-item:active { cursor: grabbing; }
.ss-fb-move-col { display: flex; flex-direction: column; align-items: center; flex: none; width: 26px; }
.ss-fb-grip { color: var(--neutral-400, #cbd0d6); font-size: 13px; line-height: 1; }
.ss-fb-move {
display: grid; place-items: center; width: 26px; height: 20px; padding: 0; border: 0; border-radius: 6px;
background: transparent; color: var(--neutral-600, #6b7280); font-size: 12px; cursor: pointer;
}
.ss-fb-move:hover:not(:disabled) { background: var(--neutral-200, #e9e9e6); color: var(--neutral-900, #1f2933); }
.ss-fb-move:disabled { opacity: .3; cursor: default; }
.ss-fb-order { font-size: 11.5px; font-weight: 700; color: var(--neutral-600, #6b7280); font-variant-numeric: tabular-nums; }
.ss-fb-item-pick {
display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 4px 6px;
border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ss-fb-item-ic {
display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px;
background: var(--neutral-100, #f4f4f2); color: var(--neutral-700, #4b5563); font-size: 14px;
}
.ss-fb-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-fb-item-label { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-fb-item-label .ss-req, .ss-ff-q-label .ss-req, .ss-fb-preview-label .ss-req { font-size: 12.5px; }
.ss-fb-item-type { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
.ss-fb-item-tag { display: inline-flex; align-items: center; gap: 4px; }
.ss-fb-item-act { display: flex; align-items: center; gap: 2px; flex: none; }
/* A section: its header (move, choose, remove), then its questions and "Add a question". */
.ss-fb-sec { min-width: 0; overflow: hidden; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 14px; background: var(--neutral-50, #f8f8f7); }
.ss-fb-sec.is-selected { border-color: var(--brand-600, #2563eb); box-shadow: inset 0 0 0 1px var(--brand-600, #2563eb); }
.ss-fb-sec-head { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 6px 6px 4px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); background: var(--neutral-0, #ffffff); }
.ss-fb-sec-pick {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 4px 8px;
border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ss-fb-sec-pick > i { color: var(--brand-700, #1d4ed8); font-size: 15px; }
.ss-fb-sec-name { min-width: 0; font: 700 15px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-fb-sec-body { display: grid; gap: 6px; min-width: 0; padding: 10px; }
.ss-fb-sec-body.is-over-drop { background: var(--brand-50, #eff6ff); outline: 2px dashed var(--brand-300, #93c5fd); outline-offset: -4px; }
.ss-fb-sec-empty { margin: 0; padding: 10px; text-align: center; font-size: 13px; color: var(--neutral-600, #6b7280); }
.ss-fb-sec-add {
display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 38px; padding: 6px 10px;
border: 1.5px dashed var(--neutral-400, #cbd0d6); border-radius: 10px; background: transparent;
color: var(--neutral-700, #4b5563); font: 600 13px/1.25 var(--ss-sans); cursor: pointer;
}
.ss-fb-sec-add:hover { border-color: var(--brand-500, #3b82f6); background: var(--brand-50, #eff6ff); color: var(--brand-700, #1d4ed8); }
/* Where a new page starts. */
.ss-fb-page-break { display: flex; justify-content: center; margin: 6px 0; }
.ss-fb-page-break > span {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid var(--neutral-300, #e5e7eb);
border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #f4f4f2); font-size: 12.5px; font-weight: 600; color: var(--neutral-700, #4b5563);
}
/* Settings of the chosen question or section. */
.ss-fb-props-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); }
.ss-fb-props-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 16px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-fb-props-head h2 > i { font-size: 15px; color: var(--neutral-600, #6b7280); }
/* Choosing a question moves the focus here: clear of the sticky top bar, and no ring for a tap. */
.ss-fb-props-head h2 { scroll-margin-top: 88px; }
.ss-fb-props-head h2:focus:not(:focus-visible) { outline: none; }
.ss-fb-props-body { display: grid; gap: 14px; min-width: 0; max-height: calc(100vh - 220px); margin: 0; padding: 14px 16px 16px; overflow-y: auto; border: 0; }
.ss-fb-props-body:disabled .ss-input { background: var(--neutral-50, #f8f8f7); color: var(--neutral-700, #4b5563); }
.ss-fb-props-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; color: var(--neutral-600, #6b7280); }
.ss-fb-props-empty > i { font-size: 26px; color: var(--neutral-500, #9aa3ad); }
.ss-fb-props-empty p { margin: 0; font-size: 13.5px; line-height: 1.5; }
/* Two fields side by side (lowest and highest, at least and at most). */
.ss-fb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* A group of settings under a rule (conditions, flagged answers, scoring). */
.ss-fb-group { display: grid; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-fb-group h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--neutral-900, #1f2933); }
.ss-fb-group h3 > i { color: var(--neutral-600, #6b7280); }
.ss-fb-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* An on/off switch (a checkbox with role="switch"), labelled by its group's heading. */
.ss-fb-switch { position: relative; display: inline-flex; flex: none; width: 42px; height: 24px; margin: 0; cursor: pointer; }
.ss-fb-switch > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ss-fb-switch-ui { position: absolute; inset: 0; border-radius: 12px; background: var(--neutral-400, #cbd0d6); pointer-events: none; transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease); }
.ss-fb-switch-ui::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
background: var(--neutral-0, #ffffff); box-shadow: var(--shadow-xs); transition: transform var(--dur-fast, 120ms) var(--ease-out, ease);
}
.ss-fb-switch > input:checked + .ss-fb-switch-ui { background: var(--brand-600, #2563eb); }
.ss-fb-switch > input:checked + .ss-fb-switch-ui::after { transform: translateX(18px); }
.ss-fb-switch > input:focus-visible + .ss-fb-switch-ui { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* One condition: the question, how it's compared and the answer stacked, the remove button beside. */
.ss-fb-cond {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; min-width: 0; padding: 8px;
border: 1px solid var(--neutral-200, #e9e9e6); border-radius: 10px; background: var(--neutral-50, #f8f8f7);
}
.ss-fb-cond > .ss-input { grid-column: 1; }
.ss-fb-cond > .ss-icon-btn { grid-column: 2; grid-row: 1; }
/* The answers that raise a flag: a toggle pill each, amber when on. */
.ss-fb-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-fb-flag {
display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-pill, 999px); background: var(--neutral-0, #ffffff);
color: var(--neutral-800, #333d47); font: 600 13px/1.2 var(--ss-sans); cursor: pointer;
}
.ss-fb-flag:hover { border-color: var(--warning-200, #fde68a); background: var(--warning-50, #fffbeb); }
.ss-fb-flag[aria-pressed="true"] { border-color: var(--warning-500, #f59e0b); background: var(--warning-50, #fffbeb); color: var(--warning-800, #92400e); }
.ss-fb-flag[aria-pressed="true"] > i { color: var(--warning-700, #b45309); }
/* Answer colours: an answer, then a swatch per colour (the chosen one ringed). */
.ss-fb-colours { display: grid; gap: 6px; }
.ss-fb-colour-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border-radius: 8px; background: var(--neutral-50, #f8f8f7); }
.ss-fb-colour-l { flex: 1 1 90px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-fb-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ss-fb-swatch {
width: 24px; height: 24px; padding: 0; border: 2px solid var(--neutral-0, #ffffff); border-radius: 50%;
background: var(--ss-fb-swatch); box-shadow: 0 0 0 1px var(--neutral-300, #e5e7eb); cursor: pointer;
}
.ss-fb-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--neutral-900, #1f2933); }
.ss-fb-swatches > .ss-icon-btn { width: 28px; height: 28px; font-size: 13px; }
/* The drawing to mark up: the picture, and an upload button with the file input laid over it. */
.ss-fb-upload { position: relative; overflow: hidden; justify-self: start; }
.ss-fb-upload-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ss-fb-upload:focus-within { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-fb-ann-img { display: block; max-width: 100%; max-height: 140px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 8px; }
/* Keyboard focus on the builder's own controls. */
:is(.ss-fb-move, .ss-fb-item-pick, .ss-fb-sec-pick, .ss-fb-add, .ss-fb-type, .ss-fb-sec-add, .ss-fb-flag, .ss-fb-swatch):focus-visible {
outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px;
}
/* Preview (in the ss modal): the check as it will look when it's filled in. */
.ss-fb-preview { display: grid; gap: 14px; min-width: 0; }
.ss-fb-preview-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); white-space: pre-line; overflow-wrap: anywhere; }
.ss-fb-preview-sec { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--neutral-300, #e5e7eb); font: 700 16px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-fb-preview-q { display: grid; gap: 6px; min-width: 0; }
.ss-fb-preview-h { margin: 6px 0 0; font: 700 15px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-fb-preview-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-50, #eff6ff); box-shadow: inset 3px 0 0 var(--brand-600, #2563eb); font-size: 13.5px; line-height: 1.5; color: var(--neutral-800, #333d47); }
.ss-fb-preview-label { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-fb-preview-opts { display: grid; gap: 4px; font-size: 13.5px; color: var(--neutral-800, #333d47); }
.ss-fb-preview-opts i { margin-right: 6px; color: var(--neutral-500, #9aa3ad); }
.ss-fb-preview-box { padding: 14px; border: 1.5px dashed var(--neutral-400, #cbd0d6); border-radius: 10px; text-align: center; font-size: 13.5px; color: var(--neutral-700, #4b5563); }
.ss-fb-preview-box.is-auto { border-style: solid; border-color: var(--success-200, #bbf7d0); background: var(--success-50, #f0fdf4); color: var(--success-800, #166534); text-align: left; }
.ss-fb-preview-slider input { width: 100%; }
.ss-fb-preview-slider > div { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--neutral-600, #6b7280); }
/* ---- Filling a check in ------------------------------------------------------------------- */
/* The fill page: one readable column. */
.ss-ff-page { display: grid; gap: 14px; min-width: 0; max-width: 800px; margin: 0 auto; }
/* What the check is for (the template's description, including a library check's "A starting point" line). */
.ss-ff-intro { margin: 0; font-size: 14px; line-height: 1.55; color: var(--neutral-700, #4b5563); white-space: pre-line; overflow-wrap: anywhere; }
/* The due check it was opened for, the job it's recorded against, no signal, and messages. */
.ss-ff-due p, .ss-ff-offline > p, .ss-ff-msg > p, .ss-ff-replaced p { margin: 0; }
.ss-ff-due p + p { margin-top: 4px; }
/* Where the focus lands after a new page, the review or a refusal: no ring on a whole region for a tap, the usual one for a keyboard. */
.ss-ff-content:focus:not(:focus-visible), .ss-ff-msg:focus:not(:focus-visible), .ss-ff-review h2:focus:not(:focus-visible) { outline: none; }
.ss-ff-context { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.ss-ff-context > i { flex: none; color: var(--neutral-600, #6b7280); }
/* The bar: page, draft saved, flags, the score, and Save draft. */
.ss-ff-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; padding: 10px 12px;
background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-xs);
}
.ss-ff-bar-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 0; }
.ss-ff-save { margin-left: auto; }
/* Score ring: neutral grey until a scored question has an answer, blue while it fills, then green or amber. Never red. */
.ss-ff-score { --ss-ff-k: var(--neutral-400, #cbd0d6); --ss-ff-kt: var(--neutral-800, #333d47); display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-ff-score.is-info { --ss-ff-k: var(--brand-600, #2563eb); --ss-ff-kt: var(--brand-800, #1e40af); }
.ss-ff-score.is-ok { --ss-ff-k: var(--success-600, #16a34a); --ss-ff-kt: var(--success-800, #166534); }
.ss-ff-score.is-soon { --ss-ff-k: var(--warning-500, #f59e0b); --ss-ff-kt: var(--warning-800, #92400e); }
.ss-ff-ring { flex: none; width: 40px; height: 40px; }
.ss-ff-ring-track { stroke: var(--neutral-200, #e9e9e6); }
.ss-ff-ring-fill { stroke: var(--ss-ff-k); transition: stroke-dasharray var(--dur-base, 200ms) var(--ease-out, ease); }
.ss-ff-score-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ss-ff-score-t b { font-size: 14px; font-weight: 700; color: var(--ss-ff-kt); font-variant-numeric: tabular-nums; }
.ss-ff-score-t small { font-size: 12px; color: var(--neutral-600, #6b7280); font-variant-numeric: tabular-nums; }
/* How far through: a thin bar. */
.ss-ff-progress { height: 4px; overflow: hidden; border-radius: 2px; background: var(--neutral-300, #e5e7eb); }
.ss-ff-progress > span { display: block; height: 100%; border-radius: 2px; background: var(--brand-600, #2563eb); transition: width var(--dur-base, 200ms) var(--ease-out, ease); }
/* A section: its heading (a button when it folds away), then its questions. */
.ss-ff-content { display: grid; gap: 14px; min-width: 0; }
.ss-ff-sec { min-width: 0; overflow: hidden; background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs); }
.ss-ff-sec-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--neutral-200, #e9e9e6); background: var(--neutral-50, #f8f8f7); }
.ss-ff-sec-t { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ss-ff-sec-t h2 { margin: 0; font: 700 16px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-ff-sec-desc { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-ff-sec-toggle {
display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 44px; margin: -6px 0; padding: 0;
border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ss-ff-sec-toggle > i { flex: none; color: var(--neutral-600, #6b7280); }
.ss-ff-sec-body { display: grid; gap: 20px; min-width: 0; padding: 16px 14px; }
/* A question: its label (with "(required)" and its points), help, the answer, and the flag panel. */
.ss-ff-q { display: grid; gap: 6px; min-width: 0; }
.ss-ff-q.is-flagged { padding-left: 12px; box-shadow: inset 3px 0 0 var(--warning-500, #f59e0b); }
.ss-ff-q-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-ff-pts { padding: 1px 8px; border-radius: var(--radius-pill, 999px); background: var(--neutral-100, #f4f4f2); box-shadow: inset 0 0 0 1px var(--neutral-300, #e5e7eb); font-size: 11.5px; font-weight: 600; color: var(--neutral-700, #4b5563); font-variant-numeric: tabular-nums; }
.ss-ff-q-help { margin: -2px 0 2px; font-size: 13px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-ff-textarea { min-height: 100px; }
.ss-ff-number { position: relative; min-width: 0; }
.ss-ff-number > .ss-input { padding-right: 56px; }
.ss-ff-unit { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--neutral-600, #6b7280); pointer-events: none; }
/* Yes or no: two big buttons; yes goes green, no goes dark (neither is a fault until it's flagged). */
.ss-ff-yesno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ss-ff-choice {
display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 8px 12px;
border: 1.5px solid var(--neutral-400, #cbd0d6); border-radius: 12px; background: var(--neutral-0, #ffffff);
color: var(--neutral-800, #333d47); font: 600 15px/1.2 var(--ss-sans); cursor: pointer;
}
.ss-ff-choice:hover { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); }
.ss-ff-choice.is-yes { border-color: var(--success-600, #16a34a); background: var(--success-50, #f0fdf4); color: var(--success-800, #166534); }
.ss-ff-choice.is-no { border-color: var(--ss-ink); background: var(--neutral-100, #f4f4f2); color: var(--neutral-900, #1f2933); }
/* Answers to choose from (one, or several as tick boxes). An author's answer colour is set inline. */
.ss-ff-options { display: grid; gap: 8px; }
.ss-ff-option {
display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px;
border: 1.5px solid var(--neutral-300, #e5e7eb); border-radius: 12px; background: var(--neutral-0, #ffffff);
color: var(--neutral-800, #333d47); font: 500 14.5px/1.35 var(--ss-sans); text-align: left; cursor: pointer;
}
.ss-ff-option:hover { border-color: var(--brand-300, #93c5fd); background: var(--brand-50, #eff6ff); }
.ss-ff-option.is-on { border-color: var(--brand-600, #2563eb); background: var(--brand-50, #eff6ff); color: var(--brand-800, #1e40af); font-weight: 600; }
.ss-ff-option-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ss-ff-radio { flex: none; width: 18px; height: 18px; border: 2px solid var(--neutral-400, #cbd0d6); border-radius: 50%; }
.ss-ff-option.is-on .ss-ff-radio { border-color: var(--brand-600, #2563eb); background: var(--brand-600, #2563eb); box-shadow: inset 0 0 0 3px var(--neutral-0, #ffffff); }
.ss-ff-box { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 2px solid var(--neutral-400, #cbd0d6); border-radius: 4px; color: var(--neutral-0, #ffffff); font-size: 13px; }
.ss-ff-option.is-on .ss-ff-box { border-color: var(--brand-600, #2563eb); background: var(--brand-600, #2563eb); }
/* The small flag beside an answer that raises one. */
.ss-ff-opt-flag { flex: none; margin-left: auto; font-size: 13px; color: var(--warning-700, #b45309); }
.ss-ff-choice .ss-ff-opt-flag { margin-left: 0; }
/* A slider and its scale. */
.ss-ff-slider input { width: 100%; accent-color: var(--brand-600, #2563eb); }
.ss-ff-slider-scale { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--neutral-600, #6b7280); font-variant-numeric: tabular-nums; }
.ss-ff-slider-scale b { color: var(--brand-800, #1e40af); }
/* Filled in for you (your name, the number, your location). */
.ss-ff-auto {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--success-200, #bbf7d0);
border-radius: 10px; background: var(--success-50, #f0fdf4); font-size: 13.5px; line-height: 1.45; color: var(--success-800, #166534);
}
.ss-ff-auto.is-pending { border-color: var(--neutral-300, #e5e7eb); background: var(--neutral-50, #f8f8f7); color: var(--neutral-800, #333d47); }
.ss-ff-auto > span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
/* Photos, signatures and mark-ups: the picture with its button, or the drop zone or pad to make one. */
.ss-ff-drop { display: grid; place-items: center; min-height: 96px; }
.ss-ff-drop.is-flag { min-height: 56px; background: var(--neutral-0, #ffffff); }
.ss-ff-media { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.ss-ff-media.is-row { display: flex; align-items: center; }
.ss-ff-photo { display: block; max-width: 100%; max-height: 300px; object-fit: contain; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; }
.ss-ff-sig-img { display: block; max-width: 100%; max-height: 110px; padding: 6px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-0, #ffffff); }
.ss-ff-ann-img { display: block; max-width: 100%; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; }
.ss-ff-flag-photo { display: block; max-height: 90px; border: 1px solid var(--warning-200, #fde68a); border-radius: 8px; }
.ss-ff-pad { display: grid; gap: 6px; min-width: 0; }
.ss-ff-canvas { display: block; width: 100%; height: 160px; border: 1px solid var(--neutral-400, #cbd0d6); border-radius: 12px; background: var(--neutral-0, #ffffff); touch-action: none; cursor: crosshair; }
.ss-ff-canvas.is-ann { height: 320px; }
.ss-ff-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-ff-pad-act { display: flex; flex-wrap: wrap; gap: 8px; }
/* Pen colours for a mark-up. */
.ss-ff-pens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ss-ff-pens-l { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--neutral-700, #4b5563); }
.ss-ff-pen { width: 28px; height: 28px; padding: 0; border: 2px solid var(--neutral-0, #ffffff); border-radius: 50%; background: var(--ss-ff-pen); box-shadow: 0 0 0 1px var(--neutral-300, #e5e7eb); cursor: pointer; }
.ss-ff-pen[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--neutral-900, #1f2933); }
/* An asset: the one linked, the button to choose one, and the picker's rows. */
.ss-ff-asset-pick { justify-self: start; }
.ss-ff-asset-linked { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 6px 6px 8px; border: 1px solid var(--brand-200, #bfdbfe); border-radius: 12px; background: var(--brand-50, #eff6ff); }
.ss-ff-asset-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--brand-800, #1e40af); overflow-wrap: anywhere; }
.ss-ff-asset-search { max-width: none; }
.ss-ff-asset-note { margin: 0; font-size: 13.5px; color: var(--neutral-700, #4b5563); }
.ss-row.ss-ff-asset { width: 100%; margin: 0; border-width: 1px 0 0; border-style: solid; border-color: var(--neutral-200, #e9e9e6); background: none; font: inherit; color: inherit; text-align: left; }
.ss-row.ss-ff-asset:first-child { border-top-width: 0; }
/* A flagged answer: amber, with its note and photo. */
.ss-ff-flag { display: grid; gap: 8px; margin-top: 6px; padding: 12px; border: 1px solid var(--warning-200, #fde68a); border-radius: 12px; background: var(--warning-50, #fffbeb); }
.ss-ff-flag-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--warning-800, #92400e); }
.ss-ff-flag-h > i { color: var(--warning-700, #b45309); }
.ss-ff-flag-note { min-height: 64px; }
/* Add another of a repeating section. */
.ss-ff-add-rep {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px;
border: 1.5px dashed var(--brand-300, #93c5fd); border-radius: 12px; background: var(--brand-50, #eff6ff);
color: var(--brand-700, #1d4ed8); font: 600 14px/1.25 var(--ss-sans); cursor: pointer;
}
.ss-ff-add-rep:hover { border-color: var(--brand-500, #3b82f6); background: var(--brand-100, #dbeafe); }
/* Pages: previous, a dot per page, next (or check your answers). */
.ss-ff-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--neutral-300, #e5e7eb); }
.ss-ff-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; }
.ss-ff-dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ss-ff-dot > span { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-400, #cbd0d6); }
.ss-ff-dot[aria-current="step"] > span { width: 10px; height: 10px; background: var(--brand-600, #2563eb); }
/* Check your answers: the score and flags, the answers by section, then change or submit. */
.ss-ff-review { display: grid; gap: 16px; min-width: 0; padding: 18px; background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs); }
.ss-ff-review-head { display: grid; gap: 6px; }
.ss-ff-review-head h2 { margin: 0; font: 700 20px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
.ss-ff-review-head p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-ff-review-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ss-ff-answers-h { margin: 4px 0 0; font: 700 15px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
.ss-ff-answers { display: grid; min-width: 0; margin: 0; }
.ss-ff-answer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-ff-answer dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-ff-answer dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); text-align: right; white-space: pre-line; overflow-wrap: anywhere; }
.ss-ff-answer.is-flagged dd { color: var(--warning-800, #92400e); }
.ss-ff-review-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-btn.ss-ff-submit { min-height: 48px; font-size: 15px; }
/* Keyboard focus on the fill page's own controls. */
:is(.ss-ff-choice, .ss-ff-option, .ss-ff-sec-toggle, .ss-ff-add-rep, .ss-ff-dot, .ss-ff-pen):focus-visible {
outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px;
}
/* ---- Tablet: the settings go under the check, then everything stacks ---- */
@media (max-width: 1199.98px) {
.ss-fb-layout { grid-template-columns: 200px minmax(0, 1fr); }
.ss-fb-props { grid-column: 1 / -1; position: static; }
.ss-fb-props-body { max-height: none; }
}
@media (max-width: 1023.98px) {
.ss-fb-layout { grid-template-columns: minmax(0, 1fr); }
.ss-fb-palette { position: static; }
.ss-fb-types { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.ss-fb-palette-adds { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
}
/* ---- Phone (<= 767.98px): 44px targets, one column, nothing wider than a 300px screen ---- */
@media (max-width: 767.98px) {
.ss-fb-add, .ss-fb-type, .ss-fb-sec-add, .ss-fb-flag { min-height: 44px; }
.ss-fb-list { padding: 10px; }
.ss-fb-canvas-head { padding: 10px; }
.ss-fb-title { font-size: 17px; }
.ss-fb-move-col { width: 44px; }
.ss-fb-grip, .ss-fb-order { display: none; }
.ss-fb-move { width: 44px; height: 44px; font-size: 15px; }
.ss-fb-item-act { flex-direction: column; }
.ss-fb-icon { width: 44px; height: 44px; }
.ss-fb-tick { min-height: 44px; align-items: center; }
.ss-fb-tick > input { width: 22px; height: 22px; margin: 0; }
.ss-fb-pair { grid-template-columns: minmax(0, 1fr); }
.ss-fb-swatch { width: 44px; height: 44px; }
.ss-fb-swatches > .ss-icon-btn { width: 44px; height: 44px; }
.ss-fb-switch { width: 52px; height: 32px; }
.ss-fb-switch-ui { border-radius: 16px; }
.ss-fb-switch-ui::after { width: 26px; height: 26px; }
.ss-fb-switch > input:checked + .ss-fb-switch-ui::after { transform: translateX(20px); }
.ss-fb-props-head, .ss-fb-props-body { padding-left: 12px; padding-right: 12px; }
.ss-ff-bar { padding: 10px; }
.ss-ff-save { flex: 1 1 100%; margin-left: 0; }
.ss-ff-sec-head { padding: 10px 12px; }
.ss-ff-sec-body { padding: 14px 12px; }
.ss-ff-choice, .ss-ff-option { min-height: 52px; }
.ss-ff-canvas.is-ann { height: 260px; }
.ss-ff-pen { width: 36px; height: 36px; }
.ss-ff-nav .ss-btn { flex: 1 1 auto; }
.ss-ff-dots { order: -1; flex: 1 1 100%; }
.ss-ff-dot { width: 44px; height: 44px; }
.ss-ff-review { padding: 14px; }
.ss-ff-review-act .ss-btn { flex: 1 1 auto; }
.ss-ff-answer { grid-template-columns: minmax(0, 1fr); }
.ss-ff-answer dd { text-align: left; }
}
/* Narrow phones (the phone audit runs down to 300px): the question's icon tile goes so its words keep their room. */
@media (max-width: 359.98px) {
.ss-fb-item-ic { display: none; }
.ss-fb-item { gap: 4px; }
.ss-fb-sec-body { padding: 8px 6px; }
.ss-ff-yesno { grid-template-columns: minmax(0, 1fr); }
}
/* Reduced motion: the ring, the bar and the switch don't animate. */
@media (prefers-reduced-motion: reduce) {
.ss-ff-ring-fill, .ss-ff-progress > span, .ss-fb-switch-ui, .ss-fb-switch-ui::after, .ss-fb-item { transition: none !important; }
}
/* End of the check builder and fill page block. */
/* ==========================================================================================
The Checks tab (safety phase 4): due checks, check schedules and the review of flagged checks.
Additive rules only, prefixed ss-chk-, on the ss-* primitives above. Nothing here is red: an
overdue check uses is-over from the state rungs.
========================================================================================== */
/* A due check a link named (?item=): a brand ring so the eye lands on it; focus moves to it too. */
.ss-row.ss-chk-focus { box-shadow: inset 0 0 0 2px var(--brand-500, #3b82f6); }
.ss-row.ss-chk-focus:is(.is-soon, .is-over) { box-shadow: inset 3px 0 0 var(--ss-k), inset 0 0 0 2px var(--brand-500, #3b82f6); }
.ss-row.ss-chk-focus:focus { outline: none; }
.ss-row.ss-chk-focus:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* The schedule's note for whoever does the check, under a record's meta line. */
.ss-chk-note { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
/* Why a running schedule isn't making checks: amber words with a warning icon. */
.ss-chk-problem { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--warning-800, #92400e); overflow-wrap: anywhere; }
.ss-chk-problem > i { flex: none; margin-top: 2px; color: var(--warning-700, #b45309); }
/* A callout with a paragraph and a button under it. */
.ss-chk-callout-body { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.ss-chk-callout-body > p { margin: 0; }
/* Space under a callout that sits above a list. */
.ss-chk-space { margin-bottom: 16px; }
/* What to fix in a form, one line each. */
.ss-chk-problems { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
/* A form's opening line, and a quiet hint under a field. */
.ss-chk-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-chk-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
/* A group of choices with its label as the legend. */
.ss-chk-fieldset { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-chk-fieldset > legend { margin: 0 0 6px; padding: 0; }
/* Radio cards (how often, who does it): the whole card is the target; is-on marks the chosen one. */
.ss-chk-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; min-width: 0; }
.ss-chk-choice {
display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; cursor: pointer;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-0, #ffffff);
}
.ss-chk-choice:hover { border-color: var(--neutral-400, #cbd0d6); }
.ss-chk-choice.is-on { border-color: var(--brand-500, #3b82f6); background: var(--brand-50, #eff6ff); }
.ss-chk-choice > input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand-600, #2563eb); }
.ss-chk-choice > input:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-chk-choice > span { display: grid; gap: 2px; min-width: 0; }
.ss-chk-choice b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-chk-choice small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* Working days: seven toggles, Monday first; is-on is a day it falls on. */
.ss-chk-days { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ss-chk-day { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.ss-chk-day > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ss-chk-day > span {
display: grid; place-items: center; min-width: 48px; min-height: 40px; padding: 0 10px; border-radius: 10px;
border: 1px solid var(--neutral-400, #cbd0d6); background: var(--neutral-0, #ffffff); color: var(--neutral-800, #333d47);
font: 600 13.5px/1 var(--ss-sans);
}
.ss-chk-day.is-on > span { border-color: var(--brand-600, #2563eb); background: var(--brand-600, #2563eb); color: var(--neutral-0, #ffffff); }
.ss-chk-day > input:focus-visible + span { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* A little space above a field that follows a group. */
.ss-chk-gap { margin-top: 10px; }
/* What the schedule will do, in one line (CheckCadence.Describe). */
.ss-chk-sum {
display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px;
background: var(--neutral-100, #f4f4f2); font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--neutral-900, #1f2933);
}
.ss-chk-sum > i { flex: none; margin-top: 2px; color: var(--neutral-600, #6b7280); }
/* On a phone: 44px targets for the radio cards and the day toggles. */
@media (max-width: 767.98px) {
.ss-chk-choice { min-height: 44px; }
.ss-chk-day > span { min-width: 44px; min-height: 44px; }
}
/* End of the Checks tab block. */
/* ==========================================================================================
Checks required on jobs (/tradie/checks/required, safety phase 4). Additive rules only, prefixed
ss-rc-, on the ss-* and ss-chk-* primitives above. Nothing here is red.
========================================================================================== */
/* A panel's heading as an h2 with its icon (Before work starts, Add a required check). */
.ss-rc-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 16px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); scroll-margin-top: 88px; }
.ss-rc-h > i { font-size: 15px; color: var(--neutral-600, #6b7280); }
.ss-rc-h:focus:not(:focus-visible) { outline: none; }
/* The add form's panel sits under the list, with room above it. */
.ss-rc-add { margin-top: 18px; }
/* The add form: the check, which jobs, the trade, then the button. */
.ss-rc-form { display: grid; gap: 14px; min-width: 0; max-width: 720px; }
/* End of the required checks block. */
/* ==========================================================================================
One check, read-only (/tradie/form-submissions/{id}, FormSubmissionView, safety phase 4). Additive
rules only, prefixed ss-fsv-, on the ss-* primitives above (panels, facts, chips, the fill page's
score ring). A flagged answer is amber; nothing here is red.
========================================================================================== */
/* The check beside its record: one column, then the side column from a wide screen. */
.ss-fsv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
.ss-fsv-main, .ss-fsv-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* A panel's heading, as an h2 with its icon. */
.ss-fsv-h { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0; font: 700 16.5px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-fsv-h > i { flex: none; font-size: 15px; color: var(--neutral-600, #6b7280); }
.ss-fsv-flags .ss-fsv-h > i { color: var(--warning-700, #b45309); }
/* At a glance: the score ring, then answers, flags and status. */
.ss-fsv-sum .ss-ff-score-t b { font-size: 16px; }
.ss-fsv-sum-body { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 14px; }
.ss-fsv-ring { width: 52px; height: 52px; }
.ss-fsv-facts { flex: 1 1 280px; }
.ss-fsv-sub { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 500; color: var(--neutral-600, #6b7280); }
/* Plain text in a panel, and a stack of parts inside one. */
.ss-fsv-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-fsv-notes { margin: 0; font-size: 14px; line-height: 1.55; color: var(--neutral-800, #333d47); white-space: pre-wrap; overflow-wrap: anywhere; }
.ss-fsv-stack { display: grid; gap: 10px; justify-items: start; }
/* Flagged answers: amber, as on the Checks tab, each with its note and photo. */
.ss-fsv-flags { border-color: var(--warning-200, #fde68a); }
.ss-fsv-flag-list { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-fsv-flag { display: grid; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--warning-200, #fde68a); border-radius: var(--radius-md, 12px); background: var(--warning-50, #fffbeb); }
.ss-fsv-flag-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.ss-fsv-flag-q { flex: 1 1 200px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-fsv-flag-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--warning-900, #78350f); overflow-wrap: anywhere; }
.ss-fsv-flag-note > i { flex: none; margin-top: 2px; color: var(--warning-700, #b45309); }
.ss-fsv-flag-photo { display: block; max-width: 100%; max-height: 140px; height: auto; border: 1px solid var(--warning-200, #fde68a); border-radius: 8px; }
/* The review: a manager marks a flagged check reviewed, with an optional note. */
.ss-fsv-review-body { display: grid; gap: 12px; }
.ss-fsv-count { justify-self: end; font-size: 12.5px; color: var(--neutral-600, #6b7280); font-variant-numeric: tabular-nums; }
/* Every answer: the question, then the answer (right-aligned from a wide screen). */
.ss-fsv-answers { display: grid; min-width: 0; }
.ss-fsv-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-fsv-answers > .ss-fsv-answer:first-child, .ss-fsv-rep + .ss-fsv-answer { border-top: 0; }
.ss-fsv-answer.is-flagged { margin: 0 -10px; padding: 10px; border-top-color: transparent; border-radius: 8px; background: var(--warning-50, #fffbeb); }
.ss-fsv-q { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-fsv-flagged { font-size: 12px; color: var(--warning-700, #b45309); }
.ss-fsv-pts { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: var(--radius-pill, 999px); background: var(--brand-50, #eff6ff); color: var(--brand-800, #1e40af); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-fsv-a { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-fsv-none { font-weight: 500; color: var(--neutral-600, #6b7280); }
.ss-fsv-yes { color: var(--success-700, #15803d); }
.ss-fsv-img { display: block; max-width: 100%; max-height: 200px; height: auto; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; }
.ss-fsv-sig { display: block; max-width: 100%; max-height: 72px; height: auto; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 8px; background: var(--neutral-0, #ffffff); }
/* A repeated section's entry heading (Ladder 2). */
.ss-fsv-rep { margin: 12px 0 2px; padding: 6px 10px; border-radius: 8px; background: var(--neutral-100, #f4f4f2); font: 600 13.5px/1.3 var(--ss-sans); color: var(--neutral-800, #333d47); }
.ss-fsv-rep:first-child { margin-top: 0; }
/* Details: label and value, one pair a line. */
.ss-fsv-meta { display: grid; gap: 8px; min-width: 0; margin: 0; }
.ss-fsv-meta > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-width: 0; }
.ss-fsv-meta dt { font-size: 13px; font-weight: 500; color: var(--neutral-600, #6b7280); }
.ss-fsv-meta dd { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 600; text-align: right; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
/* The actions it raised: their state, what, and when they're due. */
.ss-fsv-actions { display: grid; gap: 10px; width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-fsv-action { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ss-fsv-action-t { display: grid; gap: 2px; min-width: 0; }
.ss-fsv-action-t > b { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-fsv-action-t > small { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
/* The signature, shown on white. */
.ss-fsv-signature { display: block; max-width: 100%; max-height: 96px; height: auto; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-0, #ffffff); }
/* From a wide screen: the record beside the check, and each answer beside its question. */
@media (min-width: 992px) {
.ss-fsv-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (min-width: 576px) {
.ss-fsv-answer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.ss-fsv-a { text-align: right; }
.ss-fsv-img, .ss-fsv-sig { margin-left: auto; }
}
/* On a phone (<= 767.98px): 44px targets for the links, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-fsv-meta dd { text-align: left; }
.ss-fsv-stack > .ss-link, .ss-fsv-meta .ss-link { display: inline-flex; align-items: center; min-height: 44px; }
.ss-fsv-review .ss-btn { min-height: 44px; }
}
/* End of the check block. */
/* ==== Incident report (safety phase 5): the phone report flow at /tradie/safety/incidents/report ====
The report form (.ss-inc-rep-form), then "Is this notifiable?" (.ss-inc-rep-tree). When the answers
say to call, "Call the regulator now" (.ss-inc-rep-call) comes first on the page, then the site
checklist (.ss-inc-rep-site) and the written notice clock (.ss-inc-rep-notice). Red only through
is-over (the call to make, and what is overdue). Every rule here is prefixed .ss-inc-rep-. */
/* The column: one readable width on a wide screen, the full width on a phone. */
.ss-inc-rep { display: grid; gap: 18px; width: 100%; max-width: 780px; min-width: 0; margin: 0 auto; }
.ss-inc-rep > * { min-width: 0; }
/* A heading line inside a callout or a small form. */
.ss-inc-rep-h { margin: 0 0 4px; font: 700 15px/1.3 var(--ss-sans); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-callout .ss-inc-rep-h { color: inherit; }
.ss-inc-rep-h:focus { outline: none; }
.ss-inc-rep-h:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 3px; }
/* "If someone is badly hurt, call 000 first." above the form. */
.ss-inc-rep-000 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--neutral-900, #1f2933); }
.ss-inc-rep-000 > i { flex: none; font-size: 15px; color: var(--neutral-700, #4b5563); }
/* ---- The form ---- */
.ss-inc-rep-form > .ss-panel-body { display: grid; gap: 22px; padding-top: 18px; }
/* One question on the form: a fieldset without its box. */
.ss-inc-rep-group { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-inc-rep-group > legend { float: left; width: 100%; margin: 0; padding: 0; }
.ss-inc-rep-group > legend + * { clear: both; }
/* A quiet hint under a field. */
.ss-inc-rep-hint { display: block; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-inc-rep-what { min-height: 104px; }
.ss-inc-rep-when { max-width: 320px; }
.ss-inc-rep-inline { justify-self: start; }
/* The type switch: three tiles, each with an icon, its name and what it means. */
.ss-inc-rep-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; min-width: 0; }
.ss-inc-rep-kind {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2px 10px; min-width: 0; min-height: 44px; padding: 12px 14px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
color: var(--neutral-900, #1f2933); font: inherit; text-align: left; cursor: pointer;
}
.ss-inc-rep-kind > i { grid-row: 1 / span 2; font-size: 20px; line-height: 1.2; color: var(--neutral-700, #4b5563); }
.ss-inc-rep-kind-t { font: 700 14.5px/1.3 var(--ss-sans); }
.ss-inc-rep-kind > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-inc-rep-kind:hover:not(:disabled) { border-color: var(--neutral-400, #cbd0d6); }
.ss-inc-rep-kind.is-on { border-color: var(--brand-600, #2563eb); background: var(--brand-50, #eff6ff); box-shadow: inset 0 0 0 1px var(--brand-600, #2563eb); }
.ss-inc-rep-kind.is-on > i { color: var(--brand-700, #1d4ed8); }
.ss-inc-rep-kind:disabled { opacity: .6; cursor: not-allowed; }
.ss-inc-rep-kind:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
/* Where: the job, the state, the words, and the phone's location line. */
.ss-inc-rep-where { margin-top: 2px; }
.ss-inc-rep-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.ss-inc-rep-loc > i { flex: none; font-size: 16px; color: var(--neutral-600, #6b7280); }
.ss-inc-rep-loc > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
/* Who was there: one card a person, then the buttons that add one. */
.ss-inc-rep-people { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ss-inc-rep-person {
display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--neutral-300, #e5e7eb);
border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.ss-inc-rep-person-top { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.ss-inc-rep-person-top > .ss-field { flex: 1 1 auto; }
.ss-inc-rep-roles { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-inc-rep-roles > legend { margin: 0 0 6px; padding: 0; }
.ss-inc-rep-injury { display: grid; gap: 10px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--neutral-300, #e5e7eb); }
.ss-inc-rep-injury > .ss-label { margin: 0; }
.ss-inc-rep-private { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.ss-inc-rep-private > i { flex: none; margin-top: 1px; color: var(--neutral-600, #6b7280); }
.ss-inc-rep-adds { display: flex; flex-wrap: wrap; gap: 8px; }
/* Photos: a thumbnail, its caption and "Shows an injury", and the add box. */
.ss-inc-rep-photos { display: grid; gap: 12px; min-width: 0; }
.ss-inc-rep-shots { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ss-inc-rep-shot {
display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: start; gap: 12px; min-width: 0; padding: 10px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.ss-inc-rep-shot-img { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: 8px; background: var(--neutral-200, #e9e9e6); }
.ss-inc-rep-shot-b { display: grid; gap: 6px; min-width: 0; }
/* A checkbox with its words beside it (a photo showing an injury; "They asked for written notice"). */
.ss-inc-rep-check-line { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-800, #333d47); cursor: pointer; }
.ss-inc-rep-check-line > input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-600, #2563eb); }
.ss-inc-rep-check-line > span { min-width: 0; overflow-wrap: anywhere; }
/* What stops it sending, the send button, and any message beside a control. */
.ss-inc-rep-problems ul { margin: 4px 0 0; padding-left: 18px; }
.ss-inc-rep-problems li + li { margin-top: 2px; }
.ss-inc-rep-send { min-height: 48px; font-size: 15px; }
/* The phone's send button straight after what happened and when (from 768px the whole form fits, so it goes). */
.ss-inc-rep-quick { display: grid; gap: 8px; min-width: 0; }
@media (min-width: 768px) {
.ss-inc-rep-quick { display: none; }
}
.ss-inc-rep-msg { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--warning-800, #92400e); overflow-wrap: anywhere; }
.ss-inc-rep-msg > i { flex: none; margin-top: 1px; color: var(--warning-700, #b45309); }
/* A row of buttons. */
.ss-inc-rep-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
/* The result once it's sent, or saved on the phone. */
.ss-inc-rep-result p { margin: 0; }
.ss-inc-rep-result p + p { margin-top: 6px; }
/* What to do next, at the foot of the page. */
.ss-inc-rep-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
/* ---- Call the regulator now ---- */
.ss-inc-rep-call { padding: 16px 18px; border-width: 2px; box-shadow: var(--shadow-xs); }
.ss-inc-rep-call > i { font-size: 20px; }
.ss-inc-rep-call-b { display: grid; gap: 10px; min-width: 0; flex: 1 1 auto; }
.ss-inc-rep-call-h { margin: 0; font: 700 21px/1.2 var(--ss-display); letter-spacing: -0.01em; color: var(--ss-kt); }
.ss-inc-rep-call-h:focus { outline: none; }
.ss-inc-rep-call-h:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 3px; }
.ss-inc-rep-call-lead { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ss-kt); }
/* The state's regulator on white inside the red panel: name, number, the call button, links. */
.ss-inc-rep-reg { display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--ss-kl); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); }
.ss-inc-rep-reg-name { margin: 0; font: 700 15px/1.35 var(--ss-sans); overflow-wrap: anywhere; }
/* The number itself, large and selectable (one tap selects it all, to copy). */
.ss-inc-rep-num { margin: 0; font: 800 30px/1.1 var(--ss-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; color: var(--neutral-900, #1f2933); }
.ss-inc-rep-dial { min-height: 48px; font-size: 16px; }
.ss-inc-rep-call.is-over .ss-inc-rep-dial { background: var(--danger-600, #dc2626); color: var(--neutral-0, #ffffff); }
.ss-inc-rep-call.is-over .ss-inc-rep-dial:hover:not(:disabled) { background: var(--danger-700, #b91c1c); color: var(--neutral-0, #ffffff); }
.ss-inc-rep-check { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--warning-800, #92400e); }
.ss-inc-rep-check > i { flex: none; margin-top: 2px; color: var(--warning-700, #b45309); }
.ss-inc-rep-reg-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-inc-rep-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 13.5px; }
.ss-inc-rep-src { margin: 0; font-size: 12px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
/* What the main number is for, when it isn't for every call (SA's is for a death or a life-threatening injury; the ACT's has hours). */
.ss-inc-rep-num-for { margin: -4px 0 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
/* The regulator's other numbers (after hours, not life-threatening...): each selectable, with its own call button. */
.ss-inc-rep-others { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-inc-rep-others > li {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-width: 0; padding: 8px 10px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-50, #fafaf9);
}
.ss-inc-rep-others-l { grid-column: 1; font-size: 12.5px; line-height: 1.4; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-inc-rep-others-n { grid-column: 1; font: 700 17px/1.25 var(--ss-display); font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; color: var(--neutral-900, #1f2933); }
.ss-inc-rep-others > li > .ss-btn { grid-column: 2; grid-row: 1 / span 2; }
/* Once someone has marked it notified: a calm line in place of the red panel, so nobody calls twice. */
.ss-inc-rep-notified p { margin: 0; }
.ss-inc-rep-notified p + p { margin-top: 4px; }
/* When the state isn't known: every state's regulator, one a line. */
.ss-inc-rep-regs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-inc-rep-regs > li {
display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-width: 0; padding: 8px 10px;
border: 1px solid var(--ss-kl); border-radius: 10px; background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933);
}
.ss-inc-rep-regs-st { font: 700 13px/1.2 var(--ss-sans); color: var(--neutral-700, #4b5563); }
.ss-inc-rep-regs-n { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.ss-inc-rep-setstate { max-width: 360px; }
.ss-inc-rep-comcare { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ss-kt); }
.ss-inc-rep-law { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ss-kt); }
/* "Mark notified": what was recorded, or the small form that records it. */
.ss-inc-rep-mark { display: grid; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--ss-kl); }
.ss-inc-rep-mark > .ss-btn { justify-self: start; }
.ss-inc-rep-mark-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ss-kt); }
.ss-inc-rep-called { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--neutral-0, #ffffff); font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--neutral-900, #1f2933); }
.ss-inc-rep-called > i { flex: none; margin-top: 1px; color: var(--success-700, #15803d); }
.ss-inc-rep-markform { display: grid; gap: 12px; min-width: 0; padding: 14px; border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); color: var(--neutral-900, #1f2933); }
/* ---- Is this notifiable? ---- */
.ss-inc-rep-tree-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-inc-rep-qs { display: grid; gap: 0; margin: 0 0 14px; padding: 0; list-style: none; }
.ss-inc-rep-q { min-width: 0; padding: 14px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-inc-rep-q:first-child { border-top: 0; padding-top: 4px; }
.ss-inc-rep-q-f { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-inc-rep-q-t { float: left; width: 100%; margin: 0; padding: 0; font: 600 14.5px/1.4 var(--ss-sans); color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-inc-rep-q-t + * { clear: both; }
.ss-inc-rep-q-help { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
/* Yes, No, Not sure; and "None of these", "Not sure" under a checklist. */
.ss-inc-rep-ans { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-inc-rep-a {
display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 36px; padding: 0 14px;
border: 1px solid var(--neutral-400, #cbd0d6); border-radius: 9px; background: var(--neutral-0, #ffffff);
color: var(--neutral-800, #333d47); font: 600 13.5px/1.2 var(--ss-sans); cursor: pointer;
}
.ss-inc-rep-a:hover:not(:disabled) { border-color: var(--neutral-500, #9aa3ad); }
.ss-inc-rep-a.is-on { border-color: var(--neutral-900, #1f2933); background: var(--neutral-900, #1f2933); color: var(--neutral-0, #ffffff); }
.ss-inc-rep-a:disabled { opacity: .55; cursor: not-allowed; }
.ss-inc-rep-a:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-inc-rep-ref { margin: 0; font-size: 12px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
/* A checklist: one box a line, each with where the law says so. */
.ss-inc-rep-items { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ss-inc-rep-item { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--neutral-900, #1f2933); cursor: pointer; }
.ss-inc-rep-item > input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--neutral-900, #1f2933); }
.ss-inc-rep-item > span { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
/* The result as it stands: red to call, green when not notifiable, grey until decided. */
.ss-inc-rep-outcome > div { display: grid; gap: 6px; }
.ss-inc-rep-outcome-h { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.ss-inc-rep-reasons { margin: 0; padding-left: 18px; }
.ss-inc-rep-reasons li + li { margin-top: 2px; }
.ss-inc-rep-outcome-x { margin: 0; font-size: 12.5px; }
/* ---- Leave the site as it is ---- */
.ss-inc-rep-site-intro { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
.ss-inc-rep-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ss-inc-rep-step { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 8px 0; cursor: default; }
label.ss-inc-rep-step { cursor: pointer; }
.ss-inc-rep-step > input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--success-600, #16a34a); }
.ss-inc-rep-step-n {
display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
background: var(--neutral-200, #e9e9e6); color: var(--neutral-800, #333d47); font: 700 12px/1 var(--ss-sans); font-variant-numeric: tabular-nums;
}
.ss-inc-rep-step-b { display: grid; gap: 2px; min-width: 0; }
.ss-inc-rep-step-t { font-size: 14px; line-height: 1.45; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-inc-rep-step-b > small { font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-inc-rep-step-b > .ss-inc-rep-step-done { color: var(--success-800, #166534); font-weight: 600; }
/* ---- Written notice within 48 hours ---- */
.ss-inc-rep-due { margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--neutral-900, #1f2933); }
.ss-inc-rep-notice-x { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
/* On a phone (<= 767.98px): 44px targets, 16px text in the fields, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-inc-rep { gap: 14px; }
.ss-inc-rep-form > .ss-panel-body { gap: 20px; padding-top: 14px; }
.ss-inc-rep-kind { min-height: 44px; }
.ss-inc-rep-a { flex: 1 1 0; min-width: 0; min-height: 44px; }
.ss-inc-rep-item, .ss-inc-rep-step, .ss-inc-rep-check-line { min-height: 44px; }
.ss-inc-rep-000 .ss-link, .ss-inc-rep-links .ss-link, .ss-inc-rep-comcare .ss-link { display: inline-flex; align-items: center; min-height: 44px; }
.ss-inc-rep-call { padding: 14px; }
.ss-inc-rep-call > i { display: none; }
.ss-inc-rep-call-h { font-size: 19px; }
.ss-inc-rep-num { font-size: 28px; }
.ss-inc-rep-regs > li { grid-template-columns: 40px minmax(0, 1fr); }
.ss-inc-rep-regs > li > .ss-btn { grid-column: 1 / -1; }
.ss-inc-rep-shot { grid-template-columns: 64px minmax(0, 1fr) auto; }
.ss-inc-rep-shot-img { width: 64px; height: 64px; }
.ss-inc-rep-next > .ss-btn, .ss-inc-rep-adds > .ss-btn { flex: 1 1 100%; }
.ss-inc-rep-others > li { grid-template-columns: minmax(0, 1fr); }
.ss-inc-rep-others > li > .ss-btn { grid-column: 1; grid-row: auto; min-height: 44px; }
}
/* A narrow phone (the phone audit runs down to 300px): the photo and its remove button on one row, the
caption and "Shows an injury" full width under them, so neither is squeezed into a sliver. */
@media (max-width: 359.98px) {
.ss-inc-rep-shot { grid-template-columns: 64px minmax(0, 1fr); }
.ss-inc-rep-shot > .ss-icon-btn { grid-column: 2; grid-row: 1; justify-self: end; }
.ss-inc-rep-shot-b { grid-column: 1 / -1; grid-row: 2; }
}
/* End of the incident report block. */
/* ==========================================================================================
Incidents and hazards: the register and one report (safety phase 5, .ss-increg-*)
The register at /tradie/safety/incidents and each report at /tradie/safety/incidents/{id}.
Red is kept for an open incident and for what is overdue (a call not recorded, a written
notice overdue, an overdue action); a near miss or hazard is amber; a closed report is grey.
The "Call the regulator now" panel is the one loud thing on a report, and only while the
call is due. Colour always comes with an icon and words.
========================================================================================== */
/* ---- Words ---- */
/* A quieter line, a hint under a field, and a problem with a field (amber, never red). */
.ss-increg-quiet { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-increg-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-increg-error { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--warning-800, #92400e); overflow-wrap: anywhere; }
/* "General information, not legal advice." under anything about the law. */
.ss-increg-legal { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
.ss-increg-legal > i { flex: none; margin-top: 1px; color: var(--neutral-500, #9aa3ad); }
/* What only the owner and admins see: a lock and one plain line. */
.ss-increg-withheld { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-increg-withheld > i { flex: none; margin-top: 1px; color: var(--neutral-500, #9aa3ad); }
/* Under a field amended after the report was closed. */
.ss-increg-amended { display: block; font-size: 12.5px; line-height: 1.4; color: var(--brand-800, #1e40af); overflow-wrap: anywhere; }
/* A small label above the text after it ("What they saw"). */
.ss-increg-label { display: block; font-size: 12px; font-weight: 600; color: var(--neutral-600, #6b7280); }
/* A small heading inside a panel. */
.ss-increg-subh, .ss-increg-addbox > h3, .ss-increg-text > h3 { margin: 0; font: 700 15px/1.3 var(--ss-display); color: var(--neutral-900, #1f2933); }
/* A row of buttons under a part of the page. */
.ss-increg-row-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* A callout with more than one line: paragraphs close up, a list keeps its marks. */
.ss-increg-callout p, .ss-increg-detail .ss-callout p { margin: 0 0 4px; }
.ss-increg-callout p:last-child, .ss-increg-detail .ss-callout p:last-child { margin-bottom: 0; }
.ss-increg-callout ul, .ss-increg-detail .ss-callout ul { margin: 4px 0 6px; padding-left: 18px; }
/* Reports the phone's queue gave up (not on record): each with why, and send it again or put it aside. */
.ss-increg-dropped > div { display: grid; gap: 4px; min-width: 0; }
.ss-increg-dropped-h { margin: 0; font: 700 15px/1.3 var(--ss-sans); color: inherit; overflow-wrap: anywhere; }
.ss-increg-dropped .ss-increg-dropped-list { display: grid; gap: 10px; min-width: 0; margin: 6px 0 0; padding: 0; list-style: none; }
.ss-increg-dropped-list > li { display: grid; gap: 4px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--warning-200, #fde68a); overflow-wrap: anywhere; }
.ss-increg-dropped-list > li:first-child { padding-top: 0; border-top: 0; }
.ss-increg-detail .ss-callout .ss-btn { margin-top: 6px; }
/* What stops a report closing or being archived, one line each. */
.ss-increg-problems { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--neutral-800, #333d47); }
/* Label and value pairs (the report's facts, an injury's, the written notice's). */
.ss-increg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px 20px; margin: 0; }
.ss-increg-facts > div { min-width: 0; }
.ss-increg-facts dt { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--neutral-600, #6b7280); }
.ss-increg-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
/* ---- The register ---- */
/* A report's photo count under its state. */
.ss-increg-row-photos { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--neutral-600, #6b7280); white-space: nowrap; }
.ss-increg-row > .ss-rec-end { min-width: 112px; }
/* ---- One report: the report beside closing, the PDF and keeping it ---- */
.ss-increg-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; }
.ss-increg-main, .ss-increg-side { display: grid; gap: 24px; align-content: start; min-width: 0; }
.ss-increg-side { gap: 16px; }
.ss-increg-side > .ss-note { margin: 0; }
.ss-increg-main > .ss-section + .ss-section { margin-top: 0; }
/* A panel body with room above its first line (panels here have no head). */
.ss-increg-pad { display: grid; gap: 14px; padding-top: 14px; }
.ss-increg-record { display: grid; justify-items: start; gap: 10px; }
/* What happened: the kind tile and chips, the facts, then the words as they were written. */
.ss-increg-about { display: grid; gap: 14px; padding-top: 14px; }
.ss-increg-about-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ss-increg-about-top > .ss-rec-chips { margin-top: 0; }
.ss-increg-text { display: grid; gap: 6px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-increg-text.is-first { padding-top: 0; border-top: 0; }
.ss-increg-text > p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
/* A box inside a panel for a small form (raise an action). */
.ss-increg-addbox { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7); }
/* A picker with its button beside it (link a SWMS, link a check). */
.ss-increg-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ss-increg-add > .ss-input { flex: 1 1 220px; width: auto; }
.ss-increg-add > .ss-btn { flex: none; }
/* A checkbox with its sentence (the photo shows an injury). */
.ss-increg-check { display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); cursor: pointer; }
.ss-increg-check > input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-600, #2563eb); }
/* ---- "Call the regulator now": the one loud panel, first on the page while the call is due ---- */
.ss-increg-call {
display: grid; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--neutral-300, #e5e7eb);
border-radius: var(--radius-lg, 16px); background: var(--neutral-0, #ffffff); box-shadow: var(--shadow-xs);
}
.ss-increg-call.is-over { border-color: var(--danger-300, #fca5a5); background: var(--danger-50, #fef2f2); box-shadow: inset 4px 0 0 var(--danger-600, #dc2626); }
.ss-increg-call-head { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.ss-increg-call-ic {
display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
background: var(--neutral-100, #f4f4f2); color: var(--neutral-700, #4b5563); font-size: 20px;
}
.ss-increg-call.is-over .ss-increg-call-ic { background: var(--danger-600, #dc2626); color: var(--neutral-0, #ffffff); }
.ss-increg-call-t { min-width: 0; }
.ss-increg-call-t > h2 { margin: 0; font: 700 20px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
.ss-increg-call.is-over .ss-increg-call-t > h2 { color: var(--danger-800, #991b1b); }
.ss-increg-call-t > p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--neutral-800, #333d47); }
.ss-increg-call-reg { display: grid; gap: 8px; min-width: 0; padding: 14px; border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); }
.ss-increg-call-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
/* The number itself: large, and selectable so it can be copied or read out. */
.ss-increg-call-num { margin: 0; }
.ss-increg-num { font: 700 30px/1.15 var(--ss-display); letter-spacing: 0.01em; color: var(--neutral-900, #1f2933); font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
/* What the main number is for, when it isn't for every call (SA, the ACT). */
.ss-increg-call-for { margin: -4px 0 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
/* The regulator's other numbers (after hours, not life-threatening...): each selectable, with its own call button. */
.ss-increg-call-others { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-call-others > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-50, #fafaf9); }
.ss-increg-call-others-l { grid-column: 1; font-size: 12.5px; line-height: 1.4; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-increg-num.is-other { grid-column: 1; font-size: 17px; line-height: 1.25; }
.ss-increg-call-others > li > .ss-btn { grid-column: 2; grid-row: 1 / span 2; }
.ss-increg-call-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ss-btn.ss-increg-call-btn { min-height: 48px; font-size: 15px; }
/* While the call is due the call button is red, as on the report page. */
.ss-increg-call.is-over .ss-increg-call-btn { background: var(--danger-600, #dc2626); color: var(--neutral-0, #ffffff); }
.ss-increg-call.is-over .ss-increg-call-btn:hover:not(:disabled) { background: var(--danger-700, #b91c1c); color: var(--neutral-0, #ffffff); }
.ss-increg-call-note, .ss-increg-call-src, .ss-increg-call-law, .ss-increg-call-comcare { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-increg-call-law { font-size: 13.5px; color: var(--neutral-800, #333d47); }
.ss-increg-call-comcare { display: flex; flex-wrap: wrap; gap: 4px 6px; }
/* Every regulator, when the report's state isn't set. */
.ss-increg-call-list { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-call-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; padding: 6px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-increg-call-list > li:first-child { border-top: 0; }
.ss-increg-call-list-n { min-width: 0; font-size: 13.5px; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
/* ---- "Is this notifiable?" ---- */
.ss-increg-notifiable { gap: 16px; }
.ss-increg-q { display: grid; gap: 12px; min-width: 0; }
.ss-increg-q-block { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
/* A floated legend sits inside the box as its first row, not on its border. */
.ss-increg-q-text { float: left; width: 100%; margin: 0; padding: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-increg-q-help, .ss-increg-q-state { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-increg-q-state { font-weight: 600; }
.ss-increg-q-ref { display: block; margin: 0; font-size: 12px; line-height: 1.4; color: var(--neutral-500, #9aa3ad); }
.ss-increg-q-answer { margin: 0; font-size: 14px; }
.ss-increg-q-btns { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ss-increg-q-items { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-q-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: 44px; margin: 0; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.ss-increg-q-item:hover { background: var(--neutral-50, #f8f8f7); }
.ss-increg-q-item > input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand-600, #2563eb); cursor: pointer; }
.ss-increg-q-item:has(> input:checked) { background: var(--brand-50, #eff6ff); }
.ss-increg-q-item:has(> input:focus-visible) { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 1px; }
.ss-increg-q-item-t { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ss-increg-q-item-t > b { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-increg-q-item-t > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* ---- The regulator, the written notice and the site ---- */
.ss-increg-regstack { display: grid; gap: 14px; min-width: 0; }
/* The written notice: its state chip and due line, then what the law asks. */
.ss-increg-notice { display: grid; gap: 10px; min-width: 0; }
.ss-increg-notice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.ss-increg-notice-due { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); }
.ss-increg-notice.is-over .ss-increg-notice-due { color: var(--danger-800, #991b1b); }
.ss-increg-notice.is-soon .ss-increg-notice-due { color: var(--warning-800, #92400e); }
.ss-increg-notice-expl { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
/* Site preservation, shown straight after the call panel while the call is due. */
.ss-increg-sitefirst > .ss-panel-body { display: grid; gap: 12px; }
.ss-increg-site { display: grid; gap: 10px; min-width: 0; }
.ss-increg-site-intro { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-increg-site-steps { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-site-step {
display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); cursor: pointer;
}
.ss-increg-site-step > input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--success-600, #16a34a); cursor: pointer; }
.ss-increg-site-step > input:disabled { cursor: default; }
.ss-increg-site-steps > li.is-done .ss-increg-site-step { border-color: var(--success-200, #bbf7d0); background: var(--success-50, #f0fdf4); }
.ss-increg-site-step:has(> input:focus-visible) { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-increg-site-t { display: grid; gap: 2px; min-width: 0; }
.ss-increg-site-t > b { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-increg-site-t > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-increg-site-t > .ss-increg-site-by { color: var(--success-800, #166534); }
/* ---- The timeline: a line of dots, oldest first; a deadline still ahead has a dashed dot ---- */
.ss-increg-tl { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-tl > li {
--ss-tl: var(--neutral-500, #9aa3ad); --ss-tlb: var(--neutral-100, #f4f4f2);
position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 0 0 14px;
}
.ss-increg-tl > li.is-ok { --ss-tl: var(--success-700, #15803d); --ss-tlb: var(--success-50, #f0fdf4); }
.ss-increg-tl > li.is-soon { --ss-tl: var(--warning-700, #b45309); --ss-tlb: var(--warning-50, #fffbeb); }
.ss-increg-tl > li.is-over { --ss-tl: var(--danger-700, #b91c1c); --ss-tlb: var(--danger-50, #fef2f2); }
.ss-increg-tl > li.is-info { --ss-tl: var(--brand-700, #1d4ed8); --ss-tlb: var(--brand-50, #eff6ff); }
/* The line joining one dot to the next. */
.ss-increg-tl > li:not(:last-child)::before { content: ""; position: absolute; top: 30px; bottom: 2px; left: 14px; width: 2px; background: var(--neutral-200, #e9e9e6); }
.ss-increg-tl-dot { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ss-tlb); color: var(--ss-tl); font-size: 14px; }
.ss-increg-tl > li.is-upcoming .ss-increg-tl-dot { background: var(--neutral-0, #ffffff); border: 2px dashed var(--ss-tl); }
.ss-increg-tl-t { display: grid; gap: 1px; min-width: 0; padding-top: 4px; }
.ss-increg-tl-t > b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-increg-tl-t > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
/* ---- People ---- */
.ss-increg-people { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-person { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-increg-person:first-child { padding-top: 0; border-top: 0; }
.ss-increg-person-t { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
.ss-increg-person-t > b { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-increg-person-t > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-increg-person-tel { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 13.5px; }
.ss-increg-person-said { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-800, #333d47); white-space: pre-line; overflow-wrap: anywhere; }
.ss-increg-person-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 1 auto; max-width: 55%; }
/* Injury details, for the people who may see them: set apart, with a lock. */
.ss-increg-injury { display: grid; gap: 8px; min-width: 0; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7); }
.ss-increg-injury-h { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--neutral-700, #4b5563); }
.ss-increg-absence { margin-top: 6px; }
/* ---- Photos ---- */
.ss-increg-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-photos > li { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ss-increg-photo {
display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: zoom-in;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-100, #f4f4f2);
}
.ss-increg-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-increg-photo:focus-visible { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-increg-photo-wait { display: grid; place-items: center; width: 100%; height: 100%; font-size: 26px; color: var(--neutral-500, #9aa3ad); }
.ss-increg-photo-t { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.ss-increg-photo-t > b { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-increg-photo-t > small { font-size: 12px; line-height: 1.35; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* ---- Investigation, actions and links ---- */
.ss-increg-inv { gap: 16px; }
.ss-increg-whys { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-increg-whys > legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; }
.ss-increg-why { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-increg-why-n { flex: none; width: 52px; margin: 0; font-size: 13px; font-weight: 600; color: var(--neutral-700, #4b5563); }
.ss-increg-why > .ss-input { flex: 1 1 auto; width: auto; }
.ss-increg-whylist { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
/* Corrective actions: what, who owns it, when it's due, its state; an overdue one has the red rail. */
.ss-increg-actions { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-action {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 12px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
.ss-increg-action.is-over { box-shadow: inset 3px 0 0 var(--danger-600, #dc2626); }
.ss-increg-action-t { display: grid; gap: 2px; min-width: 0; }
.ss-increg-action-t > b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-increg-action-t > p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); white-space: pre-line; overflow-wrap: anywhere; }
.ss-increg-action-t > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* Linked SWMS and checks. */
.ss-increg-links { gap: 18px; }
.ss-increg-linkgroup { display: grid; gap: 10px; min-width: 0; }
.ss-increg-linkgroup + .ss-increg-linkgroup { padding-top: 16px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-increg-linklist { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-linklist > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; padding: 8px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-increg-linklist > li:first-child { border-top: 0; }
.ss-increg-link-t { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.ss-increg-link-t > .ss-link { justify-self: start; font-weight: 600; overflow-wrap: anywhere; }
.ss-increg-link-t > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* ---- The change log: newest first; an amendment has the blue rail ---- */
.ss-increg-log { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-increg-log > li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-increg-log > li:first-child { border-top: 0; padding-top: 0; }
.ss-increg-log > li.is-amended { padding-left: 12px; box-shadow: inset 3px 0 0 var(--brand-500, #3b82f6); }
.ss-increg-log-t { display: grid; gap: 3px; min-width: 0; }
.ss-increg-log-t > b { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-increg-log-t > small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
.ss-increg-log-ba { display: grid; gap: 4px; margin: 2px 0 0; }
.ss-increg-log-ba > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; min-width: 0; }
.ss-increg-log-ba dt { font-size: 12.5px; font-weight: 500; color: var(--neutral-600, #6b7280); }
.ss-increg-log-ba dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--neutral-800, #333d47); white-space: pre-line; overflow-wrap: anywhere; }
/* A report beside its record from a wide screen. */
@media (min-width: 1100px) {
.ss-increg-detail { grid-template-columns: minmax(0, 1fr) 320px; }
}
/* Incidents on a phone (<= 767.98px): 44px targets, one column, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-increg-call { padding: 14px; }
.ss-increg-call-head { gap: 12px; }
.ss-increg-call-t > h2 { font-size: 18px; }
.ss-increg-num { font-size: 26px; }
.ss-increg-call-act > .ss-btn { flex: 1 1 100%; }
.ss-increg-call-list > li > .ss-btn { min-height: 44px; }
.ss-increg-call-others > li { grid-template-columns: minmax(0, 1fr); }
.ss-increg-call-others > li > .ss-btn { grid-column: 1; grid-row: auto; min-height: 44px; }
.ss-increg-q-btns > .ss-pill { flex: 1 1 auto; min-height: 44px; justify-content: center; }
.ss-increg-row-act > .ss-btn { flex: 1 1 auto; min-height: 44px; }
.ss-increg-add > .ss-input, .ss-increg-add > .ss-btn { flex: 1 1 100%; min-height: 44px; }
.ss-increg-person { flex-wrap: wrap; }
.ss-increg-person-end { flex: 1 1 100%; max-width: none; justify-content: flex-start; padding-left: 42px; }
.ss-increg-person-end > .ss-btn { min-height: 44px; }
.ss-increg-action { flex-direction: column; }
.ss-increg-addbox { padding: 12px; }
.ss-increg-log > li { flex-direction: column; }
.ss-increg-log-ba > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ss-increg-row > .ss-rec-end { min-width: 0; }
.ss-increg-person-tel, .ss-increg-link-t > .ss-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Incidents on a narrow phone (the phone audit runs down to 300px). */
@media (max-width: 359.98px) {
.ss-increg-person-end { padding-left: 0; }
.ss-increg-why { flex-wrap: wrap; }
.ss-increg-why-n { width: auto; }
.ss-increg-num { font-size: 23px; }
}
/* End of the incidents register block. */
/* Incidents, phase 5 close-out (UI): an answer to "Is this notifiable?" that the server keeps from this
viewer (only the owner and admins see it) shows as answered and locked, never as something to answer. */
.ss-inc-rep-withheld { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); background: var(--neutral-50, #f8f8f7); overflow-wrap: anywhere; }
.ss-inc-rep-withheld > .bi, .ss-inc-withheld > .bi { flex: none; margin-top: 2px; color: var(--neutral-500, #6b7280); }
.ss-inc-withheld { cursor: default; }
.ss-inc-withheld:hover { background: transparent; }
.ss-inc-withheld small { font-size: 12.5px; line-height: 1.4; color: var(--neutral-600, #6b7280); }
.ss-increg-q-answer.ss-inc-withheld { display: flex; align-items: flex-start; gap: 8px; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
/* End of the incidents phase 5 close-out block. */
/* ==========================================================================================
Compliance packs and job packs (safety phase 6): the pack pages under the Registers tab (the list,
making a pack, one pack), the public page a builder opens (/packs/{token}), each worker's "Shared in
packs" panel on the Registers page, and the job page's "Share a job pack". Built on the ss-* primitives;
everything here is prefixed .ss-pack2- so it can't collide with the phase 3 job safety pack (.ss-pack-).
Red stays for an expired ticket or policy (the line chips); a closed link is grey, never red.
========================================================================================== */
/* Quiet helper text, and a row of buttons that wraps. */
.ss-pack2-quiet { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
.ss-pack2-quiet > .bi { margin-right: 4px; color: var(--neutral-500, #9aa3ad); }
.ss-pack2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ss-pack2-row > .ss-input { flex: 1 1 220px; width: auto; }
/* The form pages read as one column. */
.ss-pack2-narrow { max-width: 820px; }
/* A plain list of facts about a pack, one per line. */
.ss-pack2-facts { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); }
.ss-pack2-facts > li { min-width: 0; overflow-wrap: anywhere; }
/* A bold name with its ABN beside it; an icon line (the job). */
.ss-pack2-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-pack2-lead > b { font-size: 15px; color: var(--neutral-900, #1f2933); }
.ss-pack2-lead > .bi { color: var(--neutral-500, #9aa3ad); }
.ss-pack2-fields { display: grid; gap: 12px; }
/* The list page's line for one job's packs. */
.ss-pack2-jobbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; min-width: 0; padding: 12px 14px; background: var(--neutral-0, #ffffff); border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); }
.ss-pack2-jobbar-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-pack2-jobbar-t > .bi { color: var(--neutral-500, #9aa3ad); }
.ss-pack2-jobbar-act { display: flex; flex-wrap: wrap; gap: 8px; }
/* Ticks: each is a whole-width target with its words beside it. */
.ss-pack2-set { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-pack2-choice { display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: 40px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.ss-pack2-choice:hover { background: var(--neutral-50, #f8f8f7); }
.ss-pack2-choice > input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ss-ink); }
.ss-pack2-choice > .ss-av { flex: none; }
.ss-pack2-choice > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-pack2-choice b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-pack2-choice small { font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-pack2-date { max-width: 260px; margin: 4px 0 0 38px; }
.ss-pack2-submit { margin-top: 4px; }
/* The team to pick from, and the agreement statement under a person who is in the pack. */
.ss-pack2-people { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.ss-pack2-person { display: grid; gap: 4px; min-width: 0; padding: 4px; border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff); }
.ss-pack2-person.is-in { border-color: var(--neutral-400, #cbd0d6); box-shadow: var(--shadow-xs); }
.ss-pack2-consent { display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--neutral-50, #f8f8f7); font-size: 13.5px; line-height: 1.5; color: var(--neutral-800, #333d47); cursor: pointer; }
.ss-pack2-person > .ss-pack2-consent { margin: 0 6px 6px 38px; }
.ss-pack2-consent > input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ss-ink); }
.ss-pack2-consent > span { min-width: 0; overflow-wrap: anywhere; }
/* The link, once, after a pack is made. */
.ss-pack2-made { display: grid; gap: 12px; }
.ss-pack2-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
/* People in a pack, on the pack's own page. */
.ss-pack2-members { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.ss-pack2-member { display: grid; gap: 8px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-pack2-member:first-child { border-top: 0; }
.ss-pack2-member.is-off { opacity: .8; }
.ss-pack2-member-h { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ss-pack2-member-h > .ss-av, .ss-pack2-member-h > .ss-chip { flex: none; }
.ss-pack2-member-t { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.ss-pack2-member-t > b { font-size: 14px; font-weight: 600; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-pack2-member-t > small { font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-pack2-member > .ss-pack2-row { padding-left: 42px; }
/* The exact words someone confirmed, kept with the agreement. */
.ss-pack2-statement { margin: 0 0 0 42px; padding: 8px 12px; border-left: 3px solid var(--neutral-300, #e5e7eb); font-size: 13px; line-height: 1.5; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-pack2-add { display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-pack2-preview-note { margin-bottom: 10px; }
/* What a pack shows: its sections, the lines in each, the crew, the SWMS. */
.ss-pack2-view { display: grid; gap: 16px; min-width: 0; }
.ss-pack2-missing ul { margin: 6px 0 0; padding-left: 18px; }
.ss-pack2-missing li { overflow-wrap: anywhere; }
.ss-pack2-missing-h { margin: 0; font-weight: 700; }
.ss-pack2-sec .ss-panel-head :is(h2, h3) { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 17px/1.25 var(--ss-display); letter-spacing: -0.01em; color: var(--neutral-900, #1f2933); }
.ss-pack2-sec .ss-panel-head :is(h2, h3) > .bi { font-size: 15px; color: var(--neutral-600, #6b7280); }
.ss-pack2-sec .ss-panel-body { display: grid; gap: 10px; }
.ss-pack2-lines { display: grid; margin: 0; padding: 0; list-style: none; }
.ss-pack2-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-pack2-line:first-child { border-top: 0; }
.ss-pack2-line-t { display: flex; flex: 1 1 220px; flex-direction: column; gap: 2px; min-width: 0; }
.ss-pack2-line-t > b { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-pack2-line-t > small { font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-pack2-line-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ss-pack2-line-act { flex: none; }
.ss-pack2-copy { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.ss-pack2-crew { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ss-pack2-crew-p { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: var(--radius-md, 12px); }
.ss-pack2-crew-h { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ss-pack2-crew-h > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-pack2-crew-h b { font-size: 14.5px; font-weight: 600; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-pack2-crew-h small { font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); }
.ss-pack2-swms { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ss-pack2-swms-i { display: grid; justify-items: start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--neutral-200, #e9e9e6); border-radius: var(--radius-md, 12px); }
.ss-pack2-swms-i > .ss-shelf-signed { width: 100%; }
.ss-note.ss-pack2-asof { margin: 0; }
/* The public page: the ABN line under the heading. */
.ss-pack2-abn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; font-weight: 600; color: var(--neutral-800, #333d47); font-variant-numeric: tabular-nums; }
/* "Shared in packs" on the Registers page, under "Who hears about it". */
.ss-pack2-shared { margin-top: 16px; }
.ss-pack2-shared .ss-panel-body { display: grid; gap: 10px; }
.ss-pack2-shared-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ss-pack2-shared-list > li { display: grid; justify-items: start; gap: 3px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-pack2-shared-list > li:first-child { border-top: 0; }
.ss-pack2-shared-list > li > small { font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-pack2-shared-list > li > .ss-btn { margin-top: 6px; }
.ss-pack2-shared-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.ss-pack2-shared-t > b { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.ss-pack2-none { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--neutral-800, #333d47); }
/* The job page's "Job pack for the builder" (inside the phase 3 job safety pack). */
.ss-pack2-job { min-width: 0; }
/* Packs on a phone (<= 767.98px): 44px targets, one column, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-pack2-row > .ss-btn, .ss-pack2-jobbar-act > .ss-btn { flex: 1 1 auto; min-height: 44px; }
.ss-pack2-row > .ss-input { flex: 1 1 100%; }
.ss-pack2-choice, .ss-pack2-consent { min-height: 44px; }
.ss-pack2-person > .ss-pack2-consent { margin-left: 6px; }
.ss-pack2-date { max-width: none; margin-left: 0; }
.ss-pack2-member > .ss-pack2-row { padding-left: 0; }
.ss-pack2-statement { margin-left: 0; }
.ss-pack2-member-h { flex-wrap: wrap; }
.ss-pack2-line-act, .ss-pack2-shared-list > li > .ss-btn { min-height: 44px; }
.ss-pack2-crew-p, .ss-pack2-swms-i { padding: 10px; }
}
/* Packs on a narrow phone (the phone audit runs down to 300px). */
@media (max-width: 359.98px) {
.ss-pack2-line { gap: 6px 10px; }
.ss-pack2-line-t { flex-basis: 100%; }
.ss-pack2-jobbar { padding: 10px; }
}
/* End of the compliance packs block. */
/* ==========================================================================================
Chemicals and safety data sheets (safety phase 6): the register (/tradie/safety/chemicals), a
chemical's phone view on site (/tradie/safety/chemicals/{id}), the add and change form, and the
chemicals entries on the Registers page. Additive: every rule here is .ss-chem-*.
A GHS pictogram is drawn as an ink diamond. Red is kept for what's overdue or expired, so the
diamond is never red, and its hazard is always in words beside it.
========================================================================================== */
/* A GHS pictogram: an ink diamond (a turned square) with the symbol's icon upright inside it; is-lg on the phone view. */
.ss-chem-ghs { position: relative; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--ss-ink); font-size: 11px; line-height: 1; }
.ss-chem-ghs::before {
content: ""; position: absolute; inset: 4px; border: 1.5px solid var(--ss-ink); border-radius: 2px;
background: var(--neutral-0, #ffffff); transform: rotate(45deg);
}
.ss-chem-ghs > i { position: relative; }
.ss-chem-ghs.is-lg { width: 44px; height: 44px; font-size: 18px; }
.ss-chem-ghs.is-lg::before { inset: 7px; border-width: 2px; border-radius: 3px; }
/* A register row's hazards: small diamonds, then the hazards in words. */
.ss-chem-hazards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--neutral-700, #4b5563); }
.ss-chem-ghs-list { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.ss-chem-hazards-t { min-width: 0; overflow-wrap: anywhere; }
/* The register row: its SDS state column keeps to a readable width beside the product. */
.ss-chem-row > .ss-rec-end { max-width: 280px; }
/* The phone view's hazards: one tile per pictogram with its diamond, the hazard, its code and symbol. */
.ss-chem-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-chem-tile {
display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-50, #f8f8f7);
}
.ss-chem-tile-t { display: grid; gap: 2px; min-width: 0; }
.ss-chem-tile-t > b { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-chem-tile-t > small { font-size: 12.5px; line-height: 1.35; color: var(--neutral-600, #6b7280); }
/* No pictograms ticked: one plain line. */
.ss-chem-none { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); }
/* The nine pictograms as ticks: a label per pictogram (checkbox, diamond, words), at least 52px tall. */
.ss-chem-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.ss-chem-picker > legend { float: none; width: auto; margin: 0 0 8px; padding: 0; }
.ss-chem-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; min-width: 0; }
.ss-chem-pick {
display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; margin: 0; padding: 8px 12px;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: 10px; background: var(--neutral-0, #ffffff); cursor: pointer;
transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease), background-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.ss-chem-pick:hover { border-color: var(--neutral-500, #9aa3ad); }
.ss-chem-pick.is-on { border-color: var(--ss-ink); background: var(--neutral-100, #f4f4f2); box-shadow: inset 0 0 0 1px var(--ss-ink); }
.ss-chem-pick > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ss-ink); cursor: pointer; }
.ss-chem-pick:focus-within { outline: 3px solid var(--brand-500, #3b82f6); outline-offset: 2px; }
.ss-chem-pick-t { display: grid; gap: 1px; min-width: 0; }
.ss-chem-pick-t > b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-chem-pick-t > small { font-size: 12px; line-height: 1.35; color: var(--neutral-600, #6b7280); }
.ss-chem-picker:disabled .ss-chem-pick { opacity: .6; cursor: not-allowed; }
/* Registers page: the crew's row to the chemicals register, and the note (with its buttons) while the chemicals register is shown. */
.ss-chem-entry { min-width: 0; }
.ss-chem-focus { flex-wrap: wrap; }
.ss-chem-focus > p { flex: 1 1 260px; }
.ss-chem-focus-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; padding-left: 26px; }
/* A quiet line: what a file is, who added it, a list still loading. */
.ss-chem-quiet { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
/* A refusal, under what it's about (amber: red is kept for what's overdue). */
.ss-chem-error { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--warning-800, #92400e); overflow-wrap: anywhere; }
/* Buttons in a row that wrap: a failed load's ways out, the record's changes, the form's save. */
.ss-chem-row-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* A chemical's phone view: the SDS and its hazards, then where it's kept, the SWMS and the record; two columns from 1100px. */
.ss-chem-detail { display: grid; gap: 16px; min-width: 0; }
.ss-chem-col { display: grid; align-content: start; gap: 16px; min-width: 0; }
.ss-chem-sds .ss-panel-head { align-items: center; }
.ss-chem-sds-body { display: grid; gap: 10px; }
.ss-chem-sds-body > .ss-btn { justify-self: start; }
.ss-chem-sds-body > .ss-btn.is-block { justify-self: stretch; }
.ss-chem-sds-body > .ss-note { margin-top: 4px; }
/* The big button that opens the SDS: easy to hit with a gloved thumb. */
.ss-chem-open { min-height: 56px; font-size: 16px; }
/* Where the SDS stands, in words ("Dated 3 March 2020, more than 5 years old"). */
.ss-chem-line { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-chem-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
/* The SWMS that name it, each with the steps that do. */
.ss-chem-uses { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ss-chem-uses > li { display: grid; gap: 2px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-chem-uses > li:first-child { padding-top: 0; border-top: 0; }
.ss-chem-uses small { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
.ss-chem-steps { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-chem-record { display: grid; gap: 8px; }
/* The add and change form: three panels, then Cancel and the save. */
.ss-chem-form { max-width: 880px; }
.ss-chem-fields { display: grid; gap: 14px; }
/* Take a photo, or choose a file: two drop zones side by side, one column on a phone. */
.ss-chem-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; min-width: 0; }
.ss-chem-drop { display: grid; place-items: center; min-height: 88px; }
.ss-chem-drop .ss-drop-inner > i { font-size: 24px; }
/* The file chosen: its name and size, and a way to take it off. */
.ss-chem-chosen {
display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px;
border: 1px solid var(--success-200, #bbf7d0); border-radius: 10px; background: var(--success-50, #f0fdf4);
}
.ss-chem-chosen > i { flex: none; font-size: 20px; line-height: 1; color: var(--success-700, #15803d); }
.ss-chem-chosen > span { display: grid; flex: 1 1 auto; min-width: 0; }
.ss-chem-chosen b { font-size: 13.5px; font-weight: 600; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-chem-chosen small { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
/* A new sheet cleared the old sheet's date: said beside the file, in amber with an icon. */
.ss-chem-note-soon { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--warning-800, #92400e); }
.ss-chem-note-soon > i { flex: none; margin-top: 2px; }
/* What stops a save, one line each. */
.ss-chem-problems { margin: 4px 0 0; padding-left: 18px; }
.ss-chem-date { max-width: 320px; }
.ss-chem-save { justify-content: flex-end; }
/* Chemicals on a phone (<= 767.98px): 44px targets, one column, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-chem-row > .ss-rec-end { max-width: none; }
.ss-chem-focus-act { padding-left: 0; }
.ss-chem-focus-act > .ss-btn, .ss-chem-row-act > .ss-btn { flex: 1 1 auto; min-height: 44px; }
.ss-chem-sds-body > .ss-btn { justify-self: stretch; min-height: 44px; }
.ss-chem-open { min-height: 60px; }
.ss-chem-pick { min-height: 56px; }
.ss-chem-tiles { grid-template-columns: minmax(0, 1fr); }
.ss-chem-date { max-width: none; }
.ss-chem-chosen { flex-wrap: wrap; }
.ss-chem-chosen > .ss-btn { min-height: 44px; }
}
/* Chemicals on a narrow phone (the phone audit runs down to 300px). */
@media (max-width: 359.98px) {
.ss-chem-picker-grid { grid-template-columns: minmax(0, 1fr); }
.ss-chem-tile { padding: 8px 10px; }
.ss-chem-drop { min-height: 76px; }
}
/* Chemicals, reduced motion: the ticks don't animate. */
@media (prefers-reduced-motion: reduce) {
.ss-chem-pick { transition: none; }
}
/* End of the chemicals block. */
/* ==========================================================================================
Permits to work, safety phase 6 (ss-pmt-*): the parts the rebuilt permits pages add on top of the
shared system (Permits.razor, PermitSign.razor, SsPermitSignaturePad). Equipment from Assets,
workers from Team with visitors marked, drawn signatures, the approval line, the job link and the
PDF. Colours from design tokens only; nothing here is red.
========================================================================================== */
/* Space above a block that follows a heading's note. */
.ss-pmt-gap { margin-top: 12px; }
/* "Names its equipment" on the wizard's type cards that isolate something. */
.ss-pmt-needs { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--neutral-700, #4b5563); }
.ss-pmt-needs > i { font-size: 12px; color: var(--neutral-500, #9aa3ad); }
/* "From your assets" / "Not in your assets". */
.ss-pmt-source { margin-top: 2px; }
/* What the picked asset brings: the ID the lock matches, its type and where it's kept. */
.ss-facts.ss-pmt-asset { margin-top: 12px; }
/* "Visitor" beside a typed name: someone with no account, whose signature someone else records. */
.ss-pmt-visitor {
display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--radius-pill, 999px);
background: var(--neutral-100, #f3f4f6); box-shadow: inset 0 0 0 1px var(--neutral-300, #e5e7eb);
font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--neutral-800, #333d47); white-space: nowrap;
}
.ss-rec-meta .ss-pmt-visitor > i { margin-right: 0; font-size: 12px; color: var(--neutral-600, #6b7280); }
.pw-person-name .ss-pmt-visitor { margin-left: 6px; vertical-align: 1px; }
/* A worker's role, typed beside their name in the wizard. */
.pw-input.ss-pmt-role { flex: 0 1 180px; width: auto; min-width: 0; }
/* A row on the permit: who, their state, the notes, and the viewer's own sign button. */
.ss-row.ss-pmt-worker { align-items: flex-start; }
.ss-pmt-worker .ss-rec-main { display: grid; gap: 2px; }
.ss-pmt-you { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--neutral-600, #6b7280); }
.ss-pmt-note { display: block; font-size: 12.5px; line-height: 1.45; color: var(--neutral-600, #6b7280); overflow-wrap: anywhere; }
.ss-rec-act.ss-pmt-worker-act { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* Adding someone to a permit: from the team, or a visitor by name. */
.ss-pmt-add { display: grid; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-pmt-add > .ss-sign-msg { margin-top: 8px; }
/* The job link: "Change the job" under the job, and the picker it opens. */
.ss-link.ss-pmt-change { margin-top: 2px; font-size: 13px; }
.ss-pmt-jobedit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--neutral-200, #e9e9e6); }
.ss-pmt-jobedit > .ss-sign-msg, .ss-pmt-jobedit > .pw-muted { margin-top: 8px; }
/* "Approved by Mia Chen, 29 Sep 2026, 7:04 am", or the note to the second person who can approve it. */
.ss-pmt-approved { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); }
.ss-pmt-approved > i { flex: none; margin-top: 2px; color: var(--success-600, #16a34a); }
/* The PDF panel's button row sits on the left, under its line. */
.pw-row-btns.ss-pmt-pdf-act { justify-content: flex-start; margin-top: 10px; }
/* "See the signature" under the emergency override record. */
.ss-btn.ss-pmt-sigbtn { margin-top: 8px; }
/* The job the list is filtered to (from the job page's link): pressing it shows every job again. */
.ss-pill.ss-pmt-filter { max-width: 100%; }
.ss-pill.ss-pmt-filter > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "No equipment named" in the list: said plainly, in a quieter voice than a real name. */
.ss-pmt-quiet { color: var(--neutral-600, #6b7280); font-style: italic; }
/* Signatures sheet: each drawn signature with when, and who recorded it for a visitor. */
.ss-pmt-sigs { display: grid; gap: 16px; }
.ss-pmt-sig { display: grid; gap: 8px; margin: 0; }
.ss-pmt-sig > figcaption { font-size: 13.5px; line-height: 1.45; color: var(--neutral-800, #333d47); overflow-wrap: anywhere; }
.ss-pmt-sig-img {
display: block; width: 100%; max-width: 480px; height: auto; max-height: 200px; object-fit: contain;
border: 1px solid var(--neutral-300, #e5e7eb); border-radius: var(--radius-md, 12px); background: var(--neutral-0, #ffffff);
}
/* The sign page, for a visitor: "Hand your phone to Sam Lee..." */
.ss-pmt-hand {
display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: var(--radius-md, 12px);
background: var(--brand-50, #eff6ff); box-shadow: inset 0 0 0 1px var(--brand-200, #bfdbfe);
font-size: 14px; line-height: 1.45; color: var(--brand-900, #1e3a8a); overflow-wrap: anywhere;
}
.ss-pmt-hand > i { flex: none; margin-top: 2px; font-size: 16px; color: var(--brand-700, #1d4ed8); }
/* The job page's "Permits on this job" (SsPermitJobList): the pack's head, then the permits as rows. */
.ss-pack.ss-pmt-job > .ss-rows { margin: 0; }
/* Permits on a phone (<= 767.98px): 44px targets, one column, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-row.ss-pmt-worker { flex-wrap: wrap; }
.ss-rec-act.ss-pmt-worker-act { flex: 1 1 100%; justify-content: flex-start; padding-left: 46px; }
.ss-rec-act.ss-pmt-worker-act > .ss-btn { min-height: 44px; }
.pw-input.ss-pmt-role { flex: 1 1 100%; }
.ss-link.ss-pmt-change { display: inline-flex; align-items: center; min-height: 44px; }
.ss-pmt-add .ss-seg > button { min-height: 44px; }
.ss-pmt-job .ss-pack-head > .ss-btn { flex: 1 1 100%; min-height: 44px; }
.ss-pmt-job .ss-rec-act > .ss-btn { min-height: 44px; }
}
/* Permits on a narrow phone (the phone audit runs down to 300px). */
@media (max-width: 359.98px) {
.ss-rec-act.ss-pmt-worker-act { padding-left: 0; }
}
/* End of the permits block. */
/* ============================================================================================
Chemicals on SWMS steps (safety phase 6 review, .ss-stepchem-*): the builder step's picker and the
chemicals a step names, the sign-on page's "Open SDS" for each, and the SWMS sheet's list.
============================================================================================ */
/* A named chemical: its icon and product name, beside its remove button (builder) or Open SDS (sign-on). */
.ss-stepchem-name {
display: inline-flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; min-height: 36px;
font-size: 14px; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere;
}
.ss-stepchem-name > i { flex: none; color: var(--neutral-600, #6b7280); }
/* The picker: a full-width select under the chemicals the step names. */
.ss-input.ss-stepchem-pick { width: 100%; margin-bottom: 6px; }
/* The chemicals a step names, on the sign-on page and the SWMS sheet. */
.ss-stepchem-list { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.ss-stepchem-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ss-stepchem-list .ss-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
/* When a sheet didn't open: the reason, on its own line under the chemical (said in words, not red). */
.ss-stepchem-error { flex: 1 1 100%; font-size: 12.5px; line-height: 1.45; color: var(--neutral-700, #4b5563); }
/* On the SWMS sheet, a step's chemicals take the whole row under its hazards and controls. */
.ss-stepchem-sheet { grid-column: 1 / -1; min-width: 0; }
/* On a phone (<= 767.98px): 44px targets, nothing wider than a 300px screen. */
@media (max-width: 767.98px) {
.ss-stepchem-name { min-height: 44px; }
.ss-stepchem-list > li > .ss-btn { min-height: 44px; }
.ss-stepchem-list .ss-link { min-height: 44px; }
.ss-input.ss-stepchem-pick { min-height: 44px; }
}
/* End of the chemicals on SWMS steps block. */
/* ============================================================================================
Permits, safety phase 6 close (ss-pmt-*): the self-approval note, and recording a sign-off for
someone who isn't here (the row's action and its form).
============================================================================================ */
/* What a self-approval records, under "Approve it yourself", above the button. */
.ss-note.ss-pmt-self { margin: -4px 0 12px; }
/* "Record a sign-off for someone who isn't here" under a signed-on worker (Manager+). */
.ss-link.ss-pmt-absent-btn {
display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; margin-top: 4px;
font-size: 13px; text-align: left; overflow-wrap: anywhere;
}
.ss-link.ss-pmt-absent-btn > i { flex: none; }
/* The form: why, the two confirmations, the manager's signature. */
.ss-pmt-absent { display: grid; gap: 12px; min-width: 0; }
.ss-pmt-absent > .pw-note { margin: 0; }
.ss-pmt-absent > .ss-sign-msg { margin: 0; }
/* On a phone (<= 767.98px): 44px targets. */
@media (max-width: 767.98px) {
.ss-link.ss-pmt-absent-btn { min-height: 44px; }
}
/* End of the permits phase 6 close block. */
/* ============================================================================================
Crew ticket copies (ss-tcopy-*): a photo or PDF copy of a crew ticket, kept as the business's own
Document Centre file. "Copy on file" in the registers grid, a row's Add a copy / View copy /
Replace copy, the Team page's buttons under a ticket, and the one dialog (SsTicketCopyDialog) that
puts a copy on file or opens it. Additive: every rule here styles an .ss-tcopy-* element.
============================================================================================ */
/* "Copy on file" as a third line in a grid cell (and on a phone's ticket line), quiet, with a paperclip. */
.ss-tcopy-flag {
display: inline-flex; align-items: center; gap: 4px; min-width: 0;
font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere;
}
.ss-tcopy-flag > i { flex: none; font-size: 12px; line-height: 1; }
/* The note under the grid: select a date to add or open a copy. */
.ss-note.ss-tcopy-gridnote { margin-top: 8px; }
/* A register row's copy buttons, under its title and meta line. */
.ss-tcopy-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
/* The Team page: "Copy on file" in a ticket's meta line, and its copy buttons under it. */
.ss-tcopy-onfile { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--neutral-800, #333d47); }
.ss-tcopy-teamacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
/* The dialog: which ticket it's about, what happens to the copy, the two ways to pick one. */
.ss-tcopy-ticket {
display: flex; align-items: flex-start; gap: 8px; margin: 0; min-width: 0;
font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere;
}
.ss-tcopy-ticket > i { flex: none; margin-top: 2px; font-size: 15px; color: var(--neutral-600, #6b7280); }
.ss-tcopy-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--neutral-700, #4b5563); overflow-wrap: anywhere; }
/* Take a photo, or choose a file: side by side, one column when there isn't room. */
.ss-tcopy-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; min-width: 0; }
.ss-tcopy-drop { display: grid; place-items: center; min-height: 88px; }
.ss-tcopy-drop .ss-drop-inner > i { font-size: 24px; }
/* The file chosen: its name and size, and a way to take it off. */
.ss-tcopy-chosen {
display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px;
border: 1px solid var(--success-200, #bbf7d0); border-radius: 10px; background: var(--success-50, #f0fdf4);
}
.ss-tcopy-chosen > i { flex: none; font-size: 20px; line-height: 1; color: var(--success-700, #15803d); }
.ss-tcopy-chosen > span { display: grid; flex: 1 1 auto; min-width: 0; }
.ss-tcopy-chosen b { font-size: 13.5px; font-weight: 600; color: var(--neutral-900, #1f2933); overflow-wrap: anywhere; }
.ss-tcopy-chosen small { font-size: 12.5px; color: var(--neutral-600, #6b7280); }
/* Why a file wasn't taken, or couldn't be saved: amber, never red (red is for expired records). */
.ss-tcopy-error { flex: 1 1 100%; margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--warning-800, #92400e); overflow-wrap: anywhere; }
/* On a phone (<= 767.98px): 44px targets, and the buttons take the width they need. */
@media (max-width: 767.98px) {
.ss-tcopy-acts > .ss-btn, .ss-tcopy-teamacts > .ss-btn { min-height: 44px; flex: 1 1 auto; }
.ss-tcopy-chosen { flex-wrap: wrap; }
.ss-tcopy-chosen > .ss-btn { min-height: 44px; }
.ss-tcopy-drop { min-height: 76px; }
}
/* End of the crew ticket copies block. */