/* =========================================================
   SysLY Practice v0.23.35 — Final Visual & UX Polish
   Readability / hierarchy / consistency layer.
========================================================= */
:root{
  --sysly-copy:#a9b9cc;
  --sysly-copy-strong:#c9d7e6;
  --sysly-line:rgba(139,171,218,.16);
  --sysly-panel-shadow:0 18px 44px rgba(0,0,0,.16);
}

/* Global readability: preserve compact labels, eliminate 7–10px noise. */
.professional-sidebar .brand-copy span{font-size:9px!important;letter-spacing:2.1px!important}
.sidebar-nav a,.profession-switcher a strong{font-size:14px!important;line-height:1.3!important}
.sidebar-section-label{font-size:11px!important;letter-spacing:.14em!important}
.system-topbar-context span,.system-kicker,.system-card-kicker,.panel-kicker,.workspace-eyebrow,
.action-kicker,.rail-kicker,.recommended-meta span,.priority-item span,.workspace-footer-strip span,
.learn-kicker,.lesson-kicker,.account-kicker{font-size:11px!important;line-height:1.35!important;letter-spacing:.12em!important}
.system-topbar-context strong,.system-topbar nav a,.system-profile-chip{font-size:14px!important}

/* Headlines: premium, compact, less shouty. */
.system-hero h1{font-size:clamp(34px,4.2vw,58px)!important;line-height:1.02!important;letter-spacing:-1.65px!important}
.system-hero>p{font-size:16px!important;line-height:1.72!important;color:var(--sysly-copy)!important}
.system-section-head h2{font-size:28px!important;line-height:1.14!important}
.system-section-head p{font-size:14px!important;line-height:1.65!important;color:var(--sysly-copy)!important}

/* Core cards. */
.system-summary-card,.system-card,.system-panel,.workspace-action-card,.tool-card,.module-card,
.learn-progress-card,.lesson-block,.focus-skill-item,.priority-item,.activity-item{
  border-color:var(--sysly-line)!important;
  box-shadow:var(--sysly-panel-shadow);
}
.system-summary-card{padding:19px!important}
.system-summary-card span{font-size:11px!important}
.system-summary-card strong{font-size:21px!important}
.system-card{padding:21px!important}
.system-card h3{font-size:19px!important;line-height:1.35!important}
.system-card p,.system-panel>p{font-size:14px!important;line-height:1.68!important;color:var(--sysly-copy)!important}
.system-card-meta span,.system-pill{font-size:11px!important;line-height:1.3!important}

/* Buttons & interactive affordances. */
.system-primary,.system-secondary,.primary-cta,.secondary-cta,.phase-prev,.phase-next,
.secondary-lesson-btn,.workspace-guest-banner-actions a,.workspace-guest-banner-actions button,
.tool-card a,.tool-card button,.module-card button,.module-card a{
  min-height:44px!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
.system-primary,.primary-cta{box-shadow:0 10px 28px rgba(var(--accent-rgb),.15)}

/* Workspace. */
.workspace-action-card{padding:22px!important;transition:transform .18s ease,border-color .18s ease,background .18s ease!important}
.workspace-action-card:hover,.tool-card:hover,.module-card:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.30)!important}
.workspace-action-card h3,.tool-card strong,.module-card h3{font-size:17px!important;line-height:1.35!important}
.workspace-action-card p,.tool-card p,.module-card p,.priority-item p,.focus-skill-item p,.workspace-empty,
.dashboard-empty,.workspace-continuity-empty{font-size:14px!important;line-height:1.62!important;color:var(--sysly-copy)!important}
.tool-card{padding:18px!important;border-radius:16px!important}
.tool-card p{margin-top:8px!important}
.hero-state-row span,.metric-card span,.rail-head span{font-size:11px!important}
.hero-state-row strong,.metric-card strong{font-size:16px!important}
.workspace-footer-strip strong{font-size:13px!important}.workspace-footer-strip span{font-size:11px!important}
.topbar-account-copy strong{font-size:14px!important}.topbar-account-copy small{font-size:12px!important}

