/* The customer portal's stylesheet. Built to the Claude Design mockup.
 *
 * LIGHT ONLY, deliberately. The internal portal ships light/dark/system and the PM mockup has
 * an explicit dark ramp; the customer mockup has no dark mode in any of its 1,107 lines. This
 * is a simplification the design made, not an omission to fix later: a customer opens this a
 * handful of times over sixty days, and one carefully contrasted surface is worth more than
 * two half-checked ones.
 *
 * CLASSES RATHER THAN THE MOCKUP'S INLINE STYLES. The prototype inline-styles every element
 * because that is how the design tool emits. Three things need a stylesheet and cannot be
 * expressed inline: media queries (the design specifies a real mobile layout), :focus-visible
 * (WCAG 2.4.7, and the mockup has no focus states at all because a prototype is never tabbed
 * through), and :hover.
 *
 * CONTRAST. Every foreground/background pair below is from the mockup and was checked against
 * WCAG AA: 4.5:1 for body text, 3:1 for large text and UI boundaries. HANDOFF.md records
 * `.pmp-type` shipping at 2.25:1 because it was eyeballed, so these were measured. The tinted
 * chips are used as PAIRS from tokens.css and must not be recombined.
 */

:root {
  --p-bg: #F4F7FB;
  --p-surface: #FFFFFF;
  --p-border: rgba(8, 37, 68, 0.10);
  --p-rule: #EEF2F7;
  --p-rule-soft: #F2F5F9;
  --p-ink: #171717;
  --p-ink-2: #242424;
  --p-ink-3: #595959;
  --p-ink-4: #8A8A8A;
  --p-panel: #F2F6FA;
  --p-panel-border: #DCE8F6;
  --p-track: #EDF2F8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-medium); text-decoration: none; }
a:hover { color: var(--blue-semi-dark); text-decoration: underline; }

/* One visible focus ring for every interactive element. The mockup has none, because a
   prototype is clicked and never tabbed; a customer portal must be fully keyboard operable. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.p-brand { font-family: var(--font-brand); font-weight: var(--fw-demi); letter-spacing: -0.015em; }
.p-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.p-shell { min-height: 100vh; display: flex; flex-direction: column; }
.p-main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 32px; }
.p-main--narrow { max-width: 820px; }
.p-main--timeline { max-width: 900px; }

.p-header { background: var(--p-surface); border-bottom: 1px solid var(--p-border); }
.p-header__in {
  max-width: 1160px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.p-monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radius-m);
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff; font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 15px;
}
.p-header__name { font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 17px; letter-spacing: -0.01em; }
.p-header__plan { font-size: 13px; color: var(--p-ink-3); }
.p-header__right { margin-left: auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.p-contact {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 14px 7px 8px; border-radius: var(--radius-pill);
  background: var(--p-panel); border: 1px solid var(--p-panel-border);
}
.p-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--blue-dark); color: #fff;
  font-family: var(--font-brand); font-weight: var(--fw-demi); flex: 0 0 auto;
  width: 38px; height: 38px; font-size: 12.5px;
}
.p-avatar--sm { width: 30px; height: 30px; font-size: 11.5px; }
.p-avatar--lg { width: 44px; height: 44px; font-size: 14px; }

/* ── Cards ────────────────────────────────────────────────────────────── */

.p-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}
.p-card__pad { padding: 28px; }
.p-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 24px 28px 20px;
}
.p-card__title { margin: 0; font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 21px; letter-spacing: -0.01em; }
.p-card__title--sm { font-size: 18px; }
.p-card__meta { font-size: 13.5px; color: var(--p-ink-3); }

.p-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.p-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ── The launch banner ────────────────────────────────────────────────── */

