:root {
  /* 06 — Colour */
  --midnight: #0A1A2F;
  --slate:    #12283F;
  --steel:    #6C88A3;
  --cloud:    #E9EEF4;
  --ice:      #8FD6E8;
  --ice-deep: #2E9BB8;

  /* Roles — the brand book's own pages: cloud field, midnight type, and
     ice/light for accents. Ice stays a signal, never a surface. */
  --field:   #F2F5F9;
  --panel:   #FFFFFF;
  --raised:  #FAFCFD;
  --rule:    #D7DFE9;
  --rule-strong: #BFCBDA;
  --text:    var(--midnight);
  /* The brand values are used as specified for rules, fills and display type.
     Small mono text needs a little more contrast than #6C88A3 / #2E9BB8 give
     on white (3.7:1 and 3.2:1), so these are the same hues darkened until they
     clear WCAG AA at 4.5:1. Deviation is deliberate and documented. */
  --muted:   #586F85;
  --accent:  #267F97;
  --accent-soft: var(--ice);
  --steel-rule: var(--steel);
  --danger:  #B3352B;
  --warn:    #9A6B10;
  --on-accent: #FFFFFF;

  /* 07 — Typography */
  /* Standard, installed-everywhere faces. This is an internal tool that gets
     read all day, so legibility beats brand typography; the palette and the
     mark carry the brand instead. */
  --display: -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  --body:    -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  --data:    ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --radius: 3px;
  --col-width: 20rem;
  --zoom: 1;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--field);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
}

body.centered {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1.5rem 1rem;
}

/* Display type is expanded, uppercase and tracked — never in running text. */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.005em;
  margin: 0;
}

/* Mono carries eyebrows, labels and every figure. */
/* Mono is reserved for things that are genuinely data: timestamps, tokens. */
.activity .when, .zoom-level, .copy-row input {
  font-family: var(--data);
  font-variant-ligatures: none;
}

label, .eyebrow, summary {
  display: block;
  margin: 1rem 0 .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}

.hint {
  font-weight: 400;
  font-size: .78rem;
  color: var(--muted);
}

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

input, textarea, select {
  width: 100%;
  padding: .55rem .65rem;
  font-family: var(--body);
  font-size: .95rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

input[type="date"], input[type="search"], select { font-size: .9rem; }
textarea { font-size: .92rem; line-height: 1.6; resize: vertical; }

::placeholder { color: var(--steel); opacity: .7; }

:where(input, textarea, select, button, .card, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font-family: var(--body);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: .45rem .8rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}

button:hover:not(:disabled) { border-color: var(--steel); }
button:disabled { opacity: .5; cursor: default; }

.primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.primary:hover:not(:disabled) { background: #1f6b80; border-color: #1f6b80; }
.danger { color: var(--danger); border-color: transparent; }
.danger:hover:not(:disabled) { border-color: var(--danger); }

.link-button {
  padding: .35rem .4rem;
  color: var(--steel);
  border-color: transparent;
}

.link-button:hover { color: var(--accent); border-color: transparent; }

.muted { color: var(--muted); margin: 0; }
.spacer { flex: 1; }

/* ------------------------------- the mark --------------------------------- */

/* The Novarra mark. Square artwork, so height drives the size. */
.wing {
  display: block;
  flex: none;
  width: auto;
  height: 1.85rem;
}

.topbar .wing { height: 1.6rem; }

.lockup {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.lockup h1 { font-size: 1.15rem; line-height: 1; }

.tagline {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin: .3rem 0 0;
}

/* ---------------------------- login and sign-up --------------------------- */

.card-panel {
  width: min(100%, 24rem);
  padding: 2.25rem 2rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.card-panel .lockup { margin-bottom: .35rem; }
.card-panel form > button[type="submit"] { width: 100%; margin-top: 1.5rem; padding: .7rem; }

.error {
  margin: 1rem 0 0;
  padding: .55rem .65rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-left: 2px solid var(--danger);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.invite-message {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: .75rem;
}

/* --------------------------------- topbar --------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  /* Wrap rather than overlap: with every filter shown the bar outgrows even a
     wide window, and the controls were colliding at ~1400px. */
  flex-wrap: wrap;
  row-gap: .4rem;
  gap: 1rem;
  padding: .7rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}

.topbar .lockup h1 { font-size: 1rem; }

.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  flex: 1 1 auto;
  min-width: 0;
}

.filters input[type="search"], .filters select {
  width: auto;
  padding: .35rem .5rem;
  font-size: .85rem;
}

.filters input[type="search"] { flex: 0 1 14rem; min-width: 6rem; }

.toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
}

.toggle input { width: auto; accent-color: var(--accent); }

.topbar-right { display: flex; align-items: center; gap: .5rem; }
.actions { display: flex; align-items: center; gap: .5rem; }
#menu-toggle { display: none; font-size: 1.1rem; line-height: 1; }

#who {
  font-size: .85rem;
  color: var(--muted);
}

.zoom {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding-right: .25rem;
  border-right: 1px solid var(--rule);
  margin-right: .25rem;
}

.zoom button { padding: .25rem .45rem; border-color: transparent; }
.zoom-level { font-size: .75rem; color: var(--muted); min-width: 3rem; text-align: center; }

/* --------------------------------- board ---------------------------------- */

/* `zoom` scales type, padding and column width together, so zooming out gives
   genuinely smaller cards rather than the same text crammed into a narrower
   box. Scoped to the board — the top bar and sidebar stay put. */
.board {
  zoom: var(--zoom);
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1.25rem;
  overflow-x: auto;
  min-height: calc(100dvh - 4rem);
}

.column {
  flex: 0 0 var(--col-width);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .8rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(10 26 47 / 5%);
}

.column h2, .col-head h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--midnight);
}

