/* Hide Calcite and map components until their definitions load, so dialogs, tabs and panels don't
   flash their raw contents on first paint (only custom elements can be :not(:defined)). */
:not(:defined) {
    visibility: hidden;
}

calcite-dialog:not(:defined),
calcite-alert:not(:defined),
calcite-popover:not(:defined),
calcite-tooltip:not(:defined) {
    display: none;
}

/* Property Information System (v6) – Missoula County brand (Identity Design Guide, Dec 2020)
   with the v5 PIS look (map_pisModern.css + map_main.css + map_TOC_Calcite.css + map_contextmenu.css).
   Desktop (>= 769px) keeps the v5 layout: search + layers on the left, parcel info on the right,
   results under the search, toolbars upper right, status bar at the bottom.
   Phones (<= 768px): the panels become bottom sheets (one at a time) with a tab bar above the status bar. */

:root {
    /* County palette — primary */
    --mc-black: #231f20;
    --mc-dark-blue: #38444b;
    --mc-light-blue: #688898;
    --mc-stone: #e3e1dc;
    /* County palette — secondary (use sparingly) */
    --mc-green: #acb55c;
    --mc-medium-blue: #395f6f;
    --mc-light-gold: #c9a978;
    --mc-rust: #a45248;

    /* PIS tokens */
    --pis-brand: var(--mc-medium-blue);
    --pis-brand-hover: var(--mc-dark-blue);
    --pis-accent: var(--mc-green);
    --pis-surface: #ffffff;
    --pis-surface-2: #f4f3f0;
    --pis-border: #d6d3cc;
    --pis-frame: #9aa3a8;
    --pis-text: var(--mc-black);
    --pis-text-muted: #5d6b72;
    --pis-value: var(--mc-dark-blue);
    --pis-radius: 6px;
    --pis-shadow: 0 2px 8px rgb(35 31 32 / 0.18);
    --pis-panel-shadow: 0 6px 24px rgb(35 31 32 / 0.25);

    /* Avenir is the county's preferred face; Arial is the guide's fallback. Rockwell for accents. */
    --pis-font: "Avenir Next", "Avenir", "Avenir LT Std", Arial, sans-serif;
    --mc-font-slab: Rockwell, "Rockwell Nova", "Roboto Slab", Georgia, serif;

    /* ---- Layout (desktop). The panels and their slide-out handles are placed from these. ---- */
    --vh: 100vh;
    --statusbar-h: 26px;
    --gap: 10px;
    --tabnav-h: 34px;
    --safe-b: env(safe-area-inset-bottom, 0px);

    --search-w: max(440px, min(765px, calc(100vw - 2 * var(--gap) - 410px)));
    --search-h: 172px;
    --results-h: min(400px, calc(var(--vh) - var(--gap) - var(--search-h) - var(--statusbar-h) - 90px));
    --layers-top: calc(var(--gap) + var(--search-h) + 26px);
    --layers-w: min(640px, calc(100vw - 2 * var(--gap) - 48px));
    /* Height of the scrolling part of each Layers tab (v5 sized this with a script) */
    --layers-tab-h: max(160px, min(400px, calc(var(--vh) - var(--layers-top) - var(--statusbar-h) - 140px)));
    --info-top: 64px;
    --info-w: 360px;
    /* Every info tab (Property, Details, History) has this height and scrolls inside (v5 --pis-info-h) */
    --info-tab-h: max(220px, min(595px, calc(var(--vh) - var(--info-top) - var(--statusbar-h) - 70px)));
}

@supports (height: 100dvh) {
    :root {
        --vh: 100dvh;
    }
}

/* Calcite tokens on body so they win over the CDN :root defaults whatever the load order. */
body {
    --calcite-font-family: var(--pis-font);
    --calcite-color-brand: var(--mc-medium-blue);
    --calcite-color-brand-hover: var(--mc-dark-blue);
    --calcite-color-brand-press: #2b363c;
    --calcite-color-brand-underline: rgb(57 95 111 / 0.4);
    --calcite-color-focus: var(--mc-light-blue);
    --calcite-color-text-1: var(--mc-black);
    --calcite-color-text-2: var(--mc-dark-blue);
    --calcite-color-text-3: var(--pis-text-muted);
    --calcite-color-text-link: var(--mc-medium-blue);
    --calcite-color-border-1: #c4c0b7;
    --calcite-color-border-2: var(--pis-border);
    --calcite-color-border-3: #e7e5e0;
    --calcite-corner-radius-round: var(--pis-radius);
    --calcite-panel-heading-text-color: var(--mc-dark-blue);
    --calcite-dialog-heading-text-color: var(--mc-dark-blue);
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: var(--pis-font);
    color: var(--pis-text);
    background: var(--mc-dark-blue);
}

a {
    color: var(--mc-medium-blue);
}

#app {
    position: relative;
    height: 100%;
    overflow: hidden;
}

arcgis-map {
    position: absolute;
    inset: 0 0 var(--statusbar-h) 0;
}

.pis-offscreen {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ================================================================ toolbars (inside the map) */
#upperRightArea.pis-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pis-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--pis-surface);
    border-radius: var(--pis-radius);
    box-shadow: var(--pis-shadow);
}

.pis-toolbar calcite-button {
    --calcite-button-background-color: transparent;
    --calcite-button-text-color: var(--pis-text);
    --calcite-button-icon-color: var(--pis-text);
    --calcite-button-border-color: transparent;
}

.pis-toolbar calcite-button:hover {
    --calcite-button-background-color: var(--pis-surface-2);
}

.pis-toolbar__divider {
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: var(--pis-border);
}

/* Zoom, home, compass and the expands sit flat in the group like the other buttons. */
.pis-toolbar arcgis-zoom,
.pis-toolbar arcgis-home,
.pis-toolbar arcgis-locate,
.pis-toolbar arcgis-compass,
.pis-toolbar arcgis-expand {
    box-shadow: none;
    background: transparent;
    --calcite-action-background-color: transparent;
    --calcite-action-background-color-hover: var(--pis-surface-2);
    --calcite-action-text-color: var(--pis-text);
    --calcite-action-text-color-pressed: var(--pis-brand);
}

/* Colored tool buttons (brand palette, as in v5) */
#upperRightTools #btnId,
#upperRightTools #btnIdentifyLayers,
#upperRightTools #btnPrint,
#upperRightTools #btnClearHighlights,
#navTools #zoomprev {
    --calcite-button-text-color: #fff;
    --calcite-button-icon-color: #fff;
    --calcite-button-border-color: transparent;
    border-radius: 4px;
}

/* Identify tools: rust = off, green = on (setToolActive adds .is-active) */
#upperRightTools #btnId,
#upperRightTools #btnIdentifyLayers {
    --calcite-button-background-color: var(--mc-rust);
}

#upperRightTools #btnId:hover,
#upperRightTools #btnIdentifyLayers:hover {
    --calcite-button-background-color: #8a443c;
}

#upperRightTools #btnId.is-active,
#upperRightTools #btnIdentifyLayers.is-active {
    --calcite-button-background-color: var(--mc-green);
    --calcite-button-text-color: var(--mc-dark-blue);
    --calcite-button-icon-color: var(--mc-dark-blue);
    box-shadow: 0 0 0 2px rgb(172 181 92 / 0.4);
}

#upperRightTools #btnId.is-active:hover,
#upperRightTools #btnIdentifyLayers.is-active:hover {
    --calcite-button-background-color: #979f4f;
}

#upperRightTools #btnPrint {
    --calcite-button-background-color: var(--mc-medium-blue);
}

#upperRightTools #btnPrint:hover {
    --calcite-button-background-color: var(--mc-dark-blue);
}

#upperRightTools #btnClearHighlights {
    --calcite-button-background-color: var(--mc-light-blue);
}

#upperRightTools #btnClearHighlights:hover {
    --calcite-button-background-color: #57737f;
}

#navTools #zoomprev {
    --calcite-button-background-color: #7d3a33;
}

#navTools #zoomprev:hover {
    --calcite-button-background-color: #652f29;
}

/* Bottom-left toolbar */
#bottomLeftTools.pis-toolbar--horizontal {
    flex-direction: row;
}

/* Tool panels that open from the toolbar expands */
#measurementToolsContainer,
#mapNotesExpand > div {
    padding: 8px;
    background: var(--pis-surface);
}

#mapNotesExpand > div + div {
    padding-top: 0;
}

#toolbarDiv {
    display: flex;
    gap: 4px;
    box-shadow: none;
}

#textInputDiv .esri-input {
    width: 100%;
    height: 28px;
    padding: 0 6px;
    font: inherit;
    border: 1px solid var(--pis-border);
    border-radius: 3px;
    box-sizing: border-box;
}

/* Map updating spinner (bottom right) */
.map-loader {
    padding: 4px;
    background: var(--pis-surface);
    border-radius: 50%;
    box-shadow: var(--pis-shadow);
}

.map-loader:has(calcite-loader[hidden]) {
    display: none;
}

/* Measurement result cards (draw.js shows them) */
.pis-measure-card {
    position: absolute;
    bottom: 70px;
    left: 15px;
    z-index: 2;
    width: 220px;
    min-height: 140px;
    padding: 10px 12px;
    background: var(--pis-surface);
    border-radius: var(--pis-radius);
    box-shadow: var(--pis-shadow);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pis-text-muted);
}

.pis-measure-card[hidden] {
    display: none;
}

/* Keep loading spinners spinning even with "reduce motion" (VDI / remote desktop), as in v5. */
calcite-loader,
calcite-button[loading],
calcite-action[loading] {
    --calcite-internal-duration-factor: 1;
    --calcite-animation-timing: 0.15s;
    --calcite-internal-animation-timing-fast: 0.1s;
    --calcite-internal-animation-timing-medium: 0.2s;
    --calcite-internal-animation-timing-slow: 0.3s;
}

/* ================================================================ floating panels (desktop) */
.pis-panel {
    position: absolute;
    z-index: 20;
    box-sizing: border-box;
    padding: 5px;
    background: var(--mc-stone);
    border: 1px solid var(--pis-frame);
    border-radius: var(--pis-radius);
    box-shadow: var(--pis-panel-shadow);
    font-size: 12px;
    transition: transform 0.35s ease, visibility 0s linear 0s;
}

