/*
 * The only file that holds raw sizes and colours (UIC-015). Every other style sheet and component
 * refers to these custom properties. Map drawing and interface surfaces share this palette.
 */
:root {
  --color-surface: #ffffff;
  --color-text: #17221f;
  --color-text-muted: #596863;
  --color-primary: #14634f;
  --color-primary-hover: #105440;
  --color-primary-pressed: #0c4233;
  --color-primary-soft: #eaf3ee;
  --color-page: #f5f7f6;
  --color-on-primary: #ffffff;
  --color-focus: #14634f;
  --color-focus-gap: #ffffff;
  --color-danger: #b3261e;
  --color-danger-soft: #fdecea;
  --color-border: #7a8a84;
  --color-divider: #d5e0dc;
  --color-subtle: #f2f6f4;
  --color-notice-bg: #fff4d6;
  --color-strip-bg: #263c33;
  --color-strip-text: #ffffff;
  --color-scrim: rgba(17, 33, 26, 0.48);
  --color-product-plus: #0082ad;
  --color-map-none: #f3f1ec;
  --color-reg-c: #285fa6;
  --color-reg-e: #bf5712;
  --color-halo: #ffffff;
  --color-casing: #ffffff;
  --color-crosshair: #172633;
  --color-selection: #ffb000;
  --color-selection-casing: #1a1a1a;
  --color-position: #1a73e8;
  --color-position-ring: #ffffff;
  --color-scale: #edf2f8;
  --color-scale-casing: #0e1621;
  /* The outline of a cadastral unit below the parcel zoom (MAP-009): a dark blue grey, unlike the
     saturated blue and warm orange of the registers and the brighter blue of the position. */
  --color-unit: #455a64;
  /* The palette a user picks the colour of a saved parcel from (UIC-047), in its order; none of
     them is close to a register, the selection or the position, and each is at least 3 to 1
     against the casing of the lines. */
  --color-saved-teal: #009b91;
  --color-saved-violet: #9b35ff;
  --color-saved-pink: #ff1493;
  --color-saved-sky: #0098b8;
  --opacity-saved-fill: 0.5;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --product-plus-on-dark: #3ccdf5;
  --viewport-height: 100dvh;
  --website-center: 50%;
  --website-width: var(--page-wide);
  --website-gutter: var(--space-5);
  --website-section-space: clamp(2rem, 4vw, 4rem);
  --website-hero-size: clamp(2.75rem, 4.5vw, 4rem);
  --website-heading-size: clamp(1.75rem, 2.6vw, 2.25rem);
  --website-heading-line: 1.08;
  --website-copy-width: 44rem;
  --locality-column-min: 26rem;
  --locality-stat-min: 8rem;
  --locality-fact-min: 7rem;
  --locality-action-width: 100%;
  --website-phone-border: 7px;
  --website-phone-radius: 30px;
  --website-phone-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 20%), 0 22px 40px rgb(32 61 90 / 25%);
  --website-phone-width: 21%;
  --website-handset-border: clamp(2px, 0.6cqw, 4px);
  --website-handset-radius: clamp(12px, 3.4cqw, 22px);
  --website-handset-chin: 1.65cqw;
  --website-handset-camera: 0.65cqw;
  --website-handset-camera-offset: 0.55cqw;
  --website-handset-camera-color: #070c14;
  --website-handset-camera-rim: inset 0 0 0 1px #7896b6;
  --website-handset-earpiece-width: 3cqw;
  --website-handset-earpiece-height: 0.3cqw;
  --website-handset-hardware-gap: 0.65cqw;
  --website-handset-controls-offset: 22%;
  --website-handset-button-width: 0.4cqw;
  --website-handset-button-height: 3.4cqw;
  --website-handset-button-gap: 4.8cqw;
  --website-handset-gesture-width: 5cqw;
  --website-handset-gesture-height: 0.3cqw;
  --website-laptop-width: 80%;
  --website-laptop-left: 10%;
  --website-laptop-top: 0%;
  --website-laptop-base-width: 100%;
  --website-laptop-base-left: 0%;
  --website-laptop-base-height: 50%;
  --website-laptop-base-color: #b8c4d1;
  --website-laptop-base-radius: 3px 3px 18px 18px;
  --website-laptop-deck-padding: 2% 6% 3%;
  --website-laptop-lip: 4px;
  --website-laptop-key-gap: 2px;
  --website-laptop-key-radius: 2px;
  --website-laptop-keyboard-width: 90%;
  --website-laptop-keyboard-height: 60%;
  --website-laptop-trackpad-width: 24%;
  --website-laptop-trackpad-height: 28%;
  --website-landscape-width: 46%;
  --website-tablet-width: 51%;
  --website-wide-radius: 22px;
  --website-device-top: 15px;
  --website-device-shell: #192330;
  --website-device-rim: #65758a;
  --website-device-camera: 4px;
  --website-device-camera-top: 5px;
  --website-device-camera-color: #8193a9;
  --website-device-round: 50%;
  --website-tablet-angle: -4deg;
  --website-detail-angle: 4deg;
  --website-measure-angle: -2deg;
  --website-gallery-scale: 80%;
  --website-laptop-perspective: 650px;
  --website-laptop-deck-angle: 66deg;
  --website-laptop-key-size: clamp(3px, 0.55vw, 8px);
  --website-laptop-key-text: #e8eef5;
  --website-laptop-key-shadow: 0 1px 0 #0b121c;
  --website-gallery-width: 40rem;
  --website-gallery-ratio: 1.18;
  --website-gallery-wide-left: -1%;
  --website-gallery-wide-bottom: 12%;
  --website-gallery-detail-left: 81%;
  --website-gallery-measure-left: 30%;
  --website-gallery-phone-bottom: 3%;
  --website-hero-background: #f3f7fc;
  --website-grid-line: rgb(74 115 169 / 7%);
  --website-grid-size: 5rem;
  --website-features-background: #ffffff;
  --website-section-border: #dce7f3;
  --website-hairline: 1px;
  --website-benefit-space: clamp(3rem, 5vw, 4.5rem);
  --website-feature-background: #f3f6fa;
  --website-feature-background-second: #f3f6fa;
  --website-feature-background-third: #f3f6fa;
  --website-feature-background-fourth: #f3f6fa;
  --website-feature-background-fifth: #edf4f8;
  --website-feature-background-sixth: #edf1fa;
  --website-feature-padding: clamp(1.5rem, 3vw, 2rem);
  --website-feature-heading-size: clamp(1.5rem, 2vw, 1.875rem);
  --website-feature-art-height: 5rem;
  --website-feature-copy-gap: 3.5rem;
  --website-feature-border: #ccd8e6;
  --website-feature-emphasis: #245a84;
  --website-feature-emphasis-text: #ffffff;
  --website-feature-motif-color: #557e9e;
  --website-feature-motif-opacity: 0.32;
  --website-feature-motif-width: 10rem;
  --website-feature-motif-height: 10rem;
  --website-feature-motif-line: 1.5;
  --website-creator-background: #080808;
  --website-creator-logo-width: 73px;
  --web-language-gap: 24px;
  --web-language-control: 44px;
  --website-creator-focus: #ffffff;
  --website-store-badge-height: 48px;
  --website-store-badge-ratio: calc(238.96 / 70.87);
  --website-store-badge-space: calc(var(--website-store-badge-height) / 4);
  --website-store-muted-background: #eaf0f6;
  --website-store-muted-border: #c9d4df;
  --website-store-muted-text: #536477;
  --website-footer-background: #203d5a;
  --website-footer-text: #d9e6f2;
  --website-footer-link: #ffffff;
  --website-tracking: 0.08em;
  --website-hidden-size: 1px;
  --website-hidden-clip: 100%;
  --website-feature-columns: 1fr;
  --website-hero-columns: minmax(0, 1fr);
  --website-hero-gap: var(--space-6);
  --action-min: 8rem;
  --print-map-max: 20rem;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: ui-monospace, Menlo, Consolas, monospace;
  --font-heading: var(--font-ui);
  --ui-color-scheme: normal;
  --type-credit-size: 0.75rem;
  --type-map-credit-size: 0.6875rem;
  --type-s-size: 0.875rem;
  --type-s-line: 1.4;
  --type-m-size: 1rem;
  --type-m-line: 1.5;
  --type-l-size: 1.125rem;
  --type-l-line: 1.4;
  --type-l-weight: 600;
  --type-xl-size: 1.5rem;
  --type-stat-size: 1.75rem;
  --type-xl-line: 1.3;
  --type-xl-weight: 700;
  --type-heading-tracking: -0.025em;

  --control-size: 48px;
  --control-icon: 24px;
  --code-size: 4rem;
  --code-tracking: min(0.2em, 0.5cqi);
  --code-font-size: clamp(var(--type-m-size), 8cqi, var(--type-stat-size));
  --map-control-gap: 8px;
  --map-panel-padding: 16px;
  --map-switch-width: 56px;
  --map-switch-height: 32px;
  --map-switch-thumb: 24px;
  --map-switch-inset: 4px;
  --scale-max-width: 104px;
  --scale-line-height: 6px;
  --scale-line-stroke: 2px;

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 24px;
  --radius-round: 50%;

  --button-radius: var(--radius-m);
  --icon-button-radius: var(--radius-m);
  --field-radius: var(--radius-s);
  --field-surface: var(--color-surface);
  --field-bottom-width: 1px;
  --card-border: var(--color-divider);
  --card-shadow: none;
  --content-padding: var(--space-4);
  --content-gap: var(--space-4);
  --section-gap: var(--space-5);
  --row-padding: var(--space-3);
  --view-body-padding: var(--space-5);
  --header-surface: var(--color-surface);
  --header-divider: var(--color-divider);
  --web-header-mark: 32px;
  --web-header-product-min: 9ch;
  --web-header-description-display: block;
  --web-header-secondary-display: inline;
  --web-map-navigation-position: fixed;
  --web-header-gap: 12px;
  --web-header-padding: 8px;
  --web-header-inline: 24px;
  --web-header-identity-size: var(--type-s-size);
  --web-header-link-inline: var(--web-header-gap);
  --web-header-radius: 10px;
  --web-header-action-size: 44px;
  --web-header-action-icon: 18px;
  --web-header-badge-height: 32px;
  --web-header-badge-space: calc(var(--web-header-badge-height) / 4);
  --sample-surface: transparent;
  --sample-radius: 0;

  --shadow-information: none;
  --shadow-scale: drop-shadow(0 1px 1px var(--color-scale-casing))
    drop-shadow(0 0 1px var(--color-scale-casing));
  --shadow-control: 0 4px 16px rgba(23, 34, 31, 0.1);
  --shadow-raised: 0 -8px 32px rgba(23, 34, 31, 0.12);
  --shadow-side: 8px 0 32px rgba(23, 34, 31, 0.1);
  --shadow-actions: 0 -4px 16px rgba(23, 34, 31, 0.08);
  --shadow-primary: 0 3px 8px rgba(20, 99, 79, 0.16);
  --shadow-dialog: 0 20px 64px rgba(23, 34, 31, 0.22);

  --focus-ring: 3px;
  --focus-gap: 2px;

  --motion-view: 200ms ease-out;
  --motion-control: 140ms ease-out;

  /* The breakpoint of the wide layout. It is read by the layout hook, because a media query cannot
     refer to a custom property; em units send raised text sizes to the phone layout. */
  --wide: 48em;
  --side: min(32rem, 45vw);
  --text: 40rem;
  --chooser-label-min: 12rem;
  --page-wide: 94rem;
  --operator-wide: var(--page-wide);
  --dialog: min(32rem, 100vw - 2rem);
  --sheet-max: 60dvh;
  /* A band of a mode of the map is never taller than this, so that the map stays usable at 200
     percent text; what does not fit scrolls inside it (design pass of release 002, section 1). */
  --band-max: 40dvh;
  /* The layer chooser is never taller than the screen leaves above the two controls at the bottom
     end; what does not fit scrolls inside it. */
  --chooser-max: calc(
    100dvh - var(--inset-top) - var(--inset-bottom) - 2 *
      (var(--control-size) + var(--space-2))
  );
  /* The widest a sentence beside a control at the bottom end of the map gets — the sentence of the
     base layer, the position sentences and the accuracy text: a share of the map area, so that the
     rest of the bottom edge stays for the attribution also while a side column
     narrows the map area in the wide layout, and more with a raised text size, so that the sentence
     does not turn into a column of single words. The map area is the container the unit refers to. */
  --beside: max(min(18rem, 40cqi), 9rem);

  --inset-top: calc(var(--space-3) + env(safe-area-inset-top));
  --inset-end: calc(var(--space-3) + env(safe-area-inset-right));
  --inset-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  --inset-start: calc(var(--space-3) + env(safe-area-inset-left));
}

