body {
  font-family: var(--font-sans);
  margin: 0;
  color: var(--c-text);
  background: var(--c-bg);
}

header {
  background: var(--c-header-bg);
  color: var(--c-text-on-dark);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.header-inner form {
  margin-left: auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-cta {
  padding: 5px 12px;
  font-size: 0.85rem;
}

.header-logo {
  color: var(--c-text-on-dark);
  font-weight: 700;
  text-decoration: none;
}

.button-ghost {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--c-text-on-dark);
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.button-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

.button-ghost:active {
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 24%);
  transform: translateY(1px);
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

a {
  color: var(--c-primary-mid);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface-card);
}

.schedule-table {
  width: 100%;
  min-width: 480px;
}

th,
td {
  border-bottom: 1px solid var(--c-border);
  padding: 10px;
  text-align: left;
  vertical-align: middle;
}

th {
  font-size: 12px;
  max-width: 200px;
  text-transform: uppercase;
  background: var(--c-surface-raised);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input {
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--c-border-input);
}

label {
  display: block;
  margin: 12px 0;
  font-weight: 700;
}

button,
.button {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--c-primary-mid);
  background: var(--c-primary-light);
  color: var(--c-primary-text);
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s, color 0.12s, transform 0.05s;
}

button:hover,
.button:hover {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-dark);
}

button:active,
.button:active {
  background: var(--c-primary-active);
  border-color: var(--c-primary-dark);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 22%);
  transform: translateY(1px);
}

.actions {
  margin: 16px 0;
}

.muted {
  color: var(--c-text-dim);
}

.page-subtitle {
  color: var(--c-text-dim);
  font-size: 14px;
  margin: 4px 0 0;
}

/* Info-style hints: narrow, neutral, with a circled serif "i" badge. Use
 * for empty-state blocks and modal hints — anything that's guidance about
 * the UI, not project data. */
.empty-state,
.modal-hint {
  align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-left: 3px solid var(--c-primary-mid);
  border-radius: 6px;
  color: var(--c-text-muted);
  display: flex;
  font-size: 13px;
  gap: 10px;
  line-height: 1.5;
  margin: 16px auto;
  max-width: 480px;
  padding: 12px 14px;
}

.modal-hint > * {
  min-width: 0;
}

.empty-state::before,
.modal-hint::before {
  align-items: center;
  background: var(--c-primary-mid);
  border-radius: 50%;
  color: var(--c-text-on-dark);
  content: "i";
  display: flex;
  flex-shrink: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
  width: 18px;
}

.empty-state-content {
  flex: 1;
  min-width: 0;
}

.empty-state-headline {
  color: var(--c-text);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.empty-state-body {
  color: var(--c-text-muted);
  margin: 0;
}

.empty-state--centered {
  margin-left: auto;
  margin-right: auto;
}

.button-danger {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--c-danger-border);
  background: var(--c-danger-bg);
  color: var(--c-danger-text);
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
}

.button-danger:hover {
  background: var(--c-danger-hover);
  border-color: var(--c-danger-border);
}

.button-danger:active {
  background: var(--c-danger-active);
  border-color: var(--c-danger-border);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 18%);
  transform: translateY(1px);
}

.button-danger-subtle {
  border-color: var(--c-border);
  background: transparent;
  color: var(--c-text-muted);
}

.button-danger-subtle:hover {
  border-color: var(--c-danger-border);
  background: var(--c-danger-bg);
  color: var(--c-danger-text);
}

.about-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  color: var(--c-text-neutral);
}

.about-hero {
  text-align: center;
  padding: 16px 0 24px;
}

.about-hero h1 {
  font-size: 2.4rem;
  margin: 0 0 6px;
  color: var(--c-text-neutral);
}

.about-tagline {
  color: var(--c-text-neutral-muted);
  font-size: 1.1rem;
  margin: 0 0 16px;
}

.about-blurb {
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.55;
  color: var(--c-text-neutral);
}

.about-carousel {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  margin: 32px 0 24px;
  padding: 28px 28px 16px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 4%);
  color: var(--c-text-neutral);
}

/* Fixed slide height so the carousel stops jumping as users click through
 * screenshots of varying natural dimensions. The figure column is letter-
 * boxed via object-fit: contain. */
.about-slide {
  display: none;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  min-height: 360px;
}

@media (min-width: 720px) {
  .about-slide {
    grid-template-columns: 5fr 6fr;
    gap: 32px;
  }
}

.about-slide.is-active {
  display: grid;
}

.about-slide-text h2 {
  font-size: 1.4rem;
  margin: 4px 0 10px;
  color: var(--c-text-neutral);
}

.about-slide-text p {
  line-height: 1.55;
  margin: 0 0 8px;
  color: var(--c-text-neutral);
}

.about-step-kicker {
  color: var(--c-text-neutral-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.about-slide-figure {
  margin: 0;
  background: var(--c-surface-alt);
  border-radius: 8px;
  border: 1px solid var(--c-border);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.about-slide-figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.about-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}

.about-nav-btn {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-strong);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-text-neutral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about-nav-btn:hover:not(:disabled) {
  background: var(--c-hover);
}

.about-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.about-dots {
  display: inline-flex;
  gap: 8px;
}

.about-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--c-border-strong);
  padding: 0;
  cursor: pointer;
  transition: background 120ms;
}

.about-dot:hover {
  background: var(--c-text-dim);
}

.about-dot.is-active {
  background: var(--c-text-neutral);
}

.about-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  font-size: 1.05rem;
  color: var(--c-text-neutral);
}

.about-cta .button {
  padding: 12px 24px;
  font-size: 1rem;
}


/* ══ Marketing / logged-out pages ═══════════════════════════════════
 * `lp-` = landing page. First iteration of the site redesign: a dark
 * drafting-paper hero, one flow diagram that shows the whole product,
 * then alternating feature bands and a closing CTA.
 *
 * Every figure here is drawn from the design tokens rather than from a
 * screenshot, so the illustrations track the product instead of going
 * stale the way the captured PNGs did.
 */
.lp {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 0 32px;
}

/* Page wash: a soft green gradient, fixed and behind everything, so the page
   sits on a tinted ground rather than flat white. */
.lp::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 12% -10%, rgba(31, 122, 58, 0.08) 0%, transparent 62%),
    radial-gradient(ellipse 70% 55% at 96% 24%, rgba(31, 122, 58, 0.06) 0%, transparent 66%),
    radial-gradient(ellipse 80% 50% at 50% 108%, rgba(15, 47, 36, 0.05) 0%, transparent 60%);
}

/* ── hero ── */
.lp-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: clamp(28px, 4.5vw, 44px) clamp(20px, 5vw, 56px) clamp(26px, 4vw, 38px);
  background: var(--c-header-bg);
  color: var(--c-text-on-dark);
  text-align: center;
}

/* Scrim over the stage: holds the copy off the drawing without hiding it at
   the corners, plus the glow along the top edge. */
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 50% 48%, rgba(15, 47, 36, 0.88) 0%, rgba(15, 47, 36, 0.6) 48%, rgba(15, 47, 36, 0) 80%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(183, 243, 197, 0.16) 0%, transparent 70%);
}

/* ── hero stage ──
   The drawing sheet laid back in perspective, drawn in light ink on the dark
   hero. Three planes share one vanishing point: a dot grid on the ground, the
   sheet's far half blurred, its near half sharp. The split is what reads as
   depth of field -- one blur over the whole plane just looks out of focus. */
.lp-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1400px;
  perspective-origin: 50% 18%;
  /* fade the whole stage out at the card edges so nothing terminates hard */
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 62%, #000 30%, rgba(0, 0, 0, 0.7) 62%, transparent 92%);
          mask-image: radial-gradient(ellipse 85% 90% at 50% 62%, #000 30%, rgba(0, 0, 0, 0.7) 62%, transparent 92%);
}

.lp-stage-dots,
.lp-stage-sheet {
  position: absolute;
  left: -35%;
  right: -35%;
  top: -20%;
  bottom: -45%;
  transform-origin: 50% 40%;
  transform: rotateX(46deg) rotateZ(-10deg);
  backface-visibility: hidden;
}

.lp-stage-dots {
  background-image: radial-gradient(circle at 1px 1px, rgba(183, 243, 197, 0.5) 1px, transparent 1.6px);
  background-size: 26px 26px;
  opacity: 0.65;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 72%, transparent 100%);
}

.lp-stage-sheet {
  background: url('/static/blueprint-light.svg') no-repeat center center;
  background-size: 72% auto;
}

/* far half — receding, so it goes soft */
.lp-stage-sheet--far {
  opacity: 0.42;
  filter: blur(4px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 52%);
          mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 52%);
}

/* near half — in the focal plane, and crisp */
.lp-stage-sheet--near {
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 52%, #000 78%, transparent 96%);
          mask-image: linear-gradient(180deg, transparent 34%, #000 52%, #000 78%, transparent 96%);
}

@media (max-width: 720px) {
  .lp-stage-sheet { background-size: 130% auto; }
  .lp-stage-sheet--far { filter: blur(2.5px); }
  .lp-stage-dots { background-size: 20px 20px; }
}

.lp-hero > * {
  position: relative;
  z-index: 2;
}

.lp-hero > .lp-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lp-eyebrow {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary-light);
}

.lp-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4.8vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-text-on-dark);
}

.lp-hero-sub {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  color: var(--c-text-on-dark-muted);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.lp-actions .button {
  padding: 13px 26px;
  font-size: 1rem;
}

.lp-btn-ghost {
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  color: var(--c-text-on-dark);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.lp-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--c-text-on-dark);
}

.lp-win {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.lp-win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--c-surface-raised);
  border-bottom: 1px solid var(--c-border);
}

.lp-dots {
  display: flex;
  flex: none;
  gap: 4px;
}

.lp-dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-border-strong);
}

.lp-url {
  flex: 1;
  min-width: 0;
  padding: 2px 8px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface-card);
  color: var(--c-text-dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-spec-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 14px;
  border-radius: 4px;
  background: var(--c-primary);
  color: var(--c-text-on-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  animation: lp-pulse 3.6s ease-in-out infinite;
}

@keyframes lp-pulse {
  0%, 6%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
  11%          { transform: scale(0.92); box-shadow: 0 0 0 5px rgb(var(--lp-glow-rgb) / 26%); }
  22%          { transform: scale(1); box-shadow: 0 0 0 14px rgb(var(--lp-glow-rgb) / 0%); }
}

/* The one commercial fact a first-time reader needs, so it is a badge rather
 * than another line of hero copy. */
.lp-hero-price {
  align-items: center;
  background: var(--c-primary-light);
  border-radius: 999px;
  color: var(--c-primary-text);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 24px 0 0;
  padding: 10px 22px;
}

/* ── flow: three stages, two arrows ── */
.lp-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(32px, 5vw, 44px);
}

@media (min-width: 980px) {
  .lp-flow {
    grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.15fr);
    gap: 18px;
    align-items: center;
  }
}

.lp-panel {
  min-width: 0;
}

.lp-step {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.lp-step b {
  color: var(--c-primary-mid);
}

.lp-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary-mid);
}

.lp-arrow svg {
  width: 26px;
  height: 26px;
  transform: rotate(90deg);
}

@media (min-width: 980px) {
  .lp-arrow svg { transform: none; }
}

/* ── stage 1: stand-in product page ── */
.lp-product {
  position: relative;
  padding: 12px;
  min-height: 252px;
}

.lp-pp-crumb {
  margin: 0 0 10px;
  font-size: 10px;
  color: var(--c-text-dim);
}

