/* Customer shell and shared UI primitives (plan 04.1-03, UI-SPEC sections 5 to 8).
   Loaded after the main stylesheet on every page. It uses that file's tokens (colours, radii,
   spacing, type) and forks none of them; only the motion tokens are defined here, once.
   Palette: Grafitt text and actions, Studiohvit canvas, white cards with hairline borders and no
   shadows (floating things excepted), green only as a small status marker. Same-origin only. */

:root {
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ------------------------------------------------------------- skip link */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-md);
  z-index: 10000;
  padding: 10px var(--space-md);
  background: var(--palette-dark);
  border-radius: var(--radius-control);
  color: var(--palette-white);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-md);
  outline: 2px solid var(--color-focus-on-dark);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* ----------------------------------------------------------------- bars */

.brand picture {
  display: flex;
}

/* The public bar: brand only, centred, no nav and no user menu */
.topbar--public {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.topbar--public .brand {
  justify-self: center;
}

/* Divider between the customer nav and the operator group, inside the same pill */
.nav__divider {
  flex: none;
  align-self: center;
  width: 1px;
  height: 24px;
  margin: 0 var(--space-xs);
  background: var(--color-border-strong);
}

/* The dealer's own logo, or its name when there is no logo (D-43) */
.brand__dealer {
  display: inline-flex;
  flex: none;
  align-items: center;
  max-width: 164px;
  height: 34px;
  padding: 0 4px;
  background: var(--color-secondary);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-chip);
}

.brand__dealer img {
  display: block;
  max-width: 100%;
  height: 24px;
  object-fit: contain;
}

.topbar--customer .brand__tenant {
  display: inline-block;
  max-width: 216px;
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
}

/* A bar with only two nav items fits on one line even at 375 px */
@media (max-width: 719px) {
  .topbar.topbar--customer {
    position: sticky;
    top: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    row-gap: 0;
    min-height: 72px;
    padding: 10px var(--shell-gutter);
  }

  .topbar--customer .nav {
    grid-column: auto;
    grid-row: auto;
    justify-self: center;
    overflow: visible;
  }

  .topbar--customer .brand {
    gap: 10px;
  }

  .topbar--customer .brand__logo {
    height: 38px;
  }

  .brand__dealer {
    max-width: 96px;
  }

  .topbar--customer .brand__tenant {
    max-width: 96px;
    padding-left: 0;
    border-left: 0;
  }
}

/* ------------------------------------------------------------- user menu */

.user-menu,
.picker {
  position: relative;
}

.user-menu__button,
.picker__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--control-height);
  background: var(--color-secondary);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease);
}

.user-menu__button {
  padding: 0 var(--space-sm) 0 4px;
}

.picker__button {
  max-width: 240px;
  padding: 0 var(--space-sm) 0 12px;
}

.user-menu__button:hover,
.user-menu__button[aria-expanded="true"],
.picker__button:hover,
.picker__button[aria-expanded="true"] {
  border-color: var(--color-text);
}

.user-menu__button .icon,
.picker__button .icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: transform var(--motion-fast) var(--ease);
}

.user-menu__button[aria-expanded="true"] .icon:last-child,
.picker__button[aria-expanded="true"] .icon:last-child {
  transform: rotate(180deg);
}

.user-menu__name {
  white-space: nowrap;
}

.picker__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grafitt square with white initials (green is a status marker only) */
.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--palette-dark);
  border-radius: 7px;
  color: var(--palette-white);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

.user-menu__panel,
.picker__panel {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md);
  box-shadow: 0 8px 24px rgba(22, 22, 22, 0.12);
}

.user-menu__panel {
  width: 260px;
}

.user-menu__panel:not([hidden]),
.picker__panel:not([hidden]) {
  animation: menu-in var(--motion-fast) var(--ease);
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.user-menu__panel hr,
.picker__panel hr {
  width: 100%;
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.user-menu__who {
  margin: 0;
  overflow-wrap: anywhere;
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--control-height);
  padding: 0 var(--space-sm);
  border-radius: var(--radius-chip);
  color: var(--color-text);
  font-size: 16px;
  text-decoration: none;
}

.user-menu__item:hover {
  background: var(--color-canvas);
}

.user-menu__item .icon {
  color: var(--color-text-muted);
}

@media (max-width: 719px) {
  .user-menu__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .user-menu__button {
    padding: 0 4px;
  }

  .user-menu__button .icon {
    display: none;
  }
}

/* ---------------------------------------------------------- operator only */

.picker__panel {
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
}

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

.picker__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-sm);
  background: transparent;
  border: 0;
  border-radius: var(--radius-chip);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.picker__option:hover,
