/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Night Radar inherited
 * tone: utilitarian · anchor hue: indigo · nav: N9 · footer: Ft2 · cta: C4
 * production integration: existing auth / API / rendering contracts preserved
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */

:root {
  color-scheme: dark;

  --color-paper: oklch(14% 0.025 264);
  --color-paper-2: oklch(18% 0.03 264);
  --color-paper-3: oklch(23% 0.035 264);
  --color-rule: oklch(52% 0.03 264);
  --color-rule-strong: oklch(64% 0.04 264);
  --color-ink: oklch(95% 0.015 264);
  --color-ink-2: oklch(80% 0.025 264);
  --color-muted: oklch(68% 0.025 264);
  --color-accent: oklch(76% 0.16 157);
  --color-accent-ink: oklch(16% 0.03 157);
  --color-focus: oklch(84% 0.18 157);
  --color-focus-on-accent: oklch(22% 0.045 264);
  --color-focus-outer: oklch(93% 0.025 157);
  --color-warning: oklch(80% 0.15 78);
  --color-warning-ink: oklch(18% 0.04 78);
  --color-error: oklch(70% 0.2 25);
  --color-error-ink: oklch(16% 0.04 25);
  --color-success-surface: oklch(21% 0.05 157);
  --color-warning-surface: oklch(21% 0.045 78);
  --color-error-surface: oklch(21% 0.055 25);
  --color-jalan: oklch(72% 0.18 50);
  --color-rakuten: oklch(64% 0.21 25);
  --color-yahoo: oklch(71% 0.17 295);
  --color-site-ink: oklch(14% 0.025 264);
  --color-transparent: oklch(14% 0.025 264 / 0);
  --color-backdrop: oklch(14% 0.025 264 / 0.96);

  --font-display: "Avenir Next", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-filter-clearance: 7.5rem;
  --content-max: 37.5rem;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-price: clamp(2rem, 8vw, 3rem);

  --radius-control: 0.625rem;
  --radius-card: 0.875rem;
  --radius-round: 999px;
  --rule-thin: 1px;
  --focus-halo: 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;

  --z-base: 1;
  --z-sticky: 200;
  --z-sticky-nav: 300;

  /* 旧UIの変数を同じNight Radarトークンへ接続する。 */
  --bg-0: var(--color-paper);
  --bg-1: var(--color-paper);
  --bg-2: var(--color-paper);
  --glass: var(--color-paper-2);
  --glass-strong: var(--color-paper-3);
  --line: var(--color-rule);
  --text-hi: var(--color-ink);
  --text-mid: var(--color-ink-2);
  --text-low: var(--color-muted);
  --alert: var(--color-error);
  --alert-glow: var(--color-transparent);
  --fire: var(--color-warning);
  --save: var(--color-accent);
  --save-dim: var(--color-success-surface);
  --jalan: var(--color-jalan);
  --rakuten: var(--color-rakuten);
  --yahoo: var(--color-yahoo);
  --r-s: var(--radius-control);
  --r-m: var(--radius-card);
  --r-l: var(--radius-card);
  --sp-1: var(--space-2xs);
  --sp-2: var(--space-xs);
  --sp-3: var(--space-sm);
  --sp-4: var(--space-md);
  --sp-5: var(--space-lg);
  --sp-6: var(--space-xl);
  --sh-glow: none;
}

html,
body {
  min-height: 100%;
  overflow-x: clip;
}

