/* crx v3 — page-scoped styles. Everything here sits on /styles.css's tokens and
   reuses its .card / .column / .qrow / .tag / .btn / .d-* language; only the
   v3-specific layout lives here. Selectors are prefixed .v3-* (or scoped under
   main.v3) so nothing leaks into the other pages. */

main.v3 { padding: 12px 18px 40px; max-width: 1400px; margin: 0 auto; }
.v3-loading { padding: 2rem; }
.v3-err { margin: 0.35rem 0; }
.v3-none { padding: 1rem 0; }

/* ── top bar: quick add + views ─────────────────────────────────────────── */
/* The display rules below would otherwise beat the `hidden` attribute — the
   expanded quick-add and the reason forms are collapsed until asked for. */
main.v3 [hidden], .v3-card [hidden], .v3-picker [hidden] { display: none !important; }
.v3-bar { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
.v3-views { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; align-self: flex-start; }
.v3-views .pill-filter { text-decoration: none; }

/* The quick-add box — one line collapsed, the SAME box grown when expanded. */
.v3-qa {
  display: flex; flex-direction: column; gap: 0.45rem;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.55rem 0.65rem;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.v3-qa:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); }
.v3-qa.expanded { border-color: var(--line-strong); }
.v3-qa.compact { padding: 0.35rem 0.5rem; border-style: dashed; background: transparent; margin-top: 0.4rem; }
.v3-qa.compact:focus-within { border-style: solid; }
.v3-qa-line { display: flex; align-items: center; gap: 0.5rem; }
.v3-qa-input {
  flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: transparent; border: 0; outline: none; padding: 0.3rem 0.2rem;
}
.v3-qa.compact .v3-qa-input { font-size: 0.85rem; }
.v3-qa-input::placeholder { color: var(--ink-faint); }
.v3-qa-ready { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; cursor: pointer; user-select: none; }
.v3-qa-ready input { accent-color: var(--accent); }
.v3-qa-hint { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); white-space: nowrap; }
.v3-qa-caret { background: none; border: 0; color: var(--ink-faint); font-size: 1rem; cursor: pointer; padding: 0 0.3rem; line-height: 1; }
.v3-qa-caret:hover { color: var(--ink); }
.v3-qa-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.45rem; padding-top: 0.4rem; border-top: 1px solid var(--line); }
.v3-qa-more .v3-tags, .v3-qa-more .v3-qa-pick { grid-column: 1 / -1; }
.v3-qa-pick { display: flex; align-items: center; gap: 0.4rem; }
.v3-custchip { --tag-color: var(--ink); }
.v3-qa-field, .v3-select {
  font: inherit; font-size: 0.8rem; color: var(--ink); background: var(--surface-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.32rem 0.5rem; min-width: 0;
}
.v3-qa-field:focus, .v3-select:focus { border-color: var(--accent); outline: none; }

/* ── tags: chips + picker ───────────────────────────────────────────────── */
.v3-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; position: relative; }
.v3-tagchip { display: inline-flex; align-items: center; gap: 0.25rem; padding-right: 0.3rem; --tag-color: var(--ink-soft); color: var(--tag-color); border-color: color-mix(in srgb, var(--tag-color) 40%, var(--line)); }
.v3-tagchip.kind-lane { --tag-color: var(--accent-2); }
.v3-tagchip.off { opacity: 0.5; text-decoration: line-through; }
.v3-tagchip-label { color: inherit; text-decoration: none; }
.v3-tagchip-label:hover { text-decoration: underline; }
.v3-tagchip-x { background: none; border: 0; color: inherit; opacity: 0.6; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 0.1rem; }
.v3-tagchip-x:hover { opacity: 1; }
.v3-tag-add {
  width: 1.3rem; height: 1.3rem; border-radius: 999px; border: 1px dashed var(--line-strong);
  background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 0.85rem; line-height: 1;
}
.v3-tag-add:hover { color: var(--ink); border-color: var(--accent); }
.v3-picker {
  position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 0.3rem; min-width: 220px; max-width: 320px;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem;
}
/* Pickers float on <body> (see chipPicker) so table scrollers can't clip them. */
.v3-picker.floating { position: fixed; top: auto; margin-top: 0; z-index: 400; }
.v3-picker-search { font: inherit; font-size: 0.8rem; color: var(--ink); background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.3rem 0.45rem; }
.v3-picker-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; }
.v3-picker-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.3rem; font-size: 0.8rem; border-radius: var(--r-sm); cursor: pointer; }
.v3-picker-row:hover { background: var(--surface-3); }
.v3-picker-row.off { color: var(--ink-faint); }
.v3-picker-row input { accent-color: var(--accent); }
.v3-picker-new { background: none; border: 0; color: var(--accent-2); font: inherit; font-size: 0.78rem; text-align: left; padding: 0.3rem; cursor: pointer; }
.v3-kind { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.v3-kind.lane { color: var(--accent-2); }

/* ── filters ────────────────────────────────────────────────────────────── */
.v3-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.v3-filter-tags { display: inline-flex; align-items: center; gap: 0.4rem; }
.v3-filter-label { font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.v3-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--ink-soft); cursor: pointer; user-select: none; }
.v3-check input { accent-color: var(--accent); }

