/* ==========================================================================
   NOVA — mobile / responsive layer
   --------------------------------------------------------------------------
   Loaded AFTER app.css so equal-specificity rules win on source order.
   Selectors mirror app.css (#view-home / #view-canvas prefixes) so they
   match the specificity of what they override.

   Three things happen here:
     1. Shell     — icon-rail sidebar, wrapping toolbars, single-column grids
     2. List rows — the .proj-row / .lib-row tables reflow into cards
     3. Matrix    — the step x dimension table becomes one card per step,
                    showing a single step at a time (see mobile.js)
   ========================================================================== */


/* ==========================================================================
   1. SHELL
   ========================================================================== */

@media (max-width: 900px){
  /* app.css sets these to 4 and 3 columns further down the file than its own
     1100px media query, so the later rules win and the grids never collapse.
     Restated here to actually take effect. */
  #view-home .lib-grid,
  #view-home .proj-grid,
  #view-home .tpl-grid{ grid-template-columns: repeat(2, 1fr); }

  /* The All-templates page grid is a separate class with no responsive rule
     of its own — it is hard-coded to three columns, giving 86px cards whose
     titles are clipped by .lib-page-card's overflow:hidden. */
  #route-library .lib-page-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px){
  #view-home .lib-grid,
  #view-home .proj-grid,
  #view-home .tpl-grid,
  #route-library .lib-page-grid{ grid-template-columns: 1fr; gap: 12px; }

  /* ---- sidebar becomes a hamburger-driven drawer ----------------------
     app.css narrows it to 60px, which clips every label mid-word. Instead
     take it out of the grid entirely and slide it in over the content, so
     it keeps its full labels and the content gets the whole width. */
  #view-home .layout{ grid-template-columns: 1fr; }

  /* The app has its own fixed tab bar (36px tall, z-index 1400). Sitting
     the drawer at top:0 put the NOVA wordmark — which occupies exactly
     14px to 36px — behind it, and app.css's height:calc(100vh - 36px)
     beat the bottom:0, leaving a 36px gap at the foot. Start below the
     tab bar instead: the logo shows above Search as on desktop, and the
     drawer fills the rest of the height exactly. */
  #view-home .sidebar{
    position: fixed;
    top: var(--m-tabbar, 0px);
    left: 0;
    width: min(82vw, 280px);
    height: calc(100vh - var(--m-tabbar, 0px));
    height: calc(100dvh - var(--m-tabbar, 0px));
    z-index: 70;
    transform: translateX(-100%);
    transition: transform .22s ease;
    border-right: 1px solid var(--line);
    background: var(--surface, #fff);
    overflow-y: auto;
    will-change: transform;
  }
  body.has-tabbar{ --m-tabbar: 36px; }
  #view-home .sidebar.is-open{ transform: translateX(0); }

  /* Dim the content behind the open drawer; tapping it closes. */
  .m-nav-backdrop{
    position: fixed;
    inset: var(--m-tabbar, 0px) 0 0 0;
    z-index: 69;
    background: rgba(0,0,0,.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .m-nav-backdrop.is-open{ opacity: 1; pointer-events: auto; }

  /* Mobile app bar injected by mobile.js: hamburger + wordmark. */
  .m-navbar{
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 12px;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--line);
  }
  .m-navbtn{
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .m-navbar-logo{
    height: 20px;
    width: auto;
    display: block;
  }

  /* .topbar is a GRID (1fr auto 1fr), not a flex row. That layout is right —
     brand and layers left, view toggle centred, actions right — it just could
     not fit. Keep the three columns and slim the contents instead:
       - the journey name is already in the tab strip above
       - Export becomes icon-only
       - account and share move into a kebab (see mobile.js)  */
  #view-canvas .topbar{
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 8px 10px;
  }
  #view-canvas .topbar-left{
    min-width: 0;
    gap: 8px;
  }
  #view-canvas .topbar{ grid-template-columns: auto minmax(0, 1fr) auto; }
  #view-canvas .topbar .view-toggle{
    justify-self: center;
    max-width: 100%;
  }
  /* Brand + layers + toggle + export + kebab needs ~396px of a 375px row.
     The toggle's two icons are the cheapest ~44px to drop — "Graph" and
     "Matrix" are unambiguous as words. */
  #view-canvas .topbar .view-toggle [data-view] svg{ display: none; }
  #view-canvas .topbar .view-toggle [data-view]{ padding-left: 14px; padding-right: 14px; }
  #view-canvas .topbar-right{
    justify-self: end;
    gap: 6px;
  }

  /* The project name lives in the tab strip directly above this row. */
  #view-canvas .topbar-left .journey-name{ display: none; }

  /* Export label is a bare text node next to the icon, so it cannot be
     hidden by a child selector — zero the button's font size and let the
     SVG keep its own width/height attributes. */
  #view-canvas .export-btn{
    font-size: 0;
    gap: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ---- kebab overflow, populated by mobile.js ---- */
  .m-topmenu{ position: relative; flex: 0 0 auto; }
  .m-topmenu-btn{
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .m-topmenu-panel[hidden]{ display: none; }
  .m-topmenu-panel{
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.12));
  }

  /* ---- row 2: journey tabs + meta ---- */
  #view-canvas .journey-tabs-strip{
    display: flex;
    align-items: center;
    overflow: visible;
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #view-canvas .strip-meta{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  /* Only the regulatory status stays on the strip; "Set workflow loop" and
     "Set user type" move inside the kebab (mobile.js), the rest is hidden. */
  #view-canvas .strip-meta .m-meta-hide{ display: none; }

  /* Stacked variant of the kebab panel for those two controls. Each keeps
     its own dropdown, which is absolutely positioned inside it — so the
     panel must not clip, and must sit below the strip's stacking context. */
  .m-topmenu-panel--stack{
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 190px;
    overflow: visible;
  }
  .m-topmenu-panel--stack > *{ width: 100%; }
  .m-topmenu-panel--stack .user-type-meta-btn{
    width: 100%;
    justify-content: space-between;
  }

  /* Each control's own dropdown is absolutely positioned and left-aligned,
     which pushed it past the right edge (left 186 + width 220 = 406 in a
     375px viewport). Anchor it to the right and cap it to the screen.
     Needs the #view-canvas prefix to outrank app.css's own
     `#view-canvas .user-type-dropdown { left: 0 }`. */
  #view-canvas .m-topmenu-panel--stack .user-type-dropdown{
    left: auto;
    right: 0;
    width: min(78vw, 240px);
    max-width: calc(100vw - 24px);
    max-height: 60vh;
    overflow-y: auto;
  }

  /* The tabs are legitimately scrollable, but the scroller must be the
     inner wrapper, not the whole strip: an overflow ancestor clips
     absolutely-positioned descendants, which silently hid the kebab panel
     that lives further along the same strip. */
  .journey-tabs-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .journey-tabs-wrap::-webkit-scrollbar{ display: none; }
  .journey-tabs-strip{ overflow: visible; }

  /* .projects-head is a nowrap flex row of the count plus .projects-tools.
     The count gets crushed to 53px, breaking "3 projects" across two
     lines. Give it its own row. Every listing route — dashboard, all
     projects, archive, library — uses these classes. */
  #view-home .projects-head{
    flex-wrap: wrap;
    row-gap: 8px;
    align-items: center;
  }
  #view-home .projects-count{
    flex: 1 1 100%;
    white-space: nowrap;
  }

  /* .projects-tools is a non-wrapping flex row — search, sort pill and the
     grid/list toggle — measuring 413px against a 365px container, so Sort
     and the toggle spill off-screen on the library and project listings. */
  #view-home .projects-tools{
    flex-wrap: wrap;
    row-gap: 8px;
    width: 100%;
  }
  #view-home .projects-tools > *{ min-width: 0; }
  #view-home .projects-tools .search-input-row{ flex: 1 1 100%; }

  /* .page-head is a flex row of title + primary button; at this width the
     title is squeezed to three words per line. Stack them. */
  #view-home .page-head{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #view-home .page-head .btn-primary{ align-self: flex-start; }

  /* Give tap targets a sane minimum without restyling every control. */
  .topbar button,
  .seg-btn,
  [data-view]{ min-height: 38px; }

  /* ...except the Graph/Matrix tabs, which keep their desktop size: the
     38px minimum took the pill from 35px to 46px. */
  #view-canvas .topbar .view-toggle,
  #view-canvas .topbar .view-toggle > *{ min-height: 0; }
}


