/* masar-legacy.css — the INNER-PAGE ADAPTER of the MASAR design system (2026-09-22).
   Every inner page was built on the same handful of class names (.page-head, .card, .btn, .locked, .empty, .tabs,
   inputs, tables). This file restyles those names to the design system with `body.masar-page` specificity, so a
   page's own <style> (which loads later) cannot pull it back to the old look. Page-specific components are still
   rewritten page by page; this is the floor every page stands on, not the ceiling. Depends on masar.css. */
body.masar-page{background:var(--bg);color:var(--ink);font-family:var(--font)}
body.masar-page .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
/* the old page head is replaced by the hero band masar-page.js renders from it */
body.masar-page .page-head.mp-upgraded{display:none}
/* cards */
body.masar-page .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-card);color:var(--ink);transition:transform .35s var(--ease-out),box-shadow .35s}
body.masar-page .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
body.masar-page .card.no-lift:hover,body.masar-page .card.static:hover,body.masar-page .card:has(input:focus):hover,body.masar-page .card:has(textarea:focus):hover{transform:none;box-shadow:var(--shadow-card)}
body.masar-page .card h2,body.masar-page .card h3{color:var(--ink);font-family:var(--font);font-weight:800}
/* buttons */
body.masar-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:800;font-size:14.5px;line-height:1.1;padding:12px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .25s,box-shadow .25s,background .2s,color .2s}
body.masar-page .btn:hover{transform:translateY(-3px)}
body.masar-page .btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(45,108,246,.28)}
body.masar-page .btn-primary:hover{background:var(--blue-dark)}
body.masar-page .btn-secondary,body.masar-page .btn-outline{background:var(--card);color:var(--ink);border-color:var(--ink)}
body.masar-page .btn-ghost,body.masar-page .btn-soft{background:var(--tint-blue);color:var(--blue)}
body.masar-page .btn-gold,body.masar-page .btn-yellow{background:var(--yellow);color:var(--ink)}
body.masar-page .btn-danger,body.masar-page .btn-coral{background:var(--red);color:#fff}
body.masar-page .btn-sm{padding:8px 14px;font-size:13px}
body.masar-page .btn-block{width:100%}
body.masar-page .btn[disabled]{opacity:.55;pointer-events:none}
/* the locked screen every member page draws → a designed state */
body.masar-page .locked:not(.mp-step):not(.mp-steps *){text-align:center;padding:clamp(36px,6vw,72px) 20px;max-width:560px;margin:24px auto;background:var(--card);border:1.5px dashed var(--line-2);border-radius:var(--r-xl)}
body.masar-page .locked:not(.mp-step):not(.mp-steps *)::before{content:"";display:block;width:80px;height:80px;margin:0 auto 14px;border-radius:50%;background:var(--tint-blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect x='12' y='26' width='36' height='28' rx='6' fill='%231E1B4B'/><path d='M20 26v-8a10 10 0 0120 0v8' stroke='%232D6CF6' stroke-width='5' fill='none' stroke-linecap='round'/><circle cx='30' cy='38' r='4' fill='%23FFD23F'/></svg>") center/44px no-repeat}
body.masar-page .locked:not(.mp-step) h2{font-size:22px;margin-bottom:6px}
body.masar-page .locked:not(.mp-step) p{color:var(--body)}
body.masar-page .locked:not(.mp-step):not(.mp-steps *) a,body.masar-page .locked:not(.mp-step):not(.mp-steps *) button{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;padding:12px 24px;border-radius:999px;font-weight:800;text-decoration:none;border:none;font-family:var(--font);box-shadow:0 10px 24px rgba(45,108,246,.28);margin-top:6px}
/* empty states */
body.masar-page :where(.empty,.empty-note){text-align:center;padding:clamp(28px,4vw,48px) 20px;background:var(--card);border:1.5px dashed var(--line-2);border-radius:var(--r-xl);color:var(--body);font-weight:700}
body.masar-page :where(.empty,.empty-note)::before{content:"";display:block;width:72px;height:72px;margin:0 auto 10px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect x='10' y='30' width='40' height='18' rx='5' fill='%23E8ECFF' stroke='%231E1B4B' stroke-width='2.5'/><path d='M14 30l6-12h20l6 12' fill='%23fff' stroke='%231E1B4B' stroke-width='2.5' stroke-linejoin='round'/><path d='M48 8l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5 1.5-4z' fill='%23FFD23F'/></svg>") center/64px no-repeat}
body.masar-page .empty.has-icon::before,body.masar-page .empty i[data-icon]+*::before{display:none}
body.masar-page .empty a.btn,body.masar-page .empty-note a.btn{margin-top:10px}
/* tabs / chips */
body.masar-page .tabs{display:flex;gap:8px;flex-wrap:wrap;border:none;margin-bottom:18px}
body.masar-page .tabs .tab,body.masar-page .tab{font-family:var(--font);font-weight:800;font-size:13.5px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;margin:0;transition:background .2s,color .2s}
body.masar-page .tabs .tab.active,body.masar-page .tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
body.masar-page .chip,body.masar-page .filter-btn,body.masar-page .pill-btn{font-family:var(--font);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer}
body.masar-page .chip.active,body.masar-page .filter-btn.active,body.masar-page .pill-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* forms */
body.masar-page label{font-weight:800;font-size:13.5px;color:var(--ink)}
body.masar-page input[type="text"],body.masar-page input[type="email"],body.masar-page input[type="password"],body.masar-page input[type="number"],body.masar-page input[type="search"],body.masar-page input[type="url"],body.masar-page input[type="tel"],body.masar-page input[type="date"],body.masar-page input[type="datetime-local"],body.masar-page select,body.masar-page textarea{font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-md);padding:12px 14px;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
body.masar-page input:focus,body.masar-page select:focus,body.masar-page textarea:focus{outline:none;border-color:var(--blue);box-shadow:var(--focus)}
body.masar-page input::placeholder,body.masar-page textarea::placeholder{color:#9CA3AF;font-weight:500}
body.masar-page button{font-family:var(--font)}
/* tables */
body.masar-page table{font-family:var(--font)}
body.masar-page table th{font-weight:800;font-size:12.5px;color:var(--muted);background:var(--tint-blue)}
body.masar-page table td{border-color:var(--line)}
/* tags / badges / status pills used by the old pages */
body.masar-page .tag,body.masar-page .badge-pill,body.masar-page .status,body.masar-page .label{font-family:var(--font);font-weight:800;font-size:12px;border-radius:999px;padding:4px 10px}
/* section titles inside pages */
body.masar-page h1,body.masar-page h2,body.masar-page h3,body.masar-page h4{font-family:var(--font);color:var(--ink)}
body.masar-page h2.sec-title,body.masar-page .section-title{font-weight:900}
/* toasts + modals */
body.masar-page .toast{font-family:var(--font);font-weight:700;border-radius:999px;background:var(--ink);color:#fff;box-shadow:var(--shadow-hover)}
body.masar-page .toast.ok{background:var(--green-2)}body.masar-page .toast.err{background:var(--red)}
body.masar-page .modal,body.masar-page .modal-card,body.masar-page .modal-box{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-hover);font-family:var(--font)}
/* progress bars */
body.masar-page .progress,body.masar-page .bar{background:var(--line);border-radius:999px;overflow:hidden}
body.masar-page .progress>span,body.masar-page .bar>span,body.masar-page .bar-fill,body.masar-page .progress-fill{background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:999px}
/* muted / helper text */
body.masar-page .muted,body.masar-page .hint,body.masar-page .help{color:var(--muted)}
/* the hero band injected by masar-page.js */
body.masar-page .mp-hero{position:relative;overflow:hidden;padding:clamp(24px,3.6vw,48px) 0 clamp(18px,2.6vw,30px)}
body.masar-page .mp-hero .mp-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:28px;align-items:center}
body.masar-page .mp-hero h1{font-size:clamp(32px,4.4vw,54px);font-weight:900;line-height:1.3;margin:0 0 8px}
body.masar-page .mp-hero h1 .mp-ico{display:inline-flex;width:64px;height:64px;border-radius:50%;background:var(--tint-blue);align-items:center;justify-content:center;vertical-align:middle;margin-inline-end:14px}
body.masar-page .mp-hero h1 .mp-ico svg{width:40px;height:40px}
body.masar-page .mp-hero .mp-sub{font-size:clamp(15px,1.4vw,18px);color:var(--body);margin:0 0 14px;line-height:1.8;max-width:620px}
body.masar-page .mp-hero .mp-note{display:flex;align-items:center;gap:10px;margin-top:6px}
body.masar-page .mp-hero .mp-note .hand{font-size:22px;color:var(--ink-2)}
body.masar-page .mp-hero .mp-note i[data-arrow]{width:56px;height:40px;flex:0 0 auto;transform:rotate(-150deg) scaleX(-1)}
html[dir="ltr"] body.masar-page .mp-hero .mp-note i[data-arrow]{transform:rotate(150deg)}
body.masar-page .mp-hero .mp-next{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;box-shadow:var(--shadow-card);font-weight:800;font-size:13.5px;color:var(--ink);text-decoration:none;margin-top:12px}
html[dir="ltr"] body.masar-page .mp-hero .mp-next{padding:6px 6px 6px 14px}
body.masar-page .mp-hero .mp-next .pill{padding:3px 10px}
body.masar-page .mp-hero .mp-art{position:relative;min-height:190px;display:flex;align-items:center;justify-content:center}
body.masar-page .mp-hero .mp-art svg{width:100%;max-width:340px;height:auto;display:block}
body.masar-page .mp-hero .mp-art .sticky{position:absolute;top:0;inset-inline-end:0;--r:5deg;font-size:19px}
/* teaching hints — never more than two per screen */
body.masar-page .mp-hint{display:flex;align-items:flex-start;gap:12px;margin:14px 0}
body.masar-page .mp-hint .sticky{font-size:19px;padding:10px 14px}
/* dark AI band used by any AI block */
body.masar-page .mp-ai{background:var(--ink-2);color:#fff;border-radius:24px;padding:22px 24px}
body.masar-page .mp-ai h2,body.masar-page .mp-ai h3{color:#fff}
body.masar-page .mp-ai p{color:#D7D9F2}
/* step path motif for sequences (lessons, stations, rounds, onboarding) */
body.masar-page .mp-steps{position:relative;display:grid;gap:14px}
body.masar-page .mp-steps::before{content:"";position:absolute;inset-inline-start:23px;top:24px;bottom:24px;border-inline-start:3px dashed var(--line-2)}
body.masar-page .mp-step{position:relative;display:flex;gap:14px;align-items:flex-start}
body.masar-page .mp-step .num-badge{flex:0 0 auto;width:46px;height:46px;font-size:15px;z-index:1}
body.masar-page .mp-step.done .num-badge{background:var(--green)}
body.masar-page .mp-step.current .num-badge{background:var(--blue);box-shadow:0 0 0 6px rgba(45,108,246,.18)}
body.masar-page .mp-step.locked .num-badge{background:var(--line-2);color:var(--muted);box-shadow:none}
/* dark mode for the adapter */
:root[data-theme="dark"] body.masar-page .locked:not(.mp-step),:root[data-theme="dark"] body.masar-page .empty{background:var(--card)}
@media (max-width:900px){body.masar-page .mp-hero .mp-grid{grid-template-columns:1fr}body.masar-page .mp-hero .mp-art{min-height:0;max-width:260px;margin:0 auto}body.masar-page .mp-hero .mp-art .sticky{display:none}}
@media (max-width:640px){body.masar-page .mp-hero h1{font-size:30px}body.masar-page .mp-hero h1 .mp-ico{width:48px;height:48px}body.masar-page .mp-hero h1 .mp-ico svg{width:30px;height:30px}body.masar-page .mp-hero .mp-note{display:none}body.masar-page .mp-hero .mp-art{display:none}}
body.masar-page .mp-gly{display:inline-flex;vertical-align:-3px;margin-inline-end:6px;line-height:0}