/**
 * css/shell/tools.css
 * The Tools and AI screens on a phone, and the feature-switch rows.
 *
 * The panels themselves are styled by the stylesheets that came with them
 * (studio.css, ai.css, study.css and the rest). This file only does what those
 * cannot know about: give the two screens the shell's own padding and reading
 * width, and make the controls inside them big enough to hit with a thumb.
 *
 * Every rule is scoped to body.ts-shell, which js/shell/shell.js only adds at
 * <=768px, so a tablet in landscape and the desktop app are untouched.
 *
 * Dependencies: css/shell/tokens.css, css/studio.css (loaded before this).
 */

/* ============================================================
   THE TWO SCREENS
   ============================================================ */

/* The panel hosts were laid out for a 320px desktop sidebar. On a phone they
   own the whole screen, so let them use it. */
body.ts-shell #tsScreenTools > #tsStudioPanel,
body.ts-shell #tsScreenAi > #tsAIPanel {
  max-width: 34rem;
  margin: 0 auto;
}

/* A tile is the main way into every feature here, so it gets a full row and a
   comfortable target rather than the compact sidebar treatment. */
body.ts-shell .ts-studio-tile {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1rem;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  text-align: left;
}
body.ts-shell .ts-studio-tile:active { background: var(--ts-surface-2, var(--ts-surface)); }

body.ts-shell .ts-studio-tile-label { font-size: 0.9375rem; }
body.ts-shell .ts-studio-tile-desc { font-size: 0.75rem; }

/* The "< Tools" / "< AI tools" header a feature's own view opens behind. It
   has to clear the app bar, which is fixed over the top of every screen. */
body.ts-shell .ts-studio-view-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.75rem;
  background: var(--ts-bg);
}
body.ts-shell .ts-studio-view-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
body.ts-shell .ts-studio-back {
  flex: none;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ts-text);
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: 999px;
}

/* Panels were written for a mouse. 44px is the smallest comfortable target. */
body.ts-shell #tsScreenTools button,
body.ts-shell #tsScreenAi button,
body.ts-shell #tsScreenTools select,
body.ts-shell #tsScreenAi select {
  min-height: 2.75rem;
}
body.ts-shell #tsScreenTools input[type="checkbox"],
body.ts-shell #tsScreenAi input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

/* Wide tables and code in a panel must scroll inside it, not push the screen
   sideways — the shell has no horizontal scroll anywhere else. */
body.ts-shell #tsScreenTools table,
body.ts-shell #tsScreenAi table { display: block; overflow-x: auto; max-width: 100%; }
body.ts-shell #tsScreenTools pre,
body.ts-shell #tsScreenAi pre { overflow-x: auto; }

/* ============================================================
   FEATURE SWITCHES (js/shell/screen-tools.js)
   ============================================================ */
body.ts-shell .ts-flag-row {
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  flex-wrap: nowrap;
}
body.ts-shell .ts-flag-row + .ts-flag-row { border-top: 1px solid var(--ts-border-soft); }

body.ts-shell .ts-flag-row input[type="checkbox"] { margin-top: 0.125rem; }

.ts-flag-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.ts-flag-label { font-size: 0.875rem; }
.ts-flag-desc {
  font-size: 0.75rem;
  opacity: 0.72;
  line-height: 1.4;
}

/* A switch that cannot be turned on still reads clearly — the reason under it
   is the point of the row, so it must not be dimmed into illegibility. */
body.ts-shell .ts-flag-row:has(input:disabled) .ts-flag-label { opacity: 0.6; }

/* ============================================================
   DIALOGS AND OVERLAYS ON A PHONE

   The panels' own dialogs were laid out for a desktop window, where the whole
   viewport is usable. On a phone the top of the screen is under the status bar
   and the bottom is under the gesture bar, so a dialog sized to 100vh puts its
   close button and its primary action in exactly the two places a thumb cannot
   reach. These rules give that space back; nothing else about the dialogs
   changes.
   ============================================================ */
body.ts-shell .ts-study-dialog {
  padding: calc(env(safe-area-inset-top, 0px) + 0.5rem)
           0.5rem
           calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
  align-items: flex-end;   /* a sheet from the bottom, as the platform does it */
}
body.ts-shell .ts-study-dialog-box,
body.ts-shell .ts-study-dialog-box.is-wide {
  width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem);
}
/* The close button must stay put however far the body is scrolled. */
body.ts-shell .ts-study-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: inherit;
}
body.ts-shell .ts-study-dialog-close { min-width: 2.75rem; min-height: 2.75rem; }

/* Speed reading takes the whole screen deliberately; it still has to keep its
   own controls clear of the status and gesture bars. */
body.ts-shell .ts-rsvp {
  padding: calc(env(safe-area-inset-top, 0px) + 1rem)
           1rem
           calc(env(safe-area-inset-bottom, 0px) + 1rem);
}

/* The floating focus timer was positioned for a desktop window: at z-index 900
   every shell screen (7900) and the tab bar (8000) painted over it, and
   `bottom: 18px` put it behind the tab bar even on the reader. Lift it over the
   bar and above it. */
body.ts-shell .ts-study-mini {
  z-index: 8300;
  bottom: calc(var(--ts-bottom-reserve) + 0.5rem);
  right: 0.75rem;
}

/* ============================================================
   THE KEBAB MENU'S TOOL COUNT
   ============================================================ */
.ts-sheet-count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  color: var(--ts-bg);
  background: var(--ts-icon);
  border-radius: 999px;
}