/* ============================================================================
   Crystal Ocean — dark grayscale design system
   ========================================================================== */

:root {
  --bg: #0D0D0E;
  --panel: #141415;
  --panel-2: #1B1B1C;
  --panel-3: #212123;
  --border: #2A2A2D;
  --border-soft: #202023;
  --text: #E8E8ED;
  --text-dim: #9A9A9E;
  --text-faint: #5A5A5E;
  --white: #FFFFFF;
  --red: #E85A5A;
  --red-dim: #3A1E1F;
  --green: #7FD98C;
  --blue: #6FA8E8;
  --gold: #F0C34D;
  --purple: #B47FE8;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 8px;
  --r-xs: 6px;

  /* The one colour a button, a link or a focus ring is drawn in. Dark keeps the pale
     ink it always had; light takes the blue from the Oifis mark. */
  --accent: #E8E8ED;
  --accent-text: #0D0D0E;
  --accent-hover: #FFFFFF;
  --accent-soft: #23232C;

  /* Status colours come in threes — surface, edge, ink — because a red that reads on a dark
     panel is unreadable on a white one. */
  --danger-edge: #4E2628;
  --danger-ink: #F2A3A3;
  --ok-bg: #16301C;
  --ok-edge: #274B2E;
  --ok-ink: #A7E5B1;
  --warn-bg: #3A2E12;

  --border-strong: #3A3A3E;   /* hover and focus edges */
  --raised: #17171C;          /* today, and anything lifted off the panel */
  --raised-edge: #3A3A45;
  --sunken: #101011;          /* days outside the month */

  --focus-ring: rgba(232, 232, 237, .12);

  --scrim: rgba(5, 5, 6, .78);        /* behind a dialog */
  --bar: rgba(13, 13, 14, .92);       /* the top bar, translucent */
  --shadow: 0 18px 48px rgba(0, 0, 0, .55);
  --shadow-lift: 0 22px 54px rgba(0, 0, 0, .7);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Light. Same shapes, same spacing — only the surfaces and the accent change, which is why
   everything below this point reads from variables rather than naming a colour.

   The ground is a cool grey rather than white, and panels sit on it with a soft shadow
   instead of a hard line: a page of white boxes outlined in grey reads as a spreadsheet.
   Every surface carries a trace of the accent's hue so the blue looks like it belongs. */
:root[data-theme="light"] {
  /* A breath of the accent rather than a neutral grey: with a customer's own colour in the
     bar, a cool grey underneath reads as two designs stacked. Lazy evaluation means this
     follows whatever accent the organisation set. */
  --bg: color-mix(in srgb, var(--accent) 7%, #F4F7FA);
  --panel: #FFFFFF;
  --panel-2: color-mix(in srgb, var(--accent) 5%, #F6F8FB);
  --panel-3: color-mix(in srgb, var(--accent) 11%, #EDF1F6);
  --border: #DCE4ED;
  --border-soft: #EAF0F6;
  --text: #12202C;
  --text-dim: #52657A;
  --text-faint: #8496A8;
  --white: #FFFFFF;

  --red: #C4453F;
  --red-dim: #FBE9E8;
  --green: #2F8A45;
  --blue: #457BA2;
  --gold: #A9781A;
  --purple: #7A4FB0;

  --accent: #457BA2;          /* the square behind the Oifis mark */
  --accent-text: #FFFFFF;
  --accent-hover: #37678A;
  --accent-soft: #DCEAF5;     /* the circle, washed out */

  --danger-edge: #F0C4C1;
  --danger-ink: #A8322C;
  --ok-bg: #E3F4E7;
  --ok-edge: #BEE2C6;
  --ok-ink: #226B33;
  --warn-bg: #FBF0D8;

  --border-strong: #B4C4D4;
  --raised: #E3EEF8;          /* today, and anything the accent is hinting at */
  --raised-edge: #B9CFE3;
  --sunken: #E4E9EF;

  --scrim: rgba(16, 30, 43, .38);
  --bar: rgba(255, 255, 255, .82);
  --shadow: 0 18px 48px rgba(18, 32, 44, .14);
  --shadow-lift: 0 20px 44px rgba(18, 32, 44, .20);

  /* Only light lifts its panels; on dark the border already separates them. */
  --panel-shadow: 0 1px 2px rgba(18, 32, 44, .05), 0 4px 16px rgba(18, 32, 44, .05);
  --panel-shadow-hover: 0 2px 4px rgba(18, 32, 44, .07), 0 8px 24px rgba(18, 32, 44, .08);

  --focus-ring: rgba(69, 123, 162, .18);

  /* The current tab is the accent rather than another grey box. */
  --tab-active-bg: var(--accent-soft);
  --tab-active-ink: #2C5875;
  --tab-active-edge: #BBD6EA;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Page and panel side by side. Pinned the panel is a column of its own, so nothing on the
   page ends up underneath it; unpinned it floats and the page keeps the full width. */
.shell-body { display: flex; flex: 1; min-height: 0; align-items: flex-start; }
.shell-body > .content { flex: 1; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: var(--bar);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Light carries the accent in the bar itself. On dark the bar is already the darkest thing
   on screen and colouring it would only mute the accent everywhere else; on light a white
   bar on a near-white page has nothing to separate it but a hairline, and the accent both
   anchors the page and puts the organisation's own colour where it is seen first.

   Everything inside reads from --bar-ink, so a customer's accent decides the ink too — pale
   text on a dark blue, dark text on a pale one. */
:root[data-theme="light"] .topbar {
  background: var(--accent);
  border-bottom-color: transparent;
  --bar-ink: var(--accent-text);
}
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .topbar .brand-name,
:root[data-theme="light"] .topbar .who-name,
:root[data-theme="light"] .topbar .tab { color: var(--bar-ink); }

:root[data-theme="light"] .topbar .brand-sub { color: var(--bar-ink); opacity: .62; }
:root[data-theme="light"] .topbar .tab { opacity: .78; }
:root[data-theme="light"] .topbar .tab:hover {
  background: rgb(255 255 255 / .16); opacity: 1; color: var(--bar-ink);
}
/* The current tab is a solid panel against the accent — the same shape as on dark, inverted. */
:root[data-theme="light"] .topbar .tab.active {
  background: var(--panel); color: var(--accent);
  border-color: transparent; opacity: 1;
}

:root[data-theme="light"] .topbar .btn,
:root[data-theme="light"] .topbar .select {
  background: rgb(255 255 255 / .14); color: var(--bar-ink);
  border-color: rgb(255 255 255 / .24);
}
:root[data-theme="light"] .topbar .btn:hover { background: rgb(255 255 255 / .24); }
:root[data-theme="light"] .topbar .btn-icon.on { background: var(--panel); color: var(--accent); }

.brand { display: flex; align-items: center; gap: 9px; margin-right: 4px; }
.brand-logo { height: 30px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.brand-sub { font-size: 9px; color: var(--text-faint); letter-spacing: .16em; text-transform: uppercase; }

/* ── Live time tracking, visible to the whole team ────────────────────────── */

.tracking-strip {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; max-width: 40vw;
}
.tracking-strip::-webkit-scrollbar { display: none; }

.tracking-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  background: color-mix(in srgb, var(--who) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--who) 38%, transparent);
  color: var(--who); font-size: 11.5px; font-weight: 600;
}
.tracking-chip.mine {
  background: var(--red-dim);
  border-color: var(--danger-edge);
  box-shadow: 0 0 0 1px rgba(232, 90, 90, .35);
  padding-right: 4px;
}
.tracking-chip .mono { color: var(--text); font-weight: 500; }
.tracking-who { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

.tracking-stop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 2px; flex-shrink: 0;
  background: var(--red); color: var(--bg);
  border: none; border-radius: 50%; cursor: pointer;
  font-size: 8px; line-height: 1; padding: 0;
}
.tracking-stop:hover { background: var(--red); filter: brightness(1.12); }

.tracking-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--who);
  animation: pulse 1.6s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.tabs {
  display: flex; gap: 2px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 7px 13px; border-radius: var(--r-sm);
  color: var(--text-dim); font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  background: none; transition: background .12s, color .12s;
}
.tab:hover { background: var(--panel); color: var(--text); }
.tab.active {
  background: var(--tab-active-bg, var(--panel-2));
  color: var(--tab-active-ink, var(--text));
  border-color: var(--tab-active-edge, var(--border));
  font-weight: 600;
}

.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.org-picker { max-width: 200px; }
/* Unmistakable when someone from Oifis is looking at a customer's data. */
.org-picker.away { border-color: var(--gold); color: var(--gold); }

.who-name { font-size: 12px; color: var(--muted); max-width: 120px; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.logout-icon { margin-right: 4px; }

.content { flex: 1; padding: 20px; max-width: 1680px; width: 100%; margin: 0 auto; }

.page-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.page-title { font-size: 19px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.page-head .spacer { flex: 1; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover:not(:disabled) { background: var(--panel-3); border-color: var(--border-strong); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-danger { background: var(--red-dim); border-color: var(--danger-edge); color: var(--danger-ink); }
.btn-danger:hover:not(:disabled) { background: var(--red-dim); filter: brightness(1.15); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }

.btn-sm { padding: 4px 9px; font-size: 12px; border-radius: var(--r-xs); }
.btn-icon { padding: 6px 8px; }

/* ── Form controls ────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.label {
  font-size: 10.5px; font-weight: 600; color: var(--text-faint);
  letter-spacing: .1em; text-transform: uppercase;
}

.input, .textarea, .select {
  width: 100%; padding: 9px 11px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-xs); color: var(--text);
  font-family: inherit; font-size: 13.5px; outline: none;
  transition: border-color .12s;
}
/* A ring rather than a one-pixel colour change: on a light surface the border alone is too
   quiet to show which field has the keyboard. */
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }

.textarea { resize: vertical; min-height: 76px; line-height: 1.6; overflow: hidden; }

.select {
  appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239A9A9E' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}

.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.checkbox input { accent-color: var(--text); width: 15px; height: 15px; cursor: pointer; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ── Panels & cards ───────────────────────────────────────────────────────── */

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px;
  /* Depth comes from a border on dark, where a shadow would be invisible, and from a soft
     shadow on light, where a grid of bordered white boxes reads as a spreadsheet. */
  box-shadow: var(--panel-shadow, none);
}
.panel-title {
  font-size: 12px; font-weight: 650; color: var(--text-dim);
  margin: 0 0 12px; letter-spacing: .02em;
  display: flex; align-items: center; gap: 8px;
}
.panel-title .spacer { flex: 1; }

.empty {
  color: var(--text-faint); font-size: 13px; text-align: center;
  padding: 26px 14px; font-style: italic;
}

/* ── Pills & chips ────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 100px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  background: var(--panel-3); color: var(--text-dim);
}
.pill-ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill-warn { background: var(--warn-bg); color: var(--gold); }
.pill-done { background: var(--panel-2); color: var(--text-faint); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 100px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
/* Whatever is switched on wears the accent — the tool's colour, not the ink colour. Using
   --text here is what made every active chip black on the light theme. */
.chip.on {
  background: var(--accent); color: var(--accent-text);
  border-color: var(--accent); font-weight: 600;
}
.chip.static { cursor: default; }
.chip.static:hover { border-color: var(--border); color: var(--text-dim); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Avatars ──────────────────────────────────────────────────────────────── */

.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--bg);
  border: 1px solid var(--border);
}
.avatar-sm { width: 20px; height: 20px; font-size: 8.5px; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.avatar-xl { width: 76px; height: 76px; font-size: 26px; }

.avatar-stack { display: flex; }
.avatar-stack .avatar:not(:first-child) { margin-left: -7px; }

/* ── Board ────────────────────────────────────────────────────────────────── */

.board {
  display: grid; grid-template-columns: repeat(5, minmax(255px, 1fr));
  gap: 12px; align-items: start;
  overflow-x: auto; padding-bottom: 10px;
}

.board-col {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 11px; min-height: 130px;
  box-shadow: var(--panel-shadow, none);
  transition: border-color .14s, background .14s, box-shadow .14s;
}

/* While a card is in flight the target column opens up so it is easy to hit. */
.board-col.drag-over {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.board-col.drag-over .board-col-body { padding-bottom: 78px; }
.board-col.drag-over .drop-hint { display: flex; }

.board-col-body { transition: padding-bottom .14s ease; }

.drop-hint {
  display: none; align-items: center; justify-content: center;
  height: 66px; margin-top: 6px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  color: var(--text-faint); font-size: 12px;
  background: rgba(255, 255, 255, .015);
}

.board-col-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 11px; padding: 0 3px;
}
.board-col-name { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.board-col-count {
  background: var(--panel-2); color: var(--text-faint);
  padding: 1px 7px; border-radius: 100px; font-size: 10.5px; font-weight: 600;
}
.board-col-add {
  background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: var(--r-xs);
  transition: background .12s, color .12s;
}
.board-col-add:hover { background: var(--panel-2); color: var(--text); }

.task {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-bottom: 9px;
  cursor: grab; overflow: hidden;
  box-shadow: var(--panel-shadow, none);
  transition: border-color .12s, transform .08s, box-shadow .12s;
}
.task:hover {
  border-color: var(--border-strong);
  box-shadow: var(--panel-shadow-hover, none);
}
.task:active { cursor: grabbing; }
.task.dragging { opacity: .35; }

.task-drop-line { height: 2px; background: var(--text-dim); border-radius: 2px; margin: 6px 2px; }

.task-image { width: 100%; height: 92px; object-fit: cover; display: block; }
.task-image-placeholder { width: 100%; height: 62px; display: block; }

.task-body { padding: 10px 11px 11px; }
/* Title and timer on one line: the title takes what is left, the timer keeps its own width
   and never wraps under it. */
.task-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.task-head .task-title { flex: 1; min-width: 0; margin-bottom: 0; }
.task-head .timer-bar { margin-top: -2px; flex-shrink: 0; }
.task-head .timer-row { justify-content: flex-end; }

.task-title { font-size: 13px; font-weight: 550; line-height: 1.35; margin-bottom: 8px; }

.task-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-faint);
}
.task-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-soft);
}
.assign-me { font-size: 11px; padding: 2px 8px; white-space: nowrap; }

.timer-bar { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.timer-row { display: flex; align-items: center; gap: 6px; }
.timer-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 100px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
}
.timer-chip .tracking-who { font-family: var(--font); max-width: 74px; }
.timer-mine { background: var(--red-dim); color: var(--danger-ink); border: 1px solid var(--danger-edge); }

.due-flag { font-size: 10.5px; padding: 1px 6px; border-radius: var(--r-xs); }
.due-over { background: var(--red-dim); color: var(--danger-ink); }
.due-soon { background: var(--warn-bg); color: var(--gold); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; padding: 8px 10px;
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: rgba(255, 255, 255, .015); }
.table-wrap { overflow-x: auto; }

.row-muted td { opacity: .5; }
.row-muted .strike { text-decoration: line-through; }

.link-cell { cursor: pointer; font-weight: 500; }
.link-cell:hover { color: var(--white); text-decoration: underline; }

/* ── Modals ───────────────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  animation: fade .14s ease;
}

.modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  width: 100%; max-width: 560px;
  animation: rise .16s cubic-bezier(.2, .8, .3, 1);
}
.modal-wide { max-width: 1080px; }
.modal-narrow { max-width: 420px; }

.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 15px; font-weight: 620; margin: 0; flex: 1; }
.modal-body { padding: 18px; }
.modal-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-top: 1px solid var(--border);
}
.modal-foot .spacer { flex: 1; }

.split { display: grid; grid-template-columns: 1fr 380px; gap: 0; }
.split-main { padding: 18px; border-right: 1px solid var(--border); min-width: 0; }
.split-side {
  padding: 18px; background: var(--panel-2);
  border-radius: 0 0 var(--r-lg) 0;
  display: flex; flex-direction: column; min-width: 0;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ── Activity feed ────────────────────────────────────────────────────────── */

.activity { flex: 1; overflow-y: auto; max-height: 460px; margin: -4px -4px 12px; padding: 4px; }

.activity-item {
  display: flex; gap: 9px; padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.activity-item:last-child { border-bottom: none; }
.activity-main { flex: 1; min-width: 0; }
.activity-head {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 12px; margin-bottom: 3px;
}
.activity-who { font-weight: 600; }
.activity-when { color: var(--text-faint); font-size: 11px; }
.activity-note { font-size: 12.5px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; }
.activity-img {
  margin-top: 7px; max-width: 100%; border-radius: var(--r-xs);
  border: 1px solid var(--border); cursor: zoom-in; display: block;
}

.composer { border-top: 1px solid var(--border); padding-top: 11px; }
.composer.dropping { outline: 1px dashed var(--border-strong); outline-offset: 4px; border-radius: var(--r-sm); }
.composer-row { display: flex; gap: 7px; align-items: flex-end; margin-top: 7px; }

/* ── Calendar ─────────────────────────────────────────────────────────────── */

/* The calendar takes the height it is given rather than a fixed one: a month with six
   rows and a week from 07:00 to 22:00 both fill the window instead of ending halfway. */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  grid-auto-rows: minmax(var(--cal-row, 104px), auto);
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.cal-dayname {
  background: var(--panel); padding: 7px 9px;
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .09em; text-transform: uppercase;
}
.cal-cell {
  background: var(--panel); padding: 6px 7px; overflow: hidden;
  cursor: pointer; transition: background .12s;
}
.cal-cell:hover { background: var(--panel-2); }
.cal-cell.other-month { background: var(--sunken); }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--text-dim); }
.cal-cell.other-month .cal-daynum { color: var(--text-faint); opacity: .5; }
.cal-cell.today { background: var(--raised); box-shadow: inset 0 0 0 1px var(--raised-edge); }
.cal-daynum { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.cal-cell.today .cal-daynum { color: var(--text); }

.cal-item {
  font-size: 10.5px; padding: 2px 5px; border-radius: 4px;
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}

.week-grid {
  display: grid; grid-template-columns: 52px repeat(7, minmax(96px, 1fr));
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.week-scroll { overflow-x: auto; overflow-y: hidden; }

/* The page claims the window and hands what is left to the grid, so the day fills the screen
   without anyone having to guess how tall the header is. The hours then divide that space
   between them, which is why an event is positioned as a percentage rather than in pixels. */
.calendar-page {
  display: flex; flex-direction: column;
  height: calc(100vh - 96px); min-height: 460px;
}
.calendar-page .week-scroll,
.calendar-page .cal-grid { flex: 1; min-height: 0; }
.calendar-page .cal-grid { grid-auto-rows: minmax(0, 1fr); }
.week-head {
  background: var(--panel); padding: 8px 6px; text-align: center;
  border-bottom: 1px solid var(--border); border-left: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 2;
}
.week-head-day { font-size: 10px; color: var(--text-faint); letter-spacing: .09em; text-transform: uppercase; }
.week-head-num { font-size: 15px; font-weight: 600; }
.week-head.today .week-head-num { color: var(--blue); }

.week-hours {
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--border);
}
.week-hour-label {
  flex: 1; min-height: 26px; font-size: 10px; color: var(--text-faint);
  text-align: right; padding: 2px 7px 0 0; border-bottom: 1px solid var(--border-soft);
}

.week-day {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--border-soft);
}
.week-slot { flex: 1; min-height: 26px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.week-slot:hover { background: var(--panel-2); }
.week-slot.sel-start { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

.week-event {
  position: absolute; left: 3px; right: 3px;
  border-radius: 5px; padding: 3px 6px; overflow: hidden;
  font-size: 10.5px; line-height: 1.3; cursor: pointer; z-index: 3;
  border-left: 3px solid;
}
.week-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-event-time { opacity: .8; font-size: 9.5px; }

.week-allday { padding: 3px; border-left: 1px solid var(--border-soft); background: var(--panel); border-bottom: 1px solid var(--border); min-height: 26px; }

/* ── Notifications ────────────────────────────────────────────────────────── */

/* Where the stack sits is each person's own choice; the class says which of six corners.
   Stacking direction follows: at the top the newest goes underneath the older ones, at the
   bottom it goes above them, so the newest is always the one nearest the edge. */
.toast-stack {
  position: fixed; z-index: 300;
  display: flex; gap: 11px;
  max-width: 390px; width: calc(100% - 40px);
  pointer-events: none;
}
.toast-stack > * { pointer-events: auto; }

.toast-stack.bottom-right  { right: 20px; bottom: 20px; flex-direction: column-reverse; }
.toast-stack.bottom-left   { left: 20px;  bottom: 20px; flex-direction: column-reverse; }
.toast-stack.bottom-centre { left: 50%; transform: translateX(-50%); bottom: 20px; flex-direction: column-reverse; }
.toast-stack.top-right     { right: 20px; top: 68px; flex-direction: column; }
.toast-stack.top-left      { left: 20px;  top: 68px; flex-direction: column; }
.toast-stack.top-centre    { left: 50%; transform: translateX(-50%); top: 68px; flex-direction: column; }

/* A passing notice is lighter than one that needs answering. */
.toast.notice { background: var(--panel); opacity: .97; }

.toast {
  background: var(--panel-2); border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent, var(--blue));
  border-radius: var(--r-md); padding: 15px 16px;
  box-shadow: var(--shadow-lift);
  animation: toast-in .28s cubic-bezier(.2, .9, .3, 1);
  display: flex; gap: 12px; align-items: flex-start;
}
.toast-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: color-mix(in srgb, var(--accent, var(--blue)) 18%, transparent);
}
.toast-main { flex: 1; min-width: 0; }
.toast-title { font-size: 14px; font-weight: 650; margin-bottom: 4px; line-height: 1.35; }
.toast-detail { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
.toast-when { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.toast-close {
  background: none; border: none; color: var(--text-faint);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px;
  border-radius: var(--r-xs);
}
.toast-close:hover { color: var(--text); background: var(--panel-3); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(32px) scale(.96); }
  to { opacity: 1; transform: none; }
}

.bell { position: relative; }
.badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--red); color: var(--white);
  font-size: 9px; font-weight: 700; min-width: 15px; height: 15px;
  border-radius: 100px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.drawer-backdrop { position: fixed; inset: 0; z-index: 190; background: rgba(5, 5, 6, .5); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 195;
  width: 340px; max-width: 92vw;
  background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  animation: slide-in .18s cubic-bezier(.2, .8, .3, 1);
}
.drawer-head {
  padding: 15px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 9px;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.drawer-section {
  font-size: 10px; font-weight: 700; color: var(--text-faint);
  letter-spacing: .11em; text-transform: uppercase; margin: 16px 0 8px;
}
.drawer-section:first-child { margin-top: 0; }

.notif-row {
  display: flex; gap: 8px; padding: 9px 0;
  border-bottom: 1px solid var(--border-soft); font-size: 12.5px;
}
.notif-row:last-child { border-bottom: none; }

/* ── Charts ───────────────────────────────────────────────────────────────── */

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.bar-label { width: 108px; font-size: 12.5px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; }
.bar-track { flex: 1; height: 21px; background: var(--panel-2); border-radius: var(--r-xs); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-xs); transition: width .3s ease; }
.bar-value { width: 78px; text-align: right; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* Budget figures carry a currency and a limit — "€ 270 / € 30.000" needs room to stay on
   one line, and wrapping a number is how a reader loses track of which half is which. */
.bar-value.wide { width: 150px; white-space: nowrap; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; }
.stat {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 15px 16px;
}
.stat-value { font-size: 27px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.stat-label { font-size: 11px; color: var(--text-faint); margin-top: 3px; }

.progress-track { height: 6px; background: var(--panel-2); border-radius: 100px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--text-dim); border-radius: 100px; }

/* ── Login gate ───────────────────────────────────────────────────────────── */

.gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background:
    radial-gradient(1000px 620px at 50% -12%, var(--raised) 0%, var(--bg) 62%);
}
.gate-card {
  width: 100%; max-width: 400px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 28px 26px;
  animation: rise .22s cubic-bezier(.2, .8, .3, 1);
}
.gate-brand { text-align: center; margin-bottom: 22px; }
.gate-logo { height: 46px; width: auto; display: block; margin: 0 auto 10px; }
.gate-brand-name { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.gate-brand-sub {
  font-size: 9.5px; color: var(--text-faint);
  letter-spacing: .2em; text-transform: uppercase; margin-top: 3px;
}
.gate-switch {
  display: flex; gap: 3px; margin-bottom: 20px;
  background: var(--panel-2); padding: 3px; border-radius: var(--r-sm);
}
.gate-switch button {
  flex: 1; padding: 7px; border: none; background: none;
  color: var(--text-dim); font-size: 12.5px; font-weight: 550;
  border-radius: var(--r-xs); cursor: pointer;
}
.gate-switch button.on { background: var(--panel-3); color: var(--text); }

.alert {
  padding: 9px 11px; border-radius: var(--r-xs);
  font-size: 12.5px; margin-bottom: 14px; line-height: 1.5;
}
.alert-error { background: var(--red-dim); color: var(--danger-ink); border: 1px solid var(--danger-edge); }
.alert-ok { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-edge); }
.alert-info { background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border); }
.alert-warn { background: var(--warn-bg); color: var(--gold); border: 1px solid var(--gold); }

.avatar-picker { display: flex; align-items: center; gap: 12px; }
.avatar-drop {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--panel-2); border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 19px; color: var(--text-faint); overflow: hidden;
}
.avatar-drop img { width: 100%; height: 100%; object-fit: cover; }
.avatar-drop.dropping { border-color: var(--text-dim); background: var(--panel-3); }

/* A swatch on the theme buttons: the two looks shown rather than described. */
.theme-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1px solid var(--border-strong); flex-shrink: 0;
}
.theme-dot-dark { background: #0D0D0E; }
.theme-dot-light { background: #EEF2F6; }

/* ── Colour picking ───────────────────────────────────────────────────────── */

.colour-input {
  width: 46px; height: 30px; padding: 2px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-xs);
}
.colour-input.sm { width: 38px; height: 26px; }
.colour-input::-webkit-color-swatch-wrapper { padding: 0; }
.colour-input::-webkit-color-swatch { border: none; border-radius: 3px; }

.swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border);
}
.swatch.on { border-color: var(--panel); box-shadow: 0 0 0 2px var(--text-dim); }

