/* library.css — the design library's own sheet.

   THE TOKENS ARE THE STUDIO'S, COPIED ON PURPOSE. index.html carries the whole
   token block inline (it has to: the workspace must not flash the wrong theme
   before a stylesheet arrives), so a second screen either repeats them or
   invents a second palette. Repeating them is the lesser evil, and it is not
   left to trust — test_design_ux checks these values against index.html's and
   fails the build when the two drift. Every colour below is a token; no
   screen-specific hex exists in this file. */
:root, :root[data-theme=dark]{
  --paper:#141418; --well:#0f0f18; --card:#16161e; --card2:#1e1e28;
  --line:#2a2a3a; --line2:#3a3a4a;
  --ink:rgba(255,255,255,.90); --ink-hi:#ffffff; --dim:#8a8a94; --faint:#55555f;
  --accent:#c4993c; --accent2:#a07828;
  --accent-g:linear-gradient(135deg,#c4993c,#a07828);
  --on-accent:#1a0f00;
  --accent-w:rgba(196,153,60,.12); --accent-l:rgba(196,153,60,.25);
  --motif:196,153,60;
  --attn:#f59e0b; --ok:#22c55e; --bad:#ef4444;
  --l1:rgba(255,255,255,.02); --l2:rgba(255,255,255,.05); --l3:rgba(255,255,255,.08);
  --b1:rgba(255,255,255,.07); --b2:rgba(255,255,255,.12);
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 8px 32px rgba(0,0,0,.60);
  --shadow-lg:0 20px 60px rgba(0,0,0,.60);
  --sheet:#fff;
}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){
  --paper:#f7f4ee; --well:#f2eee5; --card:#fffdf9; --card2:#faf7f0;
  --line:#e7e0d3; --line2:#f0ebe0;
  --ink:#211d17; --ink-hi:#141009; --dim:#7c7261; --faint:#a89d89;
  --accent:#8a5a2c; --accent2:#a9703a;
  --accent-g:linear-gradient(135deg,#8a5a2c,#a9703a);
  --on-accent:#fff8ec;
  --accent-w:rgba(196,153,60,.14); --accent-l:rgba(138,90,44,.30);
  --motif:138,90,44;
  --l1:rgba(33,29,23,.02); --l2:rgba(33,29,23,.04); --l3:rgba(33,29,23,.07);
  --b1:rgba(33,29,23,.08); --b2:rgba(33,29,23,.14);
  --shadow-s:0 1px 2px rgba(60,44,20,.06);
  --shadow:0 8px 30px rgba(60,44,20,.10);
  --shadow-lg:0 18px 50px rgba(60,44,20,.14);
}}
:root[data-theme=light]{
  --paper:#f7f4ee; --well:#f2eee5; --card:#fffdf9; --card2:#faf7f0;
  --line:#e7e0d3; --line2:#f0ebe0;
  --ink:#211d17; --ink-hi:#141009; --dim:#7c7261; --faint:#a89d89;
  --accent:#8a5a2c; --accent2:#a9703a;
  --accent-g:linear-gradient(135deg,#8a5a2c,#a9703a);
  --on-accent:#fff8ec;
  --accent-w:rgba(196,153,60,.14); --accent-l:rgba(138,90,44,.30);
  --motif:138,90,44;
  --l1:rgba(33,29,23,.02); --l2:rgba(33,29,23,.04); --l3:rgba(33,29,23,.07);
  --b1:rgba(33,29,23,.08); --b2:rgba(33,29,23,.14);
  --shadow-s:0 1px 2px rgba(60,44,20,.06);
  --shadow:0 8px 30px rgba(60,44,20,.10);
  --shadow-lg:0 18px 50px rgba(60,44,20,.14);
}
:root{
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --ui-he:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew",
    "Arial Hebrew","Assistant","Rubik","Heebo",Arial,sans-serif;
  --t-eyebrow:9.5px; --t-meta:10.5px; --t-label:11.5px; --t-ui:12.5px;
  --t-body:13px; --t-title:14px; --t-h:18px; --t-brand:16px;
  --rad:12px; --rad-s:8px; --rad-xs:6px; --pill:20px;
}
:root[lang=he]{--ui:var(--ui-he);--t-ui:13px;--t-label:12px}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden}
button,input,select{font-family:inherit;font-size:var(--t-ui)}
.hide{display:none !important}