/* Closed panels slide off the screen edge (like v5's togglePanelGlobal) and leave the tab order. */
.pis-panel:not(.is-open) {
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.pis-panel--search,
.pis-panel--results,
.pis-panel--layers {
    left: var(--gap);
}

.pis-panel--search:not(.is-open),
.pis-panel--results:not(.is-open),
.pis-panel--layers:not(.is-open) {
    transform: translateX(calc(-100% - var(--gap) - 8px));
}

.pis-panel--info:not(.is-open) {
    transform: translateX(calc(100% + var(--gap) + 8px));
}

/* Sheet header: phones only, except on the results panel where it holds #resultsTitle */
.pis-panel__head {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 2px 4px 6px;
}

.pis-panel__head--always {
    display: flex;
}

.pis-panel__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--mc-font-slab);
    font-size: 14px;
    font-weight: 700;
    color: var(--mc-dark-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pis-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--pis-text);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.pis-panel__close:hover {
    background: rgb(255 255 255 / 0.6);
}

.pis-panel__close:focus-visible,
.pis-handle:focus-visible {
    outline: 2px solid var(--pis-brand);
    outline-offset: 2px;
}

.pis-panel__grab {
    display: none;
}

/* ---- Search (top left) ---- */
.pis-panel--search {
    top: var(--gap);
    width: var(--search-w);
    height: var(--search-h);
    z-index: 23;
    display: flex;
    flex-direction: column;
    opacity: 0.99;
}

#searchTabs {
    flex: 1 1 auto;
    min-height: 0;
    font-size: 11px;
}

#searchTabsCalcite {
    height: 100%;
}

#searchProgressDiv {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

#searchProgressDiv:not(:has(:not([hidden]))) {
    display: none;
}

#searchProgressImg {
    padding: 2px;
    background: var(--pis-surface);
    border-radius: 50%;
}

#nothingFoundMsg {
    padding: 3px 8px;
    color: #b42318;
    font-weight: 600;
    background: var(--pis-surface);
    border-radius: 3px;
    box-shadow: var(--pis-shadow);
}

#nothingFoundMsg[hidden] {
    display: none;
}

/* ---- Results grid (under the search panel) ---- */
body {
    --results-top: var(--gap);
    --results-left: calc(var(--gap) + 44px);
}

body.pis-search-open {
    --results-top: calc(var(--gap) + var(--search-h) + 2px);
    --results-left: var(--gap);
}

.pis-panel--results {
    top: var(--results-top);
    left: var(--results-left);
    width: var(--search-w);
    height: auto;                   /* as tall as the table, up to --results-h; the Results tab follows its bottom (ui.js) */
    max-height: var(--results-h);
    z-index: 22;
    display: flex;
    flex-direction: column;
}

#resultsGrid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--pis-surface);
    border: 1px solid var(--pis-border);
    border-radius: 3px;
    font-size: 11px;
}

/* ---- Layers (left, under the search panel) ---- */
.pis-panel--layers {
    top: var(--layers-top);
    width: var(--layers-w);
    z-index: 21;
}

/* ---- Parcel info (right) ---- */
.pis-panel--info {
    top: var(--info-top);
    right: var(--gap);
    width: var(--info-w);
    z-index: 21;
}

/* ================================================================ slide-out handles (v5 toggles) */
.pis-dock {
    display: contents;
}

.pis-handle {
    position: absolute;
    z-index: 26;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 0;
    font: inherit;
    color: var(--mc-dark-blue);
    background: var(--pis-surface);
    border: 1px solid var(--mc-dark-blue);
    box-shadow: var(--pis-shadow);
    cursor: pointer;
    transition: left 0.35s ease, right 0.35s ease, top 0.35s ease, background-color 0.15s;
}

.pis-handle:hover {
    background: var(--pis-surface-2);
}

.pis-handle__label {
    /* visible on the phone tab bar only; screen readers always get it */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pis-handle__close,
.pis-handle.is-active .pis-handle__icon {
    display: none;
}

.pis-handle.is-active .pis-handle__close {
    display: inline-flex;
}

/* Left-edge handles (search, layers): tab sticking out of the panel's right edge */
.pis-handle--left {
    left: 0;
    border-left: none;
    border-radius: 0 var(--pis-radius) var(--pis-radius) 0;
}

#searchToggle {
    top: calc(var(--gap) + 8px);
}

body.pis-search-open #searchToggle {
    left: calc(var(--gap) + var(--search-w));
}

#layersToggle {
    top: calc(var(--layers-top) + 8px);
}

body.pis-layers-open #layersToggle {
    left: calc(var(--gap) + var(--layers-w));
}

/* Right-edge handle (info): tab sticking out of the panel's left edge */
.pis-handle--right {
    right: 0;
    border-right: none;
    border-radius: var(--pis-radius) 0 0 var(--pis-radius);
}

#infoToggle {
    top: calc(var(--info-top) + 8px);
}

body.pis-info-open #infoToggle {
    right: calc(var(--gap) + var(--info-w));
}

/* Results: a small tab hanging under the search panel (or under the open grid) */
.pis-handle--tab {
    width: auto;
    height: 22px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    border-top: none;
    border-radius: 0 0 var(--pis-radius) var(--pis-radius);
    top: var(--results-top);
    left: calc(var(--results-left) + var(--search-w) - 120px);
    z-index: 24;
}

.pis-handle--tab .pis-handle__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
}

.pis-handle--tab .pis-handle__icon,
.pis-handle--tab.is-active .pis-handle__icon {
    display: inline-flex;
}

.pis-handle--tab.is-active .pis-handle__chev {
    transform: rotate(180deg);
}

body.pis-results-open #searchResultsToggle {
    top: calc(var(--results-top) + var(--results-h));
}

/* Map menu button: phones only (desktop uses right-click) */
#btnMapMenu {
    display: none;
}

/* ================================================================ shared form helpers */
.pis-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.pis-row + .pis-row {
    margin-top: 6px;
}

.pis-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 140px;
    min-width: 0;
}

.pis-field--xs {
    flex: 0 0 70px;
}

.pis-field--sm {
    flex: 0 0 96px;
}

.pis-field--md {
    flex: 0 1 140px;
}

.pis-field__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pis-text-muted);
    letter-spacing: 0.02em;
}

.pis-hint {
    font-size: 11px;
    color: var(--pis-text-muted);
    margin-top: 6px;
}

.pis-hint strong {
    color: var(--pis-text);
}

.pis-or {
    align-self: center;
    font-size: 11px;
    color: var(--pis-text-muted);
    padding: 0 4px;
    margin-top: 14px;
}

/* Native inputs/selects the modules read directly get the same look as Calcite */
.pis-native {
    height: 24px;
    padding: 0 6px;
    font: inherit;
    font-size: 12px;
    color: var(--pis-text);
    background: var(--pis-surface);
    border: 1px solid var(--pis-border);
    border-radius: 3px;
    box-sizing: border-box;
    width: 100%;
}

.pis-native:focus {
    outline: 2px solid var(--pis-brand);
    outline-offset: -1px;
}

.pis-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--pis-brand);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.pis-link-btn[hidden] {
    display: none;
}

.pis-quiet-link {
    color: inherit;
    text-decoration: none;
}

/* ================================================================ search tabs */
#searchTabs calcite-tab {
    padding: 8px 6px 4px;
}

/* Road / survey pick lists. The wrapper is deliberately NOT positioned, so the absolutely
   positioned list escapes the calcite-tab (which clips) and drops right under the filter box. */
.pis-field.pis-combo {
    display: block;
}

.pis-combo .pis-field__label {
    display: block;
    margin-bottom: 2px;
}

.pis-combo .list-container,
.pis-combo .survey-list-container {
    position: absolute;
    width: 380px;
    max-width: calc(100vw - 40px);
    margin: 0;
    z-index: 100;
    max-height: 300px;
    overflow: auto;
    background: var(--pis-surface);
    box-shadow: var(--pis-shadow);
    border-radius: 0 0 var(--pis-radius) var(--pis-radius);
}

.pis-combo .list-container:empty,
.pis-combo .survey-list-container:empty {
    box-shadow: none;
}

/* calcite-filter pads its input; pull it back so both address boxes line up */
#searchTabs .pis-combo calcite-filter {
    display: block;
    margin: -8px;
}

#searchTabs .pis-field--house {
    flex: 0 0 110px;
}

#searchTabs calcite-input,
#searchTabs calcite-filter,
#searchTabs calcite-select,
#searchTabs calcite-combobox {
    --calcite-input-text-border-color: var(--pis-border);
}

#searchTabs calcite-tab .pis-row > calcite-button {
    flex: 0 0 auto;
}

#searchTabs #addressNumSearch {
    width: 100%;
}

.pis-dms {
    display: grid;
    grid-template-columns: 64px repeat(3, minmax(56px, 1fr)) 52px auto;
    gap: 4px 6px;
    align-items: center;
    font-size: 11px;
}

.pis-dms__label {
    font-weight: 600;
    color: var(--pis-text-muted);
    text-align: right;
}

.pis-dd-row {
    margin-top: 8px;
}

.pis-dd-label {
    width: 64px;
    align-self: center;
}

.pis-docs-section {
    padding: 4px 0;
}

.pis-docs-section + .pis-docs-section {
    border-top: 1px solid var(--pis-border);
}

/* Point & Docs tabs: no top gap so they fit */
#searchTabs calcite-tab.pis-tab-tight {
    padding-top: 0;
    padding-bottom: 0;
}

#searchTabs .pis-tab-tight .pis-docs-section {
    padding: 1px 0;
}

#searchTabs .pis-tab-tight .pis-row + .pis-row {
    margin-top: 3px;
}

#searchTabs .pis-tab-tight .pis-hint {
    margin-top: 2px;
}

#searchTabs .pis-tab-tight .pis-field {
    gap: 0;
}

#searchTabs .pis-tab-tight .pis-dms {
    row-gap: 2px;
}

#searchTabs .pis-tab-tight .pis-dms + .pis-row {
    margin-top: 4px;
}

#multipleOwnerGeocode[hidden] {
    display: none;
}

/* ================================================================ info panel */
#infoContainer #infoTabsCalcite {
    --calcite-tab-accent-color-press: var(--mc-green);
    display: flex;
    flex-direction: column;
}

