/* ==========================================================================
   Spartans Print Lab — brand system

   Two surfaces, one palette:
     Storefront  light cream ground, dark hero and feature bands, red CTAs
     Admin       dark throughout, red reserved for the primary action and
                 anything overdue, so it still means something on a dense screen

   Scope admin pages with .pl-admin on the layout root. Everything else is
   storefront by default.
   ========================================================================== */

:root {
  /* Spartan reds */
  --pl-red: #D62027;
  --pl-red-bright: #E8262E;
  --pl-red-dark: #A8171D;
  --pl-red-tint: rgba(214, 32, 39, 0.12);

  /* Inks. Not pure black: a hair of blue keeps large fills from looking flat. */
  --pl-ink: #101114;
  --pl-ink-2: #17191D;
  --pl-ink-3: #1F2228;
  --pl-ink-4: #282C33;

  /* Paper */
  --pl-cream: #F3EDE1;
  --pl-cream-2: #FBF8F2;
  --pl-white: #FFFFFF;

  --pl-silver: #B9BEC4;

  /* Text */
  --pl-text: #16181C;
  --pl-text-soft: #4B525C;
  --pl-text-muted: #767E8A;
  --pl-text-on-dark: #F1EDE5;
  --pl-text-on-dark-soft: #AEB5BF;
  --pl-text-on-dark-muted: #79808B;

  /* Lines */
  --pl-line: #E2DACA;
  --pl-line-strong: #CFC4AE;
  --pl-line-dark: #2B2F36;
  --pl-line-dark-soft: #23262C;

  /* Status. Separate from the brand red so severity reads on its own. */
  --pl-green: #2FA05E;
  --pl-amber: #E9A43C;
  --pl-blue: #3E86C8;
  --pl-purple: #8A6FD1;
  --pl-grey: #7A8089;

  /* Type */
  --pl-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --pl-script: "Caveat Brush", "Segoe Script", cursive;
  --pl-body: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
  --pl-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;

  --pl-radius: 4px;
  --pl-radius-lg: 8px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html, body {
  margin: 0;
  font-family: var(--pl-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pl-text);
  background: var(--pl-cream-2);
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; }

a { color: var(--pl-red); }

:focus-visible {
  outline: 3px solid var(--pl-red);
  outline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.pl-display {
  font-family: var(--pl-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}

/* The brush script the brand uses for asides. Never for anything a customer
   has to read carefully -- it is a voice, not a typeface for data. */
.pl-script {
  font-family: var(--pl-script);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.pl-eyebrow {
  font-family: var(--pl-condensed);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pl-slash {
  display: inline-block;
  height: 5px;
  width: 84px;
  background: var(--pl-red);
  transform: skewX(-18deg);
}

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */

.pl-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.pl-wordmark__crest {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pl-red);
  color: #fff;
  font-family: var(--pl-display);
  font-size: 1.35rem;
  line-height: 1;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.pl-wordmark__text { display: flex; flex-direction: column; line-height: 1; }

.pl-wordmark__name {
  font-family: var(--pl-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pl-wordmark__name em { font-style: normal; color: var(--pl-red); }

.pl-wordmark__tag {
  font-family: var(--pl-condensed);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pl-text-muted);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--pl-radius);
  font-family: var(--pl-condensed);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.pl-btn--primary { background: var(--pl-red); color: #fff; }
.pl-btn--primary:hover { background: var(--pl-red-bright); }

.pl-btn--light { background: var(--pl-cream-2); color: var(--pl-ink); }
.pl-btn--light:hover { background: #fff; }

.pl-btn--ghost { background: transparent; color: var(--pl-text-on-dark); border-color: rgba(255,255,255,0.4); }
.pl-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.pl-btn--sm { padding: 9px 16px; font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   Storefront — header
   -------------------------------------------------------------------------- */

.pl-shell { min-height: 100vh; display: flex; flex-direction: column; }
.pl-shell > main { flex: 1; }

.pl-header {
  background: var(--pl-ink);
  color: var(--pl-text-on-dark);
  border-bottom: 3px solid var(--pl-red);
  position: sticky;
  top: 0;
  z-index: 30;
}

.pl-header__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 10px clamp(16px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: 24px;
}

.pl-header .pl-wordmark__tag { color: var(--pl-text-on-dark-muted); }

.pl-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.pl-header__link {
  padding: 9px 14px;
  border-radius: var(--pl-radius);
  font-family: var(--pl-condensed);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-text-on-dark);
  text-decoration: none;
  white-space: nowrap;
}

.pl-header__link:hover,
.pl-header__link.active { background: rgba(255, 255, 255, 0.1); color: #fff; }

.pl-header__tools { display: flex; align-items: center; gap: 6px; }

.pl-header__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--pl-text-on-dark);
  border-radius: 50%;
  position: relative;
  text-decoration: none;
}
.pl-header__icon:hover { background: rgba(255,255,255,0.1); }

.pl-header__badge {
  position: absolute; top: 3px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px;
  background: var(--pl-red);
  color: #fff;
  font-family: var(--pl-body);
  font-size: 0.65rem; font-weight: 700;
  display: grid; place-items: center;
}

@media (max-width: 1080px) {
  .pl-header__nav { display: none; }
}

/* --------------------------------------------------------------------------
   Storefront — hero
   -------------------------------------------------------------------------- */

.pl-hero {
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(214, 32, 39, 0.20), transparent 62%),
    linear-gradient(180deg, #16181C 0%, var(--pl-ink) 100%);
  color: var(--pl-text-on-dark);
  overflow: hidden;
}

.pl-hero__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(36px, 6vw, 72px) clamp(16px, 3vw, 28px) clamp(28px, 4vw, 44px);
}

.pl-hero__title {
  font-family: var(--pl-display);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.005em;
  margin: 0;
  font-size: clamp(2.9rem, 9vw, 6.4rem);
  text-wrap: balance;
}

.pl-hero__title .line-red { color: var(--pl-red); display: block; }
.pl-hero__title .line-cream { color: var(--pl-cream); display: block; }

.pl-hero__script {
  font-family: var(--pl-script);
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  color: #fff;
  margin: 10px 0 0;
  line-height: 1.05;
}

.pl-hero__services {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 22px 0 0; padding: 0; list-style: none;
  font-family: var(--pl-condensed);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-text-on-dark-soft);
  font-size: 0.95rem;
}

.pl-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* --------------------------------------------------------------------------
   Storefront — audience strip
   -------------------------------------------------------------------------- */

.pl-audiences {
  background: var(--pl-ink-2);
  border-top: 1px solid var(--pl-line-dark);
}

.pl-audiences__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pl-audience {
  padding: 20px 14px;
  text-align: center;
  color: var(--pl-text-on-dark-soft);
  text-decoration: none;
  border-right: 1px solid var(--pl-line-dark);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

.pl-audience:last-child { border-right: 0; }
.pl-audience:hover { background: rgba(255,255,255,0.05); color: #fff; }

.pl-audience__label {
  font-family: var(--pl-condensed);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Storefront — category tiles
   -------------------------------------------------------------------------- */

.pl-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px;
  background: var(--pl-line);
  border-block: 2px solid var(--pl-ink);
}

.pl-category {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  text-decoration: none;
  color: var(--pl-text-on-dark);
  background: linear-gradient(160deg, var(--pl-ink-3), var(--pl-ink));
  overflow: hidden;
}

.pl-category::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.75) 100%);
}

.pl-category__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(214, 32, 39, 0.5);
  transition: transform 220ms ease;
}

.pl-category:hover .pl-category__art { transform: scale(1.06); }

.pl-category__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  font-family: var(--pl-condensed);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   Storefront — how it works
   -------------------------------------------------------------------------- */

.pl-steps { background: var(--pl-cream); }

.pl-steps__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 22px clamp(16px, 3vw, 28px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
}

.pl-steps__title {
  font-family: var(--pl-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
  max-width: 6ch;
}

.pl-steps__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 4px;
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
}

.pl-step { display: flex; align-items: center; gap: 10px; padding-right: 8px; }

.pl-step__n {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pl-red);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--pl-body);
  font-weight: 700;
  font-size: 0.9rem;
}

.pl-step__label {
  font-family: var(--pl-condensed);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
}

.pl-step__arrow { color: var(--pl-line-strong); }

.pl-steps__kicker {
  font-family: var(--pl-script);
  font-size: 1.5rem;
  color: var(--pl-red);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Storefront — footer
   -------------------------------------------------------------------------- */

.pl-footer {
  background: var(--pl-ink);
  color: var(--pl-text-on-dark-soft);
  border-top: 3px solid var(--pl-red);
}

.pl-footer__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 26px clamp(16px, 3vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.pl-footer__script {
  font-family: var(--pl-script);
  font-size: 1.35rem;
  color: var(--pl-cream);
}

.pl-footer__links { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }

.pl-footer__links a {
  color: var(--pl-text-on-dark-soft);
  text-decoration: none;
  font-family: var(--pl-condensed);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.pl-footer__links a:hover { color: #fff; }

/* ==========================================================================
   Admin
   ========================================================================== */

.pl-admin {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background: var(--pl-ink);
  color: var(--pl-text-on-dark);
}

/* --- sidebar -------------------------------------------------------------- */

.pl-side {
  background: var(--pl-ink-2);
  border-right: 1px solid var(--pl-line-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* The sidebar is 232px, so the mark is set smaller here and allowed to break onto
   two lines rather than being squeezed against the crest. */
.pl-side__brand { padding: 18px 14px 14px; }
.pl-side__brand .pl-wordmark { gap: 9px; }

.pl-side__brand .pl-wordmark__crest {
  width: 34px;
  height: 34px;
  font-size: 1.05rem;
  border-width: 2px;
}

.pl-side__brand .pl-wordmark__name {
  font-size: 1rem;
  line-height: 1.08;
}

.pl-side__brand .pl-wordmark__tag { color: var(--pl-text-on-dark-muted); }

.pl-side__nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }

.pl-side__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--pl-radius);
  color: var(--pl-text-on-dark-soft);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.2;
}

.pl-side__link:hover { background: rgba(255,255,255,0.06); color: #fff; }

.pl-side__link.active {
  background: var(--pl-red);
  color: #fff;
  font-weight: 600;
}

.pl-side__foot {
  margin-top: auto;
  padding: 18px 16px;
  font-family: var(--pl-script);
  font-size: 1.15rem;
  color: var(--pl-text-on-dark-muted);
  line-height: 1.15;
}

/* --- top bar -------------------------------------------------------------- */

.pl-admin__main { min-width: 0; display: flex; flex-direction: column; }

.pl-topbar {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px clamp(16px, 2.4vw, 28px) 4px;
}

.pl-topbar__greeting { font-family: var(--pl-display); font-size: 1.5rem; margin: 0; text-transform: none; }
.pl-topbar__sub { color: var(--pl-text-on-dark-muted); font-size: 0.9rem; margin: 2px 0 0; }
.pl-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.pl-topbar__date { color: var(--pl-text-on-dark-muted); font-size: 0.86rem; white-space: nowrap; }

.pl-admin__body { padding: 16px clamp(16px, 2.4vw, 28px) 40px; }

/* --- stat tiles ----------------------------------------------------------- */

.pl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.pl-stat {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  background: var(--pl-ink-3);
  border: 1px solid var(--pl-line-dark);
  border-radius: var(--pl-radius-lg);
  text-decoration: none;
  color: inherit;
}

.pl-stat:hover { border-color: var(--pl-ink-4); background: #232830; }

.pl-stat__icon {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: var(--pl-radius);
  display: grid; place-items: center;
}

.pl-stat__icon--green { background: rgba(47, 160, 94, 0.18); color: var(--pl-green); }
.pl-stat__icon--amber { background: rgba(233, 164, 60, 0.18); color: var(--pl-amber); }
.pl-stat__icon--blue { background: rgba(62, 134, 200, 0.18); color: var(--pl-blue); }
.pl-stat__icon--red { background: var(--pl-red-tint); color: var(--pl-red-bright); }

/* Both are spans so they can sit inside a link, so they need making block-level
   explicitly -- left inline, the number and its caption run together on one line. */
.pl-stat__value {
  display: block;
  font-family: var(--pl-display);
  font-size: 1.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pl-stat__label {
  display: block;
  font-size: 0.82rem;
  color: var(--pl-text-on-dark-muted);
  line-height: 1.25;
  margin-top: 3px;
}

/* --- panels --------------------------------------------------------------- */

.pl-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-bottom: 14px;
}

.pl-panel {
  background: var(--pl-ink-2);
  border: 1px solid var(--pl-line-dark);
  border-radius: var(--pl-radius-lg);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pl-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--pl-line-dark-soft);
}

.pl-panel__title {
  font-family: var(--pl-condensed);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.pl-panel__action {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--pl-red-bright);
  text-decoration: none;
  font-weight: 600;
}

.pl-panel__action:hover { text-decoration: underline; }

.pl-panel__body { padding: 14px 16px; }
.pl-panel__body--flush { padding: 0; }

/* --- tables --------------------------------------------------------------- */

.pl-tablewrap { overflow-x: auto; }

.pl-table { width: 100%; border-collapse: collapse; min-width: 560px; }

.pl-table th {
  text-align: left;
  padding: 9px 14px;
  font-family: var(--pl-condensed);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-text-on-dark-muted);
  border-bottom: 1px solid var(--pl-line-dark);
  white-space: nowrap;
}

.pl-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--pl-line-dark-soft);
  font-size: 0.9rem;
  vertical-align: middle;
}

.pl-table tbody tr:last-child td { border-bottom: 0; }
.pl-table tbody tr:hover { background: rgba(255,255,255,0.035); }
.pl-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.pl-table .ref { font-variant-numeric: tabular-nums; color: var(--pl-text-on-dark-soft); white-space: nowrap; }

/* --- status pills --------------------------------------------------------- */

.pl-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
}

.pl-pill--blue { background: var(--pl-blue); }
.pl-pill--green { background: var(--pl-green); }
.pl-pill--amber { background: var(--pl-amber); color: #26200F; }
.pl-pill--red { background: var(--pl-red); }
.pl-pill--purple { background: var(--pl-purple); }
.pl-pill--grey { background: var(--pl-grey); }

/* --- empty states --------------------------------------------------------- */

.pl-empty {
  padding: 34px 18px;
  text-align: center;
  color: var(--pl-text-on-dark-muted);
}

.pl-empty__title {
  font-family: var(--pl-condensed);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-text-on-dark-soft);
  margin: 10px 0 4px;
}

.pl-empty__body { font-size: 0.88rem; margin: 0 auto; max-width: 42ch; }
.pl-empty__actions { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .pl-admin { grid-template-columns: 1fr; }

  .pl-side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--pl-line-dark);
  }

  .pl-side__nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 12px;
  }

  .pl-side__foot { display: none; }
}

