/* =====================================================================
   SchoolEveryWhere — Login · adaptive school theme
   ---------------------------------------------------------------------
   Theme tokens (--t-*, --p-*) are generated per school by js/sew-theme.js
   from the school's own background image. The values below are the
   predefined fallback theme (SEW brand), used until the image is analysed,
   when it cannot be read, or when the artwork has no usable colour.
   The tokens are registered so every change animates smoothly.
   Logical properties throughout, so Arabic (RTL) mirrors automatically.
   ===================================================================== */

@property --t-primary        { syntax: "<color>"; inherits: true; initial-value: #c8102e; }
@property --t-primary-deep   { syntax: "<color>"; inherits: true; initial-value: #9e0c24; }
@property --t-on-primary     { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --t-primary-soft   { syntax: "<color>"; inherits: true; initial-value: #fdecee; }
@property --t-primary-ink    { syntax: "<color>"; inherits: true; initial-value: #b0102a; }
@property --t-secondary      { syntax: "<color>"; inherits: true; initial-value: #3651d1; }
@property --t-secondary-soft { syntax: "<color>"; inherits: true; initial-value: #e8ecff; }
@property --t-canvas         { syntax: "<color>"; inherits: true; initial-value: #f7f5f6; }
@property --t-night          { syntax: "<color>"; inherits: true; initial-value: #2a0f18; }
@property --t-night-2        { syntax: "<color>"; inherits: true; initial-value: #14070c; }
@property --p-ink            { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --p-ink-2          { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .84); }
@property --p-glass          { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .08); }
@property --p-glass-line     { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, .15); }
@property --p-wash-top       { syntax: "<color>"; inherits: true; initial-value: rgba(42, 15, 24, .62); }
@property --p-wash-mid       { syntax: "<color>"; inherits: true; initial-value: rgba(42, 15, 24, .84); }
@property --p-wash-end       { syntax: "<color>"; inherits: true; initial-value: rgba(20, 7, 12, .96); }

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --sew-red: #e5162b;
  --sew-red-deep: #b8102e;
  --sew-coral: #ff6b5b;
  --sew-gold: #ffc24b;
  --sew-blue: #2346b5;
  --sew-blue-bright: #3651d1;
  --sew-navy: #0a2257;
  --sew-night: #061633;

  /* Neutrals: three text levels + surfaces */
  --sew-ink: #0b1b33;
  --sew-ink-2: #46546d;
  --sew-ink-3: #5a6780;
  --sew-surface: #ffffff;
  --sew-canvas: #f4f6fb;
  --sew-field: #f4f6fb;
  --sew-field-line: #e2e7f1;
  --sew-field-hover: #eef1f8;

  /* Feedback */
  --sew-danger: #c81e32;
  --sew-danger-ink: #9e1220;
  --sew-danger-soft: #fdecee;
  --sew-success: #16804a;
  --sew-success-2: #1fa463;

  /* Semantic success stays green whatever the school colour */
  --sew-grad-success: linear-gradient(135deg, var(--sew-success-2), var(--sew-success));

  /* Type */
  --sew-font: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sew-text-xs: 13px;
  --sew-text-sm: 14.5px;
  --sew-text-md: 16px;
  --sew-text-lg: 17px;

  /* Space scale */
  --sew-s1: 4px; --sew-s2: 8px; --sew-s3: 12px; --sew-s4: 16px;
  --sew-s5: 20px; --sew-s6: 24px; --sew-s8: 32px; --sew-s10: 40px;

  /* Radii */
  --sew-r-sm: 10px;
  --sew-r-md: 14px;
  --sew-r-lg: 22px;
  --sew-r-xl: 28px;
  --sew-r-pill: 999px;

  /* Elevation (layered, tinted toward navy, never pure black) */
  --sew-shadow-sm: 0 1px 2px rgba(10, 34, 87, .06), 0 2px 6px -2px rgba(10, 34, 87, .08);
  --sew-shadow-md: 0 2px 4px rgba(10, 34, 87, .04), 0 12px 24px -10px rgba(10, 34, 87, .16);
  --sew-shadow-lg: 0 2px 6px rgba(10, 34, 87, .04), 0 24px 56px -18px rgba(10, 34, 87, .22), 0 48px 96px -40px rgba(10, 34, 87, .18);
  --sew-shadow-art: 0 50px 90px -30px rgba(2, 8, 24, .75), 0 18px 36px -18px rgba(2, 8, 24, .55);

  /* Icon sizes */
  --sew-icon-sm: 16px;
  --sew-icon-md: 18px;
  --sew-icon-lg: 20px;

  /* Motion */
  --sew-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sew-ease-spring: cubic-bezier(.34, 1.36, .64, 1);   /* sheet: slight settle, damping ~0.8 */
  --sew-ease-press: cubic-bezier(.32, .72, 0, 1);
  --sew-fast: 120ms;
  --sew-dur: 240ms;
  --sew-slow: 600ms;

  /* Theme fallback (SEW brand) — overwritten per school by js/sew-theme.js */
  --t-primary: #c8102e;
  --t-primary-deep: #9e0c24;
  --t-on-primary: #ffffff;
  --t-primary-soft: #fdecee;
  --t-primary-ink: #b0102a;
  --t-secondary: #3651d1;
  --t-secondary-soft: #e8ecff;
  --t-canvas: #f7f5f6;
  --t-night: #2a0f18;
  --t-night-2: #14070c;
  --p-ink: #ffffff;
  --p-ink-2: rgba(255, 255, 255, .84);
  --p-glass: rgba(255, 255, 255, .08);
  --p-glass-line: rgba(255, 255, 255, .15);
  --p-wash-top: rgba(42, 15, 24, .62);
  --p-wash-mid: rgba(42, 15, 24, .84);
  --p-wash-end: rgba(20, 7, 12, .96);

  --sew-accent: var(--t-primary);
  --sew-ring: 0 0 0 4px color-mix(in srgb, var(--t-primary) 22%, transparent);
  --px: 0; --py: 0;   /* pointer position for depth, set by JS (-1 … 1) */

  --sew-theme-dur: 900ms;
  transition:
    --t-primary var(--sew-theme-dur) var(--sew-ease-out), --t-primary-deep var(--sew-theme-dur) var(--sew-ease-out),
    --t-on-primary var(--sew-theme-dur) var(--sew-ease-out), --t-primary-soft var(--sew-theme-dur) var(--sew-ease-out),
    --t-primary-ink var(--sew-theme-dur) var(--sew-ease-out), --t-secondary var(--sew-theme-dur) var(--sew-ease-out),
    --t-secondary-soft var(--sew-theme-dur) var(--sew-ease-out), --t-canvas var(--sew-theme-dur) var(--sew-ease-out),
    --t-night var(--sew-theme-dur) var(--sew-ease-out), --t-night-2 var(--sew-theme-dur) var(--sew-ease-out),
    --p-ink var(--sew-theme-dur) var(--sew-ease-out), --p-ink-2 var(--sew-theme-dur) var(--sew-ease-out),
    --p-glass var(--sew-theme-dur) var(--sew-ease-out), --p-glass-line var(--sew-theme-dur) var(--sew-ease-out),
    --p-wash-top var(--sew-theme-dur) var(--sew-ease-out), --p-wash-mid var(--sew-theme-dur) var(--sew-ease-out),
    --p-wash-end var(--sew-theme-dur) var(--sew-ease-out);
}
/* Cached theme painted before first render: no animation */
html.sew-theme-instant { transition: none; }

[dir="rtl"] { --sew-font: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---------- Roles follow the school theme ---------- */
.sew-chip, .sew-door {
  --role: var(--t-primary);
  --role-deep: var(--t-primary-deep);
  --role-soft: var(--t-primary-soft);
  --role-on: var(--t-on-primary);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.sew-login {
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  color: var(--sew-ink);
  font-family: var(--sew-font);
  font-size: var(--sew-text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sew-login img { max-width: 100%; display: block; }

.sew-login a, .sew-login button, .sew-login label, .sew-login input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.sew-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.sew-tm {
  margin-inline-start: .06em;
  font-size: .42em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: .95em;
}
/* in small text the mark needs a larger share of the size to stay legible */
.sew-lede .sew-tm, .sew-main__foot .sew-tm { font-size: .62em; vertical-align: .7em; }

.sew-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---------- Shell ---------- */
.sew-shell {
  overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(480px, 41vw, 640px);
  min-height: 100vh;
  min-height: 100dvh;
}

/* =====================================================================
   VISUAL PANEL
   ===================================================================== */
.sew-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 56px);
  background: var(--t-night);
  color: var(--p-ink);
}

/* Layer 1: the school's own artwork, enlarged and blurred into an atmosphere */
.sew-panel__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.sew-panel__atmos {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  max-width: none !important;
  object-fit: cover;
  filter: blur(44px) saturate(1.5) brightness(.9);
  opacity: .9;
  animation: sew-breathe 26s ease-in-out infinite alternate;
}

/* Layer 2: wash — built from the school palette; dark or light depending on the artwork,
   so the text on top always keeps its contrast */
.sew-panel__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 0% 100%, color-mix(in oklab, var(--t-secondary) 32%, transparent), transparent 70%),
    linear-gradient(165deg, var(--p-wash-top) 0%, var(--p-wash-mid) 50%, var(--p-wash-end) 100%);
}
.sew-panel.is-no-art .sew-panel__atmos { display: none; }
.sew-panel.is-no-art .sew-panel__story { margin-block-start: auto; }

/* Layer 3: two slow light orbs in the school's primary and secondary colours */
.sew-orb {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .38;
  will-change: transform;
}
.sew-orb--one {
  inset-inline-end: -16vmax;
  top: -18vmax;
  background: radial-gradient(circle, var(--sew-accent), transparent 65%);
  animation: sew-orbit-a 22s ease-in-out infinite alternate;
}
.sew-orb--two {
  inset-inline-start: -18vmax;
  bottom: -20vmax;
  background: radial-gradient(circle, var(--t-secondary), transparent 62%);
  opacity: .3;
  animation: sew-orbit-b 26s ease-in-out infinite alternate;
}

/* Layer 4: fine dot grid, faded toward the centre */
.sew-panel__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--p-glass-line) 1px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 55%);
          mask-image: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 55%);
}


/* The artwork, framed and floating */
.sew-panel__art {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(18px, 3vh, 32px) 0;
  perspective: 1400px;
}
.sew-art-card {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--sew-r-lg);
  box-shadow: var(--sew-shadow-art), 0 0 0 1px rgba(255, 255, 255, .16);
  transform: rotateX(calc(var(--py) * -1.5deg)) rotateY(calc(var(--px) * 2deg));
  transform-style: preserve-3d;
  transition: transform 900ms var(--sew-ease-out);
  animation: sew-reveal 1200ms var(--sew-ease-out) 120ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
.sew-panel__art.is-missing { display: none; }
[data-panel="light"] .sew-art-card { box-shadow: 0 40px 70px -34px color-mix(in srgb, var(--t-night) 55%, transparent), 0 0 0 1px var(--p-glass-line); }
/* Coloured glow behind the frame, in the school's primary colour */
.sew-art-card::before {
  content: "";
  position: absolute;
  inset: 12% 8% -6%;
  z-index: -1;
  border-radius: 50%;
  background: var(--sew-accent);
  filter: blur(60px);
  opacity: .45;
}
.sew-art-card img {
  display: block;
  max-height: 60vh;
  border-radius: inherit;
  object-fit: contain;
}

/* Story */
.sew-panel__story { position: relative; z-index: 1; flex: none; max-width: 760px; }

.sew-brandmark {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 22px;
  min-width: 0;
  margin-block-end: 14px;
}

.sew-brandmark__logo {
  --logo: 96px;   /* one size, always square */
  position: relative;
  flex: none;
  display: inline-grid;
  width: var(--logo);
  aspect-ratio: 1 / 1;
  animation: sew-pop-in 900ms var(--sew-ease-spring) 280ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
/* A slow halo of the school's colours behind the logo */
.sew-brandmark__ring {
  position: absolute;
  inset: -10px;
  border-radius: 32px;
  background: conic-gradient(from 0deg, var(--t-primary), var(--t-secondary), color-mix(in srgb, var(--t-primary) 20%, transparent), var(--t-primary));
  filter: blur(14px);
  opacity: .6;
  animation: sew-spin-slow 16s linear infinite;
  pointer-events: none;
}
.sew-brandmark__plate {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 9%;   /* small, even margin around the logo */
  border-radius: 26%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 22px 40px -20px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.sew-brandmark__img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
}
.sew-brandmark__mono { display: none; }
/* No logo (missing or broken): the school's initials on its own colours */
.sew-brandmark__logo.is-empty .sew-brandmark__plate {
  padding: 0;
  background: linear-gradient(135deg, var(--t-primary), var(--t-primary-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 22px 40px -20px rgba(0, 0, 0, .55);
}
.sew-brandmark__logo.is-empty .sew-brandmark__mono {
  display: block;
  color: var(--t-on-primary);
  font-size: calc(var(--logo) * .36);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

/* School name: always one line; JS steps the size down until it fits (never "…") */
.sew-school {
  flex: 1 1 0;   /* width comes from the row, not the text, so shrinking never feeds back */
  min-width: 0;
  margin: 0;
  color: var(--p-ink);
  font-size: clamp(30px, 3.1vw, 54px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  animation: sew-rise 1000ms var(--sew-ease-out) 380ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
.sew-school.is-long  { font-size: clamp(26px, 2.5vw, 42px); }
/* very long names: two lines instead of unreadably small text (never "…") */
.sew-school.is-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
  max-height: 2.32em;
  text-wrap: balance;
}
.sew-school.is-xlong { font-size: clamp(22px, 2vw, 34px); }

.sew-school__rule {
  display: block;
  width: 84px;
  height: 4px;
  margin-block-end: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--t-primary), var(--t-secondary));
  transform-origin: left center;
  animation: sew-draw-x 900ms var(--sew-ease-out) 600ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
[dir="rtl"] .sew-school__rule { transform-origin: right center; }

/* Selected role: only that role's icon is shown, beside its name and description */
.sew-rolecard {
  display: flex;
  align-items: flex-start;
  gap: 0;
  transition: gap 400ms var(--sew-ease-out);
}
.sew-rolecard.has-role { gap: 16px; }

.sew-doors {
  position: relative;
  flex: none;
  width: 0;
  height: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  transition: width 400ms var(--sew-ease-out);
}
.sew-rolecard.has-role .sew-doors { width: 52px; }

.sew-door {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--t-on-primary);
  background: linear-gradient(135deg, var(--t-primary), var(--t-primary-deep));
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--t-primary) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
  pointer-events: none;
  cursor: default;
  user-select: none;
  opacity: 0;
  transform: scale(.6) rotate(-12deg);
  transition: opacity 320ms var(--sew-ease-out), transform 480ms var(--sew-ease-spring);
}
.sew-door .sew-icon { width: 24px; height: 24px; }
.sew-door.is-active { opacity: 1; transform: none; }

.sew-panel__caption {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  max-width: 44ch;
  font-size: var(--sew-text-lg);
  line-height: 1.55;
  color: var(--p-ink-2);
  transition: opacity var(--sew-dur) var(--sew-ease-out), transform var(--sew-dur) var(--sew-ease-out);
  animation: sew-rise 1000ms var(--sew-ease-out) 560ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
.sew-panel__caption.is-leaving { opacity: 0; transform: translateY(6px); }
.sew-panel__role {
  display: block;
  margin-block-end: 2px;
  font-size: 19px;
  font-weight: 700;
  color: var(--p-ink);
}

.sew-panel__curve { display: none; }

/* =====================================================================
   FORM SIDE
   ===================================================================== */
.sew-main {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;   /* card (with logo + guest inside), footer */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px clamp(24px, 3.4vw, 52px) max(22px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--t-canvas) 50%, transparent);   /* form-side background at 50% */
  overflow: hidden;
  isolation: isolate;
}
/* Soft colour fields behind the card; the top one follows the chosen role */
.sew-main::before,
.sew-main::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.sew-main::before { top: -220px; inset-inline-end: -200px; background: var(--t-primary); opacity: .09; }    /* glows at 50% */
.sew-main::after  { bottom: -260px; inset-inline-start: -220px; background: var(--t-secondary); opacity: .07; }

.sew-sheet-handle { display: none; }

.sew-main__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sew-s4);
  margin-block-end: 22px;
  padding-block-end: 18px;
  border-block-end: 1px solid rgba(10, 34, 87, .09);
  animation: sew-rise 700ms var(--sew-ease-out) 80ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
.sew-brand { height: 84px; width: auto; max-width: 46%; object-fit: contain; }

.sew-guest {
  display: inline-flex;
  align-items: center;
  gap: var(--sew-s2);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--sew-r-pill);
  background: var(--sew-surface);
  box-shadow: var(--sew-shadow-sm), inset 0 0 0 1px var(--sew-field-line);
  color: var(--sew-ink);
  font-size: var(--sew-text-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--sew-dur) var(--sew-ease-press), box-shadow var(--sew-dur) var(--sew-ease-out), color var(--sew-dur) var(--sew-ease-out);
}
.sew-guest .sew-icon { color: var(--t-primary-ink); transition: transform var(--sew-dur) var(--sew-ease-spring); }
.sew-guest:hover { color: var(--sew-ink); text-decoration: none; box-shadow: var(--sew-shadow-md), inset 0 0 0 1px var(--sew-field-line); }
.sew-guest:hover .sew-icon { transform: scale(1.12); }
.sew-guest:active { transform: scale(.97); transition-duration: var(--sew-fast); }

.sew-main__body {
  display: grid;
  align-items: center;
  justify-items: center;
  padding-block: clamp(24px, 4vh, 56px);
}

/* The card */
.sew-card {
  position: relative;
  width: min(100%, 476px);
  padding: clamp(28px, 2.8vw, 40px);
  border-radius: var(--sew-r-xl);
  background: #fff;   /* form card: solid white */
  box-shadow: var(--sew-shadow-lg);
  animation: sew-card-in 900ms var(--sew-ease-out) 120ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
.sew-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 28px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--t-primary), var(--t-secondary), var(--t-primary-deep));
}

/* Staggered entrance of the form's parts */
.sew-form > * { animation: sew-rise 760ms var(--sew-ease-out) backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */ }
.sew-form > *:nth-child(1) { animation-delay: 260ms; }
.sew-form > *:nth-child(2) { animation-delay: 300ms; }
.sew-form > *:nth-child(3) { animation-delay: 340ms; }
.sew-form > *:nth-child(4) { animation-delay: 390ms; }
.sew-form > *:nth-child(5) { animation-delay: 440ms; }
.sew-form > *:nth-child(6) { animation-delay: 480ms; }
.sew-form > *:nth-child(7) { animation-delay: 510ms; }
.sew-form > *:nth-child(n+8) { animation-delay: 540ms; }

.sew-form__head { margin-block-end: 28px; }

/* Time-of-day mark next to the greeting */
.sew-greet {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: var(--sew-s2);
}
.sew-greet .sew-title { margin: 0; }

/* Time-of-day mark beside the greeting: themed tile, one line icon */
.sew-daymark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: var(--t-on-primary);
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(255, 255, 255, .28), transparent 55%),
    linear-gradient(140deg, var(--t-primary), var(--t-primary-deep));
  box-shadow:
    0 0 0 5px var(--t-primary-soft),
    0 12px 22px -10px color-mix(in srgb, var(--t-primary) 75%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: sew-pop-in 800ms var(--sew-ease-spring) 240ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
.sew-daymark .sew-icon { width: 26px; height: 26px; stroke-width: 1.8; display: none; }
.sew-daymark[data-time="morning"] .sew-daymark__morning,
.sew-daymark[data-time="afternoon"] .sew-daymark__afternoon,
.sew-daymark[data-time="evening"] .sew-daymark__evening { display: block; }
.sew-daymark:not([data-time]) .sew-daymark__afternoon { display: block; }
.sew-daymark[data-time="afternoon"] .sew-icon { animation: sew-spin-slow 40s linear infinite; }

.sew-title {
  margin: 0 0 var(--sew-s2);
  font-size: clamp(32px, 2.8vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--sew-ink);
  text-wrap: balance;
}
.sew-lede { margin: 0; font-size: var(--sew-text-md); color: var(--sew-ink-2); }

/* ---------- Alert (messages from processed.php) ---------- */
.sew-alert {
  display: flex;
  gap: var(--sew-s3);
  align-items: flex-start;
  margin-block-end: var(--sew-s5);
  padding: 14px 16px;
  border-radius: var(--sew-r-md);
  background: var(--sew-danger-soft);
  box-shadow: inset 0 0 0 1px rgba(200, 30, 50, .14);
  color: var(--sew-danger-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  animation: sew-shake 460ms var(--sew-ease-out) backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
}
.sew-alert::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-block-start: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sew-alert:empty { display: none; }

/* ---------- Fields ---------- */
.sew-field { margin-block-end: var(--sew-s5); }

.sew-label {
  display: block;
  margin-block-end: var(--sew-s2);
  padding: 0;
  font-size: var(--sew-text-sm);
  font-weight: 600;
  color: var(--sew-ink);
}

.sew-control { position: relative; }

.sew-control__tile {
  position: absolute;
  inset-inline-start: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-block-start: -19px;
  border-radius: 11px;
  color: var(--t-primary-ink);
  background: var(--t-primary-soft);
  pointer-events: none;
  transition: color var(--sew-dur) var(--sew-ease-out), background-color var(--sew-dur) var(--sew-ease-out), transform 420ms var(--sew-ease-spring), box-shadow var(--sew-dur) var(--sew-ease-out);
}
.sew-control:focus-within .sew-control__tile {
  color: var(--t-on-primary);
  background: var(--t-primary);
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--t-primary) 80%, transparent);
  transform: scale(1.06) rotate(-6deg);
}

