/* Kratu LSP - screen styles for the approved redesign (Patch 4, Oct 2026). Loaded after style.css. */
.ks-page{ display:flex; flex-direction:column; gap:28px; }
.ks-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; }
.ks-head h1{ margin:0; font-size:2.75rem; line-height:1.1; }
.ks-lead{ margin:6px 0 0; font-size:17px; color:var(--text-mid); }
.ks-seg{ display:inline-flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; padding:4px; gap:4px; }
.ks-seg a,.ks-seg button{ font-family:inherit; font-size:15px; font-weight:500; color:var(--navy); background:transparent; border:0; border-radius:9px; padding:0 18px; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }
.ks-seg a.on,.ks-seg button.on{ background:var(--navy); color:#fff; font-weight:600; }
.ks-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ks-tile{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:4px; }
.ks-tile .k{ font-size:15px; font-weight:500; color:var(--text-mid); }
.ks-tile .v{ font-family:var(--font-display); font-size:44px; line-height:1.1; color:var(--navy); }
.ks-tile .v.blue{ color:var(--blue-mid); }
.ks-tile .s{ font-size:14px; color:var(--text-muted); }
.ks-panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); }
.ks-panel-pad{ padding:24px; }
.ks-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid #E4EEF8; }
.ks-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ks-chip{ font-family:inherit; font-size:15px; font-weight:500; color:var(--navy); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:0 16px; min-height:44px; cursor:pointer; }
.ks-chip.on{ background:var(--pale); border-color:#B9D6F2; font-weight:600; }
.ks-search{ display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:0 14px; min-height:44px; min-width:260px; }
.ks-search input{ font-family:inherit; font-size:15px; color:var(--navy); border:0; background:transparent; outline:none; flex:1 1 auto; min-width:0; }
.ks-scroll{ overflow-x:auto; }
.ks-table{ width:100%; border-collapse:collapse; min-width:960px; }
.ks-table thead th{ text-align:left; font-size:14px; font-weight:600; color:var(--text-mid); background:var(--paper); padding:14px 16px; }
.ks-table thead th:first-child,.ks-table td:first-child{ padding-left:24px; }
.ks-table thead th:last-child,.ks-table td:last-child{ padding-right:24px; text-align:right; }
.ks-table td{ padding:18px 16px; border-top:1px solid #E4EEF8; vertical-align:middle; font-size:16px; }
.ks-child{ display:flex; align-items:center; gap:14px; }
.ks-av{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; background:var(--pale); color:var(--navy-mid); font-weight:700; flex:0 0 auto; }
.ks-av.grey{ background:#F1F4F7; color:#3E5266; }
.ks-av.big{ width:72px; height:72px; font-size:24px; background:var(--navy); color:#fff; }
.ks-name{ font-weight:600; font-size:17px; display:block; }
.ks-meta{ font-size:14px; color:var(--text-muted); display:block; }
.ks-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.ks-tag{ font-size:14px; background:var(--pale); color:var(--navy-mid); border-radius:999px; padding:4px 10px; font-weight:500; }
.ks-muted{ color:var(--text-muted); font-size:15px; }
.ks-status{ font-size:14px; font-weight:600; border-radius:999px; padding:5px 12px; display:inline-block; white-space:nowrap; }
.ks-status.enrolled{ background:#E3F4E8; color:#006A30; }
.ks-status.waiting{ background:#E6F0FB; color:#063D70; }
.ks-status.grey{ background:#F1F4F7; color:#3E5266; }
.ks-status.flag{ background:#FFF3D6; color:#6B3A00; }
.ks-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 18px; border-radius:12px; font-weight:600; font-size:15px; text-decoration:none; font-family:inherit; cursor:pointer; border:0; white-space:nowrap; }
.ks-btn.primary{ background:var(--blue-mid); color:#fff; } .ks-btn.primary:hover{ background:var(--navy-mid); color:#fff; }
.ks-btn.outline{ background:var(--surface); color:var(--navy-mid); border:2px solid var(--blue-mid); }
.ks-btn.quiet{ background:var(--surface); color:var(--navy-mid); border:1px solid var(--line-strong); } .ks-btn.quiet:hover{ background:var(--pale); }
.ks-btn.go{ background:#006A30; color:#fff; } .ks-btn.go:hover{ background:#00511F; color:#fff; }
.ks-btn.lime{ background:var(--green-bright); color:var(--navy); font-weight:700; font-size:17px; min-height:52px; }
.ks-btn.danger{ background:var(--surface); color:#A12B2B; border:1px solid #E8C4C4; }
.ks-btn.lg{ min-height:48px; font-size:16px; padding:0 22px; }
.ks-empty{ padding:28px 24px; color:var(--text-mid); }
.ks-crumb{ font-size:15px; display:flex; align-items:center; gap:8px; color:var(--text-mid); margin:-8px 0 -12px; }
.ks-crumb a{ display:inline-flex; align-items:center; gap:6px; font-weight:600; text-decoration:none; min-height:44px; }
.ks-hero{ background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-md); padding:28px 32px; display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.ks-hero h1{ margin:0; font-size:2.5rem; line-height:1.1; }
.ks-hero-main{ flex:1 1 360px; display:flex; flex-direction:column; gap:8px; }
.ks-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.ks-tabs{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:2px solid var(--line); margin-top:-4px; }
.ks-tabs a{ padding:12px 18px; font-size:16px; font-weight:500; color:var(--text-mid); text-decoration:none; }
.ks-tabs a.on{ font-weight:600; color:var(--navy); border-bottom:3px solid var(--blue-mid); margin-bottom:-2px; }
.ks-cols{ display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; }
.ks-main{ flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:28px; }
.ks-side{ flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.ks-h2row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ks-h2row h2{ margin:0; font-size:1.9rem; }
.ks-needs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.ks-need{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:12px; }
.ks-need.now{ border:2px solid var(--blue-mid); }
.ks-need-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ks-eyebrow{ font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.ks-need h3{ margin:0; font-family:var(--font-body); font-size:20px; font-weight:600; }
.ks-need p{ margin:0; font-size:15px; color:var(--text-mid); }
.ks-badge{ font-size:14px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.ks-badge.now{ background:var(--blue-mid); color:#fff; }
.ks-badge.next{ background:#F1F4F7; color:#3E5266; }
.ks-badge.done{ background:#E3F4E8; color:#006A30; }
.ks-bar{ height:10px; border-radius:999px; background:#E4EEF8; overflow:hidden; }
.ks-bar span{ display:block; height:100%; background:var(--blue-mid); border-radius:999px; }
.ks-group-h{ margin:20px 0 8px; font-family:var(--font-body); font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.ks-step{ display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:14px; color:var(--navy); text-decoration:none; border:1px solid transparent; margin-top:4px; }
.ks-step:hover{ background:var(--paper); color:var(--navy); border-color:var(--line); }
.ks-step.current{ background:var(--pale); border-color:#B9D6F2; }
.ks-step .num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:var(--surface); border:2px solid var(--line-strong); color:var(--text-mid); font-weight:700; font-size:15px; flex:0 0 auto; }
.ks-step.current .num{ background:var(--blue-mid); border-color:var(--blue-mid); color:#fff; }
.ks-step.secure .num{ background:#E3F4E8; border-color:#9FD3AE; color:#006A30; }
.ks-step .txt{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.ks-step .t1{ font-weight:600; font-size:17px; }
.ks-step .t2{ font-size:14px; color:var(--text-muted); }
.ks-step .st{ font-size:14px; font-weight:600; color:var(--navy-mid); white-space:nowrap; }
.ks-next{ background:var(--navy); color:#fff; border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:14px; }
.ks-next h2{ margin:0; font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#CFE6FF; }
.ks-next .big{ margin:0; font-family:var(--font-display); font-size:30px; line-height:1.15; color:#fff; }
.ks-next ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:15px; color:#E3F0FC; }
.ks-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:12px; }
.ks-card h2,.ks-card h3{ margin:0; font-family:var(--font-body); font-size:18px; font-weight:600; }
.ks-card p{ margin:0; font-size:15px; color:var(--text-mid); }
.ks-card.soft{ background:var(--pale); border-color:transparent; }
.ks-card ul{ margin:0; padding-left:20px; font-size:15px; color:var(--text-mid); display:flex; flex-direction:column; gap:6px; }
.ks-kv{ width:100%; border-collapse:collapse; font-size:15px; }
.ks-kv th{ text-align:left; padding:8px 0; font-weight:500; }
.ks-kv td{ text-align:right; color:var(--text-muted); }
.ks-kv tr{ border-top:1px solid #E4EEF8; }
.ks-alert{ border-radius:14px; padding:12px 16px; font-size:15px; }
.ks-alert.good{ background:#E3F4E8; color:#006A30; }
.ks-alert.warn{ background:#FFF3D6; color:#6B3A00; }
.ks-goal{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid #E4EEF8; font-size:16px; }
.ks-goal:first-of-type{ border-top:0; }
.ks-sess{ width:100%; border-collapse:collapse; font-size:15px; }
.ks-sess th{ text-align:left; font-size:14px; color:var(--text-mid); font-weight:600; padding:10px 8px; background:var(--paper); }
.ks-sess td{ padding:10px 8px; border-top:1px solid #E4EEF8; }
.ks-queue{ display:flex; flex-direction:column; gap:14px; }
.ks-item{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 24px; display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.ks-item.warn{ border-color:#F0D3A8; }
.ks-ico{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:var(--pale); color:var(--navy-mid); flex:0 0 auto; }
.ks-item.warn .ks-ico{ background:#FFF3D6; color:#8A4B00; }
.ks-item-body{ flex:1 1 320px; display:flex; flex-direction:column; gap:4px; }
.ks-item-body h3{ margin:0; font-family:var(--font-body); font-size:19px; font-weight:600; }
.ks-item-body p{ margin:0; font-size:15px; color:var(--text-mid); }
.ks-count{ font-size:15px; font-weight:600; background:var(--navy); color:#fff; border-radius:999px; padding:2px 10px; }
.ks-spark{ display:block; }
.ks-draft{ margin-top:10px; background:var(--paper); border-radius:12px; padding:14px 16px; font-size:15px; color:var(--navy); white-space:pre-wrap; }
.ks-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width: 900px){ .ks-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px){ .ks-tiles{ grid-template-columns:minmax(0,1fr); } .ks-head h1,.ks-hero h1{ font-size:2.1rem; } }

/* ---------- Session (child with an adult) ---------- */
body.ks-focus .kn-header, body.ks-focus .kn-footer{ display:none; }
body.ks-focus .kn-main{ max-width:none; padding:0; }
.kn-session{ min-height:100vh; display:flex; flex-direction:column; font-family:var(--font-read); font-size:18px; color:var(--navy); transition:background-color .3s ease; }
.kn-session .ss-top{ background:#fff; border-bottom:1px solid var(--line); }
.kn-session .ss-row{ max-width:1180px; margin:0 auto; padding:14px 28px; display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.kn-session .ss-end{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line); color:var(--navy-mid); text-decoration:none; font-size:15px; font-weight:500; font-family:var(--font-body); }
.kn-session .ss-title{ display:flex; flex-direction:column; gap:2px; }
.kn-session .ss-title b{ font-size:17px; font-weight:600; }
.kn-session .ss-title span{ font-size:15px; color:var(--text-mid); }
.kn-session .ss-prog{ flex:1 1 260px; display:flex; flex-direction:column; gap:6px; min-width:200px; }
.kn-session .ss-prog .q{ font-size:15px; font-weight:500; color:var(--text-mid); }
.kn-session #journey{ display:flex; gap:6px; font-size:0; letter-spacing:0; margin:0; text-align:left; }
.kn-session #journey span{ flex:1 1 0; height:10px; border-radius:999px; background:var(--line); }
.kn-session #journey span.done{ background:var(--green-bright); }
.kn-session #journey span.now{ background:var(--blue-mid); }
.kn-session .ss-settings{ border-top:1px solid #E4EEF8; background:var(--paper); }
.lsp .a11y-bar.ss-tools{ max-width:1180px; margin:0 auto; padding:10px 28px; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:10px 22px; text-align:left; font-family:var(--font-body); }
.lsp .a11y-bar.ss-tools button.ss-tool{ min-height:44px; }
.ss-swatches{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.ss-swatches .lab{ font-size:15px!important; color:var(--text-mid); margin-right:4px; }
.lsp .a11y-bar .ss-sw{ width:44px; height:44px; border-radius:999px!important; padding:0!important; background:transparent!important; border:1px solid transparent!important; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.lsp .a11y-bar .ss-sw[aria-checked="true"]{ border:3px solid var(--blue-mid)!important; }
.ss-sw i{ width:30px; height:30px; border-radius:999px; border:1px solid #9BB4CC; display:block; }
.ss-swatches .cur{ font-size:15px!important; font-weight:600; color:var(--navy); margin-left:4px; }
.kn-session .ss-body{ flex:1 1 auto; width:100%; max-width:1180px; margin:0 auto; padding:28px 28px 40px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; }
.kn-session #card{ border:0!important; border-radius:26px!important; box-shadow:0 16px 56px rgba(4,41,75,.10)!important; padding:44px 40px!important; transition:background-color .3s ease; }
.kn-session #kind{ display:none; }
.kn-session #prompt{ font-size:26px!important; font-weight:500; color:var(--navy-mid)!important; margin-top:0!important; }
.kn-session #stim{ font-family:var(--font-read)!important; font-weight:500!important; letter-spacing:.04em!important; color:var(--navy); line-height:1.1; }
.kn-session #context{ color:var(--navy)!important; max-width:62ch; margin-left:auto!important; margin-right:auto!important; text-align:left; }
.kn-session #opts .btn{ font-family:var(--font-read); font-size:24px; min-height:64px; min-width:96px; border-radius:16px; border:2px solid #B9D6F2; color:var(--navy); background:#fff; }
.kn-session #opts .btn:hover{ background:var(--pale); }
.kn-session #build{ color:var(--blue-mid)!important; }
.kn-session .ss-hear{ font-family:var(--font-read); display:inline-flex; align-items:center; gap:12px; font-size:22px; font-weight:500; color:var(--navy-mid); background:#fff; border:2px solid #B9D6F2; border-radius:16px; padding:0 28px; min-height:64px; margin-top:18px; cursor:pointer; }
.kn-session .ss-hear:hover{ background:var(--pale); }
.kn-session #actions{ background:#fff; border:2px dashed #9BBEDF; border-radius:20px; padding:20px 28px; margin-top:0!important; align-items:center; justify-content:space-between!important; gap:16px 20px!important; font-family:var(--font-body); }
.kn-session .ss-adult{ flex:1 1 280px; display:flex; flex-direction:column; gap:2px; text-align:left; }
.kn-session .ss-adult h2{ margin:0; font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-mid); }
.kn-session .ss-adult p{ margin:0; font-size:16px; color:var(--text-mid); }
.kn-session .ss-marks{ display:flex; flex-wrap:wrap; gap:12px; }
.kn-session #readbtn{ background:#006A30; color:#fff; border:0; font-family:var(--font-body); font-size:18px; min-height:56px; padding:0 32px; border-radius:14px; }
.kn-session #readbtn:hover{ background:#00511F; }
.kn-session #helpbtn{ background:#fff; color:var(--navy-mid); border:2px solid var(--blue-mid); font-family:var(--font-body); font-size:18px; min-height:56px; padding:0 28px; border-radius:14px; }
.kn-session #adulthint{ display:none!important; }
.kn-session #errbox{ font-family:var(--font-body); }
.kn-session #errbox input{ min-height:44px; border:1px solid var(--line-strong); border-radius:10px; padding:0 10px; font-size:16px; }
.kn-session #encmsg{ font-size:16px!important; color:var(--text-mid)!important; min-height:24px; }
.kn-session .ss-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.kn-session .ss-hard{ font-family:var(--font-read); font-size:17px; font-weight:500; color:var(--navy-mid); background:#fff; border:1px solid #B9D6F2; border-radius:14px; padding:0 20px; min-height:52px; display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.kn-session .ss-foot p{ margin:0; font-size:16px; color:var(--text-mid); }
.kn-session #hardmsg{ border-radius:14px; font-size:16px!important; background:#E3F4E8; color:#006A30; border:0; }
.kn-session #worked{ font-family:var(--font-read); }
.lsp.high-contrast{ filter:contrast(1.25); }
.lsp.bigger #card{ zoom:1.15; }
.lsp.bigger #context{ font-size:24px!important; }
@media (max-width: 720px){ .kn-session .ss-row,.lsp .a11y-bar.ss-tools,.kn-session .ss-body{ padding-left:16px; padding-right:16px; } .kn-session #card{ padding:28px 18px!important; } }

/* ---------- Patch 5: dashboards (less scrolling) ---------- */
.ks-tiles.compact .ks-tile{ padding:16px 20px; }
.ks-tiles.compact .ks-tile .v{ font-size:36px; }
a.ks-tile{ text-decoration:none; color:var(--navy); transition:border-color .15s ease, box-shadow .15s ease; }
a.ks-tile:hover{ border-color:#9BBEDF; box-shadow:var(--shadow-md); color:var(--navy); }
a.ks-tile .go{ font-size:14px; font-weight:600; color:var(--blue-mid); margin-top:2px; }
.ks-dash{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.ks-dash.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ks-box{ background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-width:0; }
.ks-box-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:18px 22px 10px; }
.ks-box-h h2{ margin:0; font-size:1.45rem; }
.ks-box-f{ padding:12px 22px 16px; border-top:1px solid #E4EEF8; margin-top:auto; }
.ks-box-f a{ font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:32px; }
.ks-list{ list-style:none; margin:0; padding:0 10px 6px; }
.ks-li{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:12px; }
.ks-li + .ks-li{ border-top:1px solid #EEF3F9; }
.ks-li .grow{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ks-li .grow b{ font-size:16px; font-weight:600; }
.ks-li .grow span{ font-size:14px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ks-li .ks-av{ width:40px; height:40px; font-size:15px; }
.ks-li .ks-btn{ min-height:40px; padding:0 14px; font-size:14px; }
.ks-none{ padding:6px 22px 18px; color:var(--text-mid); font-size:15px; }
.ks-hero.compact{ padding:20px 26px; gap:18px; }
.ks-hero.compact .ks-av.big{ width:56px; height:56px; font-size:20px; }
.ks-hero.compact h1{ font-size:2.1rem; }
.ks-tabs a{ min-height:44px; display:inline-flex; align-items:center; }
.ks-tabs .cnt{ margin-left:6px; font-size:13px; font-weight:700; background:var(--navy); color:#fff; border-radius:999px; padding:0 8px; line-height:20px; }
.ks-needs.compact .ks-need{ padding:18px; gap:8px; }
.ks-needs.compact .ks-need h3{ font-size:18px; }
.ks-need a.more{ font-size:14px; font-weight:600; text-decoration:none; }
.ks-pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 24px; border-top:1px solid #E4EEF8; font-size:15px; color:var(--text-mid); }
.ks-pager .ks-btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.ks-back{ font-size:15px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.ks-mini{ width:100%; border-collapse:collapse; font-size:15px; }
.ks-mini td{ padding:8px 12px; border-top:1px solid #EEF3F9; }
.ks-mini tr:first-child td{ border-top:0; }
.ks-mini td:last-child{ text-align:right; color:var(--text-muted); }
@media (max-width: 1000px){ .ks-dash,.ks-dash.three{ grid-template-columns:minmax(0,1fr); } }
.ks-head h1{ font-size:2.4rem; }
.ks-lead{ margin-top:4px; }
.ks-crumb{ margin:-6px 0 -10px; }
.ks-hero.compact{ padding:14px 22px; gap:16px; }
.ks-hero.compact .ks-av.big{ width:48px; height:48px; font-size:18px; }
.ks-hero.compact h1{ font-size:1.9rem; }
.ks-hero.compact .ks-hero-main{ gap:4px; }
.ks-needs.compact .ks-need{ padding:16px; gap:6px; }
.ks-box-h{ padding:14px 20px 6px; }
.ks-box-f{ padding:8px 20px 12px; }
.ks-mini td{ padding:6px 12px; }
.ks-li{ padding:8px 12px; }
.ks-tiles.compact .ks-tile{ padding:14px 18px; gap:2px; }
.ks-tiles.compact .ks-tile .v{ font-size:32px; }

/* ---------- Patch 6: the session fits on one screen; adult panel hides correctly ---------- */
.kn-session{ height:100vh; height:100dvh; min-height:0; overflow:hidden; }
.kn-session.done{ height:auto; min-height:100vh; overflow:visible; }
.kn-session .ss-row{ padding-top:10px; padding-bottom:10px; }
.kn-session .ss-qrow{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.kn-session .ss-noti{ font-size:14px; color:var(--text-mid); }
.kn-session .ss-row .ss-hard{ min-height:48px; font-size:16px; padding:0 16px; flex:0 0 auto; }
.lsp .a11y-bar.ss-tools{ padding-top:6px; padding-bottom:6px; }
.kn-session .ss-body{ flex:1 1 auto; min-height:0; padding-top:clamp(8px, 2vh, 24px); padding-bottom:clamp(8px, 2vh, 20px); gap:clamp(8px, 1.6vh, 16px); }
.kn-session #hardmsg{ flex:0 0 auto; margin:0; }
.kn-session #card{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(12px, 3vh, 40px) 32px!important; }
.kn-session #card > *{ flex:0 0 auto; max-width:100%; }
.kn-session #stim.my-3{ margin-top:clamp(4px, 1.5vh, 16px)!important; margin-bottom:clamp(4px, 1.5vh, 16px)!important; }
.kn-session .ss-hear{ min-height:56px; margin-top:clamp(6px, 1.5vh, 18px); }
.kn-session #encmsg{ flex:0 0 auto; min-height:0; }
.kn-session #actions{ display:flex; flex-wrap:wrap; flex:0 0 auto; padding:clamp(10px, 1.8vh, 20px) 24px; }
.kn-session #readbtn,.kn-session #helpbtn{ min-height:52px; }
@media (max-width: 720px){ .kn-session .ss-row .ss-hard{ flex:1 1 100%; } }

/* ---------- Patch 7: shape pictures, tap-to-circle, step-by-step problems, content review ---------- */
svg.ks7{ display:block; margin:0 auto; height:auto; max-width:100%; }
svg.ks7 text{ font-family:var(--font-read), Lexend, Arial, sans-serif; }
.kn-session #media svg.ks7{ width:auto; max-height:28vh; min-height:130px; }
.kn-session #card{ justify-content:center; justify-content:safe center; }
.kn-session .ks7-hearrow{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ks7-recap{ display:inline-flex; align-items:center; min-height:48px; padding:0 18px; border-radius:14px; border:2px solid #B9D6F2; background:#fff;
  color:var(--navy-mid); font-family:var(--font-body); font-size:16px; font-weight:600; cursor:pointer; margin-top:clamp(6px, 1.5vh, 18px); }
.ks7-recap:hover{ background:var(--pale); }
.kn-session #media{ margin:0!important; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 18px; }
.kn-session #media .ks7-foldbtn{ margin:0; }
.kn-session #opts.ks7-long .btn{ font-size:19px; min-height:52px; padding:6px 18px; }
svg.ks7 [data-region]{ cursor:pointer; }
svg.ks7 [data-region] .ring{ display:none; }
svg.ks7 [data-region].sel .ring{ display:inline; }
svg.ks7 [data-region]:focus{ outline:none; }
svg.ks7 [data-region]:focus-visible .ring{ display:inline; stroke-dasharray:6 5; }
svg.ks7 [data-region].sel:focus-visible .ring{ stroke-dasharray:none; }
svg.ks7 [data-region].faded{ opacity:.22; cursor:default; }
.ks7-foldbtn{ display:block; margin:8px auto 0; min-height:48px; padding:0 22px; border-radius:12px; border:2px solid #B9D6F2;
  background:#fff; color:var(--navy); font-family:var(--font-body); font-size:17px; font-weight:600; cursor:pointer; }
.ks7-foldbtn:hover{ background:var(--pale); }
.ks7-lean{ animation:ks7-lean 2.4s ease forwards; transform-box:fill-box; transform-origin:left bottom; }
@keyframes ks7-lean{ to{ transform:skewX(-24deg); } }
@media (prefers-reduced-motion: reduce){ .ks7-lean{ animation:none; transform:skewX(-24deg); } }
.kn-session #opts .ks7-done{ min-width:160px; background:var(--navy); color:#fff; border-color:var(--navy); }
.kn-session #opts .ks7-done:hover{ background:var(--navy-mid); }

/* step-by-step problems */
.ks7-steps{ width:100%; max-width:880px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.ks7-stagebar{ list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap; }
.ks7-stagebar li{ flex:1 1 0; min-width:76px; text-align:center; padding:8px 6px; border-radius:10px; background:#EEF5FC; color:var(--text-mid);
  font-size:15px; font-weight:700; letter-spacing:.04em; }
.ks7-stagebar li.done{ background:#DDEFD6; color:#1F6E1C; }
.ks7-stagebar li.now{ background:var(--navy); color:#fff; }
.ks7-stagebody{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.ks7-stagebody .ks7-lead{ font-size:22px; font-weight:600; color:var(--navy); margin:0; }
.ks7-stagebody .ks7-msg{ font-size:19px; color:var(--navy-mid); margin:0; }
.ks7-chunks{ display:flex; flex-wrap:wrap; gap:10px; }
.ks7-chunk{ font-family:var(--font-read); font-size:21px; line-height:1.35; min-height:48px; padding:6px 14px; border-radius:12px; border:2px solid #B9D6F2;
  background:#fff; color:var(--navy); cursor:pointer; text-align:left; }
.ks7-chunk.sel{ border-color:var(--blue-mid); background:#E3F1FC; box-shadow:0 0 0 2px var(--blue-mid) inset; }
.ks7-chunk.key{ border-color:#1F6E1C; background:#E3F3DC; }
.ks7-chunk:disabled{ cursor:default; opacity:1; }
.ks7-choices{ display:flex; flex-wrap:wrap; gap:12px; }
.kn-session #opts .ks7-choices .btn{ font-size:20px; text-align:left; white-space:normal; }
.kn-session #opts .btn.right{ border-color:#1F6E1C; background:#E3F3DC; }
.kn-session #opts .btn.wrong{ border-color:#B3261E; background:#FBE9E7; }
.kn-session #opts .ks7-next{ background:var(--navy); color:#fff; border-color:var(--navy); min-width:140px; }

/* worked explanation and lesson video */
.ks7-worked{ position:absolute; inset:0; z-index:5; overflow:auto; background:#F6FBFF; border-radius:12px; padding:20px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.ks7-wk-h{ font-size:16px; font-weight:700; color:var(--navy-mid); }
.ks7-wk-q{ font-size:19px; color:var(--navy); max-width:760px; }
.ks7-wk-pic svg.ks7{ max-height:30vh; width:auto; }
.ks7-wk-why{ font-family:var(--font-read); font-size:22px; line-height:1.45; color:#1F6E1C; font-weight:600; max-width:760px; }
.ks7-videobox{ position:absolute; inset:0; z-index:6; background:#04294B; border-radius:12px; padding:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.ks7-videobox video{ max-width:100%; max-height:70%; border-radius:10px; background:#000; }
.kn-session .ss-noti.ks7-preview{ padding:2px 10px; border-radius:999px; background:#FFF4C2; color:#5C4300; font-weight:700; }

/* top bar: room for the Content review link on one row */
.kn-bar{ column-gap:16px; }
.kn-link{ padding:10px 12px; }

/* content review pages */
.ks7r-blocks td,.ks7r-blocks th{ vertical-align:middle; }
.ks7r-blocks td:last-child{ min-width:290px; }
.ks7r-state{ display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; font-size:14px; font-weight:700; }
.ks7r-state.none{ background:#EEF2F6; color:#3D5A78; }
.ks7r-state.approve{ background:#DDEFD6; color:#1F6E1C; }
.ks7r-state.change{ background:#FBE9E7; color:#8C1D18; }
.ks7r-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:16px; }
.ks7r-item{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.ks7r-item h3{ font-size:17px; margin:0; color:var(--navy); }
.ks7r-item .meta{ font-size:14px; color:var(--text-mid); }
.ks7r-pic svg.ks7{ max-height:220px; width:auto; }
.ks7r-q{ font-family:var(--font-read); font-size:18px; color:var(--navy); margin:0; }
.ks7r-opts{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.ks7r-opts li{ font-size:15px; padding:6px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; }
.ks7r-opts li.ok{ border:2px solid #1F6E1C; background:#E3F3DC; font-weight:700; }
.ks7r-opts li .tag{ display:block; font-size:13px; color:#8C1D18; font-family:ui-monospace, Menlo, Consolas, monospace; }
.ks7r-why{ font-size:15px; color:#1F6E1C; margin:0; }
.ks7r-item details{ font-size:15px; }
.ks7r-item details summary{ cursor:pointer; color:var(--blue-mid); font-weight:600; min-height:32px; }
.ks7r-form{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.ks7r-form textarea{ width:100%; min-height:72px; font-size:15px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); }
.ks7r-form .row2{ display:flex; flex-wrap:wrap; gap:8px; }
.ks7r-decide{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.ks7r-decide textarea{ flex:1 1 320px; min-height:56px; font-size:15px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); }
.ks7r-hist{ font-size:14px; color:var(--text-mid); margin:0; padding-left:18px; }

/* picture items: empty text areas take no space */
.kn-session #card.ks7-pic #build:empty,.kn-session #card.ks7-pic #stim:empty,.kn-session #card.ks7-pic #context:empty,
.kn-session #card.ks7-pic #wc:empty{ display:none; }

/* small screens: settings behind one button */
.ks7-setbtn{ display:none; }
@media (max-width: 720px){
  .kn-session .ks7-setbtn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 16px; border-radius:12px;
    border:2px solid #B9D6F2; background:#fff; color:var(--navy); font-family:var(--font-body); font-size:16px; font-weight:600; flex:1 1 40%; }
  .kn-session .ss-row .ss-hard{ flex:1 1 50%; }
  .kn-session .ss-settings{ display:none; }
  .kn-session .ss-settings.ks7-open{ display:block; }
  .kn-session .ss-row{ row-gap:8px; }
  .kn-session .ss-title span{ font-size:14px; }
  .kn-session #media svg.ks7{ max-height:22vh; min-height:110px; }
  .kn-session #card{ padding:14px 16px!important; }
  .kn-session #media{ position:relative; }
  .kn-session #media .ks7-foldbtn{ position:absolute; right:0; bottom:0; min-height:44px; padding:0 12px; font-size:15px; }
  .kn-session #opts{ gap:10px!important; }
  .kn-session #prompt{ font-size:22px!important; }
  .kn-session #opts .btn{ font-size:20px; min-height:56px; min-width:72px; }
}

/* ---------- Patch 7b: lesson recap with the words on screen; plain-English mistakes ---------- */
.ks7-recapbox{ position:absolute; inset:0; z-index:6; overflow:auto; background:#F6FBFF; border-radius:12px; padding:20px 28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; justify-content:safe center; gap:14px; text-align:center; }
.ks7-recap-h{ font-size:16px; font-weight:700; color:var(--navy-mid); letter-spacing:.02em; }
.ks7-recap-text{ font-family:var(--font-read); font-size:clamp(22px, 3.4vh, 30px); line-height:1.7; color:var(--navy); max-width:820px; margin:0; text-align:left; }
.ks7-recap-text span{ border-radius:6px; padding:1px 2px; transition:background-color .15s ease; }
.ks7-recap-text span.now{ background:#FFE58A; box-shadow:0 3px 0 #C9A227; }
.ks7-recap-text span.read{ color:var(--navy-mid); }
.ks7-recap-note{ margin:0; font-size:16px; color:#8C1D18; }
.ks7-recap-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.ks7-recap-row .btn{ font-size:18px; min-height:52px; }
.ks7-recap-row .ks7-next{ background:var(--navy); color:#fff; border-color:var(--navy); }
.ks7-linkbtn{ background:none; border:0; padding:6px 4px; min-height:44px; color:var(--blue-mid); font-family:var(--font-body); font-size:15px;
  font-weight:600; text-decoration:underline; cursor:pointer; }
.ks7r-opts li .tag{ display:block; font-size:14px; color:#8C1D18; font-family:var(--font-body); font-weight:500; max-width:260px; }
.ks7r-opts li .code,.ks7r-item .code{ display:block; font-size:14px; color:#6B7F94; font-family:ui-monospace, Menlo, Consolas, monospace; }
.ks7r-item .meta .code{ display:inline; }
@media (prefers-reduced-motion: reduce){ .ks7-recap-text span{ transition:none; } }
@media (max-width: 720px){ .ks7-recapbox{ padding:14px 16px; justify-content:flex-start; } .ks7-recap-text{ font-size:21px; line-height:1.6; } }

/* ---------- Patch 8: guided explanations, number pad, tables, concept cards ---------- */
.ks8-panel{ width:100%; max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:10px; text-align:left;
  background:#F6FBFF; border:2px solid #CFE3F6; border-radius:16px; padding:14px 18px; }
.ks8-chips{ list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap; }
.ks8-chips li{ flex:1 1 0; min-width:84px; }
.ks8-chips button{ width:100%; min-height:44px; border-radius:10px; border:1px solid #CFE3F6; background:#fff; color:var(--text-mid);
  font-family:var(--font-body); font-size:15px; font-weight:600; cursor:pointer; }
.ks8-chips li.done button{ background:#E3F3DC; color:#1F6E1C; border-color:#BFDDB3; }
.ks8-chips li.now button{ background:var(--navy); color:#fff; border-color:var(--navy); }
.ks8-chips button:disabled{ opacity:.45; cursor:default; }
.ks8-steptitle{ font-size:15px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--navy-mid); }
.ks8-words{ font-family:var(--font-read); font-size:clamp(20px, 3.1vh, 27px); line-height:1.6; color:var(--navy); margin:0; max-height:34vh; overflow:auto; }
.ks8-words .w{ border-radius:6px; padding:0 2px; transition:background-color .12s ease; }
.ks8-words strong.w{ font-weight:700; color:#0B4F8A; }
.ks8-words .w.now{ background:#FFE58A; box-shadow:0 3px 0 #C9A227; }
.ks8-words .w.read{ color:#2B4A68; }
.ks8-row{ display:flex; flex-wrap:wrap; gap:10px; }
.kn-session .ks8-row .btn{ font-size:18px; min-height:52px; }
.kn-session .ks8-row .ks8-main{ background:var(--navy); color:#fff; border-color:var(--navy); }
.kn-session .ks8-row .ks8-quiet{ background:#fff; }
.ks8-pace{ display:flex; align-items:center; gap:8px; min-height:44px; font-size:15px; color:var(--text-mid); cursor:pointer; }
.ks8-pace input{ width:22px; height:22px; }
.ks8-help{ display:inline-flex; align-items:center; min-height:52px; padding:0 22px; border-radius:14px; border:2px solid #1F6E1C;
  background:#E3F3DC; color:#14501A; font-family:var(--font-body); font-size:18px; font-weight:700; cursor:pointer; margin-top:clamp(6px, 1.5vh, 18px); }
.ks8-help:hover{ background:#D2EBC7; }
.ks8-numwrap{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:center; width:100%; }
.ks8-entry{ min-width:150px; min-height:72px; padding:6px 18px; border:3px solid var(--blue-mid); border-radius:16px; background:#fff;
  font-family:var(--font-read); font-size:44px; font-weight:600; color:var(--navy); text-align:center; font-variant-numeric:tabular-nums; }
.ks8-entry.empty{ border-style:dashed; }
.ks8-pad{ display:grid; grid-template-columns:repeat(3, 76px); gap:8px; }
.ks8-key{ min-height:48px; border-radius:12px; border:2px solid #B9D6F2; background:#fff; color:var(--navy);
  font-family:var(--font-read); font-size:24px; font-weight:600; cursor:pointer; }
.ks8-key.ok{ font-family:var(--font-body); font-size:16px; }
.ks8-key.del{ font-family:var(--font-body); font-size:24px; }
.ks8-key.ok{ background:var(--navy); color:#fff; border-color:var(--navy); }
.ks8-key:focus-visible,.ks8-cell:focus-visible,.ks8-chips button:focus-visible{ outline:3px solid var(--blue-mid); outline-offset:2px; }
.ks8-table{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ks8-cell{ min-width:110px; min-height:84px; border-radius:14px; border:2px solid #B9D6F2; background:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; cursor:pointer; color:var(--navy); }
.ks8-cell .k{ font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--text-mid); }
.ks8-cell .v{ font-family:var(--font-read); font-size:34px; font-weight:600; min-height:40px; font-variant-numeric:tabular-nums; }
.ks8-cell.on{ border:3px solid var(--blue-mid); background:#E3F1FC; }
.kn-session #opts .btn.tried{ opacity:.45; text-decoration:line-through; }
@media (prefers-reduced-motion: reduce){ .ks8-words .w{ transition:none; } }

.ks8-hidden{ display:none!important; }
.kn-session #card.ks8-num #media svg.ks7{ max-height:20vh; min-height:100px; }
.kn-session #card.ks8-open #media svg.ks7{ max-height:19vh; min-height:100px; }
.kn-session #card.ks8-open .ks8-words{ max-height:26vh; }

@media (max-width: 720px){
  .ks8-panel{ padding:12px; }
  .ks8-chips li{ min-width:64px; }
  .ks8-chips button{ font-size:14px; }
  .ks8-pad{ grid-template-columns:repeat(3, 64px); gap:6px; }
  .ks8-key{ min-height:42px; font-size:22px; }
  .ks8-entry{ font-size:30px; min-height:48px; min-width:120px; padding:4px 14px; }
  .ks8-numwrap{ gap:10px 16px; }
  .ks8-chips{ gap:4px; }
  .ks8-chips li{ min-width:0; }
  .ks8-chips button{ font-size:13px; padding:0 4px; }
  .ks8-words{ font-size:20px; line-height:1.5; max-height:none; }
  .ks8-table{ flex-wrap:nowrap; gap:8px; }
  .ks8-cell{ min-width:0; flex:1 1 0; min-height:64px; }
  .ks8-cell .v{ font-size:28px; min-height:32px; }
  .kn-session #card.ks8-num #media svg.ks7{ max-height:12vh; min-height:72px; }
  .kn-session #card.ks8-open #media svg.ks7{ max-height:14vh; min-height:80px; }
  .kn-session #card.ks8-open .ks8-words{ max-height:none; }
}

/* review pages: guided scripts; codes hidden unless asked for */
.ks7r-codes-off .code{ display:none!important; }
.ks8r-guide{ margin:0; padding-left:20px; display:grid; gap:6px; font-size:15px; }
.ks8r-guide b{ color:var(--navy-mid); }
.ks8r-fb{ margin:0; padding-left:20px; font-size:15px; display:grid; gap:4px; }
.ks8r-toolbar{ display:flex; align-items:center; gap:10px; font-size:15px; min-height:44px; }
.ks8r-toolbar input{ width:22px; height:22px; }

/* ---------- Patch 8b: 3D shapes, lesson video, chapter review ---------- */
.k3d-wrap{ position:relative; display:block; width:fit-content; max-width:100%; margin:0 auto; }
.k3d-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.k3d-on .ks7-art, .k3d-on .ks7-solid{ visibility:hidden; }
.ks8-video{ width:100%; max-height:52vh; border-radius:14px; background:#0B2A47; }
.ks8b-cur{ padding:18px 22px; }
.ks8b-cur h2{ font-size:1.25rem; margin:0 0 8px; }
.ks8b-cur h3{ font-size:1rem; margin:12px 0 4px; color:var(--text-mid); }
.ks8b-cur p, .ks8b-cur li{ font-size:17px; line-height:1.6; max-width:75ch; }
.ks8b-cur ul{ margin:0; padding-left:22px; display:grid; gap:4px; }
.ks8b-gap{ margin-top:14px; padding:12px 16px; border-radius:12px; background:#FFF7E0; border:1px solid #EBD38A; }
.ks8b-gap ul{ margin-top:6px; }
/* ---------- Patch 8f: Learn - the lesson on screen; coloured backgrounds behind pictures ---------- */
.ks9-learn{ position:absolute; inset:0; z-index:7; background:#F6FBFF; border-radius:12px; padding:14px 18px; display:flex; flex-direction:column; gap:10px;
  overflow:auto; text-align:left; }
.ks9-learn > *{ flex:0 0 auto; }
.ks9-head{ display:flex; align-items:center; gap:12px; }
.ks9-skip{ margin-left:auto; min-height:44px; padding:0 14px; border:2px solid #CFE3F6; border-radius:12px; background:#fff; color:var(--navy-mid);
  font-family:var(--font-body); font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap; }
.ks9-skip:focus-visible{ outline:3px solid var(--blue-mid); outline-offset:2px; }
.ks9-kicker{ font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:#E2683C; border-radius:999px; padding:3px 12px; }
.ks9-title{ font-family:var(--font-read); font-size:clamp(20px, 3vh, 26px); font-weight:600; color:var(--navy); }
.ks9-chips{ list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap; }
.ks9-chips button{ min-width:44px; min-height:44px; border-radius:12px; border:2px solid #CFE3F6; background:#fff; color:var(--text-mid);
  font-family:var(--font-read); font-size:18px; font-weight:600; cursor:pointer; }
.ks9-chips li.done button{ background:#E3F3DC; color:#1F6E1C; border-color:#BFDDB3; }
.ks9-chips li.now button{ background:var(--navy); color:#fff; border-color:var(--navy); }
.ks9-chips button:focus-visible{ outline:3px solid var(--blue-mid); outline-offset:2px; }
.ks9-learn > .ks9-stage{ position:relative; width:100%; flex:1 1 auto; min-height:180px; border-radius:16px; overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.ks9-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ks9-parttitle{ position:absolute; left:14px; right:14px; top:12px; z-index:2; pointer-events:none; color:#fff; font-family:var(--font-read); font-size:clamp(17px, 2.6vh, 24px); font-weight:600;
  text-shadow:0 2px 6px rgba(0,0,0,.35); }
.ks9-parttitle span{ display:inline-block; font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(255,255,255,.22); border-radius:999px; padding:2px 10px; margin-right:6px; vertical-align:middle; }
.ks9-cue{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:2; background:#FFF4C2; color:#0B2A47; border:2px solid #E2B93B;
  border-radius:999px; padding:4px 16px; font-family:var(--font-read); font-size:clamp(17px, 2.6vh, 23px); font-weight:600; opacity:0; transition:opacity .2s ease; white-space:nowrap; }
.ks9-cue.on{ opacity:1; }
.ks9-tally{ position:absolute; right:12px; top:12px; z-index:2; display:flex; gap:4px; flex-wrap:wrap; max-width:48%; justify-content:flex-end; }
.ks9-tally span{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.25); color:rgba(255,255,255,.75); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-read); font-size:16px; font-weight:600; border:2px solid rgba(255,255,255,.4); }
.ks9-tally span.on{ background:#7CCB6E; color:#0B3A10; border-color:#E9FBE3; }
.ks9-card{ position:absolute; top:52px; z-index:2; background:rgba(255,255,255,.94); color:#0B2A47; border-radius:12px; padding:8px 14px;
  font-family:var(--font-read); font-size:clamp(15px, 2.2vh, 19px); line-height:1.4; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.ks9-cardA{ left:14px; }
.ks9-cardB{ right:14px; }
.ks9-flat{ display:flex; align-items:center; justify-content:center; }
.ks9-learn .ks9-words{ max-height:4.9em; line-height:1.6; overflow:auto; }
.ks9-btn{ background:#FFF1DC!important; border-color:#E2683C!important; color:#8A3412!important; font-weight:700!important; }
@media (prefers-reduced-motion: reduce){ .ks9-cue{ transition:none; } }
@media (max-width: 720px){
  .ks9-learn{ padding:10px; gap:8px; }
  .ks9-learn > .ks9-stage{ min-height:170px; }
  .ks9-kicker{ display:none; }
  .ks9-title{ font-size:19px; }
  .ks9-skip{ font-size:14px; padding:0 10px; }
  .ks9-chips{ gap:4px; flex-wrap:nowrap; }
  .ks9-chips li{ flex:1 1 0; }
  .ks9-chips button{ width:100%; min-width:0; min-height:40px; font-size:16px; }
  .ks9-tally{ top:auto; bottom:54px; left:8px; right:8px; max-width:none; justify-content:center; gap:3px; }
  .ks9-tally span{ width:22px; height:22px; font-size:12px; border-radius:6px; }
  .ks9-card{ top:40px; max-width:46%; padding:5px 8px; font-size:13px; }
  .ks9-learn .ks9-words{ font-size:19px; }
  .ks9-parttitle{ font-size:15px; }
  .ks9-learn .ks8-row{ flex-wrap:nowrap; }
  .ks9-learn .ks8-row .btn{ flex:1 1 0; padding:0 8px; }
}
/* every question picture sits on a soft coloured background */
.kn-session #media .k3d-wrap{ border-radius:18px; background:radial-gradient(ellipse at 50% 30%, #F2F9FF 0%, #CFE6FA 85%); }
.kn-session #card[data-ks9bg="1"] #media .k3d-wrap{ background:radial-gradient(ellipse at 50% 30%, #FFF7EA 0%, #FFDDB0 85%); }
.kn-session #card[data-ks9bg="2"] #media .k3d-wrap{ background:radial-gradient(ellipse at 50% 30%, #FAF5FF 0%, #DCCBF7 85%); }
.kn-session #card[data-ks9bg="3"] #media .k3d-wrap{ background:radial-gradient(ellipse at 50% 30%, #FFF3F5 0%, #FBCFD7 85%); }
.kn-session #card[data-ks9bg="4"] #media .k3d-wrap{ background:radial-gradient(ellipse at 50% 30%, #F0FBFA 0%, #BEEBE8 85%); }

/* Patch 8j: the question's words light up as Aoede reads it; the device-voice picker is hidden when every question has her recording */
.kn-session #prompt .w{ border-radius:6px; padding:0 2px; transition:background-color .12s ease; }
.kn-session #prompt .w.now{ background:#FFE58A; box-shadow:0 3px 0 #C9A227; }
.ks10-voiced #voicebox{ display:none!important; }

/* Patch 8k: "Help me think" pictures that move on Aoede's words */
.kn-session #media .ks11-stage{ position:relative; width:min(640px, 82vw); flex:0 0 auto; height:clamp(170px, 30vh, 300px); border-radius:16px; overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.kn-session #card.ks8-open #media .ks11-stage{ height:clamp(160px, 27vh, 280px); }
.ks11-stage .ks9-cue{ font-size:clamp(15px, 2.2vh, 20px); bottom:10px; }
.ks11-stage .ks9-tally span{ width:26px; height:26px; font-size:14px; }
@media (max-width: 720px){ .kn-session #media .ks11-stage, .kn-session #card.ks8-open #media .ks11-stage{ height:clamp(150px, 26vh, 220px); } }

/* Patch 8l: question pictures in real 3D */
.kn-session #media .k3q-stage{ position:relative; display:block; width:min(560px, 82vw); height:clamp(160px, 28vh, 270px); border-radius:16px; overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); margin:0 auto; }
.kn-session #media .k3q-stage svg.k3q-svg{ position:absolute; inset:0; width:100%!important; height:100%!important; max-height:none!important; min-height:0!important; opacity:0; pointer-events:none; }
.kn-session #card.ks8-num #media .k3q-stage{ height:clamp(120px, 20vh, 190px); }
.kn-session #card.ks8-open #media .k3q-stage{ height:clamp(120px, 19vh, 180px); }
.kn-session #media .k3q-stage:focus-within{ box-shadow:inset 0 0 0 3px #1975BA; }
@media (max-width: 720px){ .kn-session #media .k3q-stage{ height:clamp(140px, 24vh, 210px); } }