/* Customer portal: the in-site account area.
 *
 * Renders INSIDE the existing site — the Breakdance header and footer stay put,
 * so this styles a region within the page, never a standalone shell.
 *
 * The nav is ONE component, not two: a left sidebar from 900px up, and a
 * horizontally scrollable pill strip below it. Same markup, different layout —
 * so there is no second hamburger and no duplicate nav to keep in sync.
 *
 * Tokens come from storefront-base.css (--pc-*); nothing here re-declares brand
 * values. Charcoal #28282a on white, per the live header.
 */

/* The Breakdance Section wrapper adds its own top padding
   (--bde-section-vertical-padding), which stacks with the portal's and pushes
   the account area too far down. The page's Section carries
   id="cpg-account-section" so this targets it directly. */
#cpg-account-section > .section-container {
  padding-top: 0;
}

.pc-portal {
  color: var(--pc-color-text);
  font-family: var(--pc-font-body);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-space-4);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--pc-space-4) 0;
}

@media (min-width: 900px) {
  .pc-portal {
    grid-template-columns: 200px 1fr;
    gap: var(--pc-space-6);
    align-items: start;
  }
}

/* ------------------------------------------------------------------ *
 * Navigation — pills on mobile, sidebar on desktop
 * ------------------------------------------------------------------ */

.pc-portal__nav {
  display: flex;
  flex-direction: row;
  gap: var(--pc-space-2);
  overflow-x: auto;
  /* Let the strip bleed to the edges on mobile so it reads as scrollable. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--pc-space-1);
  border-bottom: 1px solid var(--pc-color-border);
}
.pc-portal__nav::-webkit-scrollbar {
  display: none;
}

.pc-portal__navlink {
  flex: 0 0 auto;
  display: block;
  padding: var(--pc-space-2) var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: 999px;
  color: var(--pc-color-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.pc-portal__navlink:hover {
  color: var(--pc-color-text);
}
.pc-portal__navlink--active {
  background: var(--pc-color-accent);
  border-color: var(--pc-color-accent);
  color: var(--pc-color-accent-ink);
}
.pc-portal__navlink--active:hover {
  color: var(--pc-color-accent-ink);
}
/* Sections that land in Phase 3/4: visible so the shape is legible, inert so a
   click can't reach a half-built view. */
.pc-portal__navlink--soon {
  opacity: 0.45;
  pointer-events: none;
}

@media (min-width: 900px) {
  .pc-portal__nav {
    flex-direction: column;
    overflow-x: visible;
    gap: var(--pc-space-1);
    border-bottom: 0;
    position: sticky;
    top: var(--pc-space-4);
  }
  .pc-portal__navlink {
    border: 0;
    border-radius: var(--pc-radius);
    padding: var(--pc-space-2) var(--pc-space-3);
    font-size: 15px;
  }
  .pc-portal__navlink--active {
    background: #f4f3f5;
    color: var(--pc-color-text);
  }
  .pc-portal__navlink--active:hover {
    color: var(--pc-color-text);
  }
}

/* ------------------------------------------------------------------ *
 * Main column
 * ------------------------------------------------------------------ */

.pc-portal__main {
  min-width: 0; /* let long content shrink instead of blowing out the grid */
}

/* ONE source of vertical rhythm for every section.
 *
 * Each section used to stack its own combination of ad-hoc top margins — plus a
 * status line that was invisible but still ~27px tall — so the gap under the
 * heading differed on every sub-page. Driving it from a single flex `gap`, and
 * zeroing the per-element top margins, makes every section identical by
 * construction rather than by everyone remembering to match.
 *
 * A `display: none` child is skipped by flex gap entirely, which is why the
 * empty-status-line collapse below actually removes its space rather than just
 * hiding it. Existing margin-BOTTOMs are left alone: on the order detail they
 * deliberately separate bigger blocks, and they simply add to the gap. */
.pc-portal__view {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
}
.pc-portal__view > * {
  margin-top: 0;
}
.pc-portal__view > .pc-portal__title,
.pc-portal__view > .pc-portal__section-head {
  margin-bottom: 0;
}

.pc-portal__title {
  font-family: var(--pc-font-heading);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 var(--pc-space-3);
}

.pc-portal__empty {
  color: var(--pc-color-muted);
  font-size: 15px;
  line-height: 1.5;
  /* Explicit: Modern Normalize is off on this site, so a bare <p> would carry
     the browser's 1em margins and break the section rhythm. */
  margin: 0;
}

.pc-portal__back {
  display: inline-block;
  margin-bottom: var(--pc-space-3);
  color: var(--pc-color-muted);
  font-size: 14px;
  text-decoration: none;
}
.pc-portal__back:hover {
  color: var(--pc-color-text);
}

/* ------------------------------------------------------------------ *
 * Buy again — the landing grid
 * ------------------------------------------------------------------ */

/* A px floor rather than a bare 1fr, so tiles wrap sensibly instead of a long
   product name blowing a track out. */
.pc-portal__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--pc-space-3);
}