.sew-input,
.sew-identifier input,
.sew-identifier select {
  display: block;
  width: 100%;
  height: 58px;
  margin: 0;
  padding-block: 0;
  padding-inline: 58px var(--sew-s4);
  border: 1.5px solid var(--sew-field-line);
  border-radius: var(--sew-r-md);
  background: var(--sew-field);
  color: var(--sew-ink);
  font: inherit;
  font-size: var(--sew-text-md);
  font-weight: 500;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
  transition: background-color var(--sew-dur) var(--sew-ease-out), border-color var(--sew-dur) var(--sew-ease-out), box-shadow var(--sew-dur) var(--sew-ease-out);
}
.sew-input--password { padding-inline-end: 60px; }
.sew-input::placeholder, .sew-identifier input::placeholder { color: #5f6c84; font-weight: 400; opacity: 1; }
.sew-input:hover, .sew-identifier input:hover { background: var(--sew-field-hover); }
.sew-input:focus, .sew-identifier input:focus, .sew-identifier select:focus {
  background: #fff;
  border-color: var(--t-primary-ink);
  box-shadow: var(--sew-ring);
}
.sew-input:-webkit-autofill {
  -webkit-text-fill-color: var(--sew-ink);
  -webkit-box-shadow: 0 0 0 40px var(--sew-field) inset;
  caret-color: var(--sew-ink);
}

/* Error state after a failed sign-in, cleared on edit */
.sew-control.is-error .sew-input { border-color: var(--sew-danger); background: #fff; }
.sew-control.is-error .sew-control__tile { color: var(--sew-danger); background: var(--sew-danger-soft); }

/* Show / hide password: the original #show-password checkbox (checked = hidden) */
.sew-reveal {
  position: absolute;
  inset-inline-end: 7px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0;
  border-radius: 12px;
  color: var(--sew-ink-3);
  cursor: pointer;
  transition: background-color var(--sew-dur) var(--sew-ease-out), color var(--sew-dur) var(--sew-ease-out);
}
.sew-reveal svg {
  grid-area: 1 / 1;
  transition: opacity 260ms var(--sew-ease-out), transform 360ms var(--sew-ease-spring);
}
.sew-reveal:hover { background: rgba(10, 34, 87, .06); color: var(--sew-ink); }
.sew-reveal:active svg { transform: scale(.88); }
.show-password:focus-visible + .sew-reveal { box-shadow: 0 0 0 2px var(--t-primary-ink); color: var(--sew-ink); }
.show-password:checked + .sew-reveal .sew-reveal__hide,
.show-password:not(:checked) + .sew-reveal .sew-reveal__show { opacity: 0; transform: scale(.6) rotate(-20deg); }

.sew-hint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sew-s1) var(--sew-s3);
  margin: var(--sew-s2) 0 0;
  font-size: var(--sew-text-xs);
  color: var(--sew-ink-3);
}
.sew-hint > span { display: inline-flex; align-items: center; gap: 6px; }
.sew-hint__caps { color: var(--sew-danger-ink); font-weight: 600; animation: sew-pop-in 360ms var(--sew-ease-spring) backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */ }
.sew-hint__caps[hidden] { display: none !important; }

