/*
  healthyback365 - Partner / Kine portal AUTH design system
  -----------------------------------------------------------------
  Shared aqua styling for the authentication surfaces (login, logout,
  forgot/reset password, access denied, session expired, 2FA).
  One product family with mockups/kine-portal.html: same self-hosted
  Hanken Grotesk, same teal #14b8a6, same pill buttons, same switcher.
  Framework-free. No em dash anywhere. 100% responsive.
*/

/* Self-hosted Hanken Grotesk (variable, weights 400-900). Bundled woff2, no CDN. */
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --teal-50:#effdfb; --teal-100:#d9f9f5; --teal-200:#a7f3e7; --teal-300:#74e7da; --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e; --teal-900:#0c4a44;
  --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-400:#fb923c; --orange-500:#f97316; --orange-600:#ea580c; --orange-700:#c2410c;
  --pink-50:#fff1f4; --pink-100:#fee2e8; --pink-500:#f43f5e; --pink-600:#e11d48; --pink-700:#be123c;
  --green-50:#ecfdf5; --green-100:#d1fae5; --green-500:#10b981; --green-700:#047857; --amber-400:#f59e0b;
  --slate-25:#fcfcfd; --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-600:#475569; --slate-900:#0f172a;
  --ink:#0f172a; --muted:#475569; --soft:#94a3b8;
  --line:rgba(15,23,42,.08); --line-2:rgba(15,23,42,.12);
  --bg:radial-gradient(circle at 12% -5%, rgba(45,212,191,.16), transparent 42rem), radial-gradient(circle at 92% 8%, rgba(167,243,231,.4), transparent 34rem), linear-gradient(180deg,#f6fffd,#eefaf9);
  --sh-xs:0 1px 2px rgba(15,23,42,.05); --sh-sm:0 8px 24px rgba(15,23,42,.06); --sh:0 18px 44px rgba(15,23,42,.08); --sh-lg:0 34px 80px rgba(15,23,42,.12); --sh-teal:0 16px 40px rgba(20,184,166,.24); --sh-orange:0 14px 34px rgba(249,115,22,.22);
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-pill:999px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  color:var(--ink); background:var(--bg); background-attachment:fixed;
  min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:15px; font-weight:400; overflow-x:hidden;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input{font-family:inherit}
a{color:inherit; text-decoration:none}
svg{display:block}
:focus-visible{outline:2px solid var(--teal-600); outline-offset:2px; border-radius:6px}
.ic{width:20px; height:20px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; flex:none}
.ic-sm{width:16px; height:16px}
.num{font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
h1,h2,h3,h4{letter-spacing:-.025em; font-weight:600; line-height:1.18}

/* ============ PAGE FRAME ============ */
.auth-body{min-height:100vh; display:flex; flex-direction:column}
.auth-top{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px clamp(16px,3vw,34px);
}
.auth-top .brand{display:flex; align-items:center; gap:11px}
.auth-main{flex:1; display:grid; place-items:center; padding:8px clamp(14px,3vw,34px) 30px}
.auth-foot-bar{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:16px; color:var(--soft); font-size:.74rem; font-weight:600; text-align:center;
}
.auth-foot-bar a{color:var(--muted); font-weight:700}
.auth-foot-bar a:hover{color:var(--teal-700)}
.dot-sep{width:3px; height:3px; border-radius:99px; background:currentColor; opacity:.5}

/* ============ BRAND ============ */
.brand-mark{width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,var(--teal-400),var(--teal-600)); display:grid; place-items:center; box-shadow:0 8px 18px rgba(20,184,166,.34); flex:none}
.brand-mark svg{width:22px; height:22px}
.brand-mark--lg{width:52px; height:52px; border-radius:15px}
.brand-mark--lg svg{width:30px; height:30px}
.brand-name{font-weight:700; font-size:1.02rem; letter-spacing:-.035em; line-height:1}
.brand-name span{color:var(--teal-600)}
.brand-sub{font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.brand{display:flex; align-items:center; gap:11px}
.brand-text{display:flex; flex-direction:column}
.brand-name{display:block}
.brand-sub{display:block; font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.on-aqua .brand-name{color:#fff}
.on-aqua .brand-name span{color:#c9f7f1}
.on-aqua .brand-sub{color:rgba(255,255,255,.74)}

/* ============ LANGUAGE SWITCHER (horizontal, language codes) ============ */
.lang-switch{display:flex; align-items:center; gap:8px}
.lang-seg{display:flex; flex-wrap:wrap; gap:3px; padding:3px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-2)}
.lang-opt{flex:1 1 auto; min-width:2.2rem; min-height:34px; padding:6px 8px; border-radius:var(--r-pill); font-weight:600; font-size:.76rem; letter-spacing:.02em; color:var(--muted); transition:background .15s,color .15s}
.lang-opt:hover{color:var(--teal-700)}
.lang-opt.active{background:var(--teal-600); color:#fff; font-weight:700}
.lang-opt:focus-visible{outline:2px solid var(--teal-600); outline-offset:2px; box-shadow:0 0 0 2px #fff}

/* ============ BUTTONS ============ */
/* justify-content:center is kept (unlike the portal) because auth CTAs are full-width block buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:var(--r-pill); font-weight:600; font-size:.9rem; min-height:46px; border:1px solid transparent; transition:transform .12s, box-shadow .15s, background .15s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(120deg,var(--teal-700),#0c6056); color:#fff; box-shadow:0 6px 14px rgba(20,184,166,.16)}
.btn-primary:hover{box-shadow:0 10px 20px rgba(20,184,166,.22)}
.btn-ghost{background:rgba(255,255,255,.85); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-xs)}
.btn-ghost:hover{background:#fff; border-color:var(--teal-200)}
.btn-block{width:100%}
.btn-link{display:inline-flex; align-items:center; gap:6px; color:var(--teal-700); font-weight:700; font-size:.86rem; min-height:40px}
.btn-link:hover{color:var(--teal-600)}

/* ============ CARD (centered surfaces) ============ */
.auth-card{
  width:100%; max-width:452px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9); border-radius:var(--r-2xl);
  box-shadow:var(--sh-lg); padding:clamp(26px,4vw,40px);
  text-align:center;
}
.auth-card .brand-mark{margin:0 auto}
.auth-card h1{font-size:clamp(1.45rem,3.4vw,1.85rem); margin-top:18px}
.auth-card .lede{color:var(--muted); font-size:.96rem; margin-top:10px; line-height:1.5}
.auth-card .actions{display:grid; gap:10px; margin-top:24px}
.auth-card .actions--row{grid-template-columns:1fr 1fr}
@media (max-width:420px){ .auth-card .actions--row{grid-template-columns:1fr} }

/* ============ LOGIN SPLIT ============ */
.auth-split{
  width:100%; max-width:1040px;
  display:grid; grid-template-columns:1fr;
  background:rgba(255,255,255,.9); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.9); border-radius:var(--r-2xl);
  box-shadow:var(--sh-lg); overflow:hidden;
}
/* Form side */
.auth-form{padding:clamp(26px,4vw,46px); display:flex; flex-direction:column; justify-content:center}
.auth-form__head{margin-bottom:22px}
.auth-form h1{font-size:clamp(1.5rem,3vw,2rem); margin-top:12px}
.auth-form .lede{color:var(--muted); font-size:.96rem; margin-top:8px}
.form-stack{display:grid; gap:16px}

/* Aqua aside (brand / value prop) */
.auth-aside{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(26px,4vw,42px);
  background:
    radial-gradient(circle at 82% 12%, rgba(167,243,231,.34), transparent 16rem),
    radial-gradient(circle at 12% 96%, rgba(45,212,191,.28), transparent 18rem),
    linear-gradient(155deg,var(--teal-600) 0%, var(--teal-700) 52%, #0b554c 100%);
  display:none;
}
.auth-aside__inner{position:relative; z-index:2; display:flex; flex-direction:column; height:100%}
.auth-aside .kicker{color:#bdf3ec; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:700}
.auth-aside h2{font-size:clamp(1.5rem,2.4vw,2.05rem); margin-top:12px; color:#fff; line-height:1.14; letter-spacing:-.03em}
.auth-aside p{color:rgba(255,255,255,.9); margin-top:12px; font-size:.95rem; max-width:30ch}
.aside-feats{display:grid; gap:13px; margin-top:auto; padding-top:26px}
.aside-feat{display:flex; align-items:flex-start; gap:11px; font-size:.9rem; font-weight:600; color:rgba(255,255,255,.95)}
.aside-feat .tick{width:26px; height:26px; flex:none; border-radius:9px; background:rgba(255,255,255,.16); display:grid; place-items:center}
.aside-feat .tick svg{width:15px; height:15px; stroke:#fff; stroke-width:2.6}
.aside-feat small{display:block; font-weight:500; color:rgba(255,255,255,.66); margin-top:1px; font-size:.76rem}
.aside-secure{display:flex; align-items:center; gap:8px; margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.78); font-size:.78rem; font-weight:600}
.aside-secure svg{width:16px; height:16px; stroke:currentColor; stroke-width:2}
/* decorative stylized spine column */
.aside-spine{position:absolute; right:-6px; top:0; bottom:0; width:120px; z-index:1; opacity:.5; pointer-events:none}

@media (min-width:780px){
  .auth-split{grid-template-columns:1.04fr .96fr}
  .auth-split .auth-aside{display:block}
  /* aside first visually on the right via order */
  .auth-split .auth-form{order:1}
  .auth-split .auth-aside{order:2}
}

/* ============ FORM FIELDS ============ */
.field-group{display:grid; gap:7px; text-align:left}
.field-label{font-size:.82rem; font-weight:700; color:var(--slate-600); display:flex; align-items:center; justify-content:space-between; gap:10px}
.input-wrap{position:relative; display:flex; align-items:center}
.input-wrap .lead-ic{position:absolute; left:14px; color:var(--soft); pointer-events:none}
.input-wrap .lead-ic svg{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none}
.field{
  width:100%; min-height:50px; border-radius:var(--r); border:1px solid var(--line-2);
  background:#fff; color:var(--ink); padding:0 14px; font-weight:600; font-size:.96rem;
  transition:border-color .15s, box-shadow .15s;
}
.input-wrap .field{padding-left:42px}
.input-wrap .field.has-toggle{padding-right:46px}
.field::placeholder{color:var(--slate-400); font-weight:500}
.field:hover{border-color:var(--teal-200)}
.field:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 4px rgba(20,184,166,.16)}
.field-group.invalid .field{border-color:var(--pink-500); box-shadow:0 0 0 4px rgba(244,63,94,.12)}
.pw-toggle{position:absolute; right:8px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--soft)}
.pw-toggle:hover{color:var(--teal-700); background:var(--slate-50)}
.pw-toggle svg{width:19px; height:19px; stroke:currentColor; stroke-width:2; fill:none}
.field-hint{font-size:.76rem; color:var(--soft); font-weight:500}
.field-error{display:none; align-items:center; gap:6px; font-size:.78rem; color:var(--pink-600); font-weight:700}
.field-error svg{width:14px; height:14px; stroke:currentColor; stroke-width:2.4; fill:none; flex:none}
.field-group.invalid .field-error{display:flex}

.form-row-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.checkbox{display:inline-flex; align-items:center; gap:9px; font-size:.86rem; font-weight:600; color:var(--slate-600); cursor:pointer}
.checkbox input{position:absolute; opacity:0; width:0; height:0}
.checkbox .box{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-2); background:#fff; display:grid; place-items:center; transition:background .15s,border-color .15s; flex:none}
.checkbox .box svg{width:13px; height:13px; stroke:#fff; stroke-width:3; fill:none; opacity:0; transition:opacity .12s}
.checkbox input:checked + .box{background:var(--teal-600); border-color:var(--teal-600)}
.checkbox input:checked + .box svg{opacity:1}
.checkbox input:focus-visible + .box{outline:2px solid var(--teal-600); outline-offset:2px}

/* ============ NOTICE / CALLOUT ============ */
.notice{display:flex; gap:12px; text-align:left; padding:14px 16px; border-radius:var(--r-lg); font-size:.88rem; line-height:1.45; border:1px solid transparent}
.notice .n-ic{width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center}
.notice .n-ic svg{width:18px; height:18px; stroke-width:2.2; fill:none}
.notice strong{display:block; font-weight:700; margin-bottom:2px}
.notice span{color:var(--slate-700)}
.notice--info{background:var(--teal-50); border-color:rgba(13,148,136,.18)}
.notice--info .n-ic{background:#fff; color:var(--teal-600)}
.notice--warn{background:var(--orange-50); border-color:rgba(234,88,12,.2)}
.notice--warn .n-ic{background:#fff; color:var(--orange-600)}
.notice--danger{background:var(--pink-50); border-color:rgba(225,29,72,.2)}
.notice--danger .n-ic{background:#fff; color:var(--pink-600)}

/* status pictogram for confirmations */
.status-mark{width:80px; height:80px; margin:0 auto; border-radius:var(--r-xl); display:grid; place-items:center; box-shadow:var(--sh-sm)}
.status-mark svg{width:38px; height:38px; stroke-width:2.4; fill:none}
.status-mark--teal{background:linear-gradient(150deg,var(--teal-400),var(--teal-600)); color:#fff; box-shadow:var(--sh-teal)}
.status-mark--mail{background:linear-gradient(150deg,#5eead4,var(--teal-600)); color:#fff; box-shadow:var(--sh-teal)}
.status-mark--warn{background:linear-gradient(150deg,var(--orange-400),var(--orange-600)); color:#fff; box-shadow:var(--sh-orange)}
.status-mark--lock{background:linear-gradient(150deg,#94a3b8,#475569); color:#fff; box-shadow:0 14px 34px rgba(71,85,105,.26)}

/* badge (e.g. "future / not active yet") */
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill); font-size:.7rem; font-weight:700; letter-spacing:.02em}
.badge--future{background:var(--slate-100); color:var(--slate-600)}
.badge--future .dot{width:6px; height:6px; border-radius:99px; background:var(--amber-400)}
.badge--denied{background:var(--pink-100); color:var(--pink-700)}
.badge--denied .dot{width:6px; height:6px; border-radius:99px; background:var(--pink-500)}

/* demo-only segmented toggle (clearly marked as a mockup affordance) */
.demo-toggle{margin-top:22px; padding:12px; border:1px dashed var(--line-2); border-radius:var(--r-lg); background:var(--slate-25)}
.demo-toggle .demo-label{display:flex; align-items:center; gap:7px; justify-content:center; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); margin-bottom:9px}
.demo-toggle .demo-label .tag{padding:2px 7px; border-radius:99px; background:var(--slate-200); color:var(--slate-600); letter-spacing:.02em}
.seg2{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-2)}
.seg2 button{min-height:40px; border-radius:var(--r-pill); font-weight:700; font-size:.8rem; color:var(--muted)}
.seg2 button.active{background:var(--teal-600); color:#fff}

/* support / contact mini-card */
.support-card{display:flex; align-items:center; gap:12px; text-align:left; padding:13px 15px; border-radius:var(--r-lg); background:var(--slate-50); border:1px solid var(--line); margin-top:6px}
.support-card .s-ic{width:38px; height:38px; border-radius:11px; flex:none; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:var(--teal-600)}
.support-card .s-ic svg{width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none}
.support-card strong{font-size:.84rem; display:block}
.support-card a{font-size:.82rem; color:var(--teal-700); font-weight:700}

/* 2FA code input */
.code-row{display:flex; gap:10px; justify-content:center; margin:6px 0 2px}
.code-cell{width:48px; height:58px; border-radius:var(--r); border:1px solid var(--line-2); background:#fff; text-align:center; font-size:1.5rem; font-weight:700; color:var(--ink); letter-spacing:0}
.code-cell:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 4px rgba(20,184,166,.16)}
@media (max-width:380px){ .code-cell{width:40px; height:52px; font-size:1.3rem} .code-row{gap:7px} }

/* meta line under cards */
.auth-meta{margin-top:20px; font-size:.84rem; color:var(--muted); font-weight:600}
.auth-meta a{color:var(--teal-700); font-weight:700}
.auth-meta a:hover{color:var(--teal-600)}

/* password strength meter */
.pw-strength{display:grid; gap:7px; margin-top:2px; text-align:left}
.pw-bars{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.pw-bars i{height:6px; border-radius:99px; background:var(--slate-200); transition:background .15s}
.pw-strength[data-level="1"] .pw-bars i:nth-child(1){background:var(--pink-500)}
.pw-strength[data-level="2"] .pw-bars i:nth-child(-n+2){background:var(--amber-400)}
.pw-strength[data-level="3"] .pw-bars i{background:var(--green-500)}
.pw-strength small{font-size:.74rem; font-weight:700; color:var(--soft)}
.pw-strength[data-level="1"] small{color:var(--pink-600)}
.pw-strength[data-level="2"] small{color:var(--orange-600)}
.pw-strength[data-level="3"] small{color:var(--green-700)}

/* reduced motion */
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition:none !important; animation:none !important} }

/* toggle helper for demo states (forgot -> sent, denied reasons) */
[data-state-hide]{display:none !important}