/* Japan House Pool — mobile-first browse tool.
   Palette lifted from TrueCost's theme.css so the banksiasprings sites read as
   one family: dark premium base, blue primary, amber accent. Dark also happens
   to be the right call here — the page is mostly photographs. */

:root {
  --bg:            #0B1220;
  --bg-alt:        #0D1526;
  --surface:       #141E2E;
  --surface-2:     #1A2640;
  --surface-3:     #1F2D4A;

  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);

  --text:          #F0F4FF;
  --text-2:        rgba(240,244,255,0.70);
  --text-muted:    rgba(240,244,255,0.45);
  --text-inverse:  #0B1220;

  --primary:       #3B82F6;
  --primary-dark:  #2563EB;
  --primary-light: rgba(59,130,246,0.15);
  --accent:        #F59E0B;
  --accent-light:  rgba(245,158,11,0.12);
  --success:       #10B981;
  --error:         #EF4444;

  --radius:        14px;
  --radius-sm:     9px;
  --shadow:        0 6px 24px rgba(0,0,0,0.45);

  --topbar-h:      auto;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo,
          Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* [hidden] is a UA rule at the lowest specificity, so any class that sets
   `display` (.modal → flex, .grid → grid) silently beats it and the element
   stays visible. Everything here toggles visibility via the hidden attribute,
   so make it win outright. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body.no-scroll { overflow: hidden; }

button, input, select { font-family: inherit; font-size: 100%; }

/* ─────────────────────────── Top bar ─────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, #0B1220 0%, #0D1B36 100%);
  border-bottom: 1px solid var(--border);
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.topbar-row { display: flex; align-items: center; gap: 8px; }

.brand {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-btn {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  max-width: 52vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-btn:hover { border-color: var(--border-strong); }
.auth-btn.is-synced { color: var(--success); border-color: rgba(16,185,129,0.35); }
.auth-btn.is-error  { color: var(--error);   border-color: rgba(239,68,68,0.35); }

.controls { gap: 8px; }

.search-wrap { flex: 1; min-width: 0; }

.search, .sort, .filters-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.9rem;
}
.search { width: 100%; }
.search::placeholder { color: var(--text-muted); }
.search:focus, .sort:focus, .filters-btn:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.sort {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23F0F4FF' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  max-width: 42vw;
}

.filters-btn {
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filters-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }

.pill-count {
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Budget tier segmented control — always visible, never inside the drawer. */
.tier-row { gap: 6px; }
.tier {
  flex: 1;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
  white-space: nowrap;
}
.tier:hover { border-color: var(--border-strong); }
.tier .n {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tier.on {
  background: var(--primary-light);
  border-color: var(--primary);
  color: #DBEAFE;
}
.tier.on .n { color: #93C5FD; }

/* Favourites quick filter. Deliberately amber rather than the tier control's
   blue: amber is the favourite language everywhere else (.fav-btn.on), and the
   colour split stops two adjacent pill rows reading as one segmented control. */
.fav-row { gap: 10px; }
.fav-pill {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fav-pill:hover { border-color: var(--border-strong); }
.fav-pill .star { font-size: 0.95rem; line-height: 1; }
.fav-pill .n {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 1px 7px;
}
.fav-pill.on {
  background: var(--accent-light);
  border-color: var(--accent);
  color: #FDE68A;
}
.fav-pill.on .n { color: #0B1220; background: var(--accent); }

.fav-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-row { gap: 12px; font-size: 0.8rem; color: var(--text-2); }
.result-count { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-count strong { color: var(--text); }

.fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.fav-toggle input { accent-color: var(--accent); width: 15px; height: 15px; }

.link-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
}

/* ─────────────────────────── Drawer ─────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.66);
  z-index: 45;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 380px);
  background: var(--bg-alt);
  border-left: 1px solid var(--border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform 0.22s ease;
  box-shadow: var(--shadow);
}
.drawer.open { transform: translateX(0); }

.drawer-head, .drawer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  padding-top: calc(env(safe-area-inset-top) + 14px);
}
.drawer-head strong { flex: 1; font-size: 1rem; }

.drawer-foot {
  border-bottom: none;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
  background: var(--bg-alt);
}
.drawer-foot button { flex: 1; }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 16px;
  -webkit-overflow-scrolling: touch;
}

.icon-btn {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.fset { padding: 16px 0; border-bottom: 1px solid var(--border); }
.fset:last-child { border-bottom: none; }
.fset h3 {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.clear-mini {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.7rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  text-decoration: underline;
}

.range-readout {
  font-size: 0.85rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  font-weight: 600;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.slider-row span { width: 28px; flex: none; }
.slider-row input[type="range"] { flex: 1; min-width: 0; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
input[type="range"]::-moz-range-track {
  height: 4px; background: var(--surface-3); border-radius: 999px;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff;
}

.year-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-2);
}
.year-row input {
  flex: 1;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}
.year-row input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.mini-search {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.82rem;
  margin-bottom: 10px;
}
.mini-search:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips-scroll { max-height: 232px; overflow-y: auto; padding-right: 2px; }

.chip {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  text-align: left;
}
.chip:hover { border-color: var(--border-strong); }
.chip .n {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.chip.on {
  background: var(--primary-light);
  border-color: var(--primary);
  color: #DBEAFE;
  font-weight: 600;
}
.chip.on .n { color: #93C5FD; }
.chip.zero { opacity: 0.4; }

.btn-primary, .btn-ghost {
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }

/* ─────────────────────────── Grid ─────────────────────────── */

main { padding: 12px; }

.status, .empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.empty p { margin: 0 0 14px; }
.status.err { color: var(--error); }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1400px;
  margin: 0 auto;
}

.card {
  /* The favourite button is a sibling of .card-photo (it must not live inside
     the anchor, or tapping it would follow the link), so the card itself has to
     be the containing block or every heart pins to the viewport instead. */
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 190px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--border-strong); }

.card.is-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Photo is its own hit target — tapping it leaves for the source listing. */
.card-photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  overflow: hidden;
  text-decoration: none;
}
.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.card-photo .noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  gap: 6px;
}