/* ---------- Role chips ---------- */
.sew-roles { min-width: 0; margin: 2px 0 var(--sew-s5); padding: 0; border: 0; }
.sew-roles legend { float: none; width: auto; }

.sew-roles__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sew-s2);
}
/* 2 / 3 / 2: long labels (Management, Bus attendance) get the wide rows */
.sew-chip { position: relative; grid-column: span 3; margin: 0; cursor: pointer; }
.sew-chip:nth-child(3), .sew-chip:nth-child(4), .sew-chip:nth-child(5) { grid-column: span 2; }

.sew-chip__face {
  display: flex;
  align-items: center;
  gap: var(--sew-s2);
  min-height: 50px;
  padding: 0 12px 0 7px;
  border-radius: var(--sew-r-md);
  background: var(--sew-field);
  box-shadow: inset 0 0 0 1.5px transparent;
  color: var(--sew-ink);
  font-size: var(--sew-text-sm);
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--sew-dur) var(--sew-ease-out), color var(--sew-dur) var(--sew-ease-out), box-shadow var(--sew-dur) var(--sew-ease-out), transform var(--sew-dur) var(--sew-ease-press);
}
[dir="rtl"] .sew-chip__face { padding: 0 7px 0 12px; }
.sew-chip__text { min-width: 0; overflow: hidden; }   /* JS shrinks the label to fit; never "…" */
.sew-chip__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--t-primary-ink);
  background: var(--role-soft);
  transition: background-color var(--sew-dur) var(--sew-ease-out), color var(--sew-dur) var(--sew-ease-out), transform 420ms var(--sew-ease-spring);
}

