/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }

.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--accent-strong); }

.btn-secondary { background: var(--surface-2); color: var(--text); }
.btn-secondary:hover { opacity: .85; }

.btn-danger { background: var(--danger-soft); color: var(--danger); }

.btn-orange { background: var(--orange); color: var(--text-on-accent); }
.btn-orange:hover { opacity: .85; }

.btn-orange-soft { background: var(--orange-soft); color: var(--orange); }
.btn-orange-soft:hover { opacity: .85; }

.btn-block { width: 100%; }

.btn-lg { padding: 16px 28px; font-size: var(--text-base); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }

.btn-sm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
}
.btn-sm-icon:hover { color: var(--text); }
.btn-sm-icon.danger:hover { color: var(--danger); }

.favorite-form { display: inline-flex; }
.favorite-btn { background: var(--surface-2); color: var(--text-secondary); border: none; }
.favorite-btn.is-favorite { color: var(--danger); }
.favorite-btn.is-favorite .icon { fill: currentColor; }

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.card-list { display: flex; flex-direction: column; gap: var(--space-3); }

.entity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.entity-card-main { min-width: 0; }
.entity-card-main a { font-weight: 600; font-size: var(--text-base); }
.entity-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  /* Long unbroken text (a full website URL, say) would otherwise refuse to
     shrink below its own content width, pushing the row's icon button off
     the edge of narrow screens instead of wrapping. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.entity-card-meta .icon { width: 1rem; height: 1rem; }
.entity-card-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.row-list { display: flex; flex-direction: column; gap: var(--space-2); }
.row-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
}
.row-list-actions { display: flex; gap: var(--space-2); }

/* Circle activity feed (Home + the "View All" page) — a left-hand badge
   (what kind of thing happened) beside a stacked column: who/what on top,
   the restaurant below, then a meta line (party size, relative time).
   Deliberately its own component rather than .row-list-item, whose
   single-line space-between layout was squeezing "actor + verb + restaurant
   + timestamp" into one flex line that wrapped badly on narrow screens. */
.activity-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
}
.activity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: #fff;
}
.activity-icon .icon { width: 20px; height: 20px; }
.activity-icon-added { background: var(--info); }
.activity-icon-visited { background: var(--accent); }
.activity-icon-favorited { background: var(--danger); }
.activity-row-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.activity-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.activity-verb { color: var(--text-secondary); }
.activity-restaurant {
  color: var(--accent-strong);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.activity-restaurant:hover { color: var(--accent); }
.activity-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
/* Party-size pill — shared with Visit History on the restaurant detail page
   (see .visit-row) so a party size looks the same wherever it shows up.
   Self-contained font-size/color/weight so it reads the same regardless of
   the surrounding text's own size. */
.party-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}
.party-badge .icon { width: .8rem; height: .8rem; }

/* A card section's title + "View All" link, e.g. above the activity feed. */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.section-header h3 { margin: 0; }
.section-header-link { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-strong); font-weight: 600; font-size: var(--text-sm); flex-shrink: 0; }
.section-header-link .icon { width: 1rem; height: 1rem; }

.empty-state {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--space-6) var(--space-4);
}

/* Collapsible search/filter panel — a native <details>, so it works with no JS.
   Closed by default; the template adds `open` when a filter is already active. */
.filters.card { padding: 0; }
.filters-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary::marker { content: ""; }
.filters-summary-label { display: flex; align-items: center; gap: var(--space-2); }
.filters-chevron { color: var(--text-secondary); transition: transform .15s ease; }
.filters[open] .filters-chevron { transform: rotate(180deg); }
.filters-body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--border); padding-top: var(--space-4); }

/* ------------------------------------------------------------------ */
/* Chips / tags / stars                                                */
/* ------------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}
.chip-accent { background: var(--accent-soft); color: var(--accent-strong); }
.chip-orange { background: var(--orange-soft); color: var(--orange); }
/* Vibes/moods get their own color (blue) so they read as a different kind
   of tag from genre (green) wherever the two sit side by side. */
.chip-info { background: var(--info-soft); color: var(--info); }

