/* ---------------------------------------------------------------------------
   Applicant portal — /portal/*
   Scoped to body[data-path^="portal"] so nothing here can reach the desk or the public
   landing pages. Palette is the CHPA brand already declared in web.css.
--------------------------------------------------------------------------- */

body[data-path^="portal"] {
  --p-blue: #3e4095;
  --p-blue-dark: #2c2e6d;
  --p-blue-soft: #ececf7;
  --p-red: #ed3339;
  /* White text on --p-red is 4.1:1, under the 4.5:1 small text needs. The
     brand red stays for rules and borders; anything carrying text uses this. */
  --p-red-strong: #c8232a;
  --p-red-soft: #fdecec;
  --p-ink: #1c1d1d;
  --p-body: #5a5c6b;
  --p-line: #dcdee8;
  --p-ground: #f5f6fa;
  --p-surface: #ffffff;
  --p-ok: #1c7c4a;
  --p-ok-soft: #e6f4ec;
  --p-warn: #9e5714;
  --p-warn-soft: #fbf0e2;
  --p-grey-soft: #eef0f6;

  background: var(--p-ground) !important;
  background-image: none !important;
  color: var(--p-ink);
  /* frappe's website bundle pins html and body to height: 100%, and web.css
     gives html its own white, so the ground stopped one screen down and a
     long page scrolled onto white. Let the body grow with the page. */
  height: auto;
  min-height: 100%;
}

/* frappe's web shell puts a container with its own padding around us */
body[data-path^="portal"] .page_content,
body[data-path^="portal"] main.container,
body[data-path^="portal"] .page-content-wrapper { max-width: none; padding: 0; }
body[data-path^="portal"] .page-header-wrapper,
body[data-path^="portal"] .page-breadcrumbs { display: none; }
body[data-path^="portal"] #page-login { height: auto; }