.p-launch {
  border-radius: var(--radius-xl); padding: 32px 36px; margin-bottom: 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; background: var(--bg-hero-blue); color: #fff;
}
.p-eyebrow {
  font-size: 11px; font-weight: var(--fw-demi); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--yellow);
}
.p-launch__date { font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 30px; letter-spacing: -0.015em; margin: 12px 0 8px; }
.p-launch__sub { font-size: 15.5px; color: rgba(255, 255, 255, 0.74); }
.p-launch__count { font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 76px; line-height: 0.9; letter-spacing: -0.03em; color: var(--yellow); }
.p-launch__countlbl { margin-top: 10px; font-size: 12px; font-weight: var(--fw-demi); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.p-status {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  padding: 7px 15px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13.5px; color: #fff;
}
.p-status__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: #4ADE9B; flex: 0 0 auto; }
.p-status__dot--risk { background: var(--yellow); }
.p-status__dot--behind { background: #FF8A9B; }

/* ── Actions ──────────────────────────────────────────────────────────── */

.p-action {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 28px; border-top: 1px solid var(--p-rule); flex-wrap: wrap;
}
.p-action--overdue { background: #FFF9F9; }
.p-action__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radius-l);
  border: 1.5px solid var(--p-panel-border); background: var(--p-panel); color: var(--blue-semi-dark);
}
.p-action__icon--overdue { border-color: #E8A3AE; background: #FDF2F3; color: #B4143A; }
.p-action__body { flex: 1 1 320px; min-width: 260px; }
.p-action__title { font-size: 16.5px; font-weight: var(--fw-demi); margin-bottom: 4px; }
.p-action__why { font-size: 14px; line-height: 1.55; color: var(--p-ink-3); }

.p-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: var(--fw-demi); white-space: nowrap;
}
.p-chip--info { background: var(--tint-info-bg); color: var(--tint-info-fg); }
.p-chip--ok { background: var(--tint-ok-bg); color: var(--tint-ok-fg); }
.p-chip--danger { background: #FDF2F3; color: #B4143A; }
.p-chip--muted { background: #F4F6F9; color: #5C646E; }

/* ── Buttons. 44px minimum target on every one, per the design's mobile note. ── */

.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--radius-m);
  font-family: inherit; font-size: 15px; font-weight: var(--fw-demi);
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.p-btn--primary { background: var(--blue); color: #fff; }
.p-btn--primary:hover { background: var(--blue-medium); }
.p-btn--secondary { background: var(--p-surface); color: var(--blue-medium); border-color: var(--blue); }
.p-btn--secondary:hover { background: var(--p-panel); }
.p-btn--quiet { background: var(--p-surface); color: var(--p-ink-2); border-color: rgba(8, 37, 68, 0.20); }
.p-btn--quiet:hover { background: var(--p-panel); }
.p-btn--lg { height: 50px; font-size: 16px; }
.p-btn--block { width: 100%; }
.p-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Progress ─────────────────────────────────────────────────────────── */

.p-pct { font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 38px; letter-spacing: -0.025em; line-height: 1; color: var(--blue-ultra-dark); }
.p-bar { height: 10px; border-radius: var(--radius-pill); background: var(--p-track); overflow: hidden; }
.p-bar__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--blue), var(--blue-medium)); }
.p-bar__fill--done { background: var(--success); }
.p-bar--thin { height: 5px; background: #E4EBF3; }

.p-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.p-track { border: 1px solid var(--p-panel-border); background: #F7FAFD; border-radius: var(--radius-l); padding: 16px 16px 14px; }
.p-track__name { font-size: 14.5px; font-weight: var(--fw-demi); }
.p-track__status { font-size: 13px; line-height: 1.5; color: var(--p-ink-3); }
.p-dot { width: 9px; height: 9px; border-radius: var(--radius-pill); flex: 0 0 auto; }

/* ── Lists ────────────────────────────────────────────────────────────── */

.p-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--p-rule-soft); align-items: flex-start; }
.p-row:last-child { border-bottom: none; }
.p-row__when { font-size: 12.5px; color: var(--p-ink-4); margin-top: 3px; }
.p-datechip {
  flex: 0 0 auto; width: 50px; text-align: center; padding: 7px 0;
  border-radius: var(--radius-m); background: var(--p-panel); border: 1px solid var(--p-panel-border);
}
.p-datechip__d { font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 16px; color: var(--blue-semi-dark); line-height: 1; }
.p-datechip__m { font-size: 10px; font-weight: var(--fw-demi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-semi-dark); margin-top: 3px; }

/* ── Sign in ──────────────────────────────────────────────────────────── */

.p-auth { display: grid; grid-template-columns: 1.02fr 0.98fr; min-height: 100vh; }
.p-auth__hero {
  padding: 60px 58px; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bg-hero-dark); color: #fff;
}
.p-auth__title { font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 40px; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 18px; }
.p-auth__lede { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); margin: 0 0 30px; }
/* The layout lives HERE and not as an inline style on the element, which is what it was.
   An inline `display:flex` outranks any stylesheet rule short of !important, so the mobile
   rule below could never hide this block: the hero kept its three value points at 800px wide
   and pushed the sign-in form off the first screen. Anything a media query needs to override
   has to be reachable by a selector. */
.p-auth__pts { display: flex; flex-direction: column; gap: 13px; }
.p-auth__pt { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: rgba(255, 255, 255, 0.86); }
.p-auth__form { display: flex; align-items: center; justify-content: center; padding: 52px 56px; background: var(--p-surface); }
.p-auth__box { width: 100%; max-width: 412px; }