/* Constant height: every tab is the same height and scrolls inside, so the panel never jumps. */
#infoContainer #infoTabsCalcite > calcite-tab {
    box-sizing: border-box;
    height: var(--info-tab-h);
    overflow-x: hidden;
    overflow-y: auto;
    --calcite-tab-content-space-y: 2px;
}

#infoContainer #infoBackground {
    font-size: 12px;
    padding: 0 2px;
}

#infoContainer .pis-section {
    padding: 4px 6px;
    border-bottom: 1px solid var(--pis-border);
}

#infoContainer .pis-section:last-child {
    border-bottom: none;
}

#infoContainer .pis-section__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pis-text-muted);
}

#infoContainer .pis-section__head .pis-spacer {
    flex: 1;
}

#infoContainer .pis-section__head calcite-loader,
#infoContainer .pis-kv__label calcite-loader {
    --calcite-loader-spacing: 0;
    margin: 0 0 0 4px;
}

#infoContainer .pis-section__hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

#infoContainer .pis-section__hint[hidden],
#infoContainer #reportSurveyLink[hidden] {
    display: none;
}

.pis-details-head {
    padding: 8px 6px 0;
}

/* Action buttons: two rows of five (Flood Septic Air Vote Taxes / Facts Permits CAMA Docs Water) */
#infoContainer #buttonContainerDiv.pis-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    padding: 3px 6px 5px;
    border-bottom: 1px solid var(--pis-border);
}

#infoContainer #buttonContainerDiv .appBtn {
    width: 100%;
    --calcite-button-background-color: color-mix(in srgb, var(--pis-accent) 14%, #fff);
    --calcite-button-text-color: color-mix(in srgb, var(--pis-accent) 80%, #000);
    --calcite-button-border-color: color-mix(in srgb, var(--pis-accent) 45%, #fff);
    border-left: 4px solid var(--pis-accent);
    border-radius: 3px;
    font-weight: 600;
}

#infoContainer #buttonContainerDiv .appBtn:hover {
    --calcite-button-background-color: var(--pis-accent);
    --calcite-button-text-color: #fff;
    --calcite-button-border-color: var(--pis-accent);
}

/* The old color coding stays as the accent so regular users still recognize the buttons */
#infoContainer #buttonContainerDiv .appBtnRed { --pis-accent: #c0392b; }
#infoContainer #buttonContainerDiv .appBtnGreen { --pis-accent: #2e8b57; }
#infoContainer #buttonContainerDiv .appBtnOrange { --pis-accent: #e67e22; }
#infoContainer #buttonContainerDiv .appBtnCadetBlue { --pis-accent: #5f9ea0; }
#infoContainer #buttonContainerDiv .appBtnTan { --pis-accent: #c8a46b; }
#infoContainer #buttonContainerDiv .appBtnBlue { --pis-accent: #2f6fd6; }
#infoContainer #buttonContainerDiv .appBtnRoyalBlue { --pis-accent: #4169e1; }
#infoContainer #buttonContainerDiv .appBtnBrown { --pis-accent: #8b5a2b; }
#infoContainer #buttonContainerDiv .appBtnDarkBlue { --pis-accent: #1b3a6b; }
#infoContainer #buttonContainerDiv .appBtnBlack { --pis-accent: #333; }

/* Tan and cadet blue are light: darker text on hover */
#infoContainer #buttonContainerDiv .appBtnTan:hover,
#infoContainer #buttonContainerDiv .appBtnCadetBlue:hover {
    --calcite-button-text-color: #231f20;
}

/* Key/value grid */
#infoContainer .pis-kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--pis-border);
}

#infoContainer .pis-kv__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#infoContainer .pis-kv__item--full {
    grid-column: 1 / -1;
}

#infoContainer .pis-kv__label {
    display: flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pis-text-muted);
}

#infoContainer .pis-kv__value {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pis-value);
    word-break: break-word;
}

#infoContainer .pis-kv__value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

#infoContainer .pis-kv__value-row calcite-button {
    margin: -2px 0;
}

#infoContainer .pis-kv__link {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pis-brand);
    text-decoration: none;
    white-space: nowrap;
}

#infoContainer .pis-kv__link:hover {
    text-decoration: underline;
}

/* "Show tax bill": a small green pill (same green as the Taxes button) to the right of the Tax ID.
   The first column of the identifiers grid is wider so both fit on one line; Tax year moves right. */
#infoContainer #mainInfoContaierDiv.pis-kv {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

#infoContainer .pis-kv__value-row:has(.pis-taxbill) {
    flex-wrap: nowrap;
    gap: 8px;
}

#resultsTaxIDDiv {
    white-space: nowrap;
}

#infoContainer .pis-kv__link.pis-taxbill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #2e8b57;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#infoContainer .pis-kv__link.pis-taxbill:hover,
#infoContainer .pis-kv__link.pis-taxbill:focus-visible {
    background: #246e45;
    text-decoration: none;
}

#infoContainer .pis-kv__link.pis-taxbill:focus-visible {
    outline: 2px solid var(--pis-brand);
    outline-offset: 2px;
}

#infoContainer .pis-kv.pis-acres {
    padding: 6px 0 0;
    border-bottom: none;
}

#infoContainer .pis-acres .pis-kv__value {
    font-size: 12.5px;
}

#infoContainer #propertyTypeInfo.pis-kv {
    background: transparent;
}

/* Owners / legal: 3 lines by default, still resizable */
#infoContainer textarea#resultsLegal,
#infoContainer textarea#resultsOwner {
    width: 100%;
    box-sizing: border-box;
    height: calc(3 * 16px + 6px + 2px);
    resize: vertical;
    padding: 3px 6px;
    font: inherit;
    font-size: 12px;
    line-height: 16px;
    color: var(--pis-text);
    background: var(--pis-surface-2);
    border: 1px solid var(--pis-border);
    border-radius: 3px;
}

#infoContainer .pis-inline-field {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    margin-top: 1px;
}

#infoContainer .pis-inline-field span {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--pis-text-muted);
}

#infoContainer .pis-inline-field input {
    font: inherit;
    font-size: 11px;
    color: var(--pis-text-muted);
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}

/* Multi-property pager. Hidden buttons keep their space (v5 used visibility: hidden). */
#infoContainer #propertyPagerDiv {
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

#infoContainer .pis-pager-btn {
    padding: 1px 8px;
    font: inherit;
    font-size: 11px;
    color: var(--pis-brand);
    background: var(--pis-surface);
    border: 1px solid var(--pis-border);
    border-radius: 10px;
    cursor: pointer;
}

#infoContainer .pis-pager-btn[hidden] {
    display: inline-block;
    visibility: hidden;
}

#infoContainer .pis-pager-btn:hover {
    background: var(--pis-surface-2);
}

#infoContainer #parcelSource {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pis-text-muted);
}

#infoContainer #survey {
    flex: 1;
    min-width: 0;
    height: 26px;
    font-family: Consolas, monospace;
    font-size: 12px;
    border: 1px solid var(--pis-border);
    border-radius: 3px;
    padding: 2px;
}

#infoContainer .pis-survey-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ---- Physical addresses: compact list ---- */
#infoContainer .pis-count {
    min-width: 16px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: var(--pis-brand);
    border-radius: 8px;
    letter-spacing: 0;
}

#infoContainer .pis-count:empty {
    display: none;
}

#infoContainer #addressInfoContainer .pis-section__head {
    min-height: 22px;
    white-space: nowrap;
}

/* The <select> is only a data source; the details holder is hidden (the flyout shows the details) */
#infoContainer #resultsPhysicalAddressDiv.pis-addr-source,
#infoContainer #physicalAddressInfoContainer.pis-addr-holder {
    display: none !important;
}

#infoContainer .pis-section__head .pis-addr-filter {
    margin: 0;
    width: 130px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

#infoContainer .pis-addr-filter[hidden] {
    display: none;
}

/* 3 rows tall, scrolls for longer lists so the panel never gets pushed down */
#infoContainer .pis-addr-list {
    height: 66px;
    max-height: 66px;
    overflow-y: auto;
    border: 1px solid var(--pis-border);
    border-radius: var(--pis-radius);
    background: var(--pis-surface);
}

#infoContainer .pis-addr-list:empty {
    display: none;
}

#infoContainer .pis-addr-row {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border-left: 3px solid transparent;
}

#infoContainer .pis-addr-row + .pis-addr-row {
    border-top: 1px solid #eceae5;
}

#infoContainer .pis-addr-row:hover {
    background: var(--pis-surface-2);
}

#infoContainer .pis-addr-row:focus-visible {
    outline: 2px solid var(--pis-brand);
    outline-offset: -2px;
}

#infoContainer .pis-addr-row.is-active {
    font-weight: 600;
    color: var(--pis-brand);
    background: #e9eef1;
    border-left-color: var(--pis-brand);
}

#infoContainer .pis-addr-row[hidden] {
    display: none;
}

#infoContainer .pis-addr-row.is-retired {
    font-size: 10.5px;
    color: #8a949e;
    font-style: italic;
}

#infoContainer .pis-addr-row.is-retired.is-active {
    color: #5d6b72;
    font-weight: 600;
}

#infoContainer .pis-addr-row.is-utility {
    font-size: 10.5px;
    font-style: italic;
    color: #688898;
}

#infoContainer .pis-addr-row.is-utility.is-active {
    color: #395f6f;
    font-weight: 600;
}

#infoContainer .pis-addr-empty {
    font-size: 12px;
    font-style: italic;
    color: var(--pis-text-muted);
}

#infoContainer .pis-addr-empty[hidden] {
    display: none;
}

/* ---- Address details flyout (property.js appends #addrFlyout to <body>) ---- */
#addrFlyout.pis-flyout {
    position: fixed;
    z-index: 900;
    width: 300px;
    max-height: min(420px, calc(var(--vh) - 60px));
    display: flex;
    flex-direction: column;
    font-family: var(--pis-font);
    font-size: 12px;
    color: var(--pis-text);
    background: var(--pis-surface);
    border: 1px solid var(--pis-border);
    border-radius: var(--pis-radius);
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.22);
}

#addrFlyout.pis-flyout[hidden] {
    display: none;
}

#addrFlyout .pis-flyout__head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 6px 10px;
    background: var(--pis-surface-2);
    border-bottom: 1px solid var(--pis-border);
    border-radius: var(--pis-radius) var(--pis-radius) 0 0;
    color: var(--pis-brand);
}