.sew-chip:hover .sew-chip__face { background: #fff; box-shadow: inset 0 0 0 1.5px var(--role-soft), var(--sew-shadow-sm); }
.sew-chip:hover .sew-chip__badge { transform: rotate(-8deg) scale(1.06); }
.sew-chip:active .sew-chip__face { transform: scale(.97); transition-duration: var(--sew-fast); }

.sew-chip input:checked + .sew-chip__face {
  color: var(--role-on);
  background: linear-gradient(135deg, var(--role), var(--role-deep));
  box-shadow: 0 12px 22px -12px var(--role), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.sew-chip input:checked + .sew-chip__face .sew-chip__badge {
  color: var(--role-on);
  background: rgba(255, 255, 255, .22);
  animation: sew-pop-in 420ms var(--sew-ease-spring);
}
.sew-chip input:focus-visible + .sew-chip__face { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--t-primary-ink); }

.sew-roles.is-invalid .sew-chip__face { box-shadow: inset 0 0 0 1.5px rgba(200, 30, 50, .35); }
.sew-roles.is-invalid .sew-roles__list { animation: sew-shake 420ms var(--sew-ease-out); }

.sew-roles__note { display: none; margin: var(--sew-s3) 0 0; font-size: 14px; color: var(--sew-ink-2); }
.sew-roles__note:empty { display: none !important; }

.sew-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sew-s3) 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sew-danger-ink);
}
.sew-field-error::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sew-field-error:empty { display: none; }

/* ---------- Identifier returned by showtxtidentifier.php ---------- */
.sew-identifier { margin-block-end: var(--sew-s5); font-size: var(--sew-text-sm); color: var(--sew-ink-2); animation: sew-rise 500ms var(--sew-ease-out) backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */ }
.sew-identifier:empty { display: none; }
.sew-identifier input, .sew-identifier select { padding-inline: var(--sew-s4); margin-block-start: 6px; }
.sew-identifier .sew-control input.sew-input { padding-inline: 58px var(--sew-s4); margin-block-start: 0; width: 100%; height: 58px; text-align: start; }
.sew-identifier label { display: block; font-weight: 600; color: var(--sew-ink); font-size: var(--sew-text-sm); margin-block-end: var(--sew-s2); }

/* ---------- Remember me / forgot ---------- */
.sew-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sew-s3);
  margin-block-end: var(--sew-s6);
}

.sew-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--sew-ink);
  cursor: pointer;
}
.sew-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; inset-inline-start: 0; }
.sew-check__box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #c3cbdb;
  transition: background-color var(--sew-dur) var(--sew-ease-out), box-shadow var(--sew-dur) var(--sew-ease-out), transform 360ms var(--sew-ease-spring);
}
.sew-check__box svg {
  fill: none; stroke: var(--t-on-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  transition: stroke-dashoffset 320ms var(--sew-ease-out) 60ms;
}
.sew-check:active .sew-check__box { transform: scale(.88); }
.sew-check input:checked + .sew-check__box { background: linear-gradient(135deg, var(--t-primary), var(--t-primary-deep)); box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--t-primary) 80%, transparent); }
.sew-check input:checked + .sew-check__box svg { stroke-dashoffset: 0; }
.sew-check input:focus-visible + .sew-check__box { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--t-primary-ink); }

.sew-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--t-primary-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}
.sew-link .sew-icon { transition: transform 420ms var(--sew-ease-spring); }
.sew-link:hover { color: var(--sew-ink); text-decoration: underline; }
.sew-link:hover .sew-icon { transform: rotate(-20deg); }
.sew-link:focus-visible, .sew-guest:focus-visible { outline: 2px solid var(--t-primary-ink); outline-offset: 3px; border-radius: 8px; }
.sew-guest:focus-visible { border-radius: var(--sew-r-pill); }

