/* Room Designer 3D — styles for the product pages (landing, pricing,
   sign-up, account) and the designer page's extras. Uses the design tokens
   from css/style.css. */

/* ================= Blueprint theme =================
   Product look: geometric display type (Space Grotesk), rounded cards,
   electric-blue buttons, teal highlights and a blueprint grid on dark bands. */

h1,
h2,
h3,
h4 {
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Header: a frosted navy bar. */
.site-header,
.site-header.scrolled,
body:has(main.solid-header) .site-header {
  background: rgba(10, 16, 36, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-on-dark-line);
}

body:has(main.solid-header) .site-header {
  background: var(--color-dark);
}

.nav-brand {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav-brand::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: var(--space-2);
  vertical-align: -4px;
  border-radius: var(--radius-sm);
  background: url("../favicon.svg") center / contain no-repeat;
}

.nav-links a {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-base);
}

.nav-links a::after {
  background: var(--color-highlight-on-dark);
}

.nav-links a.nav-cta {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent-bright);
  color: var(--color-on-dark);
  font-weight: 600;
}

.nav-links a.nav-cta:hover {
  background: color-mix(in srgb, var(--color-accent-bright) 85%, var(--color-on-dark));
  color: var(--color-on-dark);
}

/* Blueprint grid behind the hero, dark bands and CTA. */
.hero,
.cta-band,
.section-dark {
  background-color: var(--color-dark);
  background-image:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(94, 234, 212, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 60% at 10% 100%, rgba(51, 85, 240, 0.28), transparent 70%),
    linear-gradient(rgba(148, 170, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 170, 255, 0.07) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    32px 32px,
    32px 32px;
}

.hero::before,
.cta-band::before {
  background-image: none;
}

.hero {
  text-align: left;
  padding-top: 180px;
}

.hero-inner {
  max-width: var(--max-width);
}

.hero h1 {
  max-width: 820px;
}

.hero p {
  margin-left: 0;
  max-width: 620px;
}

.hero .eyebrow.center,
.hero-actions {
  text-align: left;
  justify-content: flex-start;
}

.hero h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, var(--color-highlight-on-dark), #8ea6ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero.hero-page,
.hero.hero-page .hero-inner,
.hero.hero-page h1,
.hero.hero-page p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero.hero-page .hero-actions {
  justify-content: center;
}

/* Eyebrows become small pills. */
.eyebrow {
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
}

.eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.eyebrow.center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.hero .eyebrow,
.section-dark .eyebrow,
.cta-band .eyebrow {
  color: var(--color-highlight-on-dark);
}

.hero .eyebrow.center {
  margin-left: 0;
}

/* Buttons: rounded, sentence case, blue fill. */
.btn {
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-base);
  font-weight: 600;
}

.btn-primary {
  background: var(--color-accent-bright);
  border-color: var(--color-accent-bright);
  color: var(--color-on-dark);
  box-shadow: 0 10px 24px -12px rgba(51, 85, 240, 0.8);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-dark);
}

.btn-outline {
  border-color: rgba(201, 211, 234, 0.45);
}

/* Cards: separate rounded tiles instead of a ruled grid. */
.grid,
.section-dark .grid {
  gap: var(--space-5);
  background: none;
  border: 0;
}

.card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.section-dark .card {
  background: rgba(19, 28, 58, 0.72);
  border-color: var(--color-on-dark-line);
  box-shadow: none;
}

.card-number {
  font-style: normal;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  font-size: var(--fs-sm);
}

/* Forms: boxed fields, normal-case labels. */
label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
}

.app-card input:not([type="checkbox"]):not([type="radio"]),
.app-card select,
#auth-form input {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--color-surface);
}

.faq-question {
  font-family: var(--font-display);
}

.plan-card,
.app-card,
.app-notice {
  border-radius: var(--radius-lg);
}

.plan-card {
  box-shadow: var(--shadow-soft);
}

.plan-card .plan-badge {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #04201c;
  letter-spacing: 0.02em;
  text-transform: none;
}

.plan-card-featured {
  border-color: var(--color-accent-bright);
  box-shadow:
    0 0 0 1px var(--color-accent-bright),
    var(--shadow-soft);
}

