/* ==========================================================================
   Siri Techno Fabs — public pages (landing "/" and sign-in "/login")
   Ported from the siri-redesign deliverable. Light theme only: these two
   pages deliberately opt out of the site-wide ng-theme dark toggle.
   Class-scoped apart from the reset in section 2, which is safe because both
   consumers are standalone documents (no AdminLTE bundle is loaded there).
   Sections keep the numbering of the source stylesheet; the marketing-only
   sections (hero, capability strip, use-case tabs, workflow, closing CTA)
   are omitted because neither page uses them.
   ========================================================================== */

/* 1. Design tokens ======================================================== */

:root {
  /* Brand */
  --teal-900: #042b25;
  --teal-800: #05433a;
  --teal-700: #075b50; /* primary */
  --teal-600: #0a6e60;
  --teal-100: #d9ece1;
  --teal-50:  #eef6f1;

  /* Neutrals — all text colours below meet WCAG AA on their backgrounds */
  --ink:      #0f2a25; /* headings */
  --body:     #3b4d48; /* body copy */
  --muted:    #55645f; /* 6.2:1 on white */
  --line:     #dde5e0;
  --line-soft:#e9efeb;
  --surface:  #f5f8f5;
  --white:    #fff;

  /* Inverted surfaces */
  --on-dark:        #ffffff;
  --on-dark-muted:  #c9dbd2; /* 8.4:1 on --teal-900 */

  /* Type */
  --font-display: Manrope, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;

  /* Spacing scale — 4px base */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 96px;

  /* Radii & elevation */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(8, 44, 36, .06), 0 4px 14px rgba(8, 44, 36, .06);
  --shadow-md: 0 12px 34px rgba(8, 44, 36, .12);

  /* Layout */
  --wrap: 1280px;
  --gutter: 48px;
  --header-h: 76px;
}

/* 2. Base & reset ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-6));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* Two-tone focus ring: reads on both light and dark surfaces. */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--teal-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .85);
}
.is-dark :where(a, button, input, select):focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(4, 43, 37, .85);
}

::selection { background: var(--teal-100); color: var(--teal-900); }

.skip {
  position: fixed;
  top: -200px;
  left: var(--s-5);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  transition: top .15s ease;
}
.skip:focus { top: var(--s-3); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 3. Layout helpers ======================================================= */

.wrap {
  width: min(var(--wrap), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 var(--s-4);
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-8);
}
.section-head h2 { font-size: clamp(30px, 3.3vw, 44px); }
.section-head > p {
  max-width: 38ch;
  color: var(--muted);
  font-size: 16px;
}

.rule {
  width: 40px;
  height: 2px;
  background: var(--teal-700);
  border-radius: 2px;
}

/* 4. Header & navigation ================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(8, 44, 36, .02);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
.brand img { width: 44px; height: 36px; object-fit: contain; }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
  color: var(--muted);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  font-size: 14.5px;
  font-weight: 500;
}
.primary-nav a:not(.button) { color: var(--body); padding: var(--s-2) 0; }
.primary-nav a:not(.button):hover { color: var(--teal-700); }
.nav-divider {
  padding-left: var(--s-7);
  border-left: 1px solid var(--line);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
}
.nav-toggle .bars {
  position: relative;
  width: 16px; height: 2px;
  background: currentColor;
  transition: background .15s;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 2px;
  background: currentColor;
  transition: transform .2s ease;
}
.nav-toggle .bars::before { top: -5px; }
.nav-toggle .bars::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* 5. Buttons & links ====================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 14px var(--s-6);
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--teal-700);
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.button:hover { background: var(--teal-800); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button:active { transform: none; }
.button .arrow { font-size: 17px; line-height: 1; transition: transform .18s ease; }
.button:hover .arrow { transform: translateX(2px); }

.button--sm { min-height: 40px; padding: 9px var(--s-4); font-size: 14px; }
.button--light { background: var(--teal-100); color: var(--teal-900); }
.button--light:hover { background: #c6e2d2; }
.button--ghost {
  background: transparent;
  color: var(--teal-700);
  border-color: var(--line);
}
.button--ghost:hover { background: var(--teal-50); border-color: var(--teal-100); }
.button--block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--teal-700);
  font-size: 14.5px;
  font-weight: 600;
}
.text-link .arrow { transition: transform .18s ease; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.text-link:hover .arrow { transform: translateX(2px); }

/* 9. Scene player ========================================================= */
/* Video sits in its own 3:2 frame at the source aspect ratio, with the caption
   on a solid panel beneath it. Text never sits on moving footage, so contrast
   is fixed rather than dependent on the frame being shown. */

.player {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--teal-900);
  box-shadow: var(--shadow-md);
}