.column-title { flex: 1; cursor: text; }
.column-title:hover { color: var(--accent); }

/* The count is live data, so it reads in mono and ice — a signal. */
.count {
  padding: .1rem .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--ice) 28%, transparent);
  border-radius: 2px;
  letter-spacing: .06em;
}

.column-remove {
  padding: 0 .25rem;
  font-size: .95rem;
  line-height: 1;
  color: var(--steel);
  border-color: transparent;
  opacity: 0;
}

.column:hover .column-remove, .col-head:hover .column-remove { opacity: 1; }
.column-remove:hover { color: var(--danger); border-color: transparent; }

.cards { display: flex; flex-direction: column; gap: .45rem; min-height: 2.25rem; }

.card {
  padding: .6rem .65rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 2px solid transparent;
  border-radius: var(--radius);
  cursor: grab;
  transition: border-color .12s, transform .12s;
}

.card:hover { border-color: var(--rule-strong); box-shadow: 0 1px 3px rgb(10 26 47 / 8%); }

/* A card carries its focus area as a wash of that colour, so a workstream is
   recognisable anywhere on the board — not only in the lanes view. Kept light
   (10%) so midnight body text keeps full contrast. */
.card.has-focus {
  background: color-mix(in srgb, var(--fa-color) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--fa-color) 32%, var(--rule));
}

/* On a coloured band the card body stays white so it lifts off the tint, but
   keeps a solid left edge in its focus-area colour. */
.board.grouped .card,
.board.grouped .card.has-focus {
  background: var(--panel);
  border-color: var(--rule);
  border-left: 4px solid var(--fa-color, var(--rule-strong));
  padding-left: calc(.65rem - 3px);
  box-shadow: 0 1px 2px rgb(10 26 47 / 10%);
}

/* Critical-path red still wins that edge — colour means one thing here. */
.board.grouped .card.coloured { border-left-color: var(--card-color); }

.card.has-focus:hover {
  border-color: color-mix(in srgb, var(--fa-color) 60%, var(--rule));
}
.card.dragging { opacity: .35; }
.card.coloured { border-left-color: var(--card-color); }

.card-title {
  margin: 0;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--midnight);
}

.card-body {
  margin: .3rem 0 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.label-strip { display: flex; flex-wrap: wrap; gap: .2rem; margin-bottom: .4rem; }

.label-chip {
  padding: .1rem .4rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 3px;
}

.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin-top: .5rem;
}

