@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/montserrat-variable-latin-9fa5e944.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/cormorant-garamond-300-latin-b0de3097.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #edebe6;
  --surface-3: #e7d9ce;
  --border: #dbdee3;
  --border-strong: #bfb5b0;
  --text: #040404;
  --text-2: #333333;
  --text-3: #4e4e4e;
  --text-mute: #6e6a64;
  --text-faint: #8a8580;
  --accent: #7a6a56;
  --accent-hover: #5c4f3f;
  --accent-fill: #c5b8a8;
  --accent-soft: #e7d9ce;
  --danger: #a32a20;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --track-label: 0.18em;
  --track-nav: 0.1em;
  --radius-sm: 2px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
}

.rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 48px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}

.rail-brand {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--accent-fill);
  width: 30px;
  text-align: center;
}

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}

.rail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
}

.rail-item:hover { background: var(--surface); border-color: var(--border); }
.rail-item.active { background: var(--accent-soft); border-color: var(--accent-fill); }

.shell-body { margin-left: 48px; }

.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 14px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.35rem;
}

.home-link { color: var(--text); text-decoration: none; }
.home-link:hover { color: var(--accent); }

.brand-divider { color: var(--border-strong); margin: 0 10px; font-weight: 300; }

.brand-sub {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.brand-icon { width: 16px; height: 16px; object-fit: contain; }
.rail-item .brand-icon { width: 22px; height: 22px; }
.emoji-icon { line-height: 1; }
.label-short { display: none; }

.nav-hamburger {
  display: none;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-logout-form { margin-left: auto; display: inline-flex; }
.nav-logout {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-decoration: none;
}

.content { padding: 28px 24px; max-width: 1400px; }

.page-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.4rem;
  margin: 0 0 16px;
}

.home-list { list-style: none; margin: 0; padding: 0; }
.home-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--text);
  text-decoration: none;
}
.not-ported { color: var(--text-mute); }

.drawer-root { display: none; }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(4, 4, 4, 0.35);
}
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 232px;
  z-index: 80;
  overflow-y: auto;
  padding: 16px 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
}
.drawer-root.open .drawer { transform: translateX(0); }
.drawer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
}
.drawer-section-header {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-mute);
  padding: 0 16px 8px;
}
.drawer-list { list-style: none; margin: 0; padding: 0; }
.drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: var(--text-2);
  text-decoration: none;
}
.drawer-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.login-card {
  width: min(360px, calc(100% - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 24px;
}
.login-card label { display: block; margin-bottom: 12px; font-size: 0.8rem; color: var(--text-2); }
.login-card input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  font: inherit;
}
.login-card input[type="submit"], .login-card button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.login-error { color: var(--danger); }

/* ------------------------------------------------------------ sub-nav -- */

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: -8px 0 20px;
  border-bottom: 1px solid var(--border);
}
.subnav-item {
  padding: 6px 0 8px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--text-mute);
  text-decoration: none;
}
.subnav-item:hover { color: var(--accent); }
.subnav-item.active { color: var(--text); border-bottom-color: var(--accent); }
.subnav-count, .drawer-count {
  margin-left: 4px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.drawer-count { margin-left: auto; }
.drawer-section-spaced { padding-top: 16px; }

/* ------------------------------------------------------------- galleries -- */

.gallery-count {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-mute);
}

.loading, .empty {
  padding: 40px;
  text-align: center;
  color: var(--text-mute);
  font-size: 0.92rem;
}

.back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--text-mute);
  text-decoration: none;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
}
.back:hover { color: var(--accent); }

.view-hint { margin: -6px 0 14px; color: var(--text-3); font-size: 0.88rem; }
.hint-link { color: var(--accent); }

.controls { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.filter-groups { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.filter-groups > * { flex: 1 1 200px; min-width: 0; }
turbo-frame > .filter-groups { margin-bottom: 20px; }
.controls > .search-group { max-width: 320px; }

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  --chip-bg: var(--surface);
  --chip-border: var(--border);
  --chip-accent: var(--accent);
}
.group-status { --chip-bg: #edf0f4; --chip-border: #cfd8e3; --chip-accent: #4a5d75; }
.group-region { --chip-bg: #f1eef4; --chip-border: #ddd5e4; --chip-accent: #6b5b7b; }
.group-audit { --chip-bg: #edf1ec; --chip-border: #cfdccb; --chip-accent: #3f6b4a; }
.group-year { --chip-bg: #eaf1f1; --chip-border: #c9dcdc; --chip-accent: #3f6b6b; }
.filter-title {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--chip-accent);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-select {
  width: 100%;
  background-color: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  /* 16px minimum stops iOS Safari zooming the page when the control is focused. */
  font-size: max(0.85rem, 16px);
  padding: 9px 32px 9px 12px;
  text-overflow: ellipsis;
}
select.filter-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234e4e4e' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
}
.filter-select:hover, .filter-select:focus { outline: none; border-color: var(--chip-accent); }
.filter-select option:disabled { color: var(--text-faint); }
/* Search boxes (shared/_search_field): a clear x inside the right edge, shown only while the box holds text.
   The native cancel button appears only on hover, so it is hidden everywhere. */
.search-field { position: relative; }
.search-field input[type="search"] { width: 100%; padding-right: 32px; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-clear { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-mute); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.search-clear:hover { background: var(--surface-2); color: var(--text); }
.search-field input:placeholder-shown + .search-clear { display: none; }
.ms-search-wrap { min-width: 260px; }
.ad-search-wrap { flex: 1; min-width: 180px; }
.atlas .at-search-wrap { flex: 1 1 280px; min-width: 200px; }
.plain-button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  cursor: pointer;
}
@media (min-width: 769px) {
  .filter-select { font-size: 0.85rem; }
}
@media (max-width: 768px) {
  .filter-groups { flex-direction: column; }
  .filter-groups > * { flex: 0 0 auto; }
}

.year-group { margin-bottom: 18px; }
.year-header {
  position: sticky;
  top: 52px;
  z-index: 2;
  background: var(--bg);
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding: 10px 0 7px;
  border-bottom: 1px solid var(--border-strong);
}
.year-header-count { font-size: 0.72rem; color: var(--text-faint); letter-spacing: 0; }
.year-heading {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 24px 0 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.row-thumb, .photo-img, .tile-cover {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.gallery-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.gallery-row:hover { background: var(--surface-2); }
.row-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.row-region {
  flex-shrink: 0;
  width: 66px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-region.region-unset { color: var(--text-faint); }
.row-client {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-season { flex-shrink: 0; font-size: 0.8rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.row-count {
  flex-shrink: 0;
  width: 88px;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .row-season { display: none; }
  .row-count { width: auto; }
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: -8px 0 18px;
  color: var(--text-3);
  font-size: 0.92rem;
}
.meta-region { color: var(--text-2); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }

.tile {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s ease;
}
.tile:hover { border-color: var(--border-strong); }
.tile-cover { aspect-ratio: 1 / 1; overflow: hidden; position: relative; }
.tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.tile-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.tile-placeholder::after {
  content: "No image";
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-faint);
}
.tile-caption { padding: 12px 14px 14px; line-height: 1.4; }
.tile-caption .line { font-size: 0.82rem; color: var(--text-3); }
.tile-caption .line.strong { font-weight: 600; color: var(--text); font-size: 0.9rem; }

.photo-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photo-open img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.photo-name { margin-top: 6px; font-size: 0.85rem; color: var(--text-2); }
.download { display: inline-block; margin-top: 6px; font-size: 0.8rem; color: var(--text-mute); text-decoration: none; }
.download:hover { color: var(--text); }

.heart-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.heart {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: transform 0.1s ease;
}
.heart:hover { transform: scale(1.15); }
.heart path { fill: none; stroke: #fff; }
.heart.active { filter: drop-shadow(0 1px 3px rgba(224, 36, 94, 0.6)); }
.heart.active path { fill: #e0245e; stroke: #e0245e; }

/* The lightbox stays dark on purpose: a photo is viewed full-bleed and a cream
   surround would cast a colour onto it. */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; opacity: 0; transition: opacity 0.2s ease; }
.lightbox img.ready { opacity: 1; }
.lightbox-loader {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.lightbox-loader[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.lightbox-close:hover { opacity: 1; }

@media (max-width: 767px) {
  .rail { display: none; }
  .shell-body { margin-left: 0; }
  .label-full { display: none; }
  .label-short { display: inline; }
  .nav-hamburger { display: flex; }
  .drawer-root { display: block; }
  .drawer-root:not(.open) .drawer-backdrop { display: none; }
}

/* ------------------------------------------------- stars row (gallery) -- */

.stars-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: -10px 0 18px;
  color: var(--text-3);
  font-size: 0.88rem;
}
.stars-form { margin: 0; }
.edit-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.edit-btn:hover { border-color: var(--border-strong); }
.stars-error { color: var(--danger); }

/* ---------------------------------------------------- database (schema) -- */

:root {
  --ok: #3f6b4a;
  --ok-bg: #edf1ec;
  --warn: #8a5a12;
  --warn-bg: #f6ecd9;
}

.schema {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  margin-bottom: 18px;
}
.schema-head, .record-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.schema-head::-webkit-details-marker, .record-head::-webkit-details-marker { display: none; }
.schema-head:focus-visible, .record-head:focus-visible, .more-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.chevron {
  display: inline-block;
  color: var(--text-mute);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}
details[open] > summary .chevron { transform: rotate(90deg); }
.schema-title {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-mute);
}
.schema-where { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--text-2); }
.schema-meta { margin-left: auto; font-size: 0.82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.schema-cols {
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  gap: 6px 18px;
  margin: 0;
  padding: 4px 14px 14px 38px;
  font-size: 0.86rem;
}
.schema-cols dt { display: flex; align-items: baseline; gap: 8px; }
.schema-cols code { font-family: ui-monospace, monospace; color: var(--text); }
.schema-cols dd { margin: 0; color: var(--text-2); }
.type { font-size: 0.66rem; font-weight: 600; letter-spacing: var(--track-label); color: var(--text-mute); }
.type.key { color: var(--accent); }

.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 16px; }
.filter-row > .search-group { flex: 1 1 260px; min-width: 0; }

.records {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.record + .record { border-top: 1px solid var(--border); }
.record-head:hover, .record details[open] > .record-head { background: var(--surface-2); }
.record-head {
  display: grid;
  grid-template-columns: 14px minmax(120px, 1.2fr) minmax(120px, 1.5fr) 100px 70px 100px 70px;
  align-items: baseline;
}
.who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record .gallery, .record .date, .record .region {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}
.record .date, .record .files { font-variant-numeric: tabular-nums; }
.record .region { font-family: ui-monospace, monospace; font-size: 0.82rem; }
.record .files { text-align: right; color: var(--text-2); font-size: 0.9rem; }
.unit { color: var(--text-mute); font-size: 0.78rem; }
.status {
  justify-self: start;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-3);
}
.status-ok { background: var(--ok-bg); color: var(--ok); }
.status-warn { background: var(--warn-bg); color: var(--warn); }
.fields {
  display: grid;
  grid-template-columns: minmax(200px, max-content) 1fr;
  gap: 5px 18px;
  margin: 0;
  padding: 6px 14px 14px 40px;
  background: var(--surface-2);
  font-size: 0.86rem;
}
.fields dt { font-family: ui-monospace, monospace; color: var(--text-mute); cursor: help; }
.fields dd { margin: 0; color: var(--text); font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.fields dd.empty { color: var(--text-mute); }
.records > .empty, .more { padding: 16px; color: var(--text-3); font-size: 0.9rem; text-align: left; }
.more-btn {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.85rem;
  text-decoration: none;
}

/* Phones: the row keeps who, status and file count; the rest is one click away. */
@media (max-width: 700px) {
  .record-head { grid-template-columns: 14px 1fr auto auto; }
  .record .gallery, .record .date, .record .region { display: none; }
  .schema-cols, .fields { grid-template-columns: 1fr; padding-left: 14px; }
  .schema-cols dd, .fields dd { margin-bottom: 6px; }
}

/* ---------------------------------------------------------------- to-dos -- */

.todo-section { margin-bottom: 40px; }
.section-title {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.run-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.run-pill {
  font-size: 0.72rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  color: var(--text-3);
}
.stat-row { display: flex; align-items: baseline; gap: 8px; font-size: 0.82rem; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1.05;
}
.stat-lbl { color: var(--text-3); }
.divider { border-top: 1px solid var(--border); margin: 20px 0; }
.state-msg { color: var(--text-3); font-size: 0.92rem; padding: 40px 0; }
.state-submsg { font-size: 0.8rem; color: var(--text-faint); margin-top: 4px; }
.todo-error { margin: 0; font-size: 0.8rem; color: var(--danger); }
.todo-error:empty { display: none; }
#add-error { margin: -6px 0 14px; }

.add-row { display: flex; gap: 10px; margin-bottom: 14px; }
.add-input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: max(0.9rem, 16px);
  padding: 11px 14px;
}
.add-input:focus { outline: none; border-color: var(--accent); }
.add-row .todo-btn { padding: 0 20px; font-size: 0.85rem; }

.sort-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: var(--text-3);
}
.sort-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  padding: 4px 8px;
}

.todo-list { display: flex; flex-direction: column; gap: 10px; }
/* The empty message is always in the list and only shows while no card is. */
.todo-list:has(.todo-card) .todo-empty { display: none; }
.todo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.todo-row { display: flex; align-items: center; gap: 14px; }
/* The text column: the meta line (when, who, project chip) above the text (#498). */
.todo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.todo-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.todo-project { margin-top: 0; }
.todo-project-link { text-decoration: none; text-transform: none; letter-spacing: 0; color: var(--accent); }
.todo-project-link:hover { text-decoration: underline; }
.todo-project-missing { text-transform: none; letter-spacing: 0; }
.todo-card-done { opacity: 0.6; }
.todo-card-done .todo-text { text-decoration: line-through; }
.todo-check { display: contents; }
.todo-checkbox { flex-shrink: 0; width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
.todo-text {
  min-width: 0;
  font-size: 0.9rem;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A row with comments opens its thread when clicked (thread_controller.js#rowClick). */
.todo-row:has(.todo-comment-btn span:not(:empty)) { cursor: pointer; }
.todo-date { flex-shrink: 0; font-size: 0.74rem; color: var(--text-3); white-space: nowrap; }
.todo-date > div { white-space: normal; }
.todo-edit-btn, .todo-delete-btn, .todo-comment-btn {
  flex-shrink: 0;
  height: 26px;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  font: inherit;
  font-size: 0.74rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-mute);
  cursor: pointer;
}
.todo-edit-btn:hover, .todo-comment-btn:hover, .todo-comment-btn.is-open { color: var(--text); background: var(--surface-2); }
.todo-delete-btn:hover { color: var(--danger); border-color: var(--danger); }

.todo-edit { display: flex; align-items: flex-start; gap: 14px; }
.todo-edit[hidden], .add-row[hidden], .todo-row[hidden], .thread-panel[hidden] { display: none; }
.todo-edit-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: max(0.9rem, 16px);
  padding: 8px 10px;
  resize: vertical;
}
.todo-edit-input:focus { outline: none; border-color: var(--accent); }
.todo-edit-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.todo-btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}
.todo-btn-save { background: var(--accent); border-color: var(--accent); color: #fff; }
.todo-btn-save:hover { background: var(--accent-hover); }
.todo-btn-discard { background: none; border-color: var(--border); color: var(--text-mute); }
.todo-btn-discard:hover { color: var(--text); border-color: var(--border-strong); }

.thread { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.thread-msg { margin: 0; font-size: 0.8rem; color: var(--text-3); }
.thread-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.comment-row { display: flex; align-items: center; gap: 12px; }
.comment-row[hidden] { display: none; }
.thread-meta { flex-shrink: 0; font-size: 0.72rem; color: var(--text-3); white-space: nowrap; text-align: right; }
.thread-body { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.thread-form { display: flex; gap: 10px; align-items: flex-start; }
.thread-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: max(0.85rem, 16px);
  padding: 8px 10px;
  resize: vertical;
}
.thread-input:focus { outline: none; border-color: var(--accent); }
.thread-btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.thread-btn:hover { background: var(--accent-hover); }

@media (max-width: 767px) {
  .todo-row { flex-wrap: wrap; }
  .todo-body { flex-basis: 60%; }
  .comment-row { flex-wrap: wrap; }
  .thread-body { flex-basis: 60%; }
}

/* ------------------------------------------------------------ week ahead -- */

:root {
  --ok-border: #c3dccb;
  --warn-border: #e2d2b4;
  --danger-bg: #f6e7e5;
  --danger-border: #e5c6c2;
  --info: #4a5d75;
  --info-bg: #edf0f4;
  --info-border: #cfd8e3;
  /* Bright marker fills (dots, stripes, badges, chips), not for text; use --danger/--warn/--info for ink.
     The -on tokens are the text drawn on a fill. */
  --sev-critical: #dc2626;
  --sev-warning: #f59e0b;
  --sev-info: #2563eb;
  --sev-critical-on: #fff;
  --sev-warning-on: #1f1300; /* near-black: white on amber fails contrast */
  --sev-info-on: #fff;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.week-ahead { max-width: 760px; margin: 0 auto; }
.week-ahead .run-row { align-items: center; gap: 10px; }
.refresh-btn {
  font-size: 0.72rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  color: var(--text-2);
  text-decoration: none;
}
.refresh-btn:hover { border-color: var(--border-strong); }

.panel { background: var(--surface); border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 16px; }
.panel-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-2);
  margin: 0 0 10px;
}
.panel-note { font-size: 0.78rem; color: var(--text-mute); margin: 8px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.panel-error { font-size: 0.85rem; color: var(--danger); margin: 0; overflow-wrap: anywhere; }
.rows { list-style: none; margin: 0; padding: 0; }

.sess-totals { font-size: 0.85rem; color: var(--text-2); margin: 0 0 8px; line-height: 1.45; }
.sess-day { margin-top: 12px; }
.day-title { font-size: 0.82rem; font-weight: 600; color: var(--text); margin: 0 0 2px; }
.sess-row { padding: 8px 0; border-top: 1px solid var(--border); }
.sess-day .sess-row:first-child { border-top: none; }
.sess-body { min-width: 0; }
.sess-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sess-top > turbo-frame, .sess-top > .info-pop { flex: none; }
.sess-title {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.sess-title:hover { text-decoration: underline; }
.sess-region { margin-right: 4px; font-size: 0.75rem; font-weight: 400; color: var(--text-mute); }
.sess-meta { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; line-height: 1.4; overflow-wrap: anywhere; }
.sess-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

.chip {
  font-size: 0.68rem;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--text-3);
}
.chip.is-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }

/* The weather chip: symbol + start temperature, tinted by risk. */
.wchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  min-height: 24px;
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  background: var(--info-bg);
  color: var(--info);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.wchip.is-none { color: var(--text-mute); background: var(--surface); border-color: var(--border); }
.wchip.is-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.wchip.is-bad { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.wchip.low { border-style: dashed; opacity: 0.65; }
.wchip:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }
.wsym { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.wsym .wind { opacity: 0.85; }

/* Popover (the popover controller positions .info-panel). */
.info-pop { display: inline-flex; align-items: center; cursor: help; }
.info-panel {
  position: fixed;
  z-index: 50;
  width: min(280px, calc(100vw - 16px));
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: var(--text-2);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  white-space: normal;
  cursor: auto;
}
.info-panel[hidden] { display: none; }
.info-panel .place { margin-bottom: 6px; }
.info-panel .coords { color: var(--text-mute); font-size: 0.9em; }
.info-panel .pop-head { margin-bottom: 4px; }
.info-panel .reasons { margin: 4px 0 0; padding-left: 16px; }
.info-panel .reasons.is-warn { color: var(--warn); }
.info-panel .reasons.is-bad { color: var(--danger); }
.info-panel .low-note, .info-panel .fetched { margin-top: 4px; color: var(--text-mute); }
.info-panel .hours { max-height: 180px; overflow-y: auto; margin-top: 6px; }
.info-panel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.info-panel th { text-align: left; font-weight: 600; color: var(--text-mute); }
.info-panel th, .info-panel td { padding: 1px 4px 1px 0; white-space: nowrap; }

/* Trello card modal: a <dialog> around a Turbo Frame. */
.card-modal {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  max-width: 720px;
  width: calc(100% - 20px);
  max-height: 85vh;
  overflow-y: auto;
}
.card-modal::backdrop { background: rgba(4, 4, 4, 0.35); }
.card-modal-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.card-modal turbo-frame > .modal-state { padding: 20px 22px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-breadcrumb { color: var(--text-mute); font-size: 0.78rem; letter-spacing: 0.02em; }
.modal-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 8px;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); border-color: var(--border-strong); }
.modal-title { font-size: 1rem; font-weight: 600; margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card-link { font-size: 0.74rem; font-weight: 400; color: var(--accent); }
.modal-state { color: var(--text-mute); font-size: 0.85rem; padding: 18px 0; }
.modal-state p { margin: 0; }
.modal-state-note { margin-top: 6px; color: var(--text-mute); font-size: 0.78rem; }
.modal-state-error { color: var(--danger); }
.card-meta { display: grid; grid-template-columns: 90px 1fr; gap: 3px 10px; font-size: 0.82rem; }
.meta-lbl { color: var(--text-mute); }
.modal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.view-toggle { display: flex; }
.view-toggle a {
  border: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 0.75rem;
  padding: 3px 10px;
  text-decoration: none;
}
.view-toggle a + a { border-left: none; }
.view-toggle a.active { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.filter-toggle { display: flex; align-items: center; gap: 5px; color: var(--text-mute); font-size: 0.75rem; text-decoration: none; }
.block + .block { margin-top: 10px; }
.block-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.74rem;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.block-loc { text-transform: none; letter-spacing: 0; }
.slot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.slot-row { padding: 3px 8px; border-left: 3px solid transparent; }
.slot-booked { border-left-color: var(--ok); }
.slot-cancelled { border-left-color: var(--danger); }
.slot-raw {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.slot-raw del { opacity: 0.75; }
.slot-raw .slot-empty { color: var(--text-faint); font-style: italic; }
.modal-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-mute);
  font-size: 0.74rem;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.stale-flag { color: var(--danger); }

@media (max-width: 600px) {
  .card-meta { grid-template-columns: 1fr; }
}

/* Week Ahead, admin halves: the Backend chip, the folds, the pipeline, steps, backup. */
.backend-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--surface);
  color: var(--text);
}
.backend-chip .dot { margin-top: 0; }
.backend-chip.is-ok { border-left-color: var(--ok); background: var(--ok-bg); }
.backend-chip.is-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.chip-go { margin-left: auto; font-size: 0.72rem; font-weight: 400; color: var(--text-mute); }
.half-title {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text);
  margin: 8px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-fill);
}
.backend-title { margin-top: 32px; scroll-margin-top: 12px; }
.verdict-sub { font-size: 0.82rem; color: var(--text-2); margin: 0 0 6px; line-height: 1.45; overflow-wrap: anywhere; }
.panel-count { margin-left: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-mute); }
.foot { margin: -6px 0 0; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { font-size: 0.85rem; color: var(--text-2); padding: 3px 0; line-height: 1.45; overflow-wrap: anywhere; }
.lines li.sub { padding-left: 16px; color: var(--text-3); font-size: 0.8rem; }

.src-row { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.src-row:first-child { border-top: none; }
.src-body { min-width: 0; flex: 1; }
.src-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.src-name { font-size: 0.88rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.src-meta { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; overflow-wrap: anywhere; line-height: 1.4; }
.src-list { margin-top: 6px; }

.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--text-faint); }
.dot.is-ok { background: var(--ok); }
.dot.is-calm { background: var(--info); }
.dot.is-warn { background: var(--warn); }
.dot.is-bad { background: var(--danger); }
.chip.is-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.chip.is-calm { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.chip.is-bad { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }

.fold > summary { cursor: pointer; list-style: none; margin-bottom: 0; display: flex; align-items: flex-start; gap: 8px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold[open] > summary { margin-bottom: 10px; }
.fold > summary .dot { margin-top: 2px; }
.fold > summary .panel-count { flex: 1; min-width: 0; margin-left: 0; overflow-wrap: anywhere; }
.fold > summary::after { content: "▾"; flex: none; color: var(--text-mute); }
.fold[open] > summary::after { content: "▴"; }

.steps-tools { margin-bottom: 6px; }
.link-btn { color: var(--accent); font-size: 0.8rem; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }
.step-row { padding: 6px 0; border-top: 1px solid var(--border); }
.step-row:first-child { border-top: none; }
.step-line { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; list-style: none; cursor: default; }
.step-fail > .step-line { cursor: pointer; }
.step-fail > .step-line::-webkit-details-marker { display: none; }
.step-name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.step-status { font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--track-nav); }
.step-status.is-bad { color: var(--danger); }
.step-status.is-warn { color: var(--warn); }
.step-status.is-calm { color: var(--text-mute); }
.step-dur { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.step-reason { font-size: 0.78rem; color: var(--danger); margin: 6px 0 0 18px; overflow-wrap: anywhere; }
.bar { height: 3px; background: var(--surface-2); margin: 4px 0 0 18px; }
.bar > span { display: block; height: 100%; background: var(--accent-fill); }
.backup-main { font-size: 0.95rem; margin: 0 0 12px; color: var(--text); line-height: 1.45; }
.facts { margin: 0; }
.facts > div { padding: 6px 0; border-top: 1px solid var(--border); }
.facts > div:first-child { border-top: none; }
.facts dt { font-size: 0.72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: var(--track-nav); }
.facts dd { margin: 2px 0 0; font-size: 0.85rem; color: var(--text-2); overflow-wrap: anywhere; }
.facts dd.is-bad { color: var(--danger); font-weight: 600; }
.path { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-mute); }
.tail {
  margin: 6px 0 0 18px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px;
  overflow: auto;
}

/* ----------------------------------------------------------------- atlas -- */

.atlas { max-width: 1100px; margin: 0 auto; }
.atlas .at-capture { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 12px; }
.atlas .at-refreshed { font-size: 0.72rem; color: var(--text-3); }
.atlas .at-pill {
  font-size: 0.72rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px 8px; color: var(--text-3);
}
.atlas .at-state { color: var(--text-3); font-size: 0.92rem; padding: 40px 0; }
.atlas .at-coming { font-size: 0.82rem; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); padding: 10px 14px; margin: 0 0 16px; line-height: 1.5; }
.atlas .at-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.78rem; padding: 0; text-decoration: none; }
.atlas .at-link:hover { text-decoration: underline; }
.atlas .at-back { display: none; }
.atlas .at-note { font-size: 0.8rem; color: var(--text-3); margin: 0 0 10px; }
.atlas .at-marker { font-size: 0.8rem; color: var(--text-3); margin: 0 0 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface); font-style: italic; }
.atlas .at-sub { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: 4px 0; }
.atlas .at-sec { margin: 20px 0 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.atlas .at-title { margin: 0; font-size: 1rem; color: var(--text); overflow-wrap: anywhere; }
.atlas .at-path { font-size: 0.78rem; }
.atlas .at-dates { font-size: 0.68rem; color: var(--text-3); font-family: var(--font-mono); }

.atlas .at-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; }
.atlas .at-chip {
  font-size: 0.7rem; padding: 3px 10px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-3);
}
.atlas .at-chip.on { border-color: var(--accent); color: var(--text); }
.atlas .at-chip.off { opacity: 0.4; cursor: default; }
.atlas .at-chip.retired { border-style: dashed; background: transparent; color: var(--text-faint); }
.atlas .at-chip.retired.on { color: var(--text-3); }
.atlas .at-tally { margin-left: auto; font-size: 0.72rem; color: var(--text-3); }
.atlas .at-tally.strong { margin-left: 0; font-size: 0.78rem; color: var(--text-2); font-weight: 600; }
.atlas .at-tally.flex { margin-right: auto; margin-left: 0; font-size: 0.74rem; }
.atlas .at-help { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-3); font-size: 0.7rem; cursor: pointer; list-style: none; margin-bottom: 8px; }
.atlas .at-help::-webkit-details-marker { display: none; }
.atlas .at-legend { margin: 0 0 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--text-2); }
.atlas .at-legend p { margin: 0 0 8px; }
.atlas .at-legend dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; align-items: baseline; margin: 0 0 8px; }
.atlas .at-legend dd { margin: 0; }
.atlas .at-tag { font-size: 0.7rem; color: var(--text-3); }

