/* Shell page layout (#4): login, gallery, the stage rail row, the more menu and the error page.
   Shared components (rail, lockup, stage grid, buttons, cards) are styled by #29 craft's
   components.css; this file does not restyle them. */

/* Login: one calm column over the stage gradient. */

.stage[data-scene="login"],
.stage[data-scene="error"] {
  grid-template-rows: minmax(0, 1fr);
}

.login {
  display: grid;
  place-items: center;
  padding: 24px var(--space-5) 48px;
  position: relative;
}

.login__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.login__panel {
  width: 100%;
  max-width: 520px;
  display: grid;
  gap: 28px;
  justify-items: start;
}

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

.login__brand img {
  width: auto;
  height: 48px;
}

.login__intro {
  display: grid;
  gap: 14px;
}

.login__title {
  max-width: 12ch;
}

.login__form {
  display: grid;
  gap: 12px;
  width: 100%;
}

.login__error {
  margin: 0;
  color: var(--signal-strong);
  font-weight: 600;
}

.login__error-body {
  margin: 4px 0 0;
  color: var(--text-secondary);
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 64px;
  padding: 8px 8px 8px 24px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
  transition:
    border-color var(--motion-fast) var(--motion-curve),
    box-shadow var(--motion-fast) var(--motion-curve);
}

.field:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: 400 18px/1.2 var(--font-body);
  color: var(--text);
  outline: none;
  letter-spacing: 0.02em;
}

.field button {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border: 0;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-curve);
}

.field button:hover {
  background: color-mix(in srgb, var(--brand-primary) 86%, black);
}

.login__hint {
  margin: 0;
  padding-left: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.login__foot {
  position: absolute;
  left: var(--space-5);
  bottom: 20px;
  right: var(--space-5);
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* Gallery: the customer cards, each one a link into its stage. */

.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 16px var(--space-5) 40px;
}

.gallery__head {
  display: grid;
  gap: 10px;
}

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

/* The contract's 40 ms stagger for the gallery cards. */

.gallery__grid.stagger {
  --stagger-step: 40ms;
}

.customer-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
}

.customer-card-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.customer-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Scene position and title, as the prototype's `1 / 3  Farmer chat`. */

.scene-header__title i {
  font-style: normal;
  color: var(--text-secondary);
}

.scene-header__title b {
  font-weight: 600;
  color: var(--text);
}

/* The stage rail row: the story rail (acts, arrows and the bridge live in the craft component), then the more
   menu and the Powered by mark. It is its own grid row of the stage, so it never covers scene content. */

.rail-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--rail-row-h, 68px);
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.rail-row .progress-rail {
  flex: 1;
  min-width: 0;
}

/* Scene to scene: the header and the rail are the same object on every scene, so they hold still while the scene
   body crossfades; the current act's marker and the fill glide to their new place (motion.css times them). */

.stage--story > .scene-header {
  view-transition-name: plx-header;
}

.stage--story > .rail-row {
  view-transition-name: plx-rail;
}

.stage--story .progress-rail__fill {
  view-transition-name: plx-rail-fill;
}

.stage--story .progress-rail__dot[aria-current="step"] .progress-rail__marker {
  view-transition-name: plx-rail-now;
}

/* The carried signal: an element an exhibit marks as the thread takes the transaction card's name, so the card
   from the previous scene glides into it. A page holds at most one. */
[data-story-thread] {
  view-transition-name: plx-transaction-card;
}

/* The landing lists the storyline; an exhibit page fills the scene body instead. */

.stage-sections {
  padding: var(--space-4) var(--space-5);
}

.stage-sections__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-sections__list a {
  color: var(--text);
}

/* Presenter notes drawer: shell layout around the craft presenter_notes body. */

.presenter-notes__toggle {
  flex: none;
}

.presenter-notes-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--rail-row-h, 68px);
  z-index: 3;
  padding: var(--space-4);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 30px rgb(0 0 0 / 10%);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--motion-base) var(--motion-curve),
    opacity var(--motion-base) var(--motion-curve);
}

.presenter-notes-drawer.is-open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.more-menu {
  position: relative;
  flex: none;
}

.more-menu__toggle {
  cursor: pointer;
  list-style: none;
  font: 500 14px/1 var(--font-display);
  color: var(--text-secondary);
  padding: 11px 16px;
  border-radius: var(--radius-pill);
}

