/* =====================================================================
   BUILD 182 — the phone layout. Loaded in the <head> of every page with media="(max-width: 760px)", so a desktop never even applies it, and AFTER rampart-theme.css / themes.css so
   it can correct them. Everything below is for a phone (about 360–430px wide); the desktop layout is untouched.
   What was wrong (from phone screenshots of build 181):
     1  Notebook      a 270px page list beside the canvas, text boxes at fixed pixel positions 320px wide: the editor was off the right edge. Now: the pages are a row of chips,
                      the boxes stack in reading order (notes-canvas.js sets the order), the toolbar is one swipeable row.
     2  check boxes   "Blocked only", "Include Won/Lost": the rule that makes every filter control 44px tall also made the tick box a 44px square.
     3  filters       six full-width drop-downs = the whole first screen. Now a two-column grid, the search box and the buttons across the full width.
     4  tables        a table with more columns than the screen only showed its first two (Task / Assignee …). The Task list becomes one card per task; other wide tables become
                      label : value cards (assets/js/mobile.js decides which, by measuring).
     5  forms         "Add contact" had a 50px "Nar" box; Board columns had 40px name boxes; the Dashboard section heading was cut off.
     6  Warden        the toolbar ran off the edge ("← Back to Warden"), the gear sat on its own row.
   Only theme variables are used, so the dark and the light theme both work.
   ===================================================================== */
