/*
 * Partner portal — sign in and join.
 *
 * The light "letterhead" skin, from the owner's techdeals-auth-light-v2 mock.
 *
 * EVERYTHING IS SCOPED UNDER .tdauth. The dashboard this page shares a document
 * with is dark and defines its own variables; an unscoped :root here would
 * repaint it. The scope is what lets the two live together while the dashboard
 * is rebuilt separately.
 */

.tdauth{
  --bg:#F2EEE6; --bg2:#E9E4D9; --panel:#FCFAF5; --panel2:#F4F0E6;
  --line:rgba(138,106,42,.30); --line2:rgba(28,26,20,.11);
  --text:#15181E; --dim:#6B6A62;
  --accent:#8A6A2A; --accent-hi:#B4923F; --accent-ink:#FFFDF4;
  --good:#2E7D63; --warn:#A8703A; --bad:#B24A42;
  --font-display:"Bodoni Moda",Georgia,serif;
  --font-ui:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Azeret Mono",ui-monospace,Menlo,monospace;
  --font-script:"Pinyon Script",Georgia,"Times New Roman",serif;

  position:fixed; inset:0; overflow-y:auto; z-index:50;
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.tdauth *{box-sizing:border-box}
.tdauth::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.85;
  background:
    repeating-linear-gradient(30deg,transparent 0 26px,rgba(28,26,20,.055) 26px 27px),
    repeating-linear-gradient(-30deg,transparent 0 26px,rgba(28,26,20,.055) 26px 27px),
    radial-gradient(110% 70% at 18% -12%,rgba(138,106,42,.10),transparent 62%);
}
.tdauth button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.tdauth input{font:inherit;color:inherit}
.tdauth a{color:var(--accent);text-decoration:none}
.tdauth :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.tdauth ::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------------- layout ---------------- */
.tdauth .auth{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1fr;grid-template-rows:auto 1fr;min-height:100vh}
.tdauth .side{grid-column:1;grid-row:2;min-width:0}
.tdauth .pane{grid-column:2;grid-row:2;min-width:0}

/*
 * min-width:0 above is load-bearing, not tidying.
 *
 * A grid item's automatic minimum size is its MIN-CONTENT width, so any child
 * that reports a large intrinsic width drags the whole track out with it and
 * the page grows wider than the window. The six OTP boxes did exactly that: an
 * <input> with no size attribute reports about 255px (the default size=20),
 * and six of those plus gaps and padding came to 1871px. On any window
 * narrower than that the document overflowed, and the masthead -- which spans
 * every column -- centred itself on the 1871px document rather than on the
 * part you could see, so it sat right of centre until you scrolled across.
 *
 * The inputs now carry size="1", which removes the phantom width at source.
 * This stays as the guard, so the next wide child cannot do it again.
 */

/*
 * One thing on the screen: the sign-in code step.
 *
 * Someone reading six digits off their phone does not need the card or the
 * pitch beside them -- they need the six boxes. auth.js puts .solo on .auth
 * for that step alone and takes it off again on the way back.
 *
 * The grid narrows to a SINGLE track rather than merely hiding the side
 * column, and .pane is moved off column 2. Both matter: leaving the two-track
 * template with an empty first column would keep the pane in the right half,
 * and leaving grid-column:2 against a one-track template makes the browser
 * invent a second track -- which is a page wider than the window, a horizontal
 * scrollbar, and a masthead centred on the scrollable width instead of on what
 * you can see.
 *
 * The masthead itself needs no rule here. It already spans 1 / -1, so it
 * follows the grid down to one column and stays centred over the pane.
 */
.tdauth .auth.solo{grid-template-columns:1fr}
.tdauth .auth.solo .side{display:none}
.tdauth .auth.solo .pane{grid-column:1 / -1;justify-content:center}

/* Visible to a screen reader, to nobody else. The masthead below is
   decorative -- aria-hidden -- so the page still needs a real heading. */
.tdauth .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:-1px}

/* ── the engraved wordmark across the head of the page ─────────────── */
.tdauth .seam{
  grid-column:1 / -1;grid-row:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:34px 24px 26px;border-bottom:1px solid var(--line2);white-space:nowrap;
}
.tdauth .seam .script{
  font-family:var(--font-script);font-weight:400;
  font-size:clamp(48px,6.2vw,96px);line-height:.9;
  color:var(--accent);padding:0 .1em;
}
.tdauth .seam .said{
  font-family:var(--font-mono);font-size:clamp(11px,1.05vw,14px);
  letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;color:var(--dim);
  position:relative;
}

