/* ==========================================================================
   f-find-us.css — CAT-13 only. Tokens only: no colours, no radii, no fonts
   declared here. Attached at runtime by js/features/find-us/lib.js because
   index.html is shared and this category may not edit it.
   ========================================================================== */

.fu { padding-bottom: var(--s-8); }

.fu-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.fu-head h1 { font-size: var(--t-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); }
.fu-head p { margin-top: var(--s-3); color: var(--ink-muted); font-size: var(--t-small); }

.fu-block { padding: var(--s-5) 0 var(--s-2); }
.fu-block > .t-label { display: block; padding: 0 var(--gutter) var(--s-3); }

.fu-frame {
  border: 1px solid var(--hairline);
  padding: var(--s-4);
  margin: 0 var(--gutter) var(--s-4);
}

.fu-rule { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-4) 0; }

.fu-kv {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.fu-kv:last-child { border-bottom: 0; }
.fu-kv > .t-label { flex-shrink: 0; }
.fu-kv > .t-small { text-align: right; }

/* ---- the emergency banner ------------------------------------------------- */

.fu-emergency {
  border-top: 3px solid var(--ink-alarm);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-4) var(--gutter);
  background: var(--wash);
}
.fu-emergency > .t-label { display: block; color: var(--ink-alarm); margin-bottom: var(--s-2); }
.fu-emergency p { color: var(--ink); margin-bottom: var(--s-1); }

/* ---- the status chip ------------------------------------------------------ */

.fu-chip-wrap { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }

.fu-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
.fu-chip::before {
  content: '';
  width: 7px; height: 7px;
  flex-shrink: 0;
  background: var(--ink-muted);
}
.fu-chip[data-tone="open"] { border-color: var(--ink); }
.fu-chip[data-tone="open"]::before { background: var(--accent); }
.fu-chip[data-tone="soon"] { border-color: var(--ink); }
.fu-chip[data-tone="soon"]::before { background: var(--ink); }
.fu-chip[data-tone="shut"] { color: var(--ink-muted); }
.fu-chip[data-tone="shut"]::before { background: transparent; border: 1px solid var(--ink-muted); }
.fu-chip[data-tone="unknown"] { color: var(--ink-alarm); border-color: var(--ink-alarm); }
.fu-chip[data-tone="unknown"]::before { background: var(--ink-alarm); }

/* ---- lists of places ------------------------------------------------------ */

.fu-place { padding: var(--s-4) var(--gutter); border-bottom: 1px solid var(--hairline); display: block; }
.fu-place:first-of-type { border-top: 1px solid var(--hairline); }
.fu-place-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.fu-place-name { font-size: var(--t-sub); }
.fu-place-dist { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fu-place p { color: var(--ink-muted); font-size: var(--t-small); margin-top: var(--s-2); }
.fu-place .fu-chip-wrap { margin-top: var(--s-2); }

/* ---- two-up and grids ----------------------------------------------------- */

.fu-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.fu-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); padding: 0 var(--gutter); }
.fu-grid3 figure { margin: 0; }
.fu-grid3 figcaption { font-size: var(--t-label); color: var(--ink-muted); margin-top: var(--s-1); }

/* ---- scrolling tables ----------------------------------------------------- */

.fu-scroll { overflow-x: auto; padding: 0 var(--gutter) var(--s-3); }
.fu-table { border-collapse: collapse; min-width: 100%; font-size: var(--t-small); }
.fu-table th, .fu-table td {
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-2) var(--s-3);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fu-table th:first-child, .fu-table td:first-child { text-align: left; white-space: normal; min-width: 11ch; }
.fu-table thead th { font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--ink-muted); }
.fu-table tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.fu-table td[data-stale="true"], .fu-table th[data-stale="true"] { color: var(--ink-muted); }
.fu-table .fu-best { font-weight: var(--w-bold); }

/* ---- hours grid ------------------------------------------------------------ */

.fu-hours { border-top: 1px solid var(--hairline); margin: 0 var(--gutter); }
.fu-day {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.fu-day-name { font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--ink-muted); }
.fu-day-blocks { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
.fu-service {
  display: block;
  width: 100%;
  text-align: left;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  min-height: var(--tap);
  background-image: none;
  padding: var(--s-2) 0;
}
.fu-struck { text-decoration: line-through; color: var(--ink-muted); }
.fu-service-detail { padding-left: var(--s-4); border-left: 2px solid var(--hairline); margin: var(--s-2) 0; }

/* ---- checkboxes and facets -------------------------------------------------- */

.fu-check { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; min-height: var(--tap); }
.fu-check input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ink); }
.fu-check label { display: flex; flex-direction: column; gap: 2px; }

.fu-facets { display: flex; flex-direction: column; }
.fu-facet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  background-image: none;
}
.fu-facet[aria-pressed="true"] .fu-facet-mark { background: var(--ink); }
.fu-facet-mark { width: 14px; height: 14px; border: 1px solid var(--ink); flex-shrink: 0; }
.fu-facet-count { font-size: var(--t-label); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---- surfaces and code ------------------------------------------------------ */

.fu-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--hairline);
  padding: var(--s-3);
  overflow-x: auto;
  background: var(--wash);
}

.fu-details { margin: 0 var(--gutter) var(--s-4); border: 1px solid var(--hairline); }
.fu-details > summary { padding: var(--s-3); min-height: var(--tap); display: flex; align-items: center; cursor: pointer; }
.fu-details > .fu-pre { border: 0; border-top: 1px solid var(--hairline); }

/* ---- the map --------------------------------------------------------------- */

.fu-map { margin: 0 var(--gutter) var(--s-4); border: 1px solid var(--hairline); }
.fu-map svg { display: block; width: 100%; height: auto; }

