n.siegfried
4d3258113a
Containing block first, as the task asks. The drawer is a body child with no
transformed ancestor, so its containing block was already the viewport - the
positioning context was never wrong. What was wrong was `top: 0` with
`height: 100vh`: the drawer started at the very top of the viewport, and the
creator's .header is sticky with z-index:100 against the drawer's 61. The
header won, so the drawer's own head - its title and its close button - was
roofed over and unreachable. It read as "off-screen" because the part you
needed was covered, not because the box had escaped the viewport.
That is why raising z-index would have been the wrong move: it does not remove
the collision, it just swaps which element is on top, and then the drawer
covers the header instead. The fix is to stop them occupying the same band.
The drawer now starts at var(--rail-top) and is that much shorter. --rail-top
is the header's measured height, set by wp-creation-app.js:1328 and already
used by .wp-nav for exactly this purpose, so "below the header" has one
definition on this page rather than two.
The iframe boundary is NOT implicated. position:fixed inside the embedded
creator resolves against the iframe's own viewport, which is self-consistent,
and the drawer behaves identically framed and unframed. T7.1 can dissolve the
boundary without revisiting this.
The probe was checking one width, one mode, and placement only. It now checks
390 and 1440, standalone and embedded, that the close button is genuinely
hit-testable via elementFromPoint rather than merely present, that the drawer
reopens after closing, and that opening it does not move the page's scroll
position. All pass.
One honest caveat, attributed rather than hidden. At 390px the drawer sits at
the right edge of a 485px layout viewport while the screen is 390px, so 95px of
it is off-screen. That is not the drawer: the creator forces its containing
block to 485px, and while chasing it I found BL-001's root cause -
wp-creation-app.js:1389 injects `body{--nav-w:288px}` with no media query,
which lands after wp-creation-styles.css:815's
`@media (max-width:860px){body{--nav-w:56px}}` and overrides it, so the page
reserves 288px of rail that is not there at any width. Every `right: 0` fixed
element on the page is displaced by it, not only this one.
Left unfixed on purpose - it is the creator's layout, T7.1 rebuilds it, and
CLAUDE.md is explicit about not fixing things noticed in passing. BL-001 now
carries the exact cause and the five rules that consume the token, so T7.1 does
not have to find it again. The probe reports it as an attributed note naming
BL-001, so nobody is sent to the wrong file.
browser_check 71/71. f_items: F1, F2, F3, F4 FIXED.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
895 lines
55 KiB
CSS
895 lines
55 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; }
|
||
|
||
:root {
|
||
--bg: #f4f4f4;
|
||
--surface: #ffffff;
|
||
--surface2: #f4f4f4;
|
||
--border: #e0e0e0;
|
||
--border-strong: #8d8d8d;
|
||
--text: #161616;
|
||
--text-muted: #525252;
|
||
--text-dim: #8d8d8d;
|
||
--accent: #0f62fe;
|
||
--accent-dim: #edf5ff;
|
||
--accent-green: #198038;
|
||
--accent-green-dim: #defbe6;
|
||
--accent-amber: #8e6a00;
|
||
--accent-amber-dim: #fdf6dd;
|
||
--red: #da1e28;
|
||
--red-dim: #fff1f1;
|
||
--radius: 0;
|
||
--shadow: none;
|
||
--shadow-lg: 0 4px 16px rgba(20,30,50,.12);
|
||
--mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
|
||
--sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
||
}
|
||
|
||
* { 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);
|
||
}
|
||
.header-logo {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: .15em;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
}
|
||
.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; }
|
||
|
||
label {
|
||
font-family: var(--mono); font-size: 10px; font-weight: 500;
|
||
letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase;
|
||
}
|
||
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;
|
||
outline: none;
|
||
transition: border-color .15s, box-shadow .15s;
|
||
width: 100%;
|
||
}
|
||
input:focus, textarea:focus, select:focus {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||
}
|
||
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 #b9d2fb; border-radius: var(--radius);
|
||
padding: 10px 14px; font-size: 12px; color: #0043ce; 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: #fff; 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; text-transform: uppercase; cursor: pointer; border: 1px solid; transition: all .15s;
|
||
}
|
||
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
|
||
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
|
||
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow); }
|
||
.btn-primary:hover { background: #0353e9; }
|
||
.btn-generate { background: var(--accent-green); border-color: var(--accent-green); color: #fff; font-weight: 700; box-shadow: var(--shadow); }
|
||
.btn-generate:hover { background: #0e6027; }
|
||
|
||
/* ── 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: rgba(244,245,247,.82); 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;
|
||
}
|
||
.row-del:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
|
||
.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; text-transform: uppercase;
|
||
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: #fff;
|
||
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:#fff; 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:#fff; background:var(--accent-amber); border-radius:8px; box-shadow:0 0 0 2px var(--surface); }
|
||
|
||
.cmt-overlay { position:fixed; inset:0; background:rgba(20,30,50,.28); 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". */
|
||
.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%);
|
||
transition:transform .24s ease; z-index:61; display:flex; flex-direction:column; }
|
||
.cmt-drawer.open { transform:translateX(0); }
|
||
.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; text-transform:uppercase; 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(--accent); 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); }
|
||
.use-btn { display:inline-block; margin-left:8px; padding:4px 14px; font-family:var(--sans); font-size:11px; font-weight:700;
|
||
color:#fff; background:var(--accent-green); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
|
||
.use-btn:hover { background:#0e6027; }
|
||
.sum-chips { display:flex; flex-wrap:wrap; gap:7px; }
|
||
.sum-chip { background:var(--accent-dim); color:var(--accent); border:1px solid #b9d2fb; 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 #f0d9ad;
|
||
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 #f0d9ad; 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); }
|
||
.link-btn { background:none; border:none; color:var(--accent); 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:#fff; }
|
||
.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 #b6e3c6; }
|
||
.rb-notready { background:var(--accent-amber-dim); color:var(--accent-amber); border:1px solid #f0d9ad; }
|
||
.rb-hold { background:var(--red-dim); color:var(--red); border:1px solid #f3c4c4; }
|
||
.pill-hold.selected { background:var(--red) !important; border-color:var(--red) !important; }
|
||
.pill-hold.selected .dot { background:#fff !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:#fff; }
|
||
.cstatus button.on-cleared { background:var(--accent-green); color:#fff; }
|
||
.cstatus button.on-na { background:var(--text-muted); color:#fff; }
|
||
#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(--accent); 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,#eaf0fd); border:1px solid #cdd9f2; 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:#fff;
|
||
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:0 6px 24px rgba(0,0,0,.25); }
|
||
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
|
||
|
||
.modal-overlay { position:fixed; inset:0; background:rgba(20,28,40,.55); 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:0 20px 60px rgba(0,0,0,.3); 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 #b6e3c6; 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:#fff; 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) {
|
||
.header-logo { font-size:14px; }
|
||
.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:rgba(37,99,214,0.07) !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:#3a2a00; color:#ffd479; 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 #ffb000; }
|
||
|
||
/* 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,#eef3fd); border:1px solid #cdd9f2; border-radius:8px; padding:6px 11px; text-decoration:none; }
|
||
.ref-link:hover { background:#e2ecfc; }
|
||
.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:rgba(255,255,255,.94); backdrop-filter:blur(4px);
|
||
border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(20,30,50,.06);
|
||
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 #b9d2fb;
|
||
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:#161616; color:#fff; 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:0 4px 14px rgba(20,30,50,.22); }
|
||
.sop-chip::before { content:''; position:absolute; bottom:135%; left:50%;
|
||
transform:translate(-50%,95%); border:5px solid transparent; border-top-color:#161616;
|
||
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:#b9d2fb; 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:0 8px 24px rgba(20,30,50,.18); 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 #ffc4c4; 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: #fbfbfc;
|
||
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: #eef0f3; 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(--accent); color: #fff;
|
||
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: #0353e9; }
|
||
.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(--accent); color: #fff; border: 0; border-left: 1px solid rgba(255,255,255,.28);
|
||
border-radius: 0 6px 6px 0; font: inherit; font-size: 12px; cursor: pointer;
|
||
}
|
||
.wp-nav-cta-more:hover { background: #0353e9; }
|
||
.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: 0 10px 26px rgba(20,30,50,.18); 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: #eef0f3; }
|
||
.wp-nav-link.is-current { background: #e8eaed; 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);
|
||
}
|
||
.wp-nav-search:focus { outline: none; 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: #eef0f3; }
|
||
.wp-nav-item.active { background: #e8eaed; }
|
||
/* 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: #fff; 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: 6px 0 22px rgba(20,30,50,.16); }
|
||
}
|
||
|
||
/* 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:#fff;
|
||
border-top:1px solid var(--border-strong); box-shadow:0 -2px 10px rgba(20,30,50,.08); }
|
||
.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,#eef3fd); 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, #0f62fe); }
|
||
.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; } }
|