.pc-portal__tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  background: var(--pc-color-surface);
  overflow: hidden;
}

/* The product image is the point of this page — give it a stable square so the
   grid stays even whatever shape the source images are. */
.pc-portal__tile-media {
  display: block;
  aspect-ratio: 1 / 1;
  background: #f4f3f5;
  overflow: hidden;
}
.pc-portal__tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-portal__tile-body {
  padding: var(--pc-space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Push the button to the bottom so tiles of differing text length still line
     their actions up across a row. */
  flex: 1 1 auto;
}

.pc-portal__tile-title {
  color: var(--pc-color-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pc-portal__tile-title:hover {
  color: var(--pc-color-text);
  text-decoration: underline;
}

.pc-portal__tile-variant {
  color: var(--pc-color-text);
  font-size: 13px;
}

.pc-portal__tile-meta {
  color: var(--pc-color-muted);
  font-size: 12px;
  margin-top: var(--pc-space-1);
}

.pc-portal__tile-foot {
  padding: 0 var(--pc-space-3) var(--pc-space-3);
}
.pc-portal__tile-buy {
  width: 100%;
  padding: var(--pc-space-2) var(--pc-space-3);
  font-size: 14px;
}
/* Confirmation on the tile that was clicked, rather than a page-level message. */
.pc-portal__tile-buy--added {
  background: #2b6446;
  border-color: #2b6446;
}

/* Running tally of what this visit added, with the way out to the cart. */
.pc-portal__cartbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pc-space-3);
  padding: var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  background: #f4f8f5;
  font-size: 15px;
  font-weight: 600;
}
.pc-portal__cartbar[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Orders list
 * ------------------------------------------------------------------ */

.pc-portal__orders {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
}

.pc-portal__order {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--pc-space-2) var(--pc-space-3);
  align-items: start;
  padding: var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  background: var(--pc-color-surface);
}

.pc-portal__order-number {
  font-weight: 600;
  font-size: 15px;
}

.pc-portal__order-meta {
  color: var(--pc-color-muted);
  font-size: 14px;
  margin-top: 2px;
}

.pc-portal__order-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pc-space-1);
}

.pc-portal__order-total {
  font-weight: 600;
  font-size: 15px;
}

.pc-portal__nudge {
  grid-column: 1 / -1;
  color: var(--pc-color-text);
  background: #fbf6ec;
  border-radius: var(--pc-radius);
  padding: var(--pc-space-2) var(--pc-space-3);
  font-size: 14px;
}

.pc-portal__order-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--pc-space-2);
}
.pc-portal__order-actions .pc-btn {
  padding: var(--pc-space-2) var(--pc-space-3);
  font-size: 14px;
}

/* Stack the row on narrow screens rather than squeezing two columns. */
@media (max-width: 480px) {
  .pc-portal__order {
    grid-template-columns: 1fr;
  }
  .pc-portal__order-side {
    align-items: flex-start;
  }
  .pc-portal__order-actions .pc-btn {
    flex: 1 1 auto;
  }
}

/* ------------------------------------------------------------------ *
 * Status pills — restrained tints; the palette stays monochrome
 * ------------------------------------------------------------------ */

.pc-portal__pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: #f0eff1;
  color: var(--pc-color-muted);
  white-space: nowrap;
}
.pc-portal__pill--product_paid,
.pc-portal__pill--fully_paid {
  background: #e8f2ec;
  color: #2b6446;
}
.pc-portal__pill--pending,
.pc-portal__pill--freight_pending {
  background: #fbf1e2;
  color: #8a5a1c;
}
.pc-portal__pill--refunded,
.pc-portal__pill--partially_refunded {
  background: #eef1f6;
  color: #40506b;
}
.pc-portal__pill--cancelled,
.pc-portal__pill--abandoned {
  background: #f4f2f2;
  color: #7a6b6b;
}

/* ------------------------------------------------------------------ *
 * Order detail
 * ------------------------------------------------------------------ */

.pc-portal__detail-head {
  display: flex;
  align-items: center;
  gap: var(--pc-space-3);
  flex-wrap: wrap;
}
.pc-portal__detail-head .pc-portal__title {
  margin-bottom: 0;
}

.pc-portal__lines {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
  margin: var(--pc-space-4) 0;
}

