/* ==========================================================================
   bucket-conversion-report — shared stylesheet
   A documentation layout: a sticky left rail carrying the nav, the filter and
   the section list, and a content column whose cards flow into as many
   readable columns as the window can fit. Prose keeps its own measure so the
   width is spent on cards and paths, never on 200-character lines.
   ========================================================================== */

:root{
  --ground:#EDEFF2; --surface:#fff; --ink:#16202B; --muted:#5B6B7C; --faint:#8496A6;
  --rule:#D2D9DF; --rule-firm:#B4C0CA;
  --ok:#0F6E5C; --warn:#8C5A16; --bad:#9B3B3B; --info:#2F4A8C; --old:#6B6257;
  --shadow:0 1px 2px rgba(22,32,43,.06),0 6px 18px -14px rgba(22,32,43,.2);
  --rail:17.5rem;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Bitter',Georgia,'Times New Roman',serif;
  --sans:'Asap',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-text-size-adjust:100%;
}
::selection{background:#D6E0F5}

/* ---------------------------------------------------------------- shell --- */

.shell{display:block}
@media(min-width:62rem){
  .shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
         align-items:start;gap:0}
}

/* ------------------------------------------------------------- left rail -- */

.side{
  background:var(--surface);border-bottom:1px solid var(--rule-firm);
  padding:1rem 1rem 1.1rem;
}
@media(min-width:62rem){
  .side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
        border-bottom:0;border-right:1px solid var(--rule-firm);
        padding:1.25rem 1.1rem 2rem}
}
.side .brand{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .75rem;
}
.side h2{all:unset;display:block;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  margin:1.4rem 0 .45rem}

/* tabs — one per page, stacked in the rail so the set reads as a site map */
.nav{display:flex;flex-direction:column;gap:.15rem;margin:0}
.nav a{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;text-decoration:none;
  color:var(--muted);border:1px solid transparent;border-radius:3px;
  padding:.4rem .55rem;display:block;
}
.nav a:hover{background:var(--ground);color:var(--ink)}
.nav a.on{color:var(--ink);background:var(--ground);border-color:var(--rule-firm);font-weight:500}

/* section list, built from the page's own headings */
.toc{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{
  display:block;font-size:.8125rem;color:var(--muted);text-decoration:none;
  padding:.28rem .55rem;border-left:2px solid var(--rule);line-height:1.35;
}
.toc a:hover{color:var(--ink);border-left-color:var(--rule-firm);background:var(--ground)}
.toc .sub2 a{padding-left:1.2rem;font-size:.75rem;color:var(--faint)}

/* ------------------------------------------------------------- content --- */

.wrap{
  padding:1.4rem clamp(1rem,2.5vw,2rem) 3.5rem;
  display:grid;gap:0 1rem;align-content:start;
  grid-template-columns:minmax(0,1fr);
}
/* Cards flow into as many columns as fit; everything else spans the row.
   align-items:start is not cosmetic: stretched grid items take the height of
   the tallest card in their row, so opening one card left its three
   neighbours as tall empty boxes. Each card now keeps its own height. */
@media(min-width:48rem){
  .wrap{grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));align-items:start}
}
.wrap>h1,.wrap>h2,.wrap>h3,.wrap>p,.wrap>dl.stats,.wrap>div.callout,
.wrap>details:not(.card),.wrap>footer,.wrap>hr{grid-column:1/-1}
/* An opened card takes the full row: a list of gs:// paths in a 21rem column
   wraps to one character per line, which is unreadable. */
.wrap>details.card[open]{grid-column:1/-1}

/* Prose measure. The grid gives the width; this stops sentences using it.
   A callout is capped as a box, not as text inside a box: a full-width panel
   holding one narrow column of words reads as a rendering fault. */
.lede,.sub,.cmt .b,.note{max-width:74ch}
.callout{max-width:80ch}

h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);
   line-height:1.12;letter-spacing:-.022em;margin:.1rem 0 .45rem;text-wrap:balance;max-width:34ch}
.eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .55rem}
.lede{color:var(--muted);margin:0 0 1.6rem;font-size:1.0625rem;line-height:1.5}

h2{font-family:var(--serif);font-weight:700;font-size:1.3125rem;letter-spacing:-.018em;
   margin:2.6rem 0 .25rem;padding-top:.9rem;border-top:1px solid var(--rule-firm);
   scroll-margin-top:1rem}
