/* ============================================================
   GIAP — Ghana Integrated Address Platform
   Land Use and Spatial Planning Authority (LUSPA)

   IBM Carbon Design System · g10 theme · LUSPA navy interactive ramp.

   Carbon components ship as `cds-*` custom elements whose styles live in
   shadow DOM and read `--cds-*` custom properties from this document, so the
   token block below themes them and this stylesheet simultaneously.

   Anything that must survive inside a <form> (buttons, inputs, selects) is
   authored here in the light DOM instead — shadow-DOM controls don't
   participate in native form submission, and a government platform should
   still work when JavaScript doesn't.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. Tokens
   ──────────────────────────────────────────────────────────── */
:root {
  /* LUSPA navy ramp — derived from the authority's seal */
  --navy-10:  #eef1fa;
  --navy-20:  #d5dcf2;
  --navy-30:  #b0bce4;
  --navy-40:  #8595d1;
  --navy-50:  #3d4d92;
  --navy-60:  #1f2a5e;   /* primary / interactive */
  --navy-70:  #182248;
  --navy-80:  #131b3a;
  --navy-90:  #0d1228;
  --navy-100: #070a18;

  /* Ghana flag — used only as a civic accent, never as UI colour */
  --gh-red:   #ce1126;
  --gh-gold:  #fcd116;
  --gh-green: #006b3f;

  /* ── Carbon g10 theme ── */
  --cds-background:                 #f4f4f4;
  --cds-background-hover:           rgba(141,141,141,.12);
  --cds-background-active:          rgba(141,141,141,.5);
  --cds-background-selected:        rgba(141,141,141,.2);
  --cds-background-selected-hover:  rgba(141,141,141,.32);
  --cds-background-inverse:         #393939;
  --cds-background-inverse-hover:   #474747;
  --cds-background-brand:           var(--navy-60);

  --cds-layer-01:                   #ffffff;
  --cds-layer-02:                   #f4f4f4;
  --cds-layer-03:                   #ffffff;
  --cds-layer-hover-01:             #e8e8e8;
  --cds-layer-hover-02:             #e8e8e8;
  --cds-layer-hover-03:             #e8e8e8;
  --cds-layer-active-01:            #c6c6c6;
  --cds-layer-active-02:            #c6c6c6;
  --cds-layer-selected-01:          #e0e0e0;
  --cds-layer-selected-02:          #e0e0e0;
  --cds-layer-selected-hover-01:    #d1d1d1;
  --cds-layer-selected-inverse:     #161616;
  --cds-layer-selected-disabled:    #8d8d8d;
  --cds-layer-accent-01:            #e0e0e0;
  --cds-layer-accent-02:            #e0e0e0;
  --cds-layer-accent-hover-01:      #d1d1d1;
  --cds-layer-accent-active-01:     #a8a8a8;

  --cds-field-01:                   #ffffff;
  --cds-field-02:                   #f4f4f4;
  --cds-field-hover-01:             #e8e8e8;
  --cds-field-hover-02:             #e8e8e8;

  --cds-border-subtle-00:           #e0e0e0;
  --cds-border-subtle-01:           #e0e0e0;
  --cds-border-subtle-02:           #e0e0e0;
  --cds-border-subtle-03:           #e0e0e0;
  --cds-border-strong-01:           #8d8d8d;
  --cds-border-strong-02:           #8d8d8d;
  --cds-border-strong-03:           #8d8d8d;
  --cds-border-inverse:             #161616;
  --cds-border-disabled:            #c6c6c6;

  --cds-text-primary:               #161616;
  --cds-text-secondary:             #525252;
  --cds-text-placeholder:           #a8a8a8;
  --cds-text-helper:                #6f6f6f;
  --cds-text-on-color:              #ffffff;
  --cds-text-on-color-disabled:     #8d8d8d;
  --cds-text-inverse:               #ffffff;
  --cds-text-disabled:              rgba(22,22,22,.25);
  --cds-text-error:                 #da1e28;

  --cds-icon-primary:               #161616;
  --cds-icon-secondary:             #525252;
  --cds-icon-on-color:              #ffffff;
  --cds-icon-inverse:               #ffffff;
  --cds-icon-disabled:              rgba(22,22,22,.25);

  --cds-support-error:              #da1e28;
  --cds-support-success:            #24a148;
  --cds-support-warning:            #f1c21b;
  --cds-support-caution-major:      #ff832b;
  --cds-support-info:               var(--navy-60);
  --cds-support-error-inverse:      #fa4d56;
  --cds-support-success-inverse:    #42be65;
  --cds-support-warning-inverse:    #f1c21b;
  --cds-support-info-inverse:       var(--navy-40);

  --cds-overlay:                    rgba(22,22,22,.5);
  --cds-toggle-off:                 #8d8d8d;
  --cds-shadow:                     rgba(0,0,0,.3);
  --cds-skeleton-background:        #e8e8e8;
  --cds-skeleton-element:           #c6c6c6;
  --cds-highlight:                  var(--navy-10);

  /* ── Navy interactive overrides ── */
  --cds-interactive:                var(--navy-60);
  --cds-focus:                      var(--navy-60);
  --cds-focus-inset:                #ffffff;
  --cds-focus-inverse:              #ffffff;
  --cds-border-interactive:         var(--navy-60);
  --cds-icon-interactive:           var(--navy-60);

  --cds-link-primary:               var(--navy-60);
  --cds-link-primary-hover:         var(--navy-80);
  --cds-link-secondary:             var(--navy-70);
  --cds-link-visited:               #6929c4;
  --cds-link-inverse:               var(--navy-30);

  --cds-button-primary:             var(--navy-60);
  --cds-button-primary-hover:       var(--navy-70);
  --cds-button-primary-active:      var(--navy-90);
  --cds-button-secondary:           #393939;
  --cds-button-secondary-hover:     #474747;
  --cds-button-secondary-active:    #6f6f6f;
  --cds-button-tertiary:            var(--navy-60);
  --cds-button-tertiary-hover:      var(--navy-70);
  --cds-button-tertiary-active:     var(--navy-90);
  --cds-button-danger-primary:      #da1e28;
  --cds-button-danger-secondary:    #da1e28;
  --cds-button-danger-hover:        #b81922;
  --cds-button-danger-active:       #750e13;
  --cds-button-disabled:            #c6c6c6;
  --cds-button-separator:           #e0e0e0;

  --cds-tag-background-blue:        var(--navy-10);
  --cds-tag-color-blue:             var(--navy-70);
  --cds-tag-hover-blue:             var(--navy-20);
  --cds-tag-background-green:       #a7f0ba;
  --cds-tag-color-green:            #0e6027;
  --cds-tag-background-red:         #ffd7d9;
  --cds-tag-color-red:              #a2191f;
  --cds-tag-background-gray:        #e0e0e0;
  --cds-tag-color-gray:             #161616;
  --cds-tag-background-warm-gray:   #e5e0df;
  --cds-tag-color-warm-gray:        #171414;

  --cds-notification-background-error:   #fff1f1;
  --cds-notification-background-success: #defbe6;
  --cds-notification-background-info:    var(--navy-10);
  --cds-notification-background-warning: #fdf6dd;

  /* ── Spacing scale ── */
  --sp-01: .125rem; --sp-02: .25rem;  --sp-03: .5rem;   --sp-04: .75rem;
  --sp-05: 1rem;    --sp-06: 1.5rem;  --sp-07: 2rem;    --sp-08: 2.5rem;
  --sp-09: 3rem;    --sp-10: 4rem;    --sp-11: 5rem;    --sp-12: 6rem;

  /* ── Type ── */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* ── Motion ── */
  --ease-productive: cubic-bezier(.2, 0, .38, .9);
  --ease-entrance:   cubic-bezier(0, 0, .38, .9);
  --dur-fast:  110ms;
  --dur-mod:   240ms;

  --shell-h: 48px;
}

