/* ============================================================================
   features.css — China Adventure · FEATURE MODULES
   Packing Loadout · Setup Walkthroughs (concierge NPC) · Booking Codex
   Lunarpunk / JRPG theme. Self-contained, CSP-safe, no CDN, no @import.
   Everything is scoped under `.cf` and namespaced --cf-* so it never stomps
   the shell's :root. The shell may override any --cf-* var to re-theme us.
   ========================================================================== */

/* ---- theme tokens (low-specificity :where so the shell wins if it sets them) ---- */
:where(.cf), :where(:root){
  --cf-abyss:#060b12;    --cf-deep:#0a1622;   --cf-panel:#0e2130;  --cf-panel-2:#123048;
  --cf-line:#1c3b52;     --cf-line-2:#2b587a;
  --cf-ink:#e8f2f4;      --cf-dim:#8fb0bd;     --cf-dim-2:#5f8494;
  --cf-cyan:#43e0d6;     --cf-teal:#1f9fb4;    --cf-moon:#bfe3ff;
  --cf-gold:#e8c45a;     --cf-gold-2:#c79a34;  --cf-coral:#e0785a;  --cf-mint:#7fe6b4;
  --cf-violet:#b78cf0;
  /* rarity ladder */
  --cf-legend:#f2c14e;   --cf-epic:#b06cf0;    --cf-rare:#3fa9d8;   --cf-unc:#6fce9a;   --cf-common:#9fb3bd;
  /* confidence */
  --cf-ok:#7fe6b4;       --cf-warn:#e8c45a;    --cf-danger:#e0785a; --cf-info:#8fb8ff;
  --cf-radius:14px;
  --cf-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --cf-sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.cf{ font-family:var(--cf-mono); color:var(--cf-ink); font-size:15px; line-height:1.55; }
.cf *{ box-sizing:border-box; }
.cf .sans{ font-family:var(--cf-sans); }
@media (prefers-reduced-motion:reduce){
  .cf *{ animation:none !important; transition:none !important; }
}

/* ---- shared atoms ---- */
.cf-eyebrow{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cf-cyan); }
.cf-muted{ color:var(--cf-dim); }
.cf-h{ margin:0; line-height:1.12; text-wrap:balance; }
.cf-sub{ color:var(--cf-dim); font-size:.86rem; margin:.35em 0 0; }
.cf-tabnum{ font-variant-numeric:tabular-nums; }

.cf-panel{
  background:linear-gradient(180deg,var(--cf-panel),var(--cf-deep));
  border:1px solid var(--cf-line-2);
  border-radius:var(--cf-radius);
  box-shadow:0 18px 40px -30px #000, inset 0 1px 0 rgba(255,255,255,.03);
}
/* ornate gilt frame (RPGUI register, pure CSS) */
.cf-gilt{
  position:relative;
  border:1px solid var(--cf-gold-2);
  border-radius:var(--cf-radius);
  background:
    linear-gradient(180deg,rgba(232,196,90,.05),transparent 40%),
    linear-gradient(180deg,var(--cf-panel-2),var(--cf-deep));
  box-shadow:0 0 0 1px rgba(232,196,90,.16) inset, 0 20px 44px -28px #000;
}

