/* MahirAI learning workspace — launch refresh, 2026-07-19.
   Extends the shared quiet-intelligence system without changing lesson logic. */

body.mode-app { margin: 0; }

.mahir-workspace-shell {
  min-height: 100svh;
  background:
    radial-gradient(circle at 52% -12%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 34rem),
    var(--bg);
}

.mahir-workspace-main { min-width: 0; min-height: 100svh; }
.desktop-learning-nav,
.desktop-learning-context { display: none; }

.app-header { padding-top: max(.75rem, env(safe-area-inset-top)); }
.app-header__brand { min-width: 0; }
.app-header__actions { flex: 0 0 auto; }

.home-view { padding-top: 1.25rem; }
.home-workspace-header { margin-bottom: 1.25rem; }
.home-workspace-header__date {
  color: var(--ink4);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.home-workspace-header h1 {
  margin-top: .35rem;
  font: 750 clamp(1.55rem, 5vw, 2.35rem)/1.1 Sora, Inter, sans-serif;
  letter-spacing: -.035em;
}
.home-workspace-header p {
  max-width: 38rem;
  margin-top: .45rem;
  color: var(--ink3);
  font-size: .85rem;
  line-height: 1.55;
}

.today-priority {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  color: #f8fbff;
  background:
    radial-gradient(circle at 92% 6%, rgba(34,211,238,.16), transparent 13rem),
    linear-gradient(145deg, #071426 0%, #0a1d35 58%, #0a2740 100%);
  border: 1px solid #173654;
  border-radius: 24px;
  box-shadow: 0 22px 52px rgba(7,20,38,.2), inset 0 1px 0 rgba(255,255,255,.05);
}
.today-priority::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #22d3ee, #2563eb 74%, transparent);
}
.today-priority__topline,
.today-priority__layout,
.today-priority__metrics { position: relative; z-index: 1; }
.today-priority__topline,
.today-priority__label,
.today-priority__metrics,
.today-priority__metric { display: flex; align-items: center; }
.today-priority__topline { justify-content: space-between; gap: 1rem; }
.today-priority__label {
  gap: .45rem;
  color: #91eafa;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.today-priority__label i {
  width: 7px;
  height: 7px;
  background: #22d3ee;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(34,211,238,.09);
}
.today-priority__time {
  padding: .28rem .6rem;
  color: #b9cede;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 800;
}
.today-priority__layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.25rem;
}
.today-priority h2 {
  max-width: 24ch;
  font: 750 clamp(1.3rem, 4.5vw, 2rem)/1.15 Sora, Inter, sans-serif;
  letter-spacing: -.03em;
}
.today-priority__copy > p {
  max-width: 44ch;
  margin-top: .6rem;
  color: #adc1d2;
  font-size: .82rem;
  line-height: 1.55;
}
.today-priority__action {
  min-height: 46px;
  margin-top: 1.05rem;
  padding: .72rem 1rem;
  color: #051321;
  background: #67e8f9;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(34,211,238,.16);
  font-size: .78rem;
  font-weight: 850;
}
.today-priority__action .mahir-icon { width: 1rem; height: 1rem; }
.today-priority__action:focus-visible { outline: 3px solid rgba(103,232,249,.55); outline-offset: 3px; }
.today-priority__ring {
  --value: 0;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: conic-gradient(#67e8f9 calc(var(--value) * 1%), rgba(255,255,255,.09) 0);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(34,211,238,.035);
}
.today-priority__ring::before {
  content: "";
  grid-area: 1/1;
  width: 74px;
  height: 74px;
  background: #0a1c31;
  border-radius: 50%;
}
.today-priority__ring span {
  position: relative;
  grid-area: 1/1;
  font: 800 1.15rem/1 Sora, Inter, sans-serif;
  text-align: center;
}
.today-priority__ring small { display: block; margin-top: .28rem; color: #829db4; font: 700 .52rem/1 Inter, sans-serif; }
.today-priority__metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .7rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.today-priority__metric { min-width: 0; flex-direction: column; align-items: flex-start; }
.today-priority__metric strong { font: 750 .78rem/1.2 Sora,Inter,sans-serif; }
.today-priority__metric span { margin-top: .2rem; color: #7f9bb2; font-size: .58rem; font-weight: 700; }

.home-content-grid { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.home-section-heading h2 { font: 750 1rem/1.25 Sora,Inter,sans-serif; letter-spacing: -.02em; }
.home-section-heading button,
.home-section-heading span { color: var(--brand); font-size: .68rem; font-weight: 800; }

.home-roadmap {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-1);
}
.home-roadmap::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 29px;
  bottom: 29px;
  width: 1px;
  background: linear-gradient(var(--brand2), var(--line) 55%);
}
.home-roadmap__item {
  position: relative;
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) auto;
  gap: .8rem;
  align-items: center;
  padding: .8rem 1rem;
  color: var(--ink1);
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.home-roadmap__item:last-child { border-bottom: 0; }
.home-roadmap__dot {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-inline: auto;
  background: var(--card);
  border: 2px solid var(--ink4);
  border-radius: 50%;
}
.home-roadmap__item.is-complete .home-roadmap__dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-bg); }
.home-roadmap__item.is-current { background: color-mix(in srgb, var(--brand-bg) 52%, var(--card)); }
.home-roadmap__item.is-current .home-roadmap__dot { background: var(--brand2); border-color: var(--brand2); box-shadow: 0 0 0 5px color-mix(in srgb,var(--brand2) 12%,transparent); }
.home-roadmap__copy { min-width: 0; }
.home-roadmap__copy strong { display: block; overflow: hidden; color: var(--ink2); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.home-roadmap__copy small { display: block; margin-top: .2rem; color: var(--ink4); font-size: .62rem; font-weight: 700; }
.home-roadmap__status { color: var(--ink4); font-size: .6rem; font-weight: 850; }
.home-roadmap__item.is-complete .home-roadmap__status { color: var(--green); }
.home-roadmap__item.is-current .home-roadmap__status { color: var(--brand); }

.home-brief {
  overflow: hidden;
  color: #f8fbff;
  background: #0b2237;
  border: 1px solid #173d5b;
  border-radius: 20px;
  box-shadow: 0 18px 38px rgba(7,20,38,.15);
}
.home-brief__signal { height: 3px; background: linear-gradient(90deg,#22d3ee,#2563eb 62%,transparent); }
.home-brief__body { padding: 1rem; }
.home-brief__meta { color: #74dff0; font-size: .58rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.home-brief h3 { margin-top: .65rem; font: 750 1rem/1.3 Sora,Inter,sans-serif; }
.home-brief p { margin-top: .5rem; color: #9db4c6; font-size: .72rem; line-height: 1.55; }
.home-brief button { margin-top: .8rem; color: #7dd3fc; font-size: .7rem; font-weight: 850; }

.home-support { margin-top: 1.25rem; }
.home-support > .xp-reward-strip,
.home-support > .card { margin-top: .75rem; }

/* Product-wide continuation of the Home workspace. The cyan rail now marks
   the learner's active outcome, daily path, and creation surfaces. */
.product-view__intro {
  padding: .25rem 0 .75rem 1rem;
  border-left: 2px solid var(--brand2);
}
.product-view__intro > p { max-width: 42rem; line-height: 1.55; }
.product-view__eyebrow {
  margin-bottom: .5rem;
  color: var(--brand2);
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .14em;
}
.product-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.product-section-heading > span { color:var(--ink4); font-size:.55rem; font-weight:850; letter-spacing:.12em; }

.outcome-program { position:relative; overflow:hidden; box-shadow:none; }
.learn-view .outcome-program::after { content:none; }
.outcome-program::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:transparent; }
.outcome-program.is-active {
  color:#f8fbff;
  background:linear-gradient(145deg,#08182b,#0b2a45);
  border-color:#1d5275;
  box-shadow:0 18px 38px rgba(7,20,38,.16);
}
.outcome-program.is-active::before { background:linear-gradient(#22d3ee,#2563eb); }
.outcome-program.is-active .ink3 { color:#9fb5c7; }
.outcome-program.is-active .chip { background:#10395a!important; color:#7ddff1!important; }
.skill-library-card { box-shadow:none; }

.program-command {
  position:relative;
  overflow:hidden;
  color:#f8fbff;
  background:linear-gradient(145deg,#071426,#0b2943);
  border-color:#19415f;
  box-shadow:0 20px 42px rgba(7,20,38,.16);
}
.program-command::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(#22d3ee,#2563eb); }
.program-command .ink3 { color:#a8bdcd; }
.program-command .ink4 { color:#7892a8; }
.program-path { position:relative; }
.program-path::before { content:""; position:absolute; left:1.85rem; top:1.2rem; bottom:1.2rem; width:1px; background:linear-gradient(var(--brand2),var(--line) 72%); }
.program-path__item { position:relative; box-shadow:none; }
.program-path__item.is-complete { border-color:color-mix(in srgb,var(--green) 38%,var(--line)); }

.profile-hero {
  color:#f8fbff;
  background:linear-gradient(145deg,#071426,#0c2b47);
  border-color:#19415f;
  box-shadow:0 20px 42px rgba(7,20,38,.16);
}
.profile-hero .ink3 { color:#9eb5c7; }
.profile-metrics .card,.profile-badges .card { box-shadow:none; }
.profile-settings { overflow:hidden; box-shadow:none; }

.lab-template-grid .card { min-height:132px; box-shadow:none; border-color:color-mix(in srgb,var(--brand) 18%,var(--line)); }
.ai-workbench__header { padding:.9rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-1); }
.ai-model-rail { padding:.15rem 0 .5rem; }
.ai-thread { min-height:18rem; }
.chat-composer { border-top:1px solid var(--line); }
.desktop-context-action { display:inline-flex; min-height:40px; align-items:center; margin-top:1rem; color:var(--brand); font-size:.65rem; font-weight:850; }

.premium-hero {
  position: relative;
  overflow: hidden;
  padding: 1.4rem;
  color: #f8fbff;
  background: linear-gradient(145deg,#071426,#0b2841);
  border: 1px solid #173d5b;
  border-radius: 24px;
  box-shadow: 0 20px 44px rgba(7,20,38,.2);
}
.premium-hero::after { content:""; position:absolute; width:11rem; height:11rem; right:-5rem; top:-6rem; border:24px solid rgba(34,211,238,.06); border-radius:50%; }
.premium-hero__mark { width: 44px; height: 44px; display:grid; place-items:center; color:#67e8f9; background:#0d3750; border-radius:14px; }
.premium-hero__mark .mahir-icon { width:1.45rem; height:1.45rem; }
.premium-hero h2 { position:relative; z-index:1; margin-top:1rem; font-size:1.55rem; }
.premium-hero p { position:relative; z-index:1; max-width:34rem; margin-top:.45rem; color:#a9bfce; font-size:.78rem; line-height:1.55; }
.premium-feature-list { display:grid; gap:.65rem; margin-top:1rem; }
.premium-feature { display:flex; align-items:flex-start; gap:.65rem; color:var(--ink2); font-size:.78rem; font-weight:750; }
.premium-feature > span { width:22px; height:22px; display:grid; place-items:center; flex:0 0 auto; color:var(--green); background:var(--green-bg); border-radius:8px; }
.premium-feature .mahir-icon { width:.8rem; height:.8rem; }
.billing-state { margin-top:1rem; padding:1rem; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-1); }
.billing-state__status { display:flex; align-items:center; gap:.55rem; color:var(--ink2); font-size:.78rem; font-weight:850; }
.billing-state__status .mahir-icon { color:var(--brand); }
.billing-state p { margin-top:.45rem; color:var(--ink3); font-size:.7rem; line-height:1.5; }
.play-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:1rem; }
.play-plan {
  min-height: 126px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:1rem;
  color:var(--ink1);
  text-align:left;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-1);
}
.play-plan.is-featured { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 8%,transparent),var(--shadow-1); }
.play-plan__tag { color:var(--brand); font-size:.55rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.play-plan strong { margin-top:.7rem; font:800 1.1rem/1.15 Sora,Inter,sans-serif; }
.play-plan small { margin-top:.3rem; color:var(--ink4); font-size:.62rem; font-weight:750; }
.play-plan span:last-child { margin-top:auto; padding-top:.7rem; color:var(--brand); font-size:.67rem; font-weight:850; }
.billing-manage { display:inline-flex; margin-top:.85rem; color:var(--brand); font-size:.7rem; font-weight:800; }

@media (max-width: 430px) {
  .app-header__xp { display:none; }
  .app-header__brand span { display:none; }
  .today-priority__layout { grid-template-columns:1fr; }
  .today-priority__ring { position:absolute; right:.9rem; top:.8rem; width:68px; height:68px; opacity:.96; }
  .today-priority__ring::before { width:56px; height:56px; }
  .today-priority__ring span { font-size:.85rem; }
  .today-priority__copy { padding-top:4.6rem; }
  .today-priority__metrics { gap:.45rem; }
  .today-priority__metric span { font-size:.52rem; }
  .play-plan-grid { grid-template-columns:1fr; }
  .play-plan { min-height:104px; }
}

@media (min-width: 760px) {
  .home-view { padding: 2rem 2.2rem 3rem; }
  .today-priority { padding: 1.6rem; }
  .today-priority__metrics { max-width: 34rem; }
  .home-content-grid { grid-template-columns: minmax(0,1.28fr) minmax(230px,.72fr); align-items:start; }
  .outcome-program-grid,.skill-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
  .outcome-program-grid.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top:0; }
  .skill-library-card { height:100%; margin-bottom:0; }
  .use-case-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lab-template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width: 900px) {
  body.mode-app { background: var(--bg); }
  body.mode-app #app { max-width:none; border:0; box-shadow:none; background:transparent; }
  .mahir-workspace-shell { display:grid; grid-template-columns:220px minmax(0,1fr); }
  .desktop-learning-nav { display:flex; position:sticky; top:0; height:100svh; flex-direction:column; padding:1.4rem 1rem; background:#071426; border-right:1px solid #142c44; }
  .desktop-learning-brand { display:flex; align-items:center; gap:.65rem; padding:.2rem .55rem 1.3rem; color:#fff; }
  .desktop-learning-brand .mahir-mark { border-radius:11px; }
  .desktop-learning-brand strong { font:750 1rem/1 Sora,Inter,sans-serif; letter-spacing:-.025em; }
  .desktop-learning-brand strong span { color:#67e8f9; }
  .desktop-learning-label { margin:1.2rem .65rem .4rem; color:#526c83; font-size:.55rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
  .desktop-learning-item { min-height:44px; display:flex; align-items:center; gap:.7rem; width:100%; padding:.65rem .7rem; color:#8ba2b6; border-radius:12px; font-size:.72rem; font-weight:780; text-align:left; }
  .desktop-learning-item .mahir-icon { width:1.05rem; height:1.05rem; }
  .desktop-learning-item.is-active { color:#f6fbff; background:#102c49; box-shadow:inset 3px 0 #22d3ee; }
  .desktop-learning-spacer { flex:1; }
  .desktop-learning-profile { display:flex; align-items:center; gap:.65rem; padding:.75rem; color:#edf6fb; background:#0b2238; border:1px solid #17344d; border-radius:14px; }
  .desktop-learning-avatar { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; color:#071426; background:#67e8f9; border-radius:11px; font-size:.65rem; font-weight:900; }
  .desktop-learning-profile strong,.desktop-learning-profile small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .desktop-learning-profile strong { max-width:105px; font-size:.68rem; }
  .desktop-learning-profile small { margin-top:.15rem; color:#6f8aa0; font-size:.56rem; font-weight:700; }
  .desktop-learning-tools { display:flex; gap:.4rem; margin-top:.6rem; }
  .desktop-learning-tools .btn { flex:1; min-height:40px; color:#9db1c2; background:#0a2035; border-color:#17344d; }
  .mahir-workspace-main { max-width:800px; width:100%; margin:0 auto; }
  .mahir-workspace-main > .app-header { display:none; }
  .mahir-workspace-main > nav { display:none; }
  .mahir-workspace-main > .view { padding-bottom:3rem; }
  .mahir-workspace-main > .product-view { padding:2rem 2.2rem 3rem; }
  .home-workspace-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
  .chat-composer {
    left:max(220px,calc(50vw - 290px));
    bottom:0;
    width:min(800px,calc(100vw - 220px));
    max-width:none;
    padding:.65rem 2.2rem 1rem;
    transform:none;
  }
}

@media (min-width: 1180px) {
  .mahir-workspace-shell { grid-template-columns:220px minmax(0,1fr) 290px; }
  .desktop-learning-context { display:block; position:sticky; top:0; height:100svh; overflow:auto; padding:1.7rem 1.25rem; background:color-mix(in srgb,var(--card) 86%,var(--bg)); border-left:1px solid var(--line); }
  .desktop-context-top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
  .desktop-context-top strong { font:750 .78rem/1.2 Sora,Inter,sans-serif; }
  .desktop-context-streak { display:flex; align-items:center; gap:.3rem; padding:.3rem .55rem; color:var(--amber); background:var(--amber-bg); border-radius:999px; font-size:.58rem; font-weight:850; }
  .desktop-context-streak .mahir-icon { width:.75rem; height:.75rem; }
  .desktop-context-block { padding:1.25rem 0; border-bottom:1px solid var(--line); }
  .desktop-context-block:last-child { border-bottom:0; }
  .desktop-context-block h2 { font:750 .78rem/1.25 Sora,Inter,sans-serif; }
  .desktop-context-block > p { margin-top:.35rem; color:var(--ink4); font-size:.62rem; line-height:1.45; }
  .desktop-track { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.35rem .5rem; margin-top:.9rem; }
  .desktop-track strong,.desktop-track span { font-size:.62rem; }
  .desktop-track strong { overflow:hidden; color:var(--ink2); text-overflow:ellipsis; white-space:nowrap; }
  .desktop-track span { color:var(--ink4); font-weight:800; }
  .desktop-track__bar { grid-column:1/-1; height:4px; overflow:hidden; background:var(--line); border-radius:999px; }
  .desktop-track__bar i { display:block; width:var(--value); height:100%; background:linear-gradient(90deg,var(--brand),var(--brand2)); border-radius:inherit; }
  .desktop-certificate { display:flex; align-items:center; gap:.7rem; margin-top:.85rem; padding:.75rem; background:var(--card2); border:1px solid var(--line); border-radius:14px; }
  .desktop-certificate__icon { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; color:var(--brand); background:var(--brand-bg); border-radius:11px; }
  .desktop-certificate__icon .mahir-icon { width:1.1rem; height:1.1rem; }
  .desktop-certificate strong,.desktop-certificate span { display:block; }
  .desktop-certificate strong { font-size:.64rem; }
  .desktop-certificate span { margin-top:.15rem; color:var(--ink4); font-size:.56rem; font-weight:700; }
  .desktop-coach-note { padding:.9rem; color:#c9d8e5; background:#0b2237; border:1px solid #173d5b; border-radius:14px; }
  .desktop-coach-note span { color:#67e8f9; font-size:.55rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
  .desktop-coach-note p { margin-top:.45rem; font-size:.64rem; line-height:1.55; }
  .chat-composer {
    left:max(220px,calc(50vw - 435px));
    width:min(800px,calc(100vw - 510px));
  }
}

@media (hover:hover) and (pointer:fine) {
  .today-priority__action:hover { transform:translateY(-1px); box-shadow:0 16px 34px rgba(34,211,238,.22); }
  .home-roadmap__item:hover { background:var(--card2); }
  .home-roadmap__item.is-current:hover { background:color-mix(in srgb,var(--brand-bg) 68%,var(--card)); }
  .home-brief button:hover,.home-section-heading button:hover,.billing-manage:hover { text-decoration:underline; text-underline-offset:3px; }
  .desktop-learning-item:hover { color:#edf6fb; background:#0c243b; }
  .play-plan:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
}

@media (prefers-reduced-motion: reduce) {
  .today-priority__action,.home-roadmap__item,.desktop-learning-item,.play-plan { transition-property:color,background-color,border-color,box-shadow,opacity!important; transform:none!important; }
}