/* ==========================================================================
   LandWatch Viewer — Oak Ridge Reservation (web/orr)

   The single stylesheet for the portal. Before this file, the same rules were
   duplicated in three inline <style> blocks and had drifted: logo height
   40/38/34px, UCOR badge 44/40/36px, body font 14/13/13px, sidebar breakpoint
   700px vs 640px. Each of those is now one token below.

   Body font resolved to 14px (the largest of the three) — this portal is read
   by property owners responding to a letter, so do not standardise downward.
   ========================================================================== */

:root {
    /* Brand */
    --c-navy:        #1a4d8f;
    --c-navy-dk:     #143d73;
    --c-green:       #2d8f2d;
    --c-crimson:     #8b1a1a;
    --c-crimson-dk:  #6e1414;

    /* Surfaces */
    --c-bg:          #f0f2f4;
    --c-surface:     #fff;
    --c-stripe:      #f5f7fa;
    --c-hover:       #eef2f8;

    /* Lines */
    --c-border:      #c8d0da;
    --c-border-soft: #dde1e6;
    --c-rule:        #e0e4ea;

    /* Text */
    --c-text:        #222;
    --c-muted:       #555;
    --c-faint:       #888;

    /* Type */
    --fs-base:       14px;
    --fs-sm:         13px;
    --fs-xs:         12px;
    --fs-xxs:        11px;

    /* Metrics */
    /* Taller than the old 44px horizontal mark: the tagline lockup is ~3.6:1,
       so at 44px the tagline line under the wordmark stops being readable. */
    --logo-h:        60px;
    --wrap:          1100px;
    --gut:           20px;

    /* Above Leaflet's control panes, which sit at z-index 1000. The old map
       page used 500 and only got away with it because overflow:hidden stopped
       the panes ever overlapping the header. */
    --z-chrome:      1100;
    --z-modal:       2000;   /* must clear --z-chrome */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.5;

    /* Sticky footer without locking the viewport. The map page used to set
       html,body{height:100%;overflow:hidden} which is why it could have
       neither a footer nor anything below the map. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--c-navy); }

img { max-width: 100%; }

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--c-navy);
    outline-offset: 2px;
}

.orr-wrap,
.orr-header-inner,
.orr-nav-inner,
.orr-titlebar-inner,
.orr-footer-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gut);
    padding-right: var(--gut);
    width: 100%;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Header -- */

.orr-header {
    background: var(--c-surface);
    position: relative;
    z-index: var(--z-chrome);
}

.orr-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* The header holds the Terradex tagline logo and nothing else — the ORR
   wordmark and the UCOR partner mark were both removed. */
.orr-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

.orr-brand-logo { height: var(--logo-h); width: auto; flex-shrink: 0; }

/* ------------------------------------------------------------------- Nav -- */

.orr-nav {
    background: var(--c-surface);
    border-top: 1px solid var(--c-border-soft);
    border-bottom: 3px solid var(--c-navy);
    position: relative;
    z-index: var(--z-chrome);
}

.orr-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 20px;
}

.orr-nav-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.orr-nav-link {
    display: inline-block;
    padding: 11px 14px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-navy);
    text-decoration: none;
}

.orr-nav-list .orr-nav-link { padding-left: 0; padding-right: 22px; }

.orr-nav-link:hover { text-decoration: underline; }

.orr-nav-link.is-active {
    color: var(--c-navy-dk);
    box-shadow: inset 0 -3px 0 var(--c-crimson);
}

/* Out-of-service entries: rendered as <span>, so there is nothing to click and
   no href to hover. Greyed so it reads as unavailable rather than broken. */
.orr-nav-link.is-disabled { color: var(--c-faint); cursor: default; }
.orr-nav-link.is-disabled:hover { text-decoration: none; }

.orr-nav-session {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-left: auto;
}

.orr-nav-letterid { white-space: nowrap; }
.orr-nav-sep      { color: var(--c-border); }
.orr-nav-session .orr-nav-link { padding: 11px 0; font-size: var(--fs-xs); }

/* -------------------------------------------------------------- Titlebar -- */

.orr-titlebar {
    background: var(--c-navy);
    color: #fff;
}

.orr-titlebar-inner { padding-top: 12px; padding-bottom: 12px; }

/* The eyebrow is the section name ("Property Transfer Viewer") and is set at
   twice the page name below it — an inversion of the usual eyebrow/title
   relationship, and deliberate. Letter-spacing stays below the .06em this
   used to carry: tracking that wide is for small caps, not a 42px line. */
.orr-titlebar-eyebrow {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .85;
}

.orr-titlebar-title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