.atlas .at-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.atlas .at-split.wide-side { grid-template-columns: 320px minmax(0, 1fr); }
.atlas .at-side, .atlas .at-detail { min-width: 0; }
.atlas .at-detail { display: flex; flex-direction: column; gap: 10px; }
.atlas .at-empty { font-size: 0.82rem; color: var(--text-3); padding: 20px 0; }
.atlas .at-rows { display: flex; flex-direction: column; gap: 3px; max-height: 80vh; overflow-y: auto; }
.atlas .at-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 7px 10px; color: var(--text-2); flex-wrap: wrap; text-decoration: none; }
.atlas .at-head.on { border-color: var(--accent); color: var(--text); }
.atlas .at-name { font-size: 0.84rem; font-weight: 600; }
.atlas .at-meta { font-size: 0.7rem; color: var(--text-3); }
.atlas .at-pills { margin-left: auto; display: flex; gap: 4px; }
.atlas .at-count { font-size: 0.66rem; padding: 1px 7px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.atlas .at-count.fail { background: var(--danger-bg); color: var(--danger); }
.atlas .at-count.warn { background: var(--warn-bg); color: var(--warn); }
.atlas .at-count.ok { background: var(--ok-bg); color: var(--ok); }
.atlas .at-gap { font-size: 0.62rem; color: var(--text-faint); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 0 6px; }
.atlas .at-body { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 12px 12px; }
.atlas .at-desc { font-size: 0.78rem; color: var(--text-3); margin: 0 0 8px; }
.atlas .at-facts-line { font-size: 0.74rem; color: var(--text-mute); margin: 0 0 10px; }
.atlas .at-facts-line b { color: var(--text-3); font-weight: 600; margin: 0 5px 0 12px; }
.atlas .at-facts-line b:first-child { margin-left: 0; }
.atlas .at-needs { color: var(--text-2); border-bottom: 1px dotted var(--text-faint); cursor: help; }
.atlas .at-findings { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.atlas .at-finding { display: flex; align-items: baseline; min-width: 0; gap: 8px; font-size: 0.76rem; }
.atlas .at-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.atlas .sev-fail .at-dot { background: var(--danger); }
.atlas .sev-warn .at-dot { background: var(--warn); }
.atlas .sev-ok .at-dot { background: var(--ok); }
.atlas .at-check { color: var(--text-3); font-weight: 600; flex-shrink: 0; }
.atlas .at-detail-text { color: var(--text-mute); overflow-wrap: anywhere; }
.atlas .at-tierc { border-top: 1px dashed var(--border); padding-top: 10px; }
.atlas .at-tierc h4 { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: 0 0 4px; }
.atlas .at-tierc h4 + p { margin: 0 0 10px; }
.atlas .at-section { margin: 0 0 12px; font-size: 0.78rem; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; overflow-x: auto; }
.atlas .at-unwritten { font-size: 0.68rem; color: var(--text-faint); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 1px 8px; }
.atlas .at-files { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 6px; max-height: 260px; overflow: auto; }
.atlas .at-files.tall { max-height: 80vh; }

/* The file tree: nested <details>, each folder's children a lazy Turbo Frame. */
.atlas .at-tree { list-style: none; margin: 0; padding: 0 0 0 14px; }
.atlas .at-files > turbo-frame > .at-tree { padding-left: 0; }
.atlas .at-node { display: block; width: 100%; text-align: left; padding: 3px 4px; font-size: 0.76rem; font-family: var(--font-mono); color: var(--text-2); overflow-wrap: anywhere; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; }
.atlas .at-node:hover { background: var(--surface-2); }
.atlas .at-node.on { color: var(--text); background: var(--surface-2); font-weight: 600; }
.atlas .at-node.dir { color: var(--text-3); list-style: none; }
.atlas .at-node.dir a { color: inherit; text-decoration: none; }
.atlas .at-node.dir::-webkit-details-marker { display: none; }
.atlas .at-caret { display: inline-block; width: 1.1em; color: var(--text-3); }
.atlas details.at-dir > summary .at-caret::before { content: "▸"; }
.atlas details.at-dir[open] > summary .at-caret::before { content: "▾"; }
.atlas .at-gaps { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 6px; max-height: 80vh; overflow: auto; }
.atlas .at-gaps h4 { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: 8px 4px 4px; }

/* The file viewer. */
.atlas .at-viewer { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.atlas .at-vhead { display: flex; gap: 10px; align-items: baseline; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 0.72rem; color: var(--text-3); }
.atlas .at-vpath { font-family: var(--font-mono); overflow-wrap: anywhere; }
.atlas .at-vsize { margin-left: auto; flex-shrink: 0; }
.atlas .at-vmsg { padding: 16px 12px; font-size: 0.8rem; color: var(--text-3); }
.atlas .at-doc { padding: 4px 14px 14px; font-size: 0.84rem; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
/* Mermaid diagrams (mermaid_controller.js), in the FAQ, skill and file viewers. */
.atlas .reference-body .at-diagram { display: block; max-width: 100%; margin: 12px 0; overflow-x: auto; text-align: center; }
.atlas .reference-body .at-diagram svg { max-width: 100%; height: auto; }
.atlas .reference-body .at-diagram-error { margin: 4px 0 12px; font-size: 0.72rem; color: var(--text-3); }
.atlas .at-code { margin: 0; padding: 10px 12px; overflow: auto; font-size: 0.74rem; line-height: 1.5; max-height: 70vh; }
.atlas .at-code code { background: none; white-space: pre; color: var(--text-2); font-family: var(--font-mono); }
.atlas .at-fm { margin: 10px 12px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.atlas .at-fm-label { padding: 4px 10px 0; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.atlas .at-fm .at-code { max-height: 40vh; }
/* Syntax colours: Atom's One Dark palette (Rouge ships no One Dark theme, so the
   token classes are mapped by hand). Used by the file viewer (.at-code) and by
   highlighted Markdown fences (pre.highlight, from Mg::Markdown). */
.atlas .at-code, .atlas .reference-body pre.highlight { background: #282c34; color: #abb2bf; }
.atlas .reference-body pre.highlight { border-color: #282c34; }
.atlas .at-code code, .atlas .reference-body pre.highlight code { color: #abb2bf; }
.atlas .at-code ::selection, .atlas pre.highlight ::selection { background: #3e4451; color: inherit; }
.atlas .at-code, .atlas pre.highlight { scrollbar-color: #4b5263 #282c34; }
.atlas .at-fm .at-code { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.atlas .c, .atlas .c1, .atlas .cm, .atlas .cs, .atlas .cp, .atlas .cpf, .atlas .ch { color: #5c6370; font-style: italic; }
.atlas .k, .atlas .kd, .atlas .kn, .atlas .kp, .atlas .kr, .atlas .kt, .atlas .kv, .atlas .ow { color: #c678dd; }
.atlas .kc, .atlas .m, .atlas .mi, .atlas .mf, .atlas .mh, .atlas .mo, .atlas .mb, .atlas .mx, .atlas .il, .atlas .na { color: #d19a66; }
.atlas .s, .atlas .s1, .atlas .s2, .atlas .sb, .atlas .sc, .atlas .sd, .atlas .sh, .atlas .sx, .atlas .dl, .atlas .sa { color: #98c379; }
.atlas .se, .atlas .si, .atlas .sr, .atlas .ss, .atlas .o { color: #56b6c2; }
.atlas .nf, .atlas .fm { color: #61afef; }
.atlas .nc, .atlas .nn, .atlas .no, .atlas .nb, .atlas .bp, .atlas .nl { color: #e5c07b; }
.atlas .nt, .atlas .nv, .atlas .vi, .atlas .vg, .atlas .vc, .atlas .vm, .atlas .gd, .atlas .err { color: #e06c75; }
.atlas .gi { color: #98c379; }
.atlas .gh, .atlas .gu { color: #61afef; font-weight: bold; }
.atlas .err { background: none; }

/* Rendered Markdown. Long tables scroll inside the article rather than widening the page. */
.atlas .reference-body h1 { font-size: 1.3rem; color: var(--text); margin: 24px 0 8px; }
.atlas .reference-body h2 { font-size: 1.05rem; color: var(--text); margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.atlas .reference-body h3 { font-size: 0.95rem; color: var(--text); margin: 20px 0 6px; }
.atlas .reference-body h4 { font-size: 0.88rem; color: var(--text-2); margin: 16px 0 4px; }
.atlas .reference-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 10px 0; font-size: 0.8rem; }
.atlas .reference-body th, .atlas .reference-body td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; }
.atlas .reference-body th { background: var(--surface); color: var(--text); font-weight: 600; }
.atlas .reference-body code { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; font-size: 0.78rem; }
.atlas .reference-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; overflow-x: auto; }
.atlas .reference-body pre code { border: none; background: none; padding: 0; }
.atlas .reference-body blockquote { border-left: 2px solid var(--border); margin: 10px 0; padding-left: 12px; color: var(--text-3); }
.atlas .reference-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.atlas .reference-body ul, .atlas .reference-body ol { padding-left: 20px; }
.atlas .at-section > :first-child { margin-top: 0; }

/* Scripts. */
.atlas .at-skill-label { margin: 0; font-size: 0.8rem; color: var(--text-2); }
.atlas .at-list { display: flex; flex-direction: column; gap: 3px; }
.atlas .at-sorts { display: flex; align-items: center; gap: 6px; }
.atlas .at-sorts h4 { margin: 0 6px 0 0; font-size: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
.atlas .at-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 6px 10px; color: var(--text-2); flex-wrap: wrap; text-decoration: none; }
.atlas .at-row:hover { border-color: var(--accent); }
.atlas .at-rname { font-size: 0.78rem; overflow-wrap: anywhere; }
.atlas .at-pill-tag { font-size: 0.62rem; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.atlas .at-row .at-pill-tag { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.atlas .at-pill-tag.ok { background: var(--ok-bg); color: var(--ok); }
.atlas .at-pill-tag.warn { background: var(--warn-bg); color: var(--warn); }
.atlas .at-pill-tag.info { background: var(--surface-2); color: var(--text-mute); }
.atlas .at-pill-tag.site { background: var(--accent-soft); color: var(--accent); }
.atlas .at-model { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 8px 12px; }
.atlas .at-model p { margin: 0 0 4px; font-size: 0.76rem; color: var(--text-mute); overflow-wrap: anywhere; }
.atlas .at-model p:last-child { margin-bottom: 0; }
.atlas .at-model b { color: var(--text-3); font-weight: 600; margin-right: 8px; }
.atlas .at-model .at-db { display: inline-block; margin-right: 12px; font-family: var(--font-mono); }
.atlas .at-model i { font-style: normal; color: var(--text-3); }
.atlas .at-quiet { font-style: italic; }
.atlas .at-fold > summary { cursor: pointer; }

/* Data. */
.atlas .at-crumbs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.atlas .at-who { font-size: 0.72rem; color: var(--text-mute); margin: 8px 0 0; }
.atlas .at-who b { color: var(--text-3); font-weight: 600; }
.atlas .at-who.top { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 12px; }
.atlas .at-dbrows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
.atlas .at-dbrow, .atlas .at-app { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.atlas .at-dbrow > summary, .atlas .at-app > summary { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; color: var(--text-2); flex-wrap: wrap; list-style: none; }
.atlas .at-dbrow > summary::-webkit-details-marker, .atlas .at-app > summary::-webkit-details-marker, .atlas .at-route > summary::-webkit-details-marker { display: none; }
.atlas .at-dbmeta { font-size: 0.72rem; color: var(--text-3); margin-left: auto; }
.atlas .at-rw { display: flex; gap: 4px; font-size: 0.68rem; }
.atlas .at-rw .w { background: var(--warn-bg); color: var(--warn); padding: 1px 6px; border-radius: var(--radius-sm); }
.atlas .at-rw .r { background: var(--surface-2); color: var(--text-mute); padding: 1px 6px; border-radius: var(--radius-sm); }
.atlas .at-dbbody { border-top: 1px solid var(--border); padding: 10px 12px; }
.atlas .at-tbls { display: flex; flex-wrap: wrap; gap: 4px; }
.atlas .at-tbl { font-size: 0.7rem; background: var(--surface-2); padding: 2px 7px; border-radius: var(--radius-sm); color: var(--text-2); }
.atlas .at-tbl i { color: var(--text-mute); font-style: normal; margin-left: 6px; font-variant-numeric: tabular-nums; }
.atlas .at-link.browse { display: inline-block; margin-top: 8px; }
.atlas .at-tlist { display: flex; flex-direction: column; gap: 3px; max-height: 75vh; overflow: auto; }
.atlas .at-trow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 6px 10px; color: var(--text-2); text-decoration: none; }
.atlas .at-trow:hover, .atlas .at-trow.on { border-color: var(--accent); }
.atlas .at-tname { font-size: 0.76rem; overflow-wrap: anywhere; }
.atlas .at-tmeta { margin-left: auto; font-size: 0.66rem; color: var(--text-mute); display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.atlas .at-kind { color: var(--text-3); font-style: italic; }
.atlas .at-tnote { flex-basis: 100%; font-size: 0.68rem; color: var(--warn); }
.atlas .at-timing { font-size: 0.66rem; color: var(--text-mute); margin: 6px 0 0; }
.atlas .at-idx { font-size: 0.72rem; color: var(--text-mute); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.atlas .at-idx b { color: var(--text-3); font-weight: 600; }
.atlas .at-pager { display: flex; align-items: center; gap: 10px; }
.atlas .at-range { font-size: 0.76rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.atlas .at-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.atlas .at-scroll.rows-scroll { max-height: 70vh; overflow-y: auto; }
.atlas .at-table { border-collapse: collapse; width: 100%; min-width: 30rem; background: var(--surface); font-size: 0.78rem; }
.atlas .at-table.schema, .atlas .at-table.data { min-width: 0; width: auto; }
.atlas .at-table thead th { background: var(--surface-2); text-align: left; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 7px 10px; border-bottom: 1px solid var(--border); }
.atlas .at-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text-3); vertical-align: top; }
.atlas .at-table.schema td, .atlas .at-table.data td { padding: 4px 10px; font-size: 0.74rem; }
.atlas .at-table.data td { white-space: nowrap; max-width: 24rem; }
.atlas .at-table tbody tr:last-child td { border-bottom: none; }
.atlas .at-table td.num, .atlas .at-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.atlas .at-table td.absent { color: var(--danger); }
.atlas .at-null { color: var(--text-mute); font-style: italic; font-size: 0.7rem; }
.atlas .at-cell { cursor: help; }
.atlas .at-full { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.72rem; }

/* Apps. */
.atlas .at-approws { display: flex; flex-direction: column; gap: 4px; }
.atlas .at-fed { font-size: 0.7rem; color: var(--text-mute); }
.atlas .at-n { font-size: 0.74rem; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 1.6rem; text-align: right; }
.atlas .at-shape { font-size: 0.62rem; padding: 1px 6px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.atlas .sh-passthrough { background: var(--surface-2); color: var(--text-mute); }
.atlas .sh-computed { background: var(--accent-soft); color: var(--accent-hover); }
.atlas .sh-stored { background: var(--info-bg); color: var(--info); }
.atlas .sh-triggered { background: var(--warn-bg); color: var(--warn); }
.atlas .sh-memory { background: var(--ok-bg); color: var(--ok); }
.atlas .sh-unknown { background: var(--danger-bg); color: var(--danger); }
.atlas .sh-write { background: var(--warn-bg); color: var(--warn); }
.atlas .sh-redirect { background: var(--surface-2); color: var(--text-3); }
.atlas .sh-static { background: var(--ok-bg); color: var(--ok); }
.atlas .at-appid, .atlas .at-apppath { font-size: 0.72rem; color: var(--text-mute); }
.atlas .at-pubbadge { font-size: 0.62rem; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); }
.atlas .at-ctl { font-size: 0.7rem; color: var(--text-3); font-family: var(--font-mono); overflow-wrap: anywhere; }
.atlas .at-routename { font-size: 0.68rem; color: var(--text-mute); }
.atlas .at-appbody { border-top: 1px solid var(--border); padding: 6px 12px 10px; }
.atlas .at-route { border-bottom: 1px solid var(--border); }
.atlas .at-route:last-child { border-bottom: none; }
.atlas .at-route > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 6px 0; cursor: pointer; color: var(--text-2); list-style: none; }
.atlas .at-method { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-3); min-width: 3.2rem; }
.atlas .at-route .at-path { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font-size: 0.76rem; }
.atlas .at-route .info-pop { flex-shrink: 0; }
.atlas .at-rbody { padding: 4px 0 10px; }
.atlas .at-rflow { display: block; width: 100%; max-width: 560px; height: auto; margin-bottom: 6px; }
.atlas .rt-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.atlas .rt-db { fill: var(--accent-soft); stroke: var(--accent); }
.atlas .rt-file { fill: var(--info-bg); stroke: var(--info); }
.atlas .rt-act { fill: var(--warn-bg); stroke: var(--warn); }
.atlas .rt-mem { fill: var(--ok-bg); stroke: var(--ok); }
.atlas .rt-line { stroke: var(--text-mute); stroke-width: 1; fill: none; }
.atlas .rt-head { fill: var(--text-mute); }
.atlas .rt-t { font-size: 10.5px; fill: var(--text); font-family: var(--font-mono); }
.atlas .at-says { font-size: 0.78rem; color: var(--text-2); margin: 0 0 6px; }
.atlas .at-fact { font-size: 0.74rem; color: var(--text-mute); margin: 0 0 3px; }
.atlas .at-fact b { color: var(--text-3); font-weight: 600; margin-right: 6px; }
.atlas .at-fact code { overflow-wrap: anywhere; }

/* Schedule. */
.atlas .at-daybar { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.atlas .at-daychip { font-size: 0.7rem; padding: 3px 9px; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; }
.atlas .at-daychip.today { border-color: var(--border-strong); }
.atlas .at-daychip.on { border-color: var(--accent); color: var(--text); }
.atlas .at-daynote { margin-left: auto; font-size: 0.72rem; color: var(--text-3); }
.atlas .at-timeline { display: block; width: 100%; height: auto; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.atlas .tl-axis { stroke: var(--border-strong); stroke-width: 1; }
.atlas .tl-grid { stroke: var(--border); stroke-width: 1; }
.atlas .tl-tick text { font-size: 10px; fill: var(--text-mute); font-family: var(--font-ui); }
.atlas .tl-dot { fill: var(--accent); }
.atlas .tl-n { font-size: 9px; fill: var(--text-mute); font-family: var(--font-ui); }
.atlas .at-firings { list-style: none; margin: 0 0 18px; padding: 0; columns: 3; column-gap: 22px; }
.atlas .at-firings li { display: flex; align-items: baseline; gap: 7px; break-inside: avoid; padding: 2px 0; font-size: 0.75rem; }
.atlas .at-ftime { font-variant-numeric: tabular-nums; color: var(--text-3); min-width: 2.8rem; }
.atlas .at-fjob { color: var(--text-2); flex: 1; }
.atlas .at-fsteps { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.atlas .at-timer { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 8px; }
.atlas .at-timer[open] { border-color: var(--border-strong); }
.atlas .at-timer > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; color: var(--text-2); flex-wrap: wrap; list-style: none; }
.atlas .at-timer > summary::-webkit-details-marker { display: none; }
.atlas .at-timer-at { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.atlas .at-job-name { font-size: 0.86rem; font-weight: 600; }
.atlas .at-job-cron { font-size: 0.74rem; color: var(--text-3); }
.atlas .at-job-n { margin-left: auto; font-size: 0.74rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.atlas .at-timer-body { border-top: 1px solid var(--border); padding: 4px 14px 12px; }
/* A timer panel's service headers read as section titles, with their rows indented beneath them. */
.atlas .at-svc h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text); font-weight: 700; margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.atlas .at-pstep-list { list-style: none; margin: 0; padding: 0; }
.atlas .at-timer-body .at-pstep-list { padding-left: 16px; }
.atlas .at-pstep { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 0.74rem; }
.atlas .at-pstep:last-child { border-bottom: none; }
.atlas .at-pstep.off { opacity: 0.4; }
.atlas .at-pstep-id { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text); text-decoration: none; }
.atlas .at-pstep-id:hover { color: var(--accent); }
.atlas .at-ptime { color: var(--text-3); font-variant-numeric: tabular-nums; }
.atlas .at-dep { color: var(--text-mute); font-size: 0.7rem; flex-basis: 100%; padding-left: 2px; }
.atlas .at-dep.hard { color: var(--text-2); }
.atlas .at-plegend { margin: 12px 0 0; font-size: 0.7rem; color: var(--text-mute); max-width: 74ch; line-height: 1.5; }
.atlas .at-plegend b { color: var(--text-2); font-weight: 600; }
@media (min-width: 700px) { .atlas .at-dep { flex-basis: auto; } }
.atlas .at-paused { margin-top: 14px; }
.atlas .at-paused > summary { font-size: 0.76rem; cursor: pointer; color: var(--accent); }
.atlas .at-paused-sub { margin-left: 8px; color: var(--text-mute); }
.atlas .at-paused-list { list-style: none; margin: 8px 0 0; padding: 0; columns: 2; column-gap: 22px; opacity: 0.6; }
.atlas .at-paused-list li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 0.74rem; break-inside: avoid; }
.atlas .at-step-desc { font-size: 0.8rem; line-height: 1.5; white-space: pre-wrap; margin: 0; }
.atlas .at-step-note, .card-modal .at-step-note { font-size: 0.8rem; color: var(--text-mute); margin: 0; }
.card-modal .at-step-desc { font-size: 0.8rem; line-height: 1.5; white-space: pre-wrap; margin: 0; }
.card-modal .at-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 0.76rem; margin: 0; }
.card-modal .at-facts div { display: contents; }
.card-modal .at-facts dt { color: var(--text-mute); }
.card-modal .at-facts dd { margin: 0; }

@media (max-width: 900px) { .atlas .at-firings { columns: 2; } }
@media (max-width: 767px) {
  .atlas .at-split, .atlas .at-split.wide-side { grid-template-columns: minmax(0, 1fr); }
  .atlas .at-split.has-sel .at-rows, .atlas .at-split.has-sel .at-side, .atlas .at-bar.has-sel, .atlas .at-legend-box.has-sel { display: none; }
  .atlas .at-split:not(.has-sel) .at-empty { display: none; }
  .atlas .at-split.wide-side:not(.has-sel) .at-detail { display: none; }
  .atlas .at-back { display: block; }
}
@media (max-width: 560px) { .atlas .at-firings, .atlas .at-paused-list { columns: 1; } }

/* ------------------------------------------------- atlas: swimlane and git -- */

.atlas .at-swim { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin: 0 0 10px; padding: 10px 14px 14px; }
.atlas .at-swim-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.atlas .at-swim-title { font-weight: 600; }
.atlas .at-swim-sub { font-size: 0.74rem; color: var(--text-mute); }
.atlas .at-swim-sub.busy { color: var(--warn); }
.atlas .at-swim-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.74rem; color: var(--text-mute); }
.atlas .at-swim-pick select { max-width: 100%; font: inherit; padding: 3px 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.atlas .at-swim-note { font-size: 0.76rem; color: var(--text-mute); margin: 6px 0; }
.atlas .at-manual { padding-bottom: 8px; }
.atlas .at-manual .at-swim-head { margin-bottom: 2px; }

/* The figure keeps its pixel size and scrolls here, never at page level. */
.atlas .at-swim-scroll { position: relative; overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.atlas .at-swim-scroll svg { display: block; }
.atlas .sw-lane { fill: var(--surface); stroke: var(--border); }
.atlas .sw-lane-name { font-size: 11px; fill: var(--text-2); dominant-baseline: middle; font-family: var(--font-ui); }
.atlas .sw-axis line { stroke: var(--border-strong); }
.atlas .sw-axis text { font-size: 10px; fill: var(--text-mute); font-family: var(--font-ui); }
/* The HTML hit areas over each box: they carry hover, focus, tap and the popover. */
.atlas .sw-hitbox { position: absolute; display: block; cursor: pointer; }
.atlas .sw-trigger { display: block; width: 100%; height: 100%; outline: none; }
.atlas .sw-hitbox:hover .sw-trigger, .atlas .sw-trigger:focus-visible { outline: 2.5px solid var(--text); outline-offset: -1px; }

.atlas .sw-box rect { stroke-width: 1; }
.atlas .sw-box text { font-size: 12px; font-family: var(--font-mono); fill: var(--text); dominant-baseline: middle; pointer-events: none; }
.atlas .sw-box.kind-browser rect, .atlas .lg.kind-browser { fill: #ece6f3; stroke: #b9a9d0; background: #ece6f3; border-color: #b9a9d0; }
.atlas .sw-box.kind-api rect, .atlas .lg.kind-api { fill: var(--info-bg); stroke: var(--info-border); background: var(--info-bg); border-color: var(--info-border); }
.atlas .sw-box.kind-db rect, .atlas .lg.kind-db { fill: var(--ok-bg); stroke: var(--ok-border); background: var(--ok-bg); border-color: var(--ok-border); }
.atlas .sw-box.kind-health rect, .atlas .lg.kind-health { fill: var(--warn-bg); stroke: var(--warn-border); background: var(--warn-bg); border-color: var(--warn-border); }
/* a flow nothing waits on, with no fixed end */
.atlas .sw-box.open rect { stroke-dasharray: 6 4; stroke: var(--info); }
.atlas .sw-box.st-failed rect { stroke: var(--danger); stroke-width: 2.5; }
.atlas .sw-box.st-timeout rect { stroke: #d9731a; stroke-width: 2.5; }
/* failed or timed out here, ok in a later run: the ok colour, not the failure colour */
.atlas .sw-box.st-fixed rect { stroke: var(--ok); stroke-width: 2.5; }
.atlas .sw-fixed-mark circle { fill: var(--ok); stroke: var(--bg); stroke-width: 1.5; }
.atlas .sw-box .sw-fixed-mark text { fill: #fff; font-size: 9px; font-family: var(--font-ui); font-weight: 700; text-anchor: middle; }
.atlas .sw-box.st-skipped rect { stroke: var(--text-faint); stroke-dasharray: 4 3; stroke-width: 1.5; }
.atlas .sw-box.st-skipped-schedule { opacity: 0.4; }
.atlas .sw-box.st-not-run { opacity: 0.55; }
.atlas .sw-box.st-not-run rect { stroke-dasharray: 2 3; }
.atlas .sw-box.st-running rect { stroke: var(--accent); stroke-width: 2.5; animation: sw-pulse 1.4s ease-in-out infinite; }
@keyframes sw-pulse { 50% { stroke-opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .atlas .sw-box.st-running rect { animation: none; } }

.atlas .sw-digest line { stroke: var(--border-strong); stroke-dasharray: 3 3; }
.atlas .sw-digest rect { fill: var(--danger-bg); stroke: var(--danger-border); }
.atlas .sw-digest text { font-family: var(--font-ui); fill: var(--text); }
.atlas .sw-digest .d1 { font-size: 11px; font-weight: 600; }
.atlas .sw-digest .d2 { font-size: 10px; fill: var(--text-mute); }

.atlas .at-swim-notrun { margin: 8px 0 0; font-size: 0.72rem; color: var(--text-mute); }
.atlas .at-swim-nr { font-family: var(--font-mono); color: var(--text-3); text-decoration: underline dotted; cursor: help; }
.atlas .at-swim-legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 0; font-size: 0.66rem; color: var(--text-3); }
.atlas .at-swim-legend .lg { padding: 1px 7px; border: 1px solid var(--border); background: var(--surface); }
.atlas .at-swim-legend .lg.st-failed { border: 2px solid var(--danger); }
.atlas .at-swim-legend .lg.st-timeout { border: 2px solid #d9731a; }
.atlas .at-swim-legend .lg.st-fixed { border: 2px solid var(--ok); }
.atlas .at-swim-legend .lg.st-skipped { border: 1px dashed var(--text-faint); }
.atlas .at-swim-legend .lg.st-skipped-schedule { opacity: 0.4; }
.atlas .at-swim-legend .lg.st-not-run { opacity: 0.55; border-style: dotted; }
.atlas .at-swim-hint { margin-left: auto; color: var(--text-mute); }

/* The step popover. */
.info-panel .at-swim-step { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.8rem; }
.info-panel .at-swim-pill { font-size: 0.62rem; padding: 0 6px; background: var(--surface-2); color: var(--text-3); }
.info-panel .at-swim-pill.st-ok { background: var(--ok-bg); color: var(--ok); }
.info-panel .at-swim-pill.st-failed { background: var(--danger-bg); color: var(--danger); }
.info-panel .at-swim-pill.st-timeout { background: var(--warn-bg); color: var(--warn); }
.info-panel .at-swim-pill.st-fixed { background: var(--ok-bg); color: var(--ok); }
.info-panel .at-swim-reason { margin: 2px 0 6px; color: var(--text-3); }
.info-panel .at-swim-reason.later-ok { color: var(--ok); }
.info-panel .at-swim-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 6px; }
.info-panel .at-swim-dl dt { color: var(--text-mute); }
.info-panel .at-swim-dl dd { margin: 0; overflow-wrap: anywhere; }
.info-panel .at-swim-tail { margin: 6px 0 0; padding: 8px; max-height: 14rem; overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.68rem; background: var(--surface-2); border: 1px solid var(--border); }

/* Git tab: one day at a time. */
.atlas .at-git-error { color: var(--danger); }
.atlas .at-search { flex: 1 1 280px; min-width: 200px; font: inherit; font-size: 0.8rem; padding: 5px 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.atlas .at-search:focus { outline: none; border-color: var(--accent); }
.atlas .at-gtally { font-size: 0.72rem; color: var(--text-3); margin: 0 0 16px; }
.atlas .at-gtally .at-link { margin-left: 8px; font-size: 0.72rem; }
.atlas .at-gstamp { color: var(--text-faint); margin-left: 6px; }
.atlas .at-gpicker { display: flex; gap: 5px; margin-bottom: 16px; }
.atlas .at-gdayform { flex: 1 1 auto; display: flex; min-width: 0; }
.atlas .at-gday { flex: 1 1 auto; min-width: 0; max-width: 360px; font: inherit; font-size: 0.8rem; padding: 5px 8px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.atlas .at-gday:focus { outline: none; border-color: var(--accent); }
.atlas .at-gstep { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-3); }
.atlas a.at-gstep:hover { color: var(--text); }
.atlas .at-gstep.off { opacity: 0.4; }
.atlas .at-gday-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.atlas .at-gday-head h3 { font-size: 0.98rem; color: var(--text); margin: 0; font-weight: 600; }
.atlas .at-gday-stat { font-size: 0.7rem; color: var(--text-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.atlas .ins { color: var(--ok); }
.atlas .del { color: var(--danger); margin-left: 6px; }
.atlas .at-gdigest { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0 8px; }
.atlas .at-gcards { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.atlas .at-gcard { display: inline-flex; align-items: stretch; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid transparent; font-size: 0.7rem; }
.atlas .at-gcard.on { border-color: var(--accent); }
.atlas .at-gcard-pick, .atlas .at-gcard-open { color: var(--text-mute); padding: 3px 7px; text-decoration: none; display: inline-flex; align-items: center; }
.atlas .at-gcard-pick:hover, .atlas .at-gcard-open:hover, .atlas .at-gcard.on .at-gcard-pick { color: var(--text); }
.atlas .at-gcard-open { color: var(--text-faint); padding: 3px 7px 3px 4px; }
.atlas .at-gdgroup { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; }
.atlas .at-gdlabel { flex: 0 0 42px; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 600; padding-top: 2px; }
.atlas .at-gdgroup ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.atlas .at-gdgroup li { font-size: 0.8rem; color: var(--text-2); line-height: 1.35; }
.atlas .at-gscope { font-size: 0.66rem; color: var(--text-faint); margin-right: 6px; }
.atlas .at-gbreaking { color: var(--danger); font-weight: 700; margin-right: 4px; }
.atlas .at-gcommits { display: flex; flex-direction: column; gap: 1px; }
.atlas .at-gcrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; list-style: none; padding: 4px 8px; cursor: pointer; color: var(--text-2); border-radius: var(--radius-sm); }
.atlas .at-gcrow::-webkit-details-marker { display: none; }
.atlas .at-gcrow:hover, .atlas .at-gcommit[open] > .at-gcrow { background: var(--surface); }
.atlas .at-gctime { font-size: 0.66rem; color: var(--text-faint); font-variant-numeric: tabular-nums; flex: 0 0 34px; }
.atlas .at-gctype { font-size: 0.62rem; flex: 0 0 52px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.atlas .at-gctype.t-feat { color: var(--accent); }
.atlas .at-gctype.t-fix { color: var(--warn); }
.atlas .at-gcsubject { flex: 1; font-size: 0.8rem; min-width: 0; overflow-wrap: anywhere; }
.atlas .at-gcrepo { font-size: 0.6rem; color: var(--text-faint); letter-spacing: 0.06em; white-space: nowrap; }
.atlas .at-gcstat { font-size: 0.66rem; font-variant-numeric: tabular-nums; flex: 0 0 92px; text-align: right; }
.atlas .at-gchash { font-size: 0.66rem; color: var(--text-faint); }
.atlas .at-gclede { flex: 1 0 100%; padding-left: 94px; font-size: 0.74rem; color: var(--text-faint); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas .at-gcommit[open] .at-gclede { display: none; }
.atlas .at-gcbody { background: var(--surface); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 4px 12px 10px 50px; margin-bottom: 4px; }
.atlas .at-gcbody p { margin: 0 0 8px; font-size: 0.78rem; color: var(--text-mute); line-height: 1.5; white-space: pre-wrap; }
.atlas .at-gcbody .at-gnobody { font-style: italic; color: var(--text-faint); }
.atlas .at-gcmeta { font-size: 0.68rem; color: var(--text-faint); margin: 0; }
.atlas .hit { background: var(--warn-bg); color: var(--text); border-radius: 2px; }

@media (max-width: 720px) {
  .atlas .at-gday { max-width: none; }
  .atlas .at-gcstat, .atlas .at-gchash { display: none; }
  .atlas .at-gclede { padding-left: 0; }
  .atlas .at-gcbody { padding-left: 8px; }
}

/* ------------------------------------------------------------------- ads -- */

/* NAMING, deliberately: nothing on the Ads page has a class or id called `ads`,
   `ad`, `ad-row`, `ad-name` or similar, and the wrapper is `campaigns`. Cosmetic
   filter lists in ad blockers hide elements whose class names look like ad slots
   (display: none !important). The failure is silent: the markup is in the DOM,
   every request is a 200, and the row is just missing, only for people running a
   blocker. This page is about advertising, so its own vocabulary collides with
   the lists; `set-*`, `creative-*`, `campaign-*` and `fb-*` are the safe words.
   test/integration/ads_test.rb fails if a class or id gets such a name. */
.campaigns .tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}
.campaigns .stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}
.campaigns .tile-num { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.campaigns .tile-lbl {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.campaigns .fb-section { margin-bottom: 40px; }
.campaigns .section-head {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-2);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.campaigns .section-count {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
}

/* One campaign per row, always: a single column, so each campaign's hierarchy
   reads as one uninterrupted block however many campaigns there are. */
.campaigns .campaign-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.campaigns .campaign-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.12s;
}
.campaigns .campaign-card:hover { border-color: var(--border-strong); }
.campaigns .card-header { display: flex; align-items: center; gap: 6px; }
.campaigns .delivery-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.campaigns .delivery-text { font-size: 0.78rem; font-weight: 500; flex: 1; }
.campaigns .roas-badge { font-size: 0.78rem; font-weight: 700; }
.campaigns .card-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.campaigns .card-metrics { display: flex; gap: 12px; align-items: flex-start; }
.campaigns .metric-block { flex: 1; }
.campaigns .metric-right { text-align: right; }
.campaigns .metric-primary { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.campaigns .metric-secondary { font-size: 0.75rem; color: var(--text-3); margin-top: 2px; }
.campaigns .card-stats {
  font-size: 0.75rem;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.campaigns .stat-dot { color: var(--text-2); }
.campaigns .card-trend { font-size: 0.78rem; color: var(--text-faint); }
.campaigns .trend-since { color: var(--text-faint); }

/* Set and ad breakdown, nested in the card: indentation and a left rule rather
   than more borders. Each level is a <details>; a <summary> is its button. */
.campaigns summary { list-style: none; cursor: pointer; }
.campaigns summary::-webkit-details-marker { display: none; }
.campaigns .toggle-icon { font-size: 0.7em; }
.campaigns .toggle-icon:not(.is-leaf)::before { content: "▶"; }
.campaigns details[open] > summary .toggle-icon:not(.is-leaf)::before { content: "▼"; }

.campaigns .breakdown { border-top: 1px solid var(--border); padding-top: 8px; }
.campaigns .bd-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 2px 0;
  font-size: 0.78rem;
  color: var(--text-3);
  transition: color 0.12s;
}
.campaigns .bd-toggle:hover { color: var(--text-2); }
.campaigns .weak-flag { margin-left: auto; color: var(--danger); font-size: 0.72rem; }
.campaigns .bd-body { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.campaigns .set { border-left: 2px solid var(--border); padding-left: 10px; }
.campaigns .set-top { display: block; }
.campaigns .set-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-size: 0.8rem;
  color: var(--text-2);
  text-align: left;
}
.campaigns .fb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.campaigns .set-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.campaigns .set-spend { font-weight: 700; flex-shrink: 0; }
.campaigns .set-stats {
  font-size: 0.72rem;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 2px;
  padding-left: 18px;
}
.campaigns .set-children { margin-top: 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.campaigns .creative { border-left: 2px solid var(--border); padding-left: 10px; }
.campaigns .creative-line { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-mute); }
.campaigns .creative-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.campaigns .creative-spend { font-weight: 600; flex-shrink: 0; }
.campaigns .creative-stats {
  font-size: 0.7rem;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 1px;
}
.campaigns .creative-ranks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.campaigns .rank-pill { font-size: 0.66rem; font-weight: 500; padding: 1px 6px; border-radius: var(--radius-sm); white-space: nowrap; }

.campaigns .toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
  font-size: 0.88rem;
  padding: 8px 14px;
  margin-bottom: 14px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.campaigns .toggle-btn:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }
.campaigns .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.campaigns .all-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.campaigns .all-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.campaigns .all-table th.num, .campaigns .all-table td.num { text-align: right; }
.campaigns .all-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--text-mute); vertical-align: middle; }
.campaigns .all-table tr:last-child td { border-bottom: none; }
.campaigns .all-table tbody tr:hover td { background: var(--surface-2); }
.campaigns .all-table tbody tr.row-active td { color: var(--text-2); }
.campaigns .col-name { max-width: 320px; min-width: 180px; white-space: normal; line-height: 1.3; }
.campaigns .results-col { white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.campaigns .status-pill { font-size: 0.72rem; font-weight: 500; padding: 2px 8px; white-space: nowrap; }

@media (max-width: 768px) {
  .campaigns .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* Shoot Manager: the four stage lists and the Picks page. */
.sm-count {
  font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--text-mute);
  padding: 1px 7px; border-radius: var(--radius-sm); vertical-align: middle;
}
.sm-hint { color: var(--text-3); font-size: 0.88rem; margin: -4px 0 16px; max-width: 70ch; }
.sm-sync { margin-bottom: 16px; }

.sm-shoots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.sm-shoot { display: flex; align-items: center; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.sm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sm-thumb {
  position: relative; flex-shrink: 0; width: 56px; height: 56px;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border);
}
.sm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.sm-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; }
.sm-name a { color: var(--text); text-decoration: none; }
.sm-name a:hover { text-decoration: underline; }
.sm-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--text-mute); font-size: 0.85rem; }
.sm-meta-head { align-items: center; margin: 6px 0 12px; font-size: 0.95rem; color: var(--text-3); }
.sm-counts { font-variant-numeric: tabular-nums; }
.sm-dot { color: var(--text-faint); }

.sm-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 1px 6px; border-radius: var(--radius-sm); }
.sm-badge.new { background: var(--ok-bg); color: var(--ok); }
.sm-badge.more { background: var(--surface-2); color: var(--text-2); letter-spacing: 0; font-weight: 600; }
.sm-badge.info { background: var(--info-bg); color: var(--info); letter-spacing: 0; font-weight: 600; }

.sm-where { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; margin-top: 4px; }
.sm-where-label {
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; font-weight: 700;
}
.sm-where code { background: var(--surface-2); padding: 2px 6px; border-radius: var(--radius-sm); overflow-wrap: anywhere; font-size: 0.8rem; }
.sm-copy { border: none; background: none; color: var(--text-mute); font-size: 0.78rem; cursor: pointer; padding: 2px 4px; }
.sm-copy:hover { color: var(--text); }

.sm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.sm-btn {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.85rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.sm-btn:hover { background: var(--surface-2); }
.sm-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.sm-btn.primary { font-weight: 600; }
.sm-btn.quiet { border-color: transparent; color: var(--text-mute); }
.sm-more { padding: 12px 4px; list-style: none; }
.sm-shoot.unpaid { background: var(--danger-bg); }
.sm-badge.unpaid { background: var(--danger); color: #fff; letter-spacing: 0; }
.sm-section-title { margin: 20px 0 8px; font-size: 0.95rem; }
.sm-section-empty { margin: 0 0 8px; }

.sm-header { margin-bottom: 24px; }
.sm-section { font-size: 1rem; margin: 0 0 12px; }
.sm-faint { color: var(--text-3); font-weight: 400; }
.sm-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.sm-pick {
  aspect-ratio: 1 / 1; padding: 0; border: none; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2); cursor: zoom-in;
}
.sm-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sm-pick img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }

/* The File request panel (Mg::FileRequestInvites). */
.sm-fr { font-size: 0.86rem; margin-bottom: 12px; }
.sm-fr-title { font-size: 0.7rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; }
.sm-fr-none { color: var(--text-3); }
.sm-fr-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.sm-fr-lbl { color: var(--text-mute); }
.sm-fr-val { color: var(--text-2); overflow-wrap: anywhere; }
.sm-fr-val a { color: var(--accent); text-decoration: none; }
.sm-fr-val a:hover { text-decoration: underline; }
.sm-fr-mono { font-family: var(--font-mono); }
.sm-fr-status.is-error { color: var(--danger); }
.sm-fr-status.is-closed { color: var(--text-3); }
.sm-fr-test { margin-left: 8px; }
.sm-fr-err { margin-left: 8px; color: var(--text-3); }

/* Shoot Manager: the cull page (grid, Survey, the full-size modal with 1:1 zoom). */
.sm-cull-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.sm-cull-bar .sm-section { margin: 0; }
.sm-cull-tools, .sm-cull-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sm-cull-actions { flex: 1; justify-content: flex-end; }
.sm-inline-form { margin: 0; display: inline; }
.sm-cull-count { font-size: 0.85rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.sm-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.sm-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.sm-survey-count { font: inherit; font-size: 0.85rem; padding: 5px 6px; border: 1px solid var(--border-strong); background: var(--surface); }
.sm-survey-count[hidden], .sm-survey[hidden], .sm-grid[hidden], .sm-zoom[hidden], .sm-zoom-badge[hidden],
.sm-burst[hidden], .sm-auto[hidden], .sm-chip[hidden], #cull-review[hidden] { display: none; }
.sm-breakdown, .sm-send-preview { flex-basis: 100%; text-align: right; font-size: 0.82rem; color: var(--text-mute); }
.sm-send-preview code { background: var(--surface-2); padding: 1px 5px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.sm-note { min-height: 0; font-size: 0.85rem; color: var(--text-2); margin-bottom: 8px; }
.sm-note:empty { display: none; }
.sm-note.error { color: var(--danger); }
.sm-gate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 14px; margin-bottom: 14px; background: var(--info-bg); border: 1px solid var(--info-border); font-size: 0.9rem;
}
.sm-gate p { margin: 0; }
.sm-review {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-bottom: 14px;
  background: var(--ok-bg); border: 1px solid var(--ok-border); font-size: 0.9rem;
}
.sm-review-note { color: var(--text-mute); font-size: 0.82rem; flex: 1; }

.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 12px; margin-bottom: 24px; }
.sm-tile { min-width: 0; }
.sm-tile-thumb {
  position: relative; aspect-ratio: 3 / 2; background: var(--surface-2); border: 1px solid var(--border);
  border-top: 3px solid var(--border); overflow: hidden;
}
.sm-tile.burst-a .sm-tile-thumb { border-top-color: #6c8ebf; }
.sm-tile.burst-b .sm-tile-thumb { border-top-color: #c79a4e; }
/* A cull round is a color label (#559): .lbl-<color> sets --label, which the heart, the chip,
   the tile outline and the pane outline use. A pending heart (not sent yet) shows the next
   round's color, outlined; a labelled one is filled and locked. */
.lbl-green { --label: #2e9d57; }
.lbl-blue { --label: #2f6fd0; }
.lbl-yellow { --label: #d9a400; }
.lbl-red { --label: #d33a2c; }
.lbl-purple { --label: #8a4fd0; }
.sm-tile.culled .sm-tile-thumb { outline: 2px solid var(--label, #e0245e); outline-offset: -2px; }
.sm-tile.culled.suggested .sm-tile-thumb { outline-color: var(--accent); }
.sm-tile.culled.pending .sm-tile-thumb { outline-style: dashed; }
.sm-tile.locked .sm-tile-thumb { outline-style: solid; outline-color: var(--label); }
/* Green on adopt (#560): edited in Aftershoot with no color; Adopt will label it Green. Display only:
   a dotted Green outline, a hollow dashed heart and an outlined chip, never the filled Green of a real label. */
.sm-tile.adopt, .sm-pane.adopt, .sm-heart.adopt, .sm-chip.adopt { --label: #2e9d57; }
.sm-tile.adopt .sm-tile-thumb, .sm-pane.culled.adopt { outline: 2px dotted var(--label); outline-offset: -2px; }
.sm-heart.adopt path, .sm-heart.active.adopt path, .sm-pane-foot .sm-heart.active.adopt path { fill: none; stroke: var(--label); stroke-width: 2.5; stroke-dasharray: 3 2; }
.sm-chip.adopt { background: rgba(0, 0, 0, 0.62); border: 1px solid var(--label); }
.sm-adopt-note { margin: -4px 0 10px; color: var(--text-mute); font-size: 0.85rem; }
.sm-tile-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sm-tile-open img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }
.sm-tile-name { margin-top: 5px; font-size: 0.8rem; overflow-wrap: anywhere; }
.sm-tile-size { font-size: 0.72rem; color: var(--text-faint); }
.sm-burst, .sm-auto, .sm-chip {
  position: absolute; left: 6px; font-size: 0.66rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.62); color: #fff; pointer-events: none;
}
.sm-burst { top: 6px; }
.sm-auto { bottom: 6px; background: var(--accent); }
.sm-chip { bottom: 6px; left: auto; right: 6px; background: var(--label, var(--ok)); pointer-events: auto; }
.sm-label-text { color: var(--label); }
.sm-round { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 0.95rem; }
.sm-round-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--label); }
.sm-heart-form { position: absolute; top: 6px; right: 6px; margin: 0; }
.sm-heart {
  display: flex; padding: 4px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.35); cursor: pointer; line-height: 0;
}
.sm-heart svg { width: 22px; height: 22px; }
.sm-heart path { fill: none; stroke: #fff; }
.sm-heart.active path { fill: var(--label, #e0245e); stroke: var(--label, #e0245e); }
.sm-heart.active.suggested path { fill: var(--accent-fill); stroke: var(--accent-fill); }
.sm-heart.active.pending path { fill: none; stroke-width: 2.5; }
.sm-heart[disabled] { cursor: default; }

.sm-files { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--border); }
.sm-file { display: flex; align-items: center; gap: 14px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.sm-file-name { flex: 1; overflow-wrap: anywhere; }
.sm-file-type, .sm-file-size { color: var(--text-mute); white-space: nowrap; }

.sm-survey { margin-bottom: 24px; }
.sm-survey-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sm-survey-hint { color: var(--text-faint); font-size: 0.8rem; }
.sm-survey-range { font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.sm-survey-grid { display: grid; gap: 12px; }
.sm-pane { border: 1px solid var(--border); background: var(--surface); }
.sm-pane.culled { outline: 2px solid var(--label, #e0245e); }
.sm-pane.culled.suggested { outline-color: var(--accent); }
.sm-pane.culled.pending { outline-style: dashed; }
.sm-pane.locked { outline-style: solid; outline-color: var(--label); }
.sm-pane-img { position: relative; background: #111; cursor: zoom-in; overflow: hidden; }
.sm-pane-img img { width: 100%; display: block; }
.sm-pane-dismiss {
  position: absolute; top: 6px; right: 6px; border: 0; border-radius: 50%; width: 24px; height: 24px;
  background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
}
.sm-pane-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; }
.sm-pane-name { font-size: 0.82rem; overflow-wrap: anywhere; }
.sm-pane-foot .sm-heart { background: none; }
.sm-pane-foot .sm-heart path { stroke: var(--text-mute); }
.sm-pane-foot .sm-heart.active path { fill: var(--label, #e0245e); stroke: var(--label, #e0245e); }
.sm-pane-foot .sm-heart.active.pending path { fill: none; }

/* The modal stays dark, like the lightbox: a photo is judged full-bleed. */
.sm-modal {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0;
  background: rgba(0, 0, 0, 0.94); color: #fff; align-items: center; justify-content: center; cursor: pointer;
}
.sm-modal[open] { display: flex; }
.sm-modal::backdrop { background: transparent; }
.sm-modal-img { max-width: 96vw; max-height: 88vh; object-fit: contain; cursor: zoom-in; }
.sm-modal-close, .sm-modal-nav {
  position: absolute; z-index: 3; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
  font-size: 2rem; line-height: 1; width: 44px; height: 56px;
}
.sm-modal-close { top: 12px; right: 16px; height: 44px; }
.sm-modal-nav { top: 50%; transform: translateY(-50%); }
.sm-modal-nav.prev { left: 12px; }
.sm-modal-nav.next { right: 12px; }
.sm-modal-nav[disabled] { opacity: 0.25; cursor: default; }
.sm-modal-foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: rgba(0, 0, 0, 0.7); font-size: 0.85rem; cursor: default;
}
.sm-modal-name { font-weight: 600; }
.sm-modal-reason { flex: 1; color: rgba(255, 255, 255, 0.7); }
.sm-modal-reason.picked { color: var(--accent-fill); }
.sm-modal-size, .sm-zoom-badge { color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.sm-icon-btn { border: 0; background: none; color: #fff; font-size: 1.3rem; cursor: pointer; padding: 2px 6px; line-height: 1; }
.sm-icon-btn svg { width: 26px; height: 26px; }
.sm-icon-btn path { fill: none; stroke: #fff; }
.sm-icon-btn.active path { fill: var(--label, #e0245e); stroke: var(--label, #e0245e); }
.sm-icon-btn.active.suggested path { fill: var(--accent-fill); stroke: var(--accent-fill); }
.sm-icon-btn.active.pending path { fill: none; stroke-width: 2.5; }
.sm-icon-btn[disabled] { opacity: 0.3; cursor: default; }
.sm-zoom { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #000; cursor: zoom-out; touch-action: none; }
.sm-zoom.dragging { cursor: grabbing; }
.sm-zoom img { position: absolute; left: 50%; top: 50%; margin: 0; max-width: none; max-height: none; translate: -50% -50%; }

@media (max-width: 768px) {
  .sm-cull-actions { justify-content: flex-start; }
  .sm-breakdown, .sm-send-preview { text-align: left; }
}

@media (max-width: 768px) {
  .sm-shoot { flex-direction: column; align-items: stretch; }
  .sm-actions { justify-content: flex-start; }
}

/* Shoot Manager: Imagen Settings. */
.is-page { max-width: 720px; padding-bottom: 48px; }
.is-lede { margin: 0 0 24px; color: var(--text-mute); font-size: 0.92rem; line-height: 1.55; max-width: 62ch; }
.is-group { border: 1px solid var(--border); background: var(--surface); padding: 16px 18px; margin-bottom: 16px; }
.is-group-title { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.is-note, .is-help { margin: 4px 0 10px; font-size: 0.82rem; color: var(--text-mute); line-height: 1.5; }
.is-field { margin: 12px 0; }
.is-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.is-input { font: inherit; font-size: 0.9rem; padding: 6px 8px; border: 1px solid var(--border-strong); background: var(--surface); max-width: 100%; }
.toggle { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.toggle input[type="checkbox"] { margin-top: 3px; }
.toggle-body { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { font-size: 0.9rem; font-weight: 600; }
.toggle-help { font-size: 0.8rem; color: var(--text-mute); }
.is-hazard { margin: 8px 0 14px; padding: 10px 14px; background: var(--info-bg); border: 1px solid var(--info-border); font-size: 0.84rem; line-height: 1.5; }
.is-hazard p { margin: 6px 0; }
.is-hazard ul { margin: 6px 0; padding-left: 20px; }
.is-hazard.is-armed { background: var(--warn-bg); border-color: var(--warn-border); }
.is-hazard-head { font-weight: 700; }
.is-aside .is-summary { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.is-badge { font-size: 0.7rem; padding: 1px 7px; border: 1px solid var(--border-strong); color: var(--text-mute); }
.is-badge.on { background: var(--accent-soft); color: var(--text); }
.is-tag { font-size: 0.7rem; font-weight: 700; padding: 1px 6px; background: var(--surface-2); }
.is-warn { margin: 6px 0; font-size: 0.82rem; color: var(--warn); }
.is-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; padding: 12px 0; background: var(--bg); }
.is-stamp { margin-right: auto; font-size: 0.82rem; color: var(--text-mute); }

/* ------------------------------------------------------------- messages -- */

.subnav-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; object-fit: contain; }
.ms { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.ms-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.ms-counts { font-size: 0.82rem; color: var(--text-3); }
.ms-search, .ms-notefield input {
  font: inherit; font-size: 0.85rem; padding: 6px 10px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.ms-search { min-width: 260px; }
.ms-search:focus, .ms-notefield input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ms-filters { display: flex; gap: 6px; margin-left: auto; }
.ms-chip {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; text-decoration: none;
  background: var(--surface); color: var(--text-mute); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.ms-chip.on { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent-fill); }
.ms-error { margin: 0; padding: 8px 12px; font-size: 0.82rem; background: var(--danger-bg); color: var(--danger); border-left: 3px solid var(--danger-border); }
.ms-error:empty { display: none; }
.ms-empty { margin: 0; font-size: 0.85rem; color: var(--text-mute); }

.ms-tw { overflow-x: auto; }
.ms-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.85rem; background: var(--surface); border: 1px solid var(--border); }
.ms-table th {
  text-align: left; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute); padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ms-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
.ms-table tr:last-child td { border-bottom: none; }
/* Phones: the four columns did not fit, so each row stacks: name and message count, then project and last message. */
@media (max-width: 767px) {
  .ms-table { min-width: 0; }
  .ms-table thead { display: none; }
  .ms-table, .ms-table tbody { display: block; }
  .ms-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .ms-table tr:last-child { border-bottom: none; }
  .ms-table td { display: block; padding: 0; border-bottom: none; min-width: 0; overflow-wrap: anywhere; }
  .ms-table td:nth-child(2) { grid-column: 2; grid-row: 1; color: var(--text-3); }
  .ms-table td:nth-child(2)::after { content: " msgs"; font-size: 0.75rem; }
  .ms-table td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; color: var(--text-3); font-size: 0.78rem; }
  .ms-table td:nth-child(4) { grid-column: 1; grid-row: 2; margin-top: 4px; }
}
.ms-table td.num, .ms-table th.num { text-align: right; }
.ms-name { color: var(--text); text-decoration: none; font-weight: 500; }
.ms-name:hover { color: var(--accent); text-decoration: underline; }
.ms-sub { font-size: 0.72rem; color: var(--text-mute); font-family: ui-monospace, monospace; }
.ms-proj { color: var(--accent); text-decoration: none; font-size: 0.8rem; margin-right: 10px; }
.ms-proj:hover { text-decoration: underline; }
.ms-none { margin: 0; color: var(--text-faint); font-size: 0.82rem; }
.ms-undated { color: var(--text-faint); font-style: italic; cursor: help; }
.ms-snippet { margin: 4px 0 0; font-size: 0.78rem; color: var(--text-3); line-height: 1.45; max-width: 62ch; overflow-wrap: anywhere; }
.ms-snippet .hit { background: var(--warn-bg); color: var(--warn); font-weight: 600; border-radius: 2px; padding: 0 1px; }
.ms-snippet .more { margin-left: 6px; color: var(--text-faint); font-size: 0.72rem; }

.ms-pager { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--text-3); }
.ms-btn {
  display: inline-block; font: inherit; font-size: 0.8rem; padding: 5px 12px; cursor: pointer; text-decoration: none;
  background: var(--surface); color: var(--text-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.ms-btn.disabled { opacity: 0.45; cursor: default; }
.ms-btn.primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.ms-btn.small { font-size: 0.74rem; padding: 3px 10px; }

.ms-back { font-size: 0.78rem; color: var(--accent); text-decoration: none; align-self: flex-start; }
.ms-back:hover { text-decoration: underline; }
.ms-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ms-head h1 { margin: 0; font-size: 1.3rem; font-weight: 600; }
.ms-meta { font-size: 0.78rem; color: var(--text-mute); }
.ms-mono { font-family: ui-monospace, monospace; font-size: 0.76rem; }
.ms-linkline { font-size: 0.82rem; color: var(--text-3); margin-top: 4px; }

.ms-transcript { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ms-transcript li { display: flex; flex-direction: column; gap: 2px; max-width: 74%; }
.ms-transcript li.page { align-self: flex-end; align-items: flex-end; }
.ms-transcript li.system { align-self: center; max-width: 90%; }
.ms-who { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.ms-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; }
.ms-transcript li.page .ms-bubble { background: var(--accent-soft); border-color: var(--accent-fill); }
.ms-transcript li.system .ms-bubble { background: var(--surface-2); border-style: dashed; }
.ms-body { margin: 0; font-size: 0.88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-body.nonverbal { color: var(--text-mute); font-style: italic; }
.ms-when { margin-top: 4px; font-size: 0.68rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.ms-mail { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); background: var(--surface); }
.ms-mail > li { border-bottom: 1px solid var(--border); }
.ms-mail > li:last-child { border-bottom: none; }
.ms-row { display: flex; gap: 12px; align-items: baseline; font-size: 0.85rem; padding: 9px 12px; cursor: pointer; list-style: none; }
.ms-row::-webkit-details-marker { display: none; }
.ms-row:hover { background: var(--surface-2); }
.ms-mail li.us .ms-row { color: var(--text-3); }
.ms-dir { flex-shrink: 0; width: 62px; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.ms-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-date { flex-shrink: 0; font-size: 0.75rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.ms-detail { padding: 4px 12px 14px; border-top: 1px dashed var(--border); }
.ms-hdr { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-mute); padding: 8px 0; }
.ms-att { color: var(--text-3); }
.ms-why { display: flex; gap: 5px; flex-wrap: wrap; padding-bottom: 8px; }
.ms-tag { font-size: 0.62rem; padding: 1px 6px; border-radius: 2px; font-family: ui-monospace, monospace; background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
.ms-mailbody {
  margin: 0; font-family: var(--font-ui); font-size: 0.84rem; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; color: var(--text-2);
}

.ms-links { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; }
.ms-links h2 { margin: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.ms-links h3 { margin: 0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.ms-current { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-current li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; }
.ms-note { font-size: 0.76rem; color: var(--text-3); font-style: italic; }
.ms-inline { display: inline; margin-left: auto; }
.ms-unlink { font: inherit; font-size: 0.76rem; padding: 0; background: none; border: 0; color: var(--danger); cursor: pointer; text-decoration: underline; }
.ms-picker { display: flex; flex-direction: column; gap: 10px; }
.ms-picker[open] > summary { margin-bottom: 4px; }
.ms-picker > summary { list-style: none; width: fit-content; }
.ms-picker > summary::-webkit-details-marker { display: none; }
.ms-orsearch { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.ms-cands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-cands > li { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); }
.ms-chead { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.ms-ctitle { font-size: 0.88rem; font-weight: 600; }
.ms-cmeta { font-size: 0.74rem; color: var(--text-mute); }
.ms-reasons { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-reasons li { font-size: 0.78rem; color: var(--text-2); display: flex; gap: 6px; align-items: baseline; }
.ms-reasons li.weak { color: var(--text-mute); font-style: italic; }
.ms-reasons .mark { color: var(--ok); font-weight: 700; flex-shrink: 0; }
.ms-reasons li.weak .mark { color: var(--text-faint); font-weight: 400; }
.ms-hits { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); background: var(--surface); }
.ms-hits li { border-bottom: 1px solid var(--border); }
.ms-hits li:last-child { border-bottom: none; }
.ms-hit { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; cursor: pointer; }
.ms-hit:hover { background: var(--surface-2); }
.ms-hit-body { display: flex; flex-direction: column; gap: 2px; }
.ms-hit-title { font-size: 0.85rem; font-weight: 500; }
.ms-linkform { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 0; }
.ms-notefield { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.ms-notefield > span { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
@media (max-width: 767px) {
  .ms-transcript li { max-width: 92%; }
  .ms-filters { margin-left: 0; }
}

/* Projects */
.pj-run-row { align-items: center; gap: 10px; flex-wrap: wrap; }
.run-pill.is-stale { background: var(--warn-bg); border-color: var(--sev-warning); color: var(--warn); }

/* The Stats toggle is a <details>; the arrow text swaps with its state. */
.pj-stats { margin: 4px 0 10px; }
.pj-stats > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; width: fit-content; margin-bottom: 8px; }
.pj-stats > summary::-webkit-details-marker { display: none; }
.pj-stats-toggle { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-nav); color: var(--text-mute); }
.pj-stats:not([open]) .when-open, .pj-stats[open] .when-closed { display: none; }
.pj-stats[open] .pj-stats-active { display: none; }
.pj-stats-active { display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px 1px 9px; background: var(--info-bg); border: 1px solid var(--info-border); border-radius: var(--radius-sm); color: var(--info); letter-spacing: normal; text-transform: none; font-size: 0.74rem; }
/* The Filters section reuses the Stats <details> look. Its selects sit in .filter-groups, which turbo-frame > only spaces
   when it is a direct child, so the gap under them is set here. */
.pj-filters > .filter-groups { margin-bottom: 12px; }
.pj-stats-x { color: inherit; text-decoration: none; padding: 0 6px; font-size: 0.9rem; line-height: 1; }

.pj-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pj-tile { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font: inherit; }
.pj-tile.is-selectable:hover { border-color: var(--border-strong); background: var(--surface-2); }
.pj-tile.is-active { border-color: var(--accent); background: var(--accent-soft); }
.pj-tile-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; line-height: 1; }
.pj-tile-num.is-danger { color: var(--danger); }
.pj-tile-num.is-warn { color: var(--warn); }
.pj-tile-num.is-info { color: var(--info); }
.pj-tile-lbl { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-nav); color: var(--text-3); overflow-wrap: anywhere; }
@media (max-width: 767px) { .pj-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pj-summary { display: flex; align-items: baseline; gap: 10px; margin: 8px 0; font-size: 0.86rem; color: var(--text-2); }
.pj-clear { font-size: 0.78rem; color: var(--accent); }

.pj-date-group { margin-bottom: 18px; }
.pj-date-header { position: sticky; top: 52px; z-index: 2; background: var(--bg); display: flex; align-items: baseline; gap: 8px; padding: 10px 0 7px; border-bottom: 1px solid var(--border-strong); font-size: 0.62rem; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: var(--track-label); }
.pj-date-count { font-size: 0.72rem; color: var(--text-faint); letter-spacing: 0; }

.pj-row { border-bottom: 1px solid var(--border); }
.pj-row:hover, .pj-row[open] { background: var(--surface-2); }
.pj-line { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 6px; cursor: pointer; }
.pj-line::-webkit-details-marker { display: none; }
.pj-signal { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.signal-red { background: var(--danger); }
.signal-warn { background: var(--warn); }
.signal-info { background: var(--info); }
/* The Jobs row dots take the bright marker fills; the planning scheduler shares the classes above and keeps its own colours. */
.pj-row .signal-red { background: var(--sev-critical); }
.pj-row .signal-warn { background: var(--sev-warning); }
.pj-row .signal-info { background: var(--sev-info); }
.signal-none { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.pj-season { flex: none; width: 24px; font-size: 0.95rem; text-align: center; }
.pj-season.season-disagree { outline: 1px solid var(--sev-critical); border-radius: var(--radius-sm); }
.season-mark { position: relative; display: inline-block; }
.season-src { position: absolute; right: -6px; bottom: -2px; }
.pj-region { flex: none; width: 56px; font-size: 0.72rem; font-weight: 600; letter-spacing: var(--track-nav); color: var(--text-3); }
.pj-region.region-unset { color: var(--text-faint); }
.pj-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.pj-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pj-tags { display: inline-flex; gap: 4px; flex: none; font-size: 0.85rem; }
.pj-tags .tag-sep, .pj-name > .tag-sep { color: var(--text-faint); }
.pj-name > .tag-sep { flex: none; font-size: 0.85rem; }
.todo-chip:empty + .tag-sep { display: none; }
.pj-aside { flex: none; font-size: 0.78rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Phones: the chips and tags squeezed the client name to nothing, so the name takes its own line and they wrap beneath it. */
@media (max-width: 767px) {
  .pj-line { gap: 8px; padding: 10px 4px; }
  .pj-region { width: 54px; white-space: nowrap; }
  .pj-name { flex-wrap: wrap; align-items: center; row-gap: 4px; gap: 6px; }
  .pj-title { flex: 1 0 100%; }
  .pj-name .chip { font-size: 0.62rem; letter-spacing: 0.04em; min-width: 0; }
  .pj-tags { flex-wrap: wrap; }
  .pj-aside { white-space: nowrap; font-size: 0.72rem; }
  .pj-row .pj-panel { padding-left: 8px; }
}

.pj-panel { padding: 6px 8px 18px 26px; display: flex; flex-direction: column; gap: 16px; cursor: default; }
.pj-panel-loading { margin: 0; font-size: 0.8rem; color: var(--text-mute); }
.pj-issues-empty.is-error { color: var(--danger); }
.pj-section-title { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-mute); margin-bottom: 6px; }
.pj-panel .pj-section-title { font-size: 0.8rem; margin-bottom: 8px; }
/* Each section's contents sit a step in from its heading; the file request draws its heading inside its own box. */
.pj-panel-section > :not(.pj-section-title, .sm-fr) { margin-left: 10px; }
.pj-panel-section:not(.pj-collapsible) > .sm-fr > :not(.pj-section-title) { margin-left: 10px; }
.pj-panel-section.pj-collapsible > :not(summary) { margin-left: 24px; }
.pj-panel-section > turbo-frame { display: block; }
.pj-collapsible > summary { cursor: pointer; list-style: none; user-select: none; }
.pj-collapsible > summary::-webkit-details-marker { display: none; }
.pj-collapsible > summary::before { content: "\25B8"; display: inline-block; width: 1em; transition: transform 0.12s; }
.pj-collapsible[open] > summary::before { transform: rotate(90deg); }
.pj-collapsible > summary:hover { color: var(--text-3); }
/* A button on a folding section's title line (View messages on Client, #495): reachable while folded. */
.pj-collapsible > summary .pj-summary-action { margin-left: 10px; text-transform: none; letter-spacing: normal; font-weight: 500; vertical-align: middle; }
.pj-todos-empty { margin: 0 0 8px; font-size: 0.84rem; color: var(--text-3); }
.pj-todos { margin-bottom: 10px; }
.pj-todos .add-row, .pj-panel-section > .add-row { margin-bottom: 6px; }
.pj-todo-add[hidden] { display: none; }
.pj-todo-add { padding: 6px 20px; font-size: 0.85rem; }
.pj-todos-done { margin-top: 10px; }
.pj-todos-done > summary { font-size: 0.84rem; color: var(--text-3); }
.pj-todos-done .todo-list { margin-top: 8px; }
.pj-panel .todo-project { display: none; }
.todo-chip { flex: none; }
.todo-chip:empty { display: none; }
.pj-issues { display: flex; flex-direction: column; gap: 6px; }
.pj-issues-empty { font-size: 0.84rem; color: var(--text-3); }
.pj-issue { display: flex; gap: 8px; align-items: flex-start; font-size: 0.84rem; }
.pj-issue-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--sev-info); }
.pj-issue-critical .pj-issue-dot { background: var(--sev-critical); }
.pj-issue-warning .pj-issue-dot { background: var(--sev-warning); }
.pj-issue-check { font-weight: 600; }
.pj-issue-message { color: var(--text-2); overflow-wrap: anywhere; }

/* Leads and Archive: the count beside the title, and the advice chip on a row. */
.page-count { font-size: 1rem; color: var(--text-mute); font-family: var(--font-ui); margin-left: 6px; }
.advice-chip { cursor: help; flex: none; }
.advice-chip.is-bad { border-color: var(--sev-critical); }
.advice-chip.is-warn { border-color: var(--sev-warning); }
.pj-run-row .page-title { margin: 0; }

/* The row panel. */
.pj-grid { display: grid; grid-template-columns: 116px 1fr; gap: 5px 12px; align-items: baseline; }
.pj-lbl { font-size: 0.78rem; color: var(--text-3); }
.pj-val { font-size: 0.82rem; color: var(--text-2); overflow-wrap: anywhere; }
.pj-val a, .pj-link { color: var(--accent); text-decoration: none; }
.pj-link { margin-left: 6px; white-space: nowrap; }
.pj-link-flush { margin-left: 0; }
.pj-val a:hover, .pj-link:hover { text-decoration: underline; }
.val-warn { color: var(--warn); }
.val-muted { color: var(--text-3); }
.pj-invite-mark { margin-left: 6px; }
.pj-date-source { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--text-faint); }
.pj-trello-head { display: flex; align-items: center; }
.pj-trello-detail { display: block; margin-top: 4px; font-size: 0.78rem; line-height: 1.45; color: var(--text-mute); }
.pj-trello-detail strong { color: var(--text-2); font-weight: 600; }
.pj-pinned { margin-left: 6px; color: var(--text-faint); font-style: italic; }
.pj-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.7rem; color: var(--text-faint); }
.pj-mono { font-family: var(--font-mono, monospace); }
.pj-badge { font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.03em; }
.audit-mismatch { background: var(--sev-critical); color: var(--sev-critical-on); }
.audit-match { background: var(--ok-bg); color: var(--ok); }
.audit-no-location, .audit-not-audited { background: var(--surface-2); color: var(--text-mute); }
.pj-view-btn { margin-left: 8px; font-size: 0.7rem; font-weight: 600; color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px; white-space: nowrap; text-decoration: none; }
.pj-view-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.pj-qe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.pj-qe-row .todo-btn { padding: 2px 12px; font-size: 0.75rem; }
@media (max-width: 767px) { .pj-grid { grid-template-columns: 1fr; gap: 2px; } .pj-lbl { color: var(--text-faint); font-size: 0.72rem; } .pj-val { margin-bottom: 6px; } }

/* The project emails: checklist chips and the mail list. */
.pj-emails { display: flex; flex-direction: column; gap: 8px; }
.pj-emails-note { font-size: 0.8rem; color: var(--text-3); }
.pj-emails-note.is-error { color: var(--danger); }
.pj-stage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-stage-chip { font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-mute); }
.pj-chip-when { font-weight: 400; margin-left: 3px; }
.pj-stage-chip.chip-sent { background: var(--ok-bg); color: var(--ok); }
.pj-stage-chip.chip-missing.sev-warning { background: var(--sev-warning); color: var(--sev-warning-on); }
.pj-stage-chip.chip-missing.sev-critical { background: var(--sev-critical); color: var(--sev-critical-on); }
.pj-missing-note { font-size: 0.78rem; color: var(--text-mute); }
.pj-missing-note.sev-critical { color: var(--danger); }
.pj-email-list { display: flex; flex-direction: column; }
.pj-email-item { border-top: 1px solid var(--border); padding: 4px 0; }
.pj-email-item:first-child { border-top: none; }
.pj-email-item > summary { list-style: none; cursor: pointer; }
.pj-email-item > summary::-webkit-details-marker { display: none; }
.pj-email-line { display: flex; align-items: baseline; gap: 8px; font-size: 0.8rem; color: var(--text-2); padding: 2px 0; }
.pj-email-line::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.55; flex: none; align-self: center; }
.pj-email-dir { font-weight: 700; flex: none; }
.dir-sent { color: var(--accent); }
.dir-received { color: var(--text-3); }
.pj-email-date { color: var(--text-3); font-size: 0.74rem; white-space: nowrap; flex: none; min-width: 8.6em; }
.pj-email-date:empty { display: none; }
.pj-kind-badge { font-size: 0.66rem; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; flex: none; }
.pj-email-subject { min-width: 0; overflow-wrap: anywhere; }
.pj-tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pj-tl-event.tl-reschedule { background: var(--warn-bg); }
.pj-tl-event.tl-reschedule .pj-email-line { color: var(--warn); font-weight: 600; }
.pj-tl-event.tl-status .pj-email-line { color: var(--danger); font-weight: 600; }
.pj-tl-event.tl-kind-note .pj-email-subject { font-style: italic; }
.pj-tl-shoot { margin-top: 10px; }
.pj-tl-shoot-head { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.pj-email-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 0 13px; }
.pj-latest-mark { font-size: 0.7rem; color: var(--text-3); }
.pj-email-body-wrap { margin: 4px 0 4px 13px; }
.pj-email-to { font-size: 0.72rem; color: var(--text-3); overflow-wrap: anywhere; }
.pj-email-body, .corr-mail-body { margin: 4px 0 0; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); font-family: var(--font-mono, monospace); font-size: 0.74rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }

/* The location email modal. */
.email-modal-body, .corr-modal-body { min-width: 0; }
.verdict-block { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.82rem; }
.verdict-mismatch, .verdict-no-location { border-left-color: var(--sev-critical); }
.verdict-match { border-left-color: var(--ok); }
.verdict-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.verdict-reason { color: var(--text-2); }
.verdict-detail { display: grid; grid-template-columns: 120px 1fr; gap: 3px 10px; align-items: baseline; }
.verdict-lbl { color: var(--text-mute); font-size: 0.76rem; }
.verdict-val { color: var(--text-2); overflow-wrap: anywhere; }
.verdict-note { margin: 0; font-size: 0.78rem; color: var(--text-mute); }
.verdict-warning { margin: 0; font-size: 0.78rem; color: var(--warn); }
.word-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.word-chip { font-size: 0.72rem; padding: 1px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.word-hit { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.word-miss { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.email-body { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.84rem; line-height: 1.5; overflow-wrap: anywhere; max-height: 52vh; overflow-y: auto; margin: 0; }
.email-plain, .email-raw { font-family: var(--font-mono, monospace); font-size: 0.76rem; white-space: pre-wrap; }
.email-body a { color: var(--accent); }
.email-img-placeholder { display: inline-block; padding: 0 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-faint); font-size: 0.72rem; }
.venue-hit { background: #f3e2a8; color: inherit; padding: 0 1px; border-radius: 2px; }

/* The Trello card modal, project-scoped. */
.slot-focus { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface-2); padding: 9px 12px; display: flex; flex-direction: column; gap: 5px; }
.slot-focus-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute); display: flex; gap: 8px; flex-wrap: wrap; }
.confidence-flag { color: var(--danger); text-transform: none; letter-spacing: 0; }
.slot-parsed { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-mute); }
.slot-note { font-style: italic; }
.ambiguity-note { margin: 0; font-size: 0.78rem; color: var(--text-mute); }
.slot-matched { background: var(--accent-soft); border-left-color: var(--accent); }
.slot-raw-focus { font-size: 0.82rem; }

/* The messages modal. */
.corr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.corr-tab { padding: 6px 12px; font-size: 0.8rem; color: var(--text-mute); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.corr-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.corr-tab-count { font-size: 0.7rem; color: var(--text-faint); margin-left: 4px; }
.corr-threads { display: flex; gap: 6px; flex-wrap: wrap; }
.corr-thread-btn { border: 1px solid var(--border); padding: 3px 10px; font-size: 0.75rem; color: var(--text-mute); text-decoration: none; border-radius: var(--radius-sm); }
.corr-thread-btn.active { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.corr-note { margin: 0; font-size: 0.78rem; color: var(--text-mute); }
.corr-chat { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; padding: 4px 2px; }
.corr-bubble-row { display: flex; }
.corr-bubble-row.side-page { justify-content: flex-end; }
.corr-bubble { max-width: 78%; padding: 7px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.side-page .corr-bubble { background: var(--accent-soft); border-color: var(--accent-fill); }
.corr-bubble-text { font-size: 0.84rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.corr-bubble-img { font-size: 0.8rem; color: var(--text-mute); font-style: italic; }
.corr-bubble-time { margin-top: 3px; font-size: 0.66rem; color: var(--text-mute); }
.corr-bubble-time.approx { font-style: italic; }
.corr-approx-mark { margin-left: 4px; color: var(--warn); }
.corr-sys-note { align-self: center; max-width: 90%; font-size: 0.74rem; color: var(--text-mute); text-align: center; }
.corr-divider { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.corr-divider::before, .corr-divider::after { content: ""; flex: 1; border-top: 1px solid var(--accent-fill); }
.corr-mail-list { display: flex; flex-direction: column; }
.corr-mail-item { border-top: 1px solid var(--border); padding: 6px 0; }
.corr-mail-item:first-child { border-top: none; }
.corr-mail-item > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.corr-mail-item > summary::-webkit-details-marker { display: none; }
.corr-mail-head { display: flex; align-items: baseline; gap: 8px; font-size: 0.82rem; }
.corr-mail-dir { font-weight: 700; flex: none; }
.corr-mail-subject { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.corr-mail-date { font-size: 0.72rem; color: var(--text-mute); white-space: nowrap; }
.corr-mail-sub { font-size: 0.74rem; color: var(--text-mute); margin-left: 22px; }
.corr-mail-attach, .corr-mail-reason { margin-left: 8px; }
.corr-mail-reason { color: var(--accent); }

/* Audit Items and Email Templates. */
.pj-lede { margin: 0 0 16px; max-width: 62ch; font-size: 0.88rem; line-height: 1.5; color: var(--text-2); }
.pj-lede-note { color: var(--warn); }
.pj-group-head { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 6px; }
.pj-group-sub { margin: 0 0 14px; max-width: 70ch; font-size: 0.82rem; line-height: 1.5; color: var(--text-mute); }
.pj-audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pj-audit-item { display: flex; flex-direction: column; gap: 5px; }
.pj-audit-head { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.pj-audit-head.is-openable:hover .pj-audit-name { text-decoration: underline; }
.pj-sev-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.pj-sev-dot.is-danger { background: var(--sev-critical); }
.pj-sev-dot.is-warn { background: var(--sev-warning); }
.pj-sev-dot.is-info { background: var(--sev-info); }
.pj-audit-name { font-weight: 600; font-size: 0.92rem; }
.pj-audit-count { font-family: var(--font-display); font-size: 1.2rem; }
.pj-audit-count.is-danger { color: var(--danger); }
.pj-audit-count.is-warn { color: var(--warn); }
.pj-audit-count.is-info { color: var(--info); }
.pj-audit-count.is-muted { color: var(--text-faint); }
.pj-audit-caret { color: var(--text-mute); }
.pj-audit-standard { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-2); max-width: 80ch; }
.pj-audit-reads { margin: 0; font-size: 0.76rem; color: var(--text-mute); }
.pj-audit-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pj-audit-meta .chip.is-danger { color: var(--danger); }
.pj-audit-meta .chip.is-info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.pj-audit-meta .chip.is-danger { border-color: var(--sev-critical); }
.pj-audit-meta .chip.is-warn { border-color: var(--sev-warning); }
.pj-audit-meta .chip.is-info { border-color: var(--sev-info); }
.pj-mono-id { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--text-faint); }
.pj-finding-list { list-style: none; margin: 4px 0 0; padding: 0 0 0 19px; display: flex; flex-direction: column; gap: 8px; }
.pj-finding { display: flex; gap: 8px; align-items: flex-start; }
.pj-finding .pj-sev-dot { margin-top: 5px; }
.pj-finding-project { color: var(--accent); font-weight: 600; font-size: 0.84rem; text-decoration: none; }
.pj-finding-date { margin-left: 8px; font-size: 0.74rem; color: var(--text-mute); }
.pj-finding-message { font-size: 0.8rem; color: var(--text-2); overflow-wrap: anywhere; }
.pj-retired-toggle { font-size: 0.8rem; color: var(--accent); }
.pj-audit-list.retired { margin-top: 12px; opacity: 0.85; }

.pj-email-layout { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.pj-template-list { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.pj-template-item { padding: 6px 12px; font-size: 0.8rem; color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.pj-template-item:hover { background: var(--surface-2); }
.pj-template-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.pj-list-empty { margin: 0; padding: 12px; font-size: 0.8rem; color: var(--text-mute); }
.pj-template-detail { display: block; min-width: 0; }
.pj-template-name { font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; }
.pj-template-subject { margin: 0 0 12px; font-size: 0.84rem; color: var(--text-mute); }
.pj-template-html { display: block; width: 100%; height: 75vh; min-height: 480px; border: 1px solid var(--border, #ddd); border-radius: 6px; background: #fff; }
.pj-template-plain { margin-top: 0.75rem; }
.pj-template-plain summary { cursor: pointer; font-size: 0.82rem; color: var(--text-2); }
.pj-template-plain .pj-template-body { margin-top: 0.5rem; }
.pj-template-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.86rem; line-height: 1.55; color: var(--text-2); }
.pj-toggle.on { color: var(--text); }
@media (max-width: 767px) { .pj-email-layout { grid-template-columns: 1fr; } .pj-template-list { max-height: 32vh; } }

/* Planning (the Bun trello mount): Active Sessions, Current Boards, Board History. The tiles, summaries, date headers and
   panel grids reuse the Projects classes (pj-*); everything below is Planning's own. */
.captured-note { font-size: 0.85rem; color: var(--text-mute); margin: 0 0 16px; }
.bracket-note { font-size: 0.78rem; color: var(--text-faint); margin: 0 0 20px; }
.pl-filter-row { flex-wrap: nowrap; margin-bottom: 4px; }
.pl-filter-row > * { flex: 1 1 190px; min-width: 0; }
.pl-season-group { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto !important; }
.pl-season-label { font-size: 0.62rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: var(--track-label); }
.pl-season-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-season-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); font-family: inherit; font-size: 1.15rem; line-height: 1; padding: 8px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color 0.12s, background 0.12s, opacity 0.12s; }
.pl-season-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.pl-season-btn.active { background: var(--surface-2); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pl-season-btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 768px) {
  .pl-filter-row { flex-wrap: wrap; gap: 10px 12px; }
  .pl-season-group { flex: 1 1 100% !important; }
  .pl-filter-row > .filter-group { flex: 1 1 0; min-width: 0; }
}
.pl-stat-group { margin-bottom: 14px; }
.pl-stat-label { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-mute); margin-bottom: 6px; }
.pj-tile-num.is-ok { color: var(--ok); }

.pl-row { border-bottom: 1px solid var(--border); }
.pl-row:hover, .pl-row[open] { background: var(--surface-2); }
.pl-row.stale { opacity: 0.55; }
.pl-line { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 8px; cursor: pointer; }
.pl-line::-webkit-details-marker { display: none; }
.pl-season { flex: none; width: 30px; font-size: 0.95rem; line-height: 1; white-space: nowrap; }
.pl-season-note { color: var(--text-faint); font-size: 0.78rem; }
.pl-region { flex: none; width: 62px; font-size: 0.72rem; font-weight: 600; color: var(--text-mute); letter-spacing: 0.03em; }
.pl-region.region-unset { color: var(--text-faint); }
.pl-title { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-time { flex: none; font-size: 0.82rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pl-gaps { flex: none; width: 54px; display: flex; justify-content: flex-end; gap: 5px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-gap-mark { white-space: nowrap; }
.gap-unlinked { color: var(--warn); }
.gap-claimed { color: var(--danger); }
.pl-fill { flex: none; width: 46px; text-align: right; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fill-empty { color: var(--info); }
.fill-partial { color: var(--warn); }
.fill-full { color: var(--ok); }
@media (max-width: 768px) { .pl-time { display: none; } }
/* Phones: the fixed columns left the session name about 8 letters, so they narrow and the name wraps onto a second line. */
@media (max-width: 767px) {
  .pl-line { gap: 8px; padding: 11px 4px; }
  .pl-season { width: 18px; }
  .pl-region { width: 52px; white-space: nowrap; }
  .pl-title { white-space: normal; overflow-wrap: anywhere; }
  .pl-gaps { width: auto; }
  .pl-fill { width: 40px; }
  .pl-row .pl-detail { padding-left: 8px; }
}

.pl-detail { padding: 6px 8px 18px 25px; display: flex; flex-direction: column; gap: 16px; cursor: default; }
.pl-stale-note { margin: 8px 0 0; font-size: 0.76rem; color: var(--warn); }
.pl-sun-computed { opacity: 0.65; cursor: help; }
.pl-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pl-chip { display: inline-block; font: inherit; font-size: 0.74rem; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-mute); text-decoration: none; list-style: none; text-align: left; }
.pl-chip::-webkit-details-marker { display: none; }
.pl-chip.slot-booked { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.pl-chip.slot-open { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
.pl-chip.is-openable { cursor: pointer; }
.pl-chip.is-openable:hover { border-color: var(--border-strong); }
.pl-chip.is-explainable { cursor: help; }
.pl-chip.is-issue-hit { box-shadow: 0 0 0 2px var(--accent); }
.pl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-mark { margin-left: 0.3em; font-weight: 700; opacity: 0.85; }
.link-linked .pl-mark { opacity: 0.5; }
.pl-chip.link-unlinked { border-style: dashed; }
.link-unlinked .pl-mark { color: var(--warn); }
.pl-chip.link-claimed { border-color: var(--danger-border); }
.link-claimed .pl-mark { color: var(--danger); }
.pl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; font-size: 0.74rem; color: var(--text-mute); }
.pl-legend-title { font-weight: 600; }
.pl-legend-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-gap[open] { align-self: stretch; }
.pl-gap[open] > .pl-chip { border-style: solid; background: var(--warn-bg); }
.pl-gap-panel { margin-top: 8px; border: 1px dashed var(--warn-border); border-left: 3px solid var(--warn); background: var(--warn-bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pl-gap-head { font-size: 0.76rem; font-weight: 600; color: var(--warn); }
.pl-gap-grid { display: grid; grid-template-columns: 68px 1fr; gap: 3px 12px; margin: 0; font-size: 0.78rem; }
.pl-gap-grid dt { color: var(--text-mute); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 2px; }
.pl-gap-grid dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.pl-gap-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-gap-btn { font: inherit; font-size: 0.68rem; letter-spacing: 0.04em; padding: 1px 7px; border: 1px solid var(--warn-border); border-radius: var(--radius-sm); background: none; color: var(--warn); cursor: pointer; text-decoration: none; white-space: nowrap; }
.pl-gap-btn:hover { border-color: var(--warn); }
.pl-gap-hint { margin: 0; font-size: 0.72rem; line-height: 1.5; color: var(--text-mute); }
.pl-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.pl-open { display: block; width: fit-content; margin-top: 10px; font-size: 0.7rem; font-weight: 600; color: var(--accent); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px; white-space: nowrap; }
.pl-open:hover { border-color: var(--accent); background: var(--surface-2); }

/* The project modal. */
.pl-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-badge { font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.03em; background: var(--surface-2); color: var(--text-mute); }
.pl-badge.st-live { background: var(--ok-bg); color: var(--ok); }
.pl-badge.st-done { background: var(--info-bg); color: var(--info); }
.pl-badge.st-flag { background: var(--danger-bg); color: var(--danger); }
.pl-badge.st-check { background: var(--warn-bg); color: var(--warn); }
.pl-fuzzy-note { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--warn); }
.pl-project-grid { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0; font-size: 0.82rem; }
.pl-project-grid dt { color: var(--text-3); font-size: 0.78rem; }
.pl-project-grid dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.pl-contact { display: flex; flex-direction: column; gap: 2px; }
.pl-issues-head { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-mute); margin-bottom: 4px; }
.pl-issues ul { margin: 0; padding-left: 18px; font-size: 0.82rem; }
.pl-issues .sev-critical { color: var(--danger); }
.pl-issues .sev-warning { color: var(--warn); }

/* Current Boards and Board History. */
.pl-month-select, .pl-board-select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 0.82rem; font-family: inherit; padding: 6px 12px; cursor: pointer; max-width: 320px; }
.pl-month-select:hover, .pl-board-select:hover { border-color: var(--border-strong); }
.pl-explorer-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.pl-other-group { display: flex; flex-direction: column; gap: 5px; }
.pl-other-label { font-size: 0.62rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: var(--track-label); }
.pl-board-meta { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; }
.pl-kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; }
.pl-column { flex: 0 0 272px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pl-column-head { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 0.8rem; font-weight: 600; border-bottom: 1px solid var(--border); }
.pl-column-count { color: var(--text-faint); font-weight: 400; }
.pl-column-body { display: flex; flex-direction: column; gap: 6px; padding: 8px; max-height: 70vh; overflow-y: auto; }
.pl-column-empty { margin: 0; font-size: 0.76rem; color: var(--text-faint); }
.pl-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.pl-card:hover { border-color: var(--border-strong); }
.pl-card.card-closed { opacity: 0.6; }
.pl-card.is-search-hit { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pl-search-wrap { position: relative; }
.pl-search { position: relative; max-width: 320px; }
.pl-search-frame { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: min(560px, 100%); }
.pl-search-block { max-height: 60vh; overflow-y: auto; padding: 8px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.pl-search-block .state-msg { margin: 0; padding: 4px 12px; }
.pl-search-results { margin: 0; padding: 0; list-style: none; }
.pl-search-note { margin: 0; padding: 0 12px 6px; font-size: 0.76rem; color: var(--text-mute); }
.pl-search-hit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 8px 12px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.pl-search-results li:last-child .pl-search-hit { border-bottom: 0; }
.pl-search-hit:hover, .pl-search-hit.is-active { background: var(--surface-2); }
.pl-search-hit.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.pl-search-glyph { grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.pl-search-head { overflow-wrap: anywhere; }
.pl-search-list { color: var(--text-faint); font-size: 0.74rem; }
.pl-search-snippet { grid-column: 2; font-size: 0.76rem; color: var(--text-mute); overflow-wrap: anywhere; }
.pl-search-hit mark { background: var(--warn-bg); color: inherit; border-radius: 2px; }
.pl-card-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-label-dot { width: 28px; height: 6px; border-radius: 3px; }
.pl-card-name { font-size: 0.84rem; overflow-wrap: anywhere; }
.pl-card-desc { font-size: 0.74rem; color: var(--text-mute); overflow-wrap: anywhere; }
.pl-due { width: fit-content; font-size: 0.7rem; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-mute); }
.pl-due.due-overdue { background: var(--danger-bg); color: var(--danger); }
.pl-due.due-complete { background: var(--ok-bg); color: var(--ok); }
.pl-modal-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-modal-label { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); color: #040404; }
.pl-desc { font-size: 0.84rem; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.pl-desc p { margin: 0 0 8px; }
.pl-desc ul, .pl-desc ol { margin: 0 0 8px; padding-left: 20px; }
.pl-desc a { color: var(--accent); }
.pl-desc table { border-collapse: collapse; }
.pl-desc th, .pl-desc td { border: 1px solid var(--border); padding: 2px 8px; }
.pl-desc-empty { color: var(--text-faint); font-style: italic; }

/* Calendar (the Bun calendar mount): the Associates tab and the Calendar tab. The captured-note, bracket-note, tiles (pj-tile),
   modal and fact-grid classes are shared with Planning and Projects; everything below is the Calendar's own. */
.cal-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cal-tile-of { color: var(--text-faint); text-transform: none; letter-spacing: 0; font-weight: 400; }
.cal-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.cal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-chip { display: inline-flex; align-items: baseline; gap: 7px; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-mute); font-size: 0.82rem; padding: 6px 12px; text-decoration: none; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.cal-chip:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }
.cal-chip.active { background: var(--surface); border-color: var(--accent); color: var(--text); }
.cal-chip-count { font-size: 0.76rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cal-chip.active .cal-chip-count { color: var(--text-3); }
.cal-chip.is-inert, .cal-chip.is-inert:hover { cursor: default; color: var(--text-faint); background: none; border-color: var(--border); }
.cal-filter-row { margin-bottom: 16px; }

.cal-list { display: flex; flex-direction: column; gap: 8px; }
.cal-event { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; transition: border-color 0.12s, background 0.12s; }
.cal-event:hover, .cal-event:focus-within { background: var(--surface-2); border-color: var(--border-strong); }
.cal-row { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.cal-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cal-type { font-size: 0.7rem; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.cal-type.type-availability, .cal-type.type-available { background: var(--info-bg); color: var(--info); }
.cal-type.type-hold { background: var(--warn-bg); color: var(--warn); }
.cal-type.type-unavailable { background: var(--surface-2); color: var(--text-mute); }
.cal-type.type-booking { background: var(--ok-bg); color: var(--ok); }
.cal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cal-title { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.cal-meta { font-size: 0.76rem; color: var(--text-mute); }
.cal-date { font-size: 0.76rem; color: var(--text-3); flex-shrink: 0; white-space: nowrap; text-align: right; }
.cal-allday { display: block; font-size: 0.68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
@media (max-width: 768px) { .cal-row { flex-wrap: wrap; } .cal-chip-row { margin-left: 0; } }

/* The Trello chips: the session booked into an availability day, on a line of their own under the row. */
.cal-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 96px; }
.cal-trello-chip { display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-mute); text-decoration: none; font-variant-numeric: tabular-nums; }
a.cal-trello-chip:hover { border-color: var(--border-strong); }
a.cal-trello-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-trello-chip.chip-booked { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.cal-trello-chip.chip-empty { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.cal-trello-chip.chip-none { color: var(--text-faint); font-weight: 500; }
.cal-chip-date { font-weight: 700; }
.cal-chip-via { opacity: 0.55; }

/* Associates: the roster of coverage. */
.cal-section { margin-bottom: 40px; }
.cal-section-hint { font-size: 0.78rem; color: var(--text-3); margin: -10px 0 16px; }
.cal-associate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cal-associate-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color 0.12s, background 0.12s; }
.cal-associate-card:hover, .cal-associate-card:focus-visible { background: var(--surface-2); border-color: var(--border-strong); outline: none; }
.cal-associate-name { font-size: 0.9rem; font-weight: 600; color: var(--text-2); }
.cal-associate-region { font-size: 0.76rem; color: var(--text-3); margin: 2px 0 8px; }
.cal-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-pill { font-size: 0.72rem; font-weight: 500; padding: 2px 9px; border-radius: var(--radius-sm); }
.cal-pill.count-availability { background: var(--info-bg); color: var(--info); }
.cal-pill.count-hold { background: var(--warn-bg); color: var(--warn); }
.cal-pill.count-booked { background: var(--ok-bg); color: var(--ok); }
.cal-pill.count-none { background: var(--surface-2); color: var(--text-mute); }
.cal-associate-flag { font-size: 0.72rem; color: var(--warn); margin-top: 6px; }

/* Associates: one associate. */
.cal-back { display: inline-block; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-mute); font-size: 0.82rem; padding: 6px 12px; margin-bottom: 20px; text-decoration: none; }
.cal-back:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }
.cal-detail-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 24px; }
.cal-detail-name { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.cal-detail-region { font-size: 0.85rem; color: var(--text-mute); margin-top: 2px; }
.cal-detail-tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.cal-detail-tab { display: inline-flex; align-items: baseline; gap: 7px; color: var(--text-mute); font-size: 0.88rem; font-weight: 600; padding: 8px 4px 10px; margin-right: 18px; border-bottom: 2px solid transparent; text-decoration: none; }
.cal-detail-tab:hover { color: var(--text-2); }
.cal-detail-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.cal-detail-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-tab-count { font-size: 0.76rem; font-weight: 500; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cal-detail-tab.active .cal-tab-count { color: var(--text-3); }
.cal-tab-flag { font-size: 0.7rem; font-weight: 700; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 0 5px; font-variant-numeric: tabular-nums; }

/* "Booked but never marked free": a warning panel, not a row treatment. */
.cal-unposted { border: 1px solid var(--warn-border); border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; }
.cal-unposted-head { font-size: 0.85rem; font-weight: 700; color: var(--warn); }
.cal-unposted-sub { font-size: 0.76rem; line-height: 1.5; color: var(--text-mute); margin: 4px 0 10px; max-width: 68ch; }
.cal-unposted-list { display: flex; flex-direction: column; gap: 4px; }
.cal-unposted-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface); font-size: 0.82rem; color: inherit; text-decoration: none; }
.cal-unposted-row:hover { border-color: var(--warn-border); }
.cal-unposted-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-unposted-date { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cal-unposted-card { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-unposted-fill { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-unposted-fill.is-danger { color: var(--danger); }
.cal-unposted-fill.is-warn { color: var(--warn); }

/* The event modal. */
.cal-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-badge { font-size: 0.7rem; letter-spacing: 0.04em; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-mute); white-space: nowrap; }
.cal-badge.st-avail { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.cal-badge.st-booked { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.cal-badge.st-flag { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.cal-badge.st-check { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.cal-hold-note { margin: 0; font-size: 0.76rem; line-height: 1.5; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 8px 10px; }
.cal-invite { color: var(--text-mute); }
.cal-invite.val-warn { color: var(--warn); }
.cal-desc { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cal-desc-head { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.cal-desc-body { font-size: 0.84rem; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.cal-desc-body a { color: var(--accent); }
.cal-desc-body p { margin: 0 0 0.6em; }
.cal-desc-body p:last-child { margin-bottom: 0; }
/* Google Calendar wraps its own links in stacked <u> tags; the anchor styling already carries the underline. */
.cal-desc-body u { text-decoration: none; }
.cal-desc-plain { margin: 0; white-space: pre-wrap; font-family: inherit; }
.cal-no-desc { margin: 0; border-top: 1px solid var(--border); padding-top: 12px; font-size: 0.8rem; color: var(--text-3); }
.cal-modal-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.cal-captured { font-size: 0.72rem; color: var(--text-faint); }

/* The Trello session modal. */
.cal-fact-note { color: var(--text-mute); font-size: 0.78rem; }
.cal-fill-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cal-fill-num { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-fill-num.is-ok { color: var(--ok); }
.cal-fill-num.is-warn { color: var(--warn); }
.cal-fill-lbl, .cal-fill-extra { font-size: 0.78rem; color: var(--text-mute); }
.cal-slot { display: grid; grid-template-columns: 78px 76px 1fr; gap: 10px; align-items: baseline; font-size: 0.82rem; }
.cal-slot-time { font-variant-numeric: tabular-nums; color: var(--text-2); }
.cal-slot-status { color: var(--text-mute); text-transform: capitalize; }
.cal-slot-who { color: var(--text-2); overflow-wrap: anywhere; }
.cal-slot-project { margin-left: 6px; font-size: 0.76rem; color: var(--accent); }
.cal-slot-unlinked { margin-left: 6px; font-size: 0.74rem; color: var(--warn); }

/* Admin: Logins, Team, Regions. */
.ad-note { padding: 9px 14px; margin-bottom: 14px; font-size: 0.85rem; background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok); }
.ad-note.error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.ad-lede, .ad-hint, .ad-counts { font-size: 0.8rem; color: var(--text-mute); line-height: 1.5; margin: 0 0 12px; }
.ad-hint { margin: 4px 0 0; font-size: 0.74rem; }
.ad-legend > summary { cursor: pointer; margin: 0; }
.ad-legend-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 10px 0 0; font-size: 0.8rem; line-height: 1.45; }
.ad-legend-list dt, .ad-legend-list dd { margin: 0; }
.ad-legend-list ul { margin: 0; padding-left: 16px; }
.ad-table-wrap { overflow-x: auto; }
.ad-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.ad-table th { text-align: left; font-size: 0.68rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-mute); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.ad-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ad-logins .mono { overflow-wrap: anywhere; }
.ad-logins .ad-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 9rem; max-width: 15rem; }
.ad-logins .ad-btn { padding: 5px 10px; }
.ad-table tr.off td { color: var(--text-mute); }
/* Phones: the logins table ran past the edge, so each login becomes a block: name, then role, position, status and last seen, then the buttons. */
@media (max-width: 767px) {
  .ad-logins thead { display: none; }
  .ad-logins, .ad-logins tbody { display: block; }
  .ad-logins tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .ad-logins td { display: block; padding: 0; border-bottom: none; }
  .ad-logins td:first-child { flex: 1 0 100%; }
  .ad-logins td:nth-child(5) { color: var(--text-3); }
  .ad-logins td:nth-child(5)::before { content: "last seen "; }
  .ad-logins .ad-actions { flex: 1 0 100%; max-width: none; }
}
.ad-warn { color: var(--warn); }
.ad-pill { display: inline-block; font-size: 0.68rem; padding: 1px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-3); background: var(--surface); white-space: nowrap; }
.ad-pill.on { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); }
.ad-pill.off { color: var(--text-mute); background: var(--surface-2); }
.ad-pill.access-admin { color: var(--info); border-color: var(--info-border); background: var(--info-bg); }
.ad-pill.access-owner { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }
.ad-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ad-search { flex: 1; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: max(0.85rem, 16px); padding: 8px 12px; }
.ad-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-3); }
.ad-btn { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-2); cursor: pointer; font: inherit; font-size: 0.78rem; padding: 7px 14px; text-decoration: none; display: inline-block; }
.ad-btn:hover { border-color: var(--accent); color: var(--text); }
.ad-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ad-btn.primary:hover { background: var(--accent-hover); }
.ad-btn.danger { color: var(--danger); border-color: var(--danger-border); }
.ad-region-group { margin-bottom: 18px; }
.ad-region-head { font-size: 0.78rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }
.ad-code, .ad-count { font-size: 0.7rem; color: var(--text-mute); font-weight: 400; letter-spacing: 0; }
.ad-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); margin-bottom: -1px; color: inherit; text-decoration: none; flex-wrap: wrap; }
.ad-row:hover { background: var(--surface-2); }
.ad-row.off { color: var(--text-mute); }
.ad-row-id { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 180px; }
.ad-row-name { font-weight: 600; font-size: 0.88rem; }
.ad-row-meta { display: flex; gap: 12px; font-size: 0.76rem; color: var(--text-mute); flex-wrap: wrap; }
.ad-thumb { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-3); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--text-3); }
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The placeholder is .no-photo, not .empty: the general .empty rule pads empty-state messages by 40px and blew the circle up (#496). */
.ad-card .ad-thumb { width: 72px; height: 72px; font-size: 1.1rem; }
.ad-portrait { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ad-portrait-forms { display: flex; flex-direction: column; gap: 8px; font-size: 0.8rem; }
.ad-portrait-forms form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ad-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.ad-form-title { font-size: 0.85rem; margin: 0; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; }
.ad-grid-sub { grid-column: 1 / -1; }
.ad-grid-sub[hidden] { display: none; }
.ad-f { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: var(--text-mute); }
.ad-f em { font-style: normal; color: var(--text-faint); }
.ad-f.wide { grid-column: 1 / -1; }
.ad-f.check { flex-direction: row; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-3); }
.ad-f input[type=text], .ad-f input[type=email], .ad-f select, .ad-f textarea { font: inherit; font-size: max(0.85rem, 16px); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; }
.ad-actions { display: flex; gap: 10px; }
.ad-region { border: 1px solid var(--border); background: var(--surface); margin-bottom: 8px; padding: 8px 12px; }
.ad-region.off { color: var(--text-mute); }
.ad-region summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ad-refs { font-size: 0.74rem; color: var(--text-mute); margin-left: auto; }
.ad-region form { margin-top: 12px; }

/* Chat widget (shell, every page). Ported from ChatWidget.vue. */
.chat-bubble { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--accent); border: 1px solid var(--accent-fill); border-radius: var(--radius-sm); cursor: pointer; box-shadow: 0 1px 3px rgba(4, 4, 4, 0.08); }
.chat-bubble:hover { background: var(--accent-soft); }
.chat-bubble[hidden], .chat-panel[hidden], .chat-dot[hidden], .chat-status[hidden], .chat-history[hidden] { display: none; }
.chat-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: 380px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(4, 4, 4, 0.1); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.chat-title { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-mute); }
.chat-status { font-size: 0.68rem; color: var(--accent); font-style: italic; }
.chat-hist { margin-left: auto; }
.chat-x-end { margin-left: auto; }
.chat-hist, .chat-new, .chat-x { display: flex; background: none; border: none; padding: 2px; color: var(--text-3); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.chat-hist:hover, .chat-new:not(:disabled):hover, .chat-x:hover { color: var(--text); }
.chat-new:disabled { opacity: 0.35; cursor: default; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.chat-empty { margin: 0; font-size: 0.8rem; color: var(--text-mute); line-height: 1.5; }
.chat-disabled { color: var(--text-2); }
.chat-bun-link { color: var(--accent); }
.chat-msg { display: flex; flex-direction: column; gap: 3px; }
.chat-msg-who { font-size: 0.56rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-mute); }
.chat-msg-body { font-size: 0.84rem; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.assistant .chat-msg-body.chat-md { white-space: normal; }
.chat-msg.user .chat-msg-body { background: var(--accent-soft); padding: 7px 9px; border-radius: var(--radius-sm); }
.chat-msg.error .chat-msg-who, .chat-msg.error .chat-msg-body { color: var(--danger); }
.chat-md p { margin: 0 0 8px; }
.chat-md p:last-child { margin-bottom: 0; }
.chat-md ul, .chat-md ol { margin: 0 0 8px; padding-left: 18px; }
.chat-md li { margin-bottom: 2px; }
.chat-md strong { color: var(--text); font-weight: 600; }
.chat-md code { font-size: 0.92em; background: var(--surface-2); padding: 1px 4px; border-radius: var(--radius-sm); }
.chat-md pre { background: var(--surface-2); padding: 8px 10px; border-radius: var(--radius-sm); overflow-x: auto; margin: 0 0 8px; }
.chat-md pre code { background: none; padding: 0; }
.chat-md blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 2px solid var(--accent-fill); color: var(--text-3); }
.chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 { font-size: 0.86rem; font-weight: 600; color: var(--text); margin: 10px 0 6px; }
.chat-md table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.78rem; margin: 0 0 8px; max-width: 100%; }
.chat-md th, .chat-md td { border: 1px solid var(--border); padding: 4px 7px; text-align: left; white-space: nowrap; }
.chat-md th { background: var(--surface-2); font-weight: 600; color: var(--text); }
.chat-md a { color: var(--accent); }
.chat-history { position: absolute; inset: 0; background: var(--surface); display: flex; flex-direction: column; z-index: 1; }
.chat-history-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.chat-history-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.chat-history-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 0.8rem; }
.chat-history-item.active { background: var(--accent-soft); }
.chat-history-open { flex: 1; text-align: left; background: none; border: none; cursor: pointer; font: inherit; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.chat-history-meta { font-size: 0.68rem; color: var(--text-faint); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-input { flex: 1; resize: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; font-family: inherit; font-size: max(0.84rem, 16px); color: var(--text); }
.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-send { background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 8px 12px; color: #fff; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-nav); font-family: inherit; cursor: pointer; }
.chat-send:disabled, .chat-input:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 767px) { .chat-panel { right: 10px; left: 10px; bottom: 10px; width: auto; max-width: none; height: 70vh; } }

/* --- Hand runs of the pipeline (card #411): Projects Refresh, Atlas Refresh and Run manually and Run step --- */
.refresh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.refresh-btn:disabled { cursor: default; opacity: 0.7; }
.refresh-note { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-3); }
.refresh-note[hidden], .refresh-btn[hidden] { display: none; }
.refresh-note.is-fail { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 3px 8px; }
.refresh-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.at-assess-note { font-size: 0.78rem; color: var(--text-3); }
.at-assess-note.is-fail { color: var(--warn); }
.at-assess-note[hidden], .at-link-btn[hidden] { display: none; }
.at-link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.at-link-btn:disabled { cursor: default; opacity: 0.7; text-decoration: none; }
.at-run-note { margin: 6px 0; padding: 6px 10px; font-size: 0.8rem; border: 1px solid var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.at-run-note.error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.at-run-cats { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 6px 0; }
.at-run-cats td { padding: 5px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.at-run-cats form { display: inline; }
.at-run-flag { font-size: 0.68rem; color: var(--text-mute); margin-left: 6px; }
.ad-run-form { display: inline; }
.ad-btn:disabled { cursor: default; opacity: 0.6; }

/* Galleries: the region move (Edit beside the region on a gallery page). */
.region-edit { display: inline-block; }
.region-edit > summary { display: inline-block; list-style: none; cursor: pointer; }
.region-edit > summary::-webkit-details-marker { display: none; }
.region-edit[open] > summary { display: none; }
.region-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.region-select { font: inherit; font-size: 0.85rem; padding: 4px 8px; border: 1px solid var(--border-strong); background: var(--surface); }
.save-btn { padding: 4px 12px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-size: 0.85rem; cursor: pointer; }
.region-error { color: var(--danger); font-size: 0.85rem; margin: 6px 0; }

/* Shoot Manager: Send, Adopt, Dropbox sync and Suggest cull (once Bun is retired). */
turbo-frame#suggest-status, turbo-frame#dropbox-sync { display: contents; }
turbo-frame#aftershoot-check { display: block; flex: 1; }
.sm-btn.running[disabled] { opacity: 1; background: var(--surface-2); }
.sm-btn.failed { border-color: var(--danger); color: var(--danger); }
.sm-suggest-error { flex-basis: 100%; text-align: right; margin: 0; }
.sm-sync-log { margin-top: 8px; font-size: 0.82rem; }
.sm-sync-log pre { max-height: 14em; overflow: auto; background: var(--surface-2); padding: 8px; white-space: pre-wrap; }
.sm-gate-reasons { margin: 4px 0 0; padding-left: 20px; font-size: 0.85rem; }

/* Shoot Manager: the export name panel on the shoot page and the Apply names pages (#575). */
.sm-export { padding: 10px 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 0.9rem; }
.sm-export-title { margin: 0 0 6px; font-size: 0.95rem; }
.sm-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sm-export-name { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 4px 8px; background: var(--surface-2); }
.sm-export-seq { color: var(--text-mute); }
.sm-export-hint { margin: 4px 0; color: var(--text-mute); font-size: 0.82rem; }
.sm-export-missing { margin: 4px 0; color: var(--danger); }
.sm-export-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; }
.sm-export-input { font: inherit; min-width: 14em; padding: 4px 8px; border: 1px solid var(--border-strong); background: var(--surface); }
.sm-export-check p { margin: 6px 0 2px; }
.sm-export-reasons { margin: 2px 0 6px; padding-left: 20px; }
.sm-export-files ul { max-height: 16em; overflow: auto; padding-left: 20px; font-size: 0.82rem; }
.sm-export-why { color: var(--text-mute); }
.sm-export-page code { overflow-wrap: anywhere; }
.sm-export-table { border-collapse: collapse; margin: 10px 0; font-size: 0.82rem; }
.sm-export-table th, .sm-export-table td { text-align: left; padding: 3px 12px 3px 0; vertical-align: top; }

/* Account page: your details, read only, with Change password in a modal. */
.acct-who { display: flex; gap: 16px; align-items: center; }
.acct-who .panel-title, .acct-who .panel-note { margin: 0; }
.ad-thumb.acct-photo { width: 84px; height: 84px; font-size: 1.5rem; }
.acct-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; font-size: 0.85rem; }
.acct-facts dt { color: var(--text-mute); }
.acct-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.acct-abilities { margin: 8px 0; padding-left: 18px; font-size: 0.85rem; }
.acct-modal { max-width: 460px; }
.ad-modal-form .ad-form { margin-bottom: 0; }
@media (max-width: 560px) {
  .acct-facts { grid-template-columns: 1fr; gap: 0; }
  .acct-facts dd { margin-bottom: 8px; }
  .acct-who { flex-direction: column; align-items: flex-start; }
}

/* #538 projects */
.pj-result-count { margin: 0 0 8px; color: var(--text-mute); font-family: var(--font-ui); font-size: 0.9rem; }
.pj-result-count .page-count { margin-left: 0; font-size: inherit; color: inherit; font-weight: 600; }

/* #538 messages-atlas-admin */
.ms-list { display: flex; flex-direction: column; gap: 14px; }
.atlas #git-filter.at-bar { margin-bottom: 8px; }

/* Atlas FAQ tab: the answer list, the review box and the source list. */
.atlas .at-faq-list { display: flex; flex-direction: column; gap: 6px; max-width: 54rem; }
.atlas .at-faq-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.atlas .at-faq-row:hover { border-color: var(--accent); }
.atlas .at-faq-meta { display: inline-flex; align-items: baseline; gap: 8px; flex-shrink: 0; font-size: 0.78rem; color: var(--text-3); }
/* Phones: the date and badge squeezed the question to three words a line, so they move under it. */
@media (max-width: 767px) { .atlas .at-faq-row { flex-direction: column; align-items: flex-start; gap: 6px; } }
.atlas .at-faq-review { max-width: 54rem; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--warn-border); border-radius: var(--radius-sm); background: var(--warn-bg); }
.atlas .at-faq-commits { margin: 0 0 6px; padding-left: 18px; font-size: 0.85rem; }
.atlas .at-faq-sources-head { margin: 18px 0 6px; font-size: 0.85rem; color: var(--text-2); }
.atlas .at-faq-sources { margin: 0; padding-left: 18px; font-size: 0.82rem; }

/* Atlas FAQ topic log: the add/edit forms, the list rows and a topic's notes. */
.atlas .at-topics { margin-top: 28px; }
.atlas .at-topic-form { display: flex; flex-direction: column; gap: 6px; max-width: 54rem; margin: 10px 0 14px; }
.atlas .at-topic-form input[type=text], .atlas .at-topic-form select, .atlas .at-topic-form textarea { font: inherit; font-size: max(0.85rem, 16px); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; }
.atlas .at-topic-btn { align-self: flex-start; font: inherit; font-size: 0.85rem; color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer; }
.atlas .at-topic-btn:hover { border-color: var(--accent); }
.atlas .at-topic-btn.danger { color: var(--danger); }
.atlas .at-topic-btn.danger:hover { border-color: var(--danger); }
.atlas .at-topic-delete { margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); max-width: 54rem; }
.atlas .at-topic-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 4px; font-size: 0.78rem; }
.atlas .at-topic-edit[open] { flex: 1 1 100%; }
.atlas .at-topic-actions summary, .atlas .at-topic-link { color: var(--text-3); cursor: pointer; }
.atlas .at-topic-actions summary:hover, .atlas .at-topic-link:hover { color: var(--accent); }
.atlas .at-topic-inline { display: inline; margin: 0; }
.atlas .at-topic-link { font: inherit; font-size: 0.78rem; background: none; border: 0; padding: 0; }
.atlas .at-topic-link.danger:hover { color: var(--danger); }
.atlas .at-topic-latest { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--text-3); }
.atlas .at-topic-notes { max-width: 54rem; margin: 0 0 14px; padding-left: 0; list-style: none; }
.atlas .at-topic-notes li { padding: 8px 0; border-top: 1px solid var(--border); }
.atlas .at-topic-notes p { margin: 3px 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.atlas .at-topic-notes li.change { padding: 3px 0; border-top: 0; font-size: 0.78rem; color: var(--text-3); }