.pc-portal__line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--pc-space-3);
  align-items: start;
  padding-bottom: var(--pc-space-3);
  border-bottom: 1px solid var(--pc-color-border);
}
/* No thumbnail: let the text take the space instead of leaving a gap. */
.pc-portal__line--nothumb {
  grid-template-columns: minmax(0, 1fr) auto;
}

.pc-portal__line-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--pc-radius);
  background: #f4f3f5;
}

.pc-portal__line-title {
  font-weight: 600;
  font-size: 15px;
}
.pc-portal__line-specs,
.pc-portal__line-qty {
  color: var(--pc-color-muted);
  font-size: 14px;
  margin-top: 2px;
}
.pc-portal__line-total {
  font-weight: 600;
  white-space: nowrap;
}

.pc-portal__totals {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-2);
  margin-bottom: var(--pc-space-5);
}
.pc-portal__totalrow {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--pc-color-muted);
}
.pc-portal__totalrow--grand {
  color: var(--pc-color-text);
  font-weight: 700;
  font-size: 17px;
  padding-top: var(--pc-space-2);
  border-top: 1px solid var(--pc-color-border);
}

.pc-portal__block {
  margin-bottom: var(--pc-space-5);
}
.pc-portal__block-title {
  font-family: var(--pc-font-heading);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--pc-space-2);
}
.pc-portal__block-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  padding: var(--pc-space-2) 0;
  border-bottom: 1px solid var(--pc-color-border);
}

.pc-portal__due {
  background: #fbf6ec;
  border-radius: var(--pc-radius);
  padding: var(--pc-space-3);
  font-size: 15px;
  margin-bottom: var(--pc-space-5);
}

/* ------------------------------------------------------------------ *
 * Activity timeline
 * ------------------------------------------------------------------ */

.pc-portal__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--pc-color-border);
}
.pc-portal__event {
  position: relative;
  padding: 0 0 var(--pc-space-3) var(--pc-space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-portal__event::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc-color-border);
}
.pc-portal__event:first-child::before {
  background: var(--pc-color-accent);
}
.pc-portal__event-label {
  font-size: 15px;
  font-weight: 600;
}
.pc-portal__event-date {
  color: var(--pc-color-muted);
  font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * Signed-out state
 * ------------------------------------------------------------------ */

.pc-portal__signin {
  max-width: var(--pc-maxw);
}
.pc-portal__signin-title {
  font-family: var(--pc-font-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--pc-space-2);
}
.pc-portal__signin-intro {
  color: var(--pc-color-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 var(--pc-space-3);
}
.pc-portal__signin-msg {
  color: var(--pc-color-muted);
  font-size: 14px;
  margin-top: var(--pc-space-2);
  min-height: 1.2em;
}

/* The checkout scopes .pc-field under #cpg-checkout, so the portal needs its own. */
.pc-portal .pc-field {
  width: 100%;
  margin-bottom: var(--pc-space-3);
}
.pc-portal .pc-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--pc-space-1);
}
.pc-portal .pc-field input {
  width: 100%;
  padding: var(--pc-space-2) var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  font-size: 15px;
  font-family: inherit;
  background: var(--pc-color-surface);
  color: var(--pc-color-text);
}

/* ------------------------------------------------------------------ *
 * Skeleton (shape mirrors the real layout so first paint doesn't jump)
 * ------------------------------------------------------------------ */

/* Show ONLY the skeleton while the portal is loading.
 *
 * Skeleton cloak mode keeps the container AND its children visible (there is no
 * child-hide rule for it in storefront-base.css), and the portal renders its
 * shell as a SIBLING of the skeleton rather than replacing it. Without this the
 * real nav paints underneath the placeholder — two portals stacked — until the
 * account fetch resolves and portal.js removes the skeleton.
 *
 * Doing it in CSS rather than JS means it holds from first paint, before any
 * script runs. Every settle class is excluded, including cpg-cloak-timeout, so
 * if the JS never finishes the watchdog still reveals the real shell rather than
 * leaving a shimmer forever. */
html.cpg-js
  #cpg-portal[data-cpg-cloak]:not(.cpg-ready):not(.cpg-cloak-failed):not(.cpg-cloak-timeout)
  #cpg-portal-shell {
  display: none;
}

/* Belt and braces: if a settle class lands but portal.js never got to remove the
   placeholder (script error after reveal), don't leave the shimmer on screen. */
html.cpg-js #cpg-portal.cpg-ready .pc-skel-wrap,
html.cpg-js #cpg-portal.cpg-cloak-failed .pc-skel-wrap,
html.cpg-js #cpg-portal.cpg-cloak-timeout .pc-skel-wrap {
  display: none;
}

