/* River Widget builder — MIT licensed */

:root{
  --ink:#0f1b22;
  --ink-2:#41545e;
  --ink-3:#6e838d;
  --ground:#f2f6f6;
  --paper:#ffffff;
  --line:#dde5e7;
  --line-2:#c3d0d3;
  --river:#14708f;
  --river-soft:#e3eff3;
  --moss:#3d6b52;
  --amber:#8c5e17;
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e8eff0; --ink-2:#a9bcc2; --ink-3:#84979e;
    --ground:#0b1417; --paper:#131f24; --line:#24343a; --line-2:#33474e;
    --river:#69bcd8; --river-soft:#112a33; --moss:#8bb89c; --amber:#d6a45c;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 16px/1.6 "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:1180px; margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif; text-wrap:balance; margin:0}
h1{font-size:clamp(2.4rem,6vw,4.2rem); font-weight:800; line-height:.98; letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; letter-spacing:-.02em; line-height:1.15}
h3{font-size:1.05rem; font-weight:700; letter-spacing:-.01em}
p{margin:0}
a{color:var(--river); text-underline-offset:2px}
code{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:.86em;
  background:var(--river-soft); padding:.12em .38em; border-radius:3px}
:focus-visible{outline:2px solid var(--river); outline-offset:2px; border-radius:4px}

/* ------------------------------------------------------------------ hero */
.hero{padding:72px 0 56px; border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:18px
}
.lede{font-size:1.2rem; line-height:1.55; color:var(--ink-2); max-width:56ch; margin-top:22px}
.hero-note{margin-top:20px; font-size:.92rem; color:var(--ink-3); max-width:58ch}
.counter{
  display:inline-flex; align-items:baseline; gap:10px; margin-top:26px;
  padding:10px 18px; background:var(--paper); border:1px solid var(--line); border-radius:999px
}
.counter-n{
  font-family:"Bricolage Grotesque",sans-serif; font-size:1.5rem; font-weight:800;
  color:var(--river); font-variant-numeric:tabular-nums; letter-spacing:-.02em
}
.counter-l{font-size:.85rem; color:var(--ink-3)}

/* --------------------------------------------------------------- builder */
.builder{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:52px; padding:56px 0 24px; align-items:start
}
@media (max-width:900px){ .builder{grid-template-columns:1fr; gap:36px} }

.step-h{display:flex; align-items:center; gap:11px; font-size:1.15rem; margin:0 0 18px}
.step-h:not(:first-child){margin-top:38px}
.step-n{
  width:25px; height:25px; border-radius:50%; background:var(--river); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:.76rem; font-weight:500;
  display:grid; place-items:center; flex:none
}

.field{margin-bottom:20px}
.field > label{display:block; font-size:.82rem; font-weight:600; margin-bottom:7px}
.opt{font-weight:400; color:var(--ink-3)}
.hint{font-size:.8rem; color:var(--ink-3); margin-top:7px; line-height:1.5}

input[type=text], input[type=search], select{
  width:100%; padding:10px 13px; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:8px
}
.searchbar{display:flex; gap:8px}
.searchbar input{flex:1; min-width:0}
.searchbar button, .linkish{
  font:600 .88rem/1 "Public Sans",sans-serif; padding:0 17px; cursor:pointer;
  background:var(--river); color:#fff; border:1px solid var(--river); border-radius:8px
}
.searchbar button:hover{filter:brightness(1.08)}
.linkish{background:none; border:0; color:var(--ink-3); padding:0; font-weight:500;
  font-size:.78rem; text-decoration:underline; text-underline-offset:2px}

.results{
  list-style:none; margin:10px 0 0; padding:0; max-height:290px; overflow-y:auto;
  border:1px solid var(--line); border-radius:8px; background:var(--paper)
}
.results li{border-bottom:1px solid var(--line)}
.results li:last-child{border-bottom:0}
.results button{
  display:block; width:100%; text-align:left; padding:11px 14px; background:none;
  border:0; cursor:pointer; font:inherit; color:inherit
}
.results button:hover{background:var(--river-soft)}
.results .rn{display:block; font-weight:600; font-size:.9rem; line-height:1.3}
.results .rm{display:block; font-size:.75rem; color:var(--ink-3); margin-top:2px;
  font-family:"IBM Plex Mono",monospace}
.results .empty{padding:14px; font-size:.88rem; color:var(--ink-3)}
.results .quiet{
  display:inline-block; margin-top:5px; padding:2px 7px; border-radius:3px;
  background:var(--amber); color:var(--paper); font-size:.68rem; font-weight:600;
  letter-spacing:.02em; opacity:.9
}

.chosen{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.chosen li{
  display:inline-flex; align-items:center; gap:9px; padding:7px 9px 7px 13px;
  background:var(--river-soft); border:1px solid transparent; border-radius:999px; font-size:.85rem
}
.chosen .num{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-3)}
.chosen button{
  width:19px; height:19px; border-radius:50%; border:0; cursor:pointer; flex:none;
  background:var(--line-2); color:var(--paper); font-size:.7rem; line-height:1
}

.swatches{display:flex; flex-wrap:wrap; gap:8px}
.swatches button{
  display:flex; align-items:center; gap:7px; padding:6px 12px 6px 7px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line-2); border-radius:999px;
  font:500 .82rem/1 "Public Sans",sans-serif; color:var(--ink)
}
.swatches button[aria-pressed=true]{border-color:var(--river); box-shadow:0 0 0 1px var(--river)}
.swatches .dot{width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.14)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:520px){ .grid2{grid-template-columns:1fr} }
.colorrow{display:flex; align-items:center; gap:11px}
input[type=color]{width:46px; height:34px; padding:2px; border:1px solid var(--line-2);
  border-radius:7px; background:var(--paper); cursor:pointer}
