/* frontend/css/allied.css — AL-006 · Allied Compliance shelf + per-law overviews
 *
 * Visual contract: Artboard-01 (shelf), -02 (PT overview), -06 (LWF overview),
 * docs/Allied_Law_Build/ui/ — reference files, never shipped. Every token is
 * SCOPED under .allied so the surrounding shell keeps its own theme; nothing
 * here restyles a shared element. Fonts load from the stylesheet link in
 * index.html, with full fallback stacks.
 */
.allied {
  --al-ledger:#F4F5F0; --al-navy:#1B2A41; --al-rule:#C4453A;
  --al-ink:#3A4150; --al-muted:#8A8F98; --al-faint:#9BA0A8; --al-mono:#7A8292;
  --al-paper:#FFFFFF; --al-line:#E0DACB; --al-line-soft:#F0EDE4; --al-strip:#F8F6F0;
  --al-teal:#0F6B63; --al-teal-bg:#E8F1EF; --al-teal-line:#C5DBD6;
  --al-amber:#8A6A1F; --al-amber-bg:#FBF3DC; --al-amber-line:#EAD9A8;
  --al-grey:#6B7078; --al-grey-bg:#EEECE6; --al-grey-line:#DDD8CC;
  --al-red-bg:#FBEDEB; --al-red-line:#EBC3BE;
  --al-info:#2C5F8A; --al-info-bg:#E8F0F7; --al-info-line:#C9DAEA;
  --al-serif:'Spectral', Georgia, 'Times New Roman', serif;
  --al-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --al-monof:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background:var(--al-ledger); color:var(--al-ink); font:14px/1.5 var(--al-sans);
  margin:-4px; padding:26px 34px 40px; min-height:100%; display:flex; flex-direction:column; gap:18px; box-sizing:border-box;
}
.allied *, .allied *::before, .allied *::after { box-sizing:border-box; }
.allied a { color:var(--al-navy); } .allied a:hover { color:var(--al-rule); }
.allied .crumb { font-size:12px; color:var(--al-muted); }
.allied h1 { margin:2px 0 0; font:600 27px var(--al-serif); color:var(--al-navy); }
.allied .lede { font-size:13px; color:var(--al-muted); margin-top:4px; max-width:70ch; }
.allied .head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.allied .code { font:11px var(--al-monof); background:var(--al-navy); color:var(--al-ledger); border-radius:4px; padding:3px 8px; }
.allied .ro { font-size:11px; background:var(--al-grey-bg); color:var(--al-grey); border:1px solid var(--al-grey-line); border-radius:4px; padding:3px 8px; }
.allied .info { background:var(--al-info-bg); border:1px solid var(--al-info-line); border-radius:8px; padding:10px 14px; font-size:12.5px; color:var(--al-info); }
.allied .tier { font-size:11px; letter-spacing:1.4px; color:var(--al-muted); font-weight:600; }
.allied .mono { font:11px var(--al-monof); color:var(--al-mono); }
.allied .grid4 { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:16px; }
.allied .grid3 { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:16px; }

/* chips */
.allied .chip { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.2px; border-radius:4px; padding:2px 7px; border:1px solid transparent; white-space:nowrap; text-transform:uppercase; }
.allied .chip--teal { background:var(--al-teal-bg); color:var(--al-teal); border-color:var(--al-teal-line); }
.allied .chip--amber { background:var(--al-amber-bg); color:var(--al-amber); border-color:var(--al-amber-line); }
.allied .chip--grey { background:var(--al-grey-bg); color:var(--al-grey); border-color:var(--al-grey-line); }
.allied .chip--red { background:var(--al-red-bg); color:var(--al-rule); border-color:var(--al-red-line); }

