/* 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;
}

/* SEWPER – 5.1 layout, styled after missoulapublichealth.org (shared with the Air Quality app).
   Loaded after the ArcGIS CDN entry point. */

/* ================================================================
   MPH brand tokens (sampled from missoulapublichealth.org)
   ================================================================ */
:root {
    --mph-navy: #0b3b60;        /* buttons, logo wordmark */
    --mph-navy-dark: #052843;   /* footer */
    --mph-ink: #12324a;         /* body text */
    --mph-orange: #f26722;      /* call-to-action buttons, accent bars */
    --mph-orange-dark: #d75927; /* headings, eyebrows */
    --mph-blue: #0098cd;
    --mph-teal: #037a9b;
    --mph-green: #95c93d;
    --mph-green-dark: #85ab3f;
    --mph-slate: #607282;       /* secondary text */
    --mph-line: #dde4ea;        /* input borders, dividers */
    --mph-page: #f4f6f8;        /* page background */
    --mph-card-gradient:
        radial-gradient(circle at 100% 0%, rgb(149 201 61 / 0.16), transparent 28%),
        linear-gradient(135deg, rgb(255 249 243 / 0.95), rgb(244 250 252 / 0.98));
    --mph-shadow: 0 18px 45px rgb(11 59 96 / 0.08);
    --mph-font: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --statusbar-h: 26px;
    --pis-radius: 8px;
    --pis-shadow: 0 2px 10px rgb(11 59 96 / 0.18);
}

/* Calcite global tokens. Set on body and the shell so they win over the CDN :root defaults
   regardless of stylesheet order. Light mode only, like the MPH site. */
body,
#app {
    --calcite-font-family: var(--mph-font);
    --calcite-color-brand: var(--mph-navy);
    --calcite-color-brand-hover: var(--mph-navy-dark);
    --calcite-color-brand-press: #031d31;
    --calcite-color-brand-underline: rgb(11 59 96 / 0.4);
    --calcite-color-focus: var(--mph-blue);
    --calcite-color-text-1: var(--mph-ink);
    --calcite-color-text-2: #2b4a61;
    --calcite-color-text-3: var(--mph-slate);
    --calcite-color-text-link: #236496;
    --calcite-color-background: var(--mph-page);
    --calcite-color-border-1: #c9d3dc;
    --calcite-color-border-2: var(--mph-line);
    --calcite-color-border-3: #e9eef2;
    --calcite-corner-radius-round: 8px;
    --calcite-corner-radius-sm: 8px;

    /* component tokens */
    --calcite-panel-heading-text-color: var(--mph-orange-dark);
    --calcite-block-heading-text-color: var(--mph-orange-dark);
    --calcite-dialog-heading-text-color: var(--mph-orange-dark);
    --calcite-input-text-corner-radius: 999px;
    --calcite-input-text-border-color: var(--mph-line);
    --calcite-button-corner-radius: 999px;
    --calcite-notice-corner-radius: 12px;
    --calcite-dialog-corner-radius: 16px;
    --calcite-chip-corner-radius: 999px;
}

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

body {
    font-family: var(--mph-font);
    color: var(--mph-ink);
    background: var(--mph-page);
}

a {
    color: #236496;
    font-weight: 700;
}

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

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

.eyebrow {
    display: block;
    color: var(--mph-orange-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ================================================================
   Brand card (top-left) – MPH logo + app title
   ================================================================ */
.mph-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 9px 12px;
    background: #fff;
    border-radius: var(--pis-radius);
    box-shadow: var(--pis-shadow);
    position: relative;
    overflow: hidden;
}

/* The four logo colors as a thin stripe along the bottom, like the MPH site header. */
.mph-brand::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--mph-orange) 0 25%, var(--mph-blue) 25% 50%, var(--mph-green) 50% 75%, var(--mph-navy) 75% 100%);
}

.mph-brand__logo {
    display: flex;
}

.mph-brand__logo img {
    height: 32px;
    width: auto;
}

.mph-brand__rule {
    width: 1px;
    align-self: stretch;
    background: var(--mph-line);
}

.mph-brand__title {
    display: grid;
    gap: 1px;
    line-height: 1.15;
}

.mph-brand__app {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--mph-navy);
}

/* ================================================================
   PIS-style toolbars and map search
   ================================================================ */
#upperRightArea.pis-toolbar-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pis-toolbar-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

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

