/* heyrav tools - shared chrome.
   One quiet control rail on the left, the work on the right. The anatomy is
   lifted from James McDonald's mini design tools (Dive Club, Oct 2026):
   presets as chips, lowercase labels, a value on the right, one line of help
   under every control, collapsible groups, an advanced switch, and a dock with
   undo / redo / random. The skin is heyrav's own monochrome system. */

:root{
  --ink:#161616; --ink-hover:#212121; --ink-2:#4a4a4a; --ink-3:#6e6e6e;
  --mut:#767676; --line:#ececec; --line-2:#e7e7e7; --paper:#fff; --sel:#bbfff0;
  /* tool-only: the stage behind an artboard, and the inset of a segmented
     control. One grey, so the rail and the stage read as the same material. */
  --wash:#f5f5f5;
  --shadow-pop:0 18px 40px -22px rgba(22,22,22,.28);
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:99px;
  --sans:"Onest",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --t-label:12px; --t-ui:14px; --t-body:18px; --t-sub:24px;
  --w-head:450;
  --rail:312px;
  --ease:cubic-bezier(.32,.72,0,1);
  /* the glitch hues the hero already spends - the only colour tools offer by name */
  --g-a:oklch(.62 .171 150); --g-b:oklch(.62 .301 318); --g-c:oklch(.62 .106 205);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--sans);color:var(--ink);background:var(--wash);
  -webkit-font-smoothing:antialiased;font-size:var(--t-ui);
}
::selection{background:var(--sel);color:var(--ink);}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ---------- layout ---------- */
.tool{display:grid;grid-template-columns:var(--rail) 1fr;height:100vh;overflow:hidden;}
.rail{
  background:var(--paper);border-right:1px solid var(--line);
  overflow-y:auto;overscroll-behavior:contain;padding:20px 20px 40px;
  scrollbar-width:thin;
}
.stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;}

/* breadcrumb + title */
.crumbs{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:var(--t-ui);}
.crumbs a{color:var(--mut);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;}
.crumbs a:hover{color:var(--ink);}
.crumbs b{color:var(--ink);font-weight:var(--w-head);}
.crumbs .sep{color:var(--line-2);}
.lede{color:var(--ink-3);line-height:1.5;margin:2px 0 16px;}

/* presets */
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.chip{
  min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);cursor:pointer;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s;
}
.chip:hover{border-color:var(--ink-3);color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* groups */
.grp{border-top:1px solid var(--line);}
.grp-h{
  width:100%;min-height:44px;display:flex;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer;font-weight:var(--w-head);text-align:left;
}
.grp-h svg{width:12px;height:12px;fill:currentColor;transition:transform .25s var(--ease);color:var(--ink-3);}
.grp[data-closed] .grp-h svg{transform:rotate(-90deg);}
.grp[data-closed] .grp-b{display:none;}
.grp-b{padding:0 0 14px;}

/* a control row */
.row{padding:4px 0;}
.row[hidden]{display:none;}
.row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;}
.row-top label,.lbl{color:var(--ink-2);}
.val{font-family:var(--mono);font-size:var(--t-label);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.help{font-size:var(--t-label);line-height:1.45;color:var(--mut);margin-top:2px;}

/* range */
.rng{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;cursor:pointer;
  --f:50%;margin-top:-10px;margin-bottom:-12px;display:block;
}
.rng::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ink) var(--f),var(--line-2) var(--f));
}
.rng::-moz-range-track{height:2px;border-radius:2px;background:var(--line-2);}
.rng::-moz-range-progress{height:2px;background:var(--ink);}
.rng::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;margin-top:-6px;
  background:var(--paper);border:2px solid var(--ink);transition:transform .15s;
}
.rng::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);}
.rng:active::-webkit-slider-thumb{transform:scale(1.25);}

/* segmented */
.seg{display:flex;background:var(--wash);border-radius:var(--r-sm);margin-top:4px;}
.seg button{
  flex:1;min-height:44px;border:0;background:none;cursor:pointer;border-radius:var(--r-sm);
  color:var(--ink-3);white-space:nowrap;padding:0 6px;
}
.seg button:hover{color:var(--ink);}
.seg button[aria-pressed="true"]{
  color:var(--ink);background:var(--paper);
  box-shadow:inset 0 0 0 3px var(--wash),inset 0 0 0 4px var(--line);
}