.site-footer {
  background-color: var(--color-dark);
}

.footer-brand {
  font-style: normal;
  font-weight: 700;
}

.footer-heading {
  text-transform: none;
  letter-spacing: 0;
}

main.solid-header {
  padding-top: var(--header-height);
}

/* Sign-up, account and project pages fill in once the sign-in check is
   done; reserving the screen keeps the footer from jumping up and back. */
main.app-page {
  min-height: 100vh;
}

/* designer.html?embed=1: the designer framed by our own project page (project.html). */
html[data-embed="1"] .product-chrome,
html[data-embed="1"] .skip-link {
  display: none !important;
}

html[data-embed="1"] main.solid-header {
  padding-top: 0;
}

.hero-note {
  margin-top: var(--space-5);
  font-size: var(--fs-sm) !important;
}

.center {
  text-align: center;
}

.demo-link {
  margin-top: var(--space-7);
}

.feature-grid .card h3 {
  margin-top: 0;
}

/* ---------- Pricing ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-6);
  max-width: 760px;
  margin: 0 auto;
}

.plan-card {
  position: relative;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: var(--space-7) var(--space-6) var(--space-6);
  text-align: center;
}

.plan-card-featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-bright);
  color: var(--color-dark);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-card h3 {
  margin: 0 0 var(--space-3);
}

.plan-price {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
}

.plan-price span {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-ink);
}

.plan-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  max-width: 1040px;
}

.plan-limits {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px dashed var(--color-line);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  text-align: left;
}

.plan-limits li {
  position: relative;
  margin-bottom: var(--space-2);
  padding-left: var(--space-5);
}

.plan-limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-accent);
  transform: rotate(45deg);
}

.plan-free {
  max-width: 720px;
  margin: var(--space-6) auto 0;
  text-align: center;
  color: var(--color-ink-soft);
}

.plan-free {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.plan-includes {
  max-width: 560px;
  margin: var(--space-7) auto 0;
  padding-left: var(--space-5);
  color: var(--color-ink-soft);
}

.plan-includes li {
  margin-bottom: var(--space-2);
}

/* ---------- Designer page ---------- */
.designer-intro {
  padding: var(--space-7) var(--gutter) 0;
  max-width: var(--content-width);
  margin: 0 auto;
}

.designer-intro .section-title {
  font-size: var(--fs-2xl);
}

/* ---------- Sign-up and account ---------- */
.app-narrow {
  max-width: 520px;
  margin: 0 auto;
}

/* The signed-in pages (account, My projects, a project) share one column. */
.app-wide {
  max-width: var(--app-width);
  margin: 0 auto;
}

/* Under the fixed header the page starts closer than a marketing section
   does, the same on every signed-in page. */
main.app-page > .section {
  padding-top: var(--space-7);
}

/* On a phone, the text links that stand alone on a line and the project
   names in the list are as tall as a finger. */
