/* NATSPEC worksection index — 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. */

/* ═══ Natspec — two-pane worksection index (ported from design/ui/Natspec.dc.html) ═══
   All rules are scoped to #view-natspec and use the nsx- prefix so nothing in
   main.css (.ns-row, .ns-group …) can reach in. The index.html toolbar is hidden:
   its #ns-q input is moved into the shell by natspec-view.js and #ns-used stays
   as the hidden source of truth for the All/Used toggle. */

/* ── Shell ── */
#view-natspec > .toolbar{display:none;}
#view-natspec #ns-content{display:flex;flex-direction:column;padding:26px 32px !important;}
#view-natspec .nsx{flex:1 1 0;min-height:580px;display:flex;flex-direction:column;width:100%;max-width:1240px;margin:0 auto;}

/* ── Title row ── */
#view-natspec .nsx-head{display:flex;align-items:flex-end;gap:44px;margin-bottom:26px;flex-shrink:0;}
#view-natspec .nsx-head>div:first-child{flex:1;min-width:0;}
#view-natspec .nsx-h1{font-family:var(--font-display);font-size:27px;font-weight:400;letter-spacing:-.5px;line-height:1.15;color:#2A323A;margin:0 0 4px;}
#view-natspec .nsx-sub{font-size:12.5px;color:#6B7480;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-natspec .nsx-stat{text-align:right;cursor:help;flex-shrink:0;}
#view-natspec .nsx-stat-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9BA3AC;margin-bottom:4px;}
#view-natspec .nsx-stat-v{display:flex;align-items:baseline;gap:7px;justify-content:flex-end;}
#view-natspec .nsx-stat-n{font-family:var(--font-display);font-size:34px;font-weight:400;letter-spacing:-.9px;line-height:1;color:#2A323A;}
#view-natspec .nsx-stat-of{font-size:12.5px;color:#9BA3AC;}

/* ── Body: index card + detail card ── */
#view-natspec .nsx-body{flex:1;min-height:0;display:flex;gap:22px;}
#view-natspec .nsx-card{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);display:flex;flex-direction:column;min-height:0;}
#view-natspec .nsx-index{flex:0 0 clamp(320px,38%,460px);}
#view-natspec .nsx-detail{flex:1;min-width:0;}

/* Index card: search + segmented toggle, then the scrolling list */
#view-natspec .nsx-top{padding:18px 18px 14px;flex-shrink:0;border-bottom:1px solid #E8EDF2;}
#view-natspec .nsx-search{position:relative;display:block;}
#view-natspec .nsx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;}
#view-natspec #ns-q{width:100%;margin:0;padding:9px 12px 9px 34px;border:1px solid #D2DAE3;border-radius:9px;font-size:12.5px;font-weight:400;background:#fff;color:#2A323A;}
#view-natspec #ns-q::placeholder{color:#A8AEB6;}
#view-natspec #ns-q:hover:not(:focus){border-color:#D2DAE3;}
#view-natspec #ns-q:focus{outline:none;border-color:#2A323A;background:#fff;box-shadow:0 0 0 3px rgba(42,50,58,.08);}
#view-natspec .nsx-seg{display:inline-flex;background:#F1EDE6;border-radius:9999px;padding:3px;margin-top:14px;}
#view-natspec .nsx-seg button{border:none;background:transparent;color:#6B7480;border-radius:9999px;padding:5px 14px;font-family:var(--font);font-size:11.5px;font-weight:500;line-height:1.3;cursor:pointer;box-shadow:none;}
#view-natspec .nsx-seg button.on{background:#fff;color:#2A323A;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08);}
#view-natspec .nsx-list{flex:1;min-height:0;overflow:auto;padding:12px;}