/* select */
.sel{
  width:100%;min-height:44px;margin-top:4px;padding:0 34px 0 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px;background-repeat:no-repeat;
}

/* toggle */
.tgl{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;color:var(--ink-2);}
.tgl input{position:absolute;opacity:0;pointer-events:none;}
.tgl .sw{
  width:34px;height:20px;border-radius:var(--r-pill);background:var(--line-2);position:relative;flex:none;
  transition:background .2s;
}
.tgl .sw::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);box-shadow:0 1px 2px rgba(22,22,22,.2);transition:transform .25s var(--ease);
}
.tgl input:checked + .sw{background:var(--ink);}
.tgl input:checked + .sw::after{transform:translateX(14px);}
.tgl input:focus-visible + .sw{outline:2px solid var(--ink);outline-offset:2px;}

/* swatches */
.sws{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:2px;}
.sw-b{
  width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;
}
.sw-b i{
  width:24px;height:24px;border-radius:50%;display:block;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(22,22,22,.12);transition:transform .2s var(--ease);
}
.sw-b[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink);}
.sw-b:hover i{transform:scale(1.1);}
.sw-b.pick i{background:conic-gradient(var(--g-a),var(--g-c),var(--g-b),var(--g-a));}
.sw-b input{position:absolute;opacity:0;width:1px;height:1px;}

/* buttons */
.btns{display:flex;gap:6px;margin-top:4px;}
.btn{
  flex:1;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);cursor:pointer;color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:border-color .2s,background .2s;
}
.btn:hover{border-color:var(--ink-3);}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn.primary:hover{background:var(--ink-hover);}

/* drop zone */
.drop{
  margin-top:4px;min-height:72px;border:1px dashed var(--line-2);border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink-3);cursor:pointer;text-align:center;padding:10px;transition:border-color .2s,background .2s;
}
.drop small{font-size:var(--t-label);color:var(--mut);}
.drop:hover,.drop.over{border-color:var(--ink-3);background:var(--wash);}
.drop.has{border-style:solid;}

/* text */
.txt{
  width:100%;min-height:44px;margin-top:4px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper);resize:vertical;line-height:1.4;
}

.adv-hidden .row[data-adv]{display:none;}

/* ---------- stage ---------- */
.board-wrap{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:28px 28px 92px;}
.board{position:relative;background:var(--paper);outline:1px dashed var(--line-2);outline-offset:0;}
.board.fill{outline:0;position:absolute;inset:0;}
.board canvas{display:block;width:100%;height:100%;touch-action:none;}
.board .backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.board-tag{
  position:absolute;left:0;top:-24px;font-family:var(--mono);font-size:var(--t-label);color:var(--mut);
  white-space:nowrap;
}
.board.fill .board-tag{display:none;}

.dock{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;padding:4px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--shadow-pop);z-index:5;white-space:nowrap;
}
.dock button{
  min-height:44px;min-width:44px;padding:0 16px;border:0;border-radius:var(--r-pill);
  background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink-2);
}
.dock button:hover{background:var(--wash);color:var(--ink);}
.dock button:disabled{opacity:.35;cursor:default;background:none;}
.dock button.primary{background:var(--ink);color:var(--paper);}
.dock button.primary:hover{background:var(--ink-hover);}
.dock .div{width:1px;height:20px;background:var(--line);margin:0 4px;}
.dock kbd{font-family:var(--mono);font-size:var(--t-label);opacity:.55;}
.icon{width:1em;height:1em;fill:currentColor;flex:none;}

.toast{
  position:fixed;left:50%;top:20px;transform:translate(-50%,-8px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:var(--r-pill);
  transition:opacity .2s,transform .3s var(--ease);z-index:20;
}
.toast.on{opacity:1;transform:translate(-50%,0);}

@media (max-width:900px){
  .tool{grid-template-columns:1fr;grid-template-rows:58vh 1fr;height:100dvh;}
  .stage{order:-1;border-bottom:1px solid var(--line);}
  .rail{border-right:0;}
  .board-wrap{padding:28px 16px 84px;}
  .dock kbd{display:none;}
  .dock button{padding:0 12px;}
  .dock button:not(.primary) span{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;}
}