/* Applications wizard - a monochrome form system for the statutory planning
   application forms. Scoped under .appwiz so it never touches intake.css.
   Greys only: black ink, grey lines, white cards. The single exception is
   --alert, the deep brand red reserved for a missing prerequisite. */

/* These are dedicated full-page documents; drop the body's default margin so
   the app's own background fills the viewport (a white frame otherwise shows
   around it, glaring in dark mode). */
body { margin: 0; }

.appwiz {
  --ink: #17181a;
  --ink-2: #45484d;      /* secondary text */
  --ink-3: #71757b;      /* hints, meta */
  --ink-4: #9aa0a6;      /* placeholder, disabled */
  --paper: #f4f4f3;      /* page */
  --card: #ffffff;
  --line: #e4e4e2;       /* hairlines, input borders */
  --line-2: #d3d3d0;     /* stronger borders */
  --fill: #f7f7f6;       /* inset fields / hover */
  --fill-2: #ededeb;
  --focus: #17181a;      /* focus ring = ink */
  --alert: #a93226;      /* the one hue: a missing prerequisite (6.6:1 on card) */

  --r: 8px;              /* card radius */
  --r-sm: 6px;           /* control radius */
  --sp: 0.25rem;         /* spacing unit */
  --shadow: 0 1px 2px rgba(20,22,26,.05), 0 6px 20px rgba(20,22,26,.05);

  color-scheme: light;                 /* never follow OS dark mode */
  accent-color: var(--ink);            /* monochrome native checkboxes/radios */
  color: var(--ink);
  background: var(--paper);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.appwiz *, .appwiz *::before, .appwiz *::after { box-sizing: border-box; }

/* --- masthead ---------------------------------------------------------- */
.appwiz-mast {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.5rem; background: transparent;
  border-bottom: 1px solid var(--line);   /* hairline between breadcrumb and body */
}
.appwiz-crumb { color: var(--ink-3); font-size: .88rem; }
.appwiz-crumb b { color: var(--ink-2); font-weight: 550; }
.appwiz-back { color: var(--ink-2); text-decoration: none; font-weight: 550; }
.appwiz-back:hover { color: var(--ink); }
.appwiz-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.appwiz-crumb-sep { margin: 0 .1rem; color: var(--line-2); }
.appwiz-saved { margin-left: auto; color: var(--ink-3); font-size: .8rem;
  display: inline-flex; align-items: center; gap: .35rem; }
.appwiz-saved::before { content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--ink-3); }

/* --- step bar ---------------------------------------------------------- */
.appwiz-steps {
  display: flex; flex-wrap: wrap; gap: .1rem .3rem; align-items: center;
  justify-content: center;
  padding: .7rem 1.5rem; background: transparent;
  font-size: .82rem;
}
/* Only a reachable step is rendered as a link, so a link must never wear the
   muted look of a step you cannot open yet: Fee and Review are reachable long
   before they are "done", and greyed out they read as broken. Four states, in
   rising strength: unreachable (plain span) < reachable link < done < now.
   The .done/.now rules below are two classes, so they still win over these. */
a.appwiz-step { text-decoration: none; color: var(--ink-3); }
a.appwiz-step .n { color: var(--ink-3); }
a.appwiz-step:hover { color: var(--ink); }
a.appwiz-step:hover .n { border-color: var(--ink); color: var(--ink); }
a.appwiz-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.appwiz-step { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-4);
  padding: .15rem .1rem; }
.appwiz-step .n {
  width: 1.35rem; height: 1.35rem; border-radius: 999px; display: grid; place-items: center;
  border: 1px solid var(--line-2); font-size: .72rem; font-weight: 600; color: var(--ink-4);
}
.appwiz-step.done { color: var(--ink-2); }
.appwiz-step.done .n { border-color: var(--ink); color: var(--ink); }
.appwiz-step.now { color: var(--ink); font-weight: 600; }
.appwiz-step.now .n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.appwiz-step .sep { color: var(--line-2); margin: 0 .1rem; }

/* --- shell: rail + content -------------------------------------------- */
.appwiz-body { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1.5rem 4rem;
  display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 820px) { .appwiz-body { grid-template-columns: 1fr; } }

/* single-column shell (address / other pre-forms steps) */
.appwiz-single { max-width: 720px; margin: 0 auto; padding: 1.6rem 1.5rem 4rem; }
.addr-body { padding: 1.3rem 1.5rem 1.6rem; }
.addr-current { margin: 0 0 1rem; font-size: .88rem; color: var(--ink-3); }
.addr-search { max-width: 34rem; }
.addr-spin { display: none; margin-top: .4rem; font-size: .82rem; color: var(--ink-3); }
.htmx-request.addr-spin, .htmx-request .addr-spin { display: inline-block; }
/* one dropdown list of matching addresses - each row is directly clickable */
.addr-list { list-style: none; margin: .4rem 0 0; padding: .25rem; max-width: 34rem;
  display: grid; gap: 1px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card); box-shadow: var(--shadow); max-height: 19rem; overflow: auto; }
.addr-list form { margin: 0; }
.addr-opt { all: unset; display: block; box-sizing: border-box; width: 100%; cursor: pointer;
  padding: .55rem .7rem; font-size: .9rem; line-height: 1.35; color: var(--ink);
  border-radius: var(--r-sm); }
.addr-opt:hover { background: var(--fill); }
.addr-opt:focus-visible { background: var(--fill); outline: 2px solid var(--focus); outline-offset: -2px; }
.addr-msg { margin: .8rem 0 0; font-size: .88rem; color: var(--ink-3); }

.appwiz-rail { position: sticky; top: 1.2rem; }
.appwiz-rail h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin: 0 0 .6rem .1rem; font-weight: 650; }
.appwiz-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.appwiz-rail button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .5rem .6rem; border-radius: var(--r-sm); font-size: .9rem;
  color: var(--ink-2); border: 1px solid transparent;
}
.appwiz-rail button:hover { background: var(--fill); }
.appwiz-rail button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.appwiz-rail li[aria-current="true"] button {
  border-color: var(--line-2); color: var(--ink); font-weight: 600;
}
/* per-form completion donut (right-aligned): an empty ring until the form is
   completed, then a filled ink ring with a tick. Replaces the old index count
   and the leading ring. */