@media  (max-width: 760px) {

  /* ---------- 2. tick boxes and radio buttons stay tick-box sized ---------- */
  input[type=checkbox], input[type=radio],
  .filters input[type=checkbox], .filters input[type=radio],
  .card form input[type=checkbox], .card form input[type=radio],
  .task-form input[type=checkbox], .task-form input[type=radio] {
    width: 22px; height: 22px; min-height: 0; min-width: 0; padding: 0; flex: none; margin: 0; accent-color: var(--blue);
  }
  label.chk, .filters label.chk, .chk {
    display: flex; align-items: center; gap: 10px; min-height: 40px; width: auto; font-size: 14px; color: var(--text); cursor: pointer;
  }
  label.chk > input[type=checkbox] { flex: none; }

  /* ---------- 3. filter bars: a compact grid instead of a column of full-width controls ---------- */
  .filters {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center;
  }
  .filters > * { min-width: 0; margin: 0; }
  .filters > input[type=search], .filters > input[type=text], .filters > input.search-wide,
  .filters > .chk, .filters > p, .filters > .hint, .filters > .muted, .filters > div:not(.field-inline) { grid-column: 1 / -1; }
  /* the search box first (it is what a phone user reaches for), then the drop-downs pair up two to a row */
  .filters > input[type=search], .filters > input.search-wide { order: -1; }
  .filters select, .filters input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { width: 100%; min-height: 42px; font-size: 15px; }
  .filters .field-inline { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .filters .field-inline select { flex: 1 1 auto; width: auto; min-width: 0; font-weight: 400; color: var(--text); }
  .filters > .btn, .filters > button { width: 100%; min-height: 42px; }
  .filters > input[type=hidden] { display: none; }

  /* ---------- 4a. the Task list: one card per task ---------- */
  #tasks-table { display: block; min-width: 0 !important; width: 100%; border: 0; }
  #tasks-table thead { display: none; }
  #tasks-table tbody { display: block; }
  #tasks-table tr.task-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 10px 10px 4px; border-bottom: 1px solid var(--line);
  }
  #tasks-table tr.task-row > td { display: block; padding: 0; border: 0; background: transparent; width: auto; min-width: 0; }
  #tasks-table tr.task-row > td.tc-cell { flex: 0 0 62px; min-width: 62px; width: 62px; padding: 0 0 0 8px; align-self: flex-start; padding-top: 2px; }
  #tasks-table tr.task-row > td:nth-child(2) { flex: 1 1 calc(100% - 78px); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
  #tasks-table tr.task-row > td:nth-child(3) { margin-left: 70px; flex: 0 0 calc(100% - 82px); max-width: 280px; }   /* the assignee has a line of its own, under the title */
  #tasks-table tr.task-row > td:nth-child(4) { display: none; }                      /* "Created by" is in the expanded view */
  #tasks-table tr.task-row > td:nth-child(n/**/+5) { flex: 0 0 auto; font-size: 12.5px; color: var(--text-soft); }
  #tasks-table tr.task-row > td:nth-child(5) { margin-left: 70px; }                  /* then category, priority and the due date, lined up under the title */
  #tasks-table tr.task-row > td:nth-child(5):empty { display: none; }
  #tasks-table tr.task-row > td:nth-child(5):empty + td:nth-child(6) { margin-left: 70px; }
  #tasks-table tr.task-row > td:nth-child(7):not(:has(.muted)) { margin-left: auto; margin-right: 6px; font-weight: 600; color: var(--text); }
  #tasks-table tr.task-row > td:nth-child(7):has(.muted) { display: none; }          /* no due date: say nothing */
  #tasks-table .assignee-inline { margin: 0; }
  #tasks-table .assignee-inline select { width: 100%; min-height: 34px; font-size: 13px; padding: 4px 28px 4px 10px; }
  #tasks-table tr.task-row.is-sub { padding-left: calc(4px + var(--tv-depth, 1) * 16px); }
  #tasks-table .preview { font-size: 12.5px; margin-top: 2px; }
  #tasks-table tr.group-row, #tasks-table tr.group-row > td { display: block; }
  #tasks-table tr.group-row > td { padding: 10px 12px; }
  #tasks-table tr.task-detail:not([hidden]) { display: block; border-bottom: 1px solid var(--line); background: var(--card-2); }
  #tasks-table tr.task-detail > td:first-child { display: none; }
  #tasks-table tr.task-detail > td { display: block; padding: 6px 14px 14px; }
  #tasks-table tr.task-row[hidden], #tasks-table tr.task-detail[hidden] { display: none; }
  #tasks-table tr:not(.group-row):not(.task-row):not(.task-detail) { display: block; }
  #tasks-table tr:not(.group-row):not(.task-row):not(.task-detail) > td { display: block; }
  .table-scroll:has(> #tasks-table) { overflow: visible; background: none; }

  /* ---------- 4b. other wide tables: label : value cards (assets/js/mobile.js adds .is-stacked and the data-labels) ---------- */
  table.is-stacked { display: block; min-width: 0 !important; width: 100%; border: 0; }
  table.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.is-stacked tbody, table.is-stacked tfoot { display: block; }
  table.is-stacked tr { display: block; margin: 0 0 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); }
  table.is-stacked td, table.is-stacked th { display: block; width: auto; padding: 7px 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  table.is-stacked td[data-label]:not([data-label=""]) { display: grid; grid-template-columns: minmax(78px, 34%) minmax(0, 1fr); gap: 10px; align-items: baseline; }
  table.is-stacked td[data-label]:not([data-label=""])::before {
    content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
  }
  /* the first cell is the card's heading (the name / the role): no label, bigger */
  table.is-stacked td:first-child[data-label]:not([data-label=""]) { display: block; padding: 6px 0 8px; font-size: 15px; font-weight: 700; }
  table.is-stacked td:first-child[data-label]:not([data-label=""])::before { content: none; }
  table.is-stacked td + td { border-top: 1px solid var(--line); }
  table.is-stacked td > .badge, table.is-stacked td > .status-pill, table.is-stacked td > .tag { justify-self: start; }
  table.is-stacked td:empty { display: none; }
  table.is-stacked .num-cell { text-align: left; }
  .table-scroll:has(> table.is-stacked) { overflow: visible; background: none !important; }

  /* ---------- 5. forms ---------- */
  /* a row of fields written as an inline-flex form (CRM "Add contact", …): two to a row, not 50px slivers */
  form[style*="flex"] > :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]), select) {
    flex: 1 1 100% !important; min-width: 0 !important; width: auto; min-height: 42px;
  }
  form[style*="flex"] > .btn, form[style*="flex"] > button { flex: 1 1 auto; min-height: 42px; }
  /* Board columns (Settings): the name gets the whole first line, the switch and Save sit under it */
  .bucket-row { flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .bucket-main { flex: 1 1 calc(100% - 118px); min-width: 0; gap: 8px 12px; }            /* leaves room for the trash button on the first line */
  .bucket-main .bucket-label, .bucket-label { flex: 1 1 100%; width: 100%; min-width: 0; min-height: 42px; }
  .bucket-add { flex-wrap: wrap; gap: 8px 12px; }
  .bucket-add > input[type=text] { flex: 1 1 calc(100% - 30px); min-width: 0; min-height: 42px; }
  /* My Dashboard editor: the section heading gets the whole row, its Rename button sits under it */
  .dash-sec-head { gap: 8px; }
  .dash-sec-rename { flex: 1 1 100%; min-width: 0; }
  .dash-sec-rename > .dash-sec-label, .dash-sec-label { flex: 1 1 0; min-width: 0; }
  .dash-sec-first { flex: 1 1 100%; }
  /* file pickers: the button and the name on one row, Upload under them */
  .att-upload { gap: 8px; }
  .att-upload > input[type=file] { flex: 1 1 100%; min-width: 0; max-width: 100%; }

  /* ---------- 6. Warden ---------- */
  .wp-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wp-nav::-webkit-scrollbar { display: none; }
  .wp-nav a { flex: none; white-space: nowrap; padding: 10px 11px; }
  .wp-nav .wp-nav-gear { position: sticky; right: 0; margin-left: auto; padding: 10px 12px; background: var(--bg); }
  /* the conversation toolbar: "← Back to Warden" is just the arrow; nothing runs off the screen */
  .ox-read-cmd .ox-back-t { display: none; }
  .ox-read-cmd .ox-only-page { padding: 0 12px; }

  /* the e-mail editor's toolbar: one row you swipe along instead of three rows of tiny buttons */
  
  
  

  /* =================================================================
     1. THE NOTEBOOK
     top / bottom: notes-ui.js sets top to the header's real height; appbar.css sets bottom above the bar along the bottom of the page.
     ================================================================= */
  .nb-tabs { padding: 6px 8px; min-height: 46px; gap: 6px; }
  .nb-tabs-toggle, .nb-add { width: 38px; height: 38px; }
  .nb-tab-link { padding: 8px 10px; gap: 6px; }
  .nb-tab .nb-title { max-width: 38vw; }
  .nb-tab .nb-menu summary { padding: 8px 10px; }
  .nb-tabs-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nb-tabs-scroll::-webkit-scrollbar { display: none; }
  /* the "⋯" and "+" pop-ups: as wide as the screen, never off its edge */
  .nb-tab .nb-menu-body { position: fixed; left: 10px; right: 10px; top: auto; width: auto; max-width: none; margin-top: 4px; }
  .nb-new { position: fixed; left: 10px; right: 10px; top: auto; margin-top: 8px; flex-wrap: wrap; }
  .nb-new input[type=text] { flex: 1 1 140px; min-width: 0; min-height: 40px; }
  .nb-tab .nb-menu-body input[type=text] { min-height: 40px; }

  /* pages: a row of chips under the tabs, not a 270px column beside the page */
  .notes-body { flex-direction: column; }
  .notes-pages, .notes-app.pages-collapsed .notes-pages {
    display: flex; flex-direction: row; align-items: center; width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--line); overflow: hidden;
  }
  .pages-toggle, .pages-rail, .notes-app.pages-collapsed .pages-rail { display: none; }
  .np-head { order: 2; flex: none; padding: 6px 8px 6px 2px; border-bottom: 0; }
  .np-title { display: none; }
  .np-add { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }
  .pg-list { display: flex; flex-direction: row; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 8px 4px 8px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pg-list::-webkit-scrollbar { display: none; }
  .pg-item { flex: none; max-width: 68vw; border-radius: 999px; }
  .pg-item.active { background: transparent; }
  .pg-link { padding: 8px 14px; gap: 8px; border: 1px solid var(--line); border-radius: 999px; }
  .pg-item.active .pg-link { padding-left: 14px; border: 1px solid var(--blue); background: rgba(var(--accent-rgb), .16); }
  .pg-title { font-size: 14px; }
  .pg-date { display: none; }

  /* the page: title and "Delete page" on one line, a swipeable toolbar, then the text */
  .notes-editor { min-height: 0; }
  .ed-head { gap: 8px; padding: 8px 10px; flex-wrap: nowrap; }
  .ed-title { min-width: 0; font-size: 19px; }
  .ed-actions { flex: none; gap: 8px; }
  .ed-actions .save-status { font-size: 11px; white-space: nowrap; }
  .ed-actions .btn { min-height: 36px; padding: 6px 10px; font-size: 13px; }
  
  
  
  
  
  
  

  /* the text boxes stack in reading order (notes-canvas.js adds .nc-flow and sets each box's order); drag / resize are for the big screen */
  .note-canvas.nc-flow {
    display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 96px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; cursor: default;
  }
  .note-canvas.nc-flow:empty::before { content: "Nothing here yet. Tap “+ Text box”above (or tap here) to start writing."; display: block; margin: 28px 16px; color: var(--muted); font-size: 15px; text-align: center; line-height: 1.5; }
  .note-canvas.nc-flow .note-box {
    position: relative !important; left: auto !important; top: auto !important; width: auto !important; max-width: 100%; height: auto !important; min-height: 52px;
    flex: none; resize: none !important; overflow: visible;
  }
  .note-canvas.nc-flow .note-box .nb-handle { display: none; }
  .note-canvas.nc-flow .note-box .nb-del { opacity: .75; width: 34px; height: 34px; top: 4px; right: 4px; font-size: 15px; }
  .note-canvas.nc-flow .note-box .nb-body { padding: 14px 44px 14px 14px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; overflow-x: auto; }
  .note-canvas.nc-flow .note-box .nb-body img { max-width: 100%; height: auto; }
  .note-canvas.nc-flow .note-box .nb-body table { display: block; max-width: 100%; overflow-x: auto; }
  .note-canvas.nc-flow .note-box .nb-body pre { white-space: pre; overflow-x: auto; max-width: 100%; }
}