/* Resolve derived surfaces where the appearance palette is overridden. */
:root,
.operator-header-appearance,
:root:is([data-appearance="light"], [data-appearance="dark"]) body {
  --color-app-only-background: color-mix(
    in srgb,
    var(--color-product-plus) 12%,
    var(--color-surface)
  );
  --color-app-only-hover: color-mix(
    in srgb,
    var(--color-product-plus) 20%,
    var(--color-surface)
  );
}

/* Body-scoped appearance includes portalled panels without changing the canvas palette. */
.operator-header-appearance,
:root:is([data-appearance="light"], [data-appearance="dark"]) body {
  --font-heading: var(--font-ui);
  --radius-s: 3px;
  --radius-m: 4px;
  --radius-l: 8px;
  --button-radius: 4px;
  --icon-button-radius: 4px;
  --field-radius: 3px;
  --field-bottom-width: 1px;
  --card-border: var(--color-divider);
  --card-shadow: none;
  --content-padding: 12px;
  --content-gap: 10px;
  --section-gap: 14px;
  --row-padding: 8px;
  --view-body-padding: 14px;
  --header-surface: var(--color-surface);
  --header-divider: var(--color-divider);
  --sample-radius: 1px;
  --shadow-information: none;
  --shadow-primary: none;
}

.operator-header-appearance,
:root[data-appearance="dark"] body,
:root[data-appearance="light"] body {
  --color-product-plus: #0082ad;
  --color-surface: #ffffff;
  --color-text: #172633;
  --color-text-muted: #536579;
  --color-primary: #203d5a;
  --color-primary-hover: #18324c;
  --color-primary-pressed: #11283f;
  --color-primary-soft: #edf2f7;
  --color-page: #f3f5f7;
  --color-on-primary: #ffffff;
  --color-focus: #285d8f;
  --color-focus-gap: #ffffff;
  --color-danger: #b3261e;
  --color-danger-soft: #fff0ed;
  --color-border: #77899c;
  --color-divider: #d7dfe7;
  --color-subtle: #ecf0f4;
  --color-notice-bg: #fff3d9;
  --color-strip-bg: #263c53;
  --color-strip-text: #ffffff;
  --color-scrim: rgba(11, 24, 38, 0.4);
  --ui-color-scheme: light;
  --field-surface: #f8fafc;
  --sample-surface: transparent;
  --shadow-control: 0 2px 6px rgba(15, 31, 48, 0.1);
  --shadow-raised: 0 -4px 18px rgba(15, 31, 48, 0.12);
  --shadow-side: 4px 0 18px rgba(15, 31, 48, 0.1);
  --shadow-actions: 0 -2px 8px rgba(15, 31, 48, 0.08);
  --shadow-dialog: 0 12px 36px rgba(15, 31, 48, 0.2);
  --web-header-tint: var(--color-primary-soft);
  --web-header-accent: var(--color-focus);
  --web-header-action-background: linear-gradient(
    115deg,
    var(--color-primary),
    var(--color-focus)
  );
  --web-header-action-hover: var(--color-primary-hover);
  --web-header-action-text: var(--color-on-primary);
  --web-header-action-shadow: var(--shadow-control);
}