.chip {
  padding: .1rem .4rem;
  font-size: .75rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.due {
  padding: .1rem .4rem;
  font-size: .75rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.due.soon { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.due.overdue { color: #fff; background: var(--danger); border-color: var(--danger); }

.card.archived { opacity: .5; }
.archived-flag { color: var(--steel); }

.drop-marker { height: 2px; background: var(--accent); border-radius: 1px; }

.add-card, .add-column {
  padding: .6rem .7rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--rule-strong));
  text-align: center;
}

.add-card:hover, .add-column:hover {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}

/* Pinned to the right edge of the board: after six columns it would otherwise
   sit past the fold, and a control you have to scroll to find is not one you
   can "easily" reach. */
.add-column {
  position: sticky;
  right: .55rem;
  z-index: 3;
  align-self: start;
  flex: 0 0 auto;
  min-width: 9rem;
  padding: .55rem .8rem;
  text-align: center;
  white-space: nowrap;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(2px);
}
.add-column { flex: 0 0 11rem; padding: .8rem; }

.empty-state {
  grid-column: 1 / -1;
  width: 100%;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

.empty-title {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
}

/* ------------------------------- swimlanes -------------------------------- */

/* Grouped view is a stack of lane bands rather than one grid, so each band can
   paint a continuous background across its full width — columns, gaps and all.
   Every band shares the same track sizing, so the columns stay aligned. */
.board.grouped {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
}

.col-head-row, .lane-cells {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--col-width));
  gap: .85rem;
  padding: 0 .55rem;
}

/* One extra track on the header row for the add-column control, so it sits
   after the last column without disturbing the lanes' alignment. */
.col-head-row { grid-template-columns: repeat(var(--cols), var(--col-width)) auto; }

.lane {
  width: max-content;
  min-width: 100%;
  padding-bottom: .6rem;
  border-radius: var(--radius);
}

/* The band: a light wash of the focus area's own colour, well below the
   header strip's shade so the title still reads as a header. */
.lane.has-color {
  background: color-mix(in srgb, var(--lane-color) var(--lane-tint, 11%), transparent);
}

.col-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .5rem .8rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* A lane reads as a band across the whole board: a solid colour rail on the
   left, a tint of the same colour behind the name, and the same rail repeated
   down each cell so the row stays legible however far you scroll across. */
.lane-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .45rem;
  padding: .5rem .7rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--midnight);
  letter-spacing: 0;
  background: var(--field);
  border-left: 5px solid var(--rule-strong);
  border-radius: var(--radius);
}

.lane-label.has-color {
  background: color-mix(in srgb, var(--lane-color) 14%, var(--panel));
  border-left-color: var(--lane-color);
}

/* The band spans every column, so pin the name and its count to the left edge:
   both stay readable however far right you scroll. */
.lane-head {
  position: sticky;
  left: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* The band is the toggle: clicking it rolls the lane up to just this row. */
.lane-label {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-family: var(--body);
}

.lane-label:hover { border-left-width: 8px; }

.lane-caret {
  font-size: .6rem;
  color: var(--muted);
  transition: transform .12s ease;
}

.lane-label.collapsed .lane-caret { transform: rotate(-90deg); }
.lane-label.collapsed { opacity: .85; }

.lane-label.has-color .count {
  color: #fff;
  background: var(--lane-color);
}

/* Cells are transparent so the band shows through them as well as around
   them — the colour is one continuous surface. */
.lane-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .4rem;
  padding: .35rem 0;
  min-height: 7.2rem;
  background: transparent;
  border: none;
}

/* On a tinted band a faint dashed outline disappeared. Give the empty slot a
   panel-tinted body and a firmer edge so it still reads as somewhere to drop. */
/* The add control. Always visible, never hover-only: you should be able to see
   where to add a card without moving the mouse to find out. */
.add-card.lane-add {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 100%;
  padding: .6rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--rule-strong));
  border-radius: var(--radius);
  text-align: center;
  opacity: 1;
  transition: background .12s, border-color .12s, color .12s;
}

.add-card.lane-add:hover {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}

/* In an empty cell it fills the slot, so the empty space is the target. */
.add-card.lane-add.is-empty {
  height: 6.5rem;
  font-size: .92rem;
  border-left: 4px solid var(--lane-color, var(--rule-strong));
}

.add-card.lane-add.is-empty:hover { border-left-color: var(--accent); }

/* ------------------------- column drag (grip) ----------------------------- */

/* Always visible, never hover-only: a drag handle you cannot see is a feature
   nobody knows exists. */
.col-grip {
  flex: none;
  padding: .15rem .2rem;
  font-size: .8rem;
  line-height: 1;
  letter-spacing: -.12em;
  color: var(--steel);
  background: var(--field);
  border-radius: 3px;
  cursor: grab;
  user-select: none;
  opacity: 1;
  transition: color .12s, background .12s;
}

.col-grip:hover, .col-grip:focus-visible {
  color: var(--on-accent);
  background: var(--accent);
}
.col-grip:active { cursor: grabbing; }

body.dragging-column .col-grip { opacity: 1; }
body.dragging-column .card { pointer-events: none; }

.column h2.drop-before, .col-head h2.drop-before { box-shadow: -3px 0 0 var(--accent); }
.column h2.drop-after,  .col-head h2.drop-after  { box-shadow:  3px 0 0 var(--accent); }

/* ------------------------------ card editor ------------------------------- */

.row { display: flex; gap: 1rem; }
.row > * { flex: 1; min-width: 0; }

.color-picker, .label-picker { display: flex; flex-wrap: wrap; gap: .35rem; }

.swatch {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
}

.swatch.swatch-none { background: var(--field); }
.swatch.selected { border-color: var(--midnight); box-shadow: 0 0 0 1px var(--midnight); }
.swatch:hover:not(:disabled) { border-color: var(--muted); }

.label-option {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: .25rem .5rem;
  font-size: .82rem;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}