.appwiz-rail .rail-donut { margin-left: auto; flex: none; width: 18px; height: 18px;
  position: relative; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ink) calc(var(--p, 0) * 1%), var(--line-2) 0); }
.appwiz-rail .rail-donut::after { content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--paper); }
.appwiz-rail .rail-donut svg { position: relative; z-index: 1; width: 9px; height: 9px;
  opacity: 0; stroke: var(--ink); }
.appwiz-rail li.done .rail-donut svg { opacity: 1; }

/* --- form card --------------------------------------------------------- */
.appwiz-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: clip; }
.appwiz-form > header { padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.appwiz-form h1 { font-size: 1.2rem; margin: 0; letter-spacing: -.01em; }
.appwiz-form header p { margin: .3rem 0 0; color: var(--ink-3); font-size: .86rem; max-width: 46ch; }

.fgroup { padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--line); }
.fgroup:last-of-type { border-bottom: 0; }
.fgroup { border: 0; border-bottom: 1px solid var(--line); margin: 0; }
.fgroup:last-of-type { border-bottom: 0; }
.glabel {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; margin: 0 0 .9rem; padding: 0; }
.ghead { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.ghead .glabel { margin: 0; }

/* field row */
.field { display: grid; gap: .3rem; margin-bottom: 1rem; max-width: 34rem; }
.field:last-child { margin-bottom: 0; }
.field > label, .qlabel { font-size: .9rem; font-weight: 550; color: var(--ink); }
.field .req { color: var(--ink); }               /* asterisk stays ink, not red */
.field .opt { color: var(--ink-4); font-weight: 400; font-size: .8rem; }
.field .hint { font-size: .8rem; color: var(--ink-3); }

.appwiz input[type=text], .appwiz input[type=email], .appwiz input[type=tel],
.appwiz input[type=number], .appwiz select, .appwiz textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .55rem .7rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.appwiz textarea { min-height: 5rem; resize: vertical; field-sizing: content; }
.appwiz input::placeholder, .appwiz textarea::placeholder { color: var(--ink-4); }
.appwiz input:focus, .appwiz select:focus, .appwiz textarea:focus {
  outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 2px rgba(23,24,26,.06); }
.appwiz input:user-invalid, .appwiz select:user-invalid, .appwiz textarea:user-invalid {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,24,26,.06); }
.appwiz select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371757b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; padding-right: 2rem; }

/* two-up grid for short fields */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 34rem; }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }
.frow .field { max-width: none; margin-bottom: 1rem; }

/* choice lists (radio / checkbox) */
.choices { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; }
.choices.inline { grid-auto-flow: column; grid-auto-columns: max-content; gap: 1.25rem; }
.choice { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.choice:hover { background: var(--fill); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--fill); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23,24,26,.10); }
.choice input { margin-top: .15rem; }
.choice .ct { font-size: .9rem; }
.choices.inline .choice { padding: .45rem .8rem; }


/* grouped checklist (project type) */
.checklist { display: grid; gap: 1.1rem; }
.checklist .cgroup > .csub { font-size: .82rem; font-weight: 650; color: var(--ink-2);
  margin: 0 0 .5rem; }
.checklist .clist { display: grid; gap: .3rem; }

/* helper "copy from" button */
.copybtn { all: unset; cursor: pointer; font-size: .8rem; font-weight: 550; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 999px; padding: .28rem .7rem; }
.copybtn:hover { background: var(--fill); }
.copybtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* footer actions */
.appwiz-form > footer { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.5rem; background: var(--fill); border-top: 1px solid var(--line); }
.btn { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; font-size: .92rem;
  font-weight: 600; padding: .6rem 1.2rem; border-radius: var(--r-sm); text-align: center; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--card); }
.btn-danger { background: #c0392b; color: #fff; }
.btn-danger:hover { background: #a93226; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* busy state while a section validates against Planda */
.btn-busy { display: none; }
.btn[disabled] { cursor: default; opacity: .75; }
.btn[disabled] .btn-label { display: none; }
.btn[disabled] .btn-busy { display: inline; }

/* per-section validation feedback from Planda */
.result-slot:empty { display: none; }
.result { margin: 0 1.5rem 1.1rem; padding: .8rem 1rem; border-radius: var(--r-sm);
  font-size: .86rem; line-height: 1.45; display: flex; gap: .55rem; align-items: flex-start;
  background: var(--fill); border: 1px solid var(--line-2); color: var(--ink-2); }
.result b { font-weight: 650; color: var(--ink); }
.result p { margin: .25rem 0 0; }
.result ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.result li { margin: .1rem 0; }
.result svg { flex: none; width: 16px; height: 16px; margin-top: .06rem; }
.result-progress { display: inline-block; margin-top: .25rem; color: var(--ink-3); font-size: .8rem; }
.result-ok b { color: var(--ink); }
.result-ok svg { stroke: var(--ink); }

.section-note { padding: .9rem 1.5rem; background: var(--fill); border-bottom: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-3); display: flex; gap: .55rem; }
.section-note svg { flex: none; margin-top: .1rem; }

/* --- applications hub (the entry point) -------------------------------- */
.apphub { max-width: 960px; margin: 0 auto; padding: 2.2rem 1.5rem 4rem; }
.apphub-hero { margin-bottom: 2.2rem; }
.apphub-hero h1 { font-size: 1.7rem; letter-spacing: -.02em; margin: 0 0 .5rem; }
.apphub-hero p { margin: 0; color: var(--ink-3); font-size: .95rem; max-width: 62ch; }
.apphub-sec { margin-bottom: 2.4rem; }
.apphub-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 650; margin: 0 0 .9rem; }
.apphub-muted { margin: 0; color: var(--ink-3); font-size: .9rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.2rem; }

