/* ------------------------------------------------------------------
   Datavoy — shared styles for the customer-facing pages
   (signup, login, account). The visual language comes from the
   landing page: Newsreader display, Public Sans body, IBM Plex Mono
   for figures and labels, hairline rules, quiet green accent.
   ------------------------------------------------------------------ */

/* ---------- tokens (mirrors the landing page) ---------- */
:root{
  --canvas:#F4F6F5; --base:#F9FAF9; --card:#FCFDFC; --elev:#FEFEFE;
  --inset:#F0F3F2; --sunken:#EDF0EF;
  --ink:#1C211F; --ink-2:#434A48; --ink-3:#5B6361;
  --line:#E6EAE9; --line-2:#DBE0DE;
  --accent:#1A5544; --accent-h:#154236; --accent-text:#1A5544;
  --accent-soft:#EEF5F2; --accent-border:#B6D4C8; --on-accent:#F2F8F5;
  --clay:#8A5730; --clay-mark:#BE8555; --clay-soft:#FAF3EE; --clay-border:#E5C9B4;
  --ring:rgba(34,106,85,.34);
  --err:#A3402F;
  --sh-xs:0 1px 2px rgba(18,22,21,.04);
  --sh-sm:0 1px 2px rgba(18,22,21,.04),0 4px 14px rgba(18,22,21,.05);
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* aliases for the variable names the page scripts still use inline */
  --surface-canvas:var(--canvas); --surface-card:var(--card);
  --surface-elevated:var(--elev); --surface-sunken:var(--inset);
  --surface-accent-subtle:var(--accent-soft);
  --border-subtle:var(--line); --border-default:var(--line-2);
  --border-strong:var(--line-2); --border-accent:var(--accent-border);
  --text-primary:var(--ink); --text-secondary:var(--ink-2);
  --text-muted:var(--ink-3); --text-subtle:var(--ink-3);
  --text-accent:var(--accent-text);
  --action-primary:var(--accent);
  --status-error:var(--err);
  --state-hover:var(--inset); --state-focus-ring:var(--ring);
  --font-sans:var(--sans); --font-mono:var(--mono);
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-28:28px; --fs-34:34px;
  --control-h-lg:46px;
  --radius-sm:6px; --radius-md:8px; --radius-card:10px; --radius-control:8px;
  --shadow-xs:var(--sh-xs); --shadow-md:var(--sh-sm);
}
@media (prefers-color-scheme: dark){
  :root{
    --canvas:#101413; --base:#161B1A; --card:#1A201E; --elev:#222927;
    --inset:#1E2523; --sunken:#0C100F;
    --ink:#E8EDEB; --ink-2:#AFB8B6; --ink-3:#939D9A;
    --line:#242B29; --line-2:#2E3634;
    --accent:#5A9B86; --accent-h:#8ABAA9; --accent-text:#7FC4AC;
    --accent-soft:rgba(47,139,111,.15); --accent-border:rgba(63,171,137,.34); --on-accent:#06110D;
    --clay:#D2A784; --clay-mark:#D2A784; --clay-soft:rgba(210,167,132,.10); --clay-border:rgba(210,167,132,.35);
    --ring:rgba(63,171,137,.45);
    --err:#E8927C;
    --sh-xs:0 1px 2px rgba(0,0,0,.3);
    --sh-sm:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--canvas); color:var(--ink);
  font:400 15px/1.6 var(--sans);
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
b,strong{font-weight:500}
img,svg{max-width:100%}
a{color:var(--accent-text)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px; border-radius:4px;
}
::selection{background:var(--accent-soft)}
.mono{font-family:var(--mono)}

/* wordmark */
.wordmark{
  display:flex;align-items:center;gap:6px;
  font:500 15px/1 var(--sans); color:var(--ink); text-decoration:none;letter-spacing:-.01em;
}
/* the fluke — brand/datavoy-mark.svg, inlined so it inherits ink from the
   wordmark and takes the theme's accent for the second lobe */
.wordmark .mark{width:26px;height:26px;flex:none;margin-left:-2px;--datavoy-accent:var(--accent)}

/* eyebrow — mono uppercase with the accent square, numbered variant */
.eb{
  display:flex;align-items:center;gap:10px;
  font:500 11px/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:16px;
}
.eb::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:2px;flex:none}
.eb.n::before{content:attr(data-ix);width:auto;height:auto;background:none;border-radius:0;color:var(--accent-text);font-weight:500}
.eb.n::after{content:"";flex:none;width:34px;height:1px;background:var(--line-2)}

/* provenance chip */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font:400 11px/1.4 var(--mono); color:var(--ink-3);
  border:1px solid var(--line); border-radius:999px;
  padding:5px 10px; background:var(--card); white-space:nowrap;
}
.chip b{font-weight:500;color:var(--ink-2)}

