/* ───────────────────────────────────────────────────────────────
   gridcarbon — measurement record
   Palette: ledger sage paper, green-black ink, viridian plotter pen
   Type: Spectral (prose + display) / IBM Plex Mono (data + code)
   ─────────────────────────────────────────────────────────────── */

:root{
  --mast-h:     3.3rem;
  --paper:      #e8eae4;
  --panel:      #f4f5f1;
  --panel-deep: #dee2d9;
  --ink:        #141c18;
  --muted:      #4e5a54;
  --rule:       #c6cbc1;
  --rule-soft:  #d5d9d0;
  --grid:       #b9bfb4;
  --accent:     #0c6b5b;
  --accent-dim: #0c6b5b33;
  --shadow:     0 1px 0 #ffffff80, 0 12px 28px -22px #141c1866;

  --serif:      ui-serif, Spectral, Georgia, 'Times New Roman', serif;
  --mono:       ui-monospace, SFMono-Regular, 'SF Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;

  --measure: 40rem;
  --rail: 9.5rem;
  --gap: 2.75rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:      #101310;
    --panel:      #191d18;
    --panel-deep: #0a0c0a;
    --ink:        #e4e7df;
    --muted:      #9aa396;
    --rule:       #2e342c;
    --rule-soft:  #23281f;
    --grid:       #3b4238;
    --accent:     #5fcfb4;
    --accent-dim: #5fcfb43d;
    --shadow:     0 1px 0 #ffffff0a, 0 14px 30px -24px #000;
  }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.02rem, .96rem + .28vw, 1.14rem);
  line-height:1.62;
  font-feature-settings:"kern" 1, "liga" 1;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--accent-dim); }