/* ── the gold that travels through PARTNER PORTAL ──────────────────────
   A single band of gold sweeping left to right, so the letters light up in
   turn and the run loops. Done by clipping a moving gradient to the glyphs
   rather than animating each letter: one element, one compositor-friendly
   background-position tween, and it does not care how long the word is.

   Guarded by @supports because the technique needs transparent text to show
   the background through. Without the guard, a browser that cannot clip to
   text would paint transparent letters on a transparent background and the
   wordmark would simply vanish — a silent failure on the sign-in page.

   The band is narrow (about a fifth of the sweep) and the rest of the
   gradient sits at the normal --dim, so this reads as a highlight passing
   over the text, not as gold text.                                        */
/* The two gold tones of the sweep, as one knob.
   --shim-edge  the shoulders, where gold meets the resting grey
   --shim-core  the bright centre of the band
   Both are literal hex on purpose: --accent and --accent-hi are the site's
   brand colours and are used by buttons, links and rules everywhere else, so
   tuning the shimmer must not reach them. Currently at 88% of the original
   values -- see the note under the mobile block. */
.tdauth .seam .said{
  --shim-edge:#795E25;   /* #8A6A2A (--accent) at 88% */
  --shim-core:#D3BE88;   /* #F0D89B            at 88% */
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tdauth .seam .said{
    background-image:linear-gradient(100deg,
      var(--dim) 0%,  var(--dim) 44%,
      var(--shim-edge) 47%, var(--shim-core) 50%, var(--shim-edge) 53%,
      var(--dim) 56%, var(--dim) 100%);
    background-size:280% 100%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:tdSaidShimmer 3.8s linear infinite;
  }
}

/*
 * 100% -> 0%, and the geometry matters.
 *
 * A background-position percentage aligns THAT point of the image with the
 * same point of the box. Because the image is 280% of the box, every value
 * between 0% and 100% still covers the box completely — which is the whole
 * trick. An earlier version animated past those bounds (180% -> -80%), which
 * slid the gradient partly off the text; with no-repeat, the letters left
 * outside it clipped to nothing and the wordmark rendered as "ORTAL".
 *
 * At 100% the gold band sits just left of the first letter, at 0% just past
 * the last, so one pass carries it across the whole word and the loop
 * restarts out of sight.
 */
@keyframes tdSaidShimmer{
  from{background-position:100% 0}
  to  {background-position:0% 0}
}

/* ── reduce-motion: the card stops, this does not ──────────────────────────
   `prefers-reduced-motion` is for people who get queasy from MOVEMENT —
   parallax, floating, sliding. The partner card's 9s float is exactly that
   and is correctly switched off further down the file.

   This is a colour gradient travelling through glyphs that do not move a
   pixel: the same class of effect as a colour fade, which reduce-motion
   guidance permits. So it keeps running.

   `!important` is required, not decorative. A blanket

       @media (prefers-reduced-motion:reduce){
         .tdauth *{ animation:none !important }
       }

   further down kills every animation on the page. This rule is more specific
   (0,3,0 against 0,1,0) AND flagged, so it wins that fight — and only inside
   this media query, so nothing changes for everyone else.

   Slowed slightly: without the surrounding motion the sweep is the only thing
   moving, and it reads calmer at 6s.                                        */
@media (prefers-reduced-motion:reduce){
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .tdauth .seam .said{
      animation:tdSaidShimmer 6s linear infinite !important;
    }
  }
}

/* ── small screens: the same sweep, but visible ────────────────────────────
   On a phone the wordmark is 11.5px with .36em letter-spacing, so roughly a
   third of the line is empty space BETWEEN letters. The band spent most of
   its travel in those gaps, with no glyph to catch the colour, and the effect
   read as one letter blinking rather than a highlight moving through a word.

   Two changes, both about visibility rather than speed:

     · a wider band relative to the text (220% image instead of 280%, and
       shoulders at 38/62 instead of 44/56), so several letters are lit at
       once and the sweep reads as continuous;

     · brighter tones — the shoulders were --accent (#8A6A2A), which sits too
       close in luminance to --dim (#6B6A62) to register at this size, so only
       the bright core ever showed. --accent-hi carries at 11.5px.

   The geometry rule from tdSaidShimmer still holds: the image is wider than
   the box, so every position between 100% and 0% covers every letter.        */