/* Shows the chosen accent doing the three jobs it has, before it is saved. */
.accent-preview {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--border-soft);
}
.accent-btn {
  background: var(--p); color: var(--p-text);
  padding: 7px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
}
.accent-chip {
  background: var(--p); color: var(--p-text);
  padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600;
}
.accent-link { color: var(--p); font-size: 13px; font-weight: 500; }

/* ── Team sheet ───────────────────────────────────────────────────────────── */

/* Compact form controls, used by the sheet and the task picker's filter row. */
.input-sm, .select-sm { padding: 4px 8px; font-size: 12px; }

/* A spreadsheet, so the cells are tight and the inputs carry no chrome of their own. */
.sheet td { padding: 5px 6px; vertical-align: top; }
.sheet th { white-space: nowrap; }
.sheet .input, .sheet .select, .sheet .textarea {
  padding: 4px 7px; font-size: 12px; min-width: 0; width: 100%;
}
.sheet .textarea-sm { min-height: 34px; resize: vertical; line-height: 1.4; }

/* Give the free-text columns room to be typed in, and keep the rest to what it needs. */
.sheet th:nth-child(1), .sheet td:nth-child(1) { min-width: 130px; }
.sheet th:nth-child(2), .sheet td:nth-child(2) { width: 110px; }
.sheet th:nth-child(3), .sheet td:nth-child(3) { min-width: 210px; }
.sheet th:nth-child(4), .sheet td:nth-child(4) { min-width: 190px; }
.sheet th:nth-child(5), .sheet td:nth-child(5) { width: 120px; }
.sheet th:nth-child(6), .sheet td:nth-child(6) { width: 92px; }
.sheet th:nth-child(7), .sheet td:nth-child(7) { min-width: 180px; }
.sheet th:nth-child(8), .sheet td:nth-child(8) { min-width: 220px; }
/* The category table wants the sheet's tight cells but not the team overview's column
   widths, which would leave its name column at 110px and a gap across the rest. */
