/* ============================================================ tokens ===== */
:root{
  color-scheme: light dark;

  --bg:#f6f7fb; --bg-sunk:#eceef6; --surface:#ffffff; --surface-2:#f9fafd;
  --line:#e0e3ee; --line-strong:#c9cee0;
  --ink:#141a2e; --ink-2:#4a5270; --ink-3:#767e9c;
  --accent:#00806a; --accent-ink:#ffffff; --accent-soft:#d9f5ee;
  --focus:#00806a;
  --fe:#00806a;          /* FAREAST mark */
  --brand-tile:#050a0c;  /* near-black the neon sits on */
  --shadow:0 1px 2px rgba(16,22,48,.06), 0 8px 24px -12px rgba(16,22,48,.18);
  --shadow-lg:0 12px 40px -12px rgba(16,22,48,.28);

  /* IVA ramp: ordered low -> high, plus the two legal categories */
  --t-exento-bg:#dff5ea; --t-exento-fg:#0d6b47; --t-exento-line:#9fdcc2;
  --t-1-bg:#e2f2e4;      --t-1-fg:#2c6b33;      --t-1-line:#a9d6ae;
  --t-2-bg:#fdf3d9;      --t-2-fg:#7a5a09;      --t-2-line:#e9cf8d;
  --t-4-bg:#fde8d6;      --t-4-fg:#8a4a13;      --t-4-line:#eebb8c;
  --t-13-bg:#fbe0e0;     --t-13-fg:#95271f;     --t-13-line:#eda9a4;
  --t-na-bg:#e9ebf2;     --t-na-fg:#5a6180;     --t-na-line:#c8cddd;

  --r-sm:6px; --r:10px; --r-lg:16px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1020; --bg-sunk:#080c19; --surface:#121936; --surface-2:#161e40;
    --line:#232c53; --line-strong:#33406f;
    --ink:#eaeeff; --ink-2:#a4adcf; --ink-3:#7d87ad;
    --accent:#00ffc8; --accent-ink:#04231c; --accent-soft:#0d2f28;
    --focus:#00ffc8;
    --fe:#00ffc8;
    --brand-tile:#050a0c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
    --shadow-lg:0 16px 48px -16px rgba(0,0,0,.75);

    --t-exento-bg:#0f3a2b; --t-exento-fg:#6ee7b7; --t-exento-line:#1d5f47;
    --t-1-bg:#173a1d;      --t-1-fg:#8fd99a;      --t-1-line:#2a5c33;
    --t-2-bg:#3d310e;      --t-2-fg:#f0cd72;      --t-2-line:#5f4c15;
    --t-4-bg:#432610;      --t-4-fg:#f5b381;      --t-4-line:#6b3d1b;
    --t-13-bg:#451a1a;     --t-13-fg:#f8a49c;     --t-13-line:#6d2a27;
    --t-na-bg:#1e2542;     --t-na-fg:#9aa3c6;     --t-na-line:#333d66;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1020; --bg-sunk:#080c19; --surface:#121936; --surface-2:#161e40;
  --line:#232c53; --line-strong:#33406f;
  --ink:#eaeeff; --ink-2:#a4adcf; --ink-3:#7d87ad;
  --accent:#00ffc8; --accent-ink:#04231c; --accent-soft:#0d2f28;
  --focus:#00ffc8;
  --fe:#00ffc8;
  --brand-tile:#050a0c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 16px 48px -16px rgba(0,0,0,.75);
  --t-exento-bg:#0f3a2b; --t-exento-fg:#6ee7b7; --t-exento-line:#1d5f47;
  --t-1-bg:#173a1d;      --t-1-fg:#8fd99a;      --t-1-line:#2a5c33;
  --t-2-bg:#3d310e;      --t-2-fg:#f0cd72;      --t-2-line:#5f4c15;
  --t-4-bg:#432610;      --t-4-fg:#f5b381;      --t-4-line:#6b3d1b;
  --t-13-bg:#451a1a;     --t-13-fg:#f8a49c;     --t-13-line:#6d2a27;
  --t-na-bg:#1e2542;     --t-na-fg:#9aa3c6;     --t-na-line:#333d66;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--surface);padding:8px 12px;border-radius:var(--r)}

/* ============================================================ header ===== */
.top{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 18px; background:var(--surface);
  border-bottom:1px solid var(--line); z-index:20;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mark{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  background:var(--brand-tile);
  color:#00ffc8;font-family:var(--mono);font-weight:700;font-size:18px;
  border-radius:9px;border:1px solid rgba(0,255,200,.28);
}
.brand-txt{min-width:0}
.brand-txt h1{margin:0;font-size:16px;letter-spacing:.14em;font-weight:700}
.brand-txt p{margin:0;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{display:flex;align-items:center;gap:8px;flex:none}

.ghost{
  background:transparent;border:1px solid var(--line-strong);color:var(--ink-2);
  padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:13px;
  transition:background .13s,color .13s,border-color .13s;
}
.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--ink-3)}
.ghost.sm{padding:3px 8px;font-size:11.5px}
.ghost.icon{padding:6px;display:grid;place-items:center}
.primary{
  background:var(--accent);color:var(--accent-ink);border:0;padding:9px 18px;
  border-radius:var(--r-sm);cursor:pointer;font-weight:600;font-size:14px;
}

/* ============================================================ layout ===== */
.shell{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:290px minmax(0,1fr) 400px;
}
.tree-pane{
  border-right:1px solid var(--line); background:var(--surface-2);
  display:flex;flex-direction:column;min-height:0;min-width:0;
}
.main{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.detail{
  border-left:1px solid var(--line); background:var(--surface);
  overflow-y:auto; min-height:0;
}

/* ============================================================== tree ===== */
.pane-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px 6px;
}
.pane-head h2{margin:0;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.pane-hint{margin:0;padding:0 14px 10px;font-size:11.5px;color:var(--ink-3);line-height:1.35}
.tree::-webkit-scrollbar{height:9px;width:9px}
.tree::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:5px}
.tree::-webkit-scrollbar-track{background:transparent}
.tree{flex:1 1 auto;overflow:auto;padding:0 6px 24px;overscroll-behavior:contain}

.tnode{display:block;min-width:max-content}
.trow{
  display:flex;align-items:flex-start;gap:4px;width:100%;min-width:max-content;
  padding:4px 5px;border:0;background:transparent;text-align:left;
  border-radius:var(--r-sm);cursor:pointer;color:var(--ink-2);
  font-size:12.5px;line-height:1.3;
}
.trow:hover{background:var(--accent-soft);color:var(--ink)}
.trow[aria-current="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.trow[aria-current="true"] .tcode{color:var(--accent-ink);opacity:.8}
.tcaret{
  flex:none;width:11px;height:16px;display:grid;place-items:center;
  font-size:9px;opacity:.65;transition:transform .14s;
}
.trow[aria-expanded="true"] .tcaret{transform:rotate(90deg)}
.tcaret.leaf{opacity:0}
.tcode{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);flex:none;padding-top:1px;min-width:1.6em;text-align:right}
.tlabel{white-space:nowrap;flex:none;padding-right:10px}
.tkids{margin-left:5px;padding-left:4px;border-left:1px solid var(--line);min-width:max-content}

/* ============================================================ search ===== */
.search-wrap{
  flex:0 0 auto;padding:14px 20px 10px;background:var(--surface);
  border-bottom:1px solid var(--line);
}
.search-box{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:13px;color:var(--ink-3);pointer-events:none}
#q{
  width:100%;padding:11px 40px 11px 42px;background:var(--bg-sunk);
  border:1px solid var(--line-strong);border-radius:var(--r);
  font-size:15px;transition:border-color .14s,box-shadow .14s;
}
#q::placeholder{color:var(--ink-3)}
#q:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#q::-webkit-search-cancel-button{display:none}
.clear{
  position:absolute;right:8px;width:26px;height:26px;border:0;border-radius:50%;
  background:var(--line);color:var(--ink-2);cursor:pointer;font-size:17px;line-height:1;
}
.clear:hover{background:var(--line-strong);color:var(--ink)}

.filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;
  border-radius:100px;font-size:12.5px;font-weight:600;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  transition:transform .1s;
}
.chip:hover{transform:translateY(-1px)}
.chip .n{font-weight:500;font-size:11px;opacity:.7;font-family:var(--mono)}
.chip[aria-pressed="true"]{border-width:1.5px}
.chip[aria-pressed="true"][data-t="Exento"]{background:var(--t-exento-bg);color:var(--t-exento-fg);border-color:var(--t-exento-line)}
.chip[aria-pressed="true"][data-t="1"]{background:var(--t-1-bg);color:var(--t-1-fg);border-color:var(--t-1-line)}
.chip[aria-pressed="true"][data-t="2"]{background:var(--t-2-bg);color:var(--t-2-fg);border-color:var(--t-2-line)}
.chip[aria-pressed="true"][data-t="4"]{background:var(--t-4-bg);color:var(--t-4-fg);border-color:var(--t-4-line)}
.chip[aria-pressed="true"][data-t="13"]{background:var(--t-13-bg);color:var(--t-13-fg);border-color:var(--t-13-line)}
.chip[aria-pressed="true"][data-t="na"]{background:var(--t-na-bg);color:var(--t-na-fg);border-color:var(--t-na-line)}

.scope{
  display:flex;align-items:center;gap:8px;margin-top:9px;padding:6px 10px;
  background:var(--accent-soft);border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-2);
}
.scope b{color:var(--ink);font-weight:600}
.scope .sc-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scope button{margin-left:auto;flex:none}

