/* MOBILE LAYER — diary
   Every rule below is inside a max-width:700px (or pointer:coarse) query and
   answers a measured defect found reviewing the product on a 390x844 phone.
   Desktop must not be able to see this file. See web/styles/mobile.css for the
   specificity contract. */

@media (max-width: 700px) {

  /* ------------------------------------------------------------- topbar [14]
     The bar's four items do not fit 390px, and flex resolved that by squeezing
     the two icon buttons: `.topbar__back` and `.iconbtn` are both 36x36 in
     parts.css, and both measured 19.4x36 here — the box had shrunk to exactly
     the width of the 19px glyph inside it, so the whole target was ink with no
     margin at all, 700px² against the 1936px² a finger asks for. They are the
     only two controls on this screen a reader has to hit while holding the
     phone one-handed. Neither is allowed to shrink; the hit area is grown past
     the ink with ::after so the bar's rhythm does not change. */
  html .diary .topbar__back,
  html .diary .topbar .iconbtn { flex: none; position: relative; }
  html .diary .topbar__back::after,
  html .diary .topbar .iconbtn::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* [15] The bar reserved 98.7px for the watch control at every scroll
     position, because the reveal is `visibility: hidden` and a hidden flex item
     still takes its width. That left the title and subtitle 198.5px of a 390px
     screen: the h1 lost 170px of "Papaya x Grape Gasoline F1 — 24 plant test",
     and the subtitle — the line that carries day, phase and strain — lost 33px
     of a string that needs 231.5. The control now costs its width only while it
     is on screen, which is the only time it is worth anything, and it charges
     for it over the same 220ms it fades in over, so the title re-flows as part
     of the reveal instead of jumping. The 5px pad/-5px margin pair is clip room
     for the button's focus ring; it is width-neutral. */
  html .diary .dtop__cta {
    max-width: 0; overflow: hidden;
    /* The row is over-subscribed at 390px, so anything that can shrink does:
       left to flex defaults this box gave up 36px of the 109 its button needs
       and clipped the difference off its right edge. The title is the only one
       on this row that is allowed to lose width, because it is the only one
       that degrades instead of breaking. */
    flex: none;
    padding: 5px; margin: -5px;
    transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out),
                visibility var(--d-3), max-width var(--d-3) var(--ease-out);
  }
  html .diary .dtop__cta.is-shown { max-width: 200px; }
  /* The bar's copy of the watch control is `size: 'sm'` — 34px, because a 44px
     pill in a 56px bar is the bar. The ink stays 34 and the target grows into
     the 5px of clip room either side of it. */
  html .diary .dtop__cta .btn::after { content: ''; position: absolute; inset: -5px; }
  /* The sprout in front of "Watching" costs 24px of a row that is 33px short
     (16 of icon, 8 of gap) and says nothing the word does not. It was already
     paying nothing back: measured before flex was told to leave this box alone,
     the icon rendered 0.0px wide — squeezed out of existence — and the 8px gap
     was still there, so the bar was spending the space on nothing at all. The
     hero's copy of the same button, which has room, keeps it. */
  html .diary .dtop__cta .btn__icon { display: none; }
  /* `.topbar__spacer` is an empty flex item that exists to push the icons right
     with `margin-left: auto`. It cannot do that without also taking a gap on
     each side; letting the names column grow instead does the same job and
     hands the title back 8px. */
  html .diary .topbar__spacer { display: none; }
  html .diary .dtop__names { flex: 1; }

  /* --------------------------------------------------------------- hero [16]
     `Button({ size: 'md' })` is 40px tall — 4px under the floor, and this is
     the button the whole screen is asking you to press. The extra 4px goes on
     the button itself rather than a pseudo-element: it is a 127px-wide pill
     with nothing beside it, so there is nothing for a grown ink box to crowd. */
  html .diary .dhero__cta .btn { min-height: 44px; }

  /* -------------------------------------------------------- chart legend [17]
     Seven toggles, and the only way to change what the plot draws — measured
     119.7x26, eighteen under the 44px floor, in three rows 6px apart. They are
     also the chart's readout: every chip's value follows the scrub. Height
     comes from padding so the type, the swatch and the wrap points are all
     untouched; 14px of it either side of a 16px line box is 44. */
  html .dchart .dseries { min-height: 44px; padding-block: 14px; }

  /* ------------------------------------------------------------ compare [18]
     Every control in this module was desktop-sized. The two week pickers are
     native selects at 109.1x28 sharing one row with the Close button: 28px tall
     against a 44px floor, and 71px of text box for an option that needs 101, so
     both of them printed "Week 0 · Ge" and cut the phase off the end — the half
     of the label that says what you are looking at. One picker per row is
     324px wide, which is 3x what the longest option needs, and the labels above
     them already say first and second, so the "vs" between them is repeating
     itself. The button underneath is the module's only affordance while it is
     closed; at 87.8x34 it sat in the bottom-left corner of a 356x116 card. */
  html .dcmp__controls { display: grid; gap: var(--s-5); width: 100%; }
  html .dcmp__picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  html .dcmp__vs { display: none; }
  html .dcmp__select { min-height: 44px; width: 100%; padding-block: 0; font-size: var(--t-14); }
  html .dcmp__controls .btn { width: 100%; min-height: 44px; }

  /* [19] Stacked, the two weeks sat 250px of delta rows apart — the one thing
     the module exists to do, two photographs of the same plant side by side,
     was the one thing it could not do on a phone. 356px carries two 170px
     panels: small, but a comparison you can actually make in one look, which no
     amount of scrolling between them adds up to. The numbers go underneath,
     full width, where they were already legible in one column. */
  html .dcmp__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-5);
  }
  /* The deltas are written between the two weeks in the DOM, which is the right
     reading order for a screen reader and the wrong one for a grid: as a
     full-width row in source order they pushed the second week onto row three
     again. Order moves the paint, not the markup. */
  html .dcmp__body > .dcmp__side:first-child { order: 1; }
  html .dcmp__body > .dcmp__side:last-child  { order: 2; }
  html .dcmp__body > .dcmp__deltas { order: 3; grid-column: 1 / -1; }
  /* Side by side, the heads have to be the same height or the photos are not:
     "Week 11 · Day 78 FLUSH" fits one 170px line and "Week 0 · Day 1
     GERMINATION" does not, so one photo started 38px below the other and the
     pair no longer read as a pair. Two rows, always, on both sides. */
  html .dcmp__sidehead { display: grid; justify-items: start; gap: 0; }

  /* ------------------------------------------------------------ density [20]
     Two columns gave every readout a 165.5px cell to print a value that needs
     77 at its longest ("0.28 mS/cm") — 54% of the cell was empty, and the 12
     readings on an entry card cost 437px of vertical scroll, times twelve weeks.
     Three columns is 110px per cell against that same 77, and 291px for the
     card. The 375px floor is not decoration: at 360px the cell drops to 100 and
     EC's 77 is 1px wider than what is left after the padding, and a clipped
     number is worse than a tall card.
     `.dnow__grid` keeps two columns: it always draws exactly 8 readings — three
     columns leave it 3+3+2 with a bitten-off corner, where two leave four whole
     rows — and it is the one block on this screen meant to be read at a glance
     rather than scanned like a table. */
  @media (min-width: 375px) {
    html .dentry__readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* [21] The grid draws its 1px rules by letting its own background through the
     gaps, so any cell the data does not fill is a painted --line-soft tile:
     every harvested run ends on a cure week that logs 5 of the 12 readings, and
     the last card of 10 of the 30 seeded runs finished with a 165.5x72 grey
     block sitting in the grid like a broken cell. The rules move onto the cells
     — each one draws its own right and bottom edge — so an unfilled slot is
     simply the card behind it, with the rule above and to the left of it still
     closed. The cost is that the last column and the last row draw over the
     container's own 1px ring, so the right and bottom edges are 4.5% white
     twice: 1px, at the boundary of a card that already carries a bevel, and the
     alternative is a selector that has to know how many cells fill the last row.
     Desktop has the same unfilled-slot hole (4 columns, 5 readings, three
     blanks); it is not fixed here, because this file is not allowed to move that
     layout. */
  html .dnow__grid, html .dentry__readout { gap: 0; background: transparent; }
  html .dnow__grid > .readout, html .dentry__readout > .readout {
    /* Inset, not outset: a cell's outward shadow lands inside the next cell's
       box and its opaque background paints straight over it. */
    box-shadow: inset -1px 0 0 var(--line-soft), inset 0 -1px 0 var(--line-soft);
  }

  /* [22] `contain-intrinsic-height: auto 420px` is a desktop estimate. A week
     card on a phone measures 803-915px once [20] has three columns of readings
     in it, so twelve of them lied to the layout by ~5,000px: the document was
     10,581px tall before the entries rendered and 14,519px in the middle of a
     scroll, and every jump from the rail was aimed at a page that was still
     changing length. 860px is the measured median; `auto` still replaces it
     with the real number as soon as a card has been drawn once, and diary.js
     corrects whatever is left after the scroll stops — same [22]. */
  html .diary .dentry { contain-intrinsic-height: auto 860px; }
}