.cat-sheet { max-width: 820px; }
.cat-sheet th, .cat-sheet td { min-width: 0; width: auto; }
.cat-sheet th:nth-child(1), .cat-sheet td:nth-child(1) { width: 62px; min-width: 0; }
.cat-sheet th:nth-child(2), .cat-sheet td:nth-child(2) { width: auto; min-width: 0; }
.cat-sheet th:nth-child(3), .cat-sheet td:nth-child(3) { width: 140px; min-width: 0; }
.cat-sheet th:nth-child(4), .cat-sheet td:nth-child(4) { width: 90px; min-width: 0; }
.cat-sheet th:nth-child(5), .cat-sheet td:nth-child(5) { width: 62px; min-width: 0; }

.sheet .input.locked { color: var(--text-faint); background: var(--panel-3); cursor: default; }
.sheet td.right .input { text-align: right; max-width: 78px; margin-left: auto; }
.sheet tfoot td { border-top: 1px solid var(--border); padding-top: 9px; }
.sheet tr.row-closed td { opacity: .55; }
.sheet th.sortable { cursor: pointer; user-select: none; }
.sheet th.sortable:hover { color: var(--text); }

/* ── Who is on the clock ──────────────────────────────────────────────────── */

/* Hangs under the bar on the right. Fixed rather than absolute so it stays put while the
   page behind it scrolls, and capped in height because a busy studio would otherwise run
   it off the bottom of the screen. */