.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .icon { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------------ */
/* Page furniture                                                      */
/* ------------------------------------------------------------------ */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.page-header h1 { font-size: var(--text-2xl); }
.page-header .subtitle { color: var(--text-secondary); margin-top: 2px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.back-link .icon { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.field { margin-bottom: var(--space-4); }
.field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="url"],
.field textarea,
.field select,
.form-control2 {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.form-control2:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.field textarea { resize: vertical; min-height: 90px; }

select[multiple].form-control2 { min-height: 120px; }

.field-help { color: var(--danger); font-size: var(--text-xs); margin-top: var(--space-1); }

.form-errors {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.checkbox-pill {
  display: inline-flex;
}
.checkbox-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-pill span {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.checkbox-pill input:checked + span {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}
.checkbox-pill.select-all span { background: transparent; border: 1px dashed var(--border); }

.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Randomizer reveal buttons specifically — their labels ("Not Feeling It?
   Try Another") are much longer than the Save/Cancel pairs .form-actions
   is normally used for, so on a phone-width screen they need to stack
   full-width rather than squeeze side-by-side into a 3-line pill. */
.reveal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.reveal-actions form { display: flex; }
.reveal-actions .btn { width: 100%; }

.party-size-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.party-size-field label { display: flex; align-items: center; gap: var(--space-1); font-weight: 600; }
.party-size-input { width: 72px; flex: 0 0 auto; text-align: center; padding: 10px 8px; }
/* On the reveal screen this sits on its own row above the action buttons
   (not inside any one of those forms — the input uses the HTML `form=`
   attribute to still submit with "We're going here!"). That's what keeps
   it from being trapped inside one button's flex item and looking lopsided
   once the buttons switch to a row at desktop widths. */
.reveal-party-size {
  justify-content: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--border);
}

/* A card section's title with a colored icon badge to its left — e.g. Visit
   History's calendar badge on the restaurant detail page. */
.section-icon-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-icon-header h3 { margin: 0; }
.section-icon-header .subtitle { margin-top: 2px; color: var(--text-secondary); font-size: var(--text-xs); }
.section-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--orange-soft);
  color: var(--orange);
}
.section-icon-badge .icon { width: 24px; height: 24px; }

/* Visit History's "Log a visit" row: a party-size stepper stacked above a
   full-width button rather than beside it — plenty of room since this
   isn't competing with anything else on the line. */
.log-visit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.party-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: 600;
}
.stepper-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text);
}
.stepper-btn:hover { background: var(--border); }
.stepper-btn .icon { width: 1rem; height: 1rem; }
.stepper-input {
  width: 2.5em;
  border: none;
  background: transparent;
  padding: 0;
  text-align: center;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  -moz-appearance: textfield;
}
.stepper-input:focus { outline: none; }
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Visit History rows: same card look as .activity-row (surface, shadow,
   radius, padding). The date is the headline; a thin divider separates
   "what" (party size) from "who" (logged by, and whether it came from the
   randomizer); delete is the least important thing here, so it sits quiet
   next to the date until hovered. */