/* Literal px, not var(--fs-sm): that token is doubled on the landing page, which
   would make the Letter ID line larger than the title above it. */
.orr-titlebar-meta {
    font-size: 13px;
    opacity: .9;
    margin-top: 2px;
}

/* ------------------------------------------------------------------ Main -- */

.orr-main {
    flex: 1 0 auto;               /* pushes the footer down on short pages */
    padding-top: 24px;
    padding-bottom: 40px;
}

.orr-main.orr-wrap > * + * { margin-top: 22px; }

h2 { font-size: 17px; color: var(--c-navy); font-weight: 700; }
h3 { font-size: 15px; color: var(--c-navy); font-weight: 700; }

.orr-prose > * + *  { margin-top: 12px; }
.orr-prose p        { color: #333; }
.orr-prose h2 + p,
.orr-prose h3 + p   { margin-top: 8px; }
.orr-prose ul,
.orr-prose ol       { padding-left: 22px; }
.orr-prose li + li  { margin-top: 6px; }

.orr-note {
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

/* ---------------------------------------------------------------- Footer -- */

.orr-footer {
    background: var(--c-surface);
    border-top: 1px solid var(--c-border-soft);
    flex-shrink: 0;
}

.orr-footer-inner {
    padding-top: 14px;
    padding-bottom: 14px;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c-faint);
}

/* ============================================== Landing page (index.php) == */

.orr-section {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    padding: 22px var(--gut);
    scroll-margin-top: 24px;         /* so #property-transfer doesn't hide under the nav */
}

.orr-section-grid {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.orr-section-body  { flex: 1 1 0; min-width: 0; }
.orr-section-aside { flex: 0 0 300px; }

.orr-section h2 { margin-bottom: 10px; }

.orr-badge-wip {
    display: inline-block;
    background: #fff4d6;
    border: 1px solid #e0b84a;
    color: #7a5a00;
    font-size: var(--fs-xxs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 8px;
    margin-bottom: 10px;
}

/* Login / ID card ---------------------------------------------------------- */

.orr-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    padding: 18px 16px 20px;
}

.orr-card label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-bottom: 6px;
    color: #333;
}

.orr-card label + label { margin-top: 12px; }

.orr-card input[type="text"],
.orr-card input[type="email"],
.orr-card input[type="password"] {
    width: 100%;
    border: 1px solid #aaa;
    padding: 9px 10px;
    font: inherit;
    font-size: var(--fs-base);
    margin-bottom: 16px;
}

.orr-card input:focus {
    outline: 2px solid var(--c-navy);
    border-color: var(--c-navy);
}

.orr-btn-enter {
    display: block;
    width: 100%;
    background: var(--c-crimson);
    color: #fff;
    border: none;
    padding: 11px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}

.orr-btn-enter:hover { background: var(--c-crimson-dk); }

/* Inert forms in the under-construction sections. Greyed rather than crimson:
   a red button that does nothing invites clicking. */
.orr-card fieldset { border: 0; }
.orr-card fieldset:disabled { opacity: .75; }
.orr-card fieldset:disabled .orr-btn-enter {
    background: #b9bfc7;
    color: #4a5058;
    cursor: not-allowed;
}

.orr-continue {
    display: block;
    background: var(--c-hover);
    border: 1px solid var(--c-border);
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-navy);
    text-decoration: none;
}

