/* The design library.
 *
 * A white page with two floating surfaces on it. On the left, a toned panel: the Desktop/Phone
 * switch, Expand all and Collapse all, and one raised card per design system that opens to its
 * designs. On the right, the stage: the chosen design, edge to edge, with two floating buttons for
 * the previous and the next one. Depth comes from tone and a three-term shadow, never from lines.
 * Colour means one thing here: which design system. */

:root{
  color-scheme:light;
  --canvas:#ffffff; --rail:#f3f5fa; --s1:#ffffff; --s2:#eceff6; --s3:#e8ebf2; --s4:#dce0ea; --sr:#ffffff;
  --ink:#141926; --ink2:#3c4457; --ink3:#596175;
  --pri:#1d2b6b; --on-pri:#ffffff; --ink-bar:#161d33; --on-bar2:#c0c7dc;
  --e1:0 1px 2px rgba(18,26,56,.18),0 0 8px rgba(18,26,56,.08),0 4px 10px -2px rgba(18,26,56,.14);
  --e2:0 1px 3px rgba(18,26,56,.14),0 0 18px rgba(18,26,56,.12),0 12px 26px -6px rgba(18,26,56,.22);
  --e3:0 2px 4px rgba(18,26,56,.10),0 0 20px rgba(18,26,56,.10),0 16px 34px -8px rgba(18,26,56,.26);
  --e4:0 2px 6px rgba(18,26,56,.12),0 0 28px rgba(18,26,56,.12),0 24px 48px -12px rgba(18,26,56,.32);
  --e5:0 4px 10px rgba(18,26,56,.14),0 0 40px rgba(18,26,56,.14),0 34px 72px -16px rgba(18,26,56,.42);
  --ring:0 0 0 2px var(--sr),0 0 0 4px var(--pri);
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-full:999px;
  --t-fast:120ms; --t-base:200ms; --ease:cubic-bezier(.2,0,0,1);
  --rail-w:288px;

  /* one hue per design system, strong enough for white text on it (4.5:1 or better) */
  --h-bento:#C2185B; --h-modern:#0A6CC9; --h-feed:#B4321F; --h-browse:#0B65A8; --h-read:#7A5C00; --h-board:#5B37C2;
  --h-data:#00726F; --h-flow:#1B6E44; --h-converse:#9A2A86; --h-shell:#3A4AA0; --h-place:#4F6B12;
  --h-profile:#A34A12;
}
/* app.js sets data-theme from the visitor`s system, or from ?theme= when a page frames the library */
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0c0e13; --rail:#14171e; --s1:#1c2029; --s2:#0f1117; --s3:#30364a; --s4:#3b425a; --sr:#2c3241;
  --ink:#eef0f6; --ink2:#c7ccda; --ink3:#a3aabd;
  --pri:#b9c5f5; --on-pri:#10152a; --ink-bar:#343c5c; --on-bar2:#cbd1e2;
  --e1:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.55),0 4px 10px -2px rgba(0,0,0,.5);
  --e2:inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.5),0 12px 24px -6px rgba(0,0,0,.7);
  --e3:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.5),0 18px 36px -8px rgba(0,0,0,.78);
  --e4:inset 0 1px 0 rgba(255,255,255,.08),0 24px 48px -12px rgba(0,0,0,.85);
  --e5:inset 0 1px 0 rgba(255,255,255,.08),0 34px 72px -16px rgba(0,0,0,.92);
  --h-bento:#F06A9D; --h-modern:#6CB4F5; --h-feed:#F2876F; --h-browse:#5FB3EB; --h-read:#DFB64A; --h-board:#AE93F5;
  --h-data:#4CC9C9; --h-flow:#55C38C; --h-converse:#EC7FD6; --h-shell:#8E9DEE; --h-place:#A6C45C;
  --h-profile:#E89359;
}

:where(*,*::before,*::after){ box-sizing:border-box }
:where(button){ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:inherit }
:where(h1,h2,p){ margin:0 }
html,body{ height:100%; margin:0; overflow:hidden }
body{ background:var(--canvas); color:var(--ink); font:500 14px/20px var(--ui); -webkit-font-smoothing:antialiased }
svg{ display:block; flex:none }
:focus{ outline:none }
:focus-visible{ box-shadow:var(--ring) }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

.app{ height:100%; display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); gap:14px; padding:12px }

/* ── the panel: toned, floating ── */
.rail{
  min-height:0; display:flex; flex-direction:column; gap:12px; padding:14px 12px 12px;
  background:var(--rail); border-radius:var(--r-xl); box-shadow:var(--e2); position:relative; z-index:10;
}
.rhead{ display:flex; align-items:center; gap:8px; padding:2px 4px 0 6px }
.brand{ flex:1; font:700 18px/24px var(--ui); letter-spacing:-.015em }
.closer{ display:none }