/* shelf cards (Artboard-01) */
.allied .acard { background:var(--al-paper); border:1px solid var(--al-line); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.allied .acard .t { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.allied .acard .name { font:600 17px var(--al-serif); color:var(--al-navy); }
.allied .acard .copy { font-size:12.5px; line-height:1.5; }
.allied .acard .open { font-size:12.5px; font-weight:600; margin-top:auto; background:none; border:0; padding:0; color:var(--al-navy); cursor:pointer; text-align:left; font-family:inherit; }
.allied .acard .open:hover { color:var(--al-rule); }
.allied .acard--muted .name { color:var(--al-navy); }
.allied .acard--release { border:1.5px dashed #D8D3C6; background:transparent; align-items:center; justify-content:center; text-align:center; color:var(--al-faint); font-size:12.5px; }

/* per-site verdict cards (Artboards 02/06 top row) */
.allied .vcard-site { background:var(--al-paper); border:1px solid var(--al-line); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.allied .vcard-site--levied { border:1.5px solid var(--al-teal); }
.allied .vcard-site--blocked_sentinel, .allied .vcard-site--state_unmapped { border:1.5px solid var(--al-red-line); }
.allied .vcard-site .t { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.allied .vcard-site .name { font:600 16px var(--al-serif); color:var(--al-navy); overflow-wrap:anywhere; }
.allied .vcard-site .copy { font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.allied .vcard-site .copy .inforce { margin:4px 0 6px; padding-left:16px; }
.allied .vcard-site .copy .inforce li { margin:1px 0; }

/* placeholders for panels later tasks own */
.allied .later { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:16px; }
.allied .later .ph { border:1.5px dashed #D8D3C6; border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.allied .later .ph .k { font-size:11px; letter-spacing:1.4px; color:var(--al-muted); font-weight:600; text-transform:uppercase; }
.allied .later .ph .v { font-size:12.5px; color:var(--al-faint); }
/* AL T4 · PT money panels (AL-007/008) — solid frame: these carry computed figures */
.allied .ptmoney { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:16px; }
.allied .ptmoney .ph { border:1.5px solid #D8D3C6; border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.allied .ptmoney .ph .k { font-size:11px; letter-spacing:1.4px; color:var(--al-muted); font-weight:600; text-transform:uppercase; }
.allied .ptmoney .ph .v { font-size:12.5px; color:var(--al-ink, inherit); }

.allied .strip { background:var(--al-strip); border:1px solid #E7E3D9; border-radius:8px; padding:10px 14px; font-size:12px; color:var(--al-grey); }
.allied .strip b { color:var(--al-navy); }
.allied .err { background:var(--al-red-bg); border:1px solid var(--al-red-line); color:var(--al-rule); border-radius:8px; padding:12px 14px; }
@media (max-width: 720px) { .allied { padding:18px 16px 32px; } }

/* nav (Artboard-01 sidebar group) — the NEW badge; muted laws use theme.css .nav-item.soon */
.nav-new { font-size:9px; font-weight:600; background:#C4453A; color:#FFFFFF; border-radius:3px; padding:1px 5px; margin-left:6px; letter-spacing:.4px; }

/* AL T5 · dues, returns, registrations, arrears (AL-010/011/012) */
.allied .t5 { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap:16px; }
.allied .t5 section .ph { border:1.5px solid #D8D3C6; border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.allied .t5 .ph .k { font-size:11px; letter-spacing:1.4px; color:var(--al-muted); font-weight:600; text-transform:uppercase; }
.allied .t5 .ph .v { font-size:12.5px; line-height:1.5; }
.allied .t5 .ph .v.adv { color:var(--al-muted); font-style:italic; padding-left:8px; }
.allied .t5 .t5inline { margin-top:8px; }
.allied .t5 .t5f { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; border:1px dashed #D8D3C6; border-radius:10px; padding:12px; }
.allied .t5 .t5f label { display:flex; flex-direction:column; gap:4px; font-size:12px; }
.allied .t5 .t5f textarea { min-width:min(100%, 320px); }
.allied .t5 .t5act { margin-left:6px; padding:2px 8px; font-size:11.5px; }

/* ══ AL-UX-1 · the Professional Tax application (AL_UX_DIRECTIVE_2026-10-06, approved 07-Oct-2026) ══
 * Every rule scoped under .allied.ux1; LWF and the shelf keep the rules above. */
.allied.ux1 { font-size:15px; gap:20px; }
.allied.ux1 h1 { font-size:30px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.allied.ux1 h2 { margin:0; font:600 17px var(--al-sans); color:var(--al-navy); }
.allied.ux1 h3 { margin:0; font:600 19px var(--al-serif); color:var(--al-navy); }
.allied.ux1 .ux-sub { font-size:13px; color:var(--al-muted); }
.allied.ux1 .mono { font-family:var(--al-monof); }


.allied.ux1 .ux-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.allied.ux1 .ux-asof { text-align:right; font:600 15px var(--al-sans); color:var(--al-navy); }
.allied.ux1 .ux-asof small { display:block; font-weight:400; font-size:12.5px; color:var(--al-muted); }

/* the horizontal nav inside PT */
.allied.ux1 .ux-tabs { display:flex; gap:4px; border-bottom:1.5px solid var(--al-line); overflow-x:auto; scrollbar-width:thin; }
.allied.ux1 .ux-tab { flex:none; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1.5px; padding:10px 16px; font:500 14.5px var(--al-sans); color:var(--al-ink); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.allied.ux1 .ux-tab:hover { color:var(--al-navy); background:var(--al-strip); }
.allied.ux1 .ux-tab.is-on { color:var(--al-navy); font-weight:600; border-bottom-color:var(--al-navy); }
.allied.ux1 .ux-badge { min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--al-rule); color:#fff; font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }

.allied.ux1 .t5.ux-body { display:flex; flex-direction:column; gap:20px; }

/* cards */
.allied.ux1 .ux-card { background:var(--al-paper); border:1px solid var(--al-line); border-radius:12px; padding:20px 22px; display:flex; flex-direction:column; gap:12px; }
.allied.ux1 .ux-card-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between; }
.allied.ux1 .ux-card-h > .ux-ref { flex-basis:100%; }

/* needs attention */
.allied.ux1 .ux-attn { display:flex; flex-direction:column; gap:10px; }
.allied.ux1 .ux-attn h2 { display:flex; align-items:center; gap:8px; }
.allied.ux1 .ux-count { background:var(--al-rule); color:#fff; border-radius:10px; font-size:12px; padding:1px 8px; }
.allied.ux1 .ux-attn-row { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; background:var(--al-paper); border:1px solid var(--al-line); border-left:5px solid var(--al-amber); border-radius:10px; padding:14px 18px; font-size:14.5px; }
.allied.ux1 .ux-attn--red { border-left-color:var(--al-rule); background:var(--al-red-bg); border-color:var(--al-red-line); }
.allied.ux1 .ux-attn--clear { background:var(--al-teal-bg); border:1px solid var(--al-teal-line); border-radius:10px; padding:14px 18px; }

/* per-state clearance */
.allied.ux1 .ux-states { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:16px; }
.allied.ux1 .ux-fig { display:flex; gap:28px; flex-wrap:wrap; }
.allied.ux1 .ux-fig > div { display:flex; flex-direction:column; }
.allied.ux1 .ux-k { font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--al-muted); font-weight:600; }
.allied.ux1 .ux-n { font:600 28px var(--al-serif); color:var(--al-navy); line-height:1.15; }
.allied.ux1 .ux-bar { height:8px; background:var(--al-line-soft); border-radius:4px; overflow:hidden; }
.allied.ux1 .ux-bar span { display:block; height:100%; background:var(--al-teal); border-radius:4px; }
.allied.ux1 .ux-tally { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.allied.ux1 .ux-note { font-size:14px; color:var(--al-ink); background:var(--al-strip); border-radius:8px; padding:10px 12px; }

.allied.ux1 .ux-pill { display:inline-block; border-radius:999px; padding:3px 10px; font-size:12.5px; font-weight:600; border:1px solid; white-space:nowrap; }
.allied.ux1 .ux-pill--teal { color:var(--al-teal); background:var(--al-teal-bg); border-color:var(--al-teal-line); }
.allied.ux1 .ux-pill--amber { color:var(--al-amber); background:var(--al-amber-bg); border-color:var(--al-amber-line); }
.allied.ux1 .ux-pill--red { color:var(--al-rule); background:var(--al-red-bg); border-color:var(--al-red-line); }
.allied.ux1 .ux-pill--grey { color:var(--al-grey); background:var(--al-grey-bg); border-color:var(--al-grey-line); }
.allied.ux1 .ux-pill--info { color:var(--al-info); background:var(--al-info-bg); border-color:var(--al-info-line); }

/* coming up */
.allied.ux1 .ux-coming { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:16px; }
.allied.ux1 .ux-up { display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:center; padding:10px 0; border-top:1px solid var(--al-line-soft); font-size:14.5px; }
.allied.ux1 .ux-up-d { font:600 17px var(--al-serif); color:var(--al-navy); line-height:1.1; }
.allied.ux1 .ux-up-d small { display:block; font:400 12px var(--al-sans); color:var(--al-muted); }
.allied.ux1 .ux-up-a { font-weight:600; color:var(--al-navy); }
.allied.ux1 .ux-gap { padding-top:8px; border-top:1px solid var(--al-line-soft); }

/* due-date table (div rows so an action's form opens inside its row) */
.allied.ux1 .ux-row { display:grid; grid-template-columns:96px minmax(110px, 1fr) 110px 90px minmax(200px, 2fr) 160px; gap:8px 14px; align-items:center; padding:11px 0; border-top:1px solid var(--al-line-soft); font-size:14.5px; }
.allied.ux1 .ux-row--h { font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--al-muted); font-weight:600; border-top:0; padding-bottom:4px; }
.allied.ux1 .ux-row--3 { grid-template-columns:1fr 1fr 1fr; }
.allied.ux1 .ux-row .t5inline, .allied.ux1 .ux-attn-row .t5inline { grid-column:1 / -1; flex-basis:100%; }
.allied.ux1 .ux-c-a { font-weight:600; }
.allied.ux1 .ux-c-x { justify-self:end; }
.allied.ux1 .ux-c-st { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.allied.ux1 .ux-c-st > .ux-ref { flex-basis:100%; }
@media (max-width:760px) {
  .allied.ux1 { padding:18px 16px 32px; }
  .allied.ux1 .ux-row { grid-template-columns:1fr 1fr; }
  .allied.ux1 .ux-row--h { display:none; }
  .allied.ux1 .ux-c-st, .allied.ux1 .ux-c-x { grid-column:1 / -1; }
}

/* actions look like actions */
.allied.ux1 .ux-btn { background:var(--al-navy); color:#fff; border:1px solid var(--al-navy); border-radius:8px; padding:9px 16px; font:600 14px var(--al-sans); cursor:pointer; white-space:nowrap; }
.allied.ux1 .ux-btn:hover { background:#24385a; }
.allied.ux1 .ux-btn:focus-visible, .allied.ux1 .ux-tab:focus-visible, .allied.ux1 .ux-i:focus-visible { outline:3px solid var(--al-info-line); outline-offset:2px; }
.allied.ux1 .ux-btn--quiet { background:var(--al-paper); color:var(--al-navy); }
.allied.ux1 .ux-btn--quiet:hover { background:var(--al-strip); }
.allied.ux1 .t5f { background:var(--al-strip); }
.allied.ux1 .t5f .btn[type=submit] { background:var(--al-navy); color:#fff; border-color:var(--al-navy); }

/* reference behind "i" */
.allied.ux1 .ux-i { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--al-faint); background:var(--al-paper); color:var(--al-grey); font:italic 600 13px var(--al-serif); line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; flex:none; vertical-align:middle; }
.allied.ux1 .ux-i[aria-expanded=true] { background:var(--al-navy); border-color:var(--al-navy); color:#fff; }
.allied.ux1 .ux-ref { font:400 13.5px/1.5 var(--al-sans); color:var(--al-ink); background:var(--al-strip); border-left:3px solid var(--al-faint); border-radius:6px; padding:10px 12px; max-width:70ch; }
.allied.ux1 h1 .ux-ref { flex-basis:100%; }

.allied.ux1 .ux-pending { font-size:13px; color:var(--al-amber); background:var(--al-amber-bg); border:1px solid var(--al-amber-line); border-radius:8px; padding:8px 12px; }
.allied.ux1 .ux-verdicts { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:16px; }
.allied.ux1 .t5f .err:empty { display:none; }

/* the global state filter (A1) */
.allied.ux1 .ux-filter { display:flex; gap:6px; flex-wrap:wrap; }
.allied.ux1 .ux-fopt { border:1.5px solid var(--al-line); background:var(--al-paper); color:var(--al-ink); border-radius:999px; padding:7px 16px; font:500 14px var(--al-sans); cursor:pointer; }
.allied.ux1 .ux-fopt:hover { border-color:var(--al-navy); }
.allied.ux1 .ux-fopt.is-on { background:var(--al-navy); border-color:var(--al-navy); color:#fff; font-weight:600; }
.allied.ux1 .ux-fopt:focus-visible { outline:3px solid var(--al-info-line); outline-offset:2px; }

/* list items (registrations, returns, arrears, sites) */
.allied.ux1 .ux-item { display:grid; grid-template-columns:minmax(0, 1fr) minmax(150px, auto) auto; gap:8px 16px; align-items:center; padding:14px 0; border-top:1px solid var(--al-line-soft); }
.allied.ux1 .ux-item-t { font:600 15.5px var(--al-sans); color:var(--al-navy); }
.allied.ux1 .ux-item-s { font-size:13.5px; color:var(--al-muted); margin-top:2px; }
.allied.ux1 .ux-item-st { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.allied.ux1 .ux-item-st > .ux-ref { flex-basis:100%; }
.allied.ux1 .ux-item-x { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.allied.ux1 .ux-item .t5inline { grid-column:1 / -1; }

/* next deductions, split per state */
.allied.ux1 .ux-up-list { display:flex; flex-direction:column; gap:4px; grid-column:2 / -1; }
.allied.ux1 .ux-split { display:flex; justify-content:space-between; gap:12px; }
.allied.ux1 .ux-split--tot { border-top:1px dashed var(--al-line); padding-top:4px; color:var(--al-muted); font-size:13px; }

.allied.ux1 .ux-row--comp { grid-template-columns:minmax(110px, 1.2fr) 70px 100px minmax(130px, 1.3fr) 70px minmax(170px, 1.4fr); }
.allied.ux1 .ux-row--ded { grid-template-columns:110px minmax(110px, 1fr) 110px minmax(120px, 1fr); }
.allied.ux1 .ux-fig--4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:16px; }
.allied.ux1 .ux-fig--4 .ux-n { display:flex; align-items:center; gap:8px; }
.allied.ux1 .ux-calm { background:var(--al-strip); }
.allied.ux1 .ux-err { background:var(--al-red-bg); border-color:var(--al-red-line); color:var(--al-rule); }
.allied.ux1 .ux-deact { background:var(--al-amber-bg); border-color:var(--al-amber-line); }
.allied.ux1 .ux-deact .ux-sub { color:var(--al-amber); }
.allied.ux1 .ux-attn-row > span { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.allied.ux1 .ux-attn-row > span > .ux-ref { flex-basis:100%; }
@media (max-width:760px) {
  .allied.ux1 .ux-item { grid-template-columns:1fr; }
  .allied.ux1 .ux-item-st, .allied.ux1 .ux-item-x { justify-content:flex-start; }
  .allied.ux1 .ux-row--comp, .allied.ux1 .ux-row--ded { grid-template-columns:1fr 1fr; }
}
.allied.ux1 .ux-paid { flex-basis:100%; order:3; font-size:13px; color:var(--al-muted); }
.allied.ux1 .ux-c-st > .ux-ref { order:4; }
.allied.ux1 .ux-paid .mono { white-space:nowrap; }
/* Computations month picker (AL-UX-1 ruling 3) */
.allied.ux1 .ux-mpick { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.allied.ux1 .ux-mpick select { font:500 14px var(--al-sans); padding:8px 10px; border:1.5px solid var(--al-line); border-radius:8px; background:var(--al-paper); color:var(--al-ink); }
.allied.ux1 .ux-mpick .ux-btn { padding:7px 12px; font-size:13px; }
.allied.ux1 .ux-btn:disabled { opacity:.4; cursor:not-allowed; }