/* ==========================================================================
   FCDS Requests — shared styles · netlify-site/skeleton.css (ROOT copy) · v0.77 · 2026-08-07
   v0.77 (Visibility §5 — the sticky admin nav): .adm-nav gains max-height:calc(100vh - 32px) + overflow-y:auto.
     It was already position:sticky; the bug was that it is taller than the viewport, so it pinned its top and hung
     the rest off-screen. ⚠ The <=760px branch (position:static) is deliberately untouched.
     ⚠⚠ THE FIRST CACHE-BUST THIS FILE HAS EVER TAKEN, moving to ?v=0.77 in lock-step across all five pages
     alongside skeleton.js v1.43. ⭐ Gate invariant 5z was extended in the SAME build to cover BOTH files — it
     checked skeleton.js only, so this file carried the identical lock-step risk with nothing enforcing it.
   v0.76 (FT polish — two CSS corrections): (1) equal cell heights actually work now — align-items:stretch stretched the
     grid item .sb-cell, but the bordered .sb-v box kept its content height; .sb-ftmain .sb-cell is now a flex column and
     .sb-ftmain .sb-v flex:1 fills it (both scoped to .sb-ftmain so the shared .sb-just header is untouched). (2) the
     RETURN line-2 "overnight → time" was losing to .sb-v .sb-sub{display:block} (0,2,0); raised the FT rule to
     .sb-v .sb-sub.sb-retline (0,3,0) so the flex gap + right-justified time apply. CSS only; all five pages -> ?v=0.76.
   v0.75 (FT polish — overnight band + ops textareas): + .sb-ft/.sb-ftmain/.sb-ftreturn (the FT summary band now stacks
     the four facts over an optional RETURN row under WHEN; align-items:stretch makes cell heights equal) + .sb-retline
     right-justified return time. Extended .ops-row's control rule to cover .ops-row textarea (ops-busnotes · tz-notes
     fell through to the UA default — no border, mono); font:inherit. Presentation only; all five pages -> ?v=0.75.
   v0.74 (FT Slice 2 — cache-key alignment ONLY, no style change): the ?v= key had drifted (0.73 vs 0.75 across pages).
     Cache keys move FORWARD only, so all five pages are set to ?v=0.74 (a fresh key ahead of both) rather than back to
     0.73 — which some browsers may hold cached with pre-07-24 content. No CSS rules changed in this bump.
   v0.73 (Individuals — Roles/Groups to a second line): row 1 keeps the four controls (name · email · Active · Tier);
     Roles/Groups moves to a muted full-width .ind-subs line below (wraps as needed). Cache-bust ?v -> 0.73.
   v0.72 (Individuals one-row cards): the person card header is ONE nowrap flex row — name (capped 200px) · email
     (flex-shrink + ellipsis) · Active · Tier · Roles/Groups (muted, inline). Wrap only below 860px. Cache-bust ?v -> 0.72.
   v0.71 (The AV flip): + .av-rooms/.av-roomgrp(-h) (the AV options "Offered in" room multi-pick) + .rooms-avsummary/
     .ro-sumlbl (the Rooms editor read-only "AV offered here" line); retired .rooms-avoffer. Cache-bust ?v -> 0.71.
   v0.70 (Rooms editor): + .rooms-grouphdr / .rooms-avoffer / .ro-avitem — the grouped room cards + the per-room
     "AV offered here" checklist. Cache-bust ?v -> 0.70.
   v0.69 (Polish batch 1 follow-up — cosmetic): digest reflow (.pv-digest/.pv-aud/.pv-teams/.pv-spaces — Start·End line,
     inline audience+grade pills, teams row above the beige space cards; retired .pv-extra/.pv-space/.pv-sub); Individuals
     name input shortened (name + email on one line) + Roles/Groups on one subline (.ind-sub-sep). Cache-bust ?v -> 0.69.
   v0.68 (Polish batch 1): + .tb-wrap/.tb-dd/.tb-opt/.tb-hint(.tb-err) (smart time box) · .pv-* (Home preview digest) ·
     .ind-head/.ind-subs/.ind-sub(-k)/.ind-row.ind-dirty (Individuals on Lists chrome). Cache-bust ?v -> 0.68.
   v0.67 (Recurring page UX): + .rec-list / .rec-row(.rec-sel) / .rec-panel / .rec-fields / .rec-fld / .rec-adv /
     .rec-confirm(-in/-msg/-view) / .rec-remove / .rec-preview / .rec-pv-* — the single-select sample list + Use form +
     read-only preview digest. Removed rows reuse .adm-show-inactive with a rec-row-specific reveal. Cache-bust ?v -> 0.67.
   v0.66 (Unified justified ticket header): + .sb-just / .sb-r1 / .sb-r2 / .sb-r3 / .sb-slot(-c/-r) / .sb-more — the
     one justified-grid summary header for events + marketing (ends pinned to the card edges; a long audience wraps in
     its own lane, never under Headcount; phone ≤560px stacks with labels left). .sb-just neutralizes the base .sb grid.
   v0.65 (Slice 5b — MarComm tab + Details pills): + .marc-row/.marc-desc (Details MarComm read summary: a pill per
     picked item + its description beneath) and + .mk-pill-list/.mk-pill-row/.mk-pill-desc/.mk-desc (the MarComm tab
     editor: a vertical pill list where each checked pill reveals a description textarea).
   v0.64 (Slice 4 — audience picker + read pills): + .aud-name / .aud-pills (read-side audience pills, the .space-name
     recipe — audiences now read like spaces on the Details cards + summary band) and + .aud-other-wrap/.aud-other
     (the shared EP.audiencePicker "Other" free-text box, so it styles the same on the ticket as on the intake).
   v0.63 (Blue-note bulleting pass): + .adm-note ul/li — tight bullets for the now page-specific, bulleted admin notes.
   v0.62 (AV-by-verb axis label): + .adm-axis — a light non-clickable axis divider inside a nav group (Mappings →
     To types / To verbs), dimmer/smaller than .adm-subgroup-label. (ROOT copy; /dev/ skeleton.css is the frozen fallback.)
   FCDS Requests (dev) — shared styles · dev/skeleton.css · v0.61 · 2026-07-14
   v0.61 (Admin nav restructure + Foods-by-type): + .adm-subgroup / .adm-subgroup-label (nested config groups under a
     pillar — non-clickable sub-header + indented child links) and + .fbt-* (the Foods-by-type checklist rows: Offered ·
     Default · Sort, reusing .sb-yn/.rt-toggle). Front-end only.
   v0.60 (Admin "Show inactive" toggle): + .adm-inactive (hidden-by-default filter) / .adm-inactive-tag chip /
     .adm-inact-tools + .adm-inact-btn control — shared by the Event Types, Food, and Individuals editors. Reveal
     rules are element-specific (cards → block, table rows → table-row). CSS-only display filter; no backend.
   v0.59 (Admin Event-Types editor): + .sb-* — the "Section behaviors" event-types cards (grouped fields, yn rows).
   v0.58 (Admin polish): + .adm-note (the standard blue directions callout, for the four identity screens' top line) and
     the Routing tasks-table column header — .rt-headrow (aligned to the .rt-row grid) + a fixed-width .rt-cell.rt-when
     so the "When" column lines up under its header.
   v0.57 (Individuals table — Active column alignment): the ACTIVE column (3rd) gets a fixed width + text-align:center
     so its .rt-toggle sits centered under the header instead of drifting left. CSS-only.
   v0.56 (Admin Slice 3c — Individuals screen): + .ind-* — the users table (Name · Email · Active · Tier · In) with a
     search box, a muted group/role summary cell, a "you" tag on the caller's own row, and the + Add person row. Reuses
     the .rt-toggle switch (Active) + .rt-sel dropdown (Tier).
   v0.55 (Identity Slice 2b — role · holder on action items): + .ai-backup — the muted, lighter "backup: {group}" note
     shown after a role-targeted item's "{role} · {holder}" primary target in the Approvals & to-dos list.
   v0.54 (parked batch — B): + .lp-nudge (block, muted accent italic) — the soft "pick a layout" hint under the layout
     control on layout_expected rooms until one is chosen. (Team Reviewed pill reuses the existing .card-status tokens.)
   v0.53 (touch-ups batch — item 8): + .kn-owner / .kn-owner.off (opacity .45 + pointer-events:none) and
     .kn-qtext:disabled — the Tech ynowner companion (Owner picker + "how we get it") now stays rendered on No, grayed +
     disabled, so the Tech top keeps a stable 2-column layout instead of reflowing.
   v0.52 (team-tab header pictogram): + .kn-space-head (flex: room name left / layout pictogram right, matching the
     Details .space-head) + .kn-head-ico:empty{display:none} (no empty box when a room has no icon). Reuses .space-layico.
   v0.51 (layout picker rework): + .lp-ctl (corner + button row) · .lp-openbtn · .space-layico-img (100×64 custom-icon
     corner) · the .lp-modal-ov / .lp-modal / .lp-modal-head / .lp-modal-title / .lp-modal-x popup. Reuses the existing
     .lp-layout-grid / .lp-ltile tiles inside the modal. (skeleton.js v0.64.)
   v0.50 (visual layout picker): + .lp-layout-grid / .lp-ltile (120px tiles · .on selected · navy inset ring) /
     .lp-ltile-img (64px contain) / .lp-ltile-noimg ("—" placeholder) / .lp-ltile-name / .lp-nolayouts — the DB-driven
     layout tile picker (skeleton.js v0.63). Small.
   v0.49 (compact Yes/No .yn.sm): + .team-grid .yn.sm button (30px · padding 0 12px · 12px) and .ep-spaceeditor .yn.sm
     button (padding 5px 13px · 12px) — the compact toggle for the dense ticket team tabs + space editor (locations 2
     & 3). More specific than the .team-grid height:38px rule → overrides. Intake keeps the full-size .yn.
   v0.48 (space-card spacing + hidden-attr fix): .space margin-bottom 8px → 12px (more air between stacked space
     cards). Also + .tl-navyhint[hidden]{display:none} — .tl-navyhint carries .tl-f (display:flex), which was defeating
     its `hidden` attribute (author display beats the UA [hidden] rule), so the "Navy (stretch)" hint showed even when
     the source wasn't Stretch. (Same CSS gotcha the ticket's .kn-flag parking flag hit — fixed there in v3.9.48.)
   v0.47 (Details space-card cosmetics): .space-name is now a navy-outlined / --accent-soft-fill pill (reuses the
     .qval recipe) so it outranks the white Activities chips; + .space .team-name (bold navy 14px) — the team-section
     headers take the old space-name look (skeleton.js v0.59 switches those spans lbl→team-name). Display only.
   v0.46 (Tables & linens Part B — per-table cloth): + .tl-autolabel (the auto round-cloth label, italic) and
     .tl-navyhint (the "Navy (stretch)" stand-in shown when a dining/banquet row's source is Stretch). The per-row
     cover controls are now driven by cloth_profile (skeleton.js v0.58); these two rules style the new non-input bits.
   v0.45 (Tables & linens Part B — grid lives on the Ops team tab): same .tl-section grid rules as v0.44, now mounted
     on each Ops team-tab per-space card (.kn-space) below the stuff picker (the intake/space-editor placement was
     reverted). White .tl-row rows read clearly on the brown .kn-space card. No rule change vs v0.44 — note only.
   v0.44 (Tables & linens Part B — grid widget): + the .tl-section grid — grouped .tl-row rows (include toggle + Qty +
     Cover color + Cover type + Qty-to-order); row lights up (.tl-row.on) when included; the .tl-nest line is the live
     "Store N tables" Ops cue. Phone-collapse ≤560px (fields wrap full-width).
   v0.43 (extend answer-row spacing to the Photos/MarComm + Marketing cards): the read-view .ops-row spacing added in
     v0.42 was teaminfo-only; extended the selector to data-card="photos" + data-card="marcomm" so those Q/A cards
     get the same vertical spacing between their answer rows. Display only.
   v0.42 (space the team-card answer ROWS, revert card gap): Chris's actual ask (clarified by a circle on the
     screenshot) was the vertical spacing BETWEEN the stacked blue Yes/No answer rows inside a team Details card, not
     the gap between cards. Reverted the .panels flex gap 32px → 10px (back to normal) and added margin-bottom:9px to
     each read-view .ops-row inside the teaminfo cards (Business Office · Nurse · …), :last-child 0. Scoped to
     .ft-card[data-card^="teaminfo-"] .ft-read so other read cards + the edit grid are untouched.
   v0.41 (Details card spacing — was 32px gap; superseded above): .panels flex gap 22px → 32px. (Reverted in v0.42.)
   v0.40 (Details card spacing — uniform): dropped the per-card margin from v0.39 (it only sat between the team
     cards and stacked unevenly on the .panels 10px gap) and instead bumped the shared .panels flex gap 10px → 22px,
     so EVERY Details card (Photos/MarComm · team cards · Nurse/BO · etc.) is evenly and clearly separated. (16px felt
     too subtle on dev — went to 22px.)
   v0.39 (Details card spacing): a small margin-bottom (9px) on the stacked Details team cards
     (.ft-card[data-card^="teaminfo-"]) so they read as separated. (Blue answer boxes reuse the existing .qval token —
     applied in skeleton.js's EP.cards.marcomm + summaryBand, no CSS change.)
   v0.38 (bigger layout pictogram): the space-card layout pictogram (.space-layico svg) is 2× bigger — 50×32 → 100×64;
     border/radius/background unchanged (the SVG has a viewBox so it scales cleanly). .space-head stays flex so the
     bigger icon wraps/spaces beside the space title on narrow screens.
   v0.37 (Team Sections Slice 5): .team-grid — the team-top questions render as a 2-column grid (half/full width per
     row; full spans both cols; collapses to 1 col ≤560px) with uniform 38px control heights (yn buttons · selects ·
     inputs) so cells line up; the base yn widget is re-scoped under .team-grid for the BO/Nurse Details cards. New
     .qval blue boxed read-only answer value (navy border · accent-soft fill · navy text), matching the .eq.on look.
   v0.36 (Asks list tier): the work-toggle chip data-work="asks_me" gets a lighter teal/cyan tone (rest + .on),
     clearly below the needs-me / group-open chips. Two rules; no structural change.
   v0.35 (Fixes F39 rev3 + F40 rev2): F39 — the timing-box hash is decoupled from the text: new .tl.soft carries the
     always-on hash bookend (Setup/Cleanup), .tl.tbd is now ONLY the muted-italic empty-text style. F40 — the
     read-only .space .chip pills go WHITE (were #ece6d8, identical to the .space card fill, so they vanished):
     white fill, navy text, tan hairline, soft shadow. (v0.34's .eq option-chip shadow stays.)
   v0.34 (Fix F40): option chips (verbs · A/V · food) get a subtle soft shadow at rest + a soft accent ring when
     selected (.eq:not(.lp-item)). Shared across intake + ticket; the location-picker list rows stay flat.
   v0.33 (Fix Batch 4): .space-head + .space-layico (F32 layout pictogram top-right); .space-row uniform vertical
     padding incl. Setup + Notes (F28); .space .chip → FT brown/tan pill, overriding the .sum-detail navy (F31).
   v0.32 (Fix F26): + the SHARED location-picker chrome (.ep-spaceeditor lp- yn field note bk- food helpers),
     ported from request.html's inline <style> and scoped under .ep-spaceeditor so the ticket renders EP.spaceEditor
     identically. (Inner verb/A-V/food chip grids already styled by the .ft-card .eq/.eqgrid/.av-* rules.)
   v0.31 (Fix F25): + .ft-cardfoot .ft-editfoot{margin-top:0} — the edit-mode Save/Cancel row sits cleanly on the
          card footer's status row (moved there by wireFtEdit), right-justified via the existing space-between.
   v0.30 (Fix F24): + .ft-card label.chip{...} — ported the intake "check all that apply" chip group (Audience ·
          Photos) so the event-ticket card edits use the same pill chips; scoped to LABEL.chip to avoid EP.spaceCard's
          <span class="chip"> pills.
   v0.29 (Fix F23 redo): ported the intake option-chip widgets (.eqgrid/.eq/.eq-check/.verb-more/.verb-drawer/
          .av-grid/.av-inline, scoped under .ft-card) so the ticket's per-space editor renders the real styled chips
          (they previously lived only in request.html's inline <style> → unstyled list on the ticket).
   v0.28 (Fix F21): + .hdr-btn[hidden]{display:none} — the class's display was overriding the `hidden` attribute, so
          the header Edit kept showing on field trips + events; now honored (maintenance-only).
   v0.27 (Event ticket roll-out): + .card-status.is-empty (grey "Empty" chip for event cards, thin until #8).
   v0.26 (Slice 3): + .pkg-red — the red "Calendar"-lane pill on a package name (Social Event).
   v0.25 (FT full redesign): + .chk-row (Nurse card checkboxes) + .cmt-* (comment thread bubbles + post box).
   v0.24 (Fix Batch 3 · F15): + .ft-when — the FT summary band becomes the single "When" card (borderless inner .sb
          + the card's status/Edit footer), so the two old When boxes read as one.
   v0.23 (FT cards v2): + .gchips/.gchip (K–9 grade chips inside the Trip details inline editor on the ticket page).
   v0.22 (FT cards expand/edit): + .ft-cardfoot / .card-status (green is-done · amber is-wait) / .ft-edit-btn /
          .ft-cancel / .ft-read|.ft-edit[hidden] — per-card status chip + inline Edit→Cancel/Save on the FT ticket.
   v0.21 (Fix Batch 2 · F10/F11): home list rows on phone — type/status pill column stays right-justified + stable,
          and the row stacks to three lines (title → meta/requester → date on its own 3rd row).
   v0.20 (ticket cohesion): + .ticket-card — the ticket body reads as ONE white .list-card with hairline .row-style
          inner cards; light blue reserved for the directional "Your task" card only. All ticket types.
   v0.19 (intake slice 2e): + .sum-detail .chip — event-ticket Details pills render brand-blue/white.
   v0.18 (New Intake slice 2): + .event-panel / .pkg-* event package picker · .mtg-* Meeting-light live-reveal
          form · .opt option chip (:has(:checked)). Used by dev/request.html; mirrored in /uistyle.
   v0.17 (New Intake slice 1): + .door-* New Request 3-door shell (Event · Field Trip · Maintenance) + .req-*
          intro + .door-stub coming-soon. Used by dev/request.html; mirrored in /uistyle.
   v0.16 (batch #19/#16): + .nm-email (name-first email detail, hidden on phones) · .ai-x (manager remove ✕).
   v0.15 (Ticket UI): + .sb-* summary band · .yt-* your-turn · .pillnav-* adaptive pill nav · .tk-detail.
   v0.14 (punch batch): + .st-rejected pill; .ai-state badge; .reject-banner; .ppl-reason.
   v0.13 (calendar + punch#1): + .cal-* basic month view (chips by status, phone list fallback); + .st-confirmed pill.
   v0.12 (routing): + .rt-* admin list-editor (rule rows, condition pill, active toggle switch, add/remove).
   v0.11 (admin shell): + .adm-* admin-zone chrome (desktop-wide bar/back, sidebar pillar nav, home cards,
        coming-soon placeholder, denied screen).
   v0.10 (widget bank): + .nreveal nested-reveal widget (checkbox → sub-option, CSS-only via :has()).
   v0.9 (picker UX): + .ai-create .ai-userpick sizing for the @mention assignee picker (the picker's own
        .pp-* / mention-* styles are self-injected by EP.peoplePicker in skeleton.js).
   v0.8 (People fix): + .ppl-* for the read-only "People on this ticket" roster.
   v0.7 (Status + Approvals): + .ai-await / .ai-reason / .ai-kind.k-app for the approvals-first Pending panel.
   Used by the /dev pages (Home/List, New, Ticket). The Summary panel styles (.sum…)
   are shared so the panel looks identical as page top and drawer peek. Includes the
   shared top-nav (.epnav-*, see dev/nav.js). Mobile-friendly. Mirrored in /uistyle.
   ========================================================================== */
