/*
 * Portal Style: the look of Drey's coaching portal in one file.
 * Source look: beta-portal (CoachingStudio). Night mode only in v1.
 * Use: add class "ps" to <body> (or any wrapper), then use the ps- classes below.
 * Everything is scoped under .ps, so it will not restyle the rest of an existing app.
 */

/* ---------- tokens ---------- */
.ps {
  --ps-bg: #090811;        /* page */
  --ps-panel: #1b1729;     /* cards */
  --ps-raised: #292338;    /* things sitting on a card: tags, active nav, hover */
  --ps-well: #120f1c;      /* inputs, sunk into a card */
  --ps-ink: #f6f2ff;       /* main text */
  --ps-muted: #bbb4ce;     /* helper text */
  --ps-faint: #8e929e;     /* placeholders only */
  --ps-line: #494057;      /* every border */
  --ps-accent: #d1b8ff;    /* the one accent: lilac */
  --ps-accent-ink: #171925;/* text on lilac */
  --ps-plum: #352446;      /* answer-card tint */
  --ps-plum-line: #8a699c;
  --ps-rose-line: #e7a3b3; /* bad news: below target, errors */
  --ps-rose-ink: #ffd0da;
  --ps-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ps-mono: "SF Mono", Menlo, Monaco, Consolas, monospace;
  --ps-radius: 18px;       /* cards */
  --ps-radius-sm: 12px;    /* buttons, options, nav items */
  --ps-rail: 104px;
  --ps-pad: 24px;

  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  margin: 0;
  background: var(--ps-bg);
  color: var(--ps-ink);
  font: 400 16px/1.55 var(--ps-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}
.ps *, .ps *::before, .ps *::after { box-sizing: border-box; }
.ps ::selection { background: var(--ps-accent); color: var(--ps-accent-ink); }
.ps a { color: inherit; }
.ps :focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 3px; border-radius: 6px; }
.ps [hidden] { display: none !important; }
.ps-skip { position: fixed; left: 118px; top: -100px; z-index: 60; background: var(--ps-panel); border: 1px solid var(--ps-line); border-radius: 12px; padding: 15px 16px; font-weight: 600; }
.ps-skip:focus { top: 12px; }
.ps :is(p, h1, h2, h3, a, button, dd, li) { overflow-wrap: anywhere; }

