/* ---------------------------------------------------------------------------
   The app's design system, translated to the web.

   Every value here comes from the ACTIVE system in
   src/core/theme/designSystems.ts, which is `bits` (DEFAULT_DESIGN_SYSTEM,
   Itay's choice on 2026-09-06): navy text, electric blue blocks, one loud
   yellow, a cool white page, and no shadows at all. The retired Figma language
   (cream, forest green, coral) is still in the code and must not appear here.

   Two rules carry the whole feeling and are easy to break by accident:
   depth comes from flat coloured blocks, never from elevation, and yellow is a
   fill colour, never an ink colour. On yellow, always navy.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=Noto+Sans+Hebrew:wght@400;500;600;700&display=swap');

:root {
  /* Colours, named for their role exactly as the app names them. */
  --background: #f2f5fa;
  --surface: #fff;
  /* The contrast block is electric blue, not a dark grey. */
  --surface-contrast: #0f0fff;
  --on-surface-contrast: #fff;
  --accent: #f9fd11;
  /* Yellow this loud only works with near-black text on it. */
  --on-accent: #001743;
  --accent-deep: #e3e70a;
  --text-primary: #001743;
  --text-secondary: #5a6b8c;
  --secondary: #001743;
  --on-secondary: #fff;
  --tint: #e7ecfa;
  --outline: #dce0ea;
  --success: #3ab515;
  --error: #db2e2e;
  --warning: #f0a202;
  /* Navy on navy would make a link invisible, so links take the electric blue
     the blocks are made of. */
  --link: #0f0fff;

  /* radii */
  --r-input: 18px;
  --r-card: 28px;
  --r-card-lg: 36px;
  --r-pill: 999px;

  /* spacing */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;

  /* motion. Every functional animation is 300ms or less (UI/UX §5). */
  --t-press: 140ms;
  --t-base: 200ms;
  --t-entrance: 260ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --touch: 48px;
  --button-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #00102e;
    --surface: #04173c;
    --text-primary: #eaf0ff;
    --text-secondary: #8fa3c8;
    --secondary: #5b7bff;
    --on-secondary: #00102e;
    --tint: #0a1f4a;
    --outline: #173059;
    --error: #ff6b6b;
    --link: #5b7bff;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family:
    Inter,
    'Noto Sans Hebrew',
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  /* body: 15/22. Tracking is left alone throughout: this language leans on
     weight, not on spacing. */
  font-size: 15px;
  line-height: 22px;
}

:lang(he) body,
[dir='rtl'] body {
  font-family:
    'Noto Sans Hebrew',
    Inter,
    -apple-system,
    system-ui,
    sans-serif;
}

.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--s-lg) var(--s-md) var(--s-xxl);
}

/* ------------------------------------------------------------------ header */
.masthead {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  margin-bottom: var(--s-xl);
  text-decoration: none;
  color: inherit;
}

.masthead svg {
  height: 32px;
  width: auto;
  display: block;
}

.masthead .wordmark {
  font-weight: 800;
  font-size: 22px;
}

/* The mark carries two fills, exactly as LogoMark.tsx does: the brand navy and
   the yellow accent, which sits on the navy body and so never becomes ink on a
   light ground. They are set here so no page has to know a hex value. */
.mark-primary {
  fill: var(--text-primary);
}

.mark-accent {
  fill: var(--accent);
}

/* -------------------------------------------------------------- typography */
h1,
.display {
  /* display: 32/38, extra bold */
  font-size: 32px;
  line-height: 38px;
  font-weight: 800;
  margin: 0 0 var(--s-md);
}

h2,
.title {
  /* title: 21/27, bold */
  font-size: 21px;
  line-height: 27px;
  font-weight: 700;
  margin: 0 0 var(--s-sm);
}

h3 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin: var(--s-lg) 0 var(--s-xs);
}

p {
  margin: 0 0 var(--s-md);
}

.lead {
  font-size: 17px;
  line-height: 26px;
  color: var(--text-secondary);
}

.caption {
  /* caption: 12/17, medium */
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  color: var(--text-secondary);
}

