/* Keliqo design tokens and shared components. The same values as keliqo.com (site.css), named as in docs/design/tokens.json,
   so the portal, the wizard and the marketing site look like one product. Light only, like the site.
   Logical properties (inline/block) everywhere, so the Arabic page mirrors itself. */
:root {
  --paper: #f5f6fb; --card: #ffffff; --ink: #17133b; --muted: #5e5a78; --line: #dcdcea;
  --violet: #4a2fe0; --violet-deep: #33209f; --violet-soft: #ecebff; --marker: #ffe45c; --mint: #0b7d61;
  --warn-bg: #fff3d6; --warn-ink: #6b4500; --warn-line: #e8c26a; --danger: #b3261e;
  --on-violet: #ffffff; --on-ink: #ffffff; --ink-band-muted: #cfcde3;
  --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 44px; --space-7: 64px; --space-8: 88px;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 24px; --radius-pill: 999px;
  --shadow-raise: 0 1px 3px rgba(23, 19, 59, 0.12);
  --shadow-menu: 0 18px 40px -18px rgba(23, 19, 59, 0.35);
  --shadow-stage: 0 1px 0 #dcdcea, 0 30px 60px -30px rgba(74, 47, 224, 0.35);
  --body: 'Onest', system-ui, sans-serif;
  --display: var(--body);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Scripts Onest does not cover use their own family for everything. */
[data-font="ar"] { --body: 'IBM Plex Sans Arabic', system-ui, sans-serif; }
[data-font="zh"] { --body: 'Noto Sans SC', system-ui, sans-serif; }
[data-font="ja"] { --body: 'Noto Sans JP', system-ui, sans-serif; }
[data-font="ko"] { --body: 'Noto Sans KR', system-ui, sans-serif; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--violet); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, label:focus-within { outline: 3px solid var(--violet); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.375rem; line-height: 1.2; }
h3 { font-size: 1.05rem; line-height: 1.3; }
[data-font="ar"] :is(h1, h2, h3), [data-font="zh"] :is(h1, h2, h3), [data-font="ja"] :is(h1, h2, h3), [data-font="ko"] :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.25; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-5); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 16px; z-index: 10; background: var(--card); padding: 8px 12px; border-radius: var(--radius-sm); }
.muted { color: var(--muted); }
.small { font-size: .92rem; }

/* Brand: the question mark is the product's promise, so it is the logo. */
.brand { font: 700 1.35rem/1 var(--display); letter-spacing: -0.03em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; direction: ltr; }
.brand i { font-style: normal; color: var(--on-violet); background: var(--violet); border-radius: 50%; width: 1.05em; height: 1.05em; display: inline-grid; place-items: center; font-size: 0.8em; margin-inline-start: 0.12em; transform: translateY(-0.05em); }