/* ── the bar ─────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:12px;padding:0 14px;height:48px;
  background:var(--card);border-bottom:1px solid var(--line);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:8px;font-size:var(--t-brand);
  font-weight:650;color:var(--ink-hi);text-decoration:none}
.brand .mark{width:22px;height:22px;border-radius:6px;background:var(--accent-g);
  display:grid;place-items:center;color:var(--on-accent);font-size:12px;
  font-weight:800}
.navlink{color:var(--dim);text-decoration:none;padding:5px 10px;
  border-radius:var(--pill);font-size:var(--t-ui)}
.navlink:hover{color:var(--ink);background:var(--l2)}
.navlink.on{color:var(--accent);background:var(--accent-w)}
.grow{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--pill);
  overflow:hidden;background:var(--l1)}
.seg button{border:0;background:transparent;color:var(--dim);padding:4px 11px;
  cursor:pointer}
.seg button.on{background:var(--accent-w);color:var(--accent);font-weight:600}
.btn{border:1px solid var(--line2);background:var(--l2);color:var(--ink);
  border-radius:var(--rad-s);padding:6px 12px;cursor:pointer}
.btn:hover{background:var(--l3)}
.btn.primary{background:var(--accent-g);color:var(--on-accent);
  border-color:transparent;font-weight:650}
.btn.sm{padding:4px 9px;font-size:var(--t-label)}

/* ── the shelves and the filters ─────────────────────────────────────── */
.work{flex:1;display:flex;min-height:0}
.side{width:248px;flex:0 0 auto;border-inline-end:1px solid var(--line);
  background:var(--card);overflow:auto;padding:14px 12px}
.side h3{margin:16px 0 6px;font-size:var(--t-eyebrow);letter-spacing:1px;
  text-transform:uppercase;color:var(--faint);font-weight:700}
.side h3:first-child{margin-top:0}
.shelf-btn{display:flex;width:100%;align-items:center;gap:8px;border:0;
  background:transparent;color:var(--ink);padding:7px 9px;
  border-radius:var(--rad-s);cursor:pointer;text-align:start}
.shelf-btn:hover{background:var(--l2)}
.shelf-btn.on{background:var(--accent-w);color:var(--accent);font-weight:650}
.shelf-btn .n{margin-inline-start:auto;color:var(--faint);font-size:var(--t-meta)}
.filt{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.filt label{font-size:var(--t-label);color:var(--dim)}
.filt select,.filt input{width:100%;padding:5px 7px;border:1px solid var(--line);
  border-radius:var(--rad-xs);background:var(--well);color:var(--ink)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.mainbar{display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap}
.count{color:var(--dim);font-size:var(--t-label)}
.note{color:var(--faint);font-size:var(--t-label);max-width:64ch}
.scroll{flex:1;overflow:auto;padding:14px}

/* ── the wall ────────────────────────────────────────────────────────── */
.wall{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--rad);background:var(--card);
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  transition:border-color .12s,box-shadow .12s;text-align:start;padding:0;
  color:inherit;font:inherit}
.card:hover{border-color:var(--accent-l);box-shadow:var(--shadow-s)}
.card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card .pic{position:relative;aspect-ratio:2/3;background:var(--sheet);
  border-bottom:1px solid var(--line);display:grid;place-items:center}
.card .pic img{width:100%;height:100%;object-fit:contain;display:block;
  opacity:0;transition:opacity .18s}
.card .pic img.in{opacity:1}
/* the card says what it is doing while the engine sets the page — and sits
   BEHIND the picture, so the swap is one fade and not a jump */
.card .pic .wait{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--faint);font-size:var(--t-meta);padding:0 8px;text-align:center}
.card .meta{padding:8px 10px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .nm{font-size:var(--t-title);color:var(--ink-hi);line-height:1.25}
.card .he{font-size:var(--t-title);direction:rtl;text-align:right;color:var(--dim)}
.card .why{font-size:var(--t-label);color:var(--accent)}
.card .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;align-items:center}
.tag{font-size:var(--t-meta);border:1px solid var(--line2);
  border-radius:var(--pill);padding:1px 7px;color:var(--dim)}
.tag.kit{border-color:var(--accent-l);color:var(--accent)}
.star{position:absolute;inset-block-start:6px;inset-inline-end:6px;border:0;
  width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.35);
  color:#fff;cursor:pointer;display:grid;place-items:center;font-size:14px;
  line-height:1}
.star.on{background:var(--accent);color:var(--on-accent)}
.rank{position:absolute;inset-block-start:6px;inset-inline-start:6px;
  background:var(--accent);color:var(--on-accent);font-size:var(--t-meta);
  font-weight:800;border-radius:var(--pill);padding:1px 8px}

/* ── one design, opened ──────────────────────────────────────────────── */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;
  align-items:center;justify-content:center;z-index:40;padding:24px}
