/* Tablet-first. One token set; touch targets ≥ 48px. Dark mode = same tokens, different values, switched by data-theme on . */ :root { --ink: #1a1d21; --muted: #6a7178; --line: #d9dde2; --bg: #f4f5f7; --card: #ffffff; --accent: #1f5fa8; --error: #b3261e; --badge-red-bg: #f8d7d5; --badge-red-ink: #b3261e; --badge-amber-bg: #f6e5c3; --badge-amber-ink: #8a5b00; --saved-ink: #1e7d32; --warn-bg: #fdeceb; --btn-bg: #1a73e8; /* Google button blue — proper contrast w/ white */ --btn-ink: #ffffff; --reading: #7c3aed; /* R19: the armed reading box — never button-blue */ --radius: 10px; color-scheme: light; } [data-theme="dark"] { --ink: #e6e8eb; --muted: #98a0a8; --line: #3a3f45; --bg: #141619; --card: #1e2126; --accent: #7ab3ee; --error: #f28b82; --badge-red-bg: #4a2320; --badge-red-ink: #f5b9b3; --badge-amber-bg: #453516; --badge-amber-ink: #ecc27a; --saved-ink: #81c995; --warn-bg: #3a1f1d; --btn-bg: #1a73e8; --btn-ink: #ffffff; --reading: #a78bfa; color-scheme: dark; } #theme-toggle { position: fixed; right: 0.9rem; bottom: 0.9rem; z-index: 50; width: 48px; min-height: 48px; margin: 0; padding: 0; font-size: 1.3rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; } * { box-sizing: border-box; } /* R19: author display rules (e.g. p.guard { display: block }) must never defeat the hidden attribute — without this a "hidden" guard note with old text stays visible. */ [hidden] { display: none !important; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* R17.7: rem, not px — a px size here pinned all inherited text so the site-mode (A+) root bump only reached elements with their own rem size. 1.0625rem = 17px at the 16px default root: pixel-identical normally, and EVERY text now follows the A+ toggle. */ font-size: 1.0625rem; color: var(--ink); background: var(--bg); } .topbar { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1.25rem; background: var(--card); border-bottom: 1px solid var(--line); } .topbar .brand { font-weight: 600; } .topbar nav { display: flex; align-items: center; gap: 1rem; } .topbar a { color: var(--accent); text-decoration: none; padding: 0.7rem 0.5rem; } main { max-width: none; margin: 1.5rem 0; padding: 0 2rem; } @media (max-width: 700px) { main { padding: 0 0.7rem; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } .card.narrow { max-width: 26rem; margin: 10vh auto 0; } h1 { font-size: 1.35rem; margin: 0 0 1rem; } label { display: block; margin: 0.9rem 0 0.3rem; color: var(--muted); } input { width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; font-size: 1rem; border: 1px solid var(--line); border-radius: var(--radius); } input:focus { outline: 2px solid var(--accent); border-color: var(--accent); } /* R19: remarks (and any future multi-line field) — same look as an input, grows with its content (autogrow in capture.js). */ textarea { width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; font-size: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); resize: vertical; overflow: hidden; } textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); } .prewrap { white-space: pre-line; } button { min-height: 48px; margin-top: 1.2rem; padding: 0.6rem 1.6rem; font-size: 1rem; font-weight: 600; color: var(--btn-ink); background: var(--btn-bg); border: 0; border-radius: var(--radius); cursor: pointer; width: 100%; } button.link { width: auto; min-height: 44px; margin: 0; padding: 0.5rem 0.9rem; font-weight: 400; color: var(--accent); background: none; } .error { color: var(--error); } .muted { color: var(--muted); } table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; } th, td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: 500; } code { background: var(--bg); padding: 0.1rem 0.35rem; border-radius: 4px; } .table-wrap { overflow-x: auto; } .search-row { display: flex; gap: 0.6rem; margin-bottom: 0.4rem; } .search-row input { max-width: 22rem; } button.compact { width: auto; margin: 0; padding: 0.6rem 1.2rem; } .badge { display: inline-block; margin-left: 0.4rem; padding: 0.2rem 0.55rem; font-size: 0.8rem; border-radius: 4px; background: var(--line); } .badge.red { background: var(--badge-red-bg); color: var(--badge-red-ink); } .badge.amber { background: var(--badge-amber-bg); color: var(--badge-amber-ink); } .badge.grey { background: var(--bg); color: var(--muted); } .badge.ok-badge { background: transparent; border: 1px solid var(--saved-ink); color: var(--saved-ink); } .topbar .brand { text-decoration: none; color: var(--ink); } .title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .btn-link { color: var(--accent); text-decoration: none; font-weight: 600; padding: 0.5rem 0; } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.2rem 1.2rem; } .grid2.readonly div { padding: 0.35rem 0; } .grid2.readonly label { margin: 0; font-size: 0.85rem; } select { width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; font-size: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); } input { background: var(--card); color: var(--ink); } .narrow-form { max-width: 34rem; } .saved { color: var(--saved-ink); font-weight: 600; } .banner.warn { background: var(--warn-bg); border: 1px solid var(--error); color: var(--error); padding: 0.8rem 1rem; border-radius: var(--radius); font-weight: 600; } /* R17.5: wide column gap so each ⓘ unmistakably belongs to the label on ITS left, never to the next column's checkbox; narrow screens simply wrap into one long vertical list (Tom, first tablet pass). */ .checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: 2.6rem; row-gap: 0.4rem; margin-bottom: 0.8rem; } .pick { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; } .pick input[type="checkbox"] { width: 26px; height: 26px; min-height: 0; } .picker { margin: 0.6rem 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.8rem; } .picker summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent); font-weight: 600; } .picker-list { max-height: 16rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } button.link.danger { color: var(--error); } button.secondary { background: var(--card); color: var(--accent); border: 1px solid var(--line); } #sig-canvas { display: block; width: 100%; max-width: 600px; height: 200px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); touch-action: none; } .sig-actions { margin: 0.5rem 0; } .sig-img { max-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 6px; } .gate { list-style: none; padding: 0; color: var(--error); } .gate li { padding: 0.2rem 0; } input.cell { width: 8rem; min-height: 42px; } #net-banner { display: none; } #net-banner.offline, #net-banner.restored { display: block; position: sticky; top: 0; z-index: 100; padding: 0.9rem 1.2rem; font-size: 1.05rem; font-weight: 700; text-align: center; } #net-banner.offline { background: var(--error); color: #fff; } #net-banner.restored { background: var(--saved-ink); color: #fff; } #save-status { position: fixed; left: 0.9rem; bottom: 0.9rem; z-index: 60; padding: 0.45rem 0.9rem; border-radius: 999px; font-weight: 600; opacity: 0; transition: opacity 0.2s; pointer-events: none; background: var(--card); border: 1px solid var(--line); } #save-status.show { opacity: 1; } #save-status.ok { color: var(--saved-ink); } #save-status.fail { color: var(--error); border-color: var(--error); } h2 { font-size: 1.1rem; margin: 0 0 0.8rem; } main .card + .card { margin-top: 1rem; } .result-list { list-style: none; margin: 0.4rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .result-list li + li { border-top: 1px solid var(--line); } .result-list a { display: block; padding: 0.8rem 1rem; min-height: 48px; color: var(--accent); text-decoration: none; } .tiles { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1rem 0; } .tile { flex: 1 1 10rem; min-height: 64px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--accent); font-weight: 600; text-decoration: none; } /* ---- Round 2 capture UX ---- */ /* Weights picker: single column, grouped, colour-coded, live totaliser */ .picker-list { grid-template-columns: 1fr; max-height: 18rem; } .pick-group { border-top: 1px solid var(--line); padding-top: 0.25rem; margin-top: 0.25rem; } .pick-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .pick-group-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0; } .mass-chip { width: 16px; height: 16px; border-radius: 4px; flex: none; display: inline-block; border: 1px solid rgba(0,0,0,0.15); } .mass-c0 { background: #1f77b4; } .mass-c1 { background: #2ca02c; } .mass-c2 { background: #ff7f0e; } .mass-c3 { background: #9467bd; } .mass-c4 { background: #d62728; } .mass-c5 { background: #17becf; } .mass-c6 { background: #bcbd22; } .mass-c7 { background: #e377c2; } .mass-c8 { background: #8c564b; } .mass-c9 { background: #7f7f7f; } .mass-c10 { background: #aec7e8; } .mass-c11 { background: #98df8a; } .totaliser { border-top: 1px solid var(--line); margin-top: 0.4rem; padding: 0.55rem 0.2rem 0.15rem; font-weight: 600; position: sticky; bottom: 0; background: var(--card); } /* Per-field saved ticks (pill now only reports failures) */ .field-tick { color: var(--saved-ink); font-weight: 700; margin-left: 0.45rem; font-size: 0.9rem; opacity: 0; transition: opacity 0.25s; white-space: nowrap; } .field-tick.show { opacity: 1; } /* Linearity planner + compact weights cells */ .planner { border: 1px dashed var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; } .planner-row { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; } .planner-row input { max-width: 18rem; margin: 0; } .plan-points { margin: 0.6rem 0 0.2rem; } .cell-weights summary { cursor: pointer; color: var(--accent); white-space: nowrap; min-height: 42px; display: flex; align-items: center; } .cell-weights-list { max-width: 22rem; white-space: normal; padding: 0.3rem 0; color: var(--muted); } .add-step { border-top: 1px solid var(--line); margin-top: 0.8rem; padding-top: 0.4rem; } .add-step h3 { font-size: 1rem; margin: 0.4rem 0; } .save-row { display: flex; gap: 0.9rem; align-items: center; margin-top: 0.9rem; flex-wrap: wrap; } /* Eccentricity pan layout: back row on top, centre alone, front row below */ .pan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1.2rem; max-width: 34rem; } .pan-grid .pan-centre { grid-column: 1 / -1; width: 60%; margin: 0 auto; } /* Typo guard: >10% deviation turns the field red — never blocks entry */ input.warn-red { border-color: var(--error); color: var(--error); } strong.warn-red, span.warn-red { color: var(--error); } .guard { color: var(--error); font-weight: 600; margin-left: 0.5rem; } /* Idea 3: monotonicity marker — separate class so it never fights the MPE/typo warn-red toggle on the same input. */ input.warn-mono { border-color: var(--error); background: var(--warn-bg); } /* Traceability lines */ ul.trace { list-style: none; padding: 0; margin: 0.2rem 0; } ul.trace li { padding: 0.25rem 0; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } /* ---- Round 3: technician-first navigation + landing ---- */ .nav-primary { font-weight: 700; } .nav-more { position: relative; } .nav-more summary { list-style: none; cursor: pointer; color: var(--accent); font-weight: 600; padding: 0.7rem 0.5rem; min-height: 44px; display: flex; align-items: center; } .nav-more summary::-webkit-details-marker { display: none; } .nav-more summary::after { content: " ▾"; margin-left: 0.25rem; } .nav-more[open] summary::after { content: " ▴"; } .nav-menu { position: absolute; right: 0; top: 100%; z-index: 40; display: flex; flex-direction: column; min-width: 13rem; padding: 0.3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); } .nav-menu a { padding: 0.75rem 0.9rem; } .tile-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: 1.15rem; padding: 1rem 1.8rem; min-height: 56px; border-radius: var(--radius); text-decoration: none; margin: 0.4rem 0 0.8rem; } /* ---- Round 5 ---- */ /* A3/A4: no-wrap columns + first two columns frozen on horizontal scroll */ .nowrap, td.nowrap, th.nowrap { white-space: nowrap; } .table-frozen2 th:nth-child(1), .table-frozen2 td:nth-child(1), .table-frozen2 th:nth-child(2), .table-frozen2 td:nth-child(2) { position: sticky; background: var(--card); z-index: 2; } .table-frozen2 th:nth-child(1), .table-frozen2 td:nth-child(1) { left: 0; min-width: 5.5rem; } .table-frozen2 th:nth-child(2), .table-frozen2 td:nth-child(2) { left: 5.5rem; border-right: 1px solid var(--line); } /* A5: status colours — tell in-progress from done at a glance */ .badge.st-in-progress { background: transparent; border: 1px solid var(--accent); color: var(--accent); } .badge.st-pending-review { background: var(--badge-amber-bg); color: var(--badge-amber-ink); } .badge.st-released { background: transparent; border: 1px solid var(--saved-ink); color: var(--saved-ink); } .badge.st-superseded, .badge.st-void { background: var(--bg); color: var(--muted); } /* C1: next-due quick picks */ .quick-picks { display: flex; gap: 0.5rem; margin-top: 0.35rem; } .quick-picks button { min-height: 40px; padding: 0.3rem 0.8rem; } /* C3: temperature guide */ .field-guide { font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem; } .field-guide.bad { color: var(--error); } .field-guide.good { color: var(--saved-ink); } /* D3: drawer chevron + done button */ .picker summary .chev::before { content: "▾"; display: inline-block; margin-right: 0.45rem; transition: transform 0.15s; } .picker[open] summary .chev::before { transform: rotate(180deg); } .picker summary .totaliser { border: 0; padding: 0; margin: 0 0 0 0.6rem; position: static; font-weight: 600; color: var(--muted); } .picker summary .totaliser strong { color: var(--ink); } .picker .picker-done { margin-top: 0.5rem; } /* D5: linearity progress strip + sticky echo bar */ .lin-progress { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.55rem 0.8rem; border-radius: var(--radius); margin-bottom: 0.7rem; border: 1px solid var(--line); } .lin-progress.todo { border-color: var(--error); } .lin-progress.ok { border-color: var(--saved-ink); } .lin-progress .todo-text { color: var(--error); font-weight: 700; } .lin-progress .ok-text { color: var(--saved-ink); font-weight: 700; } .dots .dot, .dot-strip .dot, .lin-progress .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); margin-right: 4px; vertical-align: middle; } .dot.done { background: var(--saved-ink); border-color: var(--saved-ink); } .dot-strip { display: flex; align-items: center; gap: 0.3rem; margin: 0.3rem 0 0.5rem; } .scope-chip { border: 1px solid var(--accent); color: var(--accent); border-radius: 4px; padding: 0.1rem 0.5rem; font-size: 0.85rem; font-weight: 600; } #cal-progress { position: sticky; top: 0; z-index: 30; display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; padding: 0.45rem 0.9rem; margin: -0.5rem 0 0.8rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; } #cal-progress.todo { border-left: 4px solid var(--error); } #cal-progress.ok { border-left: 4px solid var(--saved-ink); } #cal-progress .todo { color: var(--error); } #cal-progress .ok { color: var(--saved-ink); } /* D6/D7: add-step drawer + guide */ .add-step summary.btn-summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; min-height: 48px; padding: 0.6rem 1.2rem; border-radius: var(--radius); margin-top: 0.5rem; } .add-step summary.btn-summary::-webkit-details-marker { display: none; } .add-step[open] summary.btn-summary { background: var(--line); color: var(--ink); } .step-guide { list-style: none; padding: 0.4rem 0 0; margin: 0.3rem 0; } .step-guide li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; color: var(--muted); } .step-guide li .gdot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--muted); display: inline-block; } .step-guide li.done { color: var(--saved-ink); } .step-guide li.done .gdot { background: var(--saved-ink); border-color: var(--saved-ink); } .step-guide li.next { color: var(--ink); font-weight: 700; } .step-guide li.next .gdot { border-color: var(--accent); } /* D9: tooltip that works on tap (focus) and hover */ .info-tip { position: relative; cursor: help; color: var(--accent); font-weight: 700; margin-left: 0.2rem; outline: none; } .info-tip .tip-text { display: none; position: absolute; left: 50%; transform: translateX(-80%); top: 1.5rem; z-index: 50; width: 17rem; white-space: normal; font-weight: 400; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 0.6rem 0.8rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .info-tip:hover .tip-text, .info-tip:focus .tip-text { display: block; } /* D10: subtle info banner */ .banner.info { background: transparent; border: 1px solid var(--accent); color: var(--ink); padding: 0.8rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; } /* E3: guard message on its own reserved line — never overlaps */ p.guard { display: block; min-height: 1.3rem; margin: 0.15rem 0 0.4rem; } /* F3: remark chips */ .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.45rem; } .chips .chip { width: auto; min-height: 40px; margin: 0; padding: 0.3rem 0.8rem; font-size: 0.88rem; font-weight: 500; color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 999px; } .readonly-value { margin: 0.4rem 0; padding: 0.55rem 0; color: var(--ink); } /* Round 7: test-load rule notes (WI-CAL-001 rev 4 — warn, never block) */ p.load-note { margin: 0.15rem 0 0.4rem; font-size: 0.92rem; } p.load-note.warn-red { font-weight: 600; } /* Round 7: offline buffer — the add-step note shows only while offline */ .offline-note { display: none; } body.is-offline .offline-note { display: block; color: var(--error); font-weight: 600; margin: 0.3rem 0; } body.is-offline #add-step-form button[type="submit"] { opacity: 0.45; pointer-events: none; } /* Round 7: weight-inspection tick (LOG-QC-001) */ details.qc-tick { margin: 0.6rem 0 1rem; } table.qc-history { margin-top: 0.8rem; } table.qc-history td, table.qc-history th { padding: 0.35rem 0.6rem; } /* ---- Round 8 (Tom's hands-on pass, 2026-07-16) ---- */ /* Secondary buttons must be unmistakably buttons — visible border + subtle fill, never background-on-background (Tom: bright blue is reserved for the actions that matter). */ button.secondary, button.compact.secondary { background: var(--bg); color: var(--accent); border: 2px solid var(--accent); font-weight: 600; } /* R8.7: drawer toggle rides the non-moving "Weights used" line; its label swaps by open state with CSS only. */ .picker summary { justify-content: flex-start; gap: 0.3rem; } .picker summary .picker-toggle { margin-left: auto; background: var(--btn-bg); color: var(--btn-ink); border-radius: var(--radius); padding: 0.55rem 1rem; font-weight: 700; white-space: nowrap; flex: none; } .picker:not([open]) .picker-toggle .when-open { display: none; } .picker[open] .picker-toggle .when-closed { display: none; } /* R8.7: the open drawer reads as its own block — tinted, accent bar on the left, air at the bottom so the Done button is clearly the next thing. */ .picker[open] { border-left: 5px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); } .picker[open] .picker-list { padding-bottom: 0.8rem; } .picker .picker-done { margin-bottom: 0.9rem; } /* R8.8: the planner is a helper tool, visually separate from the live test. */ .planner { border: 1px solid var(--line); background: color-mix(in srgb, var(--muted) 8%, var(--card)); } .planner form.planner-row { margin: 0.5rem 0 0; } /* R8.9/R11.4: mid-step the current guide line is highlighted TEXT — bold + accent colour, never a filled pill (a pill reads as a button, Tom). */ .add-step[open] .step-guide li.next { color: var(--accent); font-weight: 800; font-size: 1.05rem; } .add-step[open] .step-guide li.next .gdot { border-color: var(--accent); } /* R8.9: while a step is being added, push the card-level confirm row far away — it must never look like the step's save button. */ .add-step[open] ~ .save-row { margin-top: 4.5rem; } /* R8.6: ecc/rep locked until linearity is complete. */ .card.blocked { opacity: 0.75; border-left: 5px solid var(--error); } .blocked-note { color: var(--error); font-weight: 600; } /* R8.10: vertical weight lists (step rows + read-only test sections). */ ul.weight-list { list-style: none; margin: 0.2rem 0; padding: 0; } ul.weight-list li { padding: 0.15rem 0; white-space: nowrap; } /* R8.3/R9.6: review surface — single column always (scrolling beats squashing, Tom), shaded bright so reviewer input is unmistakable. */ .review-block { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--accent); border-left: 6px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, var(--card)); } .review-block h3 { margin: 0 0 0.6rem; font-size: 1rem; color: var(--accent); } .review-block .checks { margin-bottom: 0; grid-template-columns: 1fr; /* single column, no squashing */ gap: 0.9rem; } .review-hint { display: block; font-size: 0.85rem; font-weight: 500; } .review-hint.info { color: var(--muted); } .review-hint.warn { color: var(--error); font-weight: 700; } /* R9.6: app-verified facts are lines to skim, never ticks to make. */ .auto-check { margin: 0.35rem 0; font-weight: 600; } .auto-check.ok { color: var(--saved-ink); } .auto-check.warn { color: var(--error); } .auto-check .auto-tag { font-weight: 400; font-size: 0.85rem; opacity: 0.85; } /* R9.6: template guarantees — neat static bullets, not work. */ .guarantees { margin: 1.2rem 0; } .guarantees ul { list-style: none; margin: 0.3rem 0 0; padding: 0; } .guarantees li { padding: 0.15rem 0; color: var(--saved-ink); } .guarantees p { margin: 0; } /* R9.5: pending-review must be unmissable. */ .status-banner.pending { background: var(--badge-amber-bg); color: var(--badge-amber-ink); border: 2px solid var(--badge-amber-ink); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1rem; font-size: 1.25rem; font-weight: 800; } .status-banner.pending .sub { display: block; font-size: 1rem; font-weight: 500; margin-top: 0.35rem; } /* R9.4: scrolled-to drawers land BELOW the sticky progress bar. */ .picker { scroll-margin-top: 5.5rem; } /* R9.8/R9.9 */ .releasing-as { font-size: 1.05rem; } .cert-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; } /* R17.4: the capture-header facts — one explicitly labelled line per fact, roomy type; vertical space is cheap, ambiguity isn't. */ .cert-facts { margin: 0.2rem 0 0.9rem; } .cert-facts p { margin: 0.3rem 0; font-size: 1.05rem; } .spacer-above { margin-top: 1.6rem; } hr.soft-rule { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; } /* ---- Round 11 ---- */ /* Tooltip sits OUTSIDE the label so tapping it never toggles the checkbox */ /* R17.5: the label must NOT flex-grow — it pushed the ⓘ to the far right of the column, visually next to the NEIGHBOURING checkbox. Snug after the label text, the ⓘ can only belong to one thing. */ .pick-row { display: flex; align-items: center; gap: 0.15rem; } .pick-row .pick { flex: 0 1 auto; } /* R11.6: the as-left MPE guard shouts */ p.guard.loud { font-size: 1.08rem; font-weight: 800; } /* Guided capture (2026-07-18): next-action hero + the "impossible to miss" problem signal. The signal renders existing gate/advisory truth louder. */ .next-hero { position: sticky; top: 0; z-index: 60; background: var(--accent); color: #fff; font-weight: 700; padding: 0.7rem 0.9rem; min-height: 2.6rem; display: flex; align-items: center; } .next-hero-link { color: #fff; text-decoration: none; font-size: 1.05rem; } /* Blink 0.5 s on / 0.5 s off (Tom). OUTLINE is drawn outside the box, so nothing reflows — no page jump. Colour AND a "✕" shape (colour-blind). */ @keyframes problem-blink { 0%, 50% { outline-color: var(--error); } 51%, 100% { outline-color: transparent; } } .problem-block { outline: 3px solid var(--error); outline-offset: 2px; border-radius: 8px; animation: problem-blink 1s steps(1, end) infinite; position: relative; } .problem-block::after { content: "\2715"; position: absolute; top: -0.7rem; right: -0.7rem; background: var(--error); color: #fff; font-weight: 700; border-radius: 50%; width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; z-index: 2; } /* R23-D7a: a light-load alarm is amber and STEADY (never the red blink) so it reads as "note this", not "this stops you". No corner ✕ badge. */ .problem-soft { outline: 2px solid var(--badge-amber-ink); outline-offset: 2px; border-radius: 8px; } .problem-note-soft { color: var(--badge-amber-ink); font-weight: 600; margin: 0 0 0.4rem; } /* Full-width problem bar — sticky under the hero, viewport-pinned so it never scrolls off (Tom's concern). Reserves height only when shown. */ @keyframes bar-blink { 0%, 50% { background: var(--error); color: #fff; } 51%, 100% { background: var(--warn-bg); color: var(--error); } } /* R24 (code review): the BASE bar is AMBER — a soft-only state (light-load alarm, no hard block) must read as "note this", matching the amber card outline. Only .active (a genuine block) turns it red + blinking. */ .problem-bar { position: sticky; top: 2.6rem; z-index: 55; width: 100%; display: none; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; background: var(--badge-amber-bg); border-bottom: 2px solid var(--badge-amber-ink); color: var(--badge-amber-ink); font-weight: 700; } .problem-bar.shown { display: flex; } .problem-bar.active { background: var(--warn-bg); border-bottom-color: var(--error); color: var(--error); animation: bar-blink 1s steps(1, end) infinite; } .problem-bar .problem-x { font-size: 1.1rem; } .problem-jump { margin-left: auto; background: var(--badge-amber-ink); color: #fff; border: none; border-radius: 6px; padding: 0.4rem 0.75rem; min-height: 2.4rem; font-weight: 700; } .problem-bar.active .problem-jump { background: var(--error); } /* Progressive disclosure (2026-07-18): a DONE section collapses to an expandable one-line summary so only the active step is open. */ .card-collapse > summary.card-summary { font-size: 1.1rem; font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 0.4rem; list-style: none; } .card-collapse > summary.card-summary::-webkit-details-marker { display: none; } .card-collapse:not([open]) > summary.card-summary::before { content: "\25B8 "; } .card-collapse[open] > summary.card-summary::before { content: "\25BE "; } .done-tag { color: var(--saved-ink); font-weight: 600; } /* Guided capture Phase 7 (2026-07-18): sticky header stack + traffic-light rail + "X of Y" + site mode. */ .capture-sticky { position: sticky; top: 0; z-index: 60; } .capture-sticky .next-hero, .capture-sticky .problem-bar, .capture-sticky .step-rail { position: static; top: auto; } .step-rail { display: flex; gap: 0.3rem; padding: 0.4rem 0.6rem; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; } .step-seg { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--muted); } .step-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--line); flex: none; } .step-active { color: var(--accent); } .step-active .step-dot { background: var(--btn-bg); } .step-done { color: var(--saved-ink); } .step-done .step-dot { background: var(--saved-ink); } .step-problem { color: var(--error); } .step-problem .step-dot { background: var(--error); animation: problem-blink 1s steps(1, end) infinite; } .next-hero-count { margin-left: auto; font-weight: 600; font-size: 0.9rem; opacity: 0.9; } /* Site mode: bigger type + higher contrast for an older tech under glare. */ :root[data-site="on"] { font-size: 20px; } :root[data-site="on"] .muted { color: var(--ink); } :root[data-site="on"] input, :root[data-site="on"] select { font-size: 1.15rem; } :root[data-site="on"] .next-hero-link { font-size: 1.2rem; } #site-toggle { position: fixed; right: 0.9rem; bottom: 4.2rem; z-index: 50; width: 48px; min-height: 48px; margin: 0; padding: 0; font-size: 1rem; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; } /* Plain language: reg codes tucked behind a "why?" tap. */ .why { display: inline; margin-left: 0.35rem; } .why > summary { display: inline; cursor: pointer; color: var(--accent); font-weight: 600; } .why > summary::-webkit-details-marker { display: none; } .why[open] { display: block; margin-top: 0.3rem; font-weight: 400; font-size: 0.9rem; } /* ---- Round 18 (Tom's second tablet pass) ---- */ /* B5: nothing may land hidden under the sticky hero+rail — every jump target keeps clear of it (height measured into --sticky-h by capture.js) */ .card, .picker, #lin-thead, .add-step { scroll-margin-top: calc(var(--sticky-h, 0px) + 10px); } /* B3 → R19: the unlocked reading box. Compact (a reading is a short number, not a sentence — full page width read as insane), sat on the left at roughly the width of the Save + Cancel pair below it. PURPLE — deliberately unlike any button — and it PULSES until the technician taps the box or types a number (capture.js removes .reading-wait); autofocus alone never stops it. */ .add-step .reading-box input { width: min(21rem, 100%); font-size: 1.15rem; } #add-step-form input[name="reading_as_found"]:enabled { border: 2px solid var(--reading); } #add-step-form input[name="reading_as_found"]:enabled:focus { outline-color: var(--reading); } @keyframes reading-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--reading) 0%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--reading) 55%, transparent); } } .reading-wait { animation: reading-pulse 1.4s ease-in-out infinite; } input[name="reading_as_found"]:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; } /* B8: the opener never cancels — explicit buttons do; the top one lives on the summary row and only shows while the drawer is open */ .add-step > summary.btn-summary { display: flex; align-items: center; gap: 0.9rem; } .add-step:not([open]) .cancel-step { display: none; } /* B9: the adjustment decision strip */ .adjust-decision { border: 2px solid var(--accent); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0.8rem 0; } .adjust-decision .decision-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; } .adjust-decision .decision-state { margin: 0; } .adjust-decision button.link { text-decoration: underline; } /* E1: the "X of 4 done" counter is its own pill, clearly separate from the next-action sentence */ .next-hero-count.pill { background: rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.25rem 0.7rem; margin-left: 1.6rem; white-space: nowrap; } /* E2: a taller weights drawer — less scrolling inside the list */ .picker-list { max-height: 32rem; } /* E3: numeric capture cells read centred */ .pan-grid input, #rep-grid input, input.cell, #add-step-form input[name="reading_as_found"] { text-align: center; } /* F1: the sticker confirmation tick in Close capture */ .sticker-tick { margin: 0.6rem 0; font-weight: 600; } /* C3: the one-line WHY — on the bar (truncated) and at the top of a blinking card */ .problem-why { font-weight: 500; opacity: 0.95; } .problem-bar .problem-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw; } .problem-note { color: var(--error); font-weight: 700; margin: 0 0 0.6rem; } /* ---- Round 19 (Tom's third tablet pass) ---- */ /* Signature pad: inert behind a "Tap here to sign" cover until deliberately activated — a stray touch while scrolling can no longer leave ink. */ .sig-wrap { position: relative; max-width: 600px; } .sig-wrap canvas { pointer-events: none; } .sig-wrap.signing canvas { pointer-events: auto; } .sig-activate { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 2px dashed var(--accent); border-radius: var(--radius); } .sig-wrap.signing .sig-activate { display: none; } #sig-need { margin: 0.4rem 0 0.8rem; } /* Overall result: two always-visible tap targets — the pick fills with colour; roomy gap before the Sign-and-release block below. */ .pf-btns { display: flex; gap: 0.9rem; margin: 0.4rem 0 1.9rem; flex-wrap: wrap; } .pf-btns input[type="radio"] { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; } .pf-btn { display: flex; align-items: center; justify-content: center; min-height: 56px; min-width: 9.5rem; margin: 0; padding: 0.6rem 1.6rem; font-size: 1.15rem; font-weight: 700; cursor: pointer; color: var(--muted); background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); } #pf-pass:checked + .pf-btn { background: var(--saved-ink); border-color: var(--saved-ink); color: #fff; } #pf-fail:checked + .pf-btn { background: var(--error); border-color: var(--error); color: #fff; } .pf-btns input:focus-visible + .pf-btn { outline: 3px solid var(--accent); outline-offset: 2px; } /* ---- Round 20 (Tom's fourth tablet pass) ---- */ /* The loud partial-calibration statement under the linearity table */ .partial-note { margin: 0.8rem 0; font-size: 1.05rem; } /* Live relock banner inside the (static) ecc/rep forms */ .blocked-note.relock { font-size: 1.05rem; margin: 0.4rem 0 0.8rem; } /* Review echoes: values pulled from the certificate read as DIFFERENT text — accent colour, never the label ink. Dates line up right-aligned. */ .review-hint.info { color: var(--accent); font-weight: 600; } .hint-rows { display: table; margin-top: 0.15rem; } .hint-rows .hint-row { display: table-row; } .hint-rows .hint-row > span { display: table-cell; padding: 0.05rem 0; } .hint-rows .hint-val { text-align: right; padding-left: 1.2rem; } /* Instruments register: overdue rows shout */ tr.row-overdue td { background: var(--warn-bg); } tr.row-overdue .badge.red { font-weight: 700; } /* ---- Round 21 (Tom's fifth tablet pass) --------------------------------- */ /* Frozen register headings: sticky dies inside an overflow-x container, so this register trades the horizontal scrollbar for pinned headings. */ .table-wrap-sticky { overflow: visible; } table.sticky-head thead th { position: sticky; top: 0; z-index: 5; background: var(--card); box-shadow: 0 1px 0 var(--line); } tr[data-href] { cursor: pointer; } tr[data-href]:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); } .filter-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.3rem 0 0.9rem; } .filter-chips a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px; padding: 0.4rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; } .filter-chips a.on { background: var(--accent); border-color: var(--accent); color: #fff; } .filter-chips a.on .badge { background: rgba(255,255,255,0.25); color: #fff; } /* The sticker tick sits above the signature block — give it presence */ #sticker-slot .sticker-tick { display: block; margin: 0 0 0.9rem; } /* R21 follow-up (Tom): opening "Add linearity step" makes the "Tap to select weights" pill pulse gently blue → purple → white until the technician taps it — the next action must be unmissable (same rule as the R19 reading-box pulse; capture.js removes .weights-wait on tap). */ @keyframes weights-wait-pulse { 0% { background: var(--btn-bg); color: var(--btn-ink); box-shadow: none; } 50% { background: var(--reading); color: #fff; box-shadow: none; } 100% { background: var(--card); color: var(--reading); box-shadow: inset 0 0 0 2px var(--reading); } } .picker summary .picker-toggle.weights-wait { animation: weights-wait-pulse 2s ease-in-out infinite alternate; } /* R23-D3: non-blocking "review before submitting" notices at the close step */ .close-notes { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 0.6rem 0.9rem; margin: 0 0 0.9rem; } .close-notes-head { font-weight: 600; margin: 0 0 0.3rem; } .close-notes ul { margin: 0; padding-left: 1.2rem; } .close-notes li { margin: 0.2rem 0; color: var(--muted); } /* R26: job-centric home + job detail */ table th.num, table td.num { text-align: right; } .home-actions { white-space: nowrap; } .resume-line { margin: 0.8rem 0; } /* R29: recipient chips + email previews on the customer page */ .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; } .chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--card-alt, rgba(127, 127, 127, 0.12)); border: 1px solid var(--line, #ccc); border-radius: 999px; padding: 0.25rem 0.4rem 0.25rem 0.75rem; font-size: 0.95rem; } .chip-remove { display: inline; margin: 0; } .chip-x { border: none; background: none; cursor: pointer; line-height: 1; font-size: 1.05rem; padding: 0.15rem 0.4rem; border-radius: 999px; color: inherit; opacity: 0.6; min-height: 0; } .chip-x:hover { opacity: 1; background: rgba(127, 127, 127, 0.2); } .chip-add input[name="email"] { max-width: 24rem; } .email-preview-box { margin: 0.6rem 0; } .email-preview-box summary { cursor: pointer; font-weight: 600; } .email-preview { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--card-alt, rgba(127, 127, 127, 0.08)); border: 1px solid var(--line, #ccc); border-radius: 8px; padding: 0.8rem; font-size: 0.9rem; max-height: 22rem; overflow-y: auto; } /* R30: portal layout — a 27" monitor must not get a full-width login box. Content is a centred column; the sign-in card is narrower still. */ body.portal main { max-width: 60rem; margin: 0 auto; padding: 1rem; } body.portal .card { margin: 1rem auto; } body.portal main > .card:only-child { max-width: 28rem; margin-top: 3rem; } body.portal .card form input[type="email"] { width: 100%; max-width: 100%; } /* R30: send-button context row — button + preview toggle + To/CC chips sit together so the operator confirms addressees at the point of action. */ .send-row { display: flex; align-items: flex-start; gap: 0.8rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; } .send-row form { margin: 0; } .btnlike { display: inline-block; cursor: pointer; font-weight: 600; border: 1px solid var(--line, #bbb); border-radius: 8px; padding: 0.55rem 0.9rem; user-select: none; } .email-preview-box[open] { flex-basis: 100%; } .email-preview-pane { margin-top: 0.6rem; } .send-to { margin: 0.35rem 0 0.6rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .chip.ro { padding: 0.2rem 0.7rem; } button[disabled] { opacity: 0.45; cursor: not-allowed; } /* ============ R31: the attention baton (U1-U13, Tom's motion doctrine) ====== Assertive motion IS the guidance language: exactly ONE baton pulses at a time — always the next action. Red problem-blink outranks the baton. */ /* U1 — the active card glows with the blue→purple→white sweep of the weights pill, generalised. Strong enough to pull the eye from arm's length on a tablet in daylight. */ @keyframes baton-card { 0% { box-shadow: 0 0 0 3px var(--reading), 0 0 22px 4px rgba(37, 99, 235, 0.55); border-color: var(--reading); } 50% { box-shadow: 0 0 0 4px #7c3aed, 0 0 30px 8px rgba(124, 58, 237, 0.55); border-color: #7c3aed; } 100% { box-shadow: 0 0 0 3px #ffffff, 0 0 18px 4px rgba(255, 255, 255, 0.8); border-color: var(--reading); } } .baton { animation: baton-card 1.5s ease-in-out infinite alternate; scroll-margin-top: 96px; } /* U2 — the primary control inside the baton card carries its own ring. */ @keyframes baton-ring { 0% { outline: 3px solid var(--reading); outline-offset: 2px; } 50% { outline: 4px solid #7c3aed; outline-offset: 3px; } 100% { outline: 3px solid #ffffff; outline-offset: 2px; } } .baton-input { animation: baton-ring 1.5s ease-in-out infinite alternate; border-radius: 6px; } /* U3 — the current rail segment throbs. */ @keyframes seg-throb { from { transform: scale(1); } to { transform: scale(1.45); } } .step-seg.step-active .step-dot { animation: seg-throb 0.8s ease-in-out infinite alternate; } /* U4 — floating "Next: …" chip when the baton card is off-screen. */ #baton-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; background: var(--reading); color: #fff; font-weight: 700; border: none; border-radius: 999px; padding: 0.8rem 1.2rem; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); cursor: pointer; animation: baton-ring 1.5s ease-in-out infinite alternate; } #baton-float[hidden] { display: none; } /* U5 — a completed card's summary flashes green once as it folds. */ @keyframes flash-green { 0% { background: var(--saved-ink, #16a34a); color: #fff; } 100% { background: transparent; color: inherit; } } .flash-green { animation: flash-green 0.9s ease-out 1; } /* U10 — return-from-idle toast. */ #resume-toast { position: fixed; top: 4.2rem; left: 50%; transform: translateX(-50%); z-index: 70; background: #1f2937; color: #fff; padding: 0.7rem 1.3rem; border-radius: 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); font-weight: 600; opacity: 0; transition: opacity 0.3s ease; } #resume-toast.show { opacity: 1; } /* U11 — rejected input shakes: the universal "no". */ @keyframes input-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } } .shake { animation: input-shake 0.3s ease-in-out 2; } /* U13 — a freshly added recipient chip flashes; reuses .flash-green. */ .chip.flash-green { animation: flash-green 1.2s ease-out 1; }