/* ================================================================
   ReportGen Admin Panel -- Industrial Control-Room Stylesheet
   ----------------------------------------------------------------
   Design language: warm paper workspace, near-black chrome, one
   burnt-orange command accent, and a SEMANTIC color system so state
   reads at a glance:

     green  = done / confirmed / healthy      (delivered, mailed, ok)
     teal   = handed off, moving              (sent)
     blue   = informational / in progress     (authorized, in transit)
     amber  = needs attention, not an error   (pending, returned)
     red    = failed / dangerous              (failed, errors, delete)
     violet = AI / drafts / generated things  (draft ready, AI notes)
     grey   = inert                           (disabled, cancelled)

   Chips (.chip--*) are the one way status is rendered; dots (.dot--*)
   are the compact form for the same scale. Keep the two in sync.
   ================================================================ */

/* -- Reset ------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* -- Tokens ------------------------------------------------------ */
:root {
  /* workspace neutrals (warm) */
  --bg:            #eceae6;   /* app workspace behind cards          */
  --bg-main:       #f7f6f3;   /* main pane                           */
  --bg-card:       #ffffff;   /* cards, tables                       */
  --bg-inset:      #f1efeb;   /* inset panels, zebra, wells          */
  --ink:           #1d1e20;   /* primary text                        */
  --ink-2:         #4c4f55;   /* secondary text                      */
  --ink-3:         #85888f;   /* hints, labels                       */
  --border:        #d9d5cf;   /* hairlines                           */
  --border-strong: #b8b3aa;   /* emphasized rules                    */

  /* chrome (topbar / sidebar / statusbar) */
  --chrome:        #191b1f;
  --chrome-2:      #23262c;   /* hover / raised chrome               */
  --chrome-3:      #2e323a;   /* borders on chrome                   */
  --chrome-text:   #d7d5d0;
  --chrome-muted:  #7d8087;

  /* command accent -- burnt orange, the "do something" color */
  --accent:        #bf4d1d;
  --accent-strong: #a63f14;
  --accent-glow:   #e06a35;   /* accent on dark chrome               */
  --accent-tint:   #f7e5db;

  /* semantic scale: text / tinted bg / tinted border */
  --green:         #24773f;
  --green-bg:      #e0f2e5;
  --green-line:    #b2dcbd;

  --teal:          #0e7069;
  --teal-bg:       #dcf2ef;
  --teal-line:     #a5d8d0;

  --blue:          #1e5cb3;
  --blue-bg:       #e3ecfa;
  --blue-line:     #b7cdf0;

  --amber:         #8f5b06;
  --amber-strong:  #b47409;
  --amber-bg:      #fcefd2;
  --amber-line:    #ead29a;

  --red:           #b3271e;
  --red-bg:        #fae4e2;
  --red-line:      #eeb6b1;

  --violet:        #5f2bb8;
  --violet-bg:     #ede7fa;
  --violet-line:   #d0c1f0;

  --grey:          #71747b;
  --grey-bg:       #eae9e6;
  --grey-line:     #d2cfc9;

  --font-ui:       'DM Sans', sans-serif;
  --font-data:     'JetBrains Mono', monospace;

  --focus-ring:    2px solid #bf4d1d;
}

/* -- Base -------------------------------------------------------- */
html, body {
  width: 100%;
  max-width: 1920px;
  height: 100vh;
  max-height: 1080px;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}

/* Keyboard focus is visible everywhere; mouse clicks stay clean. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* -- Shell grid -------------------------------------------------- */
.shell {
  display: grid;
  grid-template-rows: 48px 1fr 28px;
  grid-template-columns: 224px 1fr;
  width: 100%;
  max-width: 1920px;
  height: 100vh;
  max-height: 1080px;
  overflow: hidden;
}

/* -- Topbar ------------------------------------------------------ */
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--chrome);
  color: #ffffff;
  border-bottom: 2px solid var(--accent);
  z-index: 10;
}

.topbar__brand {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
  color: #ffffff;
}

/* the little "unit light" before the brand */
.topbar__brand::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: var(--accent-glow);
  box-shadow: 0 0 6px rgba(224, 106, 53, 0.7);
}

.topbar__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* -- Sidebar ----------------------------------------------------- */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  color: var(--chrome-text);
  border-right: 1px solid #000000;
  overflow: hidden;
}

.sidebar__section-label {
  padding: 12px 16px 6px;
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--chrome-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}

.sidebar__users {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.sidebar__user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 13px;
  font-size: 12px;
  color: var(--chrome-text);
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}

.sidebar__user-item:hover {
  background: var(--chrome-2);
}

.sidebar__user-item.active {
  border-left-color: var(--accent-glow);
  background: rgba(191, 77, 29, 0.18);
  color: #ffffff;
}

.sidebar__nav {
  flex-shrink: 0;
  border-top: 1px solid var(--chrome-3);
  padding: 8px 0;
}