/* ---- the place card facsimiles ---------------------------------------------- */

.fu-card { border: 1px solid var(--ink); margin: 0 var(--gutter) var(--s-4); }
.fu-card-head { padding: var(--s-4); border-bottom: 1px solid var(--hairline); }
.fu-card-body { padding: var(--s-4); }
.fu-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--hairline); }
.fu-drift { border-left: 3px solid var(--ink-alarm); padding-left: var(--s-3); margin: var(--s-3) 0; }
.fu-photostrip { display: flex; gap: var(--s-2); overflow-x: auto; padding: var(--s-3) var(--s-4); }
.fu-photostrip .plate { min-width: 108px; margin: 0; }

/* ---- the bio page ------------------------------------------------------------ */

.fu-bio { max-width: 34rem; margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-8); }
.fu-bio-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink);
  margin-bottom: var(--s-3);
  text-align: left;
  background-image: none;
}
.fu-bio-count { font-size: var(--t-label); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---- the QR and the print sheet ---------------------------------------------- */

.fu-qr { width: 40mm; height: 40mm; display: block; margin: var(--s-4) 0; }
.fu-qr svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

@media print {
  .fu-noprint, .fu-cross, .fu-details, .fu-emergency { display: none !important; }
  .fu-partner-sheet { display: block; column-count: 1; max-width: 100%; }
  .fu-partner-sheet .fu-frame { border: 0; padding: 0; margin: 0 0 8mm; break-inside: avoid; }
  .fu-qr { width: 40mm; height: 40mm; }
  .fu-partner-sheet h1 { font-size: 18pt; }
  .fu-partner-sheet p, .fu-partner-sheet .t-small { font-size: 10pt; }
}

/* ---- misc ------------------------------------------------------------------- */

.fu-inline-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--gutter) var(--s-4); }
.fu-cross { padding: var(--s-6) 0 var(--s-4); }
.fu-cross > .t-label { display: block; padding: 0 var(--gutter) var(--s-2); }
.fu-stack { display: flex; flex-direction: column; gap: var(--s-3); padding: 0 var(--gutter); }
.fu-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--gutter) var(--s-4); }
.fu-badge { border: 1px solid var(--ink); padding: var(--s-2) var(--s-3); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label); }
.fu-quote { border-left: 2px solid var(--accent); padding-left: var(--s-4); margin: var(--s-3) 0; }
.fu-quote cite { display: block; font-style: normal; font-size: var(--t-label); color: var(--ink-muted); margin-top: var(--s-2); }
.fu-num { font-variant-numeric: tabular-nums; }
.fu-updated { font-size: var(--t-label); color: var(--ink-muted); }
.fu-flash { animation: fu-flash var(--d-state) var(--ease-out); }
@keyframes fu-flash { from { background: var(--wash); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .fu-flash { animation: none; } }

/* The bio page is a stripped surface: no tab bar, no action bar, no top bar.
   Those live outside the outlet and belong to the shell, so they are hidden
   from here by presence of .fu-bio rather than by editing the shell. */
.app:has(.fu-bio) #tabbar,
.app:has(.fu-bio) #actionbar,
.app:has(.fu-bio) #topbar { display: none; }
.app:has(.fu-bio) .outlet { padding-bottom: 0; }

/* ---- the social wall (FR-210) ------------------------------------------------ */

.fu-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  width: 100%;
  min-height: var(--tap);
  padding: 0 0 var(--s-2);
  border: 0;
  text-align: left;
  background-image: none;
}
.fu-tile .plate { margin: 0 0 var(--s-1); }
.fu-tile .t-label { display: block; line-height: 1.3; }

.fu-post {
  border: 1px solid var(--ink);
  padding: var(--s-4);
  margin: var(--s-4) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fu-post .plate { margin: 0; }
.fu-post .row-item { margin: 0 calc(var(--s-4) * -1); }

/* ---- the fact block (FR-212) ------------------------------------------------- */

.fu-facts { border-top: 1px solid var(--hairline); margin: var(--s-4) var(--gutter) 0; }
.fu-fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}

/* ---- the listing audit (FR-213) ---------------------------------------------- */

.fu-listing {
  padding: var(--s-4) var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.fu-listing:first-child { border-top: 1px solid var(--hairline); }
.fu-listing[data-state="drift"] .row-label,
.fu-listing[data-state="stale-drift"] .row-label { color: var(--ink-alarm); }
.fu-listing[data-state="stale"] { color: var(--ink-muted); }
.fu-listing .fu-drift { margin-top: var(--s-3); }
.fu-listing .fu-inline-actions { padding: var(--s-3) 0 0; }

/* ---- the wallet pass (FR-215) ------------------------------------------------ */

.fu-pass {
  border: 1px solid var(--ink);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 9rem;
}
.fu-pass .fu-kv { padding: var(--s-2) 0; }

/* ---- the structured-data screen (FR-211) ------------------------------------- */

.fu-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-label);
  color: var(--ink-muted);
  margin-left: var(--s-3);
  word-break: break-all;
}
.fu-details > summary { gap: var(--s-2); flex-wrap: wrap; }

/* Grid children hold long handles and long dish names; without this they set
   a min-content width and push the page sideways on a 375 px screen. */
.fu-grid3 > * { min-width: 0; }
.fu-tile { min-width: 0; }
.fu-tile .t-label { overflow-wrap: anywhere; }
.fu-kv > .t-label { overflow-wrap: anywhere; }

/* The shared chip is 36 px, which is under the 48 px floor once it is a real
   control rather than a label. Raised for the tab strips in this category
   only, and only where the chip is a button. */
.fu .strip button.chip { min-height: var(--tap); }