/* 鬼怪INDEX — phone shell.
   Loaded after the page's own <style>, so everything here is an override.
   Three jobs: keep the archive clear of the notch and the home bar, cut the
   masthead and the filter stack down so specimens are on the first screen,
   and leave the desktop layout exactly as it was above 640px. */

html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; background-attachment: fixed; }
img, video { -webkit-touch-callout: none; }
button, .card, nav button { -webkit-user-select: none; user-select: none; }

/* ---------- safe areas ---------- */
header {
  padding-top: max(20px, calc(env(safe-area-inset-top) + 10px));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
nav, main {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
footer {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}
dialog {
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* ---------- the folded filter row (all widths) ---------- */
.hx-row { display: flex; gap: 8px; width: 100%; }
.hx-row #q { flex: 1 1 auto; min-width: 0; }
.hx-filt {
  flex: 0 0 auto; font-family: var(--serif); font-size: 15px; line-height: 1;
  color: var(--ash); background: var(--pit); border: 1px solid var(--ash-3);
  padding: 0 14px; cursor: pointer; display: flex; align-items: center; gap: 5px;
}
.hx-filt .n {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0; color: var(--blood);
}
.hx-filt.on, .hx-filt.open { color: var(--bone); border-color: var(--blood); }
.hx-drawer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; width: 100%; margin-top: 8px;
}
.hx-drawer[hidden] { display: none; }
.hx-drawer select { max-width: none; width: 100%; }
.hx-clear {
  grid-column: 1 / -1; justify-self: start;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: var(--ash); background: none; border: none; border-bottom: 1px solid var(--ash-3);
  padding: 2px 0; cursor: pointer;
}
.hx-clear:hover { color: var(--blood); border-color: var(--blood); }
.ctl { flex-direction: column; align-items: stretch; }

/* ---------- phone ---------- */
@media (max-width: 640px) {
  /* masthead: the plate, not the essay */
  .plate { padding: 16px 16px 14px; }
  .plate .reg { font-size: 9.5px; letter-spacing: .12em; }
  .plate h1 { font-size: 27px; margin: 6px 0 1px; letter-spacing: .02em; }
  .plate h1 .lat { font-size: .46em; letter-spacing: .16em; }
  .plate .sub { font-size: 12.5px; line-height: 1.5; }
  .plate .sub.hx-clamp {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .seal {
    width: 44px; height: 44px; font-size: 15px; right: 12px; top: 12px;
    border-width: 2px; border-radius: 4px;
  }
  .seal small { font-size: 7px; letter-spacing: .12em; }

  nav { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav button { padding: 8px 11px 6px; font-size: 10.5px; letter-spacing: .08em;
    white-space: nowrap; }

  main { padding-top: 14px; }
  .ctl { gap: 8px; margin-bottom: 4px; }
  .ctl input[type=search], .ctl select { font-size: 16px; padding: 8px 10px; }
  .hx-filt { font-size: 16px; padding: 0 13px; }
  .hx-drawer { grid-template-columns: 1fr 1fr; }
  .tally { font-size: 9.5px; letter-spacing: .05em; margin: 8px 1px 12px; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
  .card { padding: 10px 11px; }
  .card h3 { font-size: 14.5px; line-height: 1.3; margin-top: 4px; }
  .card .nat, .card .geo { font-size: 11.5px; }
  .card .rid { font-size: 9px; letter-spacing: .1em; }
  .card .geo { display: flex; justify-content: space-between; gap: 6px;
    align-items: baseline; }
  .card .dngr { white-space: nowrap; letter-spacing: 0; }
  .card .thumb { margin-bottom: 8px; }

  dialog { width: 100%; max-width: 100%; border-left: none; border-right: none; }
  .dos { padding: 18px 16px 22px; }
  .dos h2 { font-size: 22px; }
  .dos .nat { font-size: 14px; }
  /* the plate is the evidence; centre it at its native size rather
     than leaving it orphaned in the corner of a stacked header */
  .dos .port { width: 192px; max-width: 62%; display: block;
    margin: 12px auto 2px; }
  .dos-head-txt { flex: 1 1 100%; }
  .dos .meta { gap: 10px; font-size: 11px; margin: 8px 0 14px; }
  .field p { font-size: 14px; }
  .screenroom { grid-template-columns: 1fr; }
  footer { margin: 34px auto 20px; font-size: 9.5px; }
}

@media (max-width: 380px) {
  .plate h1 { font-size: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}