/* ════════════════════════════════════════════════════════════════════════
   study-pages-mobile.css: Space on a phone's browser (2026-10-01).
   Space was drawn for a desktop first. Everything that makes it work on a
   phone is here, so the desktop files stay as they were and a phone rule can
   be found in one place. It loads after every other Space stylesheet.

   "Phone" is the shell's own query (study-deeptutor.js: the drawer, the
   hamburger and the one-column layout all key to it), which is also
   isPhone() in study-pages.js: a narrow screen, or a short one (a phone on
   its side) with a touch screen. A tablet-wide window keeps the desktop rules.
   The Khio apps' own web views never show Space (study-deeptutor.js _spaceHere),
   so nothing here is for them.

   What it does:
   - the hamburger and the page's top bar share the corner properly: the home
     has a header of its own beside the hamburger, a page drops the hamburger
     for its Back arrow
   - every tap target is 44px or more, every field 16px (no zoom on focus)
   - menus, pickers and the icon list open as bottom sheets (openPop's
     opts.sheet in study-pages.js); the "/" menu and the selection bar dock
     above the keyboard instead of floating at the caret
   - named Spaces (study-page-spaces.js): the shelf is a strip to swipe, a Space's
     screen keeps its name clear of the hamburger, New space and the Space menu are
     sheets, and on a page its Space folds into the bar's "…" with the pages above
   - Khio beside the page is a bottom sheet with a Back to page button
   - Version history is two screens (the versions, then the one picked)
   - Keep updated is a sheet with its buttons pinned at the bottom
   - bottoms clear the home indicator, and sit above the keyboard, whose height
     study-core.js publishes as --khio-kbh (body.khio-kb-open while it is up)
   Tokens (--k-*) come from /css/shared/khio-ui.css, so dark mode follows.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Touch screens of any size: nothing to hover, so nothing may wait for it ── */
@media (hover: none) {
    .sp-row-star, .sp-row-more, .sp-icon-add { opacity: 1; }
    /* The delete on a source in the Sources panel (study-deeptutor.js) shows on hover only. */
    #view-deeptutor .dt2-gd-source-del { opacity: 1; }
}

/* The label that stands in for the close icon on a phone (study-page-chat.js). */
.pc-x-label { display: none; }

@keyframes sp-sheet-in { from { opacity: 0; transform: translateY(36px); } }
@keyframes sp-fade-in { from { opacity: 0; } }