/* continue an application */
.applist { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.appcard { display: flex; align-items: center; gap: 1rem; min-width: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1.1rem;
  box-shadow: var(--shadow); }
.appcard-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.appcard-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appcard-meta { font-size: .82rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appcard-prog { margin-left: auto; font-size: .78rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; border: 1px solid var(--line-2);
  border-radius: 999px; padding: .2rem .6rem; }
.appcard-prog ~ .btn { margin-left: 0; }
.appcard .btn { flex: none; font-size: .84rem; padding: .5rem 1rem; text-decoration: none; }
.appcard-main ~ .btn:not(.appcard-prog ~ .btn) { margin-left: auto; }

/* start-a-new-application entry point (the list page's single CTA) */
.apphub-start { display: flex; align-items: center; gap: 1rem; text-decoration: none;
  color: var(--ink); background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 1rem 1.2rem; box-shadow: var(--shadow); }
.apphub-start:hover { border-color: var(--ink-4); }
.apphub-start:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.apphub-start-plus { flex: none; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--ink); color: var(--card); display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1; }
.apphub-start-body { min-width: 0; }
.apphub-start-body b { display: block; font-weight: 600; }
.apphub-start-sub { display: block; font-size: .84rem; color: var(--ink-3); margin-top: .1rem; }
.apphub-start-go { margin-left: auto; flex: none; color: var(--ink-4); font-size: 1.4rem; }

.apphub-back { display: inline-block; margin-bottom: .8rem; font-size: .85rem;
  color: var(--ink-3); text-decoration: none; }
.apphub-back:hover { color: var(--ink); }
.apphub-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
/* Step 3: the grouped list of supported application types */
.typelist { display: grid; gap: 1.6rem; max-width: 640px; }
.typegroup h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; margin: 0 0 .55rem; }
.typegroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.typegroup a { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  text-decoration: none; color: var(--ink); padding: .7rem .9rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); }
.typegroup a:hover { background: var(--fill); border-color: var(--line-2); }
.typegroup a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tname { font-size: .92rem; font-weight: 500; display: inline-flex; align-items: center; gap: .55rem; }
.tbadge { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650;
  color: var(--paper); background: var(--ink); border-radius: 999px; padding: .12rem .45rem; }