h2:first-of-type{margin-top:1.4rem}
h2 .n{font-family:var(--mono);font-size:.75rem;color:var(--faint);font-weight:400;
  margin-left:.5rem;letter-spacing:.05em}
h3.grp{font-family:var(--serif);font-weight:600;font-size:1.0625rem;letter-spacing:-.012em;
  margin:1.9rem 0 .2rem;scroll-margin-top:1rem}
h3.grp .n{font-family:var(--mono);font-size:.6875rem;color:var(--faint);font-weight:400;
  display:block;margin-top:.15rem;letter-spacing:.04em}
.sub{color:var(--muted);font-size:.9375rem;margin:.15rem 0 1.1rem}

/* ------------------------------------------------------- headline stats --- */

.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule-firm);
  border:1px solid var(--rule-firm);border-radius:5px;overflow:hidden;margin:0 0 1.8rem;
}
@media(min-width:40rem){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);padding:.85rem .95rem}
.stat dt{font-family:var(--mono);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .3rem}
.stat dd{margin:0;font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.02;
  font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.stat dd small{display:block;font-family:var(--sans);font-weight:400;font-size:.6875rem;
  color:var(--muted);margin-top:.35rem;line-height:1.4;letter-spacing:0}

/* ----------------------------------------------------------------- card --- */

.card{
  background:var(--surface);border:1px solid var(--rule-firm);border-radius:5px;
  padding:.85rem .9rem;margin:0 0 .8rem;box-shadow:var(--shadow);
  border-left:3px solid var(--rule-firm);
  display:flex;flex-direction:column;
}
.card.bad{border-left-color:var(--bad)}
.card.warn{border-left-color:var(--warn)}
.card.ok{border-left-color:var(--ok)}
.card.info{border-left-color:var(--info)}
.card .ct{
  margin:0 0 .4rem;font-family:var(--mono);font-size:.8125rem;line-height:1.4;
  overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem;
}
.card .ct code{background:none;padding:0;font-size:1em;color:var(--ink);font-weight:500}

/* card head, as the scan pages emit it */
.col{font-family:var(--mono);font-size:.8125rem;line-height:1.4;margin:0 0 .3rem;
  overflow-wrap:anywhere;color:var(--ink);font-weight:500}
.col .t{color:var(--muted);font-weight:400}
.col .tag{margin-left:.35rem}
.meta{font-family:var(--mono);font-size:.6875rem;color:var(--faint);margin:0 0 .5rem;
  letter-spacing:.02em}
.nums{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .15rem}
.card .note{font-size:.8125rem;color:var(--muted);margin:.35rem 0 0}
.card .note:first-of-type{margin-top:0}
.card .note strong{color:var(--ink);font-weight:500}
.cmt{background:var(--surface);border:1px solid var(--rule-firm);border-left:3px solid var(--info);
  border-radius:5px;padding:.8rem .9rem;margin:0 0 .8rem;box-shadow:var(--shadow)}
.cmt .h{font-family:var(--mono);font-size:.625rem;color:var(--faint);letter-spacing:.05em;margin:0 0 .3rem}
.cmt .s{font-family:var(--serif);font-weight:600;font-size:.9375rem;margin:0 0 .35rem;line-height:1.32}
.cmt .b{font-size:.8125rem;color:var(--muted);margin:0}
.cmt .st{font-family:var(--mono);font-size:.625rem;color:var(--faint);margin:.4rem 0 0;letter-spacing:.04em}

/* ------------------------------------------------------------ pills etc --- */

.pill,.tag{
  display:inline-block;font-family:var(--mono);font-weight:500;
  border-radius:3px;border:1px solid;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.pill{font-size:.6875rem;padding:.08rem .38rem}
.tag{font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;padding:.12rem .36rem;
  vertical-align:.06em}
.p-bare,.tag-bad{color:var(--bad);border-color:#E0B4B4;background:#FBF0F0}
.p-legacy,.tag-warn{color:var(--warn);border-color:#DEC7A2;background:#FBF6EE}
.p-new,.tag-ok{color:var(--ok);border-color:#A8CFC5;background:#EFF6F4}
.tag-info{color:var(--info);border-color:#B3C0DB;background:#F0F3F9}
.p-refs{color:var(--muted);border-color:var(--rule-firm);background:#F4F6F8}
.p-zero{color:var(--faint);border-color:var(--rule);background:#F7F9FA}

code{font-family:var(--mono);font-size:.8125em;background:#E4E8EC;padding:.08em .3em;
  border-radius:2px;overflow-wrap:anywhere}
.path{font-family:var(--mono);font-size:.75rem;display:block;line-height:1.5;
  overflow-wrap:break-word;word-break:break-word}
.path.was{color:var(--old)}
.path.now{color:var(--ok);font-weight:500;margin-top:.2rem}
.path.now::before{content:"\2192 ";color:var(--faint);font-weight:400}

/* -------------------------------------------------------------- callout --- */

.callout{
  background:var(--surface);border:1px solid var(--rule-firm);border-left:3px solid var(--info);
  border-radius:5px;padding:1rem 1.05rem;margin:0 0 1.5rem;box-shadow:var(--shadow);
  font-size:.9375rem;
}
.callout.bad{border-left-color:var(--bad)}
.callout.ok{border-left-color:var(--ok)}
.callout.warn{border-left-color:var(--warn)}
.callout p{margin:0 0 .65rem}.callout p:last-child{margin:0}
.callout .h{font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);display:block;margin:0 0 .45rem}

/* -------------------------------------------------------------- details --- */

details:not(.card){background:var(--surface);border:1px solid var(--rule-firm);border-radius:5px;
  margin:0 0 .8rem;box-shadow:var(--shadow)}
details:not(.card)>summary{padding:.75rem .9rem;cursor:pointer;font-family:var(--mono);
  font-size:.75rem;letter-spacing:.04em;color:var(--muted);list-style:none}
summary::-webkit-details-marker{display:none}
details:not(.card)>summary::after{content:"+";float:right;color:var(--faint)}
details:not(.card)[open]>summary::after{content:"\2212"}
details:not(.card)[open]>summary{border-bottom:1px solid var(--rule);color:var(--ink)}

/* a card that opens: the whole head is the control */
details.card{padding:0;display:block}
details.card>summary{padding:.85rem .9rem;list-style:none;cursor:pointer;font-family:inherit;
  font-size:inherit;letter-spacing:normal;color:inherit;border:0}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:none}
details.card>summary:hover .more{color:var(--ink)}
details.card>summary .more{display:inline-block;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--info);margin-top:.5rem}
details.card>summary .more::after{content:" +"}
details.card[open]>summary .more::after{content:" \2212"}
details.card[open]>summary{border-bottom:1px solid var(--rule)}

.dt{padding:.75rem .9rem;background:#F8FAFB;border-radius:0 0 4px 4px}
.dth{font-family:var(--mono);font-size:.5625rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .45rem}
.dth .c{color:var(--rule-firm)}
.dth:not(:first-child){margin-top:1rem}
.krow{padding:.55rem 0;border-bottom:1px solid var(--rule)}
.krow:last-of-type{border-bottom:0}
.kp{display:block;font-family:var(--mono);font-size:.6875rem;overflow-wrap:anywhere;margin-bottom:.3rem}
.vrow{padding:.32rem 0;border-bottom:1px solid var(--rule)}
.vrow:last-child{border-bottom:0}
.vs{display:block;font-family:var(--mono);font-size:.6875rem;line-height:1.55;
  overflow-wrap:break-word;word-break:break-word}
.vs.was{color:var(--bad)}.vs.leg{color:var(--warn)}.vs.now{color:var(--ok)}
.dth.vh{margin:.5rem 0 .25rem}
.krow .vrow{padding:.24rem 0 .24rem .65rem;border-left:2px solid var(--rule);border-bottom:0}
.dbody{padding:.75rem .9rem}
.dbody .card{box-shadow:none;margin-bottom:.5rem}
.dbody .card:last-child{margin-bottom:0}
/* A disclosure holding many cards gets its own grid, so the width is used inside too. */
@media(min-width:48rem){
  .dbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:0 .8rem}
}

/* --------------------------------------------------------------- filter --- */

.filter{margin:0}
#q{width:100%;font:inherit;font-size:.875rem;padding:.5rem .6rem;border:1px solid var(--rule-firm);
  border-radius:4px;background:var(--surface);color:var(--ink);-webkit-appearance:none}
.side #q{background:var(--ground)}
#q:focus{outline:2px solid var(--info);outline-offset:1px}
.chips{display:flex;gap:.3rem;flex-wrap:wrap;margin:.5rem 0 0}
.chip-b{font-family:var(--mono);font-size:.625rem;letter-spacing:.05em;padding:.32rem .5rem;
  border:1px solid var(--rule-firm);border-radius:3px;background:var(--surface);color:var(--muted);
  cursor:pointer;line-height:1.2}
.chip-b:hover{color:var(--ink)}
.chip-b.on{color:var(--surface);background:var(--ink);border-color:var(--ink);font-weight:500}
.fcount{font-family:var(--mono);font-size:.625rem;color:var(--faint);margin:.5rem 0 0;letter-spacing:.05em}
.gone{display:none!important}

footer{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--rule-firm);
  color:var(--faint);font-size:.75rem;max-width:78ch}
footer p{margin:0 0 .45rem}footer p:last-child{margin:0}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ------------------------------------------------ descriptor lists (this site) --- */
/* The content column is a card grid above 48rem, and only the children named in
   the allow-list above span the row. One left off it lands in a single 21rem track. */
.wrap>div.dlist{grid-column:1/-1}
.dlist{margin:0 0 1.2rem;border:1px solid var(--rule);border-radius:2px;
       background:var(--surface);overflow:hidden}
/* One template shared by the header and every row, so the five columns line up
   down the whole table. Free-flowing metadata on each row was the readability
   problem: nothing started at the same x twice, so there was nothing to scan. */
.dhead,.drow{display:grid;
  grid-template-columns:minmax(0,2.4fr) minmax(0,2.1fr) 8rem minmax(0,1.5fr) 8.5rem;
  gap:.15rem 1rem;align-items:baseline;padding:.36rem .75rem}
.dhead{font-family:var(--mono);font-size:.5625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);background:var(--ground);border-bottom:1px solid var(--rule-firm)}
/* Every cell in ink. These are all values someone reads across and compares down
   a column, so none of them is secondary text — the header carries the labelling
   and the greys were only making the table harder to read. */
.drow{border-top:1px solid var(--rule);font-family:var(--mono);
      font-size:.75rem;line-height:1.45;color:var(--ink)}
.drow:nth-child(odd){background:var(--ground)}
/* anywhere, not break-all: a long snake_case key should break only where the
   column genuinely cannot hold it, not in the middle of every line. */
.drow .k{overflow-wrap:anywhere}
.drow .p{overflow-wrap:anywhere}
/* nowrap so "any path in text" stays on one line and every row keeps one height. */
.drow .how{font-size:.6875rem;white-space:nowrap}
.drow .own{overflow-wrap:anywhere}
.drow .fb{display:block;color:var(--muted)}
.drow .m{font-size:.6875rem;overflow-wrap:anywhere}
.drow .r{color:var(--muted);font-size:.625rem;display:block}
/* The example row spans the whole grid so a real stored value and its destination
   sit under the descriptor rather than being squeezed into one column. */
.drow .ex{grid-column:1/-1;margin-top:.25rem;padding-top:.25rem;
          border-top:1px dotted var(--rule);display:flex;flex-wrap:wrap;
          align-items:baseline;gap:.15rem .5rem;font-size:.6875rem}
.drow .ex code{background:none;padding:0;font-size:.6875rem;color:var(--ink);overflow-wrap:anywhere}
.drow .ex code.p{color:var(--info)}
.drow .exl{color:var(--faint);font-size:.625rem;letter-spacing:.04em}
.drow .exa{color:var(--faint)}
.drow .ex.none,.drow .r.none{color:var(--faint);font-style:italic}
.drow .miss{color:var(--warn)}
/* The column header carries the label on a wide screen; the stacked layout
   below has no header, so each cell names itself instead. */
.drow b{font-weight:400;color:var(--faint);letter-spacing:.04em;font-size:.625rem}
@media(min-width:62rem){ .drow b{display:none} }
@media(max-width:61.99rem){
  .dhead{display:none}
  .drow{grid-template-columns:minmax(0,1fr);gap:.1rem;padding:.45rem .75rem}
  .drow .k{font-size:.8125rem}
}
/* A two-column list — a key and one tag — sharing the frame but not the five-column grid. */
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:baseline;
      padding:.36rem .75rem;border-top:1px solid var(--rule);
      font-family:var(--mono);font-size:.75rem;line-height:1.45}
.prow:first-child{border-top:0}
.prow:nth-child(even){background:var(--ground)}
.prow .k{color:var(--ink);overflow-wrap:anywhere}