/* Learning hub. */
.learn-hero-content h1{font-size:clamp(38px,5vw,64px)!important;line-height:1.01!important;letter-spacing:-1.7px!important}
.learn-hero-content>div>p,.learn-hero-content p{font-size:16px!important;line-height:1.68!important}
.learn-hero-stats span,.learn-progress-card>span,.module-level,.lesson-meta,.lesson-block>span{font-size:11px!important}
.learn-progress-card h2{font-size:23px!important;line-height:1.25!important}
.learn-progress-card p{font-size:14px!important;line-height:1.65!important}
.module-card{padding:20px!important;border-radius:17px!important}
.module-card h3{font-size:18px!important}.module-card p{font-size:14px!important}
.lesson-block h3{font-size:18px!important}.lesson-block p,.lesson-block ol{font-size:14px!important;line-height:1.68!important}
.lesson-tools span{font-size:11px!important}

/* Practice / Simulation / Build / Real-world surfaces. */
.practice-meta-card span,.phase-rail-item small,.adaptive-note span,.guided-note>span,
.learning-layer-head>div>span,.learning-principle>span,.learning-framework>span,.learning-example>span,
.learning-quick-practice>span,.hint-panel-head>span,.hint-stack-item>span,.media-controls span{
  font-size:11px!important;
}
.phase-instruction,.practice-option>span:last-child,.builder-input,.text-response,.learning-principle p,
.learning-framework ol,.learning-example p,.hint-stack-item>p,.phase-feedback,.media-placeholder p{
  font-size:14px!important;line-height:1.65!important;
}
.mode-prompt{font-size:19px!important;line-height:1.46!important}
.builder-field label,.builder-guidance,.guided-note>p{font-size:13px!important;line-height:1.55!important}

/* Account / auth / onboarding. */
.account-nav a{font-size:14px!important}.account-card p,.account-panel p,.account-empty,.account-main p{line-height:1.65}
.account-card p,.account-panel p,.account-empty{font-size:14px!important}
.account-card h2,.account-panel h2{line-height:1.24!important}
.auth-card p,.auth-help,.auth-status{font-size:14px!important;line-height:1.62!important}
.auth-card label{font-size:13px!important}.auth-card input,.auth-card button{font-size:15px!important;min-height:46px!important}

/* Empty/error/status states should feel intentional, not debug-like. */
.system-empty,.workspace-empty,.dashboard-empty,.account-empty{
  padding:22px!important;border-radius:15px!important;border-color:rgba(var(--accent-rgb),.14)!important;
  background:rgba(var(--accent-rgb),.025)!important;
}

/* Focus outlines / accessibility. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent,#45d8ff)!important;outline-offset:3px!important;
}

@media(max-width:900px){
  .system-main{width:min(100% - 30px,1440px)!important}
  .system-hero{padding:26px 22px!important}
  .system-hero h1{font-size:clamp(32px,8vw,48px)!important}
  .sidebar-nav a,.profession-switcher a strong{font-size:14px!important}
}
@media(max-width:640px){
  .system-hero h1{font-size:34px!important;letter-spacing:-1.1px!important}
  .learn-hero-content h1{font-size:36px!important}
  .system-card p,.system-panel>p,.workspace-action-card p,.tool-card p,.module-card p{font-size:14px!important}
  .system-primary,.system-secondary,.primary-cta,.secondary-cta{font-size:14px!important}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}


/* =========================================================
   v0.23.38 — Final Product Polish / Release Candidate
   ========================================================= */

:where(a,button,input,select,textarea):focus-visible{
    outline:2px solid rgba(87,217,255,.92);
    outline-offset:3px;
}

:where(button,a){
    -webkit-tap-highlight-color:transparent;
}

:where(button,[role="button"]):disabled{
    cursor:not-allowed;
    opacity:.55;
}

@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

/* Keep small supporting UI readable across the product. */
:where(.system-kicker,.system-card-kicker,.account-kicker,.commercial-hero>span){
    letter-spacing:.1em;
}

:where(.system-summary-card span,.system-plan-usage span,.billing-meta span){
    line-height:1.35;
}

/* Prevent long localized labels from breaking cards/buttons. */
:where(.system-primary,.system-secondary,.account-btn,.plan-actions a,.plan-actions button){
    text-wrap:balance;
}

@media (max-width:760px){
    :where(.system-primary,.system-secondary,.account-btn,.plan-actions a,.plan-actions button){
        min-height:44px;
    }
}