/* ---- Wide tables on a phone (UX-303) --------------------------------------

   At 390 x 844 the assessment page scrolled sideways — scrollWidth 729
   against clientWidth 390 — driven by the six-column `.assessment-table`
   needing 713px. Status was clipped mid-chip; Owner, Target and the `Open`
   button, which *is* the way into a row, were off-screen entirely. The case
   list did the same at 720px, and the case workspace at 920px. A duty
   officer checking a case from a phone is an ordinary evening for a
   one-person security team.

   Two rules, in this order:

   1. `.table-scroll` keeps any overflow inside the table's own box, so the
      page never moves sideways whatever a cell ends up holding. This is the
      floor, not the fix: it is what stops the header, the summary bar and
      the navigation sliding away with the table.

   2. Below 48rem the columns a phone can spare are dropped and the rest are
      tightened, until what remains — id, requirement, status, and the way in
      — fits the screen. Nothing is lost: Owner and Target are in the detail
      panel, one tap away.

   Where they land, measured at 390px with the pilot data: every assessment
   table 358–361px against a 358px container, the case list 370, the release
   panel's six-column update table 620 inside its own 324px box. Only the
   last of those is really scrolled, and it is a detail table full of
   distribution URLs; the pages themselves no longer move.

   Why not a card layout below the breakpoint: cards need `display: block` on
   the table elements, which strips table semantics from the accessibility
   tree in Chrome and Firefox, and `role="row"` / `role="cell"` scaffolding
   to put them back — more markup to keep in step, for values the panel
   already shows. Why not scrolling alone: `Open` is the last column, so it
   would stay off-screen behind a horizontal gesture nested inside a
   vertically-scrolling page.

   48rem is measured, not chosen for looks: the body is 72rem wide with 1rem
   of padding a side, so a 768px viewport leaves 736px of content — just
   under what the six columns ask for. */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* A scroll container still reports its *contents'* width when something
     asks it for an intrinsic size, and `.case-panel` is a grid item, whose
     automatic minimum size is exactly that measurement — so on the case
     workspace the table's width climbed back out through the wrapper and
     moved the page anyway (920px at a 390px viewport). `width: 0` makes the
     wrapper contribute nothing to that measurement; `min-width: 100%` then
     gives it all the room its parent actually has. */
  width: 0;
  min-width: 100%;
}

@media (max-width: 48rem) {
  .assessment-table,
  .report-table {
    font-size: 0.8rem;
  }

  .assessment-table th,
  .assessment-table td,
  .report-table th,
  .report-table td {
    padding: 0.4rem 0.25rem;
  }

  /* The secondary columns. Each is marked on both the `th` and the `td`
     rather than by `:nth-child`, so inserting a column cannot silently
     start hiding a different one. */
  .col-owner,
  .col-target,
  .col-severity,
  .col-awaiting,
  .col-available {
    display: none;
  }

  /* A requirement id is the row's name; broken across four lines
     ("APP-" / "1-" / "RQ-" / "01") it stops being readable as one. This is
     the room for the common ids on a single line — the two long `-RE` ones
     take a second line, breaking at their own hyphens. */
  .assessment-table .col-id {
    min-width: 5.5rem;
  }

  .assessment-table .req-id {
    white-space: normal;
  }

  /* `base.css` keeps a chip on one line, which is right on a desk and is
     most of what made the table 713px wide: a chip reading "Recommendation
     (should)" cannot be narrower than that word. Wrapping between chips and
     shrinking the label is what keeps the row's button on screen; breaking
     the word itself ("Recommenda / tion") was the alternative, and it reads
     worse. */
  .assessment-table .chip,
  .report-table .chip {
    white-space: normal;
  }

  .assessment-table .chip {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    /* A chip is a label, and it inherits the statement cell's licence below
       to break anywhere unless it takes it back: "organizatio / n-wide". */
    overflow-wrap: normal;
  }

  /* The button *is* the way into the row, so it has to be on screen; at this
     width its own padding was competing with the text beside it. */
  .assessment-table .btn {
    padding: 0.3rem 0.45rem;
  }

  /* Chips and buttons are short labels, and CJK breaks between any two
     characters: in zh-Hant the status chip came out as 尚 / 未 / 開 / 始, one
     glyph a line. `keep-all` holds a run together; English still wraps at
     its spaces, which is all it was ever doing here. */
  .assessment-table .chip,
  .assessment-table .btn {
    word-break: keep-all;
  }

  /* Requirement statements quote identifiers — "prEN 40000-1-2:2025," — that
     no line-breaking rule will split, and one of them was holding the column
     59px wider than the screen. Prose still breaks between words; only a
     token with nowhere else to break is cut. */
  .assessment-table .statement-cell {
    overflow-wrap: anywhere;
  }

  /* One header — "Acknowledgement due" — was holding the case list 43px
     wider than the screen on its own, with a word no rule will break. A
     header is a label, not data: it may break wherever it must so the
     column is sized by the values under it instead. Scoped to that column,
     because a header broken mid-word is a last resort, not a default. */
  .assessment-table th.col-ack {
    overflow-wrap: anywhere;
  }
}