@media (pointer: coarse) {
  main.app-page p > a:only-child,
  .project-name {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
}

/* The owner's designer address under the web-address field (js/account.js). */
.biz-url {
  margin-top: var(--space-3);
}

.biz-url-line {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.biz-url-value {
  display: block;
  margin-top: var(--space-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.biz-url-actions {
  margin-top: var(--space-3);
}

.biz-url .form-status {
  margin: var(--space-3) 0 0;
}

a.btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.app-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.app-head .section-title {
  text-align: left;
  margin-bottom: var(--space-2);
}

.app-signed-in,
.app-loading {
  color: var(--color-muted);
  margin: 0;
}

/* Loading: a small turning ring before the text, still with reduced motion. */
.app-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-loading::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-line-strong);
  border-top-color: var(--color-accent-bright);
  border-radius: 50%;
  animation: app-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .app-loading::before {
    animation: none;
  }
}

@keyframes app-spin {
  to {
    transform: rotate(360deg);
  }
}

/* No projects yet: a blueprint sheet with the way to start one. */
.app-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius);
  background-color: var(--color-surface-alt);
  background-image:
    linear-gradient(rgba(51, 85, 240, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 85, 240, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  text-align: center;
}

.app-empty[hidden] {
  display: none;
}

.app-empty p {
  max-width: 46ch;
  margin: 0;
  color: var(--color-ink-soft);
}

.app-card,
.app-notice {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.app-notice {
  border-color: var(--color-accent);
}

.app-card h2 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-4);
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.app-actions .btn.is-suggested {
  box-shadow: 0 0 0 3px var(--color-focus);
}

.plan-status {
  font-size: var(--fs-md);
  margin: 0;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  column-gap: var(--space-6);
}

.price-summary {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: var(--space-3) 0 0;
}

.price-mark {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.price-grid input:not(:placeholder-shown) + .price-mark {
  color: var(--color-accent-text);
}

/* A card whose body folds away under its heading (the old homeowner requests). */
.app-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-details summary::-webkit-details-marker {
  display: none;
}

.app-details summary::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  flex: none;
}

.app-details[open] summary::before {
  transform: rotate(45deg);
}

.app-details summary h2 {
  margin: 0;
}

.app-details[open] summary {
  margin-bottom: var(--space-4);
}

.auth-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.auth-tab {
  flex: 1;
  min-height: var(--tap);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
}

.auth-tab[aria-pressed="true"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-accent-text);
  text-decoration: underline;
  cursor: pointer;
  min-height: var(--tap);
}

.lead-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lead-item {
  border-top: 1px solid var(--color-line);
  padding: var(--space-4) 0;
}

.lead-item p {
  margin: 0 0 var(--space-2);
}

.lead-message {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: var(--fs-sm);
  background: var(--color-surface-alt);
  padding: var(--space-3);
  margin: 0 0 var(--space-2);
  max-height: 320px;
  overflow: auto;
}

@media (min-width: 900px) {
  .grid.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.theme-switch button[aria-pressed="true"] {
  color: var(--color-on-dark);
}

/* On navy, highlights are teal. */
.section-dark .card-number,
.footer-col a:hover,
.nav-links .lang-menu-list a[aria-current="true"] {
  color: var(--color-highlight-on-dark);
}

.section-dark .card-number {
  background: rgba(94, 234, 212, 0.12);
}

/* ---------- Projects (js/projects.js) ---------- */
.btn.btn-sm {
  min-height: var(--tap);
  padding: var(--space-1) var(--space-4);
  font-size: var(--fs-sm);
}

.app-head-actions {
  margin-top: 0;
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4) var(--space-6);
}

.usage p {
  margin: 0 0 var(--space-2);
}

.usage meter {
  width: 100%;
  height: var(--space-3);
}

.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-line);
  padding: var(--space-3) 0;
}

.project-main {
  min-width: 0;
  flex: 1 1 240px;
}

.project-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.project-meta {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.project-actions,
.project-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.project-rename {
  flex: 1 1 100%;
}

.project-rename input {
  flex: 1 1 220px;
  min-height: var(--tap);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

.link-button.project-delete {
  color: var(--color-danger);
}

/* The save bar above the design studio, for signed-in subscribers. */
.project-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--gutter);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-sm);
}

.project-bar[hidden] {
  display: none;
}

.project-bar-text {
  margin: 0;
  flex: 1 1 260px;
  color: var(--color-ink-soft);
}

.project-bar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.project-bar-form[hidden] {
  display: none;
}

@media (min-width: 900px) {
  .project-bar-form {
    flex-wrap: nowrap;
  }

  .project-bar-form .btn {
    white-space: nowrap;
  }
}

.project-bar-form label {
  margin: 0;
  font-weight: 600;
}

.project-bar-form input {
  width: min(220px, 100%);
  min-height: var(--tap);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

.project-bar-form .btn {
  min-height: var(--tap);
  padding: var(--space-1) var(--space-4);
  font-size: var(--fs-sm);
}

.project-bar-link {
  font-weight: 600;
}

.project-bar .form-status {
  flex: 1 1 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
}

/* A business owner previewing their own designer before their plan is live. */
.owner-preview {
  padding: var(--space-2) var(--gutter);
  background: var(--color-notice-bg);
  border-bottom: 1px solid var(--color-notice-line);
  color: var(--color-notice-ink);
  font-size: var(--fs-sm);
}

.owner-preview[hidden] {
  display: none;
}

.owner-preview p {
  margin: 0;
}

.owner-preview a {
  color: var(--color-notice-ink);
  font-weight: 600;
}

/* ---------- Project details (the new-project dialog and the Info section) ---------- */
.info-group {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
}

.info-group legend {
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--space-3);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--space-4);
}