a{ color:var(--accent); text-decoration-thickness:.06em; text-underline-offset:.18em; }
a:hover{ text-decoration-thickness:.11em; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

h1,h2,h3{ font-weight:600; line-height:1.14; margin:0; letter-spacing:-.012em; }

hr{ border:0; border-top:1px solid var(--rule); margin:0; }

sub{
  font-size:.68em;
  line-height:0;
  position:relative;
  vertical-align:baseline;
  bottom:-.24em;
}

/* ── shell ─────────────────────────────────────────────── */

.wrap{
  max-width:74rem;
  margin-inline:auto;
  padding-inline:clamp(1.15rem, 4vw, 3rem);
}

.eyebrow{
  font-family:var(--mono);
  font-size:.688rem;
  font-weight:500;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

/* ── masthead ──────────────────────────────────────────── */

.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.masthead .wrap{
  display:flex; align-items:baseline; gap:1.5rem;
  padding-block:.85rem;
}
.wordmark{
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark::before{
  content:"";
  display:inline-block;
  width:.34rem; height:.9rem;
  margin-right:.5rem;
  vertical-align:-.11rem;
  background:var(--accent);
}
.masthead nav{ margin-left:auto; }
.masthead ul{
  list-style:none; display:flex; gap:1.35rem;
  margin:0; padding:0;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.03em;
}
.masthead a:not(.wordmark){ color:var(--muted); text-decoration:none; }
.masthead a:not(.wordmark):hover{ color:var(--ink); text-decoration:underline; text-underline-offset:.3em; }

@media (max-width:820px){
  .masthead{ position:static; }
  .masthead .wrap{ flex-wrap:wrap; gap:.6rem 1.2rem; }
  .masthead nav{ margin-left:0; width:100%; }
  .masthead ul{ gap:1.1rem; flex-wrap:wrap; }
}

/* ── hero ──────────────────────────────────────────────── */

.hero{ border-bottom:1px solid var(--rule); }
.hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.75rem);
  padding-block:clamp(2.1rem,4.2vh,3.1rem) clamp(2.4rem,4.6vh,3.4rem);
  align-items:start;
}

.hero-meta{
  display:flex; gap:.55rem; flex-wrap:wrap; align-items:center;
  margin-bottom:1.15rem;
}
.hero-meta .eyebrow + .eyebrow::before{
  content:"/"; margin-right:.55rem; color:var(--rule);
}

h1{
  font-size:clamp(2.45rem, 1.3rem + 3.4vw, 4rem);
  font-weight:300;
  line-height:1.03;
  letter-spacing:-.024em;
  margin-bottom:1.05rem;
  text-wrap:balance;
}

.lede{
  font-size:1.06em;
  color:var(--muted);
  margin:0 0 1.35rem;
  max-width:33rem;
}
.lede strong{ font-weight:600; color:var(--ink); }

.hero-links{
  display:flex; flex-direction:column; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; line-height:1.5;
}
.hero-links{ word-break:normal; overflow-wrap:break-word; }
.hero-links .k{ color:var(--muted); }

/* ── code panel ────────────────────────────────────────── */

.panel{
  background:var(--panel);
  border:1px solid var(--rule);
  box-shadow:var(--shadow);
  min-width:0; /* grid item 默认 min-width:auto，会被内部不换行的命令行撑破布局 */
}
.panel figcaption{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.7rem .95rem;
  border-bottom:1px solid var(--rule);
}
.panel figcaption .eyebrow{ color:var(--ink); }

[role="tablist"]{
  display:flex; gap:0;
  min-width:0;                 /* never let the strip widen its column */
  border-bottom:1px solid var(--rule);
  overflow-x:auto;
  scrollbar-width:none;
}
[role="tablist"]::-webkit-scrollbar{ display:none; }
[role="tab"]{
  appearance:none;
  flex:1 0 auto;
  background:transparent;
  border:0;
  border-right:1px solid var(--rule-soft);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  padding:.62rem .7rem;
  font-family:var(--mono); font-size:.67rem; letter-spacing:.03em;
  color:var(--muted);
  text-align:left;
  cursor:pointer;
  white-space:nowrap;
}
[role="tab"]:last-child{ border-right:0; }
[role="tab"]:hover{ color:var(--ink); }
[role="tab"][aria-selected="true"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
  background:var(--paper);
}

@media (max-width:660px){
  [role="tablist"]{ flex-wrap:wrap; overflow-x:visible; }
  [role="tab"]{ flex:1 1 auto; border-bottom-width:2px; margin-bottom:0; }
  [role="tab"][aria-selected="true"]{ background:transparent; }
}

.snip{ padding:.9rem .95rem 1.05rem; }
.snip .cmd{
  display:flex; gap:.6rem; align-items:flex-start;
  min-width:0; /* 否则 pre 的 white-space:pre 会把 min-content 撑成整条 URL 的长度 */
}
/* 命令横向滚动而不是任意位置断字 —— 照着抄的人不能拿到断成两截的 URL */
.snip .cmd pre{
  white-space:pre;
  overflow-x:auto;
  overflow-wrap:normal;
  word-break:normal;
  scrollbar-width:thin;
  min-width:0;
  flex:1;
  padding-bottom:.2rem;
}
.snip .cmd pre:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.snip .prompt{ color:var(--accent); font-family:var(--mono); font-size:.79rem; line-height:1.62; user-select:none; }
pre{
  margin:0;
  font-family:var(--mono);
  font-size:.79rem;
  line-height:1.62;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  color:var(--ink);
}
.snip .out{
  margin-top:.85rem;
  padding-top:.85rem;
  border-top:1px dashed var(--rule);
  color:var(--muted);
  max-height:13.5rem;
  overflow:auto;
}
.snip .out .t-key{ color:var(--ink); }
.snip .out .t-num{ color:var(--accent); }

.copy{
  appearance:none;
  background:transparent;
  border:1px solid var(--rule);
  color:var(--muted);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.34rem .6rem;
  cursor:pointer;
  white-space:nowrap;
}
.copy:hover{ color:var(--ink); border-color:var(--muted); }
.copy[data-done="1"]{ color:var(--accent); border-color:var(--accent); }

@media (max-width:900px){
  /* 必须是 minmax(0,1fr)：裸 1fr 隐含 minmax(auto,1fr)，auto=min-content，
     命令行不换行时会把这一列撑到 406px，整页横向溢出。 */
  .hero .wrap{ grid-template-columns:minmax(0,1fr); }
}

/* ── figure: the strip chart ───────────────────────────── */

.figure{ border-bottom:1px solid var(--rule); }
.figure .wrap{ padding-block:clamp(2.4rem,5vw,3.4rem); }

.fig-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem 2rem; flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.fig-head h2{
  font-size:clamp(1.35rem,1.1rem+.7vw,1.7rem);
  font-weight:400;
  letter-spacing:-.01em;
  margin-top:.42rem;
  max-width:34rem;
}
.fig-head p.note{
  font-size:.86rem; color:var(--muted); margin:.5rem 0 0; max-width:34rem;
}

.sorts{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.sorts .eyebrow{ margin-right:.15rem; }
.sorts button{
  appearance:none;
  background:transparent;
  border:1px solid var(--rule);
  color:var(--muted);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  padding:.3rem .58rem;
  cursor:pointer;
}
.sorts button:hover{ color:var(--ink); border-color:var(--muted); }
.sorts button[aria-pressed="true"]{
  color:var(--paper); background:var(--ink); border-color:var(--ink);
}

.scroller{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
@media (max-width:900px){
  .scroller{ overflow-x:auto; }
}
.scroller:focus-visible{ outline-offset:-2px; }
/* .scroller 一旦横向可滚，就成了滚动容器；sticky 在不纵向滚动的容器里只会
   把表头钉在错误偏移上盖住首行数据 —— 该断点直接取消 sticky。 */
@media (max-width:900px){
  .scroller thead th{ position:static; }
}

table{
  width:100%;
  min-width:44rem;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
caption{ text-align:left; }
thead th{
  font-family:var(--mono);
  font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:.6rem .6rem;
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky; top:var(--mast-h); z-index:2;
  white-space:nowrap;
  box-shadow:0 1px 0 var(--rule);
}
thead th.num{ text-align:right; }
tbody td{
  padding:.42rem .6rem;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:middle;
}
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:var(--panel); }

td.zone{
  font-family:var(--mono); font-size:.79rem; font-weight:500;
  white-space:nowrap; width:1%;
}
td.name{ font-size:.93rem; white-space:nowrap; color:var(--ink); }
td.val{
  font-family:var(--mono); font-size:.86rem;
  text-align:right; white-space:nowrap; width:1%;
  font-variant-numeric:tabular-nums;
}
td.src, td.age{
  font-family:var(--mono); font-size:.7rem; color:var(--muted);
  white-space:nowrap; width:1%;
}
td.age{ text-align:right; }

/* group separator rows */
tr.group th{
  font-family:var(--mono);
  font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:1.05rem .6rem .32rem;
  border-bottom:1px solid var(--rule);
}

/* the pen trace */
td.trace{ width:46%; padding-inline:.6rem; }
.axis{
  position:relative;
  height:1.15rem;
  background-image:repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 20%);
  background-position:left center;
}
.axis::after{
  content:""; position:absolute; right:0; top:0; bottom:0;
  border-right:1px solid var(--grid);
}
.pen{
  position:absolute; top:50%; left:0;
  height:1.5px; margin-top:-.75px;
  background:var(--accent);
  width:var(--w,0%);
  transform-origin:left center;
}
.pen::after{
  content:""; position:absolute; right:0; top:50%;
  width:2px; height:11px; margin-top:-5.5px;
  background:var(--accent);
}
.pen.over::before{
  content:"»";
  position:absolute; right:-.85rem; top:50%;
  transform:translateY(-50%);
  font-family:var(--mono); font-size:.72rem; line-height:1;
  color:var(--accent);
}
.pen.alt{ background:transparent; border-top:1.5px dashed var(--accent); height:0; }
.pen.alt::after{ height:9px; margin-top:-4.5px; }

@media (prefers-reduced-motion:no-preference){
  .pen{ animation:draw .5s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.mark{
  font-family:var(--serif);
  color:var(--muted);
  font-size:1.15em;
  line-height:0;
  text-decoration:none;
  margin-left:.18em;
}
a.mark:hover{ color:var(--accent); }

th.axhead{ padding-bottom:.5rem; }
th.axhead .scale{
  position:relative; display:block; height:1em;
  font-size:.62rem; letter-spacing:.04em; font-weight:400;
}
th.axhead .scale i{
  position:absolute; top:0; font-style:normal;
  transform:translateX(-50%);
}
th.axhead .scale i:first-of-type{ transform:none; }
th.axhead .scale i:last-of-type{ transform:translateX(-100%); }

.fig-foot{
  margin-top:1.1rem;
  display:grid; gap:.55rem;
  font-size:.85rem; color:var(--muted);
  max-width:52rem;
}
.fig-foot p{ margin:0; text-indent:-1.15rem; padding-left:1.15rem; scroll-margin-top:calc(var(--mast-h) + 1rem); }
.fig-foot p:target{ background:var(--accent-dim); border-radius:3px; }
.fig-foot .sym{ font-family:var(--serif); color:var(--ink); display:inline-block; width:1.15rem; }

.status{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  color:var(--muted);
}
.status[data-state="down"]{ color:var(--ink); }

/* ── prose sections ────────────────────────────────────── */

.body .wrap{
  display:block;
  padding-block:0;
}
.body section{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,var(--measure));
  gap:0 var(--gap);
  scroll-margin-top:calc(var(--mast-h) + .75rem);
}
.sec-rail{
  grid-column:1;
  padding-block:clamp(2.3rem,4vw,3.1rem) 0;
  border-top:1px solid var(--rule);
}
.sec-body{
  grid-column:2;
  padding-block:clamp(2.3rem,4vw,3.1rem) clamp(2.3rem,4vw,3.1rem);
  border-top:1px solid var(--rule);
}
.sec-rail .eyebrow{ position:sticky; top:calc(var(--mast-h) + .9rem); }
.sec-rail .sec-no{ display:block; color:var(--muted); margin-bottom:.3rem; }

.sec-body h2{
  font-size:clamp(1.5rem,1.2rem+.9vw,1.95rem);
  font-weight:400;
  letter-spacing:-.015em;
  margin-bottom:1rem;
}
.sec-body p{ margin:0 0 1.05em; }
.sec-body p:last-child{ margin-bottom:0; }
.sec-body strong{ font-weight:600; }
.sec-body code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--panel);
  border:1px solid var(--rule-soft);
  padding:.05em .32em;
  /* 短标识符不断行，但长公式/路径必须能折 —— 否则手机上会顶破视口。
     nowrap 只留给确实不该断的表格单元格。 */
  white-space:normal;
  overflow-wrap:anywhere;
}
.sec-body td code, .sec-body th code{ white-space:nowrap; }

.aside{
  border-left:2px solid var(--accent);
  padding:.1rem 0 .1rem 1.05rem;
  margin:1.6rem 0;
  font-size:.94rem;
  color:var(--muted);
}
.aside p{ margin:0 0 .6em; }
.aside p:last-child{ margin:0; }
.aside .eyebrow{ margin-bottom:.4rem; }

.zonelist span{ white-space:nowrap; }
.zonelist{
  font-family:var(--mono); font-size:.78rem; line-height:1.75;
  color:var(--muted);
  margin:0 0 1.05em;
  word-spacing:.1em;
}

/* limitations — the honesty ledger */
dl.ledger{ margin:0; }
dl.ledger > div{
  display:grid;
  grid-template-columns:1.6rem 1fr;
  gap:0 .55rem;
  padding:1.05rem 0;
  border-top:1px solid var(--rule-soft);
}
dl.ledger > div:first-child{ border-top:1px solid var(--rule); }
dl.ledger > div:last-child{ border-bottom:1px solid var(--rule); }
dl.ledger .idx{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--muted); padding-top:.34em;
}
dl.ledger dt{
  font-weight:600;
  grid-column:2;
  margin-bottom:.15rem;
}
dl.ledger dd{
  grid-column:2;
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* faq */
.faq{ margin:0; }
.faq > div{
  padding:1.15rem 0;
  border-top:1px solid var(--rule-soft);
}
.faq > div:first-child{ border-top:1px solid var(--rule); }
.faq > div:last-child{ border-bottom:1px solid var(--rule); }
.faq dt{ font-weight:600; margin-bottom:.3rem; }
.faq dd{ margin:0; color:var(--muted); font-size:.95rem; }

@media (max-width:820px){
  .body .wrap{ grid-template-columns:1fr; }
  .body section{ display:block; border-top:1px solid var(--rule); padding-block:2.2rem; }
  .sec-rail{ padding:0 0 .85rem; border-top:0; }
  .sec-rail .eyebrow{ position:static; }
  .sec-rail .sec-no{ display:inline; margin:0 .5rem 0 0; }
  .sec-body{ padding:0; border-top:0; }
}

/* ── footer ────────────────────────────────────────────── */

footer{
  border-top:1px solid var(--ink);
  background:var(--panel-deep);
}
footer .wrap{
  padding-block:clamp(2.2rem,4vw,3rem);
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:0 var(--gap);
}
.attrib{ max-width:44rem; }
.attrib p{ margin:0 0 .9em; font-size:.93rem; color:var(--muted); }
.attrib p:last-child{ margin:0; }
.attrib ul{
  list-style:none; margin:0 0 1.1em; padding:0;
  font-family:var(--mono); font-size:.79rem; line-height:1.85;
}
.attrib ul li::before{ content:"— "; color:var(--rule); }
.foot-links{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.75rem;
  display:flex; gap:1.3rem; flex-wrap:wrap;
}

@media (max-width:820px){
  footer .wrap{ grid-template-columns:1fr; }
  footer .eyebrow{ margin-bottom:.85rem; }
}

/* 手机端列优先级：数值是产品本身，绝不能是需要横向滚动才看得到的东西 */
@media (max-width:700px){
  table.obs{ min-width:0; width:100%; }
  .obs th.axhead, .obs td.trace, .obs th:nth-child(5), .obs td.src{ display:none; }
  /* 实测 375px 下容器 338px、表格自然宽 382px —— 收紧内边距与名称列才装得下，
     否则数值列要横向滚动才看得到，而数值就是产品本身。 */
  .obs th, .obs td{ padding-left:0; padding-right:.45rem; }
  .obs th:last-child, .obs td:last-child{ padding-right:0; }
  .obs td.name{ max-width:6.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .obs td.age, .obs th:last-child{ white-space:nowrap; }
}

/* 方法论页的围栏代码块：横向滚动，绝不撑破页面 */
.codeblock{
  margin:1rem 0;
  padding:.8rem .9rem;
  background:var(--panel);
  border:1px solid var(--rule);
  overflow-x:auto;
  max-width:100%;
}
.codeblock pre{
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
  margin:0;
}
.codeblock:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

table.ref{
  width:100%; border-collapse:collapse; margin-top:.9rem;
  font-size:.86rem; min-width:34rem;
}
table.ref th{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  text-align:left; padding:.55rem .7rem .5rem 0; border-bottom:1px solid var(--rule);
}
table.ref td{
  padding:.62rem .7rem .62rem 0; border-bottom:1px solid var(--rule-soft);
  vertical-align:top; line-height:1.5;
}
table.ref td:first-child{ white-space:nowrap; }
table.ref tr:last-child td{ border-bottom:0; }
@media (max-width:700px){ table.ref{ min-width:26rem; font-size:.8rem; } }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:.75rem; top:-3rem;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:.75rem;
  padding:.5rem .8rem; z-index:50;
  transition:top .12s;
}
.skip:focus{ top:.6rem; }