.timer-panel {
  width: 296px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-y: auto;
}

/* Opened from the bar: over the page, gone as soon as you close it. */
.timer-panel.floating {
  position: fixed; top: 58px; right: 14px; z-index: 70;
  max-height: min(70vh, 560px);
  box-shadow: var(--shadow);
}

/* Pinned: part of the layout. Sticks under the bar while the page scrolls past it. */
.timer-panel.pinned {
  position: sticky; top: 58px;
  margin: 20px 20px 20px 0;
  /* Down to the bottom of the screen: pinned it is a column, and a column that stops a
     third of the way down looks like something failed to load. */
  height: calc(100vh - 78px);
}

.timer-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 13px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--panel); border-radius: var(--r-md) var(--r-md) 0 0;
}

.timer-line {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 12px; border: 0; background: none; cursor: pointer;
  text-align: left; color: inherit; font-family: inherit;
  border-bottom: 1px solid var(--border-soft);
}
.timer-line:last-child { border-bottom: 0; }
.timer-line:hover { background: var(--panel-2); }

/* Name over task, both clipped: a long task title must not push the stopwatch off. */
.timer-line-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.timer-line-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-icon.on { background: var(--accent-soft); color: var(--accent); }

/* A little map of the screen: six cells, click the corner you want the pop-ups in. */
.position-grid {
  display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 26px);
  gap: 3px; padding: 4px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-xs); width: max-content;
}
.position-cell {
  border: 1px dashed var(--border-strong); border-radius: 3px;
  background: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.position-cell:hover { background: var(--panel-3); }
.position-cell.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.position-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.position-cell.on .position-dot { background: var(--accent); }

/* Flags are drawn, not typed — see Flag.razor. A thin outline keeps a mostly-white one
   (Japan) from dissolving into the chip behind it. */
.flag {
  display: inline-flex; width: 18px; height: 12px; flex-shrink: 0;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .18);
}
.flag svg { width: 100%; height: 100%; display: block; }

