/* ============================================================================
   QUICK WITH US — UNIVERSAL THEME
   ----------------------------------------------------------------------------
   Extracted from PROTOTYPE_Unit01_Galaxy.html so the platform and the books
   speak the same language.

   Load ONCE, after Tailwind, in layouts/app.blade.php:
       <link rel="stylesheet" href="{{ asset('css/theme.css') }}?v=1">
   Bump ?v= when you edit this file, to bust the browser cache.

   Structure
     1 · Tokens — dark (default)
     2 · Tokens — light
     3 · Role identity (student / teacher / admin)
     4 · Sky — stars, embers, background
     5 · Layout — shell, rail, panels
     6 · Hero + station crest
     7 · Nav — glass strip, tabs, theme button
     8 · Components — stats, rows, pills, tags, rings, inputs
     9 · Forms (Breeze partial overrides)
    10 · Motion + accessibility
   ========================================================================== */


/* ============================================================================
   1 · TOKENS — DARK (default)
   ========================================================================== */
:root,
[data-theme="dark"]{
  /* Shabnam sits second in both stacks, not because the site is Persian but
     because font fallback is per character: Latin still gets Fraunces and
     Manrope, and any Persian glyph - a student's name in an English admin
     page, the word فارسی on the language switch - gets the face we chose
     rather than whatever the machine happens to have. */
  --serif:"Fraunces", "Shabnam", Georgia, "Times New Roman", Cambria, serif;
  --sans:"Manrope", "Shabnam", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Persian. Shabnam is the only Persian face served from public/fonts. */
  --fa:"Shabnam", "Vazirmatn", Tahoma, sans-serif;
  /* the Latin stacks under their own names, for the few things that stay
     Latin whatever language the page is in - the wordmark, chiefly */
  --serif-latin:"Fraunces", Georgia, "Times New Roman", Cambria, serif;
  --sans-latin:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* surfaces */
  --bg:#0A0D12;
  --panel:#161C27;
  --panel-2:#11161F;
  --line:#232C3A;
  --hair:rgba(255,255,255,.06);
  --paper:#EAF0F7;
  --dim:#7C889B;
  --dim2:#94A2B5;

  --surf-1:rgba(255,255,255,.04);
  --surf-2:rgba(255,255,255,.055);
  --well:rgba(10,13,18,.55);

  /* ink on bright accents */
  --ink-on:#0A0D12;
  --on-warm:#241804;

  /* accents */
  --yellow:#FBC02D;
  --ember:#FF8A3D;
  --teal:#00BFA5;
  --teal-light:#4DD8C4;
  --pink:#FF4D8D;
  --green:#5BD16A;
  --purple:#B388FF;
  --red:#FF6B6B;
  --amber:#FBC02D;
  --mark:#FBC02D;

  /* tinted wells */
  --yellow-soft:#2C2007;
  --teal-soft:#072723;
  --pink-soft:#2A1020;
  --green-soft:#0D2916;
  --purple-soft:#1B1430;
  --red-soft:#2B1014;

  /* depth + glow */
  --shadow-card:0 18px 44px rgba(0,0,0,.45);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.03);
  --glow-teal:0 0 26px rgba(0,191,165,.30);
  --glow-teal-soft:0 0 22px rgba(0,191,165,.14);
  --glow-ember:0 0 20px rgba(255,138,61,.30);
  --glow-green:0 0 22px rgba(91,209,106,.14);
  --glow-pink:0 0 16px rgba(255,77,141,.35);

  /* the sky */
  --sky:
    radial-gradient(90% 55% at 50% 108%, rgba(255,138,61,.20) 0%, transparent 62%),
    radial-gradient(70% 45% at 50% -6%,  rgba(0,191,165,.13) 0%, transparent 70%);
  --stars-op:.5;
  --ember-op:1;
  --ember-dot:#FF8A3D;
  --ember-dot2:#FBC02D;
  --ember-shadow:none;

  /* the hero */
  --hero-bg:
    radial-gradient(120% 100% at 50% -20%, rgba(0,191,165,.16) 0%, transparent 58%),
    radial-gradient(90% 70% at 50% 118%,  rgba(255,138,61,.26) 0%, transparent 66%),
    linear-gradient(180deg,#0C1017 0%, #0A0D12 100%);
  --hero-edge:rgba(255,138,61,.14);

  /* the station crest */
  --crest-bg:linear-gradient(160deg,#3A2708,#241804);
  --crest-border:#FBC02D;
  --crest-ink:#FBC02D;
  --crest-glow:0 0 0 1px rgba(251,192,45,.25), 0 0 34px rgba(255,138,61,.45);
  --crest-cap:rgba(255,138,61,.80);

  /* glass bars */
  --bar-glass:rgba(10,13,18,.74);

  /* selected states */
  --sel-bg:linear-gradient(160deg,#0F3A34,#0B2B27);
  --sel-ink:#4DD8C4;

  /* the trail rail */
  --rail:linear-gradient(180deg, rgba(0,191,165,.55), rgba(255,138,61,.65) 55%, rgba(251,192,45,.30));
  --rail-op:.55;

  --locked-bg:#1E2632;
  --locked-ink:#4E5A6C;
}


/* ============================================================================
   2 · TOKENS — LIGHT (the sun button)
   Warm paper, never white — the dark-mode brights die on white.
   ========================================================================== */
[data-theme="light"]{
  --bg:#F0E7D5;
  --panel:#FAF5EA;
  --panel-2:#FFFDF7;
  --line:#DACEB4;
  --hair:rgba(42,38,32,.10);
  --paper:#2A2620;
  --dim:#6A6455;
  --dim2:#59544A;

  --surf-1:rgba(42,38,32,.045);
  --surf-2:#FFFFFF;
  --well:#FFFFFF;

  --ink-on:#FFFFFF;
  --on-warm:#2A1608;

  --yellow:#FBC02D;
  --ember:#D9520A;
  --teal:#00897B;
  --teal-light:#4DB6AC;
  --pink:#E91E63;
  --green:#43A047;
  --purple:#6A1B9A;
  --red:#E53935;
  --amber:#FBC02D;
  --mark:#B8862B;

  --yellow-soft:#FFF4C2;
  --teal-soft:#E0F2F1;
  --pink-soft:#FCE4EC;
  --green-soft:#DCEDC8;
  --purple-soft:#EDE7F6;
  --red-soft:#FFEBEE;

  --shadow-card:0 10px 26px rgba(110,85,30,.10);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.75);
  --glow-teal:0 6px 18px rgba(0,137,123,.20);
  --glow-teal-soft:0 4px 14px rgba(0,137,123,.12);
  --glow-ember:0 6px 18px rgba(217,82,10,.18);
  --glow-green:0 4px 14px rgba(67,160,71,.14);
  --glow-pink:0 4px 14px rgba(233,30,99,.20);

  --sky:
    radial-gradient(90% 55% at 50% 108%, rgba(255,138,61,.20) 0%, transparent 62%),
    radial-gradient(70% 45% at 50% -6%,  rgba(0,137,123,.10) 0%, transparent 70%);
  --stars-op:0;                       /* no stars in daylight */
  --ember-op:.92;
  --ember-dot:#D9520A;
  --ember-dot2:#C07C00;
  --ember-shadow:0 0 5px rgba(217,82,10,.40);

  --hero-bg:
    radial-gradient(120% 100% at 50% -20%, rgba(0,137,123,.10) 0%, transparent 58%),
    radial-gradient(90% 70% at 50% 118%,  rgba(217,82,10,.16) 0%, transparent 66%),
    linear-gradient(180deg,#FAF5EA 0%, #F0E7D5 100%);
  --hero-edge:rgba(190,130,30,.35);

  --crest-bg:linear-gradient(160deg,#FAE7BE,#F4D795);
  --crest-border:#CE8912;
  --crest-ink:#7C4B05;
  --crest-glow:0 0 0 1px rgba(206,137,18,.28), 0 10px 26px rgba(255,138,61,.30);
  --crest-cap:#B4600A;

  --bar-glass:rgba(240,231,213,.84);

  --sel-bg:linear-gradient(160deg,#DCEFE9,#C6E4DB);
  --sel-ink:#00594E;

  --rail:linear-gradient(180deg, rgba(0,137,123,.55), rgba(217,82,10,.60) 55%, rgba(190,130,30,.35));
  --rail-op:.65;

  --locked-bg:#E6DFCE;
  --locked-ink:#A79E8B;
}


/* ============================================================================
   3 · ROLE IDENTITY
   The brand owns chrome only — rail, crest, tags, active tab. Everything
   else stays constant so the three dashboards feel like one product.
   Put data-role on <body> or the page wrapper.
   ========================================================================== */
[data-role="student"]{
  --brand:#FBC02D; --brand-2:#FF8A3D; --brand-ink:var(--on-warm);
  --brand-glow:0 0 20px rgba(255,138,61,.30);
  --rail:linear-gradient(180deg, rgba(0,191,165,.45), rgba(255,138,61,.65) 55%, rgba(251,192,45,.30));
}
[data-role="teacher"]{
  --brand:#00BFA5; --brand-2:#00897B; --brand-ink:#04241F;
  --brand-glow:0 0 26px rgba(0,191,165,.30);
  --rail:linear-gradient(180deg, rgba(251,192,45,.35), rgba(0,191,165,.65) 55%, rgba(77,216,196,.30));
  --crest-bg:linear-gradient(160deg,#0F3A34,#0B2B27);
  --crest-border:#00BFA5; --crest-ink:#4DD8C4;
  --crest-glow:0 0 0 1px rgba(0,191,165,.25), 0 0 34px rgba(0,191,165,.40);
  --crest-cap:rgba(77,216,196,.80);
}

[data-role="staff"]{
  --brand:#B388FF; --brand-2:#6C5CE7; --brand-ink:#0A0D12;
  --brand-glow:0 0 26px rgba(179,136,255,.32);
  --rail:linear-gradient(180deg, rgba(0,191,165,.35), rgba(179,136,255,.65) 55%, rgba(108,92,231,.32));
  --crest-bg:linear-gradient(160deg,#241B3E,#1B1430);
  --crest-border:#B388FF; --crest-ink:#CBB2FF;
  --crest-glow:0 0 0 1px rgba(179,136,255,.28), 0 0 34px rgba(179,136,255,.40);
  --crest-cap:rgba(203,178,255,.80);
}

[data-role="manager"]{
  --brand:#FF4D8D; --brand-2:#E63E80; --brand-ink:#1F0512;
  --brand-glow:0 0 26px rgba(255,77,141,.35);
  --rail:linear-gradient(180deg, rgba(251,192,45,.35), rgba(255,77,141,.65) 55%, rgba(194,24,91,.32));
  --crest-bg:linear-gradient(160deg,#3A1023,#2A1020);
  --crest-border:#FF4D8D; --crest-ink:#FF87B0;
  --crest-glow:0 0 0 1px rgba(255,77,141,.30), 0 0 34px rgba(255,77,141,.42);
  --crest-cap:rgba(255,135,176,.82);
}

[data-theme="light"][data-role="staff"],
[data-theme="light"] [data-role="staff"]{ --brand:#6A1B9A; --brand-2:#4A0F72; --brand-ink:#FFFFFF; }
[data-theme="light"][data-role="manager"],
[data-theme="light"] [data-role="manager"]{ --brand:#D81B60; --brand-2:#AD1457; --brand-ink:#FFFFFF; }

/* ============================================================================
   4 · THE SKY
   ========================================================================== */
html, body{ background:var(--bg); }
body{
  color:var(--paper);
  background:var(--sky), var(--bg);
  background-attachment:fixed;
  font-family:var(--sans);
  transition:background-color .45s ease, color .45s ease;
}

/* static star field — no JS, fades out in daylight */
.qw-stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--stars-op); transition:opacity .45s ease;
  background-image:
    radial-gradient(1.1px 1.1px at 24px 38px,  rgba(255,255,255,.60), transparent),
    radial-gradient(1px 1px    at 148px 96px,  rgba(255,255,255,.38), transparent),
    radial-gradient(1.4px 1.4px at 76px 190px, rgba(190,220,255,.42), transparent),
    radial-gradient(1px 1px    at 232px 148px, rgba(255,225,190,.34), transparent),
    radial-gradient(1px 1px    at 300px 44px,  rgba(255,255,255,.28), transparent);
  background-size:340px 260px, 300px 300px, 420px 380px, 360px 320px, 480px 300px;
}

/* rising embers */
.qw-embers{
  position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;
  opacity:var(--ember-op); transition:opacity .45s ease;
}
.qw-ember{
  position:absolute; bottom:-18px; width:3px; height:3px; border-radius:50%;
  background:var(--ember-dot); box-shadow:var(--ember-shadow);
  opacity:0; filter:blur(.4px); animation:qwRise linear infinite;
}
.qw-ember.alt{ background:var(--ember-dot2); }
@keyframes qwRise{
  0%  { transform:translateY(0) translateX(0) scale(.6); opacity:0; }
  12% { opacity:.75; }
  70% { opacity:.5; }
  100%{ transform:translateY(var(--rise,-104vh)) translateX(var(--dx,0)) scale(1.1); opacity:0; }
}

/* A LOCAL ember layer — for boxes with their own opaque background (the hero),
   which would otherwise hide the fixed sky embers behind them.
   The parent must be position:relative; this layer clips its own overflow. */
.qw-embers.qw-local{
  position:absolute; inset:0; z-index:1;
  /* NOTE: translateY() percentages resolve against the ember itself (3px),
     not the container — so --rise must be an absolute length. */
  --rise:-460px;
}

/* everything interactive sits above the sky — set z-index only, never position */
.qw-shell, .qw-hero{ position:relative; }
.qw-hero, .qw-shell{ z-index:2; }

/* the page-title strip's glass must never sit above the sidebar —
   a dropdown from the sidebar's user card has to clear it. */
.qw-titlebar{ z-index:5; }

/* themed scrollbar - every scrolling element, not just the page itself
   (the sidebar's own nav list scrolls independently when it overflows) */
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background-color:var(--line); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background-color:var(--dim); background-clip:padding-box; }
::-webkit-scrollbar-corner{ background:transparent; }

/* ============================================================================
   5 · LAYOUT — shell, rail, panels
   ========================================================================== */
.qw-shell{
  max-width:1040px; margin:0 auto;
  padding:22px 16px 64px;
}
@media(min-width:640px){ .qw-shell{ padding:26px 20px 72px; } }

/* the rail lives in the gutter and never moves content — desktop only */
@media(min-width:860px){
  .qw-shell.qw-railed{ padding-inline-start:56px; }
  .qw-shell.qw-railed::before{
    content:""; position:absolute; inset-inline-start:26px; top:14px; bottom:14px;
    width:2px; border-radius:2px;
    background:var(--rail); opacity:var(--rail-op);
  }
  .qw-shell.qw-railed::after{
    content:""; position:absolute; inset-inline-start:20px; top:14px; bottom:14px; width:14px;
    background:var(--rail); filter:blur(7px); opacity:.4; pointer-events:none;
  }
  /* station dot beside each panel */
  .qw-shell.qw-railed > .qw-panel::after,
  .qw-shell.qw-railed > .qw-section > .qw-panel:first-child::after{
    content:""; position:absolute; inset-inline-start:-36px; top:28px;
    width:11px; height:11px; border-radius:50%;
    background:var(--brand,var(--ember)); border:2px solid var(--bg);
    box-shadow:0 0 16px var(--brand,var(--ember)); z-index:3;
  }
}

/* the panel — a card lit along its top edge, the line burning past it */
.qw-panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-card), var(--inset-top);
  padding:20px 18px;
  margin-bottom:18px;
  transition:background-color .45s ease, border-color .45s ease;
}
@media(min-width:640px){ .qw-panel{ padding:24px 24px; } }

/* inset from the corners so the hairline never crosses the radius */
.qw-panel::before{
  content:""; position:absolute; top:0; left:18px; right:18px; height:1px;
  background:linear-gradient(90deg,transparent, var(--yellow), var(--ember), var(--teal), transparent);
  opacity:.85;
}
.qw-panel.qw-flush{ padding:0; overflow:hidden; }
.qw-panel.qw-flush::before{ left:0; right:0; }

/* section heading above a panel */
.qw-h3{
  font-family:var(--sans);
  font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim2); margin:26px 0 12px;
}
.qw-shell > .qw-h3:first-child{ margin-top:0; }

h1, h2, .qw-serif{ font-family:var(--serif); color:var(--paper); }
.qw-lead{ color:var(--dim2); }
.qw-lead b{ color:var(--paper); }


/* ============================================================================
   6 · HERO + STATION CREST
   ========================================================================== */
.qw-hero{
  background:var(--hero-bg);
  color:var(--paper);
  padding:32px 20px 40px;
  border-bottom:1px solid var(--hero-edge);
  text-align:center;
  transition:background .45s ease, border-color .45s ease;
}
@media(min-width:640px){ .qw-hero{ padding:40px 22px 48px; } }

/* the horizon the trail burns along */
.qw-hero::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent, var(--yellow) 30%, var(--ember) 50%, var(--yellow) 70%, transparent);
}

.qw-crest{ display:flex; flex-direction:column; align-items:center; gap:9px; margin:0 0 16px; }
.qw-crest-dot{
  position:relative; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:19px; font-weight:700;
  color:var(--crest-ink);
  background:var(--crest-bg);
  border:1.5px solid var(--crest-border);
  box-shadow:var(--crest-glow);
}
.qw-crest-dot::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--crest-border);
  animation:qwPing 2.4s cubic-bezier(0,.55,.45,1) infinite; pointer-events:none;
}
@keyframes qwPing{ 0%{transform:scale(1); opacity:.65;} 100%{transform:scale(1.9); opacity:0;} }
.qw-crest-cap{
  font-size:9.5px; font-weight:800; letter-spacing:3px; text-transform:uppercase;
  color:var(--crest-cap);
}

