/* ===========================================================================
   The platform on a phone
   ===========================================================================

   Every rule below sits behind a media query. On a desktop this file does
   nothing at all, which is the point of keeping it apart from `theme.css`:
   delete its <link> and `mobile-nav.js`, and every screen size is exactly
   what it was.

   What was wrong, measured at 390 x 844 before any of this:

   * The 248px rail stood beside the work permanently -- two thirds of the
     screen -- and the estimate got a column about 130px wide. "AVS Rudraksh"
     broke over three lines; a tile showed half its figure.
   * The bar's five headline figures do not shrink, so they pushed every
     project screen 250-285px wider than the phone, and the whole page
     scrolled sideways under your thumb.
   * Controls were drawn for a mouse: 28px rows, 24px buttons, and 12.5px
     inputs that iOS zooms the page into the moment one is tapped.

   Two widths, because two things change at different points. Below 900px
   the rail and the work cannot share the screen, so the rail becomes a
   drawer. Below 560px it is a phone in the hand, and the bar and the type
   are fitted to one. The touch rules are keyed on the pointer, not the
   width: a tablet in landscape is wide enough for the rail and still has no
   mouse. */

/* The drawer's controls exist at every width and are shown only where the
   rail is a drawer. */
.nav-toggle, .nav-drawer-head, .nav-scrim { display: none; }


/* ===========================================================================
   Below 900px: the rail becomes a drawer
   =========================================================================== */
