/* ui.css — F27 next-level layer: NOW bar, day strip, model rail + sheet, look tiles, night mode, search.
   Loaded after the inline styles in index.html; only adds, never rewrites app.js markup. */

/* ---------- plain-btn: a div or span that became a real <button>. A button brings its own font, border,
   padding, background and centring; this puts back what the div had. It sits first in the first stylesheet,
   so each component's own rules still win. ---------- */
.plain-btn { -webkit-appearance: none; appearance: none; display: block; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; line-height: inherit; cursor: pointer; }

/* ---------- night mode ---------- */
html[data-night] {
  /* F27 night: espresso page, chocolate cards, cream text, warm beige secondary */
  --peach: #1B100A; --peach-soft: #241812;
  --card: #3B2A22; --card-soft: #2C1F18; --card-border: rgba(207,163,132,0.14); --card-shadow: none;
  --ink: #E9E1D6; --muted: #CFA384; --line: rgba(207,163,132,0.18);
  --gold: #EECFB8; --gold-soft: rgba(207,163,132,0.18); --gold-line: rgba(207,163,132,0.38);
  --ok: #9CBF8F; --warn: #E88A76; --rose: #E88A76; --green: #9CBF8F;
}
html[data-night][data-brand="evie"] {
  /* Evie F27 night: Ash, White Light text, Champagne secondary, Glow accent */
  --peach: #1E1E1E; --peach-soft: #252525; --card: #2C2C2C; --card-soft: #252525;
  --ink: #FBF8F3; --muted: #E4CC9E; --line: rgba(228,204,158,0.18); --card-border: rgba(228,204,158,0.14);
  --gold: #FEF0A2; --gold-soft: rgba(254,240,162,0.12); --gold-line: rgba(228,204,158,0.38);
  --ok: #9CBF8F; --warn: #E88A76; --green: #9CBF8F; --rose: #E88A76; }
html[data-night] .head-logo, html[data-night] .role-logo { filter: invert(1) hue-rotate(180deg); }
html[data-night] .gate input, html[data-night] textarea, html[data-night] input, html[data-night] select { background: var(--card-soft); color: var(--ink); }
html[data-night] .section-btn.active { background: var(--gold); color: var(--peach); border-color: var(--gold); }
html[data-night] .placeholder-note { background: var(--card-soft); color: var(--muted); }
html, body { transition: background 0.35s; }

/* ---------- header tools ---------- */
.head-tools { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; margin-top: 2px; }
.head-btn {
  width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card-soft); color: var(--ink); font-size: var(--t-body); line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit;
}
.head-btn:active { transform: scale(0.94); }