.lp-pp-body {
  display: flex;
  gap: 12px;
}

.lp-pp-img {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border: 1px solid var(--c-border-light);
  border-radius: 4px;
  background: var(--c-surface-image);
  color: var(--c-text-label);
}

.lp-pp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.lp-pp-meta {
  min-width: 0;
}

.lp-pp-title {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.lp-pp-sku {
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--c-text-dim);
}

.lp-pp-price {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.lp-pp-specs {
  margin: 0;
  padding-left: 14px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ── pricing ── */
.lp-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(48px, 7vw, 76px);
}

@media (min-width: 760px) {
  .lp-pricing { grid-template-columns: 1fr 1fr; }
}

.lp-price-card {
  padding: 26px 24px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface);
}

.lp-price-card--free {
  border-color: var(--c-primary);
  border-width: 2px;
  background: var(--c-surface-card);
}

.lp-price-kicker {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.lp-price-figure {
  margin: 0;
  font-size: clamp(2.1rem, 4.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.lp-price-figure span {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-text-muted);
}

.lp-price-line {
  margin: 8px 0 16px;
  font-size: 1.02rem;
  font-weight: 700;
}

/* Narrower measure for reading pages (FAQ) than for the landing page. */
.lp--doc {
  max-width: 820px;
}

.lp-sec-head--top {
  margin-top: 16px;
}

.lp-faq-group {
  max-width: 780px;
  margin: 56px auto 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.lp-faq-group + .lp-faq {
  margin-top: 0;
}

.lp-cta-note {
  margin: 16px 0 0;
  font-size: 0.9rem;
}

.lp-cta-note a {
  color: var(--c-primary-light);
}

/* ── FAQ teaser on the landing page ── */
.lp-faq-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(48px, 7vw, 76px);
  padding: 24px 28px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface);
}

.lp-faq-teaser h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.lp-faq-teaser p {
  margin: 0;
  color: var(--c-text-muted);
}

/* Sits directly under the walk-through: same card shape as the FAQ teaser,
 * but the actions wrap onto their own row because there are four of them. */
.lp-demo-links {
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-top: clamp(32px, 5vw, 52px);
  padding: 24px 28px;
}

.lp-demo-links-text {
  flex: 1 1 320px;
}

.lp-demo-links h2 {
  font-size: 1.2rem;
  margin: 0 0 4px;
}

.lp-demo-links p {
  color: var(--c-text-muted);
  margin: 0;
  max-width: 52ch;
}

.lp-demo-links-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lp-demo-links-actions .lp-btn-outline,
.lp-demo-links-actions .button {
  font-size: 0.9rem;
  padding: 9px 16px;
}

/* The one place on the page to act on "install it", sitting where the step
   cards used to. Same shape as the FAQ teaser below it, so the foot of the
   page reads as two matching strips rather than four unrelated blocks. */
.lp-getstarted {
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-top: clamp(48px, 7vw, 76px);
  padding: 24px 28px;
}

.lp-getstarted h2 {
  font-size: 1.2rem;
  margin: 0 0 4px;
}

.lp-getstarted p {
  color: var(--c-text-muted);
  margin: 0;
}

/* Matches .lp-btn-outline's proportions so the two strips line up. */
.lp-getstarted-btn {
  flex: none;
  padding: 11px 22px;
}

.lp-btn-outline {
  display: inline-block;
  flex: none;
  padding: 11px 22px;
  border: 1px solid var(--c-primary-mid);
  border-radius: 4px;
  background: transparent;
  color: var(--c-text-link);
  font-weight: 700;
  text-decoration: none;
}

.lp-btn-outline:hover {
  background: var(--c-primary-light);
}

/* ── FAQ ── */
.lp-faq {
  max-width: 780px;
  margin: 28px auto 0;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface-card);
  overflow: hidden;
}

.lp-faq-item + .lp-faq-item {
  border-top: 1px solid var(--c-border);
}

.lp-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

.lp-faq-item > summary::-webkit-details-marker {
  display: none;
}

.lp-faq-item > summary::after {
  content: '+';
  flex: none;
  color: var(--c-primary-mid);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}

.lp-faq-item[open] > summary::after {
  content: '\2013';
}

.lp-faq-item > summary:hover {
  background: var(--c-surface-hover);
}

.lp-faq-item > p code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--c-surface);
  font-size: 0.9em;
}

.lp-faq-item > p {
  margin: 0;
  padding: 2px 24px 22px;
  max-width: 68ch;
  line-height: 1.7;
  color: var(--c-text-muted);
}

/* key/value rows in the draft-entry figure */
.lp-kv {
  width: 1%;
  white-space: nowrap;
  color: var(--c-text-label);
}

.lp-src {
  color: var(--c-text-link);
}

/* stand-in schedule table */
.lp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface-card);
  font-size: 11px;
}

.lp-table th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-raised);
  color: var(--c-text-label);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.lp-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  white-space: nowrap;
}

.lp-thumb {
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-border-light);
  border-radius: 3px;
  background: var(--c-surface-image);
}

.lp-chip {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--c-room-border);
  border-radius: 10px;
  background: var(--c-room-bg);
  color: var(--c-room-text);
  font-size: 10px;
}

.lp-note {
  max-width: 660px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.lp-note--fine {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--c-text-dim);
}

/* ── alternating feature bands ── */
.lp-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  margin-top: clamp(48px, 7vw, 76px);
}

@media (min-width: 880px) {
  .lp-feature {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .lp-feature--flip .lp-feature-media {
    order: -1;
  }
}

.lp-kicker {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.lp-feature h2 {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lp-feature p {
  margin: 0 0 14px;
  line-height: 1.6;
  color: var(--c-text-muted);
}

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

.lp-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  line-height: 1.5;
  color: var(--c-text-muted);
}

.lp-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(-45deg);
}

.lp-list b {
  color: var(--c-text);
}

/* media column: a plain framed figure */
.lp-figure {
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  padding: 18px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 6%);
}

/* handoff formats */
.lp-formats {
  display: grid;
  gap: 12px;
}

.lp-format {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface-card);
}

.lp-format-tag {
  flex: none;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--c-primary-light);
  border: 1px solid var(--c-border-light);
  color: var(--c-primary-text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lp-format h3 {
  margin: 0 0 2px;
  font-size: 0.92rem;
}

.lp-format p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--c-text-muted);
}

/* column-editing figure */
.lp-colchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 8px 0;
  padding: 5px 10px;
  border: 1px solid var(--c-border-mid);
  border-radius: 4px;
  background: var(--c-surface-card);
  font-size: 12px;
}

.lp-colchip--add {
  border-style: dashed;
  border-color: var(--c-primary);
  color: var(--c-primary-mid);
  font-weight: 700;
}

.lp-colchip i {
  color: var(--c-text-dim);
  font-style: normal;
}

/* ── section heading ── */
.lp-sec-head {
  text-align: center;
  max-width: 620px;
  margin: clamp(48px, 7vw, 76px) auto 0;
}

.lp-sec-head h2 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lp-sec-head p {
  margin: 0;
  line-height: 1.55;
  color: var(--c-text-muted);
}

/* ── capability grid ── */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.lp-card {
  padding: 18px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
}

.lp-card h3 {
  margin: 12px 0 6px;
  font-size: 0.98rem;
}

.lp-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}

.lp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--c-primary-light);
  color: var(--c-primary-text);
}

.lp-icon svg {
  width: 18px;
  height: 18px;
}

/* ── getting started strip ── */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 24px;
  counter-reset: lp-step;
}

.lp-stepcard {
  position: relative;
  padding: 20px 18px 18px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface-card);
}

.lp-stepcard::before {
  counter-increment: lp-step;
  content: counter(lp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--c-header-bg);
  color: var(--c-text-on-dark);
  font-size: 13px;
  font-weight: 700;
}

.lp-stepcard h3 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}

.lp-stepcard p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* ── closing CTA ── */
.lp-cta {
  margin-top: clamp(48px, 7vw, 76px);
  padding: clamp(32px, 5vw, 48px) 24px;
  border-radius: 14px;
  background: var(--c-header-bg);
  color: var(--c-text-on-dark);
  text-align: center;
}

.lp-cta h2 {
  margin: 0 0 10px;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.2;
  color: var(--c-text-on-dark);
}

.lp-cta p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--c-text-on-dark-muted);
  line-height: 1.55;
}

/* ── interactive walk-through (JS adds .lp-demo-on to .lp-flow) ──
 * Panel 1 is a stand-in browser with three product tabs; SPEC drafts a row into
 * the editable schedule in panel 2; Export draws that schedule onto the drafting
 * sheet in panel 3. Without JS the three panels are a static illustration. */

/* ── stage 1: browser tabs ── */
.lp-win-tabs {
  display: flex;
  gap: 3px;
  padding: 5px 6px 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-raised);
}

.lp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: transparent;
  color: var(--c-text-dim);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

/* ── guided walk-through ──
 * The demo teaches itself: it opens with only the stand-in browser, centred,
 * and a narrator rail above it. The rail is deliberately outside both windows —
 * page furniture, not part of the site being captured — and whatever it is
 * talking about flashes gently underneath it. */
.lp-flow.is-solo {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

.lp-flow.is-solo .lp-arrow,
.lp-flow.is-solo .lp-panel--sched {
  display: none;
}

.lp-panel--sched.is-entering,
.lp-arrow.is-entering {
  animation: lp-panel-in 700ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.lp-arrow.is-entering {
  animation-delay: 140ms;
}

@keyframes lp-panel-in {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}

.lp-demo-stage {
  position: relative;
  /* No headroom reserved: a bubble pointing at a browser tab is positioned
     above the window and simply overhangs the hero, which costs no layout
     and reads fine -- it is a card floating over the page, not part of it. */
}

/* The narrator bubble: a card floating over the demo, parked above whatever it
   names. Narrow on purpose — a wrapped sentence reads as a note pinned to the
   thing, not as a caption belonging to the stand-in page. */
.lp-rail {
  position: absolute;
  z-index: 5;
  width: 250px;
  padding: 12px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  background: var(--c-surface-raised);
  color: var(--c-text);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
  transition: left 460ms cubic-bezier(0.4, 0, 0.2, 1), top 460ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-rail-text {
  margin: 0;
}

/* The first line arrives after the page has settled, so it has to catch the
   eye on its own. */
.lp-rail.is-attract {
  animation: lp-rail-attract 2.6s ease-in-out infinite;
}

@keyframes lp-rail-attract {
  0%, 100% { border-color: var(--c-border-strong); box-shadow: 0 10px 28px rgb(0 0 0 / 22%), 0 0 0 0 rgb(var(--lp-glow-rgb) / 0%); }
  45%      { border-color: var(--c-primary); box-shadow: 0 10px 28px rgb(0 0 0 / 22%), 0 0 0 6px rgb(var(--lp-glow-rgb) / 18%); }
}

/* Continue is the only way on, so it reads as live. */
.lp-rail-next {
  animation: lp-next-pulse 2s ease-in-out infinite;
}

@keyframes lp-next-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--lp-glow-rgb) / 0%); transform: scale(1); }
  45%      { box-shadow: 0 0 0 6px rgb(var(--lp-glow-rgb) / 22%); transform: scale(1.03); }
}

/* The tail, on whichever edge faces the target. */
.lp-rail::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: var(--lp-tail-x, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border-strong);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.lp-rail.is-below::after {
  top: -7px;
  bottom: auto;
  border: 1px solid var(--c-border-strong);
  border-bottom: 0;
  border-right: 0;
}

