/* ============================================================================
   MGProject — Moregate design system

   Colour comes from the wordmark: petrol carries every action, charcoal every
   word, and gold appears in exactly one role — the marker for "you are here".
   Barlow Condensed sets titles, eyebrows, table headers and status pills;
   Inter sets everything read as a sentence; issue keys sit in a monospace face
   because they are identifiers, not prose.
   ========================================================================= */

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

@font-face {
  /* Jost, a geometric sans in the Futura tradition - the same wide, circular
     letterforms the Moregate wordmark is drawn in. Self-hosted like the others;
     nothing is fetched from a foreign server at runtime. */
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-latin-600-normal.woff2') format('woff2');
}

:root {
  /* neutrals: a grey that sits under petrol without drifting blue */
  --n0:#FFFFFF; --n10:#FAFAFA; --n20:#F4F5F6; --n30:#E9EBED; --n40:#DCDFE3;
  --n50:#C3C8CE; --n70:#9BA3AC; --n200:#6B7480; --n400:#4E555E; --n500:#3F464E;
  --n800:#22272B;

  /* brand */
  /* the purple of the Moregate square, #50226B, with a deeper and a pale
     companion mixed from it. The variables keep their names: they are used in
     a hundred places, and renaming them would be a change with no effect. */
  --ax-petrol:#50226B; --ax-petrol-deep:#3A1850; --ax-petrol-soft:#F1EBF5;
  --ax-charcoal:#3B3F44; --ax-gold:#C7A24B; --ax-gold-soft:#F6EFDC;

  /* petrol replaces the blue the interface used to be built on */
  --blue:#50226B; --blue-hover:#652C86; --blue-light:#F1EBF5; --blue-dark:#3A1850;

  --green:#1F9D6B; --green-light:#E3F5EC; --green-dark:#0E6B47;
  --yellow:#C7A24B; --yellow-light:#F8F0DA; --yellow-dark:#7A5E12;
  --red:#D6453D; --red-light:#FBEAE9; --red-dark:#A32B24;
  --purple:#6B5BC4; --purple-light:#EDEAFA; --teal:#0E8FA8;
  --danger-bg:#A32B24; --danger-bg-hover:#C13A32; --danger-fg:#FFFFFF;

  --shadow-card:0 1px 2px rgba(34,39,43,.06);
  --shadow-raised:0 2px 8px rgba(34,39,43,.10);
  --shadow-overlay:0 12px 32px -8px rgba(34,39,43,.28);

  --radius:6px;
  --radius-lg:10px;
  --radius-pill:999px;
  --topnav-h:56px;
  --sidebar-w:248px;
  /* a line of text stays readable and a grid keeps sane proportions only up to
     a point; beyond this the content is centred instead of stretched */
  --content-max:1480px;
  --content-max-wide:1920px;

  --font:'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* headings and the brand in the logo's own idiom: wide, circular, a little
     spaced out. Barlow Condensed stays as a fallback for anything that still
     asks for it. */
  --font-display:'Jost', 'Barlow Condensed', 'Inter var', 'Segoe UI', sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --chart-grid:#E9EBED; --chart-label:#6B7480; --chart-guide:#9BA3AC;
  --chart-line:#007FA1; --chart-line-soft:#A8D9E5; --chart-neutral:#9BA3AC;
  color-scheme:light;
}

/* --- dark theme -------------------------------------------------------------
   The neutral ramp flips, petrol lifts so it stays legible on a dark surface,
   and gold keeps its one job as the position marker. */
:root[data-theme="dark"] {
  --n0:#191D21; --n10:#1F242A; --n20:#262C33; --n30:#333A42; --n40:#434C55;
  --n50:#5A646F; --n70:#77828E; --n200:#A0AAB4; --n400:#BAC3CB; --n500:#CED5DB;
  --n800:#EAEEF2;

  /* lifted for dark pages - the logo purple itself is too close to the
     background to read as an accent there */
  --ax-petrol:#B08BC9; --ax-petrol-deep:#CBB0DC; --ax-petrol-soft:#2A1C36;
  --ax-charcoal:#EAEEF2; --ax-gold:#D9B65F; --ax-gold-soft:#3A3018;

  --blue:#B08BC9; --blue-hover:#CBB0DC; --blue-light:#2A1C36; --blue-dark:#CBB0DC;
  --green:#3FBE8A; --green-light:#10301F; --green-dark:#7FDCB4;
  --yellow:#D9B65F; --yellow-light:#332913; --yellow-dark:#EBD9A2;
  --red:#EE6A62; --red-light:#3A1E1C; --red-dark:#F7A19B;
  --purple:#9B8DEA; --purple-light:#272242; --teal:#43B6CE;
  --danger-bg:#B23A32; --danger-bg-hover:#CB4C43; --danger-fg:#FFFFFF;

  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-raised:0 2px 8px rgba(0,0,0,.45);
  --shadow-overlay:0 12px 32px -8px rgba(0,0,0,.6);

  --chart-grid:#333A42; --chart-label:#A0AAB4; --chart-guide:#5A646F;
  --chart-line:#34ADCB; --chart-line-soft:#1C4C5C; --chart-neutral:#77828E;
  color-scheme:dark;
}

* { box-sizing:border-box; }
/* Author rules that set `display` would otherwise beat the user agent's
   [hidden] { display:none } - keep the attribute authoritative. */
[hidden] { display:none !important; }

html, body { height:100%; }
body {
  margin:0; font-family:var(--font); font-size:14px; line-height:1.5;
  color:var(--n800); background:var(--n10); -webkit-font-smoothing:antialiased;
}
button, input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
a { color:var(--ax-petrol); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:var(--font-mono); font-size:.92em; }
:focus-visible { outline:2px solid var(--ax-petrol); outline-offset:2px; border-radius:3px; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--n40); border-radius:5px;
  border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--n50); background-clip:content-box; }

h1, h2, h3, h4 { font-family:var(--font-display); letter-spacing:.015em;
  font-weight:500; }
h1 { letter-spacing:.03em; }

/* --- top navigation ------------------------------------------------------- */
.topnav {
  position:fixed; inset:0 0 auto 0; height:var(--topnav-h); z-index:400;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 20px; background:var(--n0); border-bottom:1px solid var(--n30);
}
.topnav-left, .topnav-right { display:flex; align-items:center; gap:6px; }
.brand { display:flex; align-items:center; gap:10px; margin-right:14px; color:var(--n800); }
.brand:hover { text-decoration:none; }
.brand-logo { height:26px; width:auto; display:block; flex:none; }
.brand-mark { height:26px; width:26px; display:none; flex:none; }
.brand-logo-dark { display:none !important; }
:root[data-theme="dark"] .brand-logo-light { display:none !important; }
:root[data-theme="dark"] .brand-logo-dark { display:block !important; }
.brand-name {
  font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.09em;
  color:var(--n500); text-transform:uppercase; padding-left:12px;
  border-left:1px solid var(--n40);
}

.topnav-links { display:flex; align-items:center; gap:2px; }
.nav-menu { position:relative; }
.nav-btn {
  background:none; border:0; padding:7px 11px; border-radius:var(--radius);
  color:var(--n400); font-weight:500; cursor:pointer;
}
.nav-btn:hover { background:var(--n20); color:var(--n800); }
.nav-btn.active { color:var(--ax-petrol); }
.caret { border:4px solid transparent; border-top-color:currentColor; display:inline-block;
  margin-left:5px; transform:translateY(2px); opacity:.7; }
.btn-create { margin-left:10px; }

.quick-search { position:relative; display:flex; align-items:center; }
.quick-search .icon { position:absolute; left:11px; width:15px; height:15px; fill:var(--n70); }
.quick-search input {
  width:230px; padding:7px 10px 7px 33px; border:1px solid var(--n40);
  border-radius:var(--radius-pill); background:var(--n20); transition:width .15s ease;
}
.quick-search input::placeholder { color:var(--n200); }
.quick-search input:focus {
  outline:none; border-color:var(--ax-petrol); background:var(--n0); width:320px;
  box-shadow:0 0 0 3px var(--ax-petrol-soft);
}
.search-results { width:440px; max-height:420px; overflow:auto; }

.theme-toggle {
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:0; border-radius:var(--radius); background:none; color:var(--n200); cursor:pointer;
}
.theme-toggle:hover { background:var(--n20); color:var(--n800); }
.theme-toggle svg { width:18px; height:18px; fill:currentColor; }
.theme-toggle .icon-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }

.avatar-btn { background:none; border:0; padding:2px; cursor:pointer; border-radius:50%; }
.avatar {
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; background:var(--ax-petrol); color:#fff; font-size:11px; font-weight:600;
  letter-spacing:.03em; flex:none; text-transform:uppercase;
}
.avatar.sm { width:24px; height:24px; font-size:10px; }
.avatar.lg { width:40px; height:40px; font-size:14px; }
.avatar.none { background:var(--n30); color:var(--n200); }
.avatar.xl { width:76px; height:76px; font-size:26px; }
/* a stored picture fills the same circle the initials would have */
img.avatar { object-fit:cover; background:var(--n20); }
.avatar-edit { display:flex; gap:18px; align-items:flex-start; }
.avatar-edit .hint { margin-top:8px; max-width:320px; }