/* Blazor's disconnect banner, restyled so it does not appear unbranded. */
#blazor-error-ui {
  background: var(--pl-red);
  color: #fff;
  bottom: 0;
  display: none;
  left: 0;
  padding: 12px 18px;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-weight: 600;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; }
#blazor-error-ui a { color: #fff; }

/* ==========================================================================
   Customer quote page (/q/{token})

   Unauthenticated, and often opened on a phone from an email. Light ground
   rather than the admin dark: this is a document a customer reads and signs,
   not a console they operate.
   ========================================================================== */

.pl-quote {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: clamp(14px, 4vw, 28px);
  padding-block: clamp(22px, 5vw, 46px);
}

.pl-quote__card {
  background: var(--pl-white);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-lg);
  padding: clamp(18px, 4vw, 34px);
  box-shadow: 0 1px 3px rgba(16, 17, 20, 0.06);
}

.pl-quote__card--message { text-align: center; padding-block: 56px; }

.pl-quote__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.pl-quote__outcome {
  text-align: center;
  padding: 22px 16px;
  margin-bottom: 22px;
  background: var(--pl-cream);
  border-radius: var(--pl-radius);
}

.pl-quote__meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  font-size: 0.94rem;
}

.pl-quote__tablewrap { overflow-x: auto; }