.qw-hero h1{
  font-family:var(--serif); font-size:clamp(26px,5vw,38px); font-weight:700;
  margin:0 0 8px; line-height:1.1;
}
[data-theme="dark"] .qw-hero h1{ text-shadow:0 0 30px rgba(255,138,61,.18); }
.qw-hero .qw-tagline{ color:var(--dim2); margin:0; font-size:15px; }

/* hero content sits above its own ember layer */
.qw-hero > *{ position:relative; z-index:2; }
.qw-hero > .qw-embers{ z-index:1; }
.qw-hero .qw-tagline b{ color:var(--paper); }

/* the crosshair divider */
.qw-divider{
  height:2px; width:56px; margin:16px auto 0; border-radius:2px;
  background:linear-gradient(90deg,var(--yellow),var(--ember));
}


/* ============================================================================
   7 · NAV — left sidebar (desktop), slide-in drawer (mobile)
   ========================================================================== */
.qw-titlebar{
  position:relative; z-index:5;
  background:var(--bar-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hair);
  transition:background-color .45s ease, border-color .45s ease;
}

/* the sidebar — fixed left column on desktop, a slide-in drawer on mobile */
.qw-sidebar{
  position:fixed; top:0; inset-inline-start:0; bottom:0; width:248px; z-index:10;
  display:flex; flex-direction:column; overflow:visible;
  background:var(--bar-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-inline-end:1px solid var(--hair);
  transform:translateX(-100%);
  transition:background-color .45s ease, border-color .45s ease, transform .32s cubic-bezier(.2,.8,.3,1);
}
.qw-sidebar.open{ transform:none; }
@media(min-width:900px){ .qw-sidebar{ transform:none; } }

.qw-sidebar-brand{
  display:flex; align-items:center; gap:9px; flex:0 0 auto;
  padding:18px 18px 14px; text-decoration:none;
}

/* QUICK wordmark: role-coloured ring + spaced serif QUICK, the page's name beneath.
   Same mark the books carry, so the site and the books read as one brand. */
.qmark{ display:inline-flex; align-items:center; gap:11px; flex:none; text-decoration:none; }
.qmark .mring{
  width:21px; height:21px; border-radius:50%; flex:none;
  border:2px solid var(--brand, var(--ember)); display:grid; place-items:center;
  box-shadow:var(--brand-glow, var(--glow-ember));
}
.qmark .mring::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brand, var(--ember)); }
.qmark .lock{ display:flex; flex-direction:column; gap:4px; line-height:1; min-width:0; }
.qmark .word{
  font-family:var(--serif); font-size:19px; font-weight:400;
  letter-spacing:.17em; margin-right:-.17em; color:var(--paper);
}
.qmark .line{
  font-family:var(--sans); font-size:8.5px; font-weight:600; letter-spacing:.34em; margin-right:-.34em;
  text-transform:uppercase; color:var(--dim2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qmark.sm{ gap:9px; }
.qmark.sm .mring{ width:17px; height:17px; border-width:1.5px; box-shadow:none; }
.qmark.sm .mring::after{ width:5.5px; height:5.5px; }
.qmark.sm .word{ font-size:15px; }
.qmark.sm .line{ font-size:7.5px; letter-spacing:.3em; margin-right:-.3em; }
.qmark.lg{ gap:14px; }
.qmark.lg .mring{ width:30px; height:30px; border-width:2.5px; }
.qmark.lg .mring::after{ width:10px; height:10px; }
.qmark.lg .word{ font-size:28px; }
.qmark.lg .line{ font-size:10.5px; }

.qw-navlist{ display:flex; flex-direction:column; gap:2px; padding:6px 12px; flex:1 1 auto; min-height:0; overflow-y:auto; }

.qw-navitem{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  color:var(--dim2); font:700 13.5px/1.2 var(--sans); text-decoration:none;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:background .22s ease, color .22s ease, box-shadow .22s ease;
}
.qw-navitem svg{ width:19px; height:19px; flex:0 0 auto; }
.qw-navitem:hover{ background:var(--surf-1); color:var(--paper); }
.qw-navitem[aria-current="true"]{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:var(--brand-ink); box-shadow:var(--brand-glow);
}

/* a couple of secondary links under a parent tab — pages that exist but
   don't deserve their own top-level row (order history, a settings page) */
.qw-subnav{ display:none; flex-direction:column; padding:1px 0 7px; padding-inline-start:43px; gap:1px; }
.qw-subnav.open{ display:flex; }
.qw-subitem{
  display:block; padding:6px 10px; border-radius:8px;
  color:var(--dim); font:600 12px/1.2 var(--sans); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.qw-subitem:hover{ background:var(--surf-1); color:var(--paper); }
.qw-subitem[aria-current="true"]{
  background:var(--surf-1); color:var(--paper); font-weight:800;
  box-shadow:inset 2px 0 0 var(--brand);
}

/* non-interactive section header inside a long sub-nav (e.g. "Leads",
   "Reservations" grouping the Student tab's filters) */
.qw-subgroup-label{
  padding:8px 10px 2px; font:800 10px/1.2 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--dim2);
}
.qw-subgroup-label:first-child{ padding-top:2px; }

/* theme toggle + user card, pinned to the sidebar's bottom */
.qw-sidebar-bottom{ margin-top:auto; padding:12px; display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }

.qw-sidebar-user{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
  cursor:pointer; transition:background .22s ease; width:100%; border:0; background:transparent; text-align:start;
}
.qw-sidebar-user:hover{ background:var(--surf-1); }
.qw-sidebar-user .av{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--brand-ink);
  font:800 14px/1 var(--sans);
}
.qw-sidebar-user .who{ min-width:0; }
.qw-sidebar-user .name{
  color:var(--paper); font-weight:800; font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qw-sidebar-user .role{ color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

/* the slim mobile top bar that opens the drawer */
.qw-mobile-topbar{
  display:flex; align-items:center; gap:12px; height:56px; padding:0 16px;
  position:relative; z-index:9;
  background:var(--bar-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hair);
}
@media(min-width:900px){ .qw-mobile-topbar{ display:none; } }

.qw-hamburger{
  width:34px; height:34px; flex:0 0 auto; padding:0; border-radius:10px;
  border:1px solid var(--line); background:var(--surf-2); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.qw-hamburger svg{ width:18px; height:18px; }

.qw-sidebar-backdrop{
  display:none; position:fixed; inset:0; z-index:9; background:rgba(0,0,0,.5);
}
.qw-sidebar-backdrop.open{ display:block; }
@media(min-width:900px){ .qw-sidebar-backdrop{ display:none !important; } }

/* content sits beside the sidebar once it's permanently visible */
@media(min-width:900px){ .qw-content{ margin-inline-start:248px; } }

/* sun / moon */
.qw-themebtn{
  flex:0 0 auto; width:34px; height:34px; padding:0;
  border-radius:50%; border:1px solid var(--line); background:var(--surf-2);
  color:var(--dim2); cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.4), color .3s, border-color .3s, background .3s;
}
.qw-themebtn:hover{ color:var(--paper); border-color:var(--dim); }
.qw-themebtn:active{ transform:scale(.9) rotate(28deg); }
.qw-themebtn .moon{ display:none; }
[data-theme="light"] .qw-themebtn .sun{ display:none; }
[data-theme="light"] .qw-themebtn .moon{ display:block; }

/* --- the language switch --- */
/* Same circle as the theme button, carrying two letters instead of a glyph.
   It is a form, so the wrapper has to be told not to take a line of its own. */
.qw-langswitch{ display:flex; align-items:center; gap:6px; margin:0; }
.qw-langbtn{
  font:800 12px/1 var(--sans); letter-spacing:.02em;
}
.qw-langbtn:active{ transform:scale(.9); }
/* the dashboard switch (staff): the same round button, stretched to hold a word */
.qw-viewbtn{ width:auto; padding:0 12px; border-radius:999px; gap:6px; font:700 12px/1 var(--sans); white-space:nowrap; }
.qw-viewbtn:active{ transform:scale(.95); }
.qw-viewbtn .qw-icon{ font-size:14px; }
@media(max-width:380px){ .qw-viewbtn span{ display:none; } .qw-viewbtn{ padding:0; width:34px; } }


/* ============================================================================
   8 · COMPONENTS
   ========================================================================== */

/* --- stat tiles --- */
.qw-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:560px){ .qw-stats{ grid-template-columns:repeat(3,1fr); gap:12px; } }
@media(min-width:820px){ .qw-stats.qw-4{ grid-template-columns:repeat(4,1fr); } }

.qw-stat{
  background:var(--surf-1); border:1px solid var(--hair);
  border-radius:14px; padding:14px 16px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
.qw-stat:hover{
  transform:translateY(-4px);
  border-color:var(--brand); box-shadow:var(--brand-glow);
}
.qw-stat .k{
  font:800 10.5px/1 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
.qw-stat .v{ font-size:26px; font-weight:800; color:var(--paper); margin-top:8px; line-height:1; }
.qw-stat .v small{ font-size:13px; color:var(--dim2); font-weight:700; }

/* --- list rows --- */
.qw-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--hair);
  transition:background .22s ease;
}
@media(min-width:640px){ .qw-row{ padding:16px 22px; } }
.qw-row:last-child{ border-bottom:0; }
.qw-row:hover{ background:var(--surf-1); }
.qw-row .qw-t{ font-weight:800; color:var(--paper); font-size:15px; }
.qw-row .qw-s{ font-size:13px; color:var(--dim2); margin-top:3px; }
.qw-row .qw-meta{ min-width:0; flex:1 1 220px; }

/* --- a stacked (non-flex) card body inside a flush panel list --- */
.qw-cardrow{ padding:16px 18px; border-bottom:1px solid var(--hair); }
.qw-cardrow:last-child{ border-bottom:0; }

/* --- an indented accent sub-section within a card; override the accent
   with --qw-inset-c, e.g. style="--qw-inset-c:var(--teal)" --- */
.qw-inset{
  margin-top:13px; padding:12px 14px;
  border-inline-start:2px solid var(--qw-inset-c, var(--brand));
}

/* --- the small uppercase label above an inset sub-section --- */
.qw-subhead{
  font:800 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:9px;
}

/* --- a single-line item row: label + action, no card border of its own --- */
.qw-miniRow{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }

.qw-empty{ padding:30px 20px; text-align:center; color:var(--dim2); font-size:14.5px; }

/* --- pills / buttons --- */
.qw-pill{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:9px 18px;
  font:800 13px/1 var(--sans); border:0; cursor:pointer; text-decoration:none;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.qw-pill:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.qw-pill-brand{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--brand-ink); box-shadow:var(--brand-glow); }
.qw-pill-warm { background:linear-gradient(90deg,var(--yellow),var(--ember));  color:var(--on-warm);  box-shadow:var(--glow-ember); }
.qw-pill-teal { background:linear-gradient(90deg,var(--teal),var(--teal-light)); color:var(--ink-on); box-shadow:var(--glow-teal); }
.qw-pill-ghost{ background:var(--surf-1); border:1px solid var(--line); color:var(--dim2); }
.qw-pill-ghost:hover{ color:var(--paper); border-color:var(--dim); }
.qw-pill-off  { color:var(--dim); font-weight:700; font-size:13.5px; }

.qw-dot-live{
  width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:qwBlip 1.4s ease-in-out infinite;
}
@keyframes qwBlip{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.72)} }