/* --- dropdown ------------------------------------------------------------- */
.dropdown {
  position:absolute; top:calc(100% + 8px); left:0; min-width:250px; padding:6px;
  background:var(--n0); border:1px solid var(--n30); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-overlay); z-index:500; max-height:70vh; overflow:auto;
}
.dropdown-right { left:auto; right:0; }
.dropdown-title {
  padding:8px 10px 6px; font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--n200); text-transform:uppercase; letter-spacing:.1em;
}
.dropdown-item {
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0;
  background:none; text-align:left; cursor:pointer; color:var(--n800);
  border-radius:var(--radius); font-size:14px;
}
.dropdown-item:hover { background:var(--n20); text-decoration:none; }
.dropdown-item.selected { background:var(--ax-petrol-soft); color:var(--ax-petrol-deep); }
.dropdown-item small { display:block; color:var(--n200); font-size:12px; }
.dropdown-sep { height:1px; background:var(--n30); margin:6px 0; }

/* --- layout --------------------------------------------------------------- */
.layout { display:flex; padding-top:var(--topnav-h); height:100%; }
.sidebar {
  width:var(--sidebar-w); flex:none; background:var(--n0); border-right:1px solid var(--n30);
  height:calc(100vh - var(--topnav-h)); overflow-y:auto; padding:16px 12px 32px;
  position:sticky; top:var(--topnav-h);
}
.content {
  flex:1; min-width:0; height:calc(100vh - var(--topnav-h)); overflow:auto;
  padding:28px 32px 72px; background:var(--n10);
}
.content > * { max-width:var(--content-max); margin-left:auto; margin-right:auto; }
/* boards earn the extra width: their columns scroll sideways */
.content.flush { padding:20px 24px 32px; }
.content.flush > * { max-width:var(--content-max-wide); }
/* a table worked in for hours wants the room, not the margins */
.content.edge > * { max-width:none; }
.content.edge { padding-left:14px; padding-right:14px; }

.side-project { display:flex; gap:11px; align-items:center; padding:6px 8px 14px; }
.project-avatar {
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:16px; flex:none;
}
.side-project b { display:block; font-size:14px; line-height:1.25; }
.side-project small {
  color:var(--n200); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  font-family:var(--font-display); font-weight:600;
}

/* the gold rail is the one place gold appears: it marks where you are */
.side-link {
  display:flex; align-items:center; gap:11px; padding:8px 11px; margin-bottom:1px;
  border-radius:var(--radius); color:var(--n400); font-weight:500; cursor:pointer;
  border:0; background:none; width:100%; text-align:left;
  border-left:3px solid transparent;
}
.side-link:hover { background:var(--n20); text-decoration:none; color:var(--n800); }
.side-link.active {
  background:var(--ax-petrol-soft); color:var(--ax-petrol-deep); font-weight:600;
  border-left-color:var(--ax-gold);
}
/* a line above each heading but the first: it separates the groups without
   adding a second kind of element to read */
#sidebar .side-heading + .side-link ~ .side-heading,
#sidebar .side-link + .side-heading {
  border-top:1px solid var(--n30); padding-top:14px; margin-top:12px;
}

.side-heading {
  padding:16px 11px 6px; font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--n200); text-transform:uppercase; letter-spacing:.1em;
}
.side-icon { width:16px; height:16px; fill:currentColor; flex:none; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:7px 14px; border:1px solid var(--n40); border-radius:var(--radius);
  background:var(--n0); color:var(--n500); font-weight:500; cursor:pointer;
  white-space:nowrap; transition:background .12s ease, border-color .12s ease;
}
.btn:hover { background:var(--n20); border-color:var(--n50); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn:disabled:hover { background:var(--n0); border-color:var(--n40); }
.btn-primary { background:var(--ax-petrol); border-color:var(--ax-petrol); color:#fff; }
.btn-primary:hover { background:var(--blue-hover); border-color:var(--blue-hover); }
.btn-primary:disabled:hover { background:var(--ax-petrol); border-color:var(--ax-petrol); }
/* Buttons carry a surface and a border everywhere - the look the system
   settings always had. btn-subtle only lowers the weight of the label, it no
   longer strips the button of its shape; anything new should simply use .btn. */
.btn-subtle { color:var(--n400); }
.btn-subtle:hover { background:var(--n20); border-color:var(--n50); color:var(--n800); }
/* the one exception: a bare icon that sits inside another control */
.btn-icon { background:transparent; border-color:transparent; padding:3px 6px; }
.btn-icon:hover { background:var(--n20); border-color:transparent; }
/* the close cross of the issue panel is a bare icon, not a labelled button */
.panel-close { background:transparent; border-color:transparent; }
.panel-close:hover { background:var(--n20); border-color:transparent; }
.btn-danger { background:var(--danger-bg); border-color:var(--danger-bg); color:var(--danger-fg); }
.btn-danger:hover { background:var(--danger-bg-hover); border-color:var(--danger-bg-hover); }
.btn-sm { padding:3px 9px; font-size:12px; }

/* --- forms ---------------------------------------------------------------- */
.field { margin-bottom:18px; }
.field > label {
  display:block; font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--n400); margin-bottom:6px;
}
.input, select.input, textarea.input {
  width:100%; padding:8px 11px; min-height:38px;
  border:1px solid var(--n40); border-radius:var(--radius);
  background:var(--n0); color:var(--n800);
}
.input::placeholder { color:var(--n200); }
.input:hover { border-color:var(--n50); }
.input:focus {
  outline:none; border-color:var(--ax-petrol); box-shadow:0 0 0 3px var(--ax-petrol-soft);
}
select.input { cursor:pointer; }
textarea.input { min-height:104px; resize:vertical; line-height:1.55; }
input[type="color"].input { padding:3px; min-height:38px; cursor:pointer; }
.hint { font-size:12.5px; color:var(--n200); margin-top:6px; line-height:1.5; }
/* two even columns; a hidden field simply drops out without leaving a gap */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
.form-grid > .span-2 { grid-column:1 / -1; }
.form-grid > * { min-width:0; }
.form-grid .field { margin-bottom:16px; }
.row { display:flex; gap:14px; }
.row > * { flex:1; min-width:0; }
.people-row { display:flex; align-items:center; gap:9px; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--ax-petrol); }

/* --- status vocabulary ---------------------------------------------------- */
.lozenge {
  display:inline-block; padding:2px 9px; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; line-height:17px;
  background:var(--n30); color:var(--n500); white-space:nowrap;
}
.lozenge.todo { background:var(--n30); color:var(--n500); }
.lozenge.inprogress { background:var(--blue-light); color:var(--blue-dark); }
.lozenge.done { background:var(--green-light); color:var(--green-dark); }
.tag {
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px;
  border-radius:var(--radius-pill); background:var(--n20); border:1px solid var(--n30);
  color:var(--n400); font-size:12px; margin:0 4px 4px 0;
}
.chip {
  border-radius:var(--radius-pill); padding:0 9px; font-family:var(--font-display);
  font-size:12px; font-weight:700; line-height:19px; color:var(--n0);
}
.chip.todo { background:var(--n70); }
.chip.inprogress { background:var(--ax-petrol); }
.chip.done { background:var(--green); }
.chip-group { display:flex; gap:4px; }
.project-chip {
  display:inline-block; padding:0 6px; border-radius:4px; font-family:var(--font-display);
  font-size:12px; font-weight:700; letter-spacing:.05em; color:#fff; line-height:17px;
  flex:none;
}

.type-icon, .prio-icon { width:16px; height:16px; border-radius:4px; flex:none; }
.type-icon { display:inline-flex; align-items:center; justify-content:center; }
.type-icon svg { width:11px; height:11px; fill:#fff; }
.type-icon svg [stroke] { stroke:#fff; }
.prio-icon svg { width:14px; height:14px; }

/* --- page header ---------------------------------------------------------- */
.page-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  margin-bottom:22px; flex-wrap:wrap;
}
.page-head h1 {
  font-size:26px; margin:2px 0 4px; font-weight:700; line-height:1.15;
}
/* the eyebrow above a title: where you are, in the wordmark's voice */
.breadcrumb {
  font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:.06em;
  color:var(--n200); text-transform:uppercase; display:flex; align-items:center;
  gap:7px; flex-wrap:wrap;
}
.breadcrumb a { color:var(--n200); }
.breadcrumb a:hover { color:var(--ax-petrol); }
.breadcrumb code { text-transform:none; letter-spacing:0; }
/* a line of explanation under the title is prose, not an eyebrow */
.page-head h1 ~ .breadcrumb {
  text-transform:none; letter-spacing:.01em; font-family:var(--font);
  font-weight:400; font-size:13px;
}
.head-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.empty {
  padding:44px 24px; text-align:center; color:var(--n200); background:var(--n0);
  border-radius:var(--radius-lg); border:1px dashed var(--n40);
}
.empty b { display:block; color:var(--n500); margin-bottom:6px; font-size:15px;
  font-family:var(--font-display); font-weight:600; }

/* --- board ---------------------------------------------------------------- */
.board-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.board-toolbar .input { min-height:34px; padding:5px 10px; }
.avatar-filter { display:flex; }
.avatar-filter .avatar { margin-left:-7px; border:2px solid var(--n0); cursor:pointer;
  transition:transform .1s ease; }
.avatar-filter .avatar:hover { transform:translateY(-2px); }
.avatar-filter .avatar.dim { opacity:.3; }
.board-columns { display:flex; gap:12px; align-items:flex-start; overflow-x:auto;
  padding-bottom:16px; }
.board-col {
  flex:1 1 258px; min-width:240px; max-width:340px; background:var(--n20); border-radius:var(--radius-lg);
  padding:10px; display:flex; flex-direction:column; min-height:140px;
}
.board-col.over { background:var(--ax-petrol-soft); }
.board-col.wip-exceeded { background:var(--red-light); }
/* no workflow on this board reaches this status: dropping here would be refused */
.board-col.unreachable { opacity:.55; background:repeating-linear-gradient(135deg,
  var(--n20), var(--n20) 8px, var(--n30) 8px, var(--n30) 16px); }
.board-col.unreachable .board-col-head { color:var(--n200); }
.board-col-head {
  display:flex; align-items:center; justify-content:space-between; padding:2px 6px 12px;
  font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--n400);
  text-transform:uppercase; letter-spacing:.09em;
}
.board-col-head .count {
  font-weight:700; background:var(--n30); color:var(--n500); border-radius:var(--radius-pill);
  min-width:22px; text-align:center; padding:0 7px;
}
.board-col-body { display:flex; flex-direction:column; gap:8px; min-height:40px; }

