/* Petromix · Proposals by Status dashboard card
   Scoped under .ps. Responsive to its OWN width (container query), not the viewport.

   The supplied proposals-card.css, with these changes for the app:
   · no Google Fonts @import — Barlow, Barlow Condensed and IBM Plex Mono are
     self-hosted by advisor.css, so the card looks the same offline;
   · --ps-pending is --ps-awaiting (the row is "Awaiting decision"), same amber;
   · a baseline so the app's own button / heading rules cannot leak in;
   · .ps-note, the line that reports what is not in the figures;
   · a LIGHT theme (the design is dark-only): white card, dark text, status
     and accent TEXT in darker inks (--ps-*-ink) so it stays readable. */

.ps {
  --ps-acc: #FFC20E;
  --ps-ink: #121417;
  --ps-card: #17191C;
  --ps-raised: #1E2125;
  --ps-track: #24282D;
  --ps-line: rgba(255,255,255,.07);
  --ps-text: #FFFFFF;
  --ps-text-2: #B9C0C7;
  --ps-muted: #8F98A2;
  --ps-approved: #2FB36B;
  --ps-awaiting: #F5A524;
  --ps-rejected: #F04438;
  --ps-approved-ink: var(--ps-approved); --ps-awaiting-ink: var(--ps-awaiting);
  --ps-rejected-ink: var(--ps-rejected); --ps-acc-ink: var(--ps-acc);
  --ps-font: "Barlow", system-ui, sans-serif;
  --ps-cond: "Barlow Condensed", "Barlow", sans-serif;
  --ps-mono: "IBM Plex Mono", ui-monospace, monospace;

  container-type: inline-size;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--ps-card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  color: var(--ps-text);
  font-family: var(--ps-font);
  -webkit-font-smoothing: antialiased;
  /* baseline: the design was drawn on browser defaults */
  font-size: 16px; line-height: normal; letter-spacing: normal; text-align: left;
}
.ps *, .ps *::before, .ps *::after { box-sizing: border-box; }
:where(.ps) :where(button) { font-family: inherit; line-height: normal; letter-spacing: normal; }
.ps h2, .ps p { margin: 0; }
.ps [hidden] { display: none !important; }
.ps-num { font-variant-numeric: tabular-nums; }
.ps-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-muted); }
.ps-mono { font-family: var(--ps-mono); }
.ps :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* ---------- Header ---------- */
.ps-head { padding: 22px 24px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ps-line); }
.ps-title { font-family: inherit; font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: normal; color: var(--ps-text); }
.ps-sub { margin-top: 4px; font-family: var(--ps-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--ps-muted); }
.ps-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #0F1113; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; flex: none; }
.ps-period { height: 40px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--ps-text-2); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.ps-period:hover { color: #FFFFFF; }
.ps-period[aria-pressed="true"] { background: var(--ps-acc); color: var(--ps-ink); }

/* ---------- Body ---------- */
.ps-body { flex: 1; padding: 24px; display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 28px; align-items: center; }
.ps-gauge { position: relative; width: 284px; height: 250px; }
.ps-gauge svg { display: block; }
.ps-seg { transition: opacity .2s, stroke-width .2s; }
.ps-center { position: absolute; left: 0; right: 0; top: 62px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ps-center-k { font-family: var(--ps-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.ps-center-v { font-family: var(--ps-cond); font-size: 48px; line-height: .95; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ps-center-cur { font-family: var(--ps-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--ps-muted); }
.ps-center-sub { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ps-text-2); }
.ps-scale { position: absolute; left: 30px; right: 30px; bottom: 6px; display: flex; justify-content: space-between; font-family: var(--ps-mono); font-size: 10px; font-weight: 600; color: #6B737C; }

.ps-rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ps-row { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ps-line); background: transparent; color: var(--ps-text); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: background-color .15s, border-color .15s, opacity .15s, transform .12s; }
.ps-row:hover { background: rgba(255,255,255,.04); }
.ps-row:active { transform: scale(.99); }
.ps-row[aria-pressed="true"] { background: rgba(255,255,255,.05); border-color: var(--c); }
.ps.has-focus .ps-row[aria-pressed="false"] { opacity: .6; }
.ps-row-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.ps-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.ps-row-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ps-row-label strong { font-size: 16px; font-weight: 800; }
.ps-row-label small { font-size: 12px; font-weight: 600; color: var(--ps-muted); }
.ps-row-val { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ps-row-val strong { font-family: var(--ps-cond); font-size: 24px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.ps-row-val small { font-family: var(--ps-mono); font-size: 11px; font-weight: 600; color: var(--ps-muted); }
.ps-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--ps-track); overflow: hidden; }
.ps-bar i { display: block; height: 4px; width: 0; background: var(--c); transition: width .7s cubic-bezier(.2,.7,.2,1); }

/* ---------- Earnings ---------- */
.ps-earn { margin: 0 24px 20px; border-radius: 12px; background: var(--ps-raised); border: 1px solid var(--ps-line); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.ps-earn > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.ps-earn > div + div { border-left: 1px solid var(--ps-line); }
.ps-earn-v { font-family: var(--ps-cond); font-size: 34px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-earn-v small { font-size: 16px; color: var(--ps-muted); }
.ps-earn-v.is-acc { color: var(--ps-acc); }
.ps-earn-v.is-soft { color: #D5DAE0; }
.ps-earn .ps-rate { justify-content: center; align-items: center; gap: 2px; }
.ps-rate b { font-family: var(--ps-cond); font-size: 26px; line-height: 1; font-weight: 800; color: var(--ps-acc); }
.ps-rate span { font-family: var(--ps-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--ps-muted); }

/* What the figures leave out, said in words (CLAUDE.md §4). */
.ps-note { margin: -8px 24px 16px; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--ps-awaiting-ink); }

/* ---------- Footer ---------- */
.ps-foot { padding: 4px 24px; border-top: 1px solid var(--ps-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-foot p { font-size: 13px; color: var(--ps-muted); }
.ps-link { height: 52px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: #D5DAE0; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.ps-link:hover { color: #FFFFFF; }
.ps-link svg { transition: transform .15s; } .ps-link:hover svg { transform: translateX(3px); }

/* ---------- Empty ---------- */
.ps-empty { flex: 1; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.ps-empty strong { font-size: 18px; font-weight: 800; }
.ps-empty p { max-width: 300px; font-size: 14px; line-height: 1.5; color: var(--ps-muted); }
.ps-cta { margin-top: 8px; height: 48px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--ps-acc); color: var(--ps-ink); font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: transform .14s, filter .14s; }
.ps-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---------- Loading ---------- */
.ps.is-loading .ps-rows .ps-row, .ps.is-loading .ps-earn > div > *:not(.ps-k), .ps.is-loading .ps-center::before {
  color: transparent !important; border-color: transparent;
  background: linear-gradient(90deg, #1F2226 0%, #2A2E33 50%, #1F2226 100%); background-size: 200% 100%;
  animation: ps-shimmer 1.4s linear infinite; border-radius: 6px; pointer-events: none;
}
.ps.is-loading .ps-row *, .ps.is-loading .ps-earn-v *, .ps.is-loading .ps-center > * { visibility: hidden; }
.ps.is-loading .ps-center::before { content: ""; position: absolute; top: 18px; width: 150px; height: 52px; }
.ps.is-loading .ps-seg { opacity: 0 !important; }
@keyframes ps-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Narrow container (phones, narrow columns) ---------- */
@container (max-width: 600px) {
  .ps-head { flex-direction: column; align-items: stretch; padding: 18px 18px 16px; gap: 14px; }
  .ps-title { font-size: 21px; }
  .ps-sub { font-size: 10px; }
  .ps-period { height: 44px; padding: 0; }
  .ps-body { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 0; gap: 4px; justify-items: center; }
  .ps-rows { width: 100%; }
  .ps-scale { display: none; }
  .ps-earn { margin: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-earn > div { padding: 12px 14px; }
  .ps-earn .ps-rate { display: none; }
  .ps-earn-v { font-size: 30px; }
  .ps-note { margin: -4px 16px 14px; }
  .ps-foot { padding: 4px 18px; }
  .ps-foot p { display: none; }
  .ps-link { width: 100%; justify-content: space-between; font-size: 15px; }
}
@container (max-width: 340px) {
  .ps-gauge { transform: scale(.88); margin: -12px 0; }
  .ps-earn { grid-template-columns: minmax(0, 1fr); }
  .ps-earn > div + div { border-left: 0; border-top: 1px solid var(--ps-line); }
}

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

/* long totals shrink so they never touch the arc */
.ps-center-v[data-len="l"] { font-size: 40px; }
.ps-center-v[data-len="xl"] { font-size: 34px; }
@container (max-width: 600px) {
  .ps-center-v { font-size: 44px; }
  .ps-center-v[data-len="l"] { font-size: 36px; }
  .ps-center-v[data-len="xl"] { font-size: 30px; }
}

/* ---------- Light theme ---------- */
:root[data-scheme="light"] .ps {
  --ps-card: #FFFFFF; --ps-raised: #F4F5F7; --ps-track: #E3E5E8;
  --ps-line: rgba(18,20,23,.08);
  --ps-text: #121417; --ps-text-2: #3B424A; --ps-muted: #5B636D;
  --ps-approved-ink: #17703F; --ps-awaiting-ink: #8A5A00; --ps-rejected-ink: #B42318; --ps-acc-ink: #8A5A00;
  border-color: rgba(18,20,23,.09);
  box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 10px 28px -16px rgba(18,20,23,.18);
}
:root[data-scheme="light"] .ps :focus-visible { outline-color: #121417; }
:root[data-scheme="light"] .ps-periods { background: #EEF0F2; border-color: rgba(18,20,23,.08); }
:root[data-scheme="light"] .ps-period:hover { color: #121417; }
:root[data-scheme="light"] .ps-row:hover { background: rgba(18,20,23,.03); }
:root[data-scheme="light"] .ps-row[aria-pressed="true"] { background: rgba(18,20,23,.04); }
:root[data-scheme="light"] .ps-scale { color: #5B636D; }
:root[data-scheme="light"] .ps-earn-v.is-acc, :root[data-scheme="light"] .ps-rate b { color: var(--ps-acc-ink); }
:root[data-scheme="light"] .ps-earn-v.is-soft { color: #3B424A; }
:root[data-scheme="light"] .ps-link { color: #3B424A; }
:root[data-scheme="light"] .ps-link:hover { color: #121417; }
:root[data-scheme="light"] .ps.is-loading .ps-rows .ps-row, :root[data-scheme="light"] .ps.is-loading .ps-earn > div > *:not(.ps-k), :root[data-scheme="light"] .ps.is-loading .ps-center::before {
  background: linear-gradient(90deg, #EEF0F2 0%, #E3E5E8 50%, #EEF0F2 100%); background-size: 200% 100%;
}