.cf-btn{
  cursor:pointer; font:inherit; font-size:.78rem; letter-spacing:.04em;
  color:var(--cf-ink); background:var(--cf-deep);
  border:1px solid var(--cf-line-2); border-radius:10px; padding:8px 13px;
  transition:border-color .15s, background .15s, transform .06s;
}
.cf-btn:hover{ border-color:var(--cf-cyan); }
.cf-btn:active{ transform:translateY(1px); }
.cf-btn.is-gold{ border-color:var(--cf-gold-2); color:#1a130a;
  background:linear-gradient(180deg,#f4d477,var(--cf-gold)); font-weight:700; }
.cf-btn.is-gold:hover{ filter:brightness(1.06); border-color:var(--cf-gold); }
.cf-btn.is-ghost{ background:transparent; }
.cf a{ color:var(--cf-cyan); text-underline-offset:3px; }
.cf :focus-visible{ outline:2px solid var(--cf-cyan); outline-offset:2px; border-radius:6px; }

/* chips / badges */
.cf-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:999px; border:1px solid currentColor; white-space:nowrap;
}
.cf-chip.tone-ok{ color:var(--cf-ok); }
.cf-chip.tone-season{ color:var(--cf-teal); }
.cf-chip.tone-est{ color:var(--cf-warn); }
.cf-chip.tone-live{ color:var(--cf-danger); }
.cf-chip.tone-neutral{ color:var(--cf-dim); }
.cf-chip.tone-info{ color:var(--cf-info); }
.cf-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:.62rem;
  color:var(--cf-dim); background:var(--cf-abyss); border:1px solid var(--cf-line);
  padding:2px 7px; border-radius:7px; letter-spacing:.02em;
}
.cf-tag.is-flag{ color:var(--cf-warn); border-color:color-mix(in srgb,var(--cf-warn) 45%, var(--cf-line)); }

/* progress bar (RPGUI register) */
.cf-bar{ height:12px; border-radius:8px; background:var(--cf-abyss);
  border:1px solid var(--cf-line-2); overflow:hidden; box-shadow:inset 0 1px 3px #000; }
.cf-bar > i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--cf-teal),var(--cf-cyan));
  box-shadow:0 0 12px rgba(67,224,214,.5); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.cf-bar.is-gold > i{ background:linear-gradient(90deg,var(--cf-gold-2),var(--cf-gold)); box-shadow:0 0 12px rgba(232,196,90,.5); }

/* ============================================================================
   Standalone shell (only used when no shell mount points exist)
   ========================================================================== */
.cf-standalone{ max-width:1080px; margin:0 auto; padding:22px 18px 80px; }
.cf-topbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.cf-topbar .cf-title{ font-size:1.15rem; font-weight:800; letter-spacing:.02em; }
.cf-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 18px; }
.cf-tabs button{
  cursor:pointer; font:inherit; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cf-dim); background:var(--cf-deep); border:1px solid var(--cf-line);
  padding:9px 15px; border-radius:10px; transition:.15s;
}
.cf-tabs button:hover{ color:var(--cf-ink); border-color:var(--cf-line-2); }
.cf-tabs button[aria-current="true"]{
  color:var(--cf-gold); border-color:var(--cf-gold-2);
  background:linear-gradient(180deg,var(--cf-panel),var(--cf-deep)); }
.cf-tabpanel[hidden]{ display:none; }

/* section header shared by every feature */
.cf-sechead{ margin:0 0 14px; }
.cf-sechead h2{ font-size:1.05rem; font-weight:800; letter-spacing:.01em; margin:.2em 0 0; }

/* ============================================================================
   FEATURE 1 — PACKING / LOADOUT
   ========================================================================== */
