Initial commit
This commit is contained in:
+395
-79
@@ -1,85 +1,401 @@
|
||||
/* Screen chrome + form-control styling layered on top of worksheet.css. Everything here is
|
||||
either screen-only (hidden in print) or makes an <input>/<select>/<radio> look exactly like
|
||||
the paper's blank/circle it replaces. */
|
||||
/* Roast Planner — screen UI. worksheet.css is print-only (loaded with media="print"); this file
|
||||
owns the entire on-screen experience and is deliberately independent of the print layout. */
|
||||
|
||||
body { background: #ddd4c8; }
|
||||
.app-toolbar {
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
display: flex; align-items: center; gap: 3mm; flex-wrap: wrap;
|
||||
background: #1a1512; color: #fff; padding: 3mm 4mm;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 9pt;
|
||||
}
|
||||
.app-toolbar h1 { font-size: 12pt; margin: 0; color: #fff; flex: 0 0 auto; }
|
||||
.app-toolbar .spacer { flex: 1 1 auto; }
|
||||
.app-toolbar button, .app-toolbar label.filebtn {
|
||||
background: #7a3b12; color: #fff; border: none; border-radius: 1mm;
|
||||
padding: 1.6mm 3mm; font-size: 8.6pt; cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.app-toolbar button:hover, .app-toolbar label.filebtn:hover { background: #94481a; }
|
||||
.app-toolbar button:disabled { opacity: .5; cursor: default; }
|
||||
.app-toolbar input[type="file"] { display: none; }
|
||||
.app-toolbar .status { font-size: 7.6pt; color: #cbbfae; }
|
||||
|
||||
.panel {
|
||||
max-width: 186mm; margin: 4mm auto 0; padding: 3mm 4mm;
|
||||
background: #fff8ee; border: 1px solid #d8cdb9; border-radius: 1mm;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 8.6pt;
|
||||
}
|
||||
.panel.hidden { display: none; }
|
||||
.panel h3 { margin: 0 0 2mm; font-size: 9.5pt; color: #7a3b12; }
|
||||
.panel .row { display: flex; gap: 2mm; align-items: center; margin-bottom: 2mm; flex-wrap: wrap; }
|
||||
.panel input[type="url"], .panel input[type="text"] {
|
||||
flex: 1 1 260px; padding: 1.6mm 2mm; border: 1px solid #c9bfb5; border-radius: 1mm; font-size: 8.6pt;
|
||||
}
|
||||
.panel .warnings { color: #8a5c10; font-size: 7.8pt; }
|
||||
.panel .warnings li { margin-bottom: .6mm; }
|
||||
.panel .lib-list { list-style: none; padding: 0; margin: 0; max-height: 40mm; overflow-y: auto; }
|
||||
.panel .lib-list li { padding: 1mm 0; border-bottom: 1px solid #eee; cursor: pointer; font-size: 8.2pt; }
|
||||
.panel .lib-list li:hover { background: #f6efe7; }
|
||||
|
||||
.sheet-wrap { max-width: 186mm; margin: 6mm auto; box-shadow: 0 2px 12px rgba(0,0,0,.25); background: #fff; }
|
||||
|
||||
/* --- form controls that must look like the paper's .f blank / .circ options --- */
|
||||
input.f, select.f {
|
||||
border: none; border-bottom: .9pt solid var(--ink); background: transparent;
|
||||
font: inherit; height: 4.2mm; padding: 0 .5mm; color: var(--ink);
|
||||
}
|
||||
input.f:focus, select.f:focus { outline: 1px dashed var(--accent); outline-offset: 1px; }
|
||||
select.f { -webkit-appearance: none; appearance: none; }
|
||||
textarea.f {
|
||||
border: none; border-bottom: .9pt solid var(--ink); background: transparent;
|
||||
font: inherit; resize: none; padding: 0 .5mm; color: var(--ink); vertical-align: bottom;
|
||||
:root{
|
||||
--ink:#1B1614; --ink-2:#5B524B; --ink-3:#8C8179;
|
||||
--surface:#FBF8F4; --surface-raised:#FFFFFF; --surface-sunken:#F2ECE4;
|
||||
--line:#E4DCD2; --line-strong:#D3C8BA;
|
||||
--ember:#A8481A; --ember-soft:#FBEFE6; --ember-strong:#7F350F;
|
||||
--pass:#2F6F4E; --pass-bg:#E8F3ED;
|
||||
--warn:#A8741A; --warn-bg:#FBF3E1;
|
||||
--fail:#B03A22; --fail-bg:#FBEAE5;
|
||||
--radius-sm:6px; --radius-md:10px; --radius-lg:16px;
|
||||
--shadow-card:0 1px 2px rgba(27,22,20,.04), 0 8px 24px -12px rgba(27,22,20,.12);
|
||||
--shadow-pop:0 12px 32px -8px rgba(27,22,20,.28);
|
||||
--font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Helvetica,Arial,sans-serif;
|
||||
--font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
|
||||
--font-mono:"SF Mono",Menlo,Consolas,monospace;
|
||||
--header-h:60px;
|
||||
}
|
||||
|
||||
.opt { display: inline-block; cursor: pointer; margin-right: 1.5mm; }
|
||||
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
|
||||
.opt span { padding: 0 .8mm; border-radius: 3mm; }
|
||||
.opt input:checked + span {
|
||||
background: var(--accent-bg); border: .9pt solid var(--accent); color: var(--accent); font-weight: 700;
|
||||
*{ box-sizing:border-box; }
|
||||
html{ background:var(--surface); }
|
||||
body{
|
||||
margin:0; background:var(--surface); color:var(--ink);
|
||||
font-family:var(--font-ui); font-size:15px; line-height:1.45;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
h1,h2,h3{ margin:0; font-family:var(--font-ui); }
|
||||
output{ font-variant-numeric:tabular-nums; }
|
||||
|
||||
/* ─── Header ──────────────────────────────────────────────────────────── */
|
||||
.app-header{
|
||||
position:sticky; top:0; z-index:30; height:var(--header-h);
|
||||
display:flex; align-items:center; gap:24px;
|
||||
background:var(--surface-raised); border-bottom:1px solid var(--line);
|
||||
padding:0 20px;
|
||||
}
|
||||
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
|
||||
.brand-mark{ font-size:22px; color:var(--ember); line-height:1; }
|
||||
.brand-text h1{ font-size:15px; font-weight:700; letter-spacing:-.1px; }
|
||||
.brand-sub{ margin:0; font-size:11.5px; color:var(--ink-3); }
|
||||
|
||||
.section-nav{
|
||||
display:flex; align-items:center; gap:2px; flex:1 1 auto; overflow-x:auto;
|
||||
scrollbar-width:none;
|
||||
}
|
||||
.section-nav::-webkit-scrollbar{ display:none; }
|
||||
.section-nav a{
|
||||
flex:0 0 auto; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:500;
|
||||
color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:background .15s,color .15s;
|
||||
}
|
||||
.section-nav a:hover{ background:var(--surface-sunken); color:var(--ink); }
|
||||
.section-nav a.active{ background:var(--ember-soft); color:var(--ember-strong); font-weight:600; }
|
||||
|
||||
.header-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
|
||||
.header-divider{ width:1px; height:22px; background:var(--line); margin:0 2px; }
|
||||
|
||||
.ghost-btn, .primary-btn, label.filebtn{
|
||||
font-family:var(--font-ui); font-size:12.5px; font-weight:600; cursor:pointer;
|
||||
border-radius:var(--radius-sm); padding:7px 12px; white-space:nowrap;
|
||||
border:1px solid transparent; transition:background .15s,border-color .15s,color .15s;
|
||||
}
|
||||
.ghost-btn{ background:transparent; color:var(--ink-2); border-color:var(--line); }
|
||||
.ghost-btn:hover{ background:var(--surface-sunken); color:var(--ink); }
|
||||
.ghost-btn[aria-pressed="true"]{ background:var(--ember-soft); border-color:var(--ember); color:var(--ember-strong); }
|
||||
.ghost-btn.small{ font-size:12px; padding:5px 10px; }
|
||||
.ghost-btn:disabled{ opacity:.45; cursor:default; }
|
||||
.primary-btn, label.filebtn{ background:var(--ember); color:#fff; border-color:var(--ember); }
|
||||
.primary-btn:hover, label.filebtn:hover{ background:var(--ember-strong); }
|
||||
.primary-btn:disabled{ opacity:.5; cursor:default; }
|
||||
#file-load{ display:none; }
|
||||
label.filebtn input[type=file]{ display:none; }
|
||||
|
||||
.autosave-chip{
|
||||
display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3);
|
||||
padding:4px 10px; border-radius:999px; background:var(--surface-sunken); margin-left:2px;
|
||||
}
|
||||
.autosave-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); transition:background .2s; }
|
||||
.autosave-chip.saving .dot{ background:var(--warn); animation:pulse 1s ease-in-out infinite; }
|
||||
.autosave-chip.saved .dot{ background:var(--pass); }
|
||||
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
|
||||
|
||||
/* ─── Drawers ─────────────────────────────────────────────────────────── */
|
||||
.drawer-overlay{
|
||||
position:fixed; inset:0; background:rgba(27,22,20,.32); z-index:40; opacity:1; transition:opacity .18s;
|
||||
}
|
||||
.drawer-overlay.hidden{ display:none; }
|
||||
.drawer{
|
||||
position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); z-index:41;
|
||||
background:var(--surface-raised); box-shadow:var(--shadow-pop);
|
||||
display:flex; flex-direction:column; transform:translateX(0); transition:transform .2s;
|
||||
}
|
||||
.drawer.hidden{ display:none; }
|
||||
.drawer-head{
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
padding:16px 20px; border-bottom:1px solid var(--line);
|
||||
}
|
||||
.drawer-head h3{ font-size:14.5px; font-weight:700; }
|
||||
.icon-btn{
|
||||
background:none; border:none; font-size:14px; color:var(--ink-3); cursor:pointer;
|
||||
width:28px; height:28px; border-radius:var(--radius-sm);
|
||||
}
|
||||
.icon-btn:hover{ background:var(--surface-sunken); color:var(--ink); }
|
||||
.drawer-body{ padding:18px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
|
||||
.stack-label{ font-size:12px; font-weight:600; color:var(--ink-2); }
|
||||
.text-input{
|
||||
width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
|
||||
font-size:13.5px; font-family:var(--font-ui); background:var(--surface-raised); color:var(--ink);
|
||||
}
|
||||
.text-input:focus{ outline:none; border-color:var(--ember); box-shadow:0 0 0 3px var(--ember-soft); }
|
||||
.checkbox-row{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); }
|
||||
.drawer-actions{ display:flex; gap:8px; }
|
||||
.drawer-result{ font-size:12.5px; color:var(--ink-2); line-height:1.55; }
|
||||
.drawer-result a{ color:var(--ember); }
|
||||
.drawer-result .warnings{ color:var(--warn); margin:6px 0 0; padding-left:18px; }
|
||||
.lib-list{ list-style:none; margin:0; padding:0; max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
|
||||
.lib-list.hidden{ display:none; }
|
||||
.lib-list li{ padding:8px 10px; font-size:12.5px; border-bottom:1px solid var(--line); cursor:pointer; }
|
||||
.lib-list li:last-child{ border-bottom:none; }
|
||||
.lib-list li:hover{ background:var(--surface-sunken); }
|
||||
|
||||
/* ─── Workspace layout ────────────────────────────────────────────────── */
|
||||
.workspace-grid{
|
||||
display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start;
|
||||
max-width:1360px; margin:0 auto; padding:28px 24px 80px;
|
||||
}
|
||||
.form-col{ min-width:0; display:flex; flex-direction:column; }
|
||||
.dock{
|
||||
position:sticky; top:calc(var(--header-h) + 20px);
|
||||
display:flex; flex-direction:column; gap:18px;
|
||||
max-height:calc(100vh - var(--header-h) - 40px); overflow-y:auto;
|
||||
padding-bottom:4px;
|
||||
}
|
||||
|
||||
.ledger td.val { position: relative; }
|
||||
.ledger td.val output { display: block; }
|
||||
.ledger tr.row.check-fail td.val { background: #fbe7e2 !important; }
|
||||
.ledger tr.row.check-pass td.val { background: #e6f3e6 !important; }
|
||||
|
||||
td.passcell.pass::after { content: "✓"; color: #2a7a2a; font-weight: 700; }
|
||||
td.passcell.fail::after { content: "✗"; color: #a8371a; font-weight: 700; }
|
||||
td.passcell.unknown::after { content: "—"; color: var(--faint); }
|
||||
|
||||
input.prefilled, select.prefilled { background: #fff3c4; }
|
||||
|
||||
.pv { display: none; }
|
||||
|
||||
/* --- print: bake values in, hide screen-only chrome --- */
|
||||
@media print {
|
||||
.app-toolbar, .panel, .sheet-wrap { box-shadow: none; margin: 0; max-width: none; }
|
||||
.app-toolbar, .panel { display: none !important; }
|
||||
body { background: #fff; }
|
||||
.ws-input { display: none !important; }
|
||||
.pv { display: inline-block; min-width: inherit; border-bottom: .9pt solid var(--ink); }
|
||||
.opt input:checked + span { border: .9pt solid var(--ink); background: none; color: var(--ink); border-radius: 50%; padding: 0 1.4mm; }
|
||||
td.passcell.pass::after, td.passcell.fail::after { content: none; }
|
||||
td.passcell.pass::before { content: "✓ "; }
|
||||
td.passcell.fail::before { content: "✗ "; }
|
||||
@media (max-width:1180px){
|
||||
.workspace-grid{ grid-template-columns:1fr; }
|
||||
.dock{ position:static; max-height:none; }
|
||||
}
|
||||
@media (max-width:1080px){
|
||||
.app-header{ flex-wrap:wrap; height:auto; padding:10px 14px; gap:10px; }
|
||||
.section-nav{ order:3; flex-basis:100%; }
|
||||
}
|
||||
@media (max-width:720px){
|
||||
.workspace-grid{ padding:18px 14px 60px; }
|
||||
}
|
||||
|
||||
/* ─── Panel cards (form sections) ────────────────────────────────────── */
|
||||
.panel-card{
|
||||
background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
|
||||
margin-bottom:20px; box-shadow:var(--shadow-card);
|
||||
}
|
||||
.panel-head{
|
||||
display:flex; align-items:center; justify-content:space-between; gap:16px;
|
||||
padding:16px 22px; border-bottom:1px solid var(--line);
|
||||
}
|
||||
.panel-head h2{ font-size:16px; font-weight:700; letter-spacing:-.1px; }
|
||||
.panel-body{ padding:20px 22px 22px; }
|
||||
.subhead{
|
||||
font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
|
||||
color:var(--ink-3); margin:20px 0 12px;
|
||||
}
|
||||
.subhead:first-child{ margin-top:0; }
|
||||
|
||||
/* ─── Fields ──────────────────────────────────────────────────────────── */
|
||||
.field-grid{
|
||||
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 18px; margin-bottom:14px;
|
||||
}
|
||||
.field-grid:last-child{ margin-bottom:0; }
|
||||
.field{ position:relative; display:flex; flex-direction:column; gap:5px; }
|
||||
.field.wide{ grid-column:1 / -1; }
|
||||
.field.accent .field-label{ color:var(--ember-strong); }
|
||||
.field-label{
|
||||
font-size:12px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:4px;
|
||||
}
|
||||
.hint{
|
||||
font-size:11px; color:var(--ink-3); cursor:help; border-radius:50%; width:14px; height:14px;
|
||||
display:inline-flex; align-items:center; justify-content:center;
|
||||
}
|
||||
.field-input{
|
||||
width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm);
|
||||
font-family:var(--font-ui); font-size:13.5px; color:var(--ink); background:var(--surface-raised);
|
||||
transition:border-color .15s, box-shadow .15s;
|
||||
}
|
||||
.field-input.sm{ text-align:center; font-family:var(--font-mono); font-size:13px; }
|
||||
.field-input.note{ font-family:var(--font-ui); }
|
||||
.field-input:focus{ outline:none; border-color:var(--ember); box-shadow:0 0 0 3px var(--ember-soft); }
|
||||
.field-input.prefilled{ background:#FFF6DE; border-color:#E4C766; }
|
||||
.field-input::placeholder{ color:var(--ink-3); opacity:.7; }
|
||||
|
||||
.unit-input{ position:relative; }
|
||||
.unit-input .field-input{ padding-right:32px; }
|
||||
.unit-input.sm .field-input{ padding-right:26px; }
|
||||
.unit-input .unit{
|
||||
position:absolute; right:10px; top:50%; transform:translateY(-50%);
|
||||
font-size:11.5px; color:var(--ink-3); pointer-events:none;
|
||||
}
|
||||
.unit-input.sm .unit{ right:7px; font-size:10.5px; }
|
||||
|
||||
/* field-id badge — hidden until hover/focus, or pinned via "Field IDs" toggle */
|
||||
.field[data-fid]::after{
|
||||
content:attr(data-fid); position:absolute; top:-6px; right:0;
|
||||
font-family:var(--font-mono); font-size:9.5px; font-weight:700; color:var(--ember);
|
||||
background:var(--ember-soft); padding:1px 5px; border-radius:5px;
|
||||
opacity:0; transition:opacity .12s; pointer-events:none;
|
||||
}
|
||||
.field[data-fid]:hover::after, .field[data-fid]:focus-within::after{ opacity:1; }
|
||||
body.show-fids .field[data-fid]::after{ opacity:1; }
|
||||
|
||||
/* ─── Choice controls (segmented + chips) ───────────────────────────── */
|
||||
.segmented{
|
||||
display:inline-flex; flex-wrap:wrap; gap:2px; background:var(--surface-sunken);
|
||||
padding:2px; border-radius:var(--radius-md);
|
||||
}
|
||||
.segmented.small{ padding:2px; }
|
||||
.seg-opt{ position:relative; cursor:pointer; }
|
||||
.seg-opt input{ position:absolute; opacity:0; width:0; height:0; }
|
||||
.seg-opt span{
|
||||
display:block; padding:6px 12px; border-radius:8px; font-size:12.5px; font-weight:500;
|
||||
color:var(--ink-2); white-space:nowrap; transition:background .15s,color .15s,box-shadow .15s;
|
||||
}
|
||||
.seg-opt input:checked + span{
|
||||
background:var(--surface-raised); color:var(--ember-strong); font-weight:700;
|
||||
box-shadow:0 1px 2px rgba(27,22,20,.12);
|
||||
}
|
||||
.seg-opt input:focus-visible + span{ outline:2px solid var(--ember); outline-offset:1px; }
|
||||
|
||||
.chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.chip-opt{ cursor:pointer; }
|
||||
.chip-opt input{ position:absolute; opacity:0; width:0; height:0; }
|
||||
.chip-opt span{
|
||||
display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
|
||||
border:1px solid var(--line); font-size:12.5px; font-weight:500; color:var(--ink-2);
|
||||
background:var(--surface-raised); transition:all .15s;
|
||||
}
|
||||
.chip-opt input:checked + span{
|
||||
background:var(--ember-soft); border-color:var(--ember); color:var(--ember-strong); font-weight:700;
|
||||
}
|
||||
.chip-opt input:focus-visible + span{ outline:2px solid var(--ember); outline-offset:1px; }
|
||||
|
||||
/* ─── Blend cards ─────────────────────────────────────────────────────── */
|
||||
#blend-body.collapsed .blend-cards, #blend-body.collapsed .blend-total,
|
||||
#blend-body.collapsed #btn-add-blend, #blend-body.collapsed .subhead,
|
||||
#blend-body.collapsed .field.wide, #blend-body.collapsed .field-grid{ display:none; }
|
||||
.blend-cards{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
|
||||
.blend-card{
|
||||
display:grid; grid-template-columns:1.4fr 1fr 1fr .7fr .8fr auto; gap:10px; align-items:end;
|
||||
background:var(--surface-sunken); border-radius:var(--radius-md); padding:12px;
|
||||
}
|
||||
.blend-card .field-label{ font-size:10.5px; }
|
||||
.blend-remove{
|
||||
background:none; border:1px solid var(--line); color:var(--ink-3); width:30px; height:30px;
|
||||
border-radius:var(--radius-sm); cursor:pointer; font-size:13px;
|
||||
}
|
||||
.blend-remove:hover{ background:var(--fail-bg); color:var(--fail); border-color:var(--fail); }
|
||||
.blend-total{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
|
||||
.blend-total-bar{ flex:1 1 auto; height:6px; border-radius:999px; background:var(--surface-sunken); overflow:hidden; }
|
||||
.blend-total-fill{ height:100%; background:var(--ember); width:0%; transition:width .2s,background .2s; }
|
||||
.blend-total-fill.over, .blend-total-fill.under{ background:var(--fail); }
|
||||
.blend-total-label{ font-size:11.5px; font-family:var(--font-mono); color:var(--ink-3); white-space:nowrap; }
|
||||
@media (max-width:640px){ .blend-card{ grid-template-columns:1fr 1fr; } }
|
||||
|
||||
/* ─── Milestone lists (temps / roast log) ────────────────────────────── */
|
||||
.milestone-list{ display:flex; flex-direction:column; gap:6px; }
|
||||
.milestone-row{
|
||||
display:grid; grid-template-columns:110px 64px 1fr 90px; gap:12px; align-items:center;
|
||||
padding:8px 4px; border-bottom:1px solid var(--line);
|
||||
}
|
||||
.milestone-row:last-child{ border-bottom:none; }
|
||||
.milestone-row.log-row{ grid-template-columns:110px 64px 72px 64px 1fr; }
|
||||
.milestone-label{ font-size:13px; font-weight:600; color:var(--ink); }
|
||||
.milestone-plan{
|
||||
font-family:var(--font-mono); font-size:13px; color:var(--ink-2); text-align:center;
|
||||
background:var(--surface-sunken); border-radius:var(--radius-sm); padding:6px 4px;
|
||||
}
|
||||
.milestone-time{ text-align:center; }
|
||||
.band-track{
|
||||
position:relative; height:6px; border-radius:999px; background:var(--surface-sunken);
|
||||
}
|
||||
.band-range{ position:absolute; top:0; bottom:0; background:var(--pass-bg); border-radius:999px; }
|
||||
.band-marker{
|
||||
position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
|
||||
background:var(--ink); border:2px solid var(--surface-raised); box-shadow:0 0 0 1px var(--ink-3);
|
||||
transform:translate(-50%,-50%); display:none; transition:left .15s;
|
||||
}
|
||||
.band-marker.out-of-band{ background:var(--fail); box-shadow:0 0 0 1px var(--fail); }
|
||||
@media (max-width:640px){
|
||||
.milestone-row, .milestone-row.log-row{ grid-template-columns:1fr; gap:6px; }
|
||||
.band-track{ order:3; }
|
||||
}
|
||||
|
||||
/* ─── Actuator timeline ───────────────────────────────────────────────── */
|
||||
.actuator-timeline{ display:flex; flex-direction:column; }
|
||||
.actuator-step{ display:flex; gap:14px; position:relative; padding-bottom:16px; }
|
||||
.actuator-step:last-child{ padding-bottom:0; }
|
||||
.actuator-rail{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
|
||||
.actuator-dot{
|
||||
width:10px; height:10px; border-radius:50%; background:var(--ember); margin-top:10px; flex:0 0 auto;
|
||||
}
|
||||
.actuator-line{ width:1px; flex:1 1 auto; background:var(--line); margin-top:4px; }
|
||||
.actuator-step:last-child .actuator-line{ display:none; }
|
||||
.actuator-card{
|
||||
flex:1 1 auto; background:var(--surface-sunken); border-radius:var(--radius-md); padding:12px 14px;
|
||||
display:grid; grid-template-columns:70px 1fr 1fr auto; gap:10px; align-items:end;
|
||||
}
|
||||
.actuator-card .field-label{ font-size:10.5px; }
|
||||
.actuator-why{ grid-column:1 / -1; }
|
||||
.actuator-remove{
|
||||
background:none; border:1px solid var(--line); color:var(--ink-3); width:28px; height:28px;
|
||||
border-radius:var(--radius-sm); cursor:pointer; font-size:12px; align-self:start;
|
||||
}
|
||||
.actuator-remove:hover{ background:var(--fail-bg); color:var(--fail); border-color:var(--fail); }
|
||||
@media (max-width:640px){ .actuator-card{ grid-template-columns:1fr 1fr; } }
|
||||
|
||||
/* ─── Dock: shared card chrome ───────────────────────────────────────── */
|
||||
.dock-card{
|
||||
background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius-lg);
|
||||
box-shadow:var(--shadow-card); padding:18px 20px;
|
||||
}
|
||||
.dock-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
|
||||
.dock-card-head h2{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); }
|
||||
|
||||
/* ─── Ledger ──────────────────────────────────────────────────────────── */
|
||||
.ledger-group{ display:flex; flex-direction:column; }
|
||||
.ledger-row{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
|
||||
.ledger-row:last-child{ border-bottom:none; }
|
||||
.l-fid{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-3); background:var(--surface-sunken); border-radius:4px; padding:1px 4px; flex:0 0 auto; }
|
||||
.l-label{ font-size:12.5px; color:var(--ink-2); flex:1 1 auto; }
|
||||
.l-val{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); text-align:right; min-width:52px; }
|
||||
.ledger-input{
|
||||
width:60px; text-align:right; font-family:var(--font-mono); font-size:13px; font-weight:600;
|
||||
padding:4px 7px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-sunken); color:var(--ink);
|
||||
}
|
||||
.ledger-input:focus{ outline:none; border-color:var(--ember); box-shadow:0 0 0 3px var(--ember-soft); background:var(--surface-raised); }
|
||||
.ledger-total{
|
||||
display:flex; align-items:baseline; justify-content:space-between;
|
||||
margin:10px 0; padding-top:8px; border-top:1.5px solid var(--ink);
|
||||
}
|
||||
.ledger-total span{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); }
|
||||
.ledger-total output{ font-family:var(--font-serif); font-size:26px; font-weight:600; color:var(--ink); }
|
||||
.ledger-total.drop{ border-top:none; margin-top:4px; padding-top:10px; background:var(--ember-soft); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:0; }
|
||||
.ledger-total.drop span{ color:var(--ember-strong); }
|
||||
.ledger-total.drop output{ color:var(--ember-strong); font-size:30px; }
|
||||
|
||||
.ledger-info{
|
||||
display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 16px;
|
||||
padding:8px 10px; border-left:2px solid var(--line-strong); background:var(--surface-sunken); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
|
||||
}
|
||||
.info-pill{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-2); }
|
||||
.info-pill span{ color:var(--ink-3); }
|
||||
.info-pill output{ font-family:var(--font-mono); font-weight:600; }
|
||||
.info-note{ font-size:10px; color:var(--ink-3); flex-basis:100%; }
|
||||
|
||||
/* ─── Sanity checks ───────────────────────────────────────────────────── */
|
||||
.checks-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
|
||||
.check-tile{
|
||||
border:1px solid var(--line); border-radius:var(--radius-md); padding:10px 12px;
|
||||
display:flex; flex-direction:column; gap:2px; position:relative;
|
||||
}
|
||||
.check-name{ font-size:10.5px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
|
||||
.check-value{ font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--ink); }
|
||||
.check-band{ font-size:10.5px; color:var(--ink-3); }
|
||||
.check-tile::before{
|
||||
content:""; position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%;
|
||||
background:var(--ink-3);
|
||||
}
|
||||
.check-tile.pass::before{ background:var(--pass); }
|
||||
.check-tile.fail::before{ background:var(--fail); }
|
||||
.check-tile.pass{ border-color:var(--pass-bg); background:var(--pass-bg); }
|
||||
.check-tile.fail{ border-color:var(--fail-bg); background:var(--fail-bg); }
|
||||
.check-tile.pass .check-value{ color:var(--pass); }
|
||||
.check-tile.fail .check-value{ color:var(--fail); }
|
||||
|
||||
/* ─── Curve card ──────────────────────────────────────────────────────── */
|
||||
.curve-legend{ display:flex; align-items:center; gap:10px; font-size:10.5px; color:var(--ink-3); text-transform:none; letter-spacing:0; font-weight:500; }
|
||||
.curve-legend .sw{ display:inline-block; width:12px; height:2px; margin-right:3px; vertical-align:middle; }
|
||||
.sw-plan{ background:var(--ink); }
|
||||
.sw-ref{ background:var(--ink-3); border-top:1px dashed var(--ink-3); background:none; height:0; border-bottom:1.5px dashed var(--ink-3); }
|
||||
.curve-wrap{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); }
|
||||
|
||||
/* ─── Print: hide the screen shell, show the paper worksheet ───────────── */
|
||||
#print-sheet{ display:none; }
|
||||
.pv{ display:none; }
|
||||
|
||||
@media print{
|
||||
.app-header, .drawer, .drawer-overlay, .workspace-grid{ display:none !important; }
|
||||
body{ background:#fff; }
|
||||
#print-sheet{ display:block; }
|
||||
.ws-input{ display:none !important; }
|
||||
.pv{ display:inline-block; min-width:inherit; border-bottom:.9pt solid var(--ink); }
|
||||
.opt input:checked + span{ border:.9pt solid var(--ink); background:none; color:var(--ink); border-radius:50%; padding:0 1.4mm; }
|
||||
td.passcell.pass::after, td.passcell.fail::after{ content:none; }
|
||||
td.passcell.pass::before{ content:"✓ "; }
|
||||
td.passcell.fail::before{ content:"✗ "; }
|
||||
}
|
||||
|
||||
/* ─── Legacy .opt styling reused by the (hidden-on-screen) print worksheet's own radios ── */
|
||||
.opt{ display:inline-block; cursor:pointer; margin-right:1.5mm; }
|
||||
.opt input{ position:absolute; opacity:0; width:0; height:0; }
|
||||
.opt span{ padding:0 .8mm; border-radius:3mm; }
|
||||
.opt input:checked + span{ background:#f6efe7; border:.9pt solid #7a3b12; color:#7a3b12; font-weight:700; }
|
||||
input.f, select.f{ border:none; border-bottom:.9pt solid #1a1512; background:transparent; font:inherit; height:4.2mm; padding:0 .5mm; color:#1a1512; }
|
||||
|
||||
Reference in New Issue
Block a user