.picker__option:focus-visible {
  background: var(--color-canvas);
}

.picker__tick {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
}

.picker__new {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 var(--space-sm);
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--weight-semibold);
}

.picker__search {
  margin-bottom: var(--space-sm);
}

@media (max-width: 719px) {
  /* A full-width sheet, inset 16 px, instead of a dropdown under the button */
  .picker__panel {
    position: fixed;
    top: 128px;
    right: var(--space-md);
    left: var(--space-md);
    width: auto;
  }

  .picker__button {
    max-width: 160px;
  }
}

.viewing-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 40px;
  padding: 0 var(--shell-gutter);
  background: var(--palette-dark);
  color: var(--palette-white);
  font-size: var(--text-label);
}

.viewing-bar p {
  margin: 0;
}

.viewing-bar__marker {
  display: inline-block;
  width: var(--marker-size);
  height: var(--marker-size);
  margin-right: var(--space-sm);
  background: var(--palette-green);
  border-radius: 2px;
}

.viewing-bar a {
  color: var(--palette-white);
  font-weight: var(--weight-semibold);
}

.viewing-bar :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-lg);
  justify-content: space-between;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 20px var(--shell-gutter) 40px;
  border-top: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: var(--text-label);
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--color-text-muted);
}

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

.site-footer nav {
  display: flex;
  gap: var(--space-sm);
}

@media (max-width: 719px) {
  .site-footer {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px var(--space-md);
  background: var(--palette-dark);
  border-radius: var(--radius-control);
  box-shadow: 0 8px 24px rgba(22, 22, 22, 0.24);
  color: var(--palette-white);
  font-size: 16px;
  font-weight: var(--weight-medium);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition:
    opacity 180ms var(--ease),
    transform 180ms var(--ease);
}

.toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast::before {
  flex: none;
  width: var(--marker-size);
  height: var(--marker-size);
  background: var(--palette-green);
  border-radius: 2px;
  content: "";
}

.toast--error::before {
  background: var(--color-coral);
}

.toast__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast__undo,
.toast__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--color-frame-border);
  border-radius: var(--radius-chip);
  color: var(--palette-white);
  font: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.toast__undo:hover,
.toast__close:hover {
  border-color: var(--palette-white);
}

.toast :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

@media (max-width: 767px) {
  .toast__undo,
  .toast__close {
    min-height: var(--control-height-touch);
  }
}

/* ----------------------------------------------------------------- dialog */

.cp-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  background: var(--color-secondary);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
}

.cp-dialog::backdrop {
  background: rgba(10, 10, 12, 0.45);
}

.cp-dialog[open] {
  animation: dialog-in var(--motion-base) var(--ease);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.cp-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
}

.cp-dialog__body p {
  margin: 0;
}

.cp-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

@media (max-width: 719px) {
  /* Bottom sheet for the upload dialog on phones */
  .cp-dialog--sheet {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .cp-dialog--sheet[open] {
    animation: sheet-up var(--motion-base) var(--ease);
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
}

@media (max-width: 479px) {
  .cp-dialog__actions {
    flex-direction: column-reverse;
  }

  .cp-dialog__actions .button {
    width: 100%;
  }
}

/* -------------------------------------------------------------- form field */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field__required {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.form-field .meta,
.form-field .form-error {
  margin: 0;
}

/* --------------------------------------------------------------- help tip */

.help-tip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.help-tip__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-chip);
  color: var(--color-text-muted);
  cursor: pointer;
}

.help-tip__button:hover {
  color: var(--color-text);
}

.help-tip__button .icon {
  width: 20px;
  height: 20px;
}

.help-tip__note {
  display: block;
  flex-basis: 100%;
  padding: 12px;
  background: var(--color-thumb-bg);
  border-radius: var(--radius-chip);
  font-size: var(--text-label);
  line-height: var(--leading-body);
}

@media (max-width: 767px) {
  .help-tip__button {
    min-width: var(--control-height-touch);
    min-height: var(--control-height-touch);
  }
}

/* ------------------------------------------------------------ before/after */

.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ba__item {
  position: relative;
  margin: 0;
}

.ba__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background: var(--color-thumb-bg);
  border-radius: var(--radius-control);
  object-fit: cover;
}

.ba__item figcaption {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
}

/* ------------------------------------------------------------------ badge */

