/* Santovaty / Tavlix — shared components. Uses only tokens from santovaty-tokens.css. */
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ar);-webkit-font-smoothing:antialiased}
[lang=en] body,body[lang=en],.lat{font-family:var(--font-lat)}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0}
a{color:var(--primary-text)}
.lat{font-family:var(--font-lat)}
.muted{color:var(--text-2)}
.cap{font-size:13.5px;color:var(--text-2);line-height:1.8;margin:0}
[hidden]{display:none !important}

/* buttons */
.btn{cursor:pointer;border:1px solid transparent;border-radius:10px;min-height:40px;padding:0 16px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform 120ms ease,filter 120ms ease,background-color 150ms ease}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn:disabled{cursor:not-allowed;filter:none;transform:none;opacity:.55}
.btn-primary{background:var(--primary);color:var(--on-primary);font-weight:700}
.btn-ghost{background:var(--raised);border-color:var(--border-strong);color:var(--text)}
.btn-accent{background:var(--accent);color:var(--on-accent);font-weight:700}
.btn-stop{background:var(--danger-soft);border-color:var(--danger);color:var(--danger-text);font-weight:700}
.btn-link{background:transparent;color:var(--primary-text);padding:0 4px;min-height:32px}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* segmented + switch */
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;background:var(--raised);border:1px solid var(--border-strong);border-radius:10px;padding:3px}
.seg button{cursor:pointer;border:none;background:transparent;border-radius:7px;min-height:30px;padding:0 11px;font-size:13px;color:var(--text)}
.seg button:hover{background:var(--sunken)}
.seg button[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
.sw{width:44px;height:24px;border-radius:999px;border:1px solid var(--border-strong);background:var(--sunken);position:relative;cursor:pointer;flex-shrink:0;transition:background-color 160ms}
.sw::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:var(--text-faint);transition:inset-inline-start 160ms,background-color 160ms}
.sw[aria-checked=true]{background:var(--primary);border-color:var(--primary)}
.sw[aria-checked=true]::after{inset-inline-start:23px;background:var(--on-primary)}

/* surfaces */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{font-size:16px}
.panel p{margin:0;line-height:1.75;color:var(--text-3);font-size:14px}

/* status chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:4px 10px;color:var(--text-3);max-width:100%}
.chip b{font-weight:600;color:var(--text)}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--neutral-dot)}
.dot.ok{background:var(--success)}.dot.warn{background:var(--warning)}.dot.bad{background:var(--danger)}.dot.unk{background:transparent;border:1.5px dashed var(--neutral-dot)}
.dot.live{background:var(--danger);animation:blink 1.4s ease-in-out infinite}

/* banners */
.banner{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.65;border:1px solid}
.banner.warn{background:var(--warning-soft);border-color:var(--warning-border);color:var(--text)}
.banner.info{background:var(--info-soft);border-color:var(--border);color:var(--text)}
.banner.bad{background:var(--danger-soft);border-color:var(--danger-border);color:var(--text)}
.banner svg{flex-shrink:0;margin-top:2px}

/* markers */
.nib{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12px;line-height:1.6;color:var(--text-2);border:1px dashed var(--accent-border);border-radius:8px;padding:5px 8px}
.ni{font:800 10px var(--font-lat);letter-spacing:.06em;color:var(--on-accent);background:var(--accent);border-radius:5px;padding:1px 6px;flex-shrink:0}
.sug{font:700 10px var(--font-lat);letter-spacing:.06em;color:var(--primary-text);border:1px solid var(--border-strong);border-radius:5px;padding:1px 6px;flex-shrink:0;white-space:nowrap}
.fx-tag{font:700 10px var(--font-lat);letter-spacing:.06em;color:var(--info);border:1px dashed var(--info);border-radius:5px;padding:1px 6px;white-space:nowrap}

/* steps */
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-2)}
.step.on{border-color:var(--ring);color:var(--text);background:var(--primary-soft)}
.step.done{color:var(--success);border-color:var(--success-border)}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--border-strong);border-top-color:var(--ring);animation:spin 900ms linear infinite;flex-shrink:0}