.orr-continue:hover { background: #e2eaf6; }

.orr-error {
    background: #fdf2f2;
    border: 1px solid #e0a0a0;
    color: var(--c-crimson);
    font-size: var(--fs-sm);
    margin-bottom: 14px;
    padding: 8px 10px;
}

/* Figure / image placeholder ---------------------------------------------- */

.orr-figure {
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    padding: 8px;
}

.orr-figure img { display: block; width: 100%; height: auto; }

/* Visible-but-tidy state while the client artwork is outstanding. */
.orr-figure img.is-placeholder {
    min-height: 200px;
    background: repeating-linear-gradient(45deg,
        #e7ebf0 0 10px, #dfe4ea 10px 20px);
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.orr-figure figcaption {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    padding-top: 8px;
    text-align: center;
}

/* ================================= Landing page overrides (index.php) ===== */
/* Full-bleed at double the base type scale. Scoped to the body class rather
   than changing the :root tokens: parcels.php's table (min-width 900px) and
   map.php's 220px layer panel are laid out for the base scale and break at 2x.

   Overriding the --fs-* tokens here is enough for almost everything, because
   custom properties inherit — nav, titlebar, cards, badge, figcaption and
   footer all read them and scale without a rule of their own. Only literal px
   font sizes need restating below. */

body.orr-home {
    --fs-base: 28px;
    --fs-sm:   26px;
    --fs-xs:   24px;
    --fs-xxs:  22px;
    --gut:     32px;         /* the 20px gutter reads as no margin at this scale */
    --logo-h:  84px;         /* 60px reads as undersized beside 28px body copy */
}

/* Same full-bleed treatment .orr-map-page already applies to its own chrome,
   so the logo, nav, title bar and footer line up with the sections below. */
.orr-home .orr-wrap,
.orr-home .orr-header-inner,
.orr-home .orr-nav-inner,
.orr-home .orr-titlebar-inner,
.orr-home .orr-footer-inner { max-width: none; }

/* The title bar runs larger here than on the inner pages, and has to: this page's
   body copy is 28px, so the global 21px title would be smaller than the prose it
   introduces. Scaled to clear both the body copy and the 34px section headings,
   keeping the 2:1 eyebrow-to-title ratio. (The landing page passes an empty
   eyebrow today, so that line only matters if one is ever added.) */
.orr-home .orr-titlebar-eyebrow { font-size: 68px; }
.orr-home .orr-titlebar-title   { font-size: 34px; }

.orr-home h2             { font-size: 34px; }
.orr-home .orr-btn-enter { font-size: 32px; }

/* The Letter ID / Advisory / Password cards need room for 28px inputs; the
   monitored-area figure takes half the row. */
.orr-home .orr-section-aside      { flex: 0 0 460px; }
.orr-home .orr-section-aside-wide { flex: 0 0 50%; }

/* ============================================ Parcel table (parcels.php) == */

/* tabindex="0" in the markup makes this focusable, so the table can also be
   scrolled with the arrow keys and not only by touch or trackpad. */
.orr-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Shown only where the table actually overflows — see the 940px breakpoint. */
.orr-table-hint {
    display: none;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-bottom: 6px;
}

.orr-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 900px;
    font-size: var(--fs-xs);
    background: var(--c-surface);
}

.orr-table th,
.orr-table td {
    border: 1px solid var(--c-border);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.orr-table th {
    background: var(--c-navy);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.orr-table tbody tr:nth-child(even) { background: var(--c-stripe); }
.orr-table tbody tr:hover           { background: var(--c-hover); }

.orr-map-link {
    color: var(--c-navy);
    text-decoration: underline;
    white-space: nowrap;
}

.orr-table-intro { max-width: 70ch; }

.orr-actions { margin: 0 0 4px; }

/* Full-bleed: with twelve columns the table was the widest thing on the page
   and still had to scroll inside a 1100px column while the viewport had room
   to spare. The chrome goes edge-to-edge with it so the logo, nav and footer
   keep a common left edge — same treatment .orr-map-page uses. */
.orr-parcels .orr-wrap,
.orr-parcels .orr-header-inner,
.orr-parcels .orr-nav-inner,
.orr-parcels .orr-titlebar-inner,
.orr-parcels .orr-footer-inner { max-width: none; }

/* The 70ch measure is what kept the intro paragraph narrower than the table. */
.orr-parcels .orr-table-intro { max-width: none; }

/* ================================================= Map page (map.php) ===== */

.orr-map-page .orr-main {
    padding-top: 0;
    padding-bottom: 0;
}

/* The map runs full-bleed, so the chrome above it does too — otherwise the logo,
   nav and title bar sit in the centred 1100px column and are indented from the
   map's left edge on any viewport wider than that, giving a ragged left margin.
   Everything on this page lines up on the same gutter instead. */
.orr-map-page .orr-header-inner,
.orr-map-page .orr-nav-inner,
.orr-map-page .orr-titlebar-inner {
    max-width: none;
}

/* Matches the layer panel's own 14px inset so the title text and the "Layers"
   heading below it share a left edge. */
.orr-map-page .orr-titlebar-inner { padding-left: 14px; }

.orr-map-row {
    display: flex;
    align-items: stretch;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border-soft);
}

.orr-layer-panel {
    flex: 0 0 220px;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border-soft);
    padding: 12px 14px;
    overflow-y: auto;
}

/* The map needs a DEFINITE height for #map{height:100%} to resolve. Giving the
   shell flex:1 inside an auto-height column instead makes Leaflet initialise
   into a 0px box and render a grey square. clamp() with a px floor is safe. */
.orr-map-shell {
    flex: 1 1 auto;
    min-width: 0;
    height: clamp(420px, 68vh, 900px);
}

#map { height: 100%; }

.orr-layer-back {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-navy);
    text-decoration: none;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--c-rule);
}

.orr-layer-back:hover { text-decoration: underline; }