.pl-quote__table { width: 100%; border-collapse: collapse; min-width: 480px; }

.pl-quote__table th {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 2px solid var(--pl-ink);
  font-family: var(--pl-condensed);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-text-muted);
  white-space: nowrap;
}

.pl-quote__table td {
  padding: 11px 6px;
  border-bottom: 1px solid var(--pl-line);
  vertical-align: top;
  font-size: 0.94rem;
}

.pl-quote__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pl-quote__totals {
  margin-left: auto;
  margin-top: 16px;
  max-width: 300px;
}

.pl-quote__totalrow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.pl-quote__totalrow span:first-child { color: var(--pl-text-soft); }

.pl-quote__totalrow--grand {
  border-top: 2px solid var(--pl-ink);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 1.05rem;
  font-weight: 700;
}

.pl-quote__totalrow--grand span:first-child { color: var(--pl-ink); }
.pl-quote__totalrow--grand span:last-child { color: var(--pl-red); font-size: 1.35rem; }

.pl-quote__notes {
  margin-top: 22px;
  background: var(--pl-cream);
  border-radius: var(--pl-radius);
  padding: 14px 16px;
}

.pl-quote__respond {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 3px solid var(--pl-red);
}

.pl-quote__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* The decline button is deliberately quiet but not hidden: burying it makes people
   abandon the page instead of telling the shop no, which is worse than a decline. */