/* The step that waits on the reader carries its own button. */
.lp-rail-next {
  display: block;
  margin: 10px 0 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-text-on-dark);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

/* display:block would otherwise beat the UA's [hidden] rule. */
.lp-rail-next[hidden] {
  display: none;
}

.lp-rail-next:hover {
  background: var(--c-primary-mid);
}

.lp-rail-next:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Each new line fades up, so a changed sentence is noticed. */
.lp-rail.is-fresh .lp-rail-text {
  animation: lp-rail-in 420ms ease-out both;
}

@keyframes lp-rail-in {
  from { opacity: 0; transform: translateY(3px); }
}

/* ── the gentle flash on whatever the rail points at ── */
.lp-tab.is-target,
.lp-spec-btn.is-target,
.lp-export-btn.is-target {
  animation: lp-target 2.4s ease-in-out infinite;
}

@keyframes lp-target {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--lp-glow-rgb) / 0%); }
  45%      { box-shadow: 0 0 0 7px rgb(var(--lp-glow-rgb) / 24%); }
}

.lp-tab.is-target {
  background: var(--c-surface-card);
}

.lp-table--edit tr.is-target td {
  animation: lp-target-row 2.4s ease-in-out infinite;
}

@keyframes lp-target-row {
  0%, 100% { background: transparent; }
  45%      { background: var(--c-surface-hover); }
}

.lp-tab:hover {
  color: var(--c-text);
}

.lp-tab.is-active {
  border-color: var(--c-border);
  background: var(--c-surface-card);
  color: var(--c-text);
}

.lp-tab:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

/* Invented stores. Each tab gets its own colour and lettering so the three read
 * as three different sites — a trade supply house, a big box, a lighting
 * showroom — without borrowing anyone's name or mark. */
[data-vendor="supply"]   { --lp-vendor: #0b5cab; }
[data-vendor="bigbox"]   { --lp-vendor: #d2601a; }
[data-vendor="lighting"] { --lp-vendor: #1b1b1b; }

@media screen and (prefers-color-scheme: dark) {
  /* The showroom prints its wordmark in near-black; on the dark ground it has
     to invert, the way the real site's dark theme would. */
  [data-vendor="lighting"] { --lp-vendor: #e7e9e6; }
}

/* Each store sets its own type, so the three panes read as three unrelated
 * sites rather than one template with the colour swapped. */
[data-vendor="supply"]   { --lp-font: Georgia, "Times New Roman", serif; }
[data-vendor="bigbox"]   { --lp-font: "Arial Black", "Helvetica Neue", Arial, sans-serif; }
[data-vendor="lighting"] { --lp-font: Optima, Futura, "Century Gothic", var(--font-sans); }

.lp-pp-crumb,
.lp-pp-title,
.lp-pp-sku,
.lp-pp-price,
.lp-pp-specs {
  font-family: var(--lp-font, var(--font-sans));
}

/* trade supply house: catalogue-ish serif, quiet price */
[data-vendor="supply"] .lp-pp-title { font-weight: 700; }
[data-vendor="supply"] .lp-pp-price { font-weight: 700; }

/* big box: heavy, tight, price shouting in the store colour */
[data-vendor="bigbox"] .lp-pp-title {
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

[data-vendor="bigbox"] .lp-pp-price {
  color: var(--lp-vendor);
  font-weight: 900;
  font-size: 1.05rem;
}

[data-vendor="bigbox"] .lp-pp-crumb { text-transform: uppercase; }

/* lighting showroom: airy, wide tracking, understated price */
[data-vendor="lighting"] .lp-pp-title {
  font-weight: 400;
  letter-spacing: 0.03em;
}

[data-vendor="lighting"] .lp-pp-price {
  font-weight: 400;
  letter-spacing: 0.06em;
}

[data-vendor="lighting"] .lp-pp-specs { letter-spacing: 0.02em; }

/* Favicons: drawn, not fetched — one per fictional store. */
.lp-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--lp-vendor, var(--c-border-strong));
  color: var(--c-text-on-dark);
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.lp-fav--lg {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  font-size: 12px;
}

[data-vendor="lighting"] .lp-fav {
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--lp-vendor);
  color: var(--lp-vendor);
}

/* ── store headers: three different mastheads ── */
.lp-pp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -12px -12px 8px;
  padding: 8px 12px;
  font-family: var(--lp-font, var(--font-sans));
}

.lp-pp-name {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.lp-pp-name i {
  font-size: 6.5px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

.lp-pp-nav {
  margin-left: auto;
  font-size: 8.5px;
  white-space: nowrap;
  opacity: 0.8;
}

/* supply house: blue masthead, account nav, a search rail under it */
[data-vendor="supply"] .lp-pp-head {
  border-bottom: 2px solid var(--lp-vendor);
  color: var(--lp-vendor);
}

[data-vendor="supply"] .lp-pp-search {
  display: block;
  margin: 0 0 8px;
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: 2px;
  background: var(--c-surface-raised);
  color: var(--c-text-dim);
  font-size: 8.5px;
}

/* big box: full-bleed orange banner with the search box inside it */
[data-vendor="bigbox"] .lp-pp-head {
  background: var(--lp-vendor);
  color: var(--c-text-on-dark);
}

[data-vendor="bigbox"] .lp-pp-name {
  font-weight: 900;
  letter-spacing: 0.02em;
}

[data-vendor="bigbox"] .lp-pp-search {
  flex: 1;
  min-width: 0;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--c-surface-card);
  color: var(--c-text-dim);
  font-size: 8.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-vendor="bigbox"] .lp-pp-nav {
  margin-left: 0;
  opacity: 0.9;
}

/* showroom: centred wordmark, wide tracking, hairline rule, no chrome */
[data-vendor="lighting"] .lp-pp-head {
  flex-direction: column;
  gap: 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--lp-vendor);
  color: var(--lp-vendor);
  text-align: center;
}

[data-vendor="lighting"] .lp-pp-name {
  align-items: center;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

[data-vendor="lighting"] .lp-pp-nav {
  margin-left: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lp-tab.is-active {
  box-shadow: inset 0 2px 0 var(--lp-vendor, var(--c-primary));
}

/* ── the SPEC button, now a real control ── */
.lp-spec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  font-family: inherit;
  cursor: default;
}

.lp-demo-on .lp-spec-btn {
  cursor: pointer;
}

.lp-demo-on .lp-spec-btn {
  padding: 9px 18px;
  font-size: 12px;
}

.lp-demo-on .lp-spec-btn {
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* Hover has to be unmistakably a state change, not a shade. The idle pulse
   animates transform and box-shadow, so it has to stand down for the hover. */
.lp-demo-on .lp-spec-btn:hover {
  animation: none;
  background: var(--c-primary-dark);
  box-shadow: 0 4px 14px rgb(0 0 0 / 32%), 0 0 0 3px rgb(var(--lp-glow-rgb) / 30%);
  transform: translateY(-1px) scale(1.04);
}

.lp-demo-on .lp-spec-btn:active {
  transform: translateY(0) scale(0.99);
}

/* The SPEC button keeps its own slow pulse; the rail's flash rides on top. */

.lp-demo-on .lp-spec-btn:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* While a step is running the controls are inert, and look it. */
.lp-demo-on.is-reading .lp-spec-btn,
.lp-demo-on.is-draft .lp-spec-btn,
.lp-demo-on.is-exporting .lp-spec-btn,
.lp-demo-on.is-reading .lp-export-btn,
.lp-demo-on.is-draft .lp-export-btn,
.lp-demo-on.is-exporting .lp-export-btn {
  opacity: 0.7;
  pointer-events: none;
}

/* Stop the idle attract-loop while the walk-through is driving the panel. */
.lp-demo-on.is-reading .lp-spec-btn,
.lp-demo-on.is-draft .lp-spec-btn,
.lp-demo-on.is-added .lp-spec-btn,
.lp-demo-on.is-exporting .lp-spec-btn {
  animation: none;
}

.lp-spec-spinner,
.lp-export-spinner {
  display: none;
  width: 11px;
  height: 11px;
  border: 2px solid rgb(255 255 255 / 45%);
  border-top-color: white;
  border-radius: 50%;
}

.lp-demo-on.is-reading .lp-spec-spinner,
.lp-demo-on.is-exporting .lp-export-spinner {
  display: block;
  animation: lp-spin 0.7s linear infinite;
}

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

/* Without JS the stand-in page just greys out while it is read. With the
 * walk-through running it gets the scan pass below instead. */
.lp-reading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 62%);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
}

/* ── the scan pass ──
 * A band sweeps down the product page and, as it passes, each thing worth
 * reading is boxed for a moment — the page as the extension sees it. It loops
 * until the reader presses Continue. */
/* Every green glow in the walk-through — scan ink, hover rings, attract
 * pulses — reads off one channel, so it stays visible on both grounds. */
:root {
  --lp-glow-rgb: 31 122 58;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --lp-glow-rgb: 104 216 145;
  }
}

.lp-product {
  --lp-scan-rgb: var(--lp-glow-rgb);
}

.lp-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.lp-demo-on.is-reading .lp-scan {
  display: block;
}

.lp-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(
    180deg,
    rgb(var(--lp-scan-rgb) / 0%) 0%,
    rgb(var(--lp-scan-rgb) / 16%) 55%,
    rgb(var(--lp-scan-rgb) / 0%) 100%
  );
  border-bottom: 1px solid rgb(var(--lp-scan-rgb) / 70%);
  /* One pass, quick — the boxes it leaves behind carry the rest. */
  animation: lp-scan-sweep 1.3s cubic-bezier(0.3, 0, 0.5, 1) forwards;
}

@keyframes lp-scan-sweep {
  from { top: -72px; opacity: 1; }
  85%  { opacity: 1; }
  to   { top: 100%; opacity: 0; }
}

/* The boxes light up in the order the band reaches them. */
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-img,
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-title,
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-sku,
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-price,
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-specs li {
  outline: 1px solid transparent;
  outline-offset: 3px;
  /* Each box lights as the band reaches it and stays lit, so the finished pass
     shows exactly what was taken off the page. */
  animation: lp-scan-box 420ms ease-out both;
}

.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-img { animation-delay: 0.42s; }
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-title { animation-delay: 0.42s; }
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-sku { animation-delay: 0.5s; }
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-price { animation-delay: 0.58s; }
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-specs li:nth-child(1) { animation-delay: 0.66s; }
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-specs li:nth-child(2) { animation-delay: 0.72s; }
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-specs li:nth-child(3) { animation-delay: 0.78s; }
.lp-demo-on.is-reading .lp-pp:not([hidden]) .lp-pp-specs li:nth-child(4) { animation-delay: 0.84s; }

@keyframes lp-scan-box {
  from { outline-color: transparent; background: transparent; }
  60%  { outline-color: rgb(var(--lp-scan-rgb) / 100%); background: rgb(var(--lp-scan-rgb) / 16%); }
  to   { outline-color: rgb(var(--lp-scan-rgb) / 75%); background: rgb(var(--lp-scan-rgb) / 9%); }
}

.lp-demo-on.is-reading .lp-pp {
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

/* ── stage 2: editable schedule ── */
.lp-mark {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-text-dim);
}

/* The schedule is a surface people actually type into during the walk-through,
   so it runs bigger than the illustration tables elsewhere on the page. */
.lp-table--edit {
  font-size: 13px;
}

.lp-table--edit th {
  padding: 8px 10px;
  font-size: 10px;
}

.lp-table--edit td {
  padding: 11px 10px;
}

