/*
 * Y.E.T.I. Portal V2 — shared component styles.
 *
 * Extracted verbatim from the inline <style> block in trips-v2.html so every V2 screen
 * uses one set of primitives. Both V2 pages previously defined .btn-ghost, .btn-sm,
 * .toast, .wizard-actions, .done-hero, .summary-line and .proto-banner separately, and
 * the copies had already drifted.
 *
 * Load order: css/styles.css (brand) -> css/portal.css (components) -> page <style>
 * (page-specific only). Anything used on more than one screen belongs here.
 */

/* ---- Prototype-only styling (on top of the shared brand styles) ---- */
.proto-banner { background: var(--accent); color: #3a2a00; text-align: center;
  font-weight: 700; font-size: .82rem; letter-spacing: .03em; padding: .35rem; }
.btn-ghost { background:#fff; border:2px solid var(--line); }
.btn-sm { padding: .35rem .8rem; font-size: .85rem; }
.btn-danger { background:#fff; color:#a4262c; border:2px solid #f0c9cb; }
.btn-danger:hover { background:#fdf3f3; border-color:#d13438; }
.wizard-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.wizard-actions .spacer { flex: 1; }
.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--blue-900);
  color: #fff; padding: .7rem 1.1rem; border-radius: 10px; font-weight: 600; box-shadow: var(--shadow); z-index: 50; opacity:0; transition:.3s; }
.toast.show { opacity: 1; }

/* Slimmer, simpler banner: flat brand blue, no photo, title only. */
.hero-slim { background: linear-gradient(160deg, var(--blue-700), var(--blue-900)); padding: 1.35rem 0 1.5rem; }
.hero-slim h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); text-shadow: none; }

