/* tix UI — ALTYCA design system.
   Ported from the Claude Design mockup `tix UI.dc.html`. Brand tokens
   (colour, type, spacing, radii, motion) come from the ALTYCA token files;
   the dark surface ramp below is the mockup's own app theme, which the brand
   deck does not define. Dark is the primary theme. */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Manrope:wght@200..800&display=swap');

:root {
  /* ALTYCA brand */
  --font-heading: "Figtree", "Inter", sans-serif;
  --font-body: "Manrope", "Inter", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ls-caps: 0.08em;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.38);
  --focus-ring: 0 0 0 3px rgba(0, 204, 153, 0.35);

  /* app theme — dark (primary) */
  --bg:#0F1317; --panel:#161B20; --panel-2:#1B2127; --card:#1F262D; --card-hi:#242C34;
  --line:#2A323A; --line-2:#3A444E; --ink:#EAEEF1; --ink-2:#A6AFB7; --ink-3:#79828A;
  --ok-ink:#00CC99; --warn-ink:#FF74BE; --waitbg:#20161E; --waitline:#5C2342; --overbg:#182A25;
  color-scheme: dark;
}
:root[data-tix="light"] {
  --bg:#F2F3F5; --panel:#FFFFFF; --panel-2:#F7F8F9; --card:#FFFFFF; --card-hi:#FFFFFF;
  --line:#E6E8EB; --line-2:#CBD0D6; --ink:#363E47; --ink-2:#495159; --ink-3:#707880;
  --ok-ink:#009C76; --warn-ink:#D11D7F; --waitbg:#FFF5FA; --waitline:#F6BCDC; --overbg:#EAFBF4;
  --shadow-lg: 0 18px 40px rgba(54, 62, 71, 0.10);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); }
body { font-family:var(--font-body); font-weight:300; color:var(--ink); }
body.fill { height:100vh; overflow:hidden; }
body:not(.fill) { min-height:100vh; }
h1,h2,h3 { font-family:var(--font-heading); font-weight:600; letter-spacing:-0.02em; margin:0; }
a { color:var(--ok-ink); text-decoration:none; }
a:hover { color:var(--ink); }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:9px; }
::-webkit-scrollbar-track { background:transparent; }
.mono { font-family:var(--mono); }
.muted { color:var(--ink-3); }
.caps { font:600 9.5px/1 var(--font-heading); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-3); }

/* ---------- header ---------- */
header#top {
  position:sticky; top:0; z-index:30; background:var(--panel);
  border-bottom:1px solid var(--line); padding:0 20px; height:54px;
  display:flex; align-items:center; gap:18px;
}
header#top .logo { height:16px; object-fit:contain; object-position:left; }
header#top .rule { width:1px; height:22px; background:var(--line); }
header#top .brand { font:600 13px/1 var(--font-heading); letter-spacing:-0.02em; }
header#top nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
header#top nav a, header#top nav button {
  appearance:none; background:transparent; border:0; padding:7px 10px;
  border-radius:var(--radius-sm); cursor:pointer;
  font:400 13px var(--font-body); color:var(--ink-3);
}
header#top nav a:hover, header#top nav button:hover { color:var(--ink); background:var(--panel-2); }
header#top nav a.on { color:var(--ink); background:var(--panel-2); }

.ws-switch {
  display:flex; align-items:center; gap:9px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px 11px; font-size:13px; color:var(--ink); cursor:pointer;
  font-family:var(--font-body);
}
.ws-switch:hover { border-color:var(--line-2); }
.ws-dot { width:6px; height:6px; border-radius:50%; background:var(--ok-ink); }