.orr-layer-details summary {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    margin-bottom: 8px;
}

.orr-layer-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 7px;
    font-size: var(--fs-xs);
    color: #333;
    cursor: pointer;
}

.orr-layer-item input[type="checkbox"] {
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Layers Description — an ordinary block in normal document flow below the map,
   possible only because the old html,body{overflow:hidden} is gone. */
.orr-layer-desc {
    padding-top: 24px;
    padding-bottom: 40px;
}

.orr-layer-desc-list { max-width: 80ch; }

/* Full width, like the map above it. .orr-layer-desc carries .orr-wrap, so the
   1100px cap has to be lifted here as well as the list's own 80ch measure —
   .orr-map-page only lifts it on the header, nav and title bar. */
.orr-map-page .orr-layer-desc      { max-width: none; }
.orr-map-page .orr-layer-desc-list { max-width: none; }
.orr-layer-desc-list > div + div { margin-top: 16px; }
.orr-layer-desc-list h3 { margin-bottom: 4px; }
.orr-layer-desc-list p  { color: #333; font-size: var(--fs-sm); }

/* ==================================== Identify modal (map.php) ========== */

.orr-map-shell { position: relative; }

/* Bottom-LEFT: the control stack (zoom, fullscreen, layers, measure) occupies
   the top-right, and the scale control the bottom-right. */
.orr-map-hint {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 800;                 /* over the tiles, under Leaflet's controls */
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--c-border);
    padding: 4px 9px;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    pointer-events: none;
}

/* leaflet-measure's own panel is wider than the ORR control column; cap it so
   it does not run off a narrow map. Its icons are served from ../icons/,
   relative to assets/vendor/leaflet-measure.css — see assets/icons/.

   Scoped under .orr-map-page deliberately: the vendor stylesheets are loaded
   from head_extra, i.e. AFTER this file, so a bare .leaflet-control-measure
   rule here would lose to theirs at equal specificity. */
.orr-map-page .leaflet-control-measure { max-width: min(280px, 80vw); }
.orr-map-page .leaflet-control-measure h3 {
    font-size: var(--fs-sm);
    color: var(--c-navy);
}

/* The fullscreen control renders inside the map container, which becomes the
   fullscreen element — give it the page background so the chrome-less
   fullscreen view does not show through as transparent. */
.leaflet-container:fullscreen { background: var(--c-bg); }

.orr-map-busy {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-modal);
    background: var(--c-navy);
    color: #fff;
    padding: 10px 18px;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.orr-map-busy[hidden] { display: none; }

.orr-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* MANDATORY. The UA's [hidden]{display:none} is a lower-specificity rule and
   loses to .orr-modal{display:flex}, so without this the modal is never hidden.
   Same for the busy indicator above. */
.orr-modal[hidden] { display: none; }

.orr-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.orr-modal-dialog {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    width: min(760px, 100%);
    max-height: min(86vh, 900px);
    display: flex;
    flex-direction: column;
}

.orr-modal-head {
    background: var(--c-navy);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Beats the global h2 rule, which sets color to navy-on-navy. */
.orr-modal-head h2 { color: #fff; font-size: 17px; }

.orr-modal-x {
    background: none;
    border: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.orr-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
}

/* GeoServer's GetFeatureInfo HTML iframes the terradex.com infopanel pages.
   Cross-origin means no auto-height and no postMessage, so the height is fixed
   and .orr-modal-body scrolls. Tune min-height once the real panels are seen. */
.orr-modal-body iframe {
    display: block;
    width: 100%;
    min-height: 420px;
    border: 0;
}

.orr-fi-block[hidden] { display: none; }
.orr-fi-block + .orr-fi-block {
    margin-top: 18px;
    border-top: 1px solid var(--c-rule);
    padding-top: 14px;
}
.orr-fi-block > h3 { margin-bottom: 8px; }

.orr-modal-foot {
    border-top: 1px solid var(--c-rule);
    padding: 10px 14px;
    text-align: right;
    flex-shrink: 0;
}

.orr-modal-btn {
    background: var(--c-navy);
    color: #fff;
    border: 0;
    padding: 8px 18px;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
}

.orr-modal-btn:hover { background: var(--c-navy-dk); }
.orr-modal-btn[disabled] { background: #b9bfc7; color: #4a5058; cursor: not-allowed; }

.orr-modal-btn-ghost {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-muted);
    padding: 8px 16px;
    margin-right: 8px;
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.orr-modal-btn-ghost:hover { background: var(--c-hover); }

/* ---- Export control + its modal ---- */

.export-pdf-control a.export-pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #333;
}

.export-pdf-control a.export-pdf-btn:hover,
.export-pdf-control a.export-pdf-btn:focus { color: var(--c-navy); }

.export-pdf-control .export-pdf-icon { width: 18px; height: 18px; }

.orr-modal-narrow { width: min(460px, 100%); }

.orr-field { border: 0; margin-bottom: 16px; }
.orr-field > legend,
.orr-field > label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
    padding: 0;
}

.orr-field input[type="text"] {
    width: 100%;
    border: 1px solid #aaa;
    padding: 8px 10px;
    font: inherit;
    font-size: var(--fs-sm);
}

.orr-field-row { display: flex; gap: 10px; }
.orr-field-row label {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--c-muted);
}
.orr-field-row input[type="text"] { margin-top: 3px; }

.orr-radio,
.orr-checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: #333;
    margin-bottom: 5px;
    cursor: pointer;
}