@media (max-width:620px){
  .tdauth .seam .said{
    --shim-edge:#9E8137;   /* #B4923F (--accent-hi) at 88% */
    --shim-core:#DACA9E;   /* #F7E6B4               at 88% */
  }
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .tdauth .seam .said{
      background-image:linear-gradient(100deg,
        var(--dim) 0%,  var(--dim) 38%,
        var(--shim-edge) 44%, var(--shim-core) 50%, var(--shim-edge) 56%,
        var(--dim) 62%, var(--dim) 100%);
      background-size:220% 100%;
      /* duration is inherited from the base rule -- one speed everywhere */
    }
  }
}

/* ── on dimming the gold ──────────────────────────────────────────────────
   Both pairs above sit at 88% of the original tones per channel
   (dimmed to 80%, then raised 10% on the owner's eye).

   Worth knowing before dialling further: the sweep is only visible because
   the gold differs from the resting text colour, --dim (#6B6A62). Dimming
   moves the gold TOWARDS that grey, so each step costs more contrast than the
   last, and the desktop edge tone (#6E5522) is now slightly DARKER than the
   grey rather than brighter — the band still reads, but as a shadow passing
   through the word rather than a highlight.

   If it needs to go dimmer still, brighten --dim a touch at the same time, or
   the effect fades out entirely — which is the same failure that made this
   invisible on phones in the first place.                                    */
.tdauth .side{
  padding:46px 46px 42px;display:flex;flex-direction:column;gap:26px;align-items:center;justify-content:flex-start;
  border-right:1px solid var(--line2);
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.25) 62%);
}
.tdauth .pane{display:flex;align-items:flex-start;justify-content:center;padding:46px 32px 42px}
.tdauth .sheet{width:min(452px,100%)}

.tdauth .brand{display:flex;align-items:center;gap:12px}
.tdauth .brand-mark{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:conic-gradient(from 200deg,var(--accent),var(--accent-hi),#8a6b22,var(--accent));
  color:var(--accent-ink);font-family:var(--font-display);font-weight:700;font-size:17px;
  box-shadow:0 4px 14px rgba(138,106,42,.32)
}
.tdauth .brand-name{font-family:var(--font-display);font-size:22px;line-height:1}
.tdauth .brand-sub{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.32em;color:var(--dim);text-transform:uppercase;margin-top:5px}

.tdauth .side-mid{display:flex;flex-direction:column;gap:26px;align-items:center;width:100%}
.tdauth .side-row{display:flex;flex-direction:column;gap:26px;align-items:center;width:100%}
.tdauth .card-col{width:100%;max-width:400px;flex:0 1 auto}
.tdauth .side-copy{width:100%;max-width:400px}
.tdauth .pitch{font-family:var(--font-display);font-size:clamp(26px,3vw,38px);line-height:1.22;font-weight:400;margin:0;max-width:15ch}
.tdauth .pitch em{font-style:italic;color:var(--accent)}
.tdauth .perks{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none}
.tdauth .perks li{display:flex;gap:12px;align-items:baseline;font-size:13.5px;color:var(--dim)}
.tdauth .perks .n{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--accent);flex:none}
.tdauth .side-foot{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;text-align:center;margin-top:6px}

/* ---------------- the card ---------------- */
.tdauth .stage{position:relative;perspective:1500px;width:100%;max-width:400px;margin-inline:auto;container-type:inline-size}

/*
 * The magnifier: a live CLONE of the card, scaled and clipped to a disc.
 *
 * A clone rather than a CSS zoom of the original, because text and
 * gradients then re-render at the larger size instead of being blown up --
 * nothing pixelates. The clone has to be resynced whenever the card's
 * content changes, which is what refreshLoupe() in auth.js is for.
 */
.tdauth .loupe{
  position:absolute;width:176px;height:176px;margin:-88px 0 0 -88px;
  border-radius:50%;overflow:hidden;pointer-events:none;z-index:8;
  opacity:0;transform:scale(.86);transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    0 0 0 1px rgba(138,106,42,.55),
    0 0 0 6px rgba(255,255,255,.30),
    0 16px 34px rgba(40,34,18,.34);
}
.tdauth .loupe.on{opacity:1;transform:scale(1)}
.tdauth .loupe::after{      /* a hint of glass across the top of the disc */
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.20),transparent 42%);
}
.tdauth .loupe-in{position:absolute;top:0;left:0;transform-origin:0 0}
.tdauth .loupe-in .face{box-shadow:none;border-radius:19px}
/* flat while the lens is over it, so the disc lines up with what is beneath */
.tdauth .pcard.flat{animation:none;transform:rotateY(0deg) rotateX(0deg)}
.tdauth .pcard{position:relative;width:100%;aspect-ratio:1.586/1;transform-style:preserve-3d;will-change:transform;
  transition:transform 1s cubic-bezier(.2,.85,.25,1);animation:tdaFloat 9s ease-in-out infinite}
