/* workspace.css — Workspace-only styling layered on top of the shared /style.css design tokens. Nothing here overrides Operations; it only adds classes used by the Workspace SPA (public/workspace/app.js). */ /* restyle phase 1a, 2026-08-07 — three sweeps through this file: · control chrome (panel2 fill / text ink / 1px line border / radius) is now stated ONCE, by the global :where(input, select, textarea) rule in /style.css. Rules here keep only what DIFFERS from it — a --panel fill, a tighter radius, a size. Blocks marked "chrome from global control rule" are the ones that were nothing but the duplicate. · corner radii name their job (--r-ctl / --r-soft / --r-card) so a later phase can move a whole shape class at once. · ok/warn/bad/accent tints are color-mix on the token instead of a frozen rgba triplet, so they follow the theme. · type sizes that were already ON the scale name their step (--fs-micro … --fs-title). Only exact matches moved — the half-pixel sizes (10.5, 11.5, 12.5) are left alone rather than rounded onto the scale, because rounding them is a design decision, not a rename. The REPORT side (.rpt-* .pnl-* .spec-* .rk-* .vc-* and @media print) is untouched on purpose: its colours and sizes are paper-correct, not screen-correct, and must not follow a theme. The dense grids (.dev-c / .bom-c cells) are equally untouched — their inputs are DELIBERATELY chromeless and override the global on purpose. */ .ws-back { font-size: var(--fs-body-s); } /* Fluid: use the whole window (owner 2026-07-21) — wide grids benefit; a min keeps narrow windows scrolling instead of crushing the tables. */ /* The shared main element already carries the app padding (22px 24px 80px in style.css) — the wrapper must not add its own, or every Workspace page sits lower and narrower than the same page in Operations. */ .ws-wrap { max-width: none; margin: 0 auto; padding: 0; } .ws-crumbs { color: var(--dim); font-size: var(--fs-body-s); margin: 4px 0 18px; } .ws-crumbs a { color: var(--accent); text-decoration: none; } .ws-crumbs a:hover { text-decoration: underline; } .ws-crumbs .sep { margin: 0 7px; color: var(--line); } /* Project picker cards (mirror the Operations .mod-card feel). */ .ws-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .ws-proj { display: block; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 15px 16px; } .ws-proj:hover { border-color: var(--accent); } .ws-proj .code { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); } .ws-proj .name { font-size: var(--fs-lead); margin: 4px 0; } .ws-proj .meta { font-size: var(--fs-small); color: var(--dim); } .ws-proj .count { float: right; font-size: var(--fs-small); color: var(--dim); } /* Hierarchy tree. Indentation communicates Site → Venue → Area → Room. */ .ws-tree { margin-top: 6px; } .ws-node { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-soft); background: var(--panel); padding: 8px 10px; margin: 5px 0; } .ws-node.archived { opacity: .55; } .ws-node .kind { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 1px 6px; } .ws-node .nname { font-size: var(--fs-body); } .ws-node .ncode { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); } .ws-node .grow { flex: 1; } .ws-node .rowbtns { display: flex; gap: 4px; opacity: 0; transition: opacity .1s; } .ws-node:hover .rowbtns { opacity: 1; } .ws-node .rowbtns button { font-size: var(--fs-small); padding: 2px 8px; } .ws-node .rowbtns button:disabled { opacity: .3; cursor: default; border-color: var(--line); color: var(--dim); } /* Tier colours (see the .ws-depth-* colour rules at the very end of this file — they must come after .ws-leveldef / .ws-item-row so they win the left border). */ .ws-children { margin-left: 22px; border-left: 1px dashed var(--line); padding-left: 12px; } .ws-addbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 12px; } /* ONE grammar for every add row (owner 2026-08-25): pickers first, one primary ＋ button naming the noun, then the muted hint — and one PLACE: directly beneath the views bar (or the panel header where none), above the grid. The row is a CARD (his follow-up ruling): the same swept two-corner shape and nested fill the views bar wears, so the pair reads as siblings — the bar reads the table, the card feeds it. Fill and spacing only, no border, per the surface law. */ .ws-addbar { background: var(--surface-2); border-radius: var(--r-card); padding: 9px 14px; } .vw-bar + .ws-addbar { margin-top: -6px; } .ws-add-hint { font-size: var(--fs-small); } /* chrome from global control rule (restyle phase 1a, 2026-08-07) */ .ws-addbar input, .ws-addbar select { padding: 6px 8px; font-size: var(--fs-body-s); } /* A SELECT SIZES ITSELF TO ITS LONGEST OPTION, and nothing bounds what a person may call a zone: `clean()` trims a name and does not cap it. A pasted paragraph became a 2,691px dropdown that pushed the whole Device Schedule into horizontal scroll -- measured 2026-09-10 at a 1,425px viewport, overflowing by 1,320px. The failure to fix is the PAGE scrolling sideways, not the select being wide, so the bound is the bar rather than a number. A fixed cap was tried first and rejected: 260px clipped an ordinary 42-character device name that wants 281px. `min-width: 0` is the half that does the work -- without it a flex item refuses to shrink below its content and overflows anyway. */ .ws-addbar select { max-width: 100%; min-width: 0; } .ws-addbar .primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .ws-hint { color: var(--dim); font-size: var(--fs-small); } /* Per-project level names (depth labels). */ .ws-levels { margin: 12px 0 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-soft); background: var(--panel); } .ws-levels-h { font-size: var(--fs-small); color: var(--dim); margin-bottom: 8px; } .ws-levels-h .muted { opacity: .8; } .ws-levels-row { display: flex; flex-wrap: wrap; gap: 10px; } .ws-level { display: flex; align-items: center; gap: 6px; } .ws-level-n { font-family: var(--mono); font-size: var(--fs-mini); color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 1px 6px; } .ws-level-name { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 5px 8px; font-size: var(--fs-body-s); width: 150px; } .ws-level-name:disabled { opacity: .6; } .ws-readonly { color: var(--dim); font-size: var(--fs-small); border: 1px dashed var(--line); border-radius: var(--r-soft); padding: 8px 12px; margin: 10px 0; } /* Future-slice placeholders — clearly disabled, signal direction only. */ .ws-future { margin-top: 30px; } .ws-future h3 { color: var(--dim); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; } .ws-future .row { display: flex; gap: 10px; flex-wrap: wrap; } .ws-future .chip { border: 1px dashed var(--line); border-radius: var(--r-soft); padding: 8px 12px; color: var(--dim); font-size: var(--fs-body-s); opacity: .7; cursor: not-allowed; } /* One empty-state voice across the suite (owner 2026-08-08): same ink, type size, line-height and breathing room as Operations' .empty-state (style.css) — an empty region is a sentence, not a greyed-out shrug. NOT flex like its Operations twin: Workspace call sites are inline sentences (with and .ws-empty-go mid-flow), and flex would fragment them. */ .ws-empty { color: var(--dim); font-size: var(--fs-body-s); line-height: 1.5; padding: 18px 4px; max-width: 62ch; } /* The FILTERED-empty block (lib-filtered.js) — one shape in both apps; see the twin rule in style.css. */ .flt-empty { color: var(--dim); font-size: var(--fs-body-s); line-height: 1.5; padding: 18px 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .flt-empty strong { color: var(--text-2); font-weight: 600; font-size: var(--fs-body); } .flt-empty .flt-why { color: var(--dim); max-width: 58ch; } .ws-err { color: var(--bad); } /* The NIC panel's one-line scope heading: which level's ports these are. */ .nic-scope-h { font-size: var(--fs-mini); padding: 2px 0 4px; } /* Panels (Level Definition, Items). */ .ws-panel { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); padding: 14px 16px; margin: 14px 0; } .ws-panel-h { font-size: var(--fs-body-s); font-weight: 600; margin-bottom: 10px; } .ws-panel-h .muted { color: var(--dim); font-weight: 400; } /* Level definition rows — each stacks and indents to show the hierarchy, and carries the same tier colour as the matching zone level. left-stripe sweep, 2026-08-07: that colour used to be a 3px left border. It is now `--lvc` (see the ramp near the foot of this file, or an inline value from app.js) spent as a wash leading from the left edge, plus the level's colour tinting the whole border instead of one side of it. `background-color` + `background-image` rather than the `background` shorthand so the two are separate layers — the zone drag states restate the colour layer only. */ .ws-leveldef { display: flex; flex-direction: column; gap: 6px; margin: 5px 0; padding: 6px 8px; border-radius: var(--r-soft); border: 1px solid color-mix(in srgb, var(--lvc, var(--line)) 45%, var(--line)); border-top-color: var(--edge-hi-soft); background-color: var(--panel2); background-image: linear-gradient(90deg, color-mix(in srgb, var(--lvc, transparent) 14%, transparent), color-mix(in srgb, var(--lvc, transparent) 4%, transparent) 55%, transparent); } .ld-main { display: flex; align-items: center; gap: 6px; } /* 2nd row indented so the card reads more easily. */ .ld-cfg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--dim); margin-left: 30px; } .ld-cfg label { color: var(--dim); } /* --panel, not the global's --panel2: these sit ON a --panel2 card. */ .ld-sel { background: var(--panel); padding: 3px 6px; font-size: var(--fs-small); } .ld-chk { display: inline-flex; align-items: center; gap: 3px; } .ld-sep, .ld-seplabel { opacity: .7; } .ld-sepinput { width: 34px; text-align: center; } .ld-preview { font-family: var(--mono); font-size: var(--fs-mini); color: var(--accent); margin-left: 4px; border: 1px dashed var(--line); border-radius: var(--r-ctl); padding: 2px 6px; } .ld-group-label { color: var(--dim); font-weight: 600; min-width: 78px; } .ld-attrs { row-gap: 8px; } /* Area lives in a single combined box (checkbox + calc method). */ .ld-attr-box { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 3px 8px; background: var(--panel); } /* Each catalog attribute is a toggle chip; highlighted when tracked. */ .ld-attr-chk { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 3px 8px; background: var(--panel); color: var(--text); cursor: pointer; } .ld-attr-chk:has(input:checked) { border-color: var(--accent); color: var(--text); } .ld-sel:disabled { opacity: .45; } /* Zone attribute value controls. */ /* chrome from global control rule (restyle phase 1a, 2026-08-07) */ .zn-attr { font-size: var(--fs-small); padding: 4px 6px; flex: none; } .zn-attr[type="checkbox"] { border: none; background: none; padding: 0; } .zn-attr-text { width: 88px; } .zn-attr-sel { max-width: 132px; } /* Wider than the other attribute pulldowns because its options carry a name AND an address ("AV-R01 · 10.1.0.106"), and a controller truncated to its first eight characters is not a controller you can pick between. */ .zn-ctl-sel { max-width: 186px; } .zn-attr:focus { border-color: var(--accent); outline: none; } .zn-attr-wrap { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-mini); color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 3px 6px; background: var(--panel2); white-space: nowrap; flex: none; } .zn-ceiling { display: inline-flex; gap: 3px; align-items: center; flex: none; } .ws-lvl-n { font-family: var(--mono); font-size: var(--fs-mini); color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 1px 6px; } /* The rank is TYPEABLE inside the L badge: same mono voice, two digits wide, no chrome of its own — the badge is the chrome. */ .ws-lvl-n .ld-rank { width: 2ch; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; text-align: center; } .ws-lvl-n .ld-rank:focus { outline: none; color: var(--text); } /* --panel, not the global's --panel2: these sit ON a --panel2 card. */ .ld-f { background: var(--panel); padding: 5px 8px; font-size: var(--fs-body-s); } .ld-f[data-f="name"] { min-width: 150px; font-weight: 600; } .ld-btns { display: flex; gap: 4px; margin-left: auto; } .ld-btns button { font-size: var(--fs-small); padding: 2px 8px; } .ld-btns button:disabled { opacity: .3; cursor: default; } .ld-btns button[data-lact="del"]:hover { border-color: var(--bad); color: var(--bad); } .ws-examples { color: var(--dim); font-size: var(--fs-body-s); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ws-examples .ex { font-size: var(--fs-small); padding: 4px 10px; border-radius: var(--r-ctl); } .ws-examples .ex:hover { border-color: var(--accent); color: var(--text); } .ws-examples .ex.ws-danger { margin-left: auto; } .ws-examples .ex.ws-danger:hover { border-color: var(--bad); color: var(--bad); } /* chrome from global control rule (restyle phase 1a, 2026-08-07) */ .dt-tpl-select { font-size: var(--fs-small); padding: 3px 6px; } .ws-addlevel, .ws-additem { margin-top: 10px; } /* chrome from global control rule (restyle phase 1a, 2026-08-07) */ .ws-addlevel input, .ws-additem input, .ws-additem select { padding: 6px 8px; font-size: var(--fs-body-s); } /* Zones — an aligned editable grid. The coded name lives in a fixed-width gutter and indents to show hierarchy, so every following column lines up. */ .ws-scroll { overflow-x: auto; } /* THE HEADING IS LIFTED OUT OF THE SCROLLER (owner 2026-08-31: headings "should stick on-screen, remaining visible until the last row is about to scroll off-screen"). A sticky heading pins to its nearest SCROLLING ancestor, and `overflow-x:auto` already makes every one of these boxes a scroll container in BOTH axes, so a heading inside one can never pin to the page however it is styled. `overflow-y: clip` was tried first, to leave the page as the scroller: it computes to `hidden`, the box stays a scroll container, and the heading is captured exactly as before. Capping the pane at the window height was tried second: with ~482px of chrome above a Workspace grid the page can still over-scroll and carry the pane and its heading off the top, and making the pane sticky does not help, because its containing block is exactly its own height and it has no room to move. So the heading is moved into a RAIL of its own, a sibling above the pane which is not a scroll container in the vertical axis and therefore pins to the page. The page goes on being the vertical scroller, nothing is capped, and no grid loses height. `wsFloatHeads` keeps the rail's horizontal offset equal to the pane's, so the columns stay lined up while the grid scrolls sideways. The rail carries the SAME CLASSES as its pane, so every `.sched-table .bom-c`-shaped rule in this file goes on matching a heading cell that now lives somewhere else. */ .ws-headrail.ws-scroll { position: sticky; top: var(--topbar-h, 57px); z-index: 5; overflow-x: hidden; overflow-y: hidden; max-height: none; background: var(--panel); } .ws-headrail .bom-head, .ws-headrail .dev-head { margin-bottom: 0; } /* left-stripe sweep, 2026-08-07 — same conversion as .ws-leveldef above; a zone row and its level definition must go on wearing the same mark. */ /* A SELECT AND AN INPUT DO NOT AGREE ON THEIR OWN HEIGHT. The shared rule in style.css gives every control the same fill, border and radius but no height, so a native select renders shorter than a text input beside it — 23px against 28px on this row, which reads as one field sagging in a row of them. Pinned together here, the same way .nic-row already does it. Found by measuring the rendered heights of neighbouring controls, 2026-08-13. */ .ws-item-row :where(input:not([type=checkbox]):not([type=radio]), select) { height: 28px; } .ws-item-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 5px 8px; border-radius: var(--r-soft); border: 1px solid color-mix(in srgb, var(--lvc, var(--line)) 45%, var(--line)); border-top-color: var(--edge-hi-soft); background-color: var(--panel); background-image: linear-gradient(90deg, color-mix(in srgb, var(--lvc, transparent) 14%, transparent), color-mix(in srgb, var(--lvc, transparent) 4%, transparent) 55%, transparent); } .zn-drag { cursor: grab; color: var(--dim); font-size: var(--fs-body); user-select: none; width: 14px; text-align: center; } .zn-drag:active { cursor: grabbing; } .zn-drag-sp { width: 14px; } /* ---- dragging a zone (owner 2026-08-04) --------------------------------- The move is spelled out while it is still a proposal. Three states, and they must be distinguishable at a glance: .zn-can-drop — a legal destination, lit the moment you pick a zone up .zn-drop-ok — the one you are over .zn-drop-no — a row you cannot nest under, and why Rows that are neither recede, so the legal landing places are what is left to look at. */ .zn-drag-active .ws-item-row { transition: opacity .12s, box-shadow .12s; } .zn-drag-active .ws-item-row:not(.zn-can-drop):not(.zn-dragging):not(.zn-drop-no) { opacity: .38; } .zn-drag-active .zn-drag { cursor: grabbing; } /* Legal destination — a quiet standing invitation, not a shout. */ .ws-item-row.zn-can-drop { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* The one under the pointer. */ .ws-item-row.zn-drop-ok { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); opacity: 1; } /* A row that cannot take it. Red, but flat — it is a "no", not an error. */ .ws-item-row.zn-drop-no { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 60%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); opacity: 1; cursor: not-allowed; } /* The zone being carried, and the subtree coming with it. */ .ws-item-row.zn-dragging { opacity: .45; box-shadow: inset 0 0 0 1px var(--accent2); } /* left-stripe sweep, 2026-08-07: the subtree coming along was marked by a 2px amber inset bar. Same amber, same "it is coming with", now a wash leading from the left edge — and it replaces the row's LEVEL wash for the duration of the drag, which is correct: while a move is being proposed, what matters is what is moving, not what level it is. THE FIVE DRAG STATES STILL READ APART, measured in the running app after the change, not assumed: .zn-can-drop 1px accent ring, faint accent fill, opacity 1 .zn-drop-ok 2px accent ring, strong accent fill .zn-drop-no 1px red ring, red fill, not-allowed cursor .zn-dragging amber RING over the row's own level wash, opacity .45 .zn-kin amber WASH, no ring, opacity .38 dragging and kin are the closest pair and were already distinguished by ring-vs-bar; they are now distinguished by ring-vs-wash, which is a larger difference than the one it replaces, not a smaller one. THE `opacity: .5` BELOW HAS NEVER RENDERED, and is left exactly as found. `.zn-drag-active .ws-item-row:not(.zn-can-drop):not(.zn-dragging):not(.zn-drop-no)` is (0,5,0) against this rule's (0,2,0), so a kin row has always dimmed to .38 with it. Pre-existing, unrelated to stripes, and not silently repaired inside a paint change — flagged, not touched. */ .ws-item-row.zn-kin { opacity: .5; background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 20%, transparent), color-mix(in srgb, var(--accent2) 6%, transparent) 55%, transparent); } /* The caption: what the drop will actually do, in words. */ .zn-dragcap { display: flex; align-items: center; gap: 8px; min-height: 30px; margin: 0 0 8px; padding: 6px 12px; border-radius: var(--r-soft); font-size: var(--fs-body-s); background: var(--panel2); color: var(--dim); border: 1px solid var(--line); } .zn-dragcap[hidden] { display: none; } .zn-dragcap b { color: var(--text); font-weight: 600; } .zn-dragcap[data-state="ok"] { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); } .zn-dragcap[data-state="no"] { border-color: color-mix(in srgb, var(--bad) 60%, transparent); color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); } /* "Top level" as a target you can aim at, rather than whatever empty pixels happen to sit below the last row. Only present during a drag. */ .zn-rootdrop { display: none; margin: 8px 2px 2px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-soft); color: var(--dim); font-size: var(--fs-body-s); text-align: center; } .zn-drag-active .zn-rootdrop { display: block; } .zn-rootdrop.zn-drop-ok { border-style: solid; border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); } @media (prefers-reduced-motion: reduce) { .zn-drag-active .ws-item-row { transition: none; } } .zn-collapse { flex: none; width: 20px; padding: 0; background: transparent; border: 1px solid transparent; color: var(--dim); font-size: var(--fs-mini); border-radius: 5px; } .zn-collapse:hover { border-color: var(--line); color: var(--text); } .zn-collapse-sp { flex: none; width: 20px; } .zn-pd { display: inline-flex; gap: 4px; align-items: center; flex: none; } .zn-gutter { flex: none; min-width: 96px; } .zn-coded { display: inline-block; font-family: var(--mono); font-size: var(--fs-small); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 3px 7px; white-space: nowrap; } .ld-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; } /* Coded-name colour matches its level's colour (inline when a level is assigned; these depth rules are the fallback) — LTC brand order (owner 2026-07-23): Yellow, Red, Blue lead, then Green, then the rest. */ /* Named through the shared --ramp-* ladder so Workspace depths and Operations phase tiers draw from one palette (owner 2026-08-07) — same colours as the brand order above, just aliased. */ .ws-depth-0 .zn-coded { color: var(--ramp-3); border-color: var(--ramp-3); } .ws-depth-1 .zn-coded { color: var(--ramp-5); border-color: var(--ramp-5); } .ws-depth-2 .zn-coded { color: var(--ramp-0); border-color: var(--ramp-0); } .ws-depth-3 .zn-coded { color: var(--ramp-4); border-color: var(--ramp-4); } .ws-depth-4 .zn-coded { color: var(--ramp-1); border-color: var(--ramp-1); } .ws-depth-5 .zn-coded { color: var(--ramp-2); border-color: var(--ramp-2); } /* Compact level select — reads like a label until hovered/focused. */ /* WIDE ENOUGH FOR THE NAME THE PROJECT USES. 92px was measured against the level names this app ships with (Site, Land, Building, Room); a project that calls a level "Segment" got SEGMEN and a cut-off arrow (owner 2026-09-07). Levels are named by whoever sets the project up, so the width follows the longest name rather than a number somebody guessed, with a floor so short names still line up and a ceiling so one long name cannot push the rest of the row off the screen. */ .zn-lvl-sel { flex: none; width: auto; min-width: 92px; max-width: 200px; background: transparent; border: 1px solid transparent; color: var(--dim); font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .04em; border-radius: var(--r-ctl); padding: 3px 4px; } .zn-lvl-sel:hover, .zn-lvl-sel:focus { border-color: var(--line); color: var(--text); outline: none; } /* chrome from global control rule (restyle phase 1a, 2026-08-07) */ .zn-f { padding: 5px 7px; font-size: var(--fs-body-s); } .zn-f:focus { border-color: var(--accent); outline: none; } .zn-name-in { flex: none; width: 210px; } .zn-code-in { flex: none; width: 90px; } .zn-size, .zn-size-ro { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; width: 120px; } .zn-size-in { width: 64px; } .zn-size-ro { color: var(--dim); font-family: var(--mono); font-size: var(--fs-small); } .zn-size .unit, .zn-size-ro .unit { color: var(--dim); font-size: var(--fs-mini); } /* Units engine adornment: the small, light, gray unit shown beside a value ($, sq ft, W, V, lbs…) in read-only cells and as an input suffix. */ .u-tag { color: var(--dim); font-size: var(--fs-mini); font-weight: 400; margin-left: 3px; white-space: nowrap; } /* An input paired with its unit suffix. */ .u-field { display: inline-flex; align-items: baseline; gap: 3px; } .u-field .u-tag { margin-left: 0; } .ws-item-row .grow { flex: 1; min-width: 8px; } .ws-item-row .rowbtns { display: flex; gap: 4px; } .ws-item-row .rowbtns button { font-size: var(--fs-small); padding: 2px 8px; } .ws-item-row .rowbtns button[data-act="del"]:hover { border-color: var(--bad); color: var(--bad); } /* Attribute option-list editors (Settings tab). */ .ao-head { display: flex; gap: 8px; color: var(--dim); font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0; } .ao-head .ao-hcell { flex: 1; } .ao-head .ao-hdel { flex: none; width: 28px; } .ao-row { display: flex; gap: 8px; align-items: center; margin: 4px 0; } /* chrome from global control rule (restyle phase 1a, 2026-08-07) */ .ao-f { flex: 1; padding: 6px 8px; font-size: var(--fs-body-s); } .ao-f:focus { border-color: var(--accent); outline: none; } .ao-del { flex: none; width: 28px; font-size: var(--fs-body-s); padding: 4px 0; } .ao-del:hover { border-color: var(--bad); color: var(--bad); } .ao-add { margin-top: 8px; font-size: var(--fs-body-s); } /* One panel, several catalog sub-sections. */ .ao-cat { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 10px; } .ao-cat:first-of-type { border-top: none; margin-top: 4px; } .ao-cat-h { font-weight: 600; font-size: var(--fs-body-s); margin-bottom: 8px; } .ao-cat .ao-row { max-width: 720px; } /* Power Density hierarchy: Code → room types → W/sq ft. */ .pd-code { border: 1px solid var(--line); border-radius: var(--r-soft); padding: 10px 12px; margin: 8px 0; background: var(--panel2); } .pd-code-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } /* --panel, not the global's --panel2: these sit ON a --panel2 card. */ .pd-code-in { background: var(--panel); padding: 6px 8px; font-size: var(--fs-body-s); font-family: var(--mono); width: 160px; } .pd-code-del { flex: none; width: 28px; } .pd-code-del:hover { border-color: var(--bad); color: var(--bad); } .pd-rooms { margin-left: 16px; border-left: 1px dashed var(--line); padding-left: 12px; } .pd-rhead { display: flex; gap: 8px; color: var(--dim); font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .pd-rhead span:nth-child(1) { width: 200px; } .pd-rhead span:nth-child(2) { width: 140px; } .pd-room { display: flex; gap: 8px; align-items: center; margin: 4px 0; } .pd-room-in { background: var(--panel); padding: 6px 8px; font-size: var(--fs-body-s); } .pd-room-in[data-f="area_type"] { width: 200px; } .pd-room-in[data-f="w_sqft"] { width: 140px; } .pd-room-in:focus { border-color: var(--accent); outline: none; } .pd-room-del { flex: none; width: 28px; } .pd-room-del:hover { border-color: var(--bad); color: var(--bad); } .pd-room-add, .pd-code-add { margin-top: 6px; font-size: var(--fs-body-s); } /* Units (folded into Setup) + misc */ .ws-units { display: flex; gap: 34px; flex-wrap: wrap; align-items: center; } .ws-set-row { display: flex; align-items: center; gap: 10px; } .ws-set-row > label { color: var(--dim); font-size: var(--fs-body-s); } /* Settings dropdowns (electrical service) — compact, matches the panel. */ /* chrome from global control rule (restyle phase 1a, 2026-08-07) */ .ws-set-select { padding: 5px 8px; font-size: var(--fs-body-s); } .ws-set-select:disabled { opacity: .6; } /* Force a settings row onto its own line within the wrapping .ws-units flow. */ .ws-set-break { flex-basis: 100%; } /* Parked on a literal in phase 1a because 10px was neither the control radius nor the card radius; joined to --r-ctl now that the control radius IS the pill this chip was always trying to be. (restyle phase 1b, 2026-08-07) */ .ws-ro-tag { font-size: var(--fs-mini); color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 2px 8px; text-transform: uppercase; letter-spacing: .05em; } .tabs button.ws-tab-dev { color: var(--dim); opacity: .5; cursor: not-allowed; } /* Device Types (Setup panel). */ /* THE ONE TRACK DEFINITION for Device Categories. The heading row and every data row are the same grid, so a label can never again sit over the wrong column -- there is nowhere to write a width twice. Category takes the slack and has a real floor, because the names are long ("FIXTURE - LIGHTING EFFECT") and were being truncated (owner 2026-08-28). */ /* ONE grid for the whole table, not one per row. Two content-sized tracks (the QC boxes, the row buttons) can only resolve to the same width if every row is measured together, so the heading and the rows are `display: contents` and their cells are all items of THIS grid. Separate grids per row gave the heading its own answer and put every label over the wrong column. */ .dt-table { display: grid; grid-template-columns: 92px minmax(300px, 1fr) 176px max-content max-content; gap: 6px 8px; align-items: center; } .dt-grid { display: contents; } .dt-head > span { color: var(--dim); font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .04em; align-self: end; } /* Every control in the row fills its own track, and an input and a select must be the SAME pill: a native select is intrinsically taller than a padded input, which read as two different shapes side by side (his third note the same day). Height is stated once for both; the select keeps room for its own arrow. */ .dt-row .dt-f { height: 32px; box-sizing: border-box; width: 100%; min-width: 0; } .dt-row select.dt-f { padding-right: 24px; } /* chrome from global control rule (restyle phase 1a, 2026-08-07) */ .dt-f { padding: 6px 8px; font-size: var(--fs-body-s); } .dt-letter { text-align: center; font-family: var(--mono); font-weight: 600; } .dt-f:focus { border-color: var(--accent); outline: none; } .dt-btns { display: flex; gap: 4px; } .dt-btns button { font-size: var(--fs-small); padding: 2px 8px; } .dt-btns button:disabled { opacity: .3; cursor: default; } .dt-del:hover { border-color: var(--bad); color: var(--bad); } /* Device List table (horizontally scrollable, quick inline edit). */ .dev-table { overflow-x: auto; padding-bottom: 6px; } .dev-row { display: flex; align-items: stretch; width: max-content; } /* Hover fill: see the GRID VOICE block at the foot of this file. Removed from here rather than overridden there — as a `background` shorthand it would keep resetting background-color under the new lift and erase the fills the lift is meant to stack on. */ .dev-head { border-bottom: 1px solid var(--line); margin-bottom: 2px; } .dev-head .dev-c { color: var(--dim); font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; padding: 6px; } /* Layout skeleton only. The cell/button chrome (padding, borders, focus paint, gutter width) is owned by the Spreadsheet-tight grids block below (~line 543, owner 2026-07-21); overlapping declarations were removed from here rather than left shadowed (2026-08-08 audit). */ .dev-actions { flex: none; display: flex; gap: 3px; align-items: center; } .dev-actions button.dev-del:hover { border-color: var(--bad); color: var(--bad); } .dev-c { flex: none; width: 134px; box-sizing: border-box; } /* Fallback only. Device Type / Category are resizable like every other column, so app.js writes an inline width on each one from the user's stored widths (LEAD_COLS in renderDevices); these values are its starting defaults and must match. A width fixed HERE alone is what made them the only two columns on the page that could not be dragged. */ .dev-c.dev-code { width: 92px; } .dev-c.dev-type { width: 122px; } .dev-c.dev-chk { width: 66px; justify-content: center; } .dev-cell, .dev-a { width: 100%; background: var(--panel2); color: var(--text); font-size: var(--fs-small); box-sizing: border-box; } .dev-code .dev-cell { font-family: var(--mono); } .dev-cell:focus, .dev-a:focus { outline: none; } .dev-chk .dev-a { width: auto; } /* Code validation: duplicate codes are red; a code that doesn't start with its Type's letter is orange. Applied live client-side; !important so the flag survives :focus while typing. */ .dev-cell.dev-code-dup { border-color: var(--bad) !important; background: color-mix(in srgb, var(--bad) 18%, transparent); } .dev-cell.dev-code-badtype { border-color: var(--warn) !important; background: color-mix(in srgb, var(--warn) 18%, transparent); } /* Column-group header row (labeled, collapsible). */ .dev-grouprow .dev-actions, .dev-grouprow .dev-code, .dev-grouprow .dev-type { } /* Group header spans exactly its columns: box-border width, no margin, and a right divider drawn as an inset shadow so it never adds width. */ .dev-grouphdr { flex: none; box-sizing: border-box; display: flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: var(--fs-small); font-weight: 600; color: var(--text); overflow: hidden; background: var(--panel2); border-bottom: 1px solid var(--line); box-shadow: inset -1px 0 0 var(--line); } .dev-grpbtn { flex: none; width: 18px; padding: 0; background: transparent; border: 1px solid transparent; color: var(--dim); font-size: var(--fs-mini); border-radius: 4px; } .dev-grpbtn:hover { border-color: var(--line); color: var(--text); } .dev-grouphdr.dev-grp-collapsed { width: 76px; } .dev-grp-collapsed .dev-grp-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-weight: 500; font-size: var(--fs-mini); } .dev-grp-collapsed-col { flex: none; width: 76px; box-sizing: border-box; } /* Device List filter bar. */ .dev-filters { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; } /* A label and the control it names are one thing. Without this the filter row wraps between "Sort" and its pull-down, leaving a caption stranded at the end of one line and its control at the start of the next. */ .dev-fgrp { display: inline-flex; align-items: center; gap: 6px; } /* chrome from global control rule (restyle phase 1a, 2026-08-07) — the filter bar sits ABOVE the grid, so unlike the cells inside it these keep chrome. */ .dev-filters input, .dev-filters select { padding: 6px 8px; font-size: var(--fs-body-s); } .dev-filters #dev-q { min-width: 220px; } .dev-filters input:focus, .dev-filters select:focus { border-color: var(--accent); outline: none; } /* Tier colours. Row colours follow the LTC brand order and are the FALLBACK — a level with an explicit colour has it applied inline by app.js, and that wins. Aliased to the shared --ramp-* ladder (owner 2026-08-07) — colours unchanged. ON THE POSITION OF THESE RULES (left-stripe sweep, 2026-08-07). They used to have to sit LAST in the file, and the old comment said so: they set the `border-left-color` LONGHAND, while .ws-leveldef / .ws-item-row set the `border` SHORTHAND, and between two declarations of equal specificity the later one wins — so being last was the whole reason the tier colour survived at all. That constraint is GONE. These rules now set a custom property, `--lvc`, and the three carriers read it. Source order no longer decides anything: an inline `--lvc` from app.js beats a class's by specificity, not by position, and no shorthand anywhere can overwrite a custom property. THEY STAY HERE ANYWAY. The contract test pins .ws-depth-0 and .ws-depth-5 and the six-colour ramp is one of the most-read things in this file; moving a block whose only remaining reason to move is tidiness buys nothing and costs every future reader their memory of where it lives. What changed is the REASON, and the reason is what a comment is for — this block is no longer fragile to reordering, so do not restore the old warning if the rules do get moved someday. */ .ws-depth-0 { --lvc: var(--ramp-3); } .ws-depth-1 { --lvc: var(--ramp-5); } .ws-depth-2 { --lvc: var(--ramp-0); } .ws-depth-3 { --lvc: var(--ramp-4); } .ws-depth-4 { --lvc: var(--ramp-1); } .ws-depth-5 { --lvc: var(--ramp-2); } /* A row with no level: no wash, and a plain neutral border. --lvc is restated as transparent rather than left unset because the carriers' fallback only applies when the property is MISSING, and the border is restated outright because `color-mix(transparent 45%, var(--line))` would have quietly served a 55%-strength line instead of the real one. */ .ws-noleveledge { --lvc: transparent; border-color: var(--line); border-top-color: var(--edge-hi-soft); } /* Bill of Materials tab (horizontally scrollable; a band per device). */ .bom-table { overflow-x: auto; padding-bottom: 6px; } .bom-row { display: flex; align-items: stretch; width: max-content; } /* Hover fill: see the GRID VOICE block at the foot of this file (same reason as .dev-row above — the shorthand was erasing .bom-primary-row's mark). */ .bom-head { border-bottom: 1px solid var(--line); margin-bottom: 2px; } .bom-head .bom-c { color: var(--dim); font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; padding: 6px; } .bom-actions { flex: none; width: 62px; display: flex; gap: 3px; align-items: center; padding: 3px 4px; } .bom-actions button { font-size: var(--fs-small); padding: 2px 6px; } .bom-actions button.bom-del:hover { border-color: var(--bad); color: var(--bad); } .bom-c { flex: none; padding: 2px 3px; box-sizing: border-box; } .bom-f { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 5px 6px; font-size: var(--fs-small); box-sizing: border-box; } .bom-f:focus { border-color: var(--accent); outline: none; } .bom-f.bom-num { text-align: right; font-family: var(--mono); } .bom-c.bom-ro { display: flex; align-items: center; font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); padding: 5px 6px; white-space: nowrap; } /* device band: code + category + count + subtotal + add */ .bom-band { display: flex; align-items: center; gap: 10px; width: max-content; min-width: 100%; background: var(--panel2); border-top: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin-top: 10px; font-size: var(--fs-body-s); position: sticky; left: 0; } .bom-band .bom-devcode { font-family: var(--mono); font-weight: 700; } .bom-band .bom-count { font-size: var(--fs-small); } .bom-band .bom-devtotal { font-family: var(--mono); font-size: var(--fs-small); margin-left: auto; } .bom-band .bom-add { font-size: var(--fs-small); padding: 2px 9px; border-radius: var(--r-ctl); } .bom-band .bom-add:hover { border-color: var(--accent); color: var(--text); } .bom-total { font-size: var(--fs-body-s); margin-bottom: 8px; } .bom-total strong { font-family: var(--mono); } /* BOM Summary display: one row per device type (BOM × Qty scheduled), then the footer walk — subtotal, contingency, inflation, tax, total. */ .bom-sum-row .bom-c { display: flex; align-items: center; padding: 5px 6px; font-size: var(--fs-small); white-space: nowrap; } .bom-sum-row .bom-sum-n { font-family: var(--mono); justify-content: flex-end; } .bom-sum-flag { font-family: var(--sans); font-size: var(--fs-mini); color: var(--warn, var(--bad)); border: 1px solid currentColor; border-radius: var(--r-ctl); padding: 0 7px; margin-left: 6px; } .bom-sum-foot { margin-top: 14px; border-top: 2px solid var(--line); width: max-content; min-width: 100%; position: sticky; left: 0; } .bom-sum-frow { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); } .bom-sum-flabel { flex: none; width: 130px; font-weight: 600; } .bom-sum-fctl { flex: none; width: 420px; display: flex; align-items: center; gap: 6px; } .bom-sum-fctl .bs-f { width: auto; } /* Same coat as .bom-f, its OWN class: the shared BOM cell wiring must never catch these (they commit a whole object, not a line PATCH). */ .bs-f { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; font-size: var(--fs-small); box-sizing: border-box; font-family: var(--mono); text-align: right; } .bs-f:focus { border-color: var(--accent); outline: none; } select.bs-f, .bs-f[data-bs="tax_note"] { font-family: var(--sans); text-align: left; } .bom-sum-famt { flex: none; width: 130px; font-family: var(--mono); text-align: right; justify-content: flex-end; display: flex; } .bom-sum-frange { flex: none; width: 210px; font-family: var(--mono); text-align: right; justify-content: flex-end; display: flex; } .bom-sum-sub .bom-sum-famt, .bom-sum-total .bom-sum-famt { font-weight: 700; } .bom-sum-total { border-top: 1px solid var(--line); border-bottom: none; font-size: var(--fs-body-s); } /* Device List: sort/group controls, resizable columns, group bands, exports. */ .dev-head .dev-c { position: relative; } .dev-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; } .dev-grip:hover { background: var(--accent); opacity: .5; border-radius: 2px; } .dev-band { display: flex; align-items: center; gap: 10px; width: max-content; min-width: 100%; background: var(--panel2); border-top: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; margin-top: 8px; font-size: var(--fs-body-s); position: sticky; left: 0; } .dev-band .muted { font-size: var(--fs-small); } .dev-filters select { max-width: 220px; } #dev-sortdir { padding: 4px 8px; font-size: var(--fs-mini); } /* export links (CSV/XLSX) in a panel header */ /* export button pair — same look as LTC Operations (button.small.ghost) */ .ws-export { float: right; display: inline-flex; gap: 6px; } /* BOM primary-device line: quiet emphasis */ /* Was a frozen 7% of brand blue #3777bc, which is the LIGHT theme's accent — on dark it no longer matched the accent ink on the row beside it. Mixed from --accent, so the wash follows whichever blue the theme is using. (restyle phase 1a, 2026-08-07) */ .bom-primary-row { background: color-mix(in srgb, var(--accent) 7%, transparent); } /* NOT ACCENT INK (owner, 2026-08-17: "why would this text be blue? it's generated, but I don't think it is referencing"). He was right, and the collision is close enough to be unfair: --accent is #649cd8 and the borrowed-cell convention's --calc is #5b9bd5, so a label meaning "this is the auto line" was wearing the colour that means "this value is followed from somewhere else". Worse, the cells BESIDE it genuinely are windows onto the Device List and were made plain in v0.155.0 — leaving the one cell that references nothing as the only blue one on the row. The row keeps its 7% wash above, which is what says the line is automatic; the label only has to be readable and firm. */ .bom-c.bom-primary { color: var(--text-2); font-family: inherit; font-weight: 600; } /* Quiet cells (owner 2026-08-24): a cell whose Kind probably has nothing to say there dims instead of hiding — still editable, and only while EMPTY (a stored value is never dimmed). Focus or hover wakes the whole cell, so the moment somebody decides the cell does apply, it stops arguing. */ .dev-c.dev-quiet > * { opacity: .38; } .dev-c.dev-quiet:focus-within > *, .dev-c.dev-quiet:hover > * { opacity: 1; } /* Device List: computed BOM rollup cells, collapsible group bands. */ .dev-c.dev-ro { display: flex; align-items: center; font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); padding: 5px 6px; white-space: nowrap; overflow: hidden; } .dev-bandbtn { background: transparent; border: none; color: var(--dim); cursor: pointer; padding: 0 4px; font-size: var(--fs-small); } .dev-bandbtn:hover { color: var(--text); border: none; } /* BOM: collapsible category groups inside a device band. */ .bom-cathdr { display: flex; align-items: center; gap: 8px; width: max-content; min-width: 100%; padding: 3px 8px 3px 70px; font-size: var(--fs-small); color: var(--dim); position: sticky; left: 0; border-top: 1px dashed var(--line); } .bom-cathdr .bom-catname { font-weight: 600; color: var(--text); } .bom-cathdr .bom-catsub { font-family: var(--mono); margin-left: 10px; } .bom-catbtn { background: transparent; border: none; color: var(--dim); cursor: pointer; padding: 0 2px; font-size: var(--fs-small); } .bom-catbtn:hover { color: var(--text); border: none; } /* BOM: one bordered panel per Device Type, encompassing its parts. */ .bom-devpanel { border: 1px solid var(--line); border-radius: var(--r-soft); margin-top: 12px; padding-bottom: 4px; width: max-content; min-width: 100%; box-sizing: border-box; } .bom-devpanel .bom-band { border-top: none; margin-top: 0; border-radius: 7px 7px 0 0; } /* Inside a device panel the band hugs its content (sticky-left), so the subtotal and + line stay visible instead of riding the far scroll edge. */ .bom-devpanel .bom-band { min-width: 0; width: max-content; padding-right: 14px; } /* ---- Spreadsheet-tight grids (Device List, BOM, Device Schedule) ---------- Owner 2026-07-21: tighter rows, continuous grid lines instead of per-input borders, quick to tab and arrow around. Inputs are borderless/transparent; focus paints the cell. Validation flags become inset outlines. */ .dev-table { border-top: 1px solid var(--line); } .dev-row:not(.dev-grouprow):not(.dev-head) { border-bottom: 1px solid var(--line-soft); } .dev-head .dev-c { padding: 4px 6px; } .dev-c { padding: 0; border-right: 1px solid var(--line-soft); display: flex; align-items: center; } .dev-c.dev-chk { justify-content: center; } .dev-cell, .dev-a:not([type=checkbox]) { border: none; background: transparent; border-radius: 0; padding: 4px 6px; } .dev-cell:focus, .dev-a:focus { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--accent); outline: none; } .dev-cell.dev-code-dup { box-shadow: inset 0 0 0 1px var(--bad) !important; } .dev-cell.dev-code-badtype { box-shadow: inset 0 0 0 1px var(--warn) !important; } .bom-table { border-top: 1px solid var(--line); } .bom-row:not(.bom-head) { border-bottom: 1px solid var(--line-soft); } .bom-head .bom-c { padding: 4px 6px; } .bom-c { padding: 0; border-right: 1px solid var(--line-soft); display: flex; align-items: center; } .bom-c.bom-chk { justify-content: center; } .bom-f, .net-f { border: none; background: transparent; border-radius: 0; padding: 4px 6px; } .bom-f:focus, .net-f:focus { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--accent); outline: none; } .bom-c.bom-ro { padding: 4px 6px; } .dev-actions, .bom-actions { width: 56px; padding: 1px 3px; border-right: 1px solid var(--line-soft); } .dev-actions button, .bom-actions button { padding: 1px 5px; font-size: var(--fs-mini); border: none; background: transparent; color: var(--dim); } .dev-actions button:hover, .bom-actions button:hover { color: var(--text); border: none; } /* Row VERBS hide until the row is under the pointer or holds the keyboard; the selection checkbox and the contents chevron sit OUTSIDE .row-tools because they carry state a person must be able to see at a glance (owner 2026-08-24: the resting grid should show data, not buttons). focus-within keeps every button reachable by keyboard alone. */ .bom-actions .row-tools, .dev-actions .row-tools { display: inline-flex; gap: 3px; align-items: center; opacity: 0; transition: opacity .12s; } .bom-row:hover .row-tools, .bom-row:focus-within .row-tools, .dev-row:hover .row-tools, .dev-row:focus-within .row-tools { opacity: 1; } /* Racks & Enclosures carries one control more than any other table — chevron, duplicate, save-as-template, delete — and 56px is sized for two buttons, so the last one sat on top of the name in the next column. Scoped to .cn-table so every other table keeps its narrower gutter; the header rows share the class and therefore stay aligned with the data rows. The four controls need ~97px uncompressed on macOS; the rest is slack, because emoji glyph widths differ by platform and a too-tight column silently squeezes them back into the name. FIVE since 2026-08-17 — revision history joined them, because this is where a rack's contents are overridden. +22px keeps the same slack. */ .cn-table .bom-actions { width: 130px; } /* The Device List hit the SAME bug from the other direction: 56px was right for its two controls until revision history added a third (v0.66.0), and nobody widened the gutter, so the trash can sat under the Device Type beside it. Measured at 75px for the three uncompressed on macOS; 84px leaves the same proportion of slack as the rack table above, for the same reason — emoji glyph widths differ by platform, and a too-tight column silently pushes the last control back under its neighbour rather than complaining. The header and group rows carry .dev-actions too, so they stay aligned. */ .dev-actions { width: 84px; } /* The BOM lines grid took the same third control on 2026-08-17 and needs the same gutter as the Device List for the same reason. Scoped to .bom-lines so the other .bom-table grids (WAN, the address register, VLANs) keep theirs. */ .bom-lines .bom-actions { width: 84px; } /* Device Schedule: level-hierarchy bands (indent + tier colour by depth). left-stripe sweep, 2026-08-07 — the third carrier of the .ws-depth-N ramp, converted with .ws-leveldef and .ws-item-row. All three had to move together or the same level would read three different ways across three tabs. */ .sched-band { display: flex; align-items: center; gap: 8px; width: max-content; min-width: 0; padding: 3px 12px 3px 6px; margin-top: 6px; font-size: var(--fs-body-s); background-color: var(--panel2); background-image: linear-gradient(90deg, color-mix(in srgb, var(--lvc, transparent) 14%, transparent), color-mix(in srgb, var(--lvc, transparent) 4%, transparent) 55%, transparent); border: 1px solid color-mix(in srgb, var(--lvc, var(--line)) 45%, var(--line)); border-top-color: var(--edge-hi-soft); border-radius: 6px; position: sticky; left: 0; } .sched-band .bom-count { font-size: var(--fs-small); } .sched-band .bom-devtotal { font-family: var(--mono); font-size: var(--fs-small); margin-left: 8px; } /* The band's own checkbox: everything under it, at any depth. Sized to the band the way the row checkbox is sized to the row. */ .sched-band .sc-band-pick { width: 14px; height: 14px; margin: 0; flex: none; cursor: pointer; accent-color: var(--accent); } .sched-bandbtn { background: transparent; border: none; color: var(--dim); cursor: pointer; padding: 0 2px; font-size: var(--fs-small); } .sched-bandbtn:hover { color: var(--text); border: none; } .sched-lvl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 1px 6px; } /* Grips need a positioned header cell to anchor to (the Device List already has this via .dev-head .dev-c) — without it the BOM/Schedule grips rendered off-target and couldn't be grabbed. */ .bom-head .bom-c { position: relative; } .dev-grip { z-index: 2; } /* Network tab: VLAN rows, reservations, NIC panels, and the address register. NIC panels appear under the row that owns them, on every grid that can hold an address (Device List template, Device Schedule, Racks & Enclosures). */ .nic-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 2px 7px; font-size: var(--fs-small); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dead fallback dropped — see .net-bar-used. (restyle phase 1b, 2026-08-07) */ .nic-btn:hover { border-color: var(--accent); } .nic-btn-tpl { opacity: .72; font-style: italic; } /* left-stripe sweep, 2026-08-07: not on the owner's census, found by the final grep, same pattern and so the same conversion. The 3px accent edge said "this panel belongs to the row above it"; the accent now says it as a leading wash and an evenly tinted border, and the lopsided `0 8px 8px 0` radius that existed to sit beside the bar goes with it. */ .nic-panel { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--edge-hi-soft); border-radius: var(--r-soft); background-color: var(--panel2); background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 55%, transparent); margin: 2px 0 6px 34px; padding: 6px 8px; } .nic-row { display: grid; gap: 5px; align-items: center; margin-bottom: 3px; grid-template-columns: 1.1fr 1.2fr .8fr 1.1fr 1.1fr 1.1fr 1.2fr 1fr .9fr .7fr 1.3fr 26px; } .nic-row-tpl { grid-template-columns: 1.4fr 1.6fr 3fr 26px; } /* --panel (the panel shell is --panel2) and a tighter 5px corner than the global control radius — the rest comes from the global rule. */ /* ONE TABLE STYLE PER CARD (owner 2026-08-20: "Why are there two different visual styles for tables on the same page. pill-shapes and rounded rectangle... with 2 different background colors"). A controller card draws four tables — applications, NICs, control input/output, and control scope. The first two were shaped here; the other two carried no shape of their own and so fell through to the generic control style, which is a PILL (--r-ctl is 999px). Four tables, two shapes, on one screen. Converging on this one rather than inventing a third: it is already the majority, it is what the Device Schedule's NIC editor uses, and the height line below is a fix the owner asked for on this very card. The pill stays the shape of a BUTTON, which is what --r-ctl is for; a cell in a table is not a control you press. */ .nic-row input, .nic-row select, .ctl-fnrow :where(input:not([type=checkbox]), select), .ctl-add select, .ctl-via { background: var(--panel); border-radius: 5px; padding: 3px 6px; font-size: var(--fs-small); min-width: 0; } .nic-row input, .nic-row select { width: 100%; } /* AND ONE HEIGHT. Equal padding and font do not produce equal heights: a native adds its own metrics on top of whatever is asked of it, so a select and an input with identical padding and font come out different heights on macOS. Stated once, as a height rather than as padding, so the two agree by construction. Textareas are excluded — they are sized in rows, which is the point of them. */ .ctl-card :where(.ctl-fld, .ctl-line, .ctl-fnrow, .ctl-add, .ctl-linkhead) :where(input:not(.nic-oct):not([type=checkbox]), select) { height: 30px; line-height: 1.2; } .ctl-fld input, .ctl-fld select { width: 148px; } .ctl-fld-wide input { width: 300px; max-width: 100%; } /* The description is what the unit IS, and on a card of forty boxes it is the one you read first (owner 2026-08-13). */ .ctl-fld-desc input { font-weight: 700; } /* A gated field, with its checkbox unticked: greyed, inert, and still there. "No web interface" is an answer, and an answer needs somewhere to be. */ .ctl-fld-off { opacity: .5; } .ctl-fld-full { flex: 1 1 100%; min-width: 0; } .ctl-fld-full textarea { width: 100%; } /* Inherited from the rack, shown through as a placeholder rather than copied: the same grammar voltage and wattage use for the Device Type. */ .ctl-a.calc-cell::placeholder { color: color-mix(in srgb, var(--calc) 80%, transparent); font-style: italic; opacity: 1; } .ctl-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-s); color: var(--text-2); } .ctl-scope { border-top: 1px solid var(--line-soft); margin-top: 12px; padding-top: 8px; } .ctl-linkhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ctl-kind { font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); } .ctl-via { width: 100%; min-width: 0; } /* The derived list. Deliberately quiet: it is a consequence of the choice above it, not something anybody edits. */ /* ONE LINK IS ONE ROW, AND THE ROWS LINE UP (owner 2026-08-19: "One entry should be a row... with multiple fields across. Description, Device ID, then Zone.... followed by the notes field"). The grid is on the LIST, not on each entry, which is what makes every entry's columns land on the same edges. Each entry contributes five cells and, in Control scope, a sixth that spans the width for the derived "what is under it" line belonging to the entry above it. Description takes the slack because it is the part that varies most; Device ID is monospaced and sized to a real assembled ID. */ .ctl-linkgrid { display: grid; align-items: center; gap: 2px 10px; margin-top: 4px; } /* The heading cell carries the drag handle, so it needs somewhere to put it. */ .ctl-lch { position: relative; } .ctl-linkgrid > .ctl-linkfull { grid-column: 1 / -1; } .ctl-lch { font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); border-bottom: 1px solid var(--line-soft); padding-bottom: 3px; } .ctl-lc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctl-lc-desc { color: var(--text); } .ctl-lc-id { font-family: var(--mono); font-weight: 700; } .ctl-lc-zone { color: var(--text-2); } /* A zone target has no Device ID and never will, so the column says what it IS rather than printing a dash that could mean "none" or "not yet". */ .ctl-lc-kind { font-family: var(--font); font-weight: 400; font-size: var(--fs-small); color: var(--dim); } .ctl-lc-none { color: var(--dim); } .ctl-lc-x { text-align: right; } .ctl-under { margin: 2px 0 8px; font-size: var(--fs-small); color: var(--text-2); } .ctl-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; } /* Folding a card. Shut, it is one line: enough to tell two consoles in the same rack apart, and nothing else (owner 2026-08-13). */ .ctl-fold { background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: 11px; line-height: 1; padding: 0 2px; } .ctl-fold:hover { color: var(--accent); } .ctl-card.ctl-shut { padding: 8px 14px; } .ctl-brief { margin: 4px 0 0 16px; font-size: var(--fs-small); color: var(--text-2); } /* An emoji at --fs-mini is an illegible dot rather than a clock, so this one keeps body size. It is a control people look for, not a label. */ .ctl-hist, .ctl-table .bom-actions .ctl-hist { background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: var(--fs-body-s); padding: 0 2px; line-height: 1; } .ctl-hist:hover { color: var(--text); } /* The same clock, now in every grid that has a history to open (2026-08-17). Each host sets its own `button` rules — .dt-btns and .ld-btns give theirs a border and .bom-actions shrinks them to --fs-mini — so the control is restated at each one rather than left to inherit a box around a clock face. One declaration block, so the control cannot look like four controls. */ .dt-btns .ctl-hist, .ld-btns .ctl-hist, .rowbtns .ctl-hist, .bom-actions .ctl-hist { background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: var(--fs-body-s); padding: 0 2px; line-height: 1; } .dt-btns .ctl-hist:hover, .ld-btns .ctl-hist:hover, .rowbtns .ctl-hist:hover, .bom-actions .ctl-hist:hover { color: var(--text); } /* The network ports on a card. The editor is the Network tab's own, so an address typed here is the one every tab shows. OPEN, AND ONE BOX FEWER (owner 2026-08-13: "this should default to the expanded view... there's no need to collapse that. Expanding this should allow you to remove one layer of card stacking and borders"). The NIC panel draws itself as an attached sub-panel — tinted fill, accent hairline, inset margin — which is right where it hangs off a grid row and wrong inside a section that is already a box saying the same thing. Here it is just the section's contents. */ .ctl-net { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; } .ctl-nethint { margin: 0 0 8px; font-size: var(--fs-mini); color: var(--faint); } .ctl-sec-net .nic-panel { border: none; background: transparent; margin: 0; padding: 0; } /* Control input and control output are LISTS of functions, so they get a row editor rather than a field box: a media server can take timecode on one port and Art-Net on four others at the same time (owner 2026-08-13). */ .ctl-fns { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 12px 20px; margin-top: 12px; align-items: start; } /* Each side of the relationship sits under the functions that carry it: what drives this one under Control input, what it drives under Control output (owner 2026-08-13). Both are the same table read from opposite ends. */ .ctl-rel { border-top: 1px solid var(--line-soft); margin-top: 10px; padding-top: 8px; } .ctl-rellabel { font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-bottom: 6px; } /* AN EMPTY BLOCK IS SHORTER THAN A FULL ONE (owner 2026-08-13: "Driven By and Control Scope are both taller without data than with data... please keep them shorter, expanding as things are added"; and of Applications, "when no application is present, it's taller than when one is added. the smaller height is better"). Both were using .ws-empty, whose 18px of vertical padding is right for an empty PAGE region and absurd for an empty three-row list. It is one quiet line now, and the block grows from there. */ .ctl-fnempty, .ctl-rel .ws-empty { padding: 2px 0; margin: 0; font-size: var(--fs-small); color: var(--dim); line-height: 1.4; } .ctl-fnpanel { display: flex; flex-direction: column; gap: 4px; } .ctl-fnrow { display: flex; gap: 6px; align-items: center; } .ctl-fnhead span { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; } .ctl-fnf { flex: none; } /* On a card the rows are a GRID, so the headings sit over their own columns and stay there at any card width. The proportions come from the same `w` the table uses for pixel widths — one set of numbers, two ways of spending them. */ .ctl-fnpanel-card .ctl-fnrow { display: grid; gap: 5px; align-items: center; } .ctl-fnpanel-card :where(.ctl-fnf, .ctl-fnchk) { width: 100%; min-width: 0; } .ctl-fnpanel-card .ctl-fnchk { justify-content: flex-start; } /* Out of range, and still stored. Marked rather than clamped: a value silently changed to 200 is a value nobody knows they got wrong. */ .ctl-fnbad { box-shadow: inset 0 0 0 1px var(--warn); } /* A port the standard fixes: shown, not asked for. Reads as a stated fact rather than an empty box waiting to be filled in. */ .ctl-fnfixed { border-style: dashed; opacity: 1; } .ctl-fnfixed::placeholder { color: var(--text-2); font-style: normal; opacity: 1; } .ctl-fndel { background: transparent; border: none; color: var(--dim); cursor: pointer; font-size: var(--fs-small); padding: 0 4px; } .ctl-fndel:hover { color: var(--bad); } .ctl-fnadd { align-self: flex-start; margin-top: 2px; } .ctl-fnchk { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: var(--fs-mini); color: var(--text-2); } /* A row-list that lives inside a field group rather than in a band of its own: Applications under Software, because that is what it is. */ .ctl-sublist { margin-top: 10px; } /* A section whose whole content IS the list starts it at the top: there is no field row above it to be spaced away from. */ .ctl-sublist-first { margin-top: 0; } /* The table's cell: names the protocols rather than counting them, because "sACN (E1.31), Art-Net" is the answer and "2" is not. TEXT, not a button label. A button's text cannot be selected, copied, or pasted into, and in a table meant to behave like a spreadsheet that is a hole (owner 2026-08-13). The chevron beside it opens the panel where ports and the rest of each row are edited. */ .ctl-fncell { display: flex; align-items: center; gap: 2px; width: 100%; } .ctl-fnsum { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); border-radius: 0; padding: 4px 6px; font-size: var(--fs-small); } .ctl-fnsum:focus { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--accent); outline: none; } .ctl-fnbtn { flex: none; display: inline-flex; align-items: center; gap: 3px; background: transparent; color: var(--dim); border: none; border-radius: var(--r-soft); padding: 2px 5px; font-size: var(--fs-mini); cursor: pointer; line-height: 1; } .ctl-fnbtn:hover { color: var(--accent); background: var(--panel2); } .ctl-fncount { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Its own class, not .dev-grip, for the same reason .net-grip is: the Device List binds a resize handler to that one, so a grip carrying it would drag this column AND write a width into the Device List's saved preferences. */ .ctl-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; } .ctl-grip:hover { background: var(--accent); opacity: .5; border-radius: 2px; } /* ---- Controllers, Table view -------------------------------------------- The Device Schedule's grid, reused rather than reinvented: same row and cell classes, same drag grips, same folding bands. Only the frozen columns need saying again, because those selectors are scoped per table. */ /* FROZEN: the actions cell, Device ID, and Description (owner 2026-08-13). Scroll to Access & Startup and a row is otherwise an anonymous line of settings; the description is the part people actually recognize it by. Description's offset is the actions cell plus WHATEVER DEVICE ID IS NOW, and Device ID is drag-resizable, so the offset cannot be a constant. The table carries `--ctl-devid-w` and the drag updates it live, which is why the width stays adjustable and the freeze still lands in the right place. */ .ctl-table .bom-actions { position: sticky; left: 0; z-index: 4; background: var(--surface-1); } .ctl-table .bom-c[data-ctk="devid"] { position: sticky; left: 56px; z-index: 4; background: var(--surface-1); } .ctl-table .bom-c[data-ctk="description"] { position: sticky; left: calc(56px + var(--ctl-devid-w, 150px)); z-index: 4; background: var(--surface-1); box-shadow: 1px 0 0 var(--line-soft); } .ctl-table .bom-head .bom-actions, .ctl-table .bom-head .bom-c[data-ctk="devid"], .ctl-table .bom-head .bom-c[data-ctk="description"], .ctl-table .sched-bandhead .bom-actions, .ctl-table .sched-bandhead .bom-c[data-ctk="devid"], .ctl-table .sched-bandhead .bom-c[data-ctk="description"] { background: var(--surface-2); z-index: 5; } /* A hidden band gap paints no background, so the frozen strip would show the columns sliding underneath it. Shown, and simply left empty. */ .ctl-table .sched-bandhead .bom-c[data-ctk="devid"], .ctl-table .sched-bandhead .bom-c[data-ctk="description"] { visibility: visible; } /* EVERY read-only cell, not just the zone one: a span in a fixed-width column does not clip by default, so "Light System Manager" ran straight over the Variation beside it. The full value is in the title, and the column resizes. */ .ctl-table .bom-c.bom-ro { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctl-table .bom-c[data-ctk="nics"], .ctl-table .bom-c[data-ctk="inputs"], .ctl-table .bom-c[data-ctk="outputs"], .ctl-table .bom-c[data-ctk="scope"] { padding: 2px 4px; } .ctl-table .bom-c[data-ctk="scope"] button { width: 100%; font-size: var(--fs-mini); } /* A NIC or function panel is a full-width block under its row, and the rows are as wide as the table's content, so it has to be pinned to the left edge or it opens off screen once you have scrolled across. */ .ctl-table .nic-panel, .ctl-table .ctl-fnpanel { position: sticky; left: 0; max-width: 100vw; } .ctl-table .ctl-fnpanel { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); background: var(--panel2); } /* A Light Source cell on a device that is not a lighting fixture. Normally empty, and then it is just a gap in the row — no border treatment, nothing to look at. When it carries a value the fixture used to have, it reads as dimmed text you cannot edit, and the tooltip says why. */ .dev-c.dev-na { color: var(--dim); justify-content: flex-start; padding: 0 6px; } .dev-c.dev-na:empty { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line-soft) 6px 7px); opacity: .25; } /* A rack's Device ID reads as the identifier it is; a rack that has not been given a type says so quietly rather than showing a dash, which would be a blank that could mean anything. */ .cn-did { font-family: var(--mono); } .cn-did-none { font-family: var(--font); color: var(--dim); font-size: var(--fs-small); font-style: italic; } /* A device code containing the project's Device ID separator: the assembled ID cannot be read back apart. A warning, not an error — the code is valid, the COMBINATION is what bites, and the separator is configurable. */ .dev-code-sep { box-shadow: inset 0 -2px 0 0 var(--warn); } /* ---- Site Conditions ------------------------------------------------------- Survey and progress material: photographs and video filed against an Event. The layout is a fixed event rail beside a grid of tiles, because the event is the thing somebody navigates by and the pictures are what they came to see. Tokens only — no literal colors, so both themes follow the design system. RADIUS: --r-ctl is the PILL token (999px), for buttons and chips. A media tile styled with it renders as a circle, which is how this shipped the first time and was caught by looking at it. Rectangular surfaces here take --r-soft; only the video chip is a genuine pill. */ .sc-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 14px; } @media (max-width: 900px) { .sc-layout { grid-template-columns: minmax(0, 1fr); } } .sc-events { display: flex; flex-direction: column; gap: 4px; } .sc-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; text-align: left; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-soft); background: var(--panel); color: var(--text); cursor: pointer; } .sc-ev:hover { border-color: var(--accent); } .sc-ev.on { border-color: var(--accent); background: var(--panel2); } .sc-ev-name { grid-column: 1; font-weight: 600; } .sc-ev .muted { grid-column: 1; font-size: var(--fs-small); } .sc-ev-count { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: var(--fs-small); color: var(--dim); } .sc-ev-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sc-ev-head h3 { margin: 0; } .sc-ev-notes { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-small); } /* The drop target. Dashed only while it is a target — a permanently dashed box reads as an error state in every other part of this app. */ .sc-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-soft); background: var(--panel); } .sc-drop.over { border-color: var(--accent); background: var(--panel2); } .sc-drop .muted { font-size: var(--fs-small); } .sc-grid { display: grid; gap: 10px; margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); align-items: stretch; } .sc-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 6px; overflow: hidden; text-align: left; cursor: pointer; border: 1px solid var(--line-soft); border-radius: var(--r-soft); background: var(--panel); color: var(--text); } .sc-tile:hover { border-color: var(--accent); } .sc-tile.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .sc-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--panel2); } .sc-noimg { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--panel2); color: var(--dim); font-size: var(--fs-small); } .sc-tile-cap { padding: 0 8px; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-tile-zone { padding: 0 8px; font-size: var(--fs-mini); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-vid { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: var(--r-ctl); font-size: var(--fs-mini); background: var(--panel); border: 1px solid var(--line); } .sc-detail { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-soft); background: var(--panel); } .sc-detail-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); } .sc-detail-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; padding: 12px; } @media (max-width: 900px) { .sc-detail-body { grid-template-columns: minmax(0, 1fr); } } /* Sized to the media rather than assuming landscape: a portrait phone photo and a rotated clip both carry their own shape. */ .sc-detail-media img, .sc-detail-media video { max-width: 100%; max-height: 460px; display: block; margin: 0 auto; border-radius: var(--r-soft); } .sc-detail-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sc-lbl { font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin-top: 6px; } .sc-meta { margin-top: 8px; font-size: var(--fs-small); } .sc-mrow { display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); gap: 8px; padding: 2px 0; } .sc-mk { color: var(--dim); } .sc-mv { color: var(--text-2); min-width: 0; } .sc-weather { margin-top: 10px; font-size: var(--fs-small); color: var(--text-2); } /* A caveat that must travel with the number beside it — an unreliable heading, an indoor altitude, an exposure describing the flash. Quiet but never absent: a number whose error is invisible gets trusted. */ .sc-warn { color: var(--warn); font-size: var(--fs-mini); } /* Recently deleted. Visible on purpose: a deletion nobody can see is indistinguishable from data loss, which is what the 30-day window exists to prevent. */ .sc-trash { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-soft); background: var(--panel2); } .sc-trash-h { font-weight: 600; margin-bottom: 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .sc-trash-h .muted { font-weight: 400; font-size: var(--fs-small); } .sc-trow { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); } .sc-tkind { font-weight: 600; } .sc-tnote { flex: 1; min-width: 120px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Selecting several, to file a colleague's photographs in one go. The checkbox sits beside the tile rather than inside it: nested in the button it would open the detail panel on every tick. */ /* The grid item is now the CELL, not the tile. A