.lp-table--edit .lp-chip {
  padding: 2px 9px;
  font-size: 12px;
}

.lp-table--edit td[contenteditable],
.lp-table--edit .lp-chip[contenteditable] {
  cursor: text;
  border-radius: 3px;
}

.lp-table--edit td[contenteditable]:hover,
.lp-table--edit .lp-chip[contenteditable]:hover {
  box-shadow: inset 0 -1px 0 var(--c-border-strong);
}

.lp-table--edit td[contenteditable]:focus,
.lp-table--edit .lp-chip[contenteditable]:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.lp-win-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-raised);
}

.lp-win-hint {
  font-size: 10px;
  color: var(--c-text-dim);
}

.lp-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  background: var(--c-primary);
  color: var(--c-text-on-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lp-export-btn:hover {
  background: var(--c-primary-mid);
}

.lp-export-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* The new row: absent until SPEC produces it, highlighted while it is a draft. */
.lp-demo-on .lp-row-new {
  animation: lp-land-once 0.45s ease-out;
  opacity: 1;
}

.lp-row-new.is-draft .lp-mark::after {
  content: "DRAFT";
  display: block;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-primary);
}

.lp-row-new.is-draft td {
  background: var(--c-primary-light);
  box-shadow: inset 2px 0 0 var(--c-primary);
}

.lp-row-new td {
  transition: background 0.8s ease;
}

@keyframes lp-land-once {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Arrows light up as the hand-off passes through them. */
.lp-demo-on.is-draft .lp-arrow--1 svg,
.lp-demo-on.is-added .lp-arrow--1 svg,
.lp-demo-on.is-exporting .lp-arrow--2 svg {
  animation: lp-arrow-run 0.7s ease-out;
}

@keyframes lp-arrow-run {
  0%   { opacity: 0.35; transform: translateX(-5px); }
  100% { opacity: 1; transform: none; }
}

/* ── the DXF lightbox: dark ground, light linework, like model space ── */
.lp-dxf-modal {
  width: min(1080px, 94vw);
  max-height: 90vh;
  overscroll-behavior: contain;
  padding: 0;
  border: 1px solid #3a4249;
  border-radius: 8px;
  background: #14181b;
  color: #e8edf0;
  overflow: auto;
}

.lp-dxf-modal::backdrop {
  background: rgb(6 8 10 / 78%);
}

.lp-dxf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #2c3338;
}

.lp-dxf-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #9fb0ba;
}

.lp-dxf-close {
  padding: 4px 9px;
  border: 1px solid #3a4249;
  border-radius: 4px;
  background: transparent;
  color: #e8edf0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.lp-dxf-close:hover {
  background: #222a2f;
}

.lp-dxf-foot {
  margin: 0;
  padding: 10px 14px 14px;
  font-size: 12px;
  color: #9fb0ba;
}

.lp-sheet {
  padding: 14px 16px 16px;
  color: #e8edf0;
}

/* border with a binding margin: outer heavy line, inner trim line */
.lp-sheet-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 152px;
  min-height: 240px;
  padding: 10px 10px 10px 26px;
  border: 2px solid #e8edf0;
}

.lp-sheet-frame::before {
  content: "";
  position: absolute;
  inset: 6px 6px 6px 22px;
  border: 1px solid #e8edf0;
  pointer-events: none;
}

.lp-sheet-body {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 14px;
  padding: 8px 12px 8px 8px;
}

/* the key plan is a supporting drawing now, not the main event */
.lp-sheet-plan {
  display: block;
  width: 100%;
  height: auto;
  color: #e8edf0;
}

.lp-sheet-text text {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.lp-sheet-text .lp-sheet-sub {
  font-size: 6.5px;
  opacity: 0.75;
}

.lp-sheet-viewname,
.lp-sheet-caption {
  white-space: nowrap;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid #e8edf0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.lp-sheet-viewname {
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.lp-sheet-viewname span {
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

.lp-sheet-table {
  width: 100%;
  background: transparent;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 10px;
  table-layout: fixed;
}

.lp-sheet-table th,
.lp-sheet-table td {
  padding: 5px 7px;
  border: 1px solid #e8edf0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-sheet-table th {
  background: transparent;
  color: #9fb0ba;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lp-sheet-table td {
  color: #e8edf0;
}

.lp-sheet-table tbody tr {
  animation: lp-sheet-row 0.3s ease-out both;
}

@keyframes lp-sheet-row {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* right edge: project strip above, titleblock below */
.lp-sheet-side {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e8edf0;
  font-family: var(--font-mono);
}

.lp-sheet-strip {
  flex: 1;
  white-space: nowrap;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 8px 0;
  font-size: 9px;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.lp-sheet-block {
  border-top: 1px solid #e8edf0;
  padding: 8px 10px 10px;
}

.lp-sheet-firm {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lp-sheet-block .lp-sheet-sub {
  margin: 2px 0 0;
  font-size: 7px;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.lp-sheet-block-row {
  display: flex;
  gap: 14px;
  white-space: nowrap;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid #e8edf0;
  font-size: 9px;
}

.lp-sheet-block-row span,
.lp-sheet-no {
  display: flex;
  flex-direction: column;
}

.lp-sheet-block-row i,
.lp-sheet-no i {
  font-size: 6.5px;
  font-style: normal;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.lp-sheet-no {
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid #e8edf0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .lp-rail,
  .lp-rail.is-attract,
  .lp-rail-next,
  .lp-scan-line,
  .lp-demo-on.is-reading .lp-pp .lp-pp-img,
  .lp-demo-on.is-reading .lp-pp .lp-pp-title,
  .lp-demo-on.is-reading .lp-pp .lp-pp-sku,
  .lp-demo-on.is-reading .lp-pp .lp-pp-price,
  .lp-demo-on.is-reading .lp-pp .lp-pp-specs li,
  .lp-rail.is-fresh .lp-rail-text,
  .lp-tab.is-target,
  .lp-spec-btn.is-target,
  .lp-export-btn.is-target,
  .lp-table--edit tr.is-target td,
  .lp-panel--sched.is-entering,
  .lp-arrow.is-entering,
  .lp-spec-btn,
  .lp-row-new,
  .lp-spec-spinner,
  .lp-export-spinner,
  .lp-demo-on .lp-arrow svg,
  .lp-demo-on .lp-tab,
  .lp-export-btn,
  .lp-sheet-table tbody tr {
    animation: none !important;
  }
}

.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.project-card {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s;
}

.project-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.project-thumb-wrap {
  aspect-ratio: 4 / 3;
  background: var(--c-surface-raised);
  overflow: hidden;
}

.project-thumb-wrap>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-thumb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}

.project-thumb-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-thumb-cell {
  background: var(--c-surface-raised);
}

.project-thumb-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 700;
  color: var(--c-text-dim);
  text-transform: uppercase;
}

.project-card-body {
  padding: 14px 16px;
}

.project-card h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--c-primary-mid);
}

.project-card-meta {
  font-size: 12px;
  color: var(--c-text-dim);
  margin: 4px 0 0;
}

.project-card-description {
  font-size: 13px;
  color: var(--c-text-muted);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card hover actions menu (⋮) — project cards on /projects and schedule
 * tiles on the project page share it. */
.project-card-wrap,
.schedule-tile-wrap {
  position: relative;
}

.card-menu-host {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

/* The ⋮ trigger is a <summary>; strip the native disclosure marker. */
.card-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--c-surface-card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  color: var(--c-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.card-menu-btn::-webkit-details-marker {
  display: none;
}

/* Reveal on hover, keyboard focus, or while the menu is open. */
.project-card-wrap:hover .card-menu-btn,
.schedule-tile-wrap:hover .card-menu-btn,
.card-menu-host:focus-within .card-menu-btn,
.card-menu-host[open] .card-menu-btn {
  opacity: 1;
}

.card-menu-btn:hover {
  background: var(--c-surface-card);
}

/* Shown natively when the <details> menu is open. */
.card-menu {
  position: absolute;
  top: 34px;
  right: 0;
  min-width: 196px;
  white-space: nowrap;
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.card-menu form {
  margin: 0;
}

.card-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
  text-decoration: none;
}

.card-menu-icon {
  flex: none;
  opacity: 0.75;
}

.card-menu-item:hover {
  background: var(--c-surface-raised);
}

.card-menu-item--danger {
  color: var(--c-danger-fg);
}

.card-menu-item--danger:hover {
  background: var(--c-danger-fg-bg);
}

/* Archived projects (collapsed section) */
.archived-section {
  margin-top: 2rem;
}

.archived-summary {
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: revert;
  width: fit-content;
}

.archived-count {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-text-dim);
}

.archived-intro {
  color: var(--c-text-dim);
  font-size: 14px;
  max-width: 60ch;
  margin: 8px 0 4px;
}

/* Name + "Archived" badge sit on one line; badge hugs its text. */
.project-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* "Archived" marker shown after the project name on its detail page. */
.archived-badge {
  align-self: center;
  padding: 2px 8px;
  border: 1px solid var(--c-warning-border);
  border-radius: 999px;
  background: var(--c-warning-bg);
  color: var(--c-warning-text);
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.project-card--archived {
  opacity: 0.7;
}

.project-card--archived:hover {
  opacity: 1;
}

/* Duplicate-name modal */
.duplicate-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.duplicate-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font-size: 14px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}

.duplicate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Schedule table scrolling */
.schedule-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--c-border);
}

/* overflow-x:auto forces overflow-y to auto too, which clips the row-actions
   dropdown (especially on the bottom rows). While a menu is open, drop the
   clipping so the menu can escape the scroll box. */
.schedule-table-wrap:has(details.row-menu-host[open]) {
  overflow: visible;
}

/* Narrow columns: shrink-wrap to content */
.schedule-table th:first-child,
.schedule-table td:first-child,
.schedule-table .item-thumb-cell,
.schedule-table .col-code,
.schedule-table .col-room,
.schedule-table .col-model_number,
.schedule-table .col-manufacturer,
.schedule-table .col-finish {
  width: 1%;
  white-space: nowrap;
}

.schedule-table .col-room {
  min-width: 80px;
}

.schedule-table .col-model_number {
  min-width: 120px;
}

.schedule-table .col-manufacturer {
  min-width: 120px;
}

.cell-empty {
  color: var(--c-text-label);
}


.cell-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Notes can carry critical contractor guidance ("verify rough-in",
 * "trade pricing only", etc.). Give the column extra width and let the
 * text wrap to its full length instead of clamping. */
th.col-notes,
td.col-notes {
  max-width: 360px;
  min-width: 220px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

td.col-notes .cell-clamp,
td.col-notes .cell-placeholder,
td.col-notes .cell-empty {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8em;
}

.item-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--c-border);
  display: block;
}

.upload-target {
  cursor: pointer;
  position: relative;
}

.upload-overlay {
  align-items: center;
  background: rgba(0, 0, 0, 0.48);
  border-radius: inherit;
  bottom: 0;
  color: var(--c-text-on-dark);
  display: flex;
  font-size: 11px;
  font-weight: 600;
  justify-content: center;
  left: 0;
  letter-spacing: 0.05em;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.15s;
}

.upload-target:hover .upload-overlay {
  opacity: 1;
}

.code-link {
  color: inherit;
  text-decoration: none;
}

.code-link:hover {
  text-decoration: underline;
}

.item-thumb-placeholder {
  align-items: center;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  display: flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.item-thumb-cell {
  position: relative;
}

.row-actions {
  padding: 0 4px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

/* Leftmost reorder column: shrink-wrapped, holds only the drag handle. */
.col-drag,
.drag-cell {
  width: 1%;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* Drag handle: the reorder affordance. Faint until row hover so it doesn't
   compete with cell content, but the column reserves its space either way.
   Generous padding makes the grab target comfortably larger than the glyph. */
.drag-handle {
  color: var(--c-text-dim);
  cursor: grab;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  opacity: 0.35;
  padding: 10px 8px;
  user-select: none;
  transition: opacity 0.1s;
}

.drag-handle:active {
  cursor: grabbing;
}

.item-row:hover .drag-handle {
  opacity: 1;
}

/* While dragging, Sortable clones the row; dim the placeholder. */
.row-drag-ghost {
  opacity: 0.4;
}

/* Row-action buttons keep their space reserved (visibility, not display)
 * so hovering a row doesn't shift the layout of neighboring cells —
 * particularly the wide Notes column, which used to re-wrap its text
 * when the row-actions cell grew on hover. */
.delete-row-btn {
  align-items: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--c-text-label);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  margin-left: 28px;
  padding: 0;
  vertical-align: middle;
  visibility: hidden;
  width: 28px;
}

.delete-row-btn:hover {
  background: var(--c-danger-subtle);
  color: var(--c-danger);
}

.item-row:hover .delete-row-btn {
  visibility: visible;
}

.detail-row-btn {
  align-items: center;
  background: none;
  border: none;
  border-radius: 4px;
  /* Always visible, but muted so it doesn't compete with cell content.
   * Non-technical users benefit from the persistent affordance. */
  color: var(--c-text-dim);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  padding: 0 2px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: color 0.1s, text-decoration-color 0.1s;
  vertical-align: middle;
  visibility: visible;
}

.detail-row-btn:hover {
  color: var(--c-text-link);
  text-decoration-color: currentColor;
}

/* Per-row ⋮ actions menu — native <details>/<summary>, mirrors the project
   card menu (.card-menu-*) but tuned for a table cell. */
.row-menu-host {
  position: relative;
  display: inline-block;
}

.row-menu-btn {
  align-items: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--c-text-dim);
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 28px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  vertical-align: middle;
  width: 28px;
}

.row-menu-btn::-webkit-details-marker {
  display: none;
}

.row-menu-btn:hover,
.row-menu-host[open] .row-menu-btn {
  background: var(--c-surface-hover);
  color: var(--c-text);
}

.row-menu {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: 5;
  min-width: 168px;
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.row-menu-item {
  align-items: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 9px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.row-menu-item:hover {
  background: var(--c-surface-raised);
}

.row-menu-item--danger {
  color: var(--c-danger-fg);
}

.row-menu-item--danger:hover {
  background: var(--c-danger-fg-bg);
}

/* Item detail modal */
.item-detail-modal {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  padding: 0;
  width: min(860px, 94vw);
  max-height: 82vh;
}

.item-detail-modal::backdrop {
  background: var(--c-overlay);
}

.item-detail-modal-inner {
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  overflow: hidden;
}

.item-detail-slot {
  display: contents;
}

.item-detail-modal-header {
  align-items: center;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  padding: 18px 32px;
  flex-shrink: 0;
}

/* Product-page button: prominent CTA in the item-detail sidebar. */
.product-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--c-primary-mid);
  background: var(--c-primary-light);
  color: var(--c-primary-text);
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.12s, box-shadow 0.12s;
}

.product-link-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-link-btn .product-link-icon {
  flex: none;
  opacity: 0.9;
}

.item-detail-close {
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--c-muted);
  cursor: pointer;
  font-size: 16px;
  height: 28px;
  line-height: 1;
  padding: 0 6px;
}

.item-detail-close:hover { background: var(--c-surface-hover); color: var(--c-text); }

/* Scroll container AND a two-column flex row: aligned field grid on the left,
   meta sidebar (image, product button, hint) stacked on the right. */
.item-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 24px 24px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.item-detail-main {
  flex: 1;
  min-width: 0;
}

.item-detail-side {
  flex: none;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Image cropped to a fixed size so the sidebar stays tidy regardless of source. */
.item-detail-img {
  width: 220px;
  height: 165px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.item-detail-side .product-link-btn {
  justify-content: center;
}

.modal-hint--side {
  margin: 0;
  max-width: none;
  font-size: 12px;
}

/* Aligned label | value columns. */
.item-detail-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  align-items: baseline;
  font-size: 14px;
  margin: 0;
}

.item-detail-dl dt {
  color: var(--c-muted);
  font-weight: 600;
  white-space: nowrap;
}

.item-detail-dl dd {
  margin: 0;
  word-break: break-word;
}

.product-link-icon {
  flex: none;
  opacity: 0.85;
}

.item-detail-footer {
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
  padding: 14px 32px;
  flex-shrink: 0;
}

/* Inline editing */
.editable-cell {
  cursor: pointer;
  max-width: 260px;
  transition: background 0.1s;
}

.editable-cell:hover {
  background: var(--c-surface-hover);
}

.editing-cell {
  padding: 0 !important;
}

/* min-width is set as an inline style by the htmx:afterSwap handler
 * in page.html, so no CSS rule is needed here. */

.cell-input {
  background: var(--c-surface-card);
  border: 2px solid var(--c-primary);
  border-radius: 0;
  box-sizing: border-box;
  font: inherit;
  outline: none;
  padding: 8px 10px;
  width: 100%;
}

.cell-textarea {
  min-height: 80px;
  resize: vertical;
  white-space: pre-wrap;
}

.cell-select {
  appearance: auto;
  cursor: pointer;
}

/* The dropdown shows "No room" / "New room…" italicized so they read
 * as meta-actions rather than as named rooms. Italic option styling is
 * honored by Chromium, Firefox, and Safari — older browsers fall back
 * to the regular weight, which is harmless. */
.cell-select-meta {
  font-style: italic;
  color: var(--c-text-muted);
}

.cell-select-divider {
  color: var(--c-border-mid);
}

.editable-h1 {
  cursor: pointer;
}

.editable-h1:hover {
  opacity: 0.75;
}

.editing-h1 {
  margin: 0 0 6px;
}

.h1-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--c-primary);
  font: inherit;
  outline: none;
  padding: 0 0 2px;
  width: 100%;
}

.editable-meta {
  border-radius: 4px;
  cursor: pointer;
  margin-left: -6px;
  padding: 2px 6px;
}

.editable-meta:hover {
  background: var(--c-surface-hover);
}

.editing-meta {
  margin-left: -6px;
  padding: 2px 6px;
}

.meta-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-border-strong);
  color: var(--c-text-muted);
  font: inherit;
  font-size: 13px;
  margin-top: 3px;
  outline: none;
  padding: 1px 0;
  width: 100%;
}