/* Trade-group headers (collapsible) and section rows */
#view-natspec .nsx-grp{display:flex;align-items:center;gap:10px;margin:12px 0 3px;padding:9px 8px 5px;border-radius:8px;cursor:pointer;user-select:none;}
#view-natspec .nsx-grp:first-child{margin-top:0;}
#view-natspec .nsx-chev{width:10px;flex-shrink:0;text-align:center;font-size:8px;color:#9BA3AC;}
#view-natspec .nsx-grp-t{flex:1;min-width:0;font-family:var(--font-mono);font-size:9.8px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6B7480;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-natspec .nsx-grp:hover .nsx-grp-t{color:#2A323A;}
#view-natspec .nsx-grp-n{flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:#9BA3AC;}
#view-natspec .nsx-row{display:flex;align-items:center;gap:10px;margin:0 0 3px;padding:6px 10px;border:1px solid transparent;border-radius:8px;cursor:pointer;}
#view-natspec .nsx-row:hover{background:#F7F7F7;}
#view-natspec .nsx-row.sel{background:#F5E9E7;border-color:#ECC5C6;}
#view-natspec .nsx-grp:focus-visible,#view-natspec .nsx-row:focus-visible{outline:2px solid #D9A0A2;outline-offset:-1px;}
#view-natspec .nsx-code{flex-shrink:0;font-family:var(--font-mono);font-size:10.5px;line-height:1.5;color:#2A323A;background:#F7F7F7;border:1px solid #E8EDF2;border-radius:6px;padding:1px 7px;white-space:nowrap;}
#view-natspec .nsx-row.sel .nsx-code{background:#fff;}
#view-natspec .nsx-t{flex:1;min-width:0;font-size:12.5px;font-weight:400;color:#4A5560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-natspec .nsx-row.used .nsx-t,#view-natspec .nsx-row.sel .nsx-t{font-weight:600;color:#2A323A;}
#view-natspec .nsx-mark{flex-shrink:0;font-family:var(--font-mono);font-size:10px;line-height:1.4;border-radius:9999px;padding:2px 9px;background:#E4EADF;color:#4D5A3E;}
#view-natspec .nsx-empty{padding:44px 18px;text-align:center;font-size:12.5px;line-height:1.55;color:#9BA3AC;}

/* Detail card: header, standards, items (scrolls), actions (pinned) */
#view-natspec .nsx-dhead{padding:24px 26px 20px;flex-shrink:0;border-bottom:1px solid #E8EDF2;}
#view-natspec .nsx-dcode{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:500;color:#2A323A;background:#F7F7F7;border:1px solid #E8EDF2;border-radius:7px;padding:3px 10px;margin-bottom:11px;cursor:help;white-space:nowrap;}
#view-natspec .nsx-dtitle{font-family:var(--font-display);font-size:23px;font-weight:400;letter-spacing:-.4px;line-height:1.2;color:#2A323A;}
#view-natspec .nsx-rel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;}
#view-natspec .nsx-rel-l{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#9BA3AC;margin-right:2px;}
#view-natspec .nsx-rel-c{font-family:var(--font-mono);font-size:10px;line-height:1.5;color:#6B7480;background:#fff;border:1px solid #E8EDF2;border-radius:6px;padding:1px 7px;cursor:pointer;box-shadow:none;}
#view-natspec .nsx-rel-c:hover{color:#2A323A;border-color:#D2DAE3;background:#F7F7F7;}
/* Standards give way first when the card is short: the list becomes a small
   scroll box (no .tip inside it — rows carry title=), items keep ~2 rows. */