.pc-portal-skel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-space-4);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--pc-space-4) 0;
}
@media (min-width: 900px) {
  .pc-portal-skel {
    grid-template-columns: 200px 1fr;
    gap: var(--pc-space-6);
    align-items: start;
  }
}
.pc-portal-skel__nav {
  display: flex;
  flex-direction: row;
  gap: var(--pc-space-2);
}
@media (min-width: 900px) {
  .pc-portal-skel__nav {
    flex-direction: column;
  }
}
.pc-portal-skel__nav .pc-skel {
  flex: 1 1 auto;
}
.pc-portal-skel__row {
  display: flex;
  justify-content: space-between;
  gap: var(--pc-space-3);
  align-items: center;
  padding: var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  margin-bottom: var(--pc-space-3);
}
.pc-portal-skel__row .pc-skel {
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * Self-service sections (Phase 3): profile, addresses, team
 * ------------------------------------------------------------------ */

.pc-portal__form {
  max-width: var(--pc-maxw);
}
/* A form that FOLLOWS a list (Team's "Invite a teammate") needs more than the
   standard rhythm, so it reads as a separate action rather than another row. */
.pc-portal__cards + .pc-portal__form {
  margin-top: var(--pc-space-3);
  padding-top: var(--pc-space-4);
  border-top: 1px solid var(--pc-color-border);
}
.pc-portal__form .pc-btn {
  margin-top: var(--pc-space-2);
}

/* Read-only identity fields (email): styled as part of the form so it reads as
   one thing, but visibly inert so nobody tries to type in it. */
.pc-portal__readonly {
  padding: var(--pc-space-2) var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  background: #f7f6f8;
  color: var(--pc-color-muted);
  font-size: 15px;
}

.pc-portal__hint {
  color: var(--pc-color-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: var(--pc-space-1) 0 0;
}

/* Status line each section writes into, so feedback lands next to the action
   the customer just took rather than at the top of the page. */
.pc-portal__msg {
  color: var(--pc-color-muted);
  font-size: 14px;
  margin: 0;
}
/* Collapse completely when there is nothing to say. It previously held a
   1.2em min-height to avoid a reflow when a message appeared, but that reserved
   space sat under every section heading and was the main reason the sub-pages
   looked inconsistent. A small shift when you act beats a permanent gap when
   you don't. */
.pc-portal__msg:empty {
  display: none;
}
.pc-portal__msg--error {
  color: var(--pc-color-error);
}

/* --- Cards: saved addresses and team members --- */

.pc-portal__cards {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
}

.pc-portal__card {
  padding: var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  background: var(--pc-color-surface);
}

/* Team rows are one line of content plus one action. */
.pc-portal__card--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-3);
}
.pc-portal__card-main {
  min-width: 0;
}

.pc-portal__card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pc-space-2);
  margin-bottom: var(--pc-space-2);
}

.pc-portal__card-line {
  font-size: 15px;
  line-height: 1.45;
  /* A long email must not blow the card out of the grid. */
  overflow-wrap: anywhere;
}

.pc-portal__card-meta {
  color: var(--pc-color-muted);
  font-size: 14px;
  margin-top: 2px;
}

/* Default shipping / billing toggles.
   Shown on every card in both states so the either/or relationship is visible,
   and so the card that IS the default still has a control rather than a bare
   badge. The active one is deliberately inert — there is no "unset", only
   handing the default to another address. */
.pc-portal__defaults {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pc-space-2);
  margin-top: var(--pc-space-3);
}

.pc-portal__defaults-label {
  color: var(--pc-color-muted);
  font-size: 13px;
}

.pc-portal__toggle {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid var(--pc-color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--pc-color-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.pc-portal__toggle:hover:not(:disabled) {
  border-color: var(--pc-color-accent);
  color: var(--pc-color-text);
}

/* Active: reads as a filled state, and is not clickable because turning it off
   is not a thing the model supports. Full opacity despite :disabled — this is a
   current state, not an unavailable action. */
.pc-portal__toggle--on {
  background: var(--pc-color-accent);
  border-color: var(--pc-color-accent);
  color: var(--pc-color-accent-ink);
}
.pc-portal__toggle--on:disabled {
  cursor: default;
  opacity: 1;
}

.pc-portal__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f6;
  color: #40506b;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pc-portal__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-2);
  margin-top: var(--pc-space-3);
}
.pc-portal__card-actions .pc-btn {
  padding: var(--pc-space-2) var(--pc-space-3);
  font-size: 14px;
}

/* Inline confirmation, replacing the card's own buttons. Never a native
   window.confirm — that dialog is unstyled, announces the raw hostname, and
   looks like a browser security warning, which is the worst possible framing for
   "remove my payment card". Same in-place principle as inline address editing. */
.pc-portal__confirm {
  flex: 1 1 100%;
  min-width: 0;
  padding: var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-left: 3px solid var(--pc-color-error);
  border-radius: var(--pc-radius);
  background: #fdf9f9;
}

.pc-portal__confirm-text {
  margin: 0 0 var(--pc-space-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pc-color-text);
}

.pc-portal__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-2);
}
.pc-portal__confirm-actions .pc-btn {
  padding: var(--pc-space-2) var(--pc-space-3);
  font-size: 14px;
}
/* The confirming button is the committed action, so it reads solid rather than
   waiting for hover the way the initial Remove does. */