.tmeta { flex: none; display: inline-flex; align-items: center; gap: .7rem;
  font-size: .78rem; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.tmeta .tgo { color: var(--ink-4); font-size: 1.05rem; }

/* Step 3 (Type): the already-chosen type, confirmed rather than re-asked. A dark
   panel - white heading, grey supporting text - against the light page. */
.type-current { max-width: 440px; background: var(--ink);
  border: 1px solid #2d2f34; border-radius: var(--r); padding: 1.2rem 1.4rem; }
.type-current-label { display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600; color: #8b9097; margin-bottom: .5rem; }
.type-current h2 { color: #fff; margin: 0 0 .25rem; font-size: 1.15rem; }
.type-current p { color: #a2a7ae; margin: 0 0 1.1rem; }
/* buttons inverted for the dark panel: light "Continue", ghost "Change type" */
.type-current .btn-primary { background: #fff; color: var(--ink); }
.type-current .btn-primary:hover { background: #e9e9e7; }
.type-current .btn-ghost { border-color: #3a3d43; color: #e6e8ea; }
.type-current .btn-ghost:hover { background: #23252a; }
/* change-type picker: a grouped dropdown of every type + Save/Cancel, side by
   side on one row. Generous gaps between the card, the picker and the Metis
   hand-off so the three read as distinct steps. */
.type-picker { margin-top: 2rem; }
.type-change { max-width: 560px; display: grid; gap: .55rem; }
.type-select-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; }
.type-change-row { display: flex; gap: .6rem; align-items: stretch; }
.type-select { flex: 1; min-width: 0; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .6rem .7rem; cursor: pointer; }
.type-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.type-change-row .btn { flex: none; white-space: nowrap; }
/* "Not sure? Ask Metis" hand-off to the chat dock */
.type-metis { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center;
  gap: .8rem; max-width: 560px; margin-top: 2rem; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.type-metis:hover { border-color: var(--line-2); background: var(--fill); }
.type-metis:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.type-metis-body { display: grid; gap: .1rem; }
.type-metis-body b { font-size: .92rem; font-weight: 600; }
.type-metis-body > span { font-size: .82rem; color: var(--ink-3); }
.type-metis-go { margin-left: auto; color: var(--ink-4); font-size: 1.1rem; }

/* Step 3 "not sure?" guided selection (triage) */
.triage-cta { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 640px;
  text-align: left; cursor: pointer; margin: 0 0 1.5rem; padding: 1rem 1.2rem; font: inherit;
  color: var(--ink); background: var(--fill); border: 1px solid var(--line-2); border-radius: var(--r); }
.triage-cta:hover { background: var(--fill-2); }
.triage-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.triage-cta-body { display: flex; flex-direction: column; gap: .12rem; }
.triage-cta-body b { font-weight: 600; }
.triage-cta-body span { font-size: .88rem; color: var(--ink-3); }
.triage-cta-go { margin-left: auto; flex: none; font-size: 1.4rem; color: var(--ink-4); }

.triage { max-width: 640px; }
.triage-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 1.4rem 1.5rem 1.6rem; }
.triage-back { all: unset; cursor: pointer; font-size: .84rem; color: var(--ink-3); display: inline-block; }
.triage-back:hover { color: var(--ink); }
.triage-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.triage-q { font-size: 1.25rem; letter-spacing: -.01em; margin: .9rem 0 0; text-wrap: balance; }
.triage-help { margin: .5rem 0 0; color: var(--ink-3); font-size: .9rem; }
.triage-opts { display: grid; gap: 6px; margin: 1.2rem 0 1rem; }
.triage-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: .85rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: .95rem; color: var(--ink); }
.triage-opt:hover { background: var(--fill); border-color: var(--ink); }
.triage-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.triage-opt-go { flex: none; color: var(--ink-4); font-size: 1.2rem; }
.triage-exit { all: unset; cursor: pointer; font-size: .84rem; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 2px; }
.triage-exit:hover { color: var(--ink); }
.triage-exit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.triage-result .tbadge { display: inline-block; margin-bottom: .6rem; }
.triage-answers { margin: .5rem 0 1.2rem; padding-left: 1.1rem; color: var(--ink-2);
  font-size: .9rem; display: grid; gap: .2rem; }
.triage-answers li { list-style: disc; }
.triage-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.triage-actions .btn { text-decoration: none; }
.triage-note { margin: 1.1rem 0 0; font-size: .82rem; color: var(--ink-3); }
.triage-linkbtn { all: unset; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.triage-linkbtn:hover { color: var(--ink-2); }
.triage-linkbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* The app is light-only: it never follows the OS dark-mode preference (no
   prefers-color-scheme override), and color-scheme:light on the root keeps
   native controls and scrollbars light too. */

/* ===================================================================== */
/* Applications list - a Planda-style sidebar shell (monochrome)          */
/* ===================================================================== */
[x-cloak] { display: none !important; }

/* The left nav is fixed and present on every screen; content clears it with a
   left margin (.apax for the list/detail, .appwiz--side for the journey steps). */
.apax, .appwiz--side { margin-left: 232px; }
.apax { min-height: 100vh; }
@media (max-width: 720px) {
  .apax-side { display: none; }
  .apax, .appwiz--side { margin-left: 0; }
}

.apax-side { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem .8rem;
  background: var(--card); border-right: 1px solid var(--line);
  position: fixed; top: 0; left: 0; width: 232px; height: 100vh; z-index: 30; overflow-y: auto; }
.apax-logo { display: flex; align-items: center; gap: .55rem; padding: .3rem .5rem 1rem;
  text-decoration: none; color: var(--ink); font-weight: 640; letter-spacing: -.02em; }
.apax-logo-mark { width: 1.7rem; height: 1.7rem; border-radius: 7px; background: var(--ink);
  color: var(--card); display: grid; place-items: center; font-size: .68rem; font-weight: 700; }
.apax-nav { display: grid; gap: 2px; }
.apax-nav-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
  border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 500; }
.apax-nav-item svg { width: 16px; height: 16px; flex: none; color: var(--ink-4); }
.apax-nav-item:hover { background: var(--fill); color: var(--ink); }
.apax-nav-item.is-active { background: var(--fill-2); color: var(--ink); font-weight: 600; }
.apax-nav-item.is-active svg { color: var(--ink); }

/* collapse toggle + collapsed (icon-rail) state */
.apax-side-top { display: flex; align-items: center; justify-content: space-between; }
.apax-collapse { all: unset; cursor: pointer; display: inline-flex; padding: .35rem;
  border-radius: var(--r-sm); color: var(--ink-3); }
.apax-collapse:hover { background: var(--fill); color: var(--ink); }
.apax-collapse:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.apax-collapse svg { width: 16px; height: 16px; transition: transform .15s; }
.appwiz.is-side-collapsed .apax-collapse svg { transform: rotate(180deg); }

.appwiz.is-side-collapsed .apax-side { width: 60px; padding-left: .5rem; padding-right: .5rem; }
.apax.is-side-collapsed, .appwiz--side.is-side-collapsed { margin-left: 60px; }
.appwiz.is-side-collapsed .apax-logo b,
.appwiz.is-side-collapsed .apax-nav-label,
.appwiz.is-side-collapsed .apax-user-name { display: none; }
.appwiz.is-side-collapsed .apax-nav-item,
.appwiz.is-side-collapsed .apax-user { justify-content: center; }
.appwiz.is-side-collapsed .apax-logo { padding-bottom: .5rem; }
@media (max-width: 720px) { .apax.is-side-collapsed,
  .appwiz--side.is-side-collapsed { margin-left: 0; } }

/* Framed inside the Metis shell: the shell owns the app menu (far left of the
   chat), so drop this in-page sidebar and let content fill the frame. The iframe
   is its own viewport, so the responsive rules below key off the pane's width. */
.appwiz.is-framed .apax-side { display: none; }
/* The shell provides its own navigation, so the page's own breadcrumb is
   redundant (and misleading) when framed. Hidden pre-paint: the sidebar script
   sets is-framed before .apax-crumbs is parsed, so there is no flash. */
.appwiz.is-framed .apax-crumbs { display: none; }
/* apax / appwiz--side and is-framed sit on the SAME root element, so this must
   target the element, not a descendant. */
.apax.is-framed, .appwiz--side.is-framed { margin-left: 0; }

/* Responsive right pane - components reflow as the pane narrows. */
.apax-head { flex-wrap: wrap; gap: .9rem; }
.apax-cta { flex-wrap: wrap; }
@media (max-width: 640px) {
  .apax-main, .apax-body, .appwiz-body, .appwiz-single { padding-left: 1rem; padding-right: 1rem; }
  .apax-cta { width: 100%; }
  .apax-cta .btn { flex: 1 1 auto; text-align: center; }
  .apax-head h1 { font-size: 1.3rem; }
  .appwiz-steps { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .apax-row { flex-wrap: wrap; }
}
.apax-user { margin-top: auto; display: flex; align-items: center; gap: .55rem; padding: .6rem;
  border-top: 1px solid var(--line); }
.apax-avatar { width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--fill-2);
  color: var(--ink-2); display: grid; place-items: center; font-size: .64rem; font-weight: 650; }
.apax-user-name { font-size: .86rem; color: var(--ink-2); }

.apax-main { padding: 1.6rem 2rem 4rem; min-width: 0; max-width: 1040px; margin: 0 auto; }
.apax-crumbs { display: flex; align-items: center; gap: .4rem; font-size: .82rem;
  color: var(--ink-3); padding-bottom: 1rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line); }   /* hairline between breadcrumb and body */
.apax-crumbs a { color: var(--ink-3); text-decoration: none; }
.apax-crumbs a:hover { color: var(--ink); }
.apax-crumbs [aria-current] { color: var(--ink-2); }
.apax-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 1.6rem; }
.apax-head h1 { font-size: 1.55rem; letter-spacing: -.02em; margin: 0 0 .3rem; }
.apax-head p { margin: 0; color: var(--ink-3); font-size: .9rem; }
.apax-head .btn { flex: none; text-decoration: none; }
.apax-cta { display: flex; gap: .5rem; flex: none; }

/* filter pills - white-pill active state, like the schemes caseload tabs */
.apax-tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--line);
  margin-bottom: 1rem; padding-bottom: .6rem; }
.apax-tab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; font-size: .86rem; font-weight: 600; color: var(--ink);
  border-radius: 999px; border: 1px solid transparent; }
.apax-tab:hover { background: var(--card); border-color: var(--line-2); }
.apax-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.apax-tab.is-on { background: var(--card); border-color: var(--line-2); box-shadow: var(--shadow); }
.apax-tab-n { font-size: .72rem; color: var(--ink-4); background: var(--fill-2); border-radius: 999px;
  padding: .05rem .4rem; min-width: 1.3em; text-align: center; font-variant-numeric: tabular-nums; }
.apax-tab.is-on .apax-tab-n { background: var(--ink); color: var(--card); }

.apax-list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: .5rem; }
/* A Planda-style row: the data spread in columns across the full card width. */
.apax-row { display: grid; align-items: center; gap: 1rem; min-width: 0;
  grid-template-columns:
    minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: .8rem 1.1rem; box-shadow: var(--shadow);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.apax-row:hover { border-color: var(--ink-4);
  box-shadow: 0 2px 10px rgba(20,22,26,.10); }
.apax-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.apax-cell { min-width: 0; display: flex; flex-direction: column; gap: .12rem;
  font-size: .84rem; color: var(--ink-2); }
.apax-cell-k { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-4); font-weight: 600; }
.apax-cell-v, .apax-cell--site b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apax-cell--site b { font-weight: 600; font-size: .95rem; color: var(--ink); }
.apax-cell-ref { font-size: .78rem; color: var(--ink-3); }
.apax-row-chev { flex: none; color: var(--ink-4); font-size: 1.35rem; line-height: 1; }

/* Per-card actions: a kebab where the row's chevron used to sit (far right,
   vertically centred), opening a Duplicate / Delete menu. */
.apax-item { position: relative; }
/* The card whose menu is open rises above later cards, so the dropdown (which
   overhangs the next card) is not painted behind it. */
.apax-item.is-menu-open { z-index: 20; }
.apax-row { padding-right: 2.7rem; }               /* reserve the kebab's column */
.apax-actions { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 3; }
.apax-kebab { display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--ink-4);
  transition: color .12s, background .12s, border-color .12s; }