.card {
  background:var(--n0); border:1px solid var(--n30); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:11px 12px; cursor:pointer;
  border-left:3px solid transparent; transition:box-shadow .12s ease;
}
.card:hover { box-shadow:var(--shadow-raised); }
.card.dragging { opacity:.4; }
.card-summary { line-height:1.45; margin-bottom:9px; word-break:break-word; }
.card-epic {
  display:inline-block; font-family:var(--font-display); font-size:12px; font-weight:600;
  letter-spacing:.05em; padding:1px 8px; border-radius:var(--radius-pill);
  color:#fff; margin-bottom:7px; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.card-labels { margin-bottom:4px; }
.card-foot { display:flex; align-items:center; gap:7px; }
.card-key { font-family:var(--font-mono); font-size:12px; color:var(--n200); }
.card-key.done { text-decoration:line-through; }
.card-foot .spacer { flex:1; }
.points {
  /* inline-block, or the chip collapses around a short value and the minimum
     width never applies - a single digit then looks like nothing at all */
  display:inline-block;
  background:var(--n20); border:1px solid var(--n30); color:var(--n500);
  border-radius:var(--radius-pill); padding:0 8px; font-size:11px; font-weight:600;
  line-height:18px; min-width:26px; text-align:center;
}
.card-meta { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--n200); }

/* --- backlog -------------------------------------------------------------- */
.backlog-group {
  margin-bottom:16px; border:1px solid var(--n30); border-radius:var(--radius-lg);
  background:var(--n0); overflow:hidden;
}
.backlog-head {
  display:flex; align-items:center; gap:12px; padding:12px 14px; flex-wrap:wrap;
  background:var(--n20); border-bottom:1px solid transparent;
}
.backlog-head.open { border-bottom-color:var(--n30); }
/* a folded sprint keeps only its header, so a board with five of them still
   fits on a screen */
.backlog-head[data-fold-sprint] { cursor:pointer; }
.backlog-group.sprint-folded > .backlog-list,
.backlog-group.sprint-folded > .inline-create { display:none; }

/* The head of a row is a grid too, so the key and the summary of every row start
   at the same place - a missing project chip or a short key used to shift the
   whole line. */