.pl-btn--outline {
  background: transparent;
  color: var(--pl-text-soft);
  border-color: var(--pl-line-strong);
}

.pl-btn--outline:hover { border-color: var(--pl-ink); color: var(--pl-ink); }

.pl-quote__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--pl-line);
  font-size: 0.85rem;
  color: var(--pl-text-muted);
}

/* ==========================================================================
   Production board

   Columns scroll sideways rather than wrapping: a shop floor reads a board
   left to right as work moves, and a column that has jumped to a second row
   is a column nobody looks at.
   ========================================================================== */

.pl-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: start;
}

.pl-board__col {
  background: var(--pl-ink-2);
  border: 1px solid var(--pl-line-dark);
  border-radius: var(--pl-radius-lg);
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 230px);
}

.pl-board__colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--pl-line-dark-soft);
  font-family: var(--pl-condensed);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pl-board__count {
  font-family: var(--pl-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pl-text-on-dark-muted);
  background: var(--pl-ink-3);
  border-radius: 10px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.pl-board__count.over { background: var(--pl-red-tint); color: var(--pl-red-bright); }

.pl-board__warn {
  padding: 7px 14px;
  font-size: 0.78rem;
  color: var(--pl-red-bright);
  background: var(--pl-red-tint);
}

.pl-board__cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
}

.pl-board__empty {
  padding: 18px 8px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--pl-text-on-dark-muted);
}

/* --- job card ------------------------------------------------------------- */

.pl-jobcard {
  background: var(--pl-ink-3);
  border: 1px solid var(--pl-line-dark);
  border-left: 3px solid var(--pl-line-dark);
  border-radius: var(--pl-radius);
  padding: 10px 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pl-jobcard:hover { background: #232830; border-color: var(--pl-ink-4); }

/* The only red on the board. A late job has to be the thing the eye lands on. */
.pl-jobcard--late { border-left-color: var(--pl-red); }

.pl-jobcard__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

.pl-jobcard__num {
  font-family: var(--pl-mono, var(--pl-body));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pl-text-on-dark-muted);
  font-variant-numeric: tabular-nums;
}

.pl-jobcard__desc { font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.pl-jobcard__cust { font-size: 0.8rem; color: var(--pl-text-on-dark-muted); }

.pl-jobcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.78rem;
  color: var(--pl-text-on-dark-soft);
  font-variant-numeric: tabular-nums;
}

.pl-jobcard__station {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--pl-blue);
}

.pl-jobcard__progress {
  height: 3px;
  background: var(--pl-ink);
  border-radius: 2px;
  overflow: hidden;
}

.pl-jobcard__bar { height: 100%; background: var(--pl-green); }

.pl-jobcard__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--pl-text-on-dark-muted);
}