.info-grid .form-group {
  grid-column: span 12;
  margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .info-grid .info-phone,
  .info-grid .info-email,
  .info-grid .info-type,
  .info-grid .info-status,
  .info-grid .info-city,
  .info-grid .info-start {
    grid-column: span 6;
  }

  .info-grid .info-street {
    grid-column: span 8;
  }

  .info-grid .info-unit {
    grid-column: span 4;
  }

  .info-grid .info-state,
  .info-grid .info-zip {
    grid-column: span 3;
  }
}

.info-fields input,
.info-fields select,
.info-fields textarea {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

.info-fields textarea {
  min-height: 96px;
  resize: vertical;
}

.info-fields .form-group > label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.project-dialog {
  width: min(640px, calc(100% - 2 * var(--space-4)));
  max-height: calc(100vh - 2 * var(--space-4));
  overflow: auto;
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow);
}

/* The dialog's X, in its top corner; Cancel is still there for everyone else. */
.project-dialog form,
.project-dialog-body {
  position: relative;
}

.project-dialog-close {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: calc(-1 * var(--space-3));
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}

.project-dialog-close:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.project-dialog::backdrop {
  background: rgba(10, 16, 36, 0.55);
}

/* On the dark page a navy backdrop barely shows; go darker there. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .project-dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] .project-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.project-dialog h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.project-bar-where {
  color: var(--color-muted);
}

/* ---------- My projects list extras ---------- */
/* Search, sort and status filter in one row where there's room. */
/* The search box takes the room; each select is as wide as its longest
   choice (never clipped to "All statuse…"), its label on one line. */
.projects-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.projects-tools .projects-search {
  flex: 1 1 12rem;
  min-width: 0;
}

.projects-tools label {
  white-space: nowrap;
}

.projects-tools[hidden] {
  display: none;
}

/* "Clear filters" sits under the controls, on its own line. */
.projects-clear {
  flex: 1 1 100%;
  margin: 0;
}

.projects-clear[hidden] {
  display: none;
}

/* A row with no client, status or start date says so in words, muted, so it
   reads as "nothing here yet" rather than as something that failed to load.
   The empty status isn't a pill: there's no status to badge. */
.project-client.is-none,
.project-start.is-none,
.project-status.is-none {
  color: var(--color-muted);
}

.project-status.is-none {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 400;
}

/* The designer's loading panel when the project named in the address
   couldn't be opened (js/projects.js): the message, with its way out, in
   place of the spinner and the "taking longer" line. */
.studio-loading.is-failed .studio-loading-text {
  display: block;
  font-weight: 400;
}

.studio-loading.is-failed .studio-loading-text::before {
  display: none;
}

.projects-tools .form-group {
  margin: 0;
}

.projects-tools select {
  width: 100%;
  min-height: var(--tap);
}

@media (max-width: 720px) {
  .projects-tools {
    flex-direction: column;
    align-items: stretch;
  }
}