.player-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--teal-900);
  overflow: hidden;
}
.player-stage > img,
.player-stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Two video elements are stacked: one plays while the other buffers the next
   scene, and they crossfade at the join so the eight clips read as one run. */
.player-stage > video { opacity: 0; transition: opacity .7s ease-in-out; }
.player[data-state="playing"] .player-stage > video.is-active,
.player[data-state="paused"]  .player-stage > video.is-active { opacity: 1; }

/* Top bar over the footage */
.player-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--s-4);
  padding: var(--s-5);
  background: linear-gradient(to bottom, rgba(4, 34, 28, .55), rgba(4, 34, 28, .12) 62%, transparent);
  color: var(--on-dark);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(3, 26, 21, .6);
}
/* The counter carries its own background so it stays legible over any frame,
   bright or dark, rather than relying on the gradient underneath. */
.player-count {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: rgba(4, 34, 28, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* Big centre play affordance when paused */
.player-bigplay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--on-dark);
  background: rgba(4, 34, 28, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.player[data-state="paused"] .player-bigplay,
.player[data-state="idle"]   .player-bigplay { opacity: 1; pointer-events: auto; }
.player-bigplay span {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(4, 34, 28, .55);
  backdrop-filter: blur(6px);
  font-size: 20px;
  padding-left: 4px;
}

/* Thin progress line */
.player-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 3px;
  background: rgba(255, 255, 255, .22);
}
.player-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--teal-100);
  transform-origin: left;
}

/* Caption panel */
.player-caption {
  padding: var(--s-6);
  color: var(--on-dark);
  background: var(--teal-900);
}
.player-time {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
/* A caption line, not a document heading — the surrounding page owns the
   heading outline, so this is styled as display text rather than an <h3>. */
.player-headline {
  margin-top: var(--s-3);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.2;
}
.player-text {
  margin-top: var(--s-3);
  max-width: 52ch;
  color: var(--on-dark-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
}
.player-btn {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-pill);
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.player-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }
.player-toggle { padding: 0 var(--s-5); }
.player-scene-label {
  margin-left: auto;
  color: var(--on-dark-muted);
  font-size: 12.5px;
  text-align: right;
}

.player-dots {
  display: flex;
  gap: var(--s-1);
  margin-top: var(--s-4);
}
.player-dots li { flex: 1; }
.player-dots button {
  width: 100%;
  min-height: 34px;
  padding: var(--s-2) 0 var(--s-1);
  border-bottom: 2px solid rgba(255, 255, 255, .26);
  color: var(--on-dark-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease, border-color .15s ease;
}
.player-dots button:hover { color: var(--on-dark); border-bottom-color: rgba(255, 255, 255, .6); }
.player-dots button[aria-pressed="true"] {
  color: var(--on-dark);
  font-weight: 700;
  border-bottom-color: var(--teal-100);
}

/* Error state */
.player-error {
  display: none;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--teal-100);
  background: rgba(255, 255, 255, .08);
  color: var(--on-dark-muted);
  font-size: 13px;
}
.player[data-state="error"] .player-error { display: block; }

/* Compact variant — used beside the use-case copy, where the narrative is
   owned by the text column and the player must not compete with it. */
.player--compact .player-caption { padding: var(--s-4) var(--s-5) var(--s-5); }
/* Hidden visually but kept in the accessibility tree: sighted visitors read the
   copy column beside the player, screen reader users still get the scene
   description that column does not repeat. */
.player--compact .player-headline,
.player--compact .player-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.player--compact .player-controls { margin-top: 0; }
.player--compact .player-time {
  margin-bottom: var(--s-3);
  display: block;
}

/* 12. Footer ============================================================== */

.site-footer { padding: var(--s-11) 0 var(--s-8); }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}
.site-footer .brand { font-size: 16px; }
.site-footer .brand img { width: 38px; height: 31px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  font-size: 14px;
  color: var(--muted);
}
.footer-links a:hover { color: var(--teal-700); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-6);
  color: var(--muted);
  font-size: 12.5px;
}

/* 13. Sign in ============================================================= */

.login-page { background: var(--surface); }