@media (max-width: 900px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr);
    grid-template-areas: "top" "main";
    /* The visible height, not the layout height: on a phone `100vh` is the
       height with the browser's toolbar *hidden*, so the foot of every
       screen sat behind it. */
    height: 100vh; height: 100dvh;
  }
  /* The Projects list and the sign-in page are laid out by a two-class rule
     that outranks the one above. Its `1fr` is `minmax(auto, 1fr)`, which
     grows to the min-content of the widest thing inside -- the projects
     table's, 635px -- and that is what pushed the list 245px past the phone.
     `minmax(0, 1fr)` holds the column to the screen and lets the table
     scroll inside its own box, as it was written to. */
  #app.no-project { grid-template-columns: minmax(0, 1fr); }
  #main { padding: 14px 14px 72px; min-width: 0; }

  /* ---- The bar ---------------------------------------------------------- */
  #topbar { padding: 0 6px 0 4px; gap: 2px; min-width: 0; }
  .nav-toggle {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
    background: none; color: var(--ink); cursor: pointer;
  }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle:hover { background: var(--row-hover); }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  #app.no-project .nav-toggle { display: none; }

  /* The brand block stops being the rail's width, because there is no rail
     beside it to line up with. It takes what the tools leave, and a long
     name is cut rather than pushing the tools off the edge. */
  #app:not(.no-project) .brand {
    width: auto; flex: 1 1 auto; min-width: 0; padding-right: 6px; gap: 8px;
  }
  .brand::before { display: none; }
  /* In a project the name is what the bar is for; the mark comes back on
     the Projects list and the sign-in page, where there is no name. */
  #app:not(.no-project) .brand .logo,
  #app:not(.no-project) .brand .wordmark { display: none; }
  .project-name { font-size: 14px; font-weight: 640; }
  .project-sub { font-size: 11px; }

  /* The figures are the Dashboard's tiles, one tap away in the drawer. In a
     bar 390px wide they were the thing pushing the page sideways. */
  #headline { display: none !important; }
  /* Who else is here, and which build: useful at a desk, and nothing a phone
     in a site office needs in a bar that has room for four things. The build
     is also in the profile menu's reach -- Projects is one tap away. */
  #presence, #buildStamp { display: none !important; }

  .bar-tools { gap: 2px; padding-left: 0; margin-left: auto; flex: none; }
  .bar-tools::before { display: none; }
  .bar-tools > #paletteBtn, .bar-tools > #whoami { margin-left: 0; }

  /* Search stays -- on a phone it is the quickest way to any screen by
     name -- as the magnifier alone, at a size a thumb can find. */
  .palette-btn { width: 44px; height: 44px; padding: 0; justify-content: center;
                 border-color: transparent; background: none; }
  .palette-word, .palette-btn kbd { display: none; }
  .palette-btn svg { width: 19px; height: 19px; }

  /* You are the circle; the name beside it is on the menu it opens. */
  .profile-text, .profile-bend { display: none; }

  /* "Saved just now" is a desk's reassurance and a phone's lost width.
     While a write is in flight, and when one fails, it still shows. */
  .save-state:not(.saving):not(.failed) { display: none; }

  /* ---- The drawer ------------------------------------------------------- */
  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
    width: min(86vw, 320px); box-sizing: border-box;
    padding: 0 12px 24px; gap: 2px;
    border-right: 1px solid var(--line);
    box-shadow: 0 0 40px rgba(15, 23, 42, .22);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-104%);
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
    visibility: hidden;
    /* Hidden after it has slid out, not before -- so the slide is seen. */
    transition-property: transform, visibility;
    transition-duration: 240ms, 0s;
    transition-delay: 0s, 240ms;
  }
  #app.nav-open #sidebar {
    transform: none; visibility: visible;
    transition-delay: 0s, 0s;
  }
  /* The rail's links at a size a thumb can hit without its neighbour. */
  #sidebar a { padding: 11px 12px; font-size: 14.5px; border-radius: 8px; }
  #sidebar .nav-sec-head { padding: 10px 10px 8px 6px; font-size: 11px; margin-top: 12px; }
  #sidebar .legend { display: none; }

  .nav-drawer-head {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 1;
    margin: 0 -12px 6px; padding: 8px 6px 8px 16px; min-height: 56px;
    box-sizing: border-box;
    background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .nav-drawer-name {
    flex: 1; min-width: 0; font-size: 15px; font-weight: 650;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-drawer-close {
    flex: none; display: inline-grid; place-items: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
    background: none; color: var(--ink-2); cursor: pointer;
  }
  .nav-drawer-close svg { width: 20px; height: 20px; }
  .nav-drawer-close:hover { background: var(--row-hover); color: var(--ink); }
  .nav-drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(8, 15, 35, .42);
    opacity: 0; transition: opacity 200ms ease;
  }
  .nav-scrim[hidden] { display: none; }
  #app.nav-open .nav-scrim { opacity: 1; }
  /* The page behind an open drawer does not scroll under the finger. */
  #app.nav-open #main { overflow: hidden; }

  /* ---- The screen ------------------------------------------------------- */
  .screen-head h1 { font-size: 20px; }
  .screen-head p { font-size: 14px; line-height: 1.5; }
  .card { min-width: 0; }
  /* A table that is wider than the phone scrolls inside its own card, as a
     grid always has; the page itself never scrolls sideways. */
  .card, .card-body { max-width: 100%; }
  /* A form control never outgrows the card it sits in. Internal finishes
     asks for a 340px search box inline, and at 360px that was 6px wider
     than its card and slid the page. */
  input, select, textarea { max-width: 100%; }
  /* A box that asks for a minimum width asks for room to type in. On a
     phone the room there is the card's, so it takes all of it instead. */
  input.text-input[style*="min-width"] { min-width: 0 !important; flex: 1 1 100%; width: 100%; }
  .grid-wrap { max-height: 70vh; max-height: 70dvh; }

  /* The derivation panel rises from the foot as a sheet, rather than
     standing 400px wide over a screen 390px wide. */
  #panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 82vh; max-height: 82dvh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .2);
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #panel[hidden] { transform: translateY(24px); }
  @starting-style {
    #panel:not([hidden]) { transform: translateY(40px); }
  }
  #panel .panel-head { padding: 14px 8px 12px 16px; border-radius: 16px 16px 0 0; }
  /* The handle says it is a sheet; the button is the way out. */
  #panel .panel-head::before {
    content: ""; position: absolute; top: 6px; left: 50%;
    width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
    background: var(--line-strong);
  }
  #panelClose {
    width: 44px; height: 44px; font-size: 26px; padding: 0;
    display: inline-grid; place-items: center;
  }
  #panelBody { font-size: 14px; padding: 14px 16px 20px; }

  /* A menu or a toast is never wider than the screen it is on. */
  .row-menu-body, .profile-menu { max-width: calc(100vw - 16px); }
  #toast { max-width: calc(100vw - 24px); box-sizing: border-box; }

  /* A layout of named columns stops being columns. */
  .finding { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .finding > :nth-child(n+3) { grid-column: 1 / -1; }
}


/* ===========================================================================
   Below 560px: a phone in the hand
   =========================================================================== */