#addrFlyout .pis-flyout__title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pis-text);
}

#addrFlyout .pis-flyout__pos {
    font-size: 10.5px;
    color: var(--pis-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#addrFlyout .pis-flyout__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--pis-text);
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#addrFlyout .pis-flyout__btn:hover:not(:disabled) {
    background: var(--mc-stone);
}

#addrFlyout .pis-flyout__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

#addrFlyout .pis-flyout__btn:focus-visible,
#addrFlyout .pis-flyout__link:focus-visible {
    outline: 2px solid var(--pis-brand);
}

#addrFlyout .pis-flyout__body {
    flex: 1;
    min-height: 60px;
    overflow: auto;
    padding: 8px 12px 12px;
    line-height: 1.45;
}

#addrFlyout .pis-flyout__foot {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-top: 1px solid var(--pis-border);
    background: var(--pis-surface-2);
    border-radius: 0 0 var(--pis-radius) var(--pis-radius);
}

#addrFlyout .pis-flyout__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--pis-brand);
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#addrFlyout .pis-flyout__link:hover {
    background: var(--mc-stone);
    text-decoration: underline;
}

/* Little pointer toward the clicked address */
#addrFlyout .pis-flyout__arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--pis-surface);
    border: 1px solid var(--pis-border);
    transform: rotate(45deg);
}

#addrFlyout[data-side="left"] .pis-flyout__arrow {
    right: -7px;
    border-left: none;
    border-bottom: none;
}

#addrFlyout[data-side="right"] .pis-flyout__arrow {
    left: -7px;
    border-right: none;
    border-top: none;
}

#addrFlyout #physicalAddressInfo {
    display: block;
    margin: 0;
    padding: 0;
}

#addrFlyout #physicalAddressInfo:empty::before {
    content: "Loading details\2026";
    color: var(--pis-text-muted);
    font-style: italic;
}

#addrFlyout .pis-flyout__body table {
    width: 100%;
    border-collapse: collapse;
}

#addrFlyout .pis-flyout__body td,
#addrFlyout .pis-flyout__body th {
    padding: 4px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #eceae5;
    word-break: break-word;
}

#addrFlyout .pis-flyout__body tr > :first-child:not(:only-child) {
    width: 40%;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pis-text-muted);
}

#addrFlyout .pis-flyout__body tr:last-child > * {
    border-bottom: none;
}

#addrFlyout .pis-flyout__body b,
#addrFlyout .pis-flyout__body strong {
    color: var(--pis-value);
}

#addrFlyout .pis-flyout__body a {
    color: var(--pis-brand);
    text-decoration: none;
}

#addrFlyout .pis-flyout__body a:hover {
    text-decoration: underline;
}

/* ---- History (cadastral) tab: content is generated, so common elements are styled generically ---- */
#infoContainer #cadastralInfo.pis-historic {
    box-sizing: border-box;
    padding: 8px 6px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--pis-text);
}

#infoContainer #cadastralInfo.pis-historic:not(:has(*)) {
    color: var(--pis-text-muted);
    font-style: italic;
}

#infoContainer .pis-historic h1,
#infoContainer .pis-historic h2,
#infoContainer .pis-historic h3,
#infoContainer .pis-historic h4,
#infoContainer .pis-historic h5 {
    margin: 14px 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pis-text-muted);
}

#infoContainer .pis-historic > :first-child {
    margin-top: 0;
}

#infoContainer .pis-historic table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 11.5px;
    background: var(--pis-surface);
    border: 1px solid var(--pis-border);
}

#infoContainer .pis-historic th {
    padding: 5px 6px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pis-text-muted);
    background: var(--pis-surface-2);
    border-bottom: 1px solid var(--pis-border);
}

#infoContainer .pis-historic td {
    padding: 5px 6px;
    vertical-align: top;
    border-bottom: 1px solid #eceae5;
    word-break: break-word;
}

#infoContainer .pis-historic a {
    color: var(--pis-brand);
    text-decoration: none;
}

#infoContainer .pis-historic a:hover {
    text-decoration: underline;
}

#infoContainer .pis-historic hr {
    border: none;
    border-top: 1px solid var(--pis-border);
    margin: 12px 0;
}

#infoContainer .pis-historic ul,
#infoContainer .pis-historic ol {
    padding-left: 18px;
    margin: 4px 0 10px;
}

#infoContainer .pis-historic button,
#infoContainer .pis-historic input[type="button"] {
    font: inherit;
    font-size: 11.5px;
    padding: 3px 10px;
    color: var(--pis-brand);
    background: var(--pis-surface);
    border: 1px solid var(--pis-brand);
    border-radius: 3px;
    cursor: pointer;
}

#infoContainer .pis-historic button:hover,
#infoContainer .pis-historic input[type="button"]:hover {
    background: #e9eef1;
}

/* v5 collapsible lot lists ("Current Lots ▼" / "Historic Lots ▼") */
#infoContainer .pis-historic .collapsible {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 7px;
    font-size: 12px;
    text-align: left;
    color: #fff;
    background: var(--mc-light-blue);
    border: none;
    border-radius: 3px;
}

#infoContainer .pis-historic .collapsible:hover,
#infoContainer .pis-historic .collapsible.active {
    color: #fff;
    background: var(--mc-dark-blue);
}

#infoContainer .pis-historic .collapsible.current {
    background: #4f7a2e;
}

#infoContainer .pis-historic .content {
    padding: 0 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background: var(--pis-surface-2);
}

/* ================================================================ layers panel */
#tocContainer {
    box-sizing: border-box;
    overflow: hidden;
}

#tocTabsCalcite > calcite-tab {
    box-sizing: border-box;
    padding: 2px 0 0;
    overflow: hidden;
}

/* Each tab: .pis-tab-wrap (fixed height from CSS) > .pis-tab-top (fixed) + .pis-tab-scroll (scrolls) */
#tocContainer .pis-tab-wrap {
    display: flex;
    flex-direction: column;
    height: var(--layers-tab-h);
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

#tocContainer .pis-tab-top {
    flex: 0 0 auto;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pis-border);
}

#tocContainer .pis-tab-top:empty {
    padding: 0;
    border-bottom: none;
}

#tocContainer .pis-tab-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 4px;
    box-sizing: border-box;
}

.pis-panel-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--pis-text-muted);
}

/* "Turn all off" top-right of the tab content */
#tocContainer .pis-layers-bar {
    display: flex;
    justify-content: flex-end;
    padding: 2px 2px 4px 0;
}

/* Layer list rows: Calcite spacing tokens inherit into the shadow DOM, so this compacts every row */
#tocContainer #layersDiv.pis-layerlist {
    display: block;
    width: 100%;
    --calcite-spacing-xxs: 1px;
    --calcite-spacing-xs: 2px;
    --calcite-spacing-sm: 4px;
    --calcite-spacing-md: 6px;
    --calcite-spacing-lg: 8px;
    --calcite-spacing-xl: 20px;
    --calcite-spacing-xxl: 24px;
    --calcite-spacing-xxxl: 26px;
    --calcite-font-size: 12px;
    --calcite-font-size-sm: 11px;
    --calcite-font-size--1: 12px;
    --calcite-font-size--2: 11px;
}

#tocContainer #basemapGallery,
#tocContainer #basemapGallery arcgis-basemap-gallery {
    width: 100%;
    --arcgis-internal-panel-width: 100% !important;
}

/* Legend: inner tab bar stays fixed; each legend scrolls in its own tab */
#tocContainer #tab-legend .pis-legend-tabs {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

#tocContainer #tab-legend .pis-legend-tabs > calcite-tab {
    height: calc(var(--layers-tab-h) - var(--tabnav-h));
    overflow: auto;
}

#vtLegend {
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pis-text-muted);
}

#vtLegend img {
    display: block;
    max-width: 100%;
    margin: 4px 0 10px;
}

/* Layer opacity popover (map.js) */
.pis-opacity {
    --calcite-popover-background-color: var(--mc-stone);
    --calcite-popover-border-color: var(--mc-light-blue);
}

.pis-opacity__label {
    margin: 10px 15px 4px;
    padding-bottom: 4px;
    font: 700 13px Arial, sans-serif;
    color: var(--mc-dark-blue);
    border-bottom: 2px solid var(--mc-green);
}

.pis-opacity__slider {
    width: 220px;
    margin: 0 15px 10px;
    --calcite-color-brand: var(--mc-medium-blue);
}

/* Auto aerial switch (mcgis-autobasemap.js injects #autoToggleBasemap): checkbox drawn as a slider */
#autoToggleBasemap {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 18px;
    margin: 0 6px 0 0;
    border-radius: 9px;
    background: #c9c6bf;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s;
}

#autoToggleBasemap::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(35 31 32 / 0.3);
    transition: transform 0.15s;
}

#autoToggleBasemap:checked {
    background: var(--mc-green);
}

#autoToggleBasemap:checked::after {
    transform: translateX(14px);
}

#autoToggleBasemap:focus-visible {
    outline: 2px solid var(--mc-medium-blue);
    outline-offset: 2px;
}

/* ================================================================ status bar */
#bottom-info.pis-statusbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: var(--statusbar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 10px;
    background: rgb(56 68 75 / 0.97);
    border-top: 2px solid var(--mc-green);
    color: var(--mc-stone);
    font-size: 11.5px;
}

.pis-statusbar__group {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    white-space: nowrap;
}

#bottom-info a {
    color: #f4f3f0;
    text-decoration: none;
}

#bottom-info a:hover,
#bottom-info a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

#bottom-info #currentBaseMap {
    color: var(--mc-light-gold);
    overflow: hidden;
    text-overflow: ellipsis;
}

#bottom-info #currentBaseMap:empty {
    display: none;
}

#bottom-info #coordsDiv {
    color: #c3ced3;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pis-statusbar__sep {
    flex: 0 0 auto;
    width: 1px;
    height: 12px;
    background: rgb(255 255 255 / 0.25);
}

.pis-statusbar__easter {
    display: inline-flex;
    gap: 6px;
}

.pis-statusbar__easter a {
    color: rgb(255 255 255 / 0.35) !important;
}

.pis-statusbar__more {
    display: none;
}

