@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; }

@layer components {
  .paragraph, .trix-content {
    @apply dark:text-neutral-300 text-neutral-900;
  }
  .logo {
    @apply text-3xl font-serif text-emerald-800 dark:text-emerald-400;
  }
  .serif-h1 {
    @apply text-3xl font-serif text-neutral-900 dark:text-neutral-100 sm:text-5xl;
  }
  .subhead-p {
    @apply mt-2 text-sm font-light text-neutral-600 dark:text-neutral-400;
  }
  .btn-primary {
    @apply flex items-center gap-x-1 rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 cursor-pointer;
  }
  /* The public site's call to action: cream on the dark green background, as
     the nav's "Free body corporate audit" button has always been. Kept to the
     same tokens as those so the two read as one thing, and to .btn-primary's
     padding so it measures the same 36px. */
  /* Disabled fades the cream toward the background rather than darkening it —
     the deeper ecru shades go brown, which reads as a different button rather
     than this one switched off. disabled:hover is spelled out because :hover
     still matches a disabled control. */
  .btn-ecru {
    @apply inline-flex items-center gap-x-1 rounded-md bg-ecru-200 px-3 py-2 text-sm font-semibold text-emerald-950 shadow-sm hover:bg-ecru-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ecru-200 disabled:bg-ecru-200/20 disabled:text-ecru-100/50 disabled:shadow-none disabled:cursor-not-allowed disabled:hover:bg-ecru-200/20 cursor-pointer;
  }
  /* The unfilled counterpart to .btn-ecru, for the secondary half of a pair like
     Back beside Continue. Colours are the homepage hero's "Book a consult"
     button; the sizing is .btn-ecru's, so the two sit level rather than the
     hero's larger px-3.5/py-2.5. An inset ring stands in for that button's
     border for the same reason — a border would add 2px of height and knock the
     pair out of line. */
  .btn-outline {
    @apply inline-flex items-center gap-x-1 rounded-md px-3 py-2 text-sm font-semibold text-ecru-100 ring-1 ring-inset ring-ecru-200/50 hover:bg-ecru-200/10 hover:ring-ecru-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ecru-200 cursor-pointer;
  }
  .btn-secondary {
    @apply inline-flex items-center rounded-md bg-white dark:bg-neutral-800 px-3 py-2 text-sm font-semibold text-neutral-900 dark:text-neutral-100 shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer;
  }
  .btn-tertiary {
    @apply inline-flex items-center rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 cursor-pointer;
  }
  .btn-cancel {
    @apply rounded-md bg-white dark:bg-neutral-800 px-3 py-2 text-sm font-semibold text-neutral-900 dark:text-neutral-100 shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer;
  }
  .pill-ecru {
    @apply inline-flex items-center rounded-md bg-ecru-100 dark:bg-ecru-800 px-2 py-1 text-xs font-sans font-medium text-ecru-600 dark:text-ecru-300;
  }
  .pill-eggplant {
    @apply inline-flex items-center rounded-md bg-eggplant-100 dark:bg-eggplant-800 px-2 py-1 text-xs font-sans font-medium text-eggplant-600 dark:text-eggplant-300;
  }
  .pill-emerald {
    @apply inline-flex items-center rounded-md bg-emerald-100 dark:bg-emerald-900 px-2 py-1 text-xs font-sans font-medium text-emerald-600 dark:text-emerald-300;
  }
  .pill-amber {
    @apply inline-flex items-center rounded-md bg-amber-100 dark:bg-amber-900 px-2 py-1 text-xs font-sans font-medium text-amber-600 dark:text-amber-300;
  }
  .pill-red {
    @apply inline-flex items-center rounded-md bg-red-100 dark:bg-red-900 px-2 py-1 text-xs font-sans font-medium text-red-600 dark:text-red-300;
  }
  .pill-blue {
    @apply inline-flex items-center rounded-md bg-blue-100 dark:bg-blue-900 px-2 py-1 text-xs font-sans font-medium text-blue-600 dark:text-blue-300;
  }
  .pill-orange {
    @apply inline-flex items-center rounded-md bg-orange-100 dark:bg-orange-900 px-2 py-1 text-xs font-sans font-medium text-orange-600 dark:text-orange-300;
  }
  .pill-purple {
    @apply inline-flex items-center rounded-md bg-purple-100 dark:bg-purple-900 px-2 py-1 text-xs font-sans font-medium text-purple-600 dark:text-purple-300;
  }
  .pill-neutral {
    @apply inline-flex items-center rounded-md bg-neutral-100 dark:bg-neutral-800 px-2 py-1 text-xs font-sans font-medium text-neutral-600 dark:text-neutral-300;
  }

  .tab {
    @apply flex whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium;
  }
  .tab-active {
    @apply border-emerald-500 text-emerald-600 dark:text-emerald-400;
  }
  .tab-inactive {
    @apply border-transparent text-neutral-500 dark:text-neutral-400 hover:border-neutral-500 dark:hover:border-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200;
  }
  /* Inactive tab appearance without the hover state, for non-clickable section headings. */
  .tab-heading {
    @apply border-transparent text-neutral-500 dark:text-neutral-400;
  }
  .tab-badge {
    @apply ml-3 hidden rounded-full py-0.5 px-2.5 text-xs font-medium md:inline-block;
  }
  .tab-badge-active {
    @apply bg-emerald-100 dark:bg-emerald-900 text-emerald-600 dark:text-emerald-300;
  }
  .tab-badge-inactive {
    @apply bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100;
  }
  .index-list-item {
    @apply flex flex-wrap items-center justify-between gap-x-6 gap-y-4 py-4 sm:flex-nowrap;
  }
  .index-list-title {
    @apply text-2xl font-serif leading-tight text-neutral-900 dark:text-neutral-100;
  }
  .index-list-subtitle {
    @apply mt-1 text-sm leading-5 text-neutral-600 dark:text-neutral-400 font-light;
  }
  .divided-list {
    @apply divide-y divide-neutral-200 dark:divide-neutral-700;
  }
  .index-tabs {
    @apply border-b border-neutral-200 dark:border-neutral-700;
  }

  .label {
    @apply block text-sm font-medium leading-6 text-neutral-900 dark:text-neutral-100 mb-2;
  }
  .input {
    @apply block w-full rounded-md border-0 py-1.5 text-neutral-900 dark:text-neutral-100 dark:bg-neutral-800 shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6;
  }
  .public-label {
    @apply block text-sm font-medium leading-6 text-white mb-2;
  }
  .public-input {
    @apply min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 placeholder:text-neutral-300 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6
  }
  /* Google's address autocomplete is a web component that draws its own field
     inside whatever we put around it, so the two halves have to be told apart.

     The face it draws is read off the `color-scheme` it inherits. Nothing here
     set one, so it fell through to the operating system's — which is how a
     black search box ended up on a white admin page the moment the two
     disagreed. It follows the app's own theme now, and the public forms are
     pinned to dark: they sit on the dark marketing ground whatever the
     visitor's system says. */
  gmp-place-autocomplete {
    color-scheme: light;
  }
  .dark gmp-place-autocomplete {
    color-scheme: dark;
  }
  gmp-place-autocomplete.address-public {
    color-scheme: dark;
  }

  /* Inside the app, .input supplies the box and the widget's own chrome stands
     down: no padding of ours around a field that is already 48px tall, and no
     second focus ring inside the one .input draws — the shadow root delegates
     focus, so the host lights up as well and both were being drawn at once.
     Type is set here rather than inherited because the widget ships its own
     16px, which is a size nothing else on these pages uses. */
  gmp-place-autocomplete.input {
    padding: 0;
  }
  gmp-place-autocomplete.input::part(input) {
    color: inherit;
    font-size: 0.875rem;
    line-height: 1.5rem;
  }
  gmp-place-autocomplete.input::part(focus-ring) {
    border-color: transparent;
  }

  select.input:disabled {
    @apply text-neutral-500 dark:text-neutral-400;
  }
  input.input:disabled {
    @apply bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 cursor-not-allowed;
  }

  .attributes-dl {
    @apply border-t border-b border-neutral-200 dark:border-neutral-700 mb-4 mt-8;
  }
  .attributes-grid {
    @apply py-4 grid grid-cols-4 sm:gap-4;
  }
  .attributes-dt {
    @apply text-sm font-medium text-neutral-900 dark:text-neutral-100;
  }
  .attributes-dd {
    @apply mt-1 text-sm leading-6 text-neutral-700 dark:text-neutral-300 col-span-3 sm:mt-0;
  }
  .copy-button {
    @apply inline-flex items-center justify-center align-middle text-neutral-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors cursor-pointer;
  }
  .hint {
    @apply mb-2 text-sm text-neutral-500 dark:text-neutral-400;
  }
  .max-w-container {
    @apply mx-auto max-w-2xl;
  }

  .activetext-content {
    @apply text-lg;

  }
  .activetext-content a, .paragraph a {
    @apply text-emerald-600 dark:text-emerald-400 underline;
  }
  /* Blog posts sit on a fixed-light background, so keep rich text readable in dark mode */
  .activetext-content .trix-content {
    @apply dark:text-neutral-900;
  }
  .activetext-content a {
    @apply dark:text-emerald-600;
  }
  .activetext-content ul { list-style: disc; }
  .activetext-content ol { list-style: decimal; }
  .trix-content ul { list-style: disc; @apply pl-6; }
  .trix-content ol { list-style: decimal; @apply pl-6; }
  .trix-content > div, .trix-content > blockquote, .trix-content > p, .trix-content > ul, .trix-content > ol, .paragraph {
    @apply mb-4;
  }
  .trix-content > ul > li, .trix-content > ol > li {
    @apply mb-2;
  }
  /* Heading scale for rendered content — mirrors the Lexxy editor's prominence so posts
     publish the way they look while editing. Colour is inherited (not hard-set) so post
     headings stay dark on the fixed-light blog background even in dark mode, and follow
     the theme in chat/minutes. Lexxy's toolbar emits h2 (Large) / h3 (Medium) / h4 (Small);
     h1 comes from the "# " markdown shortcut. Post body is text-lg, so h4 sits at body size
     but bold to stay distinct. */
  .trix-content > h1 {
    @apply pt-3 text-[2rem] font-bold leading-tight mb-4;
  }
  .trix-content > h2 {
    @apply pt-3 text-2xl font-bold leading-tight mb-4;
  }
  .trix-content > h3 {
    @apply pt-3 text-xl font-semibold leading-snug mb-4;
  }
  .trix-content > h4, .trix-content > h5, .trix-content > h6 {
    @apply pt-2 text-lg font-semibold leading-snug mb-3;
  }
  .trix-content table {
    @apply border border-neutral-300 dark:border-neutral-600 rounded-md;
  }
  .trix-content th {
    @apply text-base text-left py-2 px-2 font-semibold;
  }
  .trix-content td {
    @apply text-base border-t border-neutral-300 dark:border-neutral-600 py-2 px-2;
  }
  .trix-content td + td, .trix-content th + th {
    @apply border-l border-neutral-300 dark:border-neutral-600;
  }
  .trix-content strong {
    @apply font-semibold;
  }

  /* Base prose styles for rich content (posts) and rendered markdown (chat, minutes).
     Replaces the base styles Trix's stylesheet used to supply, now that Trix is gone. */
  .trix-content {
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .trix-content li {
    margin-left: 1em;
  }
  .trix-content a {
    @apply text-emerald-600 dark:text-emerald-400 underline;
  }
  .trix-content blockquote {
    @apply border-l-4 border-neutral-300 dark:border-neutral-600 pl-3 my-4 text-neutral-600 dark:text-neutral-400;
  }
  .trix-content pre {
    @apply block w-full overflow-x-auto rounded-md bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 p-3 my-4 text-sm;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    white-space: pre;
  }
  .trix-content code {
    @apply rounded bg-neutral-100 dark:bg-neutral-800 px-1 py-0.5 text-sm;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  }
  .trix-content pre code {
    @apply bg-transparent p-0 text-sm;
  }
  .trix-content hr {
    @apply my-4 border-t border-neutral-300 dark:border-neutral-600;
  }
  .trix-content img {
    max-width: 100%;
    height: auto;
  }

  /* Action Text attachments embedded in posts (Lexxy emits the same canonical markup as Trix). */
  .trix-content .attachment {
    @apply inline-block relative max-w-full;
  }
  .trix-content .attachment a {
    @apply no-underline text-inherit;
  }
  .trix-content .attachment--preview {
    @apply w-full text-center;
  }
  .trix-content .attachment__caption {
    @apply text-center text-sm text-neutral-500 dark:text-neutral-400;
  }
  .trix-content .attachment-gallery {
    @apply flex flex-wrap relative;
  }
  .trix-content .attachment-gallery > action-text-attachment,
  .trix-content .attachment-gallery > .attachment {
    @apply px-2;
    flex: 1 0 33%;
    max-width: 33%;
  }
  .trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
  .trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
  .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
  .trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
    flex-basis: 50%;
    max-width: 50%;
  }

  /* Demo animation: cursor blink for typewriter effect */
  .demo-cursor {
    @apply text-emerald-400;
    animation: cursorBlink 0.8s step-end infinite;
  }

  /* Demo prose: dark-mode-friendly markdown styles */
  .demo-prose strong { @apply text-white font-semibold; }
  .demo-prose a { @apply text-emerald-400 underline; }
  .demo-prose h1, .demo-prose h2, .demo-prose h3 { @apply text-white font-semibold; }
  .demo-prose ol, .demo-prose ul { @apply pl-4 space-y-1; }
  .demo-prose ol { list-style-type: decimal; }
  .demo-prose ul { list-style-type: disc; }
  .demo-prose li::marker { color: rgba(255, 255, 255, 0.4); }
  /* Wide tables scroll horizontally inside the narrow chat bubble instead of
     overflowing and getting clipped by the chat window on mobile. */
  .demo-prose table {
    @apply w-full text-xs mt-2 mb-1;
    display: block;
    overflow-x: auto;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
  }
  .demo-prose table::-webkit-scrollbar { display: none; }
  .demo-prose th { @apply text-left text-white/60 font-medium pb-1 pr-3 border-b border-white/10; }
  .demo-prose td { @apply py-1 pr-3 border-b border-white/10 text-white/70; }
  .demo-prose code { @apply bg-white/10 rounded px-1 py-0.5 text-emerald-300 text-xs; }
  .demo-prose p + p { @apply mt-2; }
}

