/* Ported from docs/redesign-mockups/learn-mockup.html, scoped under body[data-theme=gemini]
   #view .lx-page (matches the specificity themes.css itself uses, so source order wins).
   Prefix lx- is exclusive to this file — see page-learn.js header for why. Hard corners
   throughout (border-radius:0) per desk convention; Latin UI text inherits the sitewide
   JetBrains Mono body font, no local font-family needed. */

body[data-theme=gemini] #view .lx-page{--px-card:var(--today-paper);--px-inset:var(--paper-3);--px-edge:var(--today-rule);padding:10px 16px 26px}
body[data-theme=gemini] #view .lx-page *{min-width:0}
body[data-theme=gemini] #view .lx-page button{font:inherit;background:none;border:none;border-radius:0;color:inherit;text-align:left;cursor:pointer;padding:0}
body[data-theme=gemini] #view .lx-page details{border-radius:0}
body[data-theme=gemini] #view .lx-page summary{cursor:pointer;list-style:none}
body[data-theme=gemini] #view .lx-page summary::-webkit-details-marker{display:none}

/* hero */
body[data-theme=gemini] #view .lx-page .lx-hero{margin-top:14px;padding:16px 18px}
body[data-theme=gemini] #view .lx-page .lx-hero-top{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-end;justify-content:space-between}
body[data-theme=gemini] #view .lx-page .lx-hero-side{display:flex;align-items:center;gap:14px}
body[data-theme=gemini] #view .lx-page .lx-streak{font-size:10px;letter-spacing:.04em;color:var(--ink2)}
body[data-theme=gemini] #view .lx-page .lx-hero-pct b{font-size:22px;font-variant-numeric:tabular-nums}
body[data-theme=gemini] #view .lx-page .lx-hero-bar{position:relative;height:4px;background:var(--px-edge);margin-top:12px;overflow:hidden}
body[data-theme=gemini] #view .lx-page .lx-hero-bar>span{position:absolute;inset:0;transform-origin:left;background:var(--accent, var(--ink1));transition:transform .3s}
body[data-theme=gemini] #view .lx-page .lx-today{margin-top:14px;padding:12px 14px;border:1px solid var(--today-rule);display:flex;flex-direction:column;gap:2px}
body[data-theme=gemini] #view .lx-page .lx-today b{font-size:14px;margin-top:2px}
body[data-theme=gemini] #view .lx-page .lx-done-msg{margin-top:12px;line-height:1.55;max-width:70ch}
body[data-theme=gemini] #view .lx-page .lx-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--px-edge);border:1px solid var(--px-edge);margin-top:14px}
body[data-theme=gemini] #view .lx-page .lx-stat{background:var(--px-inset);padding:8px 10px 9px;display:flex;flex-direction:column;gap:2px}
body[data-theme=gemini] #view .lx-page .lx-stat b{font-size:15px;font-variant-numeric:tabular-nums}
body[data-theme=gemini] #view .lx-page .lx-stat .sub{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}

/* journey rail */
body[data-theme=gemini] #view .lx-page .lx-jy{margin-top:18px;display:flex;flex-direction:column}
body[data-theme=gemini] #view .lx-page .lx-jy-step{display:flex;gap:12px}
body[data-theme=gemini] #view .lx-page .lx-jy-rail{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
body[data-theme=gemini] #view .lx-page .lx-jy-node{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid var(--today-rule);font-size:10px;flex:0 0 auto}
body[data-theme=gemini] #view .lx-page .lx-jy-step.done .lx-jy-node{background:var(--ink1);color:var(--px-card)}
body[data-theme=gemini] #view .lx-page .lx-jy-step.cur .lx-jy-node{border-color:var(--ink1)}
body[data-theme=gemini] #view .lx-page .lx-jy-line{flex:1 1 auto;width:1px;background:var(--today-rule);min-height:16px}
body[data-theme=gemini] #view .lx-page .lx-jy-body{flex:1 1 auto;min-width:0;margin:0 0 12px;padding:16px 18px;background:var(--px-card);border:1px solid var(--px-edge)}
body[data-theme=gemini] #view .lx-page .lx-jy-step.cur .lx-jy-body{border-color:var(--ink1);border-inline-start-width:3px}
body[data-theme=gemini] #view .lx-page .lx-jy-step.locked .lx-jy-body{background:transparent;border-style:dashed;border-color:var(--rline)}
body[data-theme=gemini] #view .lx-page .lx-jy-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
body[data-theme=gemini] #view .lx-page .lx-jy-head b{font-size:13px}
body[data-theme=gemini] #view .lx-page .lx-jy-lock{margin-top:4px}
body[data-theme=gemini] #view .lx-page .lx-jy-lessons{margin-top:8px;display:flex;flex-direction:column;gap:1px;background:var(--px-edge);border:1px solid var(--px-edge)}
body[data-theme=gemini] #view .lx-page .lx-jy-lsn{background:var(--px-inset);padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:11px;overflow-wrap:anywhere}
body[data-theme=gemini] #view .lx-page .lx-jy-lsn:hover{background:var(--today-hover)}
body[data-theme=gemini] #view .lx-page .lx-jy-lsn.done{color:var(--ink2)}
body[data-theme=gemini] #view .lx-page .lx-jy-tick{flex:0 0 auto;width:14px;text-align:center;font-size:10px}
body[data-theme=gemini] #view .lx-page .lx-jy-min{margin-left:auto;font-size:9px;color:var(--ink3);flex:0 0 auto}
body[data-theme=gemini] #view .lx-page .lx-jy-act{margin-top:6px;padding:8px 10px;border:1px dashed var(--today-rule);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:11px}
body[data-theme=gemini] #view .lx-page .lx-jy-act.done{border-style:solid}
body[data-theme=gemini] #view .lx-page .lx-jy-go{margin-left:auto;font-size:10px;text-decoration:underline;color:var(--ink1)}

