/* GO BEST SEO components (SaaS pivot spec 10.7). Package P2-C creates this file, P3-D extends it.
 *
 * Rules every rule below follows (functions/test/tokenContrast.test.js scans for them):
 *   - colours come from tokens.css only: no hex or rgb() value in this file (the system colour keywords of the forced-colors block are the one exception);
 *   - right-to-left safe: logical properties only (margin-inline-start, inset-inline-end, text-align: start ...), never left or right;
 *   - every control is at least 44 px tall and wide (WCAG 2.5.5), the focus ring is the same everywhere, nothing depends on colour alone;
 *   - motion is switched off by tokens.css (durations are 0) and by the reduced-motion block at the end.
 * No selector here targets an element by an inline style or an inline event handler: the pages have neither (the Content-Security-Policy forbids both). */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-block-size: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hebrew gets its own face and a taller line; a Hebrew block inside an English page (the holding page) gets the same through the lang attribute. */
:lang(he) { font-family: var(--font-he); line-height: var(--leading-he); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
:lang(he) :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.3; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

p { margin: 0; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

img, svg { max-inline-size: 100%; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

::selection { background: var(--accent-fill); color: var(--accent-ink); }

button, input, select, textarea { font: inherit; color: inherit; }

[hidden] { display: none !important; }

/* bidirectional text: an e-mail address, a host name or a code keeps its own direction inside a Hebrew sentence */
bdi, .ltr { unicode-bidi: isolate; }
.ltr { direction: ltr; }

.mono, :lang(he) .mono, code, :lang(he) code { font-family: var(--font-mono); }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the honeypot field of the sign-up form: out of sight and out of the tab order, but present in the markup (a script that fills every field fills it) */
.hp-field { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.skip-link {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--accent-ink); }

/* ---------------------------------------------------------------- layout helpers */
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stack-gap, var(--space-3)); }
.muted { color: var(--ink-soft); }
/* reading text is never under 16 px (owner decision 2026-10-04: perfect on phones): the "small" line is the body size, set apart by its colour and its place, not by a smaller face */
.small { font-size: var(--text-md); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- wordmark: typography only, no logo yet (OWNER-D12) */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }
.wordmark-go {
  display: inline-grid;
  place-items: center;
  padding: 0.42em 0.55em;
  border-radius: 0.6em;
  background: var(--accent-fill);
  color: var(--accent-ink);
  letter-spacing: 0.06em;
}
.wordmark-rest { letter-spacing: 0.1em; }
.wordmark-lg { font-size: var(--text-2xl); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-border: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
@media (hover: hover) { .btn:hover { --btn-bg: var(--surface-2); color: var(--btn-fg); text-decoration: none; } }
.btn:active { --btn-bg: var(--surface-2); transform: translateY(1px); }
.btn-primary {
  --btn-bg: var(--accent-fill);
  --btn-fg: var(--accent-ink);
  --btn-border: var(--accent-fill);
  box-shadow: var(--shadow-sm);
}
.btn-primary:active { --btn-bg: var(--accent-fill-hover); --btn-border: var(--accent-fill-hover); }
@media (hover: hover) { .btn-primary:hover { --btn-bg: var(--accent-fill-hover); --btn-border: var(--accent-fill-hover); } }
.btn-ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--accent); }
@media (hover: hover) { .btn-ghost:hover { --btn-bg: var(--surface-2); } }
.btn-block { display: flex; inline-size: 100%; }
.btn-link {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) { .btn-link:hover { color: var(--link-hover); } }
.btn[disabled], .btn[aria-disabled="true"], .btn-link[disabled] { opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

/* the small round toggles of the page header (language, theme) */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.chip:active { border-color: var(--border-strong); color: var(--ink); }
@media (hover: hover) { .chip:hover { border-color: var(--border-strong); color: var(--ink); text-decoration: none; } }

/* ---------------------------------------------------------------- spinner */
.spinner {
  display: inline-block;
  flex: none;
  inline-size: 1.1em;
  block-size: 1.1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: gbs-spin 700ms linear infinite;
}
@keyframes gbs-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- card */
.card {
  padding: clamp(var(--space-5), 5vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------- fields */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-label { color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.field-label .optional { color: var(--ink-soft); font-weight: 400; }
.field-hint { color: var(--ink-soft); font-size: var(--text-md); }
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--crit);
  font-size: var(--text-md);
  font-weight: 500;
}
.field-error::before {
  content: "!";
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 1px;
  border-radius: 50%;
  background: var(--crit);
  color: var(--crit-bg);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.field-ok { color: var(--ok); font-size: var(--text-md); font-weight: 500; }

.input {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--ink-faint); opacity: 1; }
@media (hover: hover) { .input:hover { border-color: var(--ink-soft); } }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--crit); box-shadow: inset 0 0 0 1px var(--crit); }
.input[readonly] { background: var(--surface-2); color: var(--ink-soft); }
.input[disabled] { opacity: 0.6; cursor: not-allowed; }
/* an e-mail address, a password or a code is typed left to right even on a Hebrew page */
.input-ltr { direction: ltr; text-align: start; }
.input-code { direction: ltr; text-align: start; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.input-otp { direction: ltr; text-align: center; font-family: var(--font-mono); font-size: var(--text-xl); letter-spacing: 0.5em; }

/* The field inside is typed left to right (.input-ltr), and logical properties resolve against the direction of the element that carries them: with the wrapper inheriting a
   right-to-left page, the button would sit at the physical left while the room for it (padding-inline-end of the left-to-right input) was made at the physical right, and the
   button would cover the first characters. The wrapper therefore takes the direction of its field, and the button and the room for it are on the same side in both languages. */
.input-affix { position: relative; display: flex; direction: ltr; }
.input-affix .input { padding-inline-end: 72px; }
.input-affix-btn {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  min-inline-size: 64px;
  padding: 0 var(--space-3);
  border: 0;
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  background: none;
  color: var(--accent);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .input-affix-btn:hover { color: var(--accent-hover); text-decoration: underline; } }

/* checkbox: a real input, restyled; the mark is a clip-path shape so it does not flip in right-to-left pages */
.check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-3);
  min-block-size: 44px;
  padding-block: var(--space-2);
  cursor: pointer;
}
.check-input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  inline-size: 24px;
  block-size: 24px;
  margin: 0;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check-input::after {
  content: "";
  inline-size: 14px;
  block-size: 11px;
  background: var(--accent-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.check-input:checked { border-color: var(--accent-fill); background: var(--accent-fill); }
.check-input:checked::after { transform: scale(1); }
.check-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.check-input[aria-invalid="true"] { border-color: var(--crit); }
.check-text { color: var(--ink); font-size: var(--text-md); }
.check-note { margin-block-start: var(--space-1); color: var(--ink-soft); font-size: var(--text-md); }
.check-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-inline-start: calc(24px + var(--space-3)); font-size: var(--text-md); }
.check-links a { display: inline-flex; align-items: center; min-block-size: 44px; }

/* the password rules: a hollow circle until the rule is met, a filled one after, and a word for screen readers */
.policy { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: var(--text-md); }
.policy li { display: flex; align-items: flex-start; gap: var(--space-2); }
.policy li::before {
  content: "";
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 3px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
}
.policy li[data-met="true"] { color: var(--ink); }
.policy li[data-met="true"]::before { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 2px var(--surface); }

/* ---------------------------------------------------------------- banners, badges, dividers */
.banner {
  --banner-fg: var(--info);
  --banner-bg: var(--info-bg);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--banner-fg);
  border-radius: var(--radius);
  background: var(--banner-bg);
  color: var(--ink);
  font-size: var(--text-md);
}
.banner::before {
  content: "i";
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--banner-fg);
  color: var(--banner-bg);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}
