/*
  CleverLifeline site look: header, footer, and shared buttons.

  Loaded after app.css on every page. It styles only the site header and footer
  (written from metadata/navigation.json by scripts/generate-navigation.js), so page
  content, including Build It, keeps its app.css look until it is moved over on
  purpose. Its settings are named --site-* so they never change app.css's --ink,
  --accent, and so on, which Build It relies on.
*/

:root {
  --site-ink: #14213d;
  --site-ink-muted: #51607a;
  --site-line: #e3e8ef;
  --site-bg: #ffffff;
  --site-bg-soft: #f6f8fb;
  --site-navy: #0b2e59;
  --site-red: #d7261e;
  --site-red-hover: #b81f18;
  --site-focus: #7aa7e0;
  --site-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Header ---------- */

.site-header {
  min-height: 0;
  background: var(--site-bg);
  border-bottom: 1px solid var(--site-line);
  font-family: var(--site-font);
  -webkit-font-smoothing: antialiased;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1120px;
  height: 68px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--site-navy);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand:hover { color: var(--site-navy); }

.site-brand-mark {
  display: block;
  width: 32px;
  height: 32px;
}

.site-brand-accent { color: var(--site-red); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-right: auto;
  margin-left: 32px;
}

.site-nav a {
  color: var(--site-ink-muted);
  font-size: 0.96rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--site-ink); }

/* ---------- Account area: signed out vs signed in ---------- */

.site-account {
  display: flex;
  align-items: center;
}

.site-account-signed-out {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-account[data-auth-state="authenticated"] .site-account-signed-out,
.site-account:not([data-auth-state="authenticated"]) .site-account-menu {
  display: none;
}

.site-signin {
  padding: 0 8px;
  color: var(--site-ink);
  font-size: 0.96rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-signin:hover { color: var(--site-navy); }

.site-account-menu { position: relative; }

.site-account-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #cdd5e0;
  border-radius: 8px;
  color: var(--site-ink);
  font-size: 0.96rem;
  font-weight: 600;
  white-space: nowrap;
}

.site-account-menu summary::-webkit-details-marker { display: none; }

.site-account-menu summary:hover,
.site-account-menu[open] summary { border-color: #9aa8bb; }

.site-account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 100;
  min-width: 190px;
  padding: 6px;
  background: var(--site-bg);
  border: 1px solid var(--site-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(20, 33, 61, 0.14);
}

.site-account-menu-panel a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--site-ink);
  font-size: 0.95rem;
  text-decoration: none;
}

.site-account-menu-panel a:hover { background: var(--site-bg-soft); }

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

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--site-red);
  color: #fff;
  font-family: var(--site-font);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.15);
  transition: background 120ms ease;
}