/* ---------- day strip (replaces the visible select) ---------- */
.head-day-row { position: relative; }
.head-day-row .day-selector { position: absolute; opacity: 0; pointer-events: none; height: 0; padding: 0; border: 0; }
.day-strip {
  display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding: 2px 2px var(--s-1);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-pill {
  flex: 0 0 auto; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 54px; padding: var(--s-2) var(--s-2) var(--s-2); border-radius: var(--r-lg);
  background: var(--card-soft); border: 1px solid var(--line); color: var(--ink);
  font-family: inherit; cursor: pointer; transition: transform 0.15s, background 0.15s;
}
.day-pill .dp-wd { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.day-pill .dp-n { font-family: var(--font-display); font-size: var(--t-title); line-height: 1; font-weight: 500; }
.day-pill .dp-dot { width: 6px; height: 6px; border-radius: var(--r-pill); margin-top: var(--s-1); background: var(--muted); opacity: 0.5; }
.day-pill[data-day-brand="madi"] .dp-dot { background: var(--mark-madi); opacity: 1; }
.day-pill[data-day-brand="evie"] .dp-dot { background: var(--mark-evie); opacity: 1; }
.day-pill.today .dp-wd { color: var(--gold); font-weight: 600; }
.day-pill.active { background: var(--ink); color: var(--peach); border-color: var(--ink); transform: translateY(-1px); }
.day-pill.active .dp-wd { color: var(--peach); opacity: 0.75; }
html[data-night] .day-pill.active { background: var(--gold); color: var(--peach); }
html[data-night] .day-pill.active .dp-wd { color: var(--peach); }

/* ---------- NOW bar ---------- */
.now-bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
  margin: var(--s-2) var(--s-4) var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-lg);
  background: var(--ink); color: var(--peach); cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--shade) 12%, transparent);
}
html[data-night] .now-bar { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.now-clock { display: flex; flex-direction: column; line-height: 1; }
.now-clock .nc-time { font-family: var(--font-display); font-size: var(--t-clock); font-weight: 500; letter-spacing: 0.02em; }
.now-clock .nc-tz { font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-top: var(--s-1); }
.now-mid { min-width: 0; }
.now-title { font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-sub { font-size: var(--t-label); opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.now-sub b { font-weight: 600; opacity: 1; }
.now-wx { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-size: var(--t-label); opacity: 0.9; }
.now-wx .nw-t { font-size: var(--t-body); font-weight: 500; }
.now-wx .nw-uv { font-size: var(--t-label); letter-spacing: 0.08em; opacity: 0.7; }
.now-dinner { grid-column: 1 / -1; margin-top: 2px; padding-top: var(--s-2); border-top: 1px solid color-mix(in srgb, var(--peach) 14%, transparent); font-size: var(--t-meta); display: flex; gap: var(--s-2); align-items: center; }
html[data-night] .now-dinner { border-top-color: var(--line); }
.now-dinner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- quick actions in today's plan ---------- */
.tp-quick { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.tp-quick button {
  flex: 1; padding: var(--s-2) var(--s-2); border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--card-soft); color: var(--ink); font-family: inherit; font-size: var(--t-meta); font-weight: 500; cursor: pointer;
}
.tp-quick button:active { transform: scale(0.98); }

/* ---------- model rail ---------- */
.model-rail { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding: var(--s-2) 2px var(--s-1); margin: var(--s-1) -2px 0; scroll-snap-type: x mandatory; }
.model-rail::-webkit-scrollbar { display: none; }
.mcard {
  flex: 0 0 auto; width: 136px; scroll-snap-align: start; cursor: pointer;
  border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: 0 2px 10px color-mix(in srgb, var(--shade) 8%, transparent);
  transition: transform 0.15s;
}
.mcard:active { transform: scale(0.97); }
.mcard-photo { position: relative; height: 172px; background: var(--peach-soft); }
.mcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.mcard-photo .mono {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 44px; color: var(--gold); background: var(--gold-soft);
}
.mcard-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 56%; background: linear-gradient(to top, color-mix(in srgb, var(--shade) 72%, transparent), transparent); pointer-events: none; }
.mcard-name { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; color: var(--on-shade); font-family: var(--font-display); font-size: var(--t-lead); font-weight: 500; letter-spacing: 0.04em; line-height: 1.05; text-shadow: 0 1px 6px color-mix(in srgb, var(--shade) 40%, transparent); }
.mcard-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-2) var(--s-2); }
.mcard-stats { font-size: var(--t-label); color: var(--muted); letter-spacing: 0.03em; white-space: nowrap; }
.mcard-stats b { color: var(--ink); font-weight: 600; }
.mcard-links { display: flex; gap: var(--s-1); }
.mcard-links a { width: 24px; height: 24px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); text-decoration: none; }
.mcard-links svg { width: 13px; height: 13px; }

