/* HTG Requests: shared tokens and primitives. Sibling of Hive Shift (hive-shift/app/design). Dark-first; every color comes from :root. */
:root{
  color-scheme:dark;
  --bg:#17120C; --panel:#221A11; --rule:#3A2D1E;
  --ink:#F5E3BE; --ink-dim:#A08A66; --ink-faint:#6B5A42;
  --accent:#F2A93B; --accent-ink:#17120C;
  --wax:#4A3A26; --glow:#E06A10; --ember:#D9502E; --pollen:#8FBF3F;
  --pixel:'Silkscreen','Courier New',monospace;
  --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--mono);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;min-height:100vh}
[hidden]{display:none!important}
a{color:var(--ink);text-decoration-color:var(--ink-faint)}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header bar + mark */
header.bar{border-bottom:2px solid var(--rule);background:var(--panel)}
header.bar .inner{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.mark svg{width:38px;height:28px;fill:currentColor;color:var(--accent);flex:none}
.mark h1{font-family:var(--pixel);font-weight:700;font-size:15px;letter-spacing:.04em;margin:0;color:var(--ink);line-height:1.1}
.mark .sub{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.spacer{margin-left:auto}
.k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* buttons + chips */
.btn{font-family:var(--pixel);font-size:10px;letter-spacing:.06em;padding:10px 14px;cursor:pointer;border:2px solid var(--rule);background:transparent;color:var(--ink);transition:border-color .15s;line-height:1.2}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{border-color:var(--rule);color:var(--ink-dim)}
.btn.danger:hover{border-color:var(--ember);color:var(--ember)}
.btn.sm{padding:6px 9px;font-size:9px}
.btn[disabled]{opacity:.45;cursor:default;filter:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{position:relative;font-family:var(--mono);font-size:12.5px;padding:7px 11px;cursor:pointer;border:2px solid var(--rule);background:transparent;color:var(--ink-dim);display:inline-flex;align-items:center;gap:8px;line-height:1.2}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{border-color:var(--accent);color:var(--ink)}
.chip input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* form controls */
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;background:var(--bg);border:2px solid var(--rule);color:var(--ink);font-family:var(--mono);font-size:14px;padding:10px 12px;min-height:44px;transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' fill='none' stroke='%23A08A66' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
select option{background:var(--panel);color:var(--ink)}
textarea{resize:vertical;line-height:1.5}
label{display:block}
.err{color:var(--ember);font-size:13px;min-height:1.3em}

/* honeycomb cell primitive. .hex is 1 ticket; --fill is how much honey (0-100%). */
.hex{--hw:64px;--hh:calc(var(--hw) * 1.1547);--fill:0%;position:relative;width:var(--hw);height:var(--hh);padding:0;border:0;background:none;cursor:pointer;flex:none;display:block;color:var(--ink)}
.hex .rim,.hex .cell{position:absolute;clip-path:var(--hex);-webkit-clip-path:var(--hex)}
.hex .rim{inset:0;background:var(--rule);transition:background .15s}
.hex .cell{inset:3px;background:var(--wax);overflow:hidden}
.hex .cell::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fill);background:var(--accent);transition:height .7s cubic-bezier(.2,.8,.2,1)}
.hex .num{position:absolute;left:0;right:0;top:36%;transform:translateY(-50%);text-align:center;font-family:var(--pixel);font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--ink);pointer-events:none}
.hex .ar{position:absolute;left:0;right:0;bottom:17%;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--ink-dim);pointer-events:none;line-height:1}
.hex:hover .rim,.hex:focus-visible .rim{background:var(--accent)}
.hex:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hex.st-new{--fill:0%}
.hex.st-triaged{--fill:36%}
.hex.st-prog{--fill:72%}
.hex.st-wait{--fill:36%}
.hex.st-wait .cell::after{background:var(--ink-faint)}
.hex.st-done{--fill:100%;filter:drop-shadow(0 0 5px var(--glow))}
.hex.st-done .rim{background:var(--glow)}
.hex.st-done.glowing{animation:honeypop 1.4s ease-out 1}
.hex.st-decl{--fill:0%}
.hex.st-decl .cell{background:repeating-linear-gradient(45deg,var(--panel) 0 4px,var(--wax) 4px 8px)}
.hex.st-decl .num{color:var(--ink-faint);text-decoration:line-through}
.hex.st-decl .ar{color:var(--ink-faint)}
.hex.st-triaged .ar,.hex.st-prog .ar,.hex.st-prog .num,.hex.st-done .ar,.hex.st-done .num{color:var(--accent-ink)}
.hex.st-wait .ar{color:var(--ink)}
.hex.blocking .rim{background:var(--ember);animation:pulse 1.4s ease-in-out infinite}
.hex.blocking:hover .rim,.hex.blocking:focus-visible .rim{background:var(--accent);animation:none}
.hex.hi .rim{background:var(--ink);animation:none}
.hex.big{--hw:132px;cursor:default}
.hex.big .num{font-size:22px;top:40%}
.hex.big .ar{font-size:10px;bottom:22%}
@keyframes pulse{0%,100%{background:var(--ember)}50%{background:var(--rule)}}
@keyframes honeypop{0%{filter:drop-shadow(0 0 0 var(--glow))}35%{filter:drop-shadow(0 0 16px var(--accent))}100%{filter:drop-shadow(0 0 5px var(--glow))}}

@media (max-width:600px){
  .hex{--hw:48px}
  .hex .num{font-size:9px}
  .hex .ar{font-size:7px;letter-spacing:.08em}
  .hex.big{--hw:116px}
  header.bar .inner{padding:10px 12px;gap:10px}
  .mark svg{width:32px;height:24px}
  .mark h1{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hex.blocking .rim{background:var(--ember)}
}