.cf-pack{ display:block; }
.cf-bagpicker{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.cf-bag{
  position:relative; text-align:left; cursor:pointer;
  background:var(--cf-deep); border:1px solid var(--cf-line-2); border-radius:12px;
  padding:12px; transition:border-color .15s, box-shadow .15s, transform .06s;
}
.cf-bag:hover{ border-color:var(--cf-cyan); }
.cf-bag[data-count]:not([data-count="0"]){
  border-color:var(--cf-gold-2); box-shadow:0 0 0 1px rgba(232,196,90,.25) inset, 0 0 22px -8px rgba(232,196,90,.5); }
.cf-bag .cf-bagtop{ display:flex; align-items:center; gap:8px; }
.cf-bag .cf-bagemoji{ font-size:1.3rem; }
.cf-bag .cf-bagname{ font-weight:700; font-size:.9rem; }
.cf-bag .cf-bagvol{ font-size:.68rem; color:var(--cf-cyan); letter-spacing:.04em; }
.cf-bag .cf-bagblurb{ font-size:.72rem; color:var(--cf-dim); margin-top:7px; line-height:1.45; }
.cf-bag .cf-bagcabin{ position:absolute; top:9px; right:10px; font-size:.56rem; letter-spacing:.08em; }
.cf-bag .cf-bagcabin.yes{ color:var(--cf-mint); } .cf-bag .cf-bagcabin.no{ color:var(--cf-coral); }
.cf-stepper{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.cf-stepper button{
  width:28px; height:28px; border-radius:8px; cursor:pointer; font:inherit; font-size:1rem; line-height:1;
  color:var(--cf-ink); background:var(--cf-panel-2); border:1px solid var(--cf-line-2); }
.cf-stepper button:hover{ border-color:var(--cf-cyan); }
.cf-stepper .cf-count{ min-width:22px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
.cf-stepper .cf-count.zero{ color:var(--cf-dim-2); font-weight:500; }

.cf-volreadout{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:16px 0 4px; padding:13px 16px; border-radius:12px;
  background:linear-gradient(180deg,var(--cf-panel-2),var(--cf-deep));
  border:1px solid var(--cf-gold-2); box-shadow:0 0 0 1px rgba(232,196,90,.14) inset; }
.cf-volreadout .cf-vollabel{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cf-gold); }
.cf-volreadout .cf-volnum{ font-size:1.5rem; font-weight:800; color:var(--cf-ink); font-variant-numeric:tabular-nums; }
.cf-volreadout .cf-volnum small{ font-size:.9rem; color:var(--cf-dim); font-weight:600; }
.cf-volreadout .cf-volmeta{ font-size:.72rem; color:var(--cf-dim); }
.cf-quickpicks{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }

/* filter bar shared by packing + booking */
.cf-filters{ display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 10px; }
.cf-filters button{
  cursor:pointer; font:inherit; font-size:.68rem; letter-spacing:.05em;
  color:var(--cf-dim); background:var(--cf-deep); border:1px solid var(--cf-line);
  padding:6px 11px; border-radius:999px; transition:.14s; }
.cf-filters button:hover{ color:var(--cf-ink); }
.cf-filters button[aria-pressed="true"]{ color:var(--cf-cyan); border-color:var(--cf-cyan);
  background:color-mix(in srgb,var(--cf-cyan) 12%, var(--cf-deep)); }

/* tiered checklist */
.cf-tier{ margin:18px 0 0; }
.cf-tierhead{ display:flex; align-items:center; gap:10px; margin:0 0 9px; }
.cf-tierhead .cf-tiername{ font-weight:800; font-size:.95rem; letter-spacing:.02em; }
.cf-tierhead .cf-tieremoji{ font-size:1.05rem; }
.cf-tierhead .cf-tiercount{ font-size:.68rem; color:var(--cf-dim); font-variant-numeric:tabular-nums; }
.cf-tierhead .cf-bar{ flex:1; min-width:60px; max-width:180px; }
.cf-tierblurb{ font-size:.74rem; color:var(--cf-dim); margin:-4px 0 10px; line-height:1.5; }
.cf-tier.tier-essential .cf-tiername{ color:var(--cf-gold); }
.cf-tier.tier-china_specific .cf-tiername{ color:var(--cf-coral); }
.cf-tier.tier-nice_to_have .cf-tiername{ color:var(--cf-cyan); }

.cf-items{ display:grid; gap:8px; }
.cf-item{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  padding:11px 13px; border-radius:11px;
  background:var(--cf-deep); border:1px solid var(--cf-line); transition:border-color .15s, background .15s; }
.cf-item:hover{ border-color:var(--cf-line-2); }
.cf-item.is-checked{ background:color-mix(in srgb,var(--cf-mint) 8%, var(--cf-deep)); border-color:color-mix(in srgb,var(--cf-mint) 34%, var(--cf-line)); }
.cf-item.is-checked .cf-itemlabel{ color:var(--cf-dim); text-decoration:line-through; text-decoration-color:var(--cf-dim-2); }
.cf-item.is-dim{ opacity:.5; }
.cf-check{
  appearance:none; -webkit-appearance:none; margin:2px 0 0; cursor:pointer;
  width:22px; height:22px; border-radius:7px; border:2px solid var(--cf-line-2); background:var(--cf-abyss);
  display:grid; place-content:center; transition:.14s; position:relative; }
.cf-check:hover{ border-color:var(--cf-cyan); }
.cf-check:checked{ border-color:var(--cf-mint); background:color-mix(in srgb,var(--cf-mint) 22%, var(--cf-abyss)); }
.cf-check:checked::after{ content:"✓"; color:var(--cf-mint); font-size:.9rem; font-weight:900; line-height:1; }
.cf-itembody .cf-itemtop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.cf-itemlabel{ font-weight:700; font-size:.9rem; }
.cf-itememoji{ font-size:.95rem; }
.cf-itemnote{ font-size:.76rem; color:var(--cf-dim); margin:5px 0 0; line-height:1.5; }
.cf-itemtags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }

/* pre-flight callout row */
.cf-callout{
  display:flex; gap:10px; align-items:flex-start; margin:14px 0; padding:12px 14px;
  border-radius:11px; background:color-mix(in srgb,var(--cf-warn) 9%, var(--cf-deep));
  border:1px solid color-mix(in srgb,var(--cf-warn) 40%, var(--cf-line)); }
.cf-callout .cf-cotitle{ font-weight:800; color:var(--cf-warn); font-size:.82rem; letter-spacing:.02em; }
.cf-callout p{ margin:4px 0 0; font-size:.78rem; color:var(--cf-dim); line-height:1.5; }

/* ============================================================================
   FEATURE 2 — SETUP WALKTHROUGHS + CONCIERGE NPC
   ========================================================================== */
.cf-concierge{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:stretch;
  margin:0 0 18px; padding:14px; }
.cf-portrait{
  width:88px; height:104px; border-radius:12px; flex:0 0 auto; overflow:hidden;
  display:grid; place-content:center; position:relative;
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb,var(--cf-violet) 32%, var(--cf-panel)), var(--cf-deep));
  border:2px solid var(--cf-gold-2);
  box-shadow:0 0 0 1px rgba(232,196,90,.2) inset, 0 0 26px -10px rgba(183,140,240,.6); }
