:root {
  --paper: #F6F1E9; --paper-raised: #FFFFFF; --paper-sunken: #EFE6D6;
  --line: #E3D9CA; --line-strong: #DDD3C4;
  --ink: #211C17; --ink2: #5C5349; --ink3: #8A7E70;
  --brick: #A8472B; --positive: #1F7A44; --verified: #5AA86E; --coffee: #5C4A36;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* Keep focus/anchor scrolling clear of the sticky topbar and bottom save bar, so a
   tapped field (e.g. a low opening-hours time input) never lands behind either bar. */
html { scroll-padding-top: 84px; scroll-padding-bottom: 96px; }
a { color: var(--brick); text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
.page-title { font-size: 28px; }   /* the per-view page heading — one size everywhere */
.eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brick); font-weight: 700; }
.muted { color: var(--ink3); }

/* top bar */
/* The frosted background lives on a ::before, NOT on .topbar itself: `backdrop-filter`
   on .topbar would make it the containing block for the position:fixed mobile drawer
   (Safari/Firefox), clipping the drawer to the topbar's height. */
.topbar { display: flex; align-items: center; gap: 16px; padding: 16px 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.topbar::before { content: ""; position: absolute; inset: 0; background: rgba(246,241,233,0.85); backdrop-filter: blur(12px); z-index: -1; pointer-events: none; }
body.nav-locked { overflow: hidden; }   /* while the mobile nav drawer is open (independent of the modal lock) */
.brand { font-family: var(--sans); font-weight: 800; letter-spacing: 0.22em; font-size: 15px; }
.brand small { display: block; font-weight: 500; letter-spacing: 0.16em; font-size: 9px; color: var(--ink3); margin-top: 2px; }
.brand-group { flex: none; }
/* Desktop: the menu is an inline row (nav grows, account pinned right). On mobile it
   becomes a slide-in drawer (see the media query). */
.topbar-menu { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 0; }
.topbar-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; }
.topbar .right { display: flex; align-items: center; gap: 10px; font-size: 13px; flex: none; margin-left: auto; }
.nav-toggle, .nav-close, .nav-backdrop { display: none; }   /* mobile-only affordances */
/* nav items: ghost buttons that gain a clear "you are here" treatment when active.
   Inactive items read as ink2 (legible) while the active one is ink + bold + pill. */
.nav-item { padding: 8px 12px; border-radius: 10px; color: var(--ink2); }
.nav-item:hover { color: var(--ink); background: var(--paper-sunken); }
.nav-active, .nav-active:hover { background: var(--paper-raised); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-strong); }

.wrap { max-width: 920px; margin: 0 auto; padding: 28px; }
.row { display: flex; gap: 16px; }
.between { display: flex; align-items: center; justify-content: space-between; }
.grow { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 6px; }