/* ==========================================================================
   2. LIST ROWS -> CARDS
   --------------------------------------------------------------------------
   app.css hides .proj-row-mode / -steps / -time below 720px, which removes
   real information. Reflow them into a stacked card instead so the data
   survives on a phone.
   ========================================================================== */

@media (max-width: 700px){
  #view-home .proj-row,
  #route-library .lib-row{
    display: grid;
    grid-template-columns: 28px 1fr 32px;
    grid-template-areas:
      "icon name  menu"
      ".    meta  meta";
    align-items: center;
    gap: 4px 10px;
    padding: 12px;
  }

  #view-home .proj-row > *:first-child,
  #route-library .lib-row > *:first-child{ grid-area: icon; }

  #view-home .proj-row-name,
  #route-library .lib-row-name{
    grid-area: name;
    min-width: 0;
    font-weight: 600;
  }

  /* Restore what the old breakpoint hid, as a single meta line. */
  #view-home .proj-row-mode,
  #view-home .proj-row-steps,
  #view-home .proj-row-time,
  #route-library .lib-row-mode,
  #route-library .lib-row-meta{
    display: inline-flex;
    align-items: center;
    grid-area: meta;
    font-size: 11px;
    color: var(--ink-3);
  }

  /* Lay the meta items out in a row with separators. */
  #view-home .proj-row-steps::before,
  #view-home .proj-row-time::before,
  #route-library .lib-row-meta::before{
    content: "·";
    margin: 0 6px;
    color: var(--line-2);
  }

  #view-home .proj-row > *:last-child,
  #route-library .lib-row > *:last-child{ grid-area: menu; }
}


