:root {
  --color-ink: #243238;
  --color-muted: #66777d;
  --color-bg: #f7f3ec;
  --color-surface: #fffdf8;
  --color-panel: #eef7f1;
  --color-line: #d8ddd4;
  --color-primary: #17716b;
  --color-primary-dark: #0f4f4b;
  --color-primary-soft: #dff1ed;
  --color-accent: #d96f4d;
  --color-accent-soft: #fff0e8;
  --color-warning: #a66a20;
  --color-danger: #b93832;
  --shadow-soft: 0 14px 34px rgba(40, 50, 45, 0.10);
  --shadow-card: 0 8px 22px rgba(31, 47, 43, 0.09);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background:
    linear-gradient(135deg, rgba(23, 113, 107, 0.08) 0 1px, transparent 1px 42px),
    linear-gradient(180deg, #fdf8ef 0%, var(--color-bg) 42%, #edf5ef 100%);
  color: var(--color-ink);
  font-family: "Avenir Next", "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.62;
}

main,
section,
article,
div,
form,
label {
  min-width: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 48px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  padding: 10px 16px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

button:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 8px 18px rgba(15, 79, 75, 0.18);
  transform: translateY(-1px);
}

button.secondary,
button.ghost {
  background: #fff;
  color: var(--color-primary);
}

button.ghost {
  border-color: var(--color-line);
  color: var(--color-muted);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid #efbf5f;
  outline-offset: 3px;
}

.site-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(23, 113, 107, 0.96), rgba(33, 88, 82, 0.96)),
    #17716b;
  color: #fff;
}

.site-header::after {
  position: absolute;
  inset: auto 0 0;
  height: 10px;
  background: linear-gradient(90deg, var(--color-accent), #efbf5f, #7bbf8e);
  content: "";
}

.header-inner,
.layout,
.site-footer {
  max-width: 1120px;
  margin: 0 auto;
}

.header-inner {
  position: relative;
  display: grid;
  gap: var(--space-5);
  min-height: 136px;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + 12px);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.agency {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  margin: 0 0 var(--space-3);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 800;
  padding: 3px 12px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--space-3);
  font-size: 24px;
  line-height: 1.28;
}

h2 {
  margin-bottom: var(--space-2);
  color: var(--color-primary-dark);
  font-size: 20px;
  line-height: 1.35;
}

.updated,
.summary,
.site-footer,
.meta,
.field-name {
  color: var(--color-muted);
}

.summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid rgba(23, 113, 107, 0.14);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.72);
  padding: 3px 12px;
  max-width: 100%;
  white-space: normal;
}

.site-header .updated {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border-radius: 999px;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  padding: 4px 12px;
}

.route-visual {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-5);
  display: none;
  align-items: center;
  width: 340px;
  max-width: 38%;
  opacity: 0.92;
}

.route-dot {
  width: 38px;
  height: 38px;
  border: 5px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
}

.route-dot.dot-b {
  background: #efbf5f;
}

.route-dot.dot-c {
  background: #7bbf8e;
}

.route-line {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.72);
}

.route-line.short {
  flex: 0.72;
}

.layout {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
}

.notice-trigger {
  align-self: end;
  background: #fffdf8;
  color: var(--color-primary-dark);
  border-color: rgba(23, 113, 107, 0.22);
}

body.notice-open {
  overflow: hidden;
}

.notice,
.browser-hint,
.search-panel,
.result-area,
.status-message {
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.92);
}

.notice {
  position: fixed;
  z-index: 40;
  inset: 50% var(--space-4) auto;
  display: none;
  max-width: 520px;
  margin-inline: auto;
  border-color: rgba(23, 113, 107, 0.22);
  background: var(--color-panel);
  box-shadow: 0 24px 60px rgba(31, 47, 43, 0.22);
  padding: var(--space-4);
  transform: translateY(-50%);
}

.notice.is-open {
  display: grid;
  gap: var(--space-3);
}

.notice::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(21, 32, 37, 0.28);
  content: "";
}

.browser-hint {
  position: fixed;
  z-index: 41;
  inset: auto var(--space-4) calc(var(--space-4) + 152px);
  max-width: 520px;
  margin-inline: auto;
  border-color: rgba(217, 111, 77, 0.24);
  background: var(--color-accent-soft);
  padding: var(--space-4);
  box-shadow: 0 18px 42px rgba(31, 47, 43, 0.18);
}

.hint-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hint-close {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border-color: rgba(217, 111, 77, 0.24);
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 22px;
  line-height: 1;
  padding: 0;
}

.notice-close {
  width: 100%;
}

.result-area:focus {
  outline: none;
}

.notice strong,
.browser-hint strong {
  color: var(--color-primary-dark);
}

.notice p,
.browser-hint p {
  margin-bottom: 0;
}

.search-panel {
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}

.search-panel {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(238, 247, 241, 0.98));
}

.result-area {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section-heading h2,
.section-heading p {
  margin-bottom: 0;
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.quick-actions button {
  background: #fff;
  color: var(--color-primary-dark);
  border-color: rgba(23, 113, 107, 0.22);
  box-shadow: 0 6px 16px rgba(31, 47, 43, 0.07);
}

.quick-actions button:first-child,
.quick-actions button:nth-child(2),
.quick-actions button.is-active {
  background: var(--color-primary);
  color: #fff;
}

.quick-actions button.is-active {
  border-color: rgba(15, 79, 75, 0.72);
  box-shadow: 0 12px 24px rgba(15, 79, 75, 0.20);
}

.quick-actions button.secondary {
  color: var(--color-accent);
  border-color: rgba(217, 111, 77, 0.32);
}

.filters {
  display: grid;
  gap: var(--space-3);
  border-top: 1px solid rgba(23, 113, 107, 0.14);
  padding-top: var(--space-4);
}

.advanced-search {
  grid-column: 1 / -1;
  border: 1px solid rgba(23, 113, 107, 0.14);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
  padding: var(--space-3);
}

.advanced-search summary {
  cursor: pointer;
  color: var(--color-primary-dark);
  font-weight: 900;
}

.advanced-actions,
.brand-options {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.brand-filter {
  grid-column: 1 / -1;
  border: 1px solid rgba(23, 113, 107, 0.14);
  border-radius: 8px;
  margin: 0;
  padding: var(--space-3);
}

.brand-filter legend {
  color: var(--color-primary-dark);
  font-weight: 900;
}

.brand-options label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
}

.brand-options input {
  width: auto;
  min-height: auto;
}

label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-primary-dark);
  font-weight: 800;
}

