/* AuraTrack base: reset, type, controls, the shared header, menus, dialogs, toast.
   Colours come from tokens.css only. Rounded cards carry no side accent stripe,
   and an accent outline is the same width on every edge. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.grow { flex: 1 1 auto; min-width: 0; }
.dot { color: var(--muted); }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-width: 0; }
.page { flex: 1 1 auto; overflow: auto; padding: 20px 24px 48px; container-type: inline-size; container-name: page; outline: none; }
.loading { color: var(--muted); padding: 24px; }

/* ----------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.btn-primary:hover { background: var(--blue-strong); border-color: var(--blue-strong); }
.btn-quiet { background: var(--surface); }
.hide-closed.is-on { background: var(--blue-wash); border-color: var(--blue); color: var(--blue-strong); }
.btn-ghost { background: var(--surface-2); border-color: var(--line); }
.btn-link { border-color: transparent; background: transparent; color: var(--blue); padding: 0 8px; }
.btn-link:hover { background: var(--blue-wash); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-icon { width: 40px; padding: 0; }
.btn-danger { color: var(--st-red-text); }
.btn[disabled] { opacity: .5; cursor: default; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; height: 38px; padding: 0 18px; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.is-on { background: var(--blue); color: var(--on-blue); }

.field { display: grid; gap: 6px; margin: 0 0 14px; }
.field > span { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 9px 12px; min-height: 40px;
}
.field textarea { resize: vertical; }
.form-error { color: var(--st-red-text); min-height: 1.4em; margin: 0 0 6px; }

.avatar {
  display: inline-grid; place-items: center; width: var(--s, 24px); height: var(--s, 24px); border-radius: 50%;
  background: var(--blue-wash); color: var(--blue-strong); font-weight: 700; font-size: calc(var(--s, 24px) * .46);
  flex: none;
}
.avatar-btn { border: 0; background: transparent; padding: 0; border-radius: 50%; }

.bar { display: block; height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.bar-sm { height: 6px; width: 90px; }

/* ----------------------------------------------------- status symbols */

.sym { flex: none; display: inline-block; vertical-align: middle; }
.tone-slate { color: var(--st-slate); }
.tone-blue { color: var(--st-blue); }
.tone-amber { color: var(--st-amber); }
.tone-orange { color: var(--st-orange); }
.tone-green { color: var(--st-green); }
.tone-red { color: var(--st-red); }
.tone-violet { color: var(--st-violet); }
.tone-teal { color: var(--st-teal); }
.tone-stone { color: var(--st-stone); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; border-radius: 7px; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.tint-slate { background: var(--st-slate-tint); color: var(--st-slate-text); }
.tint-blue { background: var(--st-blue-tint); color: var(--st-blue-text); }
.tint-amber { background: var(--st-amber-tint); color: var(--st-amber-text); }
.tint-orange { background: var(--st-orange-tint); color: var(--st-orange-text); }
.tint-green { background: var(--st-green-tint); color: var(--st-green-text); }
.tint-red { background: var(--st-red-tint); color: var(--st-red-text); }
.tint-violet { background: var(--st-violet-tint); color: var(--st-violet-text); }
.tint-teal { background: var(--st-teal-tint); color: var(--st-teal-text); }
.tint-stone { background: var(--st-stone-tint); color: var(--st-stone-text); }
.mark { display: inline-flex; flex: none; }
.mark-overdue { color: var(--mark-overdue); }
.mark-stale { color: var(--mark-stale); }

.li { flex: none; vertical-align: middle; }
.ticon { display: inline-grid; place-items: center; flex: none; width: var(--s, 24px); height: var(--s, 24px); border-radius: 6px; overflow: hidden; }
.ticon img { width: 100%; height: 100%; object-fit: contain; }
.ticon-line { color: var(--ink-2); }
.ticon-plain { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-soft); }

.who b { font-weight: 700; }
.who .acct { color: var(--muted); font-weight: 400; }
.who-none { color: var(--muted); font-style: italic; }
.who-lines { display: inline-grid; line-height: 1.2; }
.who-lines small { color: var(--muted); font-size: 12px; }

/* --------------------------------------------------------------- header */

.hdr { flex: none; background: var(--surface); border-bottom: 1px solid var(--line); }
.hdr-row1 { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; border-radius: 9px; }
.brand b { font-size: 22px; letter-spacing: -.01em; }
.brand img { border-radius: 8px; }
.sep { width: 1px; height: 30px; background: var(--line); flex: none; }
.crumb { font-size: 17px; color: var(--ink-2); }
.board-name { font-size: 25px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.allboards-wrap, .account-wrap { position: relative; }
.allboards { height: 40px; font-size: 15px; }
.search { position: relative; display: flex; align-items: center; gap: 8px; width: min(360px, 34vw); height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--blue-wash); }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.live i { width: 10px; height: 10px; border-radius: 50%; background: var(--st-slate); }
.live-online i { background: var(--st-green); }
.live-error i { background: var(--st-red); }
.live-wait i { background: var(--st-amber); }

.hdr-row2 { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; border-top: 1px solid var(--line-soft); }
.tabs { display: flex; align-items: stretch; gap: 8px; height: 100%; }
.tab { display: inline-flex; align-items: center; padding: 0 16px; font-size: 16px; font-weight: 500; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--blue-strong); font-weight: 650; border-bottom-color: var(--blue); }

.caption { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 14px 0; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); color: var(--ink-2); user-select: none; }
.caption-mark { border-radius: 5px; }
.caption-title { font-size: 13px; flex: 1; min-width: 0; }
.caption-undock { margin-left: auto; width: 28px; height: 26px; min-height: 0; padding: 0; }