.apax-kebab:hover, .apax-kebab[aria-expanded="true"] {
  color: var(--ink); background: var(--paper); border-color: var(--line-2); }
.apax-kebab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.apax-kebab svg { width: 16px; height: 16px; }
.apax-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 158px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(20,22,26,.16); padding: 4px; }
.apax-menu button { display: flex; align-items: center; gap: .55rem; width: 100%;
  text-align: left; cursor: pointer; background: none; border: 0; border-radius: 7px;
  padding: .5rem .6rem; font: inherit; font-size: .88rem; color: var(--ink); }
.apax-menu button svg { width: 15px; height: 15px; flex: none; color: var(--ink-4); }
.apax-menu button:hover { background: var(--fill); }
.apax-menu button:hover svg { color: var(--ink-2); }
.apax-menu button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.apax-menu .is-danger, .apax-menu .is-danger svg { color: #c0392b; }
.apax-menu .is-danger:hover { background: #fcecea; }
.apax-menu .is-danger:hover svg { color: #c0392b; }

/* Duplicate drawer: the review-and-update acknowledgement. */
.clone-lead { margin: 0 0 1.1rem; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.clone-ack { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .8rem .9rem; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--fill); font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.clone-ack input { margin-top: .15rem; flex: none; }

/* Confirmation dialog (delete). Fixed overlay, so it covers the whole viewport. */
.modal-scrim { position: fixed; inset: 0; z-index: 50; display: grid;
  place-items: center; padding: 1rem; background: rgba(20, 22, 24, .42); }
.modal { width: min(25rem, 100%); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.4rem 1.5rem; box-shadow: 0 14px 44px rgba(0,0,0,.20); }
.modal h2 { font-size: 1.12rem; margin: 0 0 .55rem; letter-spacing: -.01em; }
.modal p { margin: 0 0 1.3rem; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.modal-ref { color: var(--ink-3); }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; }
.modal-actions form { margin: 0; }
/* Narrow pane: site on its own line, the fields flow inline beneath it. */
@media (max-width: 760px) {
  .apax-row { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
  .apax-cell--site { flex: 1 1 100%; }
  .apax-cell { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: .3rem; }
  .apax-cell-k::after { content: ":"; }
  .apax-row-chev { display: none; }
  .apax-row .donut { margin-left: auto; }
}

/* Custom overlay scrollbar - see static/js/railscroll.js. The native bar is
   hidden only when the script has run (it marks <html>.rs-on), so any page the
   script does not reach keeps its normal scrollbar. Fallback hex lets the rail
   render even when appended outside .appwiz (the window bar sits on <body>). */
html.rs-on { scrollbar-width: none; }
html.rs-on::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rs-on [data-railscroll] { scrollbar-width: none; }
.rs-on [data-railscroll]::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rs-rail { width: 1px; border-radius: 999px; background: var(--line-2, #d3d3d0);
  z-index: 60; pointer-events: none; }
.rs-cap { width: 8px; border-radius: 999px; background: var(--ink, #17181a);
  z-index: 61; cursor: grab; opacity: .82; transition: opacity .15s; }
.rs-cap:hover { opacity: 1; }
.rs-cap.rs-drag { cursor: grabbing; opacity: 1; }

/* application detail - the journey grouped into cards (Planda-style) */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 820px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.detail-card > header { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .8rem; }
.detail-card h2 { font-size: 1rem; margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.detail-tick { display: none; width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: var(--ink); color: var(--card); font-size: .72rem; place-items: center; }
.detail-card.is-done .detail-tick { display: inline-grid; }
.detail-edit { font-size: .82rem; color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 999px; padding: .25rem .75rem; }
.detail-edit:hover { background: var(--fill); color: var(--ink); }
.detail-soon { font-size: .7rem; color: var(--ink-4); background: var(--fill-2);
  border-radius: 999px; padding: .12rem .5rem; }
.detail-muted { margin: 0; font-size: .86rem; color: var(--ink-3); }
.detail-card dl { margin: 0; display: grid; gap: .5rem; }
.detail-card dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-4); font-weight: 650; }
.detail-card dd { margin: .1rem 0 0; font-size: .9rem; color: var(--ink); }
.detail-forms { display: flex; align-items: center; gap: 1rem; }
.detail-fee-amt { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); flex: none; font-variant-numeric: tabular-nums; }

/* --- fee step ---------------------------------------------------------- */
.fee-body { padding: 1.3rem 1.5rem; }
.fee-note { margin: 1rem 1.5rem 0; color: var(--ink-3); font-size: .86rem; line-height: 1.5; }
.fee-pending { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.55; }
.fee-card > footer { display: flex; justify-content: space-between; gap: .8rem;
  padding: 1.1rem 1.5rem; border-top: 1px solid var(--line); }
.fee-card > footer .btn { text-decoration: none; }

/* The intro runs the full card width here, not the narrow wizard measure. */
.fee-card > header p { max-width: none; }

/* The breakdown, a label / description / amount grid (portal-style). */
.feegrid { padding: .4rem 1.5rem 1.9rem; }
.feegrid-row { display: grid; grid-template-columns: 1fr auto; column-gap: 1.2rem; row-gap: .25rem;
  grid-template-areas: "label amount" "desc amount"; align-items: start;
  padding: 1rem 0; border-top: 1px solid var(--line); }
.feegrid-row:first-child { border-top: none; }
.feegrid-label { grid-area: label; font-weight: 600; color: var(--ink); font-size: .95rem; }
.feegrid-desc { grid-area: desc; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.feegrid-desc > div + div { margin-top: .15rem; }
.feegrid-amt { grid-area: amount; align-self: center; text-align: right; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feegrid-sub { display: block; font-weight: 400; color: var(--ink-4); font-size: .76rem;
  margin-top: .15rem; }
.feegrid-amt--base { align-self: center; padding: .5rem .9rem; background: var(--fill);
  border-radius: var(--r-sm); font-size: 1.05rem; }
.feegrid-review { display: inline-block; margin-top: .35rem; color: var(--ink-3);
  font-size: .8rem; font-weight: 500; }
.feegrid-row--strong .feegrid-label, .feegrid-row--strong .feegrid-amt { font-weight: 700; }
.feegrid-row--total { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.feegrid-row--total .feegrid-label { font-size: 1.05rem; font-weight: 700; }
.feegrid-amt--total { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.feegrid-edit { all: unset; cursor: pointer; display: block; margin-top: .3rem;
  color: var(--ink-2); font-size: .84rem; font-weight: 500; text-decoration: underline;
  text-underline-offset: 2px; }
.feegrid-edit:hover { color: var(--ink); }
.feegrid-edit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* Fee-reduction drawer. Monochrome, like the rest of the app - the LPA-review
   caution reads through wording, not colour. */
.ded-warn, .ded-info { border-radius: var(--r-sm); font-size: .84rem; line-height: 1.5;
  background: var(--fill); border: 1px solid var(--line); color: var(--ink-2); }
.ded-warn { padding: .8rem .9rem; margin-bottom: 1.3rem; }
.ded-warn b { display: block; margin-bottom: .15rem; color: var(--ink); }
.ded-info { padding: .7rem .9rem; margin: 1.1rem 0 0; }
.ded-heading { margin: 0 0 .6rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-4); font-weight: 650; }
.ded-opt { display: flex; gap: .7rem; padding: .55rem 0; cursor: pointer; }
.ded-opt input { margin-top: .2rem; flex: none; }
.ded-opt-t { display: block; font-weight: 600; color: var(--ink); font-size: .92rem; }
.ded-opt-d { display: block; margin-top: .1rem; color: var(--ink-3); font-size: .84rem; line-height: 1.45; }
.ded-guide { margin: 0 0 .6rem; color: var(--ink-3); font-size: .84rem; line-height: 1.5; }
.ded-heading:not(:first-of-type) { margin-top: 1.4rem; }
.ded-claim { width: 100%; box-sizing: border-box; resize: vertical; }
.ded-confirm { display: flex; gap: .7rem; margin-top: 1.1rem; cursor: pointer;
  color: var(--ink-2); font-size: .86rem; line-height: 1.5; }
.ded-confirm input { margin-top: .15rem; flex: none; }

/* --- review step (portal-style card grid) ------------------------------ */
.rev-wrap { max-width: 1040px; margin: 0 auto; padding: 1.4rem 1.5rem 4rem; }
.rev-intro { margin: 0 0 1.4rem; }
.rev-intro h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.015em; }
.rev-intro p { margin: .35rem 0 0; color: var(--ink-3); font-size: .9rem; max-width: 60ch; }

.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.rev-col { display: flex; flex-direction: column; gap: 1rem; }

.rev-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 1.1rem 1.25rem; }
.rev-card-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; }
.rev-card-head h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; flex: 1; }
.rev-check { width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line-2); position: relative; }
.rev-check.is-done { background: var(--ink); border-color: var(--ink); }
.rev-check.is-done::after { content: ""; position: absolute; left: 4.5px; top: 2px;
  width: 4px; height: 8px; border: solid var(--paper); border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg); }
.rev-edit { flex: none; font-size: .82rem; color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 100px; padding: .2rem .7rem; }
.rev-edit:hover { color: var(--ink); border-color: var(--ink); background: var(--fill); }

.rev-kv { margin: .5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
.rev-kv dt { margin: 0; color: var(--ink-3); font-size: .84rem; }
.rev-kv dd { margin: 0; color: var(--ink); font-size: .88rem; text-align: right; }
.rev-note { margin: .35rem 0 0; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.rev-warn { margin: .35rem 0 0; color: var(--ink); font-size: .84rem; }
.rev-warn::before { content: "! "; font-weight: 700; }
/* A missing prerequisite, not merely an incomplete one - the only place the
   wizard spends a hue. The "! " above carries the same meaning without colour. */
.rev-warn--missing { color: var(--alert); }

.rev-fee { margin: .6rem 0 0; }
.rev-fee-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--line); }
.rev-fee-line dt { margin: 0; color: var(--ink-2); font-size: .86rem; }
.rev-fee-line dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rev-fee-total { border-bottom: none; padding-top: .7rem; }
.rev-fee-total dt { color: var(--ink); font-weight: 600; }
.rev-fee-total dd { font-size: 1.25rem; font-weight: 700; }

.rev-go { margin: 0; }
.rev-go-btn { width: 100%; text-decoration: none; }
.rev-go-btn[disabled] { opacity: .45; pointer-events: none; }
.rev-declare { margin: .7rem 0 0; color: var(--ink-3); font-size: .8rem; line-height: 1.5; }
.rev-blocked { margin: .7rem 0 0; color: var(--ink-3); font-size: .8rem; }

.rev-downloads { padding: .3rem .25rem; }
.rev-downloads h3 { margin: 0 0 .5rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.rev-downloads a { display: flex; align-items: center; gap: .45rem; padding: .3rem 0;
  color: var(--ink-2); font-size: .88rem; text-decoration: none; }
.rev-downloads a::before { content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor; -webkit-mask: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M8 1.5v8m0 0L5 6.5m3 3 3-3M2.5 11v2a1.5 1.5 0 0 0 1.5 1.5h8a1.5 1.5 0 0 0 1.5-1.5v-2'/%3E%3C/svg%3E");
          mask: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M8 1.5v8m0 0L5 6.5m3 3 3-3M2.5 11v2a1.5 1.5 0 0 0 1.5 1.5h8a1.5 1.5 0 0 0 1.5-1.5v-2'/%3E%3C/svg%3E"); }
.rev-downloads a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 720px) { .rev-grid { grid-template-columns: 1fr; } }

/* --- account settings (Settings > General / Notifications) -------------- */
.set-wrap { max-width: 900px; margin: 0 auto; padding: 1.4rem 1.5rem 4rem; }
.set-title { font-size: 1.5rem; font-weight: 650; margin: 0 0 1rem; }
.set-tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
.set-tab { all: unset; cursor: pointer; padding: .5rem .1rem; font-size: .92rem; font-weight: 550;
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.set-tab:hover { color: var(--ink-2); }
.set-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.set-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.set-panel[hidden] { display: none; }
.set-row { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem 2.5rem; align-items: start; }
.set-row-head h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; }
.set-row-head p { font-size: .84rem; color: var(--ink-3); line-height: 1.5; margin: 0; }
.set-form { max-width: 440px; }
.set-field { margin: 0 0 1rem; }
.set-field label { display: block; font-size: .82rem; color: var(--ink-2); margin: 0 0 .3rem; }
.set-field input { width: 100%; box-sizing: border-box; padding: .55rem .7rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }
.set-field input:focus-visible { outline: none; border-color: var(--ink-4); }
.set-hint { font-size: .78rem; color: var(--ink-3); margin: .35rem 0 0; }
.set-err { font-size: .8rem; color: #c0392b; margin: .35rem 0 0; }
.set-forgot { font-size: .84rem; color: var(--ink-3); margin: 0 0 1.2rem; }
.set-saved { font-size: .84rem; color: #1e7a46; background: #e9f6ee; border: 1px solid #bfe3cd;
  border-radius: var(--r-sm); padding: .5rem .7rem; margin: 0 0 1rem; }
.set-actions { display: flex; gap: .6rem; }
.set-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 0 0 1.2rem; }
.set-toggle-text { min-width: 0; }
.set-toggle-text b { font-size: .92rem; color: var(--ink); }
.set-toggle-text p { font-size: .82rem; color: var(--ink-3); line-height: 1.5; margin: .25rem 0 0; }
.set-switch { flex: none; position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.set-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.set-switch-track { position: absolute; inset: 0; background: var(--line-2); border-radius: 999px; transition: background .15s; }
.set-switch-track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.set-switch input:checked ~ .set-switch-track { background: var(--ink); }
.set-switch input:checked ~ .set-switch-track::before { transform: translateX(18px); }
.set-switch input:focus-visible ~ .set-switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) { .set-row { grid-template-columns: 1fr; } }

.donut { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--ink) calc(var(--p, 0) * 1%), var(--fill-2) 0);
  display: grid; place-items: center; }
.donut::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--card); }
.donut-val { position: relative; z-index: 1; font-size: .62rem; font-weight: 650;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.donut-val i { font-style: normal; font-size: .5rem; color: var(--ink-4); }

.statuspill { flex: none; font-size: .74rem; font-weight: 600; padding: .2rem .6rem;
  border-radius: 999px; background: var(--fill-2); color: var(--ink-3); border: 1px solid var(--line-2); }
.statuspill--submitted, .statuspill--validated, .statuspill--decided {
  background: var(--ink); color: var(--card); border-color: var(--ink); }

.apax-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-3); background: var(--card);
  border: 1px dashed var(--line-2); border-radius: var(--r); }