.row-head {
  display:grid; align-items:center; gap:8px;
  /* the project chip needs room for a key of four or five letters plus its icon;
     at 38px the text ran into the icon */
  grid-template-columns:74px 16px 74px;
}
.row-head .head-project, .row-head .head-type {
  display:flex; align-items:center; justify-content:flex-start; min-width:0;
}
.row-head .head-project .card-key { max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.row-head .key { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* a tree row carries no project chip, so that column goes away with it */
.backlog-row.tree .row-head { grid-template-columns:16px 74px; }
.backlog-row.tree .row-head .head-project { display:none; }
.backlog-row .summary {
  /* the summary takes what is left, so everything after it keeps its place */
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
/* the epic in a column of its own, right before the tail: otherwise it hangs off
   the end of the summary and no two rows agree on where it starts */
.backlog-row > .card-epic {
  /* centred in its fixed column: left aligned, a short epic name sat alone at the
     edge of an otherwise empty chip */
  flex:0 0 160px; max-width:160px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-align:center;
}
.backlog-row > .tag.disturbance { flex:0 0 auto; }

/* The tail of a row is a grid of its own with fixed widths: a row carries a
   varying number of chips before it, so a grid over the whole row cannot line
   anything up - this one can, and it always sits at the right edge. */
.row-tail {
  margin-left:auto; display:grid; align-items:center; gap:8px;
  /* wide enough for the longest status this instance knows - "Splitted to next
     sprint" - so no lozenge is ever cut and all of them start at one line */
  /* estimate, status, assignee, participants, menu. The participants slot was
     a fifth item in a four column grid, which put it on a line of its own -
     hence the row growing to two. 44px holds two small faces or one and a
     count, and the status column gives up the width for it. */
  /* estimate, status, assignee, participants, menu. The participants slot takes
     the width the summary can spare: the summary is elastic and was claiming
     more than it needs, so 92px here costs nothing anybody reads. */
  grid-template-columns:62px 150px 26px 104px 26px;
}
.row-tail .tail-status { display:flex; justify-content:flex-start; min-width:0; }
.row-tail .tail-status .lozenge { white-space:nowrap; }
.backlog-head h3 { margin:0; font-size:16px; font-weight:700; display:flex;
  align-items:center; gap:8px; }
.backlog-head .meta { color:var(--n200); font-size:12.5px; }
.backlog-head .spacer { flex:1; }
.backlog-list { list-style:none; margin:0; padding:0; background:var(--n0); }
.backlog-list.over, .backlog-group.over .backlog-list { background:var(--ax-petrol-soft); }
.backlog-row {
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-bottom:1px solid var(--n30); cursor:pointer;
}
.backlog-row:last-child { border-bottom:0; }
/* the headings are a row without an issue behind them: no hover, no pointer,
   and small enough to stay out of the way of what they label */
.backlog-row.headings {
  cursor:default; padding-top:5px; padding-bottom:5px; background:var(--n10);
  font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--n200); font-family:var(--font-display);
}
.backlog-row.headings:hover { background:var(--n10); }
.backlog-row.headings .row-tail > span { overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.backlog-row:hover { background:var(--n20); }
.backlog-row.dragging { opacity:.4; }
.backlog-row .summary { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.backlog-row .key { font-family:var(--font-mono); color:var(--n200); font-size:12px;
  min-width:76px; }
.backlog-empty { padding:18px; text-align:center; color:var(--n200); font-size:13px;
  border:1px dashed var(--n40); margin:10px; border-radius:var(--radius); }
.inline-create { display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--n30);
  background:var(--n10); }
.inline-create .input { flex:1; min-height:34px; padding:5px 10px; }
.inline-create select.input { flex:none; }

/* --- tables --------------------------------------------------------------- */
.issue-table { width:100%; border-collapse:collapse; background:var(--n0); }
.issue-table th {
  text-align:left; font-family:var(--font-display); font-size:13px; color:var(--n200);
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:10px 12px;
  border-bottom:1px solid var(--n30); position:sticky; top:0; background:var(--n20);
  z-index:1; white-space:nowrap; cursor:pointer;
}
.issue-table td { padding:10px 12px; border-bottom:1px solid var(--n30); vertical-align:middle; }
.issue-table tbody tr:last-child td { border-bottom:0; }
.issue-table tr { cursor:pointer; }
.issue-table tbody tr:hover { background:var(--n20); }
.issue-table tr.selected { background:var(--ax-petrol-soft); }
.issue-table .nowrap { white-space:nowrap; }
.table-wrap { border:1px solid var(--n30); border-radius:var(--radius-lg); overflow:auto;
  max-height:calc(100vh - 280px); background:var(--n0); }

.jql-bar { display:flex; gap:8px; margin-bottom:14px; position:relative; }
.jql-suggest { top:calc(100% + 4px); left:0; right:auto; min-width:340px; max-height:300px; }
.jql-suggest .dropdown-item { padding:6px 10px; }
.jql-suggest code { font-size:13px; }
.jql-suggest small { color:var(--n200); font-size:11px; }
.jql-bar .input { font-family:var(--font-mono); font-size:13px; }
.jql-error { color:var(--red-dark); background:var(--red-light); padding:11px 14px;
  border-radius:var(--radius); margin-bottom:12px; font-size:13px;
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent); }

/* --- issue panel ---------------------------------------------------------- */
.panel-backdrop { position:fixed; inset:0; background:rgba(34,39,43,.4); z-index:600; }
.issue-panel {
  position:fixed; top:0; right:0; bottom:0; width:min(960px, 94vw); background:var(--n0);
  z-index:610; box-shadow:var(--shadow-overlay); display:flex; flex-direction:column;
}
.panel-head {
  display:flex; align-items:center; gap:9px; padding:14px 22px;
  border-bottom:1px solid var(--n30); background:var(--n10);
}
.panel-head .spacer { flex:1; }
/* A band of the status colour right under the header: the state of an issue is
   the first thing anybody wants to know, and in a window of its own there is no
   board around it to say so. */
.status-stripe { height:4px; flex:none; background:var(--n70); }
.status-stripe.todo { background:var(--n200); }
.status-stripe.inprogress { background:var(--ax-petrol); }
.status-stripe.done { background:var(--green); }
/* the status button lives in the header now, at its right end */
.panel-head .status-menu { margin-left:8px; }
.panel-head .status-dropdown { right:0; left:auto; }

.panel-body {
  flex:1; overflow:auto; padding:24px 26px 64px; display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(300px, 25%, 460px);
  gap:0 32px; align-items:start;
  grid-template-areas:"top top" "main side";
}
/* Description and release description share the height of the details panel,
   half each. The block is a fixed size on purpose: a long text scrolls inside
   its field instead of pushing everything below it down, so attachments and
   comments always start in the same place - epic or not, long text or short. */
/* the description folds away; the block keeps its grid so the details column
   beside it does not jump when it does */
/* both texts in one cell, each with a small tag so they stay tellable apart */
/* the entries can be dragged into another order; the two board entries sit
   indented under Sprints and travel with it */
.side-link[draggable="true"] { cursor:pointer; }
.side-link.dragging { opacity:.45; }
.side-link.side-sub {
  padding-left:34px; font-size:13px; color:var(--n300);
}
.side-link.side-sub .side-icon { width:12px; height:12px; opacity:.75; }
#side-sortable { display:block; }

/* an issue on its way into another epic */
#s-body tr[data-move-key] { cursor:grab; }
#s-body tr.dragging { opacity:.45; }
#s-body tr.drop-into td { background:var(--ax-petrol-10, #E6F3F7); box-shadow:inset 0 0 0 1px var(--ax-petrol); }

/* the bell shows its state: struck through when off */
#notify-toggle .icon-bell-on { display:none; }
#notify-toggle.notify-on .icon-bell-on { display:block; }
#notify-toggle.notify-on .icon-bell-off { display:none; }
#notify-toggle.notify-on { color:var(--ax-petrol); }

.s-desc-both { display:flex; flex-direction:column; gap:2px; }
.s-desc-part { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.desc-toggle {
  display:flex; align-items:center; gap:6px; background:none; border:0; padding:0;
  cursor:pointer; font:inherit; color:inherit; text-align:left;
}
.desc-toggle:hover { color:var(--ax-petrol); }
.desc-block.desc-collapsed { height:auto; grid-template-rows:auto auto auto 1fr; }
.desc-block.desc-collapsed > .desc-body[data-field="description"] { display:none; }

.desc-block {
  height:var(--desc-block-height, 680px);
  display:grid; grid-template-rows:auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap:6px 0; margin-bottom:22px;
}
.desc-block .desc-body { overflow:auto; height:100%; margin:0; }
.desc-block .section-label { margin:10px 0 0; }
.desc-block .section-label:first-child { margin-top:0; }

/* Only the title and the status run the full width. The description sits in the
   left column - a little under three quarters - and the details start level with
   it rather than below, where they used to need scrolling to reach. */
/* the headline is only the title now, so it needs less room beneath it */
.issue-top { grid-area:top; margin-bottom:14px; }
.issue-main { grid-area:main; min-width:0; }
.issue-side { grid-area:side; }
@media (max-width:900px) {
  /* A band of the status colour right under the header: the state of an issue is
   the first thing anybody wants to know, and in a window of its own there is no
   board around it to say so. */
.status-stripe { height:4px; flex:none; background:var(--n70); }
.status-stripe.todo { background:var(--n200); }
.status-stripe.inprogress { background:var(--ax-petrol); }
.status-stripe.done { background:var(--green); }
/* the status button lives in the header now, at its right end */
.panel-head .status-menu { margin-left:8px; }
.panel-head .status-dropdown { right:0; left:auto; }

.panel-body { grid-template-columns:1fr; grid-template-areas:"top" "side" "main"; }
  .issue-side { margin-bottom:24px; }
}
.issue-headline {
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  margin-bottom:18px;
}
.issue-headline .status-menu { flex:none; }
.issue-title { font-size:26px; font-weight:700; margin:0; line-height:1.2; flex:1; }
.issue-top .section-label { margin-top:0; }
.issue-title[contenteditable]:focus, .editable:focus { outline:none; background:var(--n0);
  box-shadow:0 0 0 3px var(--ax-petrol-soft); border-radius:var(--radius); }
.editable { padding:5px 7px; margin:-5px -7px; border-radius:var(--radius); cursor:text; }
.editable:hover { background:var(--n20); }
.section-label {
  font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--n400); margin:24px 0 8px;
}
.desc-body { line-height:1.65; white-space:pre-wrap; min-height:44px; color:var(--n800); }
.desc-body:empty::before { content:"Add a description…"; color:var(--n200); }

.detail-card { border:1px solid var(--n30); border-radius:var(--radius-lg); overflow:hidden; }
.detail-card h4 {
  margin:0; padding:10px 14px; font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--n400); border-bottom:1px solid var(--n30);
  background:var(--n20);
}
.detail-grid { display:grid; grid-template-columns:104px 1fr; gap:9px 12px; padding:14px;
  align-items:center; font-size:13px; }
.detail-grid > .k { color:var(--n200); font-size:12px; font-weight:500; }
.detail-grid .read-only { padding:5px 7px; color:var(--n800); }
.detail-grid select, .detail-grid input { width:100%; padding:5px 7px;
  border:1px solid transparent; border-radius:var(--radius); background:transparent; }
.detail-grid select:hover, .detail-grid input:hover { background:var(--n20); }
.detail-grid select:focus, .detail-grid input:focus { outline:none;
  border-color:var(--ax-petrol); background:var(--n0);
  box-shadow:0 0 0 3px var(--ax-petrol-soft); }

.tabs { display:flex; gap:2px; border-bottom:1px solid var(--n30); margin:28px 0 14px; }
.tab {
  padding:8px 12px; border:0; background:none; cursor:pointer; color:var(--n200);
  font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover { color:var(--n800); }
.tab.active { color:var(--ax-petrol-deep); border-bottom-color:var(--ax-gold); }

.comment { display:flex; gap:11px; margin-bottom:18px; }
.comment .body { flex:1; }
.comment .who { font-weight:600; margin-right:8px; }
.comment .when { color:var(--n200); font-size:12px; }
.comment .text { margin-top:5px; line-height:1.6; white-space:pre-wrap; }
.comment .actions { margin-top:6px; display:flex; gap:10px; }
.comment .actions button { background:none; border:0; color:var(--n200); font-size:12px;
  cursor:pointer; padding:0; font-weight:600; }
.comment .actions button:hover { text-decoration:underline; color:var(--ax-petrol); }
.history-row { display:flex; gap:11px; padding:10px 0; border-bottom:1px solid var(--n30);
  font-size:13px; }
.history-row:last-child { border-bottom:0; }
.history-row .when { color:var(--n200); font-size:12px; }
.subtask-row { display:flex; align-items:center; gap:9px; padding:8px 10px;
  border:1px solid var(--n30); border-radius:var(--radius); margin-bottom:6px; cursor:pointer; }
/* the row is an <a> now, so it has to be told not to look like one */
.subtask-row, .subtask-row:hover { text-decoration:none; color:inherit; }

.subtask-row:hover { background:var(--n20); border-color:var(--n40); }
.progress { height:6px; background:var(--n30); border-radius:var(--radius-pill);
  overflow:hidden; }
.progress > span { display:block; height:100%; background:var(--green); }

/* --- attachments ---------------------------------------------------------- */
.attachments { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.attachment {
  display:flex; align-items:center; gap:12px; padding:9px 11px;
  border:1px solid var(--n30); border-radius:var(--radius); background:var(--n0);
}
.attachment:hover { border-color:var(--n40); }
.attachment img { width:52px; height:52px; object-fit:cover; border-radius:var(--radius);
  display:block; background:var(--n20); }
.attachment-icon {
  width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius); background:var(--n20); border:1px solid var(--n30);
  font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--n200);
}
.attachment-meta { flex:1; min-width:0; }
.attachment-meta a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:500; }
.attachment-meta small { color:var(--n200); font-size:12px; }
.dropzone {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1px dashed var(--n40); border-radius:var(--radius); background:var(--n10);
}
.dropzone.over { border-color:var(--ax-petrol); background:var(--ax-petrol-soft); }

/* --- gantt ----------------------------------------------------------------- */
.gantt { display:flex; border:1px solid var(--n30); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--n0); }
.gantt-names { flex:none; width:320px; border-right:1px solid var(--n30); }
.gantt-head { height:38px; display:flex; align-items:center; padding:0 12px;
  background:var(--n20); border-bottom:1px solid var(--n30);
  font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--n200); }
.gantt-name { height:30px; display:flex; align-items:center; gap:7px; padding-right:10px;
  border-bottom:1px solid var(--n30); font-size:13px; overflow:hidden; white-space:nowrap; }
.gantt-name span { overflow:hidden; text-overflow:ellipsis; }
.gantt-scroll { flex:1; overflow-x:auto; }
.gantt-scale { position:relative; height:38px; background:var(--n20);
  border-bottom:1px solid var(--n30); }
.gantt-day { position:absolute; top:0; width:26px; height:38px; text-align:center;
  font-size:10px; color:var(--n200); border-left:1px solid var(--n30); padding-top:4px; }
.gantt-day b { display:block; font-family:var(--font-display); font-size:10px;
  letter-spacing:.06em; color:var(--n400); }
.gantt-day.weekend { background:var(--n30); }
.gantt-day.today { background:var(--ax-petrol-soft); color:var(--ax-petrol-deep); }
.gantt-rows { position:relative; }
.gantt-row { position:relative; height:30px; border-bottom:1px solid var(--n30); }
.gantt-cell { position:absolute; top:0; bottom:0; width:26px; border-left:1px solid var(--n30); }
.gantt-cell.today { background:var(--ax-petrol-soft); }
.gantt-bar { position:absolute; top:4px; height:22px; border-radius:5px; cursor:grab;
  display:flex; align-items:center; padding:0 6px; color:#fff; font-size:11px;
  background:var(--n70); user-select:none; }