.meta-textarea {
  min-height: 72px;
  resize: vertical;
  white-space: pre-wrap;
}

.meta-value {
  white-space: pre-wrap;
}

/* Project page: sidebar nav + schedule content */
.project-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.schedule-nav {
  flex-shrink: 0;
  width: 160px;
  position: sticky;
  top: 16px;
}

.schedule-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  border-right: 2px solid var(--c-border);
}

.schedule-nav li a {
  display: block;
  padding: 6px 12px 6px 0;
  font-size: 14px;
  text-decoration: none;
  color: var(--c-primary-mid);
}

.schedule-nav li a:hover {
  text-decoration: underline;
}

.schedule-content {
  flex: 1;
  min-width: 0;
}

/* Collapsible schedule sections */
details.schedule-section {
  margin-bottom: 20px;
  border: 1px solid var(--c-border);
  border-radius: 3px;
  background: var(--c-surface-card);
}

details.schedule-section>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--c-surface-raised);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

details.schedule-section>summary::-webkit-details-marker {
  display: none;
}

.editing-schedule-name {
  margin: 0;
}

.schedule-name-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--c-primary);
  font: inherit;
  outline: none;
  padding: 12px 14px;
  width: 18em;
}

.schedule-name {
  cursor: pointer;
  font-size: 18px;
  margin: 8px 0 4px;
  padding: 12px 0px 0px 14px;
}

.schedule-name:hover {
  color: var(--c-primary);
}

.summary-toggle {
  font-size: 11px;
  color: var(--c-text-dim);
}

details.schedule-section[open]>summary .summary-toggle::before {
  content: "▲";
}

details.schedule-section:not([open])>summary .summary-toggle::before {
  content: "▼";
}

.schedule-summary-label {
  color: var(--c-text-muted);
  flex: 1;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
  white-space: nowrap;
}

details.schedule-section[open]>summary .schedule-summary-label {
  opacity: 0;
}

.schedule-summary-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
  margin-right: 8px;
  opacity: 0;
  transition: opacity 0.1s;
}

details.schedule-section>summary:hover .schedule-summary-actions {
  opacity: 1;
}

.col-actions-header {
  width: 1%;
  white-space: nowrap;
}

.export-dxf-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--c-text-muted);
  font-size: 12px;
  opacity: 0;
  padding: 2px 6px;
  text-decoration: none;
  transition: opacity 0.1s;
  white-space: nowrap;
}

thead:hover .export-dxf-btn {
  opacity: 1;
}

.export-dxf-btn:hover {
  background: var(--c-surface-sunken);
  border-color: var(--c-border);
  color: var(--c-text);
  opacity: 1;
}

.edit-columns-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  padding: 2px 6px;
  transition: opacity 0.1s;
  white-space: nowrap;
}

thead:hover .edit-columns-btn {
  opacity: 1;
}

.edit-columns-btn:hover {
  background: var(--c-surface-sunken);
  border-color: var(--c-border);
  color: var(--c-text);
  opacity: 1;
}

/* Columns modal */
.columns-modal {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  padding: 0;
  width: min(420px, 90vw);
}

/* For modals carrying a paragraph of explanation rather than a list of
   controls. */
.columns-modal--wide {
  width: min(540px, 92vw);
}

.columns-modal::backdrop {
  background: var(--c-overlay);
}

.columns-modal-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.columns-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.col-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.col-modal-row {
  align-items: center;
  display: flex;
  gap: 8px;
}

.col-modal-move-btns {
  display: flex;
  flex-direction: row;
  gap: 2px;
  flex-shrink: 0;
}

.col-modal-move {
  background: none;
  border: none;
  border-radius: 3px;
  color: var(--c-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 3px 5px;
}

.col-modal-move:hover:not(:disabled) {
  background: var(--c-hover);
  color: var(--c-text);
}

.col-modal-move:disabled {
  opacity: 0.2;
  cursor: default;
}

.col-modal-label {
  border: 1px solid var(--c-border);
  border-radius: 4px;
  flex: 1;
  font-size: 14px;
  padding: 5px 8px;
}

.col-modal-label:focus {
  border-color: var(--c-primary-mid);
  outline: none;
}

.col-modal-delete {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--c-danger);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  opacity: 0;
  padding: 4px 8px;
  transition: opacity 0.1s;
}

.col-modal-row:hover .col-modal-delete,
.col-modal-delete:focus-visible {
  opacity: 1;
}

.col-modal-delete:hover {
  background: var(--c-danger-bg);
  border-color: var(--c-danger);
}

.col-modal-add-form {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.col-modal-new-input {
  border: 1px solid var(--c-border);
  border-radius: 4px;
  flex: 1;
  font-size: 14px;
  padding: 5px 8px;
}

.col-modal-new-input:focus {
  border-color: var(--c-primary-mid);
  outline: none;
}

.col-modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.add-item-row {
  margin: 6px 0 8px;
  justify-content: center;
  display: flex;
  padding: 8px;
}

/* Hide the empty-state row once real item rows exist */
.schedule-table tbody:has(.item-row) .item-row-empty {
  display: none;
}

.cell-placeholder {
  color: var(--c-text-muted);
  font-size: 12px;
  font-style: italic;
}

/* Sits opposite the "Schedules" heading in .project-actions-row. */
.add-schedule-row {
  display: flex;
  gap: 8px;
}

.button-secondary {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-muted);
}