.pc-portal__confirm-actions .pc-btn--danger {
  background: var(--pc-color-error);
  border-color: var(--pc-color-error);
  color: #fff;
}
.pc-portal__confirm-actions .pc-btn--danger:hover,
.pc-portal__confirm-actions .pc-btn--danger:focus-visible {
  background: var(--pc-color-error);
  border-color: var(--pc-color-error);
  color: #fff;
  opacity: 0.9;
}

/* A team row is a flex row; let the prompt take its own full-width line. */
.pc-portal__card--row {
  flex-wrap: wrap;
}

/* Destructive actions read as destructive only on intent (hover/focus), so a
   list of saved addresses isn't a wall of red. */
.pc-btn--danger {
  background: transparent;
  color: var(--pc-color-muted);
  border-color: var(--pc-color-border);
}
.pc-btn--danger:hover,
.pc-btn--danger:focus-visible {
  background: #fdf3f2;
  border-color: var(--pc-color-error);
  color: var(--pc-color-error);
}

/* The open-balance block gained a Pay button in Phase 3 — lay it out as a row. */
.pc-portal__due {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pc-space-3);
}

/* Section header: title on the left, the section's one primary action on the
   right. The action disappears while a form is open, so there is never more
   than one way to proceed. */
.pc-portal__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pc-space-3);
}
.pc-portal__section-head .pc-portal__title {
  margin-bottom: 0;
}

/* A card in edit state. It occupies the SAME slot in the list as the card it
   replaced, so nothing below it moves — the lift and accent are what say "this
   one is open" without the page jumping. */
.pc-portal__card--editing {
  border-color: var(--pc-color-accent);
  box-shadow: var(--pc-shadow);
}

.pc-portal__card-title {
  font-family: var(--pc-font-heading);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--pc-space-3);
}

.pc-portal__card--editing .pc-field:last-of-type {
  margin-bottom: 0;
}

/* City / State / ZIP read as one address line rather than three stacked fields. */
.pc-portal__field-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pc-space-3);
}

/* --- Card wallet (Payment methods) --- */

/* The card-entry fields come from the shared cpgCardMount component, which the
   checkout and pay-freight pages also use. It brings its own .pc-card styling;
   this only gives it room inside the portal's card shell. */
.pc-portal__cardmount {
  margin-bottom: var(--pc-space-3);
}

/* Default choices inside the address form, separated from the address fields
   so they read as settings about the address rather than more of it. */
.pc-portal__form-defaults {
  margin: var(--pc-space-3) 0;
  padding-top: var(--pc-space-3);
  border-top: 1px solid var(--pc-color-border);
}
.pc-portal__form-defaults .pc-portal__hint {
  margin-top: var(--pc-space-2);
}
/* A locked box means "already the default", not "unavailable", so keep it
   legible rather than greying it out. */
.pc-portal__checkbox input:disabled {
  opacity: 1;
}
.pc-portal__checkbox--locked {
  cursor: default;
}

.pc-portal__checkbox {
  display: flex;
  align-items: center;
  gap: var(--pc-space-2);
  font-size: 14px;
  margin-bottom: var(--pc-space-2);
  cursor: pointer;
}
.pc-portal__checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .pc-portal__card--row {
    flex-direction: column;
    align-items: stretch;
  }
  .pc-portal__card-actions .pc-btn,
  .pc-portal__card--row .pc-btn,
  .pc-portal__due .pc-btn {
    flex: 1 1 auto;
  }
  /* Three fields across is too tight to type into on a phone. */
  .pc-portal__field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- *
 * Artwork & files (order detail, per line)
 * ---------------------------------------------------------------- */

.pc-btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}

.pc-artwork {
  margin: -6px 0 14px;
  padding: 10px 12px 12px;
  border: 1px dashed #d5d8dc;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fafbfc;
}

.pc-artwork__nudge {
  border-color: #e0a94a;
  background: #fdf7ec;
  color: #7a5c14;
}

.pc-artwork__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  flex-wrap: wrap;
}

