/* PartMash app — the layer on top of the design system.
 *
 * ⭐ brand.css is loaded FIRST and owns the identity: colours, type, buttons, inputs, cards.
 * This file adds only what an application needs and a marketing site does not — the signed-in
 * header, tables, and the report's status pills. Everything here is built from --pm-* tokens,
 * so a change to the brand reaches the app without a second edit.
 *
 * ⛔ Nothing here redefines a brand colour. If the app seems to need a colour the system does
 * not have, the system is the place to add it.
 */

/* ---- type, scoped to the application --------------------------------------
 *
 * ⛔ brand.css is NOT edited. Its scale is right for what it was built for: h1 up to 4.75rem
 * and h2 up to 3.25rem is hero sizing, and a landing page needs exactly that.
 *
 * ⭐ An application page is a different job. A business name is a LABEL, not a headline, and at
 * hero size a dashboard reads as a poster - you cannot see the next step and the status in one
 * glance, which is the only thing the page is for.
 *
 * So the app overrides SIZE only, inside its own shell. Weight, colour and family stay the
 * system's, so this still looks unmistakably like PartMash.
 */

.app-main h1 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); margin-bottom: 0.5em; }
.app-main h2 { font-size: clamp(1.125rem, 1.8vw, 1.3125rem); margin: 1.75em 0 0.5em; }
.app-main h3 { font-size: 1.0625rem; margin: 1.25em 0 0.4em; }
.app-main .pm-card h2 { margin-top: 0; }
.app-main p { margin: 0 0 1em; }

/* ---- app shell ---------------------------------------------------------- */

body.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--pm-background);
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
}
body.wide .app-main { max-width: var(--pm-content-width); }

/* ---- header ------------------------------------------------------------- */

.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-border);
}

.app-brand { display: inline-flex; align-items: center; }
.app-brand img {
  /* The logo is a wide lockup; height drives it and width follows. */
  height: 2rem;
  width: auto;
  display: block;
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-left: auto;
  font-size: 0.9375rem;
}
.app-nav a { color: var(--pm-blue-700); text-decoration: none; font-weight: 500; }
.app-nav a:hover { text-decoration: underline; }
.app-who { color: var(--pm-muted); }
.app-inline { display: inline; margin: 0; }

.app-linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--pm-blue-700);
  text-decoration: underline;
  cursor: pointer;
}

/* ---- footer ------------------------------------------------------------- */

.app-footer {
  border-top: 1px solid var(--pm-border);
  background: var(--pm-surface);
  padding: 1rem;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  font-size: 0.875rem;
}
.app-footer a { color: var(--pm-muted); }

/* ---- forms: small additions the system does not cover ------------------- */

.app-hint {
  display: block;
  font-weight: 400;
  color: var(--pm-muted);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.app-radio {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 600;
  color: var(--pm-ink);
}
.app-radio input { margin-top: 0.35rem; }

/* ---- status: MEANING, not decoration ------------------------------------
 *
 * These three are the reconciliation report's whole vocabulary:
 *   danger  🔴 below a TRUSTED floor. A real violation.
 *   warning 🟡 below an UNTRUSTED floor. Verify the floor, not the price.
 *   muted   ⚪ never compared. Not "fine" — unknown.
 */

.app-pill {
  display: inline-block;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid currentColor;
  vertical-align: middle;
}
.app-pill--danger { color: var(--pm-danger); background: var(--pm-danger-bg); }
.app-pill--warning { color: var(--pm-warning); background: var(--pm-warning-bg); }
.app-pill--muted { color: var(--pm-muted); background: var(--pm-background-strong); }
.app-pill--success { color: var(--pm-success); background: var(--pm-success-bg); }

/* ---- tables (the reconciliation report) --------------------------------- */

.app-scroll { overflow-x: auto; }

.app-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  background: var(--pm-surface);
}
.app-table th,
.app-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--pm-border);
}
.app-table th {
  font-weight: 600;
  color: var(--pm-muted);
  white-space: nowrap;
}
/* Money lines up or it cannot be scanned. */
.app-table td.num,
.app-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- error banner ------------------------------------------------------- */

.app-error {
  border-left: 3px solid var(--pm-danger);
  background: var(--pm-danger-bg);
  color: var(--pm-ink);
  padding: 0.7rem 1rem;
  border-radius: 0 var(--pm-radius-sm) var(--pm-radius-sm) 0;
  margin-bottom: 1.25rem;
}

.app-alt { color: var(--pm-muted); font-size: 0.9375rem; }

/* ---- accessibility ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--pm-blue-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}