/* ── Readability overrides (2026-07-11, Willie directives) ──────────────────
   Loaded LAST so these rules win over styles.css and every dist/*.css bundle.

   1. NO horizontal scroll for text content, anywhere, on any screen size.
      Scrollable-x boxes cut content off on mobile (live example: past
      workouts on the Fitness page were unreadable mid-workout). Text wraps;
      containers grow vertically.
   2. Mobile typography at real-app sizes (ChatGPT/Gemini class): 16px base,
      no zooming required. */

/* ── 1. Text wraps everywhere, all viewports ── */
pre,
code,
kbd,
samp,
.summary-box,
textarea,
td,
th,
li,
p,
blockquote,
dd,
dt,
figcaption {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

td, th, li, p, blockquote, dd, dt, figcaption {
  white-space: normal !important;
}

/* Boxes that used to scroll sideways now grow down instead. Vertical
   scrolling stays — long logs should still be scrollable up/down. */
pre,
.summary-box,
[class*='log'],
[class*='output'],
[class*='diff'],
[class*='history'],
[class*='detail'],
[class*='content'] {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Tables: wrap inside cells rather than forcing the page wide. */
table {
  width: 100%;
  table-layout: fixed;
}

/* Approval actions (Command Center card + anywhere reused) */
.cc-approval-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.cc-approval-actions {
  display: flex;
  gap: 8px;
}
/* ── 2. Mobile typography ── */
@media (max-width: 760px) {
  html,
  body {
    font-size: 16px !important;
  }
  p,
  li,
  td,
  th,
  label,
  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }
  .subtle,
  .status,
  small,
  [class*='meta'],
  [class*='hint'] {
    font-size: 14px !important;
  }
  pre,
  code,
  .summary-box {
    font-size: 14px !important;
    line-height: 1.5;
  }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  /* Comfortable tap targets. */
  button,
  .nav-item {
    min-height: 42px;
  }
}