.pc-artwork__row--required .pc-artwork__slot {
  color: #a9761c;
  font-weight: 600;
}

.pc-artwork__slot {
  font-size: 13px;
  color: #4a5158;
  min-width: 120px;
}

.pc-artwork__label-input {
  flex: 1 1 200px;
  min-width: 160px;
  padding: 7px 10px;
  border: 1px solid #d5d8dc;
  border-radius: 6px;
  font-size: 13px;
}

.pc-artwork__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pc-artwork__prompt {
  margin: 2px 0 10px;
  font-size: 14px;
  color: #4a5158;
}

/* One file = one bounded row: label-as-title + muted meta on the left,
   the action alone on the right. */
.pc-artwork__file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #e5e9ed;
  border-radius: 8px;
  font-size: 14px;
}

.pc-artwork__file-main {
  flex: 1 1 auto;
  min-width: 0;
}

.pc-artwork__file-title {
  display: block;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-artwork__file-title:hover {
  text-decoration: underline;
}

.pc-artwork__file-meta {
  margin-top: 2px;
  font-size: 12px;
  color: #8c9196;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-artwork__file-actions {
  margin-left: auto;
  flex: 0 0 auto;
}

.pc-artwork__row--reuse {
  border-top: 1px dashed #e5e9ed;
  margin-top: 4px;
  padding-top: 10px;
}

.pc-artwork__reuse-select {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 7px 10px;
  border: 1px solid #d5d8dc;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}

/* Staged upload: file picked, label asked FIRST, nothing uploads until Upload. */
.pc-artwork__row--staged {
  background: #fff;
  border: 1px solid #d5d8dc;
  border-radius: 8px;
  padding: 10px 12px;
}

.pc-artwork__stage-name {
  flex: 1 1 100%;
  font-size: 13px;
  font-weight: 600;
  color: #3a4149;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline action errors: render inside the row acted on (full-width wrap line),
   so feedback is where the customer is looking and nothing above moves. */
.pc-artwork__err {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font-size: 12px;
  color: #b3261e;
}

/* Designer hand-off row under the items. */
.pc-artwork__handoff {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
  padding: 10px 14px;
  border: 1px solid #e5e9ed;
  border-radius: 8px;
  background: #f7f9fb;
  font-size: 13px;
  color: #4a5158;
}

.pc-artwork__handoff .pc-btn {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Upload limits hint under the add row. */
.pc-artwork__hint {
  margin: 2px 0 4px;
  font-size: 11px;
  color: #9aa2ab;
}

/* Order-detail view switcher: Order | Receipt | Files. */
.pc-portal__viewswitch {
  display: flex;
  gap: 4px;
  margin: 4px 0 18px;
  border-bottom: 1px solid #e5e9ed;
}

.pc-portal__viewswitch-link {
  padding: 8px 14px;
  font-size: 14px;
  color: #4a5158;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.pc-portal__viewswitch-link:hover {
  color: #1a1f24;
}

.pc-portal__viewswitch-link--active {
  color: #1a1f24;
  font-weight: 600;
  border-bottom-color: #2d6cdf;
}

/* Printing the Receipt view: just the record — no nav, no switcher, no buttons. */
@media print {
  .pc-portal__nav,
  .pc-portal__viewswitch,
  .pc-portal__back,
  .pc-portal__card-actions,
  .pc-artwork__handoff {
    display: none !important;
  }
}

/* Order progress tracker: where the order IS. */
.pc-portal__progress {
  display: flex;
  margin: 4px 0 20px;
  padding: 16px 12px;
  border: 1px solid #e5e9ed;
  border-radius: 10px;
  background: #fff;
}

.pc-portal__progress-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.pc-portal__progress-step::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #e5e9ed;
}

.pc-portal__progress-step:first-child::before {
  display: none;
}

.pc-portal__progress-step--done::before,
.pc-portal__progress-step--current::before {
  background: #2d6cdf;
}

.pc-portal__progress-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5e9ed;
  position: relative;
  z-index: 1;
}

.pc-portal__progress-step--done .pc-portal__progress-dot,
.pc-portal__progress-step--current .pc-portal__progress-dot {
  background: #2d6cdf;
}

.pc-portal__progress-step--current .pc-portal__progress-dot {
  box-shadow: 0 0 0 4px rgba(45, 108, 223, 0.18);
}

.pc-portal__progress-label {
  font-size: 12px;
  color: #8c9196;
  text-align: center;
}

.pc-portal__progress-step--current .pc-portal__progress-label {
  color: #1a1f24;
  font-weight: 600;
}

.pc-portal__cancelled {
  margin: 4px 0 20px;
  padding: 12px 16px;
  border: 1px solid #d5d8dc;
  border-radius: 10px;
  background: #f7f8f9;
  color: #6b7280;
}

/* Compact order summary card on the Order view. */
.pc-portal__order-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #e5e9ed;
  border-radius: 10px;
  background: #fff;
}

.pc-portal__order-summary-main {
  flex: 1 1 auto;
  min-width: 0;
}

.pc-portal__order-summary-items {
  font-weight: 600;
}

.pc-portal__order-summary-titles {
  margin-top: 2px;
  font-size: 13px;
  color: #8c9196;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-portal__order-summary-links {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.pc-portal__order-summary-links .pc-btn {
  text-decoration: none;
}

/* "Waiting on you" — the one callout for everything we need from the customer. */
.pc-portal__waiting {
  border: 2px solid #e0a94a;
  border-radius: 10px;
  margin: 0 0 18px;
  overflow: hidden;
}

.pc-portal__waiting-head {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fdf7ec;
  padding: 10px 14px;
  font-weight: 700;
  color: #7a5c14;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pc-portal__waiting-count {
  background: #e0a94a;
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  padding: 1px 8px;
}

.pc-portal__waiting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #f4e3bd;
  font-size: 13px;
  flex-wrap: wrap;
}