.gantt-bar.inprogress { background:var(--ax-petrol); }
.gantt-bar.done { background:var(--green); }
.gantt-bar.locked { cursor:default; opacity:.85; }
.gantt-bar.dragging { opacity:.7; }
.gantt-label { font-family:var(--font-mono); font-size:11px; pointer-events:none;
  overflow:hidden; white-space:nowrap; }
.gantt-handle { position:absolute; top:0; bottom:0; width:7px; cursor:ew-resize; }
.gantt-handle.left { left:0; } .gantt-handle.right { right:0; }
/* summary of everything below an epic, a group or a project */
.gantt-rollup { position:absolute; top:12px; height:6px; border-radius:3px;
  background:var(--n200); opacity:.55; }
/* an unscheduled row invites a click */
.gantt-row[data-plan] { cursor:copy; }
.gantt-row[data-plan]:hover { background:var(--ax-petrol-soft); }
.gantt-bar:not(.locked):hover .gantt-handle { background:rgba(255,255,255,.4); }

/* --- structure grid -------------------------------------------------------- */
.structure-grid td { padding:6px 12px; }
.s-cell { display:flex; align-items:stretch; gap:0; min-height:26px; }
/* every level draws its own guide, so project → epic → issue → sub-task reads
   as a staircase instead of a few pixels of padding */
.s-guide { flex:none; width:26px; position:relative; }
.s-guide::before {
  content:""; position:absolute; left:11px; top:-7px; bottom:-7px;
  border-left:1px solid var(--n40);
}
.s-guide.last::after {
  content:""; position:absolute; left:11px; top:50%; width:11px;
  border-top:1px solid var(--n40);
}
.s-twisty { display:flex; align-items:center; justify-content:center; border:0;
  background:none; cursor:pointer; color:var(--n200); width:20px; flex:none;
  padding:0; font-size:12px; }
.s-twisty.empty { cursor:default; }
/* closed rows read as closed: filled marker plus the number of hidden rows */
.s-twisty.closed { color:var(--ax-petrol); font-weight:700; }
.s-twisty.open { color:var(--n200); }
.s-hidden {
  align-self:center; margin-left:8px; background:var(--n20); border:1px solid var(--n30);
  color:var(--n200); border-radius:var(--radius-pill); padding:0 7px; font-size:11px;
  font-weight:600; line-height:17px;
}
.structure-grid tr:hover .s-hidden { background:var(--n30); }
.side-project-row { display:flex; align-items:center; gap:2px; }
.side-project-row .side-link { flex:1; min-width:0; }
.side-gear { display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:var(--radius); color:var(--n200); flex:none; }
.side-gear:hover { background:var(--n20); color:var(--ax-petrol); text-decoration:none; }
.s-label { display:flex; align-items:center; padding-left:4px; }
.s-symbol { display:flex; align-items:center; padding-left:2px; }
.s-status { border:0; background:none; padding:0; cursor:pointer; }
.backlog-row .row-menu { opacity:0; padding:2px 8px; line-height:1; }
.project-icon { width:20px; height:20px; border-radius:5px; object-fit:cover;
  flex:none; vertical-align:-5px; }
.project-icon.lg { width:44px; height:44px; border-radius:10px; }
/* an empty text area should say what belongs in it */
/* A window holding a single issue: no navigation, no sidebar, and the panel
   fills it instead of sliding in from the side. */
body.bare-window .topnav,
body.bare-window #sidebar,
body.bare-window #content { display:none; }
body.bare-window { overflow:hidden; }
body.bare-window .app-shell, body.bare-window main { display:contents; }
body.bare-window .panel-backdrop { position:fixed; inset:0; background:none;
  z-index:auto; display:block; }
body.bare-window #issue-panel { position:fixed; inset:0; width:100%; max-width:none;
  height:100vh; box-shadow:none; border-left:0; animation:none; }
body.bare-window .panel-close { display:none; }

#refresh-btn.spinning svg { animation:spin .6s linear; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* During a redraw the paint is held for a frame: without it the
   swap is visible as a twitch. */
body.refreshing #content { visibility:hidden; }
body.refreshing * { animation:none !important; transition:none !important; }

/* the header stays put while the rows scroll under it: a wide grid is unreadable
   once the column names have left the screen */
.structure-grid thead th { position:sticky; top:0; z-index:3; background:var(--n20); }
.structure-grid th:last-child { z-index:4; }

/* the actions stay reachable however far the grid is scrolled sideways */
.structure-grid th:last-child, .structure-grid td.s-actions {
  position:sticky; right:0; background:var(--n0); box-shadow:-6px 0 6px -6px rgba(0,0,0,.15); }
.structure-grid tr:hover td.s-actions { background:var(--n10); }

.structure-grid th { position:relative; }
.col-grip { position:absolute; top:0; right:0; width:7px; height:100%;
  cursor:col-resize; touch-action:none; }
.col-grip:hover, body.resizing-column .col-grip { background:var(--ax-petrol); opacity:.5; }
body.resizing-column { cursor:col-resize; user-select:none; }
.structure-grid { table-layout:auto; }
.desc-body.editable:empty::before { content:attr(data-placeholder); color:var(--n200); }
.project-icon.sm { width:16px; height:16px; border-radius:4px; vertical-align:-3px; }
.tag.disturbance { background:var(--red-light); color:var(--red);
  border-color:var(--red); font-weight:600; }
/* Filters sit at the left edge and keep their natural width. The general .row
   stretches every child to an equal share, which left the fields floating in
   the middle of the page with the buttons adrift. */
.filter-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  margin:0 0 20px; }
.filter-row .field { flex:0 0 auto; margin:0; }
/* every field in a filter row is label plus control and nothing else, so they
   all end at the same height - a hint under one of them used to push the others
   out of line */
.filter-row .field .hint { display:none; }
.filter-row .field .input { width:auto; min-width:160px; }
.filter-row .field.wide .input { min-width:240px; }
.filter-row .btn { margin-bottom:1px; }

/* what somebody may not touch looks untouchable, instead of accepting input and
   refusing it afterwards */
.locked { opacity:.65; cursor:not-allowed; }
.desc-body.locked, .issue-title.locked { background:var(--n10); }
.desc-body.locked:hover, .issue-title.locked:hover { background:var(--n10); }

.wf-all td { background:var(--n10); border-bottom:2px solid var(--n30); }

.deviation { font-family:var(--font-display); font-weight:700; }
.deviation.over { color:var(--red); }
.deviation.under { color:var(--green); }

/* the bar above the figures: both controls the same height, the select taking
   the room the button leaves */
.ts-bar { display:flex; gap:10px; align-items:stretch; margin-bottom:12px; }
.ts-bar .input { flex:1 1 auto; min-width:0; }
.ts-bar .btn { flex:0 0 auto; display:flex; align-items:center; }

/* three tiles of equal width, so the numbers line up instead of drifting with
   the length of their labels */
