/* The period sheet's contents, and the favourites palette.
 *
 * Both are phone shapes, both are summoned rather than resident, and both are here rather than in
 * one of the eight other stylesheets because they are one feature and reading them together is
 * worth more than filing them by which element they happen to touch.
 */

/* THE SHEET SHELL MOVED. Backdrop, grip, head, title, close, body, the glass and the spring are
   one component now - openSheetShell() in mobile-chrome.js, styled as .msheet* in mobile.css -
   because this file's copy was being borrowed by the period sheet while the hub itself had grown
   a third. What is left here is the period sheet's own contents and the rail's favourite grip.

   The grid of tiles went with it: the hub is a list of rows, for the reasons written at the top
   of hub.js. */


/* ------------------------------------------------------- the favourites palette

   The floating drawing palette holds FAVOURITES, not all twenty tools. Twenty icons is a strip
   that scrolls, and a strip that scrolls is one where the tool you want is always just off the
   edge - which is slower than the menu it was meant to replace. Six or seven, chosen by the person
   using them, is a palette you aim at without reading. */

/* `.rail .fav-grip`, not `.fav-grip` - the column's own rules are more specific than a bare
 * class, and this grip once lost that fight and painted blank, which on a phone hid the ONLY way
 * into the tool picker.
 *
 * It sits at the head of the palette as a full-width handle rather than a 16px sliver: it is a
 * touch target, and it had carried two conflicting widths since the day it was written. */
.rail .fav-grip {
  flex: 0 0 auto;
  align-self: center;
  width: 40px;
  height: 22px;
  margin: 2px 0 4px;
  /* The TARGET is 40 wide; the dot field is the 16px content box inside it. Painting the pattern
     across the whole button turns a handle into a sheet of dots. */
  padding: 6px 12px;
  border-radius: var(--r);
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  /* Three columns of dots, the universal "this is a handle and it has a menu".
     The clip comes AFTER the `background` shorthand - a shorthand resets it to border-box, which
     is how a 16px field of dots became a 40px one. */
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: center;
  background-clip: content-box;
  opacity: .5;
}
.fav-grip:hover { opacity: 1; }
/* IT IS ALSO THE HANDLE THE PALETTE IS DRAGGED BY, so the browser must not treat a drag on it as
   a scroll or a page pan - see armPaletteDrag in chrome.js. `grab` says so with a mouse; a thumb
   finds out by trying, which is how every floating palette works. */
.rail .fav-grip { touch-action: none; cursor: grab; }
.rail .fav-grip:active { cursor: grabbing; opacity: 1; }

/* ----------------------------------------------------------- the Period sheet
 *
 * The phone's answer to the desktop Select Period window, which opened here as seventy controls
 * under forty points. One decision at thumb size: a grid of timeframes, the current one lit, and
 * one row at the foot that opens the full window for the rest. See lib/period-sheet.js.
 */
.ps-sheet { max-height: 78vh; }
/* The gutter is the sheet's, and it belongs to the CONTENTS rather than to the shell: a list
   sheet wants its rows to run edge to edge with only their text inset, so .msheet-body carries
   no side padding and each filling declares its own. */
.ps-body { padding: 0 16px calc(8px + env(safe-area-inset-bottom)); }

.ps-group {
  padding: 14px 2px 6px;
}
.ps-group:first-child { padding-top: 4px; }

/* Four across on a 390pt phone gives a 48pt cell with room between them - the size Apple and
   TradingView both build a phone control to, and the size the audit checks for. */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ps-types { grid-template-columns: repeat(3, 1fr); }

.ps-tf {
  font: inherit;
  font-size: var(--t-lg);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  min-height: 48px;
  padding: 0 6px;
  cursor: pointer;
}
.ps-tf:active { background: var(--panel-3); }
.ps-tf.on {
  color: var(--ink);
  background: var(--panel-3);
  border-color: var(--ink-faint);
}

.ps-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: var(--t-lg);
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  min-height: 52px;
  margin-top: 16px;
  padding: 0 4px;
  cursor: pointer;
  text-align: left;
}
.ps-more:active { color: var(--ink); }