/* ======================================================================
   Maritime Passport — Partner Portal DATA layer (MAR-816).

   Collections and metrics — the shapes that present records rather than
   compose a page: the table (with its relative-age cell), the stat tiles,
   the status tabs that filter a collection, the countersign queue rows
   and the send-progress bar.

   Split out of the primitives layer at implement time: the two together
   measured 15.5 KB, past the ~14 KB the refinement plan set as the
   re-measure trigger, and dashboard/invitations/review work — the tickets
   that collided in the first place — lands almost entirely here.

   Linked AFTER portal.primitives.css, which the cascade requires: the
   tile and table rules restate the panel material's background, border
   and radius, and they won that on source order before the split.

   Tokens come from portal.css, linked ahead of this file.

   * a NEW collection/metric family gets its own portal.<family>.css,
     linked from partner/_head.html — it does not grow this file (MAR-816).
   ====================================================================== */

/* ── table ── */
.pp-tw { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--mp-card-border);
  background:var(--bg-surface); }
.pp-t { width:100%; border-collapse:collapse; font-size:13px; }
/* header band on the warm panel step (MAR-781, Figma 0.1 specimen § 3) */
.pp-t th { text-align:left; font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); padding:13px 18px;
  background:var(--mp-panel); border-bottom:1px solid var(--rule); white-space:nowrap; }
.pp-t td { padding:13px 18px; border-bottom:1px solid var(--rule-soft); color:var(--ink-2); }
.pp-t tr:last-child td { border-bottom:none; }
.pp-t .k { color:var(--ink); font-weight:600; }
.pp-t .mono { font-family:var(--mono); font-size:11.5px; color:var(--ink); }
/* relative-age cell — promoted from portal.team.css when the invitations
   screen (MAR-673) became its second user, per the promote-on-second-use
   convention in portal.css */
.pp-age { font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.pp-age--stale { color:var(--status-warning-fg); font-weight:600; }
/* MAR-1194: the age is UNKNOWN (the invitation carries no date), so the cell
   reads as an absence rather than a measurement — italic against the same
   muted ink the base cell already uses, never a pigment of its own. */
.pp-age--unknown { color:var(--ink-3); font-style:italic; }

/* ── stat tiles (born MAR-719's dashboard split; promoted VERBATIM from
      portal.dashboard.css when MAR-695 gave the bulk-invite Review step a
      second screen using them — same precedent as the modal primitive, now
      in portal.overlay.css). ── */
.pp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px; }
.pp-stat { padding:16px 18px; border-radius:var(--r-md); display:flex; flex-direction:column; gap:3px;
  background:var(--bg-surface); border:1px solid var(--mp-card-border); }
.pp-stat__v { font-size:29px; font-weight:700; letter-spacing:-.035em; line-height:1.05;
              font-variant-numeric:tabular-nums; }
.pp-stat__l { font-size:11.5px; color:var(--ink-3); }
.pp-stat--flag { background:color-mix(in srgb, var(--mp-gold) 14%, var(--bg-surface)); }
.pp-stat--flag .pp-stat__v { color:var(--mp-gold-600); }
/* MAR-655: the awaiting-proofing tile is a link into the chase list for
   owner/operator — same tile, no anchor chrome. */
a.pp-stat { text-decoration:none; color:inherit; }

/* ── status tabs with counts (born MAR-674 on the invitations screen;
      promoted VERBATIM from portal.invitations.css when MAR-695 gave the
      bulk-invite Review step a second screen using them — only
      text-decoration:none is new, because the Review tabs render on <a>). ── */
.pp-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.pp-tab { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:var(--r-pill); cursor:pointer; text-decoration:none;
  background:transparent; border:1px solid var(--rule); color:var(--ink-2); }
.pp-tab--on { background:var(--bg-surface); color:var(--ink);
              border-color:color-mix(in srgb, var(--mp-navy) 30%, transparent); }
.pp-tab__c { font-size:11px; font-family:var(--mono); color:var(--ink-3); font-style:normal; }
.pp-tab--on .pp-tab__c { color:var(--mp-navy); }

/* ── countersign queue rows (MAR-789) — the pending-award list on the
      specimen's panel/list shape: each row a panel-material card, the
      facts on the left and the one action on the right. Owns only the
      measure and rhythm the template used to carry as inline styles
      (same rule as the outcome card in portal.primitives.css).
      Deliberately keyless:
      pending is a normal state of a working account, so no status
      tone appears anywhere on the queue. ── */
.pp-queue { display:flex; flex-direction:column; gap:12px; }
.pp-queue__row { padding:18px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pp-queue__t { font-size:1.05rem; }

/* ── async send progress (MAR-696, from the design kit's progress pair):
      the Send step's bar + meta line, and the already-running card. Tokens
      only — the kit's blue ramp maps onto the navy accent, matching how the
      active step rail and the checkbox tile adopted it (portal.forms.css).
      (Dotted class names used to stay out of this comment because
      test_no_class_is_defined_in_two_files read comments too. MAR-1140
      made _classes_defined strip them first, so that is no longer a
      constraint — see the phone-reading-width note at the foot of this
      sheet, which names .pp-tw/.pp-app/.pp-main freely.) ── */
.pp-prog { height:8px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--mp-navy) 14%, transparent); }
.pp-prog__fill { height:100%; border-radius:99px; background:var(--mp-navy); }
/* MAR-1374: the send bar carries two adjacent segments — what was sent, then
   what failed — so its track lays them out in a row. A modifier on the TRACK,
   never an edit to the base fill rule above: that one is shared with the
   dashboard, the plan screen and the already-running card. The failure
   segment takes the status ramp's danger foreground, the same token the stop
   note already uses. Tokens only, and both rules live in this sheet alone.
   (Dotted class names stay out of this comment for the reason given above.) */