.cf-portrait .cf-face{ font-size:2.6rem; filter:drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.cf-portrait .cf-pname{ position:absolute; bottom:0; left:0; right:0; text-align:center;
  font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--cf-gold);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.7)); padding:8px 2px 3px; }
.cf-speech{
  position:relative; align-self:center; flex:1;
  background:linear-gradient(180deg,var(--cf-panel-2),var(--cf-deep));
  border:1px solid var(--cf-line-2); border-radius:12px; padding:12px 15px; min-height:88px;
  box-shadow:0 10px 26px -20px #000; }
.cf-speech::before{ /* VN tail pointing at the portrait */
  content:""; position:absolute; left:-9px; top:34px; width:16px; height:16px;
  background:var(--cf-panel-2); border-left:1px solid var(--cf-line-2); border-bottom:1px solid var(--cf-line-2);
  transform:rotate(45deg); }
.cf-speech .cf-who{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cf-violet); font-weight:800; }
.cf-speech .cf-line{ margin:6px 0 0; font-size:.86rem; line-height:1.55; color:var(--cf-ink); min-height:1.4em; }
.cf-speech .cf-line.cf-typing::after{ content:"▋"; color:var(--cf-cyan); animation:cf-blink 1s steps(2) infinite; margin-left:1px; }
@keyframes cf-blink{ 50%{ opacity:0; } }
@media (max-width:560px){
  .cf-concierge{ grid-template-columns:1fr; }
  .cf-portrait{ width:64px; height:64px; border-radius:12px; }
  .cf-portrait .cf-face{ font-size:2rem; } .cf-portrait .cf-pname{ display:none; }
  .cf-speech::before{ display:none; }
}