/* A switch, not a tick box. Same checkbox underneath — only the look changes, so it keeps
   its keyboard behaviour and its label. */
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 8px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 100px;
  background: var(--panel-3); border: 1px solid var(--border);
  transition: background .15s, border-color .15s;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-faint);
  transition: transform .15s, background .15s;
}
.switch input:checked + .switch-track {
  background: var(--accent); border-color: var(--accent);
}
.switch input:checked + .switch-track::after {
  transform: translateX(16px); background: var(--accent-text);
}
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--focus-ring); }
.switch input:disabled + .switch-track { opacity: .5; cursor: default; }

/* ── Tabs inside a page ───────────────────────────────────────────────────── */

/* Reuses .tab from the top bar, on a rail of its own so a page's sections do not read as
   another row of navigation. */
.subtabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border-soft); padding-bottom: 6px;
}
.subtabs::-webkit-scrollbar { display: none; }

/* ── The addresses an organisation answers on ─────────────────────────────── */

.host-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.host-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 6px 4px 10px; border-radius: 100px; font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--border);
}
/* The address you are reading this on, so it is obvious which one not to remove. */
.host-tag.on { border-color: var(--accent); background: var(--accent-soft); }

.host-x {
  border: 0; background: none; cursor: pointer; padding: 0 2px; line-height: 1;
  color: var(--text-faint); font-size: 15px;
}
.host-x:hover { color: var(--danger-ink); }