@media (max-width: 560px) {
  #main { padding: 12px 12px 72px; }
  /* Work Status's foundation share wraps under the floor buttons here, and
     a control pushed to the right edge of its own line reads as stray. */
  .found-share { margin-left: 0; }
  /* Four tiers side by side is four columns of a word each on a phone. */
  .tier-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-sample:nth-child(3) { border-left: 0; }
  .tier-sample:nth-child(n + 3) { border-top: 1px solid var(--line); }
  /* The figures a take-off is worked out from are tapped, not hovered: a
     finger-sized target, and still one line each. */
  .fact-chip { min-height: 40px; padding: 8px 12px; }
  /* The sub-line under the project name is the first thing to go when the
     bar is tight, and the name keeps the height. */
  #app:not(.no-project) .project-sub { display: none; }
  .project-name { font-size: 15px; }
  /* "\2715 10" rather than "\2715 10 blocking": the mark and the colour still
     say which kind, the full phrase is still read out and still the chip's
     title, and the name beside it gets the width back. */
  #healthChip .chip-word:not(.keep) { display: none; }
  #healthChip .chip { padding-left: 8px; padding-right: 8px; }

  /* Two tiles to a row -- a figure with room to be read -- rather than as
     many as fit at 158px, which on a phone is two with a sliver. */
  .tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 12px; min-width: 0; }
  .tile .v { font-size: 19px; overflow-wrap: anywhere; }

  .toolbar { gap: 8px; }
  .toolbar > .muted { flex-basis: 100%; }
  /* The actions under a grid wrap as buttons, not as words: "Copy table"
     broke onto two lines inside its own button rather than moving down. */
  .grid-actions { flex-wrap: wrap; row-gap: 8px; }
  .grid-actions > * { white-space: nowrap; }
  .card > h2 { flex-wrap: wrap; row-gap: 4px; }

  /* The first column of a grid stands still while the rest scroll under it,
     which is what makes a wide table readable on a phone at all -- as long
     as it leaves room for the figures. It did not. A column marked to take
     the table's slack (`grow`, written as `width:100%`) took the whole
     screen, so the Rate Library showed item names and not one rate; and a
     fixed 190px Floor column left Work Status about 170px for twenty-six
     trades. Here the slack is given back, and the first column is held to
     about two fifths of the screen, with a long name wrapping onto a second
     line rather than being cut: "22nd Floor (Refuge)" is a different floor
     from "22nd Floor", and an ellipsis would hide the difference. */
  table.grid th[style*="width:100%"] { width: auto !important; }
  table.grid th.sticky-1, table.grid td.sticky-1 {
    min-width: 0 !important; width: 40vw; max-width: 44vw;
    white-space: normal; overflow-wrap: break-word; line-height: 1.25;
  }
}


/* ===========================================================================
   A finger, not a mouse
   ===========================================================================
   Keyed on the pointer, so a touch screen of any width gets them and a
   narrow desktop window with a mouse does not. */
@media (pointer: coarse) {
  /* A control is at least 40px tall -- the platform's buttons were 28 -- and
     text inputs are 16px, which is the size below which iOS zooms the whole
     page in when one is tapped and leaves it zoomed. */
  .btn, button.btn { min-height: 40px; padding-left: 14px; padding-right: 14px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  table.grid input, table.grid select { font-size: 16px; }

  /* A grid row a fingertip can land on. The matrix gets longer; every cell
     in it becomes one you can actually choose. */
  table.grid th, table.grid td { height: 40px; }
  table.grid td { font-size: 13.5px; }

  /* Ctrl+C, Ctrl+D, Alt+H: a strip of keys a phone does not have. */
  .grid-help { display: none; }

  /* The row's delete, at a size a fingertip can take on purpose. It still
     asks before it deletes, and the toast after it offers Undo. Hover-only
     on a desk; nothing would ever reveal it here, so it is shown outright. */
  .row-del {
    opacity: 1; width: 36px; height: 36px; font-size: 20px; line-height: 1;
    display: inline-grid; place-items: center; border-radius: 8px;
  }
  /* A tick box, and the rows of links that open a record: the box drawn at
     20px, the link given the row's height to be hit in rather than the
     height of its own letters. */
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  a.open-row { display: inline-block; padding: 10px 0; }
  .proj-card .proj-name { display: inline-block; padding: 6px 0; }
  .row-menu-body button, .profile-item { min-height: 44px; }

  /* Controls in the bar are 44px square; the health chip keeps its drawn
     size and is hit in a box around it, so the bar does not grow a lozenge
     44px tall. */
  .theme-btn { width: 44px; height: 44px; }
  #healthChip .chip { position: relative; }
  #healthChip .chip::after { content: ""; position: absolute; inset: -9px -4px; }

  /* The toast's one action, on the toast. */
  .toast-act { min-height: 36px; }

  /* A finding's "Go to it" is the reason the list exists. */
  .finding .chip.act { min-height: 36px; padding-left: 12px; padding-right: 12px;
                       display: inline-flex; align-items: center; }
}

/* A picker in a card heading is 22px tall at the desktop's type size, under
   the 24px a finger needs. Where the pointer is a finger, it is given the
   room. */
@media (pointer: coarse) {
  .ht-pick { min-height: 32px; }
}