/* --- tags --- */
.qw-tag{
  display:inline-block; white-space:nowrap;
  font:800 10.5px/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  background:var(--surf-2); color:var(--dim2); border:1px solid var(--line);
}
.qw-tag-brand{ background:color-mix(in srgb, var(--brand) 16%, transparent); color:var(--brand); border-color:color-mix(in srgb, var(--brand) 40%, transparent); }
.qw-tag-teal { background:var(--teal-soft);  color:var(--teal);  border-color:var(--teal); }
.qw-tag-green{ background:var(--green-soft); color:var(--green); border-color:var(--green); }
.qw-tag-red  { background:var(--red-soft);   color:var(--red);   border-color:var(--red); }

/* --- progress ring --- */
.qw-ring{ position:relative; flex:0 0 78px; width:78px; height:78px; }
.qw-ring svg{ transform:rotate(-90deg); display:block; }
.qw-ring .bg{ fill:none; stroke:var(--hair); stroke-width:8; }
.qw-ring .fg{
  fill:none; stroke:var(--brand); stroke-width:8; stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--brand));
  stroke-dasharray:var(--c); stroke-dashoffset:var(--c);
  animation:qwRing 1.3s .25s cubic-bezier(.3,.9,.3,1) forwards;
}
@keyframes qwRing{ to{ stroke-dashoffset:var(--off); } }
.qw-ring .pct{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:16px; font-weight:800; color:var(--paper);
}