.pp-prog--split { display:flex; }
.pp-prog__fill--fail { background:var(--status-danger-fg); }
.pp-progmeta { display:flex; justify-content:space-between; gap:12px; font-size:12px;
  color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* ── toolbar + icon search (MAR-673, promoted from the invitations sheet by
      MAR-1588 when the Vessels list became its second consumer — the rule
      that sheet stated for itself). The search borrows the form kit's metrics
      (flat white fill, hairline, small radius, focus ring) so it reads as one
      control set with a select beside it. Tokens only. ── */
.pp-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pp-search { display:flex; align-items:center; gap:9px; flex:1 1 240px; min-width:0;
  padding:12px 15px; border-radius:var(--r-sm); background:var(--bg-surface);
  border:1px solid var(--mp-card-border); font-size:14px;
  color:var(--ink-3); }
.pp-search:focus-within { border-color:var(--mp-navy); box-shadow:var(--shadow-focus); }
.pp-search svg { width:14px; height:14px; flex:none; }
.pp-search input { flex:1; min-width:0; border:0; background:transparent; outline:none;
  font:inherit; color:var(--ink); }
.pp-search input::placeholder { color:var(--ink-3); }

/* ── phone reading width (MAR-1817, epic MAR-1813 4/5) ─────────────────────
      The sheet's first breakpoint: until now the table chrome had no width
      at which any of it relaxed. 700px is a MAR-1814 scale value, is the
      portal's existing signed-in phone breakpoint, and is where .pp-shell
      collapses to 1fr — i.e. exactly where .pp-main owns the full viewport.
      One value on purpose: a second breakpoint for the cells alone would
      let them drift apart from the page rim that moves with them.

      Measured at 375px, rendered offline: a table had 283px to work in
      (375 − 2×18 page rim − 2×1 frame border − 2×26 .pp-main rim − 2×1
      .pp-tw border), now 307px. Two reductions:

      · 18px → 10px a side is 36px → 20px per column. The VERTICAL 13px
        stays. Row height is 13+13+~18 ≈ 44px, the touch-target floor, so
        trading it for width would fix reading by breaking tapping on the
        one surface where tapping is hardest.
      · th may wrap, so "NEXT EXPIRY" costs its longest word instead of its
        full tracked width. This CLIPS NOTHING: the standing ruling
        (portal.team.css:51-52) is about losing a COLUMN, and a two-line
        label loses no data.

      Together: team.html 702 → 622px, invitations.html 715 → 611px, and
      the Access column stops being clipped at the rim on team.html.

      ⚠️ `overflow-wrap:anywhere` on td was SPECIFIED and is deliberately
      NOT here — the one thing to read before adding it back. It does bound
      the unbounded driver (a cell's min-content is its longest unbreakable
      token, so an email set its column's minimum), and the ticket's
      reasoning about the keyword is right: only `anywhere` participates in
      min-content sizing. Below the crossover that participation is the
      problem, because every column is already AT min-content, so the rule
      drops the text columns to ~1 grapheme while the pill columns — nowrap,
      so unbreakable — keep their full width. Swept at 320-700px: up to the
      crossover the table still SCROLLS (434px) and Person is 80px of which
      28 is the monogram, i.e. names set one character per line — strictly
      worse than shipping nothing. Above it the rule does shrink to fit and
      the scroll goes, Person 95 → 242px. The crossover is where the
      available width — vw − 68 once the rim above applies, by the chain two
      paragraphs up — reaches the 434px the rule's own min-content needs,
      i.e. vw ≈ 502; the sweep brackets it to (500,520]. So three repairs,
      cheapest first, and the ordering is the point: (1) NARROW THE BAND to
      min-width:600px and max-width:700px, both on MAR-1814's scale,
      banking the win where the rule works and leaving phones alone — out
      of scope here only because this ticket's one-value rule forbids a
      second breakpoint condition;
      (2) a blanket min-width floor, rejected on measurement, since it
      inflates Role/Sent/Channel from ~48px past the floor and takes the
      table beyond where it started; (3) per-column selectors, the real fix
      and the expensive one, needing either portal.team.css —
      cited-never-edited by this ticket — or a CSS claim on the `data-cell`
      JS attribute.

      Also deliberately NOT here: any override of .pp-tw's overflow-x or
      .pp-app's overflow. A wide table still scrolls sideways inside its
      own container and still never loses a column — this only shortens the
      scroll. Pinned, including both negatives, by
      tests/unit/test_partner_table_reading_width.py, which asserts the
      RELATIONS — horizontal strictly reduced, vertical unchanged — and not
      the pixel figures above, which are recorded measurements from an
      offline render. Pinning pixels would make the suite a fixture of the
      font stack and the browser version.
      #pp-inv th.tick/td.tick (portal.invitations.css:45) is ID-specificity
      and correctly keeps winning for the checkbox column. ── */
@media (max-width:700px) {
  .pp-t th, .pp-t td { padding:13px 10px; }
  .pp-t th { white-space:normal; }
}