.pis-toolbar calcite-button {
    --calcite-button-background-color: transparent;
    --calcite-button-text-color: var(--mph-navy);
    --calcite-button-icon-color: var(--mph-navy);
    --calcite-button-border-color: transparent;
    --calcite-button-corner-radius: 6px;
}

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

/* Active tool: MPH orange underline. */
.pis-toolbar calcite-button.is-active {
    --calcite-button-background-color: #fff4ec;
    --calcite-button-icon-color: var(--mph-orange-dark);
    box-shadow: inset 0 -3px 0 var(--mph-orange);
    border-radius: 6px;
}

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

.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(--mph-page);
    --calcite-action-text-color: var(--mph-navy);
    --calcite-action-text-color-pressed: var(--mph-orange-dark);
}

#mapSearch {
    width: 320px;
    border-radius: var(--pis-radius);
    box-shadow: var(--pis-shadow);
    overflow: hidden;
}

.measure-card {
    width: 300px;
    background: #fff;
}

.measure-card__buttons {
    display: flex;
    gap: 6px;
    padding: 8px 8px 0;
}

.measure-card__buttons calcite-button.is-active {
    --calcite-button-background-color: var(--mph-navy);
    --calcite-button-text-color: #fff;
    --calcite-button-icon-color: #fff;
    --calcite-button-border-color: var(--mph-navy);
}

.map-loader {
    padding: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--pis-shadow);
}

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

calcite-button.mph-cta {
    --calcite-button-background-color: var(--mph-orange);
    --calcite-button-border-color: var(--mph-orange);
    --calcite-button-text-color: #fff;
    --calcite-button-corner-radius: 999px;
}

calcite-button.mph-cta:hover {
    --calcite-button-background-color: var(--mph-orange-dark);
    --calcite-button-border-color: var(--mph-orange-dark);
}

/* ================================================================
   Floating panels (non-modal)
   ================================================================ */
.floating-panel {
    position: absolute;
    top: 112px;
    z-index: 10;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: calc(100% - 112px - var(--statusbar-h) - 16px);
    border-radius: 12px;
    box-shadow: var(--mph-shadow), 0 4px 16px rgb(11 59 96 / 0.12);
    overflow: hidden;
    border-top: 4px solid var(--mph-orange);
    --calcite-panel-background-color: #fff;
}

.floating-panel--right {
    right: 16px;
}

.floating-panel--left {
    left: 16px;
    top: 84px;
    max-height: calc(100% - 84px - var(--statusbar-h) - 70px);
}

.floating-panel[hidden] {
    display: none;
}

.panel-pad--tight {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.hint-text {
    margin: 0;
    padding: 4px 2px;
    font-size: 0.875rem;
}

.hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--mph-slate);
    line-height: 1.45;
}

.opacity-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: 0.75rem;
    color: var(--mph-slate);
}

/* ================================================================
   Status bar – PIS layout, MPH navy footer colors
   ================================================================ */
#bottom-info.pis-statusbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--statusbar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 12px;
    background: var(--mph-navy-dark);
    border-top: 2px solid var(--mph-orange);
    color: #fff;
    font-size: 11.5px;
    z-index: 5;
}

.pis-statusbar__group {
    display: flex;
    align-items: center;
    gap: 14px;
}

#bottom-info a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

#bottom-info a:hover,
#bottom-info a:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--mph-green);
}

#coordsDiv {
    color: #c7d3dc;
    font-variant-numeric: tabular-nums;
}

#scaleDiv {
    color: var(--mph-green);
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   Results panel
   ================================================================ */
#info-panel {
    --calcite-panel-background-color: var(--mph-page);
}

#info-panel #zone-content {
    padding: 0.75rem;
}

#zone-content,
#property-content {
    font-size: 0.875rem;
}

#zone-content {
    padding: 0.75rem;
}

#zone-content > calcite-notice {
    margin: 0 0 0.75rem;
}

/* Service-finder style card: gradient, rounded, orange accent bar. */
.zone-tabs {
    display: block;
    box-sizing: border-box; /* keeps the 6px accent bar inside the panel width */
    max-width: 100%;
    background: var(--mph-card-gradient), #fff;
    border-radius: 16px;
    border-left: 6px solid var(--mph-orange);
    box-shadow: var(--mph-shadow);
    overflow: hidden;
}

.zone-tabs calcite-tab {
    padding: 1rem;
}

.zone + .zone {
    border-top: 1px solid var(--mph-line);
    margin-top: 1rem;
    padding-top: 1rem;
}

.attr-list {
    margin: 0;
    display: grid;
    gap: 0.15rem;
}

