/* layout.css — part 4 of 6 of the app stylesheet.
   Holds: main, the two-column grid, the dismissible side panels, the shell and nav
   rail, and every responsive block.

   ORDER MATTERS. These files were cut out of a single app.css at line boundaries with the
   sequence preserved, so concatenating them in the order index.html links them reproduces the
   original byte for byte — which is what makes the cascade provably unchanged. Equal-specificity
   rules still resolve by source order, so reordering the <link> tags can change rendering.

   The names describe what ended up in each part, not a design: the original file interleaved
   the top bar, layout and per-feature rules, and moving rules to where they belong is a separate
   pass that this split exists to make possible. Palette is in theme.css, linked first. */
    main { max-width: 2560px; margin: 0 auto; padding: 24px clamp(24px, 3vw, 56px); }
    /* One layout everywhere except small screens: a side column (Today above the calendar) beside the
       board. Three columns plus the 210px rail squeezed the board until its own panels overflowed
       sideways at laptop widths. */
    .layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
    .layout > * { min-width: 0; }   /* grid items must be allowed to shrink or the row overflows */
    /* Dismissible side panels (6.70.0). Each hides on its own; when the last one goes, the column is
       removed and the grid drops to a single track so the board takes the full width. The state lives on
       <body> so one class can reach both the panel and the grid. Each panel's own rule is in its module. */
    body.no-side .side-col { display: none; }
    body.no-side .layout { grid-template-columns: minmax(0, 1fr); }
    /* The side panels are `.ui-panel` since 7.461.0: the title and the hide × sit in `.ui-panel__head`, in its flow,
       and the × is a 32px ghost icon button. `.panel-hide` is the hook SidePanels finds it by, with no rule. */
    .panels-indicator { position: relative; }
    /* The side-panel region adds no box (7.371.0): a contributed panel is a flex item of the column, spaced by its gap,
       as it was when its markup was written into index.html. */
    [data-module-slot="side:panels"] { display: contents; }
    /* Clears the sticky bar. Was a bare `top: 16px`, which parked this behind the header the moment
       the header stopped scrolling away. */
    .side-col { display: flex; flex-direction: column; gap: 24px; position: sticky;
      top: calc(var(--header-h, 0px) + 16px); align-self: start; }
    .layout.signed-out { grid-template-columns: 1fr; }
    /* App shell: left nav rail + content area */
    .shell { display: flex; align-items: flex-start; }
    .shell > main { flex: 1 1 auto; min-width: 0; }
    .railnav {
      /* Same offset as .side-col, and the max-height loses the bar's height too or the
         nav's own scroll area runs off the bottom of the viewport. */
      position: sticky; top: calc(var(--header-h, 0px) + 16px); align-self: flex-start;
      flex: 0 0 210px; width: 210px; box-sizing: border-box;
      margin: 16px 0 16px 16px; max-height: calc(100vh - var(--header-h, 0px) - 32px); overflow-y: auto;
      background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
      padding: 14px 10px;   /* the column of groups and its gap are `.ui-nav`'s (7.473.0) */
    }
    /* The rail's groups, labels, items, submenus and foot are `.ui-nav` in components.css since 7.473.0. The panel
       around them (`.railnav`: the push column here, the drawer below) is layout's. */
    /* Any table wide enough to exceed its column scrolls INSIDE this, so the page body never scrolls
       sideways. One class rather than a per-screen wrapper: `.bl-wrap` and `.it-wrap` each grew their own
       and the two screens that never got one (Planning, SOC 2) pushed the whole document 212px and 220px
       wide at 390px — measured, not theorised. `min-width: 0` because a grid or flex child defaults to
       `min-width: auto` and then refuses to shrink below its content, which defeats the scroller. */
    .table-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }

    /* Collapsed by default, and "collapsed" means absent from the flex row — that is what makes the
       content resize into the space instead of the rail floating over it. Desktop only: below 1100px the
       rail is a slide-in drawer whose closed state is translateX(-105%), and display:none there would
       remove the element the transition animates. */
    @media (min-width: 1101px) {
      .railnav:not(.open) { display: none; }
    }
    /* Above the sticky header (130) so the drawer still covers the bar and the dim reaches it, which
       is what happened for free while the header had no z-index at all. */
    .rail-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: var(--z-scrim); }
    /* On large screens give the side columns a little more room and air so the center panel
       doesn't dominate a very wide layout. */
    @media (min-width: 1800px) {
      .layout { grid-template-columns: 360px minmax(0, 1fr); gap: 32px; }
      .side-col { gap: 32px; }
    }
    /* Left calendar + right report are sticky grid items: their grid area spans the
       full (tall) row, so align-self:start keeps them content-height at the top while
       position:sticky pins them in view as the board scrolls. */
    /* The side column is the sticky element now (see .side-col); its children just stack. */
    @media (max-width: 1100px) {
      .layout { grid-template-columns: 1fr; }
      /* Flatten the side column so the three panels order independently: the board stays near the top
         on a phone rather than sitting below both side panels. */
      .side-col { display: contents; }
      .board-col { order: 2; }
      .side-col { position: static; }
      .shell { display: block; }
      .railnav {
        position: fixed; top: 0; left: 0; height: 100vh; max-height: none; margin: 0;
        width: 264px; border-radius: 0; border: 0; border-right: 1px solid var(--line);
        z-index: var(--z-drawer); transform: translateX(-105%); transition: transform .2s ease;
      }
      .railnav.open { transform: none; box-shadow: var(--shadow); }
    }
    @media (max-width: 640px) {
      header { padding: 12px 16px; gap: 8px 10px; }
      header h1 { font-size: 17px; line-height: 1.25; }
      /* Drop the action buttons to their own full-width row so the long tenant
         title isn't squeezed into a narrow column beside them. */
      .header-actions { margin-left: 0; flex-basis: 100%; justify-content: flex-start; gap: 8px; flex-wrap: wrap; position: relative; }
      /* The header popovers pin themselves to the viewport on a phone: all three are `.ui-popover` since
         7.260.0, and the component carries that rule, so there is no list here to add one to. */
      main { padding: 16px; }

      /* Card/tree rows: the title and its status pills share one row that won't wrap, so on a
         phone the pills run off the right edge. Give the title the full width and let the pills
         drop onto their own wrapping line beneath it — nothing clips, long titles stay readable. */
      .tnode { flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; }
      .tname { overflow-wrap: anywhere; }
      .tmeta { flex-basis: 100%; flex-wrap: wrap; white-space: normal; padding-left: calc(1em + 4px); }
      /* Reclaim horizontal space eaten by deep nesting. */
      ul.tree { padding-left: 10px; }
      ul.tree ul.tree { margin-left: 4px; }

      /* Same treatment for the flat Active / My Tasks cards. */
      .card .top { flex-direction: column; gap: 8px; }
      .head-right { flex-direction: row; align-items: center; flex-wrap: wrap; white-space: normal; gap: 6px 8px; }
      .pill { margin-left: 0; }
    }