/* --- progress bar --- */
.qw-bar{ height:8px; border-radius:999px; background:var(--hair); overflow:hidden; }
.qw-bar > i{
  display:block; height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  animation:qwGrow 1.1s .2s cubic-bezier(.3,.9,.3,1) forwards;
}
@keyframes qwGrow{ to{ width:var(--w,0%); } }

/* --- link cards (the admin "jump to" tiles) --- */
.qw-cards{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:640px){ .qw-cards{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .qw-cards.qw-3{ grid-template-columns:repeat(3,1fr); } }

.qw-card{
  position:relative; overflow:hidden; display:block; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:20px; box-shadow:var(--shadow-card), var(--inset-top);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s;
}
.qw-card:hover{ transform:translateY(-5px); border-color:var(--brand); }
.qw-card::after{
  content:""; position:absolute; inset-inline-start:-40px; bottom:-70px;
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, var(--glow-c,var(--brand)), transparent 70%);
  opacity:.16; transition:opacity .28s; pointer-events:none;
}
.qw-card:hover::after{ opacity:.38; }
.qw-card > *{ position:relative; z-index:1; }
.qw-card .ic{ font-size:22px; }
.qw-card .kick{
  font:800 10.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--glow-c,var(--brand));
}
.qw-card .lt{ font-weight:800; color:var(--paper); margin-top:10px; font-size:17px; }
.qw-card .ls{ font-size:13px; color:var(--dim2); margin-top:4px; }