/* Buttons: pills. One primary (violet) per task. */
/* :where keeps the base at zero specificity, so every variant class below (and the unstyled controls) wins without a fight. */
:where(button, .button, .btn) { display: inline-block; font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.3; padding: 11px 22px; border: 1px solid var(--violet); border-radius: var(--radius-pill); background: var(--violet); color: var(--on-violet); text-decoration: none; cursor: pointer; text-align: center; transition: background .15s, border-color .15s; }
a.button:hover, .btn:hover, button:where(:not(.sw, .icon, .choice, .chip, .add, .link, .linkbtn, .secondary, .ghost, .danger, [role=radio], [role=tab], [role=switch])):hover { background: var(--violet-deep); border-color: var(--violet-deep); }
button:disabled { opacity: .5; cursor: not-allowed; }
a.button, a.btn { color: var(--on-violet); }
a.button.secondary, a.button.ghost { color: var(--ink); }
.btn.small { padding: 9px 18px; }
.secondary, .ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.secondary:hover, .ghost:hover, a.button.secondary:hover { background: var(--card); border-color: var(--violet); color: var(--ink); }
/* Text link: ink with the marker underline; a destructive one is danger text with the same underline. */
button.link, button.linkbtn { background: none; border: 0; border-bottom: 2px solid var(--marker); border-radius: 0; padding: 4px 0; color: var(--ink); font-weight: 600; }
button.link:hover, button.linkbtn:hover { background: none; border-color: var(--violet); color: var(--ink); }
button.link.danger { color: var(--danger); }
button.danger:not(.link) { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger:not(.link):hover { background: #8f1d17; border-color: #8f1d17; }
.primary { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.primary:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
form.inline { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-4); }

/* Header: the same as keliqo.com. */
.top { position: sticky; top: 0; z-index: 5; background: rgba(245, 246, 251, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.top nav.main { display: flex; gap: 22px; margin-inline-start: 12px; }
.top nav.main a, .login { position: relative; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; padding-block: 6px; }
.top nav.main a:hover, .login:hover { color: var(--violet); }
.top nav.main a[aria-current="page"] { font-weight: 600; }
.top nav.main a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--marker); }
.top .end { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
/* Language switcher and account menu: native disclosures, as on the site. */
.lang, .account { position: relative; }
.lang summary, .account summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: .95rem; font-weight: 500; padding: 6px 10px; border-radius: var(--radius-pill); }
.lang summary::-webkit-details-marker, .account summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary, .account summary:hover, .account[open] summary { background: var(--violet-soft); }
.lang ul, .account .menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); margin: 0; padding: 10px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-menu); z-index: 6; }
.lang ul { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px; }
.lang a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.lang a:hover { background: var(--violet-soft); }
.lang a[aria-current] { background: var(--ink); color: var(--on-ink); }
.account .menu { min-width: 220px; display: grid; gap: 8px; padding: 14px; }
.account .email { font-weight: 600; overflow-wrap: anywhere; direction: ltr; text-align: start; }
.account summary .email-short { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.account svg, .lang svg { flex: none; }

/* Footer */
footer { padding: 40px 0 56px; font-size: .92rem; color: var(--muted); }
footer .links { margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; }
footer .links b { color: var(--ink); font-weight: 700; }
footer a { color: var(--muted); }
footer a:hover { color: var(--violet); }
.langs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.langs a { text-decoration: none; }
.langs a[aria-current] { color: var(--ink); font-weight: 600; }

/* Fields: label above, hint and error below. */
label, .label { display: block; font-size: .95rem; font-weight: 600; margin-block-end: 6px; }
input[type=text], input[type=email], input[type=url], input[type=search], input[type=number], textarea {
  width: 100%; max-width: 32rem; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: inherit; font-size: 1.0625rem; }
textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
input[type=file] { max-width: 100%; font: inherit; font-size: .95rem; color: var(--muted); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-inline-end: 12px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--violet); width: 1.15rem; height: 1.15rem; vertical-align: -.2em; margin-inline-end: 8px; }
label:has(> input[type=checkbox]) { font-weight: 500; }
input:disabled, textarea:disabled { background: var(--paper); color: var(--muted); }
[dir="rtl"] :is(input[type=email], input[type=url], input[inputmode=url], input[inputmode=email], .ltr) { direction: ltr; text-align: right; }
::placeholder { color: var(--muted); opacity: .8; }
.hint { color: var(--muted); font-size: .92rem; margin: 6px 0 0; }
.err, .error { color: var(--danger); font-size: .95rem; margin: 6px 0 0; font-weight: 500; }
.field-row { margin-block-end: var(--space-4); }
code, .secret, pre.secret { font-family: var(--mono); font-size: .85rem; line-height: 1.55; }
.secret { display: block; word-break: break-all; background: var(--paper); border: 1px solid var(--line); padding: 10px 14px; border-radius: var(--radius-md); direction: ltr; text-align: start; margin: 0; }
pre.secret { white-space: pre-wrap; }

/* Card: one thing the user sets or reads. No shadow, hairline border. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); margin-block-end: var(--space-3); }
.card > h2, .card > h2 + p { margin-block-end: 8px; }
.card > h3 { margin-block: var(--space-5) 8px; padding-block-start: var(--space-4); border-top: 1px solid var(--line); }
.card > p:last-child { margin-block-end: 0; }
.card p { margin-block: 0 12px; }
.card ul { padding-inline-start: 1.2rem; }
.notice { background: var(--violet-soft); border-radius: var(--radius-md); padding: 12px 16px; margin-block-end: var(--space-3); }
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin: 0; }
.warn { color: var(--warn-ink); font-weight: 600; }
.alert { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: var(--radius-md); padding: 12px 16px; margin-block-end: var(--space-3); font-weight: 600; }
.alert p { margin: 2px 0; }

/* Status pill: a dot and a word, never colour alone. */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; padding: 3px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: start; max-width: 100%; }
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok { color: var(--mint); }
.pill.wait { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.pill.bad { color: var(--danger); border-radius: var(--radius-lg); }
.pill.info { background: var(--violet-soft); border-color: var(--violet-soft); color: var(--ink); }
.pill.info::before { background: var(--violet); }

/* Segmented control: pills on paper, the chosen one raised. */
.seg, .tabs { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); background: var(--paper); border: 1px solid var(--line); border-radius: 22px; max-width: 100%; }
.card .seg, .panel .seg, .card .tabs { background: var(--paper); }
.seg button, .seg label, .tabs button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 16px; border-radius: var(--radius-pill); color: var(--muted); font-size: .95rem; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 8px; justify-content: center; }
.seg button:hover, .seg label:hover, .tabs button:hover { color: var(--ink); }
.seg button[aria-checked="true"], .seg label:has(input:checked), .tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-raise); }
.seg label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label:has(input:focus-visible), .seg button:focus-visible, .tabs button:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.seg.wrapping { flex-wrap: wrap; border-radius: var(--radius-lg); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--warn-ink); }