.note {
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

a {
  color: var(--link);
  text-underline-offset: 2px;
}

/* Wider screens get a larger display, not a wider column: a legal document at
   1200px wide is unreadable, and the app's rhythm is a phone's. */
@media (min-width: 700px) {
  h1,
  .display {
    font-size: 44px;
    line-height: 50px;
  }
  .wrap {
    padding-inline: var(--s-lg);
  }
}

/* ----------------------------------------------------------------- blocks */
/* ADR-0012 rule 1: screens are composed of coloured blocks, and every main
   screen carries exactly one loud contrast card. Flat, never raised: there is
   not a single shadow in this file, which is the point of the language. */
.statement {
  background: var(--surface-contrast);
  color: var(--on-surface-contrast);
  border-radius: var(--r-card-lg);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
}

.statement h2,
.statement h3 {
  color: inherit;
  margin-top: 0;
}

.statement .note,
.statement .caption {
  color: #c8ceff;
}

.statement a {
  color: #fff;
}

/* A button inside the contrast card is still a button: yellow with navy on it.
   The link colour above would otherwise win on specificity and paint it
   white, which on yellow is unreadable. */
.statement a.btn {
  color: var(--on-accent);
}

.statement a.btn.ghost {
  color: var(--on-surface-contrast);
  border-color: rgb(255 255 255 / 40%);
}

.tile {
  background: var(--tint);
  border-radius: var(--r-card-lg);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
}

.tile > :last-child,
.card > :last-child,
.statement > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- rows */
/* The settings row: icon, label, hairline. Same grammar as the app. */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rows li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-md);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--outline);
}

.tile .rows li {
  border-bottom-color: rgb(0 23 67 / 12%);
}

.statement .rows li {
  border-bottom-color: rgb(255 255 255 / 22%);
}

.rows li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rows li:first-child {
  padding-top: 0;
}

/* A paragraph after the list is a closing remark, not another row. */
.rows + p {
  margin-top: var(--s-md);
}

.rows .ico {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--text-primary);
}

.statement .rows .ico {
  color: var(--accent);
}

.rows .rowtext strong {
  display: block;
  font-weight: 700;
}

.rows .rowtext span {
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

.statement .rows .rowtext span {
  color: #c8ceff;
}

/* ---------------------------------------------------------------- controls */
label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--s-sm);
}

input[type='email'] {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--s-md);
  border: 1px solid var(--outline);
  border-radius: var(--r-input);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
  transition: border-color var(--t-base) var(--ease-out);
}

input[type='email']:focus-visible {
  outline: none;
  border-color: var(--link);
  /* A focus ring, not elevation: the one box-shadow in the file, and it is
     flat, hard and on brand. */
  box-shadow: 0 0 0 3px rgb(15 15 255 / 25%);
}

/* The app's button: a fully round pill, 56pt tall, that sinks to 0.97 on
   press. Yellow fill, navy ink, no shadow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  width: 100%;
  min-height: var(--button-h);
  padding: 0 var(--s-lg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--t-press) var(--ease-out),
    background-color var(--t-press) var(--ease-out);
}

.btn:hover {
  background: var(--accent-deep);
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.btn.ghost {
  background: transparent;
  border-color: var(--outline);
  color: var(--text-primary);
}

.btn.ghost:hover {
  background: var(--tint);
}

.btn.contrast {
  background: var(--surface-contrast);
  color: var(--on-surface-contrast);
}

.btn .ico {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

.btn-row .btn {
  width: auto;
  flex: 1 1 200px;
}

/* Segmented pills, the app's language picker. */
.segment {
  display: inline-flex;
  gap: var(--s-xs);
  padding: var(--s-xs);
  background: var(--tint);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-lg);
}

.segment button {
  min-height: 36px;
  padding: 0 var(--s-md);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}

.segment button[aria-pressed='true'] {
  background: var(--surface-contrast);
  color: var(--on-surface-contrast);
}

/* ---------------------------------------------------------------- feedback */
.status {
  display: none;
  margin-top: var(--s-md);
  padding: var(--s-md);
  border-radius: var(--r-input);
  font-size: 14px;
  line-height: 21px;
}

.status.show {
  display: block;
  animation: rise var(--t-entrance) var(--ease-out) both;
}

.status.ok {
  background: color-mix(in srgb, var(--success) 14%, var(--background));
  color: var(--success);
}

.status.err {
  background: color-mix(in srgb, var(--error) 14%, var(--background));
  color: var(--error);
}

/* --------------------------------------------------------------- entrances */
/* Motion has to say something (ADR-0012 rule 3). Here it says "this page has
   an order to it": blocks arrive top down, 50ms apart, once. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.enter {
  animation: rise var(--t-entrance) var(--ease-out) both;
}

/* nth-child, not nth-of-type: the blocks are a mix of h1, p and div, and
   nth-of-type would restart the count for each tag and stagger nothing. */
.enter:nth-child(2) {
  animation-delay: 50ms;
}
.enter:nth-child(3) {
  animation-delay: 100ms;
}
.enter:nth-child(4) {
  animation-delay: 150ms;
}
.enter:nth-child(5) {
  animation-delay: 200ms;
}
/* Anything below the fold arrives together: a footer that waits half a second
   for its turn is a page that feels slow, not a page that feels composed. */
.enter:nth-child(n + 6) {
  animation-delay: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active {
    transform: none;
  }
}

/* ----------------------------------------------------------------- footer */
footer {
  margin-top: var(--s-xxl);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--outline);
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-md);
}

footer a {
  color: var(--text-secondary);
}

footer a:hover {
  color: var(--link);
}