.host-add { display: inline-flex; gap: 4px; align-items: center; }

.logo-pair { display: flex; gap: 10px; flex-wrap: wrap; }
.logo-preview {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px;
  padding: 10px 12px; border-radius: var(--r-xs);
  background: var(--bg); border: 1px solid var(--border-soft);
}
.logo-preview img { height: 34px; width: auto; max-width: 160px; object-fit: contain; }

/* Each on the background it was drawn for, whatever theme the page itself is in. */
.logo-preview.on-dark { background: #0D0D0E; border-color: #2A2A2D; }
.logo-preview.on-dark .faint { color: #7A7A80; }
.logo-preview.on-light { background: #FFFFFF; border-color: #DCE4ED; }
.logo-preview.on-light .faint { color: #8496A8; }

/* ── Drop zone ────────────────────────────────────────────────────────────── */

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px 14px; text-align: center;
  border: 1px dashed var(--border); border-radius: 10px;
  background: var(--panel-2); transition: border-color .12s, background .12s;
}
.dropzone:focus-visible { outline: none; border-color: var(--text-dim); }
.dropzone.dropping { border-color: var(--text-dim); background: var(--panel-3); }
.dropzone.busy { opacity: .75; }
.dropzone-hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
.camera-view {
  width: 100%; max-width: 320px; border-radius: 8px; background: #000;
  transform: scaleX(-1);   /* a mirror is what people expect of themselves */
}

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.bold { font-weight: 650; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.flex { display: flex; align-items: center; gap: 8px; }
.flex-col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hidden { display: none !important; }

.popover {
  position: absolute; z-index: 120; min-width: 176px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 5px;
}
.popover button {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; background: none; border: none;
  color: var(--text); font-size: 12.5px; border-radius: var(--r-xs); cursor: pointer;
}
.popover button:hover { background: var(--panel-3); }
.popover-anchor { position: relative; display: inline-block; }

.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(5, 5, 6, .93);
  display: flex; align-items: center; justify-content: center;
  padding: 30px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); }

.role-block {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 12px; margin-bottom: 9px;
}
.role-question { font-size: 12px; color: var(--text-dim); margin-bottom: 7px; }

.list-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--r-xs); margin-bottom: 6px;
}

.spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--text-dim);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  .split-main { border-right: none; border-bottom: 1px solid var(--border); }
  .split-side { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .activity { max-height: 300px; }
}

@media (max-width: 1180px) {
  .tracking-strip { max-width: 30vw; }
  .tracking-who { max-width: 62px; }
}

@media (max-width: 820px) {
  .content { padding: 14px; }
  .board { grid-template-columns: repeat(5, 268px); }

  /* Brand and controls on the first row; tabs and the tracking strip get their own. */
  .topbar-right { order: 1; }
  /* On a narrow bar the icon alone has to carry the button. */
  .who-name, .logout-text { display: none; }
  .logout-icon { margin-right: 0; }
  .tabs { order: 2; flex: 0 0 100%; }
  .tracking-strip { order: 3; flex: 0 0 100%; max-width: none; }
  .tracking-strip:empty { display: none; }
  .form-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 0; }
  .modal { max-width: 100%; min-height: 100vh; border-radius: 0; border: none; }
  .split-side { border-radius: 0; }
  .topbar { padding: 9px 12px; gap: 10px; }
  .brand-sub { display: none; }
  .cal-cell { min-height: 74px; }
  /* Too narrow to place anything: one column, bottom of the screen, whatever was chosen. */
  .toast-stack, .toast-stack.top-left, .toast-stack.top-right, .toast-stack.top-centre,
  .toast-stack.bottom-left, .toast-stack.bottom-centre {
    right: 10px; bottom: 10px; left: 10px; top: auto;
    transform: none; max-width: none; width: auto;
    flex-direction: column-reverse;
  }
  .bar-label { width: 88px; }
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .table th, .table td { padding: 7px 6px; font-size: 12px; }
}


