/* =====================================================================
   ARIID Build and Remodel — Jobsite Photo Updates
   Mobile-first CSS. Big tap targets (gloves, one thumb, bright sun).

   CORRECTED 2026-09-13: previous pass used the wrong domain (ariid.com /
   "Ariana Designs & Interiors", an unrelated interior design business).
   Branding below is re-sourced directly from the real site,
   https://www.ariidbuild.com ("ARIID Build & Remodel", a Kirkland/Bellevue
   design-build construction company), verified via WebFetch of the raw
   page HTML/CSS on 2026-09-13. Evidence quoted from the live
   `<style id="custom-css">` block served on ariidbuild.com:

     :root {
       --primary-color: #edebe7;
       --fs-color-primary: #edebe7;
       --fs-color-secondary: #000000;
       --fs-color-success: #627D47;
       --fs-color-alert: #b20000;
       --fs-color-base: #000000;
       --fs-experimental-link-color: #000000;
       --fs-experimental-link-color-hover: #deab33;
     }
     .header-bg-color { background-color: #ffffff }
     .header-bottom { background-color: #f1f1f1 }
     .header-top { background-color:#edebe7 !important; }
     h1,h2,h3,h4,h5,h6,.heading-font { color: #000000; }
     body { font-family: Lato, sans-serif; }
     .nav > li > a { font-family: Lato, sans-serif; }
     h1,h2,h3,h4,h5,h6,.heading-font { font-family: Lato, sans-serif; font-weight: 700; }
     .alt-font { font-family: "Dancing Script", sans-serif; }
     .is-divider { background-color: #deab33; }

   NOTE: this "custom-css" block is the last CSS loaded on the page and
   wins the cascade, overriding an earlier `--wp--preset--font-family
   --avenir-next-lt-pro` WordPress preset — so the font that actually
   renders on ariidbuild.com is Lato (sans-serif) for BOTH body and
   headings, not Avenir/Kaisei Opti (those belonged to the wrong site).
   "Dancing Script" appears only as a small decorative accent class
   (.alt-font), not for body/heading copy.

   Palette used below:
     --cream   #edebe7  (header-top / primary brand neutral)
     --white   #ffffff  (header-bg-color)
     --offwhite#f1f1f1  (header-bottom)
     --ink     #000000  (fs-color-secondary / fs-color-base / heading color)
     --green   #627D47  (fs-color-success)
     --red     #b20000  (fs-color-alert)
     --gold    #deab33  (fs-experimental-link-color-hover / .is-divider accent)
   Fonts: "Lato" for all headings and body text (Google Fonts, matches the
   live site's font-family: Lato, sans-serif exactly).

   ---------------------------------------------------------------------
   THEME SWITCHED DARK -> LIGHT 2026-09-13 (requested by Nick, testing
   live: "change the color design here to have a white background instead
   of a black background").

   The old base surface was a dark charcoal (--charcoal #2a2724) that the
   comment above already flagged as an app-only dark-mode choice NOT found
   on ariidbuild.com. The real site is light: white body
   (.header-bg-color #ffffff), cream header strip (.header-top #edebe7),
   black base/heading text (--fs-color-base #000000). So this light theme
   is a MORE accurate match to ARIID's actual branding than the dark one
   was, not a departure from it.

   Corroborating evidence: assets/logo.png is a BLACK logo on a
   transparent background (93,161 opaque pixels, mean luminance 6.8/255,
   zero pixels above luminance 175). It was nearly invisible on the old
   #201c17 top bar and reads correctly for the first time on cream/white.

   Every brand accent hex is UNCHANGED: gold #deab33, bronze/darker golds,
   green #627D47, red #b20000, cream #edebe7, black #000000, Lato.
   Only base surfaces and text/line contrast changed.
   ===================================================================== */