@media (max-width: 768px), (max-height: 520px) and (pointer: coarse) {

    /* ═══ 1. Every control ═══════════════════════════════════════════════ */
    .sp-home button, .sp-shell button, #spLayer button, .ph button, .pa-card button, .pc-panel button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    .sp-home, .sp-scroll, .ph-scroll, .ph-list, .pc-log { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
    .sp-link { min-height: 44px; }

    /* ═══ 2. The hamburger and the corner it shares ══════════════════════ */
    /* On a page, the page's own Back arrow takes the top-left corner. */
    .study-layout.deeptutor-active:has(.sp-shell) .dt2-mdrawer-trigger { display: none; }

    /* The drawer's Space row, while Space is the screen on show (the open chat is marked the same way below it). */
    .dt2-mdrawer-navlink[aria-current="page"] { background: #FFF1E8; color: #C24E12; font-weight: 600; }
    html[data-theme="dark"] .dt2-mdrawer-navlink[aria-current="page"] { background: rgba(255, 255, 255, .08); color: var(--khio-dark-text, #f4f4f5); }

    /* ═══ 3. The home ════════════════════════════════════════════════════ */
    .sp-home-in { padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
    /* A header of its own: the hamburger (fixed, 44px, 12px in) on the left, Space,
       and New page. It stays put, so the list never slides under the hamburger. */
    .sp-home-head { position: sticky; top: 0; z-index: 6; flex-direction: row; align-items: center; gap: 12px; min-height: calc(68px + env(safe-area-inset-top, 0px)); margin: 0 -16px 6px; padding: env(safe-area-inset-top, 0px) 12px 0 68px; background: var(--k-paper); }
    .sp-home-head > div:first-child { flex: 1; min-width: 0; }
    .sp-h1 { font-size: 30px; letter-spacing: -.02em; }
    .sp-sub { display: none; }
    .sp-split { align-self: center; }
    .sp-split .k-btn { height: 44px; }
    .sp-split .sp-new { padding: 0 16px 0 14px; }
    .sp-split .sp-new-more { width: 44px; padding: 0; }

    /* The five templates are a strip of small buttons to swipe, not five tall cards. */
    .sp-tpls { margin: 2px -16px 14px; }
    .sp-tpls .sp-eyebrow { margin-bottom: 8px; padding: 0 16px; }
    .sp-tpl-row { display: flex; gap: 8px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .sp-tpl-row::-webkit-scrollbar { display: none; }
    .sp-tpl { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 9px; height: 48px; padding: 0 16px 0 12px; scroll-snap-align: start; border-radius: 16px; }
    .sp-tpl-art { display: none; }
    .sp-tpl-ico { display: grid; }
    .sp-tpl-name { padding: 0; }
    .sp-tpl b { font-size: 14.5px; white-space: nowrap; }
    .sp-tpl small { display: none; }
    .sp-home.is-trash .sp-tpls { display: none; }

    /* Tabs and search. */
    .sp-tools { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 8px; }
    .sp-tabs { gap: 2px; margin: 0 -16px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
    .sp-tabs::-webkit-scrollbar { display: none; }
    .sp-tab { flex: none; height: 44px; padding: 0 13px; gap: 5px; font-size: 14.5px; }
    .sp-search { width: 100%; height: 46px; padding: 0 16px; }
    #view-deeptutor .sp-search input, #view-deeptutor .sp-search input:focus { font-size: 16px !important; }

    /* The list: the name gets the whole line, and when it was last edited sits under it. */
    .sp-listhead { display: none; }
    .sp-row { margin-left: calc(var(--depth, 0) * 18px); }
    .sp-row + .sp-row::before { left: 12px; right: 12px; }
    .sp-row-caret { width: 44px; height: 44px; margin: 0 -14px 0 -6px; border-radius: 10px; }
    .sp-row-caret svg { width: 18px; height: 18px; }
    .sp-row-main { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ico text" "ico when"; align-items: center; column-gap: 12px; min-height: 64px; padding: 10px 4px 10px 12px; }
    .sp-row-main > .sp-ico { grid-area: ico; width: 40px; height: 40px; border-radius: 12px; }
    .sp-row-main > .sp-row-text { grid-area: text; gap: 0; }
    .sp-row-main > .sp-row-when { grid-area: when; width: auto; text-align: left; font-size: 13px; }
    /* A long name wraps to a second line instead of losing most of itself. */
    .sp-row-title { font-size: 16px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
    .sp-row-snip, .sp-row-src, .sp-row-gap { display: none; }
    /* A Space's chip sits beside the name when there is room, and under it when there is not. */
    .sp-row-line { flex-wrap: wrap; row-gap: 3px; }
    .sps-chip { max-width: 100%; height: 24px; }
    .sp-row-star, .sp-row-more { width: 44px; height: 44px; opacity: 1; }
    /* The star shows on a favorite only; the row's menu adds one. */
    .sp-row-star:not(.is-on) { display: none; }
    .sp-row-star svg, .sp-row-more svg { width: 18px; height: 18px; }
    #view-deeptutor .sp-rename, #view-deeptutor .sp-rename:focus { height: 36px; font-size: 16px !important; }
    .sp-note { padding: 40px 0; }

    /* First visit. */
    .sp-first { gap: 20px; padding: 24px 20px; border-radius: 24px; }
    .sp-first h2 { font-size: 30px; }
    .sp-first-cta .k-btn { height: 46px; }

    /* Trash. */
    .spt-bar { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 0 8px; }
    .spt-clear { height: 44px; margin-left: -8px; padding: 0 12px; }
    .spt-row { gap: 12px; padding: 12px 4px 12px 12px; }
    .spt-actions { gap: 8px; padding-left: 52px; }
    .spt-actions .k-btn { height: 44px; }
    .spt-forever { height: 44px; padding: 0 14px; }
    .spt-line { padding: 40px 0; }

    /* ═══ 3b. Spaces (study-page-spaces.js) ═════════════════════════════ */
    /* The shelf: your Spaces are a strip to swipe, like the templates under them, so the
       list is not pushed down the screen by a grid of cards. */
    .sps-shelf { margin: 0 -16px 12px; }
    .sps-top { min-height: 44px; margin: 0; padding: 0 16px; }
    .sps-grid { display: flex; gap: 10px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .sps-grid::-webkit-scrollbar { display: none; }
    .sps-card { flex: 0 0 176px; scroll-snap-align: start; min-height: 64px; padding: 10px 12px 10px 10px; }
    .sps-banner { margin: 0 16px; flex-wrap: wrap; }
    .sps-banner .k-btn { height: 44px; }
    .sps-skeleton, .sps-line { margin: 0 16px; }

    /* One Space's screen. The head is its title, which scrolls away with the list, so a band of
       paper stays under the hamburger (a sticky strip). The back link and New page share the
       first row, above the strip while the screen is at the top; the name and its menu are the
       second row, which goes under the strip as it scrolls. */
    .sp-home.in-space .sp-home-in::before { content: ''; position: sticky; top: 0; z-index: 5; display: block; height: calc(68px + env(safe-area-inset-top, 0px)); margin: 0 -16px calc(-68px - env(safe-area-inset-top, 0px)); background: var(--k-paper); pointer-events: none; }
    .sp-home.in-space .sp-home-head { position: static; z-index: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "back split" "title title" "count count"; align-items: center; gap: 0 12px; min-height: 0; margin: 0 -16px 8px; padding: env(safe-area-inset-top, 0px) 12px 8px 16px; background: none; }
    .sp-home.in-space .sps-head { display: contents; }
    .sps-back { position: relative; z-index: 6; grid-area: back; justify-self: start; min-height: 44px; margin: 12px 0 12px 52px; padding: 0 10px 0 4px; font-size: 16px; }
    .sps-back svg { width: 18px; height: 18px; }
    .sp-home.in-space .sp-split { position: relative; z-index: 6; grid-area: split; margin: 12px 0; }
    .sps-title-row { grid-area: title; gap: 12px; min-height: 52px; }
    .sps-emoji { width: 48px; height: 48px; border-radius: 15px; font-size: 28px; }
    .sps-emoji svg { width: 24px; height: 24px; }
    .sps-name-wrap { margin-left: -6px; }
    .sps-name-wrap::after { padding: 7px 8px; font-size: 28px; }
    #view-deeptutor .sps-name, #view-deeptutor .sps-name:hover, #view-deeptutor .sps-name:focus { padding: 7px 8px; font-size: 28px !important; }
    .sps-title { font-size: 28px; }
    .sp-bar-btn.sps-more { width: 44px; height: 44px; margin-left: auto; border-radius: 22px; }
    .sps-count { grid-area: count; margin: 2px 0 0 4px; font-size: 14px; }

    /* ═══ 4. Sheets, menus and the popovers that dock ═══════════════════ */
    #spLayer .sp-scrim { position: fixed; inset: 0; background: rgba(10, 10, 12, .42); cursor: pointer; animation: sp-fade-in .2s ease both; }
    #spLayer .sp-pop.is-sheet { position: fixed; left: 0; right: 0; bottom: var(--khio-kbh, 0px); width: auto; max-width: 560px; max-height: calc(100% - var(--khio-kbh, 0px) - 56px); margin: 0 auto; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 22px 22px 0 0; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -12px 44px rgba(0, 0, 0, .2); animation: sp-sheet-in .28s var(--k-ease) both; }
    body.khio-kb-open #spLayer .sp-pop.is-sheet { padding-bottom: 10px; }
    #spLayer .sp-pop.is-sheet::before { content: ''; display: block; width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: color-mix(in srgb, var(--k-ink) 18%, transparent); }
    #spLayer .sp-pop:not(.is-sheet) { max-width: calc(100vw - 16px); }

    /* A menu, as a list of big rows. */
    #spLayer .sp-menu.is-sheet { min-width: 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
    #spLayer .is-sheet .sp-menu-item { min-height: 52px; gap: 14px; padding: 0 14px; border-radius: 12px; font-size: 16px; }
    #spLayer .is-sheet .sp-menu-item svg { width: 20px; height: 20px; }
    #spLayer .is-sheet .sp-menu-emoji { width: 20px; font-size: 18px; }
    #spLayer .is-sheet .sp-menu-label { padding: 10px 14px 6px; font-size: 12px; }
    /* The name of the page a menu is for. */
    #spLayer .is-sheet .sp-menu-label.is-title { padding: 6px 14px 10px; color: var(--k-ink); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #spLayer .is-sheet .sp-menu-sep { margin: 6px 14px; }

    /* The icon list. */
    #spLayer .sp-emoji.is-sheet { width: auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    #spLayer .is-sheet .sp-emoji-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
    #spLayer .is-sheet .sp-emoji-btn { border-radius: 12px; font-size: 26px; }
    #spLayer .is-sheet .sp-emoji-remove { min-height: 52px; margin-top: 6px; font-size: 15px; }

    /* Find a page (Move to, Link to page). */
    #spLayer .sp-picker.is-sheet { width: auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    #spLayer .is-sheet .sp-picker-label { padding: 4px 4px 10px; color: var(--k-ink); font-size: 15px; font-weight: 600; }
    #spLayer .is-sheet .sp-picker-find { height: 48px; padding: 0 14px; border-radius: 14px; }
    #spLayer .is-sheet .sp-picker-list { max-height: min(380px, calc(100vh - 300px)); }
    #spLayer .is-sheet .sp-picker-item { min-height: 56px; gap: 12px; padding: 8px 10px; border-radius: 12px; }
    #spLayer .is-sheet .sp-picker-ico { width: 38px; height: 38px; font-size: 20px; }
    #spLayer .is-sheet .sp-picker-text b { font-size: 16px; }
    #spLayer .is-sheet .sp-picker-text small { font-size: 13px; }

    /* New space. */
    #spLayer .sps-create.is-sheet { width: auto; padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
    body.khio-kb-open #spLayer .sps-create.is-sheet { padding-bottom: 14px; }
    #spLayer .is-sheet .sps-create-label { margin: 4px 0 12px; font-size: 17px; }
    #spLayer .is-sheet .sps-create-name { height: 48px; padding: 0 14px; border-radius: 14px !important; }
    #spLayer .is-sheet .sps-create-icons { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 14px; }
    #spLayer .is-sheet .sps-create-ico { aspect-ratio: auto; height: 52px; border-radius: 14px; font-size: 26px; }
    #spLayer .is-sheet .sps-create-foot .k-btn { width: 100%; height: 50px; font-size: 16px; }

    /* The "/" menu and the selection bar are the editor's own and are drawn by it;
       here they only dock above the keyboard, full width, so neither can run off
       the screen or sit under the keys. (Both set left and top inline, hence !important.) */
    #spLayer .sp-slash { left: 8px !important; right: 8px; top: auto !important; bottom: calc(var(--khio-kbh, 0px) + 8px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: 480px; max-height: min(46%, 340px); margin: 0 auto; }
    body.khio-kb-open #spLayer .sp-slash { bottom: calc(var(--khio-kbh, 0px) + 8px); }
    #spLayer .sp-slash-item { min-height: 52px; }
    #spLayer .sp-bubble { left: 8px !important; right: 8px; top: auto !important; bottom: calc(var(--khio-kbh, 0px) + 8px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
    body.khio-kb-open #spLayer .sp-bubble { bottom: calc(var(--khio-kbh, 0px) + 8px); }
    #spLayer .sp-bubble::-webkit-scrollbar { display: none; }
    #spLayer .sp-bubble-main { flex: none; }
    #spLayer .sp-bubble-btn, #spLayer .sp-bubble-ask, #spLayer .sp-bubble-apply, #spLayer .sp-bubble-unlink { width: auto; min-width: 44px; height: 44px; }
    #spLayer .sp-bubble-btn { width: 44px; }
    #spLayer .sp-bubble-link { flex: 1; min-width: 0; }
    #spLayer .sp-bubble-link input { flex: 1; width: auto; min-width: 0; height: 44px; }

    /* Every field in a popover or sheet: 16px, or iOS zooms the page in when it is tapped. */
    #spLayer input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #spLayer textarea, #spLayer select { font-size: 16px !important; }

    /* ═══ 5. A page: the top bar ════════════════════════════════════════ */
    .sp-bar { height: calc(56px + env(safe-area-inset-top, 0px)); gap: 4px; padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px)); background: var(--k-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .sp-crumbs { flex: 1 1 auto; gap: 0; font-size: 15px; }
    .sp-crumb-back { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 22px; }
    .sp-crumb-back span { display: none; }
    .sp-crumb-back svg { width: 22px; height: 22px; }
    .sp-crumbs > .sp-crumb-sep { display: none; }
    .sp-crumb { max-width: 112px; height: 44px; padding: 0 6px; }
    /* The "…" that holds the pages above this one. */
    .sp-crumb[data-crumb-more] { min-width: 44px; justify-content: center; font-size: 18px; }
    .sp-crumb-page { flex: 1 1 auto; gap: 8px; padding: 0 4px; }
    .sp-crumb-ico { font-size: 18px; }
    .sp-crumb-title { font-size: 16px; font-weight: 600; }
    .sp-bar-right { flex: none; gap: 2px; }
    .sp-saved { min-width: 0; padding: 0 6px 0 0; font-size: 12px; }
    /* Sources is in the page menu on a phone. */
    .sp-bar #dt2DocSources { display: none; }
    .sp-bar .sp-bar-btn.is-icon, .sp-bar .pa-chip { width: 44px; height: 44px; margin: 0; padding: 0; justify-content: center; border-radius: 22px; }
    .sp-bar .pa-chip svg { width: 17px; height: 17px; }

    /* Khio: a button that floats at the bottom right, where a thumb is. It is only
       there while the chat is closed (the page's own script toggles .visible), and
       not while the keyboard is up, or it would sit on what is being typed. */
    #view-deeptutor .sp-shell #dt2DocAiOpen.visible { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 5; height: 52px; gap: 8px; padding: 0 22px 0 18px !important; border-radius: 26px; font-size: 16px; box-shadow: 0 2px 4px rgba(10, 31, 61, .2), 0 10px 28px rgba(10, 31, 61, .32); }
    #view-deeptutor .sp-shell #dt2DocAiOpen.visible svg { width: 20px; height: 20px; }
    body.khio-kb-open #view-deeptutor .sp-shell #dt2DocAiOpen { display: none !important; }

    /* ═══ 6. A page: the page ═══════════════════════════════════════════ */
    body.khio-kb-open .sp-shell .sp-scroll { bottom: var(--khio-kbh, 0px); }
    .sp-doc { display: block; padding: 0 max(18px, env(safe-area-inset-left, 0px)) 0 max(18px, env(safe-area-inset-right, 0px)); }
    .sp-col { padding: 12px 0 calc(150px + env(safe-area-inset-bottom, 0px)); }
    .sp-head { margin-bottom: 8px; }
    .sp-icon-btn { height: 64px; margin-left: -6px; }
    .sp-icon-btn:not(.has-icon) { height: 44px; margin-bottom: 4px; }
    .sp-icon-glyph { font-size: 46px; }
    .sp-icon-add { font-size: 15px; }
    #view-deeptutor .sp-title, #view-deeptutor .sp-title:hover, #view-deeptutor .sp-title:focus { font-size: 32px !important; line-height: 1.14; }
    .sp-kids { margin-top: 40px; padding-top: 16px; }
    .sp-kid { min-height: 52px; }
    .sp-kid-inside { display: none; }
    .sp-kid-when { min-width: 0; }
    .sp-kids-add { min-height: 48px; }

    /* Files Khio can read: a panel from the right, with thumb-sized buttons, and
       the page's own colours (it was painted white in both themes). */
    #view-deeptutor .dt2-gd-sources-panel { width: min(360px, 100%); background: var(--k-surface); border-left-color: var(--k-line); color: var(--k-ink); }
    #view-deeptutor .dt2-gd-sources-head { padding: 8px 8px 8px 16px; border-bottom-color: var(--k-line); }
    #view-deeptutor .dt2-gd-sources-head-title { color: var(--k-ink); font-size: 16px; font-weight: 600; }
    #view-deeptutor .dt2-gd-sources-head-title i, #view-deeptutor .dt2-gd-sources-close { color: var(--k-ink-2); }
    #view-deeptutor .dt2-gd-sources-close { width: 44px; height: 44px; }
    #view-deeptutor .dt2-gd-sources-add { min-height: 48px; background: transparent; border-color: var(--k-blue); color: var(--k-blue); font-size: 15px; }
    #view-deeptutor .dt2-gd-sources-empty { color: var(--k-ink-3); font-size: 14px; }
    #view-deeptutor .dt2-gd-sources-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-top-color: var(--k-line); color: var(--k-ink-3); font-size: 12px; }
    #view-deeptutor .dt2-gd-source-row { min-height: 56px; }
    #view-deeptutor .dt2-gd-source-name { color: var(--k-ink); font-size: 15px; }
    #view-deeptutor .dt2-gd-source-size { color: var(--k-ink-3); font-size: 12px; }
    #view-deeptutor .dt2-gd-source-icon { background: var(--k-hover); color: var(--k-ink-2); }
    #view-deeptutor .dt2-gd-source-del { width: 44px; height: 44px; color: var(--k-ink-2); }

    /* ═══ 7. Khio beside the page: a sheet over the page ════════════════ */
    .pc-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1290; background: rgba(10, 10, 12, .42); cursor: pointer; animation: sp-fade-in .2s ease both; }
    .pc-panel { position: fixed; top: auto; right: 0; bottom: var(--khio-kbh, 0px); left: 0; z-index: 1300; width: auto; max-width: 640px; height: min(82%, calc(100% - var(--khio-kbh, 0px) - 44px)); margin: 0 auto; border-left: 0; border-top: 1px solid var(--t-line); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 44px rgba(0, 0, 0, .22); animation: sp-sheet-in .3s var(--k-ease) both; }
    .pc-head { position: relative; height: 60px; padding: 8px 8px 0 18px; }
    .pc-head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: color-mix(in srgb, var(--t-ink) 16%, transparent); }
    .pc-name { padding-top: 6px; font-size: 17px; }
    .pc-head .pc-x { width: auto; height: 44px; padding: 0 16px; gap: 6px; border-radius: 22px; background: var(--t-soft); color: var(--t-ink); font: 600 15px Manrope, Inter, -apple-system, sans-serif; }
    .pc-head .pc-x svg { display: none; }
    .pc-head .pc-x-label { display: inline; }
    .pc-log { padding: 6px 18px 18px; }
    .pc-foot { padding: 4px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
    body.khio-kb-open .pc-foot { padding-bottom: 10px; }
    .pc-bubble, .pc-turn-err { font-size: 15.5px; }
    .pc-md { font-size: 16px; }
    #view-deeptutor .pc-compose textarea, #view-deeptutor .pc-compose textarea:focus { font-size: 16px; }
    .pc-compose { padding: 6px 6px 6px 16px; }
    .pc-send { width: 44px; height: 44px; }
    .pc-sel .pc-x { width: 44px; height: 44px; margin: -12px -8px -12px 0; }
    .pc-edit .pc-link, .pc-turn-err .pc-link { min-height: 44px; padding: 0 10px; }
    .pc-edit .pc-link { margin-left: -4px; }

    /* ═══ 8. Version history: the versions, then the one picked ═════════ */
    .ph-head { grid-template-columns: 44px 1fr 44px; height: calc(56px + env(safe-area-inset-top, 0px)); gap: 8px; padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px)); }
    .ph-back { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 22px; }
    .ph-back svg { width: 22px; height: 22px; }
    .ph-h { text-align: center; font-size: 16px; }
    .ph-body { grid-template-columns: minmax(0, 1fr); }
    .ph[data-pane="list"] .ph-view { display: none; }
    .ph[data-pane="view"] .ph-list, .ph[data-pane="view"] .ph-save { display: none; }
    /* "Save a version now" is the list's one action: a wide button at the bottom, where a thumb is. */
    .ph .ph-save.k-btn { position: absolute; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2; width: calc(100% - 32px); height: 50px; border-radius: 16px; font-size: 16px; }
    .ph .ph-save span { display: inline; }
    .ph-list { padding: 8px 12px calc(96px + env(safe-area-inset-bottom, 0px)); border-left: 0; background: var(--k-paper); }
    .ph-day { padding: 18px 8px 6px; }
    .ph-item { align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px; border-radius: 14px; }
    .ph-item svg { width: 18px; height: 18px; margin-top: 0; }
    .ph-item-text b { font-size: 15.5px; }
    .ph-item-text small { font-size: 13px; }
    .ph-bar { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px 12px; }
    .ph-what { flex: 1 1 100%; }
    .ph-switch { height: 44px; padding: 0 4px; }
    .ph .ph-restore.k-btn { height: 44px; margin-left: auto; }
    .ph-paper { padding: 24px 18px calc(80px + env(safe-area-inset-bottom, 0px)); }
    .ph-legend { margin: 14px 16px 0; }
    .ph-icon { font-size: 44px; }
    .ph-title { font-size: 32px; }
    .ph-link { min-height: 44px; }

    /* ═══ 9. Keep updated: a sheet, with its buttons pinned at the bottom ═ */
    .pa-dialog[open] { align-items: flex-end; padding: 0 0 var(--khio-kbh, 0px); overflow: hidden; }
    .pa-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .pa-card { width: 100%; max-width: 640px; max-height: calc(100% - 24px); margin: 0 auto; border-width: 1px 0 0; border-radius: 24px 24px 0 0; animation: sp-sheet-in .3s var(--k-ease) both; }
    .pa-head { padding: 22px 16px 4px 18px; }
    .pa-title { font-size: 26px; }
    .pa-x { width: 44px; height: 44px; margin: -8px -6px 0 0; }
    .pa-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 0; }
    #paDialog textarea, #paDialog textarea:hover, #paDialog textarea:focus { font-size: 16px !important; }
    #paDialog select, #paDialog input[type="time"], #paDialog select:focus, #paDialog input[type="time"]:focus { height: 44px; font-size: 16px !important; }
    .pa-starter { min-height: 44px; padding: 8px 14px; font-size: 14px; }
    .pa-seg { display: flex; width: 100%; }
    .pa-seg-btn { flex: 1; height: 44px; padding: 0 8px; }
    .pa-at { flex: 1; }
    .pa-src { padding-top: 14px; padding-bottom: 14px; }
    .pa-status { flex: none; padding: 6px 18px 0; }
    .pa-foot { flex: none; flex-wrap: nowrap; gap: 8px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--k-line); }
    body.khio-kb-open .pa-foot { padding-bottom: 12px; }
    .pa-foot .k-btn.is-sm { height: 46px; padding: 0 18px; font-size: 15px; }
    .pa-off { min-height: 46px; padding: 0 8px; }

    /* ═══ 10. Toasts ═════════════════════════════════════════════════════ */
    /* The shell's toast (study-deeptutor.js _khioToast) sits at the top right, which on a phone is
       the header and the Back arrow, and its Undo is 28px. While Space is on screen it goes to the
       bottom, over the Khio button and clear of the keyboard, with a button a thumb can hit. Its
       position is set inline, hence !important. */
    body:has(.sp-home, .sp-shell) #khioToastHost { top: auto !important; right: 16px !important; bottom: calc(var(--khio-kbh, 0px) + 86px + env(safe-area-inset-bottom, 0px)) !important; left: 16px; max-width: none !important; }
    body:has(.sp-home, .sp-shell) #khioToastHost button { min-width: 64px; min-height: 44px; }

    /* ═══ 11. Small screens ══════════════════════════════════════════════ */
    @media (max-width: 339px) {
        .sp-split .sp-new { font-size: 0; padding: 0 14px; }
        .sp-split .sp-new svg { width: 18px; height: 18px; }
        .sp-h1 { font-size: 28px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    #spLayer .sp-scrim, #spLayer .sp-pop.is-sheet, .pc-scrim, .pc-panel, .pa-card { animation: none !important; }
}