/* ---------- Primary action ---------- */
.sew-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sew-s3);
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 70px;
  overflow: hidden;
  border: 0;
  border-radius: var(--sew-r-pill);
  background: linear-gradient(135deg, color-mix(in oklab, var(--t-primary) 88%, #fff) 0%, var(--t-primary) 45%, var(--t-primary-deep) 100%);
  box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--t-primary) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
  color: var(--t-on-primary);
  font: inherit;
  font-size: var(--sew-text-lg);
  font-weight: 700;
  cursor: pointer;
  isolation: isolate;
  transition: transform 260ms var(--sew-ease-press), box-shadow var(--sew-dur) var(--sew-ease-out), filter var(--sew-dur) var(--sew-ease-out);
}
.sew-submit::after {   /* success layer, faded in */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sew-grad-success);
  opacity: 0;
  transition: opacity 400ms var(--sew-ease-out);
}
.sew-submit:hover { transform: translateY(-1px); box-shadow: 0 22px 36px -14px color-mix(in srgb, var(--t-primary) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }
.sew-submit:active { transform: translateY(0) scale(.985); transition-duration: var(--sew-fast); }
.sew-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--t-primary-ink), 0 16px 30px -14px color-mix(in srgb, var(--t-primary) 80%, transparent); }

.sew-submit__shine {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}
.sew-submit:hover .sew-submit__shine { transform: translateX(120%); transition: transform 900ms var(--sew-ease-out); }

.sew-submit__label { transition: opacity 200ms var(--sew-ease-out); }

.sew-submit__arrow {
  position: absolute;
  inset-inline-end: 7px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-block-start: -23px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--t-on-primary) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-on-primary) 22%, transparent);
  transition: transform 420ms var(--sew-ease-spring), background-color var(--sew-dur) var(--sew-ease-out), opacity var(--sew-dur) var(--sew-ease-out);
}
.sew-submit:hover .sew-submit__arrow { transform: translateX(4px); background: color-mix(in srgb, var(--t-on-primary) 24%, transparent); }
[dir="rtl"] .sew-submit__arrow svg { transform: scaleX(-1); }
[dir="rtl"] .sew-submit:hover .sew-submit__arrow { transform: translateX(-4px); }

.sew-submit__state { display: none; place-items: center; }
.sew-submit__state svg { grid-area: 1 / 1; }
.sew-spinner { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 42 100; animation: sew-spin 800ms linear infinite; }
.sew-tick { display: none; stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 24; }

.sew-submit.is-busy, .sew-submit.is-done { cursor: progress; }
.sew-submit.is-busy .sew-submit__state,
.sew-submit.is-done .sew-submit__state { display: inline-grid; }
.sew-submit.is-busy .sew-submit__arrow,
.sew-submit.is-done .sew-submit__arrow { opacity: 0; transform: scale(.6); }
.sew-submit.is-done::after { opacity: 1; }
.sew-submit.is-done { color: #fff; box-shadow: 0 16px 30px -14px rgba(22, 128, 74, .8); }
.sew-submit.is-done .sew-spinner { display: none; }
.sew-submit.is-done .sew-tick { display: block; animation: sew-draw 420ms var(--sew-ease-out) forwards; }
.sew-submit:disabled { opacity: 1; }

/* ---------- Footer ---------- */
.sew-main__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  font-size: var(--sew-text-xs);
  color: var(--sew-ink-3);
  text-align: center;
}
.sew-main__foot-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--t-primary); }

/* ---------- RTL ---------- */
[dir="rtl"] .sew-school,
[dir="rtl"] .sew-title,
[dir="rtl"] .sew-panel__role { letter-spacing: 0; line-height: 1.25; }
[dir="rtl"] .sew-control:focus-within .sew-control__tile { transform: scale(1.06) rotate(6deg); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (min-width: 1024px) {
  /* The school-coloured background spans the full width; the white form card floats on it */
  body.sew-login { background: var(--t-night); }
  .sew-panel__bg { position: fixed; inset: 0; }
  .sew-main { background: transparent; }
  .sew-main::before, .sew-main::after { display: none; }
  .sew-brand { height: 60px; }
  .sew-main__foot { color: var(--p-ink-2); }

  /* Guest button: 80% white glass to match the card */
  .sew-guest {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
            backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 10px 24px -14px rgba(2, 8, 24, .5), inset 0 0 0 1px rgba(255, 255, 255, .55);
  }
  .sew-guest:hover { background: rgba(255, 255, 255, .92); box-shadow: 0 14px 28px -14px rgba(2, 8, 24, .55), inset 0 0 0 1px rgba(255, 255, 255, .7); }

  /* ---- Floating form card: 80% white glass ---- */
  .sew-card {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
            backdrop-filter: blur(22px) saturate(1.4);
    animation:
      sew-card-in 900ms var(--sew-ease-out) 120ms both,
      sew-levitate 7s ease-in-out 1.1s infinite alternate;
    transition: translate 500ms var(--sew-ease-out), box-shadow 500ms var(--sew-ease-out);
    box-shadow:
      0 2px 6px rgba(2, 8, 24, .06),
      0 30px 60px -24px rgba(2, 8, 24, .45),
      0 60px 120px -50px color-mix(in srgb, var(--t-primary) 55%, transparent);
  }
  /* soft shadow on the "ground" that tightens as the card rises */
  .sew-card::after {
    content: "";
    position: absolute;
    inset-inline: 12%;
    bottom: -34px;
    z-index: -1;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(2, 8, 24, .45), transparent);
    filter: blur(6px);
    animation: sew-ground 7s ease-in-out 1.1s infinite alternate;
    pointer-events: none;
  }
  .sew-card:hover {
    box-shadow:
      0 2px 6px rgba(2, 8, 24, .06),
      0 40px 70px -24px rgba(2, 8, 24, .5),
      0 70px 130px -50px color-mix(in srgb, var(--t-primary) 65%, transparent);
  }
  /* hold still while the pointer is on the card or someone is filling it in */
  .sew-card:hover, .sew-card:hover::after,
  .sew-card:focus-within,
  .sew-card:focus-within::after { animation-play-state: paused; }

  /* On the glass, secondary text uses the full ink so it stays readable on any school colour */
  .sew-card .sew-lede,
  .sew-card .sew-hint { color: var(--sew-ink); }
  .sew-card .sew-hint { font-weight: 500; }
  .sew-card .sew-link { color: var(--sew-ink); text-decoration: underline; text-decoration-color: var(--t-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .sew-card .sew-link .sew-icon { color: var(--t-primary-ink); }
  .sew-card .sew-link:hover { text-decoration-color: var(--sew-ink); }

  /* light travelling along the coloured stripe */
  .sew-card::before {
    background-image: linear-gradient(90deg, var(--t-primary), var(--t-secondary), var(--t-primary));
    background-size: 220% 100%;
    animation: sew-stripe 6s linear infinite;
  }

  .sew-shell { grid-template-columns: minmax(0, 1fr) clamp(440px, 36vw, 600px); }
  .sew-panel { padding: clamp(20px, 2.2vw, 36px); }
  .sew-panel__art { flex: 1 1 0; margin: 0 0 clamp(16px, 2.4vh, 26px); }

  .sew-panel__story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    max-width: none;
  }
  .sew-brandmark { margin: 0; }
  .sew-school__rule { display: none; }

  /* selected role sits at the end of the same row: no extra height, no layout shift */
  .sew-rolecard { align-items: center; max-width: 280px; }
  .sew-rolecard:not(.has-role) { display: none; }
  .sew-doors, .sew-rolecard.has-role .sew-doors { width: 46px; height: 46px; }
  .sew-door { border-radius: 14px; }
  .sew-door .sew-icon { width: 22px; height: 22px; }
  #sewRoleStoryText {
    display: block;
    font-size: 14px;
    line-height: 1.4;
  }
  .sew-panel__role { font-size: 17px; margin: 0; }
}