.attr-list > * {
    min-width: 0;
}

.attr-list dt {
    margin-top: 0.75rem;
    color: var(--mph-slate);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.attr-list dt:first-child {
    margin-top: 0;
}

.attr-list dd {
    margin: 0;
    color: var(--mph-ink);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* The zone name reads as the card title. */
.zone .attr-list dd:first-of-type {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mph-orange-dark);
    line-height: 1.2;
}

.attr-list dd ul,
.attr-list dd ol {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.attr-list dd li + li {
    margin-top: 0.35rem;
}

.attr-list dd li::marker {
    color: var(--mph-green-dark);
}

.attr-list dd.epa-link {
    display: grid;
    gap: 0.25rem;
    justify-items: start;
    margin: 0.75rem 0 0.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--mph-line);
    border-bottom: 1px solid var(--mph-line);
}

.attr-list dd.epa-link calcite-button {
    --calcite-button-text-color: var(--mph-navy);
    --calcite-button-border-color: var(--mph-navy);
}

.requirements {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.5;
}

.requirements li + li {
    margin-top: 0.5rem;
}

.requirements li::marker {
    color: var(--mph-orange);
}

.restriction-notice {
    margin: 0.75rem 0 0;
    --calcite-notice-background-color: #fff4df;
}

#property-block {
    box-sizing: border-box;
    margin: 0 0.75rem 0.75rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--mph-shadow);
}

#property-content {
    padding: 0 0.25rem;
}

.muted {
    color: var(--mph-slate);
    margin: 0;
}

/* ================================================================
   Welcome dialog
   ================================================================ */
.dialog-tab {
    padding: 1rem 0.25rem;
    line-height: 1.55;
    font-size: 0.875rem;
}

.dialog-tab h2 {
    margin: 0.25rem 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--mph-orange-dark);
}

.dialog-tab h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--mph-navy);
    margin: 1rem 0 0.25rem;
}

.dialog-tab h3:first-child {
    margin-top: 0;
}

.dialog-tab.welcome img {
    display: block;
    width: 200px;
    height: auto;
    margin-bottom: 1.25rem;
}

.dialog-tab.disclaimer {
    font-size: 0.75rem;
    color: var(--mph-slate);
}


/* ================================================================
   SEWPER permit panel
   ================================================================ */
.floating-panel--right {
    width: 500px;                         /* room for five tabs with icons */
}

.sewper-tabs calcite-tab-title {
    font-size: 0.8125rem;
}

.tab-pad {
    padding: 0.75rem;
    display: grid;
    gap: 0.6rem;
    font-size: 0.875rem;
}

.count-line {
    margin: 0;
    font-size: 0.75rem;
    color: var(--mph-slate);
}

/* Permit / report card: MPH card with the orange accent bar. */
.permit-card {
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem 0.85rem;
    background: var(--mph-card-gradient), #fff;
    border: 1px solid var(--mph-line);
    border-left: 4px solid var(--mph-orange);
    border-radius: 10px;
}

/* Collapsible permit cards (<details>) */
details.permit-card > summary {
    list-style: none;
    cursor: pointer;
}

details.permit-card > summary::-webkit-details-marker {
    display: none;
}

details.permit-card > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 0.15rem;
    border-right: 2px solid var(--mph-slate);
    border-bottom: 2px solid var(--mph-slate);
    transform: rotate(-45deg);
    transition: transform 0.15s;
}

details.permit-card[open] > summary::before {
    transform: rotate(45deg);
}