.projects-search input {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

.project-client {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

.project-status {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  font-weight: 600;
}

/* In a card the start and updated dates run on from the status. */
.project-updated::before {
  content: " · ";
}

/* ---------- The table view (My projects, wide screens) ---------- */
/* The same rows laid out in columns: each fact a cell, under a heading row
   that sticks below the site header while the list scrolls. The heading row
   and every row share one column template, with a fixed-width last column
   (the buttons), so the headings sit over their columns whatever a row
   holds. The table is offered only from 1180 px, the width at which every
   column has room (the Project and Client columns never go under 10 and 12
   rem); narrower screens keep the cards whatever the pick, so the control
   hides. The page then uses the width a table needs, up to 1400 px, so a
   normal name stays on one line at 1280 and the table keeps growing at 1440. */
.projects-view,
.project-table-head {
  display: none;
}

@media (min-width: 1180px) {
  .projects-view {
    display: block;
  }

  .project-table-head {
    display: block;
    white-space: nowrap;
    position: sticky;
    top: 64px; /* under the site header, at its scrolled height */
    z-index: 1;
    padding: var(--space-2) 0;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .project-table-head[hidden] {
    display: none;
  }

  .project-table-row,
  .project-list.is-table .project-item {
    --project-columns: minmax(10rem, 1.4fr) minmax(12rem, 2fr) minmax(7.5rem, 0.8fr) minmax(7rem, 0.8fr)
      minmax(7rem, 0.8fr) 18rem;
    display: grid;
    grid-template-columns: var(--project-columns);
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }

  /* A heading never runs into its neighbour, whatever the language. */
  .project-table-row > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The buttons sit at the right of their column; so does their heading. */
  .project-table-row .project-col-actions {
    text-align: right;
  }

  /* A heading that sorts the list: a button that looks like the others,
     with an arrow on the one in use (down for the forward order, up for
     the reversed one). */
  .project-table-head .project-sort {
    appearance: none;
    border: 0;
    padding: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
  }

  .project-table-head .project-sort:hover,
  .project-table-head .project-sort:focus-visible {
    color: var(--color-ink);
    text-decoration: underline;
  }

  .project-table-head .project-sort[aria-pressed="true"] {
    color: var(--color-ink);
  }

  .project-table-head .project-sort[aria-pressed="true"]::after {
    content: "\00a0▾";
  }

  .project-table-head .project-sort[aria-pressed="true"].is-desc::after {
    content: "\00a0▴";
  }

  /* The column heading says "Starts" / "Updated": the cell shows the date
     alone (the words stay in the page for screen readers). */
  .project-list.is-table .project-date-words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The table needs more width than the account-style column has. */
  .app-wide:has(.project-list.is-table) {
    max-width: 1400px;
  }

  .project-list.is-table .project-main,
  .project-list.is-table .project-meta {
    display: contents;
  }

  .project-list.is-table .project-name {
    overflow-wrap: break-word;
  }

  .project-list.is-table .project-client,
  .project-list.is-table .project-start,
  .project-list.is-table .project-updated {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-ink-soft);
  }

  .project-list.is-table .project-client.is-none,
  .project-list.is-table .project-start.is-none {
    color: var(--color-muted);
  }

  /* A date or a status pill stays on one line; the name, the client and
     the "No … yet" notes wrap. */
  .project-list.is-table .project-status:not(.is-none),
  .project-list.is-table .project-start:not(.is-none),
  .project-list.is-table .project-updated {
    white-space: nowrap;
  }

  .project-list.is-table .project-status {
    margin-right: 0;
    justify-self: start;
    max-width: 100%;
  }

  .project-list.is-table .project-updated::before {
    content: none;
  }

  .project-list.is-table .project-actions {
    justify-content: flex-end;
    gap: var(--space-2) var(--space-3);
  }

  .project-list.is-table .project-rename {
    grid-column: 1 / -1;
  }
}

/* ---------- One project's page ---------- */
/* On the designer page the top bar lines up with the full-width studio. */
body:has(.studio-page) .nav {
  max-width: none;
}

/* The info form stays a readable width inside the wide card. */
#project-info-form {
  max-width: 760px;
}

#panel-model {
  padding: var(--space-4);
}

@media (max-width: 640px) {
  #panel-model {
    padding: var(--space-2);
  }
}

.project-back {
  margin: 0 0 var(--space-2);
}

/* Plain text links on the app pages ("← My projects", "Open my projects")
   are a finger's height on a phone, not a 20px line. */
.project-back a,
#projects-card > p > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.project-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  overflow-x: auto;
}

.project-tabs [role="tab"] {
  min-height: var(--tap);
  padding: 0 var(--space-4);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
}

.project-tabs [role="tab"][aria-selected="true"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent-bright);
}

.project-panel[hidden] {
  display: none;
}

