/* ============================================================
   KAGE SKIN FOR THE INNER PAGES
   Case files and the course plan keep their own markup and layout
   (style.css, case-file.css, course-plan.css); this sheet re-skins them
   in the home page's language — night ink, bone type, one vermilion,
   Onest throughout — by remapping the tokens those sheets are written
   in, then restating the handful of components whose shape is part of
   the old look. Loaded last, only when <html data-skin="kage">.
   ============================================================ */

html[data-skin="kage"]{
  background:#f5f7fa;

  /* the old theme's tokens, in Kage's palette (outranks [data-theme]) */
  --indigo:#e0231c;               /* the brand red → vermilion */
  --coral:#ff5a3c;                /* → ember */
  --green:#182019;                /* status dots: bone, the page has one colour */
  --black:#f5f7fa;
  --surface:rgba(237,241,245,.92);
  --surface-2:rgba(229,235,239,.94);
  --card-bg:rgba(241,244,247,.72);
  --section-alt:rgba(237,241,245,.78);
  --white:#182019;
  --gray:#5a6560;
  --menu-bg:rgba(246,249,252,.98);
  --border-subtle:rgba(24,32,25,.09);
  --border-soft:rgba(24,32,25,.06);
  --border-medium:rgba(24,32,25,.14);
  --input-bg:rgba(24,32,25,.03);
  --input-border:rgba(24,32,25,.13);
  --footer-dim:rgba(24,32,25,.4);
  --footer-dimmer:rgba(24,32,25,.22);
  --corner-color:var(--indigo);
  --mono:'Onest',system-ui,sans-serif;
  --sans:'Onest',system-ui,sans-serif;
  --display:'Onest',system-ui,sans-serif;

  /* course plan */
  --cp-body:#404b43;
  --cp-sans:'Onest',system-ui,sans-serif;
  --cp-amber:#c9a24a;             /* Kage's gold for the pro tips */
  --cp-amber-bg:rgba(201,162,74,.07);
  --cp-green-bg:rgba(24,32,25,.04);
}

/* the sky sits behind the document here — no .page wrapper to lift it over */
[data-skin="kage"] body::before{ z-index:-1; }

/* style.css hides the pointer for its bracket cursor; Kage keeps it and
   adds the ring */
[data-skin="kage"] *, [data-skin="kage"] *::before, [data-skin="kage"] *::after{ cursor:auto !important; }
[data-skin="kage"] :is(a, button, label, summary, [role="button"], [data-note], .cp-toc-item){ cursor:pointer !important; }
[data-skin="kage"] :is(input, textarea){ cursor:text !important; }

/* ---------------------------------------------------------- chrome
   style.css styles the old header by class and the old footer by tag;
   take both back for Kage's own */
[data-skin="kage"] .nav-links{ margin-right:0; list-style:none; }
[data-skin="kage"] .nav-links a.nav-link{
  font-family:'Onest',sans-serif; font-size:11px; font-weight:500; letter-spacing:.2em;
  color:var(--bone-dim); transition:none;
}
[data-skin="kage"] .nav-links a.nav-link::after{ content:none; }
@media (min-width:821px){ [data-skin="kage"] .nav-links{ display:flex; } }
@media (max-width:820px){ [data-skin="kage"] .nav-links a.nav-link{ font-size:17px; } }

[data-skin="kage"] footer.foot{
  display:block; z-index:auto; background:none; text-align:left;
  padding:28px var(--pad) 30px; border-top:1px solid var(--line-soft);
}
[data-skin="kage"] .foot .foot-base{ margin-top:0; padding-top:0; border-top:0; }

/* ---------------------------------------------------------- type */
[data-skin="kage"] :is(.cf-title, .cp-title, .cp-toc-title, .cp-access-title, .module-title, .cf-panel-title, .cp-modal-title){
  font-weight:400; text-transform:uppercase; letter-spacing:-.012em; line-height:1.055;
  text-shadow:0 2px 34px rgba(247,250,252,.72);
}
[data-skin="kage"] .cf-title{ font-size:clamp(34px,5vw,72px); }
[data-skin="kage"] .cp-title{ font-size:clamp(32px,4.6vw,68px); }
[data-skin="kage"] .cf-metric-val{ font-weight:300; letter-spacing:-.02em; color:var(--bone); }

/* the old mono labels become Kage's tracked small caps */
[data-skin="kage"] :is(.cf-file-badge, .cf-year, .cf-goal-idx, .cf-role-label, .cf-step-num, .cf-challenge-num,
  .cf-metric-label, .cf-info-card-label, .cp-eyebrow, .cp-toc-kicker, .cp-access-kicker, .cp-modal-kicker,
  .cp-cover-footer, .module-number, .day-time, .day-meta-label, .section-subtitle){
  font-weight:500; letter-spacing:.22em; text-transform:uppercase;
}
[data-skin="kage"] :is(.cp-eyebrow, .cp-toc-kicker, .cp-access-kicker, .cp-modal-kicker){ color:var(--vermilion); }