@layer utilities {
  /* Hide the horizontal scrollbar on the mobile demo chips row while keeping it scrollable */
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;            /* Chrome/Safari/Blink */
  }

  /* The homepage's two rows of cards, sliding sideways forever with nothing to
     press. The track holds the same cards twice and travels exactly half its
     own width, so the frame it finishes on is the frame it started on and the
     loop has no seam to see.

     Half the width only lands on the copy if the cards tile evenly, which is
     why the cards carry a right margin instead of the track carrying a gap: a
     gap leaves one half-gap unaccounted for between the two halves, and the
     loop jumps that far every pass.

     Both rows run twelve cards to a half — wider than any screen we'd expect,
     or the row would run out mid-view — so one duration gives both the same
     speed. It works out around 66px a second: quick enough that the row is
     plainly moving, slow enough to read a card on its way past. */
  .card-marquee {
    animation: card-marquee 48s linear infinite;
  }

  /* A card you're reading shouldn't walk away from you. */
  .card-marquee:hover {
    animation-play-state: paused;
  }

  /* The row is decoration around the cards; a reader who has asked for less
     movement gets the cards standing still, which the markup already reads as. */
  @media (prefers-reduced-motion: reduce) {
    .card-marquee {
      animation: none;
    }
  }

  /* Cards arrive and leave rather than being sliced off at the edge of the
     screen. no-repeat matters: a mask image tiles by default, and the second
     tile would fade holes into the middle of the row. */
  .card-marquee-edges {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* Demo keyframe animations */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Half the track's width, which is one full set of cards — see .card-marquee */
@keyframes card-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* The mail drop letter editor.
 *
 * trix.css ships with the editor and styles it for a plain light page, so
 * everything here is either putting it into the admin section's shell or into
 * dark mode. Every rule is scoped under .letter-editor: that keeps it off the
 * rest of the app, and it wins against trix.css on specificity rather than on
 * the order the two stylesheets happen to load in.
 *
 * The content rules are deliberately the same shapes MailDropLetterPdf draws —
 * a heading, paragraphs, lists, a quote, preformatted text — because what the
 * editor shows and what the printer sets have to be the same letter. */
.letter-editor trix-editor {
  @apply block w-full min-h-96 rounded-md border-0 px-3 py-3 text-sm leading-6 text-neutral-900 dark:text-neutral-100 bg-white dark:bg-neutral-800 shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600;
}
.letter-editor trix-editor:focus {
  @apply outline-none ring-2 ring-inset ring-emerald-600;
}
.letter-editor trix-editor h1 {
  @apply mb-2 text-xl font-semibold leading-tight;
}
.letter-editor trix-editor ul,
.letter-editor trix-editor ol {
  @apply my-2 pl-6;
}
.letter-editor trix-editor ul {
  @apply list-disc;
}
.letter-editor trix-editor ol {
  @apply list-decimal;
}
.letter-editor trix-editor blockquote {
  @apply my-2 border-l-2 border-neutral-300 dark:border-neutral-600 pl-4 text-neutral-700 dark:text-neutral-300;
}
.letter-editor trix-editor pre {
  @apply my-2 whitespace-pre-wrap rounded bg-neutral-100 dark:bg-neutral-900 p-2 font-mono text-xs;
}
.letter-editor trix-editor a {
  @apply text-emerald-700 dark:text-emerald-400 underline;
}

.letter-editor trix-toolbar {
  @apply mb-2;
}
.letter-editor trix-toolbar .trix-button-row {
  @apply flex flex-wrap gap-y-2;
}
.letter-editor trix-toolbar .trix-button-group {
  @apply mb-0 rounded-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800;
}
.letter-editor trix-toolbar .trix-button {
  @apply border-l border-neutral-300 dark:border-neutral-600 bg-transparent text-neutral-900 dark:text-neutral-100;
}
.letter-editor trix-toolbar .trix-button:not(:disabled):hover {
  @apply bg-neutral-100 dark:bg-neutral-700;
}
.letter-editor trix-toolbar .trix-button.trix-active {
  @apply bg-emerald-100 dark:bg-emerald-900;
}
/* Trix draws its toolbar icons as black SVG background images, which are
   invisible on a dark button. Inverting them is cheaper than shipping a second
   set, and they are monochrome, so nothing else changes. */
.dark .letter-editor trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}
/* No attachments in a letter: the PDF cannot lay an image out, so the button
   that would offer one goes. letter_editor_controller.js refuses the drag-and-
   drop and paste routes to the same thing. */
