/* ============================================================
   DIAL TONE, live. Scoped under body.dt so only the screens
   Brian set live wear it: Book (creator pages), Call, Studio,
   Admin. The homepage and the rest keep the stock system.
   Source of truth: lang-dialtone.css + dt-* mockups.
   One deviation by standing rule: gold stays #E8A61A in light.
   ============================================================ */
body.dt{
  --gold:#E8A61A; --goldText:#E8A61A; --onGold:#241800; --goldWash:rgba(232,166,26,.13);
  --card:#141416; --card2:#1D1D21; --field:#0A0A0C;
}
[data-theme="light"] body.dt{
  --goldText:#E8A61A; --goldWash:rgba(232,166,26,.18);
  --card:#fff; --card2:#EAEAEF; --field:#fff;
}

/* type: the condensed uppercase voice */
.dt h1,.dt h2.big,.dt .big{font-stretch:condensed;text-transform:uppercase;font-weight:900;letter-spacing:-.03em;line-height:.96}
.dt .lbl,.dt .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--goldText)}
.dt .fig{font-stretch:condensed;font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.03em}

/* buttons become full pills */
.dt .btn{border-radius:999px;font-weight:800;min-height:46px;transition:transform .12s}
.dt .btn:active{transform:scale(.97)}
.dt .btn.sm{min-height:40px}
.dt .btn.lg{min-height:54px;font-size:17px}

/* surfaces */
.dt .card{border-radius:20px;background:var(--card);border:1px solid var(--hair)}
.dt .card h3{font-stretch:condensed;text-transform:uppercase;letter-spacing:-.02em;font-weight:900;font-size:21px}
.dt .notice{background:var(--goldWash);border:1px solid rgba(232,166,26,.35);border-radius:16px}

/* stat tiles: numbers go enormous */
.dt .stat{border-radius:20px;padding:20px}
.dt .stat .v{font-stretch:condensed;font-weight:900;letter-spacing:-.035em;font-size:clamp(32px,5.4vw,44px);line-height:.98;font-variant-numeric:tabular-nums}
.dt .stat .k{font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--tert);margin-top:10px}

/* the signature ring */
.dt .ringwrap{position:relative;display:inline-flex;flex:none}
.dt .ringwrap .w{position:absolute;inset:0;border:2px solid var(--gold);border-radius:50%;opacity:0;animation:dtrp 2.6s ease-out infinite;pointer-events:none}
.dt .ringwrap .w:nth-of-type(2){animation-delay:.87s}
.dt .ringwrap .w:nth-of-type(3){animation-delay:1.74s}
@keyframes dtrp{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.dt .ringwrap .w{animation:none;opacity:.3;transform:scale(1.2)}}

/* booking: options where the price is the loudest thing */
.dt .opt{border:2px solid var(--hair);border-radius:20px;padding:18px 22px;min-height:76px;background:var(--card);transition:border-color .14s,background .14s}
.dt .opt .mn{font-stretch:condensed;text-transform:uppercase;font-weight:900;font-size:24px;letter-spacing:-.025em;line-height:1.05}
.dt .opt .note{color:var(--sub);font-size:13.5px;margin-top:4px;background:transparent;border:0;padding:0;display:block}
.dt .opt .p{font-stretch:condensed;font-weight:900;font-size:clamp(30px,5vw,38px);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;background:transparent;border-radius:0;padding:0;color:var(--text)}
.dt .opt.on{border-color:var(--gold);background:var(--goldWash)}
.dt .opt.on .p{color:var(--goldText)}

/* time chips */
.dt .times{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:620px){.dt .times{grid-template-columns:repeat(4,1fr)}}
.dt .tm{background:var(--card);border:1.5px solid var(--hair);border-radius:999px;padding:13px 12px;min-height:48px;font-size:14.5px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:center;text-align:center;font-variant-numeric:tabular-nums;width:auto}
.dt .tm.on{background:var(--gold);border-color:var(--gold);color:var(--onGold);font-weight:900}

/* fields: pill inputs, gold $ inside */
.dt .field label{font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--tert)}
.dt .field input,.dt select.field{background:var(--field);border:1.5px solid var(--hair);border-radius:999px;min-height:48px;font-weight:700;padding:11px 18px}
.dt .field input:focus{border-color:var(--gold)}
.dt .moneyfld{background:var(--field);border:1.5px solid var(--hair);border-radius:999px;min-height:48px;padding:0 16px}
.dt .moneyfld .sign{color:var(--goldText);font-stretch:condensed;font-size:20px;font-weight:900}
.dt .moneyfld input{font-weight:700}
.dt .daychip{border-radius:999px;min-height:46px;min-width:42px;font-weight:700}
.dt .daychip.on{background:var(--gold);border-color:var(--gold);color:var(--onGold);font-weight:900}