@keyframes tdaFloat{0%,100%{transform:rotateY(-13deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(-7deg) rotateX(3deg) translateY(-10px)}}
.tdauth .pcard.still{animation:none}
.tdauth .face{
  position:absolute;inset:0;border-radius:19px;overflow:hidden;transform:translateZ(0);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 26px 46px rgba(40,34,18,.28),0 3px 9px rgba(40,34,18,.10);border:1px solid rgba(255,255,255,.13);
  color:#E9EDF7;
  background:
    repeating-linear-gradient(45deg,rgba(200,162,74,.10) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(-45deg,rgba(159,182,217,.06) 0 6px,transparent 6px 12px),
    linear-gradient(140deg,#0B1226,#1B2A4E 55%,#070C1A);
}
.tdauth .face .sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(58% 48% at var(--mx,72%) var(--my,16%),rgba(255,255,255,.3),rgba(255,255,255,.04) 42%,transparent 68%)}
.tdauth .f-in{position:relative;z-index:2;padding:clamp(15px,4.4cqw,24px);display:flex;flex-direction:column;height:100%}
.tdauth .c-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tdauth .c-brand{font-family:var(--font-display);font-size:clamp(12px,3.2cqw,18px);letter-spacing:.16em;text-transform:uppercase;line-height:1}
.tdauth .c-circle{font-family:var(--font-mono);font-size:clamp(6px,1.6cqw,8.5px);letter-spacing:.34em;text-transform:uppercase;opacity:.7;margin-top:6px}
.tdauth .c-state{font-family:var(--font-mono);font-size:clamp(6px,1.55cqw,8.5px);letter-spacing:.22em;text-transform:uppercase;
  border:1px solid rgba(200,162,74,.55);color:#C8A24A;padding:5px 9px;border-radius:99px;white-space:nowrap;transition:.4s}
.tdauth .c-state.live{border-color:#7ED3A6;color:#7ED3A6}
.tdauth .chip{width:clamp(30px,10cqw,44px);aspect-ratio:4/3;border-radius:5px;margin-top:clamp(12px,4cqw,20px);flex:none;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#e8cf90,#b48a34 45%,#f4e6bb 60%,#9c7526);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.tdauth .c-mid{margin-top:auto}
.tdauth .c-pan{font-family:var(--font-mono);font-weight:500;font-size:clamp(12px,3.5cqw,20px);letter-spacing:.2em;transition:.3s}
.tdauth .c-name{font-family:var(--font-mono);font-size:clamp(8px,2.1cqw,11px);letter-spacing:.2em;text-transform:uppercase;opacity:.82;margin-top:7px;min-height:1.2em;transition:.3s}
.tdauth .c-bal{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:clamp(11px,3.4cqw,18px)}
.tdauth .c-lbl{font-family:var(--font-mono);font-size:clamp(6px,1.55cqw,8.5px);letter-spacing:.26em;text-transform:uppercase;opacity:.65}
.tdauth .c-amt{font-family:var(--font-display);font-size:clamp(17px,5.4cqw,31px);line-height:1;margin-top:6px}
.tdauth .c-amt sup{font-family:var(--font-mono);font-size:.36em;letter-spacing:.12em;vertical-align:.9em;opacity:.7;margin-right:5px}
.tdauth .c-exp{font-family:var(--font-mono);font-size:clamp(6px,1.5cqw,8.5px);letter-spacing:.2em;text-transform:uppercase;opacity:.6;text-align:right;line-height:1.7}
.tdauth .caption{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-top:16px;text-align:center}

/* ---------------- tabs ---------------- */
.tdauth .tabs{display:flex;border-bottom:1px solid var(--line2);margin-bottom:28px}
.tdauth .tab{flex:1;padding:13px 8px;font-size:14.5px;color:var(--dim);position:relative;transition:.22s;font-weight:500}
.tdauth .tab:hover{color:var(--text)}
.tdauth .tab.on{color:var(--text)}
.tdauth .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}

/* ---------------- stepper ---------------- */
.tdauth .steps{display:flex;align-items:center;margin-bottom:26px}
.tdauth .stp{display:flex;align-items:center;gap:11px;flex:none}
.tdauth .stp .bead{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;
  font-family:var(--font-mono);font-size:11px;color:var(--dim);transition:.3s;flex:none}
.tdauth .stp .lb{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);transition:.3s;white-space:nowrap}
.tdauth .stp.on .bead{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px rgba(138,106,42,.15)}
.tdauth .stp.on .lb{color:var(--text)}
.tdauth .stp.done .bead{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tdauth .jn{flex:1;height:1px;background:var(--line2);margin:0 12px;position:relative;overflow:hidden}
.tdauth .jn i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.tdauth .jn.done i{transform:scaleX(1)}

/* ---------------- form ---------------- */
.tdauth h1.h{font-family:var(--font-display);font-weight:400;font-size:28px;margin:0 0 8px;letter-spacing:.005em}
.tdauth .sub{color:var(--dim);font-size:13.5px;margin:0 0 24px;max-width:44ch}
.tdauth .fld{margin-bottom:17px}
.tdauth .fld label{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.tdauth .fld label .opt{text-transform:none;letter-spacing:.02em;font-family:var(--font-ui);font-size:11px;opacity:.7;margin-left:7px}
.tdauth .inp{
  width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--line2);
  background:var(--panel);outline:none;font-size:14.5px;transition:.2s;
  box-shadow:inset 0 1px 2px rgba(28,26,20,.05)
}
.tdauth .inp::placeholder{color:var(--dim);opacity:.75}
.tdauth .inp:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(138,106,42,.13)}
.tdauth .inp.bad{border-color:var(--bad)}
.tdauth .hint{font-size:11.5px;color:var(--dim);margin-top:7px;line-height:1.5}
.tdauth .hint.ok{color:var(--good)}
.tdauth .hint.no{color:var(--bad)}
.tdauth .err{font-size:11.5px;color:var(--bad);margin-top:7px;display:none}
.tdauth .err.show{display:block}
.tdauth .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* A whole-panel notice: a wrong password, an application still under review. */
.tdauth .notice{display:none;padding:12px 15px;border-radius:11px;font-size:13px;margin-bottom:18px;
  border:1px solid var(--line2);background:var(--panel2);line-height:1.55}
.tdauth .notice.show{display:block}
.tdauth .notice.bad{border-color:rgba(178,74,66,.4);background:rgba(178,74,66,.07);color:#7E2F29}
.tdauth .notice.wait{border-color:rgba(168,112,58,.4);background:rgba(168,112,58,.08);color:#71481D}

.tdauth .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 20px;border-radius:12px;
  font-size:14.5px;font-weight:600;transition:.22s;border:1px solid transparent}
.tdauth .btn.solid{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--accent-ink);box-shadow:0 2px 8px rgba(138,106,42,.28)}
.tdauth .btn.solid:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.tdauth .btn.solid:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.tdauth .btn.line{border-color:var(--line2);color:var(--text);font-weight:500}
.tdauth .btn.line:hover{background:var(--line2)}
.tdauth .btn.slim{width:auto;padding:11px 17px;font-size:13px}
.tdauth .btn.busy{position:relative;color:transparent}
.tdauth .btn.busy::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:tdaSpin .7s linear infinite}
@keyframes tdaSpin{to{transform:rotate(360deg)}}
.tdauth .row{display:flex;gap:11px;align-items:center;margin-top:22px}
.tdauth .meta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:12.5px;color:var(--dim)}
.tdauth .link{color:var(--accent);font-size:12.5px}
.tdauth .link:hover{color:#5F4718}

/* password */
.tdauth .pwwrap{position:relative}
.tdauth .peek{position:absolute;right:11px;top:50%;transform:translateY(-50%);padding:6px 9px;border-radius:8px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.tdauth .peek:hover{color:var(--text);background:var(--line2)}
.tdauth .meter{display:flex;gap:4px;margin-top:9px}
.tdauth .meter i{flex:1;height:3px;border-radius:99px;background:var(--line2);transition:.3s}
.tdauth .meter i.a{background:var(--bad)}
.tdauth .meter i.b{background:var(--warn)}
.tdauth .meter i.c{background:var(--good)}

/* otp */
.tdauth .otp{display:flex;gap:9px;margin-bottom:6px}
.tdauth .otp input{
  flex:1;min-width:0;aspect-ratio:1/1.15;text-align:center;border-radius:11px;border:1px solid var(--line2);
  background:var(--panel);outline:none;font-family:var(--font-mono);font-size:20px;transition:.2s
}
.tdauth .otp input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(138,106,42,.13)}
.tdauth .otp input.filled{border-color:rgba(138,106,42,.5);color:var(--accent)}
.tdauth .sent{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;background:var(--panel2);
  border:1px solid var(--line2);font-size:12.5px;color:var(--dim);margin-bottom:18px}
.tdauth .sent b{color:var(--text);font-family:var(--font-mono);font-size:12.5px;font-weight:500}

/* uploads */
.tdauth .drop{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;cursor:pointer;
  border:1px dashed var(--line2);background:var(--panel);transition:.22s;width:100%;text-align:left
}
.tdauth .drop:hover{border-color:var(--accent);background:var(--panel2)}
.tdauth .drop.has{border-style:solid;border-color:rgba(46,125,99,.5);background:rgba(46,125,99,.05)}
.tdauth .thumb{width:52px;height:52px;border-radius:10px;flex:none;background:var(--panel2);border:1px solid var(--line2);
  display:grid;place-items:center;overflow:hidden}
.tdauth .thumb.round{border-radius:50%}
.tdauth .thumb img{width:100%;height:100%;object-fit:cover}
.tdauth .thumb svg{opacity:.5}
.tdauth .drop .t{font-size:13.5px;font-weight:500;display:block}
.tdauth .drop .s{font-size:11.5px;color:var(--dim);margin-top:3px;display:block}
.tdauth .drop .ok{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--good);text-transform:uppercase;display:none}
.tdauth .drop.has .ok{display:block}

.tdauth .check{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--dim);cursor:pointer;margin-top:6px}
.tdauth .check input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border-radius:5px;border:1px solid var(--line2);flex:none;margin-top:1px;transition:.2s;cursor:pointer;position:relative}
.tdauth .check input:checked{background:var(--accent);border-color:var(--accent)}
.tdauth .check input:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}