.orr-radio { display: inline-flex; margin-right: 18px; }

.orr-field .orr-note { margin-top: 6px; font-weight: 400; }

/* Applied to <html>, not <body>: body is display:flex with min-height:100vh, so
   locking scroll on it alone is unreliable on iOS. */
html.orr-modal-open { overflow: hidden; }

/* ---------------------------------------------------------- Breakpoints -- */
/* Standardised on 900 / 760 / 560. The old rules hid navigation entirely at
   700px (parcels) and 640px (map); nothing here ever hides navigation. */

@media (max-width: 900px) {
    .orr-section-aside { flex-basis: 260px; }

    /* The landing page stacks here rather than at 760px like the rest of the
       portal, because its body copy is 28px: in two columns at 768px the text
       column came out ~330px wide, which is about four words a line. One
       column gives it the full width and a sane measure. */
    .orr-home .orr-section-grid  { flex-direction: column; }
    .orr-home .orr-section-aside,
    .orr-home .orr-section-aside-wide { flex: none; width: 100%; }

    /* No title-bar step-down needed here: at 42px "PROPERTY TRANSFER VIEWER"
       is about 630px wide, which still fits on one line at this breakpoint. */
}

/* The parcel table is min-width:900px inside an overflow-x:auto box, so it
   scrolls sideways on anything narrower than about 940px. Nothing on screen
   said so — the table just looked truncated. */
@media (max-width: 940px) {
    .orr-table-hint { display: block; }
}

@media (max-width: 760px) {
    .orr-section-grid  { flex-direction: column; }
    .orr-section-aside { flex: none; width: 100%; }

    .orr-map-row     { flex-direction: column; }
    .orr-layer-panel { flex: none; border-right: 0;
                       border-bottom: 1px solid var(--c-border-soft); }
    .orr-map-shell   { height: clamp(340px, 55vh, 520px); }
}

@media (max-width: 560px) {
    :root { --gut: 14px; --logo-h: 44px; }

    /* The landing page's 28px type does not fit a phone. Step it down to a
       still-enlarged scale rather than back to the 14px base. */
    body.orr-home {
        --fs-base: 19px;
        --fs-sm:   18px;
        --fs-xs:   17px;
        --fs-xxs:  16px;
        --gut:     14px;
        /* Also needed here: body.orr-home outranks the :root --logo-h above it,
           so without this the landing page keeps the 84px desktop logo, which
           at 3.6:1 is 301px wide — the full width of a 360px phone. */
        --logo-h:  52px;
    }

    /* Landing-page title bar steps down with its body copy (19px here), staying
       above it and above the 24px section headings. */
    .orr-home .orr-titlebar-eyebrow { font-size: 52px; }
    .orr-home .orr-titlebar-title   { font-size: 26px; }

    .orr-home h2             { font-size: 24px; }
    .orr-home .orr-btn-enter { font-size: 22px; }

    .orr-header-inner     { flex-wrap: wrap; }
    .orr-nav-inner        { flex-direction: column; align-items: flex-start; }
    .orr-nav-session      { margin-left: 0; padding-bottom: 8px; }

    /* Keeps the 2:1 ratio on a phone, where 42px would take three lines. The
       title floor is 16px so it never drops below the 14px body copy. */
    .orr-titlebar-eyebrow { font-size: 32px; }
    .orr-titlebar-title   { font-size: 16px; }
    .orr-titlebar-meta    { font-size: 12px; }

    .orr-modal          { padding: 0; }
    .orr-modal-dialog   { width: 100%; height: 100vh; max-height: 100vh; }
    .orr-map-hint       { display: none; }
}

@media print {
    .orr-nav, .orr-footer, .orr-map-hint { display: none; }
    .orr-modal { display: none !important; }
    .orr-map-shell { height: 460px; }
}