.button-secondary:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

.button-secondary:active {
  background: var(--c-surface-raised);
  border-color: var(--c-border-strong);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 16%);
  color: var(--c-text);
  transform: translateY(1px);
}

footer {
  border-top: 1px solid var(--c-border);
  margin-top: 48px;
  padding: 24px 0;
}

.footer-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--c-text-muted);
  font-size: 13px;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--c-text);
  text-decoration: underline;
}

.footer-copy {
  color: var(--c-text-label);
  font-size: 12px;
  margin: 0;
}

/* The trademark line: present and readable, but plainly secondary to
   everything else in the footer. */
.footer-trademarks {
  color: var(--c-text-label);
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 0;
  opacity: 0.75;
}

.schedule-notes {
  border-bottom: 1px solid var(--c-surface-raised);
  color: var(--c-text-muted);
  font-size: 13px;
  margin: 0;
  padding: 8px 14px;
  white-space: pre-wrap;
}

.editable-notes {
  cursor: pointer;
}

.editable-notes:hover {
  background: var(--c-surface);
}

.notes-placeholder {
  color: var(--c-text-label);
  font-style: italic;
}

.schedule-notes-text {
  white-space: pre-wrap;
}

.editing-notes {
  border-bottom: 1px solid var(--c-surface-raised);
  padding: 0;
}

.schedule-notes-input {
  background: transparent;
  border: 1px solid var(--c-accent);
  border-radius: 4px;
  box-sizing: border-box;
  color: inherit;
  display: block;
  field-sizing: content;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  padding: 8px 14px;
  resize: vertical;
  white-space: pre-wrap;
  width: 100%;
}

details.schedule-section table {
  border-top: 1px solid var(--c-border);
}

.schedule-empty {
  padding: 12px 14px;
  display: block;
}

.login-page {
  max-width: 400px;
  margin: 80px auto;
  text-align: center;
}

.not-found-page {
  max-width: 400px;
  margin: 80px auto;
  text-align: center;
}

.not-found-eyebrow {
  color: var(--c-text-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.not-found-message {
  color: var(--c-text-muted);
  margin: 0 0 24px;
}

.static-page {
  margin: 64px auto;
  max-width: 720px;
  padding: 0 24px;
}

.static-page h1 {
  margin-bottom: 16px;
}

.static-page h2 {
  font-size: 18px;
  margin: 28px 0 8px;
}

.static-page p,
.static-page li {
  color: var(--c-text-muted);
  line-height: 1.6;
}

.static-page ul {
  padding-left: 20px;
}

/* Page header (projects list) */
.page-header {
  align-items: baseline;
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  justify-content: space-between;
}

.page-header h1 {
  margin: 0;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: var(--c-text-muted);
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 20px;
}

.breadcrumb a {
  color: var(--c-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  margin: 0 7px;
  opacity: 0.5;
}

/* Home crumb: house icon + "My Projects". line-height:1 removes the line-box
   padding so align-items:center centers the icon on the text, not on the
   taller inherited line box (which left the icon sitting high). */
.breadcrumb-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.breadcrumb-home-icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

/* Project header */
.project-header {
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 28px;
  padding-bottom: 20px;
}

.project-header-main {
  align-items: flex-start;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.project-header-left {
  align-items: flex-start;
  display: flex;
  flex: 1 1 360px;
  gap: 16px;
  min-width: 0;
}

.project-header-text {
  flex: 1;
  min-width: 0;
}

.project-header-text h1 {
  margin: 0 0 6px;
}

.project-header-right {
  align-items: flex-start;
  display: flex;
  flex: 0 1 340px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.share-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-left: 3px solid var(--c-primary-mid);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}

.share-box-label {
  color: var(--c-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.share-box-explainer {
  color: var(--c-text-muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 10px;
}

.share-box-url-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.share-box-url-input {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-mid);
  border-radius: 4px;
  color: var(--c-text);
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  min-width: 0;
  padding: 6px 8px;
  text-overflow: ellipsis;
}

.share-box-copy-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
}

.share-box-copy-btn:active {
  background: var(--c-primary-dark);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 24%);
  color: var(--c-text-on-dark);
  transform: translateY(1px);
}

.project-actions-menu {
  align-self: flex-end;
}

.project-actions-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: -12px 0 12px;
}

/* ── Project actions modal ────────────────────────────────────────
   A single "Share & Export" button in the project header opens this
   modal. It restores the verbose, visually-communicative distribution
   cards (DXF / PDF / read-only link), groups schedule + collaborator
   management, and walls deletion off in a danger zone — keeping the
   page itself clean while giving non-technical users room to read. */
.project-share-btn {
  /* .project-header-right is a flex-start column, which left it floating in
     the middle of the page; the button belongs on the content edge. */
  align-self: flex-end;
  align-items: center;
  display: inline-flex;
  font-size: 15px;
  gap: 7px;
  padding: 10px 16px;
}

.actions-modal {
  position: relative;
  width: min(640px, 92vw);
}

.actions-modal .columns-modal-inner {
  max-height: 88vh;
  overflow-y: auto;
}

.actions-modal-sub {
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.45;
  margin: -4px 0 4px;
}

.actions-modal-close {
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.actions-modal-close:hover {
  color: var(--c-text);
}

.distribute-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Distribution cards — verbose and visually communicative. */
.distribute-card {
  align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--c-text);
  display: flex;
  gap: 12px;
  padding: 14px;
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.05s;
  width: 100%;
}

.distribute-card--primary {
  border-color: var(--c-primary-mid);
  border-left: 4px solid var(--c-primary-mid);
}

.distribute-card--primary:hover {
  background: var(--c-surface-hover);
  box-shadow: 0 2px 10px rgb(20 95 67 / 14%);
}

.distribute-card--primary:active {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 12%);
  transform: translateY(1px);
}

.distribute-card--secondary:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-border-strong);
  box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
}

.distribute-card-icon {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1.1;
}

.distribute-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.distribute-card-title {
  align-items: center;
  color: var(--c-text);
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
}