/* dialog */
.scrim{position:absolute;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.dialog{background:var(--surface);border:1px solid var(--border-strong);border-radius:16px;padding:18px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.dialog h2{font-size:17px}
.dialog .acts{display:flex;flex-direction:column;gap:8px}

/* toast + ripple */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-weight:600;border-radius:10px;padding:10px 16px;font-size:14px;opacity:0;transition:opacity 200ms;pointer-events:none;max-width:calc(100% - 32px);z-index:60}
#toast.show{opacity:1}
#fx{position:fixed;inset:0;pointer-events:none;z-index:40}
.ripple{position:fixed;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;background:color-mix(in srgb,var(--ring) 45%,transparent);animation:ripple 550ms ease-out forwards}
.enter{animation:enter 220ms ease}
@keyframes enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ripple{from{transform:scale(.2);opacity:.9}to{transform:scale(1.4);opacity:0}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}.ripple{display:none}}

/* review-only demo panel (not part of the product UI) */
.demo{background:var(--surface);border:1px dashed var(--border-strong);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.demo h2{font-size:17px}
.demo .lbl{font-size:12.5px;font-weight:700;color:var(--text-2)}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dgrid button{min-height:34px;border-radius:8px;border:1px solid var(--border-strong);background:var(--raised);font-size:12.5px;cursor:pointer;text-align:start;padding:4px 10px;color:var(--text)}
.dgrid button[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.backlink{color:var(--primary-text);text-decoration:none;font-size:14px}

/* Google sign-in button — follows Google Identity branding guidelines (light/dark themes, 40px, pill).
   Do NOT recolor, mirror or resize the "G" independently; replace with the official download bundle at implementation.
   Dark theme: the standard-color G sits on a white circle so it always appears on a white background. */
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border-radius:20px;font:500 14px/20px 'Google Sans','Roboto',Arial,sans-serif;letter-spacing:.25px;cursor:pointer;transition:background-color 150ms ease,box-shadow 150ms ease}
[data-theme="light"] .gbtn{background:#FFFFFF;border:1px solid #747775;color:#1F1F1F}
[data-theme="dark"] .gbtn{background:#131314;border:1px solid #8E918F;color:#E3E3E3}
[data-theme="light"] .gbtn:hover{background:#F3F3F3}
[data-theme="dark"] .gbtn:hover{background:#26262A}
.gbtn .g{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
[data-theme="dark"] .gbtn .g{width:24px;height:24px;margin:-2px;background:#FFFFFF;border-radius:50%}
.gbtn .g svg{width:20px;height:20px;display:block}
[data-theme="dark"] .gbtn .g svg{width:16px;height:16px}
.gbtn:disabled,.gbtn[aria-disabled=true]{opacity:.38;cursor:not-allowed}
.gbtn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* auth layout pieces (shared by website account, public preview, app, extension) */
.auth{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px}
.auth h1{font-size:22px}
.or{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:13px}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--border)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13.5px;font-weight:600}
.inp{height:44px;width:100%;border-radius:10px;border:1px solid var(--border-strong);background:var(--sunken);padding:0 12px;color:var(--text);font:15px var(--font-lat)}
.inp:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-3)}
.check input{width:18px;height:18px;accent-color:var(--primary)}
.tabs2{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--raised);border:1px solid var(--border-strong);border-radius:10px;padding:3px}
.tabs2 button{border:none;background:transparent;border-radius:7px;min-height:34px;cursor:pointer;font-size:14px;color:var(--text)}
.tabs2 button[aria-selected=true]{background:var(--surface);box-shadow:var(--shadow-sm);font-weight:700}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 0}
.state .ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.state h2{font-size:19px}
.state p{margin:0;color:var(--text-3);line-height:1.75;font-size:14px}
.sim{font:700 10px var(--font-lat);letter-spacing:.06em;color:var(--warning);border:1px dashed var(--warning);border-radius:5px;padding:1px 6px;white-space:nowrap}

[tabindex="-1"]:focus{outline:none}