.letter-editor trix-toolbar .trix-button-group--file-tools {
  display: none;
}

/* A sheet of mail drop QR codes exists to be printed, so it drops the app
   furniture and lays the codes out in fixed-width columns that survive a page
   break. Codes stay black on white whatever the screen theme — a scanner
   reading an inverted code is not worth the risk. */
@media print {
  .print-hidden {
    display: none !important;
  }

  .qr-sheet {
    background: #ffffff !important;
  }

  /* Forced on the children too: a card in dark mode carries its own colours,
     and inheriting from the card would not reach them. SVG paints through fill
     attributes rather than these, so the codes are left alone. */
  .qr-card,
  .qr-card * {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  .qr-card {
    break-inside: avoid;
    box-shadow: none !important;
    outline: 1px solid #d4d4d4;
  }
}
/*

 */

 @font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.extra.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.alternates.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.symbols.var-59f27012284f5e97bbff303eb599ca98f29629a1c0fe7352bcc15b27d1dcd937.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Italic';
}

/* extra */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.extra.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.alternates.var-cc59cf4b324781109d703309fc7d8814b6ba74dd2822a3c029715da8cb98ea57.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Italic';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.symbols.var-59f27012284f5e97bbff303eb599ca98f29629a1c0fe7352bcc15b27d1dcd937.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Italic';
}
/* cyrillic */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.cyrillic.var-a31159d5ce68b317b19edc7ee7f1f3ffdd5316ee899945b502406abda313afa2.woff2) format('woff2');
  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
  font-named-instance: 'Italic';
}
/* greek */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.greek.var-77ec12f9397b88a29c16c05f2db87d9c0d0c2b157f1980271fed020f00b35321.woff2) format('woff2');
  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
  font-named-instance: 'Italic';
}
/* vietnamese */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.vietnamese.var-b5dc5b6490ba49e8193315ff62c8e90551102055440f084a6e982e5eab8e589a.woff2) format('woff2');
  unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
  font-named-instance: 'Italic';
}
/* latin-ext */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.latin-ext.var-802705fb8496b82eda3f410c7e70a35c9407ba98b97cc5d9754db82750466fad.woff2) format('woff2');
  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
  font-named-instance: 'Italic';
}
/* latin */
@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-italic.latin.var-cbfc0334f8cfad4727431982cd32c32f7daf6e73f0ab6f759ec3dc757c1c6bf7.woff2) format('woff2');
  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
  font-named-instance: 'Italic';
}
/* extra */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.extra.var-29781a209d7978155bf343eb1653779269965fa4a43d504b1fb361ab20e8487b.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Regular';
}
/* alternates */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.alternates.var-29781a209d7978155bf343eb1653779269965fa4a43d504b1fb361ab20e8487b.woff2) format('woff2');
  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
  font-named-instance: 'Regular';
}
/* symbols */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.symbols.var-847d2a436a03ba1fbd4b750915db031a12a713befe0dcd79e8f39bf6a6e1a647.woff2) format('woff2');
  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
  font-named-instance: 'Regular';
}
/* cyrillic */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.cyrillic.var-8aa524d3da3b8fd4a03ff2d0d41ea50520113fb2e8ae57c15079dabea44b3529.woff2) format('woff2');
  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
  font-named-instance: 'Regular';
}
/* greek */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.greek.var-1134a39060691474b0f57b2de5e09977a31a8c06df90960b982314f58a5b4c63.woff2) format('woff2');
  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
  font-named-instance: 'Regular';
}
/* vietnamese */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.vietnamese.var-a10e650090dc30250de0db440654c9bf29a843b233ee95a699b008bab0a6d498.woff2) format('woff2');
  unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
  font-named-instance: 'Regular';
}
/* latin-ext */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.latin-ext.var-46bc23ba7e33ea447579cd95b95f34665d7560377065b72f3a77df8bca4b0e5c.woff2) format('woff2');
  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
  font-named-instance: 'Regular';
}
/* latin */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://quarter.nz/assets/Inter-roman.latin.var-4b87a3d384ea557b10afa9570b753eda868b12b5e51eea0977ffa6e641998f6a.woff2) format('woff2');
  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
  font-named-instance: 'Regular';
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/leaflet/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/leaflet/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(/leaflet/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
/*
 * Lexxy theme overrides.
 *
 * Lexxy is themed entirely through CSS custom properties (see the gem's
 * lexxy-variables.css). This file:
 *   1. Re-points Lexxy's accent to the app's emerald brand (links / focus / selection).
 *   2. Supplies a dark theme, keyed off the `.dark` class the app toggles on <html>
 *      (see app/views/shared/_head.html.erb). Without this the toolbar/canvas render
 *      white-on-dark. Dark values mirror Lexxy's own sandbox reference theme.
 *
 * MUST be loaded AFTER "lexxy" in the stylesheet_link_tag so the light-mode :root
 * overrides win on source order (equal specificity to Lexxy's own :root). The
 * html.dark block wins on specificity regardless of order. Only the base variables
 * need overriding — Lexxy's derived semantic vars (canvas, text, link, selection,
 * code-bg, table…) re-resolve from these.
 */

:root {
  /* Emerald accent to match the app (Tailwind emerald-600/500/200/100). */
  --lexxy-color-accent-dark: #059669;
  --lexxy-color-accent-medium: #10b981;
  --lexxy-color-accent-light: #a7f3d0;
  --lexxy-color-accent-lightest: #d1fae5;
}

/*
 * Give in-editor headings a sensible line-height. Lexxy sets a large heading
 * font-size but no line-height, so headings inherit whatever the editor host
 * element carries — the app's `text-sm` utility pins that to 20px, which makes
 * wrapped headings collapse onto each other. Lexxy scopes its own heading rules
 * under :where(.lexxy-content) (zero specificity), so `.lexxy-content h1…` wins.
 */
.lexxy-content h1,
.lexxy-content h2,
.lexxy-content h3,
.lexxy-content h4,
.lexxy-content h5,
.lexxy-content h6 {
  line-height: 1.2;
}

html.dark {
  /* Grayscale ramp inverted for dark backgrounds. */
  --lexxy-color-ink: oklch(96% 0 0);
  --lexxy-color-ink-medium: oklch(75% 0 0);
  --lexxy-color-ink-light: oklch(55% 0 0);
  --lexxy-color-ink-lighter: oklch(40% 0 0);
  --lexxy-color-ink-lightest: oklch(25% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0 0);

  /* Emerald accent, brightened for dark (emerald-400/500/800/900). */
  --lexxy-color-accent-dark: #34d399;
  --lexxy-color-accent-medium: #10b981;
  --lexxy-color-accent-light: #065f46;
  --lexxy-color-accent-lightest: #064e3b;

  --lexxy-color-red: oklch(70% 0.15 27);
  --lexxy-color-green: oklch(70% 0.15 145);
  --lexxy-color-blue: oklch(75% 0.196 258);
  --lexxy-color-purple: oklch(70% 0.15 305);

  /* Syntax highlighting tokens tuned for dark (GitHub dark palette). */
  --lexxy-color-code-token-att: #ff7b72;
  --lexxy-color-code-token-comment: #8b949e;
  --lexxy-color-code-token-function: #d2a8ff;
  --lexxy-color-code-token-operator: #ff7b72;
  --lexxy-color-code-token-property: #79c0ff;
  --lexxy-color-code-token-punctuation: #f0f6fc;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;

  --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);

  --highlight-1: rgb(240, 200, 22);
  --highlight-2: rgb(230, 118, 14);
  --highlight-3: rgb(244, 5, 5);
  --highlight-4: rgb(248, 21, 192);
  --highlight-5: rgb(214, 80, 255);
  --highlight-6: rgb(53, 157, 255);
  --highlight-7: rgb(26, 231, 23);
  --highlight-8: rgb(201, 135, 72);
  --highlight-9: rgb(161, 161, 161);
}
/* The admin mail drop map.
 *
 * Loaded only by that page — see app/views/admin/property_map/show.html.erb —
 * because it is the only page that pulls Leaflet in, and these rules exist to
 * override Leaflet's own stylesheet rather than to style anything of ours.
 * Everything else on the page is Tailwind.
 */