.p-label { display: block; font-size: 13.5px; font-weight: var(--fw-demi); color: var(--p-ink-2); margin-bottom: 7px; }
.p-input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid rgba(8, 37, 68, 0.18); border-radius: var(--radius-m);
  font-family: inherit; font-size: 15px; color: var(--p-ink); background: var(--p-surface);
}
.p-input:focus { border-color: var(--blue); }
.p-textarea { min-height: 140px; padding: 16px; line-height: 1.6; resize: vertical; height: auto; }

.p-note { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius-l); margin-bottom: 22px; }
.p-note--ok { background: #EAF7F1; border: 1px solid #BFE7D3; color: #0F6E45; }
.p-note--warn { background: #FFF8EA; border: 1px solid #F3DFB4; color: #7A4E05; }
.p-note--err { background: #FDF2F3; border: 1px solid #F0C7CE; color: #A8071A; }

/* An indeterminate progress bar. Honest about being indeterminate: it says "working", not
   "62% of the way there", because a fake determinate bar is a lie the user can time. */
.p-loadbar { height: 4px; border-radius: var(--radius-pill); background: var(--p-track); overflow: hidden; }
.p-loadbar__fill { width: 30%; height: 100%; border-radius: var(--radius-pill); background: var(--blue); animation: p-slide 1.6s var(--ease-out) infinite; }
@keyframes p-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
.p-fade { animation: p-fade-in 0.3s var(--ease-out); }
@keyframes p-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Upload ───────────────────────────────────────────────────────────── */

.p-drop {
  border: 2px dashed var(--blue-light); background: #F7FAFD; border-radius: var(--radius-xl);
  padding: 52px 28px; text-align: center; cursor: pointer; width: 100%;
  font-family: inherit; color: inherit;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.p-drop:hover, .p-drop.is-over { border-color: var(--blue); background: var(--p-panel); }
.p-drop__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: var(--p-surface);
  border: 1px solid var(--p-panel-border); color: var(--blue); margin-bottom: 18px;
}

/* ── Review ───────────────────────────────────────────────────────────── */

.p-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px; }
.p-option {
  background: var(--p-surface); border: 1px solid var(--p-border); border-radius: var(--radius-xl);
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-xs); text-align: left;
  padding: 0; font-family: inherit; color: inherit; display: block; width: 100%;
}
.p-option.is-picked { border: 2px solid var(--blue); box-shadow: var(--shadow-m); }
.p-option__preview {
  height: 200px; background: #EEF3F9; border-bottom: 1px solid rgba(8, 37, 68, 0.08);
  display: flex; align-items: center; justify-content: center; color: #6B7889; font-size: 13.5px;
}
.p-radio { width: 18px; height: 18px; border-radius: var(--radius-pill); flex: 0 0 auto; border: 2px solid #C9D4E2; background: var(--p-surface); }
.p-option.is-picked .p-radio { border: 5px solid var(--blue); }

/* ── Holding screen ───────────────────────────────────────────────────── */
/* The public face of the domain: seen by invited customers who mislaid their link, and by
   people who are not customers at all. It shows nothing about any project. */

.p-holding { min-height: 100vh; display: flex; flex-direction: column; }
.p-holding__in { max-width: 900px; margin: 0 auto; }
.p-holding__hero { flex: 1 1 auto; padding: 56px 24px 40px; background: var(--bg-hero-dark); color: #fff; }
.p-holding__title {
  margin: 0 0 16px; font-family: var(--font-brand); font-weight: var(--fw-demi);
  font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; color: #fff; max-width: 660px;
}
.p-holding__lede { margin: 0; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); max-width: 580px; }
.p-holding__body { background: var(--p-surface); padding: 52px 24px 60px; border-top: 1px solid rgba(8, 37, 68, 0.08); }
.p-holding__features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px; margin-bottom: 44px;
}
.p-holding__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-l);
  background: var(--p-panel); border: 1px solid var(--p-panel-border);
  color: var(--blue-semi-dark); margin-bottom: 14px;
}
.p-holding__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.p-holding__card { border: 1px solid var(--p-border); border-radius: 14px; padding: 24px; }

/* A button that reads as a link. It is a <button> and not an <a href="#"> because it performs
   an action rather than going anywhere, and a fake anchor tells a screen reader the wrong
   thing and puts a dead # in the address bar. */
