:root {
  --ink: #0f1424;
  --ink-2: #3c4459;
  --ink-3: #5b6478;
  --line: #d9deea;
  --line-2: #b9c1d4;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --brand: #1d3fd8;
  --brand-ink: #ffffff;
  --brand-soft: #e8edff;
  --ok: #0b6b3a;
  --ok-soft: #e3f4ea;
  --bad: #a3221b;
  --bad-soft: #fcebea;
  --warn: #7a4b00;
  --warn-soft: #fff4dc;
  --res: #fbe9b7;
  --res-line: #b98a12;
  --com: #d8e2ff;
  --com-line: #4b67d8;
  --focus: #ff9d00;
  --radius: 12px;
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", "SF Arabic", Tahoma, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { line-height: 1.3; margin: 0; }
p { margin: 0; }
.muted { color: var(--ink-3); font-weight: 400; }
.small { font-size: .875rem; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

.notice { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid #f1d699; padding: 8px 20px; text-align: center; font-size: .9rem; }

.top { background: var(--panel); border-bottom: 1px solid var(--line); padding: 28px 0 22px; }
.eyebrow { font-size: .8rem; color: var(--brand); font-weight: 600; letter-spacing: .01em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 6px; }
.lede { color: var(--ink-2); max-width: 62ch; margin-top: 8px; font-size: 1.05rem; }
.engine { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .875rem; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.engine .dot { width: 9px; height: 9px; border-radius: 50%; background: #c0c6d4; }
.engine.ready .dot { background: #17a35a; }
.engine.failed .dot { background: var(--bad); }

main { padding: 22px 20px 40px; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 20px; overflow-x: auto; }
.tabs [role="tab"] { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; color: var(--ink-3); cursor: pointer; white-space: nowrap; min-height: 44px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tabs [role="tab"]:hover { color: var(--ink); }
.tab-k { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); font-size: .75rem; margin-inline-end: 4px; }
[aria-selected="true"] .tab-k { background: var(--brand); color: #fff; border-color: var(--brand); }
[role="tabpanel"]:focus-visible { outline-offset: 6px; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 18px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 0; }
.card + .card { margin-top: 18px; }
.stack > .card + .card { margin-top: 0; }
fieldset.card { min-inline-size: 0; }
legend { font-weight: 700; font-size: 1.1rem; padding: 0 4px; display: flex; align-items: center; gap: 8px; }
.step { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .85rem; }
.card-h { font-size: 1.1rem; margin-bottom: 8px; }
.hint { color: var(--ink-3); font-size: .9rem; margin: 4px 0 12px; }

.choices { display: grid; gap: 8px; margin-top: 10px; }
.choice { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 48px; background: var(--panel); }
.choice:hover { border-color: var(--line-2); }
.choice input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; flex: none; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice .c-t { font-weight: 600; }
.choice .c-s { display: block; font-size: .85rem; color: var(--ink-3); }
.choice .c-ic { font-size: 1.4rem; width: 32px; text-align: center; flex: none; }
.choice .addr { font-family: ui-monospace, "SF Mono", Menlo, monospace; direction: ltr; unicode-bidi: isolate; }

.address label { font-weight: 600; font-size: .95rem; }
.address-row { display: flex; gap: 8px; margin-top: 4px; }
.address input { flex: 1; font: inherit; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; min-height: 46px; text-align: left; }
.address input[aria-invalid="true"] { border-color: var(--bad); }
.help { font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.error { font-size: .875rem; color: var(--bad); margin-top: 4px; font-weight: 600; }
.parcels { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }

.btn-primary, .btn-secondary { font: inherit; font-weight: 700; border-radius: 10px; cursor: pointer; min-height: 48px; padding: 10px 20px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); border: 0; font-size: 1.1rem; width: 100%; }
.btn-primary:hover:not(:disabled) { background: #1632b0; }
.btn-secondary { background: var(--panel); color: var(--brand); border: 1.5px solid var(--brand); }
.btn-secondary:hover:not(:disabled) { background: var(--brand-soft); }
button:disabled { opacity: .55; cursor: not-allowed; }

.map-card svg { width: 100%; height: auto; display: block; }
.map-card .parcel { cursor: pointer; }
.map-card .parcel rect { stroke-width: 1.5; transition: stroke-width .1s; }
.map-card .parcel.res rect { fill: var(--res); stroke: var(--res-line); }
.map-card .parcel.com rect { fill: var(--com); stroke: var(--com-line); }
.map-card .parcel[aria-checked="true"] rect { stroke: var(--brand); stroke-width: 4; }
.map-card .parcel:focus { outline: none; }
.map-card .parcel:focus-visible rect { stroke: var(--focus); stroke-width: 4; }
.map-card .p-n { font-weight: 700; font-size: 15px; fill: var(--ink); }
.map-card .p-s { font-size: 12px; fill: var(--ink-2); }
.map-card .street { fill: #e3e6ee; }
.map-card .st-t { font-size: 12px; fill: var(--ink-2); font-weight: 600; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); margin-top: 8px; }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-inline-end: 4px; }
.sw.res { background: var(--res); border: 1px solid var(--res-line); }
.sw.com { background: var(--com); border: 1px solid var(--com-line); }
.sw.sel { background: #fff; border: 3px solid var(--brand); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 10px 0 0; }
.facts div { border-inline-start: 3px solid var(--line); padding-inline-start: 10px; }
.facts dt { font-size: .8rem; color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 700; font-size: 1.05rem; }

.result { margin-top: 22px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--panel); padding: 20px; }
.result:focus { outline: none; }
.result:focus-visible { outline: 3px solid var(--focus); }
.result.ok { border-color: #8fd0ab; }
.result.bad { border-color: #eba7a2; }
.verdict { display: flex; align-items: center; gap: 12px; }
.verdict .badge { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; font-weight: 700; flex: none; }
.ok .badge { background: var(--ok-soft); color: var(--ok); }
.bad .badge { background: var(--bad-soft); color: var(--bad); }
.verdict h2 { font-size: 1.45rem; }
.ok .verdict h2 { color: var(--ok); }
.bad .verdict h2 { color: var(--bad); }
.verdict-sub { color: var(--ink-2); margin-top: 2px; }
.findings { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.findings li { border: 1px solid var(--line); border-inline-start: 4px solid var(--bad); border-radius: 8px; padding: 10px 14px; background: #fffafa; }
.findings .f-r { font-weight: 600; }
.findings .f-c { font-size: .85rem; color: var(--ink-3); margin-top: 2px; }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }
.alt { margin-top: 16px; background: var(--brand-soft); border-radius: 10px; padding: 12px 14px; }
.alt p + p { margin-top: 6px; }
.linkish { font: inherit; background: none; border: 0; color: var(--brand); text-decoration: underline; cursor: pointer; padding: 2px; font-weight: 600; }
.meta { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); }
.meta b { color: var(--ink-2); font-weight: 600; }
.disclaimer { margin-top: 10px; font-size: .85rem; color: var(--ink-2); }

.officer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .officer-grid { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; }
.kv dt { color: var(--ink-3); font-size: .9rem; }
.kv dd { margin: 0; font-weight: 600; }
.match { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.match.no { background: var(--bad-soft); color: var(--bad); }
.pill { display: inline-block; font-size: .8rem; border-radius: 999px; padding: 1px 10px; font-weight: 700; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-3); }

.tablewrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; }
table.rules { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
#rules-table { min-width: 1000px; }
#rules-table td:nth-child(8) { min-width: 240px; }
#rules-table td:nth-child(9) { min-width: 170px; }
table.rules th, table.rules td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
table.rules thead th { background: var(--bg); font-size: .8rem; color: var(--ink-2); }
table.rules thead th.in { border-top: 3px solid var(--com-line); }
table.rules thead th.out { border-top: 3px solid #17a35a; }
table.rules tbody tr:last-child td { border-bottom: 0; }
table.rules td.feel { font-family: ui-monospace, "SF Mono", Menlo, monospace; text-align: start; white-space: nowrap; }
table.rules td.feel bdi { direction: ltr; unicode-bidi: isolate; }
table.rules tr.hl td { background: var(--bad-soft); }
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.inline-result { font-weight: 600; }
.inline-result.ok { color: var(--ok); }
.issue { margin-top: 14px; border: 1.5px solid #eba7a2; background: var(--bad-soft); border-radius: 10px; padding: 14px 16px; }
.issue h3 { font-size: 1.05rem; color: var(--bad); }
.issue p { margin-top: 6px; }
.issue .eng { font-size: .8rem; color: var(--ink-3); direction: ltr; text-align: right; unicode-bidi: plaintext; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.foot { border-top: 1px solid var(--line); background: var(--panel); padding: 22px 0 30px; font-size: .9rem; color: var(--ink-2); }
.foot p + p { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .choice:has(input:checked), .map-card .parcel[aria-checked="true"] rect { outline: 3px solid Highlight; }
}
.cond-h { font-size: 1rem; margin-top: 16px; }
.findings.cond li { border-inline-start-color: #c48a00; background: #fffcf3; }
.f-q { margin: 6px 0 0; padding: 4px 10px; border-inline-start: 2px solid var(--line-2); color: var(--ink-2); font-size: .9rem; }
.sources { margin-top: 6px; color: var(--ink-3); }
.sources a { color: var(--brand); }
@media (max-width: 480px) { .tabs [role="tab"] { padding: 10px 6px; font-size: .95rem; } .tab-k { display: none; } }