/* Settings components shared by the widget studio and the wizard. */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: 0; }
.field { display: grid; gap: 6px; padding-block: var(--space-4); border-top: 1px solid var(--line); min-width: 0; }
.field:first-child { border-top: 0; padding-top: 0; }
.field:last-child { padding-bottom: 0; }
.field > .label, .field > label.label { margin: 0; }
.field input[type=text], .field input[type=email], .field textarea { max-width: none; }
.field .hint { margin: 0; }
.counter { justify-self: end; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.okmsg { color: var(--mint); }
.badmsg { color: var(--danger); }
:where(.panel, .studio, .wizard) :where(button.sw, button.icon, button.choice, button.chip, button.add, button.plan, button.q) { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; }
button:disabled { cursor: not-allowed; }

/* Swatches: 40px discs, the chosen one ringed. The last disc (rainbow ring) opens the native colour picker. */
.swatches { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px; }
.sw { width: 40px; height: 40px; border-radius: 50%; position: relative; background: var(--c); box-shadow: inset 0 0 0 1px rgba(23, 19, 59, .22); display: block; }
.sw[aria-checked="true"]::after, .sw.custom:has(input[aria-checked="true"])::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ink); pointer-events: none; }
.sw.custom { background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); cursor: pointer; }
.sw.custom span { position: absolute; inset: 7px; border-radius: 50%; background: var(--c, var(--card)); }
.sw.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.sw:focus-visible, .sw.custom:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 5px; }
.colorrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .95rem; color: var(--muted); }
.colorrow strong { color: var(--ink); font-weight: 600; }

/* Choice cards: a few options as cards with a short explanation. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 10px; }
.choice { border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 12px; background: var(--card); display: grid; gap: 6px; align-content: start; text-align: start; }
.choice:hover { border-color: var(--violet); }
.choice[aria-checked="true"] { border-color: var(--violet); background: var(--violet-soft); }
.choice b { font-weight: 600; font-size: .95rem; }
.choice small { color: var(--muted); line-height: 1.4; font-size: .88rem; }
.choice .mini { display: block; height: 3.6rem; border-radius: var(--radius-sm); background: var(--paper); position: relative; }
.choice[aria-checked="true"] .mini { background: var(--card); }
.choice .mini i { position: absolute; bottom: .35rem; width: 1.6rem; height: .7rem; border-radius: var(--radius-pill); background: var(--violet); }

/* Editable list: input, move up/down, remove; add link and suggestion chips below. */
.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: 4px; }
.list li input { flex: 1; min-width: 0; max-width: none; }
.icon { width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--muted); display: grid; place-items: center; flex: none; font-size: 1rem; }
.icon:hover:not(:disabled) { background: var(--violet-soft); color: var(--ink); }
.icon:disabled { opacity: .3; cursor: default; }
.add { justify-self: start; color: var(--violet); font-weight: 600; padding: 6px 0; }
.add:hover { color: var(--violet-deep); text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px dashed var(--muted); border-radius: var(--radius-pill); padding: 5px 14px; font-size: .9rem; color: var(--muted); text-align: start; }
.chip:hover { color: var(--ink); border-color: var(--ink); }

/* Logo row with a file picker. */
.logorow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logorow .hint { flex: 1 1 8rem; min-width: 0; }
.logothumb, .logoprev { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--paper) center / contain no-repeat; border: 1px solid var(--line); flex: none; }
.ghost, .filebtn { display: inline-block; padding: 7px 16px; font-size: .92rem; font-weight: 600; line-height: 1.3; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); cursor: pointer; text-align: center; }
.filebtn:hover { border-color: var(--violet); }
.filebtn { position: relative; cursor: pointer; display: inline-block; }
.filebtn input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; margin: 0; max-width: none; }
.filebtn:focus-within { outline: 3px solid var(--violet); outline-offset: 3px; }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .top .wrap { gap: 10px; height: auto; flex-wrap: wrap; row-gap: 0; }
  .top .brand { min-height: 60px; align-items: center; }
  .top .end { min-height: 60px; }
  /* The app navigation is one horizontally scrollable row under the logo; no hamburger hides sections. */
  .top nav.main { order: 3; flex: 1 0 100%; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scrollbar-width: none; gap: 20px; }
  .top nav.main::-webkit-scrollbar { display: none; }
  .top nav.main a { min-height: 40px; display: inline-flex; align-items: center; }
  .top nav.main a[aria-current="page"]::after { bottom: 2px; }
  .top .end { gap: 4px; }
  .lang summary span, .account summary .email-short { display: none; }
  .lang summary, .account summary { min-width: 44px; min-height: 44px; justify-content: center; }
  .lang ul { position: fixed; inset-inline: 12px; top: 64px; grid-template-columns: repeat(2, 1fr); max-height: calc(100vh - 80px); overflow-y: auto; }
  .account .menu { position: fixed; inset-inline: 12px; top: 64px; }
  .login:not(:last-child), .top nav.public { display: none; }
  .card { padding: var(--space-4); }
  h1 { font-size: 1.65rem; }
  button, .button, .btn { min-height: 44px; }
  button.link, .linkbtn { min-height: 0; }
  .btn.small { padding: 8px 12px; font-size: .88rem; min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
[tabindex="-1"]:focus-visible { outline: none; }