/* ---------------------------------------------------------- section heads
   the numbered header reads like the home page's .sec-head */
[data-skin="kage"] .section-header{ align-items:baseline; gap:16px; margin-bottom:clamp(30px,5vh,66px); }
[data-skin="kage"] .section-num{ font-size:10px; font-weight:500; letter-spacing:.24em; color:var(--vermilion); }
[data-skin="kage"] .section-label{ font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
[data-skin="kage"] .section-line{ align-self:center; background:var(--line-soft); }

/* ---------------------------------------------------------- surfaces
   the hero keeps the open sky; reading sections sit on a dimmed wash of it */
[data-skin="kage"] #cf-hero{ padding-top:calc(var(--nav-h) + 56px); }
[data-skin="kage"] :is(.cf-section, .cp-toc, .module-section, .cp-access){ background-color:rgba(245,247,250,.66); }
[data-skin="kage"] :is(.cf-section-alt, .module-section:nth-of-type(even)){ background-color:var(--section-alt); }
[data-skin="kage"] :is(.corner, .canvas-corner){ display:none; }

/* ---------------------------------------------------------- pills */
[data-skin="kage"] :is(.tag, .badge, .day-tool-badge, .cf-responsibility){
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
  border:1px solid var(--line); border-radius:100px; background:rgba(245,247,250,.35);
  font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
}
[data-skin="kage"] .cf-responsibility{ padding:12px 18px; }
[data-skin="kage"] .tag:hover{ border-color:var(--bone-dim); color:var(--bone); }
[data-skin="kage"] .dot.green{ box-shadow:none; }

/* ---------------------------------------------------------- buttons
   one pill, bone fill rising from below — the home page's .cta */
[data-skin="kage"] :is(.hero-cta, .cp-access-btn, .cf-cta-secondary){
  isolation:isolate; overflow:hidden; border:1px solid var(--line); border-radius:100px;
  padding:17px 30px; background:transparent; box-shadow:none;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
  transition:color .45s var(--ease), border-color .45s;
}
[data-skin="kage"] :is(.hero-cta, .cp-access-btn)::before{
  background:var(--bone); transform:translate3d(0,101%,0); transform-origin:bottom;
  transition:transform .62s var(--ease-out);
}
[data-skin="kage"] :is(.hero-cta, .cp-access-btn):hover{ color:#f5f7fa; border-color:var(--bone); box-shadow:none; }
[data-skin="kage"] :is(.hero-cta, .cp-access-btn):hover::before{ transform:none; }
[data-skin="kage"] .cf-cta-secondary{ border-color:var(--line-soft); color:var(--bone-dim); }
[data-skin="kage"] .cf-cta-secondary:hover{ border-color:var(--bone-dim); color:var(--bone); }
[data-skin="kage"] .cp-modal-submit{
  border-radius:100px; border-color:var(--bone); background:var(--bone); color:#f5f7fa;
  font-weight:500; text-transform:uppercase;
}
[data-skin="kage"] .cp-modal-submit:hover{ box-shadow:0 0 24px rgba(24,32,25,.18); }
[data-skin="kage"] .cp-access-btn.is-unlocked::before{ background:var(--bone); }
[data-skin="kage"] .cp-access-btn.is-unlocked:hover{ box-shadow:none; }
[data-skin="kage"] :is(.cp-modal-card, .cp-modal-input){ border-radius:2px; }
[data-skin="kage"] .cf-back{ font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); }
[data-skin="kage"] .cf-back:hover{ color:var(--bone); }

/* ---------------------------------------------------------- notes
   the pinned paper becomes the home page's margin note: an ink panel with
   a vermilion rule. Still draggable; set square. */
[data-skin="kage"] .note{
  --nr:0deg !important;
  width:15rem; padding:14px 16px 15px 18px;
  background:rgba(245,247,250,.86); border:1px solid var(--line); border-left:1px solid var(--vermilion);
  box-shadow:0 22px 44px -20px rgba(255,255,255,.9);
}
[data-skin="kage"] .note:hover{ box-shadow:0 26px 50px -20px rgba(255,255,255,.95); }
[data-skin="kage"] .note-pin{ display:none; }
[data-skin="kage"] .note-tag{ font-size:9px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--vermilion); }
[data-skin="kage"] .note-text{ font-family:'Onest',sans-serif; font-size:13px; line-height:1.6; color:#404b43; }

[data-skin="kage"] .cp-progress{ box-shadow:none; }