/* ────────────────────────────────────────────────────────────
   2. Reset
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: var(--font-sans);
  font-size: .875rem;
  line-height: 1.42857;
  letter-spacing: .16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; letter-spacing: 0; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }

img, svg { max-width: 100%; }

a {
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--cds-link-primary-hover); }

:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

code, kbd, samp, pre { font-family: var(--font-mono); }

/* Carbon components have no styles until their module registers. Rather than
   hiding them (which would break the page if JS fails), give the common ones a
   close-enough light-DOM appearance so hydration isn't a visible jump. */
cds-tag:not(:defined),
cds-tile:not(:defined),
cds-accordion:not(:defined) { display: block; }
cds-inline-notification:not(:defined),
cds-actionable-notification:not(:defined) { display: block; padding: var(--sp-05); background: var(--cds-layer-01); }

/* ────────────────────────────────────────────────────────────
   3. Type scale (Carbon)
   ──────────────────────────────────────────────────────────── */
.t-label      { font-size: .75rem;   line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
.t-helper     { font-size: .75rem;   line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-helper); }
.t-body-01    { font-size: .875rem;  line-height: 1.42857; letter-spacing: .16px; }
.t-body-02    { font-size: 1rem;     line-height: 1.5;     letter-spacing: 0; }
.t-heading-01 { font-size: .875rem;  line-height: 1.42857; letter-spacing: .16px; font-weight: 600; }
.t-heading-02 { font-size: 1rem;     line-height: 1.5;     letter-spacing: 0;     font-weight: 600; }
.t-heading-03 { font-size: 1.25rem;  line-height: 1.4;     letter-spacing: 0; }
.t-heading-04 { font-size: 1.75rem;  line-height: 1.28572; letter-spacing: 0; }
.t-heading-05 { font-size: 2rem;     line-height: 1.25;    letter-spacing: 0; }
.t-heading-06 { font-size: 2.625rem; line-height: 1.19;    letter-spacing: 0;     font-weight: 300; }
.t-mono       { font-family: var(--font-mono); }
.t-secondary  { color: var(--cds-text-secondary); }
.t-error      { color: var(--cds-text-error); }

