/* Lumina on every screen: phone, tablet, desktop.
 *
 * Loaded LAST on every page, after the page's own styles. It holds only what a screen size or a finger changes:
 *   1. the top bar never runs off a narrow screen
 *   2. a lesson step uses the full width of its card on a phone, so pictures are as large as the screen allows
 *   3. wide things (tables, code) scroll inside their own box, never the page
 *   4. everything you tap is at least about 40 px high, and typing never makes iOS zoom the page
 *   5. the picture viewer (assets/responsive.js): tap a picture to see it full screen, turned to the long side
 * Desktop is left as the page's own styles draw it.
 */

/* ---------- 0. never scroll sideways because of one stray element ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas { max-width: 100%; }

/* ---------- 1. top bar ---------- */
@media (max-width: 560px) {
  .topbar .in { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .topbar nav { gap: 12px; min-width: 0; }
  .topbar #acct { font-size: 0; gap: 0; }                     /* drops the "·" between name and button */
  .topbar #acct .who { display: none; }
  .topbar #acct button { font-size: 13px; white-space: nowrap; }
  .topbar #acct button.google { font-size: 0; gap: 6px; }     /* "Sign in with Google" becomes the G + "Sign in" */
  .topbar #acct button.google::after { content: "Sign in"; font-size: 13px; }
}
@media (max-width: 380px) {
  .topbar .in { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .topbar nav { gap: 9px; font-size: 13px; }
  .topbar .brand { font-size: 17px; }
  .topbar #acct button { padding-left: 7px; padding-right: 7px; }
}

/* ---------- 2. lesson steps on a phone: the number sits beside the tag, the content gets the whole card ---------- */
@media (max-width: 560px) {
  .step { display: block; }
  .step .sn { float: left; width: 24px; height: 24px; min-width: 24px; font-size: 12.5px; margin: 0 8px 6px 0; }
  .step .body { min-width: 0; }
  .step .body > .stag:first-child { margin-top: 2px; }
  .step .body > .stag + * { clear: left; }
  /* pictures and visuals reach a little past the text, towards the card's edge */
  .step .body > .figure, .step .body > .viz, .pcard .figure, .pcard .viz, .wbody .figure { margin-left: -6px; margin-right: -6px; }
  .viz .stage { padding: 6px; }
  .viz.anim .cap { min-height: 0; }
  .viz .player { flex-wrap: wrap; row-gap: 6px; }
  .viz .player input[type=range] { order: 9; flex: 1 0 100%; }
  /* the ringed planet stays behind the words */
  [data-theme="space"][data-theme] .chero::before, [data-theme="space"][data-theme] .shead::before, [data-theme="space"][data-theme] .lhead::before { width: 150px; height: 150px; right: -52px; top: 12%; opacity: .4; }
}

/* ---------- 3. wide content scrolls in its own box ---------- */
.step .body, .pcard, .wbody, .openrev, .points { min-width: 0; overflow-wrap: break-word; }
.step pre, .pcard pre, .wbody pre, .fb pre, .faqb pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 760px) {
  table.t { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .viz .stage, .tw, pre.code, .katex-display { -webkit-overflow-scrolling: touch; }
  .viz .side { overflow-x: auto; }
  .viz .vbar input.w { width: 100%; }
  .figure > svg, .viz .stage > svg, .faqb svg, .step svg, .pcard svg, .wbody svg, .fb svg, .q svg { max-width: 100%; height: auto; }
  /* a long line of code inside an answer option wraps, so the option stays inside its card */
  .opt > span, .opt > div { min-width: 0; }
  .opt code { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- 4. fingers ---------- */
@media (pointer: coarse) {
  /* 16 px text in every field: below that, iOS zooms the whole page when the field is tapped */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }
  .topbar nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .topbar #acct button { min-height: 34px; }
  .secbtn, .secs a.secbtn { min-height: 40px; padding-left: 16px; padding-right: 16px; }
  .btn.small { min-height: 40px; }
  .backbtn { min-height: 40px; }
  .linkbtn { padding-top: 9px; padding-bottom: 9px; }
  .opt { padding-top: 10px; padding-bottom: 10px; }
  .tfrow .tfb button { width: 46px; min-height: 40px; }
  input.ans { min-height: 44px; }
  .viz .player button { min-width: 42px; height: 40px; }
  .viz .vbar button, .viz .vbar input, .viz .vbar select { min-height: 40px; }
  .viz.anim .achip { padding: 9px 13px; font-size: 13.5px; }
  .viz.anim .apl { width: 44px; height: 44px; }
  .viz.anim .aplayer input[type=range] { height: 28px; }
  .openrev .orp input { width: 22px; height: 22px; }
  .chk > summary { padding-top: 12px; padding-bottom: 12px; }
  input[type=checkbox], input[type=radio] { min-width: 20px; min-height: 20px; }
}
/* the letter of an answer option: a round badge with the letter in its middle */
.opt .mk { display: inline-grid; place-items: center; width: 22px; min-width: 22px; height: 22px; line-height: 1; border-radius: 50%; margin-top: 1px; }
/* a T/F button that was judged kept white text on a pale background */
.tfrow .tfb button.right { color: var(--lu-good, #047857); }
.tfrow .tfb button.wrong { color: #b45309; }

/* ---------- 5. picture viewer (assets/responsive.js) ---------- */
.lu-zoomable { position: relative; }
.lu-zoomable > svg, .lu-zoomable .stage > svg { cursor: zoom-in; }
.lu-zoombtn {
  display: flex; align-items: center; gap: 6px; margin: 4px 0 0 auto; padding: 6px 10px; min-height: 34px; border: 0; border-radius: 999px;
  background: none; color: #5b4ef0; font: 600 13px/1 var(--lu-sans, system-ui, sans-serif); cursor: pointer;
}
.lu-zoombtn svg { width: 15px; height: 15px; display: block; flex: none; }
.lu-zoombtn:active { background: rgba(91, 78, 240, .1); }
.step.prob .lu-zoombtn { color: #b45309; }

html.lu-zooming, html.lu-zooming body { overflow: hidden; }
.lu-zoom { position: fixed; inset: 0; z-index: 5000; background: #0b0a1c; overflow: hidden; touch-action: manipulation; }
.lu-zoom[hidden] { display: none; }
.lu-zoom-box { position: absolute; top: 0; left: 0; transform-origin: 0 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 10px 14px; color: #1c1a3a; }
.lu-zoom-bar { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 44px; color: rgba(255, 255, 255, .7); font: 500 13px var(--lu-sans, system-ui, sans-serif); }
.lu-zoom-close { height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 600 14px var(--lu-sans, system-ui, sans-serif); cursor: pointer; }
.lu-zoom-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.lu-zoom-body > * { margin: 0 !important; }
.lu-zoom-body .lu-zoombtn { display: none; }
/* a plain picture: as large as the screen allows, whole picture in view */
.lu-zoom-body > .figure { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border-radius: 12px; padding: 8px; text-align: center; }
.lu-zoom-body > .figure > svg { flex: 1; min-height: 0; width: 100%; height: 100%; max-width: none; cursor: default; }
.lu-zoom-body > .figure .fc { flex: none; padding-top: 6px; }
/* an animation: its stages, picture, caption and player, the picture taking the room that is left */
.lu-zoom-body > .viz { background: #fff; border-radius: 12px; padding: 10px 12px; }
.lu-zoom-body > .viz.anim { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lu-zoom-body > .viz.anim .stage { flex: 1; min-height: 0; display: flex; }
.lu-zoom-body > .viz.anim .stage svg { width: 100%; height: 100%; max-height: none; cursor: default; }
.lu-zoom-body > .viz.anim .achips, .lu-zoom-body > .viz.anim .cap, .lu-zoom-body > .viz.anim .aplayer { flex: none; }
.lu-zoom-body > .viz.anim .cap { min-height: 0; }
/* on a wide, low screen (a phone on its side) the picture takes the left and the full height; stages, caption and player sit on the right */
.lu-zoom-box.lu-wide .lu-zoom-body > .viz.anim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 30%); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 14px; }
.lu-zoom-box.lu-wide .lu-zoom-body > .viz.anim .stage { grid-column: 1; grid-row: 1 / 4; min-height: 0; }
.lu-zoom-box.lu-wide .lu-zoom-body > .viz.anim .achips { grid-column: 2; grid-row: 1; }
.lu-zoom-box.lu-wide .lu-zoom-body > .viz.anim .cap { grid-column: 2; grid-row: 2; overflow: auto; font-size: 14.5px; }
.lu-zoom-box.lu-wide .lu-zoom-body > .viz.anim .aplayer { grid-column: 2; grid-row: 3; }
/* any other visual (frames, tables, code beside a drawing): full width, scroll if it is taller than the screen */
.lu-zoom-body > .viz:not(.anim) { margin: auto 0 !important; }
.lu-zoom-body > .viz:not(.anim) .stage > svg { width: 100%; max-width: none; height: auto; max-height: calc(var(--lu-zh, 100vh) - 210px); min-height: 110px; cursor: default; }

/* ---------- 6. small fixes per page ---------- */
/* course home: the two buttons under Share stay side by side only when both fit */
@media (max-width: 360px) { .chero .btn, .shead .btn { white-space: normal; } }
.lu-zoom-body .viz .player input[type=range] { order: 0; flex: 1 1 60px; }

/* the map preview (map.html): the breadcrumb sits below the sign-in line, and its buttons are finger-sized */
@media (max-width: 720px) {
  .intro .acct .why { display: none; }
  .crumbs { top: 128px; }
  .tools .row button { min-height: 40px; }
  .tools .seg button { min-height: 36px; }
  .intro .acct button { min-height: 34px; }
  .upbtn { min-height: 40px; }
}
@media (max-width: 720px) and (max-height: 640px) { .tools .count { display: none; } }