/* the switch: a track with the chosen side raised out of it */
/* the library in three numbers */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.stat{ background:var(--s1); border-radius:var(--r-md); box-shadow:var(--e1); padding:9px 10px 8px; display:grid; gap:1px;
  transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease) }
.stat:hover{ box-shadow:var(--e2); transform:translateY(-1px) }
.stat b{ font:700 21px/24px var(--ui); font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.stat span{ font:600 12px/16px var(--ui); color:var(--ink3) }

/* the hover card: what a system or a design is for, beside the row it belongs to */
.pop{ position:fixed; z-index:60; width:316px; padding:14px 16px 13px; border-radius:var(--r-lg); background:var(--s1);
  box-shadow:var(--e4); pointer-events:none; opacity:0; transform:translateX(-6px);
  transition:opacity 160ms var(--ease),transform 160ms var(--ease) }
.pop.on{ opacity:1; transform:none }
.pop::before{ content:""; position:absolute; left:-6px; top:var(--arrow,50%); width:12px; height:12px; margin-top:-6px;
  background:var(--s1); transform:rotate(45deg); box-shadow:-2px 2px 3px rgba(18,26,56,.06) }
.pop .fam{ display:inline-flex; align-items:center; gap:6px; font:600 12px/16px var(--ui);
  color:color-mix(in srgb,var(--h) 80%,var(--ink)) }
.pop .fam i{ width:8px; height:8px; border-radius:50%; background:var(--h) }
.pop b{ display:block; margin-top:4px; font:700 16px/22px var(--ui); letter-spacing:-.01em }
.pop p{ margin:6px 0 0; font:400 14px/20px var(--ui); color:var(--ink2) }
.pop .best{ margin-top:8px; padding-top:8px; box-shadow:inset 0 1px 0 var(--s3); font-size:13px; line-height:18px; color:var(--ink3) }
.pop .best em{ font-style:normal; font-weight:600; color:var(--ink2) }
:root[data-theme="dark"] .pop{ background:#232836 }
:root[data-theme="dark"] .pop::before{ background:#232836 }
@media (hover:none){ .pop{ display:none } }

/* the switch: a deep-ink track; the chosen side is a white pill that slides across it */
.seg{ position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; background:var(--ink-bar); border-radius:var(--r-full);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 4px rgba(12,18,40,.22),0 10px 22px -8px rgba(12,18,40,.38) }
.seg::before{ content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:var(--r-full);
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform 240ms var(--ease) }
.seg[data-on="phone"]::before{ transform:translateX(100%) }
.seg button{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px;
  border-radius:var(--r-full); font:600 14px/18px var(--ui); color:var(--on-bar2); transition:color 240ms var(--ease) }
.seg button:hover{ color:#fff }
.seg button[aria-pressed="true"]{ color:#161d33 }

.tools{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.tbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; border-radius:var(--r-full);
  background:var(--sr); color:var(--ink2); font:600 13px/18px var(--ui); box-shadow:var(--e1);
  transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.tbtn:hover{ box-shadow:var(--e2); transform:translateY(-1px); color:var(--ink) }
.tbtn:active{ transform:translateY(1px); box-shadow:none }
.tbtn[disabled]{ opacity:.5; cursor:default; transform:none; box-shadow:none }

/* the one scrolling region of the panel */
.systems{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:10px;
  margin:0 -6px; padding:4px 6px 8px; scrollbar-width:thin }

/* a design system: a raised white card that opens in place */
.sys{ --h:var(--ink3); flex:none; background:var(--s1); border-radius:var(--r-lg); box-shadow:var(--e1);
  transition:box-shadow var(--t-base) var(--ease) }
.sys:hover,.sys.open{ box-shadow:var(--e2) }
.shead{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 10px 10px 10px; border-radius:var(--r-lg) }
.sicon{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; color:#fff; font:700 16px/1 var(--ui);
  /* a small 3D tile: lit from the top, its own colour in the shadow */
  background:linear-gradient(160deg,color-mix(in srgb,var(--h) 70%,#fff) 0%,var(--h) 55%,color-mix(in srgb,var(--h) 80%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.18),0 4px 10px -2px color-mix(in srgb,var(--h) 55%,transparent) }
:root[data-theme="dark"] .sicon{ color:#0c0e13 }
.sname{ flex:1; min-width:0; font:600 15.5px/20px var(--ui); letter-spacing:-.01em }
.scount{ font:600 12.5px/1 var(--ui); font-variant-numeric:tabular-nums; color:var(--ink3) }
.chev{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--s3); color:var(--ink2);
  transition:transform var(--t-base) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease) }
.shead:hover .chev{ background:var(--h); color:#fff }
.sys:not(.open) .chev{ transform:rotate(-90deg) }
.sbody{ display:none; padding:0 8px 10px; gap:3px; flex-direction:column }
.sys.open .sbody{ display:flex }
.row{ display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:8px 12px; border-radius:var(--r-sm);
  color:var(--ink2); font:500 14.5px/20px var(--ui); transition:background var(--t-fast) var(--ease) }
.row::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--s4); flex:none }
.row:hover{ background:var(--s3); color:var(--ink) }
.row[aria-current="true"]{ background:color-mix(in srgb,var(--h) 13%,var(--s1)); color:color-mix(in srgb,var(--h) 78%,var(--ink));
  font-weight:600; box-shadow:var(--e1) }
.row[aria-current="true"]::before{ background:var(--h) }
:root[data-theme="dark"] .row[aria-current="true"]{ background:color-mix(in srgb,var(--h) 22%,var(--s1)); color:var(--ink) }

/* ── the stage: the design, edge to edge ── */
.stage{ position:relative; min-width:0; min-height:0; border-radius:var(--r-xl); overflow:hidden; background:var(--s2);
  box-shadow:var(--e3) }
.stage.phone{ background:
  radial-gradient(70% 90% at 50% 40%, color-mix(in srgb,var(--h,var(--pri)) 16%,var(--s1)) 0, var(--s2) 75%) }
.frame{ position:absolute; inset:0 }
.frame iframe{ position:absolute; top:0; left:0; border:0; display:block; transform-origin:0 0; background:transparent }

.frame.busy::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 22%,rgba(140,150,180,.16) 50%,transparent 78%);
  background-size:220% 100%; animation:sh 1.1s linear infinite }
@keyframes sh{ to{ background-position:-220% 0 } }

/* floating actions: round, raised, lifting on hover */
.fab{ position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--sr); color:var(--ink);
  box-shadow:var(--e4); transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease) }
.fab:hover{ transform:translateY(-3px); box-shadow:var(--e5) }
.fab:active{ transform:translateY(1px); box-shadow:var(--e2) }
.fab[disabled]{ opacity:.45; cursor:default; transform:none; box-shadow:var(--e2) }
.fabs{ position:absolute; right:22px; bottom:22px; display:flex; gap:12px; z-index:5 }
.fab.menu{ display:none; position:absolute; left:14px; top:14px; z-index:5; background:var(--pri); color:var(--on-pri) }

@media (max-width:760px){
  .app{ grid-template-columns:1fr; padding:8px }
  .rail{ position:fixed; top:8px; bottom:8px; left:8px; width:min(86vw,320px); z-index:30; box-shadow:var(--e5);
    transform:translateX(calc(-100% - 16px)); transition:transform 240ms var(--ease) }
  body[data-rail="open"] .rail{ transform:none }
  .closer{ display:grid }
  .ibtn{ width:44px; height:44px; border-radius:50%; place-items:center; color:var(--ink2) }
  .ibtn:hover{ background:var(--s3) }
  .fab.menu{ display:grid }
  .fabs{ right:14px; bottom:14px; gap:10px }
  .row{ min-height:44px }
  .tbtn{ min-height:44px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important }
}

/* ── phone: the system's designs side by side ── */
.strip{ position:absolute; inset:0; display:flex; align-items:center; gap:32px; padding:0 48px; overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:thin }
.strip::before,.strip::after{ content:""; flex:1 0 0 }
.ph{ position:relative; flex:none; scroll-snap-align:center; border-radius:36px;
  transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease),filter var(--t-base) var(--ease);
  transform:scale(.9); opacity:.62; filter:saturate(.8) }
.ph:hover{ opacity:.85 }
.ph.on{ transform:none; opacity:1; filter:drop-shadow(0 30px 40px rgba(18,26,56,.30)) }
.ph.bare iframe{ border-radius:40px; box-shadow:0 0 0 9px #0e0f13, 0 30px 50px -10px rgba(18,26,56,.35) }
.ph iframe{ position:absolute; top:0; left:0; border:0; display:block; transform-origin:0 0; background:transparent }

/* every system card wears a light tint of its own colour, so the panel is not a stack of white */
.sys{ background:color-mix(in srgb,var(--h) 8%,var(--s1)) }
.sys.open{ background:color-mix(in srgb,var(--h) 6%,var(--s1)) }
.row[aria-current="true"]{ background:var(--s1) }
:root[data-theme="dark"] .sys{ background:color-mix(in srgb,var(--h) 10%,var(--s1)) }

/* a floating button names where it goes */
.fab[data-tip]::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); right:0; white-space:nowrap;
  padding:6px 10px; border-radius:var(--r-sm); background:var(--ink-bar); color:#fff; font:600 12.5px/16px var(--ui);
  box-shadow:var(--e2); opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease) }
.fab[data-tip]:hover::after,.fab[data-tip]:focus-visible::after{ opacity:1; transform:none }
.fab[disabled]::after{ display:none }
@media (hover:none){ .fab[data-tip]::after{ display:none } }