.badge--dark {
  background: var(--palette-dark);
  border-color: var(--palette-dark);
  color: var(--palette-white);
}

.badge--dark .badge__dot {
  background: var(--palette-green);
}

/* --------------------------------------------------------------- skeleton */

/* .skeleton-group: invisible for the first 300ms, so a fast response never flashes it */
.skeleton-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  animation: skeleton-reveal 0s linear 0.3s forwards;
}

@keyframes skeleton-reveal {
  to {
    opacity: 1;
  }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-thumb-bg);
  border-radius: var(--radius-small);
}

.skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  content: "";
  transform: translateX(-100%);
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

.skeleton--text {
  height: 14px;
}

.skeleton--thumb {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-control);
}

.skeleton--viewer {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
}

.skeleton--card {
  height: 160px;
  border-radius: var(--radius-card);
}

.skeleton--row {
  height: 72px;
  border-radius: var(--radius-control);
}

.skeleton--stat {
  height: 88px;
  border-radius: var(--radius-card);
}

/* --------------------------------------------------------------- progress */

.progress-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-block .meta {
  margin: 0;
}

.progress__fill {
  transition: width var(--motion-base) var(--ease);
}

.progress__fill--w0 { width: 0; }
.progress__fill--w5 { width: 5%; }
.progress__fill--w10 { width: 10%; }
.progress__fill--w15 { width: 15%; }
.progress__fill--w20 { width: 20%; }
.progress__fill--w25 { width: 25%; }
.progress__fill--w30 { width: 30%; }
.progress__fill--w35 { width: 35%; }
.progress__fill--w40 { width: 40%; }
.progress__fill--w45 { width: 45%; }
.progress__fill--w50 { width: 50%; }
.progress__fill--w55 { width: 55%; }
.progress__fill--w60 { width: 60%; }
.progress__fill--w65 { width: 65%; }
.progress__fill--w70 { width: 70%; }
.progress__fill--w75 { width: 75%; }
.progress__fill--w80 { width: 80%; }
.progress__fill--w85 { width: 85%; }
.progress__fill--w90 { width: 90%; }
.progress__fill--w95 { width: 95%; }
.progress__fill--w100 { width: 100%; }

/* ----------------------------------------------------------- empty state */

.empty-state .icon {
  color: var(--color-text-faint);
}

/* ------------------------------------------------------------------- 404 */

/* The single 404 page (UI-SPEC 9.6; Even, 2026-10-08): an empty studio. The panel is painted the
   backdrop's wall colour and the rendered "Studio lys" backdrop (scripts/make_404_backdrop.py)
   sits at the bottom at twice the floor band's height, so its horizon always lands on top of the
   floor band however tall the text grows. The text stands on the wall: Grafitt on the wall grey is
   10.9:1, the secondary text 6.8:1. Nothing moves. */
.studio-404 {
  --studio-wall: #c9c9c9; /* AUTOPIX_PRESET wall_color ("Studio lys") */
  --studio-floor: clamp(120px, 18vw, 240px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(520px, 72vh, 760px);
  padding: var(--space-3xl) var(--space-3xl) calc(var(--studio-floor) + var(--space-xl));
  overflow: hidden;
  border-radius: var(--radius-frame);
  background: var(--studio-wall);
  color: var(--color-text);
}

.studio-404__backdrop {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--studio-floor) * 2);
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.studio-404__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 560px;
}

.studio-404__content > * {
  margin: 0;
}

.studio-404__title {
  font-size: clamp(32px, 1.25rem + 2.6vw, 56px);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}

/* "404" under the headline: large but light and softer in tone, so it reads second */
.studio-404__code {
  margin-top: calc(var(--space-sm) * -1);
  color: var(--tone-neutral-text);
  font-size: clamp(24px, 1rem + 1.4vw, 40px);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-stat);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.studio-404__text {
  max-width: 44ch;
  color: var(--tone-neutral-text);
}

.studio-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}

@media (max-width: 719px) {
  .studio-404 {
    min-height: 480px;
    padding: var(--space-xl) var(--space-lg) calc(var(--studio-floor) + var(--space-lg));
    border-radius: var(--radius-card);
  }
}

/* ---------------------------------------------------------- reduced motion */

/* One global rule: nothing moves, the skeleton sweep and the badge pulse stop, and spinners keep
   turning slowly because they carry the "working" status. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .skeleton::after,
  .badge__dot {
    animation: none !important;
  }

  .spinner {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
}