#view-natspec .nsx-std-sec{padding:22px 26px;flex:0 1 auto;min-height:0;display:flex;flex-direction:column;border-bottom:1px solid #E8EDF2;}
#view-natspec .nsx-std-sec .nsx-lbl{flex-shrink:0;align-self:flex-start;}
#view-natspec .nsx-std-list{flex:1 1 auto;min-height:56px;overflow:auto;}
#view-natspec .nsx-lbl{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#6B7480;margin-bottom:14px;cursor:help;white-space:nowrap;}
#view-natspec .nsx-lbl-n{display:inline-block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0;border-radius:9999px;padding:1px 7px;margin-left:4px;background:#E4EADF;color:#4D5A3E;vertical-align:top;}
#view-natspec .nsx-std{display:flex;align-items:baseline;gap:16px;height:30px;}
#view-natspec .nsx-std-n{width:124px;flex-shrink:0;font-family:var(--font-mono);font-size:11.5px;color:#3D4854;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-natspec .nsx-std-t{flex:1;min-width:0;font-size:12.5px;color:#6B7480;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-natspec .nsx-std.none .nsx-std-n{color:#B9BFC6;}
#view-natspec .nsx-std.none .nsx-std-t{color:#9BA3AC;}
#view-natspec .nsx-items-sec{flex:1 1 0;min-height:180px;display:flex;flex-direction:column;padding:22px 26px 16px;}
#view-natspec .nsx-items-sec .nsx-lbl{flex-shrink:0;align-self:flex-start;}
#view-natspec .nsx-items{flex:1;min-height:0;overflow:auto;}
#view-natspec .nsx-item{display:flex;align-items:center;gap:16px;height:52px;padding:0 16px;margin-bottom:6px;border:1px solid #E8EDF2;border-radius:9px;background:#FCFCFC;cursor:pointer;}
#view-natspec .nsx-item:hover{border-color:#D2DAE3;background:#fff;}
#view-natspec .nsx-item.none{cursor:default;border-color:#F0F2F5;}
#view-natspec .nsx-item.none:hover{border-color:#F0F2F5;background:#FCFCFC;}
#view-natspec .nsx-iid{flex-shrink:0;width:56px;font-family:var(--font-mono);font-size:11px;color:#6B7480;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-natspec .nsx-item.none .nsx-iid{color:#C1C0C2;}
#view-natspec .nsx-iname{flex:1;min-width:0;font-size:13px;font-weight:500;color:#2A323A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-natspec .nsx-item.none .nsx-iname{font-weight:400;color:#9BA3AC;}
#view-natspec .nsx-ifields{flex-shrink:0;font-family:var(--font-mono);font-size:11px;color:#6B7480;}
#view-natspec .nsx-ist{flex-shrink:0;width:84px;text-align:center;font-size:10.5px;font-weight:600;line-height:1.4;border-radius:9999px;padding:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-natspec .nsx-actions{flex-shrink:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:16px 26px;border-top:1px solid #E8EDF2;}
#view-natspec .nsx-actions button{display:inline-flex;align-items:center;height:34px;line-height:1.3;font-size:12.5px;white-space:nowrap;}
#view-natspec .nsx-actions .btn{padding:0 16px;font-weight:600;gap:6px;}
#view-natspec .nsx-actions .btn-ghost{padding:0 15px;font-weight:500;}
#view-natspec .nsx-actions .nsx-sch{margin-left:auto;}
#view-natspec .nsx-dempty{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 48px;text-align:center;font-size:13px;line-height:1.6;color:#9BA3AC;}

/* Short windows (laptops): tighten the vertical rhythm so both panes still
   fit without the page scrolling; below ~580px of pane height it scrolls. */
@media (max-height:820px){
  #view-natspec #ns-content{padding:18px 32px !important;}
  #view-natspec .nsx-head{margin-bottom:16px;}
  #view-natspec .nsx-top{padding:14px 16px 12px;}
  #view-natspec .nsx-seg{margin-top:10px;}
  #view-natspec .nsx-dhead{padding:18px 26px 14px;}
  #view-natspec .nsx-dcode{margin-bottom:8px;}
  #view-natspec .nsx-dtitle{font-size:21px;}
  #view-natspec .nsx-std-sec{padding:14px 26px;}
  #view-natspec .nsx-std{height:26px;}
  #view-natspec .nsx-lbl{margin-bottom:10px;}
  #view-natspec .nsx-items-sec{padding:14px 26px 10px;min-height:160px;}
  #view-natspec .nsx-item{height:46px;margin-bottom:5px;}
  #view-natspec .nsx-actions{padding:12px 26px;}
}