.pl-jobcard__foot .late { color: var(--pl-red-bright); font-weight: 600; }
.pl-jobcard__foot .soon { color: var(--pl-amber); font-weight: 600; }

/* --- task run on the job page --------------------------------------------- */

.pl-task {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pl-line-dark-soft);
}

.pl-task:last-child { border-bottom: 0; }
.pl-task--done { opacity: 0.6; }

.pl-task__seq {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 2px solid var(--pl-line-dark);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.pl-task__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.pl-task__station { font-size: 0.8rem; color: var(--pl-text-on-dark-muted); }
.pl-task__mins { font-size: 0.8rem; color: var(--pl-text-on-dark-muted); margin-left: auto; }

.pl-task__instr {
  font-size: 0.85rem;
  color: var(--pl-text-on-dark-soft);
  margin-bottom: 6px;
}

.pl-task__blocked {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--pl-red-bright);
  background: var(--pl-red-tint);
  border-radius: var(--pl-radius);
  padding: 5px 9px;
  margin-bottom: 6px;
}

.pl-task__people { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }

.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--pl-line-dark);
  background: var(--pl-ink-3);
  color: var(--pl-text-on-dark-soft);
}

.pl-chip--add { cursor: pointer; border-style: dashed; }
.pl-chip--add:hover { color: #fff; border-color: var(--pl-red); }

.pl-chip__x {
  border: 0; background: transparent; cursor: pointer;
  color: var(--pl-text-on-dark-muted);
  font-size: 0.95rem; line-height: 1; padding: 0;
}

.pl-chip__x:hover { color: var(--pl-red-bright); }

.pl-task__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- station board: day picker and drag targets --------------------------- */

.pl-daypick {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pl-line-dark);
  border-radius: var(--pl-radius);
  overflow: hidden;
}

.pl-daypick__step,
.pl-daypick__label {
  border: 0;
  background: var(--pl-ink-3);
  color: var(--pl-text-on-dark-soft);
  cursor: pointer;
  font-family: var(--pl-condensed);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.pl-daypick__step { padding: 6px 12px; font-size: 1.1rem; line-height: 1; }
.pl-daypick__label { padding: 6px 14px; font-size: 0.9rem; min-width: 104px; }

.pl-daypick__step:hover,
.pl-daypick__label:hover { background: var(--pl-ink-4); color: #fff; }

/* Only cards that can actually move show the grab cursor. Offering the gesture
   on finished work and then refusing the drop is worse than not offering it. */
.pl-jobcard--draggable { cursor: grab; }
.pl-jobcard--draggable:active { cursor: grabbing; }

.pl-board__col--over {
  border-color: var(--pl-red);
  background: var(--pl-red-tint);
}

.pl-board__col--over .pl-board__cards { outline: 2px dashed var(--pl-red); outline-offset: -6px; }

/* --- running clock -------------------------------------------------------- */

.pl-clock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  margin-bottom: 14px;
  background: rgba(47, 160, 94, 0.14);
  border: 1px solid var(--pl-green);
  border-radius: var(--pl-radius);
}

/* A slow pulse, not a fast one: it should read as "this is live" from across the
   shop without being the thing you keep looking at. */
.pl-clock__dot {
  width: 10px; height: 10px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pl-green);
  animation: pl-pulse 2s ease-in-out infinite;
}

@keyframes pl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-clock__dot { animation: none; }
}

.pl-clock__since { font-size: 0.82rem; color: var(--pl-text-on-dark-muted); }

/* Estimate-versus-actual, wherever the two sit together. */
.pl-var--good { color: var(--pl-green); }
.pl-var--warn { color: var(--pl-amber); }
.pl-var--bad  { color: var(--pl-red-bright); font-weight: 600; }

/* ---------------------------------------------------------------- kiosk ---
   The shop floor tablet. Everything here is bigger than it needs to be on a
   desk, because it is read at arm's length by somebody holding a roll of
   vinyl, and tapped by a thumb that has been handling grommets all morning.
   44px is the usual accessible minimum for a touch target; nothing here is
   under 64. */

.pl-kiosk {
  min-height: 100vh;
  background: var(--pl-ink);
  color: var(--pl-text-on-dark);
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 18px;
}

