/* Fonts are referenced by name only — no external @import, so the app works
     fully behind a firewall. If IBM Plex is installed/self-hosted it is used;
     otherwise it falls back to the system UI fonts. */

  /* B7/T7.1: `body.embedded` and `.embed-hide` are gone. They existed to hide
     this page's own header, its sample-data controls and its analytics button
     while it was an iframe child. There is no frame, so "framed" is not a state
     any more: the header became the app bar, the sample controls are visible in
     the toolbar (D1) and the analytics button moves to the console at T7.10. */

  /* Names only. Every value comes from theme-light.css, which this page loads
     first - this sheet declares nothing of its own (T3.2 / S5 / C3). The names
     stay because wp-creation-app.js reads eight of them from JavaScript, where
     a rename fails silently. See docs/reference/tokens.md section 9. */
  :root {
    --bg: var(--cds-background);
    --surface: var(--cds-layer);
    --surface2: var(--cds-layer-accent);
    --border: var(--cds-border-subtle);
    --border-strong: var(--cds-border-strong);
    --text: var(--cds-text-primary);
    --text-muted: var(--cds-text-secondary);
    --text-dim: var(--cds-text-helper);   /* S11: was --cds-ui-04 (#8d8d8d, 3.32:1) */
    --accent: var(--cds-interactive-01);
    --accent-dim: var(--cds-highlight);
    --accent-green: var(--cds-support-success);
    --accent-green-dim: var(--wp-status-success-bg);
    --accent-amber: var(--wp-status-warning-text);
    --accent-amber-dim: var(--wp-status-warning-bg);
    --red: var(--cds-support-error);
    --red-dim: var(--wp-status-error-bg);
    --radius: var(--wp-radius-0);
    --shadow: var(--wp-shadow-none);
    /* Cool-tinted, where the wizard's --shadow-lg is neutral. Same geometry in
       both - 0 4px 16px - so the two can be merged later without moving
       anything; merging is still a rendered change. tokens.md section 8-F. */
    --shadow-lg: var(--wp-shadow-lg-cool);
    --mono: var(--wp-font-mono);
    --sans: var(--wp-font-sans);
    /* The tab strip moved into wp-chrome.css at T7.1 and is drawn by both tool
       pages. It reads the wizard sheet's role names, so this sheet aliases the
       same three - from the same canonical tokens, not from new values. */
    --bg-card: var(--cds-layer);
    --text-light: var(--cds-text-secondary);
    --primary: var(--cds-interactive-01);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
  }

  /* ── HEADER ── */
  .header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
  }
  /* The brand is the shared logo chip now, the same as every other page (T2.2).
     .header-logo was this page's own mono wordmark - the one thing in the suite
     that spelled "Prime Controls" out in monospace instead of showing the mark.
     .wp-logo-chip comes from theme-light.css, which this page already loads. */
  .header-logo-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
  }
  .header-logo-chip:hover { opacity: .92; }
  .header-sep { color: var(--border-strong); }
  .header-title { font-size: 13px; font-weight: 500; color: var(--text-muted); }
  /* Same two-group header the suite page uses, so wp-chrome.js inserts the
     project switcher between them rather than in front of the brand. */
  .header-left  { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
  .header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

  /* ── PACKAGE TOOLBAR ──
     What the old header row became once the brand, the feedback panel and the
     Dashboard button moved out. Actions on the package, or on the SOP behind it. */
  .wp-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .wp-toolbar .btn { padding: 7px 14px; }
  .wp-toolbar-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 6px;
    background: var(--border);
  }
  @media (max-width: 860px) {
    .wp-toolbar { padding: 8px 16px; }
  }

  /* ── STEPPER ── */
  .stepper-wrap { padding: 22px 32px 0; max-width: 1000px; margin: 0 auto; }
  .stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .step-tab {
    flex: 1 0 10%;
    padding: 9px 6px;
    text-align: center;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--text-dim);
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .step-tab:hover { background: var(--surface2); color: var(--text-muted); }
  .step-tab.active { background: var(--accent-dim); color: var(--accent); border-bottom-color: var(--accent); }
  .step-tab.done { color: var(--accent-green); background: var(--accent-green-dim); }
  .step-num { display: block; font-size: 9px; opacity: .65; margin-bottom: 2px; }

  /* ── MAIN ──
     The form uses the full width it's given. The work-package navigator is an
     auto-hiding overlay drawer (see below) rather than a column, so it never takes
     width away from the form — which matters most when this page is embedded in the
     suite's tab and every pixel is shared with the app chrome. */
  /* F6/D3: flex, so the section rail declared AFTER the form in the markup can sit
     ABOVE it at narrow widths (order:-1) and BESIDE it at desk width. Declaring it
     after .main is what lets it be a sticky column without wrapping the layout. */
  .wp-layout { display: flex; flex-direction: column; 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; flex-wrap:wrap; }
  .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); }
  /* CR-014: the QA-queue state. Informational, not alarming - accent, not amber. */
  .rb-qa { background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent); }
  .rb-act-ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); margin-left:8px; }
  .rb-act-ghost:hover { background:var(--accent-dim); }
  /* D4: the audited-override action on the release banner. A real button in the
     primary position for an Urgent package; it simply never renders otherwise. */
  .rb-act { margin-left:auto; border:none; border-radius:var(--radius); cursor:pointer;
    background:var(--primary); color:var(--cds-text-on-color); font-family:var(--sans);
    font-size:12px; font-weight:600; padding:7px 14px; min-height:32px; }
  .rb-act:hover { background:var(--cds-hover-primary); }
  .pill-hold.selected { background:var(--red) !important; border-color:var(--red) !important; }
  .pill-hold.selected .dot { background:var(--cds-text-on-color) !important; }

  /* CR-007/D8: the upload strip in Drawings & Attachments. */
  .file-rules { margin:10px 0 6px; font-size:12px; color:var(--text-muted); }
  .file-rules .fr-warn { color:var(--accent-amber); font-weight:700; }
  .file-rules .fr-full { color:var(--red); font-weight:700; }
  .wp-file-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; }
  .wp-file-row input[type="text"] { flex:1 1 240px; }
  .wp-file-list { display:flex; flex-direction:column; gap:6px; margin:6px 0; }
  .wp-file-item { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; }
  .wp-file-item a { color:var(--accent); text-decoration:none; font-weight:600; overflow-wrap:anywhere; }
  .wp-file-item .wf-size { color:var(--text-muted); font-size:11px; }
  .wp-file-item input { flex:1 1 200px; font-size:12px; }
  .wp-file-x { margin-left:auto; }

  .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 SECTIONS + SECTION RAIL (F6 / D3) ─────────────────────────
     What stood here: a `.section-nav-bar` of `<span onclick>` jump chips, and a
     `.card.collapsed > :not(.section-header):not(.sub-heading)` rule that hid a
     card's contents without any element carrying the disclosure state. Neither
     was reachable by keyboard, and neither said anything to a screen reader.

     Now: every heading is a real disclosure button, its contents are one
     `.card-body` so `aria-controls` has a target, and the table of contents is a
     rail of real buttons that marks where you are.

     D3 amended F6's height criterion to "at rest". At rest one section is open,
     which is what keeps this page under two screen heights; `Expand all` is a
     deliberate choice to exceed it. */

  /* The disclosure button lives INSIDE the existing heading, so .sub-heading's
     trailing rule and the help tip beside it keep working untouched. */
  .card-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    border-radius: var(--radius);
  }
  .card-toggle:hover { color: var(--accent); }
  .card-toggle-label { min-width: 0; }

  /* Drawn, not typed. A glyph here would be a fourth icon idiom on a page S6 is
     already going to have to reconcile, and it would render differently per
     platform - which is half of what S6 is about. */
  .collapse-chev {
    flex: 0 0 auto; width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
  }
  .card-toggle[aria-expanded="false"] .collapse-chev {
    transform: rotate(-45deg) translate(-2px, 2px);
  }

  .card-body[hidden] { display: none !important; }
  .card.collapsed .section-desc { display: none; }
  /* A collapsed card is a heading, so it should read as a row rather than a box
     with one line in it. */
  /* A collapsed section should read as a ROW in a list, not as a box with one line
     in it. Eleven of them at the card's own 28px padding is 660px of nothing -
     which is a third of what F6 was measuring, arriving by a different door. */
  .card.collapsed { padding-top: 10px; padding-bottom: 10px; }
  .card.collapsed .section-header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .card.collapsed .sub-heading { margin-bottom: 0; }

  /* ── the rail ──
     A horizontal strip above the form by default - which is what fits at 390px -
     and a sticky column beside it from 1200px, where there is width to spare. */
  .sec-rail {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 8px 28px 8px calc(var(--nav-w, 288px) + 28px);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .sec-rail-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 6px;
  }
  .sec-rail-title {
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
  }
  .sec-rail-all {
    margin-left: auto;
    background: none; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 3px 10px; font: inherit; font-size: 11px; color: var(--text-muted);
    cursor: pointer;
  }
  .sec-rail-all:hover { border-color: var(--accent); color: var(--accent); }
  .sec-rail-all[aria-pressed="true"] {
    border-color: var(--accent); color: var(--accent); background: var(--accent-dim);
  }
  .sec-rail-list {
    display: flex; flex-wrap: wrap; gap: 4px;
    list-style: none; margin: 0; padding: 0;
  }
  .sec-rail-item {
    display: block; width: 100%;
    background: none; border: 1px solid transparent; border-radius: var(--radius);
    padding: 7px 11px; font: inherit; font-size: 12px; font-weight: 500;
    color: var(--text-muted); cursor: pointer; text-align: left; white-space: nowrap;
    min-height: 34px;
  }
  .sec-rail-item:hover { color: var(--accent); border-color: var(--border); }
  /* Not colour alone: the current entry is bolder, keeps a left marker and is the
     one carrying aria-current. */
  /* A2: the open-constraint count. Red chip + a number - the number is the
     content, so the state is never colour-only. Sized to stay legible at 390px. */
  .sec-badge { display:inline-block; margin-left:8px; min-width:18px; padding:1px 6px;
    border-radius:9px; background:var(--red); color:var(--cds-text-on-color);
    font-size:12px; font-weight:700; line-height:16px; text-align:center; }
  .sec-badge[hidden] { display:none; }
  .sec-rail-item.is-current {
    color: var(--accent); font-weight: 700;
    background: var(--accent-dim);
    border-color: var(--accent-dim);
    box-shadow: inset 2px 0 0 0 var(--accent);
  }

  @media (max-width: 1199px) {
    /* Horizontal strip: the entries sit side by side and the list scrolls rather
       than stacking eleven full-width rows above the form. */
    .sec-rail-list { flex-wrap: nowrap; overflow-x: auto; }
    .sec-rail-item { width: auto; }
  }

  @media (min-width: 1200px) {
    .wp-layout { flex-direction: row; align-items: flex-start; }
    .main { flex: 1 1 auto; }
    .sec-rail {
      order: 0;
      flex: 0 0 224px;
      align-self: flex-start;
      top: var(--sec-rail-top, 48px);
      max-height: calc(100vh - var(--sec-rail-top, 48px));
      overflow-y: auto;
      margin: 22px 28px 0 0;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .sec-rail-list { flex-direction: column; flex-wrap: nowrap; }
    .sec-rail-item { white-space: normal; }
  }

  /* ── 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; }

  /* A6: the triage line and the inline hold reason. These WRAP - an ellipsis
     here would hide exactly the data the row exists to show. The hold reason is
     clamped at three lines so one essay of a reason cannot swallow the panel. */
  .wp-nav-item { align-items: flex-start; }
  .wp-nav-item .wp-nav-badge { margin-top: 2px; }
  .wp-nav-triage { display: block; font-size: 10.5px; line-height: 1.5;
    color: var(--text-muted); white-space: normal; margin-top: 1px; }
  .wp-nav-hold { display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
    font-size: 10.5px; line-height: 1.45; color: var(--red);
    white-space: normal; margin-top: 2px; }

  /* -- 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; }
  body.has-sticky-save .main{ padding-bottom:74px; }

  /* Disciplines + per-discipline scope */
  .disc-picker { display:flex; flex-wrap:wrap; gap:8px; }
  .disc-pill { display:flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--border-strong);
    border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; user-select:none; transition:border-color .12s, background .12s, color .12s; }
  .disc-pill:hover { border-color:var(--accent); color:var(--text); }
  .disc-pill input { display:none; }
  .disc-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--border-strong); transition:background .12s; flex-shrink:0; }
  .disc-pill.selected { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }
  .disc-pill.selected .dot { background:var(--accent); }
  .disc-scope { border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:6px; padding:12px 14px; margin-bottom:12px; background:var(--bg); }
  .disc-scope-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
  .disc-tag { font-weight:700; font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:.03em; }
  .disc-status { font-size:12px; color:var(--text-muted); }
  .disc-status select { font-size:12px; padding:3px 6px; }

  /* Dashboard */
  .dash-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
  .dash-metric { background:var(--surface); border:1px solid var(--border); border-radius:0; padding:14px 16px; text-align:center; }
  .dash-metric .dm-val { font-size:26px; font-weight:800; line-height:1; }
  .dash-metric .dm-label { font-size:11px; color:var(--text-muted); margin-top:6px; text-transform:uppercase; letter-spacing:.03em; }
  .dash-metric.dm-green .dm-val { color:var(--accent-green); }
  .dash-metric.dm-red .dm-val { color:var(--red); }
  .dash-metric.dm-blue .dm-val { color:var(--accent); }
  .dash-metric[onclick] { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
  .dash-metric[onclick]:hover { border-color:var(--accent); }
  .dash-metric.dm-active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
  .dash-chip[onclick] { cursor:pointer; }
  .dash-chip.chip-active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
  .dash-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
  .dash-bd-title { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
  .dash-chip { display:inline-block; font-size:12px; background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:3px 10px; margin:0 6px 6px 0; }
  .dash-chip.chip-red { background:var(--red-dim); color:var(--red); border-color:var(--red); }
  .dash-panel { background:var(--surface); border:1px solid var(--border); border-radius:0; padding:14px 16px; margin-bottom:16px; }
  .dash-panel-title { font-weight:700; font-size:13px; margin-bottom:10px; }
  .dash-table { width:100%; border-collapse:collapse; font-size:12.5px; }
  .dash-table th { text-align:left; background:var(--surface2); border-bottom:1px solid var(--border); padding:6px 8px; font-size:11px; text-transform:uppercase; color:var(--text-muted); }
  .dash-table td { border-bottom:1px solid var(--border); padding:6px 8px; vertical-align:top; }
  /* CR-001 / T6.1: a sortable header is a real <button> inside the <th>, so it is
     in the tab order and Enter and Space work without being wired up. It inherits
     the header's own type rather than declaring its own, so the row still reads as
     one strip. A th with no sort (Gates, the actions column) has no button and is
     therefore not offered as one. */
  .dash-table th .dash-sort {
    background:none; border:none; padding:0; margin:0; border-radius:0;
    font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit;
    cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  }
  .dash-table th .dash-sort:hover { color:var(--accent); }
  /* The sorted column is said three ways: bold, an arrow, and aria-sort on the
     th — so it survives both "cannot see colour" and "cannot see the arrow". */
  .dash-table th .dash-sort.is-sorted { color:var(--text); font-weight:700; }

  /* CR-003 / X7: priority, coloured from canonical tokens only. X7's warning is
     that without one source of truth for colour, Normal/High/Urgent gets four
     implementations — so these alias the same status tokens the badges and
     banners already use, and declare nothing.

     The LABEL is always rendered. Colour is a second channel and never the only
     one: Normal is a plain outline, High is amber-filled and Urgent is
     red-filled, so the three differ by weight and fill as well as by hue. */
  .prio {
    display:inline-block; padding:1px 8px; border:1px solid var(--border-strong);
    border-radius:20px; font-size:10px; font-weight:600; letter-spacing:.04em;
    color:var(--text-muted); background:var(--surface); white-space:nowrap;
  }
  .prio-high {
    color:var(--accent-amber); border-color:var(--wp-status-warning-border-a);
    background:var(--accent-amber-dim);
  }
  /* CR-004: three dependent dropdowns where a free-text box used to be. They wrap
     rather than shrink — three selects squeezed onto one 390px line are three
     controls nobody can read the options of. */
  /* CR-018: one table per level, each adding up to the project on its own. */
  .loc-rollup { margin-top:12px; }
  .loc-rollup .dash-table { margin-top:4px; }
  /* The unassigned row and the total row are marked structurally, not only by
     colour: one is italic, the other bold with a rule above it. */
  .dash-table tr.loc-unassigned td { font-style:italic; color:var(--text-muted); }
  .dash-table tr.loc-total td { font-weight:700; border-top:2px solid var(--border-strong); }

  .loc-picker { display:flex; gap:6px; flex-wrap:wrap; }
  .loc-picker select { flex:1 1 120px; min-width:0; }
  .loc-picker select:disabled { opacity:.55; cursor:not-allowed; }

  .prio-urgent {
    color:var(--wp-btn-danger-fill-fg); border-color:var(--red); background:var(--red);
  }
  .dash-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
  .dash-filters input, .dash-filters select { padding:7px 10px; border:1px solid var(--border-strong); border-radius:6px; font-size:13px; }
  .dash-filters input[type=search] { flex:1; min-width:200px; }
  @media (max-width:640px){ .dash-breakdown { grid-template-columns:1fr; } }

  /* ── WP history (audit trail) modal ──────────────────────────────────────── */
  .hist-list { display:flex; flex-direction:column; }
  .hist-item { display:grid; grid-template-columns:170px 1fr auto; gap:12px; align-items:baseline;
    padding:9px 2px; border-bottom:1px solid var(--border); }
  .hist-item:last-child { border-bottom:none; }
  .hist-when { font-family:var(--mono); font-size:11px; color:var(--text-muted); white-space:nowrap; }
  .hist-action { font-weight:600; color:var(--text); }
  .hist-detail { color:var(--accent); font-size:13px; }
  .hist-actor { font-size:12px; color:var(--text-muted); white-space:nowrap; }
  @media (max-width:560px){ .hist-item { grid-template-columns:1fr; gap:2px; } }

  /* ── Dashboard progress bars + pager + archived toggle (Phase 2) ──────────── */
  .prog-row { display:grid; grid-template-columns:150px 1fr 96px; gap:10px; align-items:center; margin-bottom:7px; }
  .prog-name { font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .prog-bar { height:10px; background:var(--surface2); border:1px solid var(--border); overflow:hidden; }
  .prog-fill { height:100%; background:var(--accent); transition:width .3s ease; }
  .prog-pct { font-size:12px; font-weight:600; color:var(--text); text-align:right; white-space:nowrap; }
  .prog-sub { font-weight:400; color:var(--text-muted); font-size:11px; }
  .dash-arch-toggle { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); white-space:nowrap; cursor:pointer; }
  .dash-pager { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12.5px; color:var(--text-muted); }
  .dash-pager-btns { margin-left:auto; display:flex; gap:8px; }
  .dash-pager .btn { padding:5px 12px; }
  @media (max-width:560px){ .prog-row { grid-template-columns:110px 1fr 74px; } }