/* ═══════════════════════════════════════════════════════════════════════════
   Argos OS — mobile table reflow                            v1  2026-08-21

   PROBLEM. An earlier pass stopped wide tables breaking the page by giving
   their container overflow-x:auto. That fixes the PAGE but not the phone: on
   Argos Service at 390px the tickets table's "Actions" column sits at x=921,
   so every row's buttons are 613px behind a sideways swipe, through five
   nested scroll containers. Containment is not reflow.

   BEHAVIOUR. Below 768px a wide table stops being a table and becomes one card
   per row. The first three fields and the row's actions sit on the card face;
   any remaining fields collapse behind a "N more details" toggle, so a list
   stays scannable instead of becoming ten lines per row.

   SCOPE. Phones only. Tablets and desktop keep real tables — an iPad has the
   room and the density is wanted there (David, 2026-08-20).

   Only tables tagged .mstack are touched, and the tagging happens at runtime in
   mobile-tables.js. Nothing here applies until that script has run, so the
   stylesheet is inert on its own.

   THEMING. Borders and fills are mixed from currentColor rather than being
   hardcoded rgba(255,255,255,…). Every app in the suite now has a light theme,
   and a white-based border is invisible on a light ground.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  table.mstack,
  table.mstack > tbody,
  table.mstack > tbody > tr,
  table.mstack > tbody > tr > td {
    display: block; width: 100%;
    /* Explicit, NOT inherited from the host app. The row carries width:100%
       alongside 14px of padding and a 1px border — under the default
       content-box that is 30px of overflow per card, and not every app in the
       suite sets a global border-box reset. */
    box-sizing: border-box;
  }

  /* The headings are reproduced per-cell via data-label, so the header row is
     removed outright.

     NOT the usual clip()-based visually-hidden pattern: `clip` affects painting
     only, never layout, so an absolutely-positioned thead still contributed its
     full 794px-wide row to the page's scrollable area and expanded the layout
     viewport to 408px on a 390px phone. The header was invisible and still
     breaking the page. display:none is the only version that costs nothing.

     Table semantics are already gone at this breakpoint — display:block on the
     table, rows and cells strips the implicit table roles — so the column
     association is carried by the data-label text rendered in ::before rather
     than by the header row. */
  table.mstack > thead { display: none; }

  table.mstack > tbody > tr {
    margin: 0 0 12px; padding: 4px 14px; border-radius: 12px;
    border: 1px solid rgba(128,128,128,.28);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: rgba(128,128,128,.05);
    background: color-mix(in srgb, currentColor 4%, transparent);
  }

  table.mstack > tbody > tr > td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; width: auto; padding: 9px 0; text-align: right; border: 0;
    border-bottom: 1px solid rgba(128,128,128,.18);
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    /* A cell's value is an ANONYMOUS flex item, which cannot be given
       min-width:0 from CSS — so a long unbroken string (email, hostname, UUID)
       refuses to shrink and pushes the card past the viewport. Allowing a break
       inside the word is the only lever available here. */
    min-width: 0; overflow-wrap: anywhere; word-break: break-word;
  }

  /* white-space is the one host-app declaration that MUST be overridden, and it
     needs !important to do it.

     overflow-wrap:anywhere above is a dead letter under an inherited
     white-space:nowrap — nowrap forbids the break outright, so the value simply
     runs off the card and puts the whole page into horizontal scroll, which is
     the exact defect this file exists to remove. It is not a rare shape: 99
     Service templates and 50 GRC templates set nowrap INLINE on cells, and
     Compass sets it on `td:last-child` in a stylesheet. Inline styles outrank
     any normal-weight rule, hence !important.

     Applied to descendants too, because the nowrap is as often on a span or a
     pill inside the cell as on the cell itself. The cost is that a chip which
     was deliberately kept on one line may wrap to two inside a card — accepted
     deliberately: on a 390px phone width is the scarce resource, and a wrapped
     chip is a cosmetic nit where an overflowing cell is a broken page.
     Confined to the phone breakpoint and to .mstack tables, so desktop,
     tablet, and every untagged table are untouched. */
  table.mstack > tbody > tr > td,
  table.mstack > tbody > tr > td * { white-space: normal !important; }

  table.mstack > tbody > tr > td:last-child { border-bottom: 0; }

  table.mstack > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 38%; min-width: 0; overflow-wrap: anywhere;
    text-align: left; font-weight: 600; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em;
    opacity: .62;
  }
  /* A cell whose column has no heading gets the full width rather than an
     empty 38% gutter. */
  table.mstack > tbody > tr > td[data-label=""]::before { display: none; }
  table.mstack > tbody > tr > td[data-label=""] { justify-content: flex-end; }

  /* Row actions are the thing that was unreachable, so they get their own line
     and are allowed to wrap rather than being pushed off the edge. */
  table.mstack > tbody > tr > td.mstack-actions {
    flex-wrap: wrap; justify-content: flex-start; text-align: left; gap: 8px;
  }
  table.mstack > tbody > tr > td.mstack-actions::before {
    flex-basis: 100%; margin-bottom: 6px;
  }

  /* Fields past the card face, revealed by the toggle. */
  table.mstack > tbody > tr > td.mstack-extra { display: none; }
  table.mstack > tbody > tr.mstack-open > td.mstack-extra { display: flex; }

  .mstack-more {
    display: block; width: 100%; margin: 10px 0 6px; padding: 8px 0;
    font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer;
    color: inherit; opacity: .75; background: transparent;
    border-radius: 8px;
    border: 1px solid rgba(128,128,128,.28);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }
  .mstack-more:hover { opacity: 1; }
  .mstack-more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

  /* Containment is now counter-productive for a reflowed table: it would put a
     scrollbar on a rounded card that no longer overflows. Only unwind it for
     tables that actually reflowed. */
  :is(div, section, main, article, form, td):has(> table.mstack) { overflow-x: visible; }

  /* The tables this script deliberately refuses to reflow — no thead, a grouped
     header, three columns — are still wide, and must not be left setting the
     page width. Most apps already carry an equivalent containment rule from the
     earlier sweep; repeating it here means the kit is self-sufficient and
     behaves the same in an app that does not. */
  :is(div, section, main, article, form, td):has(> table:not(.mstack)) { overflow-x: auto; }
}

/* The toggle is a phone affordance only — it must never appear beside a real
   table, and it is injected into the DOM at every viewport. */
@media (min-width: 768px) { .mstack-more { display: none; } }