/* the soft purple glow and the ring along the bottom */
.ps::before, .ps::after { content: ""; position: fixed; pointer-events: none; z-index: -1; }
.ps::before { inset: 0; background:
  radial-gradient(ellipse 65% 24% at 65% 103%, #9658e54d, transparent 80%),
  radial-gradient(ellipse 32% 65% at 65% 0%, #8b4dd329, transparent 75%); }
.ps::after { left: 18%; right: -10%; bottom: -190px; height: 250px; border: 1px solid #d7b7ff40; border-radius: 50%; box-shadow: 0 -5px 25px #bc82ff33, 0 -22px 80px #7e40c62e; transform: rotate(-7deg); }
.ps.ps--plain::before, .ps.ps--plain::after { display: none; }

/* ---------- type ---------- */
.ps-h1 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.2; margin: 10px 0 0; }
.ps-h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.3; margin: 0 0 12px; }
.ps-h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 8px; }
.ps-eyebrow { font: 500 0.75rem/1.4 var(--ps-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ps-accent); margin: 0; }
.ps-eyebrow--quiet { color: var(--ps-muted); }
.ps-note { color: var(--ps-muted); line-height: 1.7; max-width: 64ch; margin: 12px 0 0; }
.ps-big { display: block; font-weight: 400; line-height: 0.95; overflow-wrap: anywhere; letter-spacing: -0.06em; font-size: clamp(48px, calc(94cqi / (var(--chars, 3) * 0.6)), 148px); margin: 14px 0 12px; }
.ps-unit { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin: 0; }
.ps-lead { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; margin: 14px 0 0; max-width: 22ch; }

/* ---------- shell: rail, header, page ---------- */
.ps-rail { position: fixed; inset: 0 auto 0 0; width: var(--ps-rail); z-index: 30; padding: 22px 8px; display: flex; flex-direction: column; align-items: center; gap: 9px; border-right: 1px solid var(--ps-line); background: color-mix(in srgb, var(--ps-bg) 88%, transparent); }
.ps-monogram { width: 46px; height: 46px; display: grid; place-items: center; background: #e7e5de; color: #202126; border-radius: 14px; font-size: 2rem; font-weight: 700; letter-spacing: -3px; padding-right: 3px; margin-bottom: 28px; box-shadow: inset 0 1px 0 #fff9, 0 8px 22px #0002; }
.ps-rail a { position: relative; width: 100%; min-height: 76px; border: 1px solid transparent; border-radius: var(--ps-radius-sm); color: var(--ps-muted); font-size: 0.875rem; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 2px; transition: background 0.15s ease, color 0.15s ease; }
.ps-rail svg { width: 26px; height: 26px; flex-shrink: 0; }
.ps-rail a span { white-space: nowrap; }
@media (hover: hover) { .ps-rail a:hover { background: var(--ps-panel); color: var(--ps-ink); } }
/* the open screen: lilac bar plus heavier label, never color alone */
.ps-rail a[aria-current="page"] { background: var(--ps-raised); color: var(--ps-ink); border-color: #7a7090; font-weight: 700; box-shadow: inset 3px 0 0 var(--ps-accent); }
.ps-work { margin-left: var(--ps-rail); min-width: 0; }
.ps-top { min-height: 80px; padding: 16px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ps-line); }
.ps-wordmark { font-size: 1.5rem; font-weight: 750; letter-spacing: -1px; }
.ps-wordmark span { font-size: 0.875rem; color: var(--ps-muted); font-weight: 400; letter-spacing: 0.02em; margin-left: 8px; }
.ps-main { padding: 44px 40px 72px; max-width: 1220px; margin: 0 auto; min-width: 0; }
/* questions card beside answer cards. On phones: answer first, then questions. */
.ps-sheet { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.ps-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ---------- cards ---------- */
.ps-card { background: var(--ps-panel); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); padding: var(--ps-pad); min-width: 0; }
/* ONE answer card per screen gets the plum tint */
.ps-card--hero { container-type: inline-size; background: linear-gradient(120deg, #352446e8, #171421f5 75%); border-color: var(--ps-plum-line); box-shadow: inset 0 1px 0 #edd7ff33, 0 16px 60px #07051055; }
/* same card when the news is bad */
.ps-card--low { border-color: var(--ps-rose-line); background: linear-gradient(120deg, #4a2433e8, #171421f5 75%); box-shadow: inset 0 1px 0 #ffd7e033, 0 16px 60px #07051055; }
.ps-callout { border-left: 3px solid var(--ps-accent); padding: 4px 0 4px 16px; max-width: 64ch; }
.ps-warn { border: 1px solid var(--ps-rose-line); background: #3a1f2a; border-radius: var(--ps-radius-sm); padding: 12px 14px; font-weight: 600; max-width: 64ch; }

/* ---------- buttons: always a visible shape at rest ---------- */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; background: transparent; color: var(--ps-ink); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm); font: 600 0.875rem/1.2 var(--ps-sans); text-decoration: none; cursor: pointer; transition: background 0.15s ease, filter 0.15s ease; }
@media (hover: hover) { .ps-btn:hover { background: var(--ps-raised); } }
/* the main action: graphite "metal". One per group. */
.ps-btn--go { border-color: #79808e; background: linear-gradient(165deg, #424955 0%, #202630 50%, #3b414c 100%); color: #f4f4f5; box-shadow: inset 0 1px 0 #f4f4ff30, 0 5px 12px #0002; }
@media (hover: hover) { .ps-btn--go:hover { background: linear-gradient(165deg, #424955 0%, #202630 50%, #3b414c 100%); filter: brightness(1.15); } }
.ps-btn--small { min-height: 44px; padding: 8px 12px; }
.ps-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ps-chip { min-height: 44px; min-width: 54px; padding: 6px 12px; border-radius: 999px; color: var(--ps-muted); }
/* a picked quick-pick: lilac line plus heavier words */
.ps-chip[aria-pressed="true"] { background: var(--ps-raised); color: var(--ps-ink); border-color: var(--ps-accent); font-weight: 700; }

/* ---------- fields ---------- */
.ps-field { display: block; margin: 0 0 20px; }
.ps-field > label, .ps-label { display: block; font: 600 0.9375rem/1.3 var(--ps-sans); }
.ps-hint { display: block; color: var(--ps-muted); font-size: 0.8125rem; line-height: 1.45; margin-top: 4px; }
.ps-field :is(input, select, textarea), .ps-input { width: 100%; margin-top: 8px; background: var(--ps-well); color: var(--ps-ink); border: 1px solid var(--ps-line); border-radius: 10px; font: 400 1rem/1.4 var(--ps-sans); padding: 10px 12px; min-height: 48px; }
.ps-field textarea { min-height: 96px; resize: vertical; }
.ps-input--num { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.ps-field select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ps-muted) 50%), linear-gradient(135deg, var(--ps-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 21px, calc(100% - 11px) 21px; background-size: 6px 6px; background-repeat: no-repeat; }
.ps ::placeholder { color: var(--ps-faint); opacity: 1; font: 400 0.9375rem/1.4 var(--ps-sans); letter-spacing: 0; }
.ps [aria-invalid="true"] { border-color: var(--ps-rose-line); border-width: 2px; }
/* the fix-it line sits right under its field */
.ps-err { display: block; font: 600 0.8125rem/1.4 var(--ps-sans); color: var(--ps-rose-ink); margin-top: 6px; }
.ps-err:not(:empty)::before { content: "Fix this: "; font-weight: 700; }
/* pick-one rows: a real radio inside a label */
.ps-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ps-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm); font-size: 0.9375rem; color: var(--ps-muted); cursor: pointer; transition: background 0.15s ease; }
.ps-opt::before { content: ""; box-sizing: border-box; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--ps-muted); }
.ps-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
@media (hover: hover) { .ps-opt:hover { background: var(--ps-raised); } }
.ps-opt:has(input:checked) { background: var(--ps-raised); color: var(--ps-ink); border-color: var(--ps-accent); font-weight: 600; }
.ps-opt:has(input:checked)::before { border: 5px solid var(--ps-accent); background: var(--ps-accent-ink); }
.ps-opt:has(input:focus-visible) { outline: 2px solid var(--ps-accent); outline-offset: 3px; }

/* ---------- tabs: a row on a rule, the open one underlined ---------- */
.ps-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ps-line); margin-bottom: 20px; }
.ps-tabs [role="tab"] { background: transparent; color: var(--ps-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 10px 10px 0 0; min-height: 48px; padding: 12px 18px; margin-bottom: -1px; font: 600 0.9375rem/1.2 var(--ps-sans); cursor: pointer; }
@media (hover: hover) { .ps-tabs [role="tab"]:hover { color: var(--ps-ink); background: var(--ps-panel); } }
.ps-tabs [role="tab"][aria-selected="true"] { color: var(--ps-ink); border-bottom-color: var(--ps-accent); background: var(--ps-panel); }

/* ---------- labels and status ---------- */
/* a tag is a label, not a control: no outline, so it never reads as a button */
.ps-tag { display: inline-block; font: 600 0.75rem/1.2 var(--ps-sans); background: var(--ps-raised); border-radius: 999px; padding: 5px 11px; color: var(--ps-ink); white-space: nowrap; }
.ps-tag--on { background: color-mix(in srgb, var(--ps-accent) 24%, var(--ps-panel)); color: var(--ps-accent); }
.ps-status { font-size: 0.875rem; font-weight: 500; color: var(--ps-muted); }
.ps-status::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ps-accent); margin-right: 8px; }
.ps-bar { height: 8px; background: var(--ps-raised); border-radius: 999px; overflow: hidden; }
.ps-bar > i { display: block; height: 100%; width: var(--w, 0%); background: var(--ps-accent); border-radius: 999px; transition: width 0.5s ease; }

/* ---------- table, list rows ---------- */
.ps-table { width: 100%; border-collapse: collapse; }
.ps-table :is(th, td) { text-align: left; vertical-align: top; padding: 13px 14px 13px 0; border-top: 1px solid var(--ps-line); }
.ps-table thead th { font: 500 0.75rem/1.4 var(--ps-mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ps-muted); border-top: 0; }
.ps-table tbody th { font-weight: 600; }
.ps-rows { list-style: none; margin: 0; padding: 0; }
.ps-rows > li { padding: 14px 0; border-top: 1px solid var(--ps-line); }

/* ---------- messages ---------- */
.ps-toast { position: fixed; right: 20px; top: 20px; z-index: 40; pointer-events: none; background: var(--ps-raised); color: var(--ps-ink); border: 1px solid var(--ps-plum-line); border-radius: 14px; padding: 10px 12px 10px 16px; font-weight: 600; font-size: 0.9375rem; width: max-content; max-width: min(620px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; box-shadow: 0 16px 40px #0009; }
.ps-toast :is(button, a) { pointer-events: auto; }
dialog.ps-dialog { background: var(--ps-panel); color: var(--ps-ink); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); padding: 26px; max-width: min(460px, calc(100vw - 32px)); box-shadow: 0 30px 80px #000a; }
dialog.ps-dialog::backdrop { background: rgba(5, 4, 10, 0.78); }

/* ---------- phones: nav becomes a pinned row on top ---------- */
@media (max-width: 1080px) {
  .ps-sheet { grid-template-columns: 320px minmax(0, 1fr); }
  .ps-main { padding: 32px 24px 64px; }
}
@media (max-width: 760px) {
  .ps { --ps-pad: 18px; }
  .ps-rail { position: sticky; inset: auto; top: 0; width: 100%; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--ps-line); flex-direction: row; gap: 3px; background: var(--ps-bg); }
  .ps-monogram { display: none; }
  .ps-skip { left: 12px; }
  .ps-rail a { flex: 1; min-height: 58px; font-size: 0.75rem; gap: 4px; padding: 4px 1px; border-radius: 8px; }
  .ps-rail svg { width: 22px; height: 22px; }
  .ps-rail a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ps-accent); }
}
/* small phones: icon beside its label, like the portal */
@media (max-width: 480px) {
  .ps-rail a { flex-direction: row; min-height: 48px; gap: 6px; }
  .ps-rail svg { width: 20px; height: 20px; }
}
/* Very narrow screens: the label goes back under the icon so no word breaks in half. */
@media (max-width: 360px) {
  .ps-rail a { flex-direction: column; gap: 2px; }
}
@media (max-width: 760px) {
  .ps-work { margin-left: 0; }
  .ps-top { padding: 10px 18px; min-height: 62px; flex-wrap: wrap; }
  .ps-wordmark { font-size: 1.375rem; }
  .ps-main { padding: 26px 16px calc(40px + env(safe-area-inset-bottom)); }
  .ps-h1 { font-size: 1.875rem; }
  .ps-tabs { overflow-x: auto; }
  .ps-tabs [role="tab"] { white-space: nowrap; padding: 12px 14px; }
  .ps-sheet { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .ps-sheet > .ps-stack { display: contents; }
  .ps-sheet .ps-card--hero { order: -1; }
  .ps-big { font-size: clamp(44px, calc(94cqi / (var(--chars, 3) * 0.6)), 112px); }
  .ps-toast { left: 16px; right: 16px; top: 84px; width: auto; max-width: none; }
  html:has(.ps-rail) { scroll-padding-top: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps *, .ps *::before, .ps *::after { animation: none !important; transition: none !important; }
}