@media (min-width: 1680px) {
  .sew-card { width: min(100%, 500px); }
}

@media (min-width: 1024px) and (max-width: 1365.98px) {
  .sew-brand { height: 54px; }
  .sew-guest { padding: 0 14px; }
  .sew-brandmark__logo { --logo: 84px; }
}

@media (min-width: 1024px) and (max-height: 1040px) {
  .sew-main { padding-block: 16px; }
  .sew-main__body { padding-block: 16px; }
  .sew-card { padding: 26px 30px; }
  .sew-brand { height: 54px; }
  .sew-daymark { width: 44px; height: 44px; border-radius: 14px; }
  .sew-daymark .sew-icon { width: 24px; height: 24px; }
  .sew-form__head { margin-block-end: 20px; }
  .sew-title { font-size: 32px; }
  .sew-field { margin-block-end: 14px; }
  .sew-input { height: 52px; }
  .sew-chip__face { min-height: 46px; }
  .sew-chip__badge { width: 30px; height: 30px; }
  .sew-roles { margin-block-end: 14px; }
  .sew-row { margin-block-end: 16px; }
  .sew-submit { height: 56px; }
  .sew-brandmark__logo { --logo: 84px; }
}

/* ---------- Tablet & phone: full-width hero image, form as a bottom sheet ---------- */
@media (max-width: 1023.98px) {
  .sew-shell { grid-template-columns: 1fr; }

  .sew-panel {
    position: relative;
    z-index: 1;
    height: auto;
    padding: 0 0 80px;
    overflow: hidden;
  }

  /* The school's image as a real hero: edge to edge, about half the screen (height set by JS) */
  .sew-panel__art { flex: none; display: block; margin: 0; perspective: none; }
  .sew-art-card {
    display: block;
    width: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: sew-hero-in 1100ms var(--sew-ease-out) backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
  }
  .sew-art-card::before { display: none; }
  /* fades into the panel so the name sits on calm ground */
  .sew-art-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .16) 0%, transparent 18%),
      linear-gradient(to bottom, transparent 84%, var(--p-wash-end) 100%);
    pointer-events: none;
  }
  .sew-art-card img {
    width: 100% !important;
    height: clamp(300px, 40svh, 480px);
    max-height: none;
    border-radius: 0;
    object-fit: cover;
    object-position: center 42%;
  }
  [data-panel="light"] .sew-art-card { box-shadow: none; }

  .sew-panel__story {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin-block-start: 20px;
    padding-inline: 32px;
  }
  .sew-brandmark { gap: 18px; margin-block-end: 12px; }
  .sew-brandmark__logo { --logo: 80px; }
  .sew-brandmark__ring { inset: -8px; border-radius: 26px; }
  .sew-school { font-size: clamp(28px, 5.4vw, 44px); }
  .sew-school.is-long { font-size: clamp(24px, 4.4vw, 36px); }
  .sew-school.is-xlong { font-size: clamp(21px, 3.6vw, 30px); }
  .sew-school__rule { margin-block-end: 0; }

  /* Selected role: a small badge on the logo's corner (no layout shift while choosing) */
  .sew-rolecard { position: absolute; inset-block-start: calc(var(--logo, 80px) - 26px); inset-inline-start: calc(32px + var(--logo, 80px) - 26px); gap: 0 !important; z-index: 3; }
  .sew-panel__story { --logo: 80px; }
  .sew-panel__caption { display: none; }
  .sew-doors, .sew-rolecard.has-role .sew-doors { width: 36px; height: 36px; }
  .sew-door { border-radius: 12px; box-shadow: 0 0 0 3px var(--p-wash-end), 0 10px 18px -8px color-mix(in srgb, var(--t-primary) 80%, transparent); }
  .sew-door .sew-icon { width: 19px; height: 19px; }

  /* The curve belongs to the hero: the sheet grows out of it */
  .sew-panel__curve {
    display: block;
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    width: 100%;
    height: 56px;
    fill: var(--t-canvas);
    filter: drop-shadow(0 -10px 18px rgba(2, 8, 24, .28));
    animation: sew-sheet-up 900ms var(--sew-ease-spring) 250ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
  }

  .sew-main {
    --sew-field: #fff;
    --sew-field-hover: #fff;
    z-index: 2;
    min-height: 0;
    padding: 0 32px max(28px, env(safe-area-inset-bottom));
    background: var(--t-canvas);
    overflow: visible;
    animation: sew-sheet-up 900ms var(--sew-ease-spring) 250ms backwards;   /* backwards, not both: a held fill freezes inline font-size in Chromium */
  }
  .sew-main::after { display: none; }

  .sew-sheet-handle {
    display: block;
    position: absolute;
    top: -30px;
    inset-inline-start: 50%;
    width: 44px;
    height: 5px;
    margin-inline-start: -22px;
    border-radius: var(--sew-r-pill);
    background: color-mix(in srgb, var(--t-primary) 45%, var(--t-canvas));
  }
  /* A soft wash of the school's colour at the top of the sheet */
  .sew-main::before {
    display: block;
    top: -40px;
    inset-inline: -10%;
    inset-inline-end: auto;
    width: 120%;
    height: 220px;
    border-radius: 0 0 50% 50%;
    background: var(--t-primary);
    opacity: .08;
    filter: blur(40px);
  }
  [dir="rtl"] .sew-sheet-handle { margin-inline-start: -22px; }

  .sew-main__bar,
  .sew-card { width: min(100%, 560px); margin-inline: auto; }
  .sew-main__bar { padding-block-start: 4px; margin-block-end: 20px; }
  .sew-brand { height: 76px; }
  .sew-main__body { padding-block: 10px 32px; }

  /* On the sheet the card is the sheet itself */
  .sew-card { padding: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
  .sew-card::before { display: none; }
  .sew-roles__note { display: block; }
}

