/* ═══════════════════════════════════════════════════════════════════
   FLAT EVERYWHERE
   ═══════════════════════════════════════════════════════════════════
   2026-09-07. Daryan: "make every page look and feel like the homepage."

   twf-flat-list.css wrote the pattern down and let a screen OPT IN with a
   class. That was the right first move - it touched nothing unreviewed.
   This file is the second move: the default flips. Every legacy primitive
   the 53 routes still render (.panel, .panel-header, .kpi-card, .stat-card,
   .elm-header, .twf-feature-card, .twf-card-action ...) takes the homepage's
   geometry without the screen being edited:

     no fill, no border, no shadow, no radius on containers
     a section label where a panel header was (11px, tracked, uppercase)
     15px body, 17px titles, sans everywhere - the display serif is the
       brand's, and it appears once per screen at most (a hub title), not
       on every card heading
     space separates, nothing is drawn between things

   Loaded LAST so it wins every specificity tie. Selectors are kept to one
   class where possible so a screen that later moves to the pattern proper
   (.twf-pt-row, .twf-pt-stat) overrides nothing here - it simply stops
   using these classes.

   What this cannot reach: inline style="" attributes in the render code.
   Those are stripped at the source in the same commit (see the
   "inline card recipe" note in COMMIT_MSG.txt); the census in
   tests/e2e/box-census.spec.js is what says whether it worked.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Containers lose their box ────────────────────────────────── */

html body .panel,
html body .kpi-card,
html body .stat-card,
html body .twf-card,
html body .twf-feature-card,
html body .twf-card-action,
html body .twf-kpi-card:not(.twf-pt-stat),
html body .avail-role-card,
html body .badge-card,
html body .contact-card,
html body .twf-card-info,
html body .card:not(.twf-pt-stat) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  animation: none;
}

/* The specific cards the census found on staff routes: availability's role
   cards, the badge wallet, the market's contact cards, the info callout.
   They keep their layout and lose their box; a selected state stays a
   tint, not a border. */
html body .avail-role-card,
html body .badge-card,
html body .contact-card { padding: 12px 2px; }
html body .avail-role-card.selected,
html body .avail-role-card.active,
html body .badge-card.earned { background: rgba(201, 168, 76, .10); border-radius: 12px; padding: 12px; }

/* A panel is a section now: space above, a label, then its rows. */
html body .panel { margin: 0 0 18px; }

html body .panel-header {
  padding: 18px 2px 6px;
  border-bottom: 0;
  align-items: baseline;
}

html body .panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(12, 18, 32, .45);
}

html body .panel-subtitle {
  font-size: 12px;
  color: var(--pt-faint, rgba(12, 18, 32, .4));
  margin-top: 0;
}

html body .panel-body { padding: 0 2px; }

/* ── 2. Numbers become tiles, not cards ──────────────────────────── */

/* The 3px gold gradient stripe along the top of every KPI card was the
   last drawn edge; with the card gone it read as a rule between blocks. */
html body .kpi-card::before,
html body .stat-card::before,
html body .panel::before { display: none; content: none; }

html body .kpi-card,
html body .stat-card {
  padding: 12px 2px 14px;
}

html body .kpi-label,
html body .stat-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(12, 18, 32, .45);
  margin-bottom: 4px;
}

html body .kpi-value,
html body .stat-card-value {
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pt-navy, #0C1220);
  animation: none;
}

/* ── 3. Titles: sans, on the scale, once ─────────────────────────── */

/* Page headers that were display-serif at 22px. The homepage names the
   screen in the nav strip; a page title is a 20px sans line at most. */
html body .elm-header { margin-bottom: 14px; }

html body .elm-header-title {
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pt-navy, #0C1220);
}

html body .elm-header-sub {
  font-size: 15px;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  margin-top: 2px;
}

/* Section headings inside pages (h2/h3 with the cockpit utility classes). */
/* Headings the pattern already styles end in "-h" (.twf-pf-h, .twf-offer-h,
   .twf-su-h ...) and are left alone; this reaches the legacy ones. */
html body #pagesContainer h2:not([class$="-h"]),
html body #pagesContainer h3:not([class$="-h"]) {
  font-family: inherit;
  letter-spacing: -0.01em;
  color: var(--pt-navy, #0C1220);
}
html body #pagesContainer h2:not([class$="-h"]) { font-size: 20px; font-weight: 700; }
html body #pagesContainer h3:not([class$="-h"]) { font-size: 17px; font-weight: 700; }

/* The hub title (People, Compliance, Command) keeps the display face - the
   one brand moment on the screen - but sits on the scale and loses the
   weight that made it read as a document heading. */
html body .twf-section-header__title {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}
html body .twf-section-header__sub {
  font-size: 15px;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  margin-top: 4px;
}
html body .twf-cockpit-header { margin-bottom: 8px; }

/* ── 4. Body copy on the scale ───────────────────────────────────── */

/* 13px and 12px paragraph text reads as fine print next to the homepage's
   15px rows. Paragraphs and list items inside a page come up to 15. Labels,
   pills and captions keep their own classes and are not touched. */
html body #pagesContainer p,
html body #pagesContainer li {
  font-size: 15px;
  line-height: 1.55;
}

/* ── 5. Tables: rows, not grids ──────────────────────────────────── */

html body #pagesContainer table {
  border-collapse: collapse;
  border: 0;
  background: none;
}
html body #pagesContainer th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(12, 18, 32, .45);
  background: none;
  border: 0;
  padding: 8px 2px;
  text-align: left;
}
html body #pagesContainer td {
  font-size: 15px;
  border: 0;
  background: none;
  padding: 12px 2px;
  vertical-align: middle;
}

/* ── 6. Forms: the input is the only thing drawn ─────────────────── */

/* Inputs keep a hairline - a field with no edge is not a field - but they
   sit on the canvas, 16px so iOS does not zoom, 44px tall. */
html body #pagesContainer input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body #pagesContainer select,
html body #pagesContainer textarea {
  font-family: inherit;
  font-size: 16px;
  min-height: 44px;
  border: 1px solid rgba(12, 18, 32, .12);
  border-radius: 10px;
  background: #fff;
  color: var(--pt-navy, #0C1220);
}
html body #pagesContainer textarea { min-height: 96px; }

html body #pagesContainer label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
}

/* ── 7. Buttons ──────────────────────────────────────────────────── */
/* Deliberately nothing. A blanket min-height/radius on every <button> would
   hit the avatar, the × on a sheet, the pin markers, the Remove link. The
   44px rule for real controls already lives in the cockpit CSS. */

/* ── 8. Loading and empty ────────────────────────────────────────── */

html body .loading-spinner { border-color: rgba(12, 18, 32, .1); border-top-color: var(--pt-gold, #C9A84C); }
html body .page-loading,
html body .empty-state {
  background: none;
  border: 0;
  text-align: left;
  padding: 8px 2px 18px;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  font-size: 15px;
}
html body .empty-state-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--pt-navy, #0C1220);
}