.apax-empty p { margin: 0 0 1rem; }
.apax-empty .btn { text-decoration: none; }
/* Message-only variant (no applications at all, or a status tab with no
   matches): nothing follows the copy, so it needs no gap beneath it. */
.apax-empty--bare p { margin: 0; }

/* keep the responsive hide after the base .apax-side rule so it wins */
@media (max-width: 720px) { .apax-side { display: none; } }

/* Loqate suggestion rows: the address line, then a subdued locality/postcode
   line (and a chevron on a container the user can drill into). */
.addr-opt-sub { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .1rem; }
.addr-opt--more .addr-opt-sub { color: var(--ink-2); }

/* address screen: name input, continue action, selected-address confirmation */
.addr-error { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--fill); border: 1px solid var(--ink); color: var(--ink); font-size: .88rem; }
.addr-actions { margin-top: 1.3rem; }
.addr-actions .btn { text-decoration: none; }
.addr-selected { display: flex; gap: .7rem; align-items: flex-start; margin-top: .5rem;
  padding: .8rem 1rem; border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--fill); }
.addr-selected-tick { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 999px;
  background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: .72rem; }
.addr-selected b { font-weight: 600; }
.addr-selected .addr-msg { margin: .15rem 0 0; }

/* --- compare: nearby applications ------------------------------------- */
/* Decision outcomes are the one place this monochrome shell uses hue - a map
   is unreadable without it. A restrained semantic set, greys for the rest. */