/* ---------- bottom sheets (model, search) ---------- */
.sheet-veil { position: fixed; inset: 0; background: color-mix(in srgb, var(--shade) 45%, transparent); z-index: 60; opacity: 0; transition: opacity 0.25s; backdrop-filter: blur(2px); }
.sheet-veil.on { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 760px; margin: 0 auto;
  max-height: 92dvh; background: var(--card); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(100%); transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -10px 40px color-mix(in srgb, var(--shade) 25%, transparent);
}
.sheet.on { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; border-radius: var(--r-xs); background: var(--line); margin: var(--s-2) auto 0; flex-shrink: 0; }
.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: var(--r-pill); border: none; background: color-mix(in srgb, var(--shade) 62%, transparent); color: var(--on-shade); font-size: var(--t-body); cursor: pointer; }
.sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.ms-hero { position: relative; height: 58vh; max-height: 520px; background: var(--peach-soft); }
.ms-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ms-hero .mono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 120px; color: var(--gold); background: var(--gold-soft); }
.ms-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, var(--card), transparent); pointer-events: none; }
.ms-title { position: absolute; left: 20px; right: 20px; bottom: 10px; z-index: 1; }
.ms-name { font-family: var(--font-display); font-size: 36px; font-weight: 500; letter-spacing: 0.03em; line-height: 1; }
.ms-agency { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-2); }
.ms-actions { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-1); }
.ms-actions a { flex: 1; text-align: center; padding: var(--s-3) var(--s-2); border-radius: var(--r-lg); background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--ink); text-decoration: none; font-size: var(--t-meta); font-weight: 500; }
.ms-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2) var(--s-2); padding: var(--s-4) var(--s-4) var(--s-2); }
.ms-stat .lbl { display: block; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ms-stat .val { font-size: var(--t-body); font-weight: 500; }
.ms-section { padding: var(--s-3) var(--s-4) var(--s-1); }
.ms-section h4 { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: var(--s-2); }
.looks-rail { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s-2); }
.looks-rail::-webkit-scrollbar { display: none; }
.look-thumb { flex: 0 0 auto; width: 72px; cursor: pointer; text-align: center; }
.look-thumb img { width: 72px; height: 96px; object-fit: contain; background: var(--peach-soft); border-radius: var(--r-sm); display: block; }
.look-thumb span { display: block; font-size: var(--t-label); margin-top: var(--s-1); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-thumb .fit { display: inline-block; font-size: var(--t-label); padding: 1px var(--s-1); border-radius: var(--r-xs); background: var(--gold-soft); color: var(--ink); margin-top: 2px; }
.ms-note { padding: var(--s-2) var(--s-4) var(--s-4); font-size: var(--t-meta); color: var(--muted); font-style: italic; }

/* ---------- look tiles (dresses by day) ---------- */
.look-tile {
  flex: 0 0 auto; width: 150px; scroll-snap-align: start; position: relative;
  background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 2px 10px color-mix(in srgb, var(--shade) 7%, transparent);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), opacity 0.25s; touch-action: pan-x pan-y; user-select: none;
}
.look-tile.dragging { transition: none; }
.look-tile.done { opacity: 0.55; }
.look-tile .lt-img { width: 100%; height: 190px; object-fit: contain; object-position: center bottom; background: var(--peach-soft); display: block; cursor: zoom-in; }
.look-tile .lt-noimg { height: 190px; display: flex; align-items: center; justify-content: center; font-size: 40px; background: var(--peach-soft); }
.lt-body { padding: var(--s-2) var(--s-2) var(--s-2); cursor: pointer; }
.lt-name { font-family: var(--font-display); font-size: var(--t-body); font-weight: 500; letter-spacing: 0.03em; line-height: 1.1; }
.lt-code { font-size: var(--t-label); color: var(--muted); letter-spacing: 0.06em; margin-top: 2px; }
.lt-chips { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-2); min-height: 16px; }
.lt-chip { font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px var(--s-2); border-radius: var(--r-xs); background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.lt-hero { position: absolute; top: 8px; left: 8px; font-size: var(--t-meta); filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--shade) 20%, transparent)); }
.lt-ring { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; cursor: pointer; }
.lt-ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.lt-ring circle { fill: var(--card); stroke-width: 3; }
.lt-ring .track { stroke: var(--line); }
.lt-ring .bar { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 0.4s; }
.lt-ring .tick { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--t-meta); color: var(--ink); }
.look-tile.done .lt-ring circle.bar { stroke: var(--ok); }
.look-tile.done .lt-ring .tick { color: var(--ok); font-weight: 700; }
.look-tile.readonly .lt-ring { cursor: default; opacity: 0.6; }
.lt-swipe-hint { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: var(--t-title); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.look-tile.dragging .lt-swipe-hint { opacity: 1; }
.dbd-strip { padding-bottom: var(--s-3); }

/* dress popup as a bottom sheet */
.popup-card-dress { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; max-width: 760px !important; }
@media (max-width: 760px) {
  .popup-overlay:has(.popup-card-dress) { align-items: flex-end !important; padding: 0 !important; }
  .popup-card-dress { width: 100%; max-height: 92dvh; overflow-y: auto; animation: sheetUp 0.32s cubic-bezier(.2,.8,.2,1); }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }

/* ---------- search ---------- */
.search-head { padding: var(--s-4) var(--s-4) var(--s-2); }
.search-input { width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--peach-soft); color: var(--ink); font-family: inherit; font-size: 16px; outline: none; }
.search-list { padding: var(--s-1) var(--s-2) var(--s-3); }
.search-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2); border-radius: var(--r-lg); cursor: pointer; }
.search-item:active { background: var(--peach-soft); }
.search-item img { width: 40px; height: 52px; object-fit: cover; border-radius: var(--r-sm); background: var(--peach-soft); }
.search-item .si-kind { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.search-item .si-title { font-size: var(--t-body); font-weight: 500; }
.search-item .si-sub { font-size: var(--t-label); color: var(--muted); }
.search-empty { padding: var(--s-4); text-align: center; color: var(--muted); font-size: var(--t-meta); font-style: italic; }
.hl-flash { animation: hlFlash 1.5s ease-out; }
@keyframes hlFlash { 0% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- offline ribbon ---------- */
.offline-ribbon { margin: var(--s-2) var(--s-4) 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold-line); font-size: var(--t-label); font-weight: 500; text-align: center; }

/* ===================================================================
   Silhouette checklists — 21 Sep 2026
   Black generic gown shapes, style code only, no names, no photographs.
   =================================================================== */
#dressesByDay .sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);padding:0 0 var(--s-2);border-bottom:1px solid var(--line);margin:var(--s-5) 0 var(--s-4)}
#dressesByDay .sec-title{font-size:var(--t-body);font-weight:700;letter-spacing:.01em}
#dressesByDay .sec-sub{font-size:var(--t-meta);color:var(--muted);margin-top:2px}
#dressesByDay .sec-count{font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
#dressesByDay .sec-count b{font-size:var(--t-title);color:var(--ink);font-weight:700}

/* --- the car load grid --- */
#dressesByDay .sil-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:var(--s-2)}
#dressesByDay .silcard{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s-3) var(--s-2) var(--s-2);display:flex;flex-direction:column;align-items:center;
  gap:var(--s-2);cursor:pointer;transition:border-color .15s,background .15s}