.login-header .header-inner { height: 72px; }
.login-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  font-size: 14px;
  color: var(--muted);
}
.login-header-actions a:hover { color: var(--teal-700); }

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1fr);
  margin-block: var(--s-2) var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Source order is form-first so the H1 opens the document; at desktop widths
   the story panel is moved back to the left-hand column. */
.login-story {
  order: -1;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  padding: var(--s-8);
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(10, 110, 96, .5), transparent 60%),
    var(--teal-900);
  color: var(--on-dark);
}
.login-story-head h2 {
  margin-top: var(--s-3);
  max-width: 18ch;
  color: var(--on-dark);
  font-size: clamp(24px, 2.1vw, 30px);
}
.login-story-head .eyebrow { color: var(--teal-100); margin-bottom: var(--s-2); }
/* The player gets the same treatment as the homepage hero: a true 3:2 stage at
   the clips' own aspect ratio with the full caption beneath, rather than being
   stretched to fill whatever height the column has left over. */
.login-story .player {
  margin-top: var(--s-7);
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .14);
}

.login-form-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-9) var(--s-10);
}
.login-form-side h1 { font-size: clamp(30px, 3vw, 38px); }
.login-form-side > .eyebrow { margin-bottom: var(--s-3); }
.login-intro {
  margin: var(--s-3) 0 var(--s-8);
  color: var(--muted);
  font-size: 15.5px;
}

.field { margin-bottom: var(--s-5); }
.field label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.field input[type="text"],
.field input[type="password"] {
  width: 100%;
  height: 50px;
  padding: 0 var(--s-4);
  border: 1px solid #ccd8d2;
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #7f8e88; }
.field input:hover { border-color: #b4c4bc; }
.field input:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(10, 110, 96, .18);
}
.field input[aria-invalid="true"] { border-color: #a6321f; }
.field-error {
  display: block;
  margin-top: var(--s-2);
  color: #8f2b1a;
  font-size: 13px;
  font-weight: 500;
}

.password-wrap { position: relative; }
.password-wrap input { padding-right: 76px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: var(--s-1);
  transform: translateY(-50%);
  height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--teal-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.password-toggle:hover { background: var(--teal-50); }

.form-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  margin: var(--s-6) 0;
  font-size: 14px;
}
.remember { display: flex; align-items: center; gap: var(--s-2); color: var(--body); }
.remember input { width: 17px; height: 17px; accent-color: var(--teal-700); }
.form-options > a { color: var(--teal-700); font-weight: 600; }
.form-options > a:hover { text-decoration: underline; text-underline-offset: 4px; }

.form-alert {
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border-inline-start: 3px solid var(--teal-700);
  border-start-end-radius: var(--r-sm);
  border-end-end-radius: var(--r-sm);
  background: var(--teal-50);
  font-size: 14px;
  color: var(--body);
}
.form-alert a { color: var(--teal-700); font-weight: 600; text-decoration: underline; }
.form-alert--error { border-inline-start-color: #a6321f; background: #fdf1ee; }

.register-line {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}
.register-line a { color: var(--teal-700); font-weight: 600; }
.register-line a:hover { text-decoration: underline; text-underline-offset: 4px; }

.login-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-bottom: var(--s-8);
  color: var(--muted);
  font-size: 12.5px;
}
.login-footer div { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.login-footer a:hover { color: var(--teal-700); }


/* 13b. Landing film page ================================================== */

/* "/" is a film page: a short heading and the scene player, nothing else.
   These rules stand in for the deliverable's hero section, which assumed
   marketing copy this page does not carry. Copy and player sit side by side
   as that hero does; the disclosure note runs full width beneath both. */
.film-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-9) 0 var(--s-11);
}
.film-head { max-width: 46ch; }
.film-head h1 { font-size: clamp(34px, 4.4vw, 52px); }
.film-head .film-lede {
  margin-top: var(--s-4);
  color: var(--muted);
  font-size: 17px;
}
.film-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
}

.film-note {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin-top: calc(var(--s-6) - var(--s-12));
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* 13c. Application-specific form parts ==================================== */

/* The live sign-in carries pieces the static deliverable had no equivalent
   for: the locale selector, Laravel's validation output, the duplicate-session
   notice, the flashed status message, reCAPTCHA and the demo-shop shortcuts. */

.lang-select {
  height: 38px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--body);
  font-size: 13.5px;
  cursor: pointer;
}
.lang-select:hover { border-color: var(--teal-600); }