.cf-onerule{
  margin:0 0 16px; padding:13px 16px; border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cf-danger) 12%, var(--cf-deep)),var(--cf-deep));
  border:1px solid color-mix(in srgb,var(--cf-danger) 45%, var(--cf-line)); }
.cf-onerule .cf-orh{ font-weight:800; color:var(--cf-danger); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.cf-onerule p{ margin:6px 0 0; font-size:.82rem; line-height:1.55; }

.cf-wt{ margin:12px 0; overflow:hidden; }
.cf-wthead{
  width:100%; text-align:left; cursor:pointer; font:inherit;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  background:transparent; border:0; color:inherit; padding:14px 16px; }
.cf-wthead:hover{ background:color-mix(in srgb,var(--cf-cyan) 5%, transparent); }
.cf-wtnum{ width:34px; height:34px; border-radius:9px; display:grid; place-content:center; font-weight:800;
  background:var(--cf-abyss); border:1px solid var(--cf-line-2); color:var(--cf-cyan); font-variant-numeric:tabular-nums; }
.cf-wttitle{ font-weight:800; font-size:.92rem; }
.cf-wtmeta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:5px; align-items:center; }
.cf-wtcaret{ color:var(--cf-dim); transition:transform .2s; font-size:.9rem; }
.cf-wt[data-open="true"] .cf-wtcaret{ transform:rotate(90deg); }
.cf-plan{ font-size:.58rem; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:6px; border:1px solid; }
.cf-plan.plan-A{ color:var(--cf-gold); border-color:var(--cf-gold-2); background:color-mix(in srgb,var(--cf-gold) 12%, transparent); }
.cf-plan.plan-B{ color:var(--cf-dim); border-color:var(--cf-line-2); }
.cf-wtbody{ display:none; padding:0 16px 16px; }
.cf-wt[data-open="true"] .cf-wtbody{ display:block; }
.cf-why{ font-size:.8rem; color:var(--cf-dim); line-height:1.55; margin:0 0 12px;
  border-left:2px solid var(--cf-line-2); padding-left:12px; }
.cf-gapnote{ font-size:.74rem; color:var(--cf-warn); margin:0 0 12px; line-height:1.5; }

.cf-steps{ display:grid; gap:8px; counter-reset:cf-step; }
.cf-step{
  display:grid; grid-template-columns:auto auto 1fr; gap:11px; align-items:start;
  padding:11px 13px; border-radius:11px; background:var(--cf-deep); border:1px solid var(--cf-line); }
.cf-step.is-done{ background:color-mix(in srgb,var(--cf-mint) 8%, var(--cf-deep)); border-color:color-mix(in srgb,var(--cf-mint) 30%, var(--cf-line)); }
.cf-stepn{ width:24px; height:24px; border-radius:7px; display:grid; place-content:center; margin-top:1px;
  font-size:.72rem; font-weight:800; background:var(--cf-abyss); border:1px solid var(--cf-line-2); color:var(--cf-dim); font-variant-numeric:tabular-nums; }
.cf-step.is-done .cf-stepn{ color:var(--cf-mint); border-color:var(--cf-mint); }
.cf-stepdo{ font-size:.83rem; line-height:1.5; }
.cf-step.is-done .cf-stepdo{ color:var(--cf-dim); }
.cf-steptip{ font-size:.74rem; color:var(--cf-teal); margin:5px 0 0; line-height:1.45; }
.cf-steptip::before{ content:"💡 "; }
.cf-stepflag{ display:inline-block; font-size:.58rem; letter-spacing:.06em; margin-top:6px; }
.cf-appbadge{ font-size:.58rem; font-weight:800; letter-spacing:.05em; color:var(--cf-moon);
  border:1px solid var(--cf-line-2); border-radius:6px; padding:1px 6px; margin-right:6px; }
