/* Generate specification — screen styles.
   Owned by ONE porting agent so screens can be built in parallel without
   racing on main.css. Loads AFTER main.css, so a bare class here beats a
   bare class there — but an ID rule in main.css still wins. Check the
   cascade before assuming a rule applies.
   Tokens, the .tip tooltip system and the chart series live in main.css and
   must not be redefined here. */

/* ── Port of design/ui/GenerateSpec.dc.html ─────────────────────────────
   Every selector is scoped to #view-spec (1,1,0) so it outranks main.css's
   bare-class rules — .scroll, .toolbar, .view h1 (0,1,1), the global
   input/select/label type rules — and never leaks into another screen.
   The markup is generated by spec-gen.js (_specEnsureShell) into the
   existing #view-spec .scroll; the legacy .toolbar is hidden at runtime
   and its presets moved into the picker header. */

/* Shell: the view no longer page-scrolls; the picker list and the draft
   pane scroll on their own. overflow:auto is the short-window fallback. */
#view-spec > .toolbar{display:none;}
#view-spec .scroll.spg-scroll{display:flex;flex-direction:column;padding:26px 32px 22px;overflow:auto;background:var(--bg);}

/* Title row */
#view-spec .spg-head{flex-shrink:0;display:flex;align-items:flex-end;gap:20px;margin-bottom:22px;}
#view-spec .spg-head-tx{flex:1;min-width:0;}
#view-spec .spg-h1{font-family:var(--font-display);font-size:27px;font-weight:400;letter-spacing:-.5px;line-height:1.15;margin:0 0 3px;color:#2A323A;}
#view-spec .spg-sub{font-size:12.5px;color:#6B7480;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-spec .spg-head-acts{display:flex;align-items:center;gap:10px;flex-shrink:0;}
#view-spec .spg-stage{display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:9999px;padding:6px 14px 6px 15px;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);cursor:pointer;margin:0;}
#view-spec .spg-stage-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9BA3AC;white-space:nowrap;}
#view-spec .spg-stage select{width:auto;min-width:0;border:none;background:transparent;font-family:var(--font);font-size:12.5px;font-weight:600;color:#2A323A;
  outline:none;-webkit-appearance:none;appearance:none;padding:0;margin:0;border-radius:0;box-shadow:none;cursor:pointer;line-height:1.3;transition:none;}
#view-spec .spg-stage select:focus{border:none;box-shadow:none;background:transparent;}
#view-spec .spg-stage select:focus-visible{outline:2px solid #D2DAE3;outline-offset:3px;border-radius:3px;}
#view-spec .spg-caret{opacity:.4;font-size:9px;}
#view-spec .spg-gen{display:inline-flex;align-items:center;gap:8px;background:#2A323A;color:#FCFBF9;border:none;border-radius:9999px;padding:9px 18px;
  font-family:var(--font);font-size:12.5px;font-weight:600;letter-spacing:0;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);transition:background .13s;}
#view-spec .spg-gen:hover:not(:disabled){background:#3D4854;}
#view-spec .spg-gen:disabled{opacity:.55;cursor:progress;}
#view-spec .spg-gen svg{flex-shrink:0;}
#view-spec .spg-gen .spinner{display:inline-block;vertical-align:-2px;margin-right:6px;}

/* Coverage — one line; the detail is in the tooltips */
#view-spec .spg-cov{flex-shrink:0;display:flex;align-items:center;gap:13px;margin-bottom:18px;min-height:20px;font-size:12.5px;color:#4A5560;}
#view-spec .spg-cov-k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#9BA3AC;cursor:help;}
#view-spec .spg-cov-miss{font-weight:600;color:#8A1C1C;cursor:help;}
#view-spec .spg-reload{background:transparent;border:none;padding:2px 7px;border-radius:6px;font-family:var(--font);font-size:11.5px;font-weight:500;color:#9BA3AC;cursor:pointer;white-space:nowrap;}
#view-spec .spg-reload:hover{color:#2A323A;background:#F1EDE6;}

/* Picker + draft */
#view-spec .spg-body{flex:1;min-height:300px;display:flex;gap:20px;}
#view-spec .spg-picker,#view-spec .spg-draft{min-height:0;display:flex;flex-direction:column;background:#fff;border:1px solid #E8EDF2;border-radius:14px;
  box-shadow:0 1px 3px rgba(42,50,58,.04),0 4px 14px rgba(42,50,58,.06);}
#view-spec .spg-picker{width:520px;flex:0 0 520px;}
#view-spec .spg-draft{flex:1;min-width:0;}
#view-spec .spg-card-hd{display:flex;align-items:center;gap:8px;padding:13px 16px 12px;border-bottom:1px solid #E8EDF2;flex-shrink:0;}
#view-spec .spg-card-t{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-.3px;color:#2A323A;cursor:help;white-space:nowrap;}
#view-spec .spg-card-t-plain{cursor:default;}
#view-spec .spg-selcount,#view-spec .spg-rev{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#6B7480;
  background:#F7F7F7;border:1px solid #E8EDF2;border-radius:5px;padding:2px 7px;white-space:nowrap;}