.p-linkbtn {
  background: none; border: none; padding: 0; font: inherit;
  font-size: 14.5px; font-weight: var(--fw-demi); color: var(--blue-medium); cursor: pointer;
}
.p-linkbtn:hover { color: var(--blue-semi-dark); text-decoration: underline; }

.p-holding__form {
  border: 1px solid var(--p-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs); padding: 30px 32px; position: relative;
}
.p-holding__fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin-bottom: 20px;
}
.p-holding__reasons { border: 0; padding: 0; margin: 0; }
.p-holding__radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.p-holding__radio {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 48px; padding: 12px 14px; border-radius: var(--radius-m);
  border: 1px solid rgba(8, 37, 68, 0.14); background: var(--p-surface);
  font: inherit; font-size: 14.5px; color: var(--p-ink); cursor: pointer;
}
.p-holding__radio.is-picked { border-color: var(--blue); background: var(--p-panel); }
.p-holding__radio.is-picked .p-radio { border: 5px solid var(--blue); }

.p-holding__sent {
  border: 1px solid #CDEADB; background: #EAF7F1; border-radius: var(--radius-xl);
  padding: 28px 32px; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
}
.p-holding__note {
  margin: 36px 0 0; padding-top: 22px; border-top: 1px solid rgba(8, 37, 68, 0.08);
  font-size: 13px; line-height: 1.6; color: var(--p-ink-4); max-width: 620px;
}

/* ── Timeline ─────────────────────────────────────────────────────────── */

.p-phase { margin-bottom: 14px; }
.p-phase__head { display: flex; align-items: center; gap: 16px; padding: 20px 26px; border-bottom: 1px solid var(--p-rule-soft); }
.p-phase__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--radius-l);
  font-family: var(--font-brand); font-weight: var(--fw-demi); font-size: 14px;
  background: var(--p-rule); color: #6B7480;
}
.p-phase__badge--complete { background: var(--success); color: #fff; }
.p-phase__badge--active { background: var(--blue); color: #fff; }
.p-step { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #F7F9FC; }
.p-step:last-child { border-bottom: none; }
.p-mark { width: 18px; height: 18px; border-radius: var(--radius-pill); flex: 0 0 auto; margin-top: 2px; background: var(--p-surface); border: 2px solid #D5DEE9; }
.p-mark--done { background: var(--success); border-color: var(--success); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--success); }
.p-mark--now { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(50, 137, 231, 0.16); }

/* ── Responsive. The design specifies one column, same order, nothing hidden. ── */

@media (max-width: 900px) {
  .p-grid { grid-template-columns: minmax(0, 1fr); }
  .p-tracks { grid-template-columns: minmax(0, 1fr); }
  .p-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* The hero becomes a compact band above the form rather than disappearing: it carries the
     only branding on the page, and a customer arriving from an email needs to recognise it. */
  .p-auth__hero { padding: 32px 24px; }
  .p-auth__title { font-size: 28px; }
  .p-auth__lede { font-size: 15px; margin-bottom: 0; }
  .p-auth__pts, .p-auth__foot { display: none; }
  .p-auth__form { padding: 32px 24px; }
}

@media (max-width: 640px) {
  .p-main { padding: 16px; }
  .p-header__in { padding: 14px 16px; gap: 12px; }
  .p-header__right { width: 100%; margin-left: 0; }
  .p-launch { padding: 22px; margin-bottom: 16px; }
  .p-launch__date { font-size: 23px; }
  .p-launch__count { font-size: 46px; }
  .p-card__head, .p-action { padding-left: 18px; padding-right: 18px; }
  .p-card__pad { padding: 18px; }
  .p-card__title { font-size: 17px; }
  .p-pct { font-size: 30px; }
  .p-col { gap: 16px; }

  /* One-handed reach: the action's button goes full width and last, so the thumb lands on it
     without aiming. This is the design's explicit mobile note.
     Both the wrapper and the button, because widening only the button leaves it filling a
     shrink-to-fit inline span. */
  .p-action { align-items: flex-start; gap: 12px; }
  .p-action__icon { display: none; }
  .p-action__body { flex-basis: 100%; }
  .p-action__cta { display: block; width: 100%; order: 3; }
  .p-action__cta .p-btn { width: 100%; }
  .p-action .p-chip { order: 2; }

  /* The header's contact chip goes: on a 390px row it forces "Sign out" onto its own line,
     and the same person is listed under "Your Unilog team" further down the same page. The
     monogram, the customer name and the way out are what the header has to carry. */
  .p-header__right .p-contact { display: none; }
  .p-header__right { width: auto; margin-left: auto; }
}

@media print {
  .p-btn, .p-header__right { display: none; }
  .p-card { box-shadow: none; }
}