@media (max-width: 599.98px) {
  .sew-panel { padding: 0 0 70px; }
  .sew-art-card img { height: clamp(250px, 38svh, 400px); }

  /* Guest: icon-only round button on phones (its text stays available to screen readers) */
  .sew-guest { width: 46px; height: 46px; min-height: 46px; padding: 0; justify-content: center; border-radius: 50%; }
  .sew-guest .sew-icon { width: 20px; height: 20px; }
  .sew-guest span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .sew-panel__story { --logo: 64px; margin-block-start: 16px; padding-inline: 20px; }
  .sew-brandmark { gap: 14px; }
  .sew-brandmark__logo { --logo: 64px; }
  .sew-brandmark__ring { inset: -6px; border-radius: 22px; filter: blur(10px); }
  .sew-school { font-size: clamp(22px, 6.6vw, 30px); }
  .sew-school.is-long { font-size: clamp(19px, 5.4vw, 24px); }
  .sew-school.is-xlong { font-size: clamp(17px, 4.6vw, 20px); }
  .sew-school__rule { width: 64px; }
  .sew-rolecard { inset-inline-start: calc(20px + var(--logo) - 24px); inset-block-start: calc(var(--logo) - 24px); }
  .sew-doors, .sew-rolecard.has-role .sew-doors { width: 32px; height: 32px; }
  .sew-door .sew-icon { width: 17px; height: 17px; }
  .sew-panel__curve { height: 44px; }
  .sew-sheet-handle { top: -24px; }

  .sew-main { padding: 0 20px max(24px, env(safe-area-inset-bottom)); }
  .sew-main__body { padding-block: 8px 28px; }
  .sew-brand { height: 60px; }
  .sew-guest { font-size: 14px; }

  .sew-greet { gap: 12px; }
  .sew-daymark { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 0 0 4px var(--t-primary-soft), 0 10px 18px -10px color-mix(in srgb, var(--t-primary) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
  .sew-daymark .sew-icon { width: 23px; height: 23px; }
  .sew-form__head { margin-block-end: 22px; }
  .sew-title { font-size: 30px; }
  .sew-lede { font-size: 15.5px; }

  .sew-chip__face { gap: 6px; padding: 0 8px 0 6px; font-size: 13px; min-height: 46px; }
  [dir="rtl"] .sew-chip__face { padding: 0 6px 0 8px; }
  .sew-chip__badge { width: 30px; height: 30px; border-radius: 9px; }
  .sew-chip__badge .sew-icon { width: 15px; height: 15px; }
  .sew-row { margin-block-end: 20px; }
}

@media (max-width: 419.98px) {
  .sew-chip:nth-child(3) .sew-chip__face,
  .sew-chip:nth-child(4) .sew-chip__face,
  .sew-chip:nth-child(5) .sew-chip__face { flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 8px 4px; font-size: 12px; }
  .sew-chip__face { font-size: 12.5px; }
  .sew-chip__badge { width: 28px; height: 28px; }
  .sew-chip__badge .sew-icon { width: 14px; height: 14px; }
}

@media (max-width: 359.98px) {
  .sew-brand { height: 54px; }
  .sew-chip__face { font-size: 11.5px; gap: 4px; padding: 0 5px 0 4px; }
  [dir="rtl"] .sew-chip__face { padding: 0 4px 0 5px; }
  .sew-chip:nth-child(3) .sew-chip__face,
  .sew-chip:nth-child(4) .sew-chip__face,
  .sew-chip:nth-child(5) .sew-chip__face { font-size: 11.5px; padding: 8px 4px; }
  .sew-chip__badge { width: 24px; height: 24px; border-radius: 7px; }
  .sew-chip__badge .sew-icon { width: 13px; height: 13px; }
}

/* =====================================================================
   MOTION LIBRARY
   ===================================================================== */
@keyframes sew-rise     { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sew-card-in  { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sew-pop-in   { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes sew-sheet-up { from { transform: translateY(70px); } to { transform: none; } }
@keyframes sew-levitate { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes sew-ground   { from { opacity: .9; scale: 1; } to { opacity: .45; scale: .86; } }
@keyframes sew-stripe   { from { background-position: 0% 0; } to { background-position: 220% 0; } }
@keyframes sew-hero-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes sew-reveal {
  from { opacity: 0; clip-path: inset(14% 10% 14% 10% round 22px); scale: .94; }
  to   { opacity: 1; clip-path: inset(0 0 0 0 round 0); scale: 1; }
}
@keyframes sew-breathe  { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-2%, 1.5%, 0); } }
@keyframes sew-orbit-a  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-6vmax, 5vmax, 0); } }
@keyframes sew-orbit-b  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(5vmax, -4vmax, 0); } }
@keyframes sew-draw-x   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sew-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes sew-spin      { to { transform: rotate(360deg); } }
@keyframes sew-spin-slow { to { transform: rotate(360deg); } }
@keyframes sew-draw      { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sew-card, .sew-card::after, .sew-card::before { animation: none !important; }
  :root { --px: 0 !important; --py: 0 !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .sew-spinner { animation: sew-spin 1.6s linear infinite !important; }
}

/* =====================================================================
   FORGOTTEN-PASSWORD PAGE (sendpassword.php) — same shell as the login page
   ===================================================================== */
/* Heading mark: a single key instead of the time-of-day icons */
.sew-daymark--key .sew-icon { display: block; transform: rotate(-8deg); }

/* Label with the "Use Email / Use Mobile" switch on the same row */
.sew-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sew-s3);
  margin-block-end: var(--sew-s2);
}
.sew-label-row .sew-label { margin: 0; min-width: 0; }
.sew-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--sew-r-pill);
  background: var(--t-primary-soft);
  color: var(--t-primary-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--sew-dur) var(--sew-ease-out), color var(--sew-dur) var(--sew-ease-out), transform var(--sew-dur) var(--sew-ease-press);
}
/* the swap arrows sit in ::before because the original script rewrites the link's text */
.sew-switch::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3.5-3.5M20 16H6l3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sew-switch:hover, .sew-switch:focus-visible { background: var(--t-primary); color: var(--t-on-primary); text-decoration: none; }
.sew-switch:focus-visible { outline: none; box-shadow: var(--sew-ring); }
.sew-switch:active { transform: scale(.96); }

/* One field, two inputs: the icon follows whichever input the original toggle shows */
.sew-contact__email { display: none; }
.sew-control[data-mode="email"] .sew-contact__mobile { display: none; }
.sew-control[data-mode="email"] .sew-contact__email { display: block; }
#mobileField { letter-spacing: .02em; }

/* Messages from the page, shown inside the card */
.sew-result:empty { display: none; }
.sew-result { margin-block-end: var(--sew-s5); }
.sew-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--sew-s3);
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--sew-r-md);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
  animation: sew-rise 500ms var(--sew-ease-out) backwards;
}
.sew-msg strong { font-weight: 600; }
.sew-msg__icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-block-start: -1px; }
.sew-msg__icon .sew-icon { stroke-width: 2.2; }
.sew-msg--success { background: #e8f6ee; color: #0f5e36; box-shadow: inset 0 0 0 1px rgba(22, 128, 74, .18); }
.sew-msg--error   { background: var(--sew-danger-soft); color: var(--sew-danger-ink); box-shadow: inset 0 0 0 1px rgba(200, 30, 50, .14); animation-name: sew-shake; }
.sew-msg--info    { background: var(--t-primary-soft); color: var(--sew-ink); box-shadow: inset 0 0 0 1px var(--sew-field-line); }
/* Without the script, the messages stay at the bottom of the page: keep them readable there */
body.sew-page-recover > .alert {
  position: fixed;
  inset-inline: 16px;
  inset-block-end: 16px;
  z-index: 50;
  max-width: 520px;
  margin-inline: auto;
  padding: 14px 16px;
  border-radius: var(--sew-r-md);
  background: #fff;
  color: var(--sew-ink);
  box-shadow: var(--sew-shadow-md);
}

/* Reassurance line under the button */
.sew-recover-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--sew-s4) 0 0;
  color: var(--sew-ink-2);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.sew-recover-foot .sew-icon { flex: none; color: var(--t-primary-ink); }

/* Back to sign in: arrow nudges toward the way back */
.sew-back:hover .sew-icon { transform: translateX(-3px); }
[dir="rtl"] .sew-back .sew-icon { transform: scaleX(-1); }
[dir="rtl"] .sew-back:hover .sew-icon { transform: scaleX(-1) translateX(-3px); }


/* ---- Pages without the school photo (sendpassword.php): the panel is colour, logo and name only ---- */
.sew-no-art .sew-panel__art,
.sew-no-art .sew-panel__atmos { display: none !important; }
.sew-no-art .sew-panel { justify-content: center; }
.sew-no-art .sew-panel__story { margin-block: auto; }
@media (min-width: 1024px) {
  .sew-no-art .sew-panel__story {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }
  .sew-no-art .sew-brandmark { flex-direction: column; align-items: flex-start; gap: 26px; width: 100%; }
  .sew-no-art .sew-brandmark__logo { --logo: 132px; }
  .sew-no-art .sew-school { flex: none; width: 100%; font-size: clamp(34px, 3.4vw, 56px); }
  .sew-no-art .sew-school.is-long  { font-size: clamp(30px, 2.9vw, 48px); }
  .sew-no-art .sew-school.is-xlong { font-size: clamp(26px, 2.3vw, 38px); }
  .sew-no-art .sew-school__rule { display: block; margin: 0; }
}
@media (max-width: 1023.98px) {
  .sew-no-art .sew-panel { padding-block-start: max(36px, calc(env(safe-area-inset-top) + 24px)); }
}

