/* Site styles. Mantine supplies the components and the theme variables (public/vendor/mantine/mantine.css).
   The Mantine rules are in "@layer mantine". These rules are not in a layer, so they win. */
:root {
  color-scheme: light;
  --header-height: 64px;
}

[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mantine-color-gum-7); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--mantine-color-white); padding: 8px 12px; }
.skip-link:focus { left: 8px; }

/* Header: the menu button on the left, the logo in the middle, and the sign-in or account button on the right.
   The two outer columns have the same width, so the logo stays in the centre. */
.site-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  height: var(--header-height); padding: 0 8px;
  background: var(--mantine-color-ink-7); color: var(--mantine-color-ink-0);
}
.site-header :focus-visible, .site-menu :focus-visible { outline-color: var(--mantine-color-ink-0); }
.site-logo { display: block; line-height: 0; }
.site-logo img { display: block; width: auto; height: clamp(26px, 8vw, 38px); }
.account { justify-self: end; }
/* The account button opens the account drawer. A phone shows the avatar only. A wider screen also shows the name. */
.account-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px; border-radius: 999px;
  color: var(--mantine-color-ink-0); font-size: 0.95rem; font-weight: 600;
}
.account-button:hover { background: rgb(255 255 255 / 0.08); }
.account-name { display: none; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 600px) {
  .account-button { padding-right: 14px; }
  .account-name { display: block; }
}
/* The red sign-in button. Narrow padding keeps the logo in the centre on a 320px phone.
   Mantine sets the size variables inline, so these rules set the properties directly. */
.account .mantine-Button-root { height: 40px; padding-inline: 12px; }

/* The Mantine Burger, with a 44px touch target. */
.site-header .mantine-Burger-root, .site-menu .mantine-Burger-root {
  --burger-color: var(--mantine-color-ink-0);
  width: 44px; height: 44px; padding: 10px; border-radius: var(--mantine-radius-md);
}
.site-header .mantine-Burger-root:hover, .site-menu .mantine-Burger-root:hover { background: rgb(255 255 255 / 0.08); }

/* The menu and the account drawer are native popovers. Each covers the page with a dim layer.
   The menu panel slides in from the left, and the account panel slides in from the right.
   Each close button sits where its open button is. */
.site-menu, .account-drawer {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgb(11 9 8 / 0.6);
}
.site-menu-panel {
  width: min(86vw, 340px); height: 100%; padding: 0 16px 24px; overflow-y: auto;
  background: var(--mantine-color-ink-7); color: var(--mantine-color-ink-0);
}
html:has(.site-menu:popover-open, .account-drawer:popover-open) { overflow: hidden; }
.site-menu-top { display: flex; align-items: center; height: var(--header-height); margin-left: -8px; }
.site-menu-links { margin: 8px 0 24px; padding: 0; list-style: none; }
.site-menu-links a {
  display: flex; align-items: center; min-height: 52px; padding: 0 12px; border-radius: var(--mantine-radius-md);
  color: var(--mantine-color-ink-0); text-decoration: none;
  font: 800 1.4rem/1.1 var(--mantine-font-family-headings);
}
.site-menu-links a:hover { background: rgb(255 255 255 / 0.08); }
.site-menu-links a[aria-current="page"] { color: var(--mantine-color-ember-4); }

/* The account drawer: a light panel with the name, the email, the things a signed-in person can do,
   and the sign-out button at the bottom. */
.account-panel {
  display: flex; flex-direction: column; width: min(86vw, 360px); height: 100%; margin-left: auto;
  padding: 0 16px 24px; overflow-y: auto;
  background: var(--mantine-color-white); color: var(--mantine-color-ink-7);
}
.account-top { display: flex; align-items: center; justify-content: flex-end; height: var(--header-height); margin-right: -8px; }
.account-identity { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--mantine-color-ink-1); }
.account-details { min-width: 0; }
.account-full-name { margin: 0; font: 800 1.25rem/1.2 var(--mantine-font-family-headings); overflow-wrap: anywhere; }
.account-email { margin: 2px 0 0; color: var(--mantine-color-dimmed); font-size: 0.9rem; overflow-wrap: anywhere; }
.account-links { margin: 12px 0 24px; padding: 0; list-style: none; }
.account-links a {
  display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--mantine-radius-md);
  color: inherit; font-weight: 600; text-decoration: none;
}
.account-links a:hover { background: var(--mantine-color-default-hover); }
.account-links a[aria-current="page"] { color: var(--mantine-color-ember-7); }
.account-link-hint { color: var(--mantine-color-dimmed); font-size: 0.875rem; font-weight: 400; }
.account-panel form { margin-top: auto; }

@media (prefers-reduced-motion: no-preference) {
  .site-menu, .account-drawer { transition: opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete; }
  .site-menu-panel, .account-panel { transition: translate 0.25s ease; }
  .site-menu:not(:popover-open), .account-drawer:not(:popover-open) { opacity: 0; }
  .site-menu:not(:popover-open) .site-menu-panel { translate: -100% 0; }
  .account-drawer:not(:popover-open) .account-panel { translate: 100% 0; }
  @starting-style {
    .site-menu:popover-open, .account-drawer:popover-open { opacity: 0; }
    .site-menu:popover-open .site-menu-panel { translate: -100% 0; }
    .account-drawer:popover-open .account-panel { translate: 100% 0; }
  }
}