/* ---------- buttons (om-btn family, restyled) ---------- */
.om-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 13.5px/1 var(--sans); text-decoration:none; color:var(--ink);
  border-radius:8px; min-height:40px; padding:0 18px;
  border:1px solid transparent; background:var(--inset); cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .1s ease;
}
.om-btn:active{transform:scale(.985)}
.om-btn--primary{background:var(--accent);color:var(--on-accent)}
.om-btn--primary:hover{background:var(--accent-h)}
.om-btn--secondary{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.om-btn--secondary:hover{border-color:var(--ink-3)}
.om-btn--ghost{background:transparent;color:var(--ink-2)}
.om-btn--ghost:hover{background:var(--inset);color:var(--ink)}
.om-btn--sm{min-height:36px;padding:0 13px;font-size:12.5px}
.om-btn--lg{min-height:48px;font-size:14.5px}
.om-btn--block{width:100%}
.om-btn:disabled{opacity:.55;cursor:default}
.om-btn.is-loading{opacity:.7;pointer-events:none}
.om-btn.is-loading::after{
  content:"";width:13px;height:13px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;
  animation:vd-spin .8s linear infinite;
}

/* spinner */
.om-spinner{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);
  animation:vd-spin .8s linear infinite;flex:none;
}
@keyframes vd-spin{to{transform:rotate(360deg)}}

/* ---------- layout helpers the scripts use ---------- */
.om-row{display:flex;align-items:center;gap:8px}
.om-col{display:flex;flex-direction:column}
.om-grow{flex:1;min-width:0}
.om-caption{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.om-helper{font-size:12.5px;color:var(--ink-3)}

/* ---------- card ---------- */
.om-card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-xs)}
.om-card__head{padding:20px 22px 0}
.om-card__title{font:500 19px/1.3 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.om-card__sub{font-size:13.5px;color:var(--ink-3);line-height:1.55;margin-top:5px}
.om-card__body{padding:16px 22px 22px}
@media (max-width:560px){
  .om-card__head{padding:16px 16px 0}
  .om-card__body{padding:14px 16px 18px}
}

/* ---------- alert (warning is the only variant these pages use) ---------- */
.om-alert{
  display:flex;gap:10px;border:1px solid var(--line);background:var(--base);
  border-radius:8px;padding:13px 15px;font-size:13px;line-height:1.55;color:var(--ink-2);
}
.om-alert--warning{border-color:var(--clay-border);background:var(--clay-soft)}
.om-alert__title{font-weight:500;color:var(--ink);margin-bottom:3px}
.om-alert__body{color:var(--ink-2)}

/* ---------- badge ---------- */
.om-badge{
  display:inline-block;font:500 10px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:3px 7px;vertical-align:1px;
}
.om-badge--accent{color:var(--accent-text);border-color:var(--accent-border)}

/* ---------- segmented control ---------- */
.om-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;background:var(--card);padding:3px;gap:2px}
.om-seg__btn{
  font:500 12.5px/1 var(--sans);color:var(--ink-2);background:none;border:0;
  border-radius:6px;padding:9px 14px;min-height:34px;cursor:pointer;
}
.om-seg__btn:hover{color:var(--ink)}
.om-seg__btn.is-active{background:var(--accent);color:var(--on-accent)}

/* ---------- text inputs ---------- */
.om-input__control{
  height:var(--control-h-lg);padding:0 13px;width:100%;
  border:1px solid var(--line-2);border-radius:8px;
  background:var(--card);color:var(--ink);font:inherit;font-size:15px;
}
.om-input__control:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.om-input__control::placeholder{color:var(--ink-3);opacity:.8}

/* ---------- choice card (plan picker) ---------- */
.om-choice{
  display:flex;gap:12px;align-items:flex-start;
  padding:15px 17px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--card);cursor:pointer;
  transition:border-color .14s ease,background .14s ease;
}
.om-choice:hover{border-color:var(--ink-3)}
.om-choice.is-on{border-color:var(--accent);background:var(--accent-soft)}
.om-choice input{accent-color:var(--accent);width:16px;height:16px;margin-top:3px;flex:none}
.om-choice__mark{display:none}
.om-choice__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.om-choice__top{display:flex;align-items:baseline;gap:10px}
.om-choice__label{font:500 15px/1.35 var(--sans);color:var(--ink)}
.om-choice__desc{font-size:13px;color:var(--ink-2);line-height:1.55}
.om-choice__meta{font:500 12.5px/1.6 var(--mono);color:var(--accent-text);font-variant-numeric:tabular-nums}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  .om-btn{transition:none}
  .om-btn:active{transform:none}
  .om-btn.is-loading::after,.om-spinner{animation-duration:1.6s}
}