input[type=range]{width:100%; accent-color:var(--river)}
output{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--ink-3)}

/* -------------------------------------------------------------- tooltips */
.info{
  display:inline-grid; place-items:center; width:16px; height:16px; flex:none;
  margin-left:5px; padding:0; cursor:help; vertical-align:middle;
  border:1px solid var(--line-2); border-radius:50%; background:var(--paper);
  color:var(--ink-3); font:600 10px/1 "Public Sans",sans-serif;
}
.info:hover, .info[aria-expanded="true"]{border-color:var(--river); color:var(--river)}
.tipwrap{position:relative; display:inline-block}
.tip{
  position:absolute; z-index:40; left:0; top:calc(100% + 7px); width:max-content; max-width:270px;
  padding:10px 12px; border-radius:7px; font-size:.78rem; line-height:1.5; font-weight:400;
  color:var(--ink); background:var(--paper); border:1px solid var(--line-2);
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 10px 28px -12px rgba(0,0,0,.3);
  text-transform:none; letter-spacing:normal;
}
.tip[hidden]{display:none}
.tip::before{
  content:""; position:absolute; top:-5px; left:12px; width:8px; height:8px;
  background:var(--paper); border-left:1px solid var(--line-2); border-top:1px solid var(--line-2);
  transform:rotate(45deg);
}
.tip code{font-size:.9em}
@media (max-width:520px){ .tip{max-width:min(270px,72vw)} }

/* ------------------------------------------------------------ accordions */
.panel{border:1px solid var(--line); border-radius:8px; background:var(--paper); margin-bottom:10px}
.panel > summary{
  cursor:pointer; padding:12px 14px; font-size:.86rem; font-weight:600; list-style:none;
  display:flex; align-items:center; gap:9px; user-select:none;
}
.panel > summary::-webkit-details-marker{display:none}
.panel > summary::before{content:"▸"; color:var(--ink-3); font-size:.75em; transition:transform .15s}
.panel[open] > summary::before{content:"▾"}
.panel[open] > summary{border-bottom:1px solid var(--line)}
.panel-body{padding:16px 14px}
.panel-body .field:last-child{margin-bottom:0}

.swatchgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:12px}
.cswatch{display:flex; flex-direction:column; gap:5px}
.cswatch label{font-size:.75rem; font-weight:600}
.cswatch .row{display:flex; align-items:center; gap:7px}
.cswatch input[type=color]{width:34px; height:28px; flex:none}
.cswatch .clear{
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink-3);
  font-size:.68rem; text-decoration:underline; text-underline-offset:2px;
}
.cswatch .clear[hidden]{display:none}
.cswatch .set{font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--ink-3)}

