/* NTC RFI review – visual language of the response book (C2): navy + copper on sand paper,
   IBM Plex Serif headings, Plex Sans Condensed labels, one accent colour per SOW part. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 300; src: url(fonts/IBMPlexSans-Light.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; src: url(fonts/IBMPlexSans-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; src: url(fonts/IBMPlexSans-Italic.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; src: url(fonts/IBMPlexSans-Medium.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url(fonts/IBMPlexSans-SemiBold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; src: url(fonts/IBMPlexSans-Bold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 400; src: url(fonts/IBMPlexSansCondensed-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 500; src: url(fonts/IBMPlexSansCondensed-Medium.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; src: url(fonts/IBMPlexSansCondensed-SemiBold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 700; src: url(fonts/IBMPlexSansCondensed-Bold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; src: url(fonts/IBMPlexSerif-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: italic; src: url(fonts/IBMPlexSerif-Italic.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; font-weight: 500; src: url(fonts/IBMPlexSerif-Medium.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; font-weight: 600; src: url(fonts/IBMPlexSerif-SemiBold.ttf) format("truetype"); font-display: swap; }

:root {
  --navy-50: #f1f5f9; --navy-100: #e2e9f1; --navy-200: #c6d3e0; --navy-300: #9fb3c8; --navy-500: #4a6a8c;
  --navy-700: #1f3f62; --navy-800: #15304d; --navy-900: #0e2238;
  --copper-100: #f6ebde; --copper-200: #ead3b8; --copper-500: #bf8045; --copper-600: #a5682f; --copper-700: #8a5424;
  --sand-50: #fbf8f2; --sand-100: #f5efe3; --sand-200: #ebe1cc; --sand-300: #dccbab;
  --slate-100: #eceff2; --slate-200: #d5dbe1; --slate-300: #b7c0c9; --slate-500: #6e7a86; --slate-700: #46525e; --slate-900: #252d35;
  --sec-1: #1f3f62; --sec-2: #1d7470; --sec-3: #a5682f; --sec-4: #5f6b2b;
  --sec: var(--sec-1);
  --ink: var(--navy-900); --text: var(--slate-900); --muted: var(--slate-500); --rule: var(--slate-300); --rule-l: var(--slate-200);
  --paper: #fff; --bg: var(--sand-50); --ok: #3d6b3a; --bad: #9b2c2c;
  --cjk-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC";
  --cjk-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun";
  --sans: "IBM Plex Sans", var(--cjk-sans), Arial, sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", var(--cjk-sans), sans-serif;
  --serif: "IBM Plex Serif", var(--cjk-serif), Georgia, serif;
}
main.p1 { --sec: var(--sec-1); } main.p2 { --sec: var(--sec-2); } main.p3 { --sec: var(--sec-3); } main.p4 { --sec: var(--sec-4); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--text); background: var(--bg); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--copper-600); }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.boot { padding: 40px; color: var(--muted); }
b, strong { font-weight: 600; color: var(--ink); }

/* labels: small condensed caps, as in the book ("THE REQUIREMENT · VERBATIM") */
.lab, .eyebrow { font-family: var(--cond); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--copper-600); }
.lab.navy { color: var(--navy-700); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.en-sub { display: block; color: var(--muted); font-size: .86em; margin-top: 3px; font-family: var(--sans); font-weight: 400; }
.untrans { border-bottom: 1px dotted var(--muted); }
.ico { display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; flex: none; }

/* ---------- buttons, chips ---------- */
.btn { border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; padding: 5px 12px; color: var(--ink); font-family: var(--cond); font-weight: 500; letter-spacing: .02em; }
.btn:hover { border-color: var(--navy-700); color: var(--navy-700); }
.btn.primary { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.btn.primary:hover { background: var(--navy-700); color: #fff; }
.btn.copper { background: var(--copper-600); border-color: var(--copper-600); color: #fff; }
.btn.small { padding: 1px 8px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--cond); font-size: 12px; font-weight: 500; padding: 0 7px; line-height: 20px; border-radius: 1px;
  background: var(--slate-100); color: var(--slate-700); white-space: nowrap; border: 1px solid transparent; }
.chip.ref { background: transparent; border-color: var(--copper-500); color: var(--copper-700); font-variant-numeric: tabular-nums; }
.chip.ref:hover { background: var(--copper-100); }
.chip.r-强 { background: #dfe9dc; color: #2f5a2c; } .chip.r-中 { background: #f3ead2; color: #6f5418; }
.chip.r-弱 { background: #f3dfdc; color: #7c2d23; } .chip.r-无 { background: var(--slate-100); color: var(--slate-500); }
.chip.s-主打 { background: var(--copper-600); color: #fff; }
.chip.s-建议放掉 { background: transparent; border-color: var(--bad); color: var(--bad); }
.chip.scope-6912 { background: var(--copper-100); color: var(--copper-700); }
.chip.scope-oem { background: transparent; border-color: var(--slate-300); color: var(--slate-500); }
.chip.mem { color: #fff; }
.chip.mine { background: var(--copper-600); color: #fff; }
.chip.others { background: transparent; border-color: var(--slate-300); color: var(--muted); }
.chip.tier { background: var(--navy-800); color: #fff; }

/* ---------- login: the book cover ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); background: var(--navy-900); color: #fff; }
.cover { padding: 56px 56px 40px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(14,34,56,.15), rgba(14,34,56,.95) 72%), var(--cover-img, none) center / cover; }
.cover .top { display: flex; justify-content: space-between; font-family: var(--cond); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-200); }
.cover .tag { display: inline-block; margin-top: auto; align-self: flex-start; background: var(--copper-600); color: #fff; font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; }
.cover h1 { font-family: var(--serif); font-weight: 500; font-size: 48px; line-height: 1.08; margin: 18px 0 14px; color: #fff; }
.cover p { color: var(--navy-200); max-width: 460px; margin: 0; }
.cover .rule { height: 3px; width: 72px; background: var(--copper-500); margin: 26px 0 0; }
.login-card { background: var(--sand-50); color: var(--text); padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.login-card h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--ink); margin: 6px 0 6px; }
.login-card p { margin: 0 0 22px; color: var(--muted); }
.login-card label { display: block; margin: 16px 0 6px; }
.login-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 2px; background: #fff; font-size: 16px; }
.login-card input:focus { outline: 2px solid var(--copper-500); outline-offset: -1px; }
.login-card .company { padding: 10px 12px; background: var(--navy-800); color: #fff; font-weight: 600; border-left: 4px solid var(--copper-500); }
.login-card .err { color: var(--bad); font-size: 13px; margin-top: 10px; min-height: 1em; }
.login-card .btn.primary { width: 100%; padding: 11px; margin-top: 18px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.login-card .foot { margin-top: 30px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--rule-l); padding-top: 12px; }
.langsw { display: inline-flex; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; font-family: var(--cond); }
.langsw button { border: 0; background: transparent; padding: 3px 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.langsw button.on { background: var(--navy-800); color: #fff; }

/* ---------- shell ---------- */
header.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 52px;
  background: var(--navy-900); color: #fff; border-bottom: 3px solid var(--copper-600); }
header.top .brand { font-family: var(--serif); font-size: 17px; font-weight: 500; white-space: nowrap; color: #fff; }
header.top .brand small { font-family: var(--cond); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-300); margin-left: 10px; }
header.top .sp { flex: 1; }
header.top .langsw { border-color: rgba(255,255,255,.25); }
header.top .langsw button { color: var(--navy-200); }
header.top .langsw button.on { background: var(--copper-600); color: #fff; }
header.top .who { font-family: var(--cond); font-size: 13px; color: var(--navy-200); white-space: nowrap; }
header.top .who b { color: #fff; }
header.top select { background: var(--navy-800); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 2px; padding: 2px 6px; font-size: 13px; font-family: var(--cond); }
header.top .btn { background: transparent; color: var(--navy-100); border-color: rgba(255,255,255,.25); font-size: 13px; padding: 2px 10px; }
header.top .btn:hover { color: #fff; border-color: var(--copper-500); }
.menu-btn { display: none; }
.shell { display: grid; grid-template-columns: 284px minmax(0, 1fr); min-height: calc(100vh - 52px); }
nav.side { background: var(--paper); border-right: 1px solid var(--rule-l); position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; padding: 12px 0 40px; font-size: 14px; }
nav.side .grp { padding: 16px 18px 6px; }
nav.side a { display: flex; gap: 8px; padding: 4px 18px; color: var(--slate-900); align-items: baseline; border-left: 3px solid transparent; }
nav.side a:hover { background: var(--sand-100); color: var(--ink); }
nav.side a.on { background: var(--navy-50); border-left-color: var(--copper-600); color: var(--ink); font-weight: 600; }
nav.side a .no { font-family: var(--cond); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; font-size: 13px; }
nav.side a .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.side a .cc { font-family: var(--cond); font-size: 11px; background: var(--copper-600); color: #fff; padding: 0 5px; line-height: 16px; }
nav.side a.mine .no { color: var(--copper-600); font-weight: 700; }
nav.side details { border-top: 1px solid var(--rule-l); }
nav.side details summary { padding: 9px 18px; cursor: pointer; font-family: var(--cond); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; color: var(--ink); list-style: none; display: flex; gap: 8px; align-items: center; }
nav.side details summary::before { content: ""; width: 10px; height: 10px; background: var(--pc); flex: none; }
nav.side details summary::-webkit-details-marker { display: none; }
main { padding: 0 40px 90px; max-width: 1160px; width: 100%; }

/* ---------- running header (like the book page header) ---------- */
.runhead { display: flex; justify-content: space-between; gap: 12px; font-family: var(--cond); font-size: 12px; color: var(--muted); padding: 14px 0 10px; border-bottom: 1px solid var(--rule-l); margin-bottom: 26px; }
.runhead b { color: var(--sec); font-weight: 600; letter-spacing: .04em; }
h1.pg { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.15; margin: 0 0 8px; color: var(--ink); }
.kicker { font-family: var(--serif); font-size: 18px; color: var(--slate-700); margin-bottom: 18px; }
.sec { margin: 46px 0 12px; }
.sec > h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); margin: 0 0 4px; display: flex; align-items: baseline; gap: 12px; }
.sec > h2 .n { font-family: var(--cond); font-size: 13px; font-weight: 600; background: var(--sec); color: #fff; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; transform: translateY(-4px); flex: none; }
.sec > h2 .sp { flex: 1; }
.sec > .sub { color: var(--slate-700); margin: 0 0 16px; max-width: 760px; }
.sec > .bar { height: 2px; background: var(--sec); width: 100%; margin: 6px 0 18px; opacity: .9; }
.card { background: var(--paper); border: 1px solid var(--rule-l); border-top: 3px solid var(--sec); padding: 14px 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
figure { margin: 0; }
figure img { width: 100%; display: block; background: var(--sand-200); }
figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
figcaption .fno { font-family: var(--cond); font-weight: 600; color: var(--copper-600); margin-right: 6px; }
.svgfig img { background: #fff; border: 1px solid var(--rule-l); }

/* ---------- commentable blocks ---------- */
[data-bid] { position: relative; }
[data-bid].cmt-able:hover { outline: 1px dashed var(--copper-500); outline-offset: 4px; }
.cbtn { position: absolute; top: -10px; right: -10px; z-index: 5; display: none; border: 1px solid var(--copper-500); background: #fff; border-radius: 11px;
  font-family: var(--cond); font-size: 12px; padding: 0 7px; line-height: 20px; color: var(--copper-700); box-shadow: 0 1px 4px rgba(14,34,56,.18); }
[data-bid]:hover > .cbtn { display: block; }
.cbtn.has { display: block; background: var(--copper-600); color: #fff; border-color: var(--copper-600); }
[data-bid].active { outline: 2px solid var(--copper-600); outline-offset: 4px; }
.selbtn { position: absolute; z-index: 50; background: var(--navy-900); color: #fff; border: 0; border-left: 3px solid var(--copper-500); padding: 5px 12px; font-size: 13px; font-family: var(--cond); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.masked { background: repeating-linear-gradient(135deg, var(--sand-100), var(--sand-100) 7px, var(--sand-200) 7px, var(--sand-200) 14px);
  border: 1px dashed var(--sand-300); color: var(--slate-500); padding: 14px 16px; font-family: var(--cond); font-size: 13px; letter-spacing: .03em; display: flex; align-items: center; gap: 8px; min-height: 56px; }
.hl-on [data-hl] { box-shadow: inset 4px 0 0 var(--hlc, var(--copper-600)); background-image: linear-gradient(90deg, rgba(234,211,184,.55), rgba(234,211,184,.12)) !important; }

/* ---------- item: opener ---------- */
.opener { position: relative; margin: 0 -40px; }
.opener img { width: 100%; height: 440px; object-fit: cover; display: block; }
.opener .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,34,56,0) 45%, rgba(14,34,56,.55)); pointer-events: none; }
.opener figcaption { position: absolute; right: 40px; bottom: 14px; max-width: 360px; color: #fff; background: rgba(14,34,56,.72); padding: 6px 10px; font-size: 12px; }
.inum { position: absolute; left: 40px; bottom: -46px; background: var(--navy-900); color: #fff; padding: 16px 24px 14px; min-width: 190px; z-index: 3; }
.inum .lab { color: var(--navy-300); }
.inum .no { font-family: var(--serif); font-size: 62px; line-height: 1; font-weight: 500; margin: 2px 0 10px; }
.inum .tier { display: inline-block; background: var(--copper-600); color: #fff; font-family: var(--cond); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; }
.ititle { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; padding-top: 70px; }
.ititle .partline { font-family: var(--cond); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); display: flex; gap: 8px; align-items: center; }
.ititle .partline::before { content: ""; width: 14px; height: 14px; background: var(--sec); }
.ititle h1.pg { margin-top: 8px; }
.verbatim { margin: 18px 0 14px; padding-left: 16px; border-left: 3px solid var(--sec); }
.verbatim .q { font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--ink); }
.verbatim .src { font-size: 12px; color: var(--muted); margin-top: 4px; }
.plain { font-size: 16.5px; line-height: 1.7; }
.meta dl { margin: 0; }
.meta dt { margin: 0 0 4px; }
.meta dd { margin: 0 0 18px; font-size: 14.5px; color: var(--ink); }
.meta .chips { margin: 0; }
.subnav { position: sticky; top: 52px; z-index: 12; background: rgba(251,248,242,.96); backdrop-filter: blur(4px); border-bottom: 1px solid var(--rule-l); display: flex; gap: 2px; margin: 28px -40px 0; padding: 0 40px; overflow-x: auto; }
.subnav a { font-family: var(--cond); font-size: 13px; color: var(--slate-700); padding: 9px 12px 8px; border-bottom: 2px solid transparent; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.subnav a .n { background: var(--slate-300); color: #fff; border-radius: 50%; width: 17px; height: 17px; display: inline-grid; place-items: center; font-size: 11px; }
.subnav a:hover { color: var(--ink); border-bottom-color: var(--sec); }
.subnav a:hover .n { background: var(--sec); }
.subnav .tag { margin-left: auto; align-self: center; }

/* parts strip ("THREE PARTS, READ AS ONE FACILITY") */
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.part-card { padding: 14px 18px 14px 0; }
.part-card + .part-card { padding-left: 18px; border-left: 1px solid var(--rule-l); }
.part-card h4 { margin: 0 0 4px; font-size: 15px; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.part-card h4 .ico { color: var(--sec); }
.part-card div { font-size: 14px; color: var(--slate-700); }

/* options / readings */
.opt { padding: 0; border-top: 0; border: 0; background: transparent; display: flex; flex-direction: column; gap: 6px; }
.opt .ph { position: relative; }
.opt .ph img { aspect-ratio: 3/2; object-fit: cover; }
.opt .code { position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center; background: var(--navy-900); color: #fff; font-family: var(--serif); font-size: 20px; }
.opt .codeline { font-family: var(--cond); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-600); font-weight: 600; margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.opt .codeline .c { background: var(--navy-900); color: #fff; width: 18px; height: 18px; display: inline-grid; place-items: center; letter-spacing: 0; }
.opt h4 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--ink); margin: 0; }
.opt .impl { border-top: 2px solid var(--copper-500); padding-top: 6px; margin-top: 6px; font-size: 14px; }
.opt .txt { font-size: 14.5px; }
.dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid var(--navy-800); display: inline-block; }
.dots i.f { background: var(--navy-800); }
.dots i.p { background: repeating-linear-gradient(135deg, var(--navy-800), var(--navy-800) 1.5px, #fff 1.5px, #fff 3px); }
.rating-row { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.rating-row .k { width: 62px; font-family: var(--cond); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.coreq { background: var(--paper); border: 1px solid var(--rule-l); border-left: 4px solid var(--copper-600); padding: 16px 18px; }
.coreq .q { font-family: var(--serif); font-size: 20px; color: var(--ink); line-height: 1.35; }
.coreq .why { color: var(--slate-700); font-size: 14px; margin-top: 4px; }
table.scen, table.tbl { border-collapse: collapse; width: 100%; font-size: 14px; margin-top: 10px; }
table.scen td { border-top: 1px solid var(--rule-l); padding: 8px 8px 8px 0; vertical-align: top; }
table.scen td:first-child { width: 36%; font-weight: 600; color: var(--navy-800); }
table.scen td:first-child .lab { margin-right: 6px; }
table.tbl td, table.tbl th { border-bottom: 1px solid var(--rule-l); padding: 7px 10px 7px 0; vertical-align: top; text-align: left; }
table.tbl th { font-family: var(--cond); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--copper-600); font-weight: 600; border-bottom: 1px solid var(--rule); }

/* how it works: step chain */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--rule); counter-reset: st; }
.step { position: relative; padding: 14px 12px 12px 0; border: 0; background: transparent; }
.step + .step { padding-left: 12px; border-left: 1px dashed var(--rule); }
.step .head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--sec); }
.step .head .ico { width: 30px; height: 30px; }
.step .head .num { counter-increment: st; font-family: var(--cond); font-size: 11px; font-weight: 700; background: var(--sec); color: #fff; border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; }
.step .head .num::before { content: counter(st); }
.step h4 { margin: 0 0 3px; font-size: 15px; color: var(--ink); }
.step .its { font-family: var(--cond); font-size: 12px; margin-top: 6px; color: var(--muted); }
.step.on { background: linear-gradient(180deg, var(--navy-50), transparent); }
.step.on h4 { color: var(--sec); }
.hiw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px; align-items: start; margin-bottom: 22px; }

/* questions: big numbers, like "What we need to confirm" */
table.qtab { width: 100%; border-collapse: collapse; background: transparent; }
table.qtab th { font-family: var(--cond); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--copper-600); text-align: left; font-weight: 600; padding: 0 12px 6px 0; border-bottom: 2px solid var(--sec); }
table.qtab td { border-bottom: 1px solid var(--rule-l); padding: 10px 14px 10px 0; vertical-align: top; }
table.qtab td.no { font-family: var(--serif); font-size: 28px; color: var(--sec); width: 46px; line-height: 1; padding-top: 12px; }
table.qtab td.q { font-weight: 500; color: var(--ink); width: 58%; }
table.qtab td.w { color: var(--slate-700); font-size: 14px; }
table.params td:first-child { width: 30%; }
table.params td b { display: block; }

/* track record panel */
.track-panel { background: var(--navy-900); padding: 22px 22px 18px; color: #fff; }
.track-panel .ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 10px; margin-bottom: 16px; }
.track-panel .ph h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0; color: #fff; }
.track-panel .ph .lab { color: var(--navy-300); text-align: right; }
.track-panel .grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px 22px; }
.tcard { border-top: 1px solid rgba(255,255,255,.22); padding: 10px 0 4px; }
.tcard .mem { font-family: var(--cond); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-200); display: flex; gap: 6px; align-items: center; }
.tcard .mem::before { content: ""; width: 8px; height: 8px; background: var(--mc, var(--copper-500)); }
.tcard .fig { font-family: var(--serif); font-size: 30px; color: #fff; margin: 4px 0 2px; line-height: 1.15; }
.tcard h4 { margin: 4px 0 4px; font-size: 15px; color: #fff; font-weight: 600; }
.tcard .d { font-size: 13.5px; color: var(--navy-200); line-height: 1.5; }
.tcard.hlt { grid-column: 1 / -1; background: var(--copper-600); border: 0; padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 4px 24px; align-items: center; }
.tcard.hlt .badge { grid-column: 1 / -1; justify-self: start; font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: .14em; background: var(--navy-900); color: #fff; padding: 2px 8px; }
.tcard.hlt .mem { color: #fff; } .tcard.hlt .mem::before { background: #fff; }
.tcard.hlt .fig { font-size: 38px; grid-row: span 3; }
.tcard.hlt .d { color: #fff; }
.tcard.cap .d { color: var(--navy-100); }
.track-panel .masked { background: repeating-linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 7px, rgba(255,255,255,.08) 7px, rgba(255,255,255,.08) 14px);
  border-color: rgba(255,255,255,.2); color: var(--navy-300); }
.hl-on .track-panel [data-hl] { background-image: none !important; box-shadow: none; }
.hl-on .track-panel [data-hl]:not(.hlt) { background: rgba(191,128,69,.18) !important; outline: 1px solid var(--copper-500); outline-offset: 0; padding-left: 10px; padding-right: 10px; }
.add-ref { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.add-ref .btn { background: transparent; color: var(--copper-200); border-color: var(--copper-500); }
.add-ref .btn:hover { background: var(--copper-600); color: #fff; }
.price { margin-top: 14px; background: var(--paper); border: 1px solid var(--rule-l); display: grid; grid-template-columns: 220px 1fr; }
.price .h { background: var(--navy-900); color: #fff; padding: 10px 14px; font-family: var(--cond); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.price .b { padding: 10px 14px; font-weight: 500; color: var(--ink); }
ul.drivers { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 30px; }
ul.drivers li { padding: 6px 0 6px 18px; border-bottom: 1px solid var(--rule-l); break-inside: avoid; position: relative; }
ul.drivers li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; background: var(--copper-500); }
.internal { background: #fffbea; border: 1px solid #ead9a0; border-left: 4px solid var(--copper-600); padding: 14px 18px; font-size: 13px; margin-top: 40px; white-space: pre-wrap; }
.internal h3 { margin: 0 0 6px; }
.delta { border-top-color: var(--copper-600); background: var(--copper-100); }
.prevnext { display: flex; justify-content: space-between; margin-top: 50px; gap: 12px; border-top: 1px solid var(--rule); padding-top: 16px; }
.prevnext a { display: flex; flex-direction: column; max-width: 48%; }
.prevnext a .lab { color: var(--muted); }
.prevnext a span:last-child { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.prevnext a:hover span:last-child { color: var(--copper-600); }
.reason h4, .provide h4 { margin: 0 0 4px; font-size: 15px; color: var(--ink); display: flex; gap: 8px; align-items: center; }

/* ---------- chapter ---------- */
.chap .opener { margin-bottom: 0; }
.chap .opener img { height: 380px; }
.chap .chno { font-family: var(--serif); font-size: 64px; color: var(--copper-600); line-height: 1; margin: 34px 0 6px; }
.chap .md { margin: 10px 0; font-size: 15.5px; line-height: 1.7; max-width: 820px; }
.chap .md h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); margin: 34px 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--navy-800); }
.chap .md h3 { font-family: var(--cond); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-600); margin: 22px 0 4px; }
.chap .md p { margin: 0; }
.chap .md img { max-width: 100%; background: #fff; border: 1px solid var(--rule-l); }
.chap .md figure { margin: 10px 0; }
.chap .md table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
.chap .md td, .chap .md th { border-bottom: 1px solid var(--rule-l); padding: 5px 8px; text-align: left; }
.chap .md th { font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; color: var(--copper-600); font-size: 12px; border-bottom: 2px solid var(--navy-800); }
.chap .md .keyfacts { background: var(--navy-900); color: #fff; padding: 14px 20px; }
.chap .md .keyfacts b, .chap .md .keyfacts strong { color: var(--copper-200); }
.chap .md .keyfacts ul { padding-left: 18px; margin: 0; }
.chap .md .callout { background: var(--copper-100); border-left: 4px solid var(--copper-600); padding: 12px 18px; }
.chap .md ul { margin: 0; padding-left: 20px; }
.chap .md blockquote { margin: 0; padding-left: 16px; border-left: 3px solid var(--copper-500); font-family: var(--serif); font-size: 18px; color: var(--ink); }

/* ---------- overview ---------- */
.ov-head { background: var(--navy-900); color: #fff; margin: 0 -40px 0; padding: 36px 40px 30px; position: relative; overflow: hidden; }
.ov-head::after { content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; border: 1px solid rgba(191,128,69,.35); border-radius: 50%; }
.ov-head .lab { color: var(--copper-200); }
.ov-head h1 { font-family: var(--serif); font-weight: 500; font-size: 38px; margin: 8px 0 6px; color: #fff; }
.ov-head p { margin: 0; color: var(--navy-200); max-width: 720px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 26px 0 0; border-top: 1px solid rgba(255,255,255,.18); }
.kpi { padding: 14px 18px 0 0; }
.kpi + .kpi { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }
.kpi b { display: block; font-family: var(--serif); font-weight: 500; font-size: 34px; color: #fff; line-height: 1.1; }
.kpi b small { font-size: 16px; color: var(--navy-300); }
.kpi span { font-family: var(--cond); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-300); }
.kpi .bar4 { display: flex; height: 6px; margin: 8px 0 6px; width: 100%; max-width: 160px; }
.kpi .bar4 i { display: block; }
.partbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 -40px; }
.partbar a { padding: 12px 18px; color: #fff; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--cond); letter-spacing: .06em; text-transform: uppercase; font-size: 13px; font-weight: 600; }
.partbar a b { color: #fff; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: 0; }
.partbar a:hover { filter: brightness(1.15); color: #fff; }
.partbar a.on { box-shadow: inset 0 -4px 0 var(--copper-200); }
.help { border-left: 3px solid var(--copper-500); background: var(--paper); padding: 10px 16px; font-size: 14px; margin: 22px 0 14px; color: var(--slate-700); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--paper); border: 1px solid var(--rule-l); border-top: 2px solid var(--navy-800); padding: 10px 12px; margin-bottom: 0; position: sticky; top: 52px; z-index: 10; }
.filters select, .filters input { border: 1px solid var(--rule); border-radius: 2px; padding: 4px 8px; font-size: 13px; background: #fff; font-family: var(--cond); }
.filters select.set { border-color: var(--copper-600); background: var(--copper-100); color: var(--copper-700); }
.filters input[type=search] { min-width: 200px; flex: 1; font-family: var(--sans); }
.filters .cnt { font-family: var(--cond); font-size: 13px; color: var(--muted); margin-left: auto; }
.filters .cnt b { color: var(--ink); font-size: 16px; }
table.ov { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule-l); border-top: 0; font-size: 14px; }
table.ov th { text-align: left; font-family: var(--cond); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--copper-600); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--sand-50); }
table.ov td { padding: 10px; border-bottom: 1px solid var(--rule-l); vertical-align: top; }
table.ov tr[data-go]:hover td { background: var(--sand-50); cursor: pointer; }
table.ov td.no { font-family: var(--serif); font-size: 19px; color: var(--pc); white-space: nowrap; border-left: 4px solid var(--pc); }
table.ov tr.mine td.no { background: linear-gradient(90deg, var(--copper-100), transparent); }
table.ov .ttl { font-weight: 600; color: var(--ink); font-size: 15px; }
table.ov .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
table.ov .dom { font-family: var(--cond); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pc); font-weight: 600; }
table.ov td.nw { white-space: nowrap; }
table.ov .cm { font-family: var(--cond); white-space: nowrap; }
table.ov .cm b { color: var(--copper-600); }
.part-sep td { background: var(--pc) !important; color: #fff; font-family: var(--cond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; padding: 7px 12px !important; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--cond); font-size: 12px; color: var(--muted); margin: 10px 0; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }

/* ---------- drawer ---------- */
.drawer { position: fixed; top: 52px; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--paper); border-left: 1px solid var(--rule);
  box-shadow: -10px 0 30px rgba(14,34,56,.14); z-index: 40; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .18s; }
.drawer.open { transform: none; }
.drawer .dh { padding: 14px 18px 12px; background: var(--navy-900); color: #fff; display: flex; gap: 8px; align-items: flex-start; border-bottom: 3px solid var(--copper-600); }
.drawer .dh .t { flex: 1; font-family: var(--serif); font-size: 18px; }
.drawer .dh .t .lab { display: block; color: var(--copper-200); margin-bottom: 2px; font-family: var(--cond); }
.drawer .dh .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.drawer .db { flex: 1; overflow-y: auto; padding: 14px 18px; }
.ctx { border-left: 3px solid var(--navy-300); background: var(--navy-50); padding: 8px 12px; font-size: 13px; color: var(--slate-700); max-height: 150px; overflow: auto; margin-bottom: 14px; }
.quote { border-left: 3px solid var(--copper-500); padding: 5px 10px; background: var(--copper-100); font-size: 13px; margin: 6px 0; white-space: pre-wrap; font-family: var(--serif); }
.cmt { border-top: 1px solid var(--rule-l); padding: 12px 0; }
.cmt:first-child { border-top: 0; }
.cmt .meta { font-family: var(--cond); font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cmt .meta b { color: var(--ink); font-family: var(--sans); font-size: 13.5px; }
.cmt .body { white-space: pre-wrap; margin: 6px 0; font-size: 14.5px; color: var(--text); }
.cmt .reply { margin-left: 14px; border-left: 2px solid var(--copper-200); padding-left: 12px; margin-top: 6px; }
.cmt .reply .cmt { border-top: 0; padding: 6px 0; }
.cmt .files a { display: inline-block; font-size: 13px; margin-right: 10px; }
.cmt .files img { max-width: 130px; max-height: 96px; border: 1px solid var(--rule-l); display: block; margin-top: 4px; }
.cmt .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cmt .acts select { border: 1px solid var(--rule); border-radius: 2px; font-size: 13px; font-family: var(--cond); }
.st { font-family: var(--cond); font-size: 11px; padding: 0 7px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.st-open { background: var(--copper-600); color: #fff; }
.st-accepted { background: var(--navy-700); color: #fff; }
.st-done { background: var(--ok); color: #fff; }
.st-rejected { background: var(--slate-200); color: var(--slate-700); }
.chg { font-family: var(--cond); font-size: 12px; color: var(--copper-700); }
form.cf { border-top: 1px solid var(--rule); padding: 14px 18px; background: var(--sand-50); display: flex; flex-direction: column; gap: 8px; }
form.cf textarea { width: 100%; min-height: 96px; border: 1px solid var(--rule); border-radius: 2px; padding: 8px 10px; resize: vertical; background: #fff; }
form.cf .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.cf select { border: 1px solid var(--rule); border-radius: 2px; padding: 4px 6px; background: #fff; font-family: var(--cond); }
form.cf .refgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
form.cf .refgrid input { border: 1px solid var(--rule); border-radius: 2px; padding: 6px 8px; font-size: 13px; background: #fff; }
form.cf .refgrid input.full { grid-column: 1 / -1; }
.cmt form.cf { padding: 10px 0 0; background: transparent; border-top: 0; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--navy-900); color: #fff; border-left: 4px solid var(--copper-500); padding: 9px 18px; z-index: 100; font-size: 14px; }
.diff-old { background: #f8e9e7; color: #7c2d23; text-decoration: line-through; font-size: 13px; padding: 2px 6px; }
.diff-new { background: #e6efe3; color: #2f5a2c; font-size: 13px; padding: 2px 6px; }
.page-head { padding: 34px 0 6px; }

@media (max-width: 1100px) { .ititle { grid-template-columns: 1fr; } .hiw-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; } .cover { min-height: 320px; padding: 32px 24px; } .cover h1 { font-size: 34px; } .login-card { padding: 32px 24px; }
  .shell { grid-template-columns: 1fr; }
  nav.side { position: fixed; left: 0; top: 52px; width: 290px; z-index: 35; transform: translateX(-105%); transition: transform .18s; box-shadow: 4px 0 20px rgba(0,0,0,.15); }
  nav.side.open { transform: none; }
  .menu-btn { display: inline-block; }
  main { padding: 0 16px 80px; }
  .opener, .ov-head, .partbar, .subnav { margin-left: -16px; margin-right: -16px; }
  .ov-head, .subnav { padding-left: 16px; padding-right: 16px; }
  .opener img { height: 260px; } .opener figcaption { display: none; }
  .inum { left: 16px; bottom: -36px; padding: 10px 16px; min-width: 0; } .inum .no { font-size: 44px; }
  .partbar { grid-template-columns: repeat(2, 1fr); }
  header.top { gap: 8px; padding: 0 10px; } header.top .brand { font-size: 15px; }
  header.top .brand small, header.top .who, header.top label.who { display: none; }
  table.ov .hide-m { display: none; }
  ul.drivers { columns: 1; }
  .price { grid-template-columns: 1fr; }
  h1.pg { font-size: 27px; } .sec > h2 { font-size: 22px; }
}
.cover .langsw { border-color: rgba(255,255,255,.35); }
.cover .langsw button { color: var(--navy-100); letter-spacing: 0; text-transform: none; }
.cover .langsw button.on { background: var(--copper-600); color: #fff; }
/* changed in this version */
[data-bid].chg { box-shadow: inset 3px 0 0 #3d7a8a; }
[data-bid].chg::before { content: attr(data-chgl); position: absolute; right: 26px; top: -9px; z-index: 4; font-family: var(--cond); font-size: 10.5px; letter-spacing: .06em; background: #3d7a8a; color: #fff; padding: 0 6px; line-height: 16px; pointer-events: none; }
td[data-bid].chg::before, li[data-bid].chg::before { top: 0; }
.chip.chgc { background: #dceef2; color: #1d5a68; }
nav.side .chgdot { width: 7px; height: 7px; border-radius: 50%; background: #3d7a8a; align-self: center; flex: none; }
.track-panel [data-bid].chg { box-shadow: inset 0 3px 0 #6fb3c4; }
.summary-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
/* mobile overflow fixes */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.track-panel .grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
header.top .btn { white-space: nowrap; }
.ovwrap { overflow-x: auto; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  html, body { overflow-x: hidden; }
  header.top .langsw button[data-lang="both"] { display: none; }
  header.top .brand { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  header.top .sp { display: none; }
  .ititle { padding-top: 56px; }
  table.ov td:nth-child(6), table.ov th:nth-child(6) { display: none; }
  .filters { position: static; }
  .filters input[type=search] { min-width: 0; width: 100%; }
  .filters select { flex: 1 1 45%; }
  .track-panel { padding: 16px 14px; }
  .tcard.hlt { grid-template-columns: 1fr; } .tcard.hlt .fig { grid-row: auto; }
  .subnav { top: 52px; }
  .drawer { width: 100vw; }
  table.qtab td.no { width: 30px; font-size: 22px; } table.qtab td.w { display: block; padding-top: 0; } table.qtab th:last-child { display: none; }
  table.qtab tr { display: grid; grid-template-columns: 30px 1fr; } table.qtab td.w { grid-column: 2; }
}
@media (max-width: 900px) { .filters input[type=search] { flex: 1 1 100%; } }