:root {
  color-scheme: light;   /* stop a UA dark mode from re-inverting form controls */

  /* ---- Light surfaces (ariidbuild.com's real light theme) ---- */
  --surface:       #ffffff;   /* ariidbuild.com .header-bg-color — main page background */
  --surface-2:     #f6f5f2;   /* cards, tabs, sticky panel head — white warmed toward cream */
  --surface-3:     #eceae5;   /* nested / hover / pressed surfaces */
  --cream:         #edebe7;   /* ariidbuild.com --fs-color-primary / .header-top bg — top bar */
  --offwhite:      #f1f1f1;   /* ariidbuild.com .header-bottom */

  /* ---- Brand accents — UNCHANGED from the ariidbuild.com pull ---- */
  --orange:        #deab33;   /* ariidbuild.com --fs-experimental-link-color-hover (gold accent) */
  --orange-dark:   #b8902a;
  --orange-hover:  #c99b2c;
  --gold-ink:      #7a5a12;   /* dark shade of the SAME gold, for small gold TEXT on light surfaces
                                 (#deab33 as text on white is only ~2.1:1 — unreadable) */
  --green:         #627D47;   /* ariidbuild.com --fs-color-success */
  --green-hover:   #526a3b;
  --red:           #b20000;   /* ariidbuild.com --fs-color-alert */
  --amber:         #deab33;   /* ariidbuild.com link-hover accent (gold) */

  /* ---- Text and lines on light ---- */
  --text:          #000000;   /* ariidbuild.com --fs-color-base / heading colour */
  --text-muted:    #5f594f;   /* warm grey, 6.9:1 on white, 5.8:1 on cream */
  --border:        #d8d4cc;   /* hairline separators (rows, feed items, footer, card edge) */
  --border-strong: #bdb6aa;   /* interactive control outlines (inputs, ghost buttons) */

  /* ---- Semantic message tints (derived from the accents above) ---- */
  --tint-red:      #fdf2f1;
  --tint-green:    #f2f6ed;
  --tint-gold:     #fbf5e6;

  /* Legacy dark-theme variable names kept as LIGHT aliases so that any rule
     or future edit that still says var(--charcoal*) cannot resurrect a dark
     surface. Prefer --surface / --surface-2 / --surface-3 in new code. */
  --charcoal:      #ffffff;
  --charcoal-2:    #f6f5f2;
  --charcoal-3:    #eceae5;

  --radius:        12px;
  --tap:           56px;   /* minimum tap target height */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  font-family: "Lato", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

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

/* ---------------- Top bar ---------------- */
.topbar {
  background: var(--cream);
  border-bottom: 3px solid var(--orange);
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
}

.topbar-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand { display: flex; flex-direction: column; line-height: 1.1; gap: 4px; }

.brand-logo {
  height: 28px;
  width: auto;
  display: block;
}

.brand-mark {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--text);   /* was gold: gold-on-cream is ~2.0:1. ariidbuild.com headings are #000000. */
}

.brand-sub {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.btn-logout {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  min-height: 44px;
  cursor: pointer;
}
.btn-logout:active { background: var(--surface-3); color: var(--text); }

/* ---------------- Layout ---------------- */
.container {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 16px;
}

.card.center { text-align: center; }

.footer {
  text-align: center;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

/* ---------------- Typography ---------------- */
.h1 {
  font-family: "Lato", sans-serif;
  font-size: 28px; margin: 0 0 6px; font-weight: 700;
}
.h2 {
  font-family: "Lato", sans-serif;
  font-size: 22px; margin: 0 0 10px; font-weight: 700;
}
.muted { color: var(--text-muted); }
.small { font-size: 14px; }
code {
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 14px;
  color: var(--gold-ink);
}
.whoami { margin: 0 0 14px; }

/* ---------------- Form controls ---------------- */
.label {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin: 14px 0 6px;
  font-weight: 600;
}

.input {
  width: 100%;
  min-height: var(--tap);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 14px 14px;
  font-size: 17px;   /* >=16px prevents iOS zoom-on-focus */
  font-family: inherit;
}
.input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(222, 171, 51, 0.35);   /* gold #deab33 at 35% */
}
.input::placeholder { color: #857e72; }

.textarea { min-height: 110px; resize: vertical; line-height: 1.4; }

.select {
  appearance: none;
  -webkit-appearance: none;
  /* arrow recoloured from light grey %23a9b0b9 to --text-muted %235f594f so it is
     visible on the now-white input background */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%235f594f' d='M8 11L3 5h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 16px 20px;
  border: none;
  border-radius: var(--radius);
  font-size: 19px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-block { display: flex; width: 100%; margin-top: 16px; }

/* Gold #deab33 is a LIGHT accent (rel. luminance .449): white text on it is
   2.1:1, black text is 10.0:1. On a light theme the fill stays the same brand
   gold and the label flips to black. */
.btn-primary { background: var(--orange); color: var(--text); }
.btn-primary:active { background: var(--orange-hover); }

/* Green #627D47 is dark enough (4.6:1 vs white) to keep a white label. */
.btn-success { background: var(--green); color: #fff; }
.btn-success:active { background: var(--green-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
}
.btn-ghost:active { background: var(--surface-3); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-photo { font-size: 20px; min-height: 72px; }
.btn-photo-icon { font-size: 24px; }

/* ---------------- Messages ---------------- */
.msg {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 16px;
  border-left: 5px solid;
  background: var(--surface-2);
  color: var(--text);
  word-break: break-word;
}
/* Light tints of the same accents; text is a dark shade of the accent so the
   semantic colour survives without dropping below ~5:1 on a light surface. */
.msg-error   { border-color: var(--red);    background: var(--tint-red);   color: var(--red); }
.msg-success { border-color: var(--green);  background: var(--tint-green); color: var(--green-hover); }
.msg-warn    { border-color: var(--amber);  background: var(--tint-gold);  color: var(--gold-ink); }
.msg-info    { border-color: var(--orange); background: var(--surface-2);  color: var(--text); }

/* ---------------- Photo preview ---------------- */
.preview { margin-top: 16px; }
.preview-img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
  background: var(--surface-3);
}

.pick-row { display: flex; gap: 12px; margin-top: 16px; }
.pick-row .btn-photo { flex: 1 1 0; min-width: 0; font-size: 18px; flex-direction: column; gap: 4px; text-align: center; }
.pick-hint { margin: 10px 0 0; }
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 0; }
.thumb-cell { position: relative; aspect-ratio: 1 / 1; }
.thumb-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-3); display: block; }
.thumb-remove { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.75); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.feed-batch { flex-direction: column; }
.feed-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------- Feed ---------------- */
.feed { margin-top: 12px; }

.feed-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.feed-item:first-child { border-top: none; }

.feed-thumb {
  width: 86px;
  height: 86px;
  flex: 0 0 86px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}

.feed-body { min-width: 0; flex: 1; }
.feed-comment { margin: 0 0 4px; word-wrap: break-word; overflow-wrap: anywhere; }
.feed-time { font-size: 13px; color: var(--text-muted); }
.feed-empty { color: var(--text-muted); padding: 12px 0; }

/* ---------------- Utilities ---------------- */
.hidden { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.spinner {
  width: 34px;
  height: 34px;
  margin: 8px auto 12px;
  border: 4px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Slightly roomier on tablets/desktop */
@media (min-width: 560px) {
  .card { padding: 22px 20px; }
}

/* =====================================================================
   ADMIN PORTAL (admin.html / admin.js) — added Sep 13 2026
   Same palette/typography as the subcontractor app; just adds tabs,
   list rows and a couple of small controls.
   ===================================================================== */

/* ariidbuild.com: --fs-experimental-link-color #000000,
   --fs-experimental-link-color-hover #deab33. The dark theme had to invert
   that (gold at rest); on the light theme we can match the real site exactly. */
.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--orange); }
.link:hover, .link:active { color: var(--orange); }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tab {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.tab.is-active {
  color: var(--text);            /* black on gold = 10.0:1 (white was 2.1:1) */
  background: var(--orange);
  border-color: var(--orange-dark);
}

.list { margin-top: 18px; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.row:first-child { border-top: none; }
.row-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.btn-sm {
  min-height: 40px;
  padding: 6px 12px;
  font-size: 14px;
  margin-top: 0;
  flex: 0 0 auto;
}

.pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pill-off { background: var(--red); color: #fff; }

.admin-link-wrap { margin-top: 12px; }

/* ---------------- Inline row editing (added Sep 13 2026) ----------------
   A list row expands in place into a small form. Same inputs, labels,
   buttons and palette as the create forms above — no new colours, no new
   fonts. */
.row-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: center;
}

.row.row-edit {
  display: block;
  background: var(--surface-3);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  padding: 4px 14px 16px;
  margin: 10px 0;
}

.edit-form { width: 100%; }

.edit-title {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-ink);   /* dark gold: #deab33 as 13px text on light is ~2:1 */
}

.edit-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.edit-actions .btn { flex: 1 1 0; min-height: 48px; }

.list-hint { margin: 18px 0 0; }

/* ---------------- Photo-update filters (added Sep 13 2026) ----------------
   Reuses .label / .input / .select / .btn-ghost exactly as-is; this block
   only lays them out side-by-side on wider screens. No new colours or
   fonts. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}
.filter-field { flex: 1 1 220px; min-width: 0; }

.filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Marks the Updates tab as currently narrowed, so an admin who lands here
   via a "View photos" jump-link can see WHY the list is short. */
.filter-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--orange);
  background: var(--surface-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
}

/* Rows now carry up to three small buttons (View photos / Edit / Deactivate).
   On a narrow phone let the button group drop onto its own line instead of
   crushing the name column. */
.row-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) {
  .row { flex-wrap: wrap; }
  .row > div:first-child { flex: 1 1 100%; min-width: 0; }
  .row-actions { width: 100%; justify-content: flex-start; }
}

/* ---------------- Photo detail / lightbox (added Sep 13 2026) ----------------
   Click-to-expand view for one photo update in the admin Updates feed.
   Uses ONLY the existing palette variables and Lato (inherited from body) —
   no new colours, no new font. UI-only feature: nothing here reads or writes
   anything the feed had not already loaded. */

/* The feed row is now a button-ish target. Keep the row markup/layout it
   already had; just signal that it is clickable. */
.feed-item-clickable {
  cursor: pointer;
  align-items: center;
  border-radius: var(--radius);
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
  transition: background-color .12s ease;
}
.feed-item-clickable:hover,
.feed-item-clickable:focus-visible {
  background: var(--surface-3);
  outline: none;
}
.feed-item-clickable:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); }
.feed-item-clickable .feed-thumb { cursor: zoom-in; }