.src-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(11,18,32,0.82);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.feat-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(245,158,11,0.92);
  color: #1A1206;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 700;
  pointer-events: none;
}

.fav-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(11,18,32,0.72);
  color: rgba(255,255,255,0.7);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn.on { color: var(--accent); border-color: var(--accent); }

/* Body opens the in-place detail modal. */
.card-body {
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  width: 100%;
}
.card-body:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }

.card-title {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.34;
  letter-spacing: -0.005em;
}

.card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.aud {
  font-size: 1.18rem;
  font-weight: 750;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.jpy { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.card-place { font-size: 0.8rem; color: var(--text-2); }
.card-place .kanji { color: var(--text-muted); }

.card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 2px;
}
.spec {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 0.73rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spec b { color: var(--text); font-weight: 650; }
.spec.farm { background: var(--accent-light); border-color: rgba(245,158,11,0.35); color: #FDE68A; }

/* ─────────────────────────── Modal ─────────────────────────── */

/* align-items:center/flex-end on a scrolling flex container clips the overflow
   that spills past the START edge and makes it unreachable — these cards run
   well over 1200px tall. Pin the alignment to flex-start and let `margin:auto`
   on the card do the centring: it yields to the scroll when space runs out. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* No backdrop-filter here deliberately: blurring a full-screen scrolling
     sheet is the single most expensive thing this page could do on a phone,
     which is where it actually gets used. A flat scrim reads the same. */
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 0 0;
}

.modal-card {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 720px;
  box-shadow: var(--shadow);
  margin-top: auto;    /* bottom-sheet when short, top-anchored when tall */
  animation: sheet-up 0.2s ease;
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }

.modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(11,18,32,0.85);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  backdrop-filter: blur(4px);
}

.m-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 17px 17px 0 0;
  background: var(--surface-2);
}

.m-inner { padding: 16px 16px calc(env(safe-area-inset-bottom) + 20px); }

.m-theme {
  display: inline-block;
  background: var(--primary-light);
  border: 1px solid rgba(59,130,246,0.4);
  color: #BFDBFE;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 650;
  margin-bottom: 10px;
}

.m-title {
  margin: 0 0 10px;
  font-size: 1.14rem;
  line-height: 1.35;
  font-weight: 700;
  padding-right: 34px;
}

.m-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.m-price .aud { font-size: 1.5rem; }

.m-summary {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-2);
  margin: 0 0 16px;
}

.m-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.fact { background: var(--surface); padding: 10px 12px; }
.fact.wide { grid-column: 1 / -1; }
.fact dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 3px;
  font-weight: 700;
}
.fact dd {
  margin: 0;
  font-size: 0.87rem;
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
}

.m-actions { display: flex; flex-direction: column; gap: 9px; }

.btn-open {
  display: block;
  background: var(--primary);
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
}
.btn-open:hover { background: var(--primary-dark); }

.btn-fav-lg {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-weight: 650;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn-fav-lg.on { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }

.btn-copy {
  padding: 11px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
}
.btn-copy:hover { color: var(--text); border-color: var(--border-strong); }

/* Sign-in sheet */
.auth-card { max-width: 420px; }
.auth-card .m-inner { padding-top: 20px; }
.auth-field { margin-bottom: 12px; }
.auth-field label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 5px;
  font-weight: 700;
}
.auth-field input {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-size: 0.95rem;
}
.auth-field input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.auth-note { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 14px; }
.auth-err { color: var(--error); font-size: 0.82rem; margin: 0 0 12px; line-height: 1.5; }

/* ─────────────────────────── Footer ─────────────────────────── */

.footer {
  padding: 28px 16px calc(env(safe-area-inset-bottom) + 32px);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.76rem;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
.footer p { margin: 0 0 5px; }
.foot-sub { opacity: 0.7; }

/* Toast for copy-link feedback */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  transform: translateX(-50%);
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.83rem;
  z-index: 90;
  box-shadow: var(--shadow);
  animation: sheet-up 0.18s ease;
}

/* ─────────────────────── Responsive ─────────────────────── */

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  main { padding: 16px; }
  .modal { padding: 20px; }
  .modal-card { border-radius: 18px; margin: auto; }
  .m-photo { border-radius: 17px 17px 0 0; }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .brand { font-size: 1.15rem; }
  .sort { max-width: none; }
}

/* Dock the drawer as a sidebar on wide screens — no scrim, always visible. */
@media (min-width: 1180px) {
  .drawer {
    transform: none;
    top: 0;
    left: 0;
    right: auto;
    width: 300px;
    border-left: none;
    border-right: 1px solid var(--border);
    box-shadow: none;
    padding-top: 0;
  }
  .drawer-head { display: none; }
  .drawer-body { padding-top: 14px; }
  body.docked { padding-left: 300px; }
  body.docked .topbar { padding-left: 316px; }
  body.docked .footer { padding-left: 316px; }
  .scrim { display: none !important; }
  .filters-btn { display: none; }
  .drawer-foot { display: none; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1500px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}