.project-model {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.project-model iframe {
  display: block;
  width: 100%;
  height: max(560px, calc(100vh - 140px));
  border: 0;
}

.project-materials-actions {
  margin: 0 0 var(--space-4);
  justify-content: flex-end;
}

.materials-room,
.materials-totals {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-5);
}

.materials-room dt,
.materials-totals dt {
  font-weight: 600;
}

.materials-room dd,
.materials-totals dd {
  margin: 0;
}

.materials-totals {
  max-width: 360px;
  margin-left: auto;
}

.materials-totals dd {
  text-align: right;
}

.materials-totals .is-total {
  font-size: var(--fs-md);
  font-weight: 700;
  border-top: 1px solid var(--color-line-strong);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}

.materials-totals dt.is-total {
  margin-right: calc(-1 * var(--space-4));
}

.materials-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
}

.materials-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

.materials-table th,
.materials-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
  overflow-wrap: anywhere;
}

.materials-table thead th {
  color: var(--color-muted);
  font-weight: 600;
}

.materials-table tbody th {
  font-weight: 600;
}

.materials-table .num {
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
}

@media (max-width: 600px) {
  .materials-table thead {
    display: none;
  }

  .materials-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-2) 0;
  }

  .materials-table th,
  .materials-table td {
    border: 0;
    padding: 0;
  }

  .materials-table td:not(.num) {
    grid-column: 1;
    color: var(--color-ink-soft);
  }

  .materials-table .num {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Printing a project: just the materials list. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .project-back,
  .project-tabs,
  .app-head-actions,
  .project-materials-actions,
  #panel-model,
  #panel-info {
    display: none !important;
  }

  main.solid-header {
    padding-top: 0;
  }

  .app-card {
    border: 0;
    padding: 0;
  }

  #panel-materials {
    display: block !important;
  }
}

/* The phone menu: solid navy like the header, so the page never shows through. */
@media (max-width: 1080px) {
  .nav-links {
    background: var(--color-dark);
    border-bottom: 1px solid var(--color-on-dark-line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
  }
}

/* Account: deleting the account, kept apart and in red */
.app-card-danger {
  border-color: var(--color-danger);
}

/* Text on the red: white in light mode, navy in dark mode, where the red is
   light and white text would fall under 4.5:1. */
.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-danger-ink, #fff);
}

.btn-danger:hover:not(:disabled) {
  filter: brightness(0.9);
}

/* ---------- Plans on the account page (no paid plan yet) ---------- */
.plan-pitch {
  margin: var(--space-4) 0 var(--space-5);
  color: var(--color-ink-soft);
}

.plan-grid-account {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  max-width: none;
  margin: var(--space-7) 0 0;
}

.plan-card .btn.is-suggested {
  box-shadow: 0 0 0 3px var(--color-focus);
}

.plan-includes-title {
  margin: var(--space-6) 0 var(--space-2);
  font-weight: 600;
}

.plan-includes.plan-includes-account {
  max-width: none;
  margin: 0;
}

/* ---------- The free week, for visitors ---------- */
.hero-offer {
  display: inline-block;
  margin: 0 0 var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #04201c !important;
  font-weight: 600;
}

.offer-card {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent-bright) 12%, var(--color-surface));
}

.offer-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
}

.offer-card ul {
  margin: 0;
  padding-left: var(--space-5);
}

.hero-offer[hidden],
.offer-card[hidden] {
  display: none;
}

.plan-offer {
  margin: 0 0 var(--space-4);
  color: var(--color-accent-text);
  font-weight: 600;
}

.plan-mini {
  margin: var(--space-2) 0 var(--space-4);
  padding-left: var(--space-5);
}

.plan-mini li {
  margin-bottom: var(--space-1);
}

/* ---------- The ad video, for visitors ---------- */
.video-section {
  padding-bottom: 0;
}

.video-frame {
  max-width: 960px;
  margin: var(--space-6) auto 0;
}

.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: #0b1530;
}

.video-frame figcaption {
  margin: var(--space-4) auto 0;
  max-width: 640px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* Signed in: the visitor-only parts stay hidden before js/script.js runs. */
html[data-signed-in] [data-nav-signed-out],
.video-section[hidden] {
  display: none;
}