.cf-victory{
  margin-top:12px; padding:11px 14px; border-radius:11px; font-size:.82rem; line-height:1.5;
  background:color-mix(in srgb,var(--cf-mint) 12%, var(--cf-deep));
  border:1px solid color-mix(in srgb,var(--cf-mint) 40%, var(--cf-line)); color:var(--cf-ink); }
.cf-victory.is-locked{ opacity:.55; }
.cf-victory .cf-vh{ font-weight:800; color:var(--cf-mint); letter-spacing:.04em; }
.cf-sources{ margin-top:12px; }
.cf-sources summary{ cursor:pointer; font-size:.68rem; color:var(--cf-dim-2); letter-spacing:.04em; }
.cf-sources ul{ margin:8px 0 0; padding-left:18px; }
.cf-sources li{ font-size:.68rem; color:var(--cf-dim); word-break:break-all; }

/* ============================================================================
   FEATURE 3 — BOOKING CODEX
   ========================================================================== */
.cf-book{ display:block; }
.cf-boss{
  position:relative; margin:0 0 20px; padding:16px 18px; border-radius:16px;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb,var(--cf-danger) 18%, transparent), transparent 60%),
    linear-gradient(180deg,var(--cf-panel-2),var(--cf-deep));
  border:2px solid var(--cf-danger);
  box-shadow:0 0 0 1px rgba(224,120,90,.2) inset, 0 0 40px -18px rgba(224,120,90,.7); }
.cf-boss .cf-bossh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cf-boss .cf-bosstitle{ font-weight:900; font-size:1rem; letter-spacing:.01em; color:var(--cf-danger); }
.cf-boss .cf-bosstag{ font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--cf-danger);
  border:1px solid var(--cf-danger); border-radius:6px; padding:2px 8px; }
.cf-boss .cf-verdict{ margin:10px 0 0; font-size:.84rem; line-height:1.55; }
.cf-boss ul.cf-facts{ margin:10px 0 0; padding-left:18px; }
.cf-boss ul.cf-facts li{ font-size:.78rem; color:var(--cf-dim); line-height:1.5; margin:5px 0; }
.cf-actions{ display:grid; gap:12px; margin-top:14px; }
.cf-action{ padding:12px 14px; border-radius:11px; background:var(--cf-abyss); border:1px solid var(--cf-line-2); }
.cf-action.is-critical{ border-color:var(--cf-danger); box-shadow:0 0 0 1px rgba(224,120,90,.16) inset; }
.cf-action .cf-actkind{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--cf-gold); }
.cf-action .cf-acthead{ font-weight:700; font-size:.86rem; margin:5px 0; }
.cf-action .cf-actdetail{ font-size:.78rem; color:var(--cf-dim); line-height:1.55; }

.cf-t15{ width:100%; border-collapse:collapse; margin-top:10px; font-size:.74rem; }
.cf-t15 th, .cf-t15 td{ text-align:left; padding:7px 9px; border-bottom:1px solid var(--cf-line); vertical-align:top; }
.cf-t15 th{ color:var(--cf-dim); font-weight:700; letter-spacing:.04em; font-size:.64rem; text-transform:uppercase; }
.cf-t15 tr.is-critical td{ color:var(--cf-ink); }
.cf-t15 tr.is-critical{ background:color-mix(in srgb,var(--cf-danger) 10%, transparent); }
.cf-t15 td .cf-legname{ font-weight:700; }
.cf-t15scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.cf-zoneline{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:6px 0 20px; }
.cf-zonecard{ padding:11px 12px; border-radius:11px; background:var(--cf-deep); border:1px solid var(--cf-line); }
.cf-zonecard.is-gw{ border-color:var(--cf-danger); }
.cf-zonecard .cf-zno{ font-size:.6rem; letter-spacing:.2em; color:var(--cf-cyan); font-weight:800; }
.cf-zonecard .cf-zname{ font-weight:800; font-size:.92rem; margin-top:2px; }
.cf-zonecard .cf-zdates{ font-size:.68rem; color:var(--cf-dim); margin-top:2px; font-variant-numeric:tabular-nums; }
.cf-zonecard .cf-zlv{ font-size:.68rem; color:var(--cf-dim-2); margin-top:5px; line-height:1.4; }