.results-head{
  flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:9px 20px;color:var(--ink-3);font-size:12px;
}
.count b{color:var(--ink);font-weight:700}
.sort-note{font-size:11.5px}

/* =========================================================== results ===== */
.results{list-style:none;margin:0;padding:0 12px 40px;overflow-y:auto;flex:1 1 auto;min-height:0}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
  width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;margin-bottom:6px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.row:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-1px)}
.row[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.row-main{min-width:0}
.row-desc{
  color:var(--ink);font-size:14px;line-height:1.35;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.row-desc mark{background:transparent;color:var(--accent);font-weight:700;padding:0}
.row-sub{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.row-parent{font-size:11.5px;color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}

/* segmented 13-digit code: each group = one level of the taxonomy */
.code{display:inline-flex;font-family:var(--mono);font-size:12px;letter-spacing:.02em;white-space:nowrap}
.code i{font-style:normal;color:var(--ink-2)}
.code i+i{margin-left:3px}
.code i:nth-child(-n+5){color:var(--ink-3)}
.code i:last-child{color:var(--ink);font-weight:600}

.tag{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:1.5px 6px;border-radius:4px;border:1px solid;flex:none;
}
.tag.school{background:var(--t-exento-bg);color:var(--t-exento-fg);border-color:var(--t-exento-line)}
.tag.changed{background:var(--t-2-bg);color:var(--t-2-fg);border-color:var(--t-2-line)}

/* the whole point of the site */
.rate{
  flex:none;min-width:74px;padding:7px 10px;border-radius:var(--r-sm);
  border:1px solid;text-align:center;font-family:var(--mono);font-weight:700;
  line-height:1.05;
}
.rate .big{display:block;font-size:21px;letter-spacing:-.02em}
.rate .lbl{display:block;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-top:2px;font-family:var(--sans)}
.rate[data-t="Exento"]{background:var(--t-exento-bg);color:var(--t-exento-fg);border-color:var(--t-exento-line)}
.rate[data-t="1"]{background:var(--t-1-bg);color:var(--t-1-fg);border-color:var(--t-1-line)}
.rate[data-t="2"]{background:var(--t-2-bg);color:var(--t-2-fg);border-color:var(--t-2-line)}
.rate[data-t="4"]{background:var(--t-4-bg);color:var(--t-4-fg);border-color:var(--t-4-line)}
.rate[data-t="13"]{background:var(--t-13-bg);color:var(--t-13-fg);border-color:var(--t-13-line)}
.rate[data-t="na"]{background:var(--t-na-bg);color:var(--t-na-fg);border-color:var(--t-na-line)}
.rate[data-t="Exento"] .big{font-size:13px;letter-spacing:.02em}
.rate[data-t="na"] .big{font-size:13px}

.sentinel{height:1px}
.empty{padding:44px 24px;text-align:center;color:var(--ink-3);font-size:14px}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}

/* ============================================================ detail ===== */
.detail-empty{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:40px 34px;text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.5;
}
.de-mark{
  width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
  background:var(--bg-sunk);color:var(--ink-3);font-family:var(--mono);font-size:24px;font-weight:700;
}
.detail-body{padding:20px 22px 48px}

.d-rate{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-radius:var(--r-lg);border:1px solid;margin-bottom:18px;
}
.d-rate-txt{min-width:0}
.d-rate-txt .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.8}
.d-rate-txt .v{font-size:13px;margin-top:3px;opacity:.9;line-height:1.35}
.d-rate .num{font-family:var(--mono);font-weight:700;font-size:52px;line-height:.9;letter-spacing:-.03em;flex:none}
.d-rate .num.word{font-size:26px;letter-spacing:0}
.d-rate[data-t="Exento"]{background:var(--t-exento-bg);color:var(--t-exento-fg);border-color:var(--t-exento-line)}
.d-rate[data-t="1"]{background:var(--t-1-bg);color:var(--t-1-fg);border-color:var(--t-1-line)}
.d-rate[data-t="2"]{background:var(--t-2-bg);color:var(--t-2-fg);border-color:var(--t-2-line)}
.d-rate[data-t="4"]{background:var(--t-4-bg);color:var(--t-4-fg);border-color:var(--t-4-line)}
.d-rate[data-t="13"]{background:var(--t-13-bg);color:var(--t-13-fg);border-color:var(--t-13-line)}
.d-rate[data-t="na"]{background:var(--t-na-bg);color:var(--t-na-fg);border-color:var(--t-na-line)}

.d-code{
  display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:6px;
  background:var(--bg-sunk);border-radius:var(--r);
}
.d-code .val{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.04em;flex:1 1 auto;word-break:break-all}
.copy{
  flex:none;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  padding:6px 11px;border-radius:var(--r-sm);cursor:pointer;font-size:12px;font-weight:600;
}
.copy:hover{color:var(--ink);border-color:var(--ink-3)}
.copy.ok{background:var(--t-exento-bg);color:var(--t-exento-fg);border-color:var(--t-exento-line)}

.d-title{font-size:18px;font-weight:650;line-height:1.3;margin:14px 0 4px}
.d-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}

