/* Sentinel — self-contained brand stylesheet (Aurisage design tokens, subset).
   Fonts + colours + layout tokens inlined so the app has no third-party calls. */

/* ---- IBM Plex Sans Arabic (bilingual brand font) ---- */
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:300; font-style:normal; font-display:swap;
  src:url('/assets/fonts/IBMPlexSansArabic-Light.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/assets/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/assets/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/assets/fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/IBMPlexSansArabic-Bold.woff2') format('woff2'); }

:root {
  --green-900:#112f1c; --green-700:#1e4e37; --green-500:#4a8266; --green-300:#9fccaf; --green-100:#cee7d3; --green-50:#eef6f0;
  --gold-700:#57441f; --gold-500:#8f7033; --gold-300:#ccb783; --gold-50:#f5eddc;
  --red-700:#5c3030; --red-500:#944f4d; --red-300:#cfacaa; --red-50:#f5e9e9;
  --blue-700:#1e4154; --blue-300:#91bcc9; --blue-50:#e4eff4;
  --gray-900:#1f1e1a; --gray-700:#45423b; --gray-500:#7c766b; --gray-300:#c4bfb8; --gray-100:#e2ded9; --gray-50:#f4f1ee;
  --white:#fff;

  --surface-page:var(--gray-50); --surface-card:var(--white); --surface-brand:var(--green-700); --surface-brand-soft:var(--green-50);
  --text-strong:var(--gray-900); --text-body:var(--gray-700); --text-muted:var(--gray-500); --text-on-brand:var(--green-50);
  --border-subtle:var(--gray-100); --border-default:var(--gray-300); --focus-ring:var(--green-500);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(17,47,28,.08),0 1px 2px rgba(17,47,28,.05);
  --shadow-md:0 4px 12px rgba(17,47,28,.08),0 2px 4px rgba(17,47,28,.05);
  --shadow-lg:0 12px 28px rgba(17,47,28,.12),0 4px 8px rgba(17,47,28,.06);
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:120ms; --dur-base:200ms;
  --container-lg:1120px;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--surface-page); color:var(--text-body);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { color:var(--text-strong); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0; }
a { color:var(--green-700); text-decoration:none; }
a:hover { text-decoration:underline; }
[dir="rtl"] { text-align:right; }

.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:500; color:var(--text-muted); }

/* ---- Layout ---- */
.wrap { max-width:var(--container-lg); margin:0 auto; padding:0 var(--space-6); }
.topbar { background:var(--surface-card); border-bottom:1px solid var(--border-subtle); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.topbar .logo { height:26px; }
.topbar .tag { color:var(--text-muted); font-size:.85rem; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:var(--space-2); font:inherit; font-weight:500;
  border:1.5px solid transparent; border-radius:var(--radius-md); padding:.6rem 1rem; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out); }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--green-700); color:var(--green-50); }
.btn-primary:hover { background:var(--green-900); }
.btn-primary:disabled { background:var(--gray-300); color:var(--white); cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--green-700); border-color:var(--border-default); }
.btn-ghost:hover { background:var(--surface-brand-soft); }
:focus-visible { outline:3px solid var(--green-100); outline-offset:2px; }

/* ---- Cards ---- */
.card { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.card-pad { padding:var(--space-6); }

/* ---- Inputs ---- */
label.field { display:block; margin-bottom:var(--space-4); }
label.field > span { display:block; font-size:.85rem; color:var(--text-body); margin-bottom:var(--space-2); }
.input { width:100%; font:inherit; padding:.55rem .75rem; border:1.5px solid var(--border-default);
  border-radius:var(--radius-md); background:var(--white); color:var(--text-strong); }
.input:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-100); }

/* ---- Dropzone ---- */
.dropzone { border:1.5px dashed var(--border-default); border-radius:var(--radius-lg); background:var(--surface-brand-soft);
  padding:var(--space-10); text-align:center; color:var(--text-muted); cursor:pointer; transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out); }