#view-spec .spg-rev{cursor:help;}
#view-spec .spg-sp{flex:1;min-width:8px;}
#view-spec .spg-preset{background:#fff;border:none;border-radius:9999px;padding:5px 12px;font-family:var(--font);font-size:11px;font-weight:500;color:#4A5560;
  box-shadow:0 0 0 1px rgba(0,0,0,.07);cursor:pointer;white-space:nowrap;transition:box-shadow .12s,color .12s;}
#view-spec .spg-preset:hover{color:#2A323A;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.12);}
#view-spec .spg-help{width:15px;height:15px;border-radius:50%;background:#F1EDE6;color:#837D68;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:help;flex-shrink:0;}

/* Picker list: collapsible NATSPEC groups, one row per worksection */
#view-spec .spg-list{flex:1;min-height:0;overflow:auto;border-radius:0 0 14px 14px;}
#view-spec .spg-grp{display:flex;align-items:center;gap:10px;padding:7px 14px;background:#F7F7F7;border-bottom:1px solid #E8EDF2;cursor:pointer;user-select:none;}
#view-spec .spg-grp:hover{background:#F1EDE6;}
#view-spec .spg-chev{width:9px;font-size:9px;color:#6B7480;flex-shrink:0;}
#view-spec .spg-grp-n{flex:1;min-width:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#3D4854;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-spec .spg-grp-c{font-family:var(--font-mono);font-size:9px;color:#9BA3AC;flex-shrink:0;}
#view-spec .spg-grp-all{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#6B7480;background:#fff;border:1px solid #E8EDF2;border-radius:5px;padding:1px 7px;flex-shrink:0;cursor:pointer;line-height:1.5;}
#view-spec .spg-grp-all:hover{color:#2A323A;border-color:#D2DAE3;}
#view-spec .spg-row{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 11px;background:#fff;border-left:3px solid transparent;border-bottom:1px solid #F2F5F8;cursor:pointer;position:relative;margin:0;font-weight:400;}
#view-spec .spg-row:hover{background:#FAFAFA;}
#view-spec .spg-row.on{background:#FAF8F3;border-left-color:#837D68;}
#view-spec .spg-row input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0;pointer-events:none;transition:none;}
#view-spec .spg-box{width:14px;height:14px;flex-shrink:0;border-radius:4px;background:#fff;border:1px solid #C9D2DB;color:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:9px;line-height:1;}
#view-spec .spg-row.on .spg-box{background:#2A323A;border-color:#2A323A;color:#fff;}
#view-spec .spg-row input:focus-visible + .spg-box{box-shadow:0 0 0 2px #D2DAE3;}
#view-spec .spg-code{font-family:var(--font-mono);font-size:10.5px;color:#2A323A;background:#F7F7F7;border:1px solid #E8EDF2;border-radius:5px;padding:1px 6px;flex-shrink:0;}
#view-spec .spg-rt{flex:1;min-width:0;font-size:12.5px;font-weight:400;color:#4A5560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-spec .spg-row.on .spg-rt{font-weight:500;color:#2A323A;}
#view-spec .spg-chip{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:1px 6px;flex-shrink:0;white-space:nowrap;}
#view-spec .spg-chip-n{background:#E8F0FE;color:#0D3B8A;}
#view-spec .spg-chip-nosrc{background:#FDE7E7;color:#8A1C1C;}

