/* ============================================================================
   site-enhance.css  —  WellsAndSepticsPortal
   Loads LAST (after tokens.css + prototype-app.css) so it can reconcile the
   three stylesheets that otherwise disagree about type size.

   WHY THIS FILE EXISTS
   The delivered prototype (tokens.css + prototype-app.css) defines a complete
   type scale and applies it to ITS OWN class vocabulary (.inp, .fld__label,
   .tbl, .btn, .chip). Our Razor views, however, are built with USWDS/MDWDS
   classes (.usa-input, .usa-label, .usa-button, .usa-table ...) which take
   their sizes from mdwds.min.css on a DIFFERENT scale (~17px controls). The
   result was prototype chrome at 14-16px next to USWDS controls at 17px.

   So: this file maps the USWDS/MDWDS family — and the few Bootstrap leftovers —
   onto the prototype's own tokens. One scale, everywhere.

   THE SCALE (all from docs/01_Prototype/css/tokens.css — do not invent sizes)
     --fs-3xs  13px  hints, errors, notes, chips, table headers, fine print
     --fs-2xs  14px  labels, form controls, buttons
     --fs-xs   15px  table body
     --fs-sm   16px  BODY DEFAULT
     --fs-md   18px  card headings (h4)
     --fs-lg   22px  h3
     --fs-xl   28px  h2
     --fs-2xl  34px  h1

   Headings are deliberately NOT overridden here — tokens.css already sizes
   h1-h6 off that same scale, and fighting it was part of the inconsistency.
   ============================================================================ */

/* ---- 1. Base -------------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);          /* 16px */
  line-height: var(--lh-normal);    /* 1.55 */
  color: var(--c-ink);
}

/* Keep the whole document on one family. mdwds/bootstrap each ship their own
   stack; without this, controls render in a different face to their labels. */
button, input, select, textarea, optgroup {
  font-family: var(--font-sans);
}

/* A comfortable reading measure, but ONLY for prose. The previous version put
   max-width on every p/li, which squeezed footer link lists and table cells. */
.prose p, .prose li,
.page__head p,
.card__body > p {
  max-width: 72ch;
}

a { color: var(--c-primary); text-underline-offset: 2px; }
a:hover { color: var(--c-primary-darker); }

/* Visible keyboard focus everywhere (Section 508 / WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-primary-vivid);
  outline-offset: 2px;
}

/* ---- 2. USWDS / MDWDS form controls onto the prototype scale --------------- */
/* Labels + legends: 14px semibold, matching .fld__label. */
.usa-label,
.usa-legend,
.usa-checkbox__label,
.usa-radio__label,
.usa-combo-box__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

/* Controls: 14px, matching .inp. */
.usa-input,
.usa-select,
.usa-textarea,
.usa-combo-box__input,
.usa-input-group,
.form-control,
.form-select {
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

/* Supporting text: 13px, matching .fld__hint / .fld__err. */
.usa-hint,
.usa-error-message,
.usa-checkbox__label-description,
.usa-radio__label-description,
.form-text,
small,
.small {
  font-size: var(--fs-3xs);
  line-height: var(--lh-snug);
}

.usa-error-message { font-weight: var(--fw-bold); }

/* Required marker reads as emphasis, not decoration. */
.usa-label abbr[title="required"],
.usa-hint--required {
  color: var(--c-error-dark);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

/* ---- 3. Buttons ----------------------------------------------------------- */
.usa-button,
.btn,
button.usa-button--unstyled {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: .005em;
}
.usa-button--big  { font-size: var(--fs-sm); }
.usa-button--small,
.btn--sm { font-size: var(--fs-3xs); }

.btn { transition: background-color .15s ease, box-shadow .15s ease; }
.btn:hover { box-shadow: 0 1px 3px rgba(27, 27, 27, .15); }

/* ---- 4. Tables ------------------------------------------------------------ */
/* 15px body / 13px uppercase header — the prototype's .tbl treatment applied
   to .usa-table so both kinds of grid look identical. */
.usa-table { font-size: var(--fs-xs); }
.usa-table thead th {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c-ink-muted);
  background: var(--c-paper-alt);
}
.usa-table caption {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-ink-muted);
}
.usa-table--compact { font-size: var(--fs-3xs); }

/* ---- 5. Alerts, summary boxes, lists -------------------------------------- */
.usa-alert__heading,
.usa-summary-box__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.usa-alert__text,
.usa-summary-box__text,
.usa-list { font-size: var(--fs-xs); line-height: var(--lh-normal); }