/* ==========================================================================
   3. MATRIX -> CARD (one step at a time)
   --------------------------------------------------------------------------
   The matrix is `200px repeat(--cols, 240px) 60px`, so on a 375px screen you
   see one partial column with sentences cut off. Below 700px each row stacks
   its label above its cell, and mobile.js hides every cell that does not
   belong to the selected step (class .m-hide, inert above this breakpoint).

   Cells stay contenteditable and dropdowns keep working — nothing is
   re-rendered, only hidden.
   ========================================================================== */

@media (max-width: 700px){
  /* The scrolling containers use classic scrollbars, which occupy 10px of
     layout width. That made .build-shell 365px inside a 375px viewport, so
     a symmetric `padding: 0 12px` rendered as 12px left / 22px right.
     Touch scrolling needs no gutter, so reclaim it and the column centres. */
  #view-canvas .canvas,
  #view-home .main{ scrollbar-width: none; }
  #view-canvas .canvas::-webkit-scrollbar,
  #view-home .main::-webkit-scrollbar{ width: 0; height: 0; }

  /* Top padding separates the first card from the journey strip above,
     which the shell previously butted straight up against. */
  #view-canvas .build-shell{ padding: 12px 12px 96px; }

  #view-canvas .matrix{
    display: block;
    min-width: 0;
    width: 100%;
    border-radius: 12px;
    overflow: visible;
  }

  /* Header: only the active step's column remains, as the card title. */
  #view-canvas .matrix-header{
    display: block;
    position: static;
    border-bottom: 0;
    background: transparent;
  }
  #view-canvas .matrix-header > .col-corner,
  #view-canvas .matrix-header > .col-add{ display: none; }

  #view-canvas .matrix-header > .col-step{
    border-right: 0;
    border-radius: 12px 12px 0 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: 14px;
  }

  /* Layer bands become section headers. */
  #view-canvas .layer-band{
    display: block;
    padding: 10px 14px;
  }
  #view-canvas .layer-band > div:not(:first-child){ display: none; }

  /* Each dimension row becomes a labelled block. */
  #view-canvas .matrix-row{
    display: block;
    border-bottom: 1px solid var(--line);
  }
  #view-canvas .matrix-row > div:not(.row-label):not(.cell){ display: none; }

  #view-canvas .matrix-row .row-label{
    border-right: 0;
    padding: 12px 14px 4px;
    background: transparent;
  }
  #view-canvas .matrix-row .row-label > span:first-child{
    font-size: 12px;
    font-weight: 600;
  }
  /* The help sentence doubles the height of every row; the label carries
     enough meaning on its own at this width. */
  #view-canvas .matrix-row .row-help{ display: none; }

  #view-canvas .matrix-row .cell{
    border-right: 0;
    padding: 0 14px 12px;
    min-height: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  /* Set by mobile.js on every cell not belonging to the selected step.
     The header rule needs three classes to outrank app.css's
     `#view-canvas .matrix-header > div{display:flex}` (0,1,1,1). */
  #view-canvas .m-hide{ display: none; }
  #view-canvas .matrix-header > .col-step.m-hide{ display: none; }
  #view-canvas .matrix-row > .cell.m-hide{ display: none; }

  /* ---- step-detail drawer (opened from a card in either view) ----
     app.css fixes it at width:480px with no responsive rule, so on a
     375px screen it opened at left:-105 and took its whole label column
     off-screen — GOAL, PAIN POINTS, the title and the close button.
     It also sat at top:0, i.e. beneath the app's z-1400 tab bar. */
  #view-canvas .drawer{
    width: 100%;
    max-width: 100%;
    top: var(--m-tabbar, 0px);
  }
  #view-canvas .drawer-overlay{
    inset: var(--m-tabbar, 0px) 0 0 0;
  }
  /* The closed state translates by a fixed 480px; keep it relative to the
     drawer's own width now that the width is the viewport. */
  #view-canvas .drawer:not(.open){ transform: translateX(100%); }

  /* ---- step switcher, injected by mobile.js ---- */
  .m-stepbar{
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
  }
  .m-stepbar-btn{
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }
  .m-stepbar-btn:disabled{ opacity: .35; cursor: default; }
  .m-stepbar-label{
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 12px;
    color: var(--ink-3);
  }
  .m-stepbar-label strong{
    display: block;
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The mobile-only chrome never appears above the breakpoint. */
@media (min-width: 701px){
  .m-stepbar,
  .m-navbar,
  .m-nav-backdrop{ display: none; }
}


/* ==========================================================================
   4. LANDING PAGE — template cards
   --------------------------------------------------------------------------
   .template-preview-bars is a fixed-width flex row: four 52px bars plus
   arrows measures 262px. The preview's content box is 281px at 375px wide
   but only 226px at 320px, so the last step overflows by 18px and
   .template-card's overflow:hidden clips it. Let the row wrap and the bars
   size to their text.
   ========================================================================== */

@media (max-width: 600px){
  .template-preview{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    height: auto;
  }
  .template-preview-bars{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .template-bar{
    width: auto;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
}