/* Draft pane: recessed ground, a paper sheet, structural rows */
#view-spec .spg-draft-bd{flex:1;min-height:0;padding:16px;background:#F7F7F7;border-radius:0 0 14px 14px;overflow:auto;}
#view-spec .spg-paper{min-height:100%;background:#fff;border:1px solid #E8EDF2;border-radius:8px;padding:20px 24px;box-shadow:0 1px 3px rgba(42,50,58,.05);}
#view-spec .spg-paper-t{font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-.3px;color:#2A323A;}
#view-spec .spg-paper-m{font-family:var(--font-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:#4A5560;padding:6px 0 10px;border-bottom:1.5px solid #2A323A;}
#view-spec .spg-sec{background:#2A323A;color:#FCFBF9;border-radius:6px;padding:7px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:22px;}
#view-spec .spg-paper-m + .spg-sec{margin-top:18px;}
#view-spec .spg-cl{display:flex;gap:9px;align-items:flex-start;border-left:3px solid transparent;border-radius:0 5px 5px 0;padding:7px 11px;margin-top:7px;}
#view-spec .spg-sec + .spg-cl{margin-top:12px;}
#view-spec .spg-cl-tag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;border-radius:4px;padding:2px 6px;flex-shrink:0;white-space:nowrap;margin-top:1px;}
#view-spec .spg-cl-tx{font-size:11.5px;color:#4A5560;line-height:1.5;min-width:0;overflow-wrap:anywhere;}
#view-spec .spg-cl-keep{background:#F5F8F2;border-left-color:#6E7F5C;}
#view-spec .spg-cl-keep .spg-cl-tag{background:#E4EADF;color:#1B5E20;}
#view-spec .spg-cl-ref{background:#F4F8FC;border-left-color:#8A9DB1;}
#view-spec .spg-cl-ref .spg-cl-tag{background:#D4E7FB;color:#0B2A66;}
#view-spec .spg-cl-ref .spg-cl-tx{color:#2A323A;font-weight:500;}
#view-spec .spg-cl-rev{background:#FFFBF2;border-left-color:#C99A3A;}
#view-spec .spg-cl-rev .spg-cl-tag{background:#FFF4D6;color:#7A4A00;}
#view-spec .spg-cl-nosrc{background:#FDF4F4;border-left-color:#C56A6A;}
#view-spec .spg-cl-nosrc .spg-cl-tag{background:#FDE7E7;color:#8A1C1C;}
#view-spec .spg-more{font-size:11px;color:#9BA3AC;padding:20px 0 0;}
#view-spec .spg-more-tight{padding-top:6px;padding-left:11px;}

/* Empty / progress states inside the draft pane */
#view-spec .spg-empty{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:30px 24px;color:#6B7480;font-size:12.5px;line-height:1.5;}
#view-spec .spg-empty b{font-family:var(--font-display);font-weight:500;font-size:17px;letter-spacing:-.2px;color:#2A323A;}
#view-spec .spg-spin{width:18px;height:18px;border:2px solid #D2DAE3;border-top-color:#2A323A;margin-bottom:8px;}

/* Earlier drafts — listed in the draft pane when toggled from the output row */
#view-spec .spg-earlier{margin-top:14px;}
#view-spec .spg-earlier-h{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#9BA3AC;margin:0 0 6px 2px;}
#view-spec .spg-erow{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #E8EDF2;border-radius:8px;padding:7px 8px 7px 12px;margin-bottom:6px;font-size:12px;color:#2A323A;}
#view-spec .spg-erow-r{font-weight:600;white-space:nowrap;}
#view-spec .spg-erow-m{flex:1;min-width:0;color:#6B7480;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-spec .spg-ebtn{background:#fff;border:none;border-radius:9999px;padding:4px 10px;font-family:var(--font);font-size:11px;font-weight:500;color:#2A323A;box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:pointer;white-space:nowrap;}
#view-spec .spg-ebtn:hover{box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.14);}

/* Output row — actions for the latest draft; hidden when there is none */
#view-spec .spg-out{flex-shrink:0;margin-top:18px;display:flex;align-items:center;gap:10px;}
#view-spec .spg-out:empty{display:none;}
#view-spec .spg-link{background:none;border:none;padding:0;font-family:var(--font);font-size:12px;font-weight:600;color:#837D68;cursor:pointer;white-space:nowrap;}
#view-spec .spg-link:hover{color:#4D4936;text-decoration:underline;text-underline-offset:2px;}
#view-spec .spg-obtn{background:#fff;border:none;border-radius:9999px;padding:8px 15px;font-family:var(--font);font-size:12.5px;font-weight:500;color:#2A323A;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);transition:box-shadow .12s,background .12s;}
#view-spec .spg-obtn:hover{box-shadow:0 2px 5px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.11);}
#view-spec .spg-obtn-dark{display:inline-flex;align-items:center;gap:7px;background:#2A323A;color:#FCFBF9;font-weight:600;padding:8px 16px;box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);}
#view-spec .spg-obtn-dark:hover{background:#3D4854;box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);}
#view-spec .spg-del{background:transparent;border:none;border-radius:9999px;width:26px;height:26px;padding:0;font-size:12px;color:#9BA3AC;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;}
#view-spec .spg-del:hover{color:#8A1C1C;background:#FDE7E7;}

/* Narrower panes: the picker gives way first, then the two stack */
@media (max-width:1180px){
  #view-spec .spg-picker{width:430px;flex-basis:430px;}
}
@media (max-width:940px){
  #view-spec .scroll.spg-scroll{padding:20px;}
  #view-spec .spg-body{flex-direction:column;}
  #view-spec .spg-picker{width:auto;flex:0 0 auto;max-height:46%;}
  #view-spec .spg-draft{min-height:240px;}
  #view-spec .spg-head{flex-wrap:wrap;align-items:center;}
}