/* flow2 — one stylesheet, built on the design spec's tokens.
   The rule behind all of it: show what is relevant to the current context and
   dim the rest. Cards are quiet at rest and reveal their metadata on hover, on
   focus, or when they are what the user is looking at. */

:root {
  --bg: #f4f3ef;
  --surface: #fbfaf7;
  --ink: #1e2124;
  --ink-2: #4f545a;
  --faint: #686d73;
  --line: #e2e0da;
  --line-strong: #cfccc4;
  --hover: rgba(30, 33, 36, .04);
  --warn: #b8663a;
  --shade: rgba(30, 33, 36, .18);
  --accent: #52708f;

  /* the opacity a non-relevant card falls to; see "contextual dimming" below */
  --dim: .25;

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;
}

/* the accent is the one colour in the app: focus and selection, nothing else */
:root[data-accent="sage"] { --accent: #5e7f6b; }
:root[data-accent="plum"] { --accent: #8a6a8f; }
:root[data-accent="clay"] { --accent: #9a6b4f; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171a;
    --surface: #1b1e22;
    --ink: #e7e5df;
    --ink-2: #aeb2b7;
    --faint: #8b9096;
    --line: #2a2e34;
    --line-strong: #3a3f46;
    --hover: rgba(255, 255, 255, .04);
    --warn: #d08a5b;
    --shade: rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --bg: #15171a;
  --surface: #1b1e22;
  --ink: #e7e5df;
  --ink-2: #aeb2b7;
  --faint: #8b9096;
  --line: #2a2e34;
  --line-strong: #3a3f46;
  --hover: rgba(255, 255, 255, .04);
  --warn: #d08a5b;
  --shade: rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font: 400 14px/1.5 var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* scrollbars are chrome: thin, token-coloured, never a platform grey slab */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
/* the padding is a transparent border over the content box, so the thumb reads
   as a 4px pill with air around it rather than a full-height bar */
::-webkit-scrollbar-thumb {
  background: var(--line-strong); background-clip: content-box;
  border: 3px solid transparent; border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }

a { color: inherit; text-decoration: none; }
h1 { font: 400 34px/1.1 var(--serif); letter-spacing: -.01em; margin: 0; }
h2 { font-size: 14px; font-weight: 500; margin: 0; }
.muted { color: var(--faint); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.eyebrow {
  font: 500 11px/1 var(--mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); margin: 0 0 10px;
}

/* shell: sidebar + the scrolling main area ---------------------------------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100vh; overflow: hidden; }
.main { overflow: auto; position: relative; }

/* the whole sidebar is chrome, so it sits back until it is wanted */
.sidebar {
  display: flex; flex-direction: column; gap: 28px;
  padding: 28px 16px 20px 20px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  opacity: .55; transition: opacity .25s ease;
}
.sidebar:hover, .sidebar:focus-within { opacity: 1; }
.sidebar__brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.sidebar__mark { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.sidebar__projects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar__project {
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-2);
  transition: background .2s ease, color .2s ease;
}
.sidebar__project:hover { background: var(--hover); color: var(--ink); }
.sidebar__project[aria-current="page"] { background: var(--hover); color: var(--ink); font-weight: 500; }
.sidebar__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__count { font: 400 11px/1 var(--mono); color: var(--faint); }
.sidebar__user { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.sidebar__user > span:nth-of-type(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__user .btn:first-of-type { margin-left: auto; }

.avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 10px/1 var(--mono); color: var(--ink-2);
}
.avatar--sm { width: 20px; height: 20px; font-size: 9px; }

/* page frame ---------------------------------------------------------------- */
.page { padding: 28px 36px 36px; max-width: 1440px; }
.page--panel { padding-right: 456px; }
/* the board is the scroll container, so its clip edge would otherwise sit 36px
   short of the panel and cut cards off in plain view; run it up to the panel's
   border and keep the gutter inside */
.page--panel .board { margin-right: -36px; padding-right: 36px; }
.page--narrow { max-width: 24rem; margin: 12vh auto 0; }
.page__head { display: flex; align-items: center; gap: 24px; padding-bottom: 20px; }
.page__head h1 { margin-right: -12px; }
.page__count { font: 400 12px/1 var(--mono); color: var(--faint); align-self: baseline; }
.page__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* a page whose head is title + one action (Projects: "New project") */
.page__head > .btn:last-child { margin-left: auto; }
.page__head .people + .divider + .page__actions { margin-left: 0; }

/* the people filter: focus the board on one person's cards */
.people { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.people__btn {
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: 500 11px/1 var(--mono); cursor: pointer;
  transition: opacity .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.people--on .people__btn { opacity: .45; }
.people--on .people__btn[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.people:hover .people__btn, .people:focus-within .people__btn { opacity: 1; }
.divider { width: 1px; height: 20px; background: var(--line); }

/* 28px whether or not a focus is active, so nothing below it moves */
.context { height: 28px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.context__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.context__clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--faint); text-decoration: underline;
}
.context__clear:hover { color: var(--ink); }

/* buttons ------------------------------------------------------------------- */
.btn {
  font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2);
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { border-color: var(--line-strong); color: var(--ink); }
/* a square button for a single mark: the theme toggle */
.btn--icon { width: 28px; min-height: 28px; padding: 0; justify-content: center; }
/* half-filled disc, drawn rather than set: no icon font, no glyph to be missing */
.theme-dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(to right, currentColor 0 50%, transparent 50% 100%);
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { color: #fff; border-color: var(--accent); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--hover); border-color: transparent; }
.btn--danger { color: var(--warn); }
.btn:disabled { opacity: .5; cursor: default; }

/* forms --------------------------------------------------------------------- */
.form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.form--inline { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
  font: inherit; font-size: 13px; color: var(--ink);
  padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
}
textarea { resize: vertical; }
.form__actions { display: flex; gap: 8px; }
.errors { margin: 0; padding-left: 18px; color: var(--warn); font-size: 13px; }
p.errors, div.errors { padding-left: 0; }
.empty { color: var(--faint); font-size: 13px; display: none; }
.projects:empty + .empty { display: block; }

/* projects overview --------------------------------------------------------- */
.projects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.project {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .2s ease;
}
.project:hover { border-color: var(--line-strong); }
.project__link { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.project__prefix { font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--faint); text-transform: uppercase; }
.project__name { font-size: 14px; font-weight: 500; }
.project__count { font: 400 11px/1 var(--mono); color: var(--faint); }
.project__actions { display: flex; gap: 4px; }

/* board --------------------------------------------------------------------- */
.workspace { display: block; }
.board { display: flex; flex-direction: column; gap: 20px; overflow-x: auto; padding-bottom: 28px; }
/* the sideways scrollbar is the one that sits under everything, so it steps
   back like the sidebar does and comes forward when the board is being used */
.board { scrollbar-color: transparent transparent; }
.board:hover, .board:focus-within { scrollbar-color: var(--line-strong) transparent; }
.board::-webkit-scrollbar-thumb { background: transparent; }
.board:hover::-webkit-scrollbar-thumb, .board:focus-within::-webkit-scrollbar-thumb {
  background: var(--line-strong); background-clip: content-box;
}

.board__head, .lane__columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 20px;
  min-width: 62rem; /* five readable columns; .board scrolls sideways */
}

.col-head { display: flex; align-items: center; gap: 8px; height: 32px; transition: opacity .2s ease; }
.col-head__name { flex: none; font-size: 13px; font-weight: 500; color: var(--ink-2); }
/* a column with nothing relevant in it steps back, but stays readable */
.col-head--quiet { opacity: .4; }
.column__count { font: 400 11px/1 var(--mono); color: var(--faint); }
/* a WIP limit is soft: over it the count goes warm, but a move still happens */
.column__count--exceeded { color: var(--warn); }

.lane { display: flex; flex-direction: column; gap: 10px; }
.lane__label { display: flex; align-items: baseline; gap: 8px; }

/* the disclosure control: chrome, so it is faint until the header is hovered,
   and the chevron itself is what turns rather than the button's hit area */
.lane__toggle {
  flex: none; align-self: center;
  width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--faint); cursor: pointer;
  opacity: .45; transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.lane__label:hover .lane__toggle, .lane__toggle:focus-visible { opacity: 1; }
.lane__toggle:hover { background: var(--hover); color: var(--ink-2); }
.lane__chevron { display: block; font-size: 10px; line-height: 1; transition: transform .15s ease; }
.lane--collapsed .lane__chevron { transform: rotate(-90deg); }
/* a folded lane is one row, so the 10px it keeps for its cells is dead space */
.lane--collapsed { gap: 0; }
.lane__title { font-size: 13px; font-weight: 500; color: var(--ink); }
a.lane__title:hover { color: var(--accent); }
.lane__state, .lane__count { font: 400 11px/1 var(--mono); color: var(--faint); }
.lane--unassigned .lane__title { color: var(--faint); }

/* min-height matters: an empty cell must still be a drop target */
.column__list {
  list-style: none; margin: 0; padding: 0;
  min-height: 46px;
  display: flex; flex-direction: column; gap: 10px;
}

.board__empty { display: block; }

/* card ---------------------------------------------------------------------- */
.card {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 14px 12px;
  transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--line-strong); }
.card:focus-within { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--line-strong); }
.card__body:focus-visible { outline: none; }
.card--editing { display: block; padding: 0; border: 0; background: none; }
.card--editing .form { margin: 0; }
.card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.card__row { display: flex; align-items: flex-start; gap: 8px; }
/* one line of the title, two reserved: every card on the board is the same
   height because a title can never wrap past the two lines it is given */
.card__title {
  font-size: 14px; line-height: 1.4; color: var(--ink); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 2.8em; overflow: hidden;
}

/* the meta row is the part that only appears when it is wanted. It is one
   fixed line -- a readiness badge, tags or assignee may clip rather than wrap,
   or the row itself would change a card's height */
.card__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 400 11px/1 var(--mono); color: var(--faint);
  height: 11px; overflow: hidden;
  opacity: 0; transition: opacity .2s ease;
}
.card__key { font: 500 11px/1 var(--mono); color: var(--faint); letter-spacing: .04em; }
.card__assignee { margin-left: auto; }
.card:hover .card__meta,
.card:focus-within .card__meta,
.card--selected .card__meta,
.card--match .card__meta { opacity: 1; }

/* the drag handle and the delete button are chrome: hidden until hovered */
.card__handle, .card__del { opacity: 0; transition: opacity .2s ease; }
.card:hover .card__handle, .card:focus-within .card__handle,
.card:hover .card__del, .card:focus-within .card__del { opacity: 1; }
.card__handle { color: var(--faint); cursor: grab; user-select: none; font-size: 12px; line-height: 1.4; }
.card__del {
  border: 0; background: none; cursor: pointer; color: var(--faint);
  font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: var(--radius-xs);
}
.card__del:hover { color: var(--warn); }

/* the exception that always matters: an unanswered question on a card. It is
   never dimmed separately and never hidden with the meta row. */
.card__flag { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-top: 6px; }

.card--ghost { opacity: .4; }
.card--chosen { border-color: var(--line-strong); box-shadow: 0 8px 24px -16px var(--shade); }
.card--selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* contextual dimming -------------------------------------------------------- */
/* Order matters: a selection outranks a person focus, so its rules come last
   and win at equal specificity. Hover always wins over both -- it is how you
   peek at a dimmed card without changing context -- hence the #board selector,
   whose id outranks every class rule here. */
.board--focused .card { opacity: calc(var(--dim) * .8); }
.board--focused .card--match { opacity: 1; }
.board--selecting .card { opacity: var(--dim); }
.board--selecting .card--selected { opacity: 1; }
.board:not(.board--selecting):not(.board--focused) .cell--done .card { opacity: .5; }
#board .card:hover, #board .card:focus-within { opacity: 1; }

/* type and readiness -------------------------------------------------------- */
/* There are no coloured chips: a type is metadata, so it reads as metadata. */
.type, .badge {
  font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); background: none; padding: 0; border-radius: 0;
}
.readiness { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.readiness--has-questions { color: var(--warn); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font: 400 11px/1 var(--mono); color: var(--faint); }

/* detail panel -------------------------------------------------------------- */
/* It floats over the right of the board rather than squeezing it: the board
   behind it is dimmed anyway, and nothing reflows when it opens. */
#panel { display: contents; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 20;
  width: 420px; max-width: 100vw; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -2px 0 6px var(--shade), -12px 0 32px var(--shade);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 24px;
}
/* the fields read as one definition list, so they sit closer than the sections */
.panel__fields { display: flex; flex-direction: column; gap: 14px; }
.panel__head { display: flex; align-items: center; gap: 10px; }
.panel__key { font: 500 12px/1 var(--mono); color: var(--faint); letter-spacing: .04em; }
.panel__close {
  margin-left: auto; width: 36px; height: 36px; border: 0; background: none; cursor: pointer;
  color: var(--faint); font-size: 18px; line-height: 1; border-radius: var(--radius-sm);
}
.panel__close:hover { color: var(--ink); background: var(--hover); }
.panel__title { font: 400 30px/1.15 var(--serif); cursor: pointer; }
.panel__desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; cursor: pointer; min-height: 1.2rem; }
.panel__desc--empty, .panel__title--empty { color: var(--faint); }
.panel__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; font-size: 13px; }
.panel__label { font: 400 13px/1.4 var(--sans); color: var(--faint); text-transform: none; letter-spacing: 0; }
.panel select, .panel input[type="text"] { width: 100%; }
.panel .errors { margin-top: 4px; }
.panel__check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.panel__check input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--accent); }
.panel__value { cursor: pointer; }
.panel__meta { font: 400 11px/1.6 var(--mono); color: var(--faint); display: flex; flex-direction: column; }
/* an open editor takes the whole width rather than the value column, and sits
   bare on the panel: the panel is already the surface, so no box around it */