.cf-leg, .cf-entry, .cf-lodge{
  padding:12px 14px; border-radius:11px; background:var(--cf-deep); border:1px solid var(--cf-line); margin:8px 0; }
.cf-legtop{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cf-legverdict{ font-weight:800; font-size:.8rem; color:var(--cf-cyan); }
.cf-leg.is-critical{ border-color:var(--cf-gold-2); box-shadow:0 0 0 1px rgba(232,196,90,.14) inset; }
.cf-route{ font-weight:700; font-size:.86rem; }
.cf-route .cf-arrow{ color:var(--cf-gold); margin:0 6px; }
.cf-kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px 14px; margin:9px 0; }
.cf-kv div{ font-size:.72rem; } .cf-kv b{ color:var(--cf-dim); font-weight:600; margin-right:5px; }
.cf-note{ font-size:.76rem; color:var(--cf-dim); line-height:1.55; margin-top:6px; }
.cf-note.is-warn{ color:var(--cf-warn); }

.cf-group{ margin:18px 0 0; }
.cf-grouph{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cf-gold); margin:0 0 8px;
  padding-bottom:6px; border-bottom:1px solid var(--cf-line); }
.cf-entrytop{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.cf-entrytitle{ font-weight:800; font-size:.9rem; }
.cf-res{ font-size:.58rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:6px;
  border:1px solid var(--cf-line-2); color:var(--cf-dim); }
.cf-res.res-required, .cf-res.res-prebook-online{ color:var(--cf-coral); border-color:color-mix(in srgb,var(--cf-coral) 45%, var(--cf-line)); }
.cf-res.res-recommended{ color:var(--cf-warn); border-color:color-mix(in srgb,var(--cf-warn) 40%, var(--cf-line)); }
.cf-res.res-walk-in{ color:var(--cf-mint); border-color:color-mix(in srgb,var(--cf-mint) 40%, var(--cf-line)); }

.cf-budget{ width:100%; border-collapse:collapse; margin:8px 0; font-size:.8rem; }
.cf-budget td{ padding:8px 6px; border-bottom:1px solid var(--cf-line); }
.cf-budget td:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:var(--cf-gold); white-space:nowrap; }
.cf-budget tr.is-total td{ border-top:2px solid var(--cf-line-2); border-bottom:0; font-weight:800; color:var(--cf-ink); padding-top:11px; }
.cf-budget tr.is-total td:last-child{ color:var(--cf-gold); font-size:1rem; }

/* ============================================================================
   Magazine link
   ========================================================================== */
.cf-mag{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:22px 0; padding:16px 18px; border-radius:14px;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb,var(--cf-gold) 16%, transparent), transparent 55%),
    linear-gradient(180deg,var(--cf-panel-2),var(--cf-deep));
  border:1px solid var(--cf-gold-2); box-shadow:0 0 0 1px rgba(232,196,90,.14) inset; }
.cf-mag .cf-magicon{ font-size:1.9rem; }
.cf-mag .cf-magtxt{ flex:1; min-width:180px; }
.cf-mag .cf-magtitle{ font-weight:800; font-size:.92rem; }
.cf-mag .cf-magsub{ font-size:.74rem; color:var(--cf-dim); margin-top:3px; line-height:1.45; }

/* utility */
.cf-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cf-spread{ display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; }
.cf-hr{ border:0; border-top:1px solid var(--cf-line); margin:20px 0; }
.cf-empty{ padding:24px; text-align:center; color:var(--cf-dim); font-size:.82rem; }
@media (max-width:560px){
  .cf-kv{ grid-template-columns:1fr 1fr; }
  .cf-wthead{ grid-template-columns:auto 1fr auto; gap:9px; padding:12px; }
}