/* The fictional City of Acme website.  Loaded after app.css, whose component
   classes (panel, card, btn, notice, type-cards, field...) the applicant
   portal pages still use; the tokens below re-skin them in the civic palette.
   System fonts only, no external assets. */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef1f5; --line: #d5dce4; --line-soft: #e6eaef;
  --fg: #17222e; --fg-2: #44525f; --fg-3: #66737f;
  --accent: #1a5fa0; --accent-fg: #ffffff; --accent-soft: #e4eef8;
  /* The state colours of the City website are the light ones of the shared
     tokens, named here as well: the City frame never follows the dark
     theme, so a state colour must not depend on the theme of the staff
     frame. */
  --ok: #1d7a4c; --ok-soft: #e1f3e9;
  --warn: #a5650b; --warn-soft: #fbf0dc;
  --bad: #b3372f; --bad-soft: #fbe6e3;
  --info: #5b4fbf; --info-soft: #ecebfb;
  --muse: #7a3fb8; --muse-soft: #f1e8fb;
  --city-navy: #12304f; --city-navy-2: #0c2239; --city-gold: #f0b323;
  /* The City website has no sticky top bar, so a bar of the City frame
     sticks at the top of the page. */
  --top-bar-h: 0px;
  --f-display: Georgia, "Times New Roman", serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.city { font: 16px/1.55 var(--f-body); height: auto; min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); }
