/* Sprint board styling — matched to dapp.truesight.me (dapp/index.html <style>).
   Palette: Arial, #f5f5f5 page, white cards, #007bff accent, #4CAF50 green,
   border-radius 8px, subtle box-shadow. The board's "Needs You" red accent is
   kept deliberately (--need) — surfacing blocked-on-human tickets is the point. */
:root{
  --accent:#007bff; --accent-dk:#0056b3; --green:#4CAF50; --green-dk:#45a049;
  --page:#f5f5f5; --card:#fff; --line:#ddd; --ink:#333; --muted:#555; --muted-2:#777;
  --need:#c0392b; --need-bg:#fdf0ee;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5;
  background:var(--page);color:var(--ink)}
code{background:#f0f0f0;padding:.15rem .35rem;border-radius:3px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--card);color:var(--ink);padding:.7rem 1.1rem;position:sticky;top:0;z-index:5;
  border-bottom:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-logo{height:2rem;width:auto;display:block}
.brand h1{font-size:1.05rem;margin:0;font-weight:600;letter-spacing:.01em;color:var(--ink)}
/* [hidden] must beat display rules such as .board{display:grid}: author styles
   outrank the UA [hidden]{display:none}, so without this the hidden attribute is
   defeated and the view tabs silently do nothing (all sections stay painted). */
[hidden]{display:none!important}
.viewswitch{display:flex;gap:.4rem}
.tab{background:var(--page);border:1px solid var(--line);color:var(--ink);padding:.35rem .8rem;
  border-radius:8px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:background-color .2s,color .2s,border-color .2s}
.tab:hover{border-color:var(--accent);color:var(--accent)}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
main{padding:1.1rem;max-width:1400px;margin:0 auto}
.meta{color:var(--muted-2);font-size:.82rem;margin:.2rem 0 1rem}
.allclear{text-align:center;padding:3rem 1rem;background:var(--card);border:1px solid var(--line);
  border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.allclear .check{font-size:2.6rem;color:var(--green)}
.allclear h2{margin:.4rem 0 .3rem;color:var(--ink)}
.allclear p{color:var(--muted)}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;align-items:start}
.col{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.7rem;min-height:80px;
  box-shadow:0 2px 8px rgba(0,0,0,.06)}
.col h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);
  margin:.1rem 0 .7rem;display:flex;justify-content:space-between;align-items:center}
.col h2 .n{background:var(--page);color:var(--ink);border-radius:10px;padding:0 .5rem;font-size:.72rem}
.col.need{border:2px solid var(--need);background:var(--need-bg)}
.col.need h2{color:var(--need)}
.card{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;
  padding:.6rem .7rem;margin-bottom:.6rem;background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.card.need{border-left-color:var(--need);box-shadow:0 1px 6px rgba(192,57,43,.12)}
.card h3{margin:0 0 .35rem;font-size:.9rem;color:var(--ink);font-weight:600}
.card .state{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted-2);margin-bottom:.3rem}
.card .sup{display:inline-block;font-size:.72rem;color:var(--green-dk);background:#eef7ee;
  border:1px solid var(--green);border-radius:8px;padding:.1rem .45rem;margin:0 0 .35rem;cursor:help}
.col.sup-lane{background:#f5faf5;border-color:var(--green)}
.col.sup-lane h2{color:var(--green-dk)}
.card .sup.stale{color:var(--muted-2);background:#f0f0f0;border-color:var(--line)}
.card .why{font-size:.8rem;color:var(--muted);margin:.25rem 0 .5rem}
.card .links{display:flex;gap:.5rem;flex-wrap:wrap}
.card a{font-size:.78rem;text-decoration:none;padding:.22rem .55rem;border-radius:8px;
  border:1px solid var(--line);color:var(--ink);background:var(--page)}
.card a.spec{border-color:var(--accent);color:var(--accent-dk)}
.card a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.card .date{font-size:.7rem;color:var(--muted-2);margin-top:.35rem}
.donefoot{margin-top:1.6rem;border-top:1px dashed var(--line);padding-top:.7rem;color:var(--muted);font-size:.82rem}
.donefoot summary{cursor:pointer;color:var(--accent)}
.donefoot ul{margin:.5rem 0 0;padding-left:1.1rem}
dialog#spec{width:min(900px,92vw);height:min(80vh,900px);border:1px solid var(--line);border-radius:8px;
  padding:0;box-shadow:0 4px 20px rgba(0,0,0,.18)}
/* flex column so the body always fills whatever the bar height turns out to be */
dialog#spec[open]{display:flex;flex-direction:column}
.specbar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;background:var(--card);color:var(--ink);
  padding:.5rem .8rem;border-bottom:2px solid var(--accent)}
.specbar #spec-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.85rem;font-weight:600}
.bar-actions{display:flex;align-items:center;gap:.3rem;flex:0 0 auto}
.x{background:transparent;border:0;color:var(--muted);font-size:1rem;cursor:pointer;line-height:1}
.x:hover{color:var(--accent)}
.copy{display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:1px solid var(--line);
  border-radius:6px;color:var(--muted);font-size:.78rem;cursor:pointer;padding:.22rem .5rem;line-height:1.2}
.copy:hover{border-color:var(--accent);color:var(--accent-dk)}
.copy.ok{border-color:var(--green);color:var(--green-dk)}
.copy .ico{font-size:.95rem}
dialog#spec pre{padding:1rem;overflow:auto;white-space:pre-wrap;
  font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;margin:0;
  flex:1 1 auto;min-height:0;background:var(--card);color:var(--ink)}
@media (max-width:600px){
  dialog#spec{width:96vw;height:88vh}
  .copy .lbl{display:none}
  .copy,.x{min-height:34px;min-width:34px;justify-content:center;padding:.2rem .4rem}
  main{padding:.6rem}
  .brand h1{font-size:.95rem}
  .tab{padding:.4rem .7rem;font-size:.8rem}
  .col{padding:.6rem}
  .card{padding:.55rem .6rem}
}