/* Toast */
#message.pis-toast {
    position: absolute;
    right: 12px;
    bottom: calc(var(--statusbar-h) + 10px);
    z-index: 31;
    max-width: min(360px, calc(100vw - 24px));
    padding: 8px 12px;
    background: var(--pis-surface);
    color: var(--pis-brand);
    font-size: 13px;
    border-left: 4px solid var(--pis-brand);
    border-radius: var(--pis-radius);
    box-shadow: var(--pis-shadow);
}

#message.pis-toast:empty {
    display: none;
}

/* ================================================================ context menu (draw.js) */
.pis-context-menu {
    position: fixed;
    z-index: 1000;
    width: 220px;
    box-sizing: border-box;
    padding: 4px 0;
    background: rgb(245 243 243);
    border: 1px solid var(--mc-dark-blue);
    border-radius: 4px;
    box-shadow: var(--pis-shadow);
    font: 14px Arial, sans-serif;
}

.pis-context-menu[hidden] {
    display: none;
}

.pis-context-menu button {
    display: block;
    width: 100%;
    padding: 5px 12px;
    font: inherit;
    text-align: left;
    color: var(--pis-text);
    background: none;
    border: none;
    cursor: pointer;
}

.pis-context-menu button:hover,
.pis-context-menu button:focus-visible {
    background: #d6e4ea;
    outline: none;
}

.pis-context-menu hr {
    margin: 4px 8px;
    border: none;
    border-top: 1px solid var(--pis-border);
}

/* ================================================================ dialogs */
calcite-dialog calcite-tabs {
    width: 100%;
}

/* The tabbed welcome dialog pads its own tabs; each tab scrolls on its own */
#welcome-dialog {
    --calcite-dialog-content-space: 0;
    --calcite-dialog-size-x: 720px;
}

#welcome-dialog calcite-tab {
    box-sizing: border-box;
    max-height: min(62vh, 560px);
    overflow: auto;
    padding: 14px 16px;
}

.pis-dialog-body {
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.pis-dialog-body h3 {
    margin: 14px 0 4px;
    font-size: 13px;
    color: var(--mc-dark-blue);
}

.pis-dialog-body img,
.pis-dialog-body table {
    max-width: 100%;
    height: auto;
}

.pis-dialog-body ul {
    padding-left: 20px;
    margin: 4px 0 8px;
}

.pis-dialog-body .pis-callout {
    padding: 8px 10px;
    margin: 10px 0;
    background: #f6f0e6;
    border-left: 4px solid var(--mc-light-gold);
    border-radius: 3px;
}

.pis-tight-top {
    margin-top: 2px;
}

.pis-gap-top {
    margin-top: 14px;
}

.pis-smart911 {
    float: left;
    width: 180px;
    margin: 4px 14px 8px 0;
    border-radius: 4px;
}

.pis-system-info {
    padding: 6px 16px;
    font-size: 11px;
    color: var(--pis-text-muted);
    text-align: center;
    border-top: 1px solid var(--pis-border);
}

.pis-system-info:empty {
    display: none;
}

/* Welcome: brand header band */
#welcome-dialog .pis-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 16px;
    padding: 20px 24px 18px;
    background: var(--pis-surface-2);
    border-bottom: 4px solid var(--mc-green);
    border-radius: var(--pis-radius) var(--pis-radius) 0 0;
    box-sizing: border-box;
    max-width: 100%;
}

#welcome-dialog .pis-hero__logo {
    width: 104px;
    height: auto;
    flex: 0 0 auto;
}

#welcome-dialog .pis-hero__eyebrow {
    font-family: var(--mc-font-slab);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mc-medium-blue);
}

#welcome-dialog .pis-hero__title {
    margin: 2px 0 6px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--mc-dark-blue);
}

#welcome-dialog .pis-hero__lead {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--pis-text-muted);
    max-width: 46ch;
}

#welcome-dialog .pis-start {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    max-width: 100%;
}

#welcome-dialog .pis-start__card {
    min-width: 0;
    padding: 14px 14px 12px;
    background: var(--pis-surface);
    border: 1px solid var(--mc-stone);
    border-top: 3px solid var(--mc-light-blue);
    border-radius: var(--pis-radius);
}

#welcome-dialog .pis-start__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    border-radius: 50%;
    color: var(--mc-medium-blue);
    background: #e9eef1;
}

#welcome-dialog .pis-start__card h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mc-dark-blue);
}

#welcome-dialog .pis-start__card p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--pis-text-muted);
}

#welcome-dialog .pis-start__card a,
#welcome-dialog .pis-welcome-note a {
    color: var(--pis-brand);
    font-weight: 600;
}

#welcome-dialog .pis-searchby {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
}

#welcome-dialog .pis-searchby__label {
    flex: 0 0 auto;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pis-text-muted);
}

.pis-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pis-chips li {
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-dark-blue);
    background: var(--pis-surface-2);
    border: 1px solid var(--mc-stone);
    border-radius: 12px;
}

#welcome-dialog .pis-welcome-note {
    font-size: 12px;
    color: var(--pis-text-muted);
}

/* What's New (was _WhatsNew.cshtml) */
.pis-whatsnew .pis-wn-date {
    margin: 14px 0 2px;
    font-family: var(--mc-font-slab);
    font-size: 13px;
    color: var(--mc-dark-blue);
}

.pis-whatsnew .pis-wn-date:first-child {
    margin-top: 0;
}

.pis-whatsnew .pis-wn-date--newest {
    font-size: 18px;
    color: var(--mc-rust);
}

.pis-whatsnew .pis-wn-era {
    margin: 22px 0 6px;
    padding-top: 8px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pis-text-muted);
    border-top: 2px solid var(--pis-border);
}

.pis-wn-alert {
    font-weight: 700;
    color: var(--mc-rust);
}

.pis-wn-big {
    font-size: 20px;
}

.pis-wn-muted {
    font-weight: 700;
    color: #9aa3a8;
}

.pis-wn-small {
    font-size: 11px;
}

.pis-wn-img {
    display: block;
    max-width: min(392px, 100%);
    margin-top: 10px;
}

/* Print dialog */
#printChoices.pis-print {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#printChoices calcite-button {
    width: 100%;
}

#print-dialog calcite-input-text {
    margin-top: 4px;
}

#printResults {
    padding: 6px 8px;
    background: #f1f3e3;
    border: 1px solid var(--mc-green);
    border-radius: 3px;
}

#printResults[hidden] {
    display: none;
}

/* Map note dialog */
.pis-mapnote {
    display: grid;
    gap: 6px;
    font-size: 12px;
}

.pis-mapnote__row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pis-mapnote__row .pis-native {
    width: auto;
}

/* Ad-hoc / historic dialogs */
.pis-adhoc-content {
    display: block;
    padding: 12px;
}

#historicData {
    padding: 12px;
    font-size: 11px;
}

/* ================================================================ mid widths */
@media (max-width: 1200px) and (min-width: 769px) {
    .pis-statusbar,
    .pis-statusbar__group {
        gap: 10px;
        font-size: 11px;
    }

    #bottom-info #currentBaseMap {
        display: none;
    }

    .pis-dms {
        grid-template-columns: 58px repeat(3, minmax(48px, 1fr)) 48px auto;
    }
}

