/* Liquid studio: chrome, optical glass, blue signal, and deliberate interactive motion. */
@keyframes studio-enter { from { opacity:.5; transform:translateY(14px); filter:blur(3px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes studio-sheen { from { transform:translateX(-160%) skewX(-25deg); } to { transform:translateX(250%) skewX(-25deg); } }
@keyframes studio-breathe { 50% { box-shadow:0 0 0 6px #27975615; } }
@keyframes studio-pulse { 50% { box-shadow:0 0 0 5px #2857cf40; } }
.studio-liquid { --studio-blue:#265be4; --glass-line:#ffffffcc; --chrome-shadow:0 18px 48px #18305617; }
body.tgc-admin [hidden] { display:none!important; }
.studio-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; min-height:360px; margin:0 0 28px; border-radius:24px; overflow:hidden; background:linear-gradient(130deg,#f9fbff 5%,#e4ebf7 48%,#b9c9e7 100%); box-shadow:0 22px 56px #29457418; }
.studio-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 20% 20%,#fff 0%,#fff0 65%),linear-gradient(115deg,#ffffff00 42%,#ffffff99 48%,#ffffff00 54%); }
.studio-hero .studio-hero-copy { padding:44px 38px; align-self:center; z-index:2; pointer-events:none; }
.studio-hero .studio-hero-copy h2 { font-family:Inter,Arial,sans-serif; font-size:56px!important; line-height:1.02!important; font-weight:800!important; letter-spacing:-.04em!important; max-width:10ch; margin:20px 0!important; color:#13223c!important; }
.studio-hero .studio-hero-copy p { color:#415473!important; font-size:16px!important; max-width:38ch; margin:0!important; line-height:1.6; }
.studio-live { display:inline-flex; align-items:center; gap:9px; color:#385371; margin-top:24px; font-size:13px; font-weight:600; }
.studio-live i { width:7px; height:7px; border-radius:50%; background:#2366ed; }
.studio-metal-stage { position:relative; min-height:350px; align-self:stretch; }
.studio-metal { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
.studio-metal-stage.is-grabbing .studio-metal { cursor:grabbing; touch-action:none; }
/* The metal is drawn on one canvas fixed over the whole window, above the page, so a dragged droplet can go anywhere in or out of the hero. .studio-metal above is just the frame that places it. */
.studio-metal-canvas { position:fixed; inset:0; z-index:9990; width:100%; height:100%; pointer-events:none; }
.studio-hero.is-grabbing { cursor:grabbing; }
#tg-client-portal svg.metal-caption,.tgc-admin svg.metal-caption { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:250px; height:60px; overflow:visible; pointer-events:none; fill:none; stroke:none; }
.metal-caption text { fill:#405779; font:500 16px/1.4 Inter,Arial,sans-serif; letter-spacing:.055em; }
.studio-metal { height:calc(100% - 42px); touch-action:none; }
.metal-fallback::before { content:''; position:absolute; width:190px; height:190px; top:20%; left:25%; border-radius:42% 58% 60% 40%; background:linear-gradient(140deg,#fff,#60718d 24%,#f7faff 35%,#19223a 50%,#dfe9fa 62%,#617eae 75%,#fff); box-shadow:14px 22px 30px #1e396232; }
#tg-client-portal { background:linear-gradient(#f6f8fc,#edf2f9 900px,#fff)!important; }
#tg-client-portal .client-workspace { max-width:1380px; }
#tg-client-portal .studio-hero { margin-top:8px; }
/* Client greeting in the public site's headline voice: Archivo 900 italic caps, with the name in the hologram texture. */
#tg-client-portal .studio-hero .studio-hero-copy h2, body.tgc-admin .studio-hero .studio-hero-copy h2 { font-family:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif; font-style:italic; font-weight:900!important; text-transform:uppercase; line-height:.92!important; letter-spacing:-.035em!important; word-spacing:.1em; max-width:none; overflow-wrap:break-word; }
/* Desktop: the greeting fills its half of the card. The longest word (AFTERNOON, or a long name) is about 7.2em, so 13.8cqi runs it to the edge; portal.js shrinks only a name that would not fit. */
#tg-client-portal .studio-hero .studio-hero-copy, body.tgc-admin .studio-hero .studio-hero-copy { container-type:inline-size; }
#tg-client-portal .studio-hero .studio-hero-copy h2, body.tgc-admin .studio-hero .studio-hero-copy h2 { font-size:clamp(40px,13.8cqi,160px)!important; }
/* Dragging the metal must never highlight the greeting. */
.studio-hero { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#tg-client-portal .studio-hero .hero-name, body.tgc-admin .studio-hero .hero-name { display:block; width:fit-content; padding-right:.1em; }
@supports (background-clip:text) or (-webkit-background-clip:text) {
 #tg-client-portal .studio-hero .hero-name, body.tgc-admin .studio-hero .hero-name { background-image:url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif'),linear-gradient(120deg,#4d5d7c 0%,#6d7fa0 45%,#43506d 100%); background-size:220% 220%,100% 100%; background-position:0% 50%,0% 50%; background-blend-mode:multiply; -webkit-background-clip:text; background-clip:text; color:transparent!important; -webkit-text-fill-color:transparent; filter:saturate(2.4) contrast(1.15); animation:tgc-holo-drift 9s ease-in-out infinite alternate; }
}
@keyframes tgc-holo-drift { 0% { background-position:0% 50%,0% 50%; } 100% { background-position:100% 50%,100% 50%; } }
#tg-client-portal .workspace-nav { position:relative; padding:8px 20px; min-height:76px; border:1px solid #fff; border-radius:16px; background:#ffffffd1; backdrop-filter:blur(18px); box-shadow:0 8px 30px #19335d0d; }
#tg-client-portal .workspace-tabs { gap:6px; align-items:center; }
#tg-client-portal .workspace-tabs button { position:relative; padding:14px 20px; border:0; border-radius:10px; transition:color .2s,background .2s,box-shadow .2s,transform .2s; }
#tg-client-portal .workspace-tabs button:hover { background:#e7effe; transform:translateY(-2px); }
/* Payments: in the menu before its page exists, so it does nothing yet. */
#tg-client-portal .workspace-tabs .tab-soon, #tg-client-portal .workspace-tabs .tab-soon:hover { cursor:default; background:transparent; color:var(--muted); transform:none; }
#tg-client-portal .workspace-tabs button[aria-selected=true] { background:#1f55d7; color:white; box-shadow:0 5px 14px #2357ce36; }
#tg-client-portal .workspace-panel:not([hidden]) { animation:studio-enter .38s cubic-bezier(.16,1,.3,1) both; }
#tg-client-portal :is(.pref-group,.overview-grid>section,.delivery-grid>section,.schedule,.delivery-progress) { position:relative; background:linear-gradient(135deg,#ffffffdb,#f6f9ffb8)!important; backdrop-filter:blur(20px) saturate(1.2); border:1px solid #fff; border-radius:18px; box-shadow:var(--chrome-shadow); transition:transform .28s,box-shadow .28s; }
#tg-client-portal .pref-group::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(350px circle at var(--pointer-x,50%) var(--pointer-y,0%),#ffffffdd,#ffffff00 70%); opacity:0; transition:opacity .3s; z-index:0; }
#tg-client-portal .pref-group:hover::before { opacity:.75; }
#tg-client-portal .pref-group>* { position:relative; }
#tg-client-portal .pref-group:hover { box-shadow:0 24px 60px #1b3c701f; }
#tg-client-portal :is(.primary,.secondary,.open-delivery) { transition:transform .2s,box-shadow .2s,background .2s; border-radius:10px; }
#tg-client-portal .primary { background:linear-gradient(135deg,#397bff,#1945ba); box-shadow:0 6px 18px #2056cc2b; }
#tg-client-portal :is(.primary,.secondary,.open-delivery):hover { transform:translateY(-3px); box-shadow:0 10px 22px #174fab26; }
#tg-client-portal :is(.primary,.secondary,.open-delivery):active { transform:scale(.97); }
#tg-client-portal .save-bar { border:1px solid #ffffff3a; background:#182740ed; backdrop-filter:blur(20px); border-radius:16px; }
#tg-client-portal .is-confirmed .status-light { animation:studio-breathe 3s ease-in-out infinite; }
#tg-client-portal .is-live .status-light { animation:studio-pulse 2s ease-in-out infinite; }
#tg-client-portal .live-label .live-dot { animation:studio-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { #tg-client-portal :is(.status-light,.live-dot) { animation:none!important; } }
#tg-client-portal .event-status { border:1px solid #dbe4ea; box-shadow:inset 0 1px #fff; border-radius:20px; }
#tg-client-portal .event-footer { background:linear-gradient(120deg,#17233a,#233d67); border-radius:18px; box-shadow:0 15px 40px #18325722; }
/* Individual control surfaces remain unmistakably interactive. */
#tg-client-portal .studio-select { position:relative; }
#tg-client-portal .studio-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:14px 16px; min-height:54px; border:1px solid #9badc8; border-radius:10px; background:linear-gradient(#fff,#f4f7fd); color:#40516c; text-align:left; box-shadow:0 4px 10px #24416809,inset 0 1px #fff; transition:border-color .2s,box-shadow .2s,transform .2s; }
#tg-client-portal .studio-select-trigger:hover { border-color:#3e75df; box-shadow:0 6px 18px #2459bb1a; transform:translateY(-1px); }
#tg-client-portal .studio-select-trigger.has-answer { color:#1f4283; background:linear-gradient(#fff,#e9f0ff); }
#tg-client-portal .select-chevron { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .25s; margin:0 4px 4px; flex-shrink:0; }
#tg-client-portal .is-open .select-chevron { transform:rotate(225deg); margin-bottom:-4px; }
#tg-client-portal .studio-select-menu { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30; padding:6px; border:1px solid #dce4f0; border-radius:12px; background:#fffffff5; backdrop-filter:blur(22px); box-shadow:0 18px 50px #142f6033; max-height:290px; overflow:auto; animation:studio-enter .2s ease-out; }
#tg-client-portal .pref-group:has(.studio-select.is-open) { z-index:12; }
#tg-client-portal .studio-select-menu button { display:block; width:100%; text-align:left; padding:12px 14px; background:transparent; color:#2d3e58; border:0; border-radius:7px; min-height:44px; transition:background .16s,transform .16s; }
#tg-client-portal .studio-select-menu button:hover,#tg-client-portal .studio-select-menu button:focus-visible { background:#e7efff; transform:translateX(3px); }
#tg-client-portal .studio-select-menu button[aria-selected=true] { background:#245ad9; color:white; }
#tg-client-portal .studio-distance { padding:18px 0 4px; container-type:inline-size; }
#tg-client-portal .distance-value { display:block; color:#163e89; font-size:15px; font-weight:600; margin-bottom:22px; }
#tg-client-portal .amount-track { position:relative; height:36px; width:100%; border-radius:8px; background:#e5eaf2; color:#285ee1; }
#tg-client-portal .amount-track canvas { position:absolute; inset:0; width:100%; height:100%; border-radius:8px; pointer-events:none; }
#tg-client-portal input.amount-range { position:absolute; z-index:2; left:0; top:-4px; appearance:none; width:100%; height:44px; min-height:0; margin:0; padding:0; border:0; border-radius:8px; background:transparent; box-shadow:none; cursor:grab; touch-action:none; }
#tg-client-portal input.amount-range:active { cursor:grabbing; }
#tg-client-portal input.amount-range::-webkit-slider-runnable-track { height:36px; background:transparent; border:0; }
#tg-client-portal input.amount-range::-webkit-slider-thumb { appearance:none; width:28px; height:40px; margin-top:-2px; border:0; border-radius:8px; background:#182740; box-shadow:inset 0 0 0 0 #182740,0 4px 9px #13264030; transition:background-color .28s ease,box-shadow .28s ease; }
#tg-client-portal input.amount-range:hover::-webkit-slider-thumb { box-shadow:0 0 0 3px #285ee130,0 4px 9px #13264030; }
#tg-client-portal input.amount-range::-moz-range-track { height:36px; border:0; background:transparent; }
#tg-client-portal input.amount-range::-moz-range-thumb { width:28px; height:40px; border:0; border-radius:8px; background:#182740; box-shadow:inset 0 0 0 0 #182740,0 4px 9px #13264030; transition:background-color .28s ease,box-shadow .28s ease; }
#tg-client-portal input.amount-range:focus,#tg-client-portal input.amount-range:focus-visible { outline:none; }
#tg-client-portal .is-keys input.amount-range:focus { outline:3px solid #285ee1; outline-offset:5px; }
#tg-client-portal .amount-ticks span { position:absolute; z-index:1; top:16px; left:calc(var(--stop)*(100% - 28px) + 14px); width:4px; height:4px; transform:translateX(-50%); border-radius:50%; background:#18274055; }
#tg-client-portal .amount-ticks span.is-active { background:#182740; }
#tg-client-portal .amount-labels { position:relative; min-height:42px; margin-top:14px; }
#tg-client-portal .amount-labels span { position:absolute; left:calc(var(--stop)*(100% - 28px) + 14px); transform:translateX(-50%); text-align:center; white-space:nowrap; padding:7px 0; margin-top:-7px; font-size:13px; line-height:1.4; color:#536681; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; outline:none; transition:color .2s ease; }
#tg-client-portal .amount-labels span:hover { color:#285ee1; }
#tg-client-portal .amount-labels span:last-child { left:auto; right:0; transform:none; text-align:right; }
#tg-client-portal .amount-labels span.is-selected { color:#163e89; font-weight:700; }
@media (prefers-reduced-motion:no-preference) {
 #tg-client-portal .is-idle input.amount-range::-webkit-slider-thumb { animation:tgc-open-thumb 2.8s ease-in-out infinite; }
 #tg-client-portal .is-idle input.amount-range::-moz-range-thumb { animation:tgc-open-thumb 2.8s ease-in-out infinite; }
}
@keyframes tgc-open-thumb { 0%,100% { box-shadow:0 0 0 2px #285ee133,0 4px 9px #13264030; } 50% { box-shadow:0 0 0 8px #285ee100,0 4px 9px #13264030; } }
@container (max-width:520px) {
 #tg-client-portal .amount-labels { min-height:22px; }
 #tg-client-portal .amount-labels span { display:none; }
 #tg-client-portal .amount-labels span:is(:first-child,:last-child) { display:block; }
 #tg-client-portal .amount-labels span:first-child { left:0; transform:none; text-align:left; }
}
/* WordPress client collection and editing workspace. */
body.tgc-admin #wpcontent { background:linear-gradient(135deg,#e8eef8,#f8faff 65%,#e0e8f7)!important; }
body.tgc-admin .studio-hero { margin-top:18px; }
/* The admin hero matches the client portal's: same card height, same headline, no subheader. */
body.tgc-admin .studio-hero .studio-live { margin-top:16px; }
body.tgc-admin .studio-liquid .postbox { background:linear-gradient(125deg,#fffffff0,#eef4ffcc)!important; border:1px solid #fff!important; border-radius:18px!important; box-shadow:0 16px 45px #29457513!important; backdrop-filter:blur(20px); transition:box-shadow .25s; }
body.tgc-admin .studio-liquid .postbox:hover { box-shadow:0 20px 52px #29457522!important; }
body.tgc-admin #poststuff .postbox-header { background:#ffffff75; border-color:#dbe4f0; border-radius:18px 18px 0 0; }
body.tgc-admin .tgc-task-nav { background:#d7e2f1a8; border:1px solid #fff; border-radius:14px; padding:7px; }
body.tgc-admin .tgc-task-nav button { border-radius:9px; transition:background .2s,transform .2s,box-shadow .2s; }
body.tgc-admin .tgc-task-nav button:hover { transform:translateY(-2px); }
body.tgc-admin .tgc-task-nav button[aria-selected=true] { background:linear-gradient(135deg,#397bff,#1945ba); color:#fff; border-color:#3e70d0; box-shadow:0 5px 14px #254eaa30; }
body.tgc-admin .tgc-task-panel:not([hidden]) { animation:studio-enter .32s ease-out; }
body.tgc-admin .tgc-command-bar { border-radius:14px; background:#ffffffd9; backdrop-filter:blur(18px); box-shadow:0 9px 28px #253d5d14; }
body.tgc-admin .button-primary { background:linear-gradient(135deg,#367bff,#214bbe); border-radius:8px; transition:transform .2s,box-shadow .2s; }
body.tgc-admin .button-primary:hover { transform:translateY(-2px); box-shadow:0 8px 20px #1f4db52b; }
@media (max-width:800px) {
 #tg-client-portal .client-workspace { display:flex; flex-direction:column; }
 #tg-client-portal .workspace-nav { order:-2; margin-bottom:20px; }
 .studio-hero { grid-template-columns:1fr; }
 .studio-hero .studio-hero-copy { padding:30px 28px 0; }
 .studio-hero .studio-hero-copy h2 { font-size:42px!important; max-width:16ch; margin:14px 0!important; }
 /* Phones: the metal shrinks to a corner piece beside the title instead of filling the screen. */
 .studio-hero { min-height:0; }
 .studio-hero .studio-hero-copy { padding-bottom:30px; }
 .studio-hero .studio-hero-copy h2 { padding-right:84px; }
 #tg-client-portal .studio-hero .studio-hero-copy h2, body.tgc-admin .studio-hero .studio-hero-copy h2 { font-size:clamp(30px,8.6vw,42px)!important; }
 .studio-metal-stage { position:absolute; top:14px; right:6px; width:132px; height:132px; min-height:0; z-index:1; }
 .studio-metal { height:100%; }
 #tg-client-portal svg.metal-caption,.tgc-admin svg.metal-caption { display:none; }
 .studio-live { margin-top:14px; }
 #tg-client-portal .workspace-nav { padding:10px 12px; }
 #tg-client-portal .workspace-tabs { width:100%; }
 #tg-client-portal .workspace-tabs button { font-size:13px; padding:14px 5px; white-space:normal; line-height:1.15; }
}
@media (prefers-reduced-motion:reduce) { .studio-liquid *, .studio-liquid *::before { animation:none!important; transition:none!important; } }