.sidebar__link {
  display: block;
  padding: 8px 16px 8px 13px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--chrome-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}

.sidebar__link:hover {
  background: var(--chrome-2);
}

.sidebar__link.active {
  border-left-color: var(--accent-glow);
  background: rgba(191, 77, 29, 0.18);
  color: #ffffff;
}

.sidebar__bottom {
  flex-shrink: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--chrome-3);
}

/* -- Main area --------------------------------------------------- */
.main {
  grid-column: 2;
  grid-row: 2;
  background: var(--bg-main);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

#main-content {
  padding: 24px;
  min-height: 100%;
}

/* -- HTMX loading indicator -------------------------------------- */
.htmx-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s, opacity 0.3s;
  z-index: 20;
  pointer-events: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  transform: scaleX(0.7);
  transition: transform 4s ease-out;
}

/* Upload progress text for the tester/trainer intake form. Hidden until
   htmx marks the form as in-flight (.htmx-request), so the tap gets an
   immediate acknowledgement on a slow phone uplink. Deliberately not
   .htmx-indicator: that class is the 2px top progress bar above. */
.upload-status {
  display: none;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--accent);
  align-self: center;
  white-space: nowrap;
}

form.htmx-request .upload-status {
  display: inline-block;
}

/* -- Status bar -------------------------------------------------- */
.statusbar {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  background: var(--chrome);
  color: #9a9da3;
  font-family: var(--font-data);
  font-size: 11px;
  border-top: 1px solid #000000;
  z-index: 10;
}

.statusbar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* -- Status dots -------------------------------------------------- */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey);
  flex-shrink: 0;
}