.pl-kiosk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.pl-kiosk__who {
  font-family: var(--pl-display);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.pl-kiosk__sub {
  color: var(--pl-text-on-dark-muted);
  font-family: var(--pl-condensed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.pl-kiosk__panel {
  background: var(--pl-ink-2);
  border: 1px solid var(--pl-line-dark);
  border-radius: var(--pl-radius-lg);
  padding: 20px;
}

/* The PIN pad. A three-wide grid of keys big enough to hit without looking. */
.pl-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 380px;
  margin: 0 auto;
}

.pl-pad__key {
  font-family: var(--pl-display);
  font-size: 2rem;
  min-height: 78px;
  border-radius: var(--pl-radius);
  border: 1px solid var(--pl-line-dark);
  background: var(--pl-ink-3);
  color: var(--pl-text-on-dark);
  cursor: pointer;
  transition: background 0.1s ease, transform 0.05s ease;
}

.pl-pad__key:hover { background: var(--pl-ink-4); }
.pl-pad__key:active { transform: scale(0.97); }
.pl-pad__key--wide { grid-column: span 1; font-size: 1.1rem; font-family: var(--pl-condensed);
  text-transform: uppercase; letter-spacing: 0.08em; }
.pl-pad__key--go { background: var(--pl-red); border-color: var(--pl-red); color: #fff; }
.pl-pad__key--go:hover { background: var(--pl-red-bright); }

/* Dots rather than digits: a PIN typed on a wall-mounted screen is read by the
   whole shop otherwise. */
.pl-pad__display {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  min-height: 26px;
}

.pl-pad__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pl-red);
}

.pl-kiosk__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* One job step, as a button the size of a beer mat. */
.pl-jobkey {
  text-align: left;
  padding: 18px;
  min-height: 108px;
  border-radius: var(--pl-radius);
  border: 1px solid var(--pl-line-dark);
  background: var(--pl-ink-3);
  color: var(--pl-text-on-dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.pl-jobkey:hover { border-color: var(--pl-red); background: var(--pl-ink-4); }
.pl-jobkey__num { font-family: var(--pl-mono); font-size: 0.9rem; color: var(--pl-text-on-dark-muted); }
.pl-jobkey__name { font-family: var(--pl-display); font-size: 1.35rem; line-height: 1.15; }
.pl-jobkey__station { font-family: var(--pl-condensed); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.85rem; color: var(--pl-text-on-dark-muted); }

/* The running clock, given the room it deserves: this is the one thing an
   operator walking past needs to be able to read from the doorway. */
.pl-kiosk__running {
  background: var(--pl-red-tint);
  border: 1px solid var(--pl-red);
  border-radius: var(--pl-radius-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.pl-kiosk__elapsed {
  font-family: var(--pl-display);
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: 1;
}

.pl-kiosk__btn {
  font-family: var(--pl-condensed);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  padding: 18px 30px;
  min-height: 64px;
  border-radius: var(--pl-radius);
  border: 1px solid var(--pl-line-dark);
  background: var(--pl-ink-3);
  color: var(--pl-text-on-dark);
  cursor: pointer;
}

.pl-kiosk__btn--stop { background: var(--pl-red); border-color: var(--pl-red); color: #fff; }
.pl-kiosk__btn--stop:hover { background: var(--pl-red-bright); }
.pl-kiosk__btn:hover { background: var(--pl-ink-4); }

.pl-kiosk__scan {
  width: 100%;
  font-family: var(--pl-mono);
  font-size: 1.15rem;
  padding: 18px;
  min-height: 64px;
  border-radius: var(--pl-radius);
  border: 1px dashed var(--pl-line-strong);
  background: var(--pl-ink);
  color: var(--pl-text-on-dark);
}

.pl-kiosk__scan::placeholder { color: var(--pl-text-on-dark-muted); }

/* ---------------------------------------------------------------- shop -----
   The public catalog. Light, unlike the admin: a customer arriving from a
   search result should not land in somebody's back office. */

.pl-shop {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(14px, 4vw, 28px);
  padding-block: clamp(24px, 5vw, 52px);
}

.pl-shop__head { margin-bottom: 26px; }

.pl-shop__title {
  font-family: var(--pl-display);
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.05;
  margin: 8px 0 6px;
}

.pl-shop__lede {
  color: var(--pl-text-soft);
  max-width: 62ch;
  font-size: 1.02rem;
}

.pl-shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 28px;
}

.pl-chipnav {
  font-family: var(--pl-condensed);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.86rem;
  padding: 9px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--pl-line);
  background: var(--pl-white);
  color: var(--pl-text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.pl-chipnav:hover { border-color: var(--pl-red); color: var(--pl-red); }

.pl-chipnav--on {
  background: var(--pl-red);
  border-color: var(--pl-red);
  color: #fff;
}

.pl-chipnav--on:hover { color: #fff; }

.pl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.pl-card {
  display: flex;
  flex-direction: column;
  background: var(--pl-white);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.pl-card:hover {
  border-color: var(--pl-red);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(16, 17, 20, 0.09);
}

/* A coloured band standing in for product photography, which the shop has not
   supplied yet. Better than a grey box, and it disappears the day real images
   land in the catalog container. */
.pl-card__art {
  height: 132px;
  background: linear-gradient(135deg, var(--pl-ink-2), var(--pl-ink-4));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(243, 237, 225, 0.5);
}

.pl-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.pl-card__cat {
  font-family: var(--pl-condensed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
  color: var(--pl-red);
}

.pl-card__name { font-family: var(--pl-display); font-size: 1.22rem; line-height: 1.18; }
.pl-card__desc { color: var(--pl-text-soft); font-size: 0.9rem; flex: 1; }

.pl-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--pl-line);
  font-size: 0.88rem;
}

.pl-card__price { font-family: var(--pl-condensed); font-weight: 700; letter-spacing: 0.03em; }
.pl-card__lead { color: var(--pl-text-muted); font-size: 0.82rem; }

/* ---- product page ------------------------------------------------------- */

.pl-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .pl-product { grid-template-columns: minmax(0, 1fr); }
}

.pl-product__panel {
  background: var(--pl-white);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-lg);
  padding: 22px;
}

.pl-optgroup { margin-bottom: 20px; }

.pl-optgroup__name {
  font-family: var(--pl-condensed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.84rem;
  color: var(--pl-text-muted);
  margin-bottom: 8px;
}

.pl-opts { display: grid; gap: 8px; }

/* Each choice is a whole row, not a radio dot: the price of choosing it has to
   sit next to it, and a customer deciding between two finishes is comparing
   money, not labels. */
.pl-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  min-height: 52px;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  background: var(--pl-white);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.pl-opt:hover { border-color: var(--pl-red); }

.pl-opt--on {
  border-color: var(--pl-red);
  background: var(--pl-red-tint);
}

.pl-opt__name { font-weight: 600; }
.pl-opt__desc { font-size: 0.82rem; color: var(--pl-text-muted); }
.pl-opt__price { font-family: var(--pl-condensed); font-weight: 700; white-space: nowrap; }

/* ---- the running total -------------------------------------------------- */

.pl-price {
  position: sticky;
  top: 18px;
}

.pl-price__total {
  font-family: var(--pl-display);
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: 1;
}

.pl-price__each {
  color: var(--pl-text-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.pl-price__rows { margin: 18px 0; display: grid; gap: 7px; font-size: 0.9rem; }

.pl-price__row { display: flex; justify-content: space-between; gap: 10px; }
.pl-price__row span:last-child { font-variant-numeric: tabular-nums; }
.pl-price__row--muted { color: var(--pl-text-muted); }

.pl-price__rule { border: none; border-top: 1px solid var(--pl-line); margin: 4px 0; }

/* --- account pages ---------------------------------------------------------

   The Identity pages are scaffolded with Bootstrap markup, and this app has never
   loaded Bootstrap. Every form-control, form-floating and btn class on them did
   nothing at all, which is why the login page arrived as bare browser defaults
   jammed against the left edge.

   Styling the classes the scaffolding already emits, rather than rewriting the
   markup of seventeen pages, means the whole Account area is fixed at once --
   and so is the next page anybody scaffolds.
*/

.pl-auth {
  max-width: 460px;
  margin: clamp(28px, 7vw, 72px) auto;
  padding-inline: 16px;
}

.pl-auth--wide { max-width: 720px; }

.pl-auth__card {
  background: var(--pl-white);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius-lg);
  padding: clamp(22px, 5vw, 38px);
  box-shadow: 0 1px 3px rgba(16, 17, 20, 0.06);
}

/* Every page in here, not only the ones that remember the class. These are scaffolded files and
   the next one will not have it either. */
.pl-auth h1,
.pl-auth__title {
  font-family: var(--pl-display);
  font-size: clamp(1.9rem, 5vw, 2.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.pl-auth__lede {
  color: var(--pl-text-soft);
  margin: 0 0 22px;
}

.pl-auth__foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--pl-line);
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
}

/* The separator between password and passkey. A rule with a word sitting in it,
   rather than Bootstrap's stacked <hr> and centred span. */
.pl-auth__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--pl-text-muted);
  font-family: var(--pl-condensed);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.pl-auth__or::before,
.pl-auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pl-line);
}

/* --- the scaffolding's own classes ---------------------------------------- */

.pl-auth .form-control,
.pl-auth .form-select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--pl-body);
  font-size: 1rem;
  color: var(--pl-text);
  background: var(--pl-cream-2);
  border: 1px solid var(--pl-line-strong);
  border-radius: var(--pl-radius);
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.pl-auth .form-control:focus,
.pl-auth .form-select:focus {
  outline: none;
  background: var(--pl-white);
  border-color: var(--pl-red);
  box-shadow: 0 0 0 3px var(--pl-red-tint);
}

.pl-auth .form-control::placeholder { color: var(--pl-text-muted); }

/* Bootstrap's floating label, done properly: the placeholder is what the browser
   shows until there is a value, and the label rides above it. Without this the
   label renders after the input and lands beside it, which is exactly what the
   unstyled page did. */
/* The scaffolding emits input, then label, then the validation message. Reversing the whole
   column put the label above the input -- and the error message above that, which read as a
   warning about the field before it rather than a complaint about this one. Ordering each child
   explicitly puts them where a person expects: label, field, then what is wrong with it. */
.pl-auth .form-floating {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.pl-auth .form-floating > label { order: 1; }
.pl-auth .form-floating > .form-control,
.pl-auth .form-floating > input,
.pl-auth .form-floating > select,
.pl-auth .form-floating > textarea { order: 2; }
.pl-auth .form-floating > .text-danger,
.pl-auth .form-floating > .validation-message { order: 3; }

.pl-auth .form-floating > label,
.pl-auth .form-label {
  font-family: var(--pl-condensed);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-text-soft);
  margin-bottom: 6px;
}

.pl-auth .checkbox label,
.pl-auth .form-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--pl-body);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pl-text);
  cursor: pointer;
}