.cmp {
  --ok: #2e7d32; --no: #c62828; --wait: #e6a100; --gone: #8b9096; --misc: #b9bdc2;
}
.cmp-wrap { max-width: 1160px; margin: 0 auto; padding: 1.4rem 1.5rem 3rem; }
.cmp-intro h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.015em; }
.cmp-intro p { margin: .35rem 0 0; color: var(--ink-3); font-size: .9rem; }

.cmp-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
  margin: 1.2rem 0; padding: 1rem 1.1rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.cmp-field { display: flex; flex-direction: column; gap: .3rem; }
.cmp-field--wide { flex: 1 1 15rem; }
.cmp-field label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 600; }
.cmp-field input, .cmp-field select { font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--fill); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .5rem .6rem; min-width: 8.5rem; }
.cmp-field input:focus, .cmp-field select:focus { background: var(--card); }
.cmp-go { text-decoration: none; white-space: nowrap; }

.cmp-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .cmp-grid { grid-template-columns: 1fr; } }
/* Left column: the map with the refusal-insight card stacked beneath it, so the
   analysis lives under the map (not across the results rail). min-width:0 lets the
   column shrink rather than forcing the grid wider than its track. */
.cmp-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.cmp-mapwrap { position: relative; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
/* z-index:0 gives the map its own stacking context so Leaflet's absolutely
   positioned panes stay inside it (as on the location-plan map) rather than
   escaping over the chat when re-centred. */
.cmp-map { position: relative; z-index: 0; height: 560px; min-height: 560px; width: 100%;
  background: var(--fill-2); }
.cmp-note { margin: 0; padding: .8rem 1rem; font-size: .84rem; color: var(--ink-3);
  border-top: 1px solid var(--line); background: var(--fill); }

.cmp-panel { display: flex; flex-direction: column; gap: 1rem; }
.cmp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.cmp-card h2 { margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); font-weight: 650; }
.cmp-summary-head { display: flex; align-items: baseline; gap: .5rem; }
.cmp-summary-head b { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.cmp-summary-head span { color: var(--ink-3); font-size: .86rem; }
.cmp-summary-sub { margin: .3rem 0 0; color: var(--ink-3); font-size: .82rem; }
/* Download the location's insight report (comparable outcomes + refusal themes) as a PDF. */
.cmp-report-btn { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem;
  padding: .45rem .7rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font-size: .82rem; font-weight: 600;
  text-decoration: none; }
.cmp-report-btn:hover { background: var(--fill); border-color: var(--ink-4); }
.cmp-report-btn svg { width: 14px; height: 14px; flex: none; }

.cmp-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.cmp-legend-row { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .35rem 0; }
.cmp-legend-label { display: flex; align-items: center; gap: .55rem; cursor: pointer;
  font-size: .9rem; color: var(--ink); }
.cmp-legend-label input { accent-color: var(--ink); }
.cmp-swatch { width: 12px; height: 12px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.cmp-swatch--approved { background: var(--ok); }
.cmp-swatch--refused { background: var(--no); }
.cmp-swatch--in_assessment { background: var(--wait); }
.cmp-swatch--withdrawn { background: var(--gone); }
.cmp-swatch--other { background: var(--misc); }
.cmp-swatch--yours { background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.cmp-count { font-size: .88rem; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.cmp-source { margin: 0; color: var(--ink-4); font-size: .78rem; line-height: 1.5; }

/* pin popups (Leaflet) */
.cmp-pop { font-size: .84rem; color: var(--ink); min-width: 12rem; }
.cmp-pop > b { display: block; margin-bottom: .4rem; }
.cmp-pop-row { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0;
  border-top: 1px solid var(--line); }
.cmp-pop-row span { color: var(--ink-3); }
.cmp-pop-desc { margin: .5rem 0 0; color: var(--ink-2); font-size: .82rem; }
.cmp-pop-link { display: inline-block; margin-top: .5rem; color: var(--ink); font-weight: 600; }

/* comparable outcomes: approval rate + a 95% confidence band */
.cmp-oc-context { margin: 0 0 .9rem; font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
.cmp-oc { margin: 0 0 1rem; }
.cmp-oc-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.cmp-oc-scope { font-size: .86rem; color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; }
.cmp-oc-rate { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; flex: none; }
.cmp-oc-track { position: relative; height: 6px; margin: .5rem 0 .45rem; border-radius: 100px;
  background: var(--fill-2); }
.cmp-oc-range { position: absolute; top: 0; height: 100%; border-radius: 100px;
  background: rgba(46,125,50,.30); }
.cmp-oc-point { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 2px;
  background: var(--ink); transform: translateX(-50%); }
.cmp-oc-meta { margin: 0; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cmp-oc-median { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .75rem 0 0; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.cmp-oc-median b { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-oc-foot { margin: .8rem 0 0; font-size: .72rem; color: var(--ink-4); line-height: 1.5; }

/* refusal insight: mined reasons distilled into themes + how to avoid. Sits in
   the map column beneath the map. A header with an alert glyph, then the themes as
   numbered cards in a responsive grid, each with a tinted "how to avoid" line. */
.cmp-ref-head { display: flex; gap: .75rem; align-items: flex-start; }
/* The heading + intro block fills the row so the intro uses the full card width
   (only wrapping when it genuinely must), rather than sizing to its content and
   leaving empty space to its right. */
.cmp-ref-headtext { flex: 1; min-width: 0; }
.cmp-ref-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; color: var(--no); background: color-mix(in srgb, var(--no) 12%, transparent); }
.cmp-ref-icon svg { width: 19px; height: 19px; }
.cmp-ref-card h2 { margin: 0; }
.cmp-ref-intro { margin: .2rem 0 0; font-size: .84rem; color: var(--ink-3); line-height: 1.5; }

.cmp-ref-result { margin-top: 1.1rem; }
.cmp-ref-loading { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--ink-3); }
.cmp-ref-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--ink-3); animation: cmp-spin .7s linear infinite; }
@keyframes cmp-spin { to { transform: rotate(360deg); } }
.cmp-ref-empty { margin: 0; font-size: .84rem; color: var(--ink-3); line-height: 1.5; }

.cmp-ref-scope { margin: 0 0 .9rem; font-size: .82rem; color: var(--ink-3); }
.cmp-ref-count { font-weight: 700; color: var(--ink); }

.cmp-ref-grid { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.cmp-ref-theme { padding: .9rem 1rem 1rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--card); }
.cmp-ref-theme-top { display: flex; align-items: flex-start; gap: .55rem; }
.cmp-ref-badge { flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; font-size: .74rem; font-weight: 700; color: #fff; background: var(--no); }
.cmp-ref-title { font-size: .9rem; line-height: 1.35; color: var(--ink); }
.cmp-ref-what { margin: .55rem 0 0; font-size: .83rem; color: var(--ink-2); line-height: 1.5; }
.cmp-ref-avoid { margin: .7rem 0 0; padding: .55rem .65rem; font-size: .82rem; color: var(--ink);
  line-height: 1.5; background: color-mix(in srgb, var(--ok) 9%, transparent); border-radius: var(--r-sm); }
.cmp-ref-avoid-tag { display: inline-flex; align-items: center; gap: .3em; margin-right: .35em;
  font-weight: 600; color: color-mix(in srgb, var(--ok) 76%, var(--ink)); }
.cmp-ico { width: 14px; height: 14px; }

.cmp-ref-note { margin: 1rem 0 0; padding: .6rem .75rem; font-size: .78rem; color: var(--ink-3);
  background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-sm); line-height: 1.5; }