.pc-portal__waiting-main {
  flex: 1 1 260px;
  min-width: 0;
}

.pc-portal__waiting-what {
  font-weight: 600;
  color: #1a1f24;
}

.pc-portal__waiting-why {
  color: #8c9196;
  font-size: 12px;
  margin-top: 1px;
}

.pc-portal__waiting-row .pc-btn {
  margin-left: auto;
  flex: 0 0 auto;
  text-decoration: none;
}

.pc-portal__allclear {
  border: 1px solid #cfe8d8;
  background: #f0f9f4;
  color: #1f7a44;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 18px;
}

/* Softer Waiting-on-you rows (no formal requirement, just "no files yet"). */
.pc-portal__waiting-row--soft .pc-portal__waiting-what {
  font-weight: 500;
  color: #4a5158;
}

/* The hidden attribute must WIN over layout display rules — signed-out state
   hides the section nav entirely (sign-in view stands alone; client feedback
   2026-08-24: no menu alongside the sign-in form). */
.pc-portal__nav[hidden],
.pc-portal__signin[hidden],
#cpg-portal-view[hidden] {
  display: none !important;
}

/* Sign-in card — mirrors the magic-link "Welcome back" interstitial's design
   tokens (accounts/rest.php) so the two auth moments read as one system. */
.pc-portal__signin {
  display: flex;
  justify-content: center;
  padding: 40px 12px 60px;
  width: 100%;
  margin: 0 auto;
}

.pc-signin-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid #e4e2e6;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(40, 40, 42, 0.08), 0 8px 24px rgba(40, 40, 42, 0.10);
  padding: 40px 32px 28px;
  text-align: center;
}

.pc-signin-card__logo {
  height: 34px;
  width: auto;
  margin: 0 auto 24px;
  display: block;
}

.pc-signin-card__title {
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 8px;
  color: #28282a;
}

.pc-signin-card__lock {
  vertical-align: -2px;
  margin-right: 8px;
}

.pc-signin-card__intro {
  color: #6b6b70;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 24px;
}

.pc-signin-card__input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid #e4e2e6;
  border-radius: 8px;
  font-size: 15px;
  margin: 0 0 12px;
  text-align: center;
}

.pc-signin-card__input:focus {
  outline: 2px solid #28282a;
  outline-offset: -1px;
}