@media (max-width: 1000px) and (min-width: 769px) {
    :root {
        --info-w: 330px;
        --info-top: 104px;
    }

    #bottom-info #coordsDiv,
    .pis-statusbar__easter {
        display: none;
    }

    /* Narrow windows: the two toolbars stack */
    #upperRightArea.pis-toolbar-row {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* ================================================================ phones */
@media (max-width: 768px) {
    :root {
        --statusbar-h: 26px;
        --dock-h: 54px;
        --sheet-max: calc(var(--vh) * 0.6);
        --sheet-bottom: calc(var(--statusbar-h) + var(--dock-h) + var(--safe-b));
        /* sheet = head (40) + tab nav + padding; the tab content gets the rest */
        --info-tab-h: calc(var(--sheet-max) - 40px - var(--tabnav-h) - 14px);
        --layers-tab-h: calc(var(--sheet-max) - 40px - var(--tabnav-h) - 18px);
        --results-h: var(--sheet-max);
    }

    arcgis-map {
        inset: 0 0 var(--sheet-bottom) 0;
    }

    /* Toolbars: icon-only, stacked and wrapping, clear of the notch */
    #upperRightArea.pis-toolbar-row {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        margin-top: env(safe-area-inset-top, 0px);
        margin-right: env(safe-area-inset-right, 0px);
        max-width: calc(100vw - 30px);
    }

    .pis-toolbar {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    #bottomLeftTools {
        margin-left: env(safe-area-inset-left, 0px);
    }

    /* The text map-note tool is desktop only (as in v5) */
    #mapNotesExpand,
    #mapNotesExpand + arcgis-expand + .pis-toolbar__divider {
        display: none;
    }

    .pis-measure-card {
        bottom: 64px;
        left: 10px;
        width: 200px;
        min-height: 110px;
    }

    /* ---- Panels become bottom sheets (one at a time; ui.js enforces it) ---- */
    .pis-panel,
    .pis-panel--search,
    .pis-panel--results,
    .pis-panel--layers,
    .pis-panel--info {
        top: auto;
        left: 0;
        right: 0;
        bottom: var(--sheet-bottom);
        width: auto;
        height: auto;
        max-height: var(--sheet-max);
        z-index: 25;
        display: flex;
        flex-direction: column;
        padding: 0 6px 6px;
        padding-left: calc(6px + env(safe-area-inset-left, 0px));
        padding-right: calc(6px + env(safe-area-inset-right, 0px));
        border: none;
        border-top: 3px solid var(--mc-medium-blue);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -6px 24px rgb(35 31 32 / 0.28);
        opacity: 1;
    }

    .pis-panel:not(.is-open),
    .pis-panel--search:not(.is-open),
    .pis-panel--results:not(.is-open),
    .pis-panel--layers:not(.is-open),
    .pis-panel--info:not(.is-open) {
        transform: translateY(calc(100% + var(--sheet-bottom)));
    }

    .pis-panel--results {
        height: var(--sheet-max);
    }

    .pis-panel__body {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Sheet header: grab bar + title + close */
    .pis-panel__head {
        position: relative;
        display: flex;
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 0 2px 4px;
        touch-action: none;
        cursor: grab;
    }

    .pis-panel__grab {
        display: block;
        position: absolute;
        top: 5px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: var(--pis-frame);
    }

    .pis-panel__close {
        width: 36px;
        height: 36px;
    }

    /* Search sheet scrolls; its pick lists stay inside it */
    #searchTabs {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #searchTabsCalcite {
        height: auto;
    }

    #searchProgressDiv {
        top: 8px;
        bottom: auto;
        right: 52px;
    }

    .pis-combo .list-container,
    .pis-combo .survey-list-container {
        position: static;
        width: auto;
        max-width: none;
        max-height: 180px;
    }

    #searchTabs .pis-field--house {
        flex-basis: 84px;
    }

    .pis-dms {
        grid-template-columns: 54px repeat(3, minmax(0, 1fr)) 46px;
    }

    .pis-dms > calcite-button {
        grid-column: 2 / -1;
    }

    .pis-dms > span:nth-child(6),
    .pis-dms > span:nth-child(12) {
        display: none;
    }

    .pis-dd-label {
        width: auto;
        flex-basis: 100%;
        text-align: left;
    }

    .pis-or {
        flex-basis: 100%;
        margin-top: 0;
        text-align: center;
    }

    #platTypeRadioGroup {
        flex-wrap: wrap;
    }

    /* Info sheet: action buttons stay two rows of five */
    #infoContainer #buttonContainerDiv .appBtn {
        --calcite-button-padding-x: 2px;
    }

    #infoContainer .pis-section__head .pis-addr-filter {
        width: 110px;
    }

    /* Address details flyout sits over the lower part of the info sheet */
    #addrFlyout.pis-flyout {
        left: 8px !important;
        right: 8px;
        top: auto !important;
        bottom: calc(var(--sheet-bottom) + 8px);
        width: auto;
        max-height: 45vh;
    }

    #addrFlyout .pis-flyout__arrow {
        display: none !important;
    }

    /* Layers sheet */
    .pis-panel--layers #tocContainer {
        flex: 1 1 auto;
    }

    /* ---- Tab bar above the status bar (the v5 handles become tabs) ---- */
    .pis-dock {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(var(--statusbar-h) + var(--safe-b));
        z-index: 29;
        display: flex;
        height: var(--dock-h);
        padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
        background: var(--pis-surface);
        border-top: 1px solid var(--pis-border);
        box-shadow: 0 -2px 8px rgb(35 31 32 / 0.12);
    }

    .pis-handle,
    #searchToggle,
    #searchResultsToggle,
    #layersToggle,
    #infoToggle,
    #btnMapMenu,
    body.pis-search-open #searchToggle,
    body.pis-layers-open #layersToggle,
    body.pis-info-open #infoToggle,
    body.pis-results-open #searchResultsToggle {
        position: relative;
        inset: auto;
        top: auto;
        left: auto;
        right: auto;
        flex: 1 1 0;
        flex-direction: column;
        gap: 2px;
        width: auto;
        height: 100%;
        min-width: 0;
        padding: 4px 2px 0;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--pis-text-muted);
        background: transparent;
        border: none;
        border-top: 3px solid transparent;
        border-radius: 0;
        box-shadow: none;
        transition: color 0.15s, border-color 0.15s;
    }

    .pis-handle__label,
    .pis-handle--tab .pis-handle__label {
        position: static;
        width: auto;
        height: auto;
        overflow: hidden;
        clip-path: none;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .pis-handle .pis-handle__icon,
    .pis-handle.is-active .pis-handle__icon {
        display: inline-flex;
    }

    .pis-handle .pis-handle__close,
    .pis-handle.is-active .pis-handle__close,
    .pis-handle__chev {
        display: none !important;
    }

    .pis-handle.is-active {
        color: var(--mc-medium-blue);
        background: var(--pis-surface-2);
        border-top-color: var(--mc-green);
    }

    body #btnMapMenu {
        display: inline-flex;
    }

    /* ---- Status bar: help + contact, the other links fold into a menu ---- */
    #bottom-info.pis-statusbar {
        height: calc(var(--statusbar-h) + var(--safe-b));
        padding: 0 calc(10px + env(safe-area-inset-right, 0px)) var(--safe-b) calc(10px + env(safe-area-inset-left, 0px));
        gap: 10px;
        font-size: 11px;
    }

    #bottom-info #currentBaseMap,
    #bottom-info #coordsDiv,
    .pis-statusbar__main .pis-statusbar__sep {
        display: none;
    }

    .pis-statusbar__more {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 6px;
        font: inherit;
        color: #f4f3f0;
        background: transparent;
        border: 1px solid rgb(255 255 255 / 0.3);
        border-radius: 4px;
        cursor: pointer;
    }

    .pis-statusbar__links {
        position: absolute;
        right: calc(6px + env(safe-area-inset-right, 0px));
        bottom: calc(100% + 4px);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: 160px;
        padding: 4px 0;
        background: rgb(56 68 75 / 0.98);
        border: 1px solid rgb(255 255 255 / 0.2);
        border-radius: var(--pis-radius);
        box-shadow: var(--pis-shadow);
    }

    #bottom-info.is-more-open .pis-statusbar__links {
        display: flex;
    }

    .pis-statusbar__links > div > a {
        display: block;
        padding: 8px 14px;
    }

    .pis-statusbar__links .pis-statusbar__sep {
        width: auto;
        height: 1px;
        margin: 4px 10px;
    }

    .pis-statusbar__easter {
        padding: 4px 14px;
    }

    #message.pis-toast {
        bottom: calc(var(--sheet-bottom) + 10px);
    }

    /* Context menu: bigger touch targets */
    .pis-context-menu button {
        padding: 10px 14px;
    }

    /* ---- Dialogs go full width ---- */
    calcite-dialog {
        --calcite-dialog-size-x: 100vw;
        --calcite-dialog-max-size-x: 100vw;
        --calcite-dialog-min-size-x: 0;
    }

    #welcome-dialog {
        --calcite-dialog-size-x: 100vw;
    }

    #welcome-dialog calcite-tab {
        max-height: 55vh;
        padding: 12px;
    }

    #welcome-dialog .pis-start {
        grid-template-columns: 1fr;
    }

    #welcome-dialog .pis-hero {
        gap: 14px;
        padding: 16px;
    }

    #welcome-dialog .pis-hero__logo {
        width: 76px;
    }

    #welcome-dialog .pis-hero__title {
        font-size: 20px;
    }

    #welcome-dialog .pis-searchby {
        flex-direction: column;
    }

    .pis-smart911 {
        float: none;
        display: block;
        margin: 0 0 10px;
    }
}

/* ================================================================ results grid (results.js) */
.pis-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.pis-grid__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px;
    background: var(--pis-surface-2);
    border-bottom: 1px solid var(--pis-border);
}

.pis-grid__filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--pis-text-muted);
}

.pis-grid__filter {
    width: 200px;
    max-width: 50vw;
    height: 24px;
    padding: 0 6px;
    font: inherit;
    border: 1px solid var(--pis-border);
    border-radius: 3px;
}

.pis-grid__count {
    color: var(--pis-text-muted);
    font-variant-numeric: tabular-nums;
}

.pis-grid__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.pis-grid__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.pis-grid__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0;
    text-align: left;
    background: var(--mc-dark-blue);
}

.pis-grid__sort {
    width: 100%;
    padding: 5px 6px;
    font: inherit;
    font-weight: 700;
    text-align: left;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.pis-grid__table th[aria-sort="ascending"] .pis-grid__arrow::after { content: " \25B2"; }
.pis-grid__table th[aria-sort="descending"] .pis-grid__arrow::after { content: " \25BC"; }

.pis-grid__table td {
    padding: 4px 6px;
    vertical-align: top;
    border-bottom: 1px solid #eceae5;
    word-break: break-word;
}

.pis-grid__table tbody tr:nth-child(even) td {
    background: #faf9f7;
}

.pis-grid__table tbody tr:hover td {
    background: #e9eef1;
    cursor: pointer;
}

.pis-grid__table tbody tr.is-selected td {
    background: #dfe6c0;
}

.pis-grid__table tr[hidden] {
    display: none;
}

/* ================================================================ suggestion lists (search.js) */
/* Not positioned host on purpose: the list must escape the calcite-tab, which clips (same trick as v5). */
.pis-suggest {
    position: absolute;
    top: auto;
    left: auto;
    z-index: 100;
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: 300px;
    margin: 2px 0 0;
    padding: 2px 0;
    overflow: auto;
    list-style: none;
    font-size: 12px;
    background: var(--pis-surface);
    border: 1px solid var(--pis-border);
    border-radius: 0 0 var(--pis-radius) var(--pis-radius);
    box-shadow: var(--pis-shadow);
}

.pis-suggest[hidden] {
    display: none;
}

.pis-suggest__item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
}

.pis-suggest__item:hover,
.pis-suggest__item[aria-selected="true"] {
    background: #e9eef1;
}

.pis-suggest__desc {
    color: var(--pis-text-muted);
    font-size: 11px;
}

@media (max-width: 768px) {
    .pis-suggest {
        position: static;
        width: auto;
        max-height: 180px;
    }

    .pis-grid__filter {
        width: 140px;
    }
}

/* ================================================================ search modules (was css/search.css) */
/* Search side: results grid (replaces DataTables) and the road / survey suggestion pickers.
   Uses the app.css tokens (--pis-*); fallbacks keep it usable on its own. To be merged into app.css. */

/* ---------------------------------------------------------------- results grid */
.pis-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--pis-text, #231f20);
}

.pis-grid__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.pis-grid__filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pis-text-muted, #5d6b72);
}