.flash .mantine-Alert-message { text-align: center; font-weight: 600; }

/* What's on: the map is first on a phone, and beside the list on a desktop. */
.whatson { display: flex; flex-direction: column; }
.map-panel { position: relative; height: 42vh; min-height: 260px; background: var(--mantine-color-gum-1); }
#map { width: 100%; height: 100%; }
.map-fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; color: var(--mantine-color-gum-7); font-weight: 500; text-align: center; }
.list-panel { padding: 20px 16px 40px; min-width: 0; }

.filters { margin: 0 0 20px; gap: 8px; }
/* Narrow padding keeps the time tabs and "Find local" on one row on a 360px phone. */
.filters .mantine-Button-root { padding-inline: 10px; }
.find-local .mantine-Button-section { margin-inline-end: 6px; }
/* The "Find local" button shows when the browser does not know the locality. The distance link shows when it does.
   An inline script in src/views/home.tsx sets data-locality before the first paint. */
.within { display: none; }
html[data-locality] .within { display: inline-block; }
html[data-locality] .find-local { display: none; }
.within {
  min-height: 42px; padding: 0 4px; line-height: 42px;
  color: var(--mantine-color-ember-8); font-size: var(--mantine-font-size-md); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}

/* The distance sheet is a native popover. It covers the page with a dim layer.
   Its panel comes up from the bottom on a phone, and shows in the middle on a desktop. */
.sheet {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgb(11 9 8 / 0.6);
}
.sheet:popover-open { display: flex; align-items: flex-end; justify-content: center; }
.sheet-panel {
  width: 100%; max-width: 440px; padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0; background: var(--mantine-color-white);
}
html:has(.sheet:popover-open) { overflow: hidden; }
.sheet-title { margin-bottom: 14px; }
.radius-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.radius-options .mantine-Button-root { padding-inline: 0; }
.radius-options .mantine-Button-root[aria-pressed="true"] {
  border-color: var(--mantine-color-ink-7); background: var(--mantine-color-ink-7); color: var(--mantine-color-ink-0);
}
.change-locality { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--mantine-color-ember-8); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .sheet { transition: opacity 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete; }
  .sheet-panel { transition: translate 0.2s ease; }
  .sheet:not(:popover-open) { opacity: 0; }
  .sheet:not(:popover-open) .sheet-panel { translate: 0 100%; }
  @starting-style {
    .sheet:popover-open { opacity: 0; }
    .sheet:popover-open .sheet-panel { translate: 0 100%; }
  }
}