/* a card that holds a ring on the left */
.qw-card.qw-split{ display:flex; gap:18px; align-items:center; }


/* ============================================================================
   9 · FORMS — inputs, and Breeze partial overrides
   ========================================================================== */
.qw-input, .qw-panel input[type="text"], .qw-panel input[type="email"],
.qw-panel input[type="password"], .qw-panel input[type="time"],
.qw-panel input[type="number"], .qw-panel input[type="date"],
.qw-panel select, .qw-panel textarea{
  background:var(--well);
  border:1px solid var(--line);
  color:var(--paper);
  border-radius:10px; padding:9px 12px;
  font:500 14px/1.4 var(--sans);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.qw-input:focus, .qw-panel input:focus, .qw-panel select:focus, .qw-panel textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand), var(--brand-glow);
}
.qw-panel select option{ background:var(--panel); color:var(--paper); }
.qw-panel ::placeholder{ color:var(--dim); }

.qw-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.qw-form > input, .qw-form > select{ min-width:0; flex:1 1 160px; }

/* themed checkbox - brand gradient + glow when checked, matches qw-pill-brand */
input.qw-check{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; flex:0 0 auto;
  border:1.5px solid var(--line); border-radius:6px;
  background:var(--well);
  cursor:pointer; position:relative; margin:0;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input.qw-check:hover{ border-color:var(--dim); }
input.qw-check:checked{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent;
  box-shadow:var(--brand-glow);
}
input.qw-check:checked::after{
  content:""; position:absolute; left:50%; top:44%;
  width:5px; height:9px;
  border:solid var(--brand-ink); border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg);
}
input.qw-check:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Breeze's profile partials render Tailwind greys — lift them onto the panel */
.qw-panel h2{ color:var(--paper) !important; font-family:var(--sans); font-weight:800; font-size:17px; }
.qw-panel p { color:var(--dim2) !important; }
.qw-panel label{ color:var(--dim2) !important; }
.qw-panel .text-gray-900, .qw-panel .dark\:text-gray-100{ color:var(--paper) !important; }
.qw-panel .text-gray-600, .qw-panel .text-gray-500,
.qw-panel .dark\:text-gray-400{ color:var(--dim2) !important; }