details.permit-card:not([open]) {
    gap: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.permit-card__title {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.permit-card__meta {
    font-size: 0.75rem;
    color: var(--mph-slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permit-card__meta:empty {
    display: none;
}

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

/* Permit list: newest first; with more than one permit it scrolls after three cards (height set by fitThree) */
.permit-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* cards fit the panel width - long lines wrap or ellipsize */
    gap: 0.6rem;
}

.permit-list > .permit-card,
.permit-card__head,
.permit-card__body {
    min-width: 0;
}

.permit-list--many {
    overflow-x: hidden;                      /* never a sideways scroll bar */
    overflow-y: auto;
    padding-right: 4px;                      /* room for the vertical scroll bar and the focus ring */
    overscroll-behavior: contain;
}

.permit-card .attr-list--compact dd {
    min-width: 0;
    overflow-wrap: anywhere;
}

.permit-tools {
    display: grid;
    gap: 0.3rem;
}

.permit-filter {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    font: inherit;
    font-size: 0.8125rem;
    border: 1px solid var(--mph-line);
    border-radius: 8px;
    background: #fff;
}

.permit-filter:focus {
    outline: 2px solid var(--mph-orange);
    outline-offset: 0;
}

.permit-tools__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.permit-tools__links {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.permit-tools__links a {
    color: var(--mph-navy);
}

/* Septic cards brown, well cards blue (accent bar, tint, permit number) */
.permit-card[data-type="septic"] {
    --permit-accent: #8b5a2b;
    --permit-tint: #f7efe6;
}

.permit-card[data-type="well"] {
    --permit-accent: #2f6f9f;
    --permit-tint: #e9f2f9;
}

.permit-card[data-type="septic"],
.permit-card[data-type="well"] {
    background: linear-gradient(135deg, var(--permit-tint) 0%, #fff 70%);
    border-left-color: var(--permit-accent);
}

.permit-card[data-type="septic"] .permit-link,
.permit-card[data-type="well"] .permit-link,
.permit-card[data-type="septic"] .permit-link calcite-icon,
.permit-card[data-type="well"] .permit-link calcite-icon {
    color: var(--permit-accent);
}

.permit-card[data-type="septic"].is-focused,
.permit-card[data-type="well"].is-focused {
    border-color: var(--permit-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--permit-accent) 30%, transparent);
}

.permit-card.is-focused {
    border-color: var(--mph-orange);
    box-shadow: 0 0 0 2px rgb(242 103 34 / 0.25);
}

.permit-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.permit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--mph-navy);
    text-decoration: none;
}

.permit-link:hover {
    color: var(--mph-orange-dark);
    text-decoration: underline;
}

.permit-link calcite-icon {
    color: var(--mph-orange-dark);
}

.attr-list--compact {
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
}

.attr-list--compact dt,
.attr-list--compact dt:first-child {
    margin: 0;
    padding-top: 0.15rem;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.empty-state {
    padding: 0.75rem 0.85rem;
    background: #fff;
    border: 1px dashed var(--mph-line);
    border-radius: 10px;
    line-height: 1.45;
}

.empty-state p {
    margin: 0 0 0.5rem;
}

.empty-state p:last-child {
    margin-bottom: 0;
}

.contact-lines {
    color: var(--mph-ink);
}

.info-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
}

.info-link calcite-icon {
    color: var(--mph-green-dark);
}

.dialog-tab.welcome p {
    margin: 0 0 0.75rem;
}

/* ================================================================
   Phones
   ================================================================ */
/* Mid-width screens: keep the logo, drop the title so the card doesn't run under the search */
@media (max-width: 1080px) {
    .mph-brand__rule,
    .mph-brand__title { display: none; }
}

@media (max-width: 768px) {
    .mph-brand {
        display: none;
    }

    #upperRightArea.pis-toolbar-row {
        flex-direction: column;
        align-items: flex-end;
    }

    #mapSearch {
        width: calc(100vw - 32px);
    }

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

    /* Panels become bottom sheets over the lower half of the map. */
    .floating-panel,
    .floating-panel--left {
        top: auto;
        left: 0;
        right: 0;
        bottom: var(--statusbar-h);
        width: 100%;
        max-width: 100%;
        height: 50%;
        max-height: 50%;
        border-radius: 14px 14px 0 0;
    }

    #bottomLeftTools,
    #coordsDiv,
    #scaleDiv {
        display: none;
    }

    .dialog-tab.welcome img {
        width: 150px;
    }
}

/* Current basemap in the status bar (map.js wireStatusBar), like PIS */
#currentBaseMap {
    color: #c3ced3;
    white-space: nowrap;
}

#currentBaseMap:empty {
    display: none;
}

@media (max-width: 768px) {
    #currentBaseMap {
        display: none;
    }
}

/* ================================================================ printout (js/report.js) */
/* Same one-page report as the Voter Information app: header, address, map, panel information.
   Layout rules sit outside @media print so report.js can measure the page (fitOnePage). */
#printReport {
    display: none;
}

#printReport {
    font-family: "Avenir Next", "Avenir", Arial, sans-serif;
    font-size: 9.5pt;
    line-height: 1.35;
    color: #000;
    --report-accent: #acb55c;
}

#printReport .no-print {
    display: none !important;
}

#printReport .report-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--report-accent);
}

#printReport .report-logo {
    width: auto;
    height: 0.55in;
    max-width: 1.8in;
}