/* Laravel renders errors as .help-block inside a .has-error field. */
.help-block {
  display: block;
  margin-top: var(--s-2);
  color: #8f2b1a;
  font-size: 13px;
  font-weight: 500;
}
.help-block strong { font-weight: 500; }
.field.has-error input[type="text"],
.field.has-error input[type="password"] { border-color: #a6321f; }

/* One row per live session when the guard refuses a duplicate login. */
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid #f0d9a8;
  border-radius: var(--r-sm);
  background: #fdf6e7;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--body);
}
.session-row a {
  color: #8f2b1a;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* session('status.msg') from LoginController@authenticated. */
.status-alert {
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border-inline-start: 3px solid #a6321f;
  border-start-end-radius: var(--r-sm);
  border-end-end-radius: var(--r-sm);
  background: #fdf1ee;
  font-size: 14px;
  color: var(--body);
}
.status-alert.is-ok { border-inline-start-color: var(--teal-700); background: var(--teal-50); }

.recaptcha-row { margin-bottom: var(--s-5); }
.recaptcha-row .g-recaptcha { display: flex; justify-content: center; }

/* Demo environment only. */
.demo-shops {
  margin-top: var(--s-7);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.demo-shops > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.demo-shops > summary::-webkit-details-marker { display: none; }
.demo-shops__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.demo-shops__hint { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.demo-shops__body { padding: 0 var(--s-4) var(--s-4); }
.demo-shops__sub {
  margin: var(--s-1) 0 var(--s-3);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.demo-shops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: var(--s-2);
}
.demo-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--on-dark);
  font-size: 11.5px;
  font-weight: 700;
}
.demo-login:hover { filter: brightness(1.08); }
.demo-hr { border: 0; border-top: 1px dashed var(--line); margin: var(--s-4) 0; }

/* 14. Responsive ========================================================== */

@media (max-width: 1180px) {
  :root { --gutter: 32px; }
  .primary-nav { gap: var(--s-5); font-size: 14px; }
  .nav-divider { padding-left: var(--s-5); }
  .login-form-side { padding: var(--s-8); }
  .login-story { padding: var(--s-7); }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-header { position: static; }
  .header-inner { position: relative; }
  .primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + var(--s-2));
    right: 0; left: 0;
    z-index: 90;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    padding: var(--s-6);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
    box-shadow: var(--shadow-md);
  }
  .primary-nav.is-open { display: flex; }
  .nav-divider { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-4); }

  .film-page {
    grid-template-columns: 1fr;
    gap: var(--s-8);
    padding: var(--s-7) 0 var(--s-9);
  }
  .film-head { max-width: none; }
  .film-note { margin-top: 0; }

  .login-shell { grid-template-columns: 1fr; }
  .login-form-side { padding: var(--s-8) var(--s-7); }
  /* Stacked: the form leads, matching source order. */
  .login-story { order: 0; min-height: 0; padding: var(--s-7); }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; --header-h: 68px; }
  .brand { font-size: 16px; }
  .brand img { width: 38px; height: 31px; }
  .brand small { font-size: 8px; }
  .film-head h1 { font-size: clamp(30px, 9vw, 40px); }
  .film-actions .button { width: 100%; }

  .player-caption { padding: var(--s-5); }
  .player-controls { flex-wrap: wrap; }
  .player-scene-label { display: none; }
  .player-topbar { padding: var(--s-4); }

  .login-form-side { padding: var(--s-7) var(--s-6); }
  .login-story { padding: var(--s-6); }
  .login-header-actions .back-link { display: none; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}

/* 15. Motion, print, forced colours ======================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .button, .player-btn, .nav-toggle { border: 1px solid ButtonBorder; }
}

@media print {
  .site-header, .player, .nav-toggle, .skip { display: none !important; }
  body { color: #000; background: #fff; }
  .wrap { width: 100%; }
}

[hidden] { display: none !important; }

/* 16. RTL ================================================================= */

/* The application serves 16 locales, some right-to-left. The layout is built
   from flex/grid and logical margins, so only the directional decorations
   need mirroring. */
[dir="rtl"] .button .arrow,
[dir="rtl"] .text-link .arrow { transform: scaleX(-1); }
[dir="rtl"] .button:hover .arrow { transform: scaleX(-1) translateX(2px); }
[dir="rtl"] .nav-divider { padding-left: 0; padding-right: var(--s-7); border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .password-wrap input { padding-right: var(--s-4); padding-left: 76px; }
[dir="rtl"] .password-toggle { right: auto; left: var(--s-1); }