#dressesByDay .silcard:hover{border-color:var(--gold)}
#dressesByDay .sc-figure{position:relative;height:74px;display:flex;align-items:flex-end}
#dressesByDay .sil{height:74px;width:auto;display:block}
#dressesByDay .sil path{fill:var(--ink)}
#dressesByDay .silcard.done .sil path{fill:var(--gold)}
#dressesByDay .cam-icon{width:15px;height:11px;position:absolute;right:-9px;top:2px}
#dressesByDay .cam-body{fill:var(--gold)}
.cam-hole{fill:var(--card)}
#dressesByDay .sc-meta{display:flex;flex-direction:column;align-items:center;gap:1px}
#dressesByDay .sc-code{font:600 var(--t-label)/1 ui-monospace,Menlo,monospace;letter-spacing:.04em}
#dressesByDay .sc-prog{font-size:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums}

/* the tick, drawn on as the page loads */
#dressesByDay .sc-tick{position:absolute;top:6px;left:6px;width:22px;height:22px;padding:0;
  border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--card);cursor:pointer;
  display:grid;place-items:center}
#dressesByDay .sc-tick svg{width:13px;height:13px;fill:none;stroke:var(--gold);
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24}
#dressesByDay .silcard.done .sc-tick{border-color:var(--gold);background:color-mix(in srgb, var(--gold) 10%, var(--card))}
#dressesByDay.lit .silcard.done .sc-tick svg{
  animation:sc-draw .42s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 55ms + 120ms)}