.feed-open-hint {
  flex: 0 0 auto;
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);                    /* filled gold pill, black label */
  background: var(--orange);
  border: 1px solid var(--orange-dark);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---- overlay ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  /* A modal scrim, not a theme surface. Lightened from rgba(12,10,8,.86) so it
     reads as "the page behind is dimmed" rather than a black screen. */
  background: rgba(58, 53, 46, .55);
}
body.lightbox-open { overflow: hidden; }

.lightbox-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.lightbox-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 2;
}
.lightbox-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus-visible { color: var(--text); border-color: var(--orange); outline: none; }

/* ---- image ---- */
.lightbox-figure {
  position: relative;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-imgfallback { color: var(--text-muted); padding: 40px 16px; font-size: 14px; }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 56px;
  font-size: 30px;
  line-height: 1;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.lightbox-nav:hover:not(:disabled),
.lightbox-nav:focus-visible:not(:disabled) { background: #fff; border-color: var(--orange); color: var(--gold-ink); outline: none; }
.lightbox-nav:disabled { opacity: .38; cursor: default; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }

/* ---- metadata ---- */
.lightbox-meta { padding: 14px; }
.lightbox-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Full comment, never truncated — that is the point of this view. */
.lightbox-comment {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.lightbox-facts { margin: 0; padding: 0; }
.lb-fact {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.lb-fact dt {
  flex: 0 0 128px;
  color: var(--text-muted);
  font-weight: 700;
}
.lb-fact dd { margin: 0; min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }

.lightbox-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}
.lightbox-note { margin: 8px 0 0; }

@media (max-width: 520px) {
  .lightbox { padding: 0; }
  .lightbox-panel { max-width: none; max-height: 100vh; border-radius: 0; min-height: 100vh; }
  .lightbox-img { max-height: 48vh; }
  .lb-fact { flex-direction: column; gap: 2px; }
  .lb-fact dt { flex: none; }
  .feed-open-hint { display: none; }
}

/* People list groups (Oct 29 2026) */
.list-group-title { font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text); margin: 18px 0 6px; }
.inactive-folder { margin-top: 18px; border: 1px solid rgba(0,0,0,.15); border-radius: 10px; }
.inactive-folder > summary { cursor: pointer; padding: 12px 14px; font-weight: 700;
  color: var(--text); list-style-position: inside; }
.inactive-folder > summary:focus-visible { outline: 3px solid var(--accent, #2563eb); outline-offset: 2px; }
.inactive-folder-body { padding: 0 14px 8px; }

/* People rows: wrap on every screen width so buttons never run past the card.
   Name block takes the first line space it needs; buttons wrap beneath. */
.row { flex-wrap: wrap; }
.row > div:first-child { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.row-actions { flex: 1 1 auto; justify-content: flex-start; max-width: 100%; }
.row-actions .btn-sm { white-space: nowrap; }
.row.row-edit { flex-wrap: nowrap; }
.tab { white-space: nowrap; }

/* Admin portal on a computer: use more of the screen. Phones are unchanged. */
@media (min-width: 900px) {
  .admin-page .topbar-inner,
  .admin-page .container { max-width: 960px; }
  .admin-page .tab { flex: 0 1 auto; padding: 8px 18px; }
}

.pill-super { background: #3d3a33; color: #fff; }