.pc-signin-card__act {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid #28282a;
  border-radius: 8px;
  background: #28282a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

.pc-signin-card__act:hover {
  opacity: 0.88;
}

.pc-signin-card__act:disabled {
  opacity: 0.6;
  cursor: default;
}

.pc-signin-card__msg {
  min-height: 1.2em;
  margin: 12px 0 0;
  font-size: 13px;
  color: #28282a;
}

.pc-signin-card__reassure {
  margin: 14px 0 0;
  font-size: 12px;
  color: #9a9aa0;
}

/* Signed-out: one column — the hidden nav must not keep its grid track, or the
   sign-in card gets squeezed into the 200px sidebar slot. */
.pc-portal--signedout {
  grid-template-columns: 1fr !important;
}

/* Files-needed nudge strip on order rows — same grammar as shipping-due. */
.pc-portal__nudge--files {
  border-color: #e0a94a;
  background: #fdf7ec;
  color: #7a5c14;
}

/* Artwork-missing pill — same grammar as the Shipping due pill. */
.pc-portal__pill--artwork {
  background: #f6e6c4;
  color: #a9761c;
}

/* Shipping tab — per-order shipments (approved mockup v2). */
.pc-portal__shipband {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid #e0a94a;
  background: #fdf7ec;
  border-radius: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pc-portal__shipband-total {
  font-weight: 700;
  font-size: 16px;
  color: #1a1f24;
}

.pc-portal__shipband-note {
  font-size: 12px;
  color: #8a6d1f;
  margin-top: 1px;
}

.pc-portal__shipband .pc-btn {
  margin-left: auto;
}

.pc-portal__shipment {
  border: 1px solid #e5e9ed;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}

.pc-portal__shipment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #f7f9fb;
  border-bottom: 1px solid #eef1f4;
}

.pc-portal__shipment-name {
  font-weight: 700;
  color: #1a1f24;
}

.pc-portal__shipment-head .pc-portal__pill {
  margin-left: auto;
}

.pc-portal__pill--due {
  background: #f6e6c4;
  color: #a9761c;
}

.pc-portal__pill--paid {
  background: #e4f4ea;
  color: #1f7a44;
}

.pc-portal__shipment-body {
  padding: 12px 14px;
}

.pc-portal__shipment-items {
  color: #4a5158;
  font-size: 13px;
  margin: 0 0 6px;
}

.pc-portal__shipment-meta {
  color: #8c9196;
  font-size: 12px;
  margin: 0 0 10px;
}

.pc-portal__shipment-track {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 10px;
  background: #f7f9fb;
  border-radius: 7px;
  margin-bottom: 10px;
}

.pc-portal__shipment-track code {
  font-weight: 600;
  color: #1a1f24;
  background: none;
}

.pc-portal__shipment-track--pending {
  color: #9aa2ab;
  font-style: italic;
}

.pc-portal__shipment-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pc-portal__shipment-amt {
  font-weight: 700;
  font-size: 15px;
  color: #1a1f24;
}

.pc-portal__shipment-actions .pc-btn {
  margin-left: auto;
}

/* Shipping payment review + success (money moves only from the review). */
.pc-portal__review {
  border: 1px solid #e5e9ed;
  border-radius: 10px;
  padding: 4px 16px;
  margin: 0 0 14px;
  background: #fff;
}

.pc-portal__review-row {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #eef1f4;
  font-size: 13px;
  align-items: center;
}

.pc-portal__review-what {
  font-weight: 600;
  color: #1a1f24;
}

.pc-portal__review-items {
  color: #8c9196;
  font-size: 12px;
  margin-top: 1px;
}

.pc-portal__review-amt {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
}

.pc-portal__review-total {
  display: flex;
  padding: 12px 0;
  font-weight: 700;
  font-size: 15px;
  color: #1a1f24;
}

.pc-portal__review-total span:last-child {
  margin-left: auto;
}

.pc-portal__review-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f7f9fb;
  border: 1px solid #e5e9ed;
  border-radius: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  flex-wrap: wrap;
}

.pc-portal__review-change {
  margin-left: auto;
  font-size: 12px;
}

.pc-portal__review-confirm {
  width: 100%;
  padding: 13px 20px;
  font-size: 15px;
}

.pc-portal__review-cancel {
  width: 100%;
  margin-top: 8px;
  border: none;
  background: none;
  color: #6b7280;
}

.pc-portal__paydone {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.pc-portal__paydone-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e4f4ea;
  color: #1f7a44;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 6px auto 12px;
}

.pc-portal__paydone-head {
  font-size: 20px;
  margin: 0 0 4px;
}

.pc-portal__paydone-sub {
  color: #8c9196;
  font-size: 13px;
  margin: 0 0 14px;
}

.pc-portal__paydone-line {
  display: flex;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f4;
  text-align: left;
}

.pc-portal__paydone-line span:last-child {
  margin-left: auto;
}

.pc-portal__paydone-ok {
  color: #1f7a44;
  font-weight: 600;
}

.pc-portal__paydone-fail {
  color: #b3261e;
  font-size: 12px;
}

.pc-portal__paydone-note {
  font-size: 12px;
  color: #8c9196;
  margin: 14px 0;
}

.pc-portal__payment-meta { font-size: 12px; color: #8c9196; margin-top: 2px; }
.pc-portal__disclosure { margin-top: 20px; font-size: 12px; color: #8c9196; }

/* Turnstile mount (sign-in card): twin of the rule in orders/assets/checkout.css
   — keep in sync. Empty/invisible states reserve no space; a visible puzzle
   centers with breathing room. */
.pc-turnstile {
  display: flex;
  justify-content: center;
}
.pc-turnstile:empty {
  display: none;
}
.pc-turnstile > * {
  margin: 16px 0;
  width: 100%; /* size:'flexible' fills the container */
}