/* Shared by Huesmith Mix and Huesmith Paint: design tokens and the building blocks both pages use.
   Edit here so the two pages stay the same; page-specific styles live in each page. */
:root{
  /* Huesmith brand: neutral zinc greys, one cyan accent, and the cyan-magenta-yellow ribbon as the only flourish */
  --tl-c:#14B8D4; --tl-m:#E8478B; --tl-y:#F7C52D; --ribbon:linear-gradient(90deg,var(--tl-c),var(--tl-m) 50%,var(--tl-y));
  --bg:#F4F4F5; --panel:#FFFFFF; --sunk:#F7F7F8; --ink:#18181B; --muted:#5F5F6A; --line:#E1E1E5; --line2:#ECECEF;
  --accent:#0A6E82; --accent-ink:#FFFFFF; --accent-soft:#E0F3F7; --good:#1F7A4D; --warn:#A45F00; --bad:#B3261E;
  --chip:#EDEDF0; --v3bg:#E4E4E7; --shadow:0 1px 2px rgba(24,24,27,.05),0 2px 8px rgba(24,24,27,.04);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --h:38px;
  --f-display:"Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111113; --panel:#1A1A1D; --sunk:#151517; --ink:#EDEDEF; --muted:#A0A0AB; --line:#2E2E33; --line2:#252529;
  --accent:#3CC8E0; --accent-ink:#04252C; --accent-soft:#10303A; --good:#5CC492; --warn:#E3A44A; --bad:#FF8A80;
  --chip:#26262A; --v3bg:#0C0C0E; --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111113; --panel:#1A1A1D; --sunk:#151517; --ink:#EDEDEF; --muted:#A0A0AB; --line:#2E2E33; --line2:#252529;
  --accent:#3CC8E0; --accent-ink:#04252C; --accent-soft:#10303A; --good:#5CC492; --warn:#E3A44A; --bad:#FF8A80;
  --chip:#26262A; --v3bg:#0C0C0E; --shadow:none; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* the brand ribbon stays at the top of the window while the page scrolls */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;background:var(--ribbon);z-index:90;pointer-events:none}
.apphead h1 .app{font-weight:500;color:var(--muted)}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h2{font-size:19px;line-height:1.2}
h3{font-size:15px}
p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.label{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;line-height:1.4}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.exportrow{gap:6px}
.brand{display:flex;gap:12px;align-items:center}
.brand p{font-size:13px;color:var(--muted);margin-top:5px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:var(--shadow)}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.small{min-height:32px;padding:0 11px;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.check{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.pill.g{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.pill.w{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.chipwrap .x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 10px 0 5px;min-height:30px;border-radius:0 999px 999px 0}
.chipwrap .x:hover{color:var(--bad)}
.chipbtn.add:hover{border-color:var(--accent);background:var(--accent-soft)}
.chipbtn.add:disabled{opacity:.45;cursor:not-allowed}
.q.g{background:var(--good)}
.q.w{background:var(--warn)}
.q.b{background:var(--bad)}
.spoolchip .mat{font-size:11px;color:var(--muted);font-weight:500}
.spoolchip.off{opacity:.5}
.spoolchip.off .nm{text-decoration:line-through}
.spoolchip .slot{font-family:var(--f-mono);font-size:11px;color:var(--muted);min-width:12px}
.swpick:hover{border-color:var(--accent)}
.swpick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swpick:disabled{opacity:.5;cursor:default;border-color:var(--line)}
.swpick .tick{margin-left:auto;color:var(--good);font-weight:700}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.de.g{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.de.w{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.de.b{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.notes{display:flex;flex-direction:column;gap:6px}
.hint{align-items:center}
.hint .linkbtn,.hint .btn{flex:none}
.notesum{display:flex;flex-direction:column;gap:6px}
.notesum>summary{list-style:none;cursor:pointer;align-items:center}
.notesum>summary::-webkit-details-marker{display:none}
.notesum>summary:hover{border-color:var(--nc)}
.notesum>summary p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notesum .sumfirst{color:var(--muted);font-weight:400}
.notesum[open] .sumfirst{display:none}
.notesum .chev{width:12px;height:12px;flex:none;color:var(--muted);transition:transform .15s}
.notesum[open] .chev{transform:rotate(90deg)}
.note p{margin:0;flex:1;min-width:0}
.note .nic{width:17px;height:17px;flex:none;border-radius:50%;background:var(--nc);color:var(--panel);font:700 11px/17px var(--f-body);text-align:center;margin-top:1px}
.note.is-info .nic{font-size:0;display:grid;place-items:center}
.note.is-info .nic::before{content:"";width:9px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Ccircle cx=%275%27 cy=%271.7%27 r=%271.15%27/%3E%3Crect x=%274.1%27 y=%273.9%27 width=%271.8%27 height=%275.6%27 rx=%27.9%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Ccircle cx=%275%27 cy=%271.7%27 r=%271.15%27/%3E%3Crect x=%274.1%27 y=%273.9%27 width=%271.8%27 height=%275.6%27 rx=%27.9%27/%3E%3C/svg%3E") center/contain no-repeat}
/* info buttons: one size in both apps, an upright drawn "i" (dot and stem) so it sits dead centre in any font */
.info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:0;cursor:help;padding:0;flex:none;vertical-align:middle;position:relative}
.info::before{content:"";width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Ccircle cx=%275%27 cy=%271.7%27 r=%271.15%27/%3E%3Crect x=%274.1%27 y=%273.9%27 width=%271.8%27 height=%275.6%27 rx=%27.9%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Ccircle cx=%275%27 cy=%271.7%27 r=%271.15%27/%3E%3Crect x=%274.1%27 y=%273.9%27 width=%271.8%27 height=%275.6%27 rx=%27.9%27/%3E%3C/svg%3E") center/contain no-repeat}
.info:hover,.info:focus-visible{color:var(--accent);border-color:var(--accent)}
.note.is-warn{--nc:var(--warn);--nb:color-mix(in srgb,var(--warn) 32%,var(--line));--nbg:color-mix(in srgb,var(--warn) 8%,var(--panel))}
.note.is-err{--nc:var(--bad);--nb:color-mix(in srgb,var(--bad) 32%,var(--line));--nbg:color-mix(in srgb,var(--bad) 8%,var(--panel))}
.toast{font-size:13.5px;min-height:20px}
.toast.ok{color:var(--good)}
.toast.err{color:var(--bad)}
.tipbox.on{opacity:1;transform:none}
html,body{margin:0}
.wrap{padding-top:24px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.apphead{display:flex;flex-wrap:nowrap;gap:12px 28px;align-items:center;justify-content:space-between;font-size:15px;line-height:1.5}
.apphead .brand{display:flex;gap:12px;align-items:center;min-width:0;flex:1 1 auto}
.apphead .brand>svg{width:42px;height:42px;flex:none}
.apphead h1{font-size:30px;line-height:1;text-wrap:wrap}
.apphead .brand p{font-size:13px;margin-top:5px}
.apphead .exportrow{gap:6px;flex:none;flex-wrap:nowrap}
@media (max-width:900px){.apphead{flex-wrap:wrap}.apphead .exportrow{flex:0 1 auto;flex-wrap:wrap}}
.apphead .btn.small{min-height:32px;padding:0 11px;font-size:13px}
.apphead .btn svg{width:15px;height:15px}
.apphead #exportBtn,.apphead #importBtn{min-width:136px}
.apphead .applink{min-width:164px}
.apphead .exportrow{position:relative}
.apphead #toastX{position:absolute;right:0;top:100%;margin-top:4px;white-space:nowrap;min-height:0}
.apphead .pill{gap:6px;padding:3px 10px;font-size:12px;vertical-align:middle}
.apphead .info{width:18px;height:18px}