/* ---------- Account type: one dropdown instead of seven chips ---------- */
.sew-roles.sew-field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.sew-select {
  cursor: pointer;
  padding-inline-end: 48px;
  text-overflow: clip;
}
.sew-select:invalid, .sew-control--select:not(.has-value) .sew-select { color: #5f6c84; font-weight: 400; }
.sew-select option { color: var(--sew-ink); font-weight: 500; }
.sew-select__chevron {
  position: absolute;
  inset-inline-end: 18px;
  top: 50%;
  margin-block-start: -9px;
  fill: none;
  stroke: var(--sew-ink-2);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: transform var(--sew-dur) var(--sew-ease-out);
}
.sew-control--select:focus-within .sew-select__chevron { stroke: var(--t-primary-ink); }
.sew-control--select.has-value .sew-control__tile { color: var(--t-on-primary); background: var(--t-primary); }
.sew-roles.is-invalid .sew-select { border-color: var(--sew-danger); background: #fff; }
.sew-roles.is-invalid .sew-control__tile { color: var(--sew-danger); background: var(--sew-danger-soft); }
.sew-roles.is-invalid .sew-control--select { animation: sew-shake 420ms var(--sew-ease-out); }
.sew-roles .sew-roles__note { margin-block-start: var(--sew-s2); }

/* ---------- Short desktop screens: the whole form fits without scrolling ---------- */
@media (min-width: 1024px) and (max-height: 1040px) {
  .sew-main { padding-block: 10px; }
  .sew-main__body { padding-block: 8px; }
  .sew-card { padding: 20px 26px; }
  .sew-main__bar { padding-block-end: 12px; margin-block-end: 14px; }
  .sew-brand { height: 46px; }
  .sew-guest { min-height: 40px; }
  .sew-form__head { margin-block-end: 14px; }
  .sew-daymark { width: 38px; height: 38px; border-radius: 12px; }
  .sew-daymark .sew-icon { width: 21px; height: 21px; }
  .sew-title { font-size: 27px; margin-block-end: 4px; }
  .sew-lede { font-size: 14.5px; }
  .sew-field, .sew-roles { margin-block-end: 10px; }
  .sew-label { margin-block-end: 5px; font-size: 13.5px; }
  .sew-input, .sew-identifier .sew-control input.sew-input { height: 46px; }
  .sew-control__tile { width: 34px; height: 34px; margin-block-start: -17px; border-radius: 10px; }
  .sew-input { padding-inline-start: 52px; }
  .sew-hint { margin-block-start: 5px; font-size: 12.5px; }
  .sew-identifier { margin-block-end: 10px; }
  .sew-row { margin-block-end: 12px; }
  .sew-submit { height: 50px; }
  .sew-alert { padding: 10px 12px; margin-block-end: 10px; font-size: 14px; }
  .sew-main__foot { font-size: 12px; padding-block: 2px; }
}
@media (min-width: 1024px) and (max-height: 640px) {
  .sew-card { padding: 16px 24px; }
  .sew-main__bar { padding-block-end: 10px; margin-block-end: 10px; }
  .sew-brand { height: 40px; }
  .sew-form__head { margin-block-end: 10px; }
  .sew-title { font-size: 24px; }
  .sew-lede { font-size: 13.5px; }
  .sew-input, .sew-identifier .sew-control input.sew-input { height: 42px; }
  .sew-control__tile { width: 30px; height: 30px; margin-block-start: -15px; }
  .sew-input { padding-inline-start: 46px; }
  .sew-field, .sew-roles { margin-block-end: 8px; }
  .sew-row { margin-block-end: 10px; }
  .sew-submit { height: 46px; }
}

/* Lets the script notice when the browser fills in a saved username/password */
@keyframes sew-autofill { from { outline-offset: 0px; } to { outline-offset: 0px; } }
input:-webkit-autofill { animation: sew-autofill 10ms !important; }


/* =====================================================================
   FORM HEADER: larger SchoolEveryWhere logo, proportions locked.
   When the row is too narrow for the logo AND the full "Continue as guest"
   button, the button becomes a small round icon (sew-login.js adds .is-compact)
   and the logo keeps its size.
   ===================================================================== */
.sew-main__bar .sew-brand {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  aspect-ratio: 841 / 328;
  object-fit: contain;
}
.sew-main__bar .sew-guest { flex: 0 0 auto; }
@media (min-width: 1024px) { .sew-main__bar .sew-brand { height: 86px; } }
@media (min-width: 1024px) and (max-height: 1040px) { .sew-main__bar .sew-brand { height: 78px; } }
@media (min-width: 1024px) and (max-height: 640px) { .sew-main__bar .sew-brand { height: 68px; } }
@media (min-width: 600px) and (max-width: 1023.98px) { .sew-main__bar .sew-brand { height: 92px; } }
@media (max-width: 599.98px) { .sew-main__bar .sew-brand { height: 74px; } }

.sew-main__bar.is-compact .sew-guest { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.sew-main__bar.is-compact .sew-guest .sew-icon { width: 19px; height: 19px; }
.sew-main__bar.is-compact .sew-guest span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* =====================================================================
   PERFORMANCE (smooth dropdown on computers without a graphics card)
   ===================================================================== */
/* While someone is filling in the form, the decorative background holds still */
.sew-calm .sew-panel__atmos,
.sew-calm .sew-orb,
.sew-calm .sew-card,
.sew-calm .sew-card::before,
.sew-calm .sew-card::after,
.sew-calm .sew-panel *,
.sew-calm .sew-panel *::before,
.sew-calm .sew-daymark .sew-icon { animation-play-state: paused !important; }
/* never hold the role description: it must always be readable */
.sew-calm .sew-panel__caption, .sew-calm .sew-rolecard, .sew-calm .sew-door { animation-play-state: running !important; }
/* light mode removes animations, so nothing waits for an entrance fade */
.sew-lite .sew-panel__caption { opacity: 1; }

/* Light mode: same look, nothing moving, no live blur behind the card */
.sew-lite .sew-panel__atmos,
.sew-lite .sew-orb,
.sew-lite .sew-card,
.sew-lite .sew-card::before,
.sew-lite .sew-card::after,
.sew-lite .sew-panel *,
.sew-lite .sew-panel *::before,
.sew-lite .sew-daymark .sew-icon { animation: none !important; }
.sew-lite .sew-orb { display: none; }
.sew-lite .sew-panel__atmos { filter: blur(24px) saturate(1.4) brightness(.9); }
.sew-lite .sew-art-card { transform: none !important; transition: none; }
.sew-lite .sew-card,
.sew-lite .sew-guest {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
@media (min-width: 1024px) {
  .sew-lite .sew-card { background: rgba(255, 255, 255, .96); }
  .sew-lite .sew-guest { background: rgba(255, 255, 255, .94); }
}

/* The card's column keeps to the screen width (it used to grow to fit its content and spill
   off the right edge); the header then sees when it is tight and the guest button goes compact. */
.sew-main__body { grid-template-columns: minmax(0, 1fr); }
.sew-card { min-width: 0; max-width: 100%; }
.sew-main__bar { min-width: 0; }
/* narrower laptop column: keep the logo large but leave room for the form */
@media (min-width: 1024px) and (max-width: 1365.98px) { .sew-main__bar .sew-brand { height: 70px; } }
@media (min-width: 1024px) and (max-width: 1365.98px) and (max-height: 640px) { .sew-main__bar .sew-brand { height: 62px; } }
/* Remember me + Forgotten password stay on one line on desktop (text shrinks a little if needed) */
@media (min-width: 1024px) {
  .sew-row { flex-wrap: nowrap; gap: var(--sew-s2); }
  .sew-row > * { white-space: nowrap; min-width: 0; }
}