.panel > .form, .panel__row > .form { grid-column: 1 / -1; }
.panel .form { border: 0; padding: 0; margin: 0; background: none; border-radius: 0; }

.panel__tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.panel__tab {
  font: inherit; font-size: 13px; cursor: pointer;
  border: 0; background: none; color: var(--faint);
  padding: 6px 10px 8px; border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.panel__tab:hover { color: var(--ink); }
.panel__tab--active { color: var(--ink); border-bottom-color: var(--accent); }
.panel__tab ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.panel__tab .form { margin: 0; }
.panel__tab .empty { display: block; margin: 0 0 14px; }

.comment { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.comment:last-child { border-bottom: 0; padding-bottom: 0; }
.comment__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comment__who { font-size: 13px; font-weight: 500; }
.comment__when { font: 400 11px/1 var(--mono); color: var(--faint); }
.comment__del {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--faint); font-size: 14px; line-height: 1; padding: 0 2px;
}
.comment__del:hover { color: var(--warn); }
.comment__body { font-size: 14px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

.activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.activity li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.activity li:last-child { border-bottom: 0; padding-bottom: 0; }
.activity__who { font-size: 13px; font-weight: 500; }
.activity__what { font-size: 13px; color: var(--ink-2); }
.activity__when { font: 400 11px/1 var(--mono); color: var(--faint); }

/* checklist and example map -------------------------------------------------- */
.checklist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist__count { font: 400 11px/1 var(--mono); color: var(--faint); margin-bottom: 10px; display: inline-block; }
.checkitem { display: flex; align-items: baseline; gap: 8px; }
.checkitem input[type="checkbox"], .em input[type="checkbox"] { transform: translateY(2px); accent-color: var(--accent); }
.checkitem__text { font-size: 13px; cursor: pointer; flex: 1; overflow-wrap: anywhere; }
.checkitem__del, .em__del {
  border: 0; background: none; cursor: pointer; color: var(--faint);
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.checkitem__del:hover, .em__del:hover { color: var(--warn); }
.checkitem--done .checkitem__text { color: var(--faint); text-decoration: line-through; }
.checkitem__text:hover, .em__text:hover { color: var(--accent); }

.em__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.em__title { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 0 0 10px; }
.em__section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.em { display: flex; align-items: baseline; gap: 8px; padding-left: 10px; border-left: 1px solid var(--line); }
.em--rule { border-left-color: var(--line-strong); }
.em--question { border-left-color: var(--warn); }
.em--example { border-left-color: var(--line); }
.em__examples { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0 16px; }
.em__text { font-size: 13px; cursor: pointer; flex: 1; overflow-wrap: anywhere; }
.em--resolved .em__text { color: var(--faint); text-decoration: line-through; }
.em__add { align-self: flex-start; font-size: 12px; min-height: 28px; }

/* backlog -------------------------------------------------------------------- */
.backlog { display: flex; flex-direction: column; gap: 28px; }
.bsection__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bsection__head h2 { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.bsection__head .btn { margin-left: auto; }
.bsection .empty { display: block; margin: 0 0 10px; }

.groups, .brows { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.group__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; flex-wrap: wrap; }
.group__key { font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--faint); }
.group__title { font-size: 14px; font-weight: 500; flex: 1; }
.group__count { font: 400 11px/1 var(--mono); color: var(--faint); }
.group__move {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent;
  color: var(--faint); cursor: pointer; font-size: 12px; line-height: 1; padding: 6px 8px;
}
.group__move:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.group__move:disabled { opacity: .35; cursor: default; }
.group__children { margin: 0; padding: 0 16px 0 28px; }
.group__children:empty { display: none; }
.group__add { display: flex; gap: 8px; padding: 0 16px 14px; }
.group .form { margin: 0 16px 14px; }

/* the disclosure control mirrors the board lane's: chrome, faint until the
   header is hovered, and the chevron turns rather than the button's hit area */
.group__toggle {
  flex: none; align-self: center;
  width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--faint); cursor: pointer;
  opacity: .45; transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.group__head:hover .group__toggle,
.group__toggle:focus-visible { opacity: 1; }
.group__toggle:hover { background: var(--hover); color: var(--ink-2); }
.group__chevron { display: block; font-size: 10px; line-height: 1; transition: transform .15s ease; }
.group--collapsed .group__chevron { transform: rotate(-90deg); }
/* a folded group is its header and its add row, so the children's gutter is dead space */
.group--collapsed .group__add { padding-top: 2px; }

.brow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .2s ease;
}
.brow:hover { border-color: var(--line-strong); }
.group__children .brow { background: none; border-color: transparent; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; }
.group__children li:last-child .brow { border-bottom: 0; }
.brow__body { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.brow__title { font-size: 14px; }
.brow__status { font: 400 11px/1 var(--mono); color: var(--faint); }
.brow select { font-size: 12px; padding: 5px 7px; }
.brow__del { border: 0; background: none; cursor: pointer; color: var(--faint); font-size: 14px; line-height: 1; padding: 0 4px; }
.brow__del:hover { color: var(--warn); }
.brow__confirm { font-size: 13px; color: var(--warn); }

/* members and settings -------------------------------------------------------- */
.members { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.members td { padding: 12px 8px; border-top: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
.members tr:first-child td { border-top: 0; }
.members td:last-child { text-align: right; }
.roles { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.role { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.role input[type="checkbox"] { accent-color: var(--accent); }
.add-member h2 { margin-bottom: 10px; }
.add-member input[type="search"] { width: 100%; max-width: 28rem; }
.search-results { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.search-result { border-bottom: 1px solid var(--line); padding: 10px 0; }
.search-result .form--inline { flex-wrap: wrap; gap: 10px 16px; }

.settings { display: flex; flex-direction: column; gap: 20px; }
.settings__nav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.settings__tab {
  padding: 6px 12px 10px; font-size: 13px; color: var(--faint);
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.settings__tab:hover { color: var(--ink); }
.settings__tab--active { color: var(--ink); border-bottom-color: var(--accent); }
.settings__section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.settings__section .form { border: 0; padding: 0; margin: 0; background: none; }
.settings__table { width: 100%; border-collapse: collapse; }
.settings__table td { padding: 10px 8px 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.settings__table tr:first-child td { border-top: 0; }
.settings__table td:first-child { width: 9rem; color: var(--ink-2); }
.settings__table td:last-child { text-align: right; }
.settings__table input[type="number"] { width: 7rem; }
.field__static { padding: 7px 0; color: var(--faint); font-size: 13px; }
.settings__danger { border-color: var(--warn); }
.settings__danger h2 { color: var(--warn); }
.settings__danger p { margin: 8px 0 14px; font-size: 13px; color: var(--ink-2); }

/* ticket detail --------------------------------------------------------------- */
.detail {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; margin: 0;
  font-size: 13px;
}
.detail dt { color: var(--faint); }
.detail dd { margin: 0; color: var(--ink); }

/* narrow ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .sidebar { opacity: 1; border-right: 0; border-bottom: 1px solid var(--line); }
  .page, .page--panel { padding: 20px 16px 28px; }
  .panel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}