/* Phone mode for the engine pages (euclid.py TEMPLATE) and the shells.
   Every rule sits behind the phone breakpoint (<= 700 px, the same test as
   NARROW in the page script and static/mobile.js), so desktop rendering is
   untouched. mobile.js builds the pieces that need DOM work — the drawer
   (#mdrawer: menu links, account, gear, Recent, the sidebar), the top-bar
   label (#mtop), the view cluster moved over the board (#viewchips + #mfit /
   #mtoolx / #mpolyclose), the mini-map (#mmap), the sheet scrim (#mscrim)
   and the sheet close buttons (.msheetx). !important is used only where an
   inline style set by the engine (board height, menu placement, chip row
   wrap, sub-panel indent, popup geometry) has to lose on phones. */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
         overscroll-behavior-y: none; }
  /* --- top bar: ≡ + "Course · section" (the links, gear and account move
         into the drawer; hidden until mobile.js has moved them) --- */
  .nav { flex: none; flex-wrap: nowrap; gap: 8px; padding: 6px 10px; min-height: 44px; box-sizing: border-box;
         padding-top: calc(6px + env(safe-area-inset-top)); }
  .nav a, .nav #menuCfgBtn, .nav #acct { display: none; }
  #sidetoggle { width: 40px; height: 40px; padding: 0; margin: 0; font-size: 20px; flex: none;
                display: inline-flex; align-items: center; justify-content: center; }
  #mtop { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
          font-size: 15px; font-weight: 600; color: #e6e8ee; }
  #mtop small { color: #8b93a7; font-weight: 400; font-size: 13px; margin-left: 6px; }
  .nav2 { flex: none; padding: 0; border: none; min-height: 0; }   /* emptied into .nav by mobile.js */
  .nav #favstar { min-height: 36px; padding: 0 10px; flex: none; }
  .nav #favuser { display: none; }
  .nav #helpburger { min-width: 40px; min-height: 36px; margin: 0; flex: none; }
  #favpanel, #adminpanel { width: calc(100vw - 20px); left: 10px; box-sizing: border-box; }
  /* --- one scrolling column: title, statement, board, caption, panels --- */
  .layout { flex: 1; min-height: 0; height: auto !important; display: flex; }
  .layout.nolist aside { display: none; }
  aside { display: none; }                    /* mobile.js moves it into the drawer */
  main { flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
         padding: 8px 10px calc(84px + env(safe-area-inset-bottom)); }
  main::-webkit-scrollbar { display: none; }
  #ptrow { gap: 6px; }
  h1#ptitle { flex: 1 1 100%; font-size: 15px; line-height: 1.3; margin: 0; }
  #propstar { font-size: 22px; padding: 0 8px; min-height: 36px; }
  #depsbtn { min-height: 36px; margin-left: auto; }
  .stat { font-size: 13px; margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; overflow: hidden; position: relative; }
  .stat.clampable { cursor: pointer; padding-right: 16px; }
  .stat.clampable::after { content: "\25BE"; position: absolute; right: 0; bottom: 0; color: #5b7fff; font-size: 13px; }
  .stat.expanded { display: block; -webkit-line-clamp: unset; }
  .stat.expanded::after { content: "\25B4"; }
  /* --- the board: full width, ~58 % of the viewport (the engine's resize
         observer writes 440px inline, hence !important) --- */
  #boardwrap { position: relative; }
  #board, #board3d { height: 58vh !important; height: 58svh !important; border-radius: 10px; }
  #restorechip { max-width: 68%; font-size: 11.5px; }
  #lyrbadge { top: auto; bottom: 8px; left: 8px; transform: none; max-width: calc(100% - 110px);
              font-size: 12px; text-align: left; white-space: normal; }
  /* view cluster: floated to the board's lower right by mobile.js, 2 columns
     of 40 px round buttons (the inline "gap:6px;margin-left:auto" loses) */
  #boardwrap #viewchips { position: absolute; right: 8px; bottom: 8px; z-index: 31; margin: 0 !important;
                          display: grid !important; grid-template-columns: repeat(2, 40px); gap: 8px !important;
                          justify-items: end; }
  #boardwrap #viewchips .chip { width: 40px; height: 40px; font-size: 17px; background: rgba(27, 30, 39, 0.92);
                                border-color: #3a4052; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
  #boardwrap #viewchips .chip.wide { grid-column: 1 / -1; width: 88px; padding: 0; font-size: 12.5px; }
  #boardwrap #viewchips .chip.on { border-color: #4fd1c5; color: #4fd1c5; }
  #boardwrap #viewchips #mfit { font-size: 12.5px; font-weight: 600; }
  #boardwrap #viewchips #mtoolx { display: none; border-color: #4fd1c5; color: #4fd1c5; }
  #boardwrap #viewchips #mtoolx.show { display: inline-block; }
  #mpolyclose { display: none; position: absolute; left: 8px; bottom: 52px; z-index: 31; background: #16302f;
                border: 1px solid #4fd1c5; color: #4fd1c5; border-radius: 999px; padding: 0 14px; height: 36px;
                font-size: 13px; cursor: pointer; }
  #mpolyclose.show { display: inline-block; }
  #mmap { position: absolute; right: 8px; top: 8px; z-index: 31; width: 76px; height: 52px;
          border: 1px solid #3a4052; border-radius: 6px; background: rgba(20, 22, 29, 0.85); cursor: pointer;
          display: block; }
  #mmap.hide { display: none; }
  /* --- fixed bottom step bar (the inline "flex-wrap:wrap" on #chips loses) --- */
  #navrow { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; flex-wrap: nowrap; gap: 8px;
            padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #12141a;
            border-top: 1px solid #252a38; }
  #navrow > .act { min-height: 44px; padding: 0 16px; font-size: 15px; flex: none; }
  #chips { flex: 1 1 auto; min-width: 0; overflow-x: auto; flex-wrap: nowrap !important; gap: 6px !important;
           padding: 2px 0; scrollbar-width: none; }
  #chips::-webkit-scrollbar { display: none; }
  #chips .chip { width: 36px; height: 36px; font-size: 13px; flex: none; }
  /* --- caption + panels --- */
  #cap { max-width: none; padding: 10px 12px; font-size: 14px; }
  /* References row: stays under the caption, at most 3 lines, then scrolls */
  #refs { max-width: none; margin: 6px 2px 0; padding: 0 2px; line-height: 1.45;
          max-height: 4.35em; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  #refs a.ext, #refs .xref { padding: 2px 0; }
  .subpanel, .deppanel { max-width: none; margin-left: 6px !important; padding: 8px 10px 10px; }
  .subpanel .act.sm, .deppanel .act.sm { min-height: 36px; padding: 0 12px; }
  .subpanel .row, .deppanel .row { gap: 6px; }
  .chip.sm { width: 32px; height: 32px; font-size: 12px; }
  .depboard { border-radius: 8px; }
  .xref { padding: 4px 2px; }
  /* Euclid AI (AI step 3, 2026-10-10): the step's Why?, the plan button and the search's Ask AI get a thumb-sized target; the plan list scrolls */
  .eai-btn { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
  .eai-btn.sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
  #searchai { min-height: 34px; padding: 0 12px; }
  .eai-why, #pathpanel { max-width: none; }
  #pathpanel ol.eai-list { max-height: 36vh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .hint { display: none; }
  /* --- bottom sheets: palette, Dependencies, gear flyout, help popup --- */
  #mscrim { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.45); }
  #mscrim.show { display: block; }
  .msheetx { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border-radius: 9px;
             background: none; border: 1px solid transparent; color: #8b93a7; font-size: 20px; line-height: 1;
             cursor: pointer; z-index: 2; }
  .msheetx:active { color: #e6e8ee; border-color: #2c3140; }
  #lyrbar.open, #depsmenu, #menucfg, .engine-popup {
    position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important;
    transform: none !important; border-radius: 14px 14px 0 0 !important; border-bottom: none;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5); box-sizing: border-box; overflow-y: auto; }
  #lyrbar.open::before, #depsmenu::before, #menucfg::before, .engine-popup::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 2px; background: #3a4052; }
  #lyrbar.open { z-index: 62; max-height: 72vh; padding: 30px 12px calc(10px + env(safe-area-inset-bottom)); }
  .lyrgrp { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0 0 8px; border-right: none;
            border-bottom: 1px solid #252a38; }
  .lyrgrp.lyracts { border-bottom: none; }
  .lyrbtn { min-height: 38px; padding: 4px 12px; font-size: 13px; }
  #lyrprompt { font-size: 13px; margin-top: 6px; }
  #depsmenu, #menucfg { z-index: 70; max-height: 70vh; padding-top: 30px;
                        padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #menucfg { padding-left: 14px; padding-right: 14px; }
  .deprow { padding-top: 9px; padding-bottom: 9px; white-space: normal; }
  .engine-popup { z-index: 65 !important; max-height: 78vh !important; font-size: 15px !important;
                  padding: 30px 16px calc(14px + env(safe-area-inset-bottom)) !important; }
  .lyrtextin { font-size: 16px; }
  /* --- the drawer (mobile.js) --- */
  #mdscrim { display: none; position: fixed; inset: 0; z-index: 77; background: rgba(0, 0, 0, 0.5); }
  body.mdrawer-open #mdscrim { display: block; }
  #mdrawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); z-index: 78; background: #12141a;
             border-right: 1px solid #252a38; transform: translateX(-104%); transition: transform .22s ease;
             display: flex; flex-direction: column; padding-top: env(safe-area-inset-top);
             box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
  body.mdrawer-open #mdrawer { transform: none; }
  #mdhead { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-bottom: 1px solid #252a38;
            flex: none; }
  #mdhead b { flex: 1; font-size: 16px; font-weight: 600; }
  #mdclose { width: 40px; height: 40px; background: none; border: 1px solid transparent; border-radius: 9px;
             color: #8b93a7; font-size: 22px; line-height: 1; cursor: pointer; }
  #mdcourses { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 10px; border-bottom: 1px solid #252a38;
               flex: none; }
  #mdcourses .mdgrp { flex: 1 1 100%; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
                      color: #5b647a; margin-top: 6px; }
  #mdcourses a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px;
                 border: 1px solid #2c3140; background: #1b1e27; color: #aab2c5; text-decoration: none;
                 font-size: 13.5px; }
  #mdcourses a.on { border-color: #5b7fff; color: #e6e8ee; background: #243052; }
  #mdtools { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #252a38;
             flex: none; }
  #mdtools .mdlbl { flex: 1; color: #8b93a7; font-size: 13px; }
  #mdtools #menuCfgBtn { display: inline-flex; align-items: center; justify-content: center; width: 38px;
                         height: 38px; padding: 0; font-size: 16px; }
  #mdtools #acct { display: flex; margin: 0 !important; }
  #mdrecent { flex: none; border-bottom: 1px solid #252a38; padding: 4px 0 6px; max-height: 28vh; overflow-y: auto; }
  #mdrecent .bookhead { padding: 8px 14px 2px; }
  #mdrecent .item b { white-space: nowrap; flex: none; }
  #mdrecent .item small { color: #5b647a; margin-left: 8px; font-size: 11.5px; overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }
  #mdrawer aside { display: flex; flex: 1; min-height: 0; width: auto; border-right: none; }
  #jump { padding: 8px 10px; gap: 5px; }
  #jump button { min-height: 34px; min-width: 38px; font-size: 13px; padding: 3px 9px; }
  #jump #searchBtn { min-width: 40px; }
  #jump #searchBtn svg { width: 16px; height: 16px; }
  #jump2 { padding: 6px 10px; gap: 5px; max-height: 24vh; }
  #jump2 button { min-height: 34px; min-width: 34px; font-size: 13px; padding: 2px 7px; }
  #list { padding: 4px 0; }
  .item { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; font-size: 14px;
          padding: 6px 14px; }
  #searchq { font-size: 16px; padding: 8px 10px; }
  #searchclose { width: 36px; height: 36px; font-size: 20px; }
  .sres { padding: 10px 14px; }
  .sres .st { font-size: 14px; }
}