/* Badges */
.badge { display:inline-block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:.2rem .55rem; border-radius:999px; white-space:nowrap; }
.badge-ok      { background:#d8efe0; color:#1a7a44; }
.badge-warn    { background:#fdf0d5; color:#8a5a00; }
.badge-blocked { background:#fbe1e2; color:#a4262c; }
.badge-info    { background: var(--sky-100); color: var(--blue-700); }

/* Dashboard */
.hh-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.member { display:flex; align-items:center; gap:.85rem; padding:.85rem 0; border-bottom:1px dashed var(--line); }
.member:last-child { border-bottom:0; }
.avatar { width:42px; height:42px; flex:none; border-radius:50%; background:var(--blue-700); color:#fff;
  display:grid; place-items:center; font-family:"Staatliches"; font-size:1.15rem; }
.avatar.is-adult { background: var(--blue-900); }
.member-main { flex:1; min-width:0; }
.member-name { font-family:"Staatliches"; font-size:1.25rem; color:var(--blue-900); line-height:1.1; }
.member-sub { color:var(--muted); font-size:.85rem; }
/* Actions sit to the LEFT of the status indicator, which anchors hard right. */
.member-actions { display:flex; flex-direction:row; align-items:center; gap:.6rem;
  flex:none; margin-left:auto; }
.member-actions .badge { min-width:9.5rem; text-align:center; }
.add-member-row { display:flex; justify-content:center; margin-top:1.1rem;
  padding-top:1.1rem; border-top:1px solid var(--line); }
.signup-actions { display:flex; justify-content:center; margin-top:1rem; }
.member-clubs { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.35rem; }
.club-chip { text-transform:none; letter-spacing:0; font-weight:700; }

.reg { display:flex; gap:1rem; align-items:flex-start; padding:.95rem 0; border-bottom:1px dashed var(--line); }
.reg:last-child { border-bottom:0; }
.reg-when { flex:none; width:60px; text-align:center; background:var(--sky-100); border:1px solid var(--sky-300);
  border-radius:10px; padding:.35rem 0; }
.reg-when .mo { display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; color:var(--blue-700); }
.reg-when .da { display:block; font-family:"Staatliches"; font-size:1.5rem; color:var(--blue-900); line-height:1; }
.reg-main { flex:1; min-width:0; }
.reg-title { font-weight:700; color:var(--blue-900); }
.reg-sub { color:var(--muted); font-size:.87rem; }
.empty { text-align:center; color:var(--muted); padding:1.5rem 1rem; }

/* Sign-up section (bottom of dashboard) */
.signup-card { border:2px solid var(--sky-300); background:var(--cream); }
.signup-card .wizard-actions { justify-content:flex-start; margin-top:1rem; }
.btn-browse { font-size:1.05rem; padding:.75rem 1.6rem; }

/* Catalog */
.tabs { display:flex; gap:.4rem; margin:0 0 1rem; flex-wrap:wrap; }
.tab { font:inherit; font-weight:700; border:2px solid var(--line); background:#fff; color:var(--blue-700);
  border-radius:999px; padding:.4rem 1.1rem; cursor:pointer; }
.tab.is-active { background:var(--blue-700); border-color:var(--blue-700); color:#fff; }
/* All / Eligible switch above the filter row. A segmented control rather than a
   checkbox: both states are named, so nobody has to infer what "off" filters out. */
.scope-toggle { display:inline-flex; border:2px solid var(--line); border-radius:999px;
  overflow:hidden; margin:0 0 1rem; background:#fff; }
.scope-btn { font:inherit; font-weight:700; font-size:.9rem; border:0; background:transparent;
  color:var(--blue-700); padding:.45rem 1.15rem; cursor:pointer; transition:.15s; }
.scope-btn:hover:not(.is-active) { background:var(--sky-100); }
.scope-btn.is-active { background:var(--blue-700); color:#fff; }
.scope-toggle[hidden] { display:none; }
.scope-count { color:var(--muted); font-size:.85rem; margin:0 0 1rem; }

.filters { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.7rem; margin-bottom:1.2rem; }
.filters[hidden] { display:none; }
.filters-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.trip-card { display:flex; gap:1rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  padding:1rem 1.1rem; margin-bottom:.9rem; align-items:flex-start; }
.trip-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow); }
.trip-card.is-full { background:#fbfcfd; }
.trip-main { flex:1; min-width:0; }
.trip-title { font-family:"Staatliches"; font-size:1.4rem; color:var(--blue-900); line-height:1.15; margin:0 0 .2rem; }
.trip-meta { color:var(--muted); font-size:.88rem; margin:0 0 .5rem; }
.trip-side { flex:none; text-align:right; display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; }
.spots { font-size:.82rem; font-weight:700; color:#1a7a44; }
.spots.low { color:#8a5a00; }
.spots.none { color:#a4262c; }

/* Detail */
.detail-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem .9rem;
  padding:.9rem 1rem; background:var(--sky-100); border:1px solid var(--sky-300); border-radius:var(--radius); margin:.9rem 0 1.2rem; }
.detail-facts .k { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--blue-700); font-weight:800; }
.detail-facts .v { font-weight:700; color:var(--blue-900); }
.bring { margin:.4rem 0 0; padding-left:1.2rem; }
.bring li { margin-bottom:.25rem; }
.gear-link { margin:0 0 1.2rem; }
.gear-link a { color:var(--blue-700); font-weight:700; }
.gear-sep { color:var(--muted); margin:0 .5rem; }

/* Who's going */
.pick-row { display:flex; align-items:flex-start; gap:.8rem; border:2px solid var(--line); border-radius:var(--radius);
  padding:.9rem 1rem; margin-bottom:.75rem; background:#fff; }
.pick-row.is-selected { border-color:var(--blue-700); background:var(--sky-100); }
.pick-row.is-blocked { background:#fbfcfd; border-style:dashed; }
.pick-row input[type=checkbox] { margin-top:.35rem; accent-color:var(--blue-600); width:18px; height:18px; flex:none; }
.pick-body { flex:1; min-width:0; }
.pick-name { font-weight:700; color:var(--blue-900); }
.pick-why { font-size:.86rem; color:var(--muted); margin-top:.15rem; }
.pick-why strong { color:#a4262c; }

.callout { border-left:4px solid var(--accent); background:#fffaf0; padding:.8rem 1rem; border-radius:0 10px 10px 0; margin:1rem 0; }
.callout.is-warn { border-left-color:#d13438; background:#fdf3f3; }
.summary-line { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--line); }
.summary-line:last-child { border-bottom:0; }
.done-hero { text-align:center; padding:1rem 0 .5rem; }
.done-hero .big { font-size:3.2rem; }

/* Persistent way back out of any step of the wizard. */
.nav-home { margin: 0 0 .9rem; }

/* ---- Landing: who are you? ---------------------------------------------
   Role cards reuse the .trip-card border/hover treatment so the front door
   reads as the same product as the dashboard behind it. One vertical list,
   one row per role. Space goes BETWEEN the outlined buttons, not inside
   them — the cards stay compact so the gap is what reads. */
.role-list { display:flex; flex-direction:column; gap:2.75rem; margin-top:1.2rem; }
.role-card { display:flex; align-items:center; gap:.9rem;
  text-align:left; width:100%; font:inherit; cursor:pointer; border:2px solid var(--line);
  border-radius:var(--radius); background:#fff; padding:.9rem 1.15rem; }
.role-icon { width:40px; height:40px; flex:none; border-radius:50%; background:var(--sky-100);
  display:grid; place-items:center; font-size:1.25rem; }
.role-card .role-name { flex:1; }
.role-card:hover { border-color:var(--blue-500); box-shadow:var(--shadow); }
.role-card:disabled { cursor:default; background:#fbfcfd; border-style:dashed; opacity:.75; }
.role-card:disabled:hover { border-color:var(--line); box-shadow:none; }
.role-name { font-family:"Staatliches"; font-size:1.45rem; color:var(--blue-900); line-height:1.1;
  letter-spacing:.01em; }
.role-card::after { content:"›"; color:var(--blue-500); font-size:1.5rem; line-height:1; }
.role-card:disabled::after { content:"Soon"; font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); }

/* Sign-in: pick a channel, then enter the code. */
.signin-methods { display:flex; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 1rem; }
/* Channel icons: the symbol repeats the label, so it is decorative only. */
.ch-icon { margin-right:.3rem; font-size:1.05em; }

@media (max-width: 640px) {
  .filters { grid-template-columns:1fr; }
  .detail-facts { grid-template-columns:1fr; }
  .trip-card { flex-direction:column; }
  .trip-side { text-align:left; align-items:flex-start; width:100%; }
  .role-list { grid-template-columns:1fr; }

  /* Household and trip rows are one-line flex layouts built for a wide screen: an
     avatar, a name that must not shrink, a button, and a status badge with a 9.5rem
     minimum. On a phone that adds up to more than the width available, so the button
     rode on top of the name and the badge squashed the rest. Stack them instead —
     identity on one line, actions on the next, indented to line up under the name. */
  .member { flex-wrap:wrap; align-items:flex-start; }
  .member-main { flex:1 1 auto; }
  .member-actions { flex:1 1 100%; margin-left:0; margin-top:.55rem;
    padding-left:calc(42px + .85rem); justify-content:flex-start; }
  .member-actions .badge { min-width:0; }
  .member-name { font-size:1.15rem; }

  .reg { flex-wrap:wrap; }
  .reg-main { flex:1 1 calc(100% - 60px - 1rem); }
  .reg .member-actions { padding-left:calc(60px + 1rem); }

  /* Header: three items on one line is tight once the wordmark is there. */
  .header-inner { gap:.5rem; }
  .header-nav { gap:.4rem; }

  /* Manage shows four controls in one row (Home, spacer, Cancel, Confirm) and the
     spacer keeps them apart, so on a phone they ran off the edge. Let them wrap. */
  .wizard-actions { flex-wrap:wrap; justify-content:flex-start; }
  .wizard-actions .spacer { display:none; }
  .wizard-actions .btn { flex:1 1 auto; }

  /* Badges are nowrap so they read as one chip, but some carry a sentence —
     "Waitlisted — not on the trip" — which then pushed the row wider than the screen. */
  .badge { white-space:normal; }

  /* Long single words (an email address, a school name) must not widen the page. */
  .member-name, .member-sub, .reg-title, .reg-sub, .detail-facts .v { overflow-wrap:anywhere; }
}

/* Very narrow phones — let the actions use the full width rather than indenting. */
@media (max-width: 400px) {
  .member-actions, .reg .member-actions { padding-left:0; }
}

/* ---- Loading cover (2026-08-07) ----
   Covers the portal while the household loads. Without it the page paints its own
   empty scaffolding first, which a caregiver reads as "my family isn't here" rather
   than "still loading". Lives in the HTML so it is up during the first paint. */
.loading-cover {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--white, #fff);
  text-align: center;
  padding: 24px;
}
.loading-yeti {
  width: 96px;
  height: auto;
  margin-bottom: 14px;
  animation: loading-bob 1.6s ease-in-out infinite;
}
.loading-word {
  margin: 0;
  font-family: "Staatliches", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--blue-900, #0b3d63);
}
.loading-sub { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted, #667); }
.loading-dots span {
  animation: loading-dot 1.4s infinite;
  opacity: 0.2;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loading-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes loading-dot {
  0%, 60%, 100% { opacity: 0.2; }
  30%           { opacity: 1; }
}
/* Fading out rather than vanishing — the dashboard appearing under a dissolve reads
   as "it arrived", where an instant cut reads as a flicker. */
.loading-cover.is-going {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease-out;
}
/* Respect a stated preference for less motion: keep the cover, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .loading-yeti { animation: none; }
  .loading-dots span { animation: none; opacity: 1; }
  .loading-cover.is-going { transition: none; }
}

/* ---- "Report a problem" widget (js/feedback-widget.js) ---- */
/* FAB sits under the staff status sheet (z 40) and the toast (z 50); the modal
   backdrop goes over both so nothing bleeds through while reporting. */
.fb-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; display: flex; align-items: center; gap: .45rem;
  background: var(--blue-700); color: #fff; border: 0; border-radius: 999px; padding: .6rem 1rem;
  font: inherit; font-weight: 700; font-size: .85rem; box-shadow: var(--shadow); cursor: pointer; }
.fb-fab:hover { background: var(--blue-900); }
.fb-fab:disabled { opacity: .7; cursor: progress; }
.fb-fab svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 640px) { .fb-fab-label { display: none; } .fb-fab { padding: .8rem; } }
.fb-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(14, 42, 66, .45);
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.fb-modal { background: #fff; border-radius: 14px; box-shadow: var(--shadow); width: 100%; max-width: 480px;
  max-height: calc(100vh - 2rem); overflow: auto; padding: 1.25rem 1.25rem 1rem; }
.fb-modal h2 { margin: 0 0 .75rem; }
.fb-types { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .75rem; }
.fb-type { background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: .6rem .5rem;
  cursor: pointer; display: grid; gap: .1rem; text-align: center; font: inherit; }
.fb-type span { font-size: .78rem; color: var(--muted); }
.fb-type.is-on { border-color: var(--blue-700); background: var(--sky-100); }
.fb-text { width: 100%; border: 2px solid var(--line); border-radius: 10px; padding: .6rem .7rem;
  font: inherit; resize: vertical; }
.fb-shot { margin-top: .75rem; }
.fb-shot img { display: block; max-width: 100%; max-height: 150px; border: 1px solid var(--line); border-radius: 8px; }
.fb-shot-row { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }
.fb-shot-row .fb-hint { flex: 1; min-width: 12rem; }
.fb-hint { font-size: .8rem; color: var(--muted); margin: 0; }
.fb-error { background: #fbe1e2; color: #a4262c; border-radius: 8px; padding: .5rem .7rem;
  font-size: .85rem; margin-top: .6rem; }
.fb-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.fb-done { text-align: center; padding: 1.5rem 0; }
.fb-done .fb-big { font-size: 2rem; }