/* Palette and type from the approved prototype (the approved prototype). */
:root {
  --navy: #1E2761; --navy2: #273272; --gold: #C89B3C; --ice: #CADCFC;
  --bg: #F5F7FB; --card: #FFFFFF; --txt: #22283F; --muted: #5A6178; --line: #E3E8F2;
  --good: #1B7A4B; --serious: #B3261E; --field: #C9D2E3; --soft: #F2F5FB;
  --pill: #E7EBF4; --pill-txt: #7A849B; --muted-bg: #ECEEF3; --ice-line: #B4C8F0; /* 85 B: brand-themable neutrals */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, 'Noto Sans Hebrew', sans-serif; background: var(--bg); color: var(--txt); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1150px; margin: 0 auto; padding: 0 16px; }
[hidden] { display: none !important; }

/* Header (owner finding 1, 30.9): the brand bar stays navy; the area navigation sits on a white
   bar under it with navy links (contrast 13.8:1 on white, 10.0:1 on the ice "current" pill; WCAG AA
   needs 4.5:1). Gold is only an accent line, never text on white (2.6:1). */
header { background: #fff; color: var(--navy); border-bottom: 1px solid var(--line); }
.topbar { background: var(--navy); color: #fff; }
#areaNav { gap: 4px 6px; padding-block: 6px; }
#areaNav a { color: var(--navy); background: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; padding: 6px 12px; border-radius: 8px; }
#areaNav a:hover { background: var(--soft); text-decoration: underline; }
#areaNav a.on { background: var(--ice); color: var(--navy); box-shadow: inset 0 -3px 0 var(--gold); }
#areaNav a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* Finding 17: "Sign out" at the end of the bar on every signed-in screen (navy on white, 13.8:1). */
#areaNav .signout { margin-inline-start: auto; color: var(--navy); font-weight: 700; font-size: .92rem; padding: 6px 12px; }
.bar { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { font-weight: 800; font-size: 1.15rem; }
.logo span { color: var(--gold); }
.logo img { display: block; width: var(--logo-w, 128px); height: auto; } /* logo A2.1 (owner 7.10): the text logo's width */
a.logo { color: inherit; text-decoration: none; cursor: pointer; } /* owner 5.10: the logo is a link; nothing else changes */
a.logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.demo { background: var(--gold); color: var(--navy); font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.lang { background: var(--navy); color: var(--ice); border: 1px solid var(--ice); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: .85rem; cursor: pointer; width: auto; display: inline-block; margin: 0; }
.banner { background: #FFF6E0; color: #6B4A00; text-align: center; font-size: .85rem; padding: 6px 16px; border-bottom: 1px solid #F0DDA8; }

main { flex: 1; padding: 28px 16px 60px; }
h1 { color: var(--navy); font-size: 1.35rem; margin: 4px 0 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin: 0 auto 18px; max-width: 640px; }
.muted { color: var(--muted); font-size: .88rem; font-weight: 400; }
.stack { display: grid; gap: 12px; }

label { font-size: .86rem; font-weight: 700; display: block; }
input, select { display: block; width: 100%; margin-top: 5px; padding: 9px 12px; border: 1px solid var(--field); border-radius: 8px; font: inherit; font-size: .95rem; background: #fff; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
input[dir="ltr"] { text-align: left; }
input.code { width: 190px; font-size: 1.3rem; letter-spacing: .5em; text-align: center; font-family: monospace; }
input[readonly] { background: var(--soft); color: var(--muted); }

.btn { padding: 10px 20px; border: none; border-radius: 8px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.secondary { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.link { background: none; border: none; color: var(--navy); text-decoration: underline; font: inherit; font-size: .83rem; cursor: pointer; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.err { color: var(--serious); font-size: .88rem; }
/* Login help (owner 12.10, docs/login-help-plan-12-10.md part A): the no-password lines + the WhatsApp assistant link. */
.rp-no-password { margin-top: 16px; }
.rp-no-password p { margin: 0 0 4px; }
[data-contact-line] a { color: var(--navy); font-weight: 700; } /* 85 B: the sign-in contact line (web/brand.js contactEmail) */
.rp-login-help { margin: 14px 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.rp-login-help a { color: var(--navy); font-weight: 700; }
.rp-forgot-row { margin: 10px 0 0; font-size: .88rem; }
.rp-forgot-row a { color: var(--navy); }
/* Finding 21: the loading state shown at once on every route change. */
.loading { max-width: 640px; margin: 24px auto; text-align: center; }
.ok { color: var(--good); font-weight: 800; }

.steps { display: flex; gap: 6px; margin-bottom: 18px; font-size: .82rem; font-weight: 700; }
.steps span { flex: 1; text-align: center; padding: 7px 4px; border-radius: 8px; background: var(--pill); color: var(--pill-txt); }
.steps span.on { background: var(--navy); color: #fff; }
.steps span.done { background: var(--ice); color: var(--navy); }

.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr svg { width: 200px; height: 200px; background: #fff; color: var(--navy); } /* QR modules: fill=currentColor */
/* Finding 28: the referrer share text in the normal font; the link on its own left-to-right line,
   never broken inside the URL (a long link scrolls inside its own line instead). */
.rp-share { background: var(--soft); border-radius: 8px; padding: 10px 14px; display: grid; gap: 6px; justify-items: start; }
.rp-share-link { white-space: nowrap; overflow-x: auto; max-width: 100%; unicode-bidi: isolate; text-align: left; }
.secret { font-family: monospace; font-size: 1rem; letter-spacing: .08em; background: var(--soft); border-radius: 8px; padding: 8px 12px; word-break: break-all; }

table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { text-align: start; padding: 7px 6px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 700; }

footer { background: var(--navy); color: var(--ice); font-size: .75rem; padding: 18px 0; }
footer p + p { margin-top: 6px; }
footer a { color: var(--gold); }

/* 2.1: terms & clarifications (footer link target, registration and re-acceptance) */
h2 { color: var(--navy); font-size: 1.05rem; margin: 4px 0 8px; }
.terms { padding-inline-start: 1.3em; display: grid; gap: 8px; font-size: .88rem; }
.terms ul { padding-inline-start: 1.2em; margin-block: 4px; display: grid; gap: 4px; list-style: disc; }
.terms p { margin-block-start: 4px; }
/* 31.10: legal text given as blocks (api/src/lib/legal-blocks.mjs): numbered lists inside an item, sub-lists, tables */
.terms ol { padding-inline-start: 1.4em; margin-block: 4px; display: grid; gap: 4px; list-style: decimal; }
.terms ul > li > ul { margin-block-start: 4px; list-style: circle; }
.legal-table { border-collapse: collapse; width: 100%; font-size: .84rem; margin-block: 6px; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 4px 8px; text-align: start; vertical-align: top; }
.legal-table th { background: var(--muted-bg); }
/* Finding 27: the privacy notice (item 9) and the cookies item when opened from a "privacy notice" link. */
.terms li.rp-hl { background: #FFF6E0; border-inline-start: 4px solid var(--gold); padding-inline-start: 8px; border-radius: 4px; }
.termsbox { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: var(--soft); }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 700; }
label.check input { width: auto; margin: 0; }

/* Wide screens (owner findings 2 and 13, 30.9): the signed-in home, the admin area, M-8 and the
   builder use the full width. Cards sit in a responsive grid: columns on a desktop, one column on a
   phone. min(100%, ...) keeps every track inside the viewport, so nothing scrolls sideways at 360px;
   wide tables scroll inside their own box (.scroll-x) instead of the page. */
main[data-area="admin"] .card, main[data-area="admin-agents"] .card, main[data-area="builder"] .card { max-width: none; }
.grid-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: start; }
.grid-cards > * { min-width: 0; margin: 0; max-width: none; }
.scroll-x { overflow-x: auto; max-width: 100%; }

/* Cookie consent banner (consent/consent.js; shown only once a non-essential tool is registered).
   Not a modal: it blocks nothing. Accept and Reject share one class, so they look the same. */
.rp-consent { position: fixed; inset-inline: 12px; inset-block-end: 12px; z-index: 40; max-width: 720px; margin-inline: auto; background: #fff; color: var(--txt); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; padding: 14px 18px; box-shadow: 0 4px 18px rgba(30, 39, 97, .25); display: grid; gap: 8px; font-size: .88rem; }
.rp-consent a { color: var(--navy); }
.rp-consent-cats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rp-consent-cat { display: flex; gap: 6px; align-items: center; font-weight: 400; }
.rp-consent-cat input { width: auto; margin: 0; }
.rp-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-consent-btn { flex: 1 1 140px; padding: 10px 16px; border: 1px solid var(--navy); border-radius: 8px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.rp-consent-settings { color: var(--gold); }

@media (max-width: 560px) {
  .steps { font-size: .7rem; }
  .card { padding: 16px; }
}

/* Fix round 1.10 night E3: every dialog is centred on both axes over a dim navy backdrop (the reset above sets
   margin 0 on everything, which pinned the native <dialog> to one edge); on a phone it takes the full width. */
dialog.rp-modal, dialog.adm-dialog { position: fixed; inset: 0; margin: auto; width: calc(100% - 32px); max-width: 440px; max-height: calc(100% - 32px); overflow: auto; background: var(--card); color: var(--txt); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
dialog.rp-modal::backdrop, dialog.adm-dialog::backdrop { background: rgba(30, 39, 97, .45); }
dialog.rp-modal h2, dialog.adm-dialog h2 { color: var(--navy); font-size: 1.1rem; }
@media (max-width: 520px) {
  dialog.rp-modal, dialog.adm-dialog { width: 100%; max-width: 100%; margin: auto 0; border-radius: 0; border-inline: 0; }
}
.btn.danger { background: var(--serious); }
/* Fix round 1.10 night: E8 end-of-document marker (observed, invisible); E1 gate step label + green notice. */
.rp-doc-end { display: block; block-size: 1px; }
.termsbox:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rp-gate-step { color: var(--navy); font-weight: 700; font-size: .85rem; }
.rp-gate-done { background: #E8F5EE; color: var(--good); border: 1px solid #BFE3CF; border-radius: 8px; padding: 8px 12px; font-weight: 700; }
input[type="checkbox"]:disabled + span { color: var(--muted); }
.rp-english { font-size: .88rem; }

/* Portal assistant (plan §1, §3.6). The panel sits at the inline end (right in LTR, left in RTL), over the
   page, below 760px it takes the full width. A filled field keeps a gold outline (an accent, never text)
   until the user edits it; the banner above the form names the form's own button. */
.rp-assist-toggle { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 40; }
.rp-assist-panel { position: fixed; inset-block: 72px 16px; inset-inline-end: 16px; width: min(380px, calc(100vw - 32px)); z-index: 41; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 10px; box-shadow: 0 8px 28px rgba(30, 39, 97, .18); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.rp-assist-panel h2 { color: var(--navy); font-size: 1.05rem; flex: 1; }
.rp-assist-disclosure { font-size: .82rem; color: var(--muted); background: var(--soft); border-radius: 8px; padding: 8px 10px; }
.rp-assist-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.rp-assist-msg { border-radius: 8px; padding: 8px 10px; background: var(--soft); overflow-wrap: anywhere; }
.rp-assist-user { background: var(--ice); color: var(--navy); align-self: flex-end; }
.rp-assist-answer button { margin-block-start: 6px; margin-inline-end: 6px; }
.rp-assist-source { font-size: .8rem; }
.rp-assist-form { display: flex; gap: 8px; align-items: flex-end; }
.rp-assist-form textarea { flex: 1; }
[data-assist-filled] { outline: 2px solid var(--gold); outline-offset: 1px; }
.rp-assist-banner { border: 1px solid var(--gold); border-inline-start-width: 4px; background: #FFF8E8; color: var(--txt); border-radius: 8px; padding: 8px 12px; margin-block-end: 8px; }
@media (max-width: 760px) { .rp-assist-panel { inset-inline: 8px; width: auto; } }
/* Owner 6.10 (Brasov preview): multi-line builder texts keep their line breaks. The text stays a text node. */
.rp-multiline { white-space: pre-line; overflow-wrap: anywhere; }
/* Phone field (owner 7.10, docs/phone-input-plan-7-10.md): country button + number, a searchable list in the flow,
   the suggestion, the invitation note and the inline error. The row is always left-to-right (+40 754 …). */
.rp-phone-label { display: grid; gap: 5px; font-size: .86rem; font-weight: 700; }
.rp-phone { display: grid; gap: 6px; font-weight: 400; }
.rp-phone-row { display: flex; gap: 8px; align-items: stretch; }
.rp-phone-row input { margin-top: 0; }
.rp-phone-cc { flex: 0 0 auto; min-width: 88px; padding: 0 10px; border: 1px solid var(--field); border-radius: 8px; background: #fff; color: var(--navy); font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rp-phone-num { flex: 1 1 auto; min-width: 0; }
.rp-phone-panel { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px; box-shadow: 0 8px 24px rgba(30, 39, 97, .12); }
.rp-phone-search { margin-top: 0; }
.rp-phone-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 240px; overflow-y: auto; }
.rp-phone-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .92rem; }
.rp-phone-list li:hover, .rp-phone-list li:focus { background: var(--soft); outline: 2px solid var(--gold); outline-offset: -2px; }
.rp-phone-list li[aria-selected="true"] { font-weight: 700; }
.rp-phone-suggest, .rp-phone-note, .rp-phone-err { margin: 0; font-size: .88rem; }
.rp-phone-err { color: var(--serious); }
.rp-phone-warn { color: #8A5300; }
.rp-phone-suggest .link { font-size: .88rem; }
/* Password fields (owner 7.10, docs/email-password-plan-7-10.md section 4): field + eye button, the live checklist.
   Green / red text on white: --good 5.4:1, --serious 6.5:1 (WCAG AA 4.5:1). */
.rp-pw { display: grid; gap: 12px; }
.rp-pw-field label { margin-bottom: 5px; }
.rp-pw-row { display: flex; gap: 8px; align-items: stretch; }
.rp-pw-row input { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.rp-pw-eye { flex: 0 0 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--field); border-radius: 8px; background: #fff; color: var(--navy); cursor: pointer; }
.rp-pw-eye[aria-pressed="true"] { background: var(--ice); }
.rp-pw-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-pw-slash { display: none; }
.rp-pw-eye[aria-pressed="true"] .rp-pw-slash { display: inline; }
.rp-pw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .88rem; color: var(--muted); }
.rp-pw-rules li { display: flex; gap: 8px; align-items: baseline; }
.rp-pw-mark { flex: 0 0 1.1em; text-align: center; font-weight: 700; }
.rp-pw-rules li[data-state="met"] { color: var(--good); }
.rp-pw-rules li[data-state="failed"] { color: var(--serious); }
.rp-pw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.btn[data-action="finish"]:disabled { cursor: not-allowed; }
/* owner 7.10 (email plan): the email field's suggestion and error under it; a long address wraps, never overflows */
.rp-email { display: grid; gap: 6px; font-weight: 400; min-width: 0; }
.rp-email-suggest, .rp-email-err { margin: 0; font-size: .88rem; }
.rp-email-err { color: var(--serious); }
.rp-email-suggest .link { font-size: .88rem; }
.rp-email-suggest b, [data-confirm-email] b { overflow-wrap: anywhere; }