/* ---------- top bar ---------- */
.p-nav {
  background: var(--p-blue);
  color: #fff;
}
.p-nav-in {
  max-width: 1120px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 24px; min-height: 58px; flex-wrap: wrap;
}
/* the masthead: crests and wordmark, as on the public front page */
.p-mast { background: linear-gradient(90deg, #fff 0%, #f3f6fc 100%); border-bottom: 1px solid var(--p-line); }
.p-mast-in { min-height: 84px; padding-block: 8px; gap: 20px; }
.p-brand { display: flex; align-items: center; gap: 18px; text-decoration: none !important; color: #1c2a5a; }
.p-crests { display: flex; align-items: center; gap: 12px; flex: none; }
.p-crests img { height: 54px; width: auto; display: block; }
.p-crest-rule { width: 1px; height: 46px; background: var(--p-line); }
.p-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.p-wordmark strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #1c2a5a; }
.p-wordmark small { font-size: 13px; font-weight: 500; margin-top: 3px; color: #2b3a6b; }
.p-flagline { display: block; height: 3px; margin-top: 6px; border-radius: 2px;
  background: linear-gradient(90deg, #e3242b 0 40%, #f5c400 40% 60%, #009e49 60% 80%, #111 80% 100%); }

.p-links { display: flex; gap: 20px; flex-wrap: wrap; }
.p-links a {
  color: rgba(255,255,255,.8); font-size: 13.5px; font-weight: 500;
  text-decoration: none; padding: 14px 0 12px; border-bottom: 2px solid transparent;
}
.p-links a:hover { color: #fff; }
.p-links a.on { color: #fff; border-bottom-color: var(--p-red); }
.p-nav .p-nav-in { min-height: 46px; }

/* the bell, the name and Sign out, on the masthead's right */
.p-me { margin-left: auto; font-size: 13.5px; color: var(--p-body); display: flex; align-items: center; gap: 14px; }
.p-me a { color: var(--p-body); text-decoration: none; }
.p-me a:hover { color: var(--p-ink); text-decoration: underline; }

/* Sign out is a form button so it can POST, but it belongs in the bar as a
   link. Reset the button chrome rather than restyling every rule around it. */
.p-me form { display: inline; }

.p-me button {
  font: inherit; font-weight: 600; background: none; border: 1px solid var(--p-line); border-radius: 6px;
  padding: 7px 12px; cursor: pointer; color: var(--p-blue); text-decoration: none; }

.p-me button:hover { background: var(--p-blue-soft); border-color: var(--p-blue); }


/* ---------- page frame ---------- */
.p-wrap { max-width: 1120px; margin: 0 auto; padding: 26px 22px 80px; }
.p-head { margin-bottom: 22px; }

/* A page heading with an action beside it. Wraps on a phone rather than
   squeezing the button off the edge. */
.p-head-act { display: flex; gap: 14px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; }

/* The search / filter / sort bar above a list.

   Every control is a label-over-control column of the same shape, so they
   share one baseline no matter how long the label is; a fixed control
   height keeps the search box and the dropdowns the same size, which
   browsers do not do on their own. Wraps on a narrow screen rather than
   squeezing. */
.p-tools { display: flex; gap: 10px 12px; align-items: flex-end; flex-wrap: wrap;
  margin: 0 0 16px; }

/* margin-bottom:0 undoes the website stylesheet's default label margin. It is
   part of the flex line's cross size, so it left every control sitting 8px
   above the Search button that flex-end was supposed to align them with. */
.p-tool { display: flex; flex-direction: column; gap: 5px; min-width: 0;
  margin-bottom: 0; }

.p-tool > span { font-size: 11px; font-weight: 700; color: var(--p-body);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.4; }

.p-tools input[type=search], .p-tools select {
  box-sizing: border-box; height: 38px; font-size: 13.5px; font-family: inherit;
  padding: 0 10px; border: 1px solid var(--p-line); border-radius: 6px;
  background: #fff; color: var(--p-ink); }

/* Safari gives a search input its own rounded chrome and its own metrics. */
.p-tools input[type=search] { -webkit-appearance: none; appearance: none; }

.p-tool-wide { flex: 1 1 260px; }

.p-tool-wide input[type=search] { width: 100%; }

.p-tools input[type=search]:focus, .p-tools select:focus {
  outline: 2px solid var(--p-blue); outline-offset: -1px; }

/* Sits on the control row, not the label row. */
.p-tool-actions { display: flex; gap: 8px; align-items: center; height: 38px; }

.p-tool-actions .btn-p { height: 38px; display: inline-flex; align-items: center; }

@media (max-width: 640px) {
  .p-tool-wide { flex: 1 1 100%; }
  .p-tool { flex: 1 1 auto; }
  .p-tools select { width: 100%; }
  .p-tool-actions { flex: 1 1 100%; }
  .p-tool-actions .btn-p { flex: 1 1 auto; justify-content: center; }
}
.p-head h1 { font-size: 25px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; color: var(--p-ink); }
.p-head p { margin: 0; font-size: 14.5px; color: var(--p-body); }
.p-back { display: inline-block; font-size: 13px; color: var(--p-blue); text-decoration: none; margin-bottom: 10px; font-weight: 600; }
.p-back:hover { text-decoration: underline; }

/* ---------- cards ---------- */
.p-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.p-card {
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: 6px; padding: 15px 17px; text-decoration: none; color: inherit; display: block;
}
a.p-card:hover { border-color: #b9bcd0; }
.p-card .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--p-body); margin-bottom: 6px; }
.p-card .v { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.p-card .s { font-size: 12.5px; color: var(--p-body); margin-top: 3px; }
.p-card.act { border-left: 3px solid var(--p-red); }
.p-card.act .v { color: var(--p-red); }

/* ---------- tables ---------- */
.p-tablewrap { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 6px; overflow-x: auto; }
table.p-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.p-table th {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--p-body); background: #f7f8fc; padding: 10px 15px; text-align: left; white-space: nowrap;
}
table.p-table td { padding: 12px 15px; border-top: 1px solid var(--p-line); vertical-align: middle; }
table.p-table tr:hover td { background: #fafbff; }
table.p-table a.id { font-weight: 700; color: var(--p-blue); text-decoration: none; white-space: nowrap; }
table.p-table a.id:hover { text-decoration: underline; }
.p-title-cell { color: var(--p-ink); }
.p-sub { display: block; font-size: 12.5px; color: var(--p-body); margin-top: 2px; }

/* One application's permits, folded under its number.
   Native <details>: no script to keep working, and the whole header is the
   control. The caret is the only thing that says "this opens", so it is drawn
   rather than left to the browser's marker, which differs everywhere. */
.p-acc-list { display: flex; flex-direction: column; gap: 10px; }
.p-acc { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 6px; }
.p-acc-head { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 14px;
              padding: 14px 16px; cursor: pointer; list-style: none; }
.p-acc-head::-webkit-details-marker { display: none; }
.p-acc-head:hover { background: var(--p-grey-soft); }
.p-acc-head:focus-visible { outline: 2px solid var(--p-blue); outline-offset: -2px; border-radius: 6px; }
.p-acc-id .id { font-weight: 700; font-size: 15px; }
.p-acc-meta { font-size: 13px; color: var(--p-body); white-space: nowrap; }
.p-acc-caret { width: 10px; height: 10px; border-right: 2px solid var(--p-body);
               border-bottom: 2px solid var(--p-body); transform: rotate(45deg);
               transition: transform .15s ease; justify-self: center; margin-top: -4px; }
.p-acc[open] > .p-acc-head { border-bottom: 1px solid var(--p-line); }
.p-acc[open] > .p-acc-head .p-acc-caret { transform: rotate(-135deg); margin-top: 4px; }
.p-acc-body { border: 0; border-radius: 0 0 6px 6px; }
@media (max-width: 640px) {
  .p-acc-head { grid-template-columns: 1fr 18px; }
  .p-acc-meta { grid-column: 1; white-space: normal; }
}

/* ---------- pills ---------- */
.pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 3px; white-space: nowrap;
}
.pill.blue { background: var(--p-blue-soft); color: var(--p-blue); }
.pill.ok   { background: var(--p-ok-soft);   color: var(--p-ok); }
.pill.warn { background: var(--p-warn-soft); color: var(--p-warn); }
.pill.bad  { background: var(--p-red-soft);  color: #a3161b; }
.pill.grey { background: var(--p-grey-soft); color: var(--p-body); }

/* ---------- buttons ---------- */
.btn-p {
  display: inline-block; font-size: 13.5px; font-weight: 600; padding: 9px 16px;
  border-radius: 6px; border: 1px solid var(--p-blue); background: var(--p-blue);
  color: #fff !important; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-p:hover { background: var(--p-blue-dark); border-color: var(--p-blue-dark); }
.btn-p.ghost { background: transparent; color: var(--p-blue) !important; }
.btn-p.ghost:hover { background: var(--p-blue-soft); }
.btn-p.red { background: var(--p-red-strong); border-color: var(--p-red-strong); }
.btn-p.red:hover { background: #a3161b; border-color: #a3161b; }
.btn-p.sm { padding: 6px 12px; font-size: 12.5px; }
.btn-p.lg { padding: 13px 22px; font-size: 15.5px; min-height: 44px;
            display: inline-flex; align-items: center; gap: 10px; }
.btn-p.lg span { font-size: 18px; line-height: 1; }

/* The card that leads to the application itself - see application.html. */
.p-cta { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; align-items: start;
         background: var(--p-blue-soft); border: 1px solid #d3d5ee; border-left: 4px solid var(--p-blue);
         border-radius: 6px; padding: 18px 20px 20px; margin-bottom: 14px; }
.p-cta-icon { width: 40px; height: 40px; color: var(--p-blue); margin-top: 2px; }
.p-cta h2 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--p-ink); }
.p-cta p { font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; color: var(--p-body); }
/* A draft is unfinished business, and warm rather than calm says so. */
.p-cta.draft { background: #fbf0e2; border-color: #e7cfa8; border-left-color: #9e5714; }
.p-cta.draft .p-cta-icon { color: #9e5714; }
@media (max-width: 640px) {
  .p-cta { grid-template-columns: 1fr; }
  .p-cta-icon { display: none; }
  .p-cta .btn-p.lg { width: 100%; justify-content: center; }
}

/* ---------- tracker ---------- */
.p-stages { display: grid; grid-template-columns: repeat(6, 1fr); margin: 22px 0 26px; }
.p-stage { text-align: center; font-size: 12px; line-height: 1.35; color: var(--p-body); position: relative; padding-top: 28px; }
.p-stage::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: #c9ccdd;
  border: 3px solid var(--p-ground); box-shadow: 0 0 0 1px #c9ccdd; z-index: 1;
}
.p-stage::after { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: #c9ccdd; }
.p-stage:first-child::after { display: none; }
.p-stage.done { color: var(--p-ink); }
.p-stage.done::before { background: var(--p-ok); box-shadow: 0 0 0 1px var(--p-ok); }
.p-stage.done::after  { background: var(--p-ok); }
.p-stage.now { color: var(--p-ink); font-weight: 700; }
.p-stage.now::before { background: var(--p-red); box-shadow: 0 0 0 1px var(--p-red); }
.p-stage.now::after  { background: var(--p-ok); }

/* ---------- panels ---------- */
.p-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
.p-panel { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 6px; padding: 17px 19px; margin-bottom: 14px; }
.p-panel h2 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--p-ink); }
.p-panel p { margin: 0; font-size: 14px; color: var(--p-body); }
.p-kv { display: grid; grid-template-columns: 145px 1fr; gap: 7px 12px; font-size: 14px; margin: 0; }
.p-kv dt { color: var(--p-body); }
.p-kv dd { margin: 0; color: var(--p-ink); }

.p-alert { background: var(--p-red-soft); border: 1px solid #f3c2c4; border-left: 3px solid var(--p-red); border-radius: 6px; padding: 15px 18px; margin-bottom: 14px; }
.p-alert h2 { font-size: 14.5px; font-weight: 700; margin: 0 0 5px; color: #a3161b; }
.p-alert p { margin: 0 0 10px; font-size: 14px; color: #7d2226; }
.p-alert p:last-child { margin: 0; }
.p-alert .quote { background: #fff; border: 1px solid #f3c2c4; border-radius: 4px; padding: 9px 12px; font-size: 13.5px; color: var(--p-ink); margin-bottom: 10px; white-space: pre-wrap; }
/* Advice rather than a blocker - the upload check's "may not be the right file". */
.p-alert.warn { background: var(--p-warn-soft); border-color: #efd3b0; border-left-color: var(--p-warn); }
.p-alert.warn h2 { color: var(--p-warn); }
.p-alert.warn p { color: #6b3f10; }

/* ---------- documents ---------- */
/* A file to download, given the weight of a card so it is not read as one
   more sentence of the paragraph above it. */
.p-doclink { display: flex; align-items: center; gap: 12px; margin-top: 12px;
             padding: 12px 14px; border: 1px solid var(--p-line);
             border-left: 3px solid var(--p-red); border-radius: 6px;
             background: var(--p-surface); text-decoration: none; }
.p-doclink:hover { border-color: #f3c2c4; background: var(--p-red-soft); }
/* Brand red on white is 4.1:1 - enough for the rule and the border, short of
   the 4.5:1 small text needs, so the two letters are darker than the box. */
.p-doclink-ico { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em;
                 color: #a3161b; border: 1.5px solid var(--p-red); border-radius: 4px;
                 padding: 4px 6px; }
.p-doclink-text { display: flex; flex-direction: column; min-width: 0; }
.p-doclink-text .t { font-size: 14px; font-weight: 600; color: var(--p-blue); }
.p-doclink-text .m { font-size: 12px; color: var(--p-body); margin-top: 2px; }

.doc-name { font-weight: 500; }
.doc-file { font-size: 12.5px; color: var(--p-body); }
.doc-file a { color: var(--p-blue); text-decoration: none; font-weight: 500; }
.doc-file a:hover { text-decoration: underline; }
.doc-reason { font-size: 12.5px; color: #a3161b; margin-top: 4px; max-width: 46ch; }
/* What the document is: its Document Type's description, beside the upload. */
.doc-hint { font-size: 12.5px; font-weight: 400; color: var(--p-body); margin-top: 4px; max-width: 46ch; }
.doc-confirm { display: block; margin-top: 6px; }

/* ---------- replacing a rejected document ---------- */
.doc-replace {
  margin-top: 9px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.doc-input {
  font-size: 12.5px; max-width: 230px;
}
.doc-input::file-selector-button {
  font-size: 12.5px; padding: 5px 10px; margin-right: 8px; cursor: pointer;
  border: 1px solid var(--p-line); border-radius: 5px; background: #fff; color: var(--p-ink);
}
.doc-input::file-selector-button:hover { border-color: #b9bcd0; }
.doc-msg { font-size: 12.5px; color: var(--p-body); }
.doc-msg.ok   { color: var(--p-ok); font-weight: 600; }
.doc-msg.bad  { color: #a3161b; font-weight: 600; }
.doc-msg.warn { color: var(--p-warn); font-weight: 600; }
button.btn-p:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- wizard ---------- */
.wz { display: grid; grid-template-columns: 236px 1fr; gap: 0;
      background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 6px; overflow: hidden; }
.wz-rail { background: #f7f8fc; border-right: 1px solid var(--p-line); padding: 14px 0; }
.wz-step { display: flex; align-items: center; gap: 10px; padding: 9px 18px;
           font-size: 13.5px; color: var(--p-body); text-decoration: none; }
.wz-step i { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid #c9ccdd;
             display: inline-flex; align-items: center; justify-content: center;
             font-size: 11px; font-weight: 700; font-style: normal; flex: 0 0 21px; }
.wz-step:hover { color: var(--p-ink); }
.wz-step.done { color: var(--p-ink); }
/* A step reopened at the answer that re-rendered it (#w-<field>): keep its
   label and the line above it in view. */
#wz-step [id^="w-"] { scroll-margin-top: 5rem; }
.wz-step.done i { background: var(--p-ok); border-color: var(--p-ok); color: #fff; }
/* Passed, but something on it is still unanswered. */
.wz-step.todo { color: var(--p-warn); }

.wz-step.todo i { border-color: var(--p-warn); color: var(--p-warn);
                  background: var(--p-warn-soft); }

.wz-step.now { color: var(--p-ink); font-weight: 700; background: var(--p-surface); }
.wz-step.now i { border-color: var(--p-blue); color: var(--p-blue); border-width: 2px; }

.wz-main { padding: 22px 26px 24px; min-width: 0; }
.wz-title { font-size: 19px; font-weight: 700; margin: 0 0 3px; }
.wz-hint { font-size: 13.5px; color: var(--p-body); margin: 0 0 20px; }
.wz-subhead { font-size: 15px; font-weight: 700; margin: 28px 0 10px; }

.wz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.wz-f { min-width: 0; }

/* Label, control and help text each get their own row of the parent grid, so
   the two questions side by side line up on their controls however many lines
   their labels take. Without it a label that wraps - and the doctype has a few
   long ones - drops its control below its neighbour's. The label sits at the
   foot of its row so a short one stays next to the control it names. */
@supports (grid-template-rows: subgrid) {
  .wz-f { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  .wz-f > label { align-self: end; }
  .wz-f > .wz-help { align-self: start; }
}
.wz-f.wide { grid-column: 1 / -1; }
.wz-f label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #43455a; }
.wz-f label i { color: var(--p-red-strong); font-style: normal; }
.wz-f input[type=text], .wz-f input[type=number], .wz-f input[type=date],
.wz-f select, .wz-f textarea {
  width: 100%; border: 1px solid var(--p-line); border-radius: 6px;
  background: #fff; padding: 9px 11px; font-size: 14px; color: var(--p-ink);
  font-family: inherit; -webkit-appearance: none; appearance: none;
}
.wz-f select { background-image: linear-gradient(45deg, transparent 50%, #8c8fa3 50%), linear-gradient(135deg, #8c8fa3 50%, transparent 50%);
               background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
               background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.wz-f textarea { resize: vertical; min-height: 68px; }
.wz-f input:focus, .wz-f select:focus, .wz-f textarea:focus {
  outline: none; border-color: var(--p-blue); box-shadow: 0 0 0 3px rgba(62,64,149,.13);
}
/* A required answer that is still missing. Amber, matching the ! on the step
   rail, so the mark on the field and the mark on the step read as the same
   thing rather than two different warnings. */
.wz-f.miss input, .wz-f.miss select, .wz-f.miss textarea {
  border-color: var(--p-warn); background: var(--p-warn-soft); }

.wz-f.miss > label { color: var(--p-warn); }

.wz-miss { font-size: 12px; font-weight: 600; color: var(--p-warn); margin-top: 4px; }

/* The one-tick shortcut above a group that is always answered together. */
.wz-checkall { font-weight: 700 !important; padding: 11px 13px; margin: 0 0 14px;
  background: var(--p-blue-soft); border: 1px solid #cfd0ea; border-radius: 6px; }

.wz-check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500 !important; }
.wz-check input { width: 16px; height: 16px; }
.wz-help { font-size: 12px; color: var(--p-body); margin-top: 4px; }

.wz-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px;
           margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--p-line); }

/* The same actions at the top of a step, so a long one need not be scrolled
   to the foot to be saved or sent. Quieter than the foot - small buttons and
   no rule above - so the foot still reads as the end of the step. */
.wz-top { display: flex; justify-content: space-between; align-items: center; gap: 10px;
          margin: 0 0 16px; }

/* Documents on the read-only view of a sent application. */
.wz-sent-docs { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.wz-sent-docs li { display: flex; justify-content: space-between; gap: 12px;
                   padding: 6px 0; border-top: 1px solid var(--p-line); }
.wz-sent-docs li:first-child { border-top: 0; }
.wz-sent-docs a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }

.wz-sum { border: 1px solid var(--p-line); border-radius: 6px; padding: 15px 17px; margin-bottom: 12px; }
.wz-sum-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.wz-sum-head h3 { font-size: 14.5px; font-weight: 700; margin: 0; }

@media (max-width: 860px) {
  .wz { grid-template-columns: 1fr; }
  .wz-rail { border-right: none; border-bottom: 1px solid var(--p-line);
             display: flex; flex-wrap: wrap; gap: 2px; padding: 10px; }
  .wz-step { padding: 6px 10px; font-size: 12.5px; }
  .wz-step span { display: none; }
  .wz-step.now span { display: inline; }
  .wz-grid { grid-template-columns: 1fr; }
}

/* ---------- quoted correspondence ---------- */
.rfi-quote {
  background: #f7f8fc; border: 1px solid var(--p-line); border-left: 3px solid var(--p-blue);
  border-radius: 4px; padding: 12px 14px; font-size: 14.5px; line-height: 1.55;
  color: var(--p-ink); white-space: pre-wrap;
}

/* The file, what it is, and Attach on one row; wraps on a phone. Labels line
   up along the top - the file picker is shorter than the text box - and
   Attach sits on the boxes' bottom line. */
.rfi-attach { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
.rfi-attach .wz-f { flex: 1 1 220px; }
.rfi-attach > .btn-p { align-self: flex-end; }

/* ---------- empty state ---------- */
.p-empty { background: var(--p-surface); border: 1px dashed var(--p-line); border-radius: 6px; padding: 34px 22px; text-align: center; }
.p-empty h2 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.p-empty p { font-size: 14px; color: var(--p-body); margin: 0 0 14px; }

.p-note { font-size: 12.5px; color: var(--p-body); margin-top: 10px; }

/* ---------- footer ---------- */
/* the answers on the application page, folded per step */
.p-ans { border: 0; border-top: 1px solid var(--p-line); border-radius: 0; margin: 0; }
.p-ans .p-acc-body { padding: 4px 19px 16px; }
.p-ans .p-kv { margin: 0; }
.doc-rejected td { background: #fff7f7; }
.doc-act { white-space: nowrap; }
.doc-act .doc-msg { display: block; margin-top: 6px; white-space: normal; }
.doc-pick { cursor: pointer; }
tr:target td { background: #fff3cd; }   /* the row a "Go to the document" link lands on */

/* the map on the site step */
.wz-map { height: 420px; border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-ground); }
.wz-map-msg { font-size: 12.5px; color: var(--p-body); margin: 8px 0 0; }
.wz-map-search { position: relative; display: flex; gap: 8px; margin-bottom: 8px; }
.wz-map-q { flex: 1 1 auto; height: 40px; padding: 0 12px; border: 1px solid var(--p-line); border-radius: 6px; font: inherit; font-size: 14px; }
.wz-map-q:focus { outline: 2px solid var(--p-blue); outline-offset: -1px; }
.wz-map-results { position: absolute; z-index: 1001; top: 44px; left: 0; right: 0; list-style: none; margin: 0; padding: 4px 0;
                  background: #fff; border: 1px solid var(--p-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.wz-map-results button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none;
                         font: inherit; font-size: 13.5px; cursor: pointer; }
.wz-map-results button:hover { background: var(--p-blue-soft); }
.wz-map-note { padding: 10px 12px; font-size: 13px; color: var(--p-body); }
.leaflet-container { font: inherit; }
/* the locate button's icon: this Locate build expects an icon-font class, so draw our own */
.wz-locate-icon { display: block; width: 100%; height: 100%; background: no-repeat center / 16px 16px
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3'/><circle cx='12' cy='12' r='8'/></svg>"); }
.wz-locate-icon.loading { opacity: .5; }
@media (max-width: 640px) { .wz-map { height: 340px; } }
.wz-notes:empty { display: none; }
/* a notice inside a step: what applies and why, with the paper to read */
.wz-note { background: var(--p-warn-soft); border: 1px solid #e7cfa8; border-left: 4px solid var(--p-warn);
           border-radius: 6px; padding: 12px 14px; }
.wz-note p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #5a3a0f; }
.wz-f > label[for="w-high_rise_requirements_link"] { color: #7a4410; }

/* the bell */
.p-bell { position: relative; display: inline-flex; align-items: center; justify-content: center;
          width: 40px; height: 40px; border-radius: 50%; color: var(--p-blue) !important; text-decoration: none !important; }
.p-bell:hover, .p-bell.on { background: var(--p-blue-soft); }
.p-bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.p-bell b { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
            background: var(--p-red-strong); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
            border: 2px solid #fff; box-sizing: content-box; }
.p-notices { list-style: none; margin: 0; padding: 0; }
.p-notice { border-top: 1px solid var(--p-line); }
.p-notice:first-child { border-top: 0; }
.p-notice a { display: grid; gap: 3px; padding: 14px 19px; color: var(--p-ink); text-decoration: none !important; border-left: 4px solid transparent; }
.p-notice a:hover { background: #fafbff; }
.p-notice.new a { background: #fffdf5; }
.p-notice.ok a { border-left-color: var(--p-ok); }
.p-notice.warn a { border-left-color: var(--p-warn); }
.p-notice.bad a { border-left-color: var(--p-red); }
.p-notice.blue a { border-left-color: var(--p-blue); }
.p-notice.grey a { border-left-color: var(--p-line); }
.p-notice-when { font-size: 12px; color: var(--p-body); }
.p-notice-title { font-size: 15px; font-weight: 600; }
.p-notice.important .p-notice-title { font-size: 16px; font-weight: 700; }
.p-notice-text { font-size: 14px; color: var(--p-body); }
.p-notice-ref { font-size: 12.5px; color: var(--p-blue); font-weight: 600; margin-top: 2px; }
.p-ans-change { color: var(--p-blue); font-weight: 600; }

/* How to pay - see the how_to_pay macro in portal_tools.html */
.p-pay h3 { font-size: 14.5px; margin: 16px 0 8px; }
.p-pay-total { font-size: 17px; margin: 0 0 6px; }
.p-pay-total strong { font-size: 22px; }
.p-pay-lines { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13.5px; color: var(--p-body); }
.p-pay-lines li { display: flex; justify-content: space-between; gap: 12px; max-width: 360px; }
.p-pay-ways { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.p-pay-ways li { line-height: 1.5; }
.p-pay-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px;
              background: #fff; padding: 1px 7px; border-radius: 4px; border: 1px solid #e0b4b4; }
.p-pay-after { margin: 14px 0 0; padding: 10px 12px; background: #fff; border-radius: 6px; line-height: 1.5; }
.p-pay-note { margin: 10px 0 0; font-size: 13px; color: var(--p-body); }
.p-pay .btn-p { margin-top: 4px; }
.p-pay a:not(.btn-p) { color: var(--p-blue); text-decoration: underline; font-weight: 600; }

.p-foot { border-top: 1px solid var(--p-line); margin-top: 40px; padding-top: 16px; font-size: 12.5px; color: var(--p-body);
          display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
/* The file has a wide empty border, as on the front page: drawn larger and
   pulled back in by the margin so the credit itself is readable. */
.p-foot-powered { display: block; margin: -12px 0; }
.p-foot-powered img { display: block; height: 60px; width: auto; }

@media (max-width: 860px) {
  .p-grid { grid-template-columns: 1fr; }
  /* A grid item's minimum width is its content's natural width unless told
     otherwise, so the documents table (a scroll box, but still 500px of
     min-content) was pushing the whole column past the edge of a phone. */
  .p-grid > * { min-width: 0; }
  .p-stages { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .p-stage::after { display: none; }
  .p-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .p-kv dt { font-size: 12px; margin-top: 6px; }
  .p-pay-after, .p-foot, .p-kv dd { overflow-wrap: anywhere; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  /* The nav wrapped into three rows and stood 230px tall. Now: the brand and
     Sign out on one row; the links on a second that scrolls sideways rather
     than wrapping, with the current page underlined as before. */
  .p-mast-in { gap: 0 10px; padding-block: 8px; min-height: 0; }
  .p-brand { flex: 1 1 auto; gap: 10px; min-width: 0; }
  .p-crests { gap: 8px; }
  .p-crests img { height: 38px; }
  .p-crest-rule { height: 32px; }
  .p-wordmark strong { font-size: 17px; }
  .p-wordmark small { display: none; }
  .p-flagline { margin-top: 4px; }
  .p-me { width: auto; margin-left: auto; gap: 8px; }
  .p-me > span { display: none; }                /* the name is on the Home heading */
  .p-me button { min-height: 40px; padding-inline: 10px; }
  .p-nav .p-nav-in { padding-block: 0; min-height: 0; }
  .p-links { width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 4px;
             -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .p-links::-webkit-scrollbar { display: none; }
  .p-links a { padding: 12px 10px 10px; white-space: nowrap; font-size: 14px; }
  /* Fingers, not pointers: nothing a thumb aims at is under 40px tall. */
  .btn-p.sm { min-height: 40px; display: inline-flex; align-items: center; font-size: 13.5px; }
  .p-table td a.id { display: inline-block; padding: 10px 0; }
  .p-back { display: inline-block; padding: 8px 0; }
  .wz-step { min-height: 40px; display: flex; align-items: center; }
  /* iPhones zoom into any field whose text is under 16px, and stay zoomed. */
  .p-tools input[type=search], .p-tools select,
  .wz-f input, .wz-f select, .wz-f textarea { font-size: 16px; }
  .wz-f input[type=checkbox], .wz-f input[type=radio] { width: 22px; height: 22px; }
  .p-head-act { flex-direction: column; align-items: stretch; }
  .p-head-act > .btn-p { text-align: center; }

  /* Lists: a six-column table on a phone scrolls sideways, with the status
     and the button out of sight past the edge. Each row becomes a card
     instead - number, title, status, and the button across the bottom -
     with the same markup, so every list page gets it. Cells are stacked in
     source order; the header row goes, since a card needs no column heads. */
  table.p-table thead { display: none; }
  table.p-table, table.p-table tbody, table.p-table tr, table.p-table td { display: block; }
  table.p-table tr { padding: 12px 15px 14px; border-top: 1px solid var(--p-line); }
  table.p-table tr:first-child { border-top: 0; }
  table.p-table td { padding: 3px 0; border: 0; }
  table.p-table td:empty { display: none; }
  table.p-table td a.id { font-size: 16px; padding: 4px 0; }
  table.p-table td[style*="text-align:right"] { text-align: left !important; padding-top: 10px; }
  table.p-table td[style*="text-align:right"] .btn-p { width: 100%; justify-content: center; }
  table.p-table tr:hover td { background: transparent; }
  /* the accordion on the permits page keeps its rows, which were built as rows */
  .p-acc table.p-table thead { display: table-header-group; }
  .p-acc table.p-table, .p-acc table.p-table tbody { display: table; width: 100%; }
  .p-acc table.p-table tr { display: table-row; padding: 0; }
  .p-acc table.p-table td { display: table-cell; padding: 10px 12px; border-top: 1px solid var(--p-line); }
}