/* Board. Five themes picked in the header (saved per browser): studio (default, follows the
   system's light/dark), trello, atlassian, github, arcade. Every colour comes from the tokens. */
:root{
  --bg:#f2f3f0; --bg-img:none; --head:transparent; --panel:#fff; --col:#e6e8e3; --fg:#1c2226; --muted:#5d6872; --line:#d6dad4;
  --accent:#b25e00; --accent-fg:#fff; --do:#1d7a4d; --dont:#b4232c; --check:#2f5aa8; --ai:#6b7380; --human:#7a3db8; --human-bg:#f1e8fb;
  --q:#a35a00; --q-bg:#fbecd6; --radius:8px; --col-radius:10px; --shadow:0 1px 2px rgba(0,0,0,.08);
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]),:root[data-theme="studio"]{
  --bg:#121619; --panel:#1c2226; --col:#171c20; --fg:#e4e8ea; --muted:#9aa6ad; --line:#2f383d;
  --accent:#f2a54a; --accent-fg:#1a1205; --do:#5fd08f; --dont:#f08a8f; --check:#8fb3f5; --ai:#97a1ab; --human:#c9a2f2; --human-bg:#2c2140;
  --q:#f2b462; --q-bg:#3a2a14; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="trello"]{
  --bg:#0c66e4; --bg-img:linear-gradient(135deg,#0c66e4 0%,#7f5fdb 100%); --head:rgba(0,0,0,.18); --panel:#fff; --col:#f1f2f4; --fg:#172b4d; --muted:#626f86; --line:#dcdfe4;
  --accent:#0c66e4; --accent-fg:#fff; --radius:8px; --col-radius:12px; --shadow:0 1px 1px rgba(9,30,66,.25);
  --display:"Inter","Segoe UI",system-ui,sans-serif; --body:"Inter","Segoe UI",system-ui,sans-serif; color-scheme:light}
:root[data-theme="atlassian"]{
  --bg:#f7f8f9; --head:#fff; --panel:#fff; --col:#f1f2f4; --fg:#172b4d; --muted:#44546f; --line:#dcdfe4;
  --accent:#0c66e4; --accent-fg:#fff; --do:#216e4e; --dont:#ae2e24; --check:#0055cc; --human:#6e5dc6; --human-bg:#f3f0ff;
  --radius:3px; --col-radius:3px; --shadow:0 1px 1px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31);
  --display:"Segoe UI",system-ui,sans-serif; --body:"Segoe UI",system-ui,sans-serif; color-scheme:light}
:root[data-theme="github"]{
  --bg:#0d1117; --head:#010409; --panel:#161b22; --col:#0d1117; --fg:#e6edf3; --muted:#8d96a0; --line:#30363d;
  --accent:#238636; --accent-fg:#fff; --do:#3fb950; --dont:#f85149; --check:#58a6ff; --ai:#8d96a0; --human:#bc8cff; --human-bg:#271d3b;
  --q:#d29922; --q-bg:#2b2111; --radius:6px; --col-radius:6px; --shadow:none;
  --display:-apple-system,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif; --body:-apple-system,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif; color-scheme:dark}
:root[data-theme="arcade"]{
  --bg:#140d2b; --bg-img:radial-gradient(circle at 20% 0%,#3a1d6e 0%,#140d2b 55%); --head:transparent; --panel:#1f1640; --col:#18102f; --fg:#f4eefe; --muted:#a99cc9; --line:#3b2b6b;
  --accent:#ffd23f; --accent-fg:#1a1033; --do:#3cf2a0; --dont:#ff5c8a; --check:#5ccbff; --ai:#a99cc9; --human:#ffd23f; --human-bg:#3a2d10;
  --q:#ff9f1c; --q-bg:#3a2410; --radius:4px; --col-radius:6px; --shadow:0 3px 0 #0b0618;
  --display:"Press Start 2P",ui-monospace,monospace; --body:"IBM Plex Sans",system-ui,sans-serif; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:var(--bg);background-image:var(--bg-img);background-attachment:fixed;color:var(--fg);font:14px/1.5 var(--body)}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.2}
h1{font-size:1.25rem} h2{font-size:1.1rem} h3{font-size:.8rem;font-family:var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
:root[data-theme="arcade"] h1{font-size:.95rem} :root[data-theme="arcade"] h2{font-size:.85rem;line-height:1.5}
.muted{color:var(--muted)} .err{color:var(--dont)} code,.mono{font:400 .8rem var(--mono)}
input,select,textarea{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:7px 9px}
textarea{width:100%;resize:vertical}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--fg);font:600 .82rem var(--body);padding:7px 11px;border-radius:var(--radius);cursor:pointer}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.login{max-width:420px;margin:12vh auto;padding:0 16px;display:flex;flex-direction:column;gap:12px}
.login form{display:flex;gap:8px} .login input{flex:1}