/* ── Relations ────────────────────────────────────────────────────────────── */

/* The .sheet widths were written for the rates table and its five fixed columns. These
   tables have their own counts, so the widths are handed back — with the same weight as
   the rules being overridden, or they would not take. */
.sheet.relation-sheet th, .sheet.relation-sheet td,
.sheet.detail-sheet th, .sheet.detail-sheet td,
.sheet.sale-sheet th, .sheet.sale-sheet td,
.sheet.quote-sheet th, .sheet.quote-sheet td,
.sheet.file-sheet th, .sheet.file-sheet td,
.sheet.task-sheet th, .sheet.task-sheet td,
.sheet.list-sheet th, .sheet.list-sheet td { width: auto; min-width: 0; }

/* A list an organisation keeps: the name is what it is about, so the name gets the room. */
.sheet.list-sheet { max-width: 940px; }
.sheet.list-sheet th:nth-child(1), .sheet.list-sheet td:nth-child(1) { width: 62px; }
.sheet.list-sheet th:nth-child(2), .sheet.list-sheet td:nth-child(2) { width: auto; min-width: 190px; }
.sheet.list-sheet .input { max-width: none; }

.sheet.detail-sheet td.prewrap { white-space: pre-wrap; }
.sheet.detail-sheet .textarea-sm { min-width: 190px; }
.sheet.sale-sheet .select, .sheet.list-sheet .select { max-width: none; }

/* A row you can open. The pointer says so; the tint says which one is open. */
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--panel-2); }
.table tr.row-on td { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }

/* Someone who has left, or a relation switched off: still there, no longer shouting. */
.panel.dimmed { opacity: .68; }

/* A switch with no label of its own, for a table cell or a toolbar. */
.switch.tight { margin-bottom: 0; gap: 6px; }
.switch.tight .switch-track { width: 32px; height: 18px; }
.switch.tight .switch-track::after { width: 12px; height: 12px; }
.switch.tight input:checked + .switch-track::after { transform: translateX(14px); }