.more-menu__toggle::-webkit-details-marker {
  display: none;
}

.more-menu[open] .more-menu__toggle {
  background: var(--surface-mist);
  color: var(--text);
}

.more-menu__list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 2;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgb(0 0 0 / 12%);
}

.more-menu__list a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.more-menu__list a:hover {
  background: var(--surface-mist);
}

/* Error pages: the shared error-state, centred as a page. */

.error-page {
  display: grid;
  place-items: center;
  padding: 24px var(--space-5) 48px;
}

.error-page .error-state {
  max-width: 520px;
}

/* Cross-document view transitions carry the lockup into the stage header (the name itself
   comes from #29 components.css). */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  .field,
  .field button,
  .presenter-notes-drawer {
    transition: none;
  }
}

/* Brand hierarchy (BRAND-CONTRACT): the customer capability leads, Plantix is the quiet endorsement.
   Only the lockup, the rail, the arrows and the login button read the brand tokens; the sub-label and the
   Powered by lockup are Plantix voice and are never themed. */

[data-branded] .scene-header {
  box-shadow: inset 0 -2px 0 var(--brand-primary);
}

[data-theme="dark"] [data-branded] .scene-header,
[data-theme="dark"] [data-branded] .scene-header {
  box-shadow: inset 0 -2px 0 var(--brand-on-dark-accent);
}

/* brand.header "primary": the header bar is painted --brand-primary, text is --brand-on-primary and the
   customer shows its on-dark logo, for brands whose only logo is white. The company world keeps the same bar. */
.stage[data-header="primary"] .scene-header,
[data-theme="dark"] .stage[data-header="primary"] .scene-header,
[data-theme="dark"] .stage[data-header="primary"] .scene-header {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  box-shadow: none;
}

[data-header="primary"] .scene-header .lockup__logo--on-light,
.lockup[data-header="primary"] .lockup__logo--on-light {
  display: none;
}

[data-header="primary"] .scene-header .lockup__logo--on-dark,
.lockup[data-header="primary"] .lockup__logo--on-dark {
  display: block;
}

[data-header="primary"] .scene-header .lockup__product-name,
[data-header="primary"] .scene-header .lockup__concept,
[data-header="primary"] .scene-header__title,
[data-header="primary"] .scene-header .powered,
[data-header="primary"] .scene-header .scene-header__title i,
[data-header="primary"] .scene-header .scene-header__title b {
  color: var(--brand-on-primary);
}

[data-header="primary"] .scene-header .powered__on-light {
  display: none;
}

[data-header="primary"] .scene-header .powered__on-dark {
  display: block;
}

[data-header="primary"] .scene-header .button--ghost {
  color: var(--brand-on-primary);
  border-color: currentColor;
}

/* The login panel is light: the white logo sits on a primary plate so it stays visible. */
.login__brand--customer .lockup[data-header="primary"] {
  align-self: start;
  width: fit-content;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
}

.login__brand--customer .lockup[data-header="primary"] .lockup__product-name,
.login__brand--customer .lockup[data-header="primary"] .lockup__concept {
  color: var(--brand-on-primary);
}

.lockup--brand {
  gap: var(--space-4);
  flex-wrap: nowrap;
}

.lockup__logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  flex: none;
}

.lockup__logo--on-dark,
[data-theme="dark"] .lockup__logo--on-light.lockup__logo--paired {
  display: none;
}

[data-theme="dark"] .lockup__logo--on-dark {
  display: block;
}

[data-theme="dark"] .lockup__logo--plate {
  box-sizing: content-box;
  padding: var(--space-1) var(--space-3);
  background: #fff;
  border-radius: var(--radius-sm);
}