.head{background:var(--head);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
:root[data-theme="trello"] .head,:root[data-theme="trello"] .head .muted{color:#fff}
.head-in{max-width:1500px;margin:0 auto;padding:12px max(16px,env(safe-area-inset-left)) 10px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.role{font:600 .68rem var(--mono);padding:2px 7px;border-radius:10px;background:var(--accent);color:var(--accent-fg)}
.controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.82rem}
.controls select{padding:5px 7px}
.wrap{max-width:1500px;margin:0 auto;padding:12px max(16px,env(safe-area-inset-left)) 60px;display:flex;flex-direction:column;gap:12px}
.links{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.8rem}
.links a{color:inherit;opacity:.85}
:root[data-theme="trello"] .wrap > .links a,:root[data-theme="trello"] .tabs button{color:#fff}
:root[data-theme="trello"] .tabs button[aria-selected="true"]{color:var(--fg)}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tabs button{border:0;background:transparent;color:var(--muted);font:600 .84rem var(--body);padding:7px 12px;border-radius:var(--radius);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--fg);box-shadow:var(--shadow)}
.brief{display:flex;gap:8px;align-items:flex-start}

.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px;align-items:start}
.col{background:var(--col);border-radius:var(--col-radius);padding:8px;display:flex;flex-direction:column;gap:7px;min-height:120px}
:root[data-theme="github"] .col{border:1px solid var(--line)}
:root[data-theme="arcade"] .col{border:2px solid var(--line)}
.col.over{outline:2px dashed var(--accent);outline-offset:-2px}
.colh{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.82rem;padding:2px 4px}
.colh .n{font:500 .72rem var(--mono);color:var(--muted)}
.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:9px 10px;cursor:pointer;display:flex;flex-direction:column;gap:6px;border:1px solid transparent}
:root[data-theme="github"] .card,:root[data-theme="atlassian"] .card{border-color:var(--line)}
:root[data-theme="arcade"] .card{border:2px solid var(--line)}
.card:hover{border-color:var(--accent)}
.card.draft{border:1px dashed var(--muted);box-shadow:none}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.num{font:600 .74rem var(--mono);color:var(--muted)}
.card .t{font-weight:600;font-size:.88rem;line-height:1.3}
.meta{display:flex;align-items:center;gap:8px;font:500 .72rem var(--mono);color:var(--muted)}
.meta .k-do{color:var(--do)} .meta .k-dont{color:var(--dont)} .meta .k-check{color:var(--check)}
.qtag{font:600 .68rem var(--mono);padding:1px 6px;border-radius:9px;background:var(--q-bg);color:var(--q)}
.av{margin-left:auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 .62rem var(--body);background:var(--accent);color:var(--accent-fg);text-transform:uppercase}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;font-size:.82rem}
.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font:500 .7rem var(--mono);text-transform:uppercase;color:var(--muted)}