.distribute-card-tag {
  background: var(--c-surface-raised);
  border-radius: 999px;
  color: var(--c-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.distribute-card-desc {
  color: var(--c-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.distribute-card-cta {
  color: var(--c-primary-mid);
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.distribute-card .share-box-url-row {
  margin-top: 8px;
}

/* Management + danger sections below the cards. */
.actions-modal-section {
  border-top: 1px solid var(--c-border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
}

.actions-modal-section-label {
  color: var(--c-text-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.actions-modal-manage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions-modal-danger {
  align-items: center;
  border-top: 1px solid var(--c-danger-border-soft);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 14px;
}

.actions-modal-danger-text {
  color: var(--c-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.actions-modal-danger form {
  flex-shrink: 0;
  margin: 0;
}

.button-danger,
.button-danger:hover,
.button-danger:active {
  background: var(--c-danger-active);
  border-color: var(--c-danger-border);
  color: var(--c-danger-text);
}

.button-danger:hover {
  background: var(--c-danger-hover);
}


/* ── User account menu (header) ───────────────────────────────── */
.user-menu {
  position: relative;
}

.user-menu > summary { list-style: none; }
.user-menu > summary::-webkit-details-marker { display: none; }

.user-menu-trigger {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  color: var(--c-text-on-dark);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 14px;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  transition: background 0.15s;
}

.user-menu-trigger:hover {
  background: rgba(255,255,255,0.12);
}

.user-avatar {
  align-items: center;
  background: var(--c-primary-mid);
  border-radius: 50%;
  color: var(--c-text-on-dark);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 28px;
  flex-shrink: 0;
}

.user-avatar--lg {
  font-size: 18px;
  height: 44px;
  width: 44px;
}

.user-display-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-chevron {
  font-size: 11px;
  opacity: 0.7;
}

.user-menu-dropdown {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-mid);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  min-width: 260px;
  padding: 8px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1000;
}

.user-menu-identity {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
}

.user-menu-name {
  color: var(--c-text);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
}

.user-menu-email {
  color: var(--c-text-muted);
  font-size: 12px;
  margin: 0;
  word-break: break-all;
}

.user-menu-divider {
  border-top: 1px solid var(--c-border-light);
  margin: 4px 0;
}

.user-menu-item {
  align-items: center;
  background: none;
  border: none;
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 14px;
  gap: 8px;
  padding: 9px 16px;
  text-decoration: none;
  width: 100%;
}

.user-menu-item:hover {
  background: var(--c-surface-hover);
  color: var(--c-text);
}

.user-menu-item--signout {
  color: var(--c-text-muted);
}

/* ── Settings page ────────────────────────────────────────────── */
.settings-page {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-section {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-light);
  border-radius: 8px;
  padding: 20px 24px;
}

.settings-section--danger {
  border-color: var(--c-danger-border-soft);
}

.settings-section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}

.settings-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  font-size: 14px;
  margin: 0;
}

.settings-dl dt {
  color: var(--c-text-muted);
  font-weight: 600;
}

.settings-dl dd {
  margin: 0;
  color: var(--c-text);
}

.actions-menu {
  position: relative;
}

.actions-menu>summary {
  list-style: none;
}

.actions-menu>summary::-webkit-details-marker {
  display: none;
}

.actions-menu-btn {
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  gap: 4px;
  padding: 6px 12px;
  user-select: none;
  white-space: nowrap;
}

.actions-menu-btn:hover {
  background: var(--c-surface-hover);
}

.actions-menu-list {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  padding: 4px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 100;
}

.actions-menu-item {
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--c-text);
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.actions-menu-item:hover {
  background: var(--c-surface-hover);
}

.actions-menu-item--danger {
  color: var(--c-danger);
}

.actions-menu-item--danger:hover {
  background: var(--c-danger-subtle);
}

.actions-menu-divider {
  border-top: 1px solid var(--c-border);
  margin: 4px 0;
}

.meta-field {
  display: grid;
  gap: 3px;
  margin-top: 10px;
}

.meta-label {
  color: var(--c-text-label);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.meta-value {
  color: var(--c-text-muted);
  font-size: 13px;
}

.meta-placeholder {
  color: var(--c-text-label);
  font-size: 13px;
  font-style: italic;
}

.project-hero-wrap {
  border-radius: 6px;
  flex-shrink: 0;
  height: 90px;
  width: 120px;
}

.project-hero-img {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  display: block;
  height: 90px;
  object-fit: cover;
  width: 120px;
}

.project-hero-initial {
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: inherit;
  color: var(--c-text-muted);
  display: flex;
  font-size: 32px;
  font-weight: 700;
  height: 90px;
  justify-content: center;
  width: 120px;
}

.copy-toast {
  background: #1a1a1a;
  border-radius: 6px;
  bottom: 24px;
  color: #fff;
  font-size: 13px;
  opacity: 0;
  padding: 8px 16px;
  pointer-events: none;
  position: fixed;
  right: 24px;
  transition: opacity 0.18s;
  z-index: 9999;
}

.copy-toast--visible {
  opacity: 1;
}

/* New-user idle hint toast — larger, friendlier, with a close button */
.hint-toast {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-mid);
  border-left: 4px solid var(--c-primary-mid);
  border-radius: 8px;
  bottom: 28px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 14%);
  max-width: 320px;
  padding: 14px 16px 14px 14px;
  position: fixed;
  right: 28px;
  z-index: 9998;
}

.hint-toast[hidden] {
  display: none;
}

.hint-toast-close {
  background: none;
  border: none;
  color: var(--c-text-dim);
  cursor: pointer;
  float: right;
  font-size: 14px;
  line-height: 1;
  margin: -2px -4px 0 8px;
  padding: 2px 4px;
}

.hint-toast-close:hover {
  color: var(--c-text);
}

.hint-toast-body {
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Button size variant */
.button-sm {
  font-size: 13px;
  padding: 5px 10px;
}

/* Empty-state schedule prompt */
.schedule-empty-state {
  padding: 24px 0;
}


/* Form pages (new/edit views) */
.form-page {
  max-width: 560px;
}

.form-page h1 {
  margin: 0 0 16px;
}

.form-card {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 24px;
}

.form-fields {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.form-fields label {
  margin: 0;
}

/* Danger zone */
.danger-zone {
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-border);
  border-radius: 8px;
  padding: 16px;
}

.danger-zone h3 {
  color: var(--c-danger-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.danger-zone p {
  color: var(--c-danger-text);
  font-size: 13px;
  margin: 0;
}

@media print {
  body {
    background: white;
    color: black;
    font-size: 10pt;
  }

  header,
  form,
  .actions,
  .button,
  button {
    display: none;
  }

  main {
    max-width: none;
    padding: 0;
  }

  a {
    color: black;
    text-decoration: none;
  }

  table {
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
  }

  th,
  td {
    border: 1px solid #222;
    padding: 6px;
  }

  th {
    background: white;
    font-size: 9pt;
  }
}

/* Public share view */
.share-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px;
}

.share-header {
  margin-bottom: 28px;
}

.share-hero-img {
  border-radius: 8px;
  display: block;
  height: 180px;
  margin-bottom: 16px;
  object-fit: cover;
  width: 100%;
}

.share-project-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}

.share-project-address {
  color: var(--c-text-muted);
  font-size: 14px;
  margin: 0 0 4px;
}

.share-project-description {
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.share-search {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 16px;
  outline: none;
  padding: 12px 16px;
  width: 100%;
}

.share-search:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 15%, transparent);
}

.share-schedule {
  margin-bottom: 36px;
}

.share-schedule-name {
  border-bottom: 2px solid var(--c-border);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  padding-bottom: 8px;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.share-room-name {
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 20px 0 8px;
  text-transform: uppercase;
}

.share-note {
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.6;
}

.share-schedule-notes {
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.spec-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.spec-card {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.spec-card-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.spec-code {
  background: var(--c-primary);
  border-radius: 4px;
  color: var(--c-text-on-dark);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
}

.spec-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.spec-thumb {
  border-radius: 6px;
  height: 80px;
  object-fit: cover;
  width: 100%;
}

.spec-fields {
  display: grid;
  gap: 6px;
  margin: 0;
}

.spec-field {
  display: grid;
  gap: 2px;
  grid-template-columns: 110px 1fr;
}

.spec-field dt {
  color: var(--c-text-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding-top: 1px;
  text-transform: uppercase;
}

.spec-field dd {
  color: var(--c-text);
  font-size: 14px;
  margin: 0;
}

.spec-source-link {
  color: var(--c-primary);
  font-size: 13px;
  margin-top: auto;
  text-decoration: none;
}

.spec-source-link:hover {
  text-decoration: underline;
}
/* ── Admin dashboard ─────────────────────────────────────────────── */
.admin-section {
  margin: 28px 0;
}

/* Left-hand nav + content column, shared by every /admin page. */
.admin-layout {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: 180px minmax(0, 1fr);
}
.admin-main {
  min-width: 0;
}
.admin-nav {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  position: sticky;
  top: 16px;
}
.admin-nav-title {
  color: var(--c-text-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 6px 8px;
  text-transform: uppercase;
}
.admin-nav-link {
  border-radius: 6px;
  color: var(--c-text);
  display: block;
  font-size: 13px;
  padding: 7px 10px;
  text-decoration: none;
}
.admin-nav-link:hover {
  background: color-mix(in srgb, var(--c-green) 8%, transparent);
  color: var(--c-green);
}
.admin-nav-link--active {
  background: color-mix(in srgb, var(--c-green) 14%, transparent);
  color: var(--c-green);
  font-weight: 600;
}

/* Overview / LLM columns: stat panels sit directly above their own chart.
   Each column's children are placed into shared rows -- title, panels, chart --
   rather than flowing independently, so the two charts line up top and bottom
   even though the columns hold a different number of panels. */
.admin-columns {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  margin-top: 20px;
}
.admin-column {
  display: contents;
}
.admin-column > .admin-section-title { grid-row: 1; margin-bottom: 0; }
.admin-column > .admin-stat-grid     { grid-row: 2; }
.admin-column > .admin-chart-wrap    { grid-row: 3; }
.admin-columns > .admin-column:first-child > * { grid-column: 1; }
.admin-columns > .admin-column:last-child  > * { grid-column: 2; }

.admin-search-form {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.admin-search-input {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text);
  flex: 1;
  font-size: 13px;
  max-width: 380px;
  padding: 6px 10px;
}
.admin-search-input:focus {
  border-color: var(--c-green);
  outline: none;
}

.admin-table-wrap + .admin-pagination {
  margin: 12px 0 0;
}

@media (max-width: 900px) {
  .admin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Stacked: each column flows on its own again, so the shared-row placement
     above must be undone or both columns land in the same cell. */
  .admin-columns {
    display: block;
  }
  .admin-column {
    display: block;
    margin: 20px 0 0;
  }
  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
  .admin-nav-title {
    width: 100%;
  }
}

.admin-pagination {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0 0 12px;
}

.admin-pagination-count,
.admin-pagination-page {
  color: var(--c-text-muted);
  font-size: 13px;
}

.admin-pagination-count {
  margin: 0;
}

.admin-pagination-controls {
  align-items: center;
  display: flex;
  gap: 8px;
}

.admin-section-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-label);
  margin: 0 0 12px;
}
.admin-stat-grid {
  align-content: start;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}
.admin-stat-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px 11px;
  /* Label reads first, value second -- the panels are ordered visually the way
     they are read, not the way they are marked up. */
}
.admin-stat-card .admin-stat-label { order: -1; }
.admin-stat-value {
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}
.admin-stat-unit {
  color: var(--c-text-dim);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 3px;
}
.admin-stat-label {
  color: var(--c-text-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}
.admin-stat-sub {
  color: var(--c-primary-mid);
  font-size: 11px;
  margin-top: 1px;
}
.admin-stat-sub--quiet {
  color: var(--c-text-dim);
}
.admin-table-wrap {
  overflow-x: auto;
}
.admin-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}
.admin-table th,
.admin-table td {
  border: 1px solid var(--c-border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.admin-table th {
  background: var(--c-surface-raised);
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-row-error td {
  background: var(--c-danger-subtle);
}
/* Numeric table cells: right-aligned with fixed-width digits so the columns
   read as a stack of magnitudes rather than ragged text. */
.admin-table th.admin-num,
.admin-table td.admin-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.admin-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.admin-url {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-url a {
  color: var(--c-text-muted);
  font-size: 12px;
  text-decoration: none;
}
.admin-url a:hover {
  text-decoration: underline;
}
.admin-badge {
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
}
.admin-badge-ok   { background: var(--c-success-bg); color: var(--c-success-text); }
.admin-badge-err  { background: var(--c-danger-fg-bg); color: var(--c-danger-fg); cursor: help; }
.admin-badge-warn { background: var(--c-warning-bg); color: var(--c-warning-text); }

.admin-reqid {
  font-size: 11px;
  color: var(--c-muted);
  text-decoration: none;
  white-space: nowrap;
}
.admin-reqid:hover { color: var(--c-green); text-decoration: underline; }

.admin-detail {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  align-items: baseline;
  font-size: 14px;
  max-width: 900px;
}
.admin-detail dt {
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
}
.admin-detail dd { margin: 0; word-break: break-all; }

.admin-json {
  background: var(--c-code-bg);
  border: 1px solid var(--c-code-border);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
}
.jk { color: var(--c-json-key); }
.js { color: var(--c-json-str); }
.jb { color: var(--c-json-bool); }
.jn { color: var(--c-json-num); }

.admin-payload summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 4px 0;
  user-select: none;
}
.admin-payload[open] summary { margin-bottom: 10px; }
.admin-payload .admin-json { max-height: 500px; overflow-y: auto; }

.admin-prompt-block { margin: 0 0 12px; }
.admin-prompt-block h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin: 0 0 4px;
}
.admin-prompt-text {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 500px;
  overflow-y: auto;
}

/* Charts are deliberately short -- they read as a trend line beside the
   panels, not as the centrepiece of the page. */
.admin-chart-canvas {
  height: 150px;
  position: relative;
}
.admin-chart-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0 14px 12px;
}
.admin-chart-header {
  align-items: center;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  justify-content: space-between;
  margin: 0 -14px 12px;
  padding: 9px 14px;
}
.admin-chart-title {
  color: var(--c-text-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.admin-range-btns {
  display: flex;
  gap: 2px;
}
.admin-range-btn {
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.admin-range-btn:hover {
  border-color: var(--c-green);
  color: var(--c-green);
}
.admin-range-btn.active {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-text-on-dark);
}

/* ── Collaborators / shared projects ─────────────────────────────────── */
.badge-shared {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--c-info-bg);
  color: var(--c-info-text);
}

.collaborators-section {
  padding: 0 1.5rem 0.75rem;
}

.collaborators-section--member {
  padding-top: 0.25rem;
}

.collaborators-details summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-muted);
  user-select: none;
  padding: 0.25rem 0;
}

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

.collaborators-details[open] summary { color: var(--c-text); }

.collaborators-body {
  padding: 0.75rem 0 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.collaborators-add-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.collaborators-email-input {
  flex: 1;
  font-size: 0.85rem;
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-text);
  min-width: 0;
}

.collaborators-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.collaborators-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.collaborators-name { font-weight: 500; }

.collaborators-email { font-size: 0.78rem; flex: 1; }

.collaborators-empty { font-size: 0.85rem; margin: 0; }

.collaborators-remove-btn {
  background: none;
  border: none;
  color: var(--c-danger-fg);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 2px 4px;
  border-radius: 3px;
}

.collaborators-remove-btn:hover { background: var(--c-danger-fg-bg); }

.collaborators-error {
  font-size: 0.85rem;
  color: var(--c-danger-fg);
  margin: 0;
  padding: 6px 10px;
  background: var(--c-danger-fg-bg);
  border-radius: 5px;
}

.button--small {
  font-size: 0.82rem;
  padding: 4px 10px;
}

.button-disabled {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

.button--danger {
  background: var(--c-danger-strong);
  color: var(--c-text-on-dark);
  border-color: var(--c-danger-strong-hover);
}
.button--danger:hover {
  background: var(--c-danger-strong-hover);
}
.admin-token-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--c-text-dim);
}
.admin-token-hint code {
  font-family: var(--font-mono);
  background: var(--c-code-bg);
  padding: 1px 4px;
  border-radius: 3px;
}
.admin-dim {
  color: var(--c-text-dim);
}

.admin-login-link-banner {
  background: var(--c-info-bg);
  border: 1px solid var(--c-info-border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.875rem;
}
.admin-login-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.admin-login-link-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 5px 8px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  background: var(--c-surface-card);
  color: var(--c-text);
  min-width: 0;
}
.admin-create-user-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sched-reorder-name {
  flex: 1;
  font-size: 0.9rem;
  padding: 4px 6px;
}

/* Image picker dialog (opened from item row thumbnail) */
.image-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-overlay);
}
.image-picker-dialog-inner {
  background: var(--c-surface);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
  width: min(680px, 92vw);
}
.image-picker-dialog-header {
  align-items: center;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 14px 18px 10px;
}
.image-picker-dialog-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.image-picker-dialog-inner .image-picker-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
}
.image-picker-dialog-inner .image-upload-form {
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
  padding: 10px 16px 16px;
}
.modal-close {
  background: none;
  border: none;
  color: var(--c-text-dim);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 2px 6px;
}
.modal-close:hover {
  color: var(--c-text);
}

/* Item row thumbnail button */
.item-thumb-btn {
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

/* Image picker — server-side item detail */
.item-image-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.image-picker-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.picker-thumb {
  width: 56px;
  height: 56px;
  padding: 2px;
  border: 2px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-bg-alt);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}
.picker-thumb.active {
  border-color: var(--c-accent);
}
.image-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--c-text-dim);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px dashed var(--c-border);
  border-radius: 5px;
  width: fit-content;
}
.image-upload-label:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Image picker — Sally panel (React) */
.image-preview-btn {
  display: block;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  width: 100%;
}
.image-preview-count {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 10px;
  pointer-events: none;
}
.image-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  overflow-y: auto;
  padding: 4px 2px;
  width: 100%;
  box-sizing: border-box;
}
.image-picker-thumb {
  display: block;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 6px;
  background: var(--c-surface-alt);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.image-picker-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
.image-picker-thumb.selected {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent);
}

/* Schedule tile grid (project page) */
.schedule-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.schedule-tile {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-light);
  border-radius: 10px;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.1s;
}