.site-button:hover { background: var(--site-red-hover); color: #fff; }

/* ---------- Footer ---------- */

/* No background of its own: it sits on whatever the page uses, so on a short page it
   reads as the end of the page rather than a band floating mid-screen. Pinning it to
   the bottom would mean changing the page layout, which Build It depends on. */
.site-footer {
  margin-top: 48px;
  padding: 28px 0 40px;
  background: transparent;
  border-top: 1px solid rgba(20, 33, 61, 0.12);
  color: var(--site-ink-muted);
  font-family: var(--site-font);
  font-size: 0.92rem;
  line-height: 1.6;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.site-footer-links a {
  color: var(--site-ink-muted);
  text-decoration: none;
}

.site-footer-links a:hover { color: var(--site-ink); }

/* ---------- Simple pages (body.site-page) ----------
   Sign up, Sign in, Sign out, Account, Plans, Privacy, Terms. Every rule here starts
   with body.site-page, so Build It (which doesn't carry the class) is never affected.
   The rules restyle app.css's shared page card, headings, forms, and buttons. Element
   rules use :where(), which adds no weight: they still beat app.css (site.css loads
   later) but lose to header, footer, and page classes such as the Plans cards. */

body.site-page {
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: var(--site-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.site-page .app-shell {
  max-width: 760px;
  padding: 48px 24px 8px;
}

body.site-page .page-card {
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:where(body.site-page) h1,
:where(body.site-page) h2,
:where(body.site-page) h3 {
  font-family: inherit;
  color: var(--site-ink);
}

:where(body.site-page) h1,
:where(body.site-page) .page-card > h1 {
  font-family: inherit;
  color: var(--site-ink);
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

:where(body.site-page) h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

:where(body.site-page) a { color: var(--site-navy); }

:where(body.site-page) p { margin: 0 0 14px; }

/* Forms */

:where(body.site-page) label {
  margin: 18px 0 6px;
  color: var(--site-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

:where(body.site-page) input:not([type="radio"]):not([type="checkbox"]),
:where(body.site-page) select,
:where(body.site-page) textarea {
  padding: 10px 12px;
  border: 1px solid #cdd5e0;
  border-radius: 8px;
  background: #fff;
  color: var(--site-ink);
  font-family: inherit;
  font-size: 1rem;
}

body.site-page input:focus-visible,
body.site-page select:focus-visible,
body.site-page textarea:focus-visible,
body.site-page button:focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 2px;
}

/* Buttons: the main action on each page (app.css's .home-action) is the red brand button. */

body.site-page button.home-action,
body.site-page a.home-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--site-red);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.15);
}

body.site-page button.home-action:hover:not(:disabled),
body.site-page a.home-action:hover { background: var(--site-red-hover); color: #fff; }

body.site-page button.home-action:disabled { opacity: 0.55; }

/* Status messages */

body.site-page .pd-message,
body.site-page .account-settings-status {
  padding: 12px 14px;
  border: 1px solid #c9d8ea;
  border-radius: 8px;
  background: #eef4fb;
  color: var(--site-navy);
  font-weight: 600;
}

/* Account settings */

body.site-page .account-settings-card { max-width: none; }

body.site-page .account-settings-card > h1 { border: 0; }

body.site-page .account-settings-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--site-line);
}

body.site-page .account-reminder-option strong { font-family: inherit; }

body.site-page .account-settings-note { color: var(--site-ink-muted); }

/* ---------- Build It, phase 1: the frame ----------
   Applies only while public/build/index.html's <body> carries build-look-frame;
   removing that one class undoes this phase. Covers the page background, the box
   around the page, the heading and intro line, and the two screens a visitor can see
   before the builder loads (signed out, and on a phone). The working area - steps,
   columns, rows, dialogs, preview, build animation - is not touched. Sizes and
   spacing of the box stay the same, so nothing inside it moves. */

body.portfolio-designer-page.build-look-frame {
  background: var(--site-bg);
}

body.build-look-frame .page-card {
  border-color: transparent;
  box-shadow: none;
}

body.build-look-frame .page-head h1 {
  color: var(--site-ink);
  font-family: var(--site-font);
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.build-look-frame .page-head p {
  color: var(--site-ink-muted);
  font-family: var(--site-font);
}

/* Signed out: "Start building your Lifeline". */
body.build-look-frame .build-auth-gateway {
  padding: 40px 36px;
  border: 1px solid var(--site-line);
  border-radius: 12px;
  background: var(--site-bg-soft);
  font-family: var(--site-font);
}

body.build-look-frame .build-auth-gateway h2 {
  color: var(--site-ink);
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body.build-look-frame .build-auth-gateway p { color: var(--site-ink-muted); }

body.build-look-frame .build-auth-gateway-actions .pd-action {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--site-red);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
}

body.build-look-frame .build-auth-gateway-actions .pd-action:hover { background: var(--site-red-hover); }

body.build-look-frame .build-auth-gateway-actions .pd-action-secondary {
  border-color: #cdd5e0;
  background: #fff;
  color: var(--site-ink);
}

body.build-look-frame .build-auth-gateway-actions .pd-action-secondary:hover {
  border-color: #9aa8bb;
  background: #fff;
}

/* On a phone: "build it on a computer". */
body.build-look-frame .build-phone-gate {
  border-color: var(--site-line);
  border-radius: 12px;
  background: var(--site-bg-soft);
  font-family: var(--site-font);
}

body.build-look-frame .build-phone-gate img {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.08), 0 12px 28px rgba(20, 33, 61, 0.16);
}

body.build-look-frame .build-phone-gate-message { color: var(--site-ink); }

/* ---------- Build It, phase 3: colors in the working area ----------
   Applies only while Build It's <body> carries build-look-colors; removing that class
   undoes this phase. First, app.css's shared color settings are retuned for Build It
   only, which recolors everything that uses them. Then each Build It rule with a color
   typed in directly gets the nearest site color (dark grays to ink, mid grays to muted
   ink, the old blue to navy, pale tints to the site tints). Warning reds, the success
   green, sizes, spacing, and fonts are unchanged, as is the build animation. This block
   sits above phase 2 so phase 2's button colors win where both apply. */

body.build-look-colors {
  --canvas: var(--site-bg);
  --paper-alt: var(--site-bg-soft);
  --ink: var(--site-ink);
  --ink-muted: var(--site-ink-muted);
  --rule: var(--site-line);
  --rule-strong: #cdd5e0;
  --accent: #123d73;
  --accent-strong: var(--site-navy);
  --accent-soft: #eaf1fa;
  --brand-red: var(--site-red);
  --brand-red-dark: var(--site-red-hover);
  --focus: #1d5fb0;
}

body.build-look-colors .pd-output-selector {
  border: 1px solid #cdd5e0;
  box-shadow: 0 8px 22px rgba(20, 33, 61, 0.12);
}

body.build-look-colors .pd-output-selector::after {
  border-bottom: 2px solid #cdd5e0;
}

body.build-look-colors .pd-section-copy {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-demo-control label {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-target-card h3 {
  color: var(--site-ink);
}

body.build-look-colors .pd-target-copy,
body.build-look-colors .pd-variant-description,
body.build-look-colors .pd-placeholder-note {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-step-title {
  color: var(--site-ink);
}

body.build-look-colors .pd-style-toggle {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-style-toggle-help {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-needtoknow-box h4 {
  color: var(--site-ink);
}

body.build-look-colors .pd-basic-variant-guidance p {
  color: var(--site-ink);
}

body.build-look-colors .pd-placeholder-note {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-harness-copy h4 {
  color: var(--site-ink);
}

body.build-look-colors .pd-harness-copy p {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-harness-presets {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-preset-button {
  border: 1px solid #cdd5e0;
  background: var(--site-bg-soft);
  color: var(--site-ink);
}

body.build-look-colors .pd-shared-status-generating {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-generate-hint {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-section-copy-inline {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-section-copy-limit {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-section-header h3 {
  color: var(--site-ink);
}

body.build-look-colors .pd-section-helper {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-badge-count {
  background: var(--site-bg-soft);
  border-color: #cdd5e0;
}

body.build-look-colors .pd-badge-limit-count {
  background: var(--site-bg-soft);
}

body.build-look-colors .pd-badge-included {
  background: var(--site-bg-soft);
  border-color: #cdd5e0;
}

body.build-look-colors .pd-badge-limit {
  background: var(--site-bg-soft);
  color: var(--site-ink);
}

body.build-look-colors .pd-badge-upgrade {
  background: var(--site-bg-soft);
  color: var(--site-ink);
}

body.build-look-colors .pd-transfer-grid::after {
  background: linear-gradient(180deg, rgba(11, 46, 89, 0.12) 0%, rgba(11, 46, 89, 0.05) 100%);
  border: 1px solid rgba(11, 46, 89, 0.1);
}

body.build-look-colors .pd-column-title-text {
  color: var(--site-ink);
}

body.build-look-colors .pd-column-pill {
  border: 1px solid rgba(11, 46, 89, 0.2);
  background: #eaf1fa;
  color: var(--site-navy);
}

body.build-look-colors .pd-column-pill-value {
  color: var(--site-navy);
}

body.build-look-colors .pd-column-title-available-detail {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-column-title-available-count {
  color: var(--site-navy);
}

body.build-look-colors .pd-column-count {
  border: 1px solid rgba(11, 46, 89, 0.2);
  background: #eaf1fa;
  color: var(--site-navy);
}

body.build-look-colors .pd-column h4 {
  color: var(--site-ink);
}

body.build-look-colors .pd-row:hover {
  border-color: #cdd5e0;
  box-shadow: 0 1px 6px rgba(11, 46, 89, 0.12);
}

body.build-look-colors .pd-row:focus-within {
  border-color: var(--site-navy);
  box-shadow: 0 0 0 2px rgba(11, 46, 89, 0.14);
}

body.build-look-colors .pd-row-selected {
  background: var(--site-bg-soft);
}

body.build-look-colors .pd-row-text {
  color: var(--site-ink);
}

body.build-look-colors .pd-icon-link {
  border: 1px solid rgba(11, 46, 89, 0.22);
}

body.build-look-colors .pd-transfer-arrow {
  background: #eaf1fa;
  color: var(--site-navy);
}

body.build-look-colors .pd-transfer-arrow:hover:not(:disabled) {
  background: var(--site-navy);
}

body.build-look-colors .pd-transfer-arrow-remove {
  background: var(--site-bg-soft);
  border-color: var(--site-ink-muted);
  color: var(--site-ink);
}

body.build-look-colors .pd-transfer-arrow-remove:hover:not(:disabled) {
  background: var(--site-ink-muted);
}

body.build-look-colors .pd-action-secondary {
  border-color: rgba(11, 46, 89, 0.35);
}

body.build-look-colors .pd-action-secondary:hover:not(:disabled) {
  background: #eaf1fa;
}

body.build-look-colors .pd-action-add {
  color: var(--site-navy);
  border-color: rgba(11, 46, 89, 0.28);
}

body.build-look-colors .pd-action-add:hover:not(:disabled) {
  background: #eaf1fa;
  color: var(--site-navy);
  border-color: rgba(11, 46, 89, 0.45);
}

body.build-look-colors .pd-action-icon {
  border: 1px solid rgba(11, 46, 89, 0.24);
  background: #eaf1fa;
}

body.build-look-colors .pd-modal-backdrop {
  background: rgba(20, 33, 61, 0.5);
}

body.build-look-colors .pd-modal-head {
  background: var(--site-bg-soft);
}

body.build-look-colors .pd-modal-head h3,
body.build-look-colors .pd-modal-card-confirm h3 {
  color: var(--site-ink);
}

body.build-look-colors .pd-modal-close {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-modal-copy {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-modal-actions {
  background: var(--site-bg-soft);
}

body.build-look-colors .pd-form-field label {
  color: var(--site-ink);
}

body.build-look-colors .pd-form-field input,
body.build-look-colors .pd-form-field select,
body.build-look-colors .pd-form-field textarea {
  color: var(--site-ink);
}

body.build-look-colors .pd-form-help {
  color: var(--site-ink-muted);
}

body.build-look-colors .pd-empty {
  color: var(--site-ink-muted);
}

/* ---------- Build It, phase 2: buttons and form controls ----------
   Applies only while Build It's <body> carries build-look-controls; removing that
   class undoes this phase. Only colors, borders, and corner rounding change - padding,
   sizes, and fonts stay as they are, so nothing in the working area moves. */

body.build-look-controls .pd-action {
  border-radius: 8px;
  background: var(--site-navy);
}

body.build-look-controls .pd-action:hover:not(:disabled) { background: #123d73; }

body.build-look-controls .pd-action-secondary,
body.build-look-controls .pd-action-secondary:hover:not(:disabled) {
  border-color: #cdd5e0;
  background: #fff;
  color: var(--site-ink);
}

body.build-look-controls .pd-action-secondary:hover:not(:disabled) { border-color: #9aa8bb; }

body.build-look-controls .pd-action-add {
  border-color: #cdd5e0;
  background: #fff;
  color: var(--site-navy);
  box-shadow: none;
}

body.build-look-controls .pd-action-add:hover:not(:disabled) {
  border-color: #9aa8bb;
  background: var(--site-bg-soft);
  color: var(--site-navy);
}

body.build-look-controls .pd-action-icon {
  border-color: transparent;
  border-radius: 6px;
  background: #eaf1fa;
}

body.build-look-controls .pd-icon-link {
  border-color: #cdd5e0;
  border-radius: 6px;
  color: var(--site-navy);
}

body.build-look-controls .pd-icon-link:hover {
  border-color: #9aa8bb;
  background: #eaf1fa;
  color: var(--site-navy);
}

/* "Create My Lifeline" */
body.build-look-controls .pd-generate-button {
  border-color: var(--site-red-hover);
  border-radius: 10px;
  background: var(--site-red);
}

body.build-look-controls .pd-generate-button:hover:not(:disabled) { background: var(--site-red-hover); }

body.build-look-controls .pd-step-badge { background: var(--site-navy); }

/* ">>" and "<<": move an item onto or off the card. */
body.build-look-controls .pd-transfer-arrow {
  border-color: var(--site-navy);
  border-radius: 8px;
  background: #eaf1fa;
  color: var(--site-navy);
  box-shadow: none;
}

body.build-look-controls .pd-transfer-arrow:hover:not(:disabled) {
  background: var(--site-navy);
  color: #fff;
}

body.build-look-controls .pd-transfer-arrow-remove {
  border-color: #51607a;
  background: var(--site-bg-soft);
  color: #3a465c;
}

body.build-look-controls .pd-transfer-arrow-remove:hover:not(:disabled) {
  background: #51607a;
  color: #fff;
}

body.build-look-controls .pd-preset-button {
  border-color: #cdd5e0;
  border-radius: 6px;
  background: var(--site-bg-soft);
  color: var(--site-ink);
}

body.build-look-controls .pd-capacity-review { border-radius: 6px; }

/* Drop-downs and text boxes */
body.build-look-controls .pd-demo-control select,
body.build-look-controls .pd-target-card select,
body.build-look-controls .pd-target-card input,
body.build-look-controls .pd-form-field input,
body.build-look-controls .pd-form-field select,
body.build-look-controls .pd-form-field textarea {
  border-color: #cdd5e0;
  border-radius: 8px;
}

body.build-look-controls .pd-demo-control,
body.build-look-controls .pd-target-card { border-radius: 8px; }

body.build-look-controls input[type="radio"],
body.build-look-controls input[type="checkbox"] { accent-color: var(--site-navy); }

body.build-look-controls .pd-demo-control select:focus-visible,
body.build-look-controls .pd-target-card select:focus-visible,
body.build-look-controls .pd-target-card input:focus-visible,
body.build-look-controls .pd-form-field input:focus-visible,
body.build-look-controls .pd-form-field select:focus-visible,
body.build-look-controls .pd-form-field textarea:focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 1px;
}

/* Add, edit, and delete dialogs */
body.build-look-controls .pd-modal-backdrop { background: rgba(20, 33, 61, 0.45); }

body.build-look-controls .pd-modal-card {
  border-color: var(--site-line);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(20, 33, 61, 0.25);
}

body.build-look-controls .pd-modal-head,
body.build-look-controls .pd-modal-actions {
  border-color: var(--site-line);
  background: var(--site-bg-soft);
}

body.build-look-controls .pd-modal-head h3,
body.build-look-controls .pd-modal-card-confirm h3 { color: var(--site-ink); }

/* Delete confirmation: no header strip, so the title needs its own spacing; the
   entry being deleted sits in a tinted box; Delete is red because it can't be undone. */
body.build-look-controls .pd-modal-card-confirm h3 {
  margin: 0;
  padding: 22px 24px 0;
  font-size: 1.25rem;
  font-weight: 700;
}

body.build-look-controls .pd-modal-card-confirm .pd-modal-copy {
  padding: 8px 24px 14px;
  color: var(--site-ink-muted);
}

body.build-look-controls .pd-modal-card-confirm .pd-modal-summary {
  margin: 0 24px 20px;
  padding: 12px 16px;
  border: 1px solid var(--site-line);
  border-radius: 8px;
  background: var(--site-bg-soft);
}

body.build-look-controls .pd-modal-card-confirm .pd-modal-summary p { margin: 2px 0; }

body.build-look-controls .pd-modal-card-confirm .pd-modal-actions { padding: 14px 24px; }

body.build-look-controls .pd-modal-card-confirm .pd-form-error { margin: 0 24px 14px; }

body.build-look-controls [data-action="dialog-confirm-delete"].pd-action { background: var(--site-red); }
body.build-look-controls [data-action="dialog-confirm-delete"].pd-action:hover:not(:disabled) { background: var(--site-red-hover); }

body.build-look-controls .pd-modal-close {
  border-color: #cdd5e0;
  border-radius: 6px;
}

/* ---------- Build It, phase 4: the site font ----------
   Applies only while Build It's <body> carries build-look-font; removing that class
   undoes this phase. Build It's text switches from Georgia to the site font. Checked
   at 1440, 1280, and 1100 pixels wide on Basic and Premium: nothing moves beyond a
   pixel or two, and the narrower font wraps less. The build animation (.lbm-backdrop,
   added to the page when a card is created) fits card text as it draws, so it keeps
   the font it has always had. */

body.portfolio-designer-page.build-look-font {
  font-family: var(--site-font);
}

body.build-look-font .lbm-backdrop {
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* ---------- Starter list (Build It, empty accounts) ----------
   The one-time screen from public/static/pages/starter-list.js. All classes start
   with sl-, so nothing here touches Build It's own styles. */

.sl { font-family: var(--site-font); color: var(--site-ink); }
.sl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; }
.sl-eyebrow { display: inline-block; margin: 8px 0 14px; padding: 4px 12px; border-radius: 999px; background: #eaf1fa; color: var(--site-navy); font-size: .85rem; font-weight: 600; }
.sl .sl-heading { margin: 0 0 10px; font-family: inherit; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--site-ink); }
.sl-lede { margin: 0 0 28px; max-width: 42rem; color: var(--site-ink-muted); font-size: 1.08rem; }
.sl-section { margin-bottom: 36px; }
.sl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sl-sec-head h3 { margin: 0; font-family: inherit; font-size: 1.3rem; font-weight: 700; color: var(--site-ink); }
.sl-sec-head p { margin: 2px 0 0; color: var(--site-ink-muted); font-size: .92rem; }
.sl-ready { color: #1d7a46; font-size: .9rem; font-weight: 600; white-space: nowrap; }

.sl-table { border: 1px solid var(--site-line); border-radius: 12px; overflow: hidden; }
.sl-row { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 34px; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--site-line); transition: background 150ms ease; }
.sl-row-item { grid-template-columns: .9fr 1.1fr 1.1fr 34px; }
.sl-row-head { border-top: 0; background: var(--site-bg-soft); padding-top: 8px; padding-bottom: 8px; color: var(--site-ink-muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sl-row[hidden] { display: none; }
.sl-row.sl-done { background: #f1f9f4; }
.sl-row.sl-has-problem { background: #fff3f2; }
.sl-row.sl-saved { opacity: .7; }
.sl-fresh { animation: sl-flash 900ms ease; }
@keyframes sl-flash { from { background: #fff4d6; } to { background: transparent; } }
.sl input { width: 100%; margin: 0; padding: 9px 11px; border: 1px solid #cdd5e0; border-radius: 8px; background: #fff; color: var(--site-ink); font-family: inherit; font-size: .95rem; }
.sl input::placeholder { color: #8a97ab; }
.sl input:focus-visible { outline: 3px solid var(--site-focus); outline-offset: 1px; border-color: transparent; }
.sl input.sl-who { font-weight: 600; }
.sl-fixed { font-size: .95rem; font-weight: 600; }
.sl-fixed small { display: block; color: var(--site-ink-muted); font-size: .78rem; font-weight: 400; }
.sl .sl-x { width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 1px solid #f0b8b3; border-radius: 8px; background: #fff; color: var(--site-red); font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer; }
.sl .sl-x:hover:not(:disabled) { border-color: var(--site-red); background: #fdecea; color: var(--site-red-hover); }
.sl-problem { grid-column: 1 / -1; margin: 2px 0 0; color: #b32820; font-size: .86rem; font-weight: 600; }
.sl-problem[hidden] { display: none; }

.sl-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sl-more > span { margin-right: 2px; color: var(--site-ink-muted); font-size: .9rem; }
.sl .sl-chip { min-height: 0; margin: 0; padding: 6px 12px; border: 1px solid #cdd5e0; border-radius: 999px; background: #fff; color: var(--site-navy); font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.sl .sl-chip:hover:not(:disabled) { border-color: #9fb8d8; background: #eaf1fa; }
.sl .sl-chip-blank { border-style: dashed; }

.sl-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sl .sl-tpl { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; min-height: 0; margin: 0; padding: 14px; border: 1px solid var(--site-line); border-radius: 12px; background: #fff; color: var(--site-ink); font-family: inherit; font-weight: 400; text-align: left; cursor: pointer; }
.sl .sl-tpl:hover:not(:disabled) { border-color: #9fb8d8; background: #fff; }
.sl .sl-tpl[aria-pressed="true"] { padding: 13px; border: 2px solid var(--site-navy); background: #fbfdff; box-shadow: 0 6px 18px rgba(11, 46, 89, .10); }
.sl .sl-tpl[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 10px; right: 12px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--site-navy); color: #fff; font-size: .8rem; font-weight: 700; }
.sl-tpl strong { display: block; padding-right: 22px; font-size: .98rem; }
.sl-tpl small { display: block; margin-top: 2px; color: var(--site-ink-muted); font-size: .84rem; line-height: 1.35; }
.sl-tpl-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; }
.sl-tpl-icon svg { width: 22px; height: 22px; }
.sl-tone-red { background: #fdecea; color: var(--site-red); }
.sl-tone-blue { background: #eaf1fa; color: var(--site-navy); }
.sl-tone-green { background: #e7f5ec; color: #1d7a46; }
.sl-tone-violet { background: #efeafb; color: #5b3aa8; }
.sl-tone-amber { background: #fdf3df; color: #9a6400; }
.sl-tone-teal { background: #e3f4f4; color: #19706f; }
.sl-picked { margin: 10px 0 0; color: var(--site-ink-muted); font-size: .88rem; }
.sl-note-forms { display: grid; gap: 14px; margin-top: 16px; }
.sl-note-card { padding: 16px 18px 6px; border: 1px solid var(--site-line); border-left: 4px solid var(--site-navy); border-radius: 12px; }
.sl-note-card[hidden] { display: none; }
.sl-note-card.sl-has-problem { border-left-color: #b32820; }
.sl-note-card.sl-saved { opacity: .7; }
.sl-note-card h4 { margin: 0 0 12px; font-family: inherit; font-size: 1.02rem; color: var(--site-ink); }
.sl .sl-field { display: block; margin: 0 0 12px; }
.sl .sl-field > span { display: block; margin: 0 0 4px; font-size: .86rem; font-weight: 600; }
.sl input.sl-note-title { font-weight: 700; }
.sl textarea { display: block; width: 100%; min-height: 110px; margin: 0; padding: 10px 12px; border: 1px solid #cdd5e0; border-radius: 8px; background: #fff; color: var(--site-ink); font-family: inherit; font-size: .95rem; line-height: 1.5; resize: vertical; }
.sl textarea::placeholder { color: #8a97ab; }
.sl textarea:focus-visible { outline: 3px solid var(--site-focus); outline-offset: 1px; border-color: transparent; }
.sl-count { margin: -6px 2px 12px; color: var(--site-ink-muted); font-size: .8rem; text-align: right; }
.sl-count.sl-count-over { color: #b32820; font-weight: 700; }

.sl-status { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #c9d8ea; border-radius: 8px; background: #eef4fb; color: var(--site-navy); font-weight: 600; }
.sl-status[hidden] { display: none; }
.sl-status.sl-status-error { border-color: #f0b8b3; background: #fff3f2; color: #8f241e; }
.sl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--site-line); }
.sl .sl-btn { display: inline-flex; align-items: center; min-height: 50px; margin: 0; padding: 0 26px; border: 0; border-radius: 8px; background: var(--site-red); color: #fff; font-family: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; }
.sl .sl-btn:hover:not(:disabled) { background: var(--site-red-hover); }
.sl .sl-btn[hidden] { display: none; }
.sl .sl-btn-secondary { border: 1px solid #cdd5e0; background: #fff; color: var(--site-ink); }
.sl .sl-btn-secondary:hover:not(:disabled) { border-color: #9aa8bb; background: #fff; }
.sl .sl-link { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--site-navy); font-family: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sl .sl-link:hover:not(:disabled) { background: none; color: var(--site-ink); }
.sl-fine { flex-basis: 100%; margin: 0; color: var(--site-ink-muted); font-size: .88rem; }

.sl-aside { position: sticky; top: 24px; }
.sl-preview-label { margin: 8px 0 10px; color: var(--site-ink-muted); font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sl-mini-card { aspect-ratio: 3.37 / 2.125; padding: 10px 12px; overflow: hidden; border: 1px solid #c9d1dc; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(20, 33, 61, .08), 0 14px 32px rgba(20, 33, 61, .16); font-family: Helvetica, Arial, sans-serif; }
.sl-mini-bar { display: flex; justify-content: space-between; margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid #222; color: #111; font-size: 8px; font-weight: 700; }
.sl-mini-card table { width: 100%; border: 0; border-collapse: collapse; background: transparent; color: #111; font-size: 8.5px; }
.sl-mini-card td { max-width: 90px; padding: 1.5px 0; overflow: hidden; border: 0; border-bottom: 1px solid #e6e6e6; text-overflow: ellipsis; white-space: nowrap; }
.sl-mini-card tr:nth-child(even) { background: transparent; }
.sl-mini-card td:first-child { font-weight: 700; }
.sl-mini-empty { margin-top: 26px; color: #9aa4b2; font-family: var(--site-font); font-size: 11px; text-align: center; }
.sl-mini-empty[hidden] { display: none; }
.sl-meter { margin-top: 16px; }
.sl-meter-text { font-size: .88rem; font-weight: 600; }
.sl-meter-bar { height: 8px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--site-line); }
.sl-meter-fill { width: 0; height: 100%; border-radius: 999px; background: #1d7a46; transition: width 250ms ease; }
.sl-order { margin: 10px 2px 0; color: var(--site-ink-muted); font-size: .84rem; }
.sl-tip { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--site-bg-soft); color: var(--site-ink-muted); font-size: .88rem; }

@media (max-width: 1000px) {
  .sl-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-aside { position: static; order: -1; max-width: 360px; }
  .sl-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Focus ---------- */

.site-header a:focus-visible,
.site-header summary:focus-visible,
.site-footer a:focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 2px;
}

/* ---------- Smaller screens ---------- */

/* Links marked wideScreensOnly in navigation.json (the home page sections). */
@media (max-width: 900px) {
  .site-nav { gap: 20px; margin-left: 20px; }
  .site-nav .site-nav-wide-only { display: none; }
}

@media (max-width: 640px) {
  .site-header-inner { padding: 0 16px; gap: 12px; }
  .site-nav { display: none; }
  .site-account .site-button { display: none; }
  .site-footer-inner { padding: 0 16px; }
  body.site-page .app-shell { padding: 32px 16px 8px; }
}