/* Extracted from app/app/templates/auth/register.html on 2026-05-27.
   Loaded via <link> instead of inline so the browser caches it
   across page navigations. */

    /* ───────── TOKENS ─────────
       Raw values live in /static/css/editorial.css (loaded globally).
       Local names below preserve the page's existing var(--ink) etc. usage. */
    .qatt{
      --ink:var(--ed-ink); --ink-2:var(--ed-ink-2); --rule:var(--ed-rule);
      --cream:var(--ed-cream); --cream-2:var(--ed-cream-2); --rule-cream:var(--ed-rule-cream);
      --hot:var(--ed-hot); --hot-deep:var(--ed-hot-deep); --hot-soft:var(--ed-hot-soft);
      --serif:var(--ed-serif);
      --mono:var(--ed-mono);
      --sans:var(--ed-sans);
      font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased;
    }

    /* ───────── SHELL ───────── */
    .qatt-shell{position:relative;min-height:calc(100vh - 4rem);display:grid;
      grid-template-columns:1.05fr 1fr;background:var(--cream)}

    /* ───────── LEDGER (left) ───────── */
    .qatt-ledger{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);
      padding:26px 36px 32px;display:flex;flex-direction:column;isolation:isolate}
    .qatt-ledger::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
    .qatt-ledger::after{content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(120% 70% at 18% 0%, rgba(37,99,235,.20) 0%, transparent 55%)}

    /* MARQUEE */
    .qatt-marquee{position:relative;z-index:2;display:flex;align-items:center;gap:16px;
      padding-bottom:18px;border-bottom:1px solid var(--rule);
      font-family:var(--serif);font-style:italic;font-weight:400;font-size:14.5px;letter-spacing:0;
      color:rgba(245,239,225,.78);overflow:hidden;white-space:nowrap;mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%)}
    .qatt-marquee__sep{font-family:var(--mono);font-style:normal;color:var(--hot);opacity:.85;font-size:13px;margin:0 22px}
    .qatt-marquee__dot{width:7px;height:7px;border-radius:50%;background:var(--hot);flex-shrink:0;
      box-shadow:0 0 0 4px rgba(37,99,235,.18);animation:qattPulse 1.8s ease-in-out infinite}
    .qatt-marquee__track{display:inline-flex;gap:36px;animation:qattMarq 34s linear infinite;will-change:transform}
    .qatt-marquee__track span{display:inline-block}

    /* BRAND */
    .qatt-ledger__brand{position:relative;z-index:2;margin-top:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
    .qatt-brand{display:flex;align-items:baseline;gap:4px;line-height:1}
    .qatt-brand__q{font-family:var(--serif);font-style:italic;font-weight:500;font-size:30px;color:var(--cream);letter-spacing:-.01em}
    .qatt-brand__dot{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--hot);transform:translateY(-3px);margin:0 1px}
    .qatt-brand__a{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--cream);padding-bottom:5px}
    .qatt-brand__sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,239,225,.45);text-align:right;line-height:1.5}
    .qatt-brand__sub b{color:var(--cream);font-weight:500}

    /* HERO QR */
    .qatt-hero{position:relative;z-index:2;flex:1;display:grid;place-items:center;padding:36px 0 30px}
    .qatt-qr-frame{position:relative;width:min(280px,72%);aspect-ratio:1/1;background:var(--cream);
      padding:18px;
      box-shadow:0 0 0 1px var(--rule),0 24px 60px -24px rgba(0,0,0,.7);
      transition:transform .4s cubic-bezier(.2,.7,.2,1)}
    .qatt-qr-frame::before{content:"// QR-A · 2026-05-24";position:absolute;top:-22px;left:0;
      font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,239,225,.55)}
    .qatt-qr-frame::after{content:"↳ scan to mark present";position:absolute;bottom:-26px;right:0;
      font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--hot)}
    .qatt-qr-offset{position:absolute;inset:8px -8px -8px 8px;background:var(--hot);z-index:-1;
      box-shadow:inset 0 0 0 1px var(--hot-deep)}
    .qatt-qr{width:100%;height:100%;display:block;position:relative;z-index:1}
    .qatt-qr-scan{position:absolute;left:8%;right:8%;top:8%;height:3px;
      background:linear-gradient(90deg,transparent,var(--hot) 30%,var(--hot) 70%,transparent);
      box-shadow:0 0 12px var(--hot);opacity:.85;animation:qattScan 3.2s ease-in-out 1.2s infinite;mix-blend-mode:multiply}
    .qatt-qr-corner{position:absolute;width:14px;height:14px;border:1.5px solid var(--hot);z-index:2}
    .qatt-qr-corner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
    .qatt-qr-corner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
    .qatt-qr-corner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
    .qatt-qr-corner.br{bottom:6px;right:6px;border-left:0;border-top:0}

    /* ROLL CALL */
    .qatt-roll{position:relative;z-index:2;border-top:1px solid var(--rule);padding-top:16px;
      display:flex;flex-direction:column;gap:0;font-family:var(--mono);font-size:13px}
    .qatt-roll__head{display:flex;justify-content:space-between;align-items:baseline;
      font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,239,225,.55);margin-bottom:8px}
    .qatt-roll__head b{color:var(--hot);font-weight:500;letter-spacing:.1em}
    .qatt-roll__row{display:grid;grid-template-columns:18px 1fr auto;gap:14px;align-items:center;
      padding:8px 0;border-bottom:1px dashed rgba(216,207,186,.16);
      opacity:0;animation:qattRise .6s ease-out forwards}
    .qatt-roll__row:last-child{border-bottom:0}
    .qatt-roll__check{width:14px;height:14px;background:var(--hot);color:var(--cream);
      display:grid;place-items:center;font-family:var(--sans);font-weight:600;font-size:11.5px;line-height:1}
    .qatt-roll__name{color:var(--cream);letter-spacing:.02em}
    .qatt-roll__time{color:rgba(245,239,225,.42);font-size:12px;letter-spacing:.08em}
    .qatt-roll__row:nth-child(2){animation-delay:1.0s} .qatt-roll__row:nth-child(3){animation-delay:1.55s}
    .qatt-roll__row:nth-child(4){animation-delay:2.10s} .qatt-roll__row:nth-child(5){animation-delay:2.65s}

    /* ───────── FORM SIDE (right) ───────── */
    .qatt-form-side{position:relative;background:var(--cream);display:flex;align-items:center;justify-content:center;
      padding:56px 56px}
    .qatt-form-side::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}
    .qatt-form-side::after{content:"+";position:absolute;top:22px;right:28px;
      font-family:var(--mono);font-weight:500;font-size:22px;color:var(--ink);opacity:.3}
    .qatt-corner-mark{position:absolute;bottom:22px;left:28px;
      font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:.4}
    .qatt-corner-mark b{color:var(--hot);font-weight:500}

    .qatt-form-wrap{width:100%;max-width:400px;position:relative;z-index:2}

    /* MOBILE BRAND (off on desktop) */
    .qatt-mbrand{display:none}

    .qatt-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
      color:var(--ink-2);display:flex;align-items:center;gap:12px}
    .qatt-eyebrow::before{content:"";width:32px;height:1px;background:var(--ink)}

    .qatt h1.qatt-title{font-family:var(--serif);font-weight:400;
      font-size:clamp(50px,6.4vw,72px);line-height:.92;letter-spacing:-.025em;
      margin-top:14px;color:var(--ink)}
    .qatt h1.qatt-title em{font-style:italic;color:var(--hot);font-weight:500}

    .qatt-sub{margin-top:18px;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:34ch}

    /* SMALL CALLOUT (one-line dot note) */
    .qatt-callout{margin-top:34px;display:flex;align-items:center;gap:10px;
      font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
    .qatt-callout__dot{width:6px;height:6px;border-radius:50%;background:var(--hot);flex-shrink:0;
      box-shadow:0 0 0 3px rgba(37,99,235,.18)}

    /* EDITORIAL NOTE — marginalia for the admin whitelist warning */
    .qatt-note{margin-top:22px;padding:16px 18px;background:rgba(37,99,235,.06);
      border-left:3px solid var(--hot);position:relative}
    .qatt-note__tag{position:absolute;top:-9px;left:14px;background:var(--cream);padding:0 8px;
      font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hot);font-weight:500}
    .qatt-note__head{font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--ink);margin-bottom:4px}
    .qatt-note__body{font-size:14px;line-height:1.55;color:var(--ink-2)}

    /* HERO GOOGLE CTA — the only sign-up path */
    .qatt-google{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;
      width:100%;margin-top:32px;padding:22px 24px;
      background:var(--ink);color:var(--cream);text-decoration:none;border:0;cursor:pointer;
      font-family:var(--sans);font-weight:500;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;
      transition:transform .18s cubic-bezier(.2,.7,.2,1)}
    .qatt-google::after{content:"";position:absolute;inset:7px 7px -7px -7px;background:var(--hot);z-index:-1;
      transition:inset .18s cubic-bezier(.2,.7,.2,1)}
    .qatt-google:hover{transform:translate(-3px,-3px)}
    .qatt-google:hover::after{inset:10px 10px -10px -10px}
    .qatt-google:active{transform:translate(0,0)}
    .qatt-google:active::after{inset:4px 4px -4px -4px}
    .qatt-google__label{display:flex;align-items:center;gap:14px;min-width:0}
    .qatt-google__g{flex-shrink:0;width:26px;height:26px;background:var(--cream);
      display:grid;place-items:center;border-radius:2px}
    .qatt-google__g svg{width:16px;height:16px;display:block}
    .qatt-google__arrow{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;
      text-transform:none;letter-spacing:0;line-height:1}

    /* TINY HELPER LINE under the CTA */
    .qatt-helper{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.09em;
      text-transform:uppercase;color:var(--ink-2);opacity:.7;display:flex;align-items:center;gap:8px}
    .qatt-helper::before{content:"↳";color:var(--hot);opacity:.85}

    .qatt-signup{margin-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
      color:var(--ink-2);text-align:center}
    .qatt-signup a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--hot);padding-bottom:1px;margin-left:6px;transition:color .2s}
    .qatt-signup a:hover{color:var(--hot)}

    /* ANIM */
    @keyframes qattRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    @keyframes qattPulse{0%,100%{box-shadow:0 0 0 4px rgba(37,99,235,.18)}50%{box-shadow:0 0 0 9px rgba(37,99,235,.04)}}
    @keyframes qattMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @keyframes qattScan{0%{top:8%;opacity:0}10%{opacity:.85}45%{top:88%;opacity:.85}55%{opacity:0}100%{top:8%;opacity:0}}
    .qatt-r{opacity:0;animation:qattRise .7s cubic-bezier(.2,.7,.2,1) forwards}
    .qatt-r1{animation-delay:.05s}.qatt-r2{animation-delay:.14s}.qatt-r3{animation-delay:.23s}
    .qatt-r4{animation-delay:.32s}.qatt-r5{animation-delay:.41s}.qatt-r6{animation-delay:.50s}
    .qatt-r7{animation-delay:.59s}.qatt-r8{animation-delay:.68s}

    @media (prefers-reduced-motion:reduce){
      .qatt *,.qatt *::before,.qatt *::after{animation:none!important;transition:none!important}
      .qatt-r,.qatt-roll__row{opacity:1}
    }

    /* ───────── MOBILE — full cream, no overlay card ───────── */
    @media (max-width:900px){
      .qatt-shell{display:block;background:var(--cream)}
      .qatt-ledger{display:none}

      .qatt-form-side{position:relative;z-index:1;background:var(--cream);
        min-height:calc(100vh - 4rem);padding:32px 22px 40px;
        display:flex;align-items:stretch;justify-content:center}
      .qatt-form-side::before{opacity:.10}
      .qatt-form-side::after{top:18px;right:20px;font-size:18px;opacity:.4}
      .qatt-corner-mark{display:none}

      /* Flex column so the .qatt-actions cluster can be pushed to the bottom (thumb zone) */
      .qatt-form-wrap{background:transparent;padding:0;max-width:420px;box-shadow:none;
        display:flex;flex-direction:column;width:100%}
      .qatt-form-wrap::before,.qatt-form-wrap::after{display:none}
      .qatt-actions{margin-top:auto;padding-top:40px}

      .qatt-mbrand{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;
        padding-bottom:18px;border-bottom:1px solid var(--rule-cream)}
      .qatt-mbrand__brand{display:flex;align-items:baseline;gap:3px;line-height:1}
      .qatt-mbrand__q{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;color:var(--ink)}
      .qatt-mbrand__dot{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--hot);margin:0 1px;transform:translateY(-2px)}
      .qatt-mbrand__a{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);padding-bottom:4px}
      .qatt-mbrand__meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:right;line-height:1.5}
      .qatt-mbrand__meta b{color:var(--hot);font-weight:500}

      .qatt h1.qatt-title{font-size:clamp(40px,12vw,52px)}
      .qatt-sub{font-size:14px}
      .qatt-google{padding:20px 22px;margin-top:24px}
      .qatt-note{padding:14px 16px}
    }

    @media (max-width:420px){
      .qatt-form-side{padding:28px 18px 36px}
      .qatt-google{padding:18px 20px;font-size:14px}
    }

    /* ───────── DARK MODE ─────────
       Mirror login.html — flip the form side to ink, brighten text + accent.
       The admin-whitelist note also needs its own dark treatment. */
    .dark body .qatt-shell{background:var(--ink)}
    .dark body .qatt-form-side{background:var(--ink)}
    .dark body .qatt-form-side::before{opacity:.05}
    .dark body .qatt-form-side::after{color:var(--cream);opacity:.45}
    .dark body .qatt-corner-mark{color:rgba(245,239,225,.55)}
    .dark body .qatt-corner-mark b{color:#60a5fa}

    .dark body .qatt-eyebrow{color:rgba(245,239,225,.78)}
    .dark body .qatt-eyebrow::before{background:rgba(245,239,225,.45)}

    .dark body .qatt h1.qatt-title{color:var(--cream)}
    .dark body .qatt h1.qatt-title em{color:#60a5fa}

    .dark body .qatt-sub{color:rgba(245,239,225,.82)}

    .dark body .qatt-callout{color:rgba(245,239,225,.72)}
    .dark body .qatt-callout__dot{background:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.22)}

    /* Admin-whitelist note — readable on dark surface */
    .dark body .qatt-note{background:rgba(245,239,225,.06);border-color:rgba(96,165,250,.35)}
    .dark body .qatt-note__tag{color:#60a5fa;background:var(--ink)}
    .dark body .qatt-note__head{color:var(--cream)}
    .dark body .qatt-note__body{color:rgba(245,239,225,.75)}

    /* Google CTA flips: cream button on dark bg pops harder */
    .dark body .qatt-google{background:var(--cream);color:var(--ink)}
    .dark body .qatt-google::after{background:#60a5fa}
    .dark body .qatt-google__g{background:var(--ink)}

    .dark body .qatt-helper{color:rgba(245,239,225,.65)}
    .dark body .qatt-helper::before{color:#60a5fa}

    .dark body .qatt-signup{color:rgba(245,239,225,.68)}
    .dark body .qatt-signup a{color:var(--cream);border-bottom-color:#60a5fa}
    .dark body .qatt-signup a:hover{color:#60a5fa}

    /* Left ledger — already dark, just brighten the blue accents to match */
    .dark body .qatt-marquee__dot{background:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.22)}
    .dark body .qatt-marquee__sep{color:#60a5fa}
    .dark body .qatt-roll__head b{color:#60a5fa}
    .dark body .qatt-roll__check{background:#60a5fa;color:var(--ink)}
    .dark body .qatt-qr-frame::after{color:#60a5fa}
    .dark body .qatt-qr-corner{border-color:#60a5fa}
    .dark body .qatt-qr-offset{background:#60a5fa;box-shadow:inset 0 0 0 1px #3b82f6}
    .dark body .qatt-qr-scan{
      background:linear-gradient(90deg,transparent,#60a5fa 30%,#60a5fa 70%,transparent);
      box-shadow:0 0 12px #60a5fa
    }
    .dark body .qatt-brand__dot{color:#60a5fa}