.label-option input { width: auto; accent-color: var(--accent); }
.label-dot { width: .5rem; height: .5rem; border-radius: 50%; }

.markdown {
  margin-top: .5rem;
  padding: .7rem;
  font-family: var(--body);
  font-size: .9rem;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.markdown :first-child { margin-top: 0; }
.markdown :last-child { margin-bottom: 0; }
.markdown h3, .markdown h4, .markdown h5 { font-size: 1rem; font-weight: 700; margin: .9rem 0 .3rem; }
.markdown p { margin: .5rem 0; }
.markdown ul, .markdown ol { margin: .5rem 0; padding-left: 1.2rem; }
.markdown a { color: var(--accent); }
.markdown code, .markdown pre { font-family: var(--data); font-size: .8rem; }
.markdown code { padding: .05rem .25rem; background: var(--panel); border-radius: 2px; }
.markdown pre { padding: .6rem; overflow-x: auto; background: var(--panel); border-radius: var(--radius); }
.markdown pre code { padding: 0; background: none; }
.markdown mark { background: #fde68a; color: var(--midnight); padding: 0 .15rem; border-radius: 2px; }

/* ---------------------------- formatting toolbar -------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  padding: .3rem;
  background: var(--field);
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.toolbar + textarea {
  border-radius: 0 0 var(--radius) var(--radius);
  border-top-color: var(--rule);
}

.tool {
  min-width: 1.9rem;
  padding: .25rem .4rem;
  font-size: .85rem;
  line-height: 1.2;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
}

.tool:hover:not(:disabled) { background: var(--panel); border-color: var(--rule); }
.toolbar-sep { width: 1px; height: 1.1rem; margin: 0 .15rem; background: var(--rule); }
.tool-colors { display: flex; gap: .15rem; margin-left: auto; }

.tool-color {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 1px solid rgb(10 26 47 / 18%);
  border-radius: 50%;
}

.tool-color:hover { transform: scale(1.15); }

/* ----------------------- composers, toast, confirm ------------------------ */

.composer {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .5rem;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.composer input { font-family: var(--body); font-size: .95rem; padding: .45rem .5rem; }
.composer-actions { display: flex; gap: .4rem; }
.composer-actions button { padding: .4rem .7rem; font-size: .82rem; }

.title-input {
  flex: 1;
  min-width: 0;
  padding: .2rem .35rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--midnight);
  background: var(--field);
  border: 1px solid var(--accent);
  border-radius: 2px;
}

#confirm-dialog { width: min(100%, 26rem); }
#confirm-dialog p { font-family: var(--body); font-size: .92rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 40;
  transform: translateX(-50%);
  max-width: min(90vw, 28rem);
  padding: .6rem .85rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #fff;
  background: var(--midnight);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgb(10 26 47 / 22%);
}

.toast.error { border-left: 3px solid var(--danger); }

/* -------------------------------- invites --------------------------------- */

.copy-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.copy-row input { flex: 1 1 12rem; font-family: var(--data); font-size: .8rem; }

.invite-preview {
  margin: .4rem 0 .75rem;
  padding: .55rem .7rem;
  font-size: .9rem;
  background: var(--field);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.invite-list, .label-manager {
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  max-height: 11rem;
  overflow-y: auto;
}

.invite-list li, .label-manager li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule);
}

.invite-list li:last-child, .label-manager li:last-child { border-bottom: none; }
.invite-list li > span:first-child { flex: 1; overflow-wrap: anywhere; }

.invite-status {
  padding: .1rem .4rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 3px;
}

.invite-status.open { color: var(--accent); background: color-mix(in srgb, var(--ice) 30%, transparent); }
.invite-status.used { color: var(--muted); border: 1px solid var(--rule); }
.invite-status.expired { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* --------------------------- focus area manager --------------------------- */

.focus-chip {
  font-weight: 600;
  color: #fff;
  background: var(--fa-color);
  border-color: transparent;
}

.inline-color {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
}

.inline-name {
  flex: 1;
  min-width: 0;
  padding: .3rem .45rem;
  font-size: .92rem;
  border: 1px solid transparent;
  background: transparent;
}

.inline-name:hover { border-color: var(--rule); }
.inline-name:focus { border-color: var(--accent); background: var(--panel); }

/* --------------------------------- avatars -------------------------------- */

.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  user-select: none;
}

.person-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .4rem .1rem .12rem;
}

.person-name { line-height: 1.4; }
.person-chip.avatar-only { padding: .1rem; gap: 0; }
#who .person-chip { border-color: transparent; padding-left: 0; }

.activity .person-chip {
  border-color: transparent;
  padding: 0;
  margin-right: .15rem;
  font-weight: 600;
}