.tdauth .pane-view{display:none;animation:tdaRise .45s cubic-bezier(.2,.8,.2,1)}
.tdauth .pane-view.on{display:block}
@keyframes tdaRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* done */
.tdauth .done{text-align:center}
.tdauth .done .seal{width:62px;height:62px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;
  border:1px solid var(--accent);background:radial-gradient(circle at 34% 30%,rgba(138,106,42,.22),transparent 66%);
  font-family:var(--font-display);font-size:26px;color:var(--accent)}
.tdauth .codebox{border:1px solid var(--line);border-radius:13px;padding:19px;margin:22px 0 8px;
  background:linear-gradient(135deg,rgba(138,106,42,.12),transparent 60%),var(--panel2)}
.tdauth .codebox .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.tdauth .codebox .v{font-family:var(--font-mono);font-weight:600;font-size:25px;letter-spacing:.24em;color:var(--accent);margin-top:10px;word-break:break-all}

.tdauth .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,24px);z-index:99;padding:12px 20px;border-radius:11px;
  background:var(--panel2);border:1px solid var(--line);font-size:13px;opacity:0;pointer-events:none;
  transition:.35s cubic-bezier(.2,.8,.2,1);box-shadow:0 14px 34px rgba(40,34,18,.20);max-width:min(90vw,420px);text-align:center}