/* What's on list: plain rows with a thin line between them, and no boxes. */
.day { margin-bottom: 28px; }
.day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; border-bottom: 1.5px solid var(--mantine-color-ink-7);
}
.day-heading { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.day-heading span { color: var(--mantine-color-dimmed); font: 500 0.9rem var(--mantine-font-family); }
.day-count { flex: none; color: var(--mantine-color-dimmed); font-size: 0.9rem; }
.mic-rows { margin: 0; padding: 0; list-style: none; }
.mic-row { position: relative; padding: 14px 0; border-bottom: 1px solid var(--mantine-color-ink-1); }
.mic-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mic-distance { flex: none; color: var(--mantine-color-dimmed); font-size: 0.95rem; white-space: nowrap; }
/* The body leaves room for the chevron on the right. */
.mic-body { padding-right: 32px; }
.mic-chevron { position: absolute; right: 0; top: 50%; translate: 0 -50%; color: var(--mantine-color-ink-7); pointer-events: none; }
/* The title link covers the whole row. "Show on map" sits above the link, so it stays a separate button. */
.row-link { color: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.row-link:focus-visible { outline: none; }
.mic-row:has(.row-link:focus-visible) { outline: 3px solid var(--mantine-color-gum-7); outline-offset: 2px; }
.mic-row .show-on-map { position: relative; z-index: 1; }
.mic-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.mic-card { padding: 12px 16px; background: var(--mantine-color-white); }
.mic-time { color: var(--mantine-color-ember-8); font-weight: 600; font-size: 0.95rem; }
.card-title { margin: 2px 0; }
.card-title a { color: var(--mantine-color-text); }
.mic-where { color: var(--mantine-color-dimmed); font-size: 0.95rem; }
.mic-note { color: var(--mantine-color-gum-7); font-size: 0.9rem; font-weight: 600; }
.show-on-map { min-height: 32px; padding-top: 4px; color: var(--mantine-color-ember-8); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 2px; }
.card-action { margin-top: 10px; }

.empty { padding: 24px 0; }

.info-window { padding-right: 12px; color: var(--mantine-color-text); font: 400 14px/1.4 var(--mantine-font-family); }
.info-window a { display: block; margin-bottom: 2px; color: var(--mantine-color-ember-8); font: 800 16px/1.2 var(--mantine-font-family-headings); }
.info-window .home-label { color: var(--mantine-color-dimmed); font-size: 13px; }
.info-window .home-name { margin-bottom: 8px; font: 800 16px/1.2 var(--mantine-font-family-headings); }
.info-window a.map-change {
  display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0 16px; border-radius: var(--mantine-radius-md);
  background: var(--mantine-color-ember-7); color: var(--mantine-color-white); font: 600 14px var(--mantine-font-family); text-decoration: none;
}
.info-window a.map-change:hover { background: var(--mantine-color-ember-8); }
/* The house on the map at the stored locality. It shows above the pins, and a popup shows above the house. */
.maplibregl-popup { z-index: 2; }
.home-marker {
  z-index: 1;
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--mantine-color-white); border-radius: 50%;
  background: var(--mantine-color-ink-7); color: var(--mantine-color-ink-0); box-shadow: 0 2px 6px rgb(0 0 0 / 0.35); cursor: pointer;
}

/* Narrow pages */
.narrow { padding-top: 24px; padding-bottom: 56px; }
.narrow > h2 { margin-top: 32px; margin-bottom: 12px; }
.back { margin-bottom: 16px; }
.lede { margin-top: 8px; color: var(--mantine-color-dimmed); font-size: 1.1rem; }
.hint { color: var(--mantine-color-dimmed); font-size: 0.875rem; }
.note, .form-error { margin: 12px 0; }
.description { margin-top: 12px; white-space: pre-line; }
article .hint, .actions { margin-top: 16px; }
.badge { margin-bottom: 6px; text-transform: none; }
.narrow > .mic-list { margin: 16px 0 0; }

.facts { margin-top: 20px; border-top: 2px solid var(--mantine-color-ink-7); font-size: var(--mantine-font-size-md); }
.facts th { width: 112px; vertical-align: top; background: none; }
.facts td { overflow-wrap: anywhere; }
.next-dates { margin: 0; padding: 0; list-style: none; }
.next-dates li + li { margin-top: 4px; }

/* Forms */
.mic-form { margin-top: 20px; }
.mic-form > fieldset { margin: 0 0 24px; }
.mic-form > fieldset > legend {
  width: 100%; margin-bottom: 14px; padding-bottom: 6px;
  border-bottom: 2px solid var(--mantine-color-ink-7);
  font: 800 1.25rem var(--mantine-font-family-headings);
}
.mic-form .mantine-InputWrapper-root, .mic-form .checks { margin-bottom: 14px; }
.checks { margin-inline: 0; }
.mantine-InputWrapper-label, .checks > legend { font-weight: 600; }
.checks > legend { margin-bottom: 8px; padding: 0; font-size: var(--mantine-font-size-md); }
.optional { color: var(--mantine-color-dimmed); font-weight: 400; }
#venue-search gmp-place-autocomplete, #locality-search gmp-place-autocomplete { width: 100%; color-scheme: light; }
#venue-status, #locality-status { margin-top: 4px; }
.locality-field { margin-top: 24px; }

.login-options { max-width: 400px; margin-top: 20px; }
/* The light theme from the Google branding guidelines: a white fill, a 1px #747775 border,
   #1F1F1F text in Roboto Medium 14/20, and the standard colour "G" at 20px.
   The right margin on the text balances the logo, so the text is in the centre of the button. */
.google-button {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
  background: #fff; border: 1px solid #747775; border-radius: 4px;
  color: #1f1f1f; font: 500 14px/20px Roboto, Arial, sans-serif; letter-spacing: 0.25px;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.218s, box-shadow 0.218s;
}
.google-button-logo { flex: none; width: 20px; height: 20px; }
.google-button > span { flex: 1; margin-right: 32px; overflow: hidden; text-align: center; text-overflow: ellipsis; }
.google-button:hover {
  background: color-mix(in srgb, #303030 8%, #fff);
  box-shadow: 0 1px 2px 0 rgb(60 64 67 / 0.3), 0 1px 3px 1px rgb(60 64 67 / 0.15);
}
.google-button:active { background: color-mix(in srgb, #303030 12%, #fff); }
.dev-login { margin-top: 32px; padding: 16px; border: 1.5px dashed var(--mantine-color-dimmed); }
.dev-login h2 { font-size: 1.1rem; }

/* Admin */
.review-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.reject-form { display: flex; gap: 8px; flex: 1 1 260px; }
.reject-form .mantine-InputWrapper-root { flex: 1; }
.admin-rows { margin-top: 12px; }
.row-action { text-align: right; white-space: nowrap; }

@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; z-index: 5; padding: 0 16px; }
  .site-menu-top { margin-left: 0; }
  .account-top { margin-right: 0; }
  .sheet:popover-open { align-items: center; }
  .sheet-panel { border-radius: 16px; padding-bottom: 20px; }
  .whatson { flex-direction: row-reverse; align-items: flex-start; }
  .list-panel { flex: 0 0 440px; padding: 28px 24px 56px; }
  .map-panel {
    flex: 1 1 auto; position: sticky; top: var(--header-height);
    height: calc(100vh - var(--header-height));
  }
}