/* ============================================================================
   e71 design system — "dynamic experience" language, from
   e71_website/design-system/e71-dynamic-experience/MASTER.md
   Premium / instrument aesthetic: Space Grotesk, ink/paper, UAE-red accent used
   ONLY for review points, square controls, hairline rules, restrained elevation.
   ============================================================================ */
@font-face{
  font-family:'Space Grotesk';src:url('/static/fonts/space-grotesk-variable.woff2') format('woff2');
  font-weight:300 700;font-display:swap;font-style:normal;
}
:root{
  /* palette (light) */
  --paper:#ffffff; --ink:#08090a; --graphite:#17191b; --charcoal:#272a2d;
  --steel:#5d646b; --mist:#e8eaec; --soft:#f3f4f5; --field:#f7f8f9;
  --red:#dc0028; --red-wash:#fbe7ea; --green:#008a43; --green-wash:#e3f2ea;
  --amber:#9a6a00; --amber-wash:#f6efdf; --focus:#0066cc;
  --line:#e2e4e6; --line-2:#d3d6d9; --line-strong:#bcc0c4;
  /* type */
  --font:'Space Grotesk',ui-sans-serif,-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:'Space Grotesk',ui-monospace,'SF Mono',Menlo,monospace;
  /* elevation — restrained */
  --sh-1:0 1px 2px rgba(8,9,10,.05);
  --sh-2:0 6px 20px -8px rgba(8,9,10,.14);
  --r:3px;                     /* square controls: minimal radius only */
}
:root[data-theme="dark"], .dark{
  --paper:#0e1013; --ink:#f3f4f5; --graphite:#e8eaec; --charcoal:#c8cccf;
  --steel:#8b9198; --mist:#20242a; --soft:#15181c; --field:#161a1f;
  --line:#252a30; --line-2:#2f353c; --line-strong:#3a4149;
  --red:#ff5069; --red-wash:#2a141a; --green:#3ecf8e; --green-wash:#0f2118;
  --amber:#e0b15a; --amber-wash:#241f13;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 26px -10px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--soft);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv01";
}
/* display / headings — compact leading, tight tracking */
h1,h2,h3,.display{font-weight:400;line-height:.94;letter-spacing:-.045em}
h1{font-size:38px;letter-spacing:-.06em}
h2{font-size:26px;letter-spacing:-.05em}
h3{font-size:19px;line-height:1.1;letter-spacing:-.035em}
p{line-height:1.62}
/* instrument label */
.label,.eyebrow{font-size:11.5px;font-weight:640;text-transform:uppercase;letter-spacing:.13em;color:var(--steel)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--steel)}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
a:hover{border-color:var(--ink)}
/* surfaces — hairline rules, restrained elevation, square */
.surface,.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.card{padding:20px}
.hr{height:1px;background:var(--line);border:0;margin:0}
/* controls — square, hairline */
button,.btn{font-family:var(--font);font-size:14px;font-weight:560;letter-spacing:-.01em;
  padding:10px 16px;border-radius:var(--r);border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;transition:.14s ease}
button:hover,.btn:hover{background:var(--charcoal);border-color:var(--charcoal)}
button.ghost,.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
button.ghost:hover,.btn.ghost:hover{border-color:var(--ink);background:var(--field)}
button.danger,.btn.danger{background:var(--paper);color:var(--red);border-color:var(--red)}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{font-family:var(--font);font-size:15px;padding:11px 13px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* status — red = review point ONLY, green = verified ONLY (per e71 spec) */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:640;text-transform:uppercase;
  letter-spacing:.08em;padding:3px 9px;border-radius:20px;border:1px solid transparent}
.tag.review{background:var(--red-wash);color:var(--red);border-color:var(--red)}
.tag.verified{background:var(--green-wash);color:var(--green);border-color:var(--green)}
.tag.attention{background:var(--amber-wash);color:var(--amber);border-color:var(--amber)}
.tag.neutral{background:var(--soft);color:var(--steel);border-color:var(--line-2)}
.chip{font-size:11px;font-weight:600;padding:3px 9px;border:1px solid var(--line-2);border-radius:20px;background:var(--paper);color:var(--charcoal)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================================
   Motion & interaction layer — purposeful, restrained, reduced-motion-safe.
   ============================================================================ */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --d1:120ms; --d2:200ms; --d3:340ms; --d4:520ms;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes shimmer{100%{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
.view{animation:fadeUp var(--d3) var(--ease) both}
.stagger>*{animation:fadeUp var(--d3) var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.02s}.stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.10s}.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}.stagger>*:nth-child(6){animation-delay:.22s}
.stagger>*:nth-child(n+7){animation-delay:.26s}
.card.interactive{cursor:pointer;transition:border-color var(--d2) var(--ease),transform var(--d2) var(--ease),box-shadow var(--d2) var(--ease)}
.card.interactive:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--sh-2)}
.card.interactive:active{transform:translateY(0)}
button:active,.btn:active{transform:translateY(.5px) scale(.994)}
a,button,.btn,input,select{transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease),color var(--d1) var(--ease),transform var(--d1) var(--ease),opacity var(--d1) var(--ease)}
.skeleton{background:linear-gradient(90deg,var(--mist) 25%,var(--soft) 37%,var(--mist) 63%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r);color:transparent!important}
.spinner{width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-3px}
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:120}
.toast{background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--r);box-shadow:var(--sh-2);font-size:13.5px;font-weight:520;display:flex;align-items:center;gap:10px;animation:slideInRight var(--d3) var(--spring) both;max-width:360px}
.toast.ok{--dot:var(--green)} .toast.err{--dot:var(--red)} .toast.info{--dot:var(--blue)}
.toast::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,var(--green));flex:none}
.scrim{position:fixed;inset:0;background:rgba(8,9,10,.42);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn var(--d2) var(--ease) both;padding:24px}
.modal{background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--r) + 1px);width:100%;max-width:460px;box-shadow:var(--sh-2);animation:scaleIn var(--d2) var(--ease) both;overflow:hidden}
.modal .mhead{padding:20px 22px 4px}.modal .mbody{padding:8px 22px 4px;display:flex;flex-direction:column;gap:12px}
.modal .mfoot{padding:16px 22px 20px;display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.modal .fieldlabel{font-size:11px;font-weight:640;text-transform:uppercase;letter-spacing:.11em;color:var(--steel);margin-bottom:5px}
.ring circle.pg{transition:stroke-dashoffset var(--d4) var(--ease)}
.pbar{height:3px;background:var(--mist);border-radius:3px;overflow:hidden}
.pbar>i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width var(--d3) var(--ease)}
@media (prefers-reduced-motion:reduce){.card.interactive:hover{transform:none}}