/* alerts */
.qw-alert{ border-radius:12px; padding:12px 16px; font-size:14px; margin-bottom:16px; border:1px solid; }
.qw-alert-ok { background:var(--green-soft); color:var(--green); border-color:var(--green); }
.qw-alert-bad{ background:var(--red-soft);   color:var(--red);   border-color:var(--red); }

:focus-visible{ outline:2px solid var(--brand,var(--teal)); outline-offset:3px; border-radius:6px; }


/* ============================================================================
   10 · MOTION + ACCESSIBILITY
   ========================================================================== */
.qw-panel-tab{ display:none; animation:qwIn .45s cubic-bezier(.2,.7,.3,1); }
.qw-panel-tab.on{ display:block; }
@keyframes qwIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.qw-flame{ display:inline-block; animation:qwFlick 1.6s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes qwFlick{ 0%,100%{transform:scale(1) rotate(-2deg)} 50%{transform:scale(1.14) rotate(3deg)} }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .qw-ring .fg{ stroke-dashoffset:var(--off) !important; }
  .qw-bar > i{ width:var(--w,0%) !important; }
  .qw-embers{ display:none; }
}


/* Alpine has not booted yet - hide what it is about to control, or panels
   flash open on every page load. */
[x-cloak]{ display:none !important; }

/* ============================================================================
   11 · FORM PRIMITIVES
   ----------------------------------------------------------------------------
   Before these existed every form hand-rolled its own label with the same five
   inline properties, 43 times over. Use .qw-field for one labelled control,
   .qw-fields to lay several of them out, and .qw-error to say what went wrong
   under the control that caused it.
   ========================================================================== */
.qw-fields{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-start; }
.qw-fields > .qw-field{ flex:0 1 180px; }
.qw-fields > .qw-field-wide{ flex:1 1 100%; }
.qw-fields > .qw-field-tight{ flex:0 1 120px; }
/* a field whose control is a row of pills should be as wide as the pills,
   not as wide as the text box the default basis assumes */
.qw-fields > .qw-field-seg{ flex:0 1 auto; }
/* and one whose options have long names needs room for them */
.qw-fields > .qw-field-grow{ flex:1 1 250px; }
/* A button sitting in a row of labelled inputs has no label of its own, so
   push it down to sit on their baseline rather than floating at the top. */
.qw-fields > .qw-field-actions{
  flex:0 0 auto; display:flex; gap:6px; align-items:center;
  align-self:flex-start; margin-top:20px;
}

.qw-field{ min-width:0; }
.qw-field > .qw-input,
.qw-field > select.qw-input,
.qw-field > textarea.qw-input{ width:100%; }

.qw-label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.03em;
  color:var(--dim); margin-bottom:5px;
}
.qw-label .qw-req{ color:var(--red); margin-inline-start:2px; }

.qw-help{ display:block; font-size:11.5px; color:var(--dim); margin-top:5px; line-height:1.5; }

.qw-error{ display:block; font-size:11.5px; color:var(--red); margin-top:5px; line-height:1.5; }
.qw-input.is-bad{ border-color:var(--red); }
.qw-input.is-bad:focus{ outline-color:var(--red); }

/* Compact scope: forms that sit inside a card, where the page has already
   said what this is about and the fields should not shout. */
.qw-tight .qw-input,
.qw-tight input[type="text"], .qw-tight input[type="email"],
.qw-tight input[type="number"], .qw-tight input[type="time"],
.qw-tight input[type="file"], .qw-tight select, .qw-tight textarea{
  padding:7px 10px; border-radius:9px; font-size:13px;
}
.qw-tight .qw-label{ font-size:10.5px; margin-bottom:4px; }
.qw-tight .qw-help{ font-size:11px; margin-top:4px; }
.qw-tight .qw-fields{ gap:8px 10px; }
.qw-tight .qw-next-do{ margin-top:10px; gap:6px; }
.qw-tight .qw-pill{ padding:7px 14px; font-size:12.5px; }

/* ============================================================================
   FACTS — a labelled strip, instead of a run-on line of dots
   ----------------------------------------------------------------------------
   "09120001122 · wants a private class · Term 1 · online · paid 2,000,000"
   makes a reader parse before they can know anything. Each fact gets its own
   small caption so the eye can jump straight to the one it wants.
   ========================================================================== */
.qw-facts{ display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:10px; }
.qw-fact{ min-width:0; }
.qw-fact b{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim); margin-bottom:3px; white-space:nowrap;
}
.qw-fact span{ display:block; font-size:13.5px; font-weight:500; color:var(--paper); }
.qw-fact span.quiet{ color:var(--dim2); font-weight:400; }
.qw-fact span.warn{ color:var(--amber); }
/* the reason a fact says what it says - the suggestion engine showing its
   working, so nobody has to take the pick on faith */
.qw-fact i{
  display:block; font-style:normal; font-size:11px; line-height:1.45;
  color:var(--dim); margin-top:3px; max-width:34ch;
}

/* A two-way choice as pills. The radio still carries the value for the form
   and still takes the keyboard, but nothing of it is drawn - the pill going
   solid IS the answer, so there is no dot to read as well as a colour.
   appearance:none matters: a bare opacity:0 still leaves some browsers
   painting the control's own box. */