.warn{
  margin-top:9px; padding:9px 11px; border-radius:6px; font-size:.8rem; line-height:1.45;
  background:var(--silt-soft, #fbf4e8); border:1px solid var(--amber); color:var(--ink-2);
}
@media (prefers-color-scheme:dark){ .warn{background:#2a2115} }

.checks{display:flex; flex-wrap:wrap; gap:8px 16px}
.check{display:inline-flex; align-items:center; gap:7px; font-size:.88rem; cursor:pointer}
.check input{accent-color:var(--river); width:15px; height:15px}
.check.off{opacity:.42; cursor:not-allowed}

/* --------------------------------------------------------------- preview */
/* The column itself sticks. Putting position:sticky on an inner wrapper does
   nothing here: align-items:start sizes the grid item to its content, leaving
   the wrapper no room to travel. */
.previewcol{
  position:sticky; top:20px; align-self:start;
  max-height:calc(100vh - 40px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; padding-right:2px;
}
@media (max-width:900px){
  /* Stacked layout — pinning the preview would cover the controls. */
  .previewcol{position:static; max-height:none; overflow:visible}
}
.sticky{}
.stage{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper)}
.stage-bar{
  display:flex; justify-content:space-between; align-items:center; gap:14px; padding:8px 12px;
  border-bottom:1px solid var(--line); font-family:"IBM Plex Mono",monospace;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)
}
.widths{display:flex; gap:4px}
.widths button{
  font:500 .68rem/1 "Public Sans",sans-serif; letter-spacing:.04em; padding:5px 9px; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:5px; color:var(--ink-3)
}
.widths button.on{background:var(--river-soft); color:var(--river); border-color:var(--river)}
.stage-body{padding:22px; background:var(--ground); display:flex; justify-content:center}
.mount{width:100%; max-width:100%; transition:max-width .18s ease}

.tabs{display:flex; gap:4px; margin-bottom:6px}
.tabs button{
  font:600 .84rem/1 "Public Sans",sans-serif; padding:9px 15px; cursor:pointer;
  background:none; border:1px solid transparent; border-bottom:2px solid transparent;
  color:var(--ink-3); border-radius:6px 6px 0 0
}
.tabs button.on{color:var(--river); border-bottom-color:var(--river)}

.codebox{position:relative; margin-top:12px}
.codebox pre{
  margin:0; padding:16px 18px; overflow:auto; max-height:260px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  font-family:"IBM Plex Mono",monospace; font-size:11.8px; line-height:1.65; color:var(--ink-2);
  white-space:pre-wrap; word-break:break-word
}
.copy{
  position:absolute; top:9px; right:9px; z-index:2;
  font:600 .7rem/1 "Public Sans",sans-serif; letter-spacing:.04em; text-transform:uppercase;
  padding:7px 11px; cursor:pointer; background:var(--ground);
  border:1px solid var(--line-2); border-radius:6px; color:var(--ink-2)
}
.copy:hover{background:var(--river-soft); color:var(--river); border-color:var(--river)}
.copy.done{color:var(--moss); border-color:var(--moss)}

/* -------------------------------------------------------------- sections */
.section{padding:60px 0; border-top:1px solid var(--line)}
.section > h2{margin-bottom:26px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:16px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px}
.card h3{margin-bottom:9px}
.card p{font-size:.92rem; color:var(--ink-2)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:52px}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:44px} }
.split h2{margin-bottom:16px}
.split > div > p{color:var(--ink-2); font-size:.95rem}

.ledger{width:100%; border-collapse:collapse; margin-top:20px; font-size:.9rem}
.ledger th, .ledger td{text-align:left; padding:12px 0; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--ink-2)}
.ledger th{width:36%; padding-right:18px; color:var(--ink); font-weight:600; white-space:nowrap}
.ledger tr:last-child th, .ledger tr:last-child td{border-bottom:0}

.lic h3{margin:20px 0 7px; font-size:.95rem}
.lic h3:first-child{margin-top:0}
.lic p{font-size:.92rem; color:var(--ink-2)}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper)}
.opts{border-collapse:collapse; width:100%; min-width:640px; font-size:.88rem}
.opts th, .opts td{text-align:left; padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.opts thead th{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; background:var(--ground)
}
.opts tbody tr:last-child td{border-bottom:0}
.opts td:first-child{white-space:nowrap}
.opts td:last-child{color:var(--ink-2)}

/* ------------------------------------------------------------------ foot */
.foot{border-top:1px solid var(--line); padding:36px 0 56px; margin-top:20px}
.foot p{font-size:.84rem; color:var(--ink-3); max-width:70ch; margin-bottom:8px}
.foot-links{display:flex; flex-wrap:wrap; gap:18px; margin-top:14px}
.foot-links a{color:var(--ink-3)}

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