@keyframes sc-draw{to{stroke-dashoffset:0}}

/* --- shoot-day rows --- */
#dressesByDay .day-list{display:flex;flex-direction:column;gap:var(--s-2)}
#dressesByDay .dressrow{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s-3) var(--s-3);display:flex;gap:var(--s-4);align-items:flex-start;
  opacity:0;transform:translateY(5px)}
#dressesByDay.lit .dressrow{animation:dr-in .34s ease forwards;
  animation-delay:calc(var(--i,0) * 38ms + 60ms)}
@keyframes dr-in{to{opacity:1;transform:none}}
#dressesByDay .dr-head{flex:none;width:62px;display:flex;flex-direction:column;
  align-items:center;gap:var(--s-1)}
#dressesByDay .dr-fig{position:relative;display:flex}
#dressesByDay .dr-fig .sil{height:52px}
#dressesByDay .dr-code{font:600 var(--t-label)/1 ui-monospace,Menlo,monospace;letter-spacing:.03em;
  display:flex;align-items:center;gap:var(--s-1);white-space:nowrap}
#dressesByDay .dr-code .cam-icon{width:13px;height:10px;position:static}
#dressesByDay .dr-bubbles{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-2);padding-top:2px}
#dressesByDay .bub-row{display:flex;flex-wrap:wrap;gap:var(--s-1)}
#dressesByDay .bub{min-width:27px;height:27px;padding:0 var(--s-2);border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  font:600 var(--t-meta)/1 ui-monospace,Menlo,monospace;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background-color .14s,border-color .14s,color .14s}
#dressesByDay button.bub:hover{border-color:var(--gold)}
#dressesByDay .bub.on{background:var(--ink);border-color:var(--ink);color:var(--peach)}
#dressesByDay .bub-row.acc .bub{height:23px;font:600 var(--t-label)/1 -apple-system,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;cursor:default;color:var(--muted);
  border-style:dashed;background:transparent}
@media (max-width:480px){
  #dressesByDay .sil-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}
  #dressesByDay .dr-head{width:52px}
  #dressesByDay .dr-fig .sil{height:44px}
}

/* ---- day runsheet (hour by hour, from the F27 deck) ---- */
.tp-run { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--line); display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-3); font-size: var(--t-meta); line-height: 1.4; color: var(--ink); }
.tp-run-row { display: contents; }
.tp-run-time { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap; }
.tp-date { white-space: nowrap; }
.tp-run-break .tp-run-time { font-weight: 500; font-style: italic; color: var(--muted); }

/* ---- EVERMORE bridal moments ---- */
.moments-head { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-body); letter-spacing: .04em; }
.moments { margin: var(--s-2) 0 var(--s-2); padding-left: 1.3em; display: grid; gap: var(--s-2); font-size: var(--t-meta); line-height: 1.45; color: var(--ink); }
.moments li::marker { color: var(--gold); font-weight: 600; }

/* ---- silhouettes stand in for gown photos everywhere ---- */
.camp-dress-sil { display: flex; align-items: center; justify-content: center; }
.camp-dress-sil .sil { height: 84%; width: auto; fill: var(--ink); }
.popup-dress-sil { position: relative; display: flex; justify-content: center; align-items: center; padding: var(--s-5) 0 var(--s-4); background: var(--card-soft); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.popup-dress-sil .sil { height: 200px; width: auto; fill: var(--ink); }
.popup-dress-sil .cam-icon { position: absolute; top: 14px; right: 16px; width: 26px; color: var(--gold); }