input,
select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(36, 50, 56, 0.14);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--color-ink);
  padding: 10px 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:hover,
select:hover {
  border-color: rgba(23, 113, 107, 0.36);
}

input:focus,
select:focus {
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(23, 113, 107, 0.10);
}

.filter-buttons {
  display: flex;
  align-items: end;
}

.filter-buttons button {
  width: 100%;
}

.status-message {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}

.status-message.error {
  border-left: 5px solid var(--color-danger);
}

.status-message.info {
  border-left: 5px solid var(--color-primary);
}

.empty-state {
  display: grid;
  gap: var(--space-3);
}

.empty-mark {
  width: 48px;
  height: 48px;
  border: 10px solid var(--color-primary-soft);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 42%, var(--color-accent) 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, var(--color-accent) 42% 58%, transparent 58%),
    #fffdf8;
  box-shadow: 0 8px 18px rgba(31, 47, 43, 0.08);
}

.card-list {
  display: grid;
  gap: var(--space-4);
}

.site-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(36, 50, 56, 0.12);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
}

.site-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), #7bbf8e, var(--color-accent));
  content: "";
}

.site-card:hover {
  border-color: rgba(23, 113, 107, 0.26);
  box-shadow: 0 16px 34px rgba(31, 47, 43, 0.13);
  transform: translateY(-2px);
}

.site-card.is-expanded {
  border-color: rgba(23, 113, 107, 0.36);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 800;
  padding: 4px 10px;
}

.badge.village-badge {
  border-color: #e5b94d;
  background: #fff6bf;
  color: #6f5200;
}

.badge.today {
  background: #e5f4dd;
  color: #357536;
}

.badge.ended {
  background: #fff0d7;
  color: var(--color-warning);
}

.date-time {
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
}

.site-name {
  margin-bottom: var(--space-2);
  color: var(--color-primary-dark);
  font-size: 21px;
  font-weight: 900;
}

.address {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-weight: 800;
}

.address span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.icon-actions {
  display: inline-flex;
  gap: var(--space-2);
}

.icon-button,
.text-icon-button {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  padding: 0;
}

.icon-button {
  background: #fff;
  color: var(--color-primary);
  border-color: rgba(23, 113, 107, 0.22);
}

.text-icon-button {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-color: rgba(23, 113, 107, 0.20);
}

.expand-button {
  width: 100%;
  margin: 0 0 var(--space-3);
}

.site-extra[hidden] {
  display: none;
}

.site-extra {
  border-top: 1px solid rgba(36, 50, 56, 0.12);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.detail-grid {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  border-top: 1px solid rgba(36, 50, 56, 0.10);
  padding-top: var(--space-3);
}

.field-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.field-value {
  display: block;
  color: var(--color-ink);
}

.actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.empty-actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.result-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) 0 0;
}

.result-pager[hidden] {
  display: none;
}

.result-pager span {
  min-width: 96px;
  text-align: center;
  font-weight: 800;
}

.actions a,
.actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 8px;
  text-decoration: none;
}

.actions a {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  padding: 10px 16px;
}

.actions a:hover {
  background: var(--color-primary-dark);
}