.tdauth .toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:960px){
  .tdauth .auth{grid-template-columns:1fr}
  .tdauth .seam,.tdauth .side,.tdauth .pane{grid-column:auto;grid-row:auto}
  .tdauth .seam{padding:24px 18px 20px;gap:8px}
  .tdauth .seam .script{font-size:clamp(42px,11.5vw,70px)}
  .tdauth .seam .said{font-size:11.5px;letter-spacing:.36em;text-indent:.36em}
  .tdauth .side{border-right:none;border-bottom:1px solid var(--line2);padding:20px 22px 24px;gap:20px;justify-content:center}
  .tdauth .pane{padding:28px 22px 40px;align-items:center}
  .tdauth .side-mid{margin:0;gap:20px}
  .tdauth .side-row{flex-direction:row;align-items:center;gap:22px}
  .tdauth .card-col{flex:0 0 auto;width:min(280px,45vw)}
  .tdauth .side-copy{flex:1;max-width:none}
  .tdauth .pitch{font-size:21px;max-width:none;flex:1}
  .tdauth .perks,.tdauth .side-foot{display:none}
  .tdauth .stage{max-width:none}
  .tdauth .caption{display:none}
}

/* ---- phone ---- */
@media (max-width:620px){
  .tdauth .seam{padding:20px 16px 16px;gap:7px}
  .tdauth .seam .script{font-size:clamp(38px,13vw,56px)}
  .tdauth .side{padding:14px 18px 20px;gap:16px}
  .tdauth .side-mid{gap:14px}
  .tdauth .side-row{flex-direction:column;gap:14px}
  .tdauth .card-col{width:min(300px,78vw)}
  .tdauth .pitch{display:none}                  /* the card is the pitch on a phone */
  .tdauth .stage{max-width:none}
  .tdauth .caption{display:block;text-align:center;margin-top:12px;font-size:8.5px}

  .tdauth .pane{padding:22px 18px 24px}
  .tdauth .tabs{margin-bottom:22px}
  .tdauth .tab{padding:15px 6px;font-size:15px}  /* 48px tap target */

  .tdauth h1.h{font-size:23px}
  .tdauth .sub{font-size:13px;margin-bottom:20px}
  .tdauth .two{grid-template-columns:1fr;gap:0}
  .tdauth .inp{padding:14px 15px;font-size:16px} /* 16px stops iOS zooming on focus */
  .tdauth .otp input{font-size:19px;border-radius:10px}
  .tdauth .otp{gap:7px}
  .tdauth .stp .lb{display:none}
  .tdauth .jn{margin:0 9px}
  .tdauth .steps{margin-bottom:22px}
  .tdauth .drop{padding:13px 12px;gap:12px}
  .tdauth .thumb{width:48px;height:48px}

  /* the primary action stays reachable at the bottom of the screen */
  .tdauth .row{
    position:sticky;bottom:0;z-index:5;margin-top:20px;
    padding:14px 0 calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,transparent,var(--bg) 34%);
  }
  .tdauth .btn{padding:15px 20px}
  .tdauth .btn.slim{flex:none;width:auto}
  .tdauth .meta{flex-wrap:wrap;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .tdauth *{transition-duration:.001ms !important;animation:none !important}
  .tdauth .pcard{transform:rotateY(-10deg) rotateX(5deg)}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Guided capture
 *
 * A dark stage inside the light skin, deliberately: the photograph is the
 * subject and paper tones around a live camera feed make it harder to judge
 * exposure. The guide colour is the accent gold rather than the old teal, so
 * it belongs to this design rather than the one before it.
 * ───────────────────────────────────────────────────────────────────────── */
.tdauth .capwrap{
  display:none;position:fixed;inset:0;z-index:120;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(18,15,9,.86);backdrop-filter:blur(3px);
}
.tdauth .capwrap.on{display:flex}
.tdauth .capsheet{
  width:min(420px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:20px;box-shadow:0 26px 60px rgba(20,16,8,.45);
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.tdauth .captitle{
  font-family:var(--font-display);font-size:20px;margin-bottom:14px;text-align:center;
}
.tdauth .capstage{
  position:relative;border-radius:13px;overflow:hidden;background:#0E0C08;
  border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;
}
.tdauth .capstage video{width:100%;height:100%;object-fit:cover;display:none}
.tdauth .capstage video.on{display:block}
.tdauth .capguide{position:absolute;inset:0;pointer-events:none}
.tdauth .capguide svg{width:100%;height:100%;display:block}
.tdauth .capfeed{
  font-size:12.5px;color:var(--dim);min-height:34px;margin-top:12px;text-align:center;
  line-height:1.5;
}
.tdauth .capfeed.ok{color:var(--good)}
.tdauth .capfeed.warn{color:var(--warn)}
.tdauth .caprow{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.tdauth .caprow .btn.solid{flex:1 1 100%}
.tdauth .caprow .btn.slim{flex:1}

/* The still that was just taken, shown under its row so a bad one is obvious
   before the form is submitted rather than after an admin rejects it. */
.tdauth .shot{
  display:none;margin-top:10px;border-radius:11px;overflow:hidden;
  border:1px solid var(--line2);background:var(--panel2);
}
.tdauth .shot.on{display:block}
.tdauth .shot img{width:100%;display:block;max-height:220px;object-fit:contain;background:#0E0C08}

@media (max-width:620px){
  .tdauth .capsheet{padding:16px;border-radius:15px}
  .tdauth .capstage{aspect-ratio:3/4}   /* portrait is how a phone is held */
}

/*
 * The `hidden` attribute has to actually hide things.
 *
 * `[hidden]{display:none}` is a user-agent rule with almost no specificity, so
 * any class rule that sets display beats it -- `.tdauth .btn{display:inline-flex}`
 * left the Capture button on screen while capBtn.hidden read true. Anything
 * relying on the attribute was quietly cosmetic until this rule existed.
 */
.tdauth [hidden]{display:none !important}

/* ─────────────────────────────────────────────────────────────────────────
 * Date picker
 *
 * The native control is wrong for a date of birth. It opens on today and
 * makes you travel thirty years backwards a month at a time; the year is
 * reachable only by scrolling a spinner that is barely a target. Month and
 * year are dropdowns here, so any date is three clicks away regardless of how
 * far back it is.
 * ───────────────────────────────────────────────────────────────────────── */
.tdauth .dpwrap{position:relative}

.tdauth .dpfield{
  width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--line2);
  background:var(--panel);outline:none;font-size:14.5px;transition:.2s;text-align:left;
  box-shadow:inset 0 1px 2px rgba(28,26,20,.05);display:flex;align-items:center;gap:10px;
}
.tdauth .dpfield:hover{border-color:var(--line)}
.tdauth .dpfield.open{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(138,106,42,.13)}
.tdauth .dpfield .ph{color:var(--dim);opacity:.75}
.tdauth .dpfield svg{margin-left:auto;opacity:.45;flex:none}

.tdauth .dppop{
  position:absolute;z-index:60;top:calc(100% + 7px);left:0;width:min(310px,100%);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px;
  box-shadow:0 18px 44px rgba(40,34,18,.22);
}
.tdauth .dphead{display:flex;gap:8px;margin-bottom:11px}
.tdauth .dphead select{
  flex:1;min-width:0;padding:9px 10px;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel2);font-size:13.5px;outline:none;color:var(--text);
}
.tdauth .dphead select:focus{border-color:var(--accent)}
.tdauth .dphead select.yr{flex:0 0 96px}

.tdauth .dpdow,.tdauth .dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tdauth .dpdow span{
  text-align:center;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;
  color:var(--dim);text-transform:uppercase;padding-bottom:6px;
}
.tdauth .dpgrid button{
  aspect-ratio:1;border-radius:8px;font-size:13px;color:var(--text);transition:.14s;
  display:grid;place-items:center;
}
.tdauth .dpgrid button:hover:not(:disabled){background:var(--panel2)}
.tdauth .dpgrid button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.tdauth .dpgrid button:disabled{color:var(--line2);cursor:default}
.tdauth .dpgrid span{aspect-ratio:1}          /* leading blanks */

.tdauth .dpfoot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line2);
}
.tdauth .dpfoot .age{font-size:11.5px;color:var(--dim)}

@media (max-width:620px){
  .tdauth .dppop{width:100%}
  .tdauth .dpgrid button{font-size:15px;border-radius:9px}   /* thumb-sized */
  .tdauth .dphead select{padding:11px 10px;font-size:16px}   /* no iOS zoom */
}

/* ─────────────────────────────────────────────────────────────────────────
 * Card verification bar
 *
 * Two phases, and they look different on purpose. Uploading has a real
 * percentage, because the browser knows how many bytes have gone. Reading does
 * not — tesseract offers no progress — so it shimmers rather than counting to
 * a hundred. A determinate bar on an indeterminate wait is a lie with an
 * animation on it.
 * ───────────────────────────────────────────────────────────────────────── */
.tdauth .vbar{
  display:none;height:3px;border-radius:99px;background:var(--line2);
  overflow:hidden;margin-top:9px;position:relative;
}
.tdauth .vbar.on{display:block}
.tdauth .vbar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  transition:width .18s ease;
}
/* Reading: nothing to measure, so it travels instead of filling. */
.tdauth .vbar.indet i{
  width:38%;
  animation:tdaSweep 1.05s ease-in-out infinite;
}
@keyframes tdaSweep{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(300%)}
}
.tdauth .vbar.good i{background:var(--good);width:100%!important;animation:none;transform:none}
.tdauth .vbar.bad  i{background:var(--bad); width:100%!important;animation:none;transform:none}

/* The verdict line, which replaces the note while a check is running. */
.tdauth .vnote{font-size:11.5px;margin-top:7px;line-height:1.5;color:var(--dim);display:flex;gap:7px;align-items:baseline}
.tdauth .vnote.ok{color:var(--good)}
.tdauth .vnote.no{color:var(--bad)}
.tdauth .vnote b{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;flex:none}