.dot--green  { background: #2f9e53; }
.dot--teal   { background: #14958c; }
.dot--amber  { background: #d99011; }
.dot--grey   { background: #9a9da3; }
.dot--red    { background: #d23a30; }
.dot--blue   { background: #3b78d8; }
.dot--violet { background: #7c4bdc; }

/* -- Chips: THE status primitive --------------------------------- */
/* Tinted ground + dark text + hairline; reads in daylight on a phone
   and never relies on the dot alone. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border: 1px solid var(--grey-line);
  border-radius: 2px;
  background: var(--grey-bg);
  color: var(--grey);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.chip--green  { background: var(--green-bg);  border-color: var(--green-line);  color: var(--green); }
.chip--teal   { background: var(--teal-bg);   border-color: var(--teal-line);   color: var(--teal); }
.chip--blue   { background: var(--blue-bg);   border-color: var(--blue-line);   color: var(--blue); }
.chip--amber  { background: var(--amber-bg);  border-color: var(--amber-line);  color: var(--amber); }
.chip--red    { background: var(--red-bg);    border-color: var(--red-line);    color: var(--red); }
.chip--violet { background: var(--violet-bg); border-color: var(--violet-line); color: var(--violet); }
.chip--grey   { background: var(--grey-bg);   border-color: var(--grey-line);   color: var(--grey); }

/* hollow variant: recorded but inert (dry runs, hidden values) */
.chip--outline {
  background: transparent;
  border-style: dashed;
}

/* filled variant: the loud one (critical counts) */
.chip--solid-red    { background: var(--red);    border-color: var(--red);    color: #ffffff; }
.chip--solid-amber  { background: var(--amber-strong); border-color: var(--amber-strong); color: #ffffff; }
.chip--solid-accent { background: var(--accent); border-color: var(--accent); color: #ffffff; }

.chip .dot {
  width: 6px;
  height: 6px;
}

/* -- Schedule badges ---------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg-inset);
  color: var(--ink-2);
  flex-shrink: 0;
}

/* cadence encoding: always green, weekly blue, biweekly teal,
   monthly violet, disabled hollow grey */
.badge--always   { background: var(--green-bg);  border-color: var(--green-line);  color: var(--green); }
.badge--weekly   { background: var(--blue-bg);   border-color: var(--blue-line);   color: var(--blue); }
.badge--biweekly { background: var(--teal-bg);   border-color: var(--teal-line);   color: var(--teal); }
.badge--monthly  { background: var(--violet-bg); border-color: var(--violet-line); color: var(--violet); }
.badge--disabled { background: transparent; border-style: dashed; border-color: var(--grey-line); color: var(--grey); }

/* dark-chrome context (sidebar): tinted grounds vanish on near-black,
   so badges switch to luminous text on chrome */
.sidebar .badge {
  background: transparent;
  border-color: var(--chrome-3);
  color: var(--chrome-muted);
}
.sidebar .badge--always   { color: #55c47b; border-color: #2d5b3c; }
.sidebar .badge--weekly   { color: #6fa5ec; border-color: #2f4a71; }
.sidebar .badge--biweekly { color: #4fc0b5; border-color: #285c56; }
.sidebar .badge--monthly  { color: #a98ae8; border-color: #4c3a78; }
.sidebar .badge--disabled { color: #6b6e75; border-color: #33363c; border-style: dashed; }

/* legacy colored badges (kept for any remaining callers) */
.badge--accent { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.badge--green  { background: var(--green);  color: #ffffff; border-color: var(--green); }
.badge--amber  { background: var(--amber-strong); color: #ffffff; border-color: var(--amber-strong); }
.badge--red    { background: var(--red);    color: #ffffff; border-color: var(--red); }
.badge--blue   { background: var(--blue);   color: #ffffff; border-color: var(--blue); }

/* -- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  color: inherit;
  transition: background 0.1s, border-color 0.1s;
}

.btn:hover {
  background: rgba(29, 30, 32, 0.06);
  border-color: var(--ink-2);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--accent {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.btn--accent:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn--sidebar {
  width: 100%;
  background: transparent;
  color: var(--chrome-text);
  border-color: #45484f;
  font-size: 11px;
}

.btn--sidebar:hover {
  background: var(--chrome-2);
  border-color: #5a5e66;
}

.btn--small {
  padding: 3px 10px;
  font-size: 10px;
}

.btn--danger {
  color: var(--red);
  border-color: var(--red-line);
}

.btn--danger:hover {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

/* -- Form elements ------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea {
  width: 100%;
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-bottom-color: var(--accent);
  outline: none;
}

select {
  width: 100%;
  padding: 6px 26px 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background-color: var(--bg-card);
  /* inline chevron so the sharp-cornered select still signals "menu" */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%234c4f55'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

select:focus {
  border-color: var(--accent);
}

label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-2);
  margin-bottom: 4px;
}

/* Radio/checkbox row where the label text sits beside the control
   (e.g. the Schedule picker) rather than above it. */
.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 0;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

/* -- Cards --------------------------------------------------------- */
.card {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-card);
  margin-bottom: 16px;
}

.card--accent { border-top: 2px solid var(--accent); }
.card--green  { border-top: 2px solid var(--green); }
.card--blue   { border-top: 2px solid var(--blue); }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, var(--bg-card), var(--bg-inset));
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
}

/* panel tick: a small accent mark that anchors every card title */
.card__header::before {
  content: "";
  width: 4px;
  height: 12px;
  margin-right: 8px;
  background: var(--accent);
  flex-shrink: 0;
}

/* headers that are <summary> or hold buttons keep layout: the tick is
   the first flex child, title text flows after it */
.card__header > :first-child {
  margin-right: auto;
}

.card__body {
  padding: 16px;
}

/* -- Tables -------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

thead th {
  padding: 8px 12px;
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  background: var(--bg-inset);
}

tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid #eceae5;
  font-family: var(--font-data);
  font-size: 12px;
  vertical-align: middle;
}

tbody tr:hover {
  background: var(--accent-tint);
}

/* numeric cells (money, pages) line up right and use tabular digits */
td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -- Welcome page -------------------------------------------------- */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 48px - 28px - 48px);
  text-align: center;
  color: var(--ink-3);
}

.welcome__title {
  font-family: var(--font-data);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink);
  margin-bottom: 8px;
}

.welcome__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--accent);
}

.welcome__text {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.welcome__meta {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--ink-3);
}

/* -- Modal --------------------------------------------------------- */
#modal-container:empty {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--accent);
  border-radius: 0;
  width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(20, 18, 16, 0.25);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal__body {
  padding: 16px;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.modal__close:hover {
  color: var(--ink);
}

/* Wide modal variant (catalog) */
.modal--wide {
  width: 900px;
  max-width: 90vw;
}

/* -- Catalog tree -------------------------------------------------- */
.catalog-scroll {
  overflow-y: auto;
  max-height: 55vh;
}

.catalog-scroll::-webkit-scrollbar {
  width: 6px;
}

.catalog-scroll::-webkit-scrollbar-track {
  background: var(--bg-inset);
}

.catalog-scroll::-webkit-scrollbar-thumb {
  background: #c9c5be;
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.catalog-toolbar__search {
  flex: 1;
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid var(--border);
}

.catalog-category {
  border-bottom: 1px solid #eceae5;
}

.catalog-category[open] {
  border-bottom-color: var(--border);
}

.catalog-category__header {
  padding: 8px 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.catalog-category__header:hover {
  background: var(--bg-inset);
}

.catalog-category__count {
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-3);
  background: var(--bg-inset);
  padding: 1px 6px;
  border-radius: 8px;
}

.catalog-category__body {
  padding: 0 0 4px 4px;
}

.catalog-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px 3px 12px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
}

.catalog-item:hover {
  background: var(--bg-inset);
}

.catalog-item__check {
  flex-shrink: 0;
}

.catalog-item__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-item__meta {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

.bias-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
}

.bias-tag--l  { color: #264db3; background: #e8eef8; }
.bias-tag--cl { color: #598ccc; background: #edf2f8; }
.bias-tag--c  { color: #808080; background: #f0f0f0; }
.bias-tag--cr { color: #d98c66; background: #f8f0ec; }
.bias-tag--r  { color: #b32626; background: #f8e8e8; }

/* -- Scrollbar styling -- sidebar (dark track) --------------------- */
.sidebar__users::-webkit-scrollbar {
  width: 4px;
}

.sidebar__users::-webkit-scrollbar-track {
  background: #101216;
}

.sidebar__users::-webkit-scrollbar-thumb {
  background: #3c4048;
}

.sidebar__users::-webkit-scrollbar-thumb:hover {
  background: #4c515a;
}

/* -- Scrollbar styling -- main area (light track) ------------------ */
.main::-webkit-scrollbar {
  width: 6px;
}

.main::-webkit-scrollbar-track {
  background: var(--bg-inset);
}

.main::-webkit-scrollbar-thumb {
  background: #c9c5be;
}

.main::-webkit-scrollbar-thumb:hover {
  background: #aaa59d;
}

/* -- Log panel (scrollable) ---------------------------------------- */
.log-panel {
  overflow-y: auto;
  max-height: 400px;
  font-family: var(--font-data);
  font-size: 11px;
  line-height: 1.6;
  padding: 12px;
  background: #fafaf8;
  border: 1px solid var(--border);
  border-radius: 0;
}

.log-panel::-webkit-scrollbar {
  width: 6px;
}

.log-panel::-webkit-scrollbar-track {
  background: var(--bg-inset);
}

.log-panel::-webkit-scrollbar-thumb {
  background: #c9c5be;
}

/* -- Mailing table (scrollable container) -------------------------- */
.table-scroll {
  overflow-y: auto;
  max-height: 600px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.table-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-scroll::-webkit-scrollbar-track {
  background: var(--bg-inset);
}

.table-scroll::-webkit-scrollbar-thumb {
  background: #c9c5be;
}

/* -- Form field spacing -------------------------------------------- */
.form-field {
  margin-bottom: 12px;
}

.form-field:last-child {
  margin-bottom: 0;
}

/* -- Dirty save button --------------------------------------------- */
#save-btn.dirty {
  background: var(--amber-strong);
  border-color: var(--amber-strong);
  color: #fff;
}

#save-btn.dirty::after {
  content: " *";
}

/* -- Save confirmation --------------------------------------------- */
.save-ok {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
}

/* -- Utility -------------------------------------------------------- */
.text-mono {
  font-family: var(--font-data);
}

.text-muted {
  color: var(--ink-3);
}

.text-small {
  font-size: 11px;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }

/* -- Checkbox label helper (used in podcast grayscale toggle) ------- */
.segment-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.segment-check input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* -- Vertical tabs -------------------------------------------------- */
.vtabs {
  display: flex;
  border: 1px solid var(--border);
  background: var(--bg-card);
  min-height: 0;
  height: calc(100vh - 48px - 28px - 80px);
}

.vtabs__strip {
  display: flex;
  flex-direction: column;
  width: 140px;
  flex-shrink: 0;
  background: var(--bg-inset);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.vtabs__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s;
  font-family: var(--font-ui);
}

.vtabs__tab:hover {
  background: #e9e6e1;
}

.vtabs__tab--active {
  border-left-color: var(--accent);
  background: var(--bg-card);
  color: var(--ink);
  font-weight: 600;
}

.vtabs__sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.vtabs__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vtabs__dot--on  { background: #2f9e53; }
.vtabs__dot--off { background: #c9c5be; }

.vtabs__panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}

.vtabs__panel--active {
  display: block;
}

.vtabs__panel::-webkit-scrollbar {
  width: 6px;
}

.vtabs__panel::-webkit-scrollbar-track {
  background: var(--bg-inset);
}

.vtabs__panel::-webkit-scrollbar-thumb {
  background: #c9c5be;
}

.segment-enable {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: 13px;
}

.segment-enable label {
  display: inline;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 0;
}

.segment-disabled-msg {
  color: var(--ink-3);
  font-size: 12px;
  padding: 24px 0;
  text-align: center;
}

/* -- Feed list ------------------------------------------------------ */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-inset);
  border: 1px solid #e7e4df;
  font-size: 12px;
}

.feed-item__name {
  font-family: var(--font-data);
  font-size: 12px;
}

.feed-item__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.feed-item__remove:hover {
  color: var(--red);
}

/* -- Podcast search results ----------------------------------------- */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-inset);
  border: 1px solid #e7e4df;
}

.search-result__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.search-result__name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result__author {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- Attachment list ------------------------------------------------ */
.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-inset);
  border: 1px solid #e7e4df;
  font-size: 12px;
}

.attachment-item__name {
  flex: 1;
  font-family: var(--font-data);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.attachment-item__select {
  width: auto;
  min-width: 80px;
  padding: 3px 24px 3px 6px;
  font-size: 11px;
  border: 1px solid var(--border);
  background-color: var(--bg-card);
}

.attachment-item__copies-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.attachment-item__copies {
  width: 48px;
  padding: 3px 4px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
}

.attachment-item__surcharge-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.attachment-item__surcharge {
  width: 60px;
  padding: 3px 4px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
}

.attachment-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.attachment-item__remove:hover {
  color: var(--red);
}

/* -- Worker execution panel ----------------------------------------- */
.worker-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 16px;
  height: calc(100vh - 48px - 28px - 48px);
  min-height: 0;
}

.worker-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.worker-left .card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  margin-bottom: 0;
}

.worker-left .card .card__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.worker-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* -- User list in worker panel --------------------------------------- */
.worker-users {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.worker-users::-webkit-scrollbar {
  width: 4px;
}

.worker-users::-webkit-scrollbar-track {
  background: var(--bg-inset);
}

.worker-users::-webkit-scrollbar-thumb {
  background: #c9c5be;
}

.worker-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  transition: background 0.1s;
}

.worker-user-item:hover {
  background: var(--bg-inset);
}

.worker-user-item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.worker-user-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.worker-user-item--disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.worker-user-item__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Worker log panel ------------------------------------------------ */
.worker-log {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  background: #16181c;
  color: #d4d4d4;
  font-family: var(--font-data);
  font-size: 11px;
  line-height: 1.5;
  padding: 12px;
}

.worker-log::-webkit-scrollbar {
  width: 6px;
}

.worker-log::-webkit-scrollbar-track {
  background: #101216;
}

.worker-log::-webkit-scrollbar-thumb {
  background: #3c4048;
}

.worker-log::-webkit-scrollbar-thumb:hover {
  background: #4c515a;
}

/* -- Log line entries ------------------------------------------------ */
.log-line {
  display: flex;
  gap: 8px;
  font-family: var(--font-data);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.log-line__ts {
  flex: none;
  width: 52px;
  color: #565a61;
  user-select: none;
}

.log-line__text {
  flex: 1;
  min-width: 0;
}

/* Kind styling -- classes emitted by web/runlog.py (single source) */
.log-line--section {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid #2b2f36;
}

.log-line--section .log-line__text {
  color: #eceae6;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.log-line--subsection { margin-top: 6px; }

.log-line--subsection .log-line__text {
  color: #7cc7ff;
  font-weight: 600;
}

.log-line--success .log-line__text { color: #4ec95e; }

.log-line--success-section { margin-top: 4px; }

.log-line--success-section .log-line__text {
  color: #4ec95e;
  font-weight: 600;
}

.log-line--warn .log-line__text { color: #e5c07b; }

.log-line--error .log-line__text { color: #f4635a; }

.log-line--error-section { margin-top: 4px; }

.log-line--error-section .log-line__text {
  color: #f4635a;
  font-weight: 600;
}

.log-line--detail .log-line__text { color: #9aa0a6; }

.log-line--debug .log-line__text { color: #616161; }

.log-line--plain .log-line__text { color: #d4d4d4; }

/* Hide debug chatter unless the Details toggle is on */
.worker-log--hide-debug .log-line--debug { display: none; }

/* Legacy flat kinds still emitted by other panes (audit) */
.log-line--error { color: #f4635a; }
.log-line--complete { color: #4ec95e; }
.log-line--info { color: #60a5fa; }

/* Past-run selector in the log header */
.worker-log-select {
  font-size: 11px;
  font-family: var(--font-data);
  background: var(--bg-card);
  color: var(--ink-2);
  border: 1px solid var(--border);
  padding: 2px 4px;
  max-width: 170px;
}

/* -- Worker progress display ------------------------------------------ */
.worker-progress {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-card);
  font-size: 12px;
}

.worker-progress__line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.worker-progress__line:last-child {
  margin-bottom: 0;
}

.worker-progress__stats {
  display: flex;
  gap: 16px;
  padding-left: 16px;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--ink-3);
}

.worker-progress__muted {
  color: var(--ink-3);
  font-size: 11px;
  font-family: var(--font-data);
}

.worker-progress__bar {
  height: 4px;
  background: #d9d5cf;
  margin: 6px 0 8px;
  overflow: hidden;
}

.worker-progress__bar-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.6s ease;
}

.worker-progress__users {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 220px;
  overflow-y: auto;
}

.worker-progress__user {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 11px;
  min-width: 0;
}

.worker-progress__user-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  align-self: center;
  background: #b8b3aa;
}

.worker-progress__user--running .worker-progress__user-dot {
  background: #2f9e53;
  animation: pulse 1s infinite;
}
.worker-progress__user--ok .worker-progress__user-dot { background: #2f9e53; }
.worker-progress__user--fail .worker-progress__user-dot { background: #d23a30; }
.worker-progress__user--stopped .worker-progress__user-dot { background: #d99011; }

.worker-progress__user-name {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}

.worker-progress__user-phase {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
}

.worker-progress__user--fail .worker-progress__user-phase { color: var(--red); }
.worker-progress__user--queued { opacity: 0.55; }

.worker-progress__user-time {
  flex: none;
  color: var(--ink-3);
}

/* -- Pulse animation for active worker dot ----------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* -- Mailings page ------------------------------------------------------ */
.mailings-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  background: var(--bg-card);
}

.mailings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.mailings-table th {
  padding: 8px 12px;
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  background: var(--bg-inset);
  position: sticky;
  top: 0;
  z-index: 2;
}

.mailings-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #eceae5;
  font-family: var(--font-data);
  font-size: 12px;
  vertical-align: middle;
}

.mailings-table .mailings-row:hover {
  background: var(--accent-tint);
}

/* -- Detail row (expanded) ---------------------------------------------- */
.detail-row td {
  padding: 0;
  border-bottom: none;
}

.detail-row--expanded .detail-row__cell {
  padding: 16px 12px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: 12px;
}

.detail-content__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-content__section {
  /* no extra rules needed */
}

.detail-content__label {
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-3);
  margin-bottom: 4px;
}

/* -- Document breakdown sub-table ---------------------------------------- */
.detail-docs {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.detail-docs th {
  padding: 4px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border-strong);
}

.detail-docs td {
  padding: 4px 8px;
  font-family: var(--font-data);
  font-size: 11px;
  border-bottom: 1px solid #e5e2dc;
}

/* -- Cost breakdown grid -------------------------------------------------- */
.detail-cost-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* -- Timeline display ------------------------------------------------------ */
.detail-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.detail-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}

.detail-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cfccc5;
  margin-bottom: 4px;
}

.detail-timeline__step--done .detail-timeline__dot {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-bg);
}

.detail-timeline__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink-3);
}

.detail-timeline__step--done .detail-timeline__label {
  color: var(--ink);
}

.detail-timeline__date {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}

.detail-timeline__line {
  flex: 0 0 24px;
  height: 2px;
  background: #cfccc5;
  margin-top: 4px;
}

.detail-timeline__line--done {
  background: var(--green);
}

/* -- Pagination -------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -- Pending-payment banner --------------------------------------------------- */
/* Amber, not red: money is owed, nothing is broken. It should read as
   "action needed" and stay readable, not as a failure alarm. */
.pending-banner {
  margin: 12px 16px 0;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--amber);
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  border-left: 4px solid var(--amber-strong);
  border-radius: 0;
}

.pending-banner a {
  color: inherit;
  text-decoration: underline;
}

/* -- Toast notifications ------------------------------------------------------- */
.toast {
  position: fixed;
  top: 56px;
  right: 16px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  z-index: 2000;
  animation: toast-in 0.2s ease-out;
  box-shadow: 0 6px 20px rgba(20, 18, 16, 0.25);
}

.toast--error {
  background: var(--red);
  color: #ffffff;
  border-left: 4px solid #7c1a13;
}

.toast--success {
  background: var(--green);
  color: #ffffff;
  border-left: 4px solid #164d29;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   Login page
   ================================================================ */
.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    /* faint blueprint grid on the dark chrome */
    linear-gradient(rgba(215, 213, 208, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 213, 208, 0.045) 1px, transparent 1px),
    var(--chrome);
  background-size: 28px 28px, 28px 28px, auto;
  padding: 24px;
}

.login {
  width: 100%;
  max-width: 360px;
}

.login__card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid #000000;
  border-top: 3px solid var(--accent);
  padding: 32px 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.login__brand {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 3px;
  text-align: center;
  color: var(--ink);
}

.login__subtitle {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
  margin-top: 4px;
  margin-bottom: 24px;
}

.login__field {
  margin-bottom: 18px;
}

.login__card input {
  font-size: 16px;   /* >=16px prevents iOS zoom-on-focus */
  padding: 10px 0;
}

.login__error {
  background: var(--red-bg);
  border: 1px solid var(--red-line);
  border-left: 4px solid var(--red);
  color: var(--red);
  font-size: 12px;
  padding: 8px 12px;
  margin-bottom: 18px;
}

.login__submit {
  margin-top: 6px;
  padding: 12px;
  font-size: 13px;
}

/* ================================================================
   Mobile nav primitives (hamburger + drawer backdrop)
   Hidden on desktop; activated inside the media query below.
   ================================================================ */
.topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 1px solid #45484f;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  transition: transform 0.2s, opacity 0.2s;
}

body.nav-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

/* Topbar "+ USER" shortcut -- hidden on desktop (the sidebar carries the
   button there); revealed inside the mobile media query below where the
   sidebar collapses into a drawer. */
.btn--topbar-adduser {
  display: none;
  border-color: #45484f;
  color: #ffffff;
}

.btn--topbar-adduser:hover {
  background: var(--chrome-2);
}

.sidebar__link--logout {
  color: #d08d7d;
}

/* Logout is a <form><button> (POST) styled to match the sidebar links. */
.sidebar__logout-form {
  margin: 0;
}

button.sidebar__link {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  font-family: inherit;
  cursor: pointer;
}

/* ================================================================
   Admin page layout
   ================================================================ */
.admin-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.admin-layout > .card { margin-bottom: 0; }
/* Wide cards share the row; basis lets them wrap instead of squish
   when the viewport gets tight (tablets, split windows). */
.admin-card--grow { flex: 1 1 340px; min-width: 0; }
.admin-card--narrow { flex: 0 0 220px; }

/* Address verification sweep controls. The row reads as one sentence on
   desktop; wrapping is on so a phone breaks it between phrases instead of
   forcing the whole card wider than the viewport. */
.address-sweep-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
}
/* Keeps a label + its input + its unit together as one wrap unit. */
.address-sweep-form__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* Scoped through the form so this beats the base input[type="number"]
   width:100% -- a bare class would lose to it on specificity. */
.address-sweep-form input[type="number"] {
  width: 60px;
  font-size: 12px;
}
.address-checks__date { white-space: nowrap; }

/* -- Mail-request reply attachments + PDF preview ---------------------- */

/* One attachment: a link to open it, its page count, and the control
   that removes (or restores) it. inline-flex keeps a chip whole when
   the row wraps. */
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  margin: 0 4px 2px 0;
  max-width: 100%;
  background: var(--bg-card);
}
.attachment-chip a { overflow-wrap: anywhere; }
.attachment-chip__x { padding: 0 4px; }

.pdf-embed {
  width: 100%;
  height: 560px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
/* Desktop browsers inline the embed, so the extra open button is
   redundant there; the "Open full size" text link below still is. */
.pdf-embed__open { display: none; }

/* ================================================================
   Responsive -- phones & small tablets
   ================================================================ */
@media (max-width: 860px) {
  html, body {
    max-width: none;
    max-height: none;
    height: 100dvh;
  }

  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: 52px 1fr auto;
    max-width: none;
    max-height: none;
    height: 100dvh;
  }

  /* Topbar spans the single column; reveal the hamburger */
  .topbar {
    grid-column: 1 / -1;
    padding: 0 12px;
  }
  .hamburger { display: flex; }

  /* Reveal the topbar "+ USER" shortcut and keep the bar from overflowing on
     narrow phones: the action buttons hold their width while the brand
     truncates to absorb any remaining space. */
  .btn--topbar-adduser { display: inline-flex; }
  .topbar__left { min-width: 0; }
  .topbar__brand {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__actions { flex-shrink: 0; }

  /* Sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80vw;
    max-width: 300px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    border-right: 1px solid #000000;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.4);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .sidebar-backdrop { display: block; }

  /* Main spans full width and scrolls with momentum */
  .main {
    grid-column: 1 / -1;
    grid-row: 2;
    -webkit-overflow-scrolling: touch;
  }
  #main-content { padding: 14px 12px; }

  /* Larger tap targets inside the drawer */
  .sidebar__user-item { padding: 12px 16px 12px 13px; font-size: 14px; }
  .sidebar__link { padding: 13px 16px 13px 13px; font-size: 13px; }
  .sidebar__bottom { padding: 12px; }
  .sidebar__bottom .btn { padding: 12px; }

  /* Status bar scrolls horizontally instead of overflowing; bottom
     inset keeps it clear of the iPhone home-indicator area. */
  .statusbar {
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    min-height: 30px;
  }

  /* Comfortable touch targets for buttons */
  .btn { padding: 9px 14px; }
  .btn--small { padding: 6px 10px; }

  /* Page headers (user config, mailings) wrap: the title takes its own
     line so long user names aren't crushed beside the action buttons. */
  .page-header { flex-wrap: wrap; row-gap: 10px; }
  .page-header h1 { flex-basis: 100%; }

  /* Filter bars tighten into a two-column grid: user/status side by
     side, search full width below. Vertical cost drops by half. */
  .mailings-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 10px;
  }
  .mailings-filters .form-field { min-width: 0 !important; margin-bottom: 0; }
  .mailings-filters .form-field:last-child { grid-column: 1 / -1; }

  /* 16px inputs stop iOS Safari from auto-zooming the page on focus;
     the extra vertical padding makes comfortable touch targets. */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  textarea {
    font-size: 16px;
    padding: 10px 0;
  }
  select {
    font-size: 16px;
    padding: 10px 26px 10px 8px;
  }
  .attachment-item__select { font-size: 16px; }
  .attachment-item__copies { font-size: 16px; width: 56px; }
  .attachment-item__surcharge { font-size: 16px; width: 72px; }
  .address-sweep-form input[type="number"] { font-size: 16px; width: 68px; }
  input[type="radio"], input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .radio-option { padding: 8px 0; font-size: 15px; }
  .segment-enable { padding: 12px; }
  .segment-enable label { font-size: 15px; }

  /* User-config: vertical tabs become a horizontal scrolling strip.
     The gradient at the right edge hints there are more tabs. */
  .vtabs {
    flex-direction: column;
    height: auto;
    min-height: calc(100dvh - 52px - 30px - 130px);
  }
  .vtabs__strip {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .vtabs__strip::-webkit-scrollbar { display: none; }
  .vtabs {
    position: relative;
  }
  .vtabs::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 44px;
    background: linear-gradient(to right, transparent, var(--bg-inset));
    pointer-events: none;
  }
  .vtabs__tab {
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    padding: 12px 14px;
    font-size: 13px;
  }
  .vtabs__tab--active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
  .vtabs__sep { display: none; }
  .vtabs__panel { padding: 16px 2px; }

  /* Attachment rows wrap so every control (copies, surcharge, remove)
     stays reachable instead of overflowing off the right edge. The
     filename takes its own full-width line; controls wrap below it. */
  .attachment-item { flex-wrap: wrap; }
  .attachment-item__name { flex-basis: 100%; }

  /* Worker panel stacks vertically */
  .worker-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .worker-left, .worker-right { min-height: 300px; }
  .worker-log { min-height: 260px; }

  /* Welcome panel no longer needs the fixed viewport height */
  .welcome { height: auto; padding: 56px 16px; }

  /* Mobile browsers render an <object> PDF as a blank box (iOS Safari
     and Chrome for Android both refuse to inline one), so the merged
     reply preview is dropped there and the button that opens the same
     PDF in the device viewer takes its place. Per-attachment links in
     the list above are how a single figure gets checked on a phone. */
  .pdf-embed { display: none; }
  .pdf-embed__open { display: inline-flex; margin: 2px 0; }

  /* Chips stack rather than crowd: the file name gets its own line so
     a long name stays readable next to a comfortable remove target. */
  .attachment-chip {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 8px;
    margin-bottom: 6px;
  }
  .attachment-chip a { flex-basis: 100%; }
  .attachment-chip__x { padding: 6px 12px; }

  /* ------------------------------------------------------------
     Card tables (.rt): list tables stop being 7-column grids and
     become stacked record cards. No sideways scrolling; STATUS and
     COST are visible without hunting. Cells carry their column name
     in data-label. The empty .detail-row placeholders collapse.
     ------------------------------------------------------------ */
  .rt { display: block; }
  .rt thead { display: none; }
  .rt tbody { display: block; }

  .rt tbody tr.mailings-row {
    display: block;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    background: var(--bg-card);
    margin: 0 0 10px;
    padding: 10px 12px;
  }

  .rt tbody tr.mailings-row:hover { background: var(--bg-card); }

  .rt td {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    border-bottom: none;
  }

  .rt td:empty { display: none; }

  .rt td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 78px;
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-3);
    line-height: 1.8;
  }

  /* the record's headline cell: no label, bigger, bold */
  .rt td.rt__primary {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 4px;
  }
  .rt td.rt__primary::before { display: none; }

  /* money right where the eye lands: numeric cells keep tab digits */
  .rt td.num { text-align: left; }

  /* expanded detail renders as a full-width block card */
  .rt tr.detail-row { display: block; }
  .rt tr.detail-row:not(.detail-row--expanded) { display: none; }
  .rt tr.detail-row--expanded {
    display: block;
    margin: -6px 0 10px;
  }
  .rt tr.detail-row--expanded .detail-row__cell {
    display: block;
    width: 100%;
  }
  .rt .detail-row--expanded th,
  .rt .detail-row--expanded td { overflow-wrap: anywhere; }

  /* inner tables inside an expanded detail keep their own scroll */
  .rt .detail-row--expanded .detail-docs { display: table; }

  /* the .table-scroll wrapper stops being a scroller: cards flow in
     the page. Legacy (non-.rt) tables keep their sideways scroll. */
  .table-scroll:has(> .rt) {
    overflow: visible;
    max-height: none;
    border: none;
    background: transparent;
  }
  .table-scroll { overflow-x: auto; }

  /* Legacy fallback for expanded rows in non-card tables */
  .table-scroll:has(.detail-row--expanded) table:not(.rt) { width: 100%; }
  .table-scroll:has(.detail-row--expanded) table:not(.rt) th,
  .table-scroll:has(.detail-row--expanded) table:not(.rt) td { overflow-wrap: anywhere; }

  /* Detail views collapse to a single column */
  .detail-content__columns { grid-template-columns: 1fr; }
  .detail-timeline { overflow-x: auto; }

  /* Admin cards stack full-width */
  .admin-card--grow, .admin-card--narrow { flex: 1 1 100%; }

  /* Modals become near-fullwidth sheets */
  .modal,
  .modal--wide {
    width: 94vw;
    max-width: 94vw;
    max-height: 88vh;
  }

  /* Toasts span the width near the top */
  .toast {
    left: 12px;
    right: 12px;
    top: 64px;
    text-align: center;
  }
}

/* Respect users who turn animation off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}