.note {
  border-top: 1px solid rgba(36, 50, 56, 0.10);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.site-footer {
  padding: var(--space-5) var(--space-4) var(--space-6);
  font-size: 14px;
}

.site-footer p {
  margin-bottom: var(--space-1);
}

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

@media (min-width: 768px) {
  h1 {
    font-size: 38px;
  }

  .header-inner {
    align-items: center;
    min-height: 246px;
    padding: 46px var(--space-5) 56px;
  }

  .route-visual {
    display: flex;
  }

  .notice {
    inset: 50% auto auto 50%;
    width: min(520px, calc(100vw - 48px));
    transform: translate(-50%, -50%);
  }

  .browser-hint {
    inset: auto auto calc(50% - 260px) 50%;
    width: min(520px, calc(100vw - 48px));
    transform: translateX(-50%);
  }

  .layout {
    padding: var(--space-6) var(--space-5);
  }

  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filter-buttons {
    grid-column: span 3;
  }

  .card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .empty-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  body {
    font-size: 15px;
  }

  .layout {
    padding: var(--space-4) var(--space-3);
  }

  .header-inner {
    padding-inline: var(--space-3);
  }

  h1 {
    font-size: 21px;
  }

  .agency,
  .site-header .updated {
    border-radius: 8px;
  }

  .section-heading {
    display: grid;
  }

  .card-top {
    grid-template-columns: 1fr;
  }

  .icon-actions {
    justify-content: flex-end;
  }
}

/* 2026-07-06 UI/UX redesign based on the mobile reference set. */
:root {
  --color-ink: #071b3a;
  --color-muted: #5d6b7f;
  --color-bg: #f4f8fd;
  --color-surface: #ffffff;
  --color-panel: #eef6ff;
  --color-line: #cfdceb;
  --color-primary: #075ab8;
  --color-primary-dark: #062c63;
  --color-primary-soft: #e9f3ff;
  --color-accent: #0f7b45;
  --color-accent-soft: #edf8f0;
  --color-warning: #bc6508;
  --color-danger: #c73b32;
  --shadow-soft: 0 18px 44px rgba(7, 46, 92, 0.11);
  --shadow-card: 0 12px 28px rgba(7, 46, 92, 0.13);
}

html {
  background: #f8fbff;
}

body {
  background:
    radial-gradient(circle at 24px 24px, rgba(7, 90, 184, 0.05) 0 2px, transparent 3px),
    linear-gradient(180deg, #ffffff 0%, #f4f8fd 58%, #eef7f1 100%);
  color: var(--color-ink);
  font-family: "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  letter-spacing: 0;
}

button {
  border-color: #075ab8;
  border-radius: 10px;
  background: linear-gradient(180deg, #116bd0, #074b9d);
  box-shadow: 0 8px 18px rgba(7, 90, 184, 0.18);
  font-weight: 900;
}

button:hover {
  background: linear-gradient(180deg, #075ab8, #063f86);
}

button.secondary,
button.ghost {
  background: #fff;
  color: var(--color-primary);
  box-shadow: none;
}

.site-header {
  border-bottom: 1px solid #d8e5f3;
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-ink);
}

.site-header::after {
  height: 4px;
  background: linear-gradient(90deg, #075ab8, #0f7b45);
}

.header-inner {
  min-height: 188px;
  padding-top: 32px;
}

.hero-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}

.hero-copy::before {
  display: grid;
  width: 64px;
  height: 72px;
  border-radius: 20px 20px 26px 26px;
  background:
    linear-gradient(90deg, transparent 39%, #fff 39% 61%, transparent 61%),
    linear-gradient(0deg, transparent 39%, #fff 39% 61%, transparent 61%),
    linear-gradient(145deg, #3aa0ff, #075ab8 68%, #053d84);
  box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.12), 0 14px 24px rgba(7, 90, 184, 0.18);
  content: "";
}

.agency {
  grid-column: 2;
  width: fit-content;
  border-color: #d5e4f3;
  background: #f2f7fd;
  color: #075ab8;
}

h1 {
  grid-column: 2;
  margin-bottom: 10px;
  color: #082a5a;
  font-size: 32px;
  font-weight: 950;
  line-height: 1.22;
}

h2 {
  color: #082a5a;
  font-weight: 950;
}

.site-header .updated {
  grid-column: 1 / -1;
  width: fit-content;
  border: 1px solid #d5e4f3;
  background: #fff;
  color: #075ab8;
  font-weight: 800;
}

.route-visual {
  display: none;
}

.notice-trigger {
  position: absolute;
  right: 16px;
  top: 32px;
  width: 56px;
  min-width: 56px;
  min-height: 56px;
  overflow: hidden;
  border-radius: 999px;
  color: transparent;
}

.notice-trigger::before {
  color: #082a5a;
  content: "";
  font-size: 13px;
}

.notice {
  position: static;
  display: none;
  max-width: none;
  margin: 0;
  border-color: #f3d7a6;
  background: linear-gradient(180deg, #fffaf0, #fff6e6);
  box-shadow: none;
  padding: 18px;
  transform: none;
}

.notice.is-open {
  display: grid;
}

.notice::before {
  display: none;
}

body.notice-open {
  overflow: auto;
}

.layout {
  max-width: 880px;
}

.search-panel {
  border-color: #d8e5f3;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
  padding: 20px;
}

.quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quick-actions button {
  display: grid;
  min-height: 154px;
  align-content: center;
  justify-items: center;
  gap: 12px;
  border-color: #bfd9f1;
  background: linear-gradient(160deg, #f7fbff, #edf6ff);
  color: #08386f;
  font-size: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 22px rgba(7, 46, 92, 0.08);
}

.quick-actions button::before {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(145deg, #1473d6, #075ab8);
  color: #fff;
  content: "";
  font-size: 24px;
  font-weight: 950;
}

.quick-actions [data-action="nearby"] {
  border-color: #bddfcb;
  background: linear-gradient(160deg, #f7fffb, #edf8f0);
  color: #0f6a3d;
}

.quick-actions [data-action="nearby"]::before {
  background: linear-gradient(145deg, #2ca866, #0f7b45);
  content: "";
}

.quick-actions [data-focus-filter="districtFilter"]::before {
  content: "";
}

.quick-actions [data-focus-filter="dateFilter"] {
  border-color: #bddfcb;
  background: linear-gradient(160deg, #f7fffb, #edf8f0);
  color: #0f6a3d;
}

.quick-actions [data-focus-filter="dateFilter"]::before {
  background: linear-gradient(145deg, #2ca866, #0f7b45);
  content: "";
}

.filters {
  border-top-color: #d8e5f3;
}

input,
select {
  min-height: 54px;
  border-color: #b9c9dc;
  border-radius: 10px;
  background: #fff;
  font-weight: 650;
}

.advanced-search {
  border-color: #d8e5f3;
  background: #fff;
}

.advanced-search summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #082a5a;
  font-size: 18px;
}

.result-area .section-heading {
  align-items: center;
  border-bottom: 2px solid #c8d8ea;
  padding-bottom: 14px;
}

.summary {
  border-color: #d1e3f4;
  border-radius: 10px;
  background: #eef6ff;
  color: #082a5a;
  font-weight: 800;
}

.site-card {
  border-color: #ccd9e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 0;
}

.site-card::before {
  height: 0;
}

.card-top,
.date-time,
.site-name,
.address,
.expand-button,
.site-extra {
  margin-left: 18px;
  margin-right: 18px;
}

.card-top {
  padding-top: 18px;
}

.badges {
  gap: 8px;
}

.badge {
  border: 1px solid #c8d8ea;
  border-radius: 8px;
  background: #eef6ff;
  color: #075ab8;
}

.badge.today {
  border-color: #c6e7d1;
  background: #eaf8ef;
  color: #0f7b45;
}

.badge.ended {
  border-color: #f3d7a6;
  background: #fff4df;
  color: #a45b06;
}

.date-time {
  border-radius: 12px 12px 0 0;
  margin-top: 10px;
  margin-bottom: 0;
  background: linear-gradient(180deg, #e9f4ff, #dceeff);
  color: #093f86;
  font-size: 30px;
  padding: 16px 18px;
}

.site-name {
  margin-bottom: 8px;
  padding-top: 18px;
  color: #071b3a;
  font-size: 28px;
}

.address {
  color: #172235;
  font-size: 18px;
}

.icon-button,
.text-icon-button {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  border-color: #b8d2ec;
  border-radius: 10px;
  background: #fff;
  color: #075ab8;
  font-weight: 950;
}

.expand-button {
  border-color: #0f7b45;
  background: #fff;
  color: #0f7b45;
}

.site-extra {
  padding-bottom: 18px;
}

.detail-grid {
  gap: 10px;
}

.detail-grid div {
  border: 1px solid #d8e5f3;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px;
}

.actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.actions a,
.actions button {
  min-height: 58px;
  border-radius: 10px;
}

.actions a {
  background: linear-gradient(180deg, #116bd0, #074b9d);
}

.empty-state {
  justify-items: center;
  border-color: #f3d7a6;
  background: linear-gradient(180deg, #fffaf0, #ffffff);
  text-align: center;
}

.empty-mark {
  width: 132px;
  height: 132px;
  border: 0;
  border-radius: 42px;
  background:
    radial-gradient(circle at 62% 43%, transparent 0 18px, #075ab8 19px 25px, transparent 26px),
    linear-gradient(45deg, transparent 47%, #075ab8 48% 54%, transparent 55%),
    linear-gradient(180deg, #e9f4ff, #d8e9fb);
}

.empty-actions button {
  min-height: 58px;
}

@media (max-width: 767px) {
  .header-inner {
    min-height: 224px;
    padding-bottom: 34px;
  }

  h1 {
    font-size: 31px;
  }

  .layout {
    padding-top: 22px;
  }

  .search-panel {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .section-heading {
    align-items: center;
  }

  .quick-actions button {
    min-height: 168px;
    font-size: 22px;
  }

  .filters {
    border-top: 0;
    padding-top: 6px;
  }

  .date-time {
    font-size: 28px;
  }

  .actions {
    position: sticky;
    bottom: 8px;
    background: rgba(255, 255, 255, 0.92);
    padding-top: 10px;
  }
}

@media (max-width: 420px) {
  .hero-copy {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
  }

  .hero-copy::before {
    width: 52px;
    height: 60px;
    border-radius: 16px 16px 22px 22px;
  }

  h1 {
    font-size: 26px;
  }

  .notice-trigger {
    top: 24px;
    right: 12px;
  }

  .quick-actions {
    gap: 10px;
  }

  .quick-actions button {
    min-height: 142px;
    font-size: 18px;
    padding: 10px;
  }

  .quick-actions button::before {
    width: 50px;
    height: 50px;
  }

  .date-time {
    font-size: 24px;
  }

  .site-name {
    font-size: 24px;
  }
}

/* 2026-07-07 fidelity pass: closer to the supplied mobile mockups. */
.site-header {
  overflow: visible;
}

.header-inner {
  max-width: 760px;
  min-height: 204px;
  padding-inline: 20px;
}

.hero-copy::before {
  clip-path: polygon(50% 0, 92% 12%, 92% 56%, 50% 100%, 8% 56%, 8% 12%);
}

.notice-trigger {
  display: grid;
  place-items: center;
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  border-radius: 999px;
  color: transparent;
  font-size: 0;
}

.notice-trigger::before {
  display: block;
  width: 28px;
  height: 20px;
  background:
    linear-gradient(#082a5a, #082a5a) 0 0 / 100% 3px no-repeat,
    linear-gradient(#082a5a, #082a5a) 0 50% / 100% 3px no-repeat,
    linear-gradient(#082a5a, #082a5a) 0 100% / 100% 3px no-repeat;
  content: "";
}

.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
}

.notice strong {
  grid-column: 2;
  margin: 0;
  color: #9a4f05;
  font-size: 18px;
}

.notice p {
  grid-column: 2;
}

.notice::after {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #fff;
  color: #bc6508;
  content: "";
  font-size: 26px;
  font-weight: 950;
}

.notice-close {
  grid-column: 1 / -1;
}

.search-panel {
  border-radius: 18px;
}

.quick-actions button::before,
.quick-actions [data-action="nearby"]::before,
.quick-actions [data-focus-filter="districtFilter"]::before,
.quick-actions [data-focus-filter="dateFilter"]::before {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 48px 48px;
  box-shadow: none;
  color: transparent;
  content: "";
}

.quick-actions [data-action="today"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='14' y='18' width='40' height='38' rx='6' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M23 12v12M45 12v12M15 30h38M25 43l7 7 15-18' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.quick-actions [data-action="nearby"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 8c-11 0-20 9-20 20 0 15 20 36 20 36s20-21 20-36C56 17 47 8 36 8z' fill='%23fff'/%3E%3Ccircle cx='36' cy='28' r='8' fill='%230f7b45'/%3E%3Cpath d='M20 60c4 3 28 3 32 0' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.quick-actions [data-focus-filter="districtFilter"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20l16-8 16 8 16-8v40l-16 8-16-8-16 8V20z' stroke='%23075ab8' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M28 12v40M44 20v40' stroke='%23075ab8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.quick-actions [data-focus-filter="dateFilter"]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='14' y='16' width='44' height='44' rx='7' stroke='%230f7b45' stroke-width='6'/%3E%3Cpath d='M24 10v12M48 10v12M15 30h42' stroke='%230f7b45' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M26 42h4M36 42h4M46 42h4M26 52h4M36 52h4M46 52h4' stroke='%230f7b45' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.filters {
  border-top: 0;
  padding-top: 8px;
}

.keyword-search {
  position: relative;
  grid-column: 1 / -1;
}

.keyword-search input {
  min-height: 66px;
  border: 3px solid #075ab8;
  border-radius: 14px;
  font-size: 18px;
  padding-left: 58px;
}

.keyword-search::before {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='9' stroke='%23082a5a' stroke-width='4'/%3E%3Cpath d='M21 21l7 7' stroke='%23082a5a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
  pointer-events: none;
}

.advanced-search {
  padding: 0;
}

.advanced-search summary {
  position: relative;
  min-height: 64px;
  border-radius: 12px;
  padding: 0 48px 0 18px;
  list-style: none;
}

.advanced-search summary::-webkit-details-marker {
  display: none;
}

.advanced-search summary::after {
  position: absolute;
  right: 20px;
  width: 16px;
  height: 16px;
  border-right: 4px solid #082a5a;
  border-bottom: 4px solid #082a5a;
  content: "";
  transform: rotate(45deg) translateY(-4px);
}

.advanced-search[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.advanced-fields {
  display: grid;
  gap: 14px;
  border-top: 1px solid #d8e5f3;
  padding: 16px;
}

.advanced-actions {
  padding: 0 16px 16px;
}

.filter-buttons button {
  min-height: 60px;
}

.date-time {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date-time::before,
.address::before {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

.date-time::before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='9' width='26' height='25' rx='4' stroke='%23075ab8' stroke-width='4'/%3E%3Cpath d='M13 5v8M27 5v8M8 18h24' stroke='%23075ab8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.address::before {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 4c-7 0-12 5-12 12 0 9 12 20 12 20s12-11 12-20C32 9 27 4 20 4z' fill='%23075ab8'/%3E%3Ccircle cx='20' cy='16' r='5' fill='white'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  .advanced-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .header-inner {
    min-height: 176px;
  }

  .notice {
    border-radius: 18px;
  }

  .quick-actions button {
    border-radius: 18px;
  }

  .keyword-search input {
    font-size: 17px;
  }
}

/* 2026-07-07 rebuild: align public mobile screens with the supplied UX concept images. */
:root {
  --icon-calendar-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none'%3E%3Crect x='14' y='18' width='44' height='40' rx='7' stroke='%23075ab8' stroke-width='6'/%3E%3Cpath d='M24 12v13M48 12v13M16 32h40M27 44l7 7 14-17' stroke='%23075ab8' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-pin-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M36 8c-12 0-22 9.7-22 21.7C14 46 36 64 36 64s22-18 22-34.3C58 17.7 48 8 36 8z' fill='%230f7b45'/%3E%3Ccircle cx='36' cy='30' r='8' fill='white'/%3E%3Cpath d='M20 61c5 3 27 3 32 0' stroke='%230f7b45' stroke-width='5' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  --icon-map-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none'%3E%3Cpath d='M12 20l16-8 16 8 16-8v40l-16 8-16-8-16 8V20z' stroke='%23075ab8' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M28 12v40M44 20v40' stroke='%23075ab8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-calendar-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none'%3E%3Crect x='14' y='16' width='44' height='44' rx='7' stroke='%230f7b45' stroke-width='6'/%3E%3Cpath d='M24 10v12M48 10v12M15 30h42' stroke='%230f7b45' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M26 42h4M36 42h4M46 42h4M26 52h4M36 52h4M46 52h4' stroke='%230f7b45' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='100' viewBox='0 0 88 100' fill='none'%3E%3Cpath d='M44 4 78 16v33c0 22-14 38-34 47C24 87 10 71 10 49V16L44 4Z' fill='%23075ab8'/%3E%3Cpath d='M31 48h26M44 35v26' stroke='white' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52' fill='none'%3E%3Cpath d='M11 32V20c0-8 6.5-14 15-14s15 6 15 14v12l4 7H7l4-7Z' stroke='%23bc6508' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M21 44h10' stroke='%23bc6508' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180' viewBox='0 0 220 180' fill='none'%3E%3Ccircle cx='110' cy='88' r='74' fill='%23eaf4ff'/%3E%3Crect x='69' y='42' width='68' height='92' rx='8' fill='white' stroke='%2386b8e8' stroke-width='6'/%3E%3Cpath d='M88 66h30M88 82h24M88 98h30M88 114h20' stroke='%23c0d7ef' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='143' cy='102' r='30' fill='%23dfeeff' stroke='%23075ab8' stroke-width='7'/%3E%3Cpath d='M132 103c5 7 17 7 22 0' stroke='%23075ab8' stroke-width='5' stroke-linecap='round' transform='rotate(180 143 105)'/%3E%3Cpath d='M162 122l28 28' stroke='%23075ab8' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M88 32h43v18H88z' fill='%2386b8e8'/%3E%3C/svg%3E");
}

body {
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 58%, #eef8f2 100%);
}

.site-header {
  border-bottom: 1px solid #d8e5f3;
}

.header-inner {
  max-width: 820px;
  min-height: 170px;
  padding: 34px 24px 28px;
}

.hero-copy {
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
}

.hero-copy::before {
  width: 74px;
  height: 84px;
  border-radius: 0;
  background: var(--icon-shield) center / contain no-repeat;
  box-shadow: none;
  clip-path: none;
}

.agency {
  display: none;
}

h1 {
  margin: 0;
  font-size: 38px;
  letter-spacing: 0;
}

.site-header .updated {
  grid-column: 1 / -1;
  margin-top: 18px;
  border: 0;
  background: transparent;
  color: #075ab8;
  font-size: 20px;
}

.site-header .updated::before {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='12' stroke='%23075ab8' stroke-width='3'/%3E%3Cpath d='M16 9v8l5 4' stroke='%23075ab8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

.notice-trigger {
  top: 42px;
  right: 24px;
  border: 1px solid #d8e5f3;
  background: #f7fbff;
  box-shadow: 0 8px 22px rgba(7, 46, 92, 0.12);
}

.notice {
  min-height: 96px;
  border-radius: 18px;
  padding: 22px;
}

.notice::after {
  width: 56px;
  height: 56px;
  background: #fff var(--icon-alert) center / 34px 34px no-repeat;
  color: transparent;
  content: "";
}

.search-panel {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.section-heading h2 {
  font-size: 24px;
}

.quick-actions {
  gap: 16px;
}

.quick-actions button {
  min-height: 172px;
  border-radius: 22px;
  border-width: 2px;
  font-size: 27px;
}

.quick-actions button::before,
.quick-actions [data-action="nearby"]::before,
.quick-actions [data-focus-filter="districtFilter"]::before,
.quick-actions [data-focus-filter="dateFilter"]::before {
  width: 86px;
  height: 86px;
  background-size: contain;
}

.quick-actions [data-action="today"],
.quick-actions [data-action="nearby"],
.quick-actions [data-action="today"].is-active,
.quick-actions [data-action="nearby"].is-active,
.quick-actions button:first-child,
.quick-actions button:nth-child(2) {
  border-color: #bcd8f2;
  background: linear-gradient(160deg, #f7fbff, #eef6ff);
  color: #082a5a;
}

.quick-actions [data-action="today"]::before {
  background-image: var(--icon-calendar-blue);
}

.quick-actions [data-action="nearby"] {
  border-color: #bde3ce;
  color: #0f6a3d;
}

.quick-actions [data-action="nearby"]::before {
  background-image: var(--icon-pin-green);
}

.quick-actions [data-focus-filter="districtFilter"]::before {
  background-image: var(--icon-map-blue);
}

.quick-actions [data-focus-filter="dateFilter"]::before {
  background-image: var(--icon-calendar-green);
}

.keyword-search {
  color: transparent;
  font-size: 0;
}

.keyword-search input {
  min-height: 74px;
  border-radius: 16px;
  font-size: 22px;
}

.advanced-search summary {
  min-height: 76px;
  font-size: 24px;
}

.filter-buttons button {
  min-height: 68px;
  font-size: 20px;
}

.result-area .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.result-area .section-heading h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 38px;
}

.result-area .section-heading h2::before {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background:
    #075ab8
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Crect x='10' y='13' width='28' height='27' rx='4' stroke='white' stroke-width='4'/%3E%3Cpath d='M16 8v9M32 8v9M11 22h26' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 30px 30px no-repeat;
  content: "";
}

.summary {
  font-size: 20px;
}

.card-list {
  gap: 22px;
}

.site-card {
  overflow: hidden;
  border-radius: 18px;
}

.site-card-body {
  padding: 22px 24px 8px;
}

.date-time {
  margin: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #e8f4ff, #dcecff);
  color: #0b3d86;
  font-size: 34px;
  padding: 22px 24px;
  white-space: nowrap;
}

.date-time::before {
  width: 42px;
  height: 42px;
}

.site-name {
  margin: 0 0 14px;
  padding: 0;
  font-size: 34px;
}

.badges {
  margin-bottom: 14px;
}

.badge {
  min-height: 34px;
  font-size: 18px;
  padding: 4px 12px;
}

.address {
  margin: 0 0 12px;
  font-size: 22px;
}

.target-line {
  display: grid;
  grid-template-columns: 34px max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #172235;
  font-size: 22px;
}

.target-line::before {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Ccircle cx='20' cy='12' r='7' fill='%230f7b45'/%3E%3Cpath d='M8 34c1-9 6-14 12-14s11 5 12 14H8Z' fill='%230f7b45'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

.target-line strong {
  color: #0f7b45;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.primary-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.map-action,
.copy-action,
.queue-action {
  gap: 10px;
  font-size: 21px;
}

.map-action::before,
.copy-action::before,
.queue-action::before,
.clear-action::before {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

.map-action::before {
  background-image: var(--icon-map-blue);
  filter: brightness(0) invert(1);
}

.copy-action::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Crect x='11' y='8' width='14' height='18' rx='2' stroke='%230f7b45' stroke-width='3'/%3E%3Cpath d='M7 22V6a2 2 0 0 1 2-2h12' stroke='%230f7b45' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.queue-action::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M5 24c2-5 6-8 11-8s9 3 11 8' stroke='%230f7b45' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='10' r='5' stroke='%230f7b45' stroke-width='3'/%3E%3C/svg%3E");
}

.expand-button {
  width: calc(100% - 48px);
  min-height: 58px;
  margin: 8px 24px 22px;
  font-size: 19px;
}

.empty-state {
  padding: 26px;
}

.empty-mark {
  width: 220px;
  height: 180px;
  border-radius: 0;
  background: var(--icon-empty) center / contain no-repeat;
}

.empty-state strong {
  color: #082a5a;
  font-size: 30px;
}

.empty-state p {
  font-size: 20px;
}

.empty-actions {
  width: 100%;
  grid-template-columns: 1fr;
  max-width: 520px;
}

.empty-actions button {
  justify-content: space-between;
  min-height: 72px;
  border-radius: 16px;
  font-size: 24px;
  padding-inline: 26px;
}

.empty-actions button::after {
  width: 16px;
  height: 16px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .header-inner {
    min-height: 150px;
  }

  h1 {
    font-size: 30px;
  }

  .site-header .updated {
    font-size: 16px;
  }

  .quick-actions button {
    min-height: 154px;
    font-size: 22px;
  }

  .date-time {
    font-size: 25px;
  }

  .site-name {
    font-size: 25px;
  }

  .address,
  .target-line {
    font-size: 17px;
  }
}

@media (max-width: 420px) {
  .header-inner {
    min-height: 178px;
    padding: 28px 20px 24px;
  }

  .hero-copy {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .hero-copy::before {
    width: 58px;
    height: 66px;
  }

  h1 {
    font-size: 29px;
  }

  .site-header .updated {
    font-size: 15px;
    white-space: nowrap;
  }

  .site-header .updated::before {
    width: 24px;
    height: 24px;
  }

  .quick-actions button {
    min-height: 164px;
    font-size: 23px;
  }

  .date-time,
  .site-name {
    font-size: 29px;
  }
}

/* 2026-07-07 feedback fix: remove unused header icon, collapse notice, and use a card detail screen. */
.notice-trigger,
.route-visual {
  display: none !important;
}

body.detail-open {
  overflow: hidden;
}

.notice {
  cursor: default;
}

.notice.is-collapsed {
  min-height: 72px;
  cursor: pointer;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}

.notice.is-collapsed::after {
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  background-size: 28px 28px;
}

.notice.is-collapsed strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  margin: 0;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

.notice.is-collapsed p,
.notice.is-collapsed .notice-close {
  display: none;
}

.notice.is-collapsed::before {
  display: block;
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 12px;
  height: 12px;
  border-right: 3px solid #9a4f05;
  border-bottom: 3px solid #9a4f05;
  background: transparent;
  content: "";
  transform: rotate(45deg);
}

.filter-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.empty-actions button::after {
  display: none !important;
}

.site-card {
  cursor: pointer;
}

.site-card:focus-visible {
  outline: 3px solid #efbf5f;
  outline-offset: 3px;
}

/* 2026-08-20 public logo and notice popup. */
.hero-copy::before {
  display: none !important;
  content: none !important;
}

.site-logo {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 74px;
  height: 84px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.notice[hidden] {
  display: none !important;
}

.notice {
  position: fixed !important;
  z-index: 1000 !important;
  inset: 50% auto auto 50% !important;
  display: none !important;
  width: min(520px, calc(100vw - 32px));
  max-width: none !important;
  margin: 0 !important;
  border: 1px solid #f0c777;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf8, #fff7e8);
  box-shadow: 0 24px 60px rgba(31, 47, 43, 0.26), 0 0 0 100vmax rgba(21, 32, 37, 0.42);
  padding: 24px;
  transform: translate(-50%, -50%) !important;
}

.notice.is-open {
  display: grid !important;
  gap: 14px;
}

.notice::before {
  display: none !important;
}

.notice.is-collapsed {
  display: none !important;
}

body.notice-open {
  overflow: hidden;
}

@media (max-width: 420px) {
  .site-logo {
    width: 58px;
    height: 66px;
  }

  .notice {
    padding: 20px;
  }
}

.primary-card-actions {
  position: static !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
  background: transparent !important;
  padding: 0 !important;
}

.map-action,
.copy-action {
  min-width: 0;
  white-space: nowrap;
  padding-inline: 10px;
}

.result-area .section-heading h2 {
  font-size: 30px;
}

.result-area .section-heading h2::before {
  width: 40px;
  height: 40px;
  background-size: 26px 26px;
}

.summary {
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.55;
}

.date-time {
  font-size: 28px;
  padding: 18px 20px;
  white-space: normal;
  flex-wrap: wrap;
  row-gap: 4px;
}

.date-time .date-label,
.date-time .time-label {
  min-width: 0;
  white-space: nowrap;
}

.date-time::before {
  width: 36px;
  height: 36px;
}

.site-card-body {
  padding: 18px 20px 20px;
}

.site-name {
  font-size: 28px;
  line-height: 1.25;
}

.badge {
  min-height: 30px;
  font-size: 15px;
}

.address,
.target-line {
  font-size: 18px;
}

.map-action,
.copy-action,
.queue-action {
  font-size: 18px;
}

.site-detail-modal[hidden] {
  display: none;
}

.site-detail-modal {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  background: rgba(7, 27, 58, 0.46);
}

/* 2026-09-11 desktop share dialog. */
body.share-open {
  overflow: hidden;
}

.share-dialog[hidden] {
  display: none;
}

.share-dialog {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 27, 58, 0.58);
}

.share-dialog-panel {
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid #cddbeb;
  border-radius: 18px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(7, 27, 58, 0.28);
}

.share-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.share-dialog-heading h2 {
  margin: 0;
  color: #082a5a;
  font-size: 26px;
}

.share-dialog-close {
  min-height: 44px;
  border-color: #cfdceb;
  background: #fff;
  color: #075ab8;
  box-shadow: none;
}

.share-site-preview {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  border-left: 5px solid #0b67c7;
  background: #f2f7fd;
  padding: 14px 16px;
}

.share-site-preview strong {
  color: #071b3a;
  font-size: 19px;
}

.share-site-preview span {
  color: #53657c;
  font-size: 15px;
}

.share-link-field {
  display: block;
  margin-top: 20px;
  color: #263b57;
  font-weight: 800;
}

.share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 8px;
}

.share-link-row input {
  min-width: 0;
  background: #fff;
}

.share-link-row button {
  white-space: nowrap;
}

.share-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.share-option {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 112px;
  border: 1px solid #cddbeb;
  border-radius: 14px;
  background: #fff;
  padding: 14px 10px;
  color: #082a5a;
  font: inherit;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

.share-option:hover,
.share-option:focus-visible {
  border-color: #0b67c7;
  background: #f2f7fd;
  transform: none;
}

.share-option-mark {
  display: grid;
  place-items: center;
  min-width: 56px;
  min-height: 42px;
  border-radius: 12px;
  background: #e8f2ff;
  color: #075ab8;
  font-size: 14px;
  font-weight: 950;
}

.share-option-line .share-option-mark {
  background: #e4f8e9;
  color: #087f35;
}

.share-option-email .share-option-mark {
  background: #fff1df;
  color: #a85000;
}

.share-dialog-status {
  min-height: 24px;
  margin: 14px 0 0;
  color: #087f35;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 620px) {
  .share-dialog {
    padding: 14px;
  }

  .share-dialog-panel {
    padding: 18px;
  }

  .share-link-row,
  .share-options {
    grid-template-columns: 1fr;
  }

  .share-option {
    min-height: 72px;
  }
}

.site-detail-panel {
  width: min(720px, 100%);
  min-height: 100%;
  margin-inline: auto;
  overflow-y: auto;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 58%, #eef8f2 100%);
  padding: 18px 18px 118px;
}

.detail-back {
  min-height: 48px;
  border-color: #cfdceb;
  background: #fff;
  color: #075ab8;
  box-shadow: none;
}

#siteDetailTitle {
  margin: 18px 0 16px;
  font-size: 30px;
}

.detail-hero {
  border-radius: 18px;
  background: linear-gradient(180deg, #e8f4ff, #ffffff);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.detail-hero p,
.detail-hero h3 {
  margin: 0;
}

.detail-date {
  color: #075ab8;
  font-size: 22px;
  font-weight: 900;
}

.detail-time {
  color: #075ab8;
  font-size: 30px;
  font-weight: 950;
}

.detail-hero h3 {
  margin-top: 12px;
  color: #082a5a;
  font-size: 30px;
  line-height: 1.25;
}

.detail-address {
  margin-top: 10px !important;
  color: #172235;
  font-size: 18px;
  font-weight: 800;
}

.detail-info-card {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.detail-info-card > div {
  border: 1px solid #d8e5f3;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
}

.detail-info-card .field-name {
  color: #5d6b7f;
  font-size: 14px;
}

.detail-info-card .field-value {
  color: #071b3a;
  font-size: 18px;
  font-weight: 850;
}

.detail-action-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(720px, 100%);
  border-top: 1px solid #d8e5f3;
  background: rgba(255, 255, 255, 0.96);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

.detail-action-bar a,
.detail-action-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 10px;
  font-weight: 900;
  text-decoration: none;
}

.detail-action-bar a {
  border: 1px solid #075ab8;
  background: linear-gradient(180deg, #116bd0, #074b9d);
  color: #fff;
}

.detail-action-bar .queue-action {
  grid-column: 1 / -1;
}

.site-footer {
  max-width: none;
  border-top: 1px solid #d8e5f3;
  background: #eef6ff;
  color: #082a5a;
  text-align: center;
}

.site-footer p:first-child {
  color: #075ab8;
  font-size: 18px;
  font-weight: 950;
}

@media (min-width: 768px) {
  .filter-buttons {
    grid-column: span 3;
  }

  .site-detail-panel {
    min-height: auto;
    height: min(90vh, 860px);
    margin-block: 5vh;
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .result-area .section-heading {
    grid-template-columns: 1fr;
  }

  .result-area .section-heading h2 {
    font-size: 28px;
  }

  .date-time,
  .site-name {
    font-size: 25px;
  }

  .date-time {
    font-size: clamp(18px, 5.05vw, 21px);
    letter-spacing: 0;
    padding-right: 12px;
    padding-left: 16px;
  }

  .date-time::before {
    width: 28px;
    height: 28px;
  }

  .address,
  .target-line,
  .map-action,
  .copy-action {
    font-size: 16px;
  }

  .target-line {
    grid-template-columns: 30px max-content minmax(0, 1fr);
    align-items: start;
  }

  .map-action::before,
  .copy-action::before {
    width: 22px;
    height: 22px;
  }
}

/* 2026-09-01 public query layout refinement. */
.hero-copy {
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 14px;
}

.site-logo {
  width: 92px;
  height: 102px;
}

.site-header .updated {
  min-height: 28px;
  margin-top: 4px;
  padding: 0;
  font-size: 15px;
}

.site-header .updated::before {
  width: 22px;
  height: 22px;
  margin-right: 6px;
}

.advanced-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.advanced-actions button {
  min-width: 0;
  padding-inline: 4px;
  font-size: clamp(12px, 2.6vw, 16px);
  white-space: nowrap;
}

.result-area {
  border-top: 3px solid #075ab8;
  border-radius: 18px;
  padding-top: 18px;
}

.result-area > .section-heading {
  margin-bottom: 16px;
  border: 1px solid #c8d8ea;
  border-top: 4px solid #075ab8;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef6ff, #ffffff);
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(7, 46, 92, 0.08);
}

.result-area > .section-heading .summary {
  margin-top: 6px;
}

@media (max-width: 767px) {
  .hero-copy {
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 12px;
  }

  .site-logo {
    width: 78px;
    height: 88px;
  }

  .site-header .updated {
    margin-top: 2px;
    font-size: 14px;
  }

  .result-area {
    padding-top: 14px;
  }
}

@media (max-width: 420px) {
  .hero-copy {
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 10px;
  }

  .site-logo {
    width: 76px;
    height: 86px;
  }

  .site-header .updated {
    font-size: 13px;
  }

  .advanced-actions {
    gap: 6px;
  }

  .advanced-actions button {
    font-size: 12px;
  }
}

/* 2026-09-01 public result summary two-line layout. */
.result-area > .section-heading .summary {
  display: block;
  width: 100%;
  white-space: pre-line;
}