.schedule-tile:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Thumbnail grid inside the tile: up to 6 images in a 2×3 arrangement.
 * Fewer images just fill from top-left; empty slots stay as surface. */
.schedule-tile-thumbs {
  aspect-ratio: 4 / 3;
  background: var(--c-surface-image);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  overflow: hidden;
  position: relative;
}

.schedule-tile-thumb {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* When there's only one image, let it fill the whole card header. */
.schedule-tile-thumbs:has(.schedule-tile-thumb:only-child) .schedule-tile-thumb {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.schedule-tile-placeholder {
  align-items: center;
  color: var(--c-text-dim);
  display: flex;
  font-size: 2rem;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  justify-content: center;
}

.schedule-tile-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
}

.schedule-tile-name {
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-tile-meta {
  color: var(--c-text-muted);
  font-size: 13px;
  margin: 0;
}

.schedule-tile-updated {
  color: var(--c-text-dim);
  font-size: 12px;
  margin: 0;
}

/* Keep the old list rule around for any remaining references */
/* Schedule list (project page) */
.schedule-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface-card);
  overflow: hidden;
}
.schedule-list-row + .schedule-list-row {
  border-top: 1px solid var(--c-border);
}
.schedule-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
  transition: background 0.1s;
}

.schedule-list-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.schedule-list-hint {
  color: var(--c-text-link);
  font-size: 12px;
  font-style: italic;
  margin-top: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.schedule-list-row:hover .schedule-list-hint {
  opacity: 1;
}

.schedule-list-thumbs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.schedule-list-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--c-border-light);
}
.schedule-list-link:hover {
  background: var(--c-surface-raised);
}
.schedule-list-name {
  font-size: 16px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-list-kind {
  color: var(--c-text-muted);
  font-weight: 400;
  font-size: 13px;
}
.schedule-list-meta {
  color: var(--c-text-muted);
  font-size: 13px;
  white-space: nowrap;
}
.schedule-list-count {
  margin-right: 4px;
}

/* Single-schedule page */
.schedule-page {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 18px 22px 22px;
}
.schedule-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
/* Repeat of the breadcrumb's parent link, sat directly above the content:
   the breadcrumb itself is far enough up the page to be missed. */
.back-link {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--c-text-muted);
  font-size: 14px;
  text-decoration: none;
}

.back-link:hover {
  color: var(--c-text);
  text-decoration: underline;
}

/* .project-actions-row pulls itself up under the project header; with a back
   link in between there is nothing to pull against, and "Schedules" ends up
   sitting on the link. */
.back-link + .project-actions-row {
  margin-top: 0;
}

.schedule-page-header h1 {
  margin: 0;
  font-size: 22px;
}
/* === Contractor view === */

.item-thumb-btn--lightbox {
  background: none;
  border: none;
  cursor: zoom-in;
  padding: 0;
}

.item-thumb-btn--lightbox:hover .item-thumb {
  opacity: 0.85;
}

.lightbox-dialog {
  background: transparent;
  border: none;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
}

.lightbox-dialog::backdrop {
  background: rgb(0 0 0 / 80%);
  cursor: zoom-out;
}

.lightbox-img {
  display: block;
  max-width: min(90vw, 960px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox-stage {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.lightbox-close {
  align-items: center;
  background: rgb(0 0 0 / 55%);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 17px;
  height: 36px;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 36px;
  z-index: 2;
}

.lightbox-close:hover {
  background: rgb(0 0 0 / 78%);
}

.lightbox-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: min(90vw, 960px);
}

.lightbox-thumb {
  background: rgb(255 255 255 / 10%);
  border: 2px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 56px;
  overflow: hidden;
  padding: 0;
  width: 56px;
}

.lightbox-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.lightbox-thumb:hover {
  border-color: rgb(255 255 255 / 55%);
}

.lightbox-thumb.is-active {
  border-color: #fff;
}

.contractor-grand-total {
  align-items: baseline;
  border-top: 2px solid var(--c-border);
  display: flex;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 18px;
  justify-content: flex-end;
}

.contractor-grand-total-label {
  font-weight: 700;
  font-size: 15px;
  color: var(--c-text);
  flex-shrink: 0;
}

.contractor-grand-total-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  flex-shrink: 0;
}

.contractor-grand-total-note {
  color: var(--c-text-muted);
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
}

.readonly-badge {
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border-light);
  border-left: 3px solid var(--c-text-muted);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
}

.readonly-badge-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.readonly-badge-title {
  color: var(--c-text);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
}

.readonly-badge-sub {
  color: var(--c-text-muted);
  font-size: 12px;
  margin: 0;
}

.contractor-banner {
  background: rgb(0 100 0 / 5%);
  border: 1px solid rgb(0 100 0 / 25%);
  border-radius: 4px;
  color: var(--c-primary-mid);
  font-size: 14px;
  line-height: 1.4;
  margin: 14px auto;
  padding: 10px 14px;
  max-width: 480px;
}
.contractor-banner p { margin: 0; }

.schedule-list-subtotal {
  color: var(--c-text);
  font-weight: 600;
}
.schedule-list-warn {
  color: var(--c-warning);
  margin-left: 2px;
  cursor: help;
}

.price-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.lead-value {
  color: var(--c-text);
  font-size: 13px;
}
.stock-chip {
  border-radius: 10px;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.stock-chip.stock-in_stock     { background: var(--c-success-bg); color: var(--c-success-text); }
.stock-chip.stock-low_stock    { background: var(--c-warning-bg); color: var(--c-warning-text); }
.stock-chip.stock-backordered  { background: var(--c-warning-bg); color: var(--c-warning-text); }
.stock-chip.stock-out_of_stock { background: var(--c-danger-fg-bg); color: var(--c-danger-fg); }
.stock-chip.stock-unknown      { background: var(--c-neutral-bg); color: var(--c-neutral-text); }
.stock-count {
  color: var(--c-text-muted);
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
}
.shop-link {
  color: var(--c-primary-mid);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.shop-link:hover { text-decoration: underline; }

.freshness {
  border-radius: 8px;
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  margin-top: 2px;
  padding: 1px 6px;
  white-space: nowrap;
}
.freshness--fresh   { background: var(--c-success-bg); color: var(--c-success-text); }
.freshness--amber   { background: var(--c-warning-bg); color: var(--c-warning-text); }
.freshness--red     { background: var(--c-danger-fg-bg); color: var(--c-danger-fg); }
.freshness--unknown { background: var(--c-neutral-bg); color: var(--c-neutral-text); }

.contractor-totals-row {
  background: var(--c-surface-raised);
  border-top: 2px solid var(--c-border-mid);
  font-weight: 600;
}
.contractor-totals-label {
  padding: 12px;
  text-align: right;
}
.contractor-totals-coverage {
  color: var(--c-text-muted);
  display: block;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
}
.contractor-totals-value {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  padding: 12px;
  text-align: right;
}

.contractor-totals-warnings {
  background: rgb(179 92 0 / 6%);
  border-left: 4px solid var(--c-warning);
  border-radius: 0 4px 4px 0;
  color: var(--c-warning-text);
  margin: 16px 0 0;
  padding: 12px 16px;
}
.contractor-totals-headline {
  color: var(--c-warning);
  font-weight: 700;
  margin: 0 0 8px;
}
.contractor-totals-warnings ul { margin: 0; padding-left: 20px; }
.contractor-totals-warnings li { font-size: 13px; line-height: 1.5; margin: 4px 0; }

/* Print-friendly — contractors will print this. */
@media print {
  header, footer, .breadcrumb, .add-schedule-row, .contractor-banner { display: none !important; }
  .schedule-page { break-inside: avoid; page-break-inside: avoid; }
  .contractor-totals-row { background: #fff !important; }
  .shop-link::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 10px; }
}


/* Shown above the sign-in call to action after a flow that sent the visitor
   back here to sign in -- currently a completed password reset. */
.lp-notice {
  display: inline-block;
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 1px solid var(--c-border-light);
  border-radius: 4px;
  background: var(--c-surface-hover);
  color: var(--c-text);
  font-weight: 500;
}

/* --- Chrome extension install prompt -----------------------------------
 * .needs-ext marks the prompt; the server puts .ext-seen on <html> once this
 * account has captured an item through the extension (see extensionSeen in
 * internal/web/utils.go). Server-rendered, so the prompt is either in the
 * first paint or never — nothing appears late and nothing flashes away. */
html.ext-seen .needs-ext {
  display: none !important;
}

.ext-banner {
  align-items: center;
  background: var(--c-primary-light);
  border: 1px solid var(--c-border-mid);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 20px;
  padding: 14px 16px;
}

.ext-banner-icon {
  flex-shrink: 0;
  height: 32px;
  width: 32px;
}

.ext-banner-text {
  flex: 1;
  min-width: 220px;
}

.ext-banner-title {
  color: var(--c-primary-text);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
}

.ext-banner-body {
  color: var(--c-primary-text);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* The install button reads as an action wherever it lands — banner, empty
 * state, header — so it carries its own colour rather than inheriting the
 * surrounding block's. */
.ext-install-btn {
  align-items: center;
  background: var(--c-primary);
  border: 1px solid var(--c-primary-dark);
  border-radius: 4px;
  color: var(--c-text-on-dark);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  padding: 8px 16px;
  text-decoration: none;
  white-space: nowrap;
}

.ext-install-btn:hover {
  background: var(--c-primary-dark);
}

.ext-install-btn:active {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 24%);
  transform: translateY(1px);
}

.ext-install-btn img {
  height: 18px;
  width: 18px;
}

.ext-install-btn--sm {
  font-size: 13px;
  padding: 5px 12px;
}

.lp-notice-action {
  margin-left: 10px;
  color: var(--c-primary);
  font-weight: 600;
}