/* =====================================================================
   FLOWSPACE ON A PHONE
   Loaded last. Everything here is for screens below 768px (or for touch),
   so the desktop layout is never affected. The idea on every screen is the
   same: the thing you came for first, the controls within thumb reach,
   nothing hidden behind another bar.
   ===================================================================== */
.on-touch { display: none; }
.lab-dock-btn em, .lab-rv-link em { font-style: normal; }
@media (hover: none), (max-width: 767px) {
  .on-keys { display: none; } .on-touch { display: inline; }
  .lab-grade kbd { display: none; }
}

@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { touch-action: manipulation; }
  button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
  /* every tap target is at least 40px tall */
  .dash-act { min-height: 42px; border-radius: 12px; }
  .dash-link { padding: 6px 2px; margin: -6px -2px; }
  .ne-btn { min-width: 40px; min-height: 40px; }
  .seg > button { min-height: 36px; }

  /* panels that slide over the page must never be see-through */
  .lab-side, .lab-drawer, .lab-source, #sidebar, .task-panel, #task-panel { background: var(--surface-strong) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dark #sidebar { background: #0F1218 !important; }

  /* ---------- Home ---------- */
  .dash { gap: 14px; }
  .dash-top { gap: 12px; }
  .dash-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .dash-move { padding: 18px 18px 20px; }
  .move-acts { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .move-acts .dash-act { width: 100%; justify-content: center; min-height: 46px; font-size: 14px; }
  .move-acts .dash-act[onclick="openPlanDay()"] { display: none; }      /* Plan My Day already sits right above */
  .dash-card { padding: 16px; }
  .jr { grid-template-columns: 44px 14px minmax(0, 1fr) auto; gap: 10px; padding: 10px 4px; }
  .jr em { opacity: 1; }
  .jr-free em { display: none; }                                     /* the whole row is the button */
  .next-main { padding: 11px 6px; }
  .next-go { margin-right: 2px; padding: 8px 12px; background: var(--accent-soft); }
  .week-strip { height: 56px; }
  .video-line .dash-act { flex: 1 1 auto; }
  .dash-start { text-align: left; padding: 22px 18px; }
  .dash-start-acts { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .dash-start-acts .dash-act { justify-content: flex-start; }

  /* ---------- Tasks: one list, most urgent first, instead of a board you swipe sideways ---------- */
  #tab-kanban .k-board.hidden { display: none !important; }
  body.k-dragging .mdock { animation: fsDockOut .25s ease both; pointer-events: none; }   /* the tab bar makes room for the completion slot */
  #tab-kanban .k-board:not(.hidden) { display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; scroll-snap-type: none !important; }
  #tab-kanban .k-col { flex: none !important; width: 100% !important; min-width: 0 !important; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
  /* phone: what is due within a day first, then what you are doing, then what is planned, then the rest */
  #tab-kanban .k-col[data-kcol="duesoon"] { order: 1; }
  #tab-kanban .k-col[data-kcol="inprogress"] { order: 2; }
  #tab-kanban .k-col[data-kcol="planned"] { order: 3; }
  #tab-kanban .k-col[data-kcol="todo"] { order: 4; }
  #tab-kanban .k-col[data-kcol="completed"] { order: 5; }
  #tab-kanban .k-col:not(:has(.k-card)) { display: none; }  /* a stage with nothing in it takes no room */
  #tab-kanban .k-col-head { padding: 0 2px 8px !important; position: static !important; }
  #tab-kanban #flow-head { margin-bottom: 20px; }
  #tab-kanban .notebook-column { min-height: 0 !important; padding: 0 !important; gap: 10px !important; background: none !important; border: 0 !important; }
  #tab-kanban .k-col[data-kcol="completed"] .k-card { opacity: .6; }
  #tab-kanban .k-card { -webkit-user-drag: none; padding: 14px 14px 12px !important; border-radius: 16px !important; }
  #tab-kanban .k-card > div:first-child { margin-bottom: 6px; }
  #tab-kanban .k-card h3 { font-size: 15px; margin-bottom: 4px; }
  #tab-kanban .k-card > .mb-3 { margin-bottom: 8px; }
  #tab-kanban .k-card > .border-t { padding-top: 8px; }

  /* ---------- Schedule: the day first, controls in two tidy rows ---------- */
  #tab-timetable:not(.hidden) { display: flex; flex-direction: column; }
  #tab-timetable > div:first-child { order: 0; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; }
  #tab-timetable > div:first-child > div:first-child, #tab-timetable > div:first-child > div:last-child { display: contents !important; }
  #tab-timetable .tt-navbox { order: 1; flex: 1 1 calc(100% - 90px) !important; min-width: 0; height: 42px; }      /* the date and Today fill the first row */
  #tab-timetable button[onclick="ttShiftWeek(0)"] { order: 2; flex: 0 0 auto !important; height: 42px; }
  #tab-timetable > div:first-child .seg { order: 3; flex: 1 1 0 !important; width: 0 !important; min-width: 110px; display: grid !important; grid-template-columns: 1fr 1fr; }
  #tab-timetable button[onclick="ttOpenFilter()"] { order: 4; }
  #tab-timetable button[onclick="ttWindowSettings()"] { order: 5; }
  #tab-timetable button[onclick="openScheduleImport()"] { order: 6; }
  #tab-timetable button[onclick="openAddLessonModal()"] { order: 7; }
  #tab-timetable button[onclick="exportICS()"] { display: none !important; }
  #tab-timetable button[onclick="ttOpenFilter()"], #tab-timetable button[onclick="ttWindowSettings()"], #tab-timetable button[onclick="openScheduleImport()"], #tab-timetable button[onclick="openAddLessonModal()"] {
    flex: 0 0 42px; width: 42px; height: 42px; min-height: 42px; padding: 0 !important; justify-content: center; font-size: 0 !important; gap: 0 !important; }
  #tab-timetable > div:first-child button svg { width: 18px !important; height: 18px !important; }
  #tab-timetable > .grid, #tab-timetable > div:nth-child(3) { order: 1; }
  #tab-timetable #tt-summary { order: 2; margin-top: 18px; }
  #tab-timetable .tt-ready, #tab-timetable #tt-ready { order: 0; }
  #tt-legend, #tab-timetable .tt-legend { display: none !important; }

  /* ---------- Study Lab ---------- */
  .lab-side { width: min(88%, 340px) !important; box-shadow: 0 0 0 100vmax rgba(5,6,10,.55), 0 0 60px rgba(0,0,0,.5); z-index: 46 !important; }
  .lab.side-closed .lab-side { box-shadow: none; margin-left: calc(-1 * min(88%, 340px)) !important; }
  .lab-bar { padding: 8px 10px !important; gap: 2px !important; background: var(--bg-app) !important; }
  .lab-crumb-sub { display: none; }
  .lab-bar .lab-act { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .lab-bar .ne-btn.is-danger { display: none; }                        /* Delete lives in the ⋯ menu on a phone */
  /* the action pill: two things, short names, never wider than the screen */
  .lab-dock { bottom: calc(86px + env(safe-area-inset-bottom)) !important; gap: 4px !important; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  .lab-dock .is-video, .lab-dock .is-review { display: none; }
  .lab-dock-btn em { font-style: normal; font-size: 0; }
  .lab-dock-btn em::after { content: attr(data-short); font-size: 12.5px; }
  /* reading: bars step aside while you scroll down, and come back when you scroll up */
  body.fs-reading .lab-dock { transform: translateX(-50%) translateY(170px) !important; opacity: 0; pointer-events: none; }
  body.fs-reading .mdock { animation: fsDockOut .25s ease both; pointer-events: none; }
  /* a drawer (Ask AI, new cards, tables) takes the whole screen, and nothing sits on top of its input */
  .lab-drawer { width: 100% !important; z-index: 47; padding-bottom: env(safe-area-inset-bottom); }
  body.lab-drawer-open .mdock, body.lab-drawer-open .lab-dock, body.lab-video-open .lab-dock { display: none !important; }
  .lab-drawer-foot { padding-bottom: 12px; }
  /* a lecture video stays pinned above its notes: watch and read at the same time */
  .lab.video-open .lab-main { flex-direction: column; }
  .lab.video-open .lab-source { order: -1; width: 100% !important; flex: none; height: auto; border-left: 0; border-bottom: 1px solid var(--border-color); transition: none; }
  .lab.video-open .lab-stage { flex: 1; min-height: 0; }
  .lab.video-open .lab-src-bar { display: none; }                      /* the Video button in the note's bar shows and hides it */
  .lab.video-open .lab-src-body.is-video { padding: 0; gap: 0; overflow: visible; flex: none; }
  .lab.video-open .lab-video { border-radius: 0; }
  .lab.video-open .lab-ch-title, .lab.video-open .lab-src-body .imp-note { display: none; }
  .lab.video-open .lab-chapters { flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lab.video-open .lab-chapters::-webkit-scrollbar { display: none; }
  .lab.video-open .lab-chapters button { flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--tint); font-size: 12px; white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
  .lab-ts { padding: 3px 8px; }
  .lab-home { padding-left: 4px; padding-right: 4px; }

  /* ---------- Flashcard review ---------- */
  .lab-rv-top { gap: 10px; align-items: center; }
  .lab-rv-top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lab-rv-link em { display: none; }
  .lab-rv-link { min-width: 40px; min-height: 40px; justify-content: center; padding: 0 10px; }
  .lab-rv-x { min-width: 40px; min-height: 40px; }
  .lab-rv-card { padding: 26px 20px !important; }
  .lab-rv-front { font-size: 19px !important; line-height: 1.45 !important; overflow-wrap: anywhere; }
  .lab-rv-grades { padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  .lab-grade { min-height: 64px; }

  /* ---------- Note editor: title and undo on top, drawing tools under your thumb ---------- */
  #notes-editor > div:first-child { overflow: visible !important; padding-left: 6px !important; padding-right: 6px !important; gap: 2px !important; }
  #notes-editor #ne-title { flex: 1 1 0; width: auto !important; min-width: 0; }
  #notes-editor #ne-saved, #notes-editor .ne-sep, #notes-editor #ne-tapebtn, #notes-editor #ne-focus-btn, #notes-editor > div:first-child > .flex-1 { display: none !important; }
  #notes-editor .ne-tools { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; gap: 2px; padding: 5px; border-radius: 18px;
    background: var(--surface-strong); border: 1px solid var(--border-color); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
  #notes-editor .ne-tools .ne-tool, #notes-editor .ne-tools #ne-add { width: 46px; height: 44px; padding: 0; justify-content: center; border-radius: 13px; }
  #notes-editor .ne-tools .ne-tool span { display: none; }
  #notes-editor .ne-study { width: 40px; padding: 0; justify-content: center; }
  #ne-toolopts .ne-optlabel { display: none; }
  /* tool options open just above the tools */
  #ne-toolopts.ne-optpop { top: auto !important; left: 8px !important; right: 8px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; justify-content: center; }
  /* page controls (left) and zoom (right) sit just above the tools, never under them */
  #ne-pagepill { left: 8px !important; right: auto !important; transform: none !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  #ne-stage > .absolute.bottom-4.right-4 { right: 8px !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  #ne-pagepill .ne-btn, #ne-stage > .absolute.bottom-4.right-4 .ne-btn { min-width: 30px; min-height: 30px; }

  /* ---------- sheets and dialogs ---------- */
  .src-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .src-card { padding: 14px 12px !important; gap: 4px; }
  .src-card b { font-size: 13.5px; } .src-card small { font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pd-head { flex-wrap: wrap; gap: 10px 8px; }
  .pd-head > div:first-child { flex: 1 1 60%; }
  .pd-head > div:last-child { flex: 1 1 100%; order: 3; justify-content: space-between; }
  .pd-head > div:last-child > .ne-btn { position: absolute; top: 14px; right: 12px; }
  .fs-focus { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .job-card { left: 12px; right: 12px; width: auto; }

  /* ---------- small screens: 360px and below ---------- */
  @media (max-width: 370px) {
    .dash-title { font-size: 20px; } .mdock-btn { font-size: 9.5px; }
    #notes-editor .ne-tools .ne-tool, #notes-editor .ne-tools #ne-add { width: 42px; }
  }
}

/* installed on the home screen: no browser bars, so the app keeps clear of the status bar itself */
@media (display-mode: standalone) and (max-width: 767px) {
  .app-header { padding-top: max(env(safe-area-inset-top), 10px) !important; }
}

/* Add to timetable: the day needs more room than a time, or "Thursday" and "Wednesday" are cut off */
@media (max-width: 767px) {
  .tt-when { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .tt-when #tt-day { padding-left: 12px; padding-right: 26px; }
  .tt-when input[type="time"] { padding-left: 12px; padding-right: 8px; }
}