@media screen {
  :root[data-appearance="dark"] {
    --color-map-none: #050a10;
  }

  :root[data-appearance="dark"] body {
    --website-hero-background: #101c2b;
    --website-grid-line: rgb(143 177 220 / 8%);
    --website-features-background: #17212e;
    --website-section-border: #344254;
    --website-feature-background: #203149;
    --website-feature-background-second: #1c3445;
    --website-feature-background-third: #293149;
    --website-feature-background-fourth: #23333f;
    --website-feature-background-fifth: #1d324b;
    --website-feature-background-sixth: #243249;
    --website-feature-border: #40516a;
    --website-feature-motif-color: #9dbddc;
    --website-store-muted-background: #26374c;
    --website-store-muted-border: #536579;
    --website-store-muted-text: #b0bdcd;
    --website-footer-background: #0c1521;
    --color-product-plus: var(--product-plus-on-dark);
    --color-surface: #17212e;
    --color-text: #edf2f8;
    --color-text-muted: #b0bdcd;
    --color-primary: #a8c4e7;
    --color-primary-hover: #c3d7f0;
    --color-primary-pressed: #d8e5f5;
    --color-primary-soft: #26374c;
    --color-page: #0e1621;
    --color-on-primary: #142333;
    --color-focus: #a8c4e7;
    --color-focus-gap: #17212e;
    --color-danger: #ffb4ab;
    --color-danger-soft: #462a28;
    --color-border: #8192a7;
    --color-divider: #344254;
    --color-subtle: #1e2b3b;
    --color-notice-bg: #3a3225;
    --color-strip-bg: #26374d;
    --color-strip-text: #edf2f8;
    --color-scrim: rgba(3, 8, 16, 0.72);
    --ui-color-scheme: dark;
    --field-surface: #101a27;
    --sample-surface: #e8eef5;
    --shadow-control: 0 2px 8px rgba(0, 0, 0, 0.22);
    --shadow-raised: 0 -4px 20px rgba(0, 0, 0, 0.28);
    --shadow-side: 4px 0 20px rgba(0, 0, 0, 0.26);
    --shadow-actions: 0 -2px 8px rgba(0, 0, 0, 0.2);
    --shadow-dialog: 0 12px 36px rgba(0, 0, 0, 0.45);
  }
}

