/* ─────────────────────────────────────────────────────────────
   extras.css — service status bar, crowding, visit (events/retail),
   feedback. Builds on the tokens in styles.css; no overrides.
   ───────────────────────────────────────────────────────────── */

/* ── Service-status / advisory strip ─────────────────────────── */
.statusbar {
  font-family: var(--f-ui);
  border-bottom: 1px solid var(--hair-d);
  background: var(--ink-2); color: var(--t-ondark);
}
.statusbar-in { display: flex; align-items: center; gap: .75rem; padding: .5rem var(--gut); min-height: 40px; }
.statusbar-dot { display: inline-flex; }
.statusbar-dot i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 currentColor; animation: sb-pulse 2.2s var(--ease) infinite;
}
.statusbar-msg { font-size: var(--fs-sm); font-weight: 500; flex: 1; min-width: 0; }
.statusbar-more { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap; }
.statusbar-more:hover { opacity: .8; }
.statusbar-x { background: none; border: 0; color: var(--t-ondark-2); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.statusbar-x:hover { color: #fff; }
.statusbar[data-state="normal"] .statusbar-dot i { background: var(--signal); color: var(--signal); }
.statusbar[data-state="info"]   .statusbar-dot i { background: var(--jb); color: var(--jb); }
.statusbar[data-state="minor"]  { background: #2a230f; }
.statusbar[data-state="minor"]  .statusbar-dot i { background: var(--amber); color: var(--amber); }
.statusbar[data-state="major"],
.statusbar[data-state="suspended"] { background: var(--rts-deep); }
.statusbar[data-state="major"]  .statusbar-dot i,
.statusbar[data-state="suspended"] .statusbar-dot i { background: #fff; color: #fff; }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .statusbar-dot i { animation: none; } }

/* ── Crowding (pre-journey advisory) ─────────────────────────── */
.crowd-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .crowd-grid { grid-template-columns: 1fr; } }
.crowd-card {
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-m);
  padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .65rem;
}
.crowd-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.crowd-dir { font-family: var(--f-sign); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; color: var(--t-hi); }
.crowd-tag { font-family: var(--f-data); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: .2rem .5rem; border-radius: 999px; }
.crowd-tag[data-l="low"]      { color: #0d7a47; background: #1FBF7522; }
.crowd-tag[data-l="moderate"] { color: #8a5a06; background: #F5A62322; }
.crowd-tag[data-l="high"]     { color: var(--rts-deep); background: #E1132E1a; }
.crowd-meter { height: 9px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.crowd-fill { height: 100%; border-radius: 999px; transition: width .8s var(--ease-io); }
.crowd-fill[data-l="low"]      { background: var(--signal); }
.crowd-fill[data-l="moderate"] { background: var(--amber); }
.crowd-fill[data-l="high"]     { background: var(--rts); }
.crowd-advice { font-size: var(--fs-sm); color: var(--t-mid); }
.crowd-foot { font-family: var(--f-data); font-size: var(--fs-xs); color: var(--t-low); }

/* ── Visit: events & retail cards ────────────────────────────── */
.ev-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ev-grid { grid-template-columns: 1fr; } }
.ev-card {
  position: relative; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-m);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ev-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px #0b0e1455; }
.ev-tag { position: absolute; top: .8rem; left: .8rem; z-index: 2; font-family: var(--f-data); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ink); padding: .26rem .55rem; border-radius: var(--r-s); }
.ev-tag[data-k="promo"] { background: var(--rts); }
.ev-tag[data-k="event"] { background: var(--jb); }
.ev-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--ink-3), var(--ink)); }
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-body { padding: 1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.ev-when { font-family: var(--f-data); font-size: var(--fs-xs); font-weight: 600; color: var(--rts-deep); letter-spacing: .04em; }
.ev-title { font-family: var(--f-sign); font-weight: 700; font-size: 1.12rem; line-height: 1.15; color: var(--t-hi); }
.ev-desc { font-size: var(--fs-sm); color: var(--t-mid); }
.ev-where { margin-top: auto; padding-top: .55rem; font-size: var(--fs-xs); color: var(--t-low); display: flex; align-items: center; gap: .35rem; }

/* ── Getting here ────────────────────────────────────────────── */
.gethere { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .gethere { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .gethere { grid-template-columns: 1fr; } }
.gethere .mode { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 1.1rem; }
.gethere .mode svg { width: 26px; height: 26px; stroke: var(--rts); stroke-width: 1.8; fill: none; }
.gethere .mode h4 { font-family: var(--f-sign); font-size: 1rem; margin: .6rem 0 .25rem; color: var(--t-hi); }
.gethere .mode p { font-size: var(--fs-sm); color: var(--t-mid); }

/* ── Feedback ────────────────────────────────────────────────── */
.fb-grid { display: grid; gap: 2rem; grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 820px) { .fb-grid { grid-template-columns: 1fr; } }
.fb-form { display: flex; flex-direction: column; gap: 1rem; }
.fb-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .fb-row { grid-template-columns: 1fr; } }
.fb-field { display: flex; flex-direction: column; gap: .4rem; }
.fb-field label { font-family: var(--f-data); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-low); }
.fb-field input, .fb-field select, .fb-field textarea {
  font-family: var(--f-ui); font-size: var(--fs-sm); color: var(--t-hi);
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-s); padding: .7rem .8rem; width: 100%;
}
.fb-field textarea { min-height: 120px; resize: vertical; }
.fb-field input:focus, .fb-field select:focus, .fb-field textarea:focus { outline: 2px solid var(--rts); outline-offset: 1px; border-color: transparent; }
.fb-ok { display: none; align-items: center; gap: .6rem; font-weight: 600; color: #0d7a47; background: #1FBF7518;
  border: 1px solid #1FBF7544; border-radius: var(--r-m); padding: 1rem 1.1rem; font-size: var(--fs-sm); }
.fb-ok.show { display: flex; }
.fb-aside { display: flex; flex-direction: column; gap: 1rem; }
.fb-chan { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-m); padding: 1.1rem 1.2rem; }
.fb-chan .lab { font-family: var(--f-data); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-low); }
.fb-chan .val { font-family: var(--f-sign); font-weight: 700; font-size: 1.15rem; color: var(--t-hi); margin-top: .25rem; }
.fb-chan a { color: var(--rts-deep); text-decoration: none; }
.fb-chan a:hover { text-decoration: underline; }
.placeholder-flag { font-family: var(--f-data); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8a5a06; background: #F5A62322; border: 1px dashed #F5A62366; border-radius: var(--r-s); padding: .15rem .45rem; vertical-align: middle; }