n.siegfried
c024cba844
Three small accessibility items, done together because they share one probe and
one measurement method. tests/a11y_check.py, 22 checks, all passing.
S10 — ANNOUNCEMENTS. The app had zero aria-live regions; login.html's
role="alert" / role="status" pair was the only correct example in the codebase.
Both toasts now take an optional kind and set the role BEFORE the text, because
assistive technology announces on the content change and a role applied after
describes the next message rather than this one. The sync badge announces
politely.
Admin banners are handled by a rule rather than by editing thirteen assignment
sites: a MutationObserver in console-util.js marks anything carrying `.bad` as
role=alert and everything else role=status. Thirteen edits is thirteen chances to
get it wrong, and any banner added later would have missed out. The probe checks
a banner created after load, which is the case that would have regressed.
S11 — CONTRAST. Re-measured rather than quoting either published figure, as the
file map asked. #8d8d8d is 3.32:1 on white, not "about 2.9:1" as the plan says;
console.css:103's 3.3:1 was right. On the shaded surfaces it is worse - 3.01:1 on
a success banner. --cds-text-helper (#6f6f6f) clears 4.5:1 on all seven
backgrounds the app actually paints, tightest 4.56:1.
Fixed once, in the token, so all three sheets inherit it. console.css's local
override is gone, as the task requires. Disabled text was repointed to
--cds-text-disabled rather than darkened with everything else: making disabled
text MORE legible makes a disabled control look enabled.
The probe measures against the background actually painted behind each element,
walking ancestors for the first non-transparent one - not an assumed white, which
is how "passes on paper" and "fails on the page" come to disagree.
S12 — FOCUS. An app-wide :focus-visible floor in theme-light.css at zero
specificity, so any component can still draw its own. Filled controls get an
explicit rule at class specificity: a blue ring inside a blue button measures
1.00:1, which is not a subtle problem but no indicator at all. console.css's
inset ring had exactly that defect on button.primary.
`outline: none` is down from six to one, and that one (.wpc-search-input) has its
replacement in the rule above it - the shell rings on :focus-within, and ringing
both would draw two rectangles.
TWO REAL DEFECTS THE PROBE FOUND that reading would not have:
- .wp-navbtn's ring is white, which is right on the near-black app bar and
invisible on the creator's white header. Same button, same class, two hosts,
1.00:1 on one of them.
- The comment drawer is translated off-screen when closed, and a transform
moves a thing without removing it from the tab order. Its name field,
textarea, Add button and close button were all still focusable: a keyboard
user could tab into a panel they could not see and could not tell they were
in. Now visibility:hidden while closed, with the transition delayed so it
still animates both ways.
The probe itself needed three corrections, each of which was a wrong answer
before it was a right one, and each worth knowing:
- focus emulation must be ON, or :focus-visible never matches in headless and
every element reports clean - a pass that means nothing.
- which surface a ring is drawn against depends on the offset the BROWSER uses,
not the one the stylesheet asked for. Chromium redraws a low-contrast author
ring in white at offset 0 on a filled control, which is more contrast than was
requested; measuring that against the parent scores it 1.00:1 and calls a
correct ring a defect.
- focus() on a hidden control does nothing, so the probe has to ask whether the
focus actually landed. A closed drawer still has layout; a bounding box is not
evidence that anyone can reach it.
Metric 7, aria-live regions: was 0 at wave 0, now 13 role/aria-live sites across
7 files.
browser_check 71/71, f_items 5 FIXED / F6 REPRODUCES.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
935 lines
59 KiB
CSS
935 lines
59 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. */
|
||
|
||
/* Embedded-in-Suite tweaks */
|
||
body.embedded .embed-hide { display: none !important; }
|
||
body.embedded .embed-first { margin-left: auto; }
|
||
|
||
/* 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);
|
||
}
|
||
|
||
* { 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); }
|
||
|
||
/* ── 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; }
|
||
.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; } }
|