.activity .avatar { width: 1.05rem; height: 1.05rem; font-size: .55rem; }

/* --------------------------------- sidebar -------------------------------- */

.workspace {
  display: flex;
  align-items: stretch;
  min-height: calc(100dvh - var(--topbar-h, 3rem));
}

.sidebar {
  position: sticky;
  top: var(--topbar-h, 3rem);
  align-self: flex-start;
  height: calc(100dvh - var(--topbar-h, 3rem));
  z-index: 10;
  flex: 0 0 auto;
  display: flex;
  width: 2.6rem;
  background: var(--panel);
  border-right: 1px solid var(--rule);
  transition: width .16s ease;
  overflow: hidden;
}

body.sidebar-open .sidebar { width: 21rem; }

.sidebar-toggle {
  flex: 0 0 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  color: var(--muted);
  background: transparent;
  border: none;
  border-right: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
}

.sidebar-toggle:hover { color: var(--accent); background: var(--field); }
.chevron { font-size: 1.3rem; line-height: 1; transition: transform .16s ease; }
body.sidebar-open .chevron { transform: rotate(180deg); }

.sidebar-badge {
  min-width: 1.5rem;
  padding: .05rem .25rem;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
  background: var(--field);
  border-radius: 3px;
}

body.sidebar-open .sidebar-badge { display: none; }
body.sidebar-open .sidebar-toggle { border-right-color: var(--rule); }

.sidebar-body { display: none; flex: 1; min-width: 0; flex-direction: column; }
body.sidebar-open .sidebar-body { display: flex; }

.sidebar-controls { padding: .6rem .65rem; border-bottom: 1px solid var(--rule); }
.sidebar-controls input[type="search"] { font-size: .85rem; padding: .4rem .5rem; }

.quick-filters { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }

.quick-filters button {
  padding: .2rem .45rem;
  font-size: .74rem;
  color: var(--muted);
  border-color: var(--rule);
}

.quick-filters button:hover { color: var(--text); }

.quick-filters button.active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.sidebar-list { flex: 1; overflow-y: auto; padding: .35rem .5rem .8rem; }
.side-group { margin-top: .5rem; }

.side-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .35rem .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
  border: none;
  border-left: 3px solid var(--group-color, var(--rule-strong));
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}

.side-group-head:hover { background: var(--field); }
.side-group-head .side-caret { font-size: .7rem; color: var(--muted); transition: transform .12s; }
.side-group.collapsed .side-caret { transform: rotate(-90deg); }
.side-group.collapsed .side-rows { display: none; }
.side-group-head .side-name { flex: 1; }

.side-count {
  padding: 0 .35rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--field);
  border-radius: 3px;
}

.side-rows { display: flex; flex-direction: column; }

.side-row {
  display: block;
  width: 100%;
  padding: .4rem .45rem;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: .82rem;
}

.side-row:hover { background: var(--field); border-left-color: var(--group-color, var(--accent)); }
.side-row.is-critical { border-left-color: var(--danger); }

.side-title {
  display: block;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}

.side-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin-top: .25rem;
}