.pl-auth input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--pl-red);
  cursor: pointer;
}

.pl-auth .mb-3 { margin-bottom: 16px; }

/* Buttons. The scaffolding says btn/btn-primary; give those the shop's button. */
.pl-auth .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--pl-radius);
  font-family: var(--pl-condensed);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.pl-auth .btn-primary { background: var(--pl-red); color: #fff; }
.pl-auth .btn-primary:hover { background: var(--pl-red-bright); }

.pl-auth .btn-link {
  background: none;
  border-color: var(--pl-line-strong);
  color: var(--pl-text);
}

.pl-auth .btn-link:hover { border-color: var(--pl-ink); }

.pl-auth .w-100 { width: 100%; }

/* Validation. Red is the brand colour here, so errors get weight and a marker
   rather than colour alone -- colour on its own is not a message for everyone. */
.pl-auth .text-danger,
.pl-auth .validation-message {
  display: block;
  margin-top: 6px;
  color: var(--pl-red-dark);
  font-size: 0.88rem;
  font-weight: 600;
}

.pl-auth .validation-errors {
  margin: 0 0 18px;
  padding: 12px 14px;
  list-style: none;
  background: var(--pl-red-tint);
  border-left: 3px solid var(--pl-red);
  border-radius: var(--pl-radius);
}

.pl-auth .validation-errors li { color: var(--pl-red-dark); font-weight: 600; }

.pl-auth a { color: var(--pl-red-dark); font-weight: 600; }
.pl-auth a:hover { color: var(--pl-red); }

/* The status banner the scaffolding renders above each form. */
.pl-auth .alert {
  padding: 12px 14px;
  border-radius: var(--pl-radius);
  margin-bottom: 18px;
  font-weight: 600;
}

.pl-auth .alert-danger {
  background: var(--pl-red-tint);
  border-left: 3px solid var(--pl-red);
  color: var(--pl-red-dark);
}

.pl-auth .alert-success {
  background: rgba(47, 160, 94, 0.12);
  border-left: 3px solid var(--pl-green);
  color: #1C6B3D;
}

/* Bootstrap's grid, neutralised. These pages are a single column; the row/col
   classes only ever made them narrow and off-centre. */
.pl-auth .row { display: block; }
.pl-auth [class*="col-"] { width: auto; max-width: none; padding: 0; }

.pl-auth h2, .pl-auth h3 {
  font-family: var(--pl-condensed);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-text-soft);
  margin: 0 0 14px;
}

