/* ======================================================================
   KNOWLEDGE CONFIGURATOR — page-specific styles.
   Loaded after preview-system.css and nav-mono.css.

   Replaces knowledge.css, which was built on preview.css. knowledge.css
   is left in place until /preview/knowledge/index-v2.html is swapped to
   index.html, then it can go.

   Canonical rules: AI-Bridge /shared/patterns/skyscape-page-design-system.md
   ----------------------------------------------------------------------
   MIGRATION NOTES — read before editing

   1. THE TOKEN TRIAL IS NOT APPLIED. knowledge.css redefined two brand
      tokens for this page only:
           --sky  #009ad1 -> #0183b2   (deeper, less electric)
           --ink  #2A3D50 -> #4f7884   (much lighter, teal-leaning)
      Its own note said "if adopted, move into preview.css and delete this
      block." It was never resolved, and the design system has since locked
      the original values. Keeping the trial scoped here would make
      Knowledge a different brand from the other three pages, so the
      system values win. TO COMPARE AGAIN, uncomment the trial block
      below — nothing else needs touching.

   2. --panel IS NOT var(--sky). knowledge.css set the dark panel surfaces
      to the same blue as a selected chip so "the chosen pill and the panel
      it builds read as one color story." The intent is kept, the exact
      value is not: white 13.5px text on #009ad1 is 3.2:1, below the 4.5:1
      minimum. --panel is var(--sky-ink) (#0078a6, 5.0:1) instead — same
      hue family, legible. Chips still select to var(--sky), so the story
      holds. DO NOT raise --panel back to var(--sky).

   3. RENAMED TO CLEAR A COLLISION:
           .stat -> .unistat
      The system's .stat is a bordered metric card with .n / .l children.
      This page's was a flex row of div > span + small. Same name, no
      shared markup. The page's is the one that moved.

   4. .chip EXTENDS the system chip rather than replacing it. The system
      chip is a static label; here it is an interactive toggle, so this
      file adds only the button reset and the .on state. Selectable chips
      are a real candidate for the system — promote on the second page
      that wants them, not before.

   5. DARK MODE is new. Every hardcoded #fff / var(--light) surface moved
      onto --card / --band, and the literal #2A3D50 and #9aa9b4 text
      colors onto --ink / --muted, so the panel, modal, list and blueprint
      empty state all follow the theme.

   6. WASH VARIANTS live here, keyed on body[data-wash]. /preview/ carries
      an unconditional copy of wash 1 in its own page styles. If the wash
      rotation is ever locked to one variant, these collapse into the
      system and both copies go.
      2026-10-17: the system now carries named variants .wash1-.wash4
      (section 3a), so this copy can go when this page is next touched.
   ====================================================================== */

/* ----------------------------------------------------------------------
   TOKEN TRIAL — UNCOMMENT TO COMPARE. See note 1 above.
:root{ --sky:#0183b2; --ink:#4f7884; --panel:#0183b2; --panel-deep:#026d96; }
   ---------------------------------------------------------------------- */