/* curriculum map */
body[data-theme=gemini] #view .lx-page .lx-cm{margin-top:14px;padding:14px 16px}
body[data-theme=gemini] #view .lx-page .lx-cm-row{display:flex;align-items:center;gap:10px;padding:6px 0}
body[data-theme=gemini] #view .lx-page .lx-cm-row+.lx-cm-row{border-top:1px solid var(--today-rule)}
body[data-theme=gemini] #view .lx-page .lx-cm-lb{flex:0 0 110px;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere}
body[data-theme=gemini] #view .lx-page .lx-cm-lb .sub{font-size:9px}
body[data-theme=gemini] #view .lx-page .lx-cm-bar{flex:1 1 auto;display:flex;gap:1px;height:14px;min-width:0}
body[data-theme=gemini] #view .lx-page .lx-cm-seg{background:var(--px-edge);height:100%}
body[data-theme=gemini] #view .lx-page .lx-cm-seg:not(:disabled):hover{background:var(--today-hover)}
body[data-theme=gemini] #view .lx-page .lx-cm-seg.done{background:var(--ink1)}
body[data-theme=gemini] #view .lx-page .lx-cm-seg.locked{background:var(--px-inset);cursor:default}
body[data-theme=gemini] #view .lx-page .lx-cm-n{flex:0 0 auto;font-size:10px;font-variant-numeric:tabular-nums;color:var(--ink2)}
body[data-theme=gemini] #view .lx-page .lx-cm-key{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:9px;color:var(--ink3)}
body[data-theme=gemini] #view .lx-page .lx-cm-key-i{width:9px;height:9px;display:inline-block;background:var(--px-edge)}
body[data-theme=gemini] #view .lx-page .lx-cm-key-i.done{background:var(--ink1)}
body[data-theme=gemini] #view .lx-page .lx-cm-key-i.locked{background:var(--px-inset)}

/* deep dives */
body[data-theme=gemini] #view .lx-page .lx-lvls{margin-top:14px;display:flex;flex-direction:column;gap:1px;background:var(--px-edge);border:1px solid var(--px-edge)}
body[data-theme=gemini] #view .lx-page .lx-lvl{background:var(--px-inset)}
body[data-theme=gemini] #view .lx-page .lx-lvl-head{display:flex;align-items:center;gap:10px;padding:12px 14px}
body[data-theme=gemini] #view .lx-page .lx-lvl-n{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--today-rule);font-size:11px}
body[data-theme=gemini] #view .lx-page .lx-lvl.full .lx-lvl-n{background:var(--ink1);color:var(--px-card)}
body[data-theme=gemini] #view .lx-page .lx-lvl-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere}
body[data-theme=gemini] #view .lx-page .lx-lvl-t b{font-size:12px}
body[data-theme=gemini] #view .lx-page .lx-lvl.locked .lx-lvl-head{opacity:.55}
body[data-theme=gemini] #view .lx-page .lx-lvl-body{padding:0 14px 14px}
body[data-theme=gemini] #view .lx-page .lx-lsn{width:100%;display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--today-rule)}
body[data-theme=gemini] #view .lx-page .lx-lsn:first-child{border-top:none}
body[data-theme=gemini] #view .lx-page .lx-lsn:hover{background:var(--today-hover)}
body[data-theme=gemini] #view .lx-page .lx-lsn-n{flex:0 0 auto;width:18px;font-size:10px;color:var(--ink3)}
body[data-theme=gemini] #view .lx-page .lx-lsn.done .lx-lsn-n{color:var(--ink1)}
body[data-theme=gemini] #view .lx-page .lx-lsn-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere}
body[data-theme=gemini] #view .lx-page .lx-lsn-t b{font-size:11px}
body[data-theme=gemini] #view .lx-page .lx-lsn-m{flex:0 0 auto;font-size:9px;color:var(--ink3);white-space:nowrap}

/* how a lesson plays */
body[data-theme=gemini] #view .lx-page .lx-hw{margin-top:14px;padding:14px 16px}
body[data-theme=gemini] #view .lx-page .lx-hw-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--px-edge);border:1px solid var(--px-edge)}
body[data-theme=gemini] #view .lx-page .lx-hw-k{background:var(--px-inset);padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-height:96px}
body[data-theme=gemini] #view .lx-page .lx-hw-k b{font-size:11px;text-transform:capitalize}
body[data-theme=gemini] #view .lx-page .lx-hw-try{margin-top:auto;font-size:10px;text-decoration:underline;color:var(--ink1)}
body[data-theme=gemini] #view .lx-page .lx-hw-quiz{margin-top:12px;padding-top:12px;border-top:1px solid var(--today-rule);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}

body[data-theme=gemini] #view .lx-page .lx-foot{margin-top:16px;line-height:1.6;max-width:90ch}

@media (max-width:620px){
  body[data-theme=gemini] #view .lx-page{padding:10px 12px 22px}
  body[data-theme=gemini] #view .lx-page .lx-hero{padding:14px}
  body[data-theme=gemini] #view .lx-page .lx-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-theme=gemini] #view .lx-page .lx-jy-body{padding:14px}
  body[data-theme=gemini] #view .lx-page .lx-cm-lb{flex-basis:80px}
  body[data-theme=gemini] #view .lx-page .lx-hw-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  body[data-theme=gemini] #view .lx-page *{transition:none !important;animation:none !important}
}