.pl-auth hr {
  border: none;
  border-top: 1px solid var(--pl-line);
  margin: 20px 0;
}

/* --- account settings ------------------------------------------------------

   The Manage pages, which sit inside .pl-auth so everything above applies to
   them too. What is left is the two-column shell and the handful of Bootstrap
   classes that only appear in here -- tables, danger buttons, the nav rail.
*/

.pl-account {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* One column on a phone, with the rail above the form. A 210px sidebar at 375px
   wide leaves the form 100px to live in. */
@media (max-width: 720px) {
  .pl-account { grid-template-columns: 1fr; }
}

.pl-account__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.pl-account__nav .nav-link {
  display: block;
  padding: 9px 12px;
  border-radius: var(--pl-radius);
  border-left: 3px solid transparent;
  font-family: var(--pl-condensed);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--pl-text-soft);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.pl-account__nav .nav-link:hover {
  background: var(--pl-cream-2);
  color: var(--pl-text);
}

/* The section you are on. A left bar as well as the weight and colour, because
   which of eight links is current should not rest on colour alone. */
.pl-account__nav .nav-link.active {
  background: var(--pl-cream-2);
  border-left-color: var(--pl-red);
  color: var(--pl-text);
  font-weight: 700;
}

.pl-account__back {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 12px;
  font-size: 0.9rem;
}

.pl-account__body h3 {
  font-family: var(--pl-display);
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--pl-text);
  margin: 0 0 18px;
}

/* --- the classes that only turn up in here -------------------------------- */

.pl-auth .btn-lg { font-size: 1.05rem; }

/* Destructive actions. Outlined rather than filled: the shop's primary button is
   already red, and two solid red buttons on one page make "Save" and "Delete
   everything" look like the same offer. */
.pl-auth .btn-danger {
  background: transparent;
  border-color: var(--pl-red);
  color: var(--pl-red-dark);
}

.pl-auth .btn-danger:hover {
  background: var(--pl-red);
  color: #fff;
}

.pl-auth table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 18px;
  font-size: 0.94rem;
}

.pl-auth table th {
  text-align: left;
  font-family: var(--pl-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--pl-text-muted);
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--pl-line);
}

.pl-auth table td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--pl-line);
  vertical-align: middle;
}

.pl-auth .text-success { color: #1C6B3D; font-weight: 600; }
.pl-auth .text-info { color: var(--pl-text-soft); }

/* Recovery codes and the authenticator key: strings people copy by hand, so they
   get a face where every character is distinguishable. */
.pl-auth kbd,
.pl-auth code,
.pl-auth .recovery-code {
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.95rem;
  background: var(--pl-cream-2);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: 3px 7px;
}

.pl-auth img { max-width: 100%; height: auto; }