.drawer{position:fixed;inset:0 0 0 auto;width:min(460px,100%);background:var(--panel);color:var(--fg);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.25);padding:16px max(16px,env(safe-area-inset-right)) 40px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px;z-index:20}
.drawer .dh{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.status{font:600 .7rem var(--mono);color:var(--muted)}
.warn{font-size:.8rem;padding:7px 9px;border-radius:var(--radius);background:var(--q-bg);color:var(--q)}
.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.items li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:start;padding:6px 8px;border-radius:var(--radius);background:color-mix(in srgb,var(--col) 70%,transparent)}
.items .ic{font:700 .9rem var(--mono);line-height:1.3;text-align:center}
.items .k-do .ic{color:var(--do)} .items .k-dont .ic{color:var(--dont)} .items .k-check .ic{color:var(--check)}
.items .tx{font-size:.88rem;line-height:1.35;overflow-wrap:anywhere}
.by{font:600 .62rem var(--mono);padding:1px 6px;border-radius:9px;white-space:nowrap}
.by.ai{color:var(--ai);border:1px solid var(--line)}
.by.human{color:var(--human);background:var(--human-bg)}
.items li.human{box-shadow:inset 3px 0 0 var(--human)}
.qbox{background:var(--q-bg);border-radius:var(--radius);padding:8px;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.row{display:flex;gap:6px;flex-wrap:wrap}
details.more summary{cursor:pointer;color:var(--muted);font-size:.8rem}
dl.f{display:grid;grid-template-columns:80px 1fr;gap:4px 10px;margin:6px 0 0;font-size:.82rem}
dl.f dt{color:var(--muted)} dl.f dd{margin:0;overflow-wrap:anywhere}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:8px;font-size:.85rem;z-index:30;max-width:90vw}
@media (max-width:700px){.brief{flex-direction:column}.brief .btn{align-self:flex-end}.board{grid-auto-columns:minmax(78vw,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- 0.3: icon buttons, theme menu, compact drawer, details, dialog ---- */
.ico{width:16px;height:16px;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ibtn{border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:var(--radius);width:34px;height:34px;display:inline-grid;place-items:center;cursor:pointer;padding:0}
.ibtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:40px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.25);padding:6px;display:flex;flex-direction:column;min-width:150px;z-index:15}
.menu button{border:0;background:transparent;color:inherit;text-align:left;padding:7px 10px;border-radius:var(--radius);cursor:pointer;font:500 .85rem var(--body)}
.menu button:hover,.menu button[aria-checked="true"]{background:var(--col)}
.head-in select{font-weight:600}
.addbtn{border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px;width:24px;height:24px;display:grid;place-items:center}
.addbtn:hover{background:var(--panel);color:var(--fg)}
.colh .r{display:flex;align-items:center;gap:6px}
.meta .ico{width:13px;height:13px;vertical-align:-2px}
.nogdd{color:var(--dont)}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 .74rem var(--body);padding:4px 8px;border-radius:12px;background:var(--col);color:var(--fg);text-decoration:none}
.chip.warn{background:var(--q-bg);color:var(--q)}
.items li{grid-template-columns:16px 1fr 18px}
.items .who{color:var(--muted);display:grid;place-items:center}
.items li.human .who{color:var(--human)}
details.sec{border-top:1px solid var(--line);padding-top:8px}
details.sec > summary{cursor:pointer;font:600 .78rem var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;list-style:none;display:flex;gap:6px;align-items:center}
details.sec > summary::-webkit-details-marker{display:none}
details.sec > summary::before{content:"›";display:inline-block;transition:transform .15s}
details.sec[open] > summary::before{transform:rotate(90deg)}
.details{font-size:.88rem;line-height:1.5;margin-top:6px;overflow-wrap:anywhere}
.details img{max-width:100%;border-radius:var(--radius);display:block;margin:6px 0}
.details a{color:var(--accent)}
.foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.foot select{flex:1;min-width:140px}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--fg);width:min(480px,92vw);padding:16px}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog form{display:flex;flex-direction:column;gap:10px}
.controls{margin-left:auto}
/* The pixel font has no Vietnamese accents: card titles use the body face in Arcade. */
:root[data-theme="arcade"] h2{font-family:var(--body);font-size:1.05rem;font-weight:700}

/* ---- 0.4: preview images ---- */
.card .cover{width:calc(100% + 20px);margin:-9px -10px 2px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;display:block;background:var(--col)}
.cover.big{width:100%;max-height:260px;object-fit:cover;border-radius:var(--radius);display:block;background:var(--col)}

/* ---- 0.5: tester results ---- */
.tbadge{display:inline-flex;align-items:center;gap:2px;font:600 .68rem var(--mono);padding:1px 6px;border-radius:9px}
.test-wait{color:var(--check);background:color-mix(in srgb,var(--check) 15%,transparent)}
.test-pass{color:var(--do);background:color-mix(in srgb,var(--do) 15%,transparent)}
.test-fail{color:var(--dont);background:color-mix(in srgb,var(--dont) 15%,transparent)}
.tests{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.84rem}
.tests li{display:flex;flex-wrap:wrap;gap:6px 10px;padding:6px 8px;border-radius:var(--radius);background:color-mix(in srgb,var(--col) 70%,transparent)}
.tests li b{text-transform:uppercase;font:700 .72rem var(--mono)}
.tests .t-pass b{color:var(--do)} .tests .t-fail b{color:var(--dont)} .tests .t-running b,.tests .t-queued b{color:var(--check)}
.demo-bar{position:sticky;top:0;z-index:12;background:var(--accent);color:var(--accent-fg);font-size:.85rem;padding:8px max(16px,env(safe-area-inset-left));display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.demo-bar button{border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:3px 10px;font:600 .78rem var(--body);cursor:pointer}
.demo-bar button[aria-pressed="true"]{background:var(--accent-fg);color:var(--accent)}
.demo-bar a{color:inherit;font-weight:600}