/* buttons */
button, .btn { min-height: 42px; font-family: var(--sans); font-weight: 600; font-size: 14px; border-radius: 12px; padding: 10px 16px; border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink); cursor: pointer; transition: transform .12s, background .12s; }
button:active { transform: scale(0.97); }
/* Keyboard focus ring — keyboard users (and the modal focus-trap) need a visible
   indicator; mouse clicks don't trigger :focus-visible, so it stays unobtrusive. */
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.btn-primary { background: var(--ink); color: var(--paper); border: none; }
.btn-brick { background: var(--brick); color: var(--paper); border: none; }
.btn-ghost { background: transparent; border: none; color: var(--ink3); }
.btn-danger { color: var(--brick); border-color: var(--line-strong); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* import bulk-action bar — sticks below the topbar so it stays reachable in a long list */
.bulkbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 74px; z-index: 40; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(246,241,233,0.92); backdrop-filter: blur(12px); }
.bulkbar[hidden] { display: none; }  /* author display:flex would otherwise beat the UA [hidden] rule */
.bulkbar button { min-height: 38px; padding: 8px 14px; font-size: 13px; }
.bulk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.bulk-check input, .cand-select { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.cand-card.selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

/* editor save bar — sticks to the bottom of the viewport so the save action stays
   reachable from anywhere in the long café form (its fields run well past the fold). */
.editor-actionbar { position: sticky; bottom: 16px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(246,241,233,0.92); backdrop-filter: blur(12px); box-shadow: 0 10px 34px rgba(40,30,20,.14); }
.editor-actionbar-hint { font-size: 13px; flex: 1; min-width: 160px; }

/* cards */
.card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.cafe-card { display: flex; gap: 16px; align-items: center; }

/* loading skeletons — shimmering placeholders shown while a list fetches */
.skeleton-card { display: flex; gap: 16px; align-items: center; }
.skel { background: linear-gradient(90deg, var(--paper-sunken) 25%, var(--line) 37%, var(--paper-sunken) 63%); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; border-radius: 8px; }
.skel-thumb { width: 52px; height: 52px; border-radius: 999px; flex: none; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.skel-line { height: 13px; }
.skel-line.lg { width: 55%; height: 17px; }
.skel-line.sm { width: 32%; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.thumb { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--paper-sunken); flex: none; }
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.b-published, .b-accepted { background: #e4f0e8; color: var(--positive); }
.b-draft, .b-snoozed { background: var(--paper-sunken); color: var(--ink2); }
.b-in_review { background: #f3e6d8; color: var(--coffee); }
.b-unpublished, .b-archived, .b-danger, .b-rejected { background: #f2e2dd; color: var(--brick); }
.b-healthy { background: #e4f0e8; color: var(--positive); }
.b-pending { background: #f3e6d8; color: var(--coffee); }
.b-unhealthy { background: #f2e2dd; color: var(--brick); }
.b-active, .b-password { background: #e4f0e8; color: var(--positive); }
.b-admin { background: #e6edf2; color: #315e72; }
.b-curator, .b-user { background: var(--paper-sunken); color: var(--coffee); }
.b-suspended, .b-invited, .b-reset { background: #f2e2dd; color: var(--brick); }
.seal { width: 52px; height: 52px; border-radius: 999px; border: 1.5px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif); flex: none; }
.seal b { font-size: 16px; font-weight: 500; line-height: 1; }
.seal span { font-size: 8px; color: var(--ink3); }

/* forms */
label { font-size: 12px; font-weight: 600; color: var(--ink2); }
input, textarea, select { min-height: 42px; width: 100%; font-family: var(--sans); font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised); color: var(--ink); }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(168,71,43,.3); border-color: var(--brick); }
textarea { min-height: 64px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.hint { font-size: 11px; color: var(--ink3); text-align: right; }
.section-title { font-size: 18px; margin: 26px 0 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper-raised); cursor: pointer; user-select: none; }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag-groups { display: grid; gap: 14px; }
.tag-group { margin: 0; padding: 0; border: 0; }
.tag-group-title { margin-bottom: 8px; padding: 0; font-size: 12px; font-weight: 700; color: var(--ink2); }
.tag-group-description { margin: -3px 0 9px; color: var(--ink3); font-size: 12px; line-height: 1.4; }
.tag-options { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; }
.tag-option { width: min(220px, 100%); display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tag-description { color: var(--ink3); font-size: 11px; line-height: 1.35; }
.tag-static { cursor: default; }
.tag-load-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.coi-note { margin: 14px 0 0; color: var(--ink2); font-size: 13px; line-height: 1.5; }
#map { height: 240px; border-radius: 12px; border: 1px solid var(--line-strong); }

/* structured curator controls */
.payment-control, .token-editor, .photo-manager { display: flex; flex-direction: column; gap: 12px; }
.inline-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.token-list { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-sunken); }
.note-token { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 8px 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper-raised); font-size: 13px; }
.note-token button { min-height: 24px; width: 24px; padding: 0; border-radius: 999px; font-size: 12px; line-height: 1; }
.meta { margin: 0; color: var(--ink3); font-size: 13px; }
.notice { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-sunken); color: var(--ink2); font-size: 13px; }
.hours-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hours-grid, .photo-list { display: flex; flex-direction: column; gap: 10px; }
.hours-row { display: grid; grid-template-columns: 72px 108px minmax(120px, 1fr) minmax(120px, 1fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-sunken); }
.hours-day { font-weight: 700; color: var(--ink); }
.toggle-line { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.toggle-line input { min-height: auto; width: auto; margin: 0; }
.hours-time { display: flex; flex-direction: column; gap: 5px; font-size: 11px; }
.hours-time input { background: var(--paper-raised); }
/* A Closed day disables its Open/Close times — dim them so the row reads as
   inactive rather than as empty editable fields. Scoped to the hours editor so
   read-only (non-editing) café forms aren't dimmed wholesale. */
.hours-time input:disabled { opacity: .5; cursor: not-allowed; }
.photo-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-sunken); }
.photo-row .field { margin-bottom: 0; }
.photo-preview { width: 120px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised); }
.photo-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.row-actions button { min-height: 38px; padding: 8px 10px; font-size: 12px; }

/* login */
.login { max-width: 380px; margin: 80px auto; text-align: center; }
.login .card { text-align: left; }
.login h1 { font-size: 30px; margin-bottom: 4px; }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px; font-size: 13px; z-index: 100; box-shadow: 0 8px 30px rgba(40,30,20,.3); }
.toast.err { background: var(--brick); }

/* modal dialogs — styled, focus-trapped replacements for native confirm()/prompt() */
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(40,30,20,.38); backdrop-filter: blur(3px); }
.modal { width: 100%; max-width: 440px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px rgba(40,30,20,.3); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-title { font-size: 20px; margin-bottom: 10px; }
.modal-message { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.modal-form { margin-top: 4px; }
.modal-form .field:last-child { margin-bottom: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.spoon { color: var(--ink); }
.divider { height: 1px; background: var(--line); margin: 22px 0; }
/* search results + curator rows */
.search-result { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.search-result:last-child { border-bottom: none; }

/* profile */
.avatar { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; background: var(--paper-sunken); flex: none; }
.avatar-fallback { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px; color: var(--ink); background: var(--paper-sunken); }
.profile-preview { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: var(--paper-sunken); border-radius: 16px; }

/* café photo manager */
.photo-grid { display: flex; flex-direction: column; }
.photo-item { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--line); padding: 14px 0; }
.photo-item:first-child { border-top: none; padding-top: 0; }
.photo-thumb-wrap { position: relative; flex: none; }
.photo-thumb { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: var(--paper-sunken); display: block; }
.photo-cover { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 3px 7px; border-radius: 999px; }
.photo-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.photo-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.photo-actions button { padding: 7px 12px; font-size: 13px; }
.photo-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-strip img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: var(--paper-sunken); }
.file-label { display: inline-block; cursor: pointer; }

/* AI-suggested photos: tap-to-keep tiles (selected by default). */
.sugg-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.sugg-photo { position: relative; padding: 0; min-height: 0; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper-sunken); cursor: pointer; opacity: .5; transition: opacity .12s, box-shadow .12s; }
.sugg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sugg-photo.on { opacity: 1; box-shadow: 0 0 0 2px var(--brick); border-color: var(--brick); }
.sugg-photo .sugg-check { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 999px; background: var(--brick); color: var(--paper); font-size: 12px; line-height: 20px; text-align: center; opacity: 0; }
.sugg-photo.on .sugg-check { opacity: 1; }
/* Read-only photo thumbnails (suggestion AI preview — not selectable). */
.sugg-photo.ro { opacity: 1; cursor: default; }
/* Disclosure summary for a suggestion's AI-prefilled detail table. */
.sugg-summary { cursor: pointer; font-size: 12px; color: var(--ink3); font-weight: 600; }
/* Popularity counter pill on a café suggestion — the demand signal admins triage by. */
.demand { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--brick); color: var(--paper); white-space: nowrap; }

/* business-info sources + proposals */
.source-row { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 14px 0; }
.source-row:first-child { border-top: none; padding-top: 0; }
.diff-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.diff-table th { text-align: left; color: var(--ink3); font-weight: 600; }
.diff-table th, .diff-table td { border-top: 1px solid var(--line); padding: 8px; vertical-align: top; }
/* Break long unbroken values (URLs, slugs) in the data columns so a row can't force
   the table wider than its card — otherwise the Action column spilled outside the card
   border. The first (field label) and last (actions) columns stay intact so names like
   "Instagram" and the action buttons aren't chopped mid-word. */
.diff-table td:not(:first-child):not(:last-child) { overflow-wrap: anywhere; }
.diff-table td:nth-child(4) { color: var(--ink3); max-width: 280px; }
/* Per-field accept checkbox cell in proposals. */
.pf-cell { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pf-cell input { width: auto; min-height: 0; margin: 0; }
.pf-cell input:disabled { cursor: default; }

/* data-verification triage block on proposal cards */
.proposal-verification { margin-top: 14px; padding: 12px 14px; background: var(--paper-sunken); border-radius: 12px; }
.verif-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.verif-verdict { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.verif-verdict--ok { background: #e4f0e8; color: var(--positive); }
.verif-verdict--bad { background: #f2e2dd; color: var(--brick); }
.verif-corrob { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--paper-raised); color: var(--ink2); }
.verif-flags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.verif-flag { font-size: 12px; line-height: 1.4; padding: 6px 10px; border-radius: 8px; border-left: 3px solid var(--line-strong); }
.verif-flag b { color: var(--ink); }
.verif-flag--warn { background: var(--paper-raised); color: var(--ink2); border-left-color: var(--coffee); }
.verif-flag--error { background: #f2e2dd; color: var(--brick); border-left-color: var(--brick); }
.verif-flag--error b { color: var(--brick); }
.verif-clear { margin: 8px 0 0; color: var(--ink3); font-size: 12px; }

/* account management */
.account-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 140px 150px auto; gap: 12px; align-items: end; }
.account-filters .field { margin-bottom: 0; }
.user-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; border-top: 1px solid var(--line); padding: 14px 0; }
.user-row:first-child { border-top: none; }
.account-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; max-width: 520px; }
.account-actions button { padding: 8px 10px; font-size: 12px; }
.disabled-reason { margin-top: 5px; color: var(--brick); font-size: 12px; }
.load-more-row { justify-content: center; margin-top: 12px; }
.invite-result { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: end; margin-bottom: 16px; padding: 12px; background: var(--paper-sunken); border-radius: 12px; }
.invite-result .field { margin-bottom: 0; }

/* admin "all cafés" corpus table — click-through rows, stacks on mobile */
.cafe-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cafe-table th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.cafe-table td { border-top: 1px solid var(--line); padding: 12px 10px; vertical-align: middle; }
.cafe-table tr:first-child td { border-top: none; }
.cafe-row { cursor: pointer; transition: background .12s; }
.cafe-row:hover { background: var(--paper-sunken); }
.cafe-row:focus-visible { outline: 2px solid var(--brick); outline-offset: -2px; }

/* tag taxonomy admin */
.tag-admin-create { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.tag-admin-create .field { margin-bottom: 0; }
.tag-admin-list { display: grid; gap: 18px; }
.tag-admin-type { padding-top: 16px; border-top: 1px solid var(--line); }
.tag-admin-type:first-child { padding-top: 0; border-top: 0; }
.tag-admin-type-head { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) auto; gap: 12px; align-items: end; }
.tag-admin-type-head .field { margin-bottom: 0; }
.tag-admin-tags { display: grid; gap: 10px; margin-top: 12px; }
.tag-admin-tag { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) auto; gap: 12px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-sunken); }
.tag-admin-tag .field { margin-bottom: 0; }
.tag-admin-new { background: var(--paper-raised); }
.tag-admin-actions { justify-content: flex-end; gap: 8px; }
.tag-admin-actions button { padding: 8px 10px; font-size: 12px; }

@media (max-width: 720px) {
  .topbar { align-items: center; gap: 12px; padding: 14px 16px; }
  /* Hamburger reveals a slide-in drawer; large vertical tap targets, account at the
     bottom. A swipe-strip of every section was fiddly and hid items off-screen. */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none; min-height: 44px; min-width: 44px; padding: 8px; background: transparent; border: none; color: var(--ink); border-radius: 10px; }
  .nav-close { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; min-height: 44px; min-width: 44px; padding: 8px; background: transparent; border: none; color: var(--ink2); border-radius: 10px; }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(40,30,20,.38); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .24s ease; }
  .topbar.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .topbar-menu { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(84vw, 320px); transform: translateX(100%); transition: transform .24s ease; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 16px 24px; background: var(--paper-raised); box-shadow: -12px 0 44px rgba(40,30,20,.24); z-index: 70; overflow-y: auto; }
  .topbar.nav-open .topbar-menu { transform: translateX(0); }
  .topbar-nav { flex-direction: column; align-items: stretch; gap: 4px; flex: none; width: 100%; }
  .nav-item { width: 100%; text-align: left; justify-content: flex-start; min-height: 48px; font-size: 15px; border-radius: 12px; }
  .topbar .right { flex-direction: column; align-items: stretch; gap: 6px; margin-left: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
  .topbar .right .nav-item, .topbar .right #logout { width: 100%; text-align: left; justify-content: flex-start; min-height: 48px; padding: 10px 12px; }
  .topbar-whoami { padding: 2px 12px 6px; }
  .wrap { padding: 18px 14px 28px; }
  .between { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .row { flex-wrap: wrap; gap: 10px; }
  .grid2, .grid3, .account-filters, .user-row, .invite-result, .tag-admin-create, .tag-admin-type-head, .tag-admin-tag { grid-template-columns: 1fr; }
  .card { padding: 16px; border-radius: 12px; }
  button, .btn, input, textarea, select, .chip { min-height: 44px; }
  .cafe-card, .search-result, .source-row, .profile-preview { align-items: flex-start; flex-wrap: wrap; }
  .inline-add, .photo-row { grid-template-columns: 1fr; }
  .hours-row { grid-template-columns: 1fr 1fr; }
  .hours-day, .hours-row .toggle-line { grid-column: 1 / -1; }
  /* The verbose save hint wrapped to a 3-line slab that floated over the day cards.
     On phones the labelled "Save changes" button is self-explanatory, so drop the
     hint and make the bar a compact, full-width-button row. */
  .editor-actionbar { bottom: 12px; padding: 12px; gap: 10px; }
  .editor-actionbar-hint { display: none; }
  .editor-actionbar .row { width: 100%; gap: 10px; }
  .editor-actionbar .row button { flex: 1; }
  .photo-preview { width: 100%; max-width: 260px; }
  .tag-option { width: 100%; }
  .row-actions, .account-actions, .tag-admin-actions, .tag-load-notice { justify-content: flex-start; max-width: none; }
  .tag-load-notice { align-items: flex-start; flex-direction: column; }
  /* Tables → stacked labeled cards on phones. A horizontal-scroll table pushed the
     Evidence + Action columns off-screen and gave rows odd heights; stacking keeps
     every cell (and the per-row actions) reachable. Cells show their column via
     data-label where the value would otherwise be ambiguous. */
  .diff-table, .diff-table tbody, .diff-table tr, .diff-table td { display: block; width: auto; }
  .diff-table { white-space: normal; }
  .diff-table tr:first-child { display: none; }   /* the <th> header row */
  .diff-table tr { padding: 12px 0; border-top: 1px solid var(--line); }
  .diff-table td { border: 0; padding: 2px 0; max-width: none; }
  /* the desktop Evidence width cap (td:nth-child(4)) outranks the bare-td reset above,
     so clear it explicitly — stacked cells should fill the card, not stop short at 280px. */
  .diff-table td:nth-child(4) { max-width: none; }
  .diff-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink3); }
  .diff-table td .row-actions { margin-top: 8px; }
  /* Café corpus table → stacked labeled cards on phones (same approach as diff-table). */
  .cafe-table, .cafe-table tbody, .cafe-table tr, .cafe-table td { display: block; width: auto; }
  .cafe-table tr:first-child { display: none; }   /* the column-header row */
  .cafe-table tr.cafe-row { padding: 12px 4px; border-top: 1px solid var(--line); }
  .cafe-table td { border: 0; padding: 2px 0; }
  .cafe-table td[data-label="Status"], .cafe-table td[data-label="Score"], .cafe-table td[data-label="Curators"], .cafe-table td[data-label="Updated"] { display: inline-block; margin-right: 14px; font-size: 13px; color: var(--ink2); }
  .cafe-table td[data-label]:not([data-label="Café"])::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink3); }
  #map { height: 220px; }
  .toast { left: 16px; width: calc(100% - 32px); transform: none; text-align: center; }
}

@media (max-width: 420px) {
  .brand { letter-spacing: 0.16em; }
  .hours-row { grid-template-columns: 1fr; }
  .hours-day, .hours-row .toggle-line { grid-column: auto; }
}