:root{ --navy:#16284c; --navy-deep:#0e1c38; --cyan:#00a3d9; --ink:#1c2433; --muted:#6b7280;
  --cream:#f6f3ec; --card:#fff; --accent:#16284c; --accent-soft:#e9edf5; --line:#e4e0d6; --error:#b3261e; }
*{box-sizing:border-box; margin:0; padding:0;}
/* The shared top nav (.epnav-*) carries its own CSS, injected by dev/nav.js, so it's styled on
   every page (incl. the intake/maintenance pages, which don't link this file). Mirrored in /uistyle. */
body{font-family:"Montserrat",system-ui,sans-serif; color:var(--ink);
  background:radial-gradient(120% 120% at 50% 0%, #fbf9f4 0%, var(--cream) 60%); min-height:100vh; padding:24px 16px;}
/* Shared page width — matches the alpha FCDS Requests request-list page (860px). One value for every
   /dev page so there are no size jumps between pages. Mobile uses width:100%, so this caps desktop only. */
.shell{width:100%; max-width:860px; margin:0 auto;}

/* ----- App bar ----- */
.appbar{background:var(--navy); color:#fff; border-radius:16px; padding:14px 18px; margin-bottom:12px;
  box-shadow:0 12px 40px rgba(14,28,56,0.18); border-bottom:3px solid var(--cyan); display:flex; align-items:center; gap:12px;}
.brand{font-weight:700; font-size:16px;}
.brand-sub{font-size:9.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--cyan); margin-top:3px;}
.proto-tag{font-size:12px; color:var(--muted); margin:0 2px 14px;}
.btn{font-family:inherit; font-size:13.5px; font-weight:700; border-radius:10px; padding:9px 16px; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--navy);}
.btn:hover{border-color:var(--navy);}
.btn-primary{background:var(--navy); color:#fff; border-color:var(--navy);}
.btn-primary:hover{opacity:.92;}
.btn-ghost{background:transparent; border:none; color:#fff; padding:6px 4px; font-weight:600;}
.appbar .btn-new{margin-left:auto;}

/* ----- List (the landing) ----- */
/* List sits inside the established white rounded card (not floating on the page). */
.list-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 14px 40px rgba(14,28,56,.08); padding:16px 18px 20px; }

/* ----- New Request doors (the 3-door intake shell — Event · Field Trip · Maintenance; dev/request.html) ----- */
.req-intro{ margin:0 0 16px; }
.req-title{ font-size:22px; font-weight:800; color:var(--navy); }
.req-sub{ font-size:14px; color:var(--muted); margin-top:4px; }
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:640px){ .doors{ grid-template-columns:1fr; } }   /* stack on phones */
.door{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-align:left; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; min-height:150px; cursor:pointer;
  font-family:inherit; color:var(--ink); transition:border-color .12s, box-shadow .12s, transform .12s; width:100%; }
.door:hover{ border-color:var(--navy); box-shadow:0 10px 28px rgba(14,28,56,.10); transform:translateY(-2px); }
.door:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.door.active{ border-color:var(--navy); box-shadow:0 10px 28px rgba(14,28,56,.12); }
.door-ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--navy); flex:none; }
.door-ic svg{ width:26px; height:26px; }
.door-title{ font-size:17px; font-weight:800; color:var(--navy); }
.door-desc{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.door-soon{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--cyan); margin-top:auto; }
.door-stub{ margin-top:14px; background:var(--accent-soft); border-left:3px solid var(--cyan); border-radius:0 12px 12px 0;
  padding:14px 16px; font-size:14px; color:var(--ink); line-height:1.55; }