/* ────────────────────────────────────────────────────────────
   4. Layout — Carbon 2x Grid
   ──────────────────────────────────────────────────────────── */
.g-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-06);
  width: 100%;
  max-width: 1584px;
  margin-inline: auto;
  padding-inline: var(--sp-05);
}
.g-col-1  { grid-column: span 1; }  .g-col-2  { grid-column: span 2; }
.g-col-3  { grid-column: span 3; }  .g-col-4  { grid-column: span 4; }
.g-col-5, .g-col-6, .g-col-7, .g-col-8,
.g-col-9, .g-col-10, .g-col-11, .g-col-12,
.g-col-13, .g-col-14, .g-col-15, .g-col-16 { grid-column: span 4; }

@media (min-width: 42rem) {          /* md — 8 columns */
  .g-grid { grid-template-columns: repeat(8, 1fr); padding-inline: var(--sp-05); }
  .g-col-5  { grid-column: span 5; }  .g-col-6  { grid-column: span 6; }
  .g-col-7  { grid-column: span 7; }  .g-col-8  { grid-column: span 8; }
  .g-col-9, .g-col-10, .g-col-11, .g-col-12,
  .g-col-13, .g-col-14, .g-col-15, .g-col-16 { grid-column: span 8; }
  .g-md-4 { grid-column: span 4; }
}
@media (min-width: 66rem) {          /* lg — 16 columns */
  .g-grid { grid-template-columns: repeat(16, 1fr); padding-inline: var(--sp-07); }
  .g-col-9  { grid-column: span 9; }   .g-col-10 { grid-column: span 10; }
  .g-col-11 { grid-column: span 11; }  .g-col-12 { grid-column: span 12; }
  .g-col-13 { grid-column: span 13; }  .g-col-14 { grid-column: span 14; }
  .g-col-15 { grid-column: span 15; }  .g-col-16 { grid-column: span 16; }
  .g-md-4 { grid-column: span 4; }
}

.g-page  { min-height: calc(100vh - var(--shell-h)); padding-block: var(--sp-07) var(--sp-11); }
.g-stack { display: flex; flex-direction: column; gap: var(--sp-05); }
.g-row   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-03); }
.g-spacer{ flex: 1 1 auto; }

/* ────────────────────────────────────────────────────────────
   5. UI Shell
   ──────────────────────────────────────────────────────────── */
.shell {
  position: sticky; top: 0; z-index: 8000;
  height: var(--shell-h);
  display: flex; align-items: center;
  background: var(--navy-60);
  color: #fff;
  border-bottom: 1px solid var(--navy-80);
}
.shell a { color: #fff; text-decoration: none; }

.shell__brand {
  display: flex; align-items: center; gap: var(--sp-04);
  height: 100%; padding-inline: var(--sp-05);
  font-size: .875rem; letter-spacing: .16px;
}
.shell__brand:hover { background: var(--navy-70); }
.shell__brand img { height: 26px; width: auto; display: block; }
.shell__brand b   { font-weight: 600; }
.shell__brand span{ font-weight: 400; opacity: .8; }

.shell__nav { display: none; height: 100%; }
.shell__nav a {
  display: flex; align-items: center; gap: var(--sp-03);
  height: 100%; padding-inline: var(--sp-05);
  font-size: .875rem; letter-spacing: .16px;
  border-block: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease-productive);
}
.shell__nav a:hover  { background: var(--navy-70); }
.shell__nav a.active { background: var(--navy-70); border-bottom-color: var(--gh-gold); }
@media (min-width: 66rem) { .shell__nav { display: flex; } }

