/* Contract: contracts/web/rules.md
 * narrow screens, and the generation of rules written after them
 *
 * Part of what was style.css — 1700 lines in one file. The parts load in a fixed
 * order and MUST stay in it: the cascade is decided by source order and
 * specificity exactly as it was, because this is a split and not a rewrite.
 *
 * There are deliberately no @layer rules. Layering is the tidier shape and it
 * would have changed behaviour — a later layer beats an earlier one regardless
 * of specificity, and this stylesheet has at least one pair, `body.app > .bar`
 * written above `.bar`, where the MORE specific rule comes first and wins on
 * specificity. Putting those two in different layers silently reverses them.
 * Splitting the file is worth doing on its own; changing the cascade is a
 * separate decision that wants somebody looking at the screen.
 */
/* ---------- narrow screens ----------
   Below this the inspector cannot be a column without squeezing the grid to
   nothing, so it goes back to being an overlay — with a close button, which is
   why that button exists at all. */
@media (max-width: 1180px) {
  :root { --sidebar-w: 200px; }
}

@media (max-width: 900px) {
  /* One column, with the folder strip on its own row above a results column
     that still does the scrolling. */
  .workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  /* The sidebar becomes a strip above the grid rather than disappearing:
     folders are the one structure this person made himself, so they do not get
     hidden behind a hamburger. */
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 8px; padding: 10px 14px; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .folderlist { flex-direction: row; gap: 6px; }
  .frow { width: auto; white-space: nowrap; }
  .newfolder { width: auto; white-space: nowrap; }
  .sidenote { display: none; }
  /* 100dvh, not 100vh: on a phone 100vh is the height the window has with the
     browser toolbar hidden, so the panel runs past the bottom of what is on
     screen and takes the Save button with it. */
  .inspector {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
    height: 100dvh; z-index: 41; transform: translateX(100%);
    transition: transform .18s ease;
  }
  body.inspecting .inspector { transform: none; }
  body.inspecting .inspector-close {
    display: block; position: fixed; top: 10px; right: 10px; z-index: 42;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--panel); color: var(--ink);
    border: 1px solid var(--line); cursor: pointer; font-size: 14px;
  }
  .inspector-empty { display: none; }
}

/* ============================================================
   Phones: looking and choosing are two different modes
   ============================================================

   On a wide screen a plain click selects, because a selection of one costs
   nothing to look at. On a phone it cost everything: the selection bar had to
   appear the moment anything was selected, so tapping a picture to see it put
   six bulk-action buttons on top of the picture — including a Download button
   directly over the panel's own Download button.

   So the phone gets a mode. Browsing, a tap means look. Choosing is entered
   deliberately (the Select button, or press and hold), and only then does
   anything appear that acts on many files at once. See choose.js.
   ============================================================ */

/* Controls that exist only on phones. Hidden by default so a wide screen never
   has to opt out of each one individually. */
.narrowonly { display: none; }
.choosebar { display: none; }

/* Same condition as the compact chrome above, plus any touch screen: what makes
   a tap ambiguous is the finger, not the width. A coarse pointer on a wide
   screen still has no cmd key to hold. */
@media (max-width: 720px), (max-height: 520px), (pointer: coarse) {
  .narrowonly { display: inline-flex; }

  /* ---------- the header while choosing ----------
     The compact chrome is already down to two lines (see compact.js); choosing
     replaces both, because a count and a way out are the only things that
     matter while it is on. */
  body.choosing > .bar,
  body.choosing > .filters { display: none; }
  body.choosing .sidebar, body.choosing .folderbar { display: none; }
  /* The camera button lives in the corner the action bar takes over, and
     adding to the archive is not what anybody is doing mid-selection. */
  body.choosing .addhere { display: none; }
  body.choosing .choosebar {
    display: flex; align-items: center; gap: 10px; flex: none;
    height: var(--bar-h); padding: 0 12px;
    background: var(--panel); border-bottom: 1px solid var(--line);
  }
  #choosecount { flex: 1; font-size: 16px; font-variant-numeric: tabular-nums; }
  .choosebar .ghost, .choosebar .btn { height: 40px; padding: 0 16px; font-size: 15px; }

  /* ---------- the tick ----------
     A finger needs 44px and a checkbox was 22px of it, so the box was never the
     target here — the whole card was, and the box was only ever saying what had
     already happened. So it stops being a control: no input, no hit area of its
     own, nothing but a mark the card draws on itself out of .picked, which is
     what the selection actually believes and is the one thing that survives a
     re-render of the grid.

     Shown in choosing mode and only there, but then on every card, so it is
     never a thing you have to already know is there. On a wide screen it never
     appears at all: pointing at a card is enough. */
  body.choosing .card::before {
    content: ''; position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid #fff; background: rgba(20,20,26,.4);
    box-shadow: 0 1px 5px rgba(0,0,0,.45);
  }
  body.choosing .card.picked::before {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
  }
  body.choosing .card { transition: transform .12s ease; }
  body.choosing .card.picked { transform: scale(.95); }
  /* A card is about 165px wide here, and the badge on the left plus the type
     and size chips on the right cannot all fit across the top of it — they
     overlapped each other into "CANONICAAGE". The size is one line down in the
     sheet, so it is the one that goes. */
  .chip-size { display: none; }
  /* And while choosing, the tick owns that corner outright. */
  body.choosing .card .chips { display: none; }

  /* The verbs at the top of the bulk sheet, sized for a finger. On a laptop
     they are 12.5px ghosts beside a form; here they are the whole of what the
     old action bar offered, and a 28px target is not one. */
  .bulkverbs .ghost { height: 44px; padding: 0 14px; font-size: 14px; }

  /* The action bar was here — full width, stacked, half its buttons behind a
     More drawer, and hidden again the moment the sheet opened over it. All of
     it is gone. On a phone the route is now Edit in the choose bar, which opens
     the same sheet with the verbs at the top of it; see web/inspector-bulk.js.
     The choose bar's own Edit is sized with the rest of that bar above. */
  /* Nothing floats over the last row any more, so nothing is reserved for it. */

  /* ---------- the sheet ----------
     The overlay inspector becomes a sheet you can throw away: a grabber to pull
     it down by, and the system back gesture closes it. See sheet.js. */
  .inspector { border-radius: 16px 16px 0 0; padding-top: 26px; }
  body.inspecting .grabber {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 42;
    padding: 9px 0 8px; touch-action: none; cursor: grab;
    background: var(--panel); border-radius: 16px 16px 0 0;
  }
  .grabber::after {
    content: ""; display: block; width: 38px; height: 5px; margin: 0 auto;
    border-radius: 3px; background: var(--line);
  }
  body.inspecting .inspector-close {
    width: 40px; height: 40px; font-size: 16px; top: 8px; right: 8px;
  }
}

/* Wide screens never show the sheet furniture. */
.grabber { display: none; }