.banner-ok { --banner-fg: var(--ok); --banner-bg: var(--ok-bg); }
.banner-ok::before { content: "\2713"; }
.banner-warn { --banner-fg: var(--warn); --banner-bg: var(--warn-bg); }
.banner-warn::before { content: "!"; }
.banner-crit { --banner-fg: var(--crit); --banner-bg: var(--crit-bg); }
.banner-crit::before { content: "!"; }
.banner-title { font-weight: 700; }
.banner-body > * + * { margin-block-start: var(--space-1); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-soft); font-size: var(--text-sm); }
.divider::before, .divider::after { content: ""; flex: 1; block-size: 1px; background: var(--border); }

/* icons are inline svg built by core/dom.js: they take the colour of their text and never carry meaning alone */
.icon { display: inline-block; flex: none; inline-size: 1.25em; block-size: 1.25em; vertical-align: middle; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ---------------------------------------------------------------- the stand-alone links of the sign-in pages (mobile audit 2026-10-04, G5)
   "Forgot password?", "Create an account", the footer links and the two links of the reCAPTCHA notice were 15 to 23 px tall: each is now a 44 px target (the same rule as .app-footer a).
   They are here because components.css is the stylesheet every sign-in page and the app share, and these rules only add size (auth.css keeps the layout and the colours). */
.auth-foot a, .auth-alt a, .auth-form p.small > a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; }
.auth-fine.recaptcha-notice { font-size: var(--text-sm); }
.recaptcha-notice a { display: inline-block; padding-block: var(--space-2); }

/* ---------------------------------------------------------------- forced colours (Windows high contrast) */
@media (forced-colors: active) {
  .btn, .chip, .input, .card, .banner, .check-input { border: 1px solid CanvasText; }
  .btn-primary { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .check-input:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .check-input::after { forced-color-adjust: none; background: HighlightText; }
  .wordmark-go { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .policy li::before { border-color: CanvasText; }
  .policy li[data-met="true"]::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
}

/* ---------------------------------------------------------------- reduced motion: nothing moves, nothing fades, the spinner becomes a still ring */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .spinner { animation: none; border-style: dotted; }
}