.qw-seg{ display:flex; gap:8px; flex-wrap:wrap; }
.qw-seg label{ position:relative; cursor:pointer; user-select:none; }
.qw-seg input,
.qw-seg input[type="radio"]{
  -webkit-appearance:none; appearance:none;
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; border:0; background:none; opacity:0;
  cursor:pointer;
}
.qw-seg label:focus-within{ outline:2px solid var(--brand,var(--teal)); outline-offset:3px; border-radius:999px; }
/* the pill that is not chosen should not lift on hover like a button does */
.qw-seg .qw-pill:hover{ transform:none; }
/* A pill here is a <label>, and .qw-panel label paints every label the muted
   grey a caption wants - with !important, so it won out over the pill's own
   colour and left the chosen pill unreadable: grey on teal in the dark
   theme, near-black on teal in the light one. The pill wins on its own. */
.qw-panel .qw-seg label.qw-pill-go{ color:var(--ink-on) !important; }
.qw-panel .qw-seg label.qw-pill-ghost{ color:var(--dim2) !important; }
.qw-panel .qw-seg label.qw-pill-ghost:hover{ color:var(--paper) !important; }

/* ============================================================================
   PICKLIST — checkboxes with a search box, instead of ctrl-clicking a listbox
   ========================================================================== */
.qw-picklist{
  border:1px solid var(--line); border-radius:10px; background:var(--well);
  max-height:190px; overflow-y:auto; padding:4px;
}
.qw-picklist label{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:7px 9px; border-radius:7px; font-size:13px; color:var(--paper);
}
.qw-picklist label:hover{ background:var(--surf-1); }
.qw-picklist label input{ flex:0 0 auto; }
.qw-picklist .qw-empty{ padding:12px; font-size:12.5px; }

/* ============================================================================
   12 · GUIDED FLOW — journey strip + next step
   ========================================================================== */
.qw-trackwrap{ display:inline-flex; flex-direction:column; gap:5px; align-items:flex-start; }

.qw-track{ display:inline-flex; align-items:center; }
.qw-track > span{ display:inline-flex; align-items:center; }
.qw-track > span:not(:first-child)::before{
  content:''; display:block; width:20px; height:2px;
  background:var(--line); border-radius:2px;
  transition:background .25s ease;
}
.qw-track > span.done::before,
.qw-track > span.here::before{ background:var(--teal); }
.qw-track > span.stop::before{ background:var(--red); }

.qw-track i{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--line); margin:0 1px;
  transition:background .25s ease, box-shadow .25s ease;
}
.qw-track > span.done i{ background:var(--teal); }
.qw-track > span.here i{
  width:10px; height:10px; margin:0;
  background:var(--brand,var(--teal));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand,var(--teal)) 20%, transparent);
}
.qw-track > span.stop i{
  width:10px; height:10px; margin:0; background:var(--red);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent);
}
.qw-track.is-done > span i{ background:var(--teal); }

.qw-trackname{
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}
.qw-lead-head:hover .qw-trackname{ color:var(--dim2); }

.qw-next{
  background:var(--surf-1); border:1px solid var(--hair);
  border-radius:12px; padding:14px 16px;
}
.qw-next-kicker{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); margin:0 0 5px;
}
.qw-next-title{ font-size:15px; font-weight:700; color:var(--paper); margin:0 0 4px; }
.qw-next-why{ font-size:12.5px; color:var(--dim2); margin:0; line-height:1.6; }
.qw-next-do{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }

/* the quiet row of everything-else actions */
.qw-quiet{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--hair);
}
.qw-quiet button, .qw-quiet a, .qw-quiet summary{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:12.5px; color:var(--dim2); text-decoration:none; font-family:inherit;
}
.qw-quiet button:hover, .qw-quiet a:hover, .qw-quiet summary:hover{ color:var(--paper); }
.qw-quiet .qw-danger{ color:var(--red); }

/* one lead, collapsed to a single line until opened */
.qw-lead{ border-bottom:1px solid var(--hair); }
.qw-lead-head{
  display:flex; gap:12px; align-items:center; width:100%;
  padding:14px 18px; background:none; border:0; cursor:pointer;
  text-align:start; font-family:inherit; color:inherit;
}
.qw-lead-head:hover{ background:var(--surf-1); }
.qw-lead-head .qw-trackwrap{ flex:0 0 150px; }
.qw-lead-next{ flex:0 0 160px; text-align:end; }
.qw-lead-chev{ flex:0 0 14px; color:var(--dim); font-size:13px; text-align:end; }
.qw-lead-body{ padding:0 18px 18px; }

@media (max-width:640px){
  .qw-lead-head{ flex-wrap:wrap; gap:8px; padding:12px 14px; }
  .qw-lead-head .qw-trackwrap{ flex:1 1 100%; order:3; flex-direction:row; align-items:center; gap:9px; }
  .qw-lead-next{ flex:1 1 auto; order:2; text-align:end; }
  .qw-lead-chev{ order:2; }
  .qw-lead-body{ padding:0 14px 16px; }
  .qw-fields > .qw-field,
  .qw-fields > .qw-field-tight{ flex:1 1 100%; }
}

/* ============================================================================
   13 · ONE LINE PER RECORD — a list you scan, not a list you read

   A waiting reservation used to carry its whole next-step panel inline, so
   twelve people made a page nobody could scan. The line now says who, and
   the one word for what it needs; everything you can DO about it lives on
   their own page, one click away.
   ========================================================================== */
.qw-line{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--hair);
  text-decoration:none; transition:background .15s ease;
}
.qw-line:last-child{ border-bottom:0; }
.qw-line:hover{ background:var(--surf-1); }
.qw-line:hover .qw-line-go{ color:var(--paper); transform:translateX(2px); }