.sheetbox{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--rad);width:min(1120px,100%);max-height:100%;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.sheethead{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.sheetbody{padding:16px;overflow:auto;display:grid;gap:18px;
  grid-template-columns:minmax(0,2fr) minmax(224px,1fr)}
.pages{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.pg{border:1px solid var(--line);border-radius:var(--rad-s);overflow:hidden;
  background:var(--sheet)}
.pg img{width:100%;display:block}
.pg .cap{font-size:var(--t-meta);color:var(--dim);padding:4px 7px;
  background:var(--card);border-top:1px solid var(--line)}
.pg .none{padding:26px 10px;text-align:center;color:var(--faint);
  font-size:var(--t-label)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;
  font-size:var(--t-label)}
.kv .k{color:var(--faint)}
.panel{border:1px solid var(--line);border-radius:var(--rad-s);
  background:var(--card);padding:10px 12px;margin-bottom:12px}
.panel h4{margin:0 0 6px;font-size:var(--t-label);color:var(--dim);
  text-transform:uppercase;letter-spacing:.7px}
.pieces{display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
.piece{border:1px solid var(--line);border-radius:var(--rad-xs);
  background:var(--sheet);padding:3px;text-align:center}
.piece img{width:100%;height:34px;object-fit:contain}
.piece .r{font-size:9px;color:var(--dim);word-break:break-all}

@media (max-width:900px){
  .side{display:none}
  .sheetbody{grid-template-columns:1fr}
}

/* ══ the family editor ═══════════════════════════════════════════════════
   THE PAGES STAY ON SCREEN WHILE THE COMPONENTS SCROLL. A person varying a
   ground is watching the ground change; a layout that scrolled the pages out
   of view to reach the button that changes them would hide the only thing
   worth looking at. So the sheet is two columns that scroll independently,
   and it is wider than the browse overlay because it has twice as much in
   it. Below 900px there is no room for two, and the pages go first — the
   same rule the side rail already follows. */
.sheetbox.wide{width:min(1400px,100%);height:100%}
.edbody{flex:1;min-height:0;display:grid;gap:0;
  grid-template-columns:minmax(0,1.35fr) minmax(330px,1fr)}
.edpages{overflow:auto;padding:14px;border-inline-end:1px solid var(--line)}
.edside{overflow:auto;padding:12px 14px;background:var(--card)}
.seg.wrap{display:flex;flex-wrap:wrap;border-radius:var(--rad-s);width:100%;
  margin-bottom:10px}
.seg.wrap button{flex:0 0 auto;padding:4px 9px;font-size:var(--t-label)}
.seg.wrap button .n{margin-inline-start:5px;color:var(--faint);font-size:9px}

/* one component */
.slot{border:1px solid var(--line);border-radius:var(--rad-s);
  background:var(--paper);padding:7px 9px;margin-bottom:7px}
.slot.locked{border-color:var(--accent-l);background:var(--accent-w)}
.slot .top{display:flex;align-items:center;gap:7px}
.slot .nm{font-size:var(--t-ui);color:var(--ink-hi)}
.slot .val{font-size:var(--t-meta);color:var(--dim);
  margin-inline-start:auto;text-align:end;max-width:44%;overflow-wrap:anywhere}
.slot .why{font-size:var(--t-meta);color:var(--faint);margin-top:3px}
.lockbtn{border:1px solid var(--line2);background:var(--l2);color:var(--dim);
  border-radius:var(--rad-xs);width:26px;height:24px;cursor:pointer;
  line-height:1;padding:0}
.lockbtn.on{background:var(--accent);color:var(--on-accent);
  border-color:transparent}
.slot .acts{display:flex;gap:5px;margin-top:6px;align-items:center;
  flex-wrap:wrap}
.slot select,.slot input{padding:3px 6px;border:1px solid var(--line);
  border-radius:var(--rad-xs);background:var(--well);color:var(--ink);
  font-size:var(--t-label);max-width:160px}
.slot .off{font-size:var(--t-meta);color:var(--attn)}

/* the alternatives, drawn by the engine */
.alts{display:grid;gap:6px;margin-top:7px;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
.alt{border:1px solid var(--line);border-radius:var(--rad-xs);
  background:var(--sheet);padding:2px;cursor:pointer;text-align:center}
.alt:hover{border-color:var(--accent)}
.alt img{width:100%;height:74px;object-fit:contain;display:block}
.alt .l{font-size:9px;color:var(--dim);padding:2px 1px 0;
  overflow-wrap:anywhere;line-height:1.2}
.alt .src{font-size:8px;color:var(--faint);padding-bottom:2px}

/* the history */
.vers{max-height:220px;overflow:auto;margin:-2px -4px 0}
.ver{display:flex;gap:7px;align-items:baseline;padding:4px;
  border-radius:var(--rad-xs);font-size:var(--t-label)}
.ver:hover{background:var(--l2)}
.ver .n{color:var(--accent);font-weight:700;min-width:24px}
.ver .w{flex:1;color:var(--ink)}
.ver .b{color:var(--faint);font-size:var(--t-meta)}
.ver.on{background:var(--accent-w)}
.difftable{font-size:var(--t-label);margin-top:7px}
.difftable div{padding:2px 0;border-top:1px solid var(--line)}
.difftable .k{color:var(--faint)}

@media (max-width:900px){
  .edbody{grid-template-columns:1fr}
  .edpages{border-inline-end:0;border-bottom:1px solid var(--line)}
}

/* one of the several pages a front-matter kind can be */
.pageopt{display:block;width:100%;text-align:start;border:1px solid var(--line);
  border-radius:var(--rad-s);background:var(--paper);color:var(--ink);
  padding:6px 8px;margin-top:6px;cursor:pointer}
.pageopt:hover{border-color:var(--accent)}
.pageopt.on{border-color:var(--accent);background:var(--accent-w);
  cursor:default}
.pageopt .p{font-size:var(--t-ui);color:var(--ink-hi)}
.pageopt .now{font-size:var(--t-meta);color:var(--accent);
  margin-inline-start:6px}
.pageopt .r{display:block;font-size:var(--t-meta);color:var(--faint);
  margin-top:2px;line-height:1.35}