.visit-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.visit-row-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.visit-row-date { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.visit-row-weekday { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.visit-row-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.visit-row-party { color: var(--orange); font-weight: 600; }
.visit-row-divider { border-top: 1px solid var(--border); }
.visit-row-footer { flex-wrap: wrap; }
/* Neutral, not orange — the button and this badge are the two spots this
   page deliberately breaks from the reference design's all-orange look. */
.visit-row-randomizer { background: var(--surface-2); color: var(--text-secondary); }
/* Party size on a visit row doubles as the toggle for editing it — a native
   <details>, like the filter panel, so it works with no JS. */
.visit-party-edit summary { cursor: pointer; list-style: none; width: fit-content; }
.visit-party-edit summary::-webkit-details-marker { display: none; }
.visit-party-edit summary::marker { content: ""; }
.visit-party-add { font-weight: 500; }
.visit-party-edit-icon { display: inline-flex; opacity: .5; }
.visit-party-edit-icon .icon { width: .875rem; height: .875rem; }
.visit-party-edit summary:hover .visit-party-edit-icon,
.visit-party-edit[open] .visit-party-edit-icon { opacity: 1; }
.visit-party-form { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.visit-row-delete { background: transparent; color: var(--text-secondary); opacity: .5; flex-shrink: 0; }
.visit-row-delete:hover { opacity: 1; color: var(--danger); background: var(--danger-soft); }

.visit-history-summary { text-align: center; color: var(--text-secondary); font-size: var(--text-xs); margin-top: var(--space-4); margin-bottom: 0; }
.visit-history-tagline { text-align: center; color: var(--text-secondary); font-size: var(--text-xs); font-style: italic; margin-top: 2px; }

.switch-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.switch-field-label { font-weight: 600; font-size: var(--text-sm); }
.switch-field-help { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-pill);
  transition: background .15s ease;
}
.switch-track::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform .15s ease;
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

/* ------------------------------------------------------------------ */
/* Messages (Django messages framework)                                */
/* ------------------------------------------------------------------ */

.messages { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.messages:empty { display: none; margin: 0; }
.message {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
}
.message-success { background: var(--accent-soft); color: var(--accent-strong); }
.message-error, .message-danger { background: var(--danger-soft); color: var(--danger); }
.message-info, .message-secondary { background: var(--surface-2); color: var(--text-secondary); }
.message-warning { background: #FCEFD8; color: #92620A; }

/* ------------------------------------------------------------------ */
/* Auth screen                                                         */
/* ------------------------------------------------------------------ */

.auth-shell {
  min-height: calc(100vh - var(--space-6) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.auth-logo { width: 84px; height: 84px; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.auth-card h1 { font-size: var(--text-xl); }
.auth-card .subtitle { color: var(--text-secondary); margin-top: var(--space-1); margin-bottom: var(--space-5); }
.auth-card form { text-align: left; }

/* ------------------------------------------------------------------ */
/* Randomizer reveal                                                   */
/* ------------------------------------------------------------------ */

.reveal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.deciding { padding: var(--space-6) 0; }
#deciding-phrase { transition: opacity .2s ease; min-height: 1.5em; }
#deciding-phrase.is-swapping { opacity: 0; }
.spinner {
  width: 40px; height: 40px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  border: 3px solid var(--surface-2);
  border-top-color: var(--orange);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.reveal-check {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal-check .icon { width: 32px; height: 32px; }

.reveal-name { font-size: var(--text-2xl); margin: var(--space-2) 0; }
.reveal-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  color: var(--text-secondary);
  margin: var(--space-4) 0;
}
.reveal-meta a { display: inline-flex; align-items: center; gap: var(--space-2); }
.reveal-note { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }

/* Deliberately its own color (the logo's yellow, via --warning — already
   used for star ratings) rather than the muted address/phone/website links
   around it, or the orange "Try Another" button — this is worth noticing
   before you drive somewhere, not just another reference link. */
.hours-link { color: var(--warning) !important; font-weight: 600; }
.hours-link:hover { text-decoration: underline; }
/* Contact-action buttons (map, phone, website, hours) on the restaurant
   detail page — same yellow across the row so they read as one family of
   "do something with this restaurant" actions rather than one-off accents. */
.btn-sm-icon.contact { color: var(--warning); }
.btn-sm-icon.contact:hover { color: var(--warning); opacity: .8; }

/* ------------------------------------------------------------------ */
/* CTA cards (home)                                                    */
/* ------------------------------------------------------------------ */

/* Mobile-first: a little tighter by default so the five home cards fit a
   phone screen without scrolling; the 768px breakpoint below restores the
   roomier sizing for tablet/desktop, where there's height to spare. */
.cta-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.cta-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.cta-card-primary { background: var(--accent); color: var(--text-on-accent); }
.cta-card-secondary { background: var(--surface); color: var(--text); }
.cta-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.35);
}
.cta-card-secondary .cta-icon { background: var(--accent-soft); color: var(--accent-strong); }
.cta-icon .icon { width: 20px; height: 20px; }
.cta-card h3 { margin-bottom: 2px; }
.cta-card p { font-size: var(--text-sm); opacity: .85; }

/* ------------------------------------------------------------------ */
/* Navigation: mobile top bar + bottom tab bar, desktop sidebar         */
/* ------------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-brand { display: flex; align-items: center; gap: var(--space-2); }
.topbar-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.topbar-title { font-weight: 700; font-size: var(--text-sm); line-height: 1.2; }
.topbar-subtitle { font-size: 11px; color: var(--text-secondary); line-height: 1.2; }

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  /* The safe-area inset (the home-indicator strip on notched iPhones) must be
     ADDED on top of the bar's real height, not eaten out of it — Chrome's
     desktop device-mode approximates this differently than real iOS Safari,
     which is why this only showed up on an actual phone: with a fixed 64px
     height and this padding included in the box, ~34px of real device safe
     area left only ~30px for the icon row, squashing the circular Randomize
     button into a flattened oval. */
  height: var(--tabbar-total-height);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 4px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
/* Anchoring every tab to the bottom (not centering each independently) keeps
   every label on the same baseline no matter how tall that tab's icon is —
   otherwise the much-bigger Randomize circle drags its own label out of line
   with its neighbors. */
.tabbar-item .icon { width: 22px; height: 22px; }
.tabbar-item.active { color: var(--accent-strong); }
.tabbar-item-primary .icon-wrap {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
}
.tabbar-item-primary .icon-wrap .icon { width: 18px; height: 18px; }

/* The Manage button sits a div deeper than the other tabs (it needs a
   wrapper for its popover), so it doesn't get the flex-stretch its
   siblings get automatically — fill that wrapper explicitly instead. */
.tabbar-manage { flex: 1; position: relative; display: flex; }
.tabbar-manage > .tabbar-item { flex: 1; width: 100%; }

.sidebar { display: none; }

.popover {
  position: absolute;
  min-width: 160px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: none;
  flex-direction: column;
  z-index: 30;
}
.popover.open { display: flex; }
.popover a, .popover button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.popover a:hover, .popover button:hover { background: var(--surface-2); }

.popover-divider { height: 1px; background: var(--border); margin: var(--space-2) 0; }

/* Light/Dark/System segmented control — lives above Admin/Logout in both the
   mobile popover and the desktop sidebar footer. */
.theme-switcher {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-bottom: var(--space-2);
}
.theme-switcher .theme-option {
  flex: 1;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
}
.theme-switcher .theme-option:hover { background: transparent; color: var(--text); }
.theme-switcher .theme-option.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-sm); }
.theme-switcher .icon { width: 16px; height: 16px; }

.topbar-menu { position: relative; }
.topbar .popover { right: 0; top: calc(100% + 8px); }

.tabbar-manage .popover { right: 8px; bottom: calc(var(--tabbar-total-height) + 8px); left: auto; }

@media (min-width: 768px) {
  .topbar, .tabbar { display: none; }

  .reveal-actions { flex-direction: row; justify-content: center; }
  .reveal-actions .btn { width: auto; }

  .cta-grid { gap: var(--space-4); }
  .cta-card { gap: var(--space-4); padding: var(--space-5); }
  .cta-icon { width: 48px; height: 48px; }
  .cta-icon .icon { width: 24px; height: 24px; }

  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    padding: var(--space-5) var(--space-4);
    background: var(--surface);
    border-right: 1px solid var(--border);
    /* A fixed-position box doesn't hand its overflow to the page scroll —
       on a short viewport (a phone rotated to landscape, past the 768px
       breakpoint) the nav links + footer can be taller than the screen,
       and without this the footer (Admin/Logout) just becomes unreachable. */
    overflow-y: auto;
  }
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }
  .sidebar-brand img { width: 48px; height: 48px; border-radius: 12px; }
  .sidebar-brand h2 { font-size: var(--text-lg); }
  .sidebar-brand .subtitle { font-size: var(--text-xs); color: var(--text-secondary); }

  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--text-sm);
  }
  .sidebar-link:hover { background: var(--surface-2); }
  .sidebar-link.active { background: var(--accent-soft); color: var(--accent-strong); }

  .sidebar-footer { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: var(--space-3); }
}