.answer-cta-top {
  display:flex; align-items:center; gap:8px; background:var(--warn-ink);
  border:0; border-radius:var(--radius-sm); padding:7px 12px; cursor:pointer;
  font:600 12.5px/1 var(--font-heading); letter-spacing:-0.01em; color:#12161A;
}
.answer-cta-top:hover { filter:brightness(1.08); }
.answer-cta-top .tri { width:9px; height:9px; background:#12161A; clip-path:polygon(50% 0,100% 100%,0 100%); }

/* ---------- lane / liveness marks: shape, never hue alone ---------- */
[data-mark] { width:9px; height:9px; flex:none; }
[data-mark="backlog"] { border:1.5px dashed var(--ink-3); border-radius:2px; }
[data-mark="open"]    { border:2px solid var(--ok-ink); border-radius:50%; }
[data-mark="waiting"] { background:var(--warn-ink); clip-path:polygon(50% 0,100% 100%,0 100%); }
[data-mark="progress"]{ background:var(--ok-ink); clip-path:polygon(0 0,100% 50%,0 100%); }
[data-mark="testing"] { background:var(--ink-2); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
[data-mark="done"]    { background:var(--line-2); border-radius:2px; }

.live {
  display:inline-flex; align-items:center; gap:5px; padding:2px 7px;
  border-radius:999px; border:1px solid currentColor;
  font:600 9.5px/1.4 var(--font-heading); letter-spacing:var(--ls-caps); text-transform:uppercase;
}
.live[data-live="running"]  { color:var(--ok-ink); }
.live[data-live="idle"]     { color:var(--ink-3); }
.live[data-live="approval"] { color:var(--warn-ink); }
.live[data-live="finished"] { color:var(--ink-2); }
.live[data-live="failed"]   { color:var(--warn-ink); }
.live[data-live="unknown"]  { color:var(--ink-3); border-style:dashed; }
[data-glyph] { width:8px; height:8px; flex:none; }
[data-glyph="running"]  { background:currentColor; border-radius:50%; animation:tixpulse 1.6s var(--ease-standard) infinite; }
[data-glyph="idle"]     { border:1.5px solid currentColor; border-radius:50%; }
[data-glyph="approval"] { background:currentColor; clip-path:polygon(50% 0,100% 100%,0 100%); }
[data-glyph="finished"] { background:currentColor; border-radius:1px; }
[data-glyph="failed"]   { background:currentColor; clip-path:polygon(50% 0,100% 100%,0 100%); }
[data-glyph="unknown"]  { border:1.5px dashed currentColor; border-radius:50%; }
@keyframes tixpulse { 0%,100% { opacity:1; } 50% { opacity:.28; } }
@media (prefers-reduced-motion: reduce) { [data-glyph="running"] { animation:none; } }

/* ---------- board ---------- */
main.board { flex:1; min-height:0; padding:16px 20px 22px; display:flex; flex-direction:column; gap:12px; }
/* #lanes is the htmx swap target, so it sits between main and .scroller and
   has to carry the stretch itself or the columns shrink-wrap their cards. */
#lanes { flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; }
.scroller { flex:1; min-height:0; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; }
.lanes { height:100%; min-width:1272px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
section.lane {
  display:flex; flex-direction:column; min-height:0; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius-md);
}
section.lane[data-lane="waiting"] { background:var(--waitbg); border-color:var(--waitline); }
section.lane.over { background:var(--overbg); outline:2px dashed var(--ok-ink); outline-offset:-2px; }
.lane > h2 {
  display:flex; align-items:center; gap:8px; padding:11px 12px 10px;
  border-bottom:1px solid var(--line);
  font:600 11px/1 var(--font-heading); letter-spacing:var(--ls-caps); text-transform:uppercase;
}
.lane > h2 .count { margin-left:auto; font:500 11px/1 var(--mono); color:var(--ink-3); }
.drop { padding:9px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; flex:1; min-height:0; }

article.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 11px 11px; cursor:grab; display:flex; flex-direction:column; gap:7px;
  color:inherit;
}
article.card:hover { background:var(--card-hi); border-color:var(--line-2); }
article.card.dragging { opacity:.32; }
article.card .row { display:flex; align-items:center; gap:8px; min-height:18px; }
article.card .key { font:500 11.5px/1 var(--mono); color:var(--ink); }
article.card .live { margin-left:auto; }
article.card .title { margin:0; font:400 13px/1.45 var(--font-body); color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
article.card .repos { display:flex; flex-wrap:wrap; gap:5px; }
.repo { font:400 10.5px/1.4 var(--mono); color:var(--ink-3); background:var(--panel-2);
  border:1px solid var(--line); border-radius:4px; padding:2px 6px; }
article.card .meta { display:flex; align-items:center; gap:6px;
  font:400 10.5px/1.4 var(--font-body); color:var(--ink-3);
  border-top:1px solid var(--line); padding-top:7px; }
a.answer-chip {
  display:flex; align-items:center; gap:7px; background:var(--warn-ink);
  border-radius:var(--radius-sm); padding:7px 9px; color:#12161A;
}
a.answer-chip:hover { filter:brightness(1.08); color:#12161A; }
a.answer-chip .tri { width:10px; height:10px; flex:none; background:#12161A; clip-path:polygon(50% 0,100% 100%,0 100%); }
a.answer-chip .n { font:600 12.5px/1 var(--font-heading); letter-spacing:-0.01em; }
a.answer-chip .go { margin-left:auto; font:600 11px/1 var(--font-heading); }
.broken { border:1px dashed var(--waitline); border-radius:var(--radius-sm);
  padding:7px 9px; font:400 11.5px/1.4 var(--font-body); color:var(--ink-2); }
.empty-lane { border:1px dashed var(--line); border-radius:var(--radius-sm);
  padding:14px 10px; text-align:center; font:400 11.5px/1.5 var(--font-body); color:var(--ink-3); }

.notice {
  display:flex; align-items:center; gap:12px; background:var(--panel);
  border:1px solid var(--waitline); border-left:3px solid var(--warn-ink);
  border-radius:var(--radius-sm); padding:10px 14px;
  font:400 12.5px/1.4 var(--font-body); color:var(--ink-2);
}
.notice strong { font:600 12.5px/1 var(--font-heading); color:var(--ink); }
.notice button { margin-left:auto; background:transparent; border:1px solid var(--line-2);
  border-radius:var(--radius-sm); padding:5px 10px; cursor:pointer;
  font:400 12px var(--font-body); color:var(--ink); }

/* ---------- generic page ---------- */
main.page { flex:1; padding:22px; display:flex; justify-content:center; }
main.page > .wrap { width:100%; max-width:1040px; display:flex; flex-direction:column; gap:18px; }
main.narrow > .wrap { max-width:780px; }
.back { align-self:flex-start; background:transparent; border:0; padding:0;
  font:400 12px var(--font-body); color:var(--ink-3); cursor:pointer; }
.back:hover { color:var(--ink); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); }
.pad { padding:18px 20px; }
.split { display:grid; grid-template-columns:minmax(0,1fr) var(--aside,300px); gap:20px; align-items:start; }
@media (max-width:1180px) { .split { grid-template-columns:minmax(0,1fr); } .split > aside { position:static !important; } }

.btn {
  appearance:none; background:var(--ok-ink); border:0; border-radius:var(--radius-sm);
  padding:10px 16px; cursor:pointer; font:600 13px var(--font-heading); color:#12161A;
}
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; border:1px solid var(--line-2); color:var(--ink); }
.btn.ghost:hover { border-color:var(--ok-ink); filter:none; }
.btn.danger { background:transparent; border:1px solid var(--line-2); color:var(--ink); }
.btn.danger:hover { border-color:var(--warn-ink); color:var(--warn-ink); }
.btn.pink { background:var(--warn-ink); }
.btn.sm { padding:7px 12px; font-size:12px; }

textarea, input[type=text] {
  width:100%; box-sizing:border-box; resize:vertical; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px;
  font:400 13.5px/1.6 var(--font-body); color:var(--ink); outline:none;
}
textarea:focus, input:focus { border-color:var(--ok-ink); box-shadow:var(--focus-ring); }

/* ---------- answer ---------- */
.ctx-block { background:var(--panel); border:1px solid var(--waitline);
  border-left:3px solid var(--warn-ink); border-radius:var(--radius-md);
  padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.ctx-block h1 { font-size:22px; line-height:1.25; }
.ctx-block p { margin:0; font:400 14px/1.65 var(--font-body); color:var(--ink-2); max-width:70ch; }
.q { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px; }
.q .head { display:flex; align-items:baseline; gap:10px; }
.q .num { font:500 11px/1.4 var(--mono); color:var(--ink-3); }
.q h2 { font:600 16px/1.35 var(--font-heading); letter-spacing:-0.01em; }
.q.answered { border-color:var(--line-2); }
.choices { display:flex; flex-direction:column; gap:8px; }
.choice { display:flex; align-items:center; gap:11px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;
  cursor:pointer; font-family:var(--font-body); }
.choice:hover { border-color:var(--line-2); }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice .lbl { font:500 13.5px/1.3 var(--mono); color:var(--ink); }
.choice .note { margin-left:auto; font:400 12px/1.3 var(--font-body); color:var(--ink-3); }
.choice:has(input:checked) { border-color:var(--ok-ink); background:var(--overbg); }
.yesno { display:flex; border:1px solid var(--line-2); border-radius:var(--radius-sm); overflow:hidden; }
.yesno label { background:var(--card); padding:10px 22px; cursor:pointer;
  font:600 13px var(--font-heading); color:var(--ink); border-right:1px solid var(--line-2); }
.yesno label:last-child { border-right:0; }
.yesno label:has(input:checked) { background:var(--overbg); color:var(--ok-ink); }
.yesno input { position:absolute; opacity:0; pointer-events:none; }
figure.visual { margin:0; border:1px solid var(--line-2); border-radius:var(--radius-md);
  overflow:hidden; background:var(--panel-2); }
figure.visual figcaption { display:flex; align-items:center; gap:9px; padding:8px 12px;
  border-bottom:1px solid var(--line); font:400 10.5px/1.4 var(--font-body); color:var(--ink-3); }
figure.visual .dot { width:7px; height:7px; border-radius:50%; background:var(--line-2); }
figure.visual iframe { display:block; width:100%; height:260px; border:0; background:#fff; }
.errbox { background:var(--waitbg); border:1px solid var(--waitline); border-radius:var(--radius-sm);
  padding:10px 14px; font:400 13px/1.5 var(--font-body); color:var(--ink); }

/* ---------- ticket detail ---------- */
.tk-head { display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.tk-head h1 { font-size:30px; line-height:1.2; max-width:24ch; }
.lane-pill { display:inline-flex; align-items:center; gap:7px; background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:5px 10px;
  font:600 10.5px/1 var(--font-heading); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--ink); }
.state-box { background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px 22px; display:flex; flex-direction:column; gap:9px; }
.state-box p { margin:0; font:400 17px/1.6 var(--font-body); color:var(--ink); max-width:68ch; white-space:pre-wrap; }
.activity-head { width:100%; display:flex; align-items:center; gap:10px; background:transparent;
  border:0; padding:13px 16px; cursor:pointer; text-align:left; font-family:var(--font-heading); }
.steps { border-top:1px solid var(--line); padding:6px 0 8px; max-height:236px; overflow-y:auto; }
.steps .step { display:grid; grid-template-columns:68px minmax(0,1fr); gap:12px;
  align-items:baseline; padding:7px 16px; }
.steps .kind { font:600 9.5px/1.4 var(--font-heading); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--ink-3); }
.steps .detail { font:400 12.5px/1.5 var(--mono); color:var(--ink-2); word-break:break-word; }
.wl { display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px;
  border-top:1px solid var(--line); padding-top:10px; }
.wl .date { font:500 11px/1.6 var(--mono); color:var(--ink-3); }
.wl .line { font:400 12.5px/1.7 var(--mono); color:var(--ink-2); }
.cmt { background:var(--card); border:1px solid var(--line); border-left:2px solid var(--ok-ink);
  border-radius:var(--radius-sm); padding:13px 16px; display:flex; flex-direction:column;
  gap:6px; max-width:72ch; }
.cmt .who { font:600 12.5px/1 var(--font-heading); color:var(--ink); }
.cmt .when { font:400 11px/1 var(--font-body); color:var(--ink-3); }
.cmt p { margin:0; font:400 14.5px/1.6 var(--font-body); color:var(--ink); }
aside.side { display:flex; flex-direction:column; gap:14px; position:sticky; top:70px; }
aside.side section { background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:16px; display:flex; flex-direction:column; gap:11px; }
.vis-link { display:flex; flex-direction:column; gap:3px; padding:9px 10px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); }
.vis-link:hover { border-color:var(--line-2); }
.vis-link .n { font:500 12px/1.3 var(--font-body); color:var(--ink); }
.vis-link .m { font:400 10.5px/1.3 var(--mono); color:var(--ink-3); }

/* ---------- clients ---------- */
[data-conn] { width:9px; height:9px; flex:none; }
[data-conn="online"]  { background:var(--ok-ink); border-radius:50%; }
[data-conn="missing"] { background:var(--warn-ink); clip-path:polygon(50% 0,100% 100%,0 100%); }
.client-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 16px; }
.kv { display:flex; flex-direction:column; gap:2px; }
.kv .k { font:600 9px/1.4 var(--font-heading); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--ink-3); }
.kv .v { font:400 11.5px/1.4 var(--mono); color:var(--ink-2); word-break:break-all; }

/* ---------- spend ---------- */
.spend { font:400 11.5px/1 var(--font-body); color:var(--ink-3); }
.spend b { font-weight:500; color:var(--ink-2); font-family:var(--mono); }