.door-stub[hidden]{ display:none; }
.door-stub b{ color:var(--navy); }

/* ----- Slice 2: Event package picker + Meeting-light live-reveal form (dev/request.html) ----- */
.event-panel{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.event-panel[hidden]{ display:none; }
.pkg-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; }
@media(max-width:560px){ .pkg-list{ grid-template-columns:1fr; } }
.pkg{ display:flex; flex-direction:column; gap:4px; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; cursor:pointer; font-family:inherit; color:var(--ink); transition:border-color .12s, box-shadow .12s; }
.pkg:hover{ border-color:var(--navy); }
.pkg.active{ border-color:var(--navy); box-shadow:0 8px 22px rgba(14,28,56,.10); }
.pkg-name{ font-size:15px; font-weight:800; color:var(--navy); }
.pkg-desc{ font-size:12px; color:var(--muted); line-height:1.4; }
.pkg.soon{ opacity:.72; } .pkg.soon:hover{ border-color:var(--navy); }
.pkg-soon{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--cyan); margin-top:2px; }
/* Slice 3 — RED (calendar-lane) package pill, inline next to the package name (e.g. Social Event · Calendar). */
.pkg-red{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#b3261e; background:#fbe3e3; border:1px solid #f0c9c9; border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:middle; }
.mtg-form{ margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }
.mtg-sec{ margin-bottom:18px; } .mtg-sec[hidden]{ display:none; }
.mtg-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.mtg-field{ margin-bottom:12px; } .mtg-field > label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.mtg-opt{ font-weight:500; color:var(--muted); }
.mtg-input{ width:100%; padding:11px 13px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; outline:none; }
.mtg-input:focus{ border-color:var(--navy); }
.opt-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px 13px;
  font-size:13.5px; cursor:pointer; background:#fff; user-select:none; }
.opt input{ width:16px; height:16px; accent-color:var(--navy); cursor:pointer; }
.opt:has(input:checked){ border-color:var(--navy); background:var(--accent-soft); font-weight:600; color:var(--navy); }
.mtg-note{ font-size:12.5px; color:var(--muted); margin-top:6px; }
.mtg-note[hidden]{ display:none; }
.mtg-actions{ margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.list-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 12px;}
.list-title{font-size:20px; font-weight:700; color:var(--navy);}
.head-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.list-count{font-size:12.5px; color:var(--muted); font-weight:600;}
.filter-select{ font-family:inherit; font-size:13px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); cursor:pointer; }
.refresh-btn{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.refresh-btn:hover{ opacity:.85; border-color:transparent; }
.seg-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.seg-toggle button{ font-family:inherit; font-size:13px; font-weight:600; padding:8px 13px; border:none; background:#fff; color:var(--muted); cursor:pointer; }
.seg-toggle button.on{ background:var(--navy); color:#fff; }
/* F36 — adaptive action chips: a chip hides cleanly when its count is 0; a hairline divides the "what needs me" zone
   from the "All" browse dropdown. (.work-toggle[hidden] / button[hidden] beat the seg-toggle display rules.) */
.seg-toggle button[hidden], .seg-toggle[hidden]{ display:none; }
.work-toggle .wt-n{ font-weight:800; }
.work-toggle .wt-sep{ opacity:.5; margin:0 1px; }
/* Asks are a lighter THIRD tier — soft teal/cyan, clearly below the needs-me / group-open chips. */
.work-toggle button[data-work="asks_me"]{ color:var(--cyan); }
.work-toggle button[data-work="asks_me"].on{ background:var(--cyan); color:#fff; }
.hc-divider{ width:1px; height:22px; background:var(--line); flex:none; }
.hc-divider[hidden]{ display:none; }
.list{display:flex; flex-direction:column; gap:10px;}
.row{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(14,28,56,0.06);
  padding:13px 15px; cursor:pointer; transition:border-color .12s, transform .04s; display:flex; gap:12px; align-items:flex-start;}
.row:hover{border-color:var(--navy);}
.row:active{transform:translateY(1px);}
.row-main{flex:1; min-width:0;}
.row-title{font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.25;}
.row-meta{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.5;}
.row-meta .dot{margin:0 5px;}
.row-side{display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none;}
.row-type{font-size:11px; font-weight:700; color:var(--navy); background:var(--accent-soft); border-radius:999px; padding:3px 10px; white-space:nowrap;}
.list-empty{font-size:14px; color:var(--muted); text-align:center; padding:40px 10px;}
/* F10/F11 — home list rows on phone (portrait): keep the type/status pill column right-justified and stable (no
   unpredictable wrap), and stack the row to three lines — title → meta/requester → date on its own third row. */
@media(max-width:560px){
  .row{flex-wrap:nowrap; align-items:flex-start;}
  .row-side{flex:0 0 auto; align-items:flex-end; text-align:right;}   /* F10: pills hold the right edge */
  .row-meta .dot{display:none;}                                       /* F11: drop the "·" separator… */
  .row-date{display:block; margin-top:2px;}                           /* …and push the date to its own 3rd line */
}

/* ----- Summary panel (the reused piece — page top AND peek) ----- */
.sum{background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 14px 40px rgba(14,28,56,0.08); overflow:hidden;}
.sum-head{background:var(--navy); color:#fff; padding:16px 20px;}
.sum-kind{font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:6px;}
.sum-title{font-size:20px; font-weight:700; line-height:1.2;}
/* Header top row: cyan kind label (left) + type/status pills (right), same row. */
.sum-toprow{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.sum-pills{display:flex; flex-wrap:wrap; gap:8px;}
/* Action-button row inside the blue header (peek: Close/Open; page: Back/Edit). */
.sum-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.hdr-btn{font-family:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:7px 14px; cursor:pointer; text-decoration:none; display:inline-block; color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30);}
.hdr-btn:hover{background:rgba(255,255,255,.18);}
.hdr-btn.primary{background:#fff; color:var(--navy); border-color:#fff;}
.hdr-btn.primary:hover{opacity:.92;}
.hdr-btn:disabled,.hdr-btn[disabled]{opacity:.5; cursor:default;}
/* F21 — the class's display:inline-block was overriding the `hidden` attribute, so the header Edit kept showing on
   field trips + events (which edit per-card). Honor `hidden` so the gate (maintenance-only) actually hides it. */
.hdr-btn[hidden]{display:none;}
.pill{font-size:12px; font-weight:700; border-radius:999px; padding:4px 12px; white-space:nowrap;}
.pill-type{background:rgba(255,255,255,0.14); color:#fff; border:1px solid rgba(255,255,255,0.28);}
.st-requested{background:#e7ebf3; color:#54637e;}
.st-approved{background:#e6f4ea; color:#1e7d34;}
.st-progress{background:#fff3df; color:#9a6a00;}
.st-confirmed{background:#e3eefb; color:#1f5fa8;}
.st-rejected{background:#fbe3e3; color:#b3261e;}
.st-done{background:#dfe5ef; color:var(--navy);}
.sum-body{padding:6px 20px 20px;}
.sec{padding:15px 0; border-top:1px solid var(--line);}
.sec:first-child{border-top:none;}
.sec-label{font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-bottom:9px;}
.kv{font-size:14.5px; line-height:1.5;}
.kv b{font-weight:700;}
.muted{color:var(--muted);}
.chips{display:flex; flex-wrap:wrap; gap:7px;}
.chip{font-size:12.5px; font-weight:600; background:var(--accent-soft); color:var(--navy); border-radius:8px; padding:5px 11px;}
.chip.loc{background:#ece6d8; color:var(--navy); border:1px solid #d8d1bf;}
.chip.grp{background:#eef3e9; color:#3a6a2e; border:1px solid #cfe0c4;}
/* 2e-5: the event ticket Details pill (renderSummary detail mode) — selected verbs/grades/etc. as brand
   primary-blue pills with white text. Scoped to .sum-detail so the list peek keeps its soft chips. */
.sum-detail .chip{background:var(--navy); color:#fff;}
.sum-detail .chip.loc, .sum-detail .chip.grp{background:var(--navy); color:#fff; border-color:var(--navy);}
.timeline{display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:14px;}
.tl{flex:1 1 130px; padding:10px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative;}
.tl-label{font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}
.tl-val{font-size:13.5px; font-weight:700; color:var(--navy); margin-top:3px;}
/* F39 — hash and text are decoupled. .soft = the always-on hash bookend (Setup/Cleanup), independent of value;
   .tbd = ONLY the empty-text style (muted italic). A set bookend = .soft (hash + normal navy time); an empty one
   = .soft.tbd (hash + italic TBD). .tl.tbd .tl-val must NOT touch a real time, so it requires the .tbd class. */
.tl.soft{background:repeating-linear-gradient(45deg,#fbfaf6,#fbfaf6 6px,#f4f1ea 6px,#f4f1ea 12px);}
.tl.tbd .tl-val{color:var(--muted); font-weight:600; font-style:italic;}
.space{border:1px solid #d8d1bf; border-left:3px solid var(--navy); background:#ece6d8; border-radius:11px; padding:11px 14px; margin-bottom:12px;}
/* F32 — space name + (optional) layout pictogram top-right. */
.space-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px;}
.space-name{display:inline-block; font-weight:700; font-size:13.5px; color:var(--navy); border:1px solid var(--navy); background:var(--accent-soft); border-radius:8px; padding:3px 10px;}   /* #2 — space name is now a navy-outlined pill (reuses the .qval recipe) */
/* Slice 4 — read-side audience pills: each audience name reads like a space-name pill (navy outline · accent-soft fill).
   Own class (not .space-name literally — it's semantically an audience). .aud-pills wraps them so multiple pills gap+wrap. */
.aud-pills{display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle;}
.aud-name{display:inline-block; font-weight:700; font-size:13.5px; color:var(--navy); border:1px solid var(--navy); background:var(--accent-soft); border-radius:8px; padding:3px 10px;}
/* Slice 5b — Details MarComm read summary: one .aud-name pill per picked item, its description beneath (muted). */
.marc-row{ margin:0 0 8px; }
.marc-row:last-child{ margin-bottom:0; }
.marc-desc{ margin:4px 0 0 2px; font-size:12.5px; line-height:1.35; color:var(--ink); white-space:pre-wrap; }
/* Slice 5b — MarComm TAB editor: pills as a vertical list, each checkbox revealing a description textarea when checked. */
.mk-pill-list{ display:block; }
.mk-pill-row{ margin:0 0 10px; }
.mk-pill-check{ display:inline-block; }
.mk-pill-desc[hidden]{ display:none; }
.mk-pill-desc{ margin:6px 0 0 4px; }
.mk-pill-desc textarea.mk-desc{ width:100%; box-sizing:border-box; min-height:44px; resize:vertical; }
/* Slice 4 — the shared audience "Other" free-text box (EP.audiencePicker), so it styles the same on the ticket as on
   the intake (which also has its own inline copy). Hidden until the Other chip is checked. */
.aud-other-wrap[hidden]{ display:none; }
.aud-other{ width:100%; box-sizing:border-box; }
.space .team-name{font-weight:700; font-size:14px; color:var(--navy); text-transform:none; letter-spacing:0;}   /* #2 — team headers take the old bold-navy space-name look */
.space-layico{flex:none;}
.space-layico svg{width:100px; height:64px; display:block; border:1px solid #d8d1bf; border-radius:6px; background:#fff;}
/* F28 — every space row (incl. Setup and the new Notes row) shares the same vertical rhythm. */
.space-row{font-size:13px; color:var(--ink); line-height:1.5; padding:3px 0; margin-top:0;}
.space-row .lbl{font-weight:700; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; margin-right:6px;}
/* F31/F40 — selected verb/AV/food/setup pills on the read-only space card. F31 made them tan, but #ece6d8 is the
   SAME as the .space card fill (line below) so they vanished. F40 — make them WHITE on the tan card: navy text, a
   tan hairline border, and a soft shadow. Not clickable here, so no button treatment. Overrides the .sum-detail
   navy pill for pills inside a .space card only. */
.space .chip, .sum-detail .space .chip{background:#fff; color:var(--navy); border:1px solid #d8d1bf; box-shadow:0 1px 2px rgba(14,28,56,.08);}
.theme{background:var(--accent-soft); border-left:3px solid var(--cyan); border-radius:0 10px 10px 0; padding:10px 13px; font-size:13.5px; line-height:1.5; font-style:italic; color:var(--ink); margin-top:12px;}
.theme .lbl{font-style:normal; font-weight:700; color:var(--navy); display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px;}
.pend{display:flex; align-items:center; gap:10px; font-size:13.5px; padding:8px 0;}
.pend-dot{width:8px; height:8px; border-radius:50%; background:var(--cyan); flex:none;}
.pend-count{font-weight:700; color:var(--navy);}
.pend-link{font-size:12.5px; font-weight:600; color:var(--accent); margin-top:6px; display:inline-block;}
.footnote{font-size:11.5px; color:var(--muted); margin-top:14px; text-align:center;}

/* ----- Peek drawer (the Summary over the list) ----- */
.peek-backdrop{position:fixed; inset:0; background:rgba(14,28,56,0.45); display:none; z-index:50;}
.peek-backdrop.open{display:block;}
.peek{position:fixed; top:0; right:0; height:100%; width:520px; max-width:92vw; background:transparent;
  transform:translateX(100%); transition:transform .22s ease; z-index:51; overflow-y:auto; padding:16px;}
.peek.open{transform:translateX(0);}
.peek-inner{display:flex; flex-direction:column; gap:12px;}
.peek-bar{display:flex; gap:8px; align-items:center;}
.peek-close{margin-left:auto; background:#fff; border:1px solid var(--line); border-radius:50%; width:34px; height:34px;
  font-size:20px; line-height:1; color:var(--muted); cursor:pointer;}
.peek-close:hover{border-color:var(--navy); color:var(--navy);}

/* ----- Ticket page: placeholder panels under the summary ----- */
.panels{margin-top:14px; display:flex; flex-direction:column; gap:10px;}

/* ----- Ticket cohesion: the whole ticket body sits in ONE white panel (.list-card), and each inner block reads
   as a hairline .row-style card (white · --line · 14px radius · soft 0 8px 24px shadow) with a consistent ~10px
   gap (the gap just shows the white panel). The navy header band sits inside at the top. Light blue is reserved
   for the directional "Your task" card only — everything informational is white. Scoped to .ticket-card so the
   home list + the list peek are untouched. Applies to all ticket types (Field Trip · Event · Maintenance). ----- */
.ticket-card{ padding:12px; }
.ticket-card #out > *{ margin-bottom:10px; }            /* uniform gap between header / summary / your-turn / pills */
.ticket-card .panels{ margin-top:0; }                   /* the last #out card's margin already gaps to the panels */
.ticket-card .sum,
.ticket-card .sb,
.ticket-card .yt,
.ticket-card .panel{ border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(14,28,56,0.06); }
.ticket-card .reject-banner{ border-radius:14px; box-shadow:0 8px 24px rgba(14,28,56,0.06); }   /* keep its alert red */
.ticket-card .sum{ overflow:hidden; }                   /* keep the navy header's rounded corners */
.ticket-card .yt-neutral{ background:var(--card); }     /* neutral your-turn is informational → white, not tinted */

/* ----- Field-trip cards: per-card status (bottom-left) + inline Edit→Cancel/Save (bottom-right). The card body is
   read-only by default (.ft-read); Edit reveals the existing per-section form (.ft-edit) and hides .ft-read. The
   foot sits under a hairline rule inside the .row-style card. (cards-expand/edit build — Field Trip first.) ----- */
.ft-card .ft-read[hidden], .ft-card .ft-edit[hidden]{ display:none; }   /* beat .ops-form{display:flex} when hidden */
.ft-cardfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.card-status{ font-size:12px; font-weight:700; border-radius:999px; padding:3px 11px; white-space:nowrap; }
.card-status.is-done{ background:#e6f5ec; color:#1f7a44; }   /* green — complete */
.card-status.is-wait{ background:#fdf0d8; color:#8a5a00; }   /* amber — waiting / action needed */
.card-status.is-empty{ background:#eef0f3; color:var(--muted); }  /* grey — empty (event cards, thin until #8) */
/* F23 — the per-space editor on the ticket reuses the intake's option-chip widgets. These rules live in
   request.html's inline <style>; ported here (scoped under .ft-card) so the SAME chips · grid · drawer · mic-reveal
   render on the ticket Space card instead of an unstyled list. */
.ft-card .group-label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:14px 0 8px; }
.ft-card .hint{ font-size:12.5px; color:var(--muted); margin-top:5px; }
.ft-card .eqgrid{ display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; }
@media(max-width:480px){ .ft-card .eqgrid{ grid-template-columns:1fr; } }
.ft-card .eq{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px; padding:9px 12px; cursor:pointer; background:#fff; }
.ft-card .eq.on{ border-color:var(--navy); background:var(--accent-soft); }
.ft-card .eq-check{ width:18px; height:18px; border:2px solid #c3c9d4; border-radius:6px; flex:none; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; }
.ft-card .eq.on .eq-check{ background:var(--navy); border-color:var(--navy); }
.ft-card .eq.on .eq-check::after{ content:"✓"; }
.ft-card .eq-name{ flex:1; font-size:13.5px; font-weight:600; color:var(--ink); }
.ft-card .verb-more{ margin-top:8px; background:none; border:none; color:var(--accent); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:4px 0; }
.ft-card .verb-more:hover{ text-decoration:underline; }
.ft-card .verb-drawer{ margin-top:8px; } .ft-card .verb-drawer[hidden]{ display:none; }
.ft-card .av-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 8px; }
@media(max-width:480px){ .ft-card .av-grid{ grid-template-columns:1fr; } }
.ft-card .av-inline{ display:none; align-items:center; gap:6px; flex:none; font-size:12.5px; font-weight:700; color:var(--navy); background:var(--accent-soft); border-radius:8px; padding:4px 9px; cursor:pointer; }
.ft-card .av-inline input{ width:15px; height:15px; margin:0; cursor:pointer; accent-color:var(--navy); }
.ft-card .eq.on .av-inline{ display:inline-flex; }
/* F24 — the intake "check all that apply" chip group (Audience · Photos/MarComm). Scoped to LABEL.chip so it
   doesn't touch EP.spaceCard's <span class="chip"> pills. Matches request.html's .chip widget exactly. */
.ft-card label.chip{ position:relative; display:inline-block; background:none; border:0; padding:0; margin:0; border-radius:0; }
.ft-card label.chip input{ position:absolute; opacity:0; pointer-events:none; }
.ft-card label.chip span{ display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink); background:#fff; cursor:pointer; transition:all .12s; }
.ft-card label.chip span:hover{ border-color:var(--navy); }
.ft-card label.chip input:checked + span{ background:var(--navy); color:#fff; border-color:var(--navy); }
.ft-edit-btn{ font-family:inherit; font-size:13px; font-weight:600; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:9px; padding:6px 15px; cursor:pointer; }
.ft-edit-btn:hover{ border-color:var(--navy); }
.ft-editfoot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
/* F25 — in edit mode wireFtEdit moves .ft-editfoot into the footer's status row; it then hugs the right (the
   .ft-cardfoot is already justify-content:space-between, so the status pill stays left, actions right). */
.ft-cardfoot .ft-editfoot{ margin-top:0; }
.ft-cancel{ color:var(--muted); }
/* F26 — the SHARED intake location-picker chrome (EP.spaceEditor), ported from request.html's inline <style> and
   scoped under .ep-spaceeditor so the ticket renders the IDENTICAL picker. (The inner verb/A-V/food chip grids are
   already styled by the .ft-card .eq/.eqgrid/.av-* rules above, since the editor mounts inside the Space card.) */
.ep-spaceeditor .field{ margin-bottom:14px; }
.ep-spaceeditor .field label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.ep-spaceeditor .field input, .ep-spaceeditor .field select{ width:100%; box-sizing:border-box; padding:9px 11px; font-family:inherit; font-size:14px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; }
.ep-spaceeditor .field input:focus, .ep-spaceeditor .field select:focus{ outline:none; border-color:var(--navy); }
.ep-spaceeditor .no-spin{ -moz-appearance:textfield; appearance:textfield; }
.ep-spaceeditor .no-spin::-webkit-outer-spin-button, .ep-spaceeditor .no-spin::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ep-spaceeditor .note{ font-size:12.5px; color:var(--ink); background:var(--accent-soft); border:1px solid #d3dceb; border-left:3px solid var(--navy); border-radius:0 10px 10px 0; padding:10px 13px; line-height:1.5; }
.ep-spaceeditor .yn{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.ep-spaceeditor .yn button{ background:#fff; border:none; padding:9px 18px; font-family:inherit; font-size:13.5px; cursor:pointer; color:var(--ink); }
.ep-spaceeditor .yn button.on{ background:var(--navy); color:#fff; }
.ep-spaceeditor .yn-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0; }
.ep-spaceeditor .yn-row .yn-label{ font-size:14px; font-weight:600; }
.ep-spaceeditor .food-policy{ text-align:center; font-size:12.5px; font-weight:600; color:var(--muted); margin-top:6px; }
.ep-spaceeditor .food-policy:first-child{ margin-top:0; }
.ep-spaceeditor .food-other-wrap[hidden], .ep-spaceeditor .card-other-wrap[hidden]{ display:none; }
.ep-spaceeditor .food-other, .ep-spaceeditor .card-other{ width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:14px; }
/* the two-stage picker */
.ep-spaceeditor .lp-addbtn{ padding:10px 16px; font-size:13.5px; font-weight:600; font-family:inherit; color:var(--accent); background:var(--accent-soft); border:1px dashed #c3cde0; border-radius:10px; cursor:pointer; }
.ep-spaceeditor .lp-addbtn:hover{ background:#dde4f0; }
.ep-spaceeditor .lp-card{ border:1px solid #d8d1bf; border-radius:11px; margin-bottom:8px; background:#ece6d8; overflow:hidden; }
.ep-spaceeditor .lp-card-head{ display:flex; align-items:center; gap:10px; background:var(--navy); padding:11px 14px; }
.ep-spaceeditor .lp-card-name{ flex:1; font-weight:700; font-size:14px; color:#fff; }
.ep-spaceeditor .lp-card-remove{ padding:6px 13px; font-size:12.5px; font-weight:600; font-family:inherit; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32); border-radius:8px; cursor:pointer; }
.ep-spaceeditor .lp-card-remove:hover{ background:rgba(255,255,255,.22); border-color:#fff; }
.ep-spaceeditor .lp-card-body{ padding:14px; background:#fff; }
.ep-spaceeditor .lp-panel{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px; margin-top:4px; }
.ep-spaceeditor .lp-search{ width:100%; padding:11px 13px; font-size:14px; font-family:inherit; color:var(--ink); border:1px solid var(--line); border-radius:10px; margin-bottom:10px; box-sizing:border-box; }
.ep-spaceeditor .lp-search:focus{ outline:none; border-color:var(--navy); }
.ep-spaceeditor .lp-subl{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:12px 0 8px; }
.ep-spaceeditor .lp-item{ min-height:34px; padding:4px 9px; gap:8px; border-radius:8px; }
.ep-spaceeditor .lp-item .eq-name{ font-size:13px; font-weight:500; }
.ep-spaceeditor .lp-item .eq-check{ width:17px; height:17px; border-radius:4px; }
.ep-spaceeditor .lp-item.added{ opacity:.55; cursor:default; background:var(--cream); }
.ep-spaceeditor .lp-added-tag{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.ep-spaceeditor .lp-glabel{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:12px 0 8px; }
.ep-spaceeditor .lp-group{ border-top:1px solid var(--line); }
.ep-spaceeditor .lp-group:first-child{ border-top:none; }
.ep-spaceeditor .lp-group-head{ width:100%; display:flex; align-items:center; gap:10px; padding:11px 4px; background:none; border:none; cursor:pointer; font-family:inherit; }
.ep-spaceeditor .lp-group-name{ flex:1; text-align:left; font-weight:700; font-size:14px; color:var(--navy); }
.ep-spaceeditor .lp-group-count{ font-size:12px; font-weight:600; color:var(--muted); background:var(--accent-soft); border-radius:20px; padding:2px 9px; }
.ep-spaceeditor .lp-chev{ color:var(--muted); font-size:12px; transition:transform .15s; }
.ep-spaceeditor .lp-group.open .lp-chev{ transform:rotate(90deg); }
.ep-spaceeditor .lp-group-body{ padding:2px 2px 12px; }
.ep-spaceeditor .browse-link{ display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--accent); background:none; border:none; cursor:pointer; font-family:inherit; padding:4px 0; }
.ep-spaceeditor .lp-basket{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.ep-spaceeditor .lp-basket-label{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--navy); margin-bottom:8px; }
.ep-spaceeditor .lp-bk-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-height:30px; }
.ep-spaceeditor .bk-chip{ display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; border-radius:20px; padding:5px 7px 5px 13px; font-size:12.5px; font-weight:600; }
.ep-spaceeditor .bk-x{ width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.18); border:none; color:#fff; font-size:13px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.ep-spaceeditor .bk-empty{ font-size:12.5px; color:var(--muted); }
.ep-spaceeditor .lp-foot{ display:flex; gap:10px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.ep-spaceeditor .lp-addsel{ padding:9px 18px; font-size:13.5px; font-weight:700; font-family:inherit; color:#fff; background:var(--navy); border:none; border-radius:9px; cursor:pointer; }
.ep-spaceeditor .lp-addsel:disabled{ background:#aab2c0; cursor:default; }
.ep-spaceeditor .lp-cancel{ padding:9px 6px; font-size:13px; font-weight:600; font-family:inherit; color:var(--muted); background:none; border:none; cursor:pointer; }
.ep-spaceeditor .lp-empty{ font-size:13px; color:var(--muted); padding:8px 2px; }
/* F15 — the summary band IS the When card: the .ft-when wrapper becomes the single card and the inner .sb goes
   borderless, so the band + its status/Edit footer read as one cohesive card (not a card-in-a-card). */
.ft-when{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(14,28,56,0.06); padding:13px 16px; }
.ft-when > .sb{ background:none; border:0; box-shadow:none; border-radius:0; padding:0; margin:0; }
/* Nurse "Additional information" — simple checkbox rows in the inline editor. */
.chk-row{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; }
.chk-row input{ width:17px; height:17px; }
/* Comment thread (Approvals & people tab) — reuses the .panel card; bubbles + a post box. */
.cmt-list{ display:flex; flex-direction:column; gap:9px; margin:8px 0 12px; }
.cmt{ background:#f8f9fb; border:1px solid var(--line); border-radius:11px; padding:9px 12px; }
.cmt-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:3px; }
.cmt-who{ font-size:13px; font-weight:700; color:var(--navy); }
.cmt-when{ font-size:11.5px; }
.cmt-text{ font-size:14px; color:var(--ink); line-height:1.5; word-wrap:break-word; }
.cmt-ment{ font-size:11.5px; margin-top:5px; }
.cmt-post{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:11px; }
.cmt-body{ width:100%; box-sizing:border-box; font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; resize:vertical; color:var(--ink); }
.cmt-body:focus{ outline:none; border-color:var(--navy); }
.cmt-postfoot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cmt-hint{ font-size:11.5px; }
/* K–9 grade chips inside the Trip details inline editor (same widget as the intake; here via skeleton.css). */
.gchips{ display:flex; flex-wrap:wrap; gap:6px; }
.gchip{ position:relative; }
.gchip input{ position:absolute; opacity:0; pointer-events:none; }
.gchip span{ display:grid; place-items:center; min-width:36px; height:36px; padding:0 8px; border:1px solid var(--line); border-radius:9px; font-size:14px; font-weight:700; color:var(--ink); background:#fff; cursor:pointer; transition:all .12s; }
.gchip span:hover{ border-color:var(--navy); }
.gchip input:checked + span{ background:var(--navy); color:#fff; border-color:var(--navy); }
.panel{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
.panel-title{font-size:13px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:8px;}
.panel-soon{font-size:11px; font-weight:700; color:var(--muted); background:var(--accent-soft); border-radius:999px; padding:2px 9px;}
.panel-note{font-size:13px; color:var(--muted); margin-top:7px; line-height:1.5;}
/* Ops-confirmations form (admin) + action-items (ticket page) */
.ops-form{display:flex; flex-direction:column; gap:9px; margin-top:8px;}
.ops-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px;}
.ops-row > label{font-weight:600; color:var(--ink); min-width:172px;}
.ops-row input[type=text],.ops-row input[type=time],.ops-row input[type=date],.ops-row input[type=number],.ops-row input[type=datetime-local],.ops-row textarea{padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px;}
/* FT polish — the two .ops-row textareas (ops-busnotes · tz-notes) fell through to the browser default (no border,
   monospace) because the rule above listed only inputs; they now match their input siblings. font:inherit so the box
   uses the app face, not the UA textarea mono. */
.ops-row textarea{font:inherit; font-size:13.5px; line-height:1.5; resize:vertical; min-height:64px;}
.ops-row input[type=number]{width:84px;}
.ops-row input[type=text]{flex:1; min-width:160px;}
.ops-status{font-size:12.5px; color:var(--muted); margin-left:6px;}
/* v0.37 — team-top 2-column grid (Slice 5). Each question row carries a half/full width class; two halves per row,
   a full spans both columns; collapses to one column on phones. */
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.team-grid .ops-row{ margin:0; }
.team-grid .ops-row.full{ grid-column:1 / -1; }
@media(max-width:560px){ .team-grid{ grid-template-columns:1fr; } }
/* Uniform control height so the yn buttons · selects · text/number inputs line up in a grid cell. The base yn widget
   (border/layout/on-fill) is scoped here too, since the BO/Nurse Details cards render the yn outside .ep-spaceeditor. */
.team-grid .yn{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.team-grid .yn button{ background:#fff; border:none; font-family:inherit; font-size:13.5px; cursor:pointer; color:var(--ink); padding:0 18px; }
.team-grid .yn button.on{ background:var(--navy); color:#fff; }
.team-grid .yn button, .team-grid select, .team-grid input[type="text"], .team-grid input[type="number"]{ height:38px; box-sizing:border-box; }
.team-grid select{ padding:0 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px; color:var(--ink); background:#fff; }
/* Compact Yes/No (.yn.sm) — for the dense ticket team tabs + space editor (locations 2 & 3). More specific than the
   .team-grid height:38px rule, so it overrides. (Intake / location 1 keeps the full-size .yn.) */
.team-grid .yn.sm button{ height:30px; padding:0 12px; font-size:12px; }
.ep-spaceeditor .yn.sm button{ padding:5px 13px; font-size:12px; }
/* Item 8 — the ynowner companion (Owner picker + "how we get it") stays rendered on No, grayed + non-interactive, so the
   Tech top keeps a stable 2-column layout instead of reflowing. Inner inputs also carry `disabled` (belt-and-suspenders). */
.kn-owner{ display:flex; }
.kn-owner.off{ opacity:.45; pointer-events:none; }
.kn-qtext:disabled{ background:var(--accent-soft); color:var(--muted); }
/* Visual layout picker — single-select tile grid (icon + name); .on = selected; NULL icon → "—" placeholder. */
.lp-layout-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.lp-ltile{ width:120px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:6px; cursor:pointer; font-family:inherit; text-align:center; }
.lp-ltile.on{ border-color:var(--navy); background:var(--accent-soft); box-shadow:0 0 0 1px var(--navy) inset; }
.lp-ltile-img{ width:100%; height:64px; object-fit:contain; display:block; border-radius:6px; }
.lp-ltile-noimg{ height:64px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:20px; }
.lp-ltile-name{ display:block; font-size:12px; font-weight:600; color:var(--navy); margin-top:4px; }
.lp-nolayouts{ font-size:12.5px; color:var(--muted); font-style:italic; }
/* B — soft "pick a layout" nudge under the control (layout_expected rooms with tiles, until one is chosen). Signal, not a block. */
.lp-nudge{ display:block; margin-top:4px; font-size:12px; color:var(--accent); font-style:italic; }
/* Layout picker REWORK — in-card control (corner pictogram + open-popup button) + the popup modal (reuses .lp-ltile). */
.lp-ctl{ display:flex; align-items:center; gap:10px; }
.lp-openbtn{ font:inherit; font-size:13px; font-weight:600; color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 12px; cursor:pointer; }
.lp-openbtn:hover{ background:var(--accent-soft); }
.space-layico-img{ width:100px; height:64px; object-fit:contain; display:block; border:1px solid #d8d1bf; border-radius:6px; background:#fff; }
.lp-modal-ov{ position:fixed; inset:0; background:rgba(14,28,56,.45); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.lp-modal{ background:#fff; border-radius:14px; max-width:520px; width:100%; max-height:85vh; overflow:auto; padding:16px 16px 20px; box-shadow:0 12px 40px rgba(14,28,56,.28); }
.lp-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lp-modal-title{ font-weight:700; color:var(--navy); }
.lp-modal-x{ border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:var(--muted); }
/* Team-tab space-card header: room name left, layout pictogram right (consistent with the Details .space-head). */
.kn-space-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kn-head-ico:empty{ display:none; }   /* no empty box when a room has no icon */
/* Blue boxed read-only answer value (matches the .ft-card .eq.on "selected" look). */
.qval{ display:inline-block; border:1px solid var(--navy); background:var(--accent-soft); color:var(--navy); border-radius:8px; padding:3px 10px; font-weight:600; font-size:13px; }
/* Details card separation reverted to the standard .panels flex gap (10px) — see .panels above. */
/* Team Details cards (Business Office · Nurse · etc.): the read view stacks its answer rows (label + blue .qval Yes/No)
   with no vertical spacing, so the rows read as cramped. Give each read row a little breathing room. Scoped to the
   teaminfo read view so other cards + the edit grid are untouched. */
.ft-card[data-card^="teaminfo-"] .ft-read .ops-row,
.ft-card[data-card="photos"] .ft-read .ops-row,
.ft-card[data-card="marcomm"] .ft-read .ops-row{ margin-bottom:9px; }
.ft-card[data-card^="teaminfo-"] .ft-read .ops-row:last-child,
.ft-card[data-card="photos"] .ft-read .ops-row:last-child,
.ft-card[data-card="marcomm"] .ft-read .ops-row:last-child{ margin-bottom:0; }
.ai-list{display:flex; flex-direction:column; gap:8px; margin:8px 0 12px;}
.ai-item{border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:13.5px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.ai-item .ai-main{flex:1; min-width:0;}
.ai-kind{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.ai-meta{font-size:12px; color:var(--muted); margin-top:2px;}
.ai-done{color:#1f7a37; font-weight:600;} .ai-rej{color:#b3261e; font-weight:600;}
.ai-await{font-size:12px; color:var(--muted); font-weight:600;}
/* Slice 2b: a role-targeted item shows "{role} · {holder}" as its primary target; the group rides along as this
   quieter backup note. Inside .ai-meta (already muted) — nudge it lighter + italic so the holder reads as primary. */
.ai-backup{opacity:.8; font-style:italic; margin-left:2px;}
.ai-state{margin-top:3px; font-size:12px; font-weight:600;}
.ai-reason{font-size:12px; color:#b3261e; margin-top:3px;}
/* #19 name-first: the raw email rides along as a muted secondary detail, dropped on phones (name is enough). */
.nm-email{color:var(--muted); font-weight:400;}
@media(max-width:600px){ .nm-email{display:none;} }
/* #16 manager-only remove (✕) on an action item — a quiet control that reddens on hover. */
.ai-x{flex:none; background:none; border:none; color:var(--muted); font-size:13px; line-height:1; padding:4px 6px; border-radius:7px; cursor:pointer;}
.ai-x:hover{color:#b3261e; background:#fbe3e3;}
/* "Changes requested" banner at the top of the ticket panels — surfaces the reject reason to the requester. */
.reject-banner{background:#fbe3e3; border:1px solid #f0c9c9; border-left:4px solid #b3261e; border-radius:10px; padding:12px 14px; margin-bottom:14px;}
.reject-banner .rb-title{font-weight:800; color:#b3261e; font-size:14px;}
.reject-banner .rb-reason{font-size:13px; color:#7a1c16; margin-top:4px; line-height:1.5;}
.ai-kind.k-app{color:var(--accent);}   /* approvals read distinctly from to-dos */
.ai-empty{font-size:13px; color:var(--muted);}
/* Calendar (basic month view) — mirrors the /uistyle "Calendar bits". Chip color = status. */
.cal-head{display:flex; align-items:center; gap:12px; margin:4px 0 14px;}
.cal-title{font-size:17px; font-weight:800; color:var(--navy);}
.cal-nav{display:flex; gap:6px; margin-left:auto;}
.cal-nav button{font-family:inherit; font-size:13px; font-weight:600; border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:8px; padding:6px 12px; cursor:pointer;}
.cal-nav button:hover{background:var(--accent-soft);}
.cal-note{font-size:12px; color:var(--muted); margin-bottom:12px;}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px;}
.cal-weekday{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; text-align:center;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-cell{min-height:84px; border:1px solid var(--line); border-radius:9px; padding:5px; display:flex; flex-direction:column; gap:3px; background:#fff;}
.cal-cell.empty{border:none; background:transparent;}
.cal-cell.today{border-color:var(--accent); background:var(--accent-soft);}
.cal-daynum{font-size:12px; color:var(--muted); font-weight:600;}
.cal-event{width:100%; text-align:left; background:var(--accent); color:#fff; border:none; border-radius:6px; padding:3px 6px; font-size:11px; font-family:inherit; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cal-event:hover{opacity:.9;}
.cal-event.req{background:#d8a93a;} .cal-event.appr{background:#1f7a37;} .cal-event.prog{background:#3b78b0;}
.cal-event.conf{background:#1f5fa8;} .cal-event.done{background:#8a9099;}
.cal-empty{font-size:13px; color:var(--muted); padding:18px 2px;}
/* Phone: a day/list fallback instead of the cramped month grid. */
.cal-list{display:none; flex-direction:column; gap:8px;}
.cal-listday{margin-top:6px;}
.cal-listday .cal-listdate{font-size:12px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;}
@media (max-width:600px){
  .cal-monthwrap{display:none;}
  .cal-list{display:flex;}
}

/* ===== Ticket UI widgets (summary band · your-turn · pill-nav) ===== */
/* Summary band — dense, type-led key facts, always visible. */
.sb{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 18px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 16px; margin-bottom:12px;}
.sb-cell{min-width:0;}
/* Unified justified header (2026-07-18) — events + marketing. .sb-just neutralizes the base .sb auto-fit grid so the
   three rows stack; each row is its own grid with fixed slots, so the ends pin to the card edges in every state. A long
   audience wraps in its own lane (minmax(0,1fr) + .sb-slot{min-width:0}) and never drifts under Headcount. */
.sb-just{display:block; gap:0;}
.sb-r1{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:16px; margin-bottom:12px;}
.sb-r2{margin:12px 0 0;}
.sb-r3{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:16px; margin-top:12px;}
.sb-slot{min-width:0;}                    /* clamp: pills wrap in their own column, never into the next */
.sb-slot-c{text-align:center;}
.sb-slot-r{text-align:right;}
.sb-more{font-size:12px; color:var(--muted); font-weight:600;}
@media (max-width:560px){                 /* phone — stack, labels left; no cramped 3-across */
  .sb-r1, .sb-r3{grid-template-columns:1fr; gap:10px;}
  .sb-slot-c, .sb-slot-r{text-align:left;}
}
.sb-k{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:2px;}
.sb-v{font-size:14px; font-weight:600; color:var(--navy); line-height:1.4; word-wrap:break-word;}
.sb-v .sb-sub{display:block; font-size:12.5px; font-weight:500; color:var(--muted);}
/* FT polish — the fieldtrip band stacks two rows: the four key facts (.sb-ftmain), then an optional RETURN row
   (.sb-ftreturn) directly under WHEN. .sb-ft neutralizes the base .sb auto-fit grid so the two rows stack as blocks;
   .sb-ftmain carries the real grid. align-items:stretch stretches the grid ITEM (.sb-cell) to the tallest, but the
   bordered box is .sb-v inside it — so the cell must be a flex column and .sb-v must flex:1 to fill that stretched
   height, or WHERE/STAKEHOLDER stay shorter than WHEN/WHO. Both are scoped to .sb-ftmain: .sb-cell/.sb-v are shared
   with the .sb-just events/marketing header, and an unscoped flex:1 would reshape that band too. */
.sb-ft{display:block; gap:0;}
.sb-ftmain{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 18px; align-items:stretch;}
.sb-ftmain .sb-cell{display:flex; flex-direction:column;}
.sb-ftmain .sb-v{flex:1;}
.sb-ftreturn{margin-top:10px;}
.sb-ftreturn .sb-cell{max-width:calc(50% - 9px);}   /* keep RETURN in the WHEN column, not spanning full width */
/* .sb-retline must out-specify .sb-v .sb-sub{display:block} (0,2,0) — hence the .sb-v .sb-sub.sb-retline (0,3,0)
   selector; otherwise the return line stays display:block and the flex gap + margin-left:auto never take effect. */
.sb-v .sb-sub.sb-retline{display:flex; align-items:baseline; gap:6px;}
.sb-retline .sb-ret-time{margin-left:auto; font-weight:600; color:var(--navy);}  /* time right-justified */
@media (max-width:560px){ .sb-ftreturn .sb-cell{max-width:none;} }
.sb-dot{color:var(--line);}
/* Your-turn strip — role-aware action surface. */
.yt{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--accent-soft); border:1px solid #bfe3f0; border-radius:12px; padding:11px 15px; margin-bottom:12px;}
.yt.yt-neutral{background:#f6f7f9; border-color:var(--line);}
.yt-main{flex:1; min-width:0;}
.yt-label{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}
.yt-neutral .yt-label{color:var(--muted);}
.yt-text{font-size:14px; font-weight:600; color:var(--navy); margin-top:2px;}
.yt-act{display:flex; gap:7px; flex-wrap:wrap;}
/* Pill nav — adaptive, phone-wrap, count badges. */
.pillnav{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px;}
.pillnav-pill{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); color:var(--navy); border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; white-space:nowrap;}
.pillnav-pill:hover{background:var(--accent-soft);}
.pillnav-pill.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.pillnav-badge{font-size:11px; font-weight:700; background:#d8a93a; color:#3a2a00; border-radius:999px; padding:0 7px; min-width:18px; text-align:center;}
.pillnav-pill.active .pillnav-badge{background:#00a3d9; color:#0e1c38;}
/* Field-trip detail mini-rows (Trip section). */
.tk-detail .kv{font-size:14px; color:var(--navy);}

/* Nested reveal (widget): a checkbox that reveals a nested sub-option when ticked. CSS-only via :has().
   General — useful anywhere a choice unlocks a follow-up (e.g. AV Sound/Speakers → "Microphone?"). */
.nreveal-head{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px;}
.nreveal-head input{width:16px; height:16px; accent-color:var(--navy); cursor:pointer;}
.nreveal-sub{display:none; margin:8px 0 2px 24px; padding-left:12px; border-left:2px solid var(--line);}
.nreveal:has(.nreveal-cb:checked) .nreveal-sub{display:block;}
.nreveal-sub label{display:flex; align-items:center; gap:7px; font-size:13.5px; cursor:pointer;}

/* People on this ticket (read-only roster) */
.ppl-list{display:flex; flex-direction:column; gap:9px;}
.ppl-row{display:flex; gap:10px; font-size:13.5px; align-items:flex-start;}
.ppl-role{flex:none; width:92px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding-top:2px;}
.ppl-who{flex:1; min-width:0; line-height:1.5;}
.ppl-reason{color:#b3261e;}
.ai-create{display:flex; flex-wrap:wrap; gap:8px; align-items:center; border-top:1px solid var(--line); padding-top:10px; margin-top:4px;}
.ai-create select,.ai-create input{padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13px;}
.ai-create input[type=text]{flex:1; min-width:150px;}
.ai-create .ai-userpick{flex:1; min-width:170px;}   /* the @mention assignee picker sits in the create row */
.cbtn{font-family:inherit; font-size:12px; font-weight:600; border-radius:7px; padding:5px 11px; cursor:pointer; border:1px solid var(--line); background:#fff;}
.cbtn.go{color:var(--navy); border-color:var(--navy);} .cbtn.acc{color:#1f7a37; border-color:#cfe6d5;} .cbtn.rej{color:#b3261e; border-color:#f0d2d2;}
.backlink{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--accent);
  background:none; border:none; cursor:pointer; font-family:inherit; padding:4px 0; margin-bottom:10px; text-decoration:none;}

@media (max-width:600px){
  body{padding:14px 10px;}
  .peek{width:100%; max-width:100%; padding:10px;}
  .row-side{align-items:flex-start;}
  .sum-title{font-size:18px;}
}

/* ============ Admin zone chrome (Admin Shell) — its own DESKTOP-WIDE zone, separate from the public app.
   You enter via the Admin nav pill and leave via "← Back to requests". Not phone-optimized by design
   (admin is desktop-focused per Coding Standards). ============ */
.adm-shell{max-width:1140px; margin:0 auto; padding:18px 20px 40px; font-family:'Montserrat',system-ui,sans-serif;}
.adm-bar{display:flex; align-items:center; gap:14px; background:#16284c; color:#fff; border-radius:14px;
  border-bottom:3px solid #00a3d9; padding:14px 18px; box-shadow:0 12px 40px rgba(14,28,56,.18);}
.adm-bar .adm-logo{height:34px; width:auto; flex:none;}
.adm-bar .adm-brand{font-weight:800; font-size:18px;}
.adm-bar .adm-badge{font-size:10px; font-weight:700; letter-spacing:.12em; background:#f59e0b; color:#3a2a00; border-radius:999px; padding:2px 8px;}
.adm-back{margin-left:auto; color:#fff; font-size:13px; font-weight:600; text-decoration:none; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:7px 14px; white-space:nowrap;}
.adm-back:hover{background:rgba(255,255,255,.20);}
.adm-body{display:grid; grid-template-columns:236px 1fr; gap:20px; margin-top:18px; align-items:start;}
/* ⭐ v0.77 — the nav was ALREADY position:sticky; it is simply TALLER THAN THE VIEWPORT, and a sticky element
   that does not fit pins its top and hangs the rest off-screen. So on a long admin page you had to scroll to the
   bottom of the PAGE to reach the bottom of the NAV. Two properties let it scroll inside itself.
   ⚠ The mobile branch below sets position:static and is left alone — max-height there would trap the nav in a
   short scrollbox on a phone, which is worse than the bug. */
.adm-nav{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto;}
.adm-pillar{margin-bottom:12px;}
/* Admin #3a — the pillar label is a collapse toggle (button), caret on the right; items hide when the pillar is collapsed. */
.adm-pillar-label{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 8px 4px; display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0; cursor:pointer; font-family:inherit; text-align:left;}
.adm-pillar-label::after{content:"▾"; font-size:10px; line-height:1; transition:transform .15s ease;}   /* caret via ::after so it stays out of the label's textContent */
.adm-pillar.adm-collapsed .adm-pillar-label::after{transform:rotate(-90deg);}
.adm-pillar.adm-collapsed .adm-pillar-items{display:none;}
.adm-link{display:block; padding:8px 10px; border-radius:8px; font-size:13.5px; color:var(--navy); text-decoration:none; cursor:pointer;}
.adm-link:hover{background:var(--accent-soft);}
.adm-link.active{background:#16284c; color:#fff; font-weight:600;}
/* Nested config groups (Site configuration → Section behaviors · Menus & lists): a non-clickable sub-header + indented
   child links. Lighter than .adm-pillar-label; reuses --muted. */
.adm-subgroup{margin:2px 0 6px;}
.adm-subgroup-label{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); opacity:.85; padding:5px 8px 2px 14px;}
.adm-subgroup .adm-link{padding-left:22px;}
/* Axis sub-label within a group (Mappings → To types / To verbs) — a light, non-clickable divider, dimmer + smaller
   than .adm-subgroup-label, indented under it. Prefixed with an em-dash cue. */
.adm-axis{font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); opacity:.6; padding:6px 8px 1px 22px;}
.adm-axis::before{content:"— ";}
.adm-axis::after{content:" —";}
.adm-main{min-width:0;}
.adm-home-intro{font-size:13.5px; color:var(--muted); margin:2px 0 16px;}
/* Admin directions callout — the app's standard blue note box (matches the intake/ticket .note), for the identity
   screens' top instruction line so all four read the same. */
.adm-note{font-size:13px; color:var(--ink); background:var(--accent-soft); border:1px solid #d3dceb; border-left:3px solid var(--navy); border-radius:0 10px 10px 0; padding:11px 14px; line-height:1.5; margin:2px 0 16px;}
/* Page-specific bulleted admin notes (standing rule): a tight list, no browser default indent runaway. */
.adm-note ul{margin:5px 0 0; padding-left:18px;}
.adm-note li{margin:2px 0;}
.adm-note li + li{margin-top:3px;}
.adm-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;}
.adm-card{background:#fff; border:1px solid var(--line); border-top:3px solid #00a3d9; border-radius:14px; padding:16px 18px;}
.adm-card h3{margin:0 0 4px; font-size:15px; color:var(--navy);}
.adm-card .adm-card-sub{font-size:12.5px; color:var(--muted); margin-bottom:10px;}
.adm-card a{display:inline-block; font-size:13px; color:var(--accent); text-decoration:none; padding:3px 0;}
.adm-card a:hover{text-decoration:underline;}
.adm-placeholder{background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px; text-align:center;}
.adm-placeholder .adm-ph-pill{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#92400e; background:#fef3c7; border-radius:999px; padding:4px 12px; margin-bottom:12px;}
.adm-placeholder h2{margin:0 0 6px; font-size:20px; color:var(--navy);}
.adm-placeholder p{font-size:13.5px; color:var(--muted); margin:0 auto; max-width:440px; line-height:1.55;}
.adm-denied{max-width:460px; margin:60px auto; background:#fff; border:1px solid var(--line); border-top:3px solid #b3261e;
  border-radius:16px; padding:30px 28px; text-align:center;}
.adm-denied h2{margin:0 0 8px; font-size:20px; color:var(--navy);}
.adm-denied p{font-size:13.5px; color:var(--muted); line-height:1.55;}
@media (max-width:760px){ .adm-body{grid-template-columns:1fr;} .adm-nav{position:static;} }

/* ---- Admin widget bank: list-editor / rule rows, condition pill, active toggle (desktop-first) ---- */
.rt-typebar{display:flex; align-items:center; gap:10px; margin:4px 0 18px;}
.rt-typebar label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.rt-sel{font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid #d1d5db; border-radius:9px; background:#fff; color:var(--navy);}
.rt-sec{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:16px;}
.rt-sec-h{font-size:15px; font-weight:700; color:var(--navy); margin-bottom:3px;}
.rt-note{font-size:12.5px; color:var(--muted); margin-bottom:12px;}
.rt-table{display:flex; flex-direction:column; gap:8px;}
.rt-row{display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:10px; background:#fcfcfd;}
.rt-row.rt-removed{opacity:.45;}
.rt-cell{display:flex; align-items:center;}
.rt-cell.rt-grow{flex:1; min-width:0;} .rt-cell.rt-grow .rt-sel{width:100%;}
/* The "When" (condition) column gets a fixed width so the tasks table's column header lines up with the row cells. */
.rt-cell.rt-when{flex:none; width:150px;} .rt-cell.rt-when .rt-sel{width:100%;}
/* Tasks table column-header row — a non-interactive header aligned to the .rt-row flex grid (mirrors .ind-table th). */
.rt-headrow{display:flex; align-items:center; gap:10px; padding:0 9px 4px;}
.rt-headrow .rt-hd{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);}
.rt-headrow .rt-hd-active{flex:none; width:38px; text-align:center;}
.rt-headrow .rt-hd-del{flex:none; width:26px;}
.rt-group{font-size:12.5px; color:var(--muted); white-space:nowrap;}
.cond-pill{border-radius:999px; border:1px solid #bfe3f0; background:#eaf6fb; color:#16284c; font-weight:600; font-size:12.5px; padding:6px 12px;}
.cond-pill.auto{display:inline-block; cursor:default;}
.rt-del{border:none; background:rgba(179,38,30,.08); color:#b3261e; width:26px; height:26px; border-radius:50%; font-size:16px; line-height:1; cursor:pointer; flex:none;}
.rt-del:hover{background:rgba(179,38,30,.18);}
.rt-add{margin-top:10px; background:none; border:1px dashed var(--accent); color:var(--accent); font-family:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:7px 14px; cursor:pointer;}
.rt-add:hover{background:var(--accent-soft);}
.rt-empty{font-size:13px; color:var(--muted); padding:6px 2px;}
.rt-flow{margin-bottom:10px;}
.rt-toggle-line{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--navy);}
.rt-save{display:flex; align-items:center; gap:12px; margin-top:4px;}
/* Active toggle — an accessible checkbox styled as a switch */
.rt-toggle{position:relative; flex:none; width:38px; height:22px; cursor:pointer;}
.rt-toggle input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.rt-toggle span{position:absolute; inset:0; background:#cbd5e1; border-radius:999px; transition:background .15s;}
.rt-toggle span::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
.rt-toggle input:checked + span{background:#1f7a37;}
.rt-toggle input:checked + span::after{transform:translateX(16px);}
/* Admin Slice 3c — Individuals (users) table. Laptop-first; a wide table is fine. Reuses .rt-toggle + .rt-sel. */
.ind-tools{display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.ind-search{flex:1; min-width:200px; max-width:340px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:13.5px;}
.ind-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.ind-table th{text-align:left; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:6px 10px; border-bottom:1px solid var(--line);}
.ind-table td{padding:8px 10px; border-bottom:1px solid #eef0f3; vertical-align:middle;}
/* Active column (3rd): fixed width + centered so the toggle sits under its ACTIVE header instead of drifting left. */
.ind-table th:nth-child(3), .ind-table td:nth-child(3){width:84px; text-align:center;}
.ind-table td:nth-child(3) .rt-toggle{display:inline-block; vertical-align:middle;}
.ind-table input[type=text],.ind-table input[type=email]{width:100%; box-sizing:border-box; padding:6px 9px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px;}
.ind-row.ind-dirty td{background:#fffdf3;}
.ind-row.ind-new td{background:#f3faf5;}
.ind-in{font-size:11.5px; color:var(--muted); line-height:1.45;}
.ind-you{display:inline-block; margin-left:6px; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#7a5712; background:#fff4e0; border:1px solid #e6c47a; border-radius:999px; padding:1px 6px; vertical-align:middle;}
.ind-email-ro{color:var(--navy);} .ind-email-ro .ind-you{margin-left:6px;}
/* Individuals on Lists chrome — ONE flex header row (laptop-first): [name capped] · [email truncates] · [Active] ·
   [Tier] · [Roles/Groups muted]. Name is capped so it can't force a wrap; email gives way first (ellipsis, full value on
   hover/title); toggles + select keep their intrinsic width. Wrapping is allowed ONLY below laptop width. */
.ind-head{display:flex; align-items:center; gap:8px 12px; flex-wrap:nowrap;}
.ind-head input.ind-name{flex:0 1 200px; width:auto; min-width:80px; box-sizing:border-box;}
.ind-head input.ind-email{flex:1 1 160px; width:auto; min-width:110px; box-sizing:border-box; padding:6px 9px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px;}
.ind-head .ind-email-ro{flex:1 1 60px; min-width:40px; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ind-head .sb-yn.ind-cell{flex:0 0 auto; white-space:nowrap;}
.ind-tierwrap{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); white-space:nowrap;}
.ind-tierwrap .ind-tier{font-size:13px;}
/* Tweak-2 — Roles/Groups on a SECOND muted line below the header row (full width, wraps as needed). */
.ind-subs{margin-top:8px; font-size:12px; color:var(--muted); line-height:1.5;}
.ind-sub-k{font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:10.5px;}
.ind-sub-sep{opacity:.5; margin:0 5px;}
.ind-row.ind-dirty{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset;}
@media (max-width:860px){ .ind-head{flex-wrap:wrap;} }
/* Rooms editor (the last catalog) — grouped cards + the read-only "AV offered here" summary. */
.rooms-grouphdr{font-size:12.5px; color:var(--navy); border-bottom:2px solid var(--line); padding-bottom:4px; margin:18px 0 10px;}
.rooms-avsummary{font-size:12.5px; color:var(--ink); margin-top:4px; line-height:1.5;}
.ro-sumlbl{font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:10.5px; color:var(--muted); margin-right:5px;}
.ro-avitem{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--navy); background:#f7f9fc; border:1px solid var(--line); border-radius:8px; padding:4px 10px; cursor:pointer;}
.ro-avitem input{margin:0;}
/* AV options editor — the per-OPTION "Offered in" room multi-pick, grouped like the picker. */
.av-rooms{margin-top:4px;}
.av-roomgrp{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px;}
.av-roomgrp-h{flex-basis:100%; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:2px 0 1px;}
.ind-addrow{margin:12px 0 4px;}
/* Admin Event-Types editor ("Section behaviors") — one .rt-sec card per type; grouped fields. Laptop-first. */
.sb-card .sb-name{width:100%; box-sizing:border-box; font-size:15px; font-weight:700; color:var(--navy); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-family:inherit;}
.sb-card.sb-inactive{opacity:.62;}
.sb-grouplbl{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:12px 0 6px;}
/* Admin "Show inactive" toggle — shared across the editors (Event Types, Food, Individuals). Inactive rows are hidden
   by default; the "Show inactive (N)" control adds .adm-show-inactive to the editor body, revealing them dimmed + tagged.
   Front-end display filter only (the GETs return active + inactive). Reveal rules are element-specific: cards = block,
   table rows = table-row. */
.adm-inactive{display:none;}
.adm-show-inactive .rt-sec.adm-inactive{display:block; opacity:.55;}
.adm-show-inactive tr.adm-inactive{display:table-row; opacity:.6;}
.adm-show-inactive .rt-row.adm-inactive{display:flex; opacity:.6;}   /* Admin batch #2b — Routing rows are .rt-row (flex), not .rt-sec/tr, so they need their own reveal rule */
.adm-inactive-tag{display:inline-block; margin-left:8px; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:#eef2f7; border:1px solid var(--line); border-radius:999px; padding:1px 8px; vertical-align:middle;}
.adm-inact-tools{margin:0 0 14px;}
.adm-inact-btn{font-size:12.5px; padding:5px 13px;}
.adm-inact-btn[data-showing="1"]{background:var(--navy); color:#fff; border-color:var(--navy);}
/* Recurring page (Ticket samples) — a single-select sample LIST + a panel (Use form · confirm · read-only preview digest).
   The removed-sample reveal reuses the shared .adm-show-inactive toggle, but rec-rows are flex, so they need their own
   reveal rule (the generic one targets .rt-sec / tr only). */
.adm-show-inactive .rec-row.adm-inactive{display:flex; opacity:.55;}
.rec-list{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.rec-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:#fff;}
.rec-row:hover{border-color:#b9c6da; background:var(--accent-soft);}
.rec-row.rec-sel{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset;}
.rec-row .rec-radio{margin:0; flex:0 0 auto;}
.rec-row-main{flex:1 1 auto; min-width:0;}
.rec-row-main .rec-nm{font-size:14px;}
.rec-panel{border-top:1px solid var(--line); padding-top:14px;}
.rec-fields{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end;}
.rec-fld{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
.rec-fld input{padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:14px; min-width:160px;}
.rec-fld.rec-fld-wide input{min-width:240px;}
.rec-adv{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); text-transform:none; letter-spacing:0; font-weight:500; align-self:center; padding-bottom:6px;}
.rec-confirm{margin:12px 0 2px;}
.rec-confirm-in{display:flex; align-items:center; flex-wrap:wrap; gap:10px; background:#eaf6ec; border:1px solid #bfe3c5; border-radius:9px; padding:9px 13px;}
.rec-confirm-msg{font-size:13.5px; font-weight:600; color:#1c6b2c;}
.rec-confirm-msg.rec-err{color:var(--danger, #b3261e);}
.rec-confirm-view{font-size:12.5px;}
.rec-remove-row{margin-top:14px;}
.rec-remove{font-size:12px; color:var(--muted);}
.rec-preview{max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fafbfc;}
.rec-pv-row{display:flex; gap:10px; padding:5px 0; border-bottom:1px dashed #e6ebf1;}
.rec-pv-row:last-child{border-bottom:0;}
.rec-pv-k{flex:0 0 96px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding-top:2px;}
.rec-pv-v{flex:1 1 auto; min-width:0; font-size:13px; color:var(--ink);}
.rec-pv-space{margin-bottom:6px;}
.rec-pv-space:last-child{margin-bottom:0;}
.rec-pv-sub{font-size:12px; color:var(--muted); margin:1px 0 0 8px;}
/* Home preview digest — a compact label/value block (when·spaces·stakeholder · Start–End line · audience+grades),
   then a Teams row, then the standard beige space cards (.space). No duplicated Schedule/Audience sections. */
.pv-digest{margin-top:2px;}
.pv-line{display:flex; gap:10px; padding:4px 0; align-items:baseline;}
.pv-k{flex:0 0 82px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding-top:2px;}
.pv-v{flex:1 1 auto; min-width:0; font-size:13px; color:var(--ink);}
.pv-aud{display:flex; flex-wrap:wrap; gap:5px; align-items:center;}   /* audience pills + grade pills inline, wrap only if needed */
.pv-teams{border-top:1px solid var(--line); margin-top:6px; padding-top:8px;}
.pv-spaces{margin-top:12px; display:flex; flex-direction:column; gap:10px;}
.sb-grid{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:flex-end;}
.sb-field{display:flex; flex-direction:column; gap:3px;}
.sb-field label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
.sb-field .sb-in{padding:6px 9px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px; min-width:170px;}
.sb-field .sb-in.sb-wide{min-width:280px; flex:1;}
.sb-yn{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--navy);}
.sb-ynrow{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;}
/* Foods-by-type editor (Food Slice B) — one row per active food: Offered · Default · Sort. Reuses .sb-yn/.rt-toggle. */
.fbt-row{display:flex; align-items:center; gap:16px; padding:7px 0; border-bottom:1px solid var(--line);}
.fbt-row:last-child{border-bottom:0;}
.fbt-name{flex:1; min-width:0;}
.fbt-hint{color:var(--muted); font-weight:500; font-size:12px;}
.fbt-def, .fbt-sortf{flex:none;}
/* F40 — give the option chips (verbs · A/V · food) a little more pop: a soft lift at rest, a soft accent ring when
   selected. Flat + soft shadow, no gradients. Shared .eq (intake + ticket space editor); the location-picker list
   rows (.eq.lp-item) are excluded so the picker stays flat. (request.html links skeleton.css, so this covers both.) */
.eq:not(.lp-item){ box-shadow:0 1px 3px rgba(14,28,56,.10); }
.eq.on:not(.lp-item){ box-shadow:0 0 0 2px var(--accent-soft), 0 2px 6px rgba(14,28,56,.14); }
/* Tables & linens (Part B) — the bottom-of-card grid (intake + ticket space editor; request.html links skeleton.css
   so this covers both). One row per table/cloth item: an include toggle + Qty + Cover color + Cover type + Qty-to-
   order; cloth-only rows carry qty + color only. A row lights up when included; the .tl-nest line is the live
   "Store N tables" Ops cue when a space-assigned table's qty drops below the room default. */
.tl-section{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.tl-grp{ margin-top:10px; }
.tl-grp-label{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.tl-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; margin-bottom:6px; background:#fff; }
.tl-row.on{ border-color:var(--cyan); background:#f5fbfe; }
.tl-inc{ display:flex; align-items:center; gap:7px; min-width:150px; flex:1 1 150px; font-weight:600; cursor:pointer; }
.tl-inc .tl-name{ font-size:13px; color:var(--ink); }
.tl-fields{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; opacity:.5; transition:opacity .12s; }
.tl-row.on .tl-fields{ opacity:1; }
.tl-f{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--muted); }
.tl-f input, .tl-f select{ font-family:inherit; font-size:13px; padding:4px 6px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); }
.tl-f input{ width:52px; }
.tl-f select{ min-width:96px; cursor:pointer; }
.tl-nest{ flex-basis:100%; font-size:11.5px; font-weight:700; color:#b5730a; margin-top:2px; }
.tl-autolabel{ font-style:italic; color:var(--ink); font-weight:600; }   /* auto round-cloth label (108" / 120") — not editable */
.tl-navyhint{ color:var(--muted); font-style:italic; }                    /* stands in for the color field when the source is Stretch (auto Navy) */
.tl-navyhint[hidden]{ display:none; }                                     /* the `hidden` attr must win over .tl-f's display:flex — else the "Navy (stretch)" hint shows even when the source isn't Stretch */
@media (max-width:560px){
  .tl-fields{ flex-basis:100%; }
  .tl-f input{ width:48px; }
  .tl-f select{ min-width:0; flex:1 1 auto; }
}