.side-meta .side-pill {
  padding: 0 .3rem;
  font-size: .7rem;
  line-height: 1.5;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.side-meta .side-pill.due-soon { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.side-meta .side-pill.due-overdue { color: #fff; background: var(--danger); border-color: var(--danger); }
.side-meta .side-pill.side-label { font-weight: 600; border-color: transparent; }
.side-meta .side-pill.side-focus { color: #fff; border-color: transparent; }

.sidebar-empty { padding: 1.25rem .5rem; font-size: .82rem; color: var(--muted); text-align: center; }

/* ------------------------------ team view tabs ---------------------------- */

.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }

/* -------------------------------- responsive ------------------------------ */

@media (max-width: 60rem) {
  body.sidebar-open .sidebar { width: 17rem; }
}

@media (max-width: 40rem) {
  .workspace { min-height: calc(100dvh - var(--topbar-h, 3rem)); }
  .sidebar { width: 2.2rem; }
  .sidebar-toggle { flex-basis: 2.2rem; }
  body.sidebar-open .sidebar { width: 100%; }
  body.sidebar-open .board { display: none; }
  .toolbar { gap: .15rem; }
  .tool { min-width: 2.1rem; padding: .35rem .4rem; }
  .tool-colors { margin-left: 0; }
  .toast { bottom: .75rem; }
}

/* ------------------------------ team & access ----------------------------- */

.team-view {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 3rem;
  overflow-y: auto;
}

.team-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.team-head h2 { font-size: 1.15rem; }

.tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.tab {
  padding: .5rem .9rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: .92rem;
}

.tab:hover { color: var(--text); border-color: transparent; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

/* -------- section 1: team -------- */

.team-list { display: flex; flex-direction: column; gap: .5rem; }

.team-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.2fr) minmax(8rem, 1fr) minmax(14rem, 2fr) auto auto;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.team-row.inactive { opacity: .55; }

.team-who {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.team-who:hover .team-name { color: var(--accent); text-decoration: underline; }
.team-names { display: flex; flex-direction: column; line-height: 1.25; }
.team-name { font-weight: 600; }
.team-email { font-size: .78rem; color: var(--muted); }
.team-title { padding: .35rem .45rem; font-size: .88rem; }

.team-owns { display: flex; flex-wrap: wrap; gap: .25rem; }

.own-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: .15rem .4rem;
  font-size: .76rem;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}

.own-pill input { width: auto; accent-color: var(--accent); }
.own-dot { width: .5rem; height: .5rem; border-radius: 50%; }
.team-count { white-space: nowrap; }
.team-active { font-size: .8rem; white-space: nowrap; }

/* -------- person drill-down -------- */

#person-dialog { width: min(100%, 34rem); }
.person-cards { margin-top: .75rem; }
.person-col { display: flex; align-items: center; gap: .5rem; font-size: .92rem; margin: 1rem 0 .35rem; }
.person-list { margin: 0; padding: 0; list-style: none; }

.person-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--rule);
}

.person-list li:last-child { border-bottom: none; }

.person-card-link {
  flex: 1;
  padding: 0;
  font-size: .9rem;
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
}

.person-card-link:hover { color: var(--accent); text-decoration: underline; }

/* -------- section 2: matrix -------- */

.matrix-wrap { overflow-x: auto; }

.matrix {
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 100%;
}

.matrix th, .matrix td {
  padding: .5rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.matrix thead th {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--rule-strong);
  vertical-align: bottom;
}

.matrix-area { border-bottom-color: var(--fa-color) !important; }
.matrix-person { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.matrix-cell { text-align: center; }
.matrix-cell input { width: auto; accent-color: var(--accent); }
.matrix tbody tr.inactive { opacity: .5; }
.matrix tbody tr:hover { background: var(--field); }
.matrix td select { width: auto; padding: .25rem .4rem; font-size: .82rem; }
.matrix-key { margin-top: .75rem; font-size: .82rem; }

/* -------- section 3: ownership -------- */

.ownership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .75rem;
}

.own-card {
  padding: .8rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--fa-color);
  border-radius: var(--radius);
}

.own-card h3 { margin: 0 0 .5rem; font-size: .95rem; }
.own-people { display: flex; flex-wrap: wrap; gap: .3rem; }

.own-card.unowned {
  border-color: var(--danger);
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--panel));
}

.own-warning {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--danger);
}

body.viewing-screen .board, body.viewing-screen .sidebar { display: none; }

@media (max-width: 60rem) {
  .team-row { grid-template-columns: 1fr; gap: .5rem; }
  .team-view { padding: 1rem .75rem 3rem; }
}

/* -------------------------------- projects -------------------------------- */

.project-row {
  grid-template-columns: 4.5rem minmax(9rem, 1.1fr) minmax(11rem, 1.8fr) minmax(8rem, auto) auto auto auto auto;
}

.project-key {
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.project-stage { padding: .3rem .4rem; font-size: .85rem; }

/* Fields too wide to sit inline get their own line under the row. */
.project-more {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: .4rem 1.2rem;
  align-items: center;
  padding-top: .5rem;
  margin-top: .2rem;
  border-top: 1px solid var(--rule);
}

.project-more label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--muted);
}

.project-links-label { flex: 1; min-width: 14rem; }

.project-links {
  flex: 1;
  min-height: 1.9rem;
  padding: .3rem .45rem;
  font: inherit;
  font-size: .82rem;
  resize: vertical;
}

.project-description { font-size: .88rem; color: var(--muted); }
.project-description:focus { color: var(--text); }

.project-lead { width: auto; padding: .3rem .4rem; font-size: .85rem; }

/* An unassigned lead is worth noticing, without shouting like an error. */
.project-lead.is-unset { color: var(--muted); border-style: dashed; }

.project-name { font-weight: 600; font-size: .95rem; }

.project-status.is-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.project-status.is-archived { color: var(--muted); }

/* Neutral by design: a project carries no colour, so it cannot be confused
   with a task type. */
.project-chip {
  color: var(--muted);
  background: var(--field);
  border-color: var(--rule-strong);
  font-weight: 600;
}



/* The header shows which screen you are on. */
.link-button.active {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
}

/* A card's left bar is its task type. */
.board .card.has-focus {
  border-left: 4px solid var(--fa-color);
  padding-left: calc(.65rem - 3px);
}

