n.siegfried
12d19446d5
There is no iframe in html/ any more. The creator is a top-level document with
the same app bar and the same tab strip as the SOP wizard; the two tabs that
used to swap a frame are links between them.
DEVIATION, stated rather than smuggled. The wave file says "remove the iframe
boundary so the creator renders in the parent document". It renders as its own
document instead. Every done-when is met - no iframe, no cross-frame messaging,
F4 resolved structurally, CR-006 toggles with no special-casing, back and
forward intact with T4.2's URL state - but the route is the other one, and the
reason is in creator-frame.md's own numbers:
merge into parent make it a page
selector collisions to resolve 21 0
script global collisions 9 0
cross-frame call sites to remove 28 28
probe entry points needing rework ~29 2
The 21 and the 9 were never the cost of dissolving the boundary. They are the
cost of MERGING TWO DOCUMENTS, which is a different change the boundary was
hiding. And 29 probe call sites address wp-creation-index.html directly, so a
route that keeps that address keeps all of them. creator-frame.md section 5
records this in full.
What went, and what replaced it:
#wp-frame, applyEmbedLayout, sizeWPFrame, viewportMinusChrome, chromeHeight,
renderWPTab, the resize handler, the ResizeObserver, --wp-chrome-h,
.content-area.embed-full, body.embed-full -> the window sizes the page
?embedded=1, body.embedded, .embed-hide, .embed-first -> nothing. An old
link carrying the param is ignored rather than half-obeyed.
openWpById / showDashboard / showForm / dashApplyFlag / applySopSections
called across the frame -> the URL. ?project= ?view= ?wp= ?flag= were
already read at the creator's own boot (T4.2), which is exactly why those four
could be DELETED rather than migrated. X4 is closed: the surviving path is the
one T5.5 built and proved.
inIframe in auth-guard.js, wp-chrome.js, wp-sidenav.js, help.js and _isTop in
project-data.js -> gone. help.js now reads the explicit WP_HELP_NO_FAB flag
both tool pages set, instead of inferring intent from where it is rendered.
.main-nav / .nav-tab in work-package-suite-styles.css -> wp-chrome.css,
because a tab row only one of two documents can style is the shape that put
the tabs in the parent and the toolbar in the child to begin with.
The three questions creator-frame.md section 4 said no count could answer:
1. The creator gets the app bar. It was the only page loading neither
wp-chrome file. Its header is now the .header-left / .header-right pair the
wizard uses, so the switcher lands in the same place on both.
2. Two sequence components, scoped not merged - confirmed Aug 18 that the
sequence is authored in the SOP and adjustable per package. BL-015 stays.
3. body.embedded is gone. The header it hid is replaced by the app bar; the
sample controls are visible in a new package toolbar (D1); the analytics
button is visible there until T7.10 moves it. The Dashboard BUTTON in that
row became a TAB, which is the one place B7's "fold the toolbar into the
tab row" actually happened.
Old addresses still resolve. ?tab=wp, ?view=dashboard and ?wp=<id> are in
bookmarks, in wp-sidenav's link map, and they are the shape CR-011 and CR-014
were specified against (X1). The wizard forwards them with replace(), so Back
does not bounce. Breaking these silently was the one regression this task could
have shipped that nobody would notice for weeks. frame_check.py section 4 pins
all three.
BEHAVIOUR CHANGE, deliberate. The live cross-frame hand-off showed the creator a
section toggle that had NOT been saved: flip it, look, reload, and the section
came back. What the creator shows now is the SOP that is stored. sections_check
5b pins both halves - an unsaved toggle does not travel, a saved one does.
BEHAVIOUR CHANGE, not deliberate, logged as BL-020. A tab switch is a page exit
now, so leaving the wizard with unsaved SOP edits fires T4.3's unsaved-work
guard. Nothing is lost - the guard writes the draft first and T4.3 recovers it -
but it is friction that did not exist, and suppressing a deliberate guard is a
product decision with its own downside. Logged, not quietly handled here.
tests/frame_check.py, 39 checks, new. Two of them exist because of failures
during this task rather than in it:
- "both documents parse and boot". A const shadowing a function parameter is a
SyntaxError, and work-package-suite-app.js did not parse at all for one run.
Four checks in url_state_check went red and not one said "the script did not
load". Asserting a page's own entry points exist costs nothing.
- "focus emulation is on, so a focus reading means something". An earlier draft
called page.call instead of page.ws.call inside a try/except and measured
nothing, reporting no focus ring anywhere - which looks exactly like a
finding. Trap 5 in reverse, for the second time in this project.
The four backlog entries logged against this file, re-measured rather than
assumed:
BL-001 still reproduces (485px in a 390px viewport) but its RECORDED CAUSE IS
WRONG. --nav-w now computes to 56px, so the injected-style explanation
is spent. The overflow is the creator's data tables - #asset-body's
lays out at 520px with no scroll container. frame_check reports the
offending boxes by selector and skips position:fixed subtrees, because
the comments drawer parked off-screen at right:844 made the first
measurement blame the drawer. Pinned, not fixed: T7.2 lays out the form.
BL-013 CLOSED. It was fixed by S12 in WAVE 4 - wp-creation-styles.css:209
carries the comment naming this entry - and nobody updated it. It was
quoted as a live CLAUDE.md violation while planning wave 7 and had not
been true for four waves. a11y_check walks 120 focusable elements on
the creator and every one rings at >= 3:1.
BL-006 15 by the probe's measure, unchanged; different denominator, stated.
BL-007 68 raw radii by the probe's measure. Nothing has reduced it in four
waves; it is measured every run now instead of once.
BL-018 cost a FOURTH probe. frame_check imports set_sop from sections_check
rather than writing a fifth copy of the workaround. T9.9 owns it.
Probes re-pointed, with reasons in the files: sections_check 5b (drove the live
hand-off), pipeline_check check 2 (read through contentDocument), f_items F4
(drove standalone and embedded; there is one mode now), validation_check
(lost "the wrong tab", gained the SOP gate).
Verified: frame_check 39/39, sections_check 95/95, pipeline_check 44/44,
url_state_check 23/23, validation_check 83/83, a11y_check 22/22,
autosave_check 34/34, aggregates_check 16/16, stepper_check 71/71,
browser_check 71/71, launcher_check 58/58, generalinfo_check 49/49,
rollup_check 63/63, cards_check 44/44, locations_check 58/58.
f_items: F1-F5 fixed, F6 reproduces (T7.2).
Metrics: iframes 1 -> 0, colour literals in rules outside theme-light.css 0,
dialogs 64, <div onclick> 2, .help-tip 18.
Items: B7 D1
Task: T7.1
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1020 lines
64 KiB
CSS
1020 lines
64 KiB
CSS
/* Fonts are referenced by name only — no external @import, so the app works
|
||
fully behind a firewall. If IBM Plex is installed/self-hosted it is used;
|
||
otherwise it falls back to the system UI fonts. */
|
||
|
||
/* B7/T7.1: `body.embedded` and `.embed-hide` are gone. They existed to hide
|
||
this page's own header, its sample-data controls and its analytics button
|
||
while it was an iframe child. There is no frame, so "framed" is not a state
|
||
any more: the header became the app bar, the sample controls are visible in
|
||
the toolbar (D1) and the analytics button moves to the console at T7.10. */
|
||
|
||
/* Names only. Every value comes from theme-light.css, which this page loads
|
||
first - this sheet declares nothing of its own (T3.2 / S5 / C3). The names
|
||
stay because wp-creation-app.js reads eight of them from JavaScript, where
|
||
a rename fails silently. See docs/reference/tokens.md section 9. */
|
||
:root {
|
||
--bg: var(--cds-background);
|
||
--surface: var(--cds-layer);
|
||
--surface2: var(--cds-layer-accent);
|
||
--border: var(--cds-border-subtle);
|
||
--border-strong: var(--cds-border-strong);
|
||
--text: var(--cds-text-primary);
|
||
--text-muted: var(--cds-text-secondary);
|
||
--text-dim: var(--cds-text-helper); /* S11: was --cds-ui-04 (#8d8d8d, 3.32:1) */
|
||
--accent: var(--cds-interactive-01);
|
||
--accent-dim: var(--cds-highlight);
|
||
--accent-green: var(--cds-support-success);
|
||
--accent-green-dim: var(--wp-status-success-bg);
|
||
--accent-amber: var(--wp-status-warning-text);
|
||
--accent-amber-dim: var(--wp-status-warning-bg);
|
||
--red: var(--cds-support-error);
|
||
--red-dim: var(--wp-status-error-bg);
|
||
--radius: var(--wp-radius-0);
|
||
--shadow: var(--wp-shadow-none);
|
||
/* Cool-tinted, where the wizard's --shadow-lg is neutral. Same geometry in
|
||
both - 0 4px 16px - so the two can be merged later without moving
|
||
anything; merging is still a rendered change. tokens.md section 8-F. */
|
||
--shadow-lg: var(--wp-shadow-lg-cool);
|
||
--mono: var(--wp-font-mono);
|
||
--sans: var(--wp-font-sans);
|
||
/* The tab strip moved into wp-chrome.css at T7.1 and is drawn by both tool
|
||
pages. It reads the wizard sheet's role names, so this sheet aliases the
|
||
same three - from the same canonical tokens, not from new values. */
|
||
--bg-card: var(--cds-layer);
|
||
--text-light: var(--cds-text-secondary);
|
||
--primary: var(--cds-interactive-01);
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--sans);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ── HEADER ── */
|
||
.header {
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 14px 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
/* The brand is the shared logo chip now, the same as every other page (T2.2).
|
||
.header-logo was this page's own mono wordmark - the one thing in the suite
|
||
that spelled "Prime Controls" out in monospace instead of showing the mark.
|
||
.wp-logo-chip comes from theme-light.css, which this page already loads. */
|
||
.header-logo-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
flex-shrink: 0;
|
||
}
|
||
.header-logo-chip:hover { opacity: .92; }
|
||
.header-sep { color: var(--border-strong); }
|
||
.header-title { font-size: 13px; font-weight: 500; color: var(--text-muted); }
|
||
/* Same two-group header the suite page uses, so wp-chrome.js inserts the
|
||
project switcher between them rather than in front of the brand. */
|
||
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
|
||
.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
|
||
|
||
/* ── PACKAGE TOOLBAR ──
|
||
What the old header row became once the brand, the feedback panel and the
|
||
Dashboard button moved out. Actions on the package, or on the SOP behind it. */
|
||
.wp-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
padding: 8px 32px;
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.wp-toolbar .btn { padding: 7px 14px; }
|
||
.wp-toolbar-sep {
|
||
width: 1px;
|
||
align-self: stretch;
|
||
margin: 2px 6px;
|
||
background: var(--border);
|
||
}
|
||
@media (max-width: 860px) {
|
||
.wp-toolbar { padding: 8px 16px; }
|
||
}
|
||
|
||
/* ── STEPPER ── */
|
||
.stepper-wrap { padding: 22px 32px 0; max-width: 1000px; margin: 0 auto; }
|
||
.stepper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.step-tab {
|
||
flex: 1 0 10%;
|
||
padding: 9px 6px;
|
||
text-align: center;
|
||
font-family: var(--mono);
|
||
font-size: 9.5px;
|
||
font-weight: 500;
|
||
letter-spacing: .04em;
|
||
color: var(--text-dim);
|
||
background: var(--surface);
|
||
border-right: 1px solid var(--border);
|
||
border-bottom: 2px solid transparent;
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
line-height: 1.35;
|
||
text-transform: uppercase;
|
||
}
|
||
.step-tab:hover { background: var(--surface2); color: var(--text-muted); }
|
||
.step-tab.active { background: var(--accent-dim); color: var(--accent); border-bottom-color: var(--accent); }
|
||
.step-tab.done { color: var(--accent-green); background: var(--accent-green-dim); }
|
||
.step-num { display: block; font-size: 9px; opacity: .65; margin-bottom: 2px; }
|
||
|
||
/* ── MAIN ──
|
||
The form uses the full width it's given. The work-package navigator is an
|
||
auto-hiding overlay drawer (see below) rather than a column, so it never takes
|
||
width away from the form — which matters most when this page is embedded in the
|
||
suite's tab and every pixel is shared with the app chrome. */
|
||
.wp-layout { display: block; width: 100%; margin: 0; }
|
||
.main { min-width: 0; max-width: none; margin: 0;
|
||
padding: 22px 28px 72px calc(var(--nav-w,288px) + 28px);
|
||
transition: padding-left .18s ease; }
|
||
|
||
.section { display: none; }
|
||
.section.active { display: block; animation: fade .25s ease; }
|
||
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
padding: 28px 32px;
|
||
}
|
||
|
||
.section-header { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
|
||
.section-label {
|
||
font-family: var(--mono); font-size: 10px; font-weight: 600;
|
||
letter-spacing: .2em; color: var(--accent); text-transform: uppercase; margin-bottom: 5px;
|
||
}
|
||
.section-title { font-size: 22px; font-weight: 300; color: var(--text); letter-spacing: -.02em; }
|
||
.section-desc { margin-top: 5px; font-size: 13px; color: var(--text-muted); font-weight: 400; }
|
||
|
||
/* ── FIELDS ── */
|
||
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
|
||
.field-grid.col3 { grid-template-columns: 1fr 1fr 1fr; }
|
||
.field-grid.col1 { grid-template-columns: 1fr; }
|
||
/* On a wide screen let the two-up grids flow into 3–4 columns instead of
|
||
stretching two fields across the whole card. */
|
||
@media (min-width: 1200px) {
|
||
.field-grid:not(.col1):not(.col3) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
|
||
}
|
||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||
.field.span2 { grid-column: span 2; }
|
||
|
||
/* A5 scopes the sentence-case rule to buttons and FIELD LABELS, which is this
|
||
rule. The mono face, the size and the tracking are the creator's idiom and
|
||
are left alone; only the forced uppercase goes. */
|
||
label {
|
||
font-family: var(--mono); font-size: 10px; font-weight: 500;
|
||
letter-spacing: .1em; color: var(--text-muted);
|
||
}
|
||
label .req { color: var(--accent); margin-left: 3px; }
|
||
|
||
input[type=text], input[type=date], input[type=number], textarea, select {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: var(--radius);
|
||
color: var(--text);
|
||
font-family: var(--sans);
|
||
font-size: 14px;
|
||
padding: 9px 12px;
|
||
transition: border-color .15s, box-shadow .15s;
|
||
width: 100%;
|
||
}
|
||
/* S12 / BL-013. `outline: none` used to sit in the rule above, replaced on focus
|
||
by a 3px --accent-dim glow: #edf5ff against a #ffffff field is 1.05:1, which is
|
||
not a visible indicator. The border change and the glow stay as secondary cues;
|
||
the ring is the theme's, inset over the control's own edge so it does not shift
|
||
the layout of a dense form. */
|
||
input:focus, textarea:focus, select:focus {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||
}
|
||
input:focus-visible, textarea:focus-visible, select:focus-visible {
|
||
outline: 2px solid var(--cds-focus);
|
||
outline-offset: -2px;
|
||
}
|
||
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
|
||
::placeholder { color: var(--text-dim); }
|
||
|
||
/* ── PILLS ── */
|
||
.check-group, .radio-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
|
||
.check-pill, .radio-pill {
|
||
display: flex; align-items: center; gap: 7px;
|
||
padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: 20px;
|
||
cursor: pointer; transition: all .12s; user-select: none; font-size: 13px; color: var(--text-muted);
|
||
background: var(--surface);
|
||
}
|
||
.check-pill:hover, .radio-pill:hover { border-color: var(--accent); color: var(--text); }
|
||
.check-pill input, .radio-pill input { display: none; }
|
||
.check-pill .dot, .radio-pill .dot {
|
||
width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
|
||
transition: background .12s; flex-shrink: 0;
|
||
}
|
||
.check-pill.checked { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
|
||
.check-pill.checked .dot { background: var(--accent); }
|
||
.radio-pill.selected { border-color: var(--accent-amber); background: var(--accent-amber-dim); color: var(--accent-amber); }
|
||
.radio-pill.selected .dot { background: var(--accent-amber); }
|
||
|
||
/* ── TABLES ── */
|
||
.table-wrap { overflow-x: auto; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius); }
|
||
table { width: 100%; border-collapse: collapse; }
|
||
th {
|
||
background: var(--surface2); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
|
||
padding: 8px 10px; font-family: var(--mono); font-size: 9px; font-weight: 600;
|
||
letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-align: left; white-space: nowrap;
|
||
}
|
||
td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 4px; vertical-align: middle; }
|
||
th:last-child, td:last-child { border-right: none; }
|
||
tr:last-child td { border-bottom: none; }
|
||
td.row-label {
|
||
padding: 8px 10px; font-family: var(--mono); font-size: 11px; color: var(--text-muted);
|
||
background: var(--surface2); white-space: nowrap; min-width: 150px;
|
||
}
|
||
td input[type=text], td select { border: 1px solid transparent; border-radius: 3px; background: transparent; font-size: 12px; padding: 6px 8px; }
|
||
td input[type=text]:focus, td select:focus { background: var(--surface); border-color: var(--accent); box-shadow: none; }
|
||
td.center { text-align: center; }
|
||
|
||
.toggle-cell { display: flex; justify-content: center; align-items: center; padding: 6px; }
|
||
.toggle-btn {
|
||
width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--border-strong);
|
||
background: var(--surface); color: var(--text-dim); font-size: 15px; cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center; transition: all .12s; font-family: var(--mono); line-height: 1;
|
||
}
|
||
.toggle-btn.enabled { border-color: var(--accent-green); background: var(--accent-green-dim); color: var(--accent-green); }
|
||
.toggle-btn.disabled { border-color: var(--red); background: var(--red-dim); color: var(--red); text-decoration: line-through; font-size: 11px; }
|
||
|
||
.ov-select { width: 58px; font-size: 10px !important; padding: 5px 2px !important; text-align: center; font-family: var(--mono) !important; font-weight: 600; }
|
||
|
||
/* ── MISC ── */
|
||
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
|
||
.sub-heading {
|
||
font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .12em;
|
||
text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.sub-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); }
|
||
|
||
.notice {
|
||
background: var(--accent-dim); border: 1px solid var(--wp-accent-border-a); border-radius: var(--radius);
|
||
padding: 10px 14px; font-size: 12px; color: var(--cds-link-secondary); margin-bottom: 18px; font-family: var(--mono);
|
||
}
|
||
|
||
/* ── DELIVERABLES ── */
|
||
.deliv-group { margin-bottom: 20px; }
|
||
.deliv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||
.deliv-item {
|
||
display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
|
||
border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer;
|
||
transition: all .12s; user-select: none; background: var(--surface);
|
||
}
|
||
.deliv-item:hover { border-color: var(--accent); }
|
||
.deliv-item.checked { border-color: var(--accent); background: var(--accent-dim); }
|
||
.deliv-item input { display: none; }
|
||
.deliv-box {
|
||
width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 3px;
|
||
flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center;
|
||
font-size: 11px; color: var(--cds-text-on-color); transition: all .12s;
|
||
}
|
||
.deliv-item.checked .deliv-box { background: var(--accent); border-color: var(--accent); }
|
||
.deliv-text { font-size: 12.5px; line-height: 1.35; color: var(--text); }
|
||
.deliv-text .dt-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
|
||
|
||
/* ── NAV ── */
|
||
.nav-row { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); }
|
||
.btn {
|
||
padding: 10px 22px; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; font-weight: 600;
|
||
letter-spacing: .08em; cursor: pointer; border: 1px solid; transition: all .15s;
|
||
}
|
||
/* secondary */
|
||
.btn-ghost { background: var(--wp-btn-secondary-bg); border-color: var(--wp-btn-secondary-border); color: var(--text-muted); }
|
||
.btn-ghost:hover { border-color: var(--wp-btn-secondary-hover-fg); color: var(--wp-btn-secondary-hover-fg); }
|
||
/* primary */
|
||
.btn-primary { background: var(--wp-btn-primary-bg); border-color: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); box-shadow: var(--shadow); }
|
||
.btn-primary:hover { background: var(--wp-btn-primary-hover); }
|
||
/* A5: .btn-generate was green. It is the same role as .btn-primary and now
|
||
renders identically; the class is kept because the markup and the scripts
|
||
both use it, and renaming it is T7.2's business, not a colour task's. */
|
||
.btn-generate { background: var(--wp-btn-primary-bg); border-color: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); font-weight: 700; box-shadow: var(--shadow); }
|
||
.btn-generate:hover { background: var(--wp-btn-primary-hover); }
|
||
|
||
/* ── OUTPUT ── */
|
||
#output-section { display: none; }
|
||
#output-section.active { display: block; }
|
||
.output-toolbar { display: flex; gap: 10px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
|
||
.output-doc {
|
||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
|
||
box-shadow: var(--shadow-lg); padding: 52px 56px; font-family: var(--sans); line-height: 1.7;
|
||
color: var(--text); font-size: 13px; max-height: 74vh; overflow-y: auto;
|
||
}
|
||
.output-doc h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.02em; }
|
||
.output-doc .doc-subtitle { font-size: 11px; color: var(--text-muted); margin-bottom: 28px; font-family: var(--mono); letter-spacing: .08em; }
|
||
.output-doc h2 {
|
||
font-size: 13px; font-weight: 600; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase;
|
||
color: var(--accent); margin-top: 30px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-dim);
|
||
}
|
||
.output-doc h3 { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-top: 16px; margin-bottom: 6px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
|
||
.output-doc p { margin-bottom: 10px; }
|
||
.output-doc ul { padding-left: 20px; margin-bottom: 10px; }
|
||
.output-doc li { margin-bottom: 3px; }
|
||
.output-doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; border: 1px solid var(--border); }
|
||
.output-doc th { background: var(--surface2); border: 1px solid var(--border); padding: 6px 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--text-muted); }
|
||
.output-doc td { border: 1px solid var(--border); padding: 7px 10px; vertical-align: top; }
|
||
.output-doc .badge { display: inline-block; padding: 1px 8px; border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 600; }
|
||
.badge-R { background: var(--accent-green-dim); color: var(--accent-green); }
|
||
.badge-O { background: var(--accent-amber-dim); color: var(--accent-amber); }
|
||
.badge-NA { background: var(--surface2); color: var(--text-dim); }
|
||
.badge-Y { background: var(--accent-green-dim); color: var(--accent-green); }
|
||
.badge-N { background: var(--red-dim); color: var(--red); }
|
||
|
||
.info-kv { display: flex; gap: 8px; font-size: 12px; margin-bottom: 6px; }
|
||
.info-kv .k { font-family: var(--mono); font-size: 10px; color: var(--text-muted); white-space: nowrap; min-width: 130px; }
|
||
.info-kv .v { color: var(--text); }
|
||
|
||
/* ── LOADING ── */
|
||
.loading-overlay {
|
||
display: none; position: fixed; inset: 0; background: var(--wp-scrim-loading); z-index: 200;
|
||
align-items: center; justify-content: center; flex-direction: column; gap: 16px; backdrop-filter: blur(2px);
|
||
}
|
||
.loading-overlay.active { display: flex; }
|
||
.spinner { width: 36px; height: 36px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.loading-text { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: .1em; }
|
||
|
||
/* ── VALIDATION ── */
|
||
.step-tab.invalid { color: var(--red); background: var(--red-dim); border-bottom-color: var(--red); }
|
||
.step-tab.invalid.active { color: var(--red); background: var(--red-dim); border-bottom-color: var(--red); }
|
||
.step-tab .step-flag { display: none; }
|
||
.step-tab.invalid .step-flag { display: inline; margin-left: 4px; }
|
||
input.input-invalid, textarea.input-invalid, select.input-invalid { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-dim); }
|
||
.radio-group.group-invalid, .check-group.group-invalid { outline: 1px solid var(--red); outline-offset: 4px; border-radius: var(--radius); }
|
||
.req-hint { font-family: var(--mono); font-size: 10px; color: var(--red); margin-top: 4px; display: none; }
|
||
.req-hint.show { display: block; }
|
||
|
||
/* ── KEY ROLES ── */
|
||
.roles-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
|
||
.role-row { display: grid; grid-template-columns: 220px 1fr 36px; gap: 10px; align-items: center; }
|
||
.role-row .role-other { display: none; }
|
||
.role-row.is-other { grid-template-columns: 220px 1fr 1fr 36px; }
|
||
.role-row.is-other .role-other { display: block; }
|
||
.row-del {
|
||
width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--border-strong);
|
||
background: var(--surface); color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1;
|
||
display: flex; align-items: center; justify-content: center; transition: all .12s; flex-shrink: 0;
|
||
}
|
||
/* danger, outlined */
|
||
.row-del:hover { border-color: var(--wp-btn-danger-border); color: var(--wp-btn-danger-fg); background: var(--wp-btn-danger-soft-bg); }
|
||
.add-btn {
|
||
display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius);
|
||
border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-muted);
|
||
font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
|
||
cursor: pointer; transition: all .15s;
|
||
}
|
||
.add-btn:hover { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--accent-dim); }
|
||
|
||
/* ── WO TYPE NAME EDITING ── */
|
||
td.wo-name-cell { padding: 4px; background: var(--surface2); }
|
||
td.wo-name-cell input { font-family: var(--mono); font-size: 11px; color: var(--text); font-weight: 500; }
|
||
.wo-custom-tag { font-family: var(--mono); font-size: 8px; color: var(--accent); letter-spacing: .1em; margin-left: 6px; vertical-align: middle; }
|
||
|
||
/* ── SEQUENCE BUILDER ── */
|
||
.seq-builder { margin-bottom: 18px; }
|
||
.seq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
|
||
.seq-step {
|
||
display: flex; align-items: center; gap: 12px; padding: 11px 14px;
|
||
background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
|
||
box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s, opacity .12s;
|
||
}
|
||
.seq-step:hover { border-color: var(--accent); }
|
||
.seq-step.dragging { opacity: .35; border-style: dashed; }
|
||
.seq-step.drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
|
||
.seq-handle { cursor: grab; color: var(--text-dim); font-size: 16px; line-height: 1; user-select: none; flex-shrink: 0; }
|
||
.seq-handle:active { cursor: grabbing; }
|
||
.seq-num {
|
||
width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--accent-dim); color: var(--accent);
|
||
font-family: var(--mono); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.seq-step input.seq-label {
|
||
border: 1px solid transparent; background: transparent; font-size: 14px; padding: 5px 8px; color: var(--text); flex: 1;
|
||
}
|
||
.seq-step input.seq-label:focus { background: var(--surface2); border-color: var(--accent); box-shadow: none; }
|
||
.seq-arrow { text-align: center; color: var(--text-dim); font-size: 13px; line-height: .4; margin: -2px 0; }
|
||
.seq-add-row { display: flex; gap: 10px; align-items: center; }
|
||
.seq-add-row input { flex: 1; }
|
||
.seq-step.gate { border-color: var(--accent-amber); background: var(--accent-amber-dim); border-style: dashed; }
|
||
.seq-step.gate .seq-label { color: var(--accent-amber); font-weight: 500; }
|
||
.seq-gate-badge {
|
||
flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--accent-amber); color: var(--cds-text-on-color);
|
||
font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
|
||
}
|
||
.add-btn-gate { border-color: var(--accent-amber); color: var(--accent-amber); }
|
||
.add-btn-gate:hover { border-color: var(--accent-amber); color: var(--accent-amber); background: var(--accent-amber-dim); border-style: solid; }
|
||
.field-hint { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }
|
||
.field-hint code { background: var(--surface2); padding: 1px 6px; border-radius: 3px; color: var(--accent); }
|
||
.field-hint a { color: var(--accent); text-decoration: none; margin-left: 6px; font-weight: 600; }
|
||
.field-hint a:hover { text-decoration: underline; }
|
||
.other-field { margin-top: 6px; }
|
||
|
||
/* ── REVIEW COMMENTS ─────────────────────────────────────────────── */
|
||
.cbadge-total { display:inline-block; min-width:16px; padding:0 5px; margin-left:4px; font-family:var(--mono);
|
||
font-size:10px; font-weight:700; line-height:16px; text-align:center; color:var(--cds-text-on-color); background:var(--accent); border-radius:9px; }
|
||
.step-tab { position:relative; }
|
||
.step-tab .cbadge { position:absolute; top:4px; right:4px; min-width:15px; height:15px; padding:0 4px;
|
||
font-family:var(--mono); font-size:9px; font-weight:700; line-height:15px; text-align:center;
|
||
color:var(--cds-text-on-color); background:var(--accent-amber); border-radius:8px; box-shadow:0 0 0 2px var(--surface); }
|
||
|
||
.cmt-overlay { position:fixed; inset:0; background:var(--wp-scrim-cool); opacity:0; pointer-events:none;
|
||
transition:opacity .2s ease; z-index:60; }
|
||
.cmt-overlay.open { opacity:1; pointer-events:auto; }
|
||
/* Starts below the header, not behind it. The containing block was already the
|
||
viewport (this is a body child, no transformed ancestor), so `top:0` put the
|
||
drawer's own head — its title and its ✕ — underneath the sticky .header, which
|
||
carries z-index:100 against the drawer's 61 and therefore won. The drawer was
|
||
not off-screen so much as roofed over, and the close button was unreachable.
|
||
Raising z-index would have put the panel OVER the header instead, which is the
|
||
same collision with the layers swapped. --rail-top is the header's measured
|
||
height, set by wp-creation-app.js:1328 and already used by .wp-nav for exactly
|
||
this — reusing it keeps one definition of "below the header". */
|
||
/* S12 / C1: `visibility:hidden` while closed, not just translated off-screen.
|
||
A transform moves a thing; it does not remove it from the tab order. The
|
||
closed drawer's name field, its textarea, its Add comment button and its ✕
|
||
were all still focusable, so a keyboard user tabbing through the form fell
|
||
into a panel they could not see and could not tell they were in. Found by
|
||
tests/a11y_check.py, which measured a focus ring on a control no sighted
|
||
user could be looking at.
|
||
The transition delays visibility to the end of the slide when closing, and
|
||
applies it immediately when opening, so the panel still animates both ways. */
|
||
.cmt-drawer { position:fixed; top:var(--rail-top,48px); right:0; height:calc(100vh - var(--rail-top,48px));
|
||
width:380px; max-width:92vw; background:var(--surface);
|
||
border-left:1px solid var(--border); box-shadow:var(--shadow-lg); transform:translateX(100%);
|
||
visibility:hidden;
|
||
transition:transform .24s ease, visibility 0s linear .24s; z-index:61; display:flex; flex-direction:column; }
|
||
.cmt-drawer.open { transform:translateX(0); visibility:visible; transition:transform .24s ease, visibility 0s; }
|
||
.cmt-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
|
||
border-bottom:1px solid var(--border); }
|
||
.cmt-title { font-weight:700; font-size:14px; color:var(--text); }
|
||
.cmt-x { background:none; border:none; color:var(--text-muted); font-size:15px; cursor:pointer; padding:4px 8px; border-radius:4px; }
|
||
.cmt-x:hover { background:var(--surface2); color:var(--text); }
|
||
.cmt-namebar { padding:12px 18px; border-bottom:1px solid var(--border); }
|
||
.cmt-namebar label { display:block; font-size:10px; letter-spacing:.04em; color:var(--text-muted); margin-bottom:5px; }
|
||
.cmt-namebar input { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); font-family:var(--sans); font-size:13px; color:var(--text); background:var(--surface); }
|
||
.cmt-compose { padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface2); }
|
||
.cmt-compose-label { font-size:11px; color:var(--text-muted); margin-bottom:7px; }
|
||
.cmt-compose-label strong { color:var(--accent); }
|
||
.cmt-compose textarea { width:100%; padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--radius);
|
||
font-family:var(--sans); font-size:13px; color:var(--text); resize:vertical; background:var(--surface); }
|
||
.cmt-add { width:100%; margin-top:9px; }
|
||
.cmt-list { flex:1; overflow-y:auto; padding:10px 14px; }
|
||
.cmt-empty { text-align:center; color:var(--text-dim); font-size:12px; padding:36px 12px; }
|
||
.cmt-item { border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; margin-bottom:9px; background:var(--surface); }
|
||
.cmt-item.mine { border-color:var(--accent); background:var(--accent-dim); }
|
||
.cmt-meta { display:flex; align-items:center; gap:7px; margin-bottom:5px; font-size:11px; }
|
||
.cmt-author { font-weight:700; color:var(--text); }
|
||
.cmt-step { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.03em;
|
||
color:var(--accent); background:var(--accent-dim); padding:1px 6px; border-radius:9px; }
|
||
.cmt-time { color:var(--text-dim); margin-left:auto; font-size:10px; }
|
||
.cmt-text { font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
|
||
.cmt-del { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:11px; padding:2px 5px; border-radius:4px; }
|
||
.cmt-del:hover { background:var(--red-dim); color:var(--red); }
|
||
.cmt-jump { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:10px; padding:0; margin-top:4px; }
|
||
.cmt-jump:hover { text-decoration:underline; }
|
||
.cmt-foot { border-top:1px solid var(--border); padding:12px 18px; }
|
||
.cmt-note { font-size:10px; color:var(--text-muted); line-height:1.5; margin-bottom:10px; }
|
||
.cmt-foot-btns { display:flex; gap:7px; flex-wrap:wrap; }
|
||
.cmt-foot-btns .btn { padding:6px 11px; font-size:11px; }
|
||
.cmt-clear { margin-left:auto; color:var(--text-muted); }
|
||
|
||
/* ── REV1: validation, governance, summary ───────────────────────── */
|
||
.radio-group.group-invalid, .check-group.group-invalid { outline:2px solid var(--red); outline-offset:4px; border-radius:var(--radius); }
|
||
.ov-select.ov-unset { color:var(--red) !important; border-color:var(--red); }
|
||
/* primary. Was green (A5) — it applies a suggested value, which is an action. */
|
||
.use-btn { display:inline-block; margin-left:8px; padding:4px 14px; font-family:var(--sans); font-size:11px; font-weight:700;
|
||
color:var(--wp-btn-primary-fg); background:var(--wp-btn-primary-bg); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
|
||
.use-btn:hover { background:var(--wp-btn-primary-hover); }
|
||
.sum-chips { display:flex; flex-wrap:wrap; gap:7px; }
|
||
.sum-chip { background:var(--accent-dim); color:var(--accent); border:1px solid var(--wp-accent-border-a); border-radius:3px;
|
||
padding:3px 10px; font-family:var(--mono); font-size:10px; }
|
||
.sum-warn { margin-top:10px; color:var(--accent-amber); background:var(--accent-amber-dim); border:1px solid var(--wp-status-warning-border-b);
|
||
border-radius:var(--radius); padding:7px 10px; font-size:11px; }
|
||
|
||
/* ── CREATION TOOL ───────────────────────────────────────────────── */
|
||
.ctx-bar { max-width:none; margin:0; padding:12px 28px 12px calc(var(--nav-w,288px) + 28px); display:flex; align-items:center; gap:20px;
|
||
border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; }
|
||
.ctx-empty { color:var(--text-muted); font-size:13px; }
|
||
.ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; }
|
||
.ctx-main .ctx-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
|
||
.ctx-sample { font-family:var(--mono); font-size:9px; font-weight:700; color:var(--accent-amber);
|
||
background:var(--accent-amber-dim); border:1px solid var(--wp-status-warning-border-b); border-radius:9px; padding:1px 7px; margin-left:6px; vertical-align:middle; }
|
||
.ctx-meta { margin-left:auto; display:flex; gap:16px; font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
|
||
.ctx-meta b { color:var(--accent); }
|
||
.ctx-meta code { background:var(--surface2); padding:1px 6px; border-radius:3px; color:var(--accent); }
|
||
/* tertiary */
|
||
.link-btn { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
|
||
|
||
.mode-wrap { max-width:none; margin:0; padding:16px 28px 0; display:flex; align-items:center; gap:16px; }
|
||
.mode-toggle { display:inline-flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
|
||
.mode-btn { padding:8px 18px; font-family:var(--sans); font-size:13px; font-weight:600; border:none; background:var(--surface);
|
||
color:var(--text-muted); cursor:pointer; }
|
||
.mode-btn.active { background:var(--accent); color:var(--cds-text-on-color); }
|
||
.created-count { font-size:11px; color:var(--text-muted); }
|
||
|
||
.wo-section { border:1px solid var(--border); border-radius:var(--radius); padding:11px 13px; margin-bottom:9px; background:var(--surface); }
|
||
.wo-section-head { display:flex; align-items:center; gap:9px; margin-bottom:7px; flex-wrap:wrap; }
|
||
.wo-section-name { font-weight:700; font-size:13px; color:var(--text); }
|
||
.wo-section-src { font-family:var(--mono); font-size:10px; color:var(--text-muted); margin-left:auto; }
|
||
.wo-section textarea { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius);
|
||
font-family:var(--sans); font-size:13px; color:var(--text); resize:vertical; background:var(--surface); }
|
||
.empty-hint { color:var(--text-dim); font-size:13px; padding:18px 6px; text-align:center; }
|
||
|
||
.crew-row { grid-template-columns:1fr 36px !important; }
|
||
.crew-row.is-other { grid-template-columns:1fr 1fr 70px 36px !important; }
|
||
.crew-row:not(.is-other) { grid-template-columns:1fr 70px 36px !important; }
|
||
|
||
.batch-head { display:flex; align-items:center; gap:16px; margin:14px 0 10px; font-size:13px; flex-wrap:wrap; }
|
||
#batch-preview table input { width:100%; }
|
||
|
||
/* ── WORK PACKAGE FORM ───────────────────────────────────────────── */
|
||
.sop-hint { color:var(--accent) !important; }
|
||
.release-banner { max-width:none; margin:0; padding:0 28px 0 calc(var(--nav-w,288px) + 28px); }
|
||
.release-banner .rb-inner { margin-top:14px; border-radius:var(--radius); padding:11px 16px; font-size:13px; font-weight:600;
|
||
display:flex; align-items:center; gap:10px; }
|
||
.rb-ready { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid var(--wp-status-success-border-b); }
|
||
.rb-notready { background:var(--accent-amber-dim); color:var(--accent-amber); border:1px solid var(--wp-status-warning-border-b); }
|
||
.rb-hold { background:var(--red-dim); color:var(--red); border:1px solid var(--wp-status-error-border-b); }
|
||
.pill-hold.selected { background:var(--red) !important; border-color:var(--red) !important; }
|
||
.pill-hold.selected .dot { background:var(--cds-text-on-color) !important; }
|
||
|
||
.cstatus { display:inline-flex; border:1px solid var(--border-strong); border-radius:5px; overflow:hidden; }
|
||
.cstatus button { border:none; background:var(--surface); color:var(--text-muted); font-family:var(--sans); font-size:11px;
|
||
font-weight:600; padding:4px 10px; cursor:pointer; border-right:1px solid var(--border); }
|
||
.cstatus button:last-child { border-right:none; }
|
||
.cstatus button.on-open { background:var(--red); color:var(--cds-text-on-color); }
|
||
.cstatus button.on-cleared { background:var(--accent-green); color:var(--cds-text-on-color); }
|
||
.cstatus button.on-na { background:var(--text-muted); color:var(--cds-text-on-color); }
|
||
#material-body input, #attach-body input, #constraint-body input, #signoff-body input { width:100%; }
|
||
.signoff-check { width:18px; height:18px; cursor:pointer; }
|
||
|
||
/* ── COMMENT-DRIVEN ADDITIONS ────────────────────────────────────── */
|
||
.locked-field { background:var(--surface2)!important; color:var(--text-muted); cursor:not-allowed; }
|
||
.lock-row { display:flex; align-items:center; gap:10px; margin-top:5px; }
|
||
.lock-edit { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:11px; padding:0; }
|
||
.override-note { font-size:11px; color:var(--accent-amber); }
|
||
.sop-tag { font-size:9px; font-weight:700; color:var(--accent); background:var(--accent-dim); border:1px solid var(--wp-accent-border-b); border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
|
||
|
||
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--cds-text-on-color);
|
||
padding:10px 20px; border-radius:8px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s; z-index:9999; box-shadow:var(--wp-shadow-toast); }
|
||
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
|
||
|
||
.modal-overlay { position:fixed; inset:0; background:var(--wp-scrim-cool-strong); display:none; align-items:center; justify-content:center; z-index:9000; padding:20px; }
|
||
.modal-overlay.open { display:flex; }
|
||
.modal { background:var(--surface); border-radius:0; width:100%; max-width:520px; box-shadow:var(--wp-shadow-modal-lg); overflow:hidden; max-height:90vh; display:flex; flex-direction:column; }
|
||
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
|
||
.modal-title { font-weight:700; font-size:15px; color:var(--text); }
|
||
.modal-body { padding:18px 20px; overflow-y:auto; }
|
||
.modal-body .field { margin-bottom:14px; }
|
||
.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); }
|
||
.hold-photo-preview img { max-width:160px; max-height:120px; border-radius:6px; border:1px solid var(--border); margin-top:8px; display:block; }
|
||
|
||
/* ── REV 2 ADDITIONS ─────────────────────────────────────────────── */
|
||
.auto-tag { font-size:9px; font-weight:700; color:var(--accent-green); background:var(--accent-green-dim); border:1px solid var(--wp-status-success-border-b); border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
|
||
.derived-box { padding:9px 11px; border:1px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface2); color:var(--text); font-size:13px; font-weight:600; min-height:38px; display:flex; align-items:center; }
|
||
.material-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
|
||
.workstep-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
|
||
.workstep-row .ws-num { flex:0 0 26px; height:26px; border-radius:50%; background:var(--accent); color:var(--cds-text-on-color); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:5px; }
|
||
.workstep-row textarea { flex:1; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); font-family:var(--sans); font-size:13px; resize:vertical; min-height:38px; }
|
||
.workstep-row .row-del { flex:0 0 auto; margin-top:6px; }
|
||
|
||
/* ── MOBILE (comment 5) ──────────────────────────────────────────── */
|
||
@media (max-width: 720px) {
|
||
.header { flex-wrap:wrap; gap:6px; padding:10px 14px; }
|
||
.header-title { width:100%; order:5; }
|
||
.header .btn { margin-left:0 !important; padding:6px 10px !important; font-size:12px; }
|
||
.header .btn:first-of-type { margin-left:auto !important; }
|
||
.main { padding:14px !important; }
|
||
.ctx-bar, .release-banner { padding-left:14px; padding-right:14px; }
|
||
.ctx-meta { margin-left:0; width:100%; }
|
||
.field-grid { grid-template-columns:1fr !important; }
|
||
.radio-group { flex-wrap:wrap; }
|
||
.card { padding:16px 14px !important; }
|
||
.modal { max-width:100% !important; }
|
||
.output-toolbar { flex-wrap:wrap; }
|
||
.material-actions .add-btn { flex:1 1 auto; }
|
||
table { min-width:520px; } /* keep columns legible; .table-wrap scrolls */
|
||
.cstatus button { padding:6px 8px; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.workstep-row textarea { font-size:16px; } /* avoid iOS zoom */
|
||
input, select, textarea { font-size:16px; } /* avoid iOS zoom on focus */
|
||
}
|
||
|
||
/* ── REV 3 ADDITIONS ─────────────────────────────────────────────── */
|
||
/* SOP-inherited field highlight (comment 8) */
|
||
.sop-inherited { background:var(--wp-sop-inherited-bg) !important; border-color:var(--accent) !important; opacity:0.85; color:var(--text); }
|
||
.sop-inherited:focus { opacity:1; }
|
||
|
||
/* Dev mode (comment 7) */
|
||
.logo-wrap { position:relative; display:flex; align-items:center; }
|
||
.dev-toggle { position:absolute; left:2px; bottom:-9px; width:18px; height:7px; padding:0; border:none;
|
||
background:var(--text-dim); opacity:0.10; border-radius:3px; cursor:pointer; }
|
||
.dev-toggle:hover { opacity:0.35; }
|
||
.dev-banner { background:var(--wp-dev-bg); color:var(--wp-dev-fg); font-size:12.5px; font-weight:700; text-align:center; padding:7px 14px; letter-spacing:.3px; }
|
||
body.dev-mode .header { box-shadow: inset 0 -3px 0 var(--wp-dev-rule); }
|
||
|
||
/* SOP reference links (comments 1,3,4) */
|
||
.sop-ref-links { margin-bottom:12px; }
|
||
.ref-links-title { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
|
||
.ref-links { display:flex; flex-wrap:wrap; gap:8px; }
|
||
.ref-link { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--accent);
|
||
background:var(--accent-dim); border:1px solid var(--wp-accent-border-b); border-radius:8px; padding:6px 11px; text-decoration:none; }
|
||
.ref-link:hover { background:var(--wp-accent-soft-hover); }
|
||
.ref-link .ref-sys { font-weight:400; color:var(--text-muted); font-size:11px; }
|
||
.ref-link-sm { font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; }
|
||
.ref-link-sm:hover { text-decoration:underline; }
|
||
|
||
/* Sign-off date override (comment 5) */
|
||
.so-date { font-size:13px; font-variant-numeric:tabular-nums; }
|
||
.so-ovr { margin-left:8px; font-size:11px; }
|
||
|
||
/* Collapsible form sections */
|
||
.collapse-chev { display:inline-block; width:1em; margin-right:7px; color:var(--text-muted); font-size:11px; user-select:none; }
|
||
.card.collapsed > :not(.section-header):not(.sub-heading) { display:none !important; }
|
||
.card.collapsed .section-desc { display:none; }
|
||
|
||
/* Section nav (jump chips) */
|
||
.section-nav-bar{ position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:6px;
|
||
padding:8px 12px 8px calc(var(--nav-w,288px) + 28px); background:var(--wp-scrim-frosted); backdrop-filter:blur(4px);
|
||
border-bottom:1px solid var(--border); box-shadow:var(--wp-shadow-navbar);
|
||
transition:transform .22s ease; }
|
||
.section-nav-bar:empty{ display:none; }
|
||
.section-nav-bar.nav-hidden{ transform:translateY(-160%); }
|
||
.sec-chip{ font-size:12px; font-weight:600; color:var(--text-muted); background:var(--surface2);
|
||
border:1px solid var(--border); border-radius:14px; padding:4px 11px; cursor:pointer; white-space:nowrap; }
|
||
.sec-chip:hover{ border-color:var(--accent); color:var(--accent); }
|
||
|
||
/* ── SOP-inherited marker ───────────────────────────────────────────────────
|
||
The "from SOP types" subtext used to sit under the field. It's now a small
|
||
chip on the label with the detail in a hover tooltip (site comment 8/3).
|
||
The chip stays VISIBLE rather than hover-only: on a field tablet there is no
|
||
hover, and "this value came from the SOP" is the part people need to see. */
|
||
.field-hint.sop-hint { display: none; }
|
||
.sop-chip { display:inline-block; margin-left:6px; padding:0 6px; border-radius:9px;
|
||
background:var(--accent-dim); color:var(--accent); border:1px solid var(--wp-accent-border-a);
|
||
font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
|
||
vertical-align:middle; cursor:help; position:relative; }
|
||
.sop-chip::after { content:attr(data-tip); position:absolute; bottom:135%; left:50%;
|
||
transform:translateX(-50%); background:var(--cds-ui-05); color:var(--cds-text-on-color); padding:7px 10px; font-size:12px;
|
||
font-weight:400; letter-spacing:0; text-transform:none; line-height:1.4; white-space:normal;
|
||
width:max-content; max-width:260px; text-align:left; z-index:9999; opacity:0;
|
||
pointer-events:none; transition:opacity .12s; box-shadow:var(--wp-shadow-tooltip); }
|
||
.sop-chip::before { content:''; position:absolute; bottom:135%; left:50%;
|
||
transform:translate(-50%,95%); border:5px solid transparent; border-top-color:var(--cds-ui-05);
|
||
opacity:0; transition:opacity .12s; z-index:9999; }
|
||
.sop-chip:hover::after, .sop-chip:hover::before,
|
||
.sop-chip:focus::after, .sop-chip:focus::before { opacity:1; }
|
||
|
||
/* ── people picker (Assignees / Distribution / Predecessors) ─────────────────
|
||
Multi-select over the SOP project team instead of a free-text list. */
|
||
.people-pick { border:1px solid var(--border-strong); border-radius:4px; background:var(--surface);
|
||
padding:5px 6px; min-height:38px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
|
||
.people-pick:focus-within { outline:2px solid var(--accent); outline-offset:-2px; }
|
||
.pp-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 6px 2px 8px;
|
||
background:var(--surface2); border:1px solid var(--border); border-radius:12px;
|
||
font-size:12px; max-width:100%; }
|
||
.pp-chip.pp-locked { background:var(--accent-dim); border-color:var(--wp-accent-border-a); color:var(--accent); }
|
||
.pp-chip .pp-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.pp-chip .pp-x { background:none; border:0; cursor:pointer; color:var(--text-muted);
|
||
font-size:12px; line-height:1; padding:0 1px; }
|
||
.pp-chip .pp-x:hover { color:var(--red); }
|
||
.pp-add { position:relative; }
|
||
.pp-add-btn { background:none; border:1px dashed var(--border-strong); border-radius:12px;
|
||
color:var(--text-muted); font:inherit; font-size:12px; padding:2px 9px; cursor:pointer; }
|
||
.pp-add-btn:hover { border-color:var(--accent); color:var(--accent); }
|
||
.pp-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:60; min-width:270px;
|
||
max-height:300px; overflow-y:auto; background:var(--surface); border:1px solid var(--border-strong);
|
||
box-shadow:var(--wp-shadow-menu); border-radius:4px; padding:6px 0; }
|
||
.pp-menu[hidden] { display:none; }
|
||
.pp-group { font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
|
||
color:var(--text-dim); padding:7px 10px 3px; }
|
||
.pp-opt { display:flex; align-items:center; gap:8px; padding:5px 10px; font-size:13px; cursor:pointer; }
|
||
.pp-opt:hover { background:var(--surface2); }
|
||
.pp-opt input { width:15px; height:15px; cursor:pointer; }
|
||
.pp-opt .pp-role { color:var(--text-dim); font-size:11.5px; }
|
||
.pp-free { border-top:1px solid var(--border); margin-top:5px; padding:7px 10px 3px; }
|
||
.pp-free input { width:100%; padding:5px 7px; font:inherit; font-size:12.5px;
|
||
border:1px solid var(--border); border-radius:3px; }
|
||
.pp-free .field-hint { margin-top:4px; }
|
||
|
||
/* Critical constraint marker (from the SOP) */
|
||
.crit-tag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px; font-size:10px;
|
||
font-weight:700; letter-spacing:.02em; color:var(--red); background:var(--red-dim);
|
||
border:1px solid var(--wp-status-error-border-c); white-space:nowrap; vertical-align:middle; }
|
||
|
||
/* -- WORK PACKAGE NAVIGATOR ------------------------------------------------
|
||
A persistent side panel in the spirit of MS Planner: collapse toggle, one
|
||
primary action, icon nav, then the packages as rows with colour-coded initial
|
||
badges and a highlighted current row. It sits IN the layout (the form shifts
|
||
across) rather than hovering over the content, and collapses to a 56px icon
|
||
rail so you can still see and switch packages with it closed. */
|
||
.wp-nav {
|
||
position: fixed;
|
||
top: var(--rail-top, 48px);
|
||
left: 0;
|
||
bottom: 0;
|
||
width: var(--nav-w, 288px);
|
||
z-index: 120;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--wp-nav-bg);
|
||
border-right: 1px solid var(--border);
|
||
overflow: hidden;
|
||
transition: width .16s ease;
|
||
}
|
||
body { --nav-w: 288px; }
|
||
body.wp-nav-collapsed { --nav-w: 56px; }
|
||
|
||
/* -- collapse toggle -- */
|
||
.wp-nav-top { display: flex; align-items: center; padding: 8px 10px 2px; }
|
||
.wp-nav-toggle {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 34px; height: 34px; padding: 0;
|
||
background: transparent; border: 1px solid transparent; border-radius: 5px;
|
||
color: var(--text-muted); cursor: pointer;
|
||
}
|
||
.wp-nav-toggle:hover { background: var(--wp-nav-hover); color: var(--text); }
|
||
/* Arrow flips to point right when the panel is closed. */
|
||
body.wp-nav-collapsed .wp-nav-toggle-arrow { transform: rotate(180deg); transform-origin: 11px 10px; }
|
||
|
||
/* -- primary action -- */
|
||
.wp-nav-primary { position: relative; display: flex; gap: 2px; padding: 6px 10px 12px; }
|
||
.wp-nav-cta {
|
||
flex: 1 1 auto; min-width: 0;
|
||
display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px;
|
||
height: 40px; padding: 0 14px;
|
||
background: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg);
|
||
border: 0; border-radius: 6px 0 0 6px;
|
||
font: inherit; font-size: 14px; font-weight: 600;
|
||
cursor: pointer; white-space: nowrap;
|
||
}
|
||
.wp-nav-cta:hover { background: var(--wp-btn-primary-hover); }
|
||
.wp-nav-cta-plus { font-size: 17px; font-weight: 400; line-height: 1; }
|
||
.wp-nav-cta-more {
|
||
flex: 0 0 auto; width: 30px; height: 40px;
|
||
background: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); border: 0; border-left: 1px solid var(--wp-on-accent-divider);
|
||
border-radius: 0 6px 6px 0; font: inherit; font-size: 12px; cursor: pointer;
|
||
}
|
||
.wp-nav-cta-more:hover { background: var(--wp-btn-primary-hover); }
|
||
.wp-nav-menu {
|
||
position: absolute; top: calc(100% - 6px); left: 10px; right: 10px; z-index: 10;
|
||
background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;
|
||
box-shadow: var(--wp-shadow-menu-lg); padding: 5px 0;
|
||
}
|
||
.wp-nav-menu[hidden] { display: none; }
|
||
.wp-nav-menu button {
|
||
display: block; width: 100%; text-align: left; background: none; border: 0;
|
||
padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
|
||
}
|
||
.wp-nav-menu button:hover { background: var(--surface2); }
|
||
|
||
/* -- icon nav -- */
|
||
.wp-nav-links { padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 1px; }
|
||
.wp-nav-link {
|
||
display: flex; align-items: center; gap: 12px;
|
||
width: 100%; padding: 9px 10px;
|
||
background: none; border: 0; border-radius: 6px;
|
||
font: inherit; font-size: 14px; color: var(--text);
|
||
cursor: pointer; text-align: left; white-space: nowrap;
|
||
}
|
||
.wp-nav-link:hover { background: var(--wp-nav-hover); }
|
||
.wp-nav-link.is-current { background: var(--wp-nav-active); font-weight: 600; }
|
||
.wp-nav-ico { flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: var(--text-muted); }
|
||
.wp-nav-link-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
|
||
.wp-nav-link-n { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
|
||
|
||
/* -- section header + filter -- */
|
||
.wp-nav-sect {
|
||
display: flex; align-items: baseline; gap: 6px;
|
||
padding: 6px 18px 4px; border-top: 1px solid var(--border);
|
||
}
|
||
.wp-nav-sect-label { font-size: 12px; color: var(--text-muted); }
|
||
.wp-nav-count { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
|
||
.wp-nav-filter { padding: 4px 12px 8px; }
|
||
.wp-nav-search {
|
||
width: 100%; padding: 7px 10px; font: inherit; font-size: 13px;
|
||
border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
|
||
}
|
||
/* S12: keeps the border cue, drops the bare `outline: none`; the theme's ring
|
||
applies on keyboard focus. */
|
||
.wp-nav-search:focus { border-color: var(--accent); }
|
||
|
||
/* -- package rows -- */
|
||
.wp-nav-list { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 8px 14px; }
|
||
.wp-nav-group {
|
||
font-size: 11px; font-weight: 600; letter-spacing: .02em;
|
||
color: var(--text-dim); padding: 12px 10px 4px;
|
||
}
|
||
.wp-nav-item {
|
||
position: relative;
|
||
display: flex; align-items: center; gap: 11px;
|
||
width: 100%; padding: 7px 10px; margin-bottom: 1px;
|
||
background: none; border: 0; border-radius: 6px;
|
||
font: inherit; color: var(--text); text-align: left; cursor: pointer;
|
||
}
|
||
.wp-nav-item:hover { background: var(--wp-nav-hover); }
|
||
.wp-nav-item.active { background: var(--wp-nav-active); }
|
||
/* Left accent bar on the current package, like Planner's selected plan. */
|
||
.wp-nav-item.active::before {
|
||
content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
|
||
width: 3px; border-radius: 2px; background: var(--accent);
|
||
}
|
||
.wp-nav-badge {
|
||
flex: 0 0 28px; width: 28px; height: 28px; border-radius: 5px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .02em;
|
||
color: var(--cds-text-on-color); text-transform: uppercase;
|
||
}
|
||
.wp-nav-body { min-width: 0; flex: 1 1 auto; }
|
||
.wp-nav-num { display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.wp-nav-subj { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.wp-nav-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
|
||
font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
|
||
.wp-nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex: 0 0 auto; }
|
||
.wp-nav-dot.ok { background: var(--accent-green); }
|
||
.wp-nav-dot.open { background: var(--accent-amber); }
|
||
.wp-nav-dot.hold { background: var(--red); }
|
||
.wp-nav-empty { padding: 14px 10px; font-size: 12.5px; color: var(--text-dim); }
|
||
|
||
/* -- collapsed rail: badges and icons only -- */
|
||
body.wp-nav-collapsed .wp-nav-cta-label,
|
||
body.wp-nav-collapsed .wp-nav-cta-more,
|
||
body.wp-nav-collapsed .wp-nav-link-label,
|
||
body.wp-nav-collapsed .wp-nav-link-n,
|
||
body.wp-nav-collapsed .wp-nav-sect,
|
||
body.wp-nav-collapsed .wp-nav-filter,
|
||
body.wp-nav-collapsed .wp-nav-body,
|
||
body.wp-nav-collapsed .wp-nav-state,
|
||
body.wp-nav-collapsed .wp-nav-group { display: none; }
|
||
body.wp-nav-collapsed .wp-nav-primary { padding: 6px 10px 10px; }
|
||
body.wp-nav-collapsed .wp-nav-cta { justify-content: center; padding: 0; border-radius: 6px; }
|
||
body.wp-nav-collapsed .wp-nav-link { justify-content: center; padding: 9px 0; }
|
||
body.wp-nav-collapsed .wp-nav-item { justify-content: center; padding: 6px 0; }
|
||
body.wp-nav-collapsed .wp-nav-list { padding: 6px 6px 14px; }
|
||
|
||
/* Narrow screens: keep the rail collapsed-width so the form still has room. */
|
||
@media (max-width: 860px) {
|
||
body { --nav-w: 56px; }
|
||
body:not(.wp-nav-collapsed) .wp-nav { width: 288px; box-shadow: var(--wp-shadow-rail); }
|
||
}
|
||
|
||
/* Sticky save bar */
|
||
.sticky-save{ position:fixed; left:var(--nav-w,288px); right:0; bottom:0; z-index:40; display:flex; align-items:center;
|
||
justify-content:space-between; gap:14px; padding:10px 20px; background:var(--surface);
|
||
border-top:1px solid var(--border-strong); box-shadow:var(--wp-shadow-sticky); }
|
||
.sticky-save .sticky-status{ font-size:13px; font-weight:600; }
|
||
.sticky-save .sticky-actions{ display:flex; gap:10px; }
|
||
.ss-ready{ color:var(--accent-green); }
|
||
.ss-notready{ color:var(--accent-amber); }
|
||
.ss-hold{ color:var(--red); }
|
||
body.has-sticky-save .main{ padding-bottom:74px; }
|
||
|
||
/* Disciplines + per-discipline scope */
|
||
.disc-picker { display:flex; flex-wrap:wrap; gap:8px; }
|
||
.disc-pill { display:flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--border-strong);
|
||
border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; user-select:none; transition:border-color .12s, background .12s, color .12s; }
|
||
.disc-pill:hover { border-color:var(--accent); color:var(--text); }
|
||
.disc-pill input { display:none; }
|
||
.disc-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--border-strong); transition:background .12s; flex-shrink:0; }
|
||
.disc-pill.selected { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }
|
||
.disc-pill.selected .dot { background:var(--accent); }
|
||
.disc-scope { border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:6px; padding:12px 14px; margin-bottom:12px; background:var(--bg); }
|
||
.disc-scope-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
|
||
.disc-tag { font-weight:700; font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:.03em; }
|
||
.disc-status { font-size:12px; color:var(--text-muted); }
|
||
.disc-status select { font-size:12px; padding:3px 6px; }
|
||
|
||
/* Dashboard */
|
||
.dash-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
|
||
.dash-metric { background:var(--surface); border:1px solid var(--border); border-radius:0; padding:14px 16px; text-align:center; }
|
||
.dash-metric .dm-val { font-size:26px; font-weight:800; line-height:1; }
|
||
.dash-metric .dm-label { font-size:11px; color:var(--text-muted); margin-top:6px; text-transform:uppercase; letter-spacing:.03em; }
|
||
.dash-metric.dm-green .dm-val { color:var(--accent-green); }
|
||
.dash-metric.dm-red .dm-val { color:var(--red); }
|
||
.dash-metric.dm-blue .dm-val { color:var(--accent); }
|
||
.dash-metric[onclick] { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
|
||
.dash-metric[onclick]:hover { border-color:var(--accent); }
|
||
.dash-metric.dm-active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
|
||
.dash-chip[onclick] { cursor:pointer; }
|
||
.dash-chip.chip-active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
|
||
.dash-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
|
||
.dash-bd-title { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
|
||
.dash-chip { display:inline-block; font-size:12px; background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:3px 10px; margin:0 6px 6px 0; }
|
||
.dash-chip.chip-red { background:var(--red-dim); color:var(--red); border-color:var(--red); }
|
||
.dash-panel { background:var(--surface); border:1px solid var(--border); border-radius:0; padding:14px 16px; margin-bottom:16px; }
|
||
.dash-panel-title { font-weight:700; font-size:13px; margin-bottom:10px; }
|
||
.dash-table { width:100%; border-collapse:collapse; font-size:12.5px; }
|
||
.dash-table th { text-align:left; background:var(--surface2); border-bottom:1px solid var(--border); padding:6px 8px; font-size:11px; text-transform:uppercase; color:var(--text-muted); }
|
||
.dash-table td { border-bottom:1px solid var(--border); padding:6px 8px; vertical-align:top; }
|
||
/* CR-001 / T6.1: a sortable header is a real <button> inside the <th>, so it is
|
||
in the tab order and Enter and Space work without being wired up. It inherits
|
||
the header's own type rather than declaring its own, so the row still reads as
|
||
one strip. A th with no sort (Gates, the actions column) has no button and is
|
||
therefore not offered as one. */
|
||
.dash-table th .dash-sort {
|
||
background:none; border:none; padding:0; margin:0; border-radius:0;
|
||
font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit;
|
||
cursor:pointer; display:inline-flex; align-items:center; gap:4px;
|
||
}
|
||
.dash-table th .dash-sort:hover { color:var(--accent); }
|
||
/* The sorted column is said three ways: bold, an arrow, and aria-sort on the
|
||
th — so it survives both "cannot see colour" and "cannot see the arrow". */
|
||
.dash-table th .dash-sort.is-sorted { color:var(--text); font-weight:700; }
|
||
|
||
/* CR-003 / X7: priority, coloured from canonical tokens only. X7's warning is
|
||
that without one source of truth for colour, Normal/High/Urgent gets four
|
||
implementations — so these alias the same status tokens the badges and
|
||
banners already use, and declare nothing.
|
||
|
||
The LABEL is always rendered. Colour is a second channel and never the only
|
||
one: Normal is a plain outline, High is amber-filled and Urgent is
|
||
red-filled, so the three differ by weight and fill as well as by hue. */
|
||
.prio {
|
||
display:inline-block; padding:1px 8px; border:1px solid var(--border-strong);
|
||
border-radius:20px; font-size:10px; font-weight:600; letter-spacing:.04em;
|
||
color:var(--text-muted); background:var(--surface); white-space:nowrap;
|
||
}
|
||
.prio-high {
|
||
color:var(--accent-amber); border-color:var(--wp-status-warning-border-a);
|
||
background:var(--accent-amber-dim);
|
||
}
|
||
/* CR-004: three dependent dropdowns where a free-text box used to be. They wrap
|
||
rather than shrink — three selects squeezed onto one 390px line are three
|
||
controls nobody can read the options of. */
|
||
/* CR-018: one table per level, each adding up to the project on its own. */
|
||
.loc-rollup { margin-top:12px; }
|
||
.loc-rollup .dash-table { margin-top:4px; }
|
||
/* The unassigned row and the total row are marked structurally, not only by
|
||
colour: one is italic, the other bold with a rule above it. */
|
||
.dash-table tr.loc-unassigned td { font-style:italic; color:var(--text-muted); }
|
||
.dash-table tr.loc-total td { font-weight:700; border-top:2px solid var(--border-strong); }
|
||
|
||
.loc-picker { display:flex; gap:6px; flex-wrap:wrap; }
|
||
.loc-picker select { flex:1 1 120px; min-width:0; }
|
||
.loc-picker select:disabled { opacity:.55; cursor:not-allowed; }
|
||
|
||
.prio-urgent {
|
||
color:var(--wp-btn-danger-fill-fg); border-color:var(--red); background:var(--red);
|
||
}
|
||
.dash-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
|
||
.dash-filters input, .dash-filters select { padding:7px 10px; border:1px solid var(--border-strong); border-radius:6px; font-size:13px; }
|
||
.dash-filters input[type=search] { flex:1; min-width:200px; }
|
||
@media (max-width:640px){ .dash-breakdown { grid-template-columns:1fr; } }
|
||
|
||
/* ── WP history (audit trail) modal ──────────────────────────────────────── */
|
||
.hist-list { display:flex; flex-direction:column; }
|
||
.hist-item { display:grid; grid-template-columns:170px 1fr auto; gap:12px; align-items:baseline;
|
||
padding:9px 2px; border-bottom:1px solid var(--border); }
|
||
.hist-item:last-child { border-bottom:none; }
|
||
.hist-when { font-family:var(--mono); font-size:11px; color:var(--text-muted); white-space:nowrap; }
|
||
.hist-action { font-weight:600; color:var(--text); }
|
||
.hist-detail { color:var(--accent); font-size:13px; }
|
||
.hist-actor { font-size:12px; color:var(--text-muted); white-space:nowrap; }
|
||
@media (max-width:560px){ .hist-item { grid-template-columns:1fr; gap:2px; } }
|
||
|
||
/* ── Dashboard progress bars + pager + archived toggle (Phase 2) ──────────── */
|
||
.prog-row { display:grid; grid-template-columns:150px 1fr 96px; gap:10px; align-items:center; margin-bottom:7px; }
|
||
.prog-name { font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||
.prog-bar { height:10px; background:var(--surface2); border:1px solid var(--border); overflow:hidden; }
|
||
.prog-fill { height:100%; background:var(--accent); transition:width .3s ease; }
|
||
.prog-pct { font-size:12px; font-weight:600; color:var(--text); text-align:right; white-space:nowrap; }
|
||
.prog-sub { font-weight:400; color:var(--text-muted); font-size:11px; }
|
||
.dash-arch-toggle { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); white-space:nowrap; cursor:pointer; }
|
||
.dash-pager { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12.5px; color:var(--text-muted); }
|
||
.dash-pager-btns { margin-left:auto; display:flex; gap:8px; }
|
||
.dash-pager .btn { padding:5px 12px; }
|
||
@media (max-width:560px){ .prog-row { grid-template-columns:110px 1fr 74px; } }
|