/* ── table view ─────────────────────────────────────────────────────────── */
.v3-table-wrap { display: flex; flex-direction: column; gap: 1.1rem; }
.v3-table-bar { display: flex; justify-content: flex-end; margin-bottom: -0.5rem; }
.v3-group-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; cursor: pointer; }
.v3-group-name { font-size: 0.8rem; color: var(--ink-faint); font-style: italic; }

/* Collapsed sections keep their head — the chevron, the tag and the count stay
   readable; only the table and its add-a-card row go. `hidden` alone can't do
   it: .v3-qa sets display:flex, which outranks the UA [hidden] rule. */
.v3-group-chevron {
  background: none; border: 0; padding: 0 0.1rem; cursor: pointer; line-height: 1;
  font-size: 0.7rem; color: var(--ink-faint);
}
.v3-group-chevron:hover { color: var(--ink); }
.v3-group.is-collapsed > .v3-scroll,
.v3-group.is-collapsed > .v3-qa { display: none; }
.v3-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.v3-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.v3-table th {
  text-align: left; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.v3-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.v3-table tr:last-child td { border-bottom: 0; }
.v3-row:hover td { background: var(--surface-2); }
.v3-row[data-stage="scoping"] .v3-td-title { box-shadow: inset 3px 0 var(--stage-scoping); }
.v3-row[data-stage="building"] .v3-td-title { box-shadow: inset 3px 0 var(--stage-building); }
.v3-row[data-stage="review"] .v3-td-title { box-shadow: inset 3px 0 var(--stage-review); }
.v3-row[data-stage="done"] .v3-td-title { box-shadow: inset 3px 0 var(--stage-done); }
.v3-td-title { min-width: 240px; }
.v3-title { color: var(--ink); text-decoration: none; font-weight: 600; }
.v3-title:hover { color: var(--accent-2); }
.v3-td-soft { color: var(--ink-soft); font-size: 0.78rem; white-space: nowrap; }
.v3-td-tags { min-width: 180px; }
.v3-stage { font-size: 0.74rem; padding: 0.2rem 0.4rem; }
.v3-table .card-badge { display: inline-block; margin-top: 0; }

/* Provisional title — quick-added, derived title not yet landed (title_locked=0). */
.provisional { font-style: italic; color: var(--ink-soft); }

/* ── board view ─────────────────────────────────────────────────────────── */
.v3-board .column.drag-over { outline: 1px dashed var(--accent); outline-offset: 4px; border-radius: var(--r-md); }
.v3-board .card.dragging { opacity: 0.45; }
.v3-board .card-foot .v3-tagchip { font-size: 0.6rem; padding: 0.1rem 0.4rem; }

/* ── queue ──────────────────────────────────────────────────────────────── */
.v3-queue .qrow { display: grid; grid-template-columns: 1fr auto; gap: 0.8rem; align-items: start; }
.v3-stop.decided { opacity: 0.4; pointer-events: none; }
.v3-stop-summary { font-size: 0.86rem; color: var(--ink); line-height: 1.45; }
.v3-checkable { margin: 0.2rem 0 0 1.1rem; font-size: 0.78rem; color: var(--ink-soft); }
.v3-stop-detail { font-size: 0.82rem; color: var(--ink-soft); border-left: 2px solid var(--line-strong); padding-left: 0.6rem; margin-top: 0.3rem; }
.v3-gate { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.v3-stop.kind-decision .v3-gate { color: var(--you); border-color: color-mix(in srgb, var(--you) 40%, var(--line)); }
.q-actions.row { flex-direction: row; flex-wrap: wrap; }
.v3-reason { display: flex; flex-direction: column; gap: 0.3rem; }
.v3-reason-form { display: flex; flex-direction: column; gap: 0.3rem; }
.v3-reason-input {
  font: inherit; font-size: 0.8rem; color: var(--ink); background: var(--surface-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.35rem 0.5rem; min-width: 200px; resize: vertical;
}
.v3-reason-input:focus { border-color: var(--danger); outline: none; }
.v3-calm { display: flex; flex-direction: column; gap: 0.5rem; }
.v3-calm-title { font-size: 1.3rem; font-weight: 650; color: var(--ink); letter-spacing: -0.02em; }
.v3-calm-counts { font-family: var(--mono); font-size: 0.74rem; }

/* ── project page ───────────────────────────────────────────────────────── */
.v3-proj-head { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.v3-proj-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.v3-proj-title { font-size: 1.5rem; font-weight: 750; letter-spacing: -0.03em; color: var(--tag-color, var(--ink)); }
.v3-state.state-completed { color: var(--ok); }
.v3-state.state-archived { color: var(--ink-faint); }
.v3-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
  border-radius: var(--r-md); padding: 0.55rem 0.8rem; font-size: 0.84rem;
}
.v3-progress { display: flex; align-items: center; gap: 0.6rem; }
.v3-progress-bar { flex: 1; max-width: 360px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.v3-progress-fill { height: 100%; background: var(--ok); transition: width 0.3s; }
.v3-progress-num { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.v3-proj-desc { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; cursor: text; max-width: 80ch; }
.v3-proj-desc:hover { color: var(--ink); }
.v3-proj-desc-edit {
  font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--accent); border-radius: var(--r-md); padding: 0.5rem 0.65rem; width: 100%; max-width: 80ch; resize: vertical;
}
.v3-section-head { display: flex; align-items: center; gap: 0.8rem; margin: 0.4rem 0 0.5rem; }
/* table | board for one project — the top bar's switch, section-sized. */
.v3-viewtoggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.v3-viewtoggle .pill-filter { text-decoration: none; }
/* The board inside the cards section keeps its own horizontal scroll — the page
   body must never scroll sideways. */
.v3-proj-cards .v3-board { padding-top: 0; }
/* A column's add-a-card row is ~280px wide, and on a PROJECT board it also
   carries the tag hint — which starves the input the global board doesn't have
   to share. So, here only: the build-ready word goes (the checkbox and its
   tooltip stay — the same trade as the mobile breakpoint) and a long slug
   ellipses rather than eating the field. */
.v3-proj-cards .v3-board .v3-qa.compact .v3-qa-ready span { display: none; }
.v3-proj-cards .v3-board .v3-qa.compact .v3-qa-hint { overflow: hidden; text-overflow: ellipsis; max-width: 8rem; }
.v3-proj-cards .v3-board .v3-qa.compact .v3-qa-input { flex: 1 1 6rem; }
main.v3 h2 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.v3-proj-artifacts { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
.v3-artifact { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.v3-artifact summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; cursor: pointer; font-size: 0.84rem; list-style: none; }
.v3-artifact summary::-webkit-details-marker { display: none; }
.v3-artifact-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-artifact-body { padding: 0.2rem 0.8rem 0.8rem; font-size: 0.84rem; line-height: 1.55; color: var(--ink-soft); border-top: 1px solid var(--line); }

/* ── card panel: one root, two modes ────────────────────────────────────── */
/* data-mode="drawer": a right slide-over, text column only (the terminal pane
   is display:none but its node — and any live iframe — stays put).
   data-mode="full": v2's full card — the terminal pane takes the large share of
   the viewport, the text column sits beside it at v2's 440px. */
.v3-panel-backdrop { z-index: 30; }
.v3-card {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 31;
  display: flex; flex-direction: row; height: 100dvh;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.v3-card[data-mode="drawer"] { width: min(640px, 100vw); }
.v3-card[data-mode="drawer"] .v3-card-term { display: none; }
.v3-card[data-mode="full"] { left: 0; width: 100vw; border-left: 0; }
.v3-card-main {
  flex: 1 1 auto; min-width: 0; overflow-y: auto;
  padding: 0 1.4rem 2rem; display: flex; flex-direction: column; gap: 1rem;
}
.v3-card[data-mode="full"] .v3-card-main { flex: 0 0 440px; width: 440px; border-right: 1px solid var(--line-strong); }
.v3-card-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.v3-card[data-mode="drawer"] .v3-card-side { display: none; }
.v3-card-term { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; }
.v3-frame-host { position: absolute; inset: 0; }
.v3-frame-host[hidden] { display: none; }

/* The mobile CTA is a .copy-btn.term-link; styles.css's later rule paints it
   accent-on-accent (invisible text). Out-specify it. */
.v3-card .mobile-term-cta .term-link { color: var(--accent-ink, #fff); }

/* ── the session strip ──────────────────────────────────────────────────── */
.v3-sessions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.v3-strip-slot .v3-sessions { border: 1px solid var(--line); border-radius: var(--r-md); }
.v3-stab {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: inherit; font-size: 0.76rem; color: var(--ink-soft); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.22rem 0.6rem;
}
.v3-stab:hover { border-color: var(--line-strong); color: var(--ink); }
.v3-stab.active { color: var(--ink); border-color: var(--accent); background: var(--accent-faint); }
.v3-stab.theirs { border-style: dashed; }
.v3-stab .sdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.v3-stab .sdot.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.v3-stab .sdot.warn { background: var(--warn); }
.v3-stab .sdot.none { background: var(--cold); }
.v3-stab-label { font-weight: 550; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-stab-repo { font-family: var(--mono); font-size: 0.64rem; color: var(--ink-faint); }
.v3-stab .owner-av { width: 1rem; height: 1rem; font-size: 0.5rem; }
.v3-stab-wait { color: var(--you); }
.v3-stab-stops { font-family: var(--mono); font-size: 0.62rem; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 0 0.35rem; }
.v3-stab-new { border-style: dashed; color: var(--ink-faint); }
.v3-stab-none { font-size: 0.74rem; color: var(--ink-faint); }
.v3-stab-exited { font-size: 0.74rem; color: var(--ink-faint); }
.v3-stab-exited summary { cursor: pointer; padding: 0.2rem 0.4rem; }
.v3-stab-exited-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.4rem; }
.v3-stop-from { cursor: pointer; font: inherit; background: none; color: var(--accent-2); }
/* Pull requests: one row per slice, toned like v2's slice chips. */
.v3-slice { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.25rem 0 0.25rem 0.55rem; font-size: 0.82rem; border-left: 3px solid var(--line-strong); }
.v3-slice-ok { border-left-color: var(--ok); }
.v3-slice-warn { border-left-color: var(--warn); }
.v3-slice-bad { border-left-color: var(--danger); }
.v3-slice-repo { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.v3-slice-pr { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.v3-slice-pr:hover { text-decoration: underline; }
.v3-slice-state { color: var(--ink-faint); font-size: 0.74rem; }
.v3-stop-from:hover { border-color: var(--accent); }
body.v3-full-open { overflow: hidden; }
.v3-panel-head { margin-bottom: 0; }
.v3-card .d-title { cursor: text; }
/* An archived card is legible as archived wherever it is opened from (a deep
   link, or the archive view) — the head's ↺ is the way back. */
.v3-archived { color: var(--ink-faint); border-color: var(--line-strong); }
.v3-panel-head .d-close:disabled { opacity: 0.45; cursor: progress; }
.v3-section-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
.v3-card .qrow { grid-template-columns: 1fr; gap: 0.5rem; }
.v3-prop { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.84rem; }
.v3-prop.status-approved { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.v3-prop.status-rejected { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); opacity: 0.7; }
.v3-prop details summary { font-size: 0.74rem; color: var(--ink-faint); cursor: pointer; }
.v3-comment { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.84rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.v3-comment-head { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-faint); }
.v3-comment-form { display: flex; gap: 0.5rem; align-items: flex-end; }
.v3-comment-form .dp-input { flex: 1; }
.v3-panel-links { padding-top: 0.4rem; border-top: 1px solid var(--line); }

/* ── markdown blocks (shared) ───────────────────────────────────────────── */
.md p { margin: 0 0 0.4rem; }
.md ul, .md ol { margin: 0 0 0.4rem 1.2rem; }
.md h1, .md h2, .md h3 { font-size: 0.9rem; margin: 0.5rem 0 0.25rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.md pre { background: var(--surface-3); border-radius: var(--r-sm); padding: 0.5rem 0.65rem; overflow-x: auto; font-size: 0.76rem; margin: 0 0 0.4rem; }
.md code { font-family: var(--mono); font-size: 0.8em; }
.md blockquote { border-left: 2px solid var(--line-strong); padding-left: 0.6rem; color: var(--ink-faint); }
.md a { color: var(--accent-2); }

@media (max-width: 720px) {
  main.v3 { padding: 10px 10px 40px; }
  .v3-queue .qrow { grid-template-columns: 1fr; }
  .v3-qa-ready span { display: none; }
  /* Mobile: both modes are the text column full-width; the terminal pane never
     mounts here (styles.css hides .detail-term and shows .mobile-term-cta). */
  .v3-card[data-mode="drawer"], .v3-card[data-mode="full"] { width: 100vw; left: 0; border-left: 0; flex-direction: column; }
  .v3-card[data-mode="full"] .v3-card-main { flex: 1 1 auto; width: 100%; border-right: 0; }
  /* Keep the session strip (it's how you pick which session the CTA opens);
     drop only the iframe pane, and put the strip above the text column. */
  .v3-card[data-mode="full"] .v3-card-side { display: block; order: -1; }
  .v3-card[data-mode="full"] .v3-card-term { display: none; }
}
.v3-dismiss { color: var(--ink-faint); border-color: transparent; }
.v3-dismiss:hover { color: var(--ink); border-color: var(--line-strong); }