/* ------------------------- master board (projects) ------------------------ */

/* A project lane carries no colour. The band is a flat light grey and the
   header a dark strip, so the only colour on the master board is the task-type
   bar and chip on each card, plus the labels. */
.lane.is-neutral {
  background: rgb(10 26 47 / 4%);
}

.lane-label.is-neutral {
  color: #fff;
  background: var(--midnight);
  border-left-color: var(--midnight);
}

.lane-label.is-neutral .lane-caret { color: rgb(255 255 255 / 65%); }

.lane-label.is-neutral .count {
  color: var(--midnight);
  background: #fff;
}

.lane-label.is-neutral:hover { border-left-width: 8px; }

/* Empty slots in a neutral lane take a grey rail, not a task-type colour. */
.lane.is-neutral .add-card.lane-add.is-empty { border-left-color: var(--rule-strong); }

#project-switcher { font-weight: 600; }

.composer-project { font-size: .9rem; }

.side-project {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .9rem 0 .1rem;
  padding: .3rem .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  background: var(--midnight);
  border-radius: 3px;
}

.side-project .side-count { color: var(--midnight); background: #fff; }

/* Action buttons on a management screen sit inline, where a dialog would have
   had a footer menu. */
.screen-actions { margin: 1.25rem 0 0; }
.screen-actions .primary { padding: .5rem 1rem; }

/* These screens are reading surfaces, not dialogs: give the lists room. */
.team-view .label-manager, .team-view .invite-list { max-height: none; }
.team-view .row { max-width: 34rem; }
.team-view #invite-result, .team-view .copy-row { max-width: 42rem; }

/* -------------------------------- comments -------------------------------- */

.comments { margin: .5rem 0 0; padding: 0; list-style: none; }

.comment {
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
}

.comment:last-child { border-bottom: none; }

.comment-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}

.comment-head .when { font-size: .75rem; color: var(--muted); }
.comment-delete { margin-left: auto; font-size: .78rem; }

.comment-body {
  margin-top: 0;
  padding: .5rem .6rem;
  font-size: .9rem;
  background: var(--field);
}

.comment-tags {
  margin: .3rem 0 0;
  font-size: .75rem;
  color: var(--muted);
}

/* A mention is a signal, so it reads like one without shouting. */
.mention {
  padding: 0 .2rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 3px;
}

.comment-compose { margin-top: .85rem; }
.comment-compose textarea { font-size: .9rem; }
.comment-compose .primary { margin-top: .5rem; }

.mention-picker { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }

.mention-add {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .45rem .15rem .15rem;
  font-size: .8rem;
  border-radius: 999px;
}

/* The card face: a count, and a clear flag when it is you being tagged. */
.comment-chip { font-weight: 600; }

.comment-chip.mentions-me {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* ------------------------------ dialog close ------------------------------ */

/* Sticky rather than absolute: the card editor scrolls, and a close button
   that scrolls away is no better than not having one. */
.dialog-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 5;
  width: 1.9rem;
  height: 1.9rem;
  margin: -.4rem -.4rem 0 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 50%;
}

.dialog-close:hover {
  color: var(--danger);
  background: var(--field);
  border-color: var(--rule);
}

@media (max-width: 40rem) {
  .dialog-close { width: 2.4rem; height: 2.4rem; font-size: 1.6rem; }
}

/* ------------------------------ card origin ------------------------------- */

.card-origin {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 2rem .25rem 0;      /* clear of the close button */
  font-size: .8rem;
  color: var(--muted);
}

.card-origin .person-chip { border-color: transparent; padding-left: .1rem; }
.origin-when { color: var(--muted); }
.origin-when::before { content: "· "; }

/* --------------------------------- roadmap -------------------------------- */

.roadmap-view { padding-bottom: 1rem; }
.roadmap-view .team-head { gap: .75rem; }

.zoom-tabs { display: flex; gap: .2rem; }

.zoom-tab {
  padding: .3rem .7rem;
  font-size: .85rem;
  color: var(--muted);
  border-color: var(--rule);
}

.zoom-tab.active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.roadmap-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
}

.roadmap-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
.roadmap-grid { min-width: max-content; background: var(--panel); }

.roadmap-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}

.roadmap-row:last-child { border-bottom: none; }

/* The left column is pinned so a project stays identifiable when scrolled. */
.roadmap-label {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 260px;
  width: 260px;
  padding: .7rem .8rem;
  background: var(--panel);
  border-right: 1px solid var(--rule-strong);
}

.roadmap-project { margin: 0 0 .2rem; font-weight: 700; font-size: .95rem; }

.roadmap-status {
  margin: 0;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--muted);
}