.shell__actions { display: flex; align-items: center; height: 100%; margin-left: auto; }
.shell__action {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-03);
  height: 100%; min-width: var(--shell-h); padding-inline: var(--sp-04);
  font-size: .875rem;
}
.shell__action:hover { background: var(--navy-70); }
.shell__badge {
  position: absolute; top: 8px; right: 8px;
  min-width: 16px; height: 16px; padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--gh-red); color: #fff;
  font-size: .625rem; font-weight: 600; line-height: 1;
  border-radius: 8px;
}
.shell__avatar {
  width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--navy-40); color: var(--navy-90);
  font-size: .6875rem; font-weight: 600; border-radius: 50%;
}
.shell__name { display: none; }
@media (min-width: 42rem) { .shell__name { display: inline; } }

/* Ghana flag civic strip */
.flag-strip { height: 3px; display: flex; }
.flag-strip i { flex: 1; }
.flag-strip i:nth-child(1) { background: var(--gh-red); }
.flag-strip i:nth-child(2) { background: var(--gh-gold); }
.flag-strip i:nth-child(3) { background: var(--gh-green); }

/* Mobile nav rail */
.shell__menu { display: flex; }
@media (min-width: 66rem) { .shell__menu { display: none; } }
.railwrap { position: fixed; inset: var(--shell-h) 0 0 0; z-index: 7900; display: none; }
.railwrap[open] { display: block; }
.railwrap__scrim { position: absolute; inset: 0; background: var(--cds-overlay); border: 0; width: 100%; }
.rail {
  position: relative; width: 16rem; max-width: 84vw; height: 100%;
  background: var(--cds-layer-01); border-right: 1px solid var(--cds-border-subtle-01);
  overflow-y: auto;
}
.rail a {
  display: flex; align-items: center; gap: var(--sp-04);
  padding: var(--sp-05); color: var(--cds-text-primary);
  text-decoration: none; font-size: .875rem;
  border-left: 3px solid transparent;
}
.rail a:hover  { background: var(--cds-layer-hover-01); }
.rail a.active { background: var(--cds-layer-selected-01); border-left-color: var(--navy-60); font-weight: 600; }

/* ────────────────────────────────────────────────────────────
   6. Page header
   ──────────────────────────────────────────────────────────── */
.pagehead { margin-bottom: var(--sp-07); }
.pagehead h1 { font-size: 1.75rem; line-height: 1.28572; margin-bottom: var(--sp-03); }
.pagehead p  { color: var(--cds-text-secondary); max-width: 60ch; }
.pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-05); }
.pagehead__row .g-spacer { min-width: 0; }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-03); margin-bottom: var(--sp-04); font-size: .875rem; }
.crumbs a { color: var(--cds-link-primary); }
.crumbs span { color: var(--cds-text-secondary); }
.crumbs i { color: var(--cds-icon-secondary); font-size: .625rem; align-self: center; }

/* ────────────────────────────────────────────────────────────
   7. Buttons — Carbon, light DOM (form-safe)
   ──────────────────────────────────────────────────────────── */
.g-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-06);
  min-height: 48px; max-width: 20rem;
  padding: 13px 15px;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-sans); font-size: .875rem; line-height: 1.28572; letter-spacing: .16px;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-productive),
              color      var(--dur-fast) var(--ease-productive),
              border     var(--dur-fast) var(--ease-productive);
}
.g-btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -3px; }
.g-btn i { font-size: 1rem; flex: none; }
.g-btn--block { display: flex; max-width: none; width: 100%; }
.g-btn--sm { min-height: 32px; padding-block: 6px; }
.g-btn--md { min-height: 40px; padding-block: 9px; }
.g-btn--center { justify-content: center; gap: var(--sp-03); }