.d-sec{margin-top:20px}
.d-sec h3{
  margin:0 0 8px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}

/* the code IS the path -- each level clickable */
.ladder{display:flex;flex-direction:column;gap:2px}
.rung{
  display:grid;grid-template-columns:20px 100px minmax(0,1fr);align-items:start;gap:9px;
  width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:5px 7px;border-radius:var(--r-sm);color:var(--ink-2);font-size:12.5px;line-height:1.3;
}
.rung:hover{background:var(--accent-soft);color:var(--ink)}
.rung:last-child{background:var(--bg-sunk);color:var(--ink);font-weight:600;cursor:default}
.rung:last-child:hover{background:var(--bg-sunk)}
.rung .lvl{font-family:var(--mono);font-size:10px;color:var(--ink-3);text-align:right;padding-top:1px}
.rung .seg{font-family:var(--mono);font-size:12px;letter-spacing:.02em;white-space:nowrap}
.rung .seg s{text-decoration:none;color:var(--ink-3);opacity:.45}
.rung .seg b{color:var(--accent);font-weight:700}
.rung .txt{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.note{
  padding:10px 12px;border-radius:var(--r);font-size:13px;line-height:1.5;
  border:1px solid var(--line);background:var(--surface-2);margin-bottom:8px;
}
.note .k{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.note.inc{border-left:3px solid var(--t-exento-line)}
.note.inc .k{color:var(--t-exento-fg)}
.note.exc{border-left:3px solid var(--t-13-line)}
.note.exc .k{color:var(--t-13-fg)}

.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.hist li{
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);font-size:12.5px;line-height:1.45;
}
.hist .hh{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.hist .fld{font-weight:650;color:var(--ink)}
.hist .when{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.hist .mv{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px}
.hist .mv s{text-decoration:line-through;opacity:.6}
.hist .mv b{color:var(--ink)}
.hist .why{color:var(--ink-2)}

.d-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3);line-height:1.5}

/* =========================================================== dialog ====== */
dialog{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:0;max-width:min(560px,92vw);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);
}
dialog::backdrop{background:rgba(6,10,26,.55);backdrop-filter:blur(2px)}
.about-inner{padding:26px 28px}
.about-inner h2{margin:0 0 12px;font-size:19px}
.about-inner p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.about-meta{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:16px 0;font-size:12.5px}
.about-meta dt{color:var(--ink-3)}
.about-meta dd{margin:0;font-family:var(--mono);font-size:12px}
.disclaimer{font-size:12px !important;color:var(--ink-3) !important;padding:10px 12px;background:var(--bg-sunk);border-radius:var(--r)}
.about-actions{display:flex;justify-content:flex-end;margin-top:6px}

/* ======================================================== responsive ===== */
.mobile-tabs{display:none}

@media (max-width:1180px){
  .shell{grid-template-columns:250px minmax(0,1fr) 340px}
}
/* hidden on desktop; the mobile block below turns it on */
.pane-back{display:none}