:root[data-appearance-changing] body {
  --motion-control: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-view: 0ms ease-out;
    --motion-control: 0ms ease-out;
  }
}

@media (min-width: 48em) {
  :root {
    --locality-action-width: fit-content;
    --web-header-identity-size: var(--type-l-size);
    --web-map-navigation-position: static;
    --web-map-navigation-top: auto;
    --web-map-navigation-max: none;
    --web-header-link-inline: var(--space-4);
    --website-feature-columns: repeat(3, minmax(0, 1fr));
    --website-hero-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    --website-hero-gap: var(--website-gutter);
  }

  .website-header .website-header-brand {
    flex: 1 1 auto;
  }
  .website-header .website-header-navigation {
    display: contents;
  }
  .website-header .website-header-menu {
    display: none;
  }
  .website-header .website-header-menu > summary {
    display: none;
  }
  .website-header .website-header-navigation > .website-header-actions,
  .website-header .website-header-menu:not([open]) + .website-header-actions {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    max-block-size: none;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .website-header .website-header-navigation .language-header,
  .website-header .website-header-navigation .website-header-operator,
  .website-header .website-header-navigation > .website-header-actions > form {
    align-self: auto;
  }
  .website-header .website-header-navigation .language-header {
    flex-direction: row;
    gap: var(--space-2);
    margin-inline-start: var(--web-language-gap);
  }
  .website-header
    .website-header-navigation
    .language-header
    .language-options {
    position: absolute;
    margin-block-start: 0;
    min-inline-size: max-content;
    box-shadow: var(--shadow-control);
  }
  [data-web-header].website-header
    .website-header-navigation
    .language-header
    .language-options {
    position: fixed;
    inset-block-start: var(--web-language-top);
    inset-inline-end: var(--web-language-right);
  }
}

.product-plus {
  color: var(--color-product-plus);
  font-weight: var(--type-xl-weight);
}

/* Shared website identity yields secondary text before wrapping (UIC-056). */
@container website-wordmark (inline-size < 24ch) {
  .website-header-description {
    --web-header-description-display: none;
  }
}

@container website-wordmark (inline-size < 20ch) {
  .website-header-domain,
  .website-header-separator {
    --web-header-secondary-display: none;
  }
}