.qw-line-who{ min-width:0; flex:1 1 auto; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.qw-line-name{
  font-size:14.5px; font-weight:700; color:var(--paper);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.qw-line-sub{ font-size:12.5px; color:var(--dim2); font-variant-numeric:tabular-nums; }
.qw-line-end{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.qw-line-go{ color:var(--dim); font-size:15px; transition:color .15s ease, transform .15s ease; }

/* the small word for what this record is waiting on */
.qw-need{
  display:inline-block; white-space:nowrap;
  font:700 11px/1 var(--sans); padding:5px 10px; border-radius:999px;
  background:var(--surf-2); color:var(--dim2); border:1px solid var(--line);
}
.qw-need-now{ background:color-mix(in srgb, var(--amber) 14%, transparent); color:var(--amber); border-color:color-mix(in srgb, var(--amber) 42%, transparent); }
.qw-need-ok { background:var(--green-soft); color:var(--green); border-color:var(--green); }

/* the heading that carries the facts every line under it shares */
.qw-subhead{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:12px 16px 8px; border-bottom:1px solid var(--hair);
  font:700 11.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim2);
}
.qw-subhead em{ font-style:normal; font-weight:600; letter-spacing:0; text-transform:none; color:var(--dim); font-size:12px; }

@media(max-width:560px){
  .qw-line{ align-items:flex-start; flex-wrap:wrap; }
  .qw-line-who{ flex:1 1 100%; }
  .qw-line-end{ flex:1 1 100%; justify-content:flex-start; }
  .qw-line-go{ display:none; }
}

/* ============================================================================
   14 · THE ONE BUTTON THAT DOES THE THING

   qw-pill-brand takes its colour from whoever is signed in, which made the
   main action a different colour per role and, for staff, a violet-to-blue
   gradient that read as decoration rather than as the thing to press. The
   action that commits a change is one flat, deliberate colour everywhere.
   ========================================================================== */
.qw-pill-go{
  background:var(--teal); color:var(--ink-on);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink-on) 8%, transparent);
}
.qw-pill-go:hover{ filter:brightness(1.06); }
.qw-pill-go[disabled]{ filter:none; transform:none; cursor:not-allowed; }


/* ============================================================================
   15 · THE OTHER DIRECTION

   Persian runs right to left. Almost all of this file mirrors on its own -
   there is not a single float in it, and flex and grid do the work - so what
   is here is only the handful of things that cannot: a transform, an inset
   shadow, and the fonts.

   Nothing below changes the English page.
   ========================================================================== */

/* Shabnam is already on this server; only the treasure book sheet was loading
   it. Same two weights the interface uses. */
@font-face{font-family:'Shabnam';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/shabnam-400.woff2) format('woff2');}
@font-face{font-family:'Shabnam';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/shabnam-700.woff2) format('woff2');}

/* Fraunces and Manrope have no Persian glyphs, and --serif alone dresses most
   of the type on the site. Pointing the two tokens at the Persian face is
   what stops every heading quietly falling back to whatever the system has -
   which still renders, so it is the kind of wrong that survives review. */
[dir="rtl"]{
  --serif:var(--fa);
  --sans:var(--fa);
}
[dir="rtl"] body{ font-family:var(--fa); }

/* Persian letters join to their neighbours, and letter-spacing pulls them
   apart - every uppercase eyebrow label on the site is tracked out, and in
   Persian each one came out as a row of disconnected letters. The wordmark
   is Latin and keeps its tracking. */
/* ...and so does the one-time-code box, which is digits spread for reading. */
[dir="rtl"] :not(.qmark, .qmark *, input[name="code"]){ letter-spacing:normal !important; }

/* A Persian word inside an English page - the switch's own label is the
   first of these - needs the Persian face whichever way the page runs. The
   mirror image, a Latin word in a Persian page, is the .qw-ltr guard below. */
[lang="fa"]{ font-family:var(--fa); }

/* The wordmark is a Latin word and stays one: its own stack, its own
   direction, and the negative margins that trim the trailing letter-space
   still meaning what they say. */
.qmark{ direction:ltr; }
.qmark .word{ font-family:var(--serif-latin); }
.qmark .line{ font-family:var(--sans-latin); }

/* The drawer slides in from whichever edge it is parked on. A transform has
   no logical form, so this is the one piece of real duplication - and it has
   to repeat the desktop rule too. Sitting later in the file and carrying an
   attribute selector, it outranks the @media above on specificity alone, so
   without the third line here the sidebar is pushed off the side of every
   Persian page at every width. */
[dir="rtl"] .qw-sidebar{ transform:translateX(100%); }
[dir="rtl"] .qw-sidebar.open{ transform:none; }
@media(min-width:900px){ [dir="rtl"] .qw-sidebar{ transform:none; } }

/* An inset shadow has no logical form either. This is the bar down the live
   sub-item. */
[dir="rtl"] .qw-subitem[aria-current="page"]{ box-shadow:inset -2px 0 0 var(--brand); }

/* A chevron pointing the way the page goes should nudge that way too. */
/* An arrow that means "back" or "onward" is pointing at a direction the page
   itself has, so it turns with the page. An arrow inside a sentence - "File
   → Save As" - means "then", not a direction, and is the translator's to
   write; it is deliberately not covered here. */
[dir="rtl"] .qw-arrow-back,
[dir="rtl"] .qw-arrow-fwd{ display:inline-block; transform:scaleX(-1); }

[dir="rtl"] .qw-line-go{ transform:scaleX(-1); }
[dir="rtl"] .qw-line:hover .qw-line-go{ transform:scaleX(-1) translateX(2px); }

/* Numbers, money, phone numbers and anything else Latin keep their own
   direction inside a Persian sentence, or the sign ends up on the wrong end
   and a phone number reads backwards. The site already does this for six
   numeric columns; this is the same guard with a name anything can use. */
.qw-ltr{ direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="password"]{ direction:ltr; text-align:start; }

/* Some fields hold Latin whatever the page is written in but are plain text
   inputs, so the type does not say so. A phone number in an RTL input has its
   groups drawn in reverse - 0912 345 6789 renders as 6789 345 0912, which is
   not a typo anyone would catch on a screen they cannot read. */
[dir="rtl"] input[name="phone"],
[dir="rtl"] input[name="whatsapp"],
[dir="rtl"] input[name="email"],
[dir="rtl"] input[name="reference"],
[dir="rtl"] input[name="code"],
[dir="rtl"] .qw-ltr{ direction:ltr; text-align:start; }

/* The page's name under the logo, in Persian (4 Oct): joined letters cannot be spaced out, and need a size they can be read at. */
.qmark .line.fa{ font-family:var(--sans); font-size:10.5px; letter-spacing:0; margin-right:0; text-transform:none; direction:rtl; text-align:left; line-height:1.35; }
.qmark.sm .line.fa{ font-size:9.5px; letter-spacing:0; margin-right:0; }
.qmark.lg .line.fa{ font-size:12.5px; }

/* Every drop-down's open list, on every page (4 Oct): the list a browser draws is white by default, and in
   the dark theme the light text on it could not be read - seen on the date filter, whose lists sit outside
   .qw-panel. The list now takes the page's own panel and text colours, and the browser is told which theme it is. */
[data-theme="dark"]{ color-scheme:dark; }
[data-theme="light"]{ color-scheme:light; }
select option, select optgroup{ background:var(--panel); color:var(--paper); }