.time-heads {
  /* One row, however many figures there are and however wide the gadget is.
     Three fixed columns put the fourth on a line of its own, which made the
     block twice as tall for no gain. The boxes share the width instead and
     shrink together; on a half-width gadget they end up narrow, which is fine
     because the figure is short - what must not happen is a number cut off, and
     the padding below is what guards that. */
  display:flex; gap:8px; margin-bottom:14px; align-items:stretch;
}
.time-heads span {
  display:flex; flex-direction:column; gap:2px;
  /* narrow padding and a basis of zero: every box gets the same share of the
     row, and none of them claims width for its label */
  flex:1 1 0; min-width:0; padding:8px 10px;
  border:1px solid var(--n30); border-radius:var(--radius-lg); background:var(--n10);
}
.time-heads em {
  font-style:normal; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--n200);
  /* the label may be shortened - the figure below it may not */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.time-heads b {
  font-family:var(--font-display); font-size:17px; color:var(--ax-petrol);
  /* never wrapped, never clipped: a figure that reads "8" when it means "8h 30m"
     is worse than a narrow box */
  white-space:nowrap;
}
.time-heads small {
  font-size:10px; color:var(--n200);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* on a narrow gadget the labels go first, the figures stay */
@media (max-width:560px) {
  .time-heads em { font-size:9px; }
  .time-heads b { font-size:15px; }
}
.time-heads small {
  color:var(--n200); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.time-heads b { color:var(--n800); font-family:var(--font-display); font-size:15px;
  margin-left:5px; }
.time-heads small { color:var(--n200); }
.time-summary td, .time-summary th { padding:6px 10px; }
.time-bar { display:block; height:8px; border-radius:4px; background:var(--n30);
  overflow:hidden; }
.time-bar span { display:block; height:100%; background:var(--ax-petrol); }

/* the backlog is a tree: project, epic, issue, sub-task */
.backlog-row.tree[data-depth="0"] { padding-left:12px; background:var(--n10);
  font-family:var(--font-display); letter-spacing:.02em; }
.backlog-row.tree[data-depth="1"] { padding-left:36px; color:var(--n400); }
.backlog-row.tree[data-depth="2"] { padding-left:60px; }
.backlog-row.tree[data-depth="3"] { padding-left:84px; }
.backlog-row.project, .backlog-row.epic { cursor:default; }
.backlog-row.epic span:first-of-type { font-weight:600; color:var(--n800); }

/* the actual sprint, laid out by status */
/* one block per epic, so the columns repeat under each and every task sits
   visibly under the epic it belongs to */
/* who carries this sprint, with the hours behind each face */
.sprint-people { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sprint-person {
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px 2px 2px;
  background:var(--n10); border:1px solid var(--n30);
  border-radius:var(--radius-pill);
}
.sprint-person b {
  font-family:var(--font-display); font-size:12px; color:var(--ax-petrol);
  white-space:nowrap;
}
.avatar.sm.unassigned {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--n30); color:var(--n300); font-weight:700;
}

/* the epics themselves above their contents, set apart so the two levels do not
   read as one long list */
.epic-lane {
  padding:0 0 12px; margin-bottom:16px; border-bottom:2px solid var(--n30);
}
.epic-lane-head {
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--n200); margin-bottom:8px;
}
.epic-lane-head small {
  text-transform:none; letter-spacing:0; margin-left:8px; color:var(--n200);
}

/* while an epic is under the pointer, everything that is not its work steps
   back - the highlight has to be a contrast, or it says nothing */
.gadget-body.picking [data-of-epic],
.gadget-body.picking [data-epic-hover] { opacity:.3; }
.gadget-body.picking [data-of-epic].picked,
.gadget-body.picking [data-epic-hover].picked {
  opacity:1; box-shadow:0 0 0 2px var(--ax-petrol); border-radius:var(--radius-md);
}
[data-epic-hover], [data-of-epic] { cursor:pointer; }

.epic-block { margin-bottom:14px; }
.epic-block-head {
  display:flex; align-items:center; gap:8px; padding:6px 2px 8px;
  border-bottom:1px solid var(--n30); margin-bottom:8px;
}
.epic-block-head .card-epic { max-width:320px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

.sprint-columns { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:12px; }
.sprint-column { border:1px solid var(--n30); border-radius:var(--radius-lg);
  padding:8px; background:var(--n10); }
.sprint-column-head { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px; }
.sprint-item { display:flex; align-items:center; gap:7px; padding:6px 7px; cursor:pointer;
  background:var(--n0); border:1px solid var(--n30); border-radius:6px; margin-bottom:5px; }
/* an interruption is marked wherever it shows up, so a sprint that was pushed
   around says so on its own */
/* the two fields a planning meeting keeps touching, editable where they stand */
/* an estimate that is not set says so, instead of showing an empty chip that
   looks the same as a chip nobody may edit */
.editable-points { cursor:pointer; }
.editable-points.unset {
  border-style:dashed; color:var(--n200); font-weight:500; background:transparent;
}
.editable-points:hover { border-color:var(--ax-petrol); color:var(--ax-petrol); }
.points-input { width:52px; padding:2px 6px; font-size:12px; }

.tag.disturb {
  background:var(--red-light); color:var(--red); border-color:var(--red);
  font-weight:700; padding:0 6px; border-radius:6px; font-size:11px;
}
.card.disturbed { box-shadow:inset 3px 0 0 var(--red); }
/* no colours of its own: the badge in the backlog already looks right, and my
   override used --danger-bg, which is a solid red, with --danger, which does not
   exist - so the text was red on red and vanished */

.sprint-item.disturbed, .mywork-row.disturbed { border-left:3px solid var(--red); }

.sprint-item:hover { border-color:var(--ax-petrol); }
.sprint-item-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:13px; }

.mywork-row { display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid var(--n30); }
.mywork-row:last-child { border-bottom:0; }
.mywork-summary { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; cursor:pointer; }
.mywork-summary:hover { color:var(--ax-petrol); }
.mywork-row .btn { padding:2px 8px; }

.sprint-tile { padding:10px 0; border-bottom:1px solid var(--n30); }
.sprint-tile:last-child { border-bottom:0; padding-bottom:0; }
.sprint-tile:first-child { padding-top:0; }
.sprint-tile-head { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.sprint-tile-head .spacer { flex:1; }
.sprint-bar { display:flex; height:10px; border-radius:5px; overflow:hidden;
  background:var(--n30); min-width:140px; }
.sprint-bar span { display:block; height:100%; }
.sprint-bar .done { background:var(--green); }
.sprint-bar .inprogress { background:var(--ax-petrol); }
.sprint-bar .todo { background:var(--n200); }
.sprint-bar .backlog { background:var(--n70); }
.issue-table td.num, .issue-table th.num { text-align:right; white-space:nowrap; }
.issue-table td.num small { color:var(--n200); }
.backlog-row:hover .row-menu, .row-menu:focus { opacity:1; }
.s-status:hover { filter:brightness(.94); }
/* the menus that float next to a button - named apart from the status area in
   the issue header, which used to share the class and got removed with them */
.floating-menu { min-width:220px; max-height:320px; z-index:60; }
.floating-menu .dropdown-item { display:flex; align-items:center; gap:8px; }
.s-desc { display:block; max-width:340px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--n400); font-size:13px; }
.s-date { border:1px solid transparent; border-radius:var(--radius); background:transparent;
  padding:2px 4px; font-size:13px; color:var(--n800); }
.s-date:hover { border-color:var(--n40); background:var(--n0); }
.s-date:focus { outline:none; border-color:var(--ax-petrol); background:var(--n0); }
.col-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:6px;
  border:1px solid var(--n30); border-radius:var(--radius); background:var(--n0);
  cursor:grab;
}
.col-item.dragging { opacity:.4; }
.col-grip { color:var(--n50); letter-spacing:-2px; user-select:none; }
/* the deeper a row sits, the quieter it reads */
.structure-grid tr.s-level-0 .s-label { font-weight:700; }
.structure-grid tr.s-level-1 .s-label { font-weight:600; }
.structure-grid tr.s-level-3 .s-label { color:var(--n400); font-size:13px; }
.s-folder { font-size:13px; }
.s-summary { }
.s-auto { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--n200); background:var(--n20); border-radius:3px;
  padding:0 5px; }
.structure-grid tbody tr:hover .s-auto { background:var(--n30); }

/* --- workflow editor ------------------------------------------------------- */
.wf-editor { display:grid; grid-template-columns:1fr 360px; gap:18px; align-items:start; }
@media (max-width:1100px) { .wf-editor { grid-template-columns:1fr; } }
.wf-stage-card { padding:12px; }
#wf-stage { background:var(--n10); border-radius:var(--radius); overflow:hidden; }
#wf-canvas { width:100%; height:auto; display:block; touch-action:none; }
.wf-node { cursor:grab; }
.wf-node:active { cursor:grabbing; }
.wf-node rect { transition:filter .1s ease; }
.wf-node:hover rect { filter:brightness(.97); }
.wf-node.selected rect { stroke-dasharray:none; filter:none;
  stroke-width:3.5; }
.wf-node-label { font-family:var(--font-display); font-size:14px; font-weight:600;
  fill:var(--n800); pointer-events:none; }
.wf-handle { fill:var(--n0); stroke:var(--n50); stroke-width:2; cursor:crosshair;
  pointer-events:none; }
/* a 7px circle is hard to hit, so an invisible larger one takes the pointer */
.wf-handle-hit { fill:transparent; cursor:crosshair; }
.wf-node:hover .wf-handle { fill:var(--ax-petrol); stroke:var(--ax-petrol); }
.wf-arrow path { fill:none; stroke:var(--n50); stroke-width:1.8; }
.wf-arrow .wf-hit { stroke:transparent; stroke-width:14; cursor:pointer; }
.wf-arrow:hover path { stroke:var(--ax-petrol); }
.wf-arrow.selected path { stroke:var(--ax-gold); stroke-width:2.6; }
.wf-arrow .wf-label { font-family:var(--font-display); font-size:12px; font-weight:600;
  fill:var(--n200); pointer-events:none; }
.wf-arrow.selected .wf-label { fill:var(--ax-gold); }
.wf-ghost { fill:none; stroke:var(--ax-petrol); stroke-width:2; stroke-dasharray:5 4; }
.rule-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.rule-card { border:1px solid var(--n30); border-radius:var(--radius); padding:12px;
  margin-bottom:10px; background:var(--n10); }
.rule-card .rule-row:last-of-type { margin-bottom:10px; }
.rule-row .input { flex:1; }

/* --- status button ----------------------------------------------------------
   The colour is the status category, so the current state reads at a glance:
   grey for anything still waiting, petrol while it moves, green once done. */
.status-menu { position:relative; }
.status-button {
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border:0; border-radius:var(--radius); cursor:pointer;
  font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:#fff;
  background:var(--n70); transition:filter .12s ease;
}
.status-button:hover { filter:brightness(1.08); }
.status-button.inprogress { background:var(--ax-petrol); }
.status-button.done { background:var(--green); }
.status-button .caret { opacity:.85; margin-left:0; }
.status-dropdown { min-width:260px; top:calc(100% + 6px); right:0; left:auto; }
.status-dropdown small { color:var(--n200); font-size:12px; display:block; }
.status-dot { width:10px; height:10px; border-radius:50%; flex:none; background:var(--n70); }
.status-dot.inprogress { background:var(--ax-petrol); }
.status-dot.done { background:var(--green); }

/* --- estimate and remaining time ------------------------------------------ */
.time-left { display:flex; align-items:center; gap:8px; }
.time-left-value { font-weight:600; white-space:nowrap; }
.time-left-value.over { color:var(--red-dark); }
.time-left .progress { flex:1; min-width:52px; }
.time-left-pct { color:var(--n200); font-size:12px; min-width:32px; text-align:right; }
.worklog-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }

/* --- modal ---------------------------------------------------------------- */
.modal-root { position:fixed; inset:0; background:rgba(34,39,43,.5); z-index:700;
  display:flex; align-items:flex-start; justify-content:center; padding:64px 16px;
  overflow:auto; }
.modal {
  background:var(--n0); border-radius:var(--radius-lg); box-shadow:var(--shadow-overlay);
  width:min(620px, 100%); display:flex; flex-direction:column;
  /* draggable from the bottom right corner; the size is remembered per person */
  resize:both; overflow:hidden; min-width:360px; min-height:220px;
  max-width:100%; max-height:86vh;
}
.modal.wide { width:min(900px, 100%); }
.modal::after {
  content:""; position:absolute; pointer-events:none;
}
.modal-body { flex:1; }
.modal-head {
  padding:20px 26px 16px; font-family:var(--font-display); font-size:22px; font-weight:700;
  border-bottom:1px solid var(--n30);
}
.modal-body { padding:22px 26px 6px; overflow:auto; min-height:0; }
.modal-foot { padding:16px 26px 20px; display:flex; justify-content:flex-end; gap:10px;
  border-top:1px solid var(--n30); background:var(--n10); }

/* --- panels and reports --------------------------------------------------- */
.report-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:18px; align-items:start; }
/* the account boxes all take the height of the tallest in their row, and the
   text starts at the top - a card that says little then simply has room below
   it, instead of every card standing at a different height */
.account-grid { align-items:stretch; }
.account-grid > .panel-card {
  display:flex; flex-direction:column; align-self:stretch;
}
.account-grid > .panel-card > :last-child { margin-bottom:0; }
/* a menu of equally important entries: same height, no orphan stretched wide */
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
  gap:18px; }
.tile-grid > * { margin:0; }
.panel-card { border:1px solid var(--n30); border-radius:var(--radius-lg); padding:20px;
  background:var(--n0); }
.panel-card h3 {
  margin:0 0 14px; font-size:17px; font-weight:700;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--n400);
  margin-top:10px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }
.bar-row { display:grid; grid-template-columns:130px 1fr 44px; align-items:center; gap:10px;
  margin-bottom:8px; font-size:13px; }
.bar-track { background:var(--n20); border-radius:var(--radius-pill); height:16px;
  overflow:hidden; border:1px solid var(--n30); }
.bar-fill { display:block; height:100%; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px;
  margin-bottom:22px; }
.stat { border:1px solid var(--n30); border-radius:var(--radius-lg); padding:16px 18px;
  background:var(--n0); }
.stat b { display:block; font-family:var(--font-display); font-size:32px; font-weight:700;
  line-height:1.05; color:var(--ax-petrol-deep); }
.stat span { color:var(--n200); font-size:12px; font-family:var(--font-display);
  font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
/* a figure inside the headline is a figure, not a label: the rule above is for
   the caption underneath and used to shrink the deviation along with it */
.stat b .deviation { font-size:inherit; letter-spacing:0; text-transform:none; }

/* --- roadmap -------------------------------------------------------------- */
.epic-row { border:1px solid var(--n30); border-radius:var(--radius-lg); margin-bottom:10px;
  overflow:hidden; background:var(--n0); }
.epic-head { display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; }
.epic-head:hover { background:var(--n20); }
.epic-bar { flex:1; max-width:340px; }
.epic-children { border-top:1px solid var(--n30); }

/* --- dashboard gadgets ---------------------------------------------------- */
/* A grid makes every row as tall as its tallest tile, so one long gadget on the
   left pushes the next one below it and leaves the space beside it empty.
   Multi column flow packs the tiles instead, and a full width gadget spans. */
.gadget-grid { display:flex; flex-direction:column; gap:18px; }
/* while something is being dragged the empty part of a column shows itself, so
   it is visibly a place one may drop into */
.dragging-gadgets .gadget-col { outline:1px dashed var(--n40); outline-offset:6px;
  border-radius:var(--radius-lg); }
.dragging-gadgets .gadget-col:hover { outline-color:var(--ax-petrol); }
.gadget-placeholder {
  border:2px dashed var(--ax-petrol); border-radius:var(--radius-lg);
  background:var(--ax-petrol-pale, rgba(0,127,160,.06));
}
.gadget-band { display:flex; flex-direction:column; gap:18px; min-height:4px; }
/* the columns run to the same height: a short column used to end where its last
   gadget ended, and the empty space beside a tall neighbour belonged to nobody -
   so there was nowhere to drop */
.gadget-columns { display:flex; gap:18px; align-items:stretch; }
.gadget-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:18px;
  min-height:120px;
  min-height:60px; }
.gadget { border:1px solid var(--n30); border-radius:var(--radius-lg); background:var(--n0);
  overflow:hidden; }
.gadget.dragging { display:none; }
/* the preview sits where the tile would land, in the tile's own size */
.gadget-placeholder {
  border:2px dashed var(--ax-petrol); background:var(--ax-petrol-soft);
  border-radius:var(--radius-lg); pointer-events:none;
}
.gadget-head { display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-bottom:1px solid var(--n30); background:var(--n20); cursor:grab;
  user-select:none; -webkit-user-select:none; }
.gadget-head:active { cursor:grabbing; }
.gadget-head h3 { margin:0; font-size:16px; font-weight:700; flex:1; }
.gadget-actions { display:flex; gap:2px; }
.gadget-body { padding:16px; }
@media (max-width:900px) { .gadget-columns { flex-direction:column; } }

a/* the groups on the overview: a heading, a line, then the tiles of that group */
/* the routine card: the head is a row of its own so the Run button cannot be
   pushed out by a long name, and the steps read as the list they are */
/* the one cell that can hold a routine back is marked, not just refused on save */
.rt-parent-note { font-size:12px; color:var(--n200); }
.rt-needs-parent .rt-parent {
  border-color:var(--red); box-shadow:0 0 0 2px var(--red-light);
}