.g-btn--primary   { background: var(--cds-button-primary); color: #fff; }
.g-btn--primary:hover  { background: var(--cds-button-primary-hover); color: #fff; }
.g-btn--primary:active { background: var(--cds-button-primary-active); }

.g-btn--secondary { background: var(--cds-button-secondary); color: #fff; }
.g-btn--secondary:hover  { background: var(--cds-button-secondary-hover); color: #fff; }

.g-btn--tertiary  { background: transparent; color: var(--cds-button-tertiary); border-color: var(--cds-button-tertiary); }
.g-btn--tertiary:hover  { background: var(--cds-button-tertiary-hover); color: #fff; }

.g-btn--ghost     { background: transparent; color: var(--cds-link-primary); }
.g-btn--ghost:hover { background: var(--cds-background-hover); color: var(--cds-link-primary-hover); }

.g-btn--danger    { background: var(--cds-button-danger-primary); color: #fff; }
.g-btn--danger:hover { background: var(--cds-button-danger-hover); color: #fff; }

.g-btn--danger-ghost { background: transparent; color: var(--cds-support-error); }
.g-btn--danger-ghost:hover { background: var(--cds-button-danger-hover); color: #fff; }

.g-btn[disabled], .g-btn--disabled {
  background: var(--cds-button-disabled); color: var(--cds-text-on-color-disabled);
  border-color: transparent; cursor: not-allowed; pointer-events: none;
}

.g-btnset { display: flex; flex-wrap: wrap; gap: 1px; }
.g-btnset .g-btn { flex: 1 1 auto; }

/* ────────────────────────────────────────────────────────────
   8. Form controls — Carbon, light DOM
   ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-03); margin-bottom: var(--sp-06); }
.field > label,
.field__label {
  font-size: .75rem; line-height: 1.33333; letter-spacing: .32px;
  color: var(--cds-text-secondary);
}
.field__hint { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-helper); }
.field__err  { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-error);
               display: flex; align-items: center; gap: var(--sp-02); }
.field--req > label::after { content: ' *'; color: var(--cds-text-error); }

.inp, .sel, .ta {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-05);
  background: var(--cds-field-01);
  border: none; border-bottom: 1px solid var(--cds-border-strong-01); border-radius: 0;
  color: var(--cds-text-primary);
  font-family: var(--font-sans); font-size: .875rem; line-height: 1.28572; letter-spacing: .16px;
  transition: background var(--dur-fast) var(--ease-productive),
              outline    var(--dur-fast) var(--ease-productive);
  appearance: none;
}
.ta { min-height: 6rem; padding: var(--sp-04) var(--sp-05); line-height: 1.42857; resize: vertical; }
.inp::placeholder, .ta::placeholder { color: var(--cds-text-placeholder); }
.inp:focus, .sel:focus, .ta:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.inp:disabled, .sel:disabled, .ta:disabled {
  background: var(--cds-field-01); color: var(--cds-text-disabled);
  border-bottom-color: transparent; cursor: not-allowed;
}
.inp--invalid, .sel--invalid, .ta--invalid { outline: 2px solid var(--cds-support-error); outline-offset: -2px; }

.sel {
  padding-right: var(--sp-08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23161616'%3E%3Cpath d='M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-05) center;
  background-size: 16px;
  cursor: pointer;
}

/* Checkbox & radio */
.check, .radio {
  display: flex; align-items: flex-start; gap: var(--sp-04);
  padding-block: var(--sp-02); cursor: pointer;
  font-size: .875rem; letter-spacing: .16px;
}
.check input, .radio input { flex: none; width: 1rem; height: 1rem; margin: 2px 0 0; accent-color: var(--navy-60); cursor: pointer; }

/* Selectable card — used for property type & permit type */
.pick { display: grid; gap: var(--sp-03); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pick__opt { position: relative; display: block; cursor: pointer; }
.pick__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick__box {
  display: flex; align-items: flex-start; gap: var(--sp-04);
  height: 100%; padding: var(--sp-05);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  outline: 2px solid transparent; outline-offset: -2px;
  transition: background var(--dur-fast) var(--ease-productive),
              outline    var(--dur-fast) var(--ease-productive);
}
.pick__opt:hover .pick__box { background: var(--cds-layer-hover-01); }
.pick__opt input:checked + .pick__box { outline-color: var(--navy-60); background: var(--navy-10); }
.pick__opt input:focus-visible + .pick__box { outline-color: var(--cds-focus); }
.pick__ico {
  flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  background: var(--navy-10); color: var(--navy-60); font-size: .875rem;
}
.pick__opt input:checked + .pick__box .pick__ico { background: var(--navy-60); color: #fff; }
.pick__t { font-size: .875rem; font-weight: 600; letter-spacing: .16px; }
.pick__d { font-size: .75rem; line-height: 1.33333; color: var(--cds-text-helper); margin-top: 2px; }

/* File input */
.filebox {
  display: flex; flex-direction: column; gap: var(--sp-04);
  padding: var(--sp-05);
  background: var(--cds-layer-01);
  border: 1px dashed var(--cds-border-strong-01);
}
.filebox input[type=file] { font-size: .8125rem; }

/* ────────────────────────────────────────────────────────────
   9. Tiles & surfaces
   ──────────────────────────────────────────────────────────── */
.tile {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  padding: var(--sp-05);
}
.tile--flush { padding: 0; }
.tile__head {
  display: flex; align-items: center; gap: var(--sp-04);
  padding: var(--sp-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.tile__head h2, .tile__head h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.tile__body { padding: var(--sp-05); }

a.tile, .tile--clickable {
  display: block; text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-productive),
              border-color var(--dur-fast) var(--ease-productive);
}
a.tile:hover, .tile--clickable:hover { background: var(--cds-layer-hover-01); border-color: var(--cds-border-strong-01); color: inherit; }
a.tile:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

/* Stat tiles */
.stats { display: grid; gap: 1px; background: var(--cds-border-subtle-01); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat { background: var(--cds-layer-01); padding: var(--sp-05); }
.stat__n { font-size: 2rem; line-height: 1.25; font-weight: 300; font-variant-numeric: tabular-nums; }
.stat__l { font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); margin-top: var(--sp-02); }
.stat__d { font-size: .75rem; color: var(--cds-text-helper); margin-top: var(--sp-02); }
.stat--ok   .stat__n { color: var(--cds-support-success); }
.stat--warn .stat__n { color: #8a6100; }
.stat--info .stat__n { color: var(--navy-60); }
.stat--bad  .stat__n { color: var(--cds-support-error); }

/* ────────────────────────────────────────────────────────────
   10. The address plate — GIAP's signature artefact
   A registered place's number rendered the way it appears on the
   building: a vitreous-enamel house plate.
   ──────────────────────────────────────────────────────────── */
.plate {
  display: flex; align-items: stretch;
  background: var(--navy-60); color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--navy-80), 0 6px 20px rgba(7,10,24,.28);
  border-radius: 3px;
  overflow: hidden;
}
.plate__no {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  min-width: 5.5rem; padding: var(--sp-05) var(--sp-04);
  background: rgba(255,255,255,.08);
  border-right: 2px solid rgba(255,255,255,.25);
  font-size: 2.625rem; line-height: 1; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.plate__body {
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-02);
  padding: var(--sp-05); min-width: 0;
}
.plate__street {
  font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: .2px;
  overflow-wrap: anywhere;
}
.plate__mmda {
  font-size: .75rem; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--navy-30);
}
.plate__flag { flex: none; width: 6px; display: flex; flex-direction: column; }
.plate__flag i { flex: 1; }
.plate__flag i:nth-child(1) { background: var(--gh-red); }
.plate__flag i:nth-child(2) { background: var(--gh-gold); }
.plate__flag i:nth-child(3) { background: var(--gh-green); }

.plate--sm { border-width: 2px; }
.plate--sm .plate__no     { min-width: 3.5rem; font-size: 1.375rem; padding: var(--sp-04) var(--sp-03); }
.plate--sm .plate__body   { padding: var(--sp-04); }
.plate--sm .plate__street { font-size: .9375rem; }
.plate--sm .plate__mmda   { font-size: .6875rem; letter-spacing: 1px; }

/* Canonical / memorable code chips */
.code {
  display: inline-flex; align-items: center; gap: var(--sp-02);
  padding: 2px var(--sp-03);
  background: var(--cds-layer-02);
  border: 1px solid var(--cds-border-subtle-01);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .32px;
  color: var(--cds-text-secondary);
  white-space: nowrap;
}
.code--memo { background: var(--navy-10); border-color: var(--navy-30); color: var(--navy-70); font-weight: 600; }

.copyline {
  display: flex; align-items: stretch;
  border: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-field-01);
}
.copyline input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 0 var(--sp-04); height: 40px;
  font-family: var(--font-mono); font-size: .75rem; color: var(--cds-text-secondary);
}
.copyline input:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.copyline button {
  flex: none; border: 0; border-left: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01); color: var(--cds-link-primary);
  padding-inline: var(--sp-05); height: 40px; cursor: pointer;
  font-family: var(--font-sans); font-size: .75rem; letter-spacing: .32px;
}
.copyline button:hover { background: var(--cds-layer-hover-01); }

/* ────────────────────────────────────────────────────────────
   11. Status tags
   ──────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-02);
  height: 24px; padding-inline: var(--sp-03);
  border-radius: 12px;
  font-size: .75rem; line-height: 1; letter-spacing: .32px;
  white-space: nowrap;
}
.tag i { font-size: .625rem; }
.tag--verified { background: #a7f0ba; color: #0e6027; }
.tag--pending  { background: #fdf6dd; color: #684e00; }
.tag--update   { background: var(--navy-10); color: var(--navy-70); }
.tag--flagged  { background: #ffd7d9; color: #a2191f; }
.tag--muted    { background: #e0e0e0; color: #393939; }
.tag--approved { background: #a7f0ba; color: #0e6027; }
.tag--review   { background: var(--navy-10); color: var(--navy-70); }
.tag--rejected { background: #ffd7d9; color: #a2191f; }
.tag--draft    { background: #e0e0e0; color: #393939; }

/* ────────────────────────────────────────────────────────────
   12. Data table
   ──────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); }
.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; letter-spacing: .16px; }
.tbl th {
  text-align: left; font-weight: 600; white-space: nowrap;
  background: var(--cds-layer-accent-01); color: var(--cds-text-primary);
  padding: var(--sp-04) var(--sp-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.tbl td {
  padding: var(--sp-04) var(--sp-05);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  vertical-align: middle;
}
.tbl tbody tr:hover { background: var(--cds-layer-hover-01); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl__num { font-variant-numeric: tabular-nums; text-align: right; }

/* ────────────────────────────────────────────────────────────
   13. Notifications & alerts
   ──────────────────────────────────────────────────────────── */
.note {
  display: flex; gap: var(--sp-04);
  padding: var(--sp-05);
  border-left: 3px solid var(--cds-support-info);
  background: var(--cds-notification-background-info);
  font-size: .875rem; letter-spacing: .16px;
}
.note i        { flex: none; margin-top: 2px; color: var(--cds-support-info); }
.note__t       { font-weight: 600; margin-bottom: var(--sp-02); }
.note ul       { margin: var(--sp-03) 0 0; padding-left: var(--sp-06); }
.note--ok      { border-left-color: var(--cds-support-success); background: var(--cds-notification-background-success); }
.note--ok i    { color: var(--cds-support-success); }
.note--warn    { border-left-color: var(--cds-support-warning); background: var(--cds-notification-background-warning); }
.note--warn i  { color: #8a6100; }
.note--error   { border-left-color: var(--cds-support-error); background: var(--cds-notification-background-error); }
.note--error i { color: var(--cds-support-error); }

/* ────────────────────────────────────────────────────────────
   14. Map
   ──────────────────────────────────────────────────────────── */
.map { width: 100%; height: 22rem; background: var(--cds-layer-02); border: 1px solid var(--cds-border-subtle-01); }
.map--tall { height: 32rem; }
.map--full { height: calc(100vh - var(--shell-h) - 3px); border: 0; }
.leaflet-container { font-family: var(--font-sans); }
.leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.leaflet-popup-content { margin: 0; font-family: var(--font-sans); }
.leaflet-popup-tip { border-radius: 0; }
.leaflet-bar a { border-radius: 0 !important; color: var(--cds-text-primary) !important; }

.pop { width: 15rem; }
.pop__hd { padding: var(--sp-04); border-bottom: 1px solid var(--cds-border-subtle-01); }
.pop__bd { padding: var(--sp-04); display: flex; flex-direction: column; gap: var(--sp-03); }
.pop__t  { font-size: .875rem; font-weight: 600; }
.pop__s  { font-size: .75rem; color: var(--cds-text-secondary); }

/* Map pins — status-coloured teardrops drawn as divIcons */
.pin {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.pin i { transform: rotate(45deg); color: #fff; font-size: .625rem; }
.pin--verified { background: var(--cds-support-success); }
.pin--pending  { background: #b28600; }
.pin--update   { background: var(--navy-60); }
.pin--flagged  { background: var(--cds-support-error); }
.pin--muted    { background: #6f6f6f; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-05); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-03); font-size: .75rem; color: var(--cds-text-secondary); }
.legend b { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ────────────────────────────────────────────────────────────
   15. Progress indicator (permit / registration steps)
   ──────────────────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 0; }
@media (min-width: 42rem) { .steps { flex-direction: row; } }
.step { display: flex; gap: var(--sp-04); flex: 1; padding: var(--sp-04) var(--sp-05) var(--sp-05) 0; position: relative; }
.step__mark { flex: none; width: 1rem; height: 1rem; margin-top: 2px; border-radius: 50%;
              border: 1px solid var(--cds-border-strong-01); display: grid; place-items: center;
              font-size: .5rem; color: #fff; background: var(--cds-layer-01); }
.step__t { font-size: .875rem; font-weight: 600; letter-spacing: .16px; }
.step__d { font-size: .75rem; color: var(--cds-text-helper); margin-top: 2px; }
.step--done    .step__mark { background: var(--navy-60); border-color: var(--navy-60); }
.step--current .step__mark { border-color: var(--navy-60); border-width: 4px; }
.step--current .step__t { color: var(--navy-60); }
.step--todo    .step__t { color: var(--cds-text-secondary); font-weight: 400; }
.step--fail    .step__mark { background: var(--cds-support-error); border-color: var(--cds-support-error); }
@media (min-width: 42rem) {
  .step::after { content: ''; position: absolute; left: 1.5rem; right: var(--sp-03); top: 9px;
                 height: 1px; background: var(--cds-border-subtle-01); }
  .step:last-child::after { display: none; }
}

/* Vertical timeline (permit history, activity feed) */
.tline { display: flex; flex-direction: column; }
.tline__i { display: flex; gap: var(--sp-05); padding-bottom: var(--sp-06); position: relative; }
.tline__i::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 1px; background: var(--cds-border-subtle-01); }
.tline__i:last-child { padding-bottom: 0; }
.tline__i:last-child::before { display: none; }
.tline__dot { flex: none; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%;
              background: var(--cds-layer-01); border: 3px solid var(--cds-border-strong-01); z-index: 1; }
.tline__i--ok      .tline__dot { border-color: var(--cds-support-success); }
.tline__i--info    .tline__dot { border-color: var(--navy-60); }
.tline__i--warn    .tline__dot { border-color: #b28600; }
.tline__i--bad     .tline__dot { border-color: var(--cds-support-error); }
.tline__t { font-size: .875rem; font-weight: 600; letter-spacing: .16px; }
.tline__b { font-size: .875rem; color: var(--cds-text-secondary); margin-top: 2px; }
.tline__ts{ font-size: .75rem; color: var(--cds-text-helper); margin-top: var(--sp-02); }

/* ────────────────────────────────────────────────────────────
   16. Definition list (property / permit facts)
   ──────────────────────────────────────────────────────────── */
.facts { display: grid; gap: 1px; background: var(--cds-border-subtle-01); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.fact  { background: var(--cds-layer-01); padding: var(--sp-05); min-width: 0; }
.fact__k { font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); margin-bottom: var(--sp-02); }
.fact__v { font-size: .875rem; letter-spacing: .16px; overflow-wrap: anywhere; }
.fact__v--mono { font-family: var(--font-mono); }

/* ────────────────────────────────────────────────────────────
   17. Filters & search
   ──────────────────────────────────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-05); align-items: center; margin-bottom: var(--sp-06); }
.searchbox { display: flex; flex: 1 1 18rem; min-width: 0; border: 1px solid var(--cds-border-subtle-01); background: var(--cds-field-01); }
.searchbox i { display: grid; place-items: center; width: 3rem; flex: none; color: var(--cds-icon-secondary); }
.searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; height: 46px; padding-right: var(--sp-05);
                   font-family: var(--font-sans); font-size: .875rem; letter-spacing: .16px; }
.searchbox input:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

.switcher { display: flex; border: 1px solid var(--navy-60); }
.switcher a {
  padding: var(--sp-04) var(--sp-05); font-size: .875rem; letter-spacing: .16px;
  color: var(--navy-60); text-decoration: none; background: transparent;
  border-right: 1px solid var(--navy-60); white-space: nowrap;
}
.switcher a:last-child { border-right: 0; }
.switcher a:hover  { background: var(--navy-10); }
.switcher a.active { background: var(--navy-60); color: #fff; }

/* ────────────────────────────────────────────────────────────
   18. Empty state
   ──────────────────────────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-04);
  padding: var(--sp-10) var(--sp-05);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
}
.empty__i { width: 3rem; height: 3rem; display: grid; place-items: center;
            background: var(--navy-10); color: var(--navy-60); font-size: 1.25rem; }
.empty__t { font-size: 1rem; font-weight: 600; }
.empty__b { font-size: .875rem; color: var(--cds-text-secondary); max-width: 42ch; }

/* ────────────────────────────────────────────────────────────
   19. Footer
   ──────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
  padding: var(--sp-07) var(--sp-05);
  font-size: .75rem; color: var(--cds-text-secondary);
}
.foot__in { max-width: 1584px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--sp-05); align-items: center; }

/* ────────────────────────────────────────────────────────────
   20. Utilities
   ──────────────────────────────────────────────────────────── */
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--sp-03); }
.mb-5 { margin-bottom: var(--sp-05); }
.mb-6 { margin-bottom: var(--sp-06); }
.mb-7 { margin-bottom: var(--sp-07); }
.mt-5 { margin-top: var(--sp-05); }
.mt-6 { margin-top: var(--sp-06); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; z-index: 9999;
  padding: var(--sp-04) var(--sp-05); background: var(--navy-60); color: #fff;
}
.skip:focus { left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .shell, .foot, .toolbar, .g-btn, .flag-strip { display: none !important; }
  .tile, .plate { break-inside: avoid; }
  body { background: #fff; }
}