html {
  background: var(--color-paper);
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.55;
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button {
  touch-action: manipulation;
}

a {
  outline: 2px solid var(--color-transparent);
  outline-offset: 2px;
}

a:focus-visible,
.reload:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.cta:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
#pin:focus-visible,
details summary:focus-visible {
  outline-color: var(--color-focus);
}

a:active,
.reload:active,
.tab:active,
.chip:active,
.cta:active,
details summary:active {
  transform: translateY(1px);
}

.reload,
.tab,
.chip,
.cta {
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  outline: 2px solid var(--color-transparent);
  outline-offset: 2px;
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.reload:disabled,
.tab:disabled,
.chip:disabled,
.cta:disabled,
.reload[aria-disabled="true"],
.tab[aria-disabled="true"],
.chip[aria-disabled="true"],
.cta[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.reload[aria-busy="true"] svg {
  animation: hallmark-spin 900ms linear infinite;
}

.cta[aria-busy="true"] {
  border-color: var(--color-warning);
  background: var(--color-warning);
  color: var(--color-warning-ink);
}

header.app {
  position: sticky;
  z-index: var(--z-sticky-nav);
  inset-block-start: 0;
  width: min(100%, var(--content-max));
  min-height: 4rem;
  margin-inline: auto;
  padding:
    calc(var(--space-sm) + env(safe-area-inset-top))
    max(var(--space-md), env(safe-area-inset-right))
    var(--space-sm)
    max(var(--space-md), env(safe-area-inset-left));
  align-items: center;
  gap: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-backdrop);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand-mark {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-accent);
}

.fresh {
  display: inline-flex;
  margin-inline-start: auto;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.fresh.warn {
  color: var(--color-warning);
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 0.5rem;
  margin: 0;
  background: var(--color-accent);
  box-shadow: none;
  animation: none;
}

.dot.warn {
  background: var(--color-warning);
  box-shadow: none;
}

.reload {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  padding: 0;
  place-items: center;
}

.reload svg {
  width: 1.125rem;
  height: 1.125rem;
}

main {
  display: flex;
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding:
    var(--space-md)
    max(var(--space-md), env(safe-area-inset-right))
    calc(var(--space-filter-clearance) + env(safe-area-inset-bottom))
    max(var(--space-md), env(safe-area-inset-left));
  flex-direction: column;
  gap: var(--space-lg);
}

#view-monitor,
#view-search {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-xl);
  animation: hallmark-view-in var(--dur-short) var(--ease-out);
}

section {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-sm);
}

.sec-title {
  min-width: 0;
  margin: 0;
  color: var(--color-ink-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.sec-note {
  margin-block-start: calc(var(--space-xs) * -1);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.banner {
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-thin) solid var(--color-warning);
  border-radius: var(--radius-control);
  background: var(--color-warning-surface);
  color: var(--color-ink);
}

.banner.err {
  border-color: var(--color-error);
  background: var(--color-error-surface);
  color: var(--color-ink);
}

.card-alert,
.card,
.cmp-card,
.tk,
details.hist,
.ev-card,
.search-form,
.trip-status,
.trip-note,
.stat-note {
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: none;
}

.card-alert {
  position: relative;
  overflow: clip;
  margin: 0 0 var(--space-sm);
  padding: var(--space-lg);
  border-color: var(--color-error);
  background: var(--color-error-surface);
}

.card-alert.deal {
  border-color: var(--color-accent);
  background: var(--color-paper-2);
}

.alert-tag {
  display: inline-flex;
  min-height: 1.75rem;
  padding-inline: var(--space-xs);
  align-items: center;
  border-radius: var(--radius-round);
  background: var(--color-error);
  color: var(--color-error-ink);
  font-size: var(--text-xs);
  font-weight: 800;
}

.card-alert.deal .alert-tag {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.hotel {
  display: flex;
  min-width: 0;
  min-height: 2.75rem;
  margin: var(--space-sm) 0 var(--space-3xs);
  align-items: baseline;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.hotel small,
.star {
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: 800;
}

.meta {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.price-row {
  display: flex;
  min-width: 0;
  margin-block-start: var(--space-md);
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.was {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.now {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-price);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: none;
}

.off,
.cmp-min,
.hi-off {
  display: inline-flex;
  min-height: 1.5rem;
  padding-inline: var(--space-xs);
  align-items: center;
  border-radius: var(--radius-round);
  background: var(--color-success-surface);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 800;
}

.caution {
  margin-block-start: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
}

.badge {
  display: inline-flex;
  min-height: 1.75rem;
  padding-inline: var(--space-xs);
  align-items: center;
  border-radius: var(--radius-control);
  color: var(--color-site-ink);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.b-jalan {
  background: var(--color-jalan);
}

.b-rakuten {
  background: var(--color-rakuten);
}

.b-yahoo {
  background: var(--color-yahoo);
}

.chips {
  display: flex;
  min-width: 0;
  gap: var(--space-xs);
}

.chip {
  display: inline-flex;
  min-width: 0;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  user-select: none;
}

.chip.on {
  border-color: var(--color-rule-strong);
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.chip:not(.on) {
  opacity: 0.55;
}

.chip:not(.on) .sw {
  background: var(--color-muted) !important;
}

.chip .sw {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 0.5rem;
  transition: background-color var(--dur-short) var(--ease-out);
}

.filterbar {
  position: fixed;
  z-index: var(--z-sticky);
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding:
    var(--space-sm)
    max(var(--space-md), env(safe-area-inset-right))
    calc(var(--space-sm) + env(safe-area-inset-bottom))
    max(var(--space-md), env(safe-area-inset-left));
  align-items: center;
  gap: var(--space-sm);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  background: var(--color-backdrop);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.filterbar .sec-title {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
}

.filterbar .chips {
  flex: 1;
  justify-content: flex-end;
}

.cards,
.cmp-list,
.tk-list,
.ev-list,
.stat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.card {
  padding: var(--space-md);
  gap: var(--space-xs);
}

.card .row1,
.card .row2 {
  align-items: center;
  gap: var(--space-xs);
}

.card .name {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--color-ink);
}

.card .net {
  color: var(--color-ink);
  font-family: var(--font-display);
}

.card .per {
  color: var(--color-muted);
}

.coupon {
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  align-items: center;
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink-2);
}

.coupon .urgent {
  color: var(--color-warning);
}

.cmp-card {
  overflow: clip;
  padding: 0;
  gap: 0;
}

.cmp-head {
  display: flex;
  min-width: 0;
  padding: var(--space-md) var(--space-md) var(--space-2xs);
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
}

.cmp-basis {
  padding: 0 var(--space-md) var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.cmp-site {
  display: grid;
  min-height: 3.5rem;
  padding: var(--space-sm) var(--space-md);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
  border-radius: 0;
  outline-offset: -3px;
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.cmp-site.min {
  border: 0;
  border-block-start: var(--rule-thin) solid var(--color-accent);
  background: var(--color-success-surface);
}

.cmp-price {
  justify-content: flex-start;
  flex-wrap: wrap;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
}

.cmp-amount {
  white-space: nowrap;
}

.cmp-pt {
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: 800;
  white-space: nowrap;
}

.cmp-basis-tag {
  color: var(--color-muted);
}

.cmp-foot {
  padding-block-start: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  text-align: start;
}

.tk {
  padding: var(--space-md);
  gap: var(--space-xs);
}

.tk.bug {
  border-color: var(--color-error);
  background: var(--color-error-surface);
}

.tk.steal {
  border-color: var(--color-warning);
  background: var(--color-warning-surface);
}

.tk.deal {
  border-color: var(--color-accent);
  background: var(--color-success-surface);
}

.tk-tag {
  min-height: 1.5rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-round);
  color: var(--color-site-ink);
}

.tk-tag.bug {
  background: var(--color-error);
}

.tk-tag.steal {
  background: var(--color-warning);
  color: var(--color-warning-ink);
}

.tk-tag.deal {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.tk-urgent {
  color: var(--color-warning);
}

.tk-name,
.tk-cond {
  color: var(--color-ink);
}

.tk-target {
  color: var(--color-ink-2);
}

details.hist {
  overflow: clip;
}

details.hist summary {
  min-height: 3rem;
  padding-inline: var(--space-md);
  border-radius: inherit;
  outline: 2px solid var(--color-transparent);
  outline-offset: -3px;
  color: var(--color-ink-2);
}

details.hist summary::after {
  color: var(--color-muted);
  content: "＋";
}

details.hist[open] > summary::after {
  content: "−";
}

.hist-row,
details.hist-day summary {
  border-color: var(--color-rule);
  color: var(--color-ink-2);
}

.hist-row b,
details.hist-day summary b {
  color: var(--color-ink);
}

.hist-item {
  background: var(--color-paper);
  color: var(--color-ink);
}

.hist-item .hi-meta,
.hist-item .hi-price {
  color: var(--color-ink-2);
}

.hist-item .hi-price b {
  color: var(--color-ink);
}

.empty {
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  color: var(--color-ink-2);
  text-align: start;
}

.empty .icon,
.trip-status .icon {
  color: var(--color-muted);
  font-size: var(--text-md);
}

.skel {
  background: var(--color-paper-2);
  animation: hallmark-skeleton 1.4s var(--ease-in-out) infinite alternate;
}

footer.ver {
  padding-block: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  text-align: start;
}

.ev-card {
  padding: var(--space-sm) var(--space-md);
}

.ev-card.live {
  border-color: var(--color-error);
  background: var(--color-error-surface);
}

.ev-card.soon {
  border-color: var(--color-warning);
  background: var(--color-warning-surface);
}

.ev-dot.live {
  background: var(--color-error);
  box-shadow: none;
}

.ev-dot.soon {
  background: var(--color-warning);
  box-shadow: none;
}

.ev-dot.scheduled {
  background: var(--color-muted);
}

.ev-name {
  color: var(--color-ink);
}

.ev-sub {
  color: var(--color-ink-2);
}

.ev-hint {
  color: var(--color-accent);
}

.ev-status.live {
  background: var(--color-error-surface);
  color: var(--color-error);
}

.ev-status.soon {
  background: var(--color-warning-surface);
  color: var(--color-warning);
}

.ev-status.scheduled {
  background: var(--color-paper-3);
  color: var(--color-muted);
}

.stat-list {
  gap: var(--space-lg);
}

.stat-cat {
  gap: var(--space-sm);
}

.stat-cat-title {
  border-color: var(--color-rule);
  color: var(--color-ink);
}

.stat-name {
  color: var(--color-ink-2);
}

.stat-dt,
.stat-price.na {
  color: var(--color-muted);
}

.stat-bar-wrap {
  background: var(--color-paper-2);
}

.stat-bar.wd {
  background: var(--color-accent);
}

.stat-bar.we {
  background: var(--color-warning);
}

.stat-price {
  color: var(--color-ink);
}

.stat-note {
  padding: var(--space-md);
  color: var(--color-muted);
}

#gate {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: var(--space-xl);
  background: var(--color-paper);
}

.radar {
  display: grid;
  width: 4rem;
  height: 4rem;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  place-items: center;
}

.radar::after {
  content: none;
}

.radar svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-accent);
}

#gate h2 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
}

.gate-copy {
  text-align: center;
}

#gate p {
  color: var(--color-ink-2);
}

#pin {
  width: min(100%, 14.375rem);
  min-height: 3.375rem;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  outline: 2px solid var(--color-transparent);
  outline-offset: 1px;
  background: var(--color-paper-2);
  color: var(--color-ink);
}

#pin:focus,
#pin:focus-visible {
  border-color: var(--color-rule);
  outline-color: var(--color-focus);
  box-shadow: none;
}

.cta {
  display: inline-flex;
  width: min(100%, 14.375rem);
  min-height: 3.25rem;
  padding-inline: var(--space-md);
  align-items: center;
  justify-content: center;
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 800;
  box-shadow: none;
}

.cta:focus-visible {
  outline-color: var(--color-focus-on-accent);
  box-shadow: 0 0 0 var(--focus-halo) var(--color-focus-outer);
}

#gate-err {
  color: var(--color-error);
}

.tabs {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.tab {
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.tab.on {
  border-color: var(--color-rule-strong);
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.search-form {
  padding: var(--space-md);
  gap: var(--space-md);
}

.field {
  gap: var(--space-2xs);
}

.field label,
.field-label {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.field input,
.field select {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  outline: 2px solid var(--color-transparent);
  outline-offset: 1px;
  background: var(--color-paper);
  color: var(--color-ink);
}

.field input:focus,
.field select:focus,
.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--color-rule);
  outline-color: var(--color-focus);
  box-shadow: none;
}

.field input:active,
.field select:active {
  border-color: var(--color-rule-strong);
}

.field input:disabled,
.field select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--color-muted);
}

.search-form .cta {
  width: 100%;
}

.search-hint {
  color: var(--color-muted);
}

.trip-status {
  padding: var(--space-lg) var(--space-md);
  color: var(--color-ink-2);
}

.trip-note {
  padding: var(--space-sm) var(--space-md);
  border-color: var(--color-warning);
  background: var(--color-warning-surface);
  color: var(--color-ink);
}

.trip-spinner {
  border-color: var(--color-rule-strong);
  border-block-start-color: var(--color-accent);
}

.trip-count {
  color: var(--color-ink-2);
}

details.hist-day {
  border-color: var(--color-rule);
}

details.hist-day summary {
  min-height: 2.75rem;
  outline: 2px solid var(--color-transparent);
  outline-offset: -3px;
}

details.hist-day summary::after {
  color: var(--color-muted);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--color-ink);
  }

  .reload:hover,
  .tab:hover,
  .chip:hover {
    background: var(--color-paper-3);
    color: var(--color-ink);
  }

  .cta:hover {
    transform: translateY(-1px);
  }

  details summary:hover {
    background: var(--color-paper-3);
  }
}

@media (min-width: 40rem) {
  header.app,
  main,
  .filterbar,
  #gate {
    border-inline: var(--rule-thin) solid var(--color-rule);
  }

  main {
    min-height: calc(100dvh - 4rem);
  }
}

@media (max-width: 23rem) {
  .fresh-text {
    font-size: 0;
  }

  .fresh-text::after {
    content: "更新";
    font-size: var(--text-xs);
  }

  .filterbar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .filterbar .chips {
    width: 100%;
    justify-content: stretch;
  }

  .filterbar .chip {
    flex: 1;
  }

  .cmp-site {
    column-gap: var(--space-xs);
  }

  .cmp-price {
    font-size: var(--text-base);
  }

  .cmp-pt {
    font-size: var(--text-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }

  #view-monitor,
  #view-search {
    animation-name: hallmark-view-in-reduced;
  }
}

@keyframes hallmark-view-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2xs));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hallmark-view-in-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hallmark-skeleton {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

@keyframes hallmark-spin {
  to {
    transform: rotate(360deg);
  }
}