:root{
  --cream:#FDF6E9;
  --panel:var(--sky-ink);   /* dark panel surfaces — see note 2 */
  --panel-deep:#005f85;     /* surface strip, a step darker for hierarchy */
  --muted-on-ink:#DCEBF0;
  --muted-on-ink-2:#C3DBE3;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cream:#241f14}}
:root[data-theme="dark"]{--cream:#241f14}

em{font-style:normal;color:var(--sky)}

/* ==========================================================================
   WASH VARIANTS — 1-3 are live candidates, one picked at random per
   session (script in the page). ?wash=N overrides for testing. Wash 4 is
   retired from rotation but kept for reference.
   ========================================================================== */
body[data-wash="1"] .wash{background:
  radial-gradient(110% 90% at 82% 10%,rgba(255,209,102,.26) 0%,rgba(255,209,102,0) 55%),
  radial-gradient(95% 80% at 10% 18%,rgba(0,154,209,.20) 0%,rgba(0,154,209,0) 60%),
  linear-gradient(168deg,#EAF4F9 0%,#F4F9FC 40%,var(--cream) 100%)}
body[data-wash="2"] .wash{background:
  radial-gradient(120% 95% at 88% 6%,rgba(0,154,209,.16) 0%,rgba(0,154,209,0) 58%),
  linear-gradient(170deg,#E6F1F7 0%,#F2F8FB 46%,#FAFCFD 100%)}
body[data-wash="3"] .wash{background:
  radial-gradient(100% 70% at 20% 0%,rgba(0,154,209,.28) 0%,rgba(0,154,209,0) 62%),
  radial-gradient(90% 80% at 92% 100%,rgba(255,209,102,.32) 0%,rgba(255,209,102,0) 60%),
  linear-gradient(165deg,#DCEDF6 0%,#EFF6FA 44%,#FDF6E9 100%)}
body[data-wash="4"] .wash{background:
  linear-gradient(172deg,#F4F7F9 0%,#FAFBFC 55%,#FCFAF6 100%)}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wash{
  background:
   radial-gradient(110% 90% at 82% 10%,rgba(255,209,102,.10) 0%,rgba(255,209,102,0) 55%),
   radial-gradient(95% 80% at 10% 18%,rgba(0,154,209,.14) 0%,rgba(0,154,209,0) 60%),
   linear-gradient(168deg,#12212c 0%,#152632 40%,var(--cream) 100%) !important}}
:root[data-theme="dark"] .wash{
  background:
   radial-gradient(110% 90% at 82% 10%,rgba(255,209,102,.10) 0%,rgba(255,209,102,0) 55%),
   radial-gradient(95% 80% at 10% 18%,rgba(0,154,209,.14) 0%,rgba(0,154,209,0) 60%),
   linear-gradient(168deg,#12212c 0%,#152632 40%,var(--cream) 100%) !important}

/* ---------- classic-store jump chip ----------
   Right-justified beside "The full library". Named tab, so every later
   classic-store click reuses the one tab. */
.libhead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:10px}
.libhead h2{margin-bottom:0}
.storejump{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border-radius:var(--r-chip);text-decoration:none;flex-shrink:0;
  background:var(--card);border:1px solid var(--cline);
  box-shadow:0 6px 18px rgba(18,32,46,.10);transition:.15s;margin-bottom:6px}
.storejump:hover{border-color:var(--sky);transform:translateY(-1px);text-decoration:none}
.storejump span{font-size:12.5px;color:var(--muted);font-weight:600}
.storejump b{font-size:12.5px;color:var(--sky);font-weight:700;white-space:nowrap}

/* ---------- specialty picker ----------
   Extends the system .chip with a button reset and a selected state.
   See note 4. */
.pick{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.pick .chip{cursor:pointer;font-family:var(--body);font-size:14px;
  background:var(--card);transition:.14s}
.pick .chip:hover{border-color:var(--sky);color:var(--sky)}
.pick .chip.on{background:var(--sky);border-color:var(--sky);color:#fff;font-weight:700}
.pick .chip b{font-weight:700;font-size:12px;opacity:.65}
.pick .chip.on b{opacity:.85}
.more{border:none;background:none;color:var(--action);font-weight:700;font-size:13px;
  cursor:pointer;padding:9px 4px;font-family:var(--body)}

/* ---------- the panel ---------- */
.uni{margin-top:34px;border:1px solid var(--cline);border-radius:var(--r-card);
  overflow:hidden;background:var(--card);min-height:340px;
  box-shadow:0 22px 50px rgba(18,32,46,.16), 0 3px 8px rgba(18,32,46,.06)}
.uni-head{background:var(--panel);color:#fff;padding:22px 26px}
.uni-head h3{font-family:var(--display);font-weight:600;font-size:24px;margin:0;color:#fff}
.uni-head p{font-size:13.5px;color:var(--muted-on-ink);margin-top:5px}
.uni-body{padding:26px;background:var(--card)}

/* Renamed from .stat — see note 3. */
.unistat{display:flex;flex-wrap:wrap;gap:30px;padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid var(--line)}
.unistat div span{display:block;font-family:var(--display);font-weight:600;font-size:32px;
  color:var(--sky);line-height:1}
.unistat div small{font-size:12px;color:var(--muted);font-weight:600}
.unistat div.price span{color:var(--ink)}
.unistat div.price em{font-style:normal;font-size:15px;color:var(--muted)}
.unistat div.price sup{font-size:11px;color:var(--muted);vertical-align:super}

.rooted{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--sky);margin-bottom:12px}
.names{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.5;color:var(--ink)}
.names i{font-style:normal;color:var(--muted)}

/* ---------- publisher chips ---------- */
.pubs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}
.pubs-h{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;width:100%}
.pub{display:inline-flex;flex-direction:column;background:var(--card);
  border:1px solid var(--cline);border-radius:9px;padding:8px 13px;
  box-shadow:0 1px 3px rgba(18,32,46,.05)}
.pub b{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.2}
.pub small{font-size:10.5px;color:var(--sky);font-weight:700;letter-spacing:.6px;margin-top:3px}
.pub small.n{color:var(--muted);font-weight:600;letter-spacing:0}

/* ---------- packaged alternatives ---------- */
.alts{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.alts h5{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;font-family:var(--body)}
.alts .why{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.alt{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--cline);border-radius:10px;padding:12px 16px;margin-bottom:8px;
  background:var(--band);flex-wrap:wrap}
.alt b{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.alt small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.alt .p{text-align:right;white-space:nowrap}
.alt .p em{font-style:normal;font-weight:700;font-size:15px;color:var(--ink)}
.alt .p em sup{font-size:10px;color:var(--muted);margin-left:1px}
.alt .p s{display:block;font-size:11.5px;color:var(--muted)}
.save{display:inline-block;background:rgba(61,122,43,.12);color:#3d7a2b;font-size:10.5px;
  font-weight:700;letter-spacing:.6px;border-radius:5px;padding:3px 7px;margin-left:8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .save{
  background:rgba(127,201,106,.16);color:#7fc96a}}
:root[data-theme="dark"] .save{background:rgba(127,201,106,.16);color:#7fc96a}

.uni-cta{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Neutral caption for customer-facing fine copy. NOT the system's .note
   gold callout — these are footnotes, not annotations. */
.cap{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
.fine{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}

/* ---------- the lens ---------- */
.lens{background:var(--panel);color:#fff;padding:54px 30px 46px;text-align:center;
  min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lens svg{width:186px;height:186px;display:block;margin:0 auto 26px}
.lens .r{fill:none;stroke:#fff}
.lens .r1{stroke-width:3;stroke-dasharray:3 10;opacity:.75;
  transform-origin:50% 50%;animation:cw 9s linear infinite}
.lens .r2{stroke-width:2;stroke-dasharray:2 7;opacity:.45;
  transform-origin:50% 50%;animation:ccw 6.5s linear infinite}
.lens .r3{stroke-width:3;stroke-dasharray:44 210;opacity:1;stroke-linecap:round;
  transform-origin:50% 50%;animation:cw 2.4s cubic-bezier(.6,0,.4,1) infinite}
.lens .core{fill:#fff;animation:pulse 2s ease-in-out infinite}
.lens .halo{fill:#fff;opacity:.16;animation:halo 2s ease-in-out infinite}
@keyframes cw{to{transform:rotate(360deg)}}
@keyframes ccw{to{transform:rotate(-360deg)}}
@keyframes pulse{0%,100%{opacity:.9;r:9}50%{opacity:1;r:12}}
@keyframes halo{0%,100%{opacity:.10;r:26}50%{opacity:.24;r:38}}
.lens b{display:block;font-family:var(--display);font-weight:600;font-size:22px;color:#fff}
.lens span{display:block;font-size:12.5px;color:var(--muted-on-ink);margin-top:8px;
  min-height:18px;letter-spacing:.3px}
@media (prefers-reduced-motion:reduce){
  .lens .r1,.lens .r2,.lens .r3,.lens .core,.lens .halo{animation:none}
}

/* ---------- review modal ---------- */
.veil{position:fixed;inset:0;background:rgba(18,32,46,.55);
  z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding:5vh 20px;overflow-y:auto}
.veil.open{display:flex}
.modal{background:var(--card);border-radius:20px;max-width:660px;width:100%;
  box-shadow:0 30px 90px rgba(18,32,46,.35);overflow:hidden;
  animation:rise .22s cubic-bezier(.2,0,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}

.m-head{background:var(--panel);color:#fff;padding:26px 30px;position:relative}
.m-head .eyebrow{color:var(--gold);margin-bottom:8px}
.m-head h3{font-family:var(--display);font-weight:600;font-size:26px;
  margin:0 40px 0 0;line-height:1.25;color:#fff}
.m-head p{font-size:13.5px;color:var(--muted-on-ink);margin-top:7px}
.m-x{position:absolute;top:22px;right:22px;background:rgba(255,255,255,.18);border:none;
  color:#fff;width:32px;height:32px;border-radius:50%;font-size:19px;line-height:1;
  cursor:pointer;font-family:var(--body)}
.m-x:hover{background:rgba(255,255,255,.32)}

/* ---------- surface strip ---------- */
.surf{background:var(--panel-deep);border-top:1px solid rgba(255,255,255,.12);
  padding:16px 30px 18px}
.surf p{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted-on-ink-2);margin-bottom:12px}
.sgrid{display:flex;gap:10px;flex-wrap:wrap}
.s1{flex:1;min-width:126px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:12px 13px}
.s1 .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;margin-bottom:9px;background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.34)}
.s1 .ic svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.s1 b{display:block;font-size:13px;color:#fff;font-weight:700;line-height:1.3}
.s1 small{display:block;font-size:11.5px;color:var(--muted-on-ink-2);margin-top:4px;line-height:1.4}
.s1:nth-child(2) .ic{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.26)}
.s1:nth-child(3) .ic{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.20)}
.s1:nth-child(4) .ic{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.s1:nth-child(4) .ic svg{stroke:#D3E4EA}

.m-body{padding:26px 30px}
.m-sec{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.m-sec:last-of-type{border-bottom:none;margin-bottom:0}
.m-sec h4{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--sky);margin-bottom:12px;font-family:var(--body)}

.pitch{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.45;color:var(--ink)}
.pitch em{font-style:normal;color:var(--sky)}
.pitch+p{font-size:14.5px;color:var(--muted);margin-top:12px}

.src-list{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}
.src-list div{padding:9px 14px;font-size:13.5px;border-top:1px solid var(--line);color:var(--ink)}
.src-list div:first-child{border-top:none}
.src-list div:nth-child(even){background:var(--band)}
.src-list div em{font-style:normal;color:var(--muted);font-size:12px}

.m-price{background:var(--band);border-radius:14px;padding:20px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.m-price .big{font-family:var(--display);font-weight:600;font-size:38px;line-height:1;color:var(--ink)}
.m-price .big small{font-family:var(--body);font-size:14px;color:var(--muted);font-weight:600}
.m-price .sub{font-size:12.5px;color:var(--muted);margin-top:6px}
.m-foot{padding:0 30px 28px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ---------- the full library list ----------
   Category rides with the title as a chip rather than sitting in a right
   column. At 377 rows the right-aligned version made the eye travel across
   whitespace to pair two things that belong together. */
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.tools input{flex:1;min-width:220px;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 15px;font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--card)}
.tools input:focus{outline:none;border-color:var(--sky)}
.tools select{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:var(--body);font-size:14px;color:var(--muted);background:var(--card)}
.count{font-size:13px;color:var(--muted)}

.list{border:1px solid var(--cline);border-radius:var(--r-card);overflow:hidden;
  background:var(--card)}
.row{display:flex;gap:14px;align-items:baseline;padding:12px 18px;
  border-top:1px solid var(--line);font-size:14px}
.row:first-child{border-top:none}
.row:nth-child(even){background:var(--band)}
.row .t{flex:1;min-width:0;color:var(--ink);line-height:1.5}
.row .s{font-size:12px;color:var(--muted);white-space:nowrap}

/* inline chips, attached to the title */
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  border-radius:5px;padding:2px 7px;margin-left:7px;vertical-align:1px;white-space:nowrap}
.tag.cat{background:var(--sky-soft);color:var(--sky-ink);border:1px solid rgba(0,154,209,.22)}
.tag.spec{background:var(--card);color:var(--muted);border:1px solid var(--cline)}
.row:nth-child(even) .tag.spec{background:var(--card)}
.empty{padding:30px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- empty state ----------
   Drafting grid: fine 8px squares under a heavier rule, on a faint
   blueprint tint. The rings sit at the same geometry as the lens that
   replaces them, so empty / building / built read as one object at three
   stages. Pure CSS gradients, no image request. */
.uni:has(> .uni-empty){display:block}
.uni-empty{position:relative;padding:0;min-height:340px;height:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    linear-gradient(rgba(0,154,209,.16) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(0,154,209,.16) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(rgba(0,154,209,.075) 1px, transparent 1px) 0 0 / 100% 8px,
    linear-gradient(90deg, rgba(0,154,209,.075) 1px, transparent 1px) 0 0 / 8px 100%,
    linear-gradient(165deg,#F7FBFD 0%,#EDF6FA 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .uni-empty{
  background:
    linear-gradient(rgba(143,211,238,.14) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(143,211,238,.14) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(rgba(143,211,238,.07) 1px, transparent 1px) 0 0 / 100% 8px,
    linear-gradient(90deg, rgba(143,211,238,.07) 1px, transparent 1px) 0 0 / 8px 100%,
    linear-gradient(165deg,#14222e 0%,#101c26 100%)}}
:root[data-theme="dark"] .uni-empty{
  background:
    linear-gradient(rgba(143,211,238,.14) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(143,211,238,.14) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(rgba(143,211,238,.07) 1px, transparent 1px) 0 0 / 100% 8px,
    linear-gradient(90deg, rgba(143,211,238,.07) 1px, transparent 1px) 0 0 / 8px 100%,
    linear-gradient(165deg,#14222e 0%,#101c26 100%)}
.uni-empty::before{content:'';position:absolute;width:250px;height:250px;
  border-radius:50%;border:1.5px solid rgba(0,154,209,.20);
  box-shadow:0 0 0 30px rgba(0,154,209,.055), inset 0 0 0 34px rgba(0,154,209,.055)}
.uni-empty::after{content:'';position:absolute;width:112px;height:112px;
  border-radius:50%;border:1.5px dashed rgba(0,154,209,.34)}
.uni-empty .in{position:relative;z-index:1;max-width:46ch;padding:0 32px}
.uni-empty .in b{display:block;font-family:var(--display);font-weight:600;font-size:30px;
  color:var(--ink);margin-bottom:12px;line-height:1.2;letter-spacing:-.3px}
.uni-empty .in span{display:block;font-size:16px;color:var(--muted);line-height:1.6}
.uni-empty .in i{display:block;font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:2.4px;text-transform:uppercase;margin-top:20px;color:var(--sky)}

@media(max-width:760px){
  .unistat{gap:20px}
  .row{flex-wrap:wrap;gap:4px 12px}
  .row .t{flex:100%}
  .m-head,.m-body,.surf{padding-left:22px;padding-right:22px}
  .m-foot{padding-left:22px;padding-right:22px}
  .pitch{font-size:18px}
  .s1{min-width:calc(50% - 5px)}
  .lens svg{width:150px;height:150px}
  .uni,.lens{min-height:300px}
}