#printReport .report-title {
    font-family: Rockwell, "Rockwell Nova", Georgia, serif;
    font-size: 16pt;
    font-weight: 700;
    color: #38444b;
}

#printReport .report-sub {
    font-size: 8.5pt;
    color: #555;
}

#printReport .report-address {
    margin: 8px 0 6px;
    font-family: Rockwell, "Rockwell Nova", Georgia, serif;
    font-size: 13pt;
    font-weight: 700;
}

#printReport .report-map {
    display: block;
    width: 100%;
    height: 3.3in;
    object-fit: cover;
    border: 1px solid #999;
    margin-bottom: 4px;
}

#printReport .report-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    align-items: start;
}

#printReport .report-cols--one {
    grid-template-columns: 1fr;
}

#printReport .report-section {
    margin-top: 8px;
    break-inside: avoid;
}

#printReport .report-section__head {
    margin: 0 0 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ccc;
    font-size: 10.5pt;
    color: #38444b;
}

#printReport .report-section * {
    max-width: 100%;
    box-shadow: none !important;
}

#printReport .report-section [class*="pad"] {
    padding: 0 !important;
}

#printReport table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8.5pt;
}

#printReport th,
#printReport td {
    padding: 2px 4px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

#printReport tr {
    break-inside: avoid;
}

#printReport .report-chart {
    display: block;
    width: 100%;
    height: auto;
    max-height: 2.6in;
    object-fit: contain;
}

#printReport a {
    color: inherit;
    text-decoration: none;
}

#printReport .report-fine {
    margin-top: 10px;
    padding-top: 4px;
    border-top: 1px solid #ccc;
    font-size: 7.5pt;
    color: #444;
}

@media print {
    @page {
        size: letter portrait;
        margin: 0.4in;
    }

    html,
    body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    body > *:not(#printReport) {
        display: none !important;
    }

    #printReport {
        display: block !important;
    }
}

/* ---- SEWPER printout: permit tables ---- */
#printReport .print-table table {
    font-size: 8pt;
    line-height: 1.25;
}

#printReport .print-table th {
    background: #f1f3f5;
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #38444b;
}

#printReport .print-table th,
#printReport .print-table td {
    padding: 2px 5px;
    vertical-align: top;
}

#printReport .report-section {
    break-inside: auto;                   /* long permit tables may continue on the next page */
}

/* Office contact line above the fine print */
#printReport .report-contact {
    margin: 10px 0 0;
    padding: 5px 8px;
    border-left: 3px solid var(--report-accent);
    background: #fff4ec;
    font-size: 8.5pt;
    font-weight: 600;
    color: #12324a;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

#printReport .report-contact + .report-fine {
    margin-top: 4px;
    border-top: 0;
}

/* Septic tables brown, well tables blue - same colors as the cards on screen */
#printReport .print-table--septic {
    --permit-accent: #8b5a2b;
    --permit-tint: #f7efe6;
}

#printReport .print-table--well {
    --permit-accent: #2f6f9f;
    --permit-tint: #e9f2f9;
}

#printReport .print-table--septic table,
#printReport .print-table--well table {
    border-left: 3px solid var(--permit-accent);
}

#printReport .print-table--septic th,
#printReport .print-table--well th {
    background: var(--permit-tint);
    color: var(--permit-accent);
    border-bottom: 1px solid var(--permit-accent);
}

#printReport .print-table--septic tbody tr:nth-child(even) td,
#printReport .print-table--well tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--permit-tint) 55%, #fff);
}

#printReport .print-table--septic td:first-child,
#printReport .print-table--well td:first-child {
    font-weight: 700;
    color: var(--permit-accent);
}

#printReport .report-section:has(.print-table--septic) > .report-section__head {
    color: #8b5a2b;
}

#printReport .report-section:has(.print-table--well) > .report-section__head {
    color: #2f6f9f;
}

/* Property: label beside value, compact */
#printReport .print-property .attr-list {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 1px;
    padding: 0;
    background: none;
    box-shadow: none;
    align-items: baseline;
}

#printReport .print-property .attr-list dt {
    margin: 0;
    font-size: 6.5pt;
}

#printReport .print-property .attr-list dd {
    margin: 0;
    line-height: 1.25;
}

/* print colors even when "Background graphics" is off */
#printReport .print-table th,
#printReport .print-table td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

#printReport thead {
    display: table-header-group;          /* repeat the header row on each page */
}

/* Printout: the whole permit list, not the scrolled window */
#printReport .permit-list--many {
    max-height: none !important;
    overflow: visible !important;
}