.pis-grid__filter {
    font: inherit;
    width: 200px;
    max-width: 60vw;
    padding: 4px 8px;
    border: 1px solid var(--pis-border, #d6d3cc);
    border-radius: var(--pis-radius, 6px);
    background: var(--pis-surface, #fff);
    color: inherit;
}

.pis-grid__count {
    color: var(--pis-text-muted, #5d6b72);
    white-space: nowrap;
}

/* The table scrolls inside this box (both directions), never the page. */
.pis-grid__scroll {
    max-height: var(--pis-grid-height, 300px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 1px solid var(--pis-border, #d6d3cc);
    border-radius: var(--pis-radius, 6px);
    background: var(--pis-surface, #fff);
}

.pis-grid__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.pis-grid__table th,
.pis-grid__table td {
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--pis-border, #d6d3cc);
    white-space: pre-line; /* names and grantors come one per line */
    overflow-wrap: break-word;   /* break long values only; "anywhere" let short words split letter by letter */
}

.pis-grid__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--pis-surface-2, #f4f3f0);
    font-weight: 600;
    white-space: nowrap;
}

.pis-grid__sort {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pis-grid__sort:focus-visible {
    outline: 2px solid var(--pis-brand, #2a6ebb);
    outline-offset: 2px;
}

.pis-grid__arrow::after {
    content: "\2195";
    opacity: 0.35;
    font-size: 10px;
}

th[aria-sort="ascending"] .pis-grid__arrow::after { content: "\25B2"; opacity: 0.8; }
th[aria-sort="descending"] .pis-grid__arrow::after { content: "\25BC"; opacity: 0.8; }

.pis-grid__table tbody tr:nth-child(even) { background: rgb(0 0 0 / 0.025); }
.pis-grid__table tbody tr:hover { background: rgb(42 110 187 / 0.08); }
.pis-grid__table tbody tr.is-selected { background: rgb(122 184 0 / 0.18); }
.pis-grid__table tbody tr.is-clickable { cursor: pointer; }

.pis-grid__link {
    color: var(--pis-brand, #2a6ebb);
    white-space: nowrap;
}

.pis-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}

.pis-src--eagle { color: green; }
.pis-src--dor { color: darkorange; }
.pis-retired { font-size: 10px; color: grey; }

/* Old columnDefs widths are set inline; keep the narrow link columns from wrapping. */
.pis-grid--document td:last-child,
.pis-grid--address td:last-child { white-space: nowrap; }

/* ---------------------------------------------------------------- suggestion pickers */
.pis-suggest-host { position: relative; }

.pis-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: min(260px, 40vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pis-surface, #fff);
    border: 1px solid var(--pis-frame, #9aa3a8);
    border-radius: var(--pis-radius, 6px);
    box-shadow: var(--pis-shadow, 0 2px 8px rgb(35 31 32 / 0.18));
    font-size: 12px;
}

.pis-suggest[hidden] { display: none; }

.pis-suggest__item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    min-height: 32px;
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid var(--pis-border, #d6d3cc);
}

.pis-suggest__item:last-child { border-bottom: 0; }
.pis-suggest__item:hover,
.pis-suggest__item[aria-selected="true"] { background: rgb(42 110 187 / 0.12); }
.pis-suggest__desc { color: var(--pis-text-muted, #5d6b72); white-space: nowrap; }

@media (max-width: 768px) {
    .pis-grid__scroll { max-height: var(--pis-grid-height-mobile, 45vh); }
    .pis-grid__filter { width: 100%; max-width: none; }
    .pis-grid__filter-label { flex: 1 1 100%; }
    .pis-suggest__item { min-height: 40px; } /* finger-sized rows */
}

/* ================================================================ property modules (was css/property.css) */
/* property.js / scans.js styles not already in app.css (address list + flyout base styles live there). */

/* ---- Address flyout body: attribute + school tables ---- */
#addrFlyout .pis-addr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#addrFlyout .pis-addr-table td {
    padding: 4px;
    vertical-align: top;
    border-bottom: 1px solid #eceae5;
    word-break: break-word;
}

#addrFlyout .pis-addr-table tr:last-child td {
    border-bottom: none;
}

#addrFlyout .pis-addr-schools {
    margin-top: 6px;
    color: var(--pis-text-muted, #6b6b6b);
}

#addrFlyout .pis-addr-schools table {
    color: var(--pis-text, #231f20);
}

/* ---- Address flyout on phones: a card along the bottom, above the bottom sheet ---- */
#addrFlyout[data-mode="sheet"] {
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto !important;
    max-height: 55vh;
    z-index: 1200;
}

#addrFlyout[data-mode="sheet"] .pis-flyout__arrow {
    display: none !important;
}

@media (max-width: 768px) {
    #addrFlyout.pis-flyout {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: 55vh;
        z-index: 1200;
    }

    #addrFlyout .pis-flyout__btn {
        width: 36px;
        height: 36px; /* touch target */
    }

    #infoContainer .pis-addr-list {
        max-height: 140px;
    }
}

/* ---- History tab (SOE_Cadastral2 cards) ---- */
#cadastralInfo .pis-history {
    padding: 2px;
}

#cadastralInfo .pis-simcon {
    padding: 6px 4px 8px;
    margin-bottom: 6px;
    border-bottom: 1px dashed #e0e0e0;
}

#cadastralInfo .pis-simcon__head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

#cadastralInfo .pis-simcon__title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

#cadastralInfo .pis-simcon__title small,
#cadastralInfo .pis-lot small {
    font-size: 10px;
    font-weight: 400;
}

#cadastralInfo .pis-simcon__meta {
    font-size: 10px;
    color: var(--pis-text-muted, #6b6b6b);
}

#cadastralInfo .pis-simcon__btns {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin: 4px 0;
}

/* Collapsible lot lists (v5 .collapsible / .content, with the id quoting bug gone) */
#cadastralInfo .pis-collapsible {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    font: inherit;
    font-size: 12px;
    text-align: left;
    color: #fff;
    background: #999;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#cadastralInfo .pis-collapsible--current {
    background: forestgreen;
}

#cadastralInfo .pis-collapsible:hover,
#cadastralInfo .pis-collapsible.active {
    filter: brightness(.85);
}

#cadastralInfo .pis-collapsible__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 8px;
    background: #f1f1f1;
    transition: max-height .2s ease-out;
}

#cadastralInfo .pis-lot {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 3px 0;
    border-bottom: 1px dashed #e0e0e0;
}

#cadastralInfo .pis-lot:last-child {
    border-bottom: none;
}

#cadastralInfo .pis-lot.is-historic {
    color: #666;
}

#cadastralInfo .pis-lot__name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

#cadastralInfo .pis-lot__btns {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

#cadastralInfo .appBtnDarkTan {
    --calcite-button-background-color: #b08d57;
    --calcite-button-text-color: #fff;
}

/* ---- Water rights note in #adhoc-dialog ---- */
#adhocContent.pis-water-note {
    background: lightblue;
    line-height: 1.45;
}

/* ================================================================ tools modules (was css/tools.css) */
/* Tools: identify buttons, context menu, historic dialog, measure cards, map notes, print dialog.
   (merged into app.css later) */


/* ---- map context menu (#mapContextMenu, moved under <body> by draw.js) */
#mapContextMenu {
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    max-width: calc(100vw - 8px);
    padding: 4px 0;
    background: var(--calcite-color-foreground-1, #f5f3f3);
    color: var(--calcite-color-text-1, #151515);
    border: 1px solid var(--calcite-color-border-1, #6a6a6a);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-family: var(--calcite-font-family, Arial, sans-serif);
    font-size: 14px;
}
#mapContextMenu[hidden] {
    display: none;
}
#mapContextMenu [data-action] {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
#mapContextMenu [data-action]:hover,
#mapContextMenu [data-action]:focus-visible {
    background: lightblue;
    color: #151515;
    outline: none;
}
#mapContextMenu hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--calcite-color-border-3, #dfdfdf);
}

/* ---- historic data dialog (#historic-dialog / #historicData) */
#historicData {
    font-size: 12px;
    padding: 8px 12px;
}
.pis-historic-hint,
.pis-historic-empty {
    margin: 0 4px 8px;
    color: var(--calcite-color-text-3, #6a6a6a);
}
.pis-historic-item {
    margin: 4px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.pis-historic-item:focus-visible {
    outline: 2px solid var(--calcite-color-brand, #007ac2);
    outline-offset: 1px;
}
.pis-historic-item[aria-pressed="true"] {
    border-color: #2e7d32;
    box-shadow: inset 0 0 0 1px #2e7d32;
}
.pis-historic-label {
    color: var(--calcite-color-text-3, #6a6a6a);
}

/* ---- measure */
#toolbarDiv {
    display: flex;
    gap: 4px;
    padding: 4px;
}
.pis-measure-card {
    background: var(--calcite-color-foreground-1, #fff);
    padding: 6px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    max-width: calc(100vw - 24px);
}

/* ---- map notes expand */
#textInputDiv {
    padding: 6px 4px 4px;
}
#textInput {
    width: 100%;
    min-width: 200px;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 14px;
}

/* ---- print dialog */
#print-dialog .pis-print {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#printResults {
    margin-top: 4px;
}
.pis-print-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-wrap: anywhere;
}

/* ---- map note dialog (#dialogMapNote calcite-dialog) */
#dialogMapNote {
    --calcite-dialog-content-space: 12px;
}

/* ---- phones: 40px+ hit areas, dialogs fit a 390px screen */
@media (max-width: 768px) {
    #toolbarDiv calcite-button,
    #textButton {
        min-width: 44px;
        min-height: 44px;
    }
    #mapContextMenu [data-action] {
        min-height: 44px;
        font-size: 16px;
    }
    #textInput {
        min-height: 44px;
        font-size: 16px;   /* no iOS zoom on focus */
    }
    #print-dialog,
    #historic-dialog,
    #dialogMapNote {
        --calcite-dialog-max-size-x: calc(100vw - 16px);
        --calcite-dialog-size-x: calc(100vw - 16px);
    }
    #print-dialog calcite-button,
    #dialogMapNote calcite-button {
        min-height: 44px;
    }
    .pis-historic-item {
        padding: 10px;
        font-size: 13px;
    }
    .pis-measure-card {
        max-width: calc(100vw - 16px);
    }
}

/* ================================================================ services (was css/services.css) */
/* Map Services + ArcGIS Online tabs (js/services.js). Merge into app.css. */

/* ---------- shared: url / item-id rows ---------- */
#tab-services .pis-add-row,
#tab-ago .pis-add-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
}

#tab-services .pis-add-row .pis-native,
#tab-ago .pis-add-row .pis-native {
    flex: 1 1 auto;
    min-width: 0;
}

#tab-services .pis-add-row calcite-button,
#tab-ago .pis-add-row calcite-button {
    flex: 0 0 auto;
}

#btnAgoSignIn[hidden],
#agoUser[hidden],
#agoFolderSelect[hidden],
#agoCardContainer[hidden] {
    display: none !important;
}

/* ---------- Map Services list ---------- */
#map-service-list calcite-avatar {
    --calcite-avatar-background-color: var(--pis-surface);
    flex: 0 0 auto;
}