/* the receipt: dt-book's aside */
.dt .receipt{background:var(--card);border:1px solid var(--hair);border-radius:20px;overflow:hidden}
@media(min-width:940px){.dt .receipt{position:sticky;top:76px}}
.dt .receipt .rh{padding:17px 20px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:12px}
.dt .receipt .rb{padding:4px 20px}
.dt .rl{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair2,rgba(255,255,255,.06));font-size:15px}
.dt .rl .k{color:var(--sub);font-weight:600;font-size:14px}
.dt .rl .v{font-variant-numeric:tabular-nums;font-weight:800;text-align:right}
.dt .rl.due{display:block;border-bottom:0;padding:18px 0 6px;text-align:center}
.dt .rl.due .k{display:block;color:var(--tert);font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.dt .rl.due .v{display:block;color:var(--goldText);font-stretch:condensed;font-weight:900;font-size:clamp(48px,8vw,64px);letter-spacing:-.04em;line-height:1;margin-top:6px;text-align:center}
.dt .receipt .rf{padding:14px 20px 20px}
.dt .receipt .fine{text-align:center}
.dt .pillgold{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:800;border:1.5px solid rgba(232,166,26,.45);color:var(--goldText);white-space:nowrap}
.dt .who{min-width:0}
.dt .who>div{min-width:0}
@media(max-width:620px){.dt .who .pillgold{white-space:normal;line-height:1.4}}

/* dt-book grid + mobile dock */
.dt .pp{display:flex;flex-direction:column;gap:16px;padding:16px 0 0;position:static}
.dt .pp .who-wrap{order:1}
.dt .pp .ainfo{order:2;margin-top:0}
.dt .pp .bookgrid{order:3}
.dt .pp .dock{order:4}
.dt .pp .book{position:static;top:auto;right:auto;width:auto;background:transparent;border:0;border-radius:0;padding:0;order:0}
.dt .bookgrid{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,28px);align-items:start}
@media(min-width:940px){.dt .bookgrid{grid-template-columns:1fr 360px;gap:34px}}
.dt .dock{position:sticky;bottom:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--hair);padding:13px clamp(18px,4vw,40px) calc(14px + env(safe-area-inset-bottom));margin-top:20px}
.dt .dock .l1{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.dt .dock .l1 .t{color:var(--sub);font-size:14px;font-weight:600}
.dt .dock .l1 .v{font-stretch:condensed;font-weight:900;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--goldText)}
.dt .deskcta{display:none}
@media(min-width:940px){.dt .deskcta{display:block}.dt .dock{display:none}}

/* studio: dt-studio's two-column working grid */
.dt .sgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px;align-items:start}
@media(min-width:980px){.dt .sgrid{grid-template-columns:1fr 1fr}}
.dt .sgrid .col{min-width:0}
.dt .sgrid .col > .card + .card,.dt .sgrid .col > * + *{margin-top:16px}
.dt .qrow{background:var(--card);border:1px solid var(--hair);border-radius:20px}
.dt .qrow .pill{border:1.5px solid rgba(232,166,26,.45);color:var(--goldText);background:transparent;border-radius:999px;font-weight:800}

/* the call: dt-call's chrome */
.dt .callfs .tmr2{font-stretch:condensed;font-weight:900;font-size:19px;letter-spacing:-.02em;color:var(--goldText);background:rgba(0,0,0,.5)}
.dt .callfs .cbtn{border-radius:999px;font-weight:800;min-height:48px}
.dt .callfs .cbtn.addtime{background:var(--gold);color:var(--onGold)}
.dt .callfs .cbtn.addtime .amt{font-stretch:condensed;font-weight:900;margin-left:6px}

/* operator console in the same voice (skin over the live admin chrome) */
.dt .optop h1{font-stretch:condensed;text-transform:uppercase;font-weight:900;letter-spacing:-.02em;font-size:24px}
.dt .opstat{border-radius:20px}
.dt .opstat .v{font-stretch:condensed;font-weight:900;letter-spacing:-.03em;font-size:clamp(26px,3vw,38px)}
.dt .opside .grp{letter-spacing:1.5px}
.dt .opside a{border-radius:999px;font-weight:800;min-height:44px}
.dt .opside a.on{background:var(--gold);color:var(--onGold)}
.dt .opside a.on .ic{opacity:1}
.dt .opside a.on .ct{background:var(--onGold);color:var(--gold)}
.dt .optabs a{border-radius:999px;min-height:40px;font-weight:700}
.dt .optabs a.on{background:var(--gold);border-color:var(--gold);color:var(--onGold)}
.dt .abtn{border-radius:999px;font-weight:800}
.dt .abtn.gold{background:var(--gold);color:var(--onGold)}