.hdr-docked .hdr-row1-docked { height: auto; min-height: 56px; padding: 8px 14px; gap: 10px; flex-wrap: nowrap; }
.hdr-docked .hdr-row1-docked .allboards-wrap, .hdr-docked .hdr-row1-docked .live, .hdr-docked .hdr-row1-docked .btn { flex: none; }
.hdr-docked .board-name { font-size: 21px; }
.hdr-docked .hdr-row2 { height: 44px; padding: 0 10px; }
.hdr-docked .tab { padding: 0 12px; font-size: 15px; }
.hdr-docked .search-host { padding: 0 14px 10px; flex-basis: 100%; }
.hdr-docked .search-docked { width: 100%; }

/* A window narrower than the full header: the wordmark, the separators and the Live label give way so the board's name
   and the account button stay in view, down to the desktop window's 430 px minimum. The connection is still said by
   the dot's colour, its tooltip and the label read aloud. */
/* The search box gives up width first (shrink factor 50, down to 140 px), so a board name is shown whole while there is room for it. */
.search { flex: 0 50 min(360px, 34vw); min-width: 140px; }
/* The name does not shrink while the search can: shrinking by even a pixel puts an ellipsis in it. A very long name stops at what
   the row leaves after the brand, All boards, the search at its 140 px, Live and the account button. */
.hdr:not(.hdr-docked) .board-name { flex-shrink: 0; max-width: max(120px, calc(100vw - 640px)); }
@media (max-width: 900px) {
  .hdr:not(.hdr-docked) .hdr-row1 { gap: 10px; padding: 0 14px; }
  .hdr:not(.hdr-docked) .hdr-row1 .brand b, .hdr:not(.hdr-docked) .hdr-row1 .sep { display: none; }
  .hdr:not(.hdr-docked) .search { flex-basis: 220px; min-width: 110px; }
  .hdr:not(.hdr-docked) .hdr-row2 { padding: 0 10px; gap: 8px; }
  .hdr:not(.hdr-docked) .hide-closed .hc-label { display: none; }
  .hdr:not(.hdr-docked) .hide-closed { padding: 0 10px; }
  .hdr:not(.hdr-docked) .tab { padding: 0 12px; }
}
@media (max-width: 640px) {
  .hdr:not(.hdr-docked) .hdr-row1 { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 12px; row-gap: 8px; }
  .hdr:not(.hdr-docked) .search { order: 9; flex: 1 1 100%; }
  .hdr:not(.hdr-docked) .live-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hdr:not(.hdr-docked) .board-name { flex: 1 1 0; font-size: 21px; max-width: none; }
  .hdr:not(.hdr-docked) .hdr-row2 { flex-wrap: wrap; height: auto; min-height: 48px; }
  .hdr:not(.hdr-docked) .hdr-updated { order: 8; flex: 1 1 100%; margin: 0 0 6px 4px; font-size: 13px; }
  .hdr:not(.hdr-docked) .tab { padding: 0 9px; font-size: 15px; }
  .hdr:not(.hdr-docked) .seg button { padding: 0 10px; }
}

/* ---------------------------------------------------------------- menus */

.menu { position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; min-width: 330px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; }
.menu-account { left: auto; right: 0; min-width: 240px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 15px; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.is-current { background: var(--blue-wash); }
.menu-home { justify-content: space-between; border-bottom: 1px solid var(--line-soft); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.mi-name small.mi-updated { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.mi-name small.mi-updated.is-stale { color: var(--st-amber-text); }
.hdr-updated { color: var(--ink-2); font-size: 14px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-right: 4px; }
.hdr-updated.is-stale { color: var(--st-amber-text); font-weight: 600; }
.hdr-row-updated { padding: 0 14px 6px; margin-top: -4px; }
.hdr-row-updated .hdr-updated { display: block; font-size: 13px; margin: 0; }
.mi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mi-pct { width: 40px; text-align: right; color: var(--ink-2); font-size: 13.5px; }
.mi-check { width: 16px; color: var(--blue); }
.menu-who { display: grid; padding: 8px 12px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-who small { color: var(--muted); }
.menu-scrim { position: fixed; inset: 0; z-index: 40; }

.search-pop { position: fixed; z-index: 60; max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; }
.sr-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.sr-row:hover, .sr-row.is-first { background: var(--surface-2); }
.sr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sr-sub { color: var(--muted); font-size: 13px; }
.sr-none { padding: 12px; color: var(--muted); }

/* --------------------------------------------------------------- dialogs */

.dlg { width: min(480px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.dlg-wide { width: min(560px, calc(100vw - 32px)); }
.dlg::backdrop { background: var(--scrim); }
/* WebKitGTK draws the scrollbars of the boxes under a modal dialog over it; they are hidden while one is open. */
html:has(dialog[open]) *:not(dialog):not(dialog *) { scrollbar-width: none; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dlg-head h2 { font-size: 20px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 80; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Docked: the connection shows as a dot while it is fine, with the word kept for screen readers; any other state says its word. */
.hdr-docked .live-online .live-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand-mark { display: inline-flex; flex: none; }
.hdr-docked .hdr-row1-docked { gap: 8px; padding: 8px 12px; }
.hdr-docked .allboards { height: 40px; padding: 0 10px; font-size: 15px; gap: 6px; }
.hdr-docked .board-name { font-size: 20px; }
.hdr-docked .brand-mark img { width: 28px; height: 28px; }