.lockup__product {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lockup__product-name {
  font: 600 18px/1.15 var(--font-display);
  color: var(--text);
  overflow-wrap: anywhere;
}

.lockup__short {
  display: none;
}

.lockup__concept {
  font: 400 12px/1.2 var(--font-body);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.powered {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  margin-left: var(--space-3);
  font: 400 12px/1 var(--font-body);
  color: var(--text-secondary);
  white-space: nowrap;
}

.powered img {
  height: 18px;
  width: auto;
}

.powered__on-dark,
[data-theme="dark"] .powered__on-light {
  display: none;
}

[data-theme="dark"] .powered__on-dark {
  display: block;
}

@media (max-width: 699px) {
  .powered span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .powered {
    margin-left: 0;
  }

  .lockup__logo {
    height: 28px;
    max-width: 120px;
  }

  .lockup__product-name {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lockup__product:has(.lockup__short) .lockup__long {
    display: none;
  }

  .lockup__product:has(.lockup__short) .lockup__short {
    display: inline;
  }

  .lockup__concept {
    font-size: 11px;
  }
}

.login__brand--customer {
  gap: var(--space-4);
}

.login__brand--customer .lockup__logo {
  height: 48px;
}

.login__foot .powered {
  margin-left: 0;
}

.login__title.login__title--brand {
  font-size: var(--type-h1);
  max-width: 20ch;
  line-height: 1.15;
}

/* Phone: the arrows, five dots and the Powered by mark share one row. The current act's label hangs below its dot
   instead of widening the rail, and the bridge keeps only its arrow, so nothing overlaps at 393. */
@media (max-width: 640px) {
  .rail-row {
    gap: var(--space-2);
    padding-left: max(var(--space-2), env(safe-area-inset-left));
    padding-right: max(var(--space-2), env(safe-area-inset-right));
  }

  .rail-row .progress-rail--slots {
    gap: var(--space-1);
  }

  .rail-row .progress-rail__dot {
    position: relative;
    min-width: 32px;
    padding: 0;
  }

  .rail-row .progress-rail__dot[aria-current="step"] .progress-rail__label {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
  }
}

/* The theme switch: a quiet track beside Notes, the thumb slides to the moon in the dark theme. */
.scene-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: end;
}

.theme-switch {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: inherit;
  cursor: pointer;
}

.theme-switch__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 56px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.theme-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.95;
  transition: transform var(--motion-base) var(--motion-curve);
}

.theme-switch__sun,
.theme-switch__moon {
  position: relative;
  z-index: 1;
  transition: opacity var(--motion-base) var(--motion-curve);
}

.theme-switch__sun {
  color: var(--surface-2);
  mix-blend-mode: normal;
}

.theme-switch[aria-pressed="true"] .theme-switch__thumb {
  transform: translateX(26px);
}

.theme-switch[aria-pressed="false"] .theme-switch__moon {
  opacity: 0.7;
}

.theme-switch[aria-pressed="true"] .theme-switch__sun {
  color: inherit;
  opacity: 0.7;
}

.theme-switch[aria-pressed="true"] .theme-switch__moon {
  color: var(--surface-2);
}

[data-header="primary"] .scene-header .theme-switch__sun,
[data-header="primary"] .scene-header .theme-switch[aria-pressed="true"] .theme-switch__moon {
  color: var(--brand-primary);
}

[data-header="primary"] .scene-header .theme-switch {
  color: var(--brand-on-primary);
}

.theme-switch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* One frame without transitions while the theme flips, so colours change at once and never in steps. */
.is-theming,
.is-theming *,
.is-theming *::before,
.is-theming *::after {
  transition: none !important;
}

@media (max-width: 480px) {
  .scene-header__tools {
    gap: var(--space-2);
  }

  .theme-switch,
  .theme-switch__track {
    width: 44px;
  }

  .theme-switch__track {
    height: 26px;
    padding: 0 5px;
  }

  .theme-switch__thumb {
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
  }

  .theme-switch[aria-pressed="true"] .theme-switch__thumb {
    transform: translateX(18px);
  }

  .theme-switch__sun,
  .theme-switch__moon {
    width: 12px;
    height: 12px;
  }
}

/* Family back control (ruling I-R1): a microsite reached from the suite shows the way back as its own compact
   control beside the lockup, never as another word in the product name. Tokens only, and the layout is scoped to
   the lockups that carry the control (ruling I-R7): a shared `.scene-header__lockup` without a back link keeps
   its original inline layout in Wilmar, agricon, the suite pages and the gallery. */
.scene-header__lockup:has([data-family-back]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--space-3);
  min-width: 0;
}

.family-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 28%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-curve), border-color var(--motion-fast) var(--motion-curve);
}

.family-back__arrow {
  font-size: 13px;
  line-height: 1;
  transform: translateY(-0.5px);
}

.family-back:hover,
.family-back:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 45%, transparent);
}

/* Customer authentication uses only the shared shell tokens. */
.customer-signout {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 50;
  margin: 0;
}
.customer-signout button {
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  cursor: pointer;
}
.customer-signout button:focus-visible { outline: 2px solid var(--signal); }