.roadmap-status.is-empty { font-style: italic; opacity: .8; }
.roadmap-ago { margin: .15rem 0 .35rem; font-size: .75rem; color: var(--muted); }

.status-edit {
  padding: 0 .25rem;
  margin-left: .25rem;
  font-size: .78rem;
  color: var(--muted);
  background: none;
  border: none;
}

.status-edit:hover { color: var(--accent); }
.status-input { width: 100%; font-size: .82rem; padding: .25rem .35rem; }

.roadmap-track { position: relative; min-height: 3.6rem; }

.roadmap-axis { background: var(--field); position: sticky; top: 0; z-index: 3; }
.roadmap-axis .roadmap-label { background: var(--field); }
.roadmap-axis .roadmap-track { min-height: 2rem; }

.roadmap-tick {
  position: absolute;
  top: 0;
  height: 100%;
  padding: .35rem .4rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  border-left: 1px solid var(--rule);
  white-space: nowrap;
  overflow: hidden;
}

/* Today, in red, so "where are we" needs no reading. */
.roadmap-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  z-index: 1;
}

.roadmap-golive {
  position: absolute;
  top: .3rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .25rem;
  transform: translateX(-50%);
  white-space: nowrap;
}

.golive-diamond {
  width: .6rem;
  height: .6rem;
  background: var(--midnight);
  transform: rotate(45deg);
}

.golive-label { font-size: .7rem; font-weight: 600; color: var(--midnight); }

/* Bars: colour carries status and nothing else. */
.roadmap-bar {
  position: absolute;
  height: 1.7rem;
  padding: 0 .45rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  overflow: hidden;
  font-size: .78rem;
  font-weight: 600;
  text-align: left;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.roadmap-bar .bar-name {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-progress {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgb(0 0 0 / 16%);
}

.bar-risk {
  position: relative;
  z-index: 1;
  flex: none;
  width: .95rem;
  height: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  background: rgb(0 0 0 / 35%);
  border-radius: 50%;
}

.roadmap-bar.status-planned { background: #DDE3EA; color: var(--midnight); }
.roadmap-bar.status-in-progress { background: #2F6FB5; color: #fff; }
.roadmap-bar.status-done { background: #2F7D4F; color: #fff; opacity: .6; }
.roadmap-bar.at-risk { background: #C98416; color: #fff; opacity: 1; }
.roadmap-bar:hover { outline: 2px solid var(--midnight); outline-offset: 1px; }

/* ---------------------------- milestone panel ----------------------------- */

.milestone-panel {
  position: fixed;
  top: var(--topbar-h, 3rem);
  right: 0;
  bottom: 0;
  z-index: 25;
  width: min(24rem, 92vw);
  padding: 1rem 1.1rem 2rem;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--rule-strong);
  box-shadow: -6px 0 18px rgb(10 26 47 / 12%);
}

.panel-top { display: flex; align-items: flex-start; gap: .5rem; }
.panel-top h3 { flex: 1; margin: 0; font-size: 1.05rem; }
.milestone-panel .dialog-close { position: static; float: none; margin: 0; }
.panel-col { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 .3rem; font-size: .9rem; }
.panel-cards { margin: 0; padding: 0; list-style: none; }

.panel-cards li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  padding: .35rem 0;
  font-size: .85rem;
  border-bottom: 1px solid var(--rule);
}

.panel-cards li:last-child { border-bottom: none; }
.panel-card-title { flex: 1; min-width: 60%; }

/* The .side-pill rules are scoped to .side-meta, so the panel needs its own. */
.panel-cards .side-pill {
  flex: 0 1 auto;
  max-width: 100%;
  padding: .1rem .4rem;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
}

/* ---------------------------- milestones tab ------------------------------ */

.milestone-group { display: flex; align-items: center; gap: .4rem; margin: 1.1rem 0 .4rem; font-size: .95rem; }
.milestone-row { grid-template-columns: minmax(11rem,1.6fr) auto auto auto minmax(8rem,auto) auto auto; }
.milestone-row input[type="date"], .milestone-row select { width: auto; padding: .3rem .4rem; font-size: .85rem; }

/* The hidden attribute must win over any display rule below, or a control
   that is meant to be gone by role stays on screen. */
[hidden] { display: none !important; }

/* --------------------------- roles & access tab --------------------------- */

.matrix-title {
  margin: 1.6rem 0 .4rem;
  font-size: .95rem;
}

.matrix-title:first-of-type { margin-top: .8rem; }

/* Only a few projects, so the table should size to its contents rather than
   stretching the Person column across the screen. */
#project-matrix .matrix { width: auto; min-width: min(36rem, 100%); }
#project-matrix .matrix th:not(:first-child),
#project-matrix .matrix td:not(:first-child) { padding-right: 1.6rem; }