.city h1 { font-family: var(--f-display); font-size: 2rem; font-weight: 700; color: var(--city-navy); margin: 0 0 .5rem; }
.city h2 { font-family: var(--f-display); font-size: 1.3rem; color: var(--city-navy); margin: 0 0 .6rem; }
.city h3 { font-size: 1rem; }
.city .muted { font-size: .92rem; }
.city a { color: var(--accent); }
.city .skip-link { position: absolute; left: -999px; z-index: 100; background: #fff; }
.city .skip-link:focus { left: .5rem; top: .5rem; }
.city-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.city-demo { background: #fff6d6; color: #4a3b00; border-bottom: 1px solid #e8d48a; font-size: .78rem; line-height: 1.3; padding: 3px 16px; text-align: center; }
.city-header { background: var(--city-navy); color: #fff; }
.city-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.city-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.city-brand:focus-visible, .city-nav a:focus-visible { outline: 3px solid var(--city-gold); outline-offset: 2px; }
.city-mark { width: 44px; height: 44px; color: var(--city-gold); flex: none; }
.city-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.city-wordmark b { font: 700 1.6rem var(--f-display); letter-spacing: .01em; }
.city-wordmark small { font-size: .7rem; opacity: .85; letter-spacing: normal; margin-top: 3px; }
.city-hours { margin: 0; font-size: .9rem; opacity: .9; white-space: nowrap; }
.city-nav { background: var(--city-navy-2); border-top: 1px solid rgba(255,255,255,.12); }
.city-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.city-nav a { display: block; padding: 11px 12px; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent; }
.city-nav a:hover { background: rgba(255,255,255,.08); }
.city-nav a[aria-current="page"] { border-bottom-color: var(--city-gold); background: rgba(255,255,255,.1); }

/* The breadcrumb of the City website.  The trail itself is the shared one of
   ui-patterns.css; the frame writes its own separator. */
.city-crumbs { padding: 12px 0 4px; font-size: .88rem; color: var(--fg-2); min-width: 0; --crumb-sep: "\203A"; }

/* app.css gives main a flex column, 22px padding and a 1320px cap. */
.city .city-main { flex: 1 0 auto; max-width: 1120px; padding: 8px 16px 48px; gap: 18px; }
.city .city-main .page-head h1 { font-size: 1.9rem; }
.city .city-main > .city-hero, .city .city-main > .city-wrap { padding-left: 0; padding-right: 0; }

.city-hero { background: linear-gradient(135deg, var(--city-navy) 0%, #1e5388 100%); color: #fff; border-radius: 12px; padding: 22px 28px; }
.city-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.city-hero .city-wrap { max-width: 1120px; }
.city .city-hero h1 { color: #fff; font-size: 1.9rem; margin-bottom: .25rem; }
.city-hero p { max-width: 54ch; font-size: 1.02rem; margin: 0; }
.city-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--city-gold); color: #1a1200 !important; font: 700 1rem var(--f-body); padding: 12px 20px; border-radius: 8px; border: 0; text-decoration: none; cursor: pointer; }
.city-cta:hover { background: #f7c548; }
.city-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--city-navy); }
.city-cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.city-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; padding: 0; margin-top: 8px; }
.city-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.city-tile { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--fg) !important; box-shadow: 0 1px 2px rgba(18,48,79,.06); }
.city-tile:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(18,48,79,.12); }
.city-tile svg { width: 34px; height: 34px; color: var(--accent); }
.city-tile strong { font: 700 1.1rem var(--f-display); color: var(--city-navy); }
.city-tile span { color: var(--fg-2); font-size: .92rem; }
.city-tile-main { border-color: var(--city-gold); border-width: 2px; background: #fffaf0; }

.city-page { padding-top: 8px; }
.city-lede { font-size: 1.1rem; color: var(--fg-2); max-width: 62ch; }
.city-page article section { margin-top: 22px; }
.city-page article ul { padding-left: 1.2rem; }
.city-page article li { margin: 4px 0; }
.city-aside { align-self: start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--city-gold); border-radius: 8px; padding: 16px; }
.city-aside h2 { font-size: 1.1rem; }
.city-entry { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; max-width: 640px; }

.city-footer { background: var(--city-navy); color: #dbe5ef; margin-top: 24px; padding: 22px 0 90px; font-size: .9rem; }
.city-footer-note { margin: 0 0 6px; max-width: 80ch; font-size: .82rem; color: #c3d1df; }
.city-footer a { color: #fff; }
.city-footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.city-footer-name { font: 700 1.05rem var(--f-display); color: #fff; margin: 0 0 6px; }
.city-footer ul { list-style: none; margin: 0; padding: 0; }
.city-footer li { margin: 3px 0; }
/* The links of the footer are a list with space between them, not one line
   of words joined by dots. */
.city-footer ul.city-footer-links {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px;
  margin: 0 0 8px; padding: 0; font-size: 1rem; list-style: none;
}
.city-footer ul.city-footer-links li { margin: 0; }

/* Portal components inside the city frame. */
.city .panel, .city .card { border-radius: 8px; }
.city .btn.primary, .city button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.city .type-card:hover, .city .type-card:focus-visible { border-color: var(--accent); }
.city-main .page-head { margin-top: 4px; }

@media (max-width: 760px) {
  .city h1 { font-size: 1.6rem; }
  .city .city-hero h1 { font-size: 1.5rem; }
  .city-hours { display: none; }
  .city-wordmark b { font-size: 1.3rem; }
  .city-nav a { padding: 9px 9px; font-size: .88rem; }
  .city-two { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .city-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .city .city-main { padding: 4px 16px 40px; }
  .city-hero { padding: 18px 16px; }
}
@media print { .city-nav, .city-demo, .city-toast { display: none; } }

/* Permits in my community */
.city-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 16px 0; }
.city-facts dt { font-weight: 700; }
.city-facts dd { margin: 0; }
@media (max-width: 640px) { .city-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .city-facts dd { margin-bottom: 10px; } }


/* ================= Applicant chrome and screens (Randall, 2026-10-28) ================= */
:root {
  --city-gold-text: #6b4a00;
  --amber-bg: #fff4d6; --amber-line: #e0b24a; --amber-fg: #5c3f00;
}

/* The demo persona menu in the navy header: the shared chip of app.css, fitted
   to the City header. */
.city-header-tools .account-trigger { padding: 6px 12px; font-size: .92rem; border-color: rgba(255,255,255,.35); }
.city-header-tools .account-trigger:focus-visible { outline: 3px solid var(--city-gold); outline-offset: 2px; }
.city-header-tools .account-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-header-tools .account-panel { color: var(--fg); max-width: calc(100% - 32px); }

/* The way back from a page that stands alone (the rate-limited page).  It is
   not part of the printed page. */
.back-to-app { margin-top: 1.2rem; font-size: .9rem; }
@media print { .back-to-app { display: none; } }

/* Gold primary button used on the applicant screens. */
.city .btn.gold, .city a.btn.gold { background: var(--city-gold); border-color: var(--city-gold); color: #1a1200; font-weight: 700; text-decoration: none; }
.city .btn.gold:hover { background: #f7c548; filter: none; }
/* A button of the City frame that cannot be used now: a fill of its own and
   ink that still reads, not a faded copy of a live button. */
.city .btn[disabled], .city .button[disabled], .city .city-cta[disabled] {
  background: var(--surface-2); border-color: var(--line); color: var(--fg-2);
  cursor: not-allowed; opacity: 1;
}
.city .btn.primary, .city a.btn.primary { text-decoration: none; }
.city .btn { text-decoration: none; }
/* The quiet button of the City frame: a link that carries the quiet class
   keeps the quiet ink of the button it looks like. */
.city a.button-quiet { color: var(--fg-2); }
.city .btn:focus-visible, .city a:focus-visible, .city button:focus-visible, .city summary:focus-visible, .city input:focus-visible, .city select:focus-visible, .city textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.city-cta-quiet { background: #fff; color: var(--city-navy) !important; border: 2px solid var(--city-navy); }
.city-cta-quiet:hover { background: var(--accent-soft); }

/* Toasts: top-right, under the header. */
.city .toast.city-toast { top: 148px; right: 16px; left: auto; max-width: min(420px, calc(100vw - 32px)); z-index: var(--z-city-toast); animation: city-toast-out .3s ease 9s forwards; }
@keyframes city-toast-out { to { opacity: 0; visibility: hidden; transform: translateY(-12px); } }
@media (max-width: 760px) { .city .toast.city-toast { top: 164px; right: 16px; } }
@media (max-width: 640px) {
  /* On a phone the tools of the City header move to a row of their own, so
     the header is taller and the toast sits below it. */
  .city .toast.city-toast { top: 176px; }
}

/* U2 Permits entry */
.city-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 4px; }
.city-go { margin: 0; }
.city-entry-main { border-color: var(--city-gold); border-width: 2px; background: #fffaf0; }
.city-need { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.city-need li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--city-gold); }
.city-need span { color: var(--fg-2); font-size: .94rem; }
.city-page .page-head { margin-bottom: 4px; }

/* U3 Chooser */
.chooser-main, .tracker-main { display: grid; gap: 14px; min-width: 0; }
/* Every group of permit types carries its own accent, so the applicant can
   see at a glance where one group ends and the next begins. */
.chooser-group { border-top: 3px solid var(--accent); }
.chooser-group[data-group="home_property"] { border-top-color: var(--city-navy); }
.chooser-group[data-group="business_construction"] { border-top-color: var(--accent); }
.chooser-group[data-group="planning_land_use"] { border-top-color: var(--city-gold); }
.chooser-group[data-group="other"] { border-top-color: var(--fg-3); }
.chooser-group h2 { margin-bottom: 10px; }
.type-cards.compact { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.city .type-card { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
.type-text { display: grid; gap: 2px; min-width: 0; }
.type-text strong { color: var(--city-navy); }
.type-ic-wrap { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--line); overflow: hidden; }
.type-ic-wrap .type-ic { width: 48px; height: 48px; border-radius: 0; }
.type-ic-fallback { width: 28px; height: 28px; stroke: var(--accent); fill: none; }
.more-types { margin-top: 10px; }
.more-types > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 6px 0; }
.more-types[open] > summary { margin-bottom: 8px; }
.chooser-head .actions { align-items: center; }
.chooser-note { margin: 16px 0 0; font-size: .88rem; }

/* U4 Form */
.form-kicker { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.form-kicker .type-ic-wrap { width: 40px; height: 40px; }
.form-kicker .type-ic-wrap .type-ic { width: 40px; height: 40px; }
.portal-form .form-section { margin: 0 0 14px; padding: 14px 16px 16px; min-width: 0; }
.portal-form .form-section > legend { font: 700 1.15rem var(--f-display); color: var(--city-navy); padding: 0 8px; display: flex; align-items: center; gap: 8px; }
.section-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--city-navy); color: #fff; font: 700 .8rem var(--f-body); }
.portal-form .field { max-width: 560px; margin: 0 0 12px; }
.portal-form .field > label, .choice-label { font-weight: 600; }
.portal-form input[type=text], .portal-form input[type=email], .portal-form input:not([type]), .portal-form select, .portal-form textarea { max-width: 100%; }
.num-wrap { display: inline-flex; align-items: center; gap: 8px; }
.portal-form input.num { width: 9ch; min-width: 7ch; text-align: right; }
.unit { color: var(--fg-2); font-weight: 600; }
.field-hint { color: var(--fg-2); font-size: .86rem; display: block; }
.sample-address { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.sample-address-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sample-address-list[hidden] { display: none; }
.choice-options { display: flex; gap: 10px 12px; flex-wrap: wrap; margin-top: 4px; }
.choice-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; background: var(--surface); }
.choice-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.when-group { border-left: 3px solid var(--line); padding-left: 12px; margin: 8px 0 12px; }
.when-title { margin: 0 0 8px; font-size: 1rem; color: var(--city-navy); }
.when-group.is-inactive { opacity: .85; }
html.ui-js .when-group.is-inactive, .when-group[hidden] { display: none; }
.doc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border-style: solid; background: var(--surface); }
.doc-main { display: grid; gap: 2px; }
.doc-label { font-weight: 700; }
.doc-purpose { font-size: .88rem; }
.doc-status-line { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.doc-file { overflow-wrap: anywhere; }
.drop-zone { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.drop-zone input[type=file] { max-width: 100%; }
.doc-pick { font-weight: 600; font-size: .9rem; }
.sent-separately { font-size: .92rem; }
/* The actions of the application form: one row of controls that share one
   height.  The submit stays the primary action.  Save draft and the change
   of project are the quiet buttons.  On a phone the row wraps; a control
   does not. */
.portal-form .form-buttons {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.portal-form .form-buttons > .btn,
.portal-form .form-buttons > .button {
  height: 40px; min-height: 40px; padding: 0 14px; line-height: 1;
  align-items: center; justify-content: center; flex: 0 0 auto;
  text-decoration: none; white-space: nowrap;
}
.portal-form .form-buttons > .button-quiet {
  background: var(--surface); color: var(--fg-2); border-color: var(--line);
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The "Why submit now" block of a held application.  The reason is a field of
   the form like any other, with its label above it.  "Submit anyway" is the
   quiet button of the action row, beside the reason that says why it is off:
   the disabled state is read from the words, not from a faded button alone. */
.portal-form .hold-why { margin: 0 0 10px; font-size: .88rem; color: var(--fg-2); }
.portal-form .override-field { margin: 0 0 12px; }
.portal-form .override-field .field { margin: 0; }
.portal-form .override-field[hidden] { display: none; }
.portal-form .submit-anyway { flex: 0 0 auto; }
.portal-form .submit-anyway[hidden] { display: none; }
.portal-form .submit-anyway { transition: none; /* the fill changes at once when the reason is typed */ }
.portal-form .submit-anyway[disabled] { opacity: .6; border-color: var(--line); }
.portal-form .submit-anyway-why { color: var(--fg-2); font-size: .85rem; }
.portal-form .submit-anyway-why[hidden] { display: none; }
.portal-form .form-button-hints { display: grid; gap: 4px; margin-top: 6px; }
.portal-form .check-application-hint { max-width: 28rem; }
.portal-form .form-buttons { align-items: center; }

/* U5 Receipt */
.receipt .ref.big { font: 700 2rem var(--f-display); color: var(--city-navy); margin: 0 0 8px; letter-spacing: .02em; overflow-wrap: anywhere; }
.receipt-ref-label { margin: 0; color: var(--fg-2); font-weight: 600; }
.receipt-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 14px 0; }
.receipt-facts dt { font-weight: 700; }
.receipt-facts dd { margin: 0; }
.receipt-next { border-left: 4px solid var(--city-gold); padding: 4px 0 4px 14px; margin: 12px 0; }
.receipt-next h2 { font-size: 1.05rem; margin: 0 0 4px; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* U6 My permits */
.tracker-head .actions { align-items: center; }
/* The next step of the case, and the disclosures of the applicant screens. */
.card-next { border-left: 4px solid var(--city-gold); padding: 4px 0 4px 14px; margin: 0 0 8px; }
.card-next h3 { font-size: 1.05rem; margin: 0 0 4px; }
.detail-more > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.doc-more > summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: .9rem; }
.activity > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.tracker-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.tracker-tabs a { display: block; padding: 10px 16px; text-decoration: none; font-weight: 600; color: var(--fg-2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tracker-tabs a[aria-current="page"] { color: var(--city-navy); border-bottom-color: var(--city-gold); }
.tracker-tabs a:hover { background: var(--accent-soft); }
.tab-count { font-weight: 400; }
.permit-list { display: grid; gap: 14px; }
.permit-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: grid; gap: 12px; box-shadow: 0 1px 2px rgba(18,48,79,.06); min-width: 0; }
.tracked .permit-card { border: 0; box-shadow: none; padding: 0; }
.permit-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.permit-id { display: grid; gap: 3px; min-width: 0; }
.permit-title { margin: 0; font-size: 1.2rem; }
.permit-addr { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--fg-2); }
.permit-addr .pin { width: 16px; height: 16px; flex: none; }
.permit-ref { margin: 0; color: var(--fg-2); font-size: .92rem; overflow-wrap: anywhere; }
.permit-badge { margin: 0; display: inline-flex; align-items: center; }
.badge { display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; height: 20px; padding: 0 8px; border-radius: 99px; font-weight: 600; font-size: .7rem; line-height: 1; border: 1px solid transparent; white-space: nowrap; overflow-wrap: normal; }
.badge-warn { background: var(--amber-bg); color: var(--amber-fg); border-color: var(--amber-line); }
.badge-ok { background: #e1f3e9; color: #14603a; border-color: #8fcaa8; }
.badge-info { background: #e4eef8; color: #12457a; border-color: #9cbfe0; }
.badge-bad { background: #fbe6e3; color: #8c1f17; border-color: #e0a29c; }
.badge-neutral { background: #eef1f5; color: #44525f; border-color: #c8d0d8; }
.request-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--amber-bg); border: 1px solid var(--amber-line); border-left: 6px solid var(--city-gold); border-radius: 10px; padding: 12px 14px; color: var(--amber-fg); }
.request-box p { margin: 2px 0 0; }
.request-box .muted { color: var(--amber-fg); opacity: .85; }
.request-icon { width: 26px; height: 26px; stroke: currentColor; fill: none; }
.request-actions { display: grid; gap: 6px; justify-items: end; }
.request-actions a:not(.btn) { color: var(--amber-fg); font-weight: 600; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.step { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding-top: 2px; }
.step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.step:first-child::before { display: none; }
.step-done::before, .step-current::before { background: var(--accent); }
.step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); font-weight: 700; color: var(--fg-3); }
.step-done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-current .step-dot { border-color: var(--city-gold); background: #fff7e0; color: var(--amber-fg); }
.step-stopped .step-dot { border-color: #b3372f; color: #b3372f; background: #fbe6e3; }
.step-label { font-size: .9rem; font-weight: 600; color: var(--fg-2); }
.step-current .step-label, .step-done .step-label { color: var(--fg); }
.permit-meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.permit-meta div { display: flex; gap: 8px; }
.permit-meta dt { color: var(--fg-2); }
.permit-meta dd { margin: 0; font-weight: 600; }
.permit-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0; }
.back-link { margin: 0; }
.tracked { display: grid; gap: 10px; }
.tracked h3 { margin: 10px 0 2px; }
.detail-more { margin: 0; font-size: .9rem; }
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.activity-list li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; }
.activity-list time { color: var(--fg-2); font-weight: 600; font-size: .9rem; }
.activity-text { display: block; color: var(--fg-2); font-size: .92rem; overflow-wrap: anywhere; }
.empty-state { text-align: center; padding: 32px 20px; }
.empty-state h2 { margin-bottom: 6px; }
.side-card h2 { font-size: 1.05rem; margin-bottom: 6px; }
.side-card p { margin: 0; }
.track-find .field { max-width: 420px; }
.track-row { display: flex; gap: 8px; }
.track-row input { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .request-box { grid-template-columns: auto minmax(0, 1fr); }
  .request-actions { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; gap: 14px; align-items: center; }
  .activity-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .receipt-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .receipt-facts dd { margin-bottom: 8px; }
  .receipt .ref.big { font-size: 1.5rem; }
  .step-label { font-size: .8rem; }
  .city-header-tools .account-name { max-width: 12ch; }
  .city-header-tools .account-trigger { padding: 6px 9px; gap: 6px; }
  /* On a phone the tools of the City header move to a row of their own: the
     chip of the persona then stays in the top right without pushing the page
     sideways, whatever the length of the role. */
  .city-header-row { flex-wrap: wrap; }
  .city-header-tools { margin-left: auto; }
  .type-cards.compact { grid-template-columns: minmax(0, 1fr); }
  .portal-form input.num { width: 8ch; }
}


/* ================= The assistant panel of the applicant ================= */

/* The launcher sits at the corner of the page and opens the panel over the
   page.  The page behind it stays where it is: nothing scrolls, nothing
   navigates, and the fields the applicant typed stay as they were. */
.help-chat-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-help-launcher);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg, #fff);
  font: 600 .95rem var(--f-body); text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 20px rgba(18,48,79,.28);
}
.help-chat-launcher:hover { filter: brightness(1.07); }
.help-chat-launcher:focus-visible { outline: 3px solid var(--city-gold); outline-offset: 2px; }
.help-chat-launcher[hidden] { display: none; }
.help-chat-icon { width: 20px; height: 20px; stroke: currentColor; fill: none; }

/* The panel.  It holds the assistant and nothing else. */
.help-panel-host { display: none; }
.help-panel-host:not([hidden]) { display: block; }
.help-panel-sheet {
  position: fixed; right: 0; bottom: 0; z-index: var(--z-help-sheet);
  box-sizing: border-box; width: min(430px, 100%); max-width: calc(100% - 16px);
  height: min(72vh, 660px);
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-right: 0; border-radius: 12px 12px 0 0;
  box-shadow: 0 -10px 30px rgba(18,48,79,.24);
}
.help-panel-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2, #eef2f5);
  color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer;
}
.help-panel-close:hover { background: var(--accent-soft); }
.help-panel-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.help-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 24px; }
/* Inside the sheet the panel is a plain block: the sheet is its card. */
.help-panel-sheet .help-panel { border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; }
.help-panel-sheet .help-panel h2 { padding-right: 40px; }

/* A phone: the panel is a sheet of the whole width. */
@media (max-width: 640px) {
  .help-panel-sheet { left: 0; right: 0; width: 100%; max-width: 100%; height: 84vh; }
  .help-chat-launcher { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .help-panel-sheet { animation: help-panel-in .18s ease-out; }
  @keyframes help-panel-in { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media print { .help-chat-launcher, .help-panel-sheet { display: none !important; } }