/* ---- 6. Header / brand ---------------------------------------------------- */
.site-header__title { letter-spacing: -0.01em; font-weight: var(--fw-bold); }
.site-header__sub   { color: var(--c-ink-muted); font-size: var(--fs-3xs); }
.site-header__rolelbl { font-size: var(--fs-3xs); color: var(--c-ink-muted); }
.site-header__who   { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }

/* ---- 7. Primary navigation — button-chip menubar (matches /Portal blueprint) --
   The blueprint / portal screen (_PrototypeBody.cshtml) renders its Main nav as a
   row of neutral BUTTON CHIPS (.btn.btn-neutral), each with a leading FontAwesome
   icon, sitting under a header that carries a thick MDE-blue underline
   (Tailwind border-b-4 border-blue-900). This block gives the MAIN site menubar
   the same treatment, so the wired-up site and the prototype screen read as one
   application rather than two.

   The look is rebuilt on the menubar's OWN classes (.menubar__btn) rather than by
   pulling in prototype-final.css: that sheet is deliberately NOT loaded on this
   layout (it defines a second, conflicting .btn/.card/.inp — see _Layout's CSS
   note), so borrowing .btn-neutral would drag the collision back in. Icons are
   added per item in _Layout markup; the flex `gap` below spaces them. */
nav[aria-label="Main"] {
  background: var(--c-paper);
  border-bottom: 4px solid var(--c-primary-darker);   /* the blueprint's border-b-4 border-blue-900 */
  box-shadow: 0 1px 2px rgba(27, 27, 27, .04);
}
.menubar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: .55rem var(--sp-2);
  list-style: none;
}
.menubar > li { margin: 0; }
.menubar__btn,
.menubar__btn.is-plain {
  display: inline-flex;
  align-items: center;
  gap: .45rem;                      /* space between the leading icon and label */
  padding: .5rem .85rem;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);         /* 14px — same as labels/buttons */
  font-weight: var(--fw-semibold);
  letter-spacing: .005em;
  color: var(--c-ink, #1b1b1b);
  text-decoration: none;
  background: var(--c-paper);
  border: 1px solid #dfe1e2;
  border-radius: .375rem;           /* rounded-md, like the prototype's chips */
  transition: color .15s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
/* The icon carries the colour; the label stays ink, exactly as the chips read
   on the blueprint screen. */
.menubar__btn > i,
.menubar__btn.is-plain > i {
  font-size: .95em;
  color: var(--c-primary);
  transition: color .15s ease;
}
.menubar__btn:hover,
.menubar__btn.is-plain:hover {
  color: var(--c-primary-dark);
  background: var(--c-paper-sunken);
  border-color: var(--c-primary-light);
  box-shadow: 0 1px 3px rgba(27, 27, 27, .15);   /* same lift as .btn:hover */
}
.menubar__btn:focus-visible {
  outline: 3px solid var(--c-primary-vivid);
  outline-offset: 2px;
}
/* Current page — a FILLED chip in MDE blue, matching the blueprint's active view
   button, so "where am I" reads at a glance rather than as a faint underline. */
.menubar__btn[aria-current="page"],
.menubar__btn.is-plain[aria-current="page"] {
  color: #fff;
  font-weight: var(--fw-bold);
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.menubar__btn[aria-current="page"] > i,
.menubar__btn.is-plain[aria-current="page"] > i {
  color: #fff;
}
/* Group divider between the two halves of the bar — "what I am doing" (my
   applications, a new application) and "what I need to look up" (the well
   register, jurisdictions, tags, open questions). The prototype's own bar
   carries the same break (docs/01_Prototype/index.html, li.menu__sep), and the
   distinction is the reason a bar of this length stays readable: a driller
   scans the left half, a county reviewer scans the right.

   It is a real <li role="separator">, not a ::before border on the next item,
   so a screen reader announces the group change instead of silently reading
   fourteen equal-weight items. Colour comes from --c-border so it survives the
   dark theme; a hard-coded grey would vanish. */
.menubar__sep {
  align-self: stretch;
  width: 1px;
  min-height: 1.5rem;
  margin: 0 .3rem;
  background: var(--c-border, #dfe1e2);
}
/* Below 640px the bar wraps to several rows and a vertical hairline lands in
   the middle of nothing, so it becomes a full-width horizontal rule instead. */
@media (max-width: 640px) {
  .menubar__sep {
    width: 100%;
    min-height: 0;
    height: 1px;
    margin: .3rem 0;
  }
}

/* ---- 7b. Menubar dropdowns (Well / Help submenus) -------------------------
   A top-level item that owns a submenu. The panel opens on :hover (mouse), on
   :focus-within (the toggle is a real <button>, so Tab focuses it and reveals
   the panel BEFORE you tab into it), and when wands-menu.js sets
   aria-expanded="true" (touch / click). Any one of the three shows it — the
   CSS never depends on the script, so with JS off hover and keyboard still open
   and close the menu. The caret is a pure decoration and is hidden from AT. */
.menubar__group { position: relative; }

/* The parent toggle wears the same chip as a plain item; the caret sits after
   the label. is-active is set server-side when the open page lives in this
   submenu, so the parent reads as "current" without lighting like aria-current. */
.menubar__toggle {
  cursor: pointer;
}
.menubar__caret {
  font-size: .7em;
  margin-left: .1rem;
  opacity: .75;
  transition: transform .15s ease;
}
.menubar__group:hover > .menubar__toggle .menubar__caret,
.menubar__group:focus-within > .menubar__toggle .menubar__caret,
.menubar__group.is-open > .menubar__toggle .menubar__caret {
  transform: rotate(180deg);
}
/* A parent whose current page is inside it: a soft tinted chip, distinct from
   the filled blue of aria-current="page" so "I am in this group" and "this is
   the page" stay legible apart. */
.menubar__toggle.is-active {
  border-color: var(--c-primary-light);
  background: var(--c-paper-sunken);
  color: var(--c-primary-dark);
}

/* The panel. Hidden by default; positioned under the toggle. z-index clears the
   page content and the state banner below the nav. */
.menubar__menu {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  z-index: 60;
  min-width: 15rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--c-paper);
  border: 1px solid var(--c-border, #dfe1e2);
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(27, 27, 27, .18);
  display: none;
}
.menubar__group:hover > .menubar__menu,
.menubar__group:focus-within > .menubar__menu,
.menubar__group.is-open > .menubar__menu {
  display: block;
}
.menubar__menu > li { margin: 0; }

/* Items inside the panel read as a vertical list rather than chips: full-width
   rows with a leading icon, the hover/current cues borrowed from .menubar__btn
   so the two surfaces feel like one control. */
.menubar__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink, #1b1b1b);
  text-decoration: none;
  white-space: nowrap;
  border-radius: .375rem;
  transition: color .15s ease, background-color .15s ease;
}
.menubar__item > i {
  font-size: .95em;
  width: 1.1em;
  text-align: center;
  color: var(--c-primary);
}
.menubar__item:hover,
.menubar__item:focus-visible {
  background: var(--c-paper-sunken);
  color: var(--c-primary-dark);
}
.menubar__item:focus-visible {
  outline: 3px solid var(--c-primary-vivid);
  outline-offset: -1px;
}
.menubar__item[aria-current="page"] {
  color: #fff;
  font-weight: var(--fw-bold);
  background: var(--c-primary);
}
.menubar__item[aria-current="page"] > i { color: #fff; }

/* When the bar wraps to stacked rows on a phone, an absolutely-positioned panel
   would float over the items below it. Drop it back into the flow as an indented
   block so the whole menu stays a single scannable column. */
@media (max-width: 640px) {
  .menubar__menu {
    position: static;
    min-width: 0;
    margin: .2rem 0 .2rem 1.25rem;
    box-shadow: none;
  }
}

/* ---- 8. Official MDWDS statewide footer ----------------------------------- */
/* mdwds.min.css does the heavy lifting (dark panel, columns, social icons).
   These are type-scale corrections only, so the footer matches the rest of the
   site instead of reverting to the USWDS sizes. */
.maryland-footer { margin-top: var(--sp-5); }
.maryland-footer__agency-name,
.maryland-footer__title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.maryland-footer__link-group-heading {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.maryland-footer__link-group-list,
.maryland-footer__link-group-list li,
.maryland-footer__link-group-list a {
  font-size: var(--fs-3xs);
  line-height: var(--lh-normal);
  max-width: none;                  /* never apply the prose measure here */
}
.maryland-footer__link-group-list a { text-decoration: none; }
.maryland-footer__link-group-list a:hover { text-decoration: underline; }
.maryland-footer__copyright {
  font-size: var(--fs-3xs);
  line-height: var(--lh-normal);
}
/* Version / build stamp — quiet, on its own line, carried over from the
   original portal footer. */
.site-footer__build {
  display: block;
  margin-top: var(--sp-05);
  font-size: var(--fs-3xs);
  opacity: .8;
}

/* ---- 9. "View as" banner --------------------------------------------------
   Sticky, high-contrast, and impossible to mistake for ordinary chrome. An
   administrator who forgets which account they are in reads somebody else's
   queue as their own; a banner that scrolls out of sight does not stop that.
   Amber-on-near-black rather than a red alert: this is a normal, sanctioned
   activity, not an error state. */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #1b1b1b;
  color: #fff;
  border-bottom: 4px solid #fdb81e;
}
.impersonation-banner__inner {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: var(--sp-1) 1rem;
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  flex-wrap: wrap;
}
.impersonation-banner__icon {
  font-size: var(--fs-md);
  color: #fdb81e;
  flex: 0 0 auto;
}
.impersonation-banner__text {
  margin: 0;
  flex: 1 1 22rem;
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
}
.impersonation-banner__sub {
  display: block;
  font-size: var(--fs-3xs);
  opacity: .85;
  margin-top: .15rem;
}
.impersonation-banner__action { flex: 0 0 auto; margin: 0; }
.impersonation-banner__action .btn {
  background: #fdb81e;
  border-color: #fdb81e;
  color: #1b1b1b;
  font-weight: var(--fw-semibold);
}
.impersonation-banner__action .btn:hover { background: #ffcb4d; border-color: #ffcb4d; }

/* ---- 9b. The gov-banner tagline, ON ONE LINE -------------------------------
   Added 3 Sep 2026: "NO WRAP An official application of the Maryland Department
   of the Environment, Water Supply Program."

   It was breaking after "Maryland Department of the" and putting ", Water Supply
   Program." on a second line, which reads as two separate claims and makes a
   one-sentence attribution look like a paragraph.

   NOWRAP FROM 45rem UP, AND WRAPPING BELOW IT — and that limit is physical, not a
   preference, so it is written down rather than quietly worked around. The
   sentence is 92 characters. At --fs-2xs (14px) Inter it measures about 610px,
   and with the flag, the gaps and the row's 1rem side padding the row needs
   roughly 670px to hold it. A 390px phone has 358px of usable width; forcing one
   line there means either clipping the sentence — losing "Water Supply Program",
   the part that identifies the programme — or setting it at about 6px, which
   nobody can read. So it wraps below the breakpoint, which is the same thing the
   browser was already doing, and holds one line everywhere it fits.

   45rem (720px) rather than exactly 670px: the extra 50px is headroom for a
   longer translation and for the root-font-size step MDWDS applies on narrow
   viewports, so the rule does not start clipping the moment either changes.
   MEASURED, because the figure first written here was wrong: that step is at
   768px, not 480px. Below 768 the root is 14px and this sentence renders at
   12.25px / 553px wide; at and above it the root is 16px and it is 14px / 633px.
   Both fit, so the breakpoint holds either way — and note 45rem is a MEDIA QUERY,
   where rem is always the INITIAL 16px regardless of that step, so the switch
   happens at a true 720px rather than at some font-dependent width.

   ON THE <p>, NOT ON .gov-banner__row — the row keeps flex-wrap:wrap so the flag
   and the About button can still move to their own line if they need to. Only the
   sentence itself is held together.

   WHY min-width: max-content SITS BESIDE THE nowrap, AND WHY IT IS INSIDE THE
   MEDIA QUERY RATHER THAN OUTSIDE IT.
   white-space: nowrap stopped the sentence breaking but did NOT widen the box it
   lives in. Measured at 1440: the <p> was 601px while the text it painted was
   633px, so 32px of the sentence rendered OUTSIDE its own element. Nothing was
   clipped and there was no page scrollbar, because here the sentence is followed
   by empty space — the defect was invisible and entirely latent. It stops being
   latent the day anything is placed to its right in .gov-banner__row, at which
   point the last two words silently paint underneath that thing. A flex item's
   base size comes from its content, so the honest fix is to tell the layout what
   the content actually needs.
   min-width, not width / flex-basis / flex — all four were applied in the browser
   and measured; only min-width moved the box (601 -> 633, delta 0).
   INSIDE the media query, because unconditionally it is actively harmful: it
   forces the single line BELOW the breakpoint too, where it does not fit.
   Measured at 375px, the box became 553px inside a 375px viewport — the exact
   clipping this breakpoint exists to prevent. Scoped, every width below 720px is
   unchanged (two lines at 375-719, three at 320). Do not lift it out of the
   block. ------------------------------------------------------------------- */
.gov-banner__tagline {
  margin: 0;
}

@media (min-width: 45rem) {

  .gov-banner__tagline {
    white-space: nowrap;
    min-width: max-content;
  }
}

/* ---- 10. Environment banner — MOVED OUT OF THIS FILE, 3 Sep 2026 -----------
   The rules are now in css/env-banner.css and are NOT duplicated here.

   Why they left: _EnvironmentBanner.cshtml is rendered by all three layouts,
   and this file is loaded by _Layout ONLY. Measured on /Account/Login, the
   banner rendered with the right DEV text and a computed background-color of
   rgba(0,0,0,0) — present, and not warning anybody. A warning strip that is
   invisible on the sign-in page is worse than no strip at all, because the
   layout looks finished.

   DO NOT RE-ADD .env-banner RULES HERE. Two definitions in two files, one of
   which most layouts do not load, is how the bug happened. Every layout that
   renders the partial links css/env-banner.css. ------------------------------ */

/* ---- 11. Type-ahead suggestion list ---------------------------------------
   Shared by the SDAT address search and the driller licence picker, so the two
   behave identically. An applicant who has learnt one has learnt the other.

   Positioned absolutely inside a .sug wrapper rather than pushing the form down:
   a list that reflows the page on every keystroke moves the Save button under the
   pointer, and the field below the one being typed into jumps out from under the
   cursor. ------------------------------------------------------------------- */
.sug { position: relative; }

.sug__list {
  position: absolute;
  z-index: 30;                    /* above the form, below the modal layer */
  inset-inline: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--c-border, #adadad);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
  /* Ten suggestions is the endpoint's limit; the cap is here so a longer list
     from any other caller scrolls instead of running off the viewport. */
  max-height: 19rem;
  overflow-y: auto;
}

.sug__btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: .45rem .6rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  cursor: pointer;
}
.sug__btn + .sug__btn { border-top: 1px solid #f0f0f0; }

/* Hover and keyboard focus get the SAME treatment. A list where the mouse
   highlights and the arrow keys do not is a list a keyboard user cannot follow. */
.sug__btn:hover,
.sug__btn:focus {
  background: #eef4fb;
  outline: 2px solid var(--c-focus, #2491ff);
  outline-offset: -2px;
}

/* ---- 12. The well-site map picker ------------------------------------------
   Height in vh with a floor: on a laptop the map needs to show the parcel and its
   neighbours, and a fixed pixel height either wastes half a large screen or leaves
   a letterbox on a small one. ---------------------------------------------- */
.wmap {
  height: clamp(20rem, 46vh, 34rem);
  border: 1px solid var(--c-border, #adadad);
  border-radius: 3px;
  background: #eef1f4;            /* shows while Esri's tiles are still arriving */
}

/* The typed-coordinates fallback. Styled as guidance, not as an error: the map
   failing to load is not the applicant's mistake and there is nothing for them
   to fix — there is only another way to answer the same question. */
.wmap-fallback {
  padding: .6rem .75rem;
  border: 1px dashed var(--c-border, #adadad);
  border-radius: 3px;
  background: #f7f9fa;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
}

/* ---- 13. The decorative longitude sign -------------------------------------
   Maryland is west of Greenwich, so the sign is never in question and typing it
   was the previous system's commonest data error. It is rendered as part of the
   FIELD rather than as text in the box: the applicant cannot delete it, and the
   value they read is the value that is stored. ------------------------------ */
.coord {
  display: flex;
  align-items: stretch;
}
.coord__sign {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 .55rem;
  border: 1px solid var(--c-border, #adadad);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  background: #f0f0f0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1;
  color: #1b1b1b;
}
.coord .inp,
.coord input {
  border-radius: 0 3px 3px 0;
  margin: 0;
  min-width: 0;                   /* lets the input shrink inside the flex row */
}

/* ---- 14. The over-length character counter --------------------------------
   wands-wellsite.js and wands-owner.js both do
   counter.classList.toggle('is-over', left < 0) on a .fld__counter. The
   prototype has no rule for it, because the prototype's engine caps the control
   at its maxlength and the count can never go negative there.

   It can here. A value longer than the cap arrives whenever a record written by
   src_v2, by a direct API call, or before the cap was tightened is loaded back
   into the form: maxlength stops further TYPING but does not shorten what is
   already in the box. Without this rule the counter quietly reads "-40
   characters remaining" in the same grey as "460 remaining", and the applicant
   saves a note the server then rejects for length — with no indication which
   field was too long.

   THE PARCEL CARD THAT USED TO BE THIS SECTION IS GONE. It defined .parcel,
   .parcel__k and .parcel__v, which exist nowhere in the prototype; they were
   invented for the well-site screen and were the reason step 1 of the green form
   did not look like steps 2 and 3. That screen now uses the prototype's own
   .dl--inline and nothing references these classes. */
.fld__counter.is-over {
  color: var(--c-error-dark);
  font-weight: var(--fw-bold);
}

/* ---- 15. Stepper, as links rather than buttons -----------------------------
   The prototype's stepper is a row of <button>s, because the prototype is a single
   page and moving between steps is a JavaScript concern there. This is a real
   multi-page wizard: each step is a URL, so a step you can reach is an <a> and a
   step you cannot is a <span>.

   That distinction is not cosmetic. A <button> that navigates cannot be opened in
   a new tab, does not show its destination on hover, and is announced as "button"
   to a screen reader when it is in fact a link. And a future step rendered as a
   disabled button is still in the focus order on some browsers, so a keyboard user
   tabs into three dead controls between the stepper and the form.

   WHICH OF THE PROTOTYPE'S TWO STEPPERS THIS FOLLOWS
   tokens.css styles ".stepper button" as a row of full-width TABS with a numbered
   circle and a thick bottom border. prototype-app.css then styles ".stepper__btn"
   as a row of PILLS. prototype-app.css loads second, so the pill is what the
   prototype actually renders and the tab rules are dead weight in it.

   An earlier version of this block re-stated the TAB rules, which is why the
   stepper looked nothing like the delivered design. The pill is replicated below,
   and only for the two element types the prototype has no rule for: an <a> and a
   <span>. Sizes, padding, radius and the current-step colours all come straight
   from prototype-app.css — nothing here invents a value. --------------------- */
.stepper a.stepper__btn,
.stepper span.stepper__btn {
  display: inline-block;
  padding: var(--sp-05) var(--sp-15);
  border: var(--border-1) solid var(--c-disabled);
  border-radius: var(--radius-pill);
  background: var(--c-paper);
  font: inherit;
  font-size: var(--fs-3xs);
  color: var(--c-primary-dark);
  text-decoration: none;
  white-space: nowrap;
}
.stepper a.stepper__btn:hover {
  background: var(--c-primary-lighter);
  text-decoration: none;
}

/* Focus is drawn on the whole pill, not just the text: the label is two or three
   words and a short underline is easy to lose among five other pills. */
.stepper a.stepper__btn:focus-visible { box-shadow: var(--focus-ring); outline: 0; }

/* THE CURRENT STEP is already handled by prototype-app.css's
   .stepper__btn[aria-current="step"] — the partial sets that attribute, so the
   filled dark pill needs no rule here.

   A COMPLETED STEP has no rule in prototype-app.css at all (the prototype's own
   stepper only distinguishes the current one). tokens.css uses the success green
   for "done", so that is the colour taken, applied to the pill's border and text
   rather than to a bottom border it does not have. */
.stepper li[data-state="done"] > .stepper__btn {
  border-color: var(--c-success-darker);
  color: var(--c-success-darker);
  font-weight: var(--fw-semibold);
}

/* A step not yet reachable. Dimmed rather than hidden: knowing that three steps
   remain is what tells an applicant whether to start now or come back later. */
.stepper li[data-state="todo"] > .stepper__btn {
  background: var(--c-paper-alt);
  color: var(--c-ink-muted);
  cursor: default;
}

/* ---- 15b. The numbered badge inside each pill (R4) ------------------------- */
/* Every form now renders Green's pill row (Views/Shared/_FormStepper.cshtml), and the
   pill gained a numbered badge so the sequence is countable at a glance instead of
   inferred from position. Two constraints shaped this block:

   ONLY currentColor IS USED. The badge is an outlined circle drawn in the pill's OWN
   text colour — the colour theme.css has already asserted for every state in every
   theme (tools/theme-contrast.mjs). Giving the badge its own background would have
   introduced a colour pair the validator does not cover; inheriting means the badge
   cannot fail contrast separately from the label sitting next to it.

   NOTHING IS RESIZED OR RECOLOURED. Padding, radius, font-size and all four state
   colours still come from prototype-app.css and the rules above. This block only lays
   the two spans out inside the pill and draws the circle. --------------------- */
.stepper a.stepper__btn,
.stepper span.stepper__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-05);
}
.stepper__n {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border: var(--border-1) solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
/* THE CURRENT STEP is the one place the sequence should draw the eye, so its badge is
   knocked out of the filled pill rather than drawn as another outline. The two colours
   are the pill's own text and background swapped — and contrast is symmetric, so this
   pair is always the ratio theme.css already asserts for the pill itself. */
.stepper__btn[aria-current="step"] .stepper__n {
  background: currentColor;
  color: var(--c-primary-darker);
}
.stepper__t { font-weight: var(--fw-semibold); }

/* ---- 16. The driller's journey board -------------------------------------- */
/* Renders _PackageJourney.cshtml on the package hub. Uses the PROTOTYPE vocabulary
   (.card / .chip / .btn) because that is what its host page is built from — a
   USWDS board dropped into a prototype-vocabulary page is the exact split that
   makes Green and Yellow look like two different applications.

   STATE IS NEVER COLOUR ALONE. Every rule below decorates a chip that already
   carries the word "Done", "Your turn", "Sent back", "Waiting" or "Locked". These
   colours are redundancy, not meaning. */

.jrn { list-style: none; margin: 0; padding: 0; }

.jrn__stage {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}

/* The connector, drawn behind the markers so the board reads as one sequence
   rather than five unrelated cards. Trimmed at both ends so it starts and stops
   at a marker instead of floating past the first and last. */
.jrn__stage::before {
  content: "";
  position: absolute;
  left: calc(1rem - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-paper-sunken);
}
.jrn__stage:first-child::before { top: calc(var(--sp-2) + 1rem); }
.jrn__stage:last-child::before  { bottom: calc(100% - var(--sp-2) - 1rem); }

.jrn__marker {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  background: var(--c-paper);
  border: 2px solid var(--c-disabled);
  color: var(--c-ink-muted);
}

.jrn__stage--done .jrn__marker {
  background: var(--c-success-light); border-color: var(--c-success); color: var(--c-success-darker);
}
.jrn__stage--current .jrn__marker {
  background: var(--c-primary-lighter); border-color: var(--c-primary); color: var(--c-primary-darker);
}
.jrn__stage--attention .jrn__marker {
  background: var(--c-warning-light); border-color: var(--c-warning-dark); color: var(--c-warning-darker);
}
.jrn__stage--waiting .jrn__marker {
  background: var(--c-info-light); border-color: var(--c-info); color: var(--c-info-darker);
}
.jrn__stage--locked .jrn__marker {
  background: var(--c-paper-alt); border-color: var(--c-disabled); color: var(--c-ink-subtle);
}

/* THE ONE STAGE THAT MATTERS. Exactly one stage per board carries this, set in
   PackageJourney.Focus — two emphasised stages on a "what next" board is the
   same as none. */
.jrn__stage--focus > .jrn__main {
  background: var(--c-paper-alt);
  border: 1px solid var(--c-primary-light);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
}
.jrn__stage--attention.jrn__stage--focus > .jrn__main {
  border-color: var(--c-warning);
  border-left-color: var(--c-warning-dark);
}

.jrn__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1);
}
.jrn__title { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.jrn__num { color: var(--c-ink-subtle); font-weight: var(--fw-normal); margin-right: .25rem; }
.jrn__chip { flex: none; }

.jrn__whose, .jrn__body, .jrn__note, .jrn__unlock {
  margin: var(--sp-05) 0 0;
  font-size: var(--fs-2xs);
}
.jrn__body { color: var(--c-ink-muted); max-width: var(--maxw-prose); }
.jrn__note { font-weight: var(--fw-semibold); }
.jrn__note--attention { color: var(--c-warning-darker); }

/* The sentence that makes a locked stage useful. Indented under an arrow so it
   reads as a condition on the stage above it, not as more body copy. */
.jrn__unlock {
  display: flex;
  gap: .4rem;
  color: var(--c-ink-muted);
  max-width: var(--maxw-prose);
}
.jrn__unlock-icon { flex: none; margin-top: .15rem; }

.jrn__actions { margin-top: var(--sp-1); }

/* Dimmed, not hidden — same stance as the stepper's todo state above. Knowing
   three stages remain is what tells a driller whether to start now. */
.jrn__stage--locked .jrn__title,
.jrn__stage--locked .jrn__body { color: var(--c-ink-muted); }

.jrn-intro { margin-top: 0; }
.jrn-foot {
  margin-bottom: 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-paper-sunken);
  font-size: var(--fs-2xs);
}

/* ---- 17. Print ------------------------------------------------------------ */
@media print {
  .gov-banner, nav[aria-label="Main"], .maryland-footer, .skip-link,
  .impersonation-banner, .sug__list {
    display: none !important;
  }
  /* The environment banner IS printed, on purpose. A printed non-production
     application handed to a county reviewer must still say it is not real. */
  body { font-size: 11pt; }

  /* The map is replaced by its coordinates, which are printed in the fields
     below it. An empty grey rectangle on a printed permit application is a
     quarter of a page telling a reviewer nothing. */
  .wmap { display: none !important; }

  /* The journey board DOES print, and it survives losing its colours because
     every stage states its status in words. Backgrounds go (they cost toner and
     carry no meaning here); the borders and the connector stay, so the sequence
     is still legible. A stage must not break across a page. */
  .jrn__stage { break-inside: avoid; }
  .jrn__marker,
  .jrn__stage--focus > .jrn__main { background: none !important; }
  .jrn__actions { display: none !important; }
}

/* ============================================================================
   STICKY FOOTER  —  keep the statewide footer at the bottom on short pages.

   _Layout.cshtml marks <body class="d-flex flex-column min-vh-100"> and
   <main class="flex-fill"> — the standard flexbox sticky-footer pattern. But
   mdwds.min.css ships .flex-column and .flex-fill WITHOUT .d-flex or
   .min-vh-100, so the body was never a flex container and had no minimum
   height: on a short page (sign-in, session-timeout, "no signature required")
   the footer rode up into the middle of the viewport. Supply the two missing
   utilities the layout already asks for, scoped to <body> so nothing else that
   happens to carry the class is affected. flex-column + flex-fill (already
   defined) then push the footer to the bottom.
   ========================================================================== */
body.d-flex { display: flex; }
body.min-vh-100 { min-height: 100vh; }

/* ---- _InfoTip / _PropertyNumberLine (24 Sep 2026) ------------------------------
   The info icon sits inline after the text it explains, in the link colour so it reads
   as something to hover or focus; the USWDS focus outline is left untouched (508). */
.info-tip { margin-left: .25rem; vertical-align: baseline; text-decoration: none; }
.info-tip .fa-circle-info { font-size: .95em; }
.property-line { font-size: .95rem; }

/* ---- _PropertyBanner (29 Sep 2026) — the property on every form step ---------------
   A native <details>: the <summary> is the collapsed line (number · location · county ·
   SDAT account), the body the owner(s) and owner contact. Colours come from the existing
   tokens only (ink-subtle / primary / paper-alt), so theme.css's contrast assertions still
   hold; the browser's own focus outline on <summary> is left in place (508). */
.property-banner {
  border: 1px solid var(--c-ink-subtle, #a9aeb1);
  border-left: 4px solid var(--c-primary, #005ea2);
  border-radius: 4px;
  background: var(--c-paper-alt, #f7f9fa);
  color: var(--c-ink);
  padding: .5rem .75rem;
  font-size: .95rem;
}
.property-banner__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.property-banner__details > summary { cursor: pointer; list-style: none; }
.property-banner__details > summary::-webkit-details-marker { display: none; }
.property-banner__facts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; flex: 1 1 auto; }
.property-banner__toggle { color: var(--c-primary, #005ea2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* The disclosure triangle, drawn in currentColor so it follows the link colour per theme. */
.property-banner__toggle::before { content: "\25B8"; display: inline-block; margin-right: .3rem; text-decoration: none; }
.property-banner__details[open] .property-banner__toggle::before { content: "\25BE"; }
.property-banner__body { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--c-ink-subtle, #a9aeb1); }
.property-banner__h { font-size: 1rem; margin: .5rem 0 .25rem; }
.property-banner__body .usa-list { margin-top: 0; margin-bottom: .25rem; }
/* A long tooltip wraps (uswds adds --wrap); keep it a readable paragraph, not half the screen. */
.usa-tooltip__body--wrap { text-align: left; min-width: 16rem; max-width: 28rem; }