/* Views: sign-in, overview, board, drawer parts, runs, attention, evidence, history, team/connect, modal. */
.signin-wrap { min-height: 100vh; min-height: 100dvh; display: grid; align-items: center; padding: var(--space-6); }
.signin {
  width: min(980px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  border-top: var(--section-rule); border-bottom: var(--hairline);
}
.signin-intro { padding: var(--space-5) var(--space-6) var(--space-5) 0; display: grid; gap: var(--space-3); align-content: start; }
.signin-intro h1 { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.signin-actions { padding: var(--space-5) 0 var(--space-5) var(--space-6); border-inline-start: var(--hairline); display: grid; gap: var(--space-3); align-content: start; }
.signin-actions h3 { margin-top: var(--space-3); }
.signin .brand img { width: 28px; height: 28px; }
.palgu-block, .device-flow { display: grid; gap: var(--space-3); }
.user-code { display: flex; gap: var(--space-2); align-items: center; }
.user-code .group { font: 600 30px/1 var(--font-mono); letter-spacing: 0.14em; padding: var(--space-3) var(--space-4);
  background: var(--signal); color: var(--on-signal); border: 2px solid var(--rule-strong); }
.user-code .dash { font: 600 24px/1 var(--font-mono); color: var(--ink-muted); }

.two-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.view-body { display: grid; gap: var(--space-6); }
.view-body > * { min-width: 0; }
.stack { display: grid; gap: var(--space-6); }
.state-strip { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.state-strip .state-count { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-mono); }
ul.plain { list-style: none; margin: 0; padding: 0; }

.create-todo { max-width: 760px; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(146px, 1fr); overflow-x: auto;
  border-top: var(--section-rule); align-items: start; padding-bottom: var(--space-2); }
.column { display: grid; gap: var(--space-2); align-content: start; min-height: 140px; padding: var(--space-2);
  border-inline-start: var(--hairline); }
.column:first-child { border-inline-start: 0; padding-inline-start: 0; }
.column-head { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-1) 0 var(--space-2);
  border-bottom: var(--hairline); margin-bottom: var(--space-1); }
.column-head .total { font: var(--type-mono); color: var(--ink-muted); }
.card { display: grid; gap: var(--space-2); padding: var(--space-3); color: var(--ink); text-decoration: none; min-width: 0;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); }
.card:hover { border-color: var(--rule-strong); }
.card.rail { padding-inline-start: calc(var(--space-3) + var(--rail-width) + 1px); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.card-title { font: var(--type-label); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; font: var(--type-caption); }
.prio { font: var(--type-mono); font-size: 10.5px; font-weight: 700; padding: 0 5px; border: 1px solid var(--rule);
  border-radius: var(--radius-control); color: var(--ink-muted); }
.prio.p0 { background: var(--status-danger); border-color: var(--status-danger); color: var(--surface); }
.prio.p1 { border-color: var(--rule-strong); color: var(--ink); }

.drawer .explain { margin: var(--space-3) 0; }
.drawer .description { color: var(--ink-muted); max-width: 70ch; }
.drawer .actions { margin-top: var(--space-2); }
.run { display: grid; gap: 3px; padding: var(--space-2) var(--space-3); border-bottom: var(--hairline); }
.run.live { padding-inline-start: calc(var(--space-3) + var(--rail-width) + 1px); background: var(--surface); }
.run-summary { font: var(--type-caption); color: var(--ink); }
.small-link { font: var(--type-caption); margin-inline-start: auto; margin-inline-end: 40px; }
.evidence-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: var(--hairline); }
tr.evidence-row { display: table-row; }
tr.evidence-row[data-stale='true'] td:first-child { box-shadow: inset var(--rail-width) 0 0 var(--status-warn); }
.handoff { margin-top: var(--space-4); background: var(--surface); padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); }
.handoff h3 { margin-top: 0; border-top: 0; padding-top: 0; }
tr.run-row.live td { background: var(--surface); }
tr.run-row.live td:first-child { box-shadow: inset var(--rail-width) 0 0 var(--signal), inset calc(var(--rail-width) + 1px) 0 0 var(--rule-strong);
  padding-inline-start: calc(var(--space-3) + var(--rail-width) + 2px); }
td.payload { font: var(--type-mono); color: var(--ink-muted); max-width: 520px; overflow-wrap: anywhere; }
td.title-cell { max-width: 360px; }

/* needs you: neo-brutalist attention blocks */
.attention-list { display: grid; gap: var(--space-3); }
.attention-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); cursor: pointer;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--rail-width));
  background: var(--surface); border: 2px solid var(--rule-strong); box-shadow: inset var(--rail-width) 0 0 var(--status-danger); }
.attention-row:hover { background: var(--surface-sunken); }
.attention-row .reason { font: var(--type-label); font-size: 14px; grid-column: 1 / -1; }
.attention-row .meta { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.attention-row.compact { padding-block: var(--space-2); border-width: 1px; }
.attention-row.compact .reason { font: var(--type-caption); color: var(--ink); }

.modal { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 40; }
.modal .panel { width: min(440px, 92vw); display: grid; gap: var(--space-3); background: var(--canvas);
  padding: var(--space-5); border: 2px solid var(--rule-strong); }
.minted { display: grid; gap: var(--space-3); }
.hint { margin-top: var(--space-2); color: var(--ink-muted); }

@media (max-width: 960px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .signin { grid-template-columns: minmax(0, 1fr); }
  .signin-intro { padding-inline-end: 0; }
  .signin-actions { padding-inline-start: 0; border-inline-start: 0; border-top: var(--hairline); }
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-inline-start: 0; }
  .stat:nth-child(3):not(.hot) { padding-inline-start: 0; }
  .panel { overflow-x: auto; }
  .stat { border-top: var(--hairline); }
  .main .view-head { flex-wrap: wrap; }
}
.todo-link { text-decoration: none; display: inline; }
.todo-link .id { margin-inline-end: 6px; }
.todo-link .todo-title { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.todo-link:hover .todo-title { text-decoration-color: var(--ink); }
.card-meta.lease { justify-content: space-between; padding-top: var(--space-2); border-top: var(--hairline); }
.runs-table td, tr.evidence-row td, tr.event-row td, tr.token-row td, tr.member-row td { vertical-align: middle; }