/* the changelog: a line per version, the running one picked out */
.changelog { list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; }
.changelog li {
  display:grid; grid-template-columns:74px 1fr; gap:10px; align-items:baseline;
  padding:7px 8px; border-radius:var(--radius-md); font-size:13px;
}
.changelog li:nth-child(even) { background:var(--n10); }
.changelog li.here { box-shadow:inset 0 0 0 1px var(--ax-petrol); font-weight:500; }
.changelog li.here .card-key { background:var(--ax-petrol); color:#fff; }

/* the squares in the header: a button holding an icon, not a word */
.nav-icon-btn { display:inline-flex; align-items:center; padding:6px 9px; }
.nav-icon-btn svg { fill:currentColor; display:block; }

/* the clock: the dot carries the state, so a glance is enough */
/* the dot sits on the picture, not beside it: a row of avatars keeps its spacing */
.avatar-wrap { position:relative; display:inline-flex; flex:0 0 auto; line-height:0; }
.pres {
  position:absolute; right:-1px; bottom:-1px; width:9px; height:9px;
  border-radius:50%; box-shadow:0 0 0 2px var(--n0);
}
.avatar-wrap.sm .pres { width:7px; height:7px; box-shadow:0 0 0 1.5px var(--n0); }
.pres-working { background:var(--green, #22A06B); }
.pres-paused  { background:var(--amber, #E2A200); }
.pres-out     { background:var(--red); }

/* the epic beside the key: the same coloured marker as everywhere else, so it is
   recognised before it is read */
.epic-crumb {
  display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:bottom;
  padding:2px 9px; border-radius:999px; color:#fff; font-size:11px; font-weight:600;
  text-decoration:none;
}
.epic-crumb:hover { filter:brightness(1.12); }
/* how many things hang under this row */
/* a sub-task in an epic's list sits under the issue it belongs to */
.subtask-row.under { padding-left:26px; }
.subtask-row.under .card-key { opacity:.75; }

.kid-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--n30); color:var(--n300); font-size:11px; font-weight:600;
}

/* a list one works in: the row keeps its controls at the right edge, whatever
   the summary does */
.worklist { display:flex; flex-direction:column; gap:2px; }
.worklist-row {
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  border-radius:var(--radius-md); font-size:13px;
}
.worklist-row:nth-child(even) { background:var(--n10); }
.worklist-summary {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer;
}
.worklist-row .s-status { background:none; border:0; padding:0; cursor:pointer; }
.worklist-row .btn { flex:0 0 auto; }

/* the raw table: dense, and every cell says it can be clicked */
.db-table td, .db-table th { font-size:12px; white-space:nowrap; max-width:280px;
  overflow:hidden; text-overflow:ellipsis; }
.db-cell { cursor:pointer; }
.db-cell:hover { background:var(--ax-petrol-pale, rgba(0,127,160,.08)); }
.db-sealed { color:var(--n200); letter-spacing:2px; }
.db-filter { font-size:12px; padding:3px 6px; }

/* said once, across the top, instead of as a refusal after every attempt */
.licence-banner {
  /* fixed under the header, whose height is measured rather than guessed */
  position:fixed; left:0; right:0; z-index:59; padding:8px 16px;
  background:var(--red-light, #FFEBE6); color:var(--red-dark, #AE2A19);
  border-bottom:1px solid var(--red); font-size:13px; text-align:center;
}
.licence-banner a { color:inherit; font-weight:600; margin-left:6px; }
/* the announcement uses the same band in the same red: it is meant to be read,
   and a second colour would only invite guessing which one is serious */
.licence-banner.announcement { font-weight:500; }
/* the page moves down by exactly the band's height, so it covers nothing */
body.has-licence-band .app { padding-top:var(--licence-band, 0px); }
body.has-licence-band main.content { scroll-padding-top:var(--licence-band, 0px); }

/* two bars on one scale: planned above, booked below */
.dual-bar { height:7px; border-radius:4px; background:var(--n20); margin:2px 0; }
.dual-bar span { display:block; height:100%; border-radius:4px; }
.bar-est { background:var(--n100, #8993A4); }
.bar-act { background:var(--ax-petrol, #007FA0); }
.bar-act.over { background:var(--red); }

/* the logo shown on the ground it will actually sit on */
/* a recognised address: underlined, so it is visibly a link and not just
   coloured text - colour alone is no signal for everybody */
.auto-link { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.auto-link:hover { text-decoration-thickness:2px; }
/* inside an editable field the pointer still has to say "this opens something" -
   the browser would show a text cursor there */
[contenteditable] .auto-link { cursor:pointer; }

/* repository and its link side by side, so the row does not grow a line */
.bb-repo-cell { display:flex; gap:6px; align-items:center; min-width:0; }
.bb-repo-cell select { flex:1; min-width:0; }

/* a header one can sort by says so on hover */
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { background:var(--n20); }

/* Participants in a backlog or sprint row: a fixed slot beside the assignee,
   at most three faces and then a count. Fixed, because a row that grows with the
   number of helpers would shift every other column - and the summary is what
   people read along. */
.avatar.xs { width:18px; height:18px; font-size:9px; }

.row-participants {
  display:inline-flex; align-items:center; gap:0; overflow:hidden;
  justify-content:flex-start; min-width:0;
}
/* Same size as the assignee - a helper is a person like any other, and initials
   at 18px were guesswork. They overlap by a third, which fits three of them in
   the slot while leaving every set of initials readable. */
.row-participants .avatar {
  width:24px; height:24px; font-size:10px;
  /* a third of the width, so the initials of the one behind stay readable */
  margin-left:-8px; border:2px solid var(--n0); box-sizing:border-box;
}
.row-participants .avatar:first-child { margin-left:0; }
.row-participants .more {
  font-size:11px; color:var(--n200); margin-left:4px; white-space:nowrap;
}

/* the field in the issue panel */
.participants-cell { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.chip-person {
  display:inline-flex; align-items:center; gap:5px; padding:2px 6px 2px 2px;
  border:1px solid var(--n30); border-radius:999px; background:var(--n10);
  font-size:12px; max-width:190px;
}
.chip-person > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-x {
  border:0; background:none; cursor:pointer; color:var(--n200); font-size:14px;
  line-height:1; padding:0 2px;
}
.chip-x:hover { color:var(--red); }
.pick-list { display:flex; flex-direction:column; gap:4px; max-height:320px; overflow:auto; }

.accent-chip { width:34px; height:34px; border-radius:8px; display:inline-block;
  border:1px solid var(--n40); }

.logo-preview { padding:16px; border-radius:var(--radius-md); border:1px solid var(--n30);
  display:flex; align-items:center; min-height:72px; }
.logo-preview.light { background:var(--n0); }
.logo-preview.dark { background:#1A1D23; }
.logo-preview.favicon { background:var(--n10); }
.logo-preview img { height:36px; width:auto; }

.clock-list { display:flex; flex-direction:column; gap:2px; }
.clock-row {
  display:flex; align-items:center; gap:9px; padding:7px 8px;
  border-radius:var(--radius-md); font-size:13px;
}
.clock-row:nth-child(even) { background:var(--n10); }
.clock-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.clock-in .clock-dot { background:var(--green, #22A06B); }
.clock-break .clock-dot { background:var(--amber, #E2A200); }
.clock-out .clock-dot { background:var(--red); }
.clock-name { font-weight:500; }
.clock-state { color:var(--n300); }
.clock-sum { margin-left:auto; font-variant-numeric:tabular-nums; }
.clock-actions { display:flex; gap:4px; flex:0 0 auto; }

.routine-card { display:flex; flex-direction:column; gap:10px; }
.routine-card-head {
  display:flex; align-items:flex-start; gap:12px; justify-content:space-between;
}
.routine-card-head h3 { margin:0; min-width:0; overflow-wrap:anywhere; }
.routine-card-head .btn { flex:0 0 auto; white-space:nowrap; }
.routine-what { margin:0; }
.routine-steps {
  margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px;
  font-size:13px;
}
.routine-steps li { overflow-wrap:anywhere; }
.routine-steps .card-key { margin-right:6px; }
.routine-steps i { color:var(--n300); }
.routine-where {
  margin:0; padding-top:10px; border-top:1px solid var(--n30);
  font-size:12px; color:var(--n300);
}

.settings-group + .settings-group {
  border-top:1px solid var(--n30); margin-top:26px; padding-top:22px;
}
.settings-group-head { margin-bottom:14px; }
.settings-group-head h2 {
  font-family:var(--font-display); font-size:17px; margin:0 0 2px;
  color:var(--ax-petrol-dark, var(--ax-petrol));
}
.settings-group-head .hint { margin:0; }

.settings-tile { display:block; color:inherit; transition:border-color .12s ease; }
a.settings-tile:hover { text-decoration:none; border-color:var(--ax-petrol);
  box-shadow:var(--shadow-raised); }
a.settings-tile h3 { color:var(--ax-petrol-deep); }
.settings-tile h3 .side-icon, .tile-grid h3 .side-icon { width:18px; height:18px; }
.tile-grid .panel-card { display:flex; flex-direction:column; }
.tile-grid .hint { margin-top:0; }

.transition-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.transition-row .tr-name { flex:1 1 130px; min-width:0; }
.transition-row .tr-from, .transition-row .tr-to { flex:0 0 132px; }

.passkey-row { display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--n30); border-radius:var(--radius); margin-bottom:8px; }
.passkey-row .grow { flex:1; }
.passkey-row small { display:block; color:var(--n200); font-size:12px; }
.secret-box { font-family:var(--font-mono); background:var(--n20); border:1px solid var(--n30);
  border-radius:var(--radius); padding:10px 12px; word-break:break-all; }

/* --- notices -------------------------------------------------------------- */
.notice, .notice-warn, .notice-ok {
  border-radius:var(--radius); padding:11px 14px; font-size:13px; line-height:1.5;
  text-align:left; margin-bottom:14px; border:1px solid transparent;
}
.notice { background:var(--n20); color:var(--n500); border-color:var(--n30); }
.notice-warn { background:var(--yellow-light); color:var(--yellow-dark);
  border-color:color-mix(in srgb, var(--yellow) 40%, transparent); }
.notice-ok { background:var(--green-light); color:var(--green-dark);
  border-color:color-mix(in srgb, var(--green) 35%, transparent); }

/* --- toast ---------------------------------------------------------------- */
.toast-stack { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:800;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { pointer-events:auto; background:var(--n800); color:var(--n0); padding:11px 18px;
  border-radius:var(--radius-pill); box-shadow:var(--shadow-overlay); font-size:13px;
  animation:rise .18s ease-out; }
.toast.error { background:var(--danger-bg); color:#fff; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } }

/* --- sign-in page --------------------------------------------------------- */
.login-body {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--n10);
  background-image:radial-gradient(circle at 50% 0%,
    color-mix(in srgb, var(--ax-petrol) 10%, transparent), transparent 60%);
}
.login-card {
  width:100%; max-width:410px; background:var(--n0); border:1px solid var(--n30);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-overlay);
  padding:36px 34px 26px; text-align:center;
}
/* The switching rules come earlier in the file and set display:none; a later
   display:block here beat them, and both logos showed at once. Size and spacing
   only - which of the two is visible stays the switch's business. */
.login-logo { height:32px; width:auto; margin:0 auto 22px; }
.brand-logo-light, .login-logo.brand-logo-light { display:block; }
.login-title {
  margin:0; font-family:var(--font-display); font-size:20px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ax-charcoal);
}
.login-sub { margin:6px 0 26px; color:var(--n200); font-size:13px; }
.login-card .field { text-align:left; }
.login-submit { width:100%; padding:10px 12px; }
.login-error { background:var(--red-light); color:var(--red-dark); border-radius:var(--radius);
  padding:11px 14px; margin-bottom:16px; font-size:13px; text-align:left;
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.login-notice { background:var(--ax-petrol-soft); color:var(--ax-petrol-deep);
  border-radius:var(--radius); padding:11px 14px; margin-bottom:16px; font-size:13px;
  text-align:left; }
.login-divider { display:flex; align-items:center; gap:12px; margin:18px 0 14px;
  color:var(--n200); font-size:12px; }
.login-divider::before, .login-divider::after { content:""; flex:1; height:1px;
  background:var(--n30); }
.login-foot { margin:22px 0 0; color:var(--n200); font-size:12px; }
.login-theme { margin:6px auto 0; }

@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }
@media (max-width:820px) {
  .sidebar { display:none; }
  .topnav-links, .quick-search input { display:none; }
  .content { padding:18px 16px 48px; }
  .page-head h1 { font-size:22px; }
}
@media (max-width:560px) {
  /* needs to beat the theme rules that pick one of the two wordmarks */
  :root .brand-logo, :root[data-theme="dark"] .brand-logo { display:none; }
  .brand-mark { display:block; }
}