.dropzone.drag { border-color:var(--green-500); background:var(--green-100); color:var(--green-900); }
.dropzone.has-file { border-style:solid; border-color:var(--green-300); background:var(--surface-card); color:var(--text-body); }

/* ---- Verdict badge ---- */
.verdict { display:inline-flex; align-items:center; gap:var(--space-2); font-weight:700; border-radius:var(--radius-pill);
  padding:.4rem .9rem; font-size:.95rem; }
.verdict .dot { width:9px; height:9px; border-radius:50%; background:currentColor; }
.verdict.BLOCKED { background:var(--red-50); color:var(--red-700); }
.verdict.FIX { background:var(--gold-50); color:var(--gold-700); }
.verdict.READY { background:var(--green-50); color:var(--green-700); }
.verdict.PENDING { background:var(--gray-100); color:var(--gray-700); }

/* ---- Severity counts ---- */
.counts { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.count { display:flex; align-items:center; gap:var(--space-2); border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:.3rem .8rem; font-size:.85rem; background:var(--white); }
.count b { font-weight:700; color:var(--text-strong); }
.count .swatch { width:9px; height:9px; border-radius:50%; }
.sw-CRITICAL { background:var(--red-500); } .sw-MAJOR { background:var(--gold-500); } .sw-MINOR { background:var(--blue-300); }

/* ---- Findings ---- */
.finding { border:1px solid var(--border-subtle); border-left-width:4px; border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); background:var(--white); margin-bottom:var(--space-3); }
.finding.CRITICAL { border-left-color:var(--red-500); }
.finding.MAJOR { border-left-color:var(--gold-500); }
.finding.MINOR { border-left-color:var(--blue-300); }
.finding .fhead { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-2); }
.chip { font-size:.72rem; font-weight:500; padding:.15rem .55rem; border-radius:var(--radius-pill); background:var(--gray-100); color:var(--gray-700); }
.chip.sev-CRITICAL { background:var(--red-50); color:var(--red-700); }
.chip.sev-MAJOR { background:var(--gold-50); color:var(--gold-700); }
.chip.sev-MINOR { background:var(--blue-50); color:var(--blue-700); }
.finding .issue { color:var(--text-strong); }
.finding .excerpt { border-left:2px solid var(--border-default); padding-left:var(--space-3); color:var(--text-muted); font-size:.9rem; margin:var(--space-2) 0; }
.finding .fix { background:var(--surface-brand-soft); border-radius:var(--radius-sm); padding:var(--space-3); font-size:.9rem; margin-top:var(--space-2); }
.finding .fhead .chip.st-OPEN { background:var(--gray-100); color:var(--gray-700); }
.finding .fhead .chip.st-ACCEPTED { background:var(--blue-50); color:var(--blue-700); }
.finding .fhead .chip.st-OVERRIDDEN { background:var(--gold-50); color:var(--gold-700); }
.finding .fhead .chip.st-FIXED { background:var(--green-50); color:var(--green-700); }
.factions { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-top:var(--space-3); }
.factions .btn { padding:.35rem .7rem; font-size:.85rem; }

/* ---- Misc ---- */
.muted { color:var(--text-muted); }
.spinner { width:16px; height:16px; border:2px solid var(--green-100); border-top-color:var(--green-700); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none !important; }
.row { display:flex; gap:var(--space-6); flex-wrap:wrap; }
.grow { flex:1 1 320px; }
.stack > * + * { margin-top:var(--space-4); }
.langtoggle { display:inline-flex; border:1px solid var(--border-default); border-radius:var(--radius-pill); overflow:hidden; }
.langtoggle button { font:inherit; border:0; background:var(--white); padding:.25rem .7rem; cursor:pointer; color:var(--text-muted); }
.langtoggle button.on { background:var(--green-700); color:var(--green-50); }