#map-service-list calcite-list-item {
    cursor: pointer;
}

#map-service-list calcite-list-item[data-busy] {
    cursor: progress;
    opacity: 0.7;
}

#map-service-list .pis-ms-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 16px;
}

#map-service-list .pis-ms-status [hidden] {
    display: none;
}

#map-service-list .pis-ms-onmap {
    color: var(--pis-accent);
}

/* ---------- ArcGIS Online: signed-in user ---------- */
#agoUser.pis-ago-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px 0 6px;
    font-size: 12px;
    color: var(--pis-text-muted);
}

#agoUser .pis-ago-user__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tab-ago .pis-ago-hint {
    margin: 4px 0 8px;
    font-size: 12px;
    color: var(--pis-text-muted);
}

#tab-ago .pis-ago-empty {
    margin: 8px 0;
    font-size: 12px;
    color: var(--pis-text-muted);
}

/* ---------- ArcGIS Online: cards ---------- */
#agoCardsListContainer.cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.pis-ago-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 4px 8px;
    padding: 6px;
    background: var(--pis-surface);
    border: 1px solid var(--pis-border);
    border-radius: var(--pis-radius);
    box-shadow: 0 1px 3px rgb(35 31 32 / 0.08);
    cursor: grab;
    user-select: none;
}

.pis-ago-card:hover {
    border-color: var(--mc-light-blue);
}

.pis-ago-card.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.pis-ago-card__thumb {
    grid-row: 1 / span 2;
    margin: 0;
    width: 96px;
    height: 64px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--pis-surface-2);
}

.pis-ago-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* drag the card, not the image */
}

.pis-ago-card__body {
    min-width: 0;
}

.pis-ago-card__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--pis-value);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pis-ago-card__meta {
    font-size: 10px;
    line-height: 1.35;
    color: var(--pis-text-muted);
    overflow-wrap: anywhere;
}

.pis-ago-card__add {
    justify-self: end;
    align-self: end;
}

/* Drop target while a card is dragged over the map */
#map.pis-drop-target {
    outline: 3px dashed var(--pis-accent);
    outline-offset: -3px;
}

/* Popup content for "MSL Parcels" (ParcelsTemplate) */
.pis-popup-parcels > div {
    margin: 2px 0;
}

/* ---------- phones: no drag, compact cards, bigger touch targets ---------- */
@media (max-width: 768px) {
    #agoCardsListContainer.cards-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .pis-ago-card {
        grid-template-columns: 72px minmax(0, 1fr);
        cursor: default;
    }

    .pis-ago-card__thumb {
        width: 72px;
        height: 52px;
    }

    #tab-services .pis-add-row .pis-native,
    #tab-ago .pis-add-row .pis-native {
        font-size: 16px; /* stops iOS zooming into the field */
    }
}

/* ================================================================ themes (was css/themes.css) */
/* Themes tab and theme map widgets (js/themes.js). Merge into app.css. */

/* ---- theme list */
#map-theme-list .pis-theme-item {
    cursor: pointer;
}

#map-theme-list .pis-theme-avatar {
    --calcite-avatar-background-color: var(--pis-surface);
    flex: none;
    margin-inline-end: 4px;
}

#map-theme-list .pis-theme-item--active {
    --calcite-list-background-color: var(--pis-surface-2);
    box-shadow: inset 4px 0 0 var(--pis-accent);
}

/* ---- legend / info expands (bottom-left, next to #bottomLeftTools) */
.pis-theme-expand__content {
    padding: 10px;
    background: var(--pis-surface);
    color: var(--pis-text);
    border-radius: var(--pis-radius);
    max-width: min(300px, calc(100vw - 32px));
    max-height: 50vh;
    overflow: auto;
}

.pis-theme-legend {
    display: block;
    width: 185px;
    max-width: 100%;
    height: auto;
    padding: 8px;
    background: #999;
    box-sizing: border-box;
}

.pis-theme-legend--wide {
    width: 270px;
}

.pis-theme-expand__content a {
    color: var(--pis-brand);
    font-weight: 600;
}

/* ---- theme tool rows (Map Missoula search + help, CCRF tools) */
.pis-theme-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--pis-surface);
    border-radius: var(--pis-radius);
    box-shadow: var(--pis-shadow);
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

.pis-theme-search {
    width: 260px;
    max-width: 100%;
    min-width: 0;
}

.pis-ccrf-tools__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--pis-text);
    white-space: nowrap;
}

/* v5: light coral = off, sea green = drawing */
.pis-ccrf-draw {
    --calcite-button-background-color: lightcoral;
    --calcite-button-icon-color: #000;
    --calcite-button-text-color: #000;
}

.pis-ccrf-draw.is-active {
    --calcite-button-background-color: mediumseagreen;
}

.pis-ccrf-symbol {
    display: block;
    max-width: 24px;
    max-height: 24px;
}

/* ---- TransMap swipe year labels */
.pis-swipe-year {
    padding: 6px 10px;
    background: var(--pis-surface);
    color: var(--pis-text);
    font-weight: 700;
    border-radius: var(--pis-radius);
    box-shadow: var(--pis-shadow);
    pointer-events: none;
}

/* ---- theme help and confirm dialogs */
.pis-theme-help__body {
    font-size: 14px;
    line-height: 1.45;
}

.pis-theme-help__body ul,
.pis-theme-help__body ol {
    margin: 0.4em 0 0.8em;
    padding-inline-start: 1.4em;
}

.pis-theme-help__body li {
    margin-bottom: 0.3em;
}

.pis-theme-confirm__text {
    font-size: 14px;
}

/* ---- phones: keep theme widgets small */
@media (max-width: 768px) {
    .pis-theme-legend,
    .pis-theme-legend--wide {
        width: 150px;
    }

    .pis-theme-expand__content {
        padding: 6px;
        max-height: 35vh;
    }

    .pis-theme-tools {
        padding: 4px 6px;
        gap: 4px;
    }

    .pis-theme-search {
        width: 180px;
    }

    .pis-ccrf-tools__title {
        display: none;
    }

    .pis-swipe-year {
        padding: 3px 6px;
        font-size: 12px;
    }
}

/* Themes and ArcGIS Online tabs are desktop-only (ui.js moves off them if the screen narrows). */
@media (max-width: 768px) {
    #tocTabsCalcite calcite-tab-title.pis-desktop-only,
    #tab-themes,
    #tab-ago {
        display: none !important;
    }
}

/* ---- phones: compact map toolbars (buttons at their natural size, small gaps, thin dividers) */
@media (max-width: 768px) {
    #upperRightArea.pis-toolbar-row {
        gap: 4px;
    }

    .pis-toolbar {
        gap: 3px;
        padding: 4px;
        border-radius: 6px;
    }

    .pis-toolbar calcite-button {
        min-width: 0;
        min-height: 0;
    }

    .pis-toolbar__divider {
        height: 18px;
        margin: 0 1px;
    }
}

/* ---- property panel: bold text, as in v5 (map_main.css set font-weight: bold on #infoContainer and
   the owner/legal/address fields inherit it). Hints, "(from cadastral)", parcel source etc. keep their 400. */
#infoContainer {
    font-weight: 700;
}

#infoContainer textarea,
#infoContainer input,
#infoContainer select,
#infoContainer .pis-addr-row {
    font-weight: inherit;
}

/* ---- Survey info + History tab buttons: the v5 colors (map_TOC_Calcite.css). The app's brand color
   (medium blue) was turning them all bluish green. Plain .cadastralBtn = Calcite's default blue, as in v5. */
#infoContainer calcite-button.cadastralBtn {
    --pis-btn: #007ac2;
    --pis-btn-text: #fff;
    --calcite-color-brand: var(--pis-btn);
    --calcite-color-brand-hover: color-mix(in srgb, var(--pis-btn) 80%, #000);
    --calcite-color-brand-press: color-mix(in srgb, var(--pis-btn) 70%, #000);
    --calcite-button-background-color: var(--pis-btn);
    --calcite-button-border-color: var(--pis-btn);
    --calcite-button-text-color: var(--pis-btn-text);
    --calcite-button-icon-color: var(--pis-btn-text);
}
#infoContainer calcite-button.cadastralBtn:hover {
    --calcite-button-background-color: color-mix(in srgb, var(--pis-btn) 80%, #000);
}
#infoContainer calcite-button.appBtnRed { --pis-btn: red; }
#infoContainer calcite-button.appBtnCadetBlue { --pis-btn: cadetblue; }
#infoContainer calcite-button.appBtnTan { --pis-btn: tan; --pis-btn-text: #231f20; }
#infoContainer calcite-button.appBtnDarkTan { --pis-btn: goldenrod; --pis-btn-text: #231f20; }
#infoContainer calcite-button.cadastralZoom_simCon { --pis-btn: rgb(255 165 0); --pis-btn-text: #000; }
#infoContainer calcite-button.cadastralZoom_conDiv { --pis-btn: rgb(101 221 8); --pis-btn-text: #000; }

/* Results tab: hidden on desktop while both search and results are closed (the table belongs to search). */
@media (min-width: 769px) {
    body:not(.pis-search-open):not(.pis-results-open) #searchResultsToggle {
        visibility: hidden;
    }
}

/* Docs search date pickers */
#searchRecordsDateFrom,
#searchRecordsDateTo {
    min-width: 0;
    font-family: inherit;
}

/* Docs date pickers: wide enough for mm/dd/yyyy plus the calendar button */
.pis-field--date {
    flex: 0 0 140px;
}

/* Results grid: short columns never wrap (document date, book-page, source; address number and suffix) */
.pis-grid--document td:nth-child(1),
.pis-grid--document td:nth-child(5),
.pis-grid--document td:nth-child(7),
.pis-grid--address td:nth-child(1),
.pis-grid--address td:nth-child(2),
.pis-grid--permit td:nth-child(1),
.pis-grid--permit td:nth-child(4),
.pis-grid--permit td:nth-child(5),
.pis-grid--permit td:nth-child(6),
.pis-grid--water td:nth-child(1),
.pis-grid--water td:nth-child(4) {
    white-space: nowrap;
}

/* Search suggestion lists float above the panels on desktop (js/search.js attachSuggest) */
.pis-suggest.pis-suggest--floating {
    position: fixed;
    right: auto;
    z-index: 1000;
    margin: 0;
}