/* Athar's shared web design system. Carbon-inspired, with Athar brand colours.
   Logical properties keep the same hierarchy in Arabic RTL and English LTR.
   Map-specific styles in app.css deliberately retain higher specificity. */
:root {
  --bg:#f4f4f4; --panel:#fff; --card:#fff; --ink:#161616; --muted:#525252;
  --line:#e0e0e0; --accent:#c04018; --accent-soft:#fff0e9; --accent-ink:#fff;
  --navy:#262626; --radius:0; --shadow:none;
}
.athar-ui [hidden] {display:none!important}
.athar-ui {background:var(--bg);color:var(--ink);font-family:'Segoe UI',Tahoma,system-ui,sans-serif;line-height:1.6}
.athar-ui :where(h1,h2,h3) {font-weight:500;letter-spacing:0;overflow-wrap:anywhere}
.athar-ui :where(h1) {font-size:28px;line-height:1.45}
.athar-ui :where(h2) {font-size:20px}
.athar-ui :where(a) {color:var(--accent);text-underline-offset:3px}
.athar-ui :where(button,.btn,input,select,textarea,dialog,.panel,.card,.map,.table-wrap,.ops-card,.ops-add,.stat,.note,.alert-item,.src,.pos,.badge,.chip,.code,#toast) {border-radius:0;box-shadow:none}
.athar-ui :where(button,.btn) {min-height:40px;padding:10px 16px;font-weight:500;justify-content:center}
.athar-ui :where(button,.btn):hover {filter:brightness(.94)}
.athar-ui :where(button):active {transform:none}
.athar-ui :where(button.secondary,.btn.secondary) {background:#e0e0e0;color:#161616}
.athar-ui :where(button:disabled,.btn:disabled) {opacity:.5;cursor:not-allowed}
.athar-ui :where(input:not([type=checkbox]):not([type=radio]),select,textarea) {background:#f4f4f4;border:0;border-bottom:1px solid #8d8d8d;min-height:40px;padding:10px 12px;max-width:100%;min-width:0}
.athar-ui :where(input[type=checkbox],input[type=radio]) {width:18px;height:18px;accent-color:var(--accent);flex:none}
.athar-ui :where(label) {color:var(--muted);line-height:1.7}
.athar-ui :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.athar-ui :where(input,select,textarea):focus {outline-color:var(--accent)}
.athar-ui :where(.panel,.card) {padding:24px;border:1px solid var(--line);background:#fff;min-width:0}
.athar-ui :where(.panel>h1,.panel>h2) {margin-block-end:16px}
.athar-ui :where(.stack) {gap:20px}
.athar-ui .panel.stack>button {align-self:flex-start;min-width:112px}
.athar-ui :where(.grid) {gap:24px}
.athar-ui :where(.grid>*,.row>*,.stats>*) {min-width:0}
.athar-ui .panel .row>:is(h2,h3) {min-width:max-content}
.athar-ui .grid.dash {grid-template-columns:minmax(280px,320px) minmax(0,1fr)}
.athar-ui :where(.ops-card,.ops-add) {padding:20px;background:#fff;border:1px solid var(--line)}
.athar-ui :where(.ops-form) {gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.athar-ui :where(.ops-json) {background:#f4f4f4;border-inline-start:3px solid #8d8d8d;font-size:12px;padding:16px}
.athar-ui :where(.stats) {gap:1px;background:#fff;border:1px solid var(--line)}
.athar-ui .panel.stack>.stats {grid-template-columns:repeat(4,minmax(0,1fr))}
.athar-ui :where(.stat) {padding:20px;background:#fff;border:0}
.athar-ui :where(.stat b) {font-size:32px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.3}
.athar-ui :where(table) {font-size:13px}
.athar-ui :where(th,td) {padding:12px 16px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.athar-ui :where(th) {background:#e0e0e0;color:#161616;font-weight:600}
.athar-ui :where(tbody tr:hover) {background:#f4f4f4}
.athar-ui :where(.table-wrap) {border:1px solid var(--line);max-width:100%;overscroll-behavior-inline:contain}
.athar-ui :where(.badge,.chip,.pos) {padding:3px 8px;font-size:12px;font-weight:500}
.athar-ui :where(.segmented,.segments) {padding:0;gap:0;background:#e0e0e0;border-radius:0;border-bottom:1px solid #8d8d8d;flex-wrap:wrap}
.athar-ui :is(.segmented button,.segments button) {border-radius:0;border-bottom:3px solid transparent;box-shadow:none;min-height:44px}
.athar-ui :is(.segmented button.on,.segments button.on) {border-bottom-color:var(--accent);background:#fff}
.athar-ui .legend .key {border-radius:0;background:#f4f4f4;padding:4px 8px}
.athar-ui .device-list li {border-radius:0}
.athar-ui :where(.device-list) {padding:0;gap:1px}
.athar-ui .device-list li.device-card {border-radius:0;box-shadow:none;padding:16px;border:0;border-bottom:1px solid var(--line)}
.athar-ui :where(.note) {border:0;border-inline-start:3px solid var(--warn,#c9811f);padding:12px 16px;line-height:1.8}
.athar-ui :where(dialog) {padding:24px;border-top:3px solid var(--accent);max-height:90dvh;overflow:auto}
.athar-ui :where(dialog::backdrop) {background:#16161680;backdrop-filter:none}
.athar-ui :where(.local-search input) {border-radius:0}
.athar-ui :where(.local-search-results button) {justify-content:flex-start}
.athar-ui #topbar {background:#262626;border:0;color:white;height:56px;padding:8px 24px}
.athar-ui #topbar a {color:white}
.athar-ui #topbar .brand {font-weight:600;letter-spacing:0}
.athar-ui #topbar button {border:1px solid #6f6f6f;background:transparent;color:white;min-height:32px;padding:5px 12px;border-radius:0}
.athar-ui #nav {top:56px;background:white;width:208px;padding:16px 0;border-color:var(--line)}
.athar-ui #nav a {border-radius:0;margin:0;padding:12px 20px;font-size:13px}
.athar-ui #nav a.active {background:var(--accent-soft);color:#9f3313;border-inline-start:3px solid var(--accent)}
.athar-ui #nav button {border-radius:0}
.athar-ui .nav-group summary {padding:12px 16px;font-size:13px}
.athar-ui.signed-in #view {margin-inline-start:208px;padding:28px 32px;max-width:none}
.athar-ui:not(.signed-in) #view {max-width:560px;padding:24px;margin-inline:auto}
.athar-ui .card.auth {margin:40px auto;border-top:3px solid var(--accent)}
.athar-ui .scenario-map {height:400px;min-height:280px;margin-block:16px}
.athar-ui .scenario-detail {padding:16px;background:#f4f4f4;color:var(--ink);border-inline-start:3px solid #8d8d8d;margin-block:16px}
.athar-ui .scenario-features {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px;margin-block:24px}
.athar-ui .response-card {margin-block:12px}
/* Browser field companion: retain semantic GPS / SOS / learning colours. */
.athar-field {--blue:#c04018;--blue-soft:#fff0e9;--soft:#e0e0e0}
.athar-field .screen {gap:16px;padding-block-start:24px}
.athar-field #home>.card:first-of-type {border-top:3px solid var(--accent)}
.athar-field .card.sos {border-inline-start:3px solid var(--red)}
.athar-field .btn {min-height:48px}
.athar-field .segments button.on,.athar-field #source-seg button.on {background:#fff;color:var(--accent);border-bottom-color:var(--accent)}
.athar-field .lang-switch {border-radius:0;color:var(--accent)}
.athar-field table.caps {table-layout:fixed}
.athar-download {margin:0;padding:24px 16px}
.athar-download main {max-width:560px;margin:40px auto;background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:0;padding:32px}
.athar-download #download {display:block;background:var(--accent);color:white;text-align:center;padding:16px;border-radius:0;text-decoration:none}
.athar-download small {overflow-wrap:anywhere;display:block;line-height:1.8}
.athar-download p {line-height:1.9}
@media(max-width:1100px) {
  .athar-ui.signed-in #view {padding:24px 16px}
  .athar-ui .grid.dash {grid-template-columns:1fr}
}
@media(max-width:760px) {
  .athar-ui #topbar {padding-inline:12px;gap:8px}
  .athar-ui #topbar .brand {font-size:13px;min-width:0}
  .athar-ui #topbar .brand::before {width:28px;height:28px;background-size:26px}
  .athar-ui #topbar>a:not(.brand) {font-size:11px!important}
  .athar-ui #topbar button {padding-inline:8px}
  .athar-ui #nav {width:240px}
  .athar-ui.signed-in #view {margin-inline-start:0;padding:20px 12px}
  .athar-ui :where(.panel,.card,.ops-card,.ops-add) {padding:16px}
  .athar-ui :where(h1) {font-size:24px}
  .athar-ui :where(.row) {gap:12px}
  .athar-ui :where(.stat) {padding:16px}
  .athar-ui .panel.stack>.stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  .athar-ui :where(th,td) {padding:10px 12px}
  .athar-ui :where(dialog) {padding:20px}
  .athar-download main {padding:24px;margin:16px auto}
}
@media(prefers-reduced-motion:reduce) {
  .athar-ui * {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Login: product introduction and a focused authentication action. */
.athar-ui .radio-policy{background:#fff;border-bottom:1px solid var(--line);padding:12px 28px;font-size:13px;color:var(--muted)}
.athar-ui .radio-policy summary{cursor:pointer;width:fit-content}
.athar-ui .radio-policy p{max-width:900px;margin:12px 0 0}
.athar-ui.auth-page #view{max-width:1240px;width:100%;padding:70px 40px;margin:auto}
.auth-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.85fr);gap:clamp(40px,7vw,110px);align-items:center}
.auth-eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;color:var(--accent)}
.athar-ui .auth-intro h1{font-size:clamp(32px,3.1vw,46px);line-height:1.4;margin:20px 0;max-width:530px}
.auth-lead{font-size:18px;line-height:1.9;color:var(--muted);max-width:500px}
.auth-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:1px solid #ccc;margin-top:36px;padding-top:24px}
.auth-capabilities span{display:block;font-size:12px;color:var(--accent);margin-bottom:12px;font-variant-numeric:tabular-nums}
.auth-capabilities strong{font-weight:600;font-size:17px}
.auth-capabilities p{font-size:13px;color:var(--muted);line-height:1.8;margin:8px 0}
.auth-guide{display:inline-block;margin-top:28px;font-size:14px}
.athar-ui .auth-layout .card.auth{width:100%;max-width:none;margin:0;padding:36px;border:1px solid var(--line);border-top:3px solid var(--accent);gap:18px;align-self:center}
.athar-ui .auth-layout .auth h2{font-size:28px;margin:0}
.athar-ui .auth-layout .auth p{margin:0}
.athar-ui a.auth-primary{color:#fff;background:var(--accent);display:flex;justify-content:space-between;text-decoration:none;min-height:56px;padding:16px 20px;margin-top:10px;font-size:16px}
.auth-technical{margin-top:12px;border-top:1px solid var(--line);padding-top:18px;font-size:13px}
.auth-technical summary{cursor:pointer;color:var(--muted)}
.athar-ui .auth-technical p{margin-top:14px!important}
.auth-technical code{display:block;overflow-wrap:anywhere;font-size:11px;margin-top:8px}
@media(max-width:760px){.athar-ui.auth-page #view{padding:32px 20px}.auth-layout{grid-template-columns:1fr;gap:32px}.auth-capabilities{margin-top:24px;gap:14px}.athar-ui .auth-layout .card.auth{padding:26px}.athar-ui .auth-intro h1{font-size:32px}.athar-ui .radio-policy{padding:10px 16px}.auth-lead{font-size:16px}}
@media(max-width:760px){.auth-layout .auth-intro{order:2}.auth-layout .card.auth{order:1}.athar-ui.auth-page #topbar{height:auto;min-height:56px;flex-wrap:wrap;padding-block:10px}.athar-ui.auth-page #topbar .brand{max-width:none;font-size:12px}}