/* Cluster bubbles standing in for buildings that are too dense to draw.
 *
 * leaflet.css loads before this one and sets `display: block` on
 * .leaflet-marker-icon, so these overrides are qualified with that class to
 * outrank it. A bare .cluster loses on source order and the label lands in the
 * top-left corner instead of the middle. Same reason for the popup rules below.
 */
.leaflet-marker-icon.cluster {
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* emerald-700, which is the section's own colour rather than Leaflet's blue. */
  background-color: rgb(4 120 87 / 80%);
  box-shadow: 0 0 0 3px rgb(4 120 87 / 20%);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* G-NAF ships names in upper case and they are left that way rather than
   title-cased, which mangles names like O'DEA and MCKINNON. */
.leaflet-popup .leaflet-popup-content {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.leaflet-popup-content strong {
  display: block;
}

.leaflet-popup-content span {
  display: block;
  color: #525252; /* neutral-600 */
}

/* A building can hold hundreds of units, so the list scrolls inside the popup
   rather than growing taller than the map. The bullets are asked for because
   Tailwind's preflight strips list markers from every ul on the page. */
.unit-addresses {
  max-height: min(11rem, 30vh);
  margin: 0.5rem 0 0;
  padding: 0.5rem 0 0 1.125rem;
  overflow-y: auto;
  border-top: 1px solid #e5e5e5; /* neutral-200 */
  list-style: disc;
}

.unit-addresses li {
  padding: 0.0625rem 0;
}

/* Leaflet paints its own controls and popups on white and does not read the
   theme, so the tiles and everything over them stay light. Only the panel the
   map sits in follows the page. */
.leaflet-container {
  background: #e5e5e5;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 body {
  -webkit-tap-highlight-color: transparent;
}

@layer base {
  @font-face {
    font-family: VC Henrietta;
    font-weight: 300;
    font-display: swap;
    src: url(/fonts/HenriettaTrial-Light.woff) format("woff");
  }
  @font-face {
    font-family: VC Henrietta;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/Henrietta-Regular.woff) format("woff");
  }
  @font-face {
    font-family: VC Henrietta;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/HenriettaTrial-SemiBold.woff) format("woff");
  }
}

.font-serif, .serif-h1, .index-list-title {
  font-weight: 300;
  letter-spacing: 0.02em;
  font-feature-settings: "ss06" on, "ss01" on; 
}