@media (max-width:960px){
  :root{--tabs-h:53px}
  .shell{grid-template-columns:minmax(0,1fr)}
  /* The overlay panes must STOP above the tab bar. Covering it (inset ...0)
     left no way back out of the detail view on a phone. */
  .tree-pane,.detail{
    position:fixed;
    inset:52px 0 calc(var(--tabs-h) + env(safe-area-inset-bottom,0px)) 0;
    z-index:30;border:0;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:var(--shadow-lg);
  }
  .detail{transform:translateX(100%)}
  body[data-pane="tree"] .tree-pane{transform:none}
  body[data-pane="detail"] .detail{transform:none}
  .mobile-tabs{
    display:flex;gap:8px;padding:8px 14px;background:var(--surface);
    border-top:1px solid var(--line);
    position:fixed;left:0;right:0;bottom:0;z-index:40;   /* above the panes */
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  }
  .mobile-tabs button{flex:1}
  .mobile-tabs button[aria-current="true"]{
    background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650;
  }
  .results{padding-bottom:calc(var(--tabs-h) + 24px)}
  .detail-body{padding-bottom:28px}
  .detail-empty{padding-bottom:40px}
  /* explicit way back, so the user is never hunting for the tab bar */
  .pane-back{
    display:flex;align-items:center;gap:6px;width:100%;
    padding:9px 14px;background:var(--surface-2);border:0;
    border-bottom:1px solid var(--line);cursor:pointer;
    color:var(--ink-2);font-size:13px;font-weight:600;text-align:left;
    position:sticky;top:0;z-index:2;
  }
  .pane-back:hover{color:var(--ink)}
}
@media (max-width:560px){
  .search-wrap{padding:10px 12px 8px}
  .results{padding:0 8px 32px}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 10px}
  .rate{min-width:60px;padding:5px 7px}
  .rate .big{font-size:17px}
  .row-parent{max-width:100%}
  .d-rate .num{font-size:40px}
  .brand-txt p{display:none}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* suggestion pills shown when a search returns nothing */
.sugg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px;max-width:520px;margin-inline:auto}
.sugg button{max-width:100%;white-space:normal;text-align:left;line-height:1.3}
.empty p{margin:6px 0 0;font-size:13px}

/* ====================================================== maker credit ===== */
.by{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink-3);padding:4px 10px 4px 8px;border-radius:var(--r-sm);
  border:1px solid transparent;transition:border-color .14s,color .14s,background .14s;
}
.by:hover{border-color:var(--line-strong);background:var(--surface-2)}
.by .fe-mark{color:var(--fe);flex:none;transition:transform .16s}
.by:hover .fe-mark{transform:translateX(1px)}
.by-txt{display:flex;flex-direction:column;line-height:1.15}
.by-k{font-size:8px;letter-spacing:.15em;text-transform:uppercase;opacity:.75}
.by-n{font-size:12px;font-weight:700;letter-spacing:.11em;color:var(--ink-2)}
.by:hover .by-n{color:var(--ink)}

.maker{
  display:flex;gap:14px;align-items:flex-start;margin:18px 0 14px;
  padding:15px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--brand-tile);
}
.maker-logo{
  flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:11px;
  background:rgba(0,255,200,.07);border:1px solid rgba(0,255,200,.22);color:#00ffc8;
}
.maker-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.maker-txt strong{font-size:16px;letter-spacing:.13em;color:#eaeeff;font-weight:700}
.maker-legal{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#5f6b85 !important}
.maker-txt span{font-size:12.5px;color:#8b95b3;line-height:1.5}
.maker-txt a{font-size:12.5px;color:#00ffc8;text-decoration:none;font-weight:600;margin-top:5px;letter-spacing:.03em}
.maker-txt a:hover{text-decoration:underline}

.d-foot-by{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:11px}
.d-foot-by .fe-mark{color:var(--fe);flex:none}
.d-foot-by a{color:var(--fe);text-decoration:none;font-weight:700;letter-spacing:.09em}
.d-foot-by a:hover{text-decoration:underline}

@media (max-width:820px){
  .by-k{display:none}
  .by-n{font-size:11px;letter-spacing:.08em}
}
@media (max-width:560px){
  .by-txt{display:none}
  .by{padding:6px}
}

/* Static root links rendered server-side; replaced by the interactive tree once
   the script runs. Present so crawlers (and no-JS readers) can reach the
   catalogue at all. */
.tree-seed{list-style:none;margin:0;padding:0}
.tree-seed a{display:flex;align-items:flex-start;gap:6px;padding:5px 6px;border-radius:var(--r-sm);
  color:var(--ink-2);text-decoration:none;font-size:12.5px;line-height:1.3}
.tree-seed a:hover{background:var(--accent-soft);color:var(--ink)}