/* 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. */
    /* Capped, and held against the rail rather than centered (7.636.5): centered, a window wider than the cap and the
       rail together split what was left over between both sides, and the screen sat apart from the rail it was
       opened from, 578px apart at 3840. Held left, the spare width falls to the right edge. */
    main { max-width: 2560px; margin: 0; 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>, where it reaches the grid. The panels themselves are hidden below, by their key. */
    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. */
    /* 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; }
    /* A side panel is an `<aside data-side-panel="key">` (7.559.0), and core hides it, so a module's panel needs no
       hide rule of its own. SidePanels marks it `data-side-off` from the person's choice and the screen's offer.
       Not `hidden`: the gating sweep writes that on anything carrying `data-feature`, and the tally's aside does,
       so the two would undo each other. */
    [data-side-panel][data-side-off] { display: none; }
    /* 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;
      box-shadow: var(--shadow-card);   /* stands off the page like the cards and panels beside it */
      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. */

    /* 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; }
      /* A side panel goes below the board, or above it when it says `data-side-narrow="above"` (7.559.0). */
      [data-side-panel] { order: 3; }
      [data-side-panel][data-side-narrow="above"] { order: 1; }
      .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); box-shadow: none;
        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; }
      /* More (7.608.0, decided 2026-10-16): Panels and the actions slot's buttons (Help, Report a bug) leave the bar for
         its menu, so the bar is three rows rather than four. The bell, alerts, Company Links and the gear stay. The
         Panels popover stays where it is; only its button goes. */
      #more-indicator { display: block; }
      /* Scoped under the bar so it outweighs `.ui-chip-btn`'s own `display` whatever the stylesheet order. */
      #panels-btn, .header-actions [data-module-slot="topbar:actions"] > * { display: none; }
      /* 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; }
    }
/* Printing a screen prints the screen (7.632.0): no top bar, rail or side panels around it. A page that moved into
   the shell, an invoice preview, prints as the document it shows; the PDF stays the supported output. */
@media print {
  body > header, #railnav, #rail-backdrop, .side-col, .busy-bar { display: none !important; }
  .shell, main, .layout, .board-col { display: block !important; margin: 0 !important; padding: 0 !important; }
}