@media  (max-width: 380px) {
  .filters .field-inline { grid-column: 1 / -1; }                                   /* a narrow phone: "View" and "Group" get a whole row, the plain drop-downs still pair up */
  #tasks-table tr.task-row > td:nth-child(3) { max-width: none; }
  .nb-tab .nb-title { max-width: 30vw; }
}

/* Shared touch sizing; use the existing theme palette and app navigation. */
@media (max-width:820px){
#tasks-table .btn,#tasks-table select,.sticky-main .btn,.sticky-sidebar .sticky-nav-item,.nb-tab-link,.nb-tab .nb-menu summary,.pg-link,.np-add,.nb-add,.nb-tabs-toggle{min-height:44px}
#tasks-table select,.sticky-search input,.notes-editor input,.nb-new input{font-size:16px}
.sticky-layout{flex-direction:column;gap:12px}.sticky-sidebar{width:100%;flex:0 0 auto;position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;overscroll-behavior-x:contain}.sticky-sidebar .sticky-nav-item{flex:0 0 auto;white-space:nowrap;border-radius:12px}.sticky-sidebar-divider{display:none}.sticky-main{width:100%;min-width:0}.sticky-grid{columns:1}.sticky-search{max-width:100%}.sticky-search input{width:100%;min-height:44px}
.nb-tabs-scroll,.pg-list{overscroll-behavior-x:contain}.nb-tab .nb-menu-body{max-height:60dvh;overflow:auto}.notes-editor{overscroll-behavior:contain}.notes-editor input,.notes-editor textarea{max-width:100%}
}