/* Vision Glass — Shop (shared app). Visual system (design milestone, 2026-10-10).
   One column for the phone, max 640px, fixed bottom navigation. Same brand palette as the approved Shop, refined:
   white surfaces on a warm stone background, a steel-blue primary derived from the logo's glass blues, soft
   two-layer shadows, one radius scale, tactile press states, and motion that respects prefers-reduced-motion. */
:root{
  --bg:var(--ios-bg); --surface:var(--ios-bg-2); --raised:var(--ios-bg-2); --surface-2:var(--ios-bg-3); --ink:var(--ios-label); --muted:var(--ios-label-2); --line:var(--ios-hairline); --line-2:var(--ios-hairline); --chip:var(--ios-fill);
  --accent:var(--ios-blue); --accent-ink:var(--ios-on-accent); --accent-deep:var(--ios-blue); --accent-soft:var(--ios-blue-tint); --glass:#b9bdc1; --glass-soft:var(--ios-blue-tint);
  --warn:var(--ios-red-text); --warn-soft:var(--ios-red-tint); --ok:var(--ios-green-text); --ok-soft:var(--ios-green-tint); --pv:var(--ios-purple-text); --pv-soft:var(--ios-purple-tint);
  --sys450:#3a3f44; --sys451:#6b6660;
  --font-ui:var(--ios-font);
  --font-body:var(--ios-font);
  --navh:calc(70px + env(safe-area-inset-bottom,0px));
  --r-s:var(--ios-r-s); --r:var(--ios-r); --r-l:var(--ios-r); --panel:var(--ios-bg-2);
  --sh-1:0 0 0 0 transparent;
  --sh-card:0 0 0 0 transparent;
  --sh-float:var(--ios-shadow-pop);
  --sh-btn:0 0 0 0 transparent;
  --sh-primary:0 0 0 0 transparent;
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:140ms; --t-mid:220ms;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --glass:#8a9096;
  --sys450:#78c3dd; --sys451:#e0b06a; color-scheme:dark}}
:root[data-theme="dark"]{ --glass:#8a9096;
  --sys450:#78c3dd; --sys451:#e0b06a; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:var(--ios-t-body)/1.45 var(--font-body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body.noscroll{overflow:hidden}
#app{min-height:100vh;min-height:100dvh;padding-bottom:calc(var(--navh) + 24px)}
h1,h2,h3,h4,.brand b,button,.btn,.pill,.tabs,label,legend,.seg,.state,.hdur,.qty,.big-num{font-family:var(--font-ui)}
h1,h2,h3{text-wrap:balance}
.pad{padding:16px}
.ic{width:22px;height:22px;flex:none}
.ic.big{width:56px;height:56px;margin:4px auto 4px;display:block;color:var(--accent)}
.ic.ok{color:var(--ok)}
.sr,.vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button:focus-visible,.btn:focus-visible,.bigbtn:focus-within{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}

/* preview band (simulation disclosure: always visible in the preview build) */
.pvbar{display:flex;gap:8px;align-items:flex-start;padding:8px 16px;background:var(--pv-soft);color:var(--pv);font-size:var(--ios-t-subhead);line-height:1.3;border-bottom:1px solid color-mix(in srgb,var(--pv) 35%,transparent)}
.pvbar .ic{width:18px;height:18px;margin-top:1px}
.pvnote{font-size:var(--ios-t-subhead);color:var(--pv);background:var(--pv-soft);border-radius:var(--r-s);padding:7px 10px;margin:8px 0}
.pvcard{border-color:color-mix(in srgb,var(--pv) 40%,transparent);background:var(--pv-soft);box-shadow:none}
.pvcard h3{color:var(--pv)}
.pvsim{font-weight:400;color:var(--pv)}

/* top bar */
.top{position:sticky;top:0;z-index:6;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:color-mix(in srgb,var(--bg) 86%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.brand{display:flex;flex-direction:column;min-width:0}
.brand b{font-size:var(--ios-t-title2);line-height:1.1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{font-size:var(--ios-t-footnote);color:var(--muted);font-weight:600}
.topr{display:flex;gap:8px}
.iconbtn{width:46px;min-width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;margin:0;font-size:var(--ios-t-subhead);font-weight:700;background:var(--surface)}

main{max-width:640px;margin:0 auto;padding:16px 16px 8px}
main:focus{outline:none}
p{margin:6px 0}
.fine{font-size:var(--ios-t-subhead);color:var(--muted)}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.ok{color:var(--ok)} .warn{color:var(--warn)}
.nr{color:var(--muted);font-style:italic}
.sect{font-size:var(--ios-t-footnote);line-height:var(--ios-lh-footnote);color:var(--muted);margin:22px 16px 7px;font-weight:400}   /* grouped-list header: 13 px, secondary, sentence case */
.msg{display:flex;gap:8px;align-items:flex-start;border-radius:var(--ios-r);padding:10px 12px;margin:0 0 12px;border:0;box-shadow:none}
.msg.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok);background:var(--ok-soft)} .msg.bad{border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn);background:var(--warn-soft)}
.hint{display:flex;gap:8px;align-items:flex-start;font-size:var(--ios-t-subhead);color:var(--muted);margin:8px 0}
.hint .ic{width:18px;height:18px;margin-top:2px}

/* cards */
.card{background:var(--surface);border:0;border-radius:var(--ios-r);padding:16px;margin:0 0 14px;min-width:0;box-shadow:none}
.card h2{font-size:var(--ios-t-footnote);line-height:var(--ios-lh-footnote);color:var(--muted);margin:0 0 10px;font-weight:600}   /* sentence case, no tracking (Apple base) */
.card h3{font-size:var(--ios-t-title2);margin:0}
.card h4{font-size:var(--ios-t-footnote);margin:14px 0 4px;color:var(--muted);font-weight:600}
.center{text-align:center}
.center button{margin-top:10px}

/* forms */
label{display:block;margin:12px 0;font-weight:var(--ios-w-regular);font-size:var(--ios-t-subhead);line-height:var(--ios-lh-subhead)}
input,select,textarea{display:block;width:100%;margin-top:5px;font:400 var(--ios-t-body)/1.3 var(--font-body);color:var(--ink);caret-color:var(--accent);background:var(--ios-fill);border:1px solid transparent;border-radius:var(--ios-r-s);padding:11px 12px;min-height:44px;box-shadow:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input:focus,select:focus,textarea:focus{outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--ios-focus-ring)}
input::placeholder,textarea::placeholder{color:var(--ios-label-3)}
textarea{resize:vertical}
fieldset{border:0;margin:8px 0;padding:0}
legend{font-weight:var(--ios-w-semibold);margin-bottom:6px}
button,.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;font-size:var(--ios-t-body);font-weight:600;min-height:44px;padding:0 16px;border-radius:var(--ios-r);border:0;background:var(--ios-fill);color:var(--ink);cursor:pointer;text-decoration:none;text-align:center;width:100%;margin:6px 0;box-shadow:var(--sh-btn);touch-action:manipulation;transition:filter var(--t-fast),background-color var(--t-fast)}
button:active:not(:disabled),.btn:active{filter:brightness(.92)}   /* pressed = a slight darken only */
button.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink);box-shadow:none}
button.big{min-height:56px;font-size:var(--ios-t-title3)}
button.huge{min-height:66px;font-size:var(--ios-t-title2);border-radius:var(--ios-r)}
button.subtle{background:transparent;color:var(--accent);border-color:transparent;box-shadow:none}
button.wide{margin:12px 0}
button:disabled{opacity:.4;cursor:default}
button.link{display:inline-flex;width:auto;min-height:44px;border:0;background:none;color:var(--ios-blue-text);font-weight:var(--ios-w-regular);padding:0 4px;text-decoration:none;box-shadow:none}
.actions2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.actions2 button,.actions2 .btn{margin:0;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px} .grid2 .span2{grid-column:1 / -1} .grid2>*{min-width:0}
/* read-only status (Apple base): secondary text with a coloured dot, never a capsule; a tappable chip uses .vg-chip */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--ios-t-footnote);line-height:var(--ios-lh-footnote);font-weight:400;padding:0;border-radius:0;border:0;background:none;box-shadow:none;color:var(--muted);white-space:nowrap;vertical-align:baseline}
.pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--pill-dot,var(--ios-gray))}
.pill.ex::before{display:none}
.pill.warn{--pill-dot:var(--ios-orange)}
.pill.on,.pill.st-pending{--pill-dot:var(--ios-blue)}
.pill.st-approved{--pill-dot:var(--ios-green)}
.pill.st-rejected{--pill-dot:var(--ios-red)}

/* segmented control */
.seg{display:flex;gap:2px;background:var(--ios-fill);border:0;border-radius:var(--ios-r-full);padding:2px;margin:4px 0 12px;box-shadow:none}
.seg button{flex:1;margin:0;border:0;background:transparent;min-height:44px;padding:0 6px;font-size:var(--ios-t-subhead);color:var(--ink);border-radius:var(--ios-r-full);min-width:0;box-shadow:none}
.seg.big button{flex-direction:column;gap:2px;min-height:58px;font-size:var(--ios-t-subhead);line-height:1.1}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--ios-seg-thumb);color:var(--ink);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}

/* entry */
.hero{text-align:center;padding:14px 0 6px}
.mark{width:68px;height:68px;margin:0 auto 10px;border-radius:18px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 30px var(--font-ui);letter-spacing:.02em}
.plaque{width:132px;height:132px;margin:0 auto 12px;border-radius:26px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px var(--line),0 14px 32px -14px rgba(22,44,64,.45);position:relative}
.plaque img{width:84%;height:84%;object-fit:contain;display:block}
.plaque .ptext{font:700 24px/1 var(--font-ui);letter-spacing:.06em;color:#1b2126;text-align:center}
.plaque .ptext small{display:block;font:600 10px/1.4 var(--font-ui);letter-spacing:.22em;color:#5a636c;margin-top:4px}
.hero h1{font-size:var(--ios-t-title1);margin:0}
.hero p{color:var(--muted);margin:4px auto 0;max-width:30ch}
.langs{display:flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--ios-r);padding:4px;margin:12px 0;box-shadow:0 1px 2px rgba(22,34,44,.05) inset}
.langs .ic{margin:0 6px;color:var(--muted)}
.langs button:not(.vgl-opt){flex:1;margin:0;border:0;background:transparent;min-height:46px;font-size:var(--ios-t-body);border-radius:var(--ios-r-s);box-shadow:none;color:var(--muted)}
.langs button:not(.vgl-opt)[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-primary)}   /* the old two-button switch only; the vgl capsule has its own rules */

/* ======================= brand (2026-10-12): the authentic logo without its white plate =======================
   .brandmark shows the original logo image through a mask of its three glass panes (exact pixels, white background
   gone) and paints the lettering through a second mask in the theme's ink, so it reads on light and dark surfaces
   (masks made by tools/make_brand_assets.py). --vg-panes / --vg-mark are set once at start-up. The sweep is masked to the panes. */
.brandmark{position:relative;display:block;width:120px;aspect-ratio:4/5;margin:0 auto;color:var(--ink);isolation:isolate}
.brandmark .bm-emblem,.brandmark .bm-mark,.brandmark .bm-sheen{position:absolute;inset:0;width:100%;height:100%}
.brandmark .bm-emblem,.vgi-piece{display:block;object-fit:fill;-webkit-mask:var(--vg-panes) center/100% 100% no-repeat;mask:var(--vg-panes) center/100% 100% no-repeat}
.brandmark .bm-depth,.brandmark .bm-rim{position:absolute;inset:0;pointer-events:none}
/* glass thickness, quietly: light from the upper left, a deeper blue toward the lower right (masked to the panes), and a
   thin bright rim along the pane edges. The logo's own pixels, shape and lettering are untouched underneath. */
.brandmark .bm-depth{background:linear-gradient(150deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 34%,rgba(40,120,175,0) 58%,rgba(40,120,175,.16) 100%);-webkit-mask:var(--vg-panes) center/100% 100% no-repeat;mask:var(--vg-panes) center/100% 100% no-repeat}
.brandmark .bm-rim{background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.35) 55%,rgba(200,230,250,.5));-webkit-mask:var(--vg-edges) center/100% 100% no-repeat;mask:var(--vg-edges) center/100% 100% no-repeat;opacity:.55}
.brandmark .bm-mark{background:currentColor;-webkit-mask:var(--vg-mark) center/100% 100% no-repeat;mask:var(--vg-mark) center/100% 100% no-repeat}
.brandmark .bm-sheen{overflow:hidden;pointer-events:none;-webkit-mask:var(--vg-panes) center/100% 100% no-repeat;mask:var(--vg-panes) center/100% 100% no-repeat}
.brandmark .bm-sheen::before{content:"";position:absolute;inset:-20% -70%;background:linear-gradient(108deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);transform:translateX(-80%)}
.brandmark .ptext{position:absolute;inset:0;display:grid;place-content:center;font:700 22px/1 var(--font-ui);letter-spacing:.06em;color:currentColor;text-align:center}
.brandmark .ptext small{display:block;font:600 9px/1.4 var(--font-ui);letter-spacing:.2em;margin-top:4px}
/* sign-in: the logo on the page itself, no tile; a soft ice-blue glint crosses the glass about every 14 s */
.hero .brandmark{width:128px;margin:6px auto 14px}
.brandmark .bm-sheen::before{background:linear-gradient(104deg,transparent 42%,rgba(214,236,250,.55) 50%,transparent 58%)}
.hero .brandmark .bm-sheen::before{animation:bmSweep 14s cubic-bezier(.45,0,.55,1) 3s infinite}
@keyframes bmSweep{0%{transform:translateX(-80%)}7%{transform:translateX(80%)}100%{transform:translateX(80%)}}
body.vg-hidden .brandmark .bm-sheen::before{animation-play-state:paused}
body.vg-intro-on .hero .brandmark{visibility:hidden}     /* the intro's logo becomes this one: never two on screen */
/* everything else on the screen underneath keeps its place (no layout change) but stays transparent until the last
   part of the glide, then fades in as the logo arrives: 0.42 s delay + 0.2 s fade (the logo has cleared the heading by then), inside the same glide */
body.vg-intro-on #app > :not(main),body.vg-intro-on #app main > :not(.hero),body.vg-intro-on .hero > :not(.brandmark){opacity:0}
body.vg-intro-on.vg-reveal #app > :not(main),body.vg-intro-on.vg-reveal #app main > :not(.hero),body.vg-intro-on.vg-reveal .hero > :not(.brandmark){opacity:1;transition:opacity 200ms cubic-bezier(.4,0,.2,1) 420ms}
body.vg-intro-on.vg-reveal.vg-reveal-now #app > :not(main),body.vg-intro-on.vg-reveal.vg-reveal-now #app main > :not(.hero),body.vg-intro-on.vg-reveal.vg-reveal-now .hero > :not(.brandmark){transition:opacity 300ms ease}

/* ======================= brand intro (vgi-*): ~1.85 s, once per session =======================
   0–0.25 s: on calm charcoal, the three real panes of the logo appear apart. 0.25–0.95 s: they close in with a gentle
   stagger and decelerate into the exact logo, while one light sweep travels left to right and catches each pane in
   turn (a crisp reflection on the glass, a thin cyan / violet / warm-gold fringe on its edges; the light rides on the
   panes, never in the gaps). 0.95–1.25 s: the logo settles, the lettering appears, the light has faded.
   1.25–1.85 s: the logo glides to the exact place and size of the sign-in logo while the charcoal clears; a signed-in
   session fades into its screen instead. Skip / Escape end it at once. Reduced motion: the assembled logo, still,
   and a short fade. Silent. */
.intro{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;pointer-events:auto}
.vgi-bg{position:absolute;inset:0;background:#15191c;transition:opacity 600ms cubic-bezier(.4,0,.2,1)}
.vgi-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 46%,rgba(190,210,225,.09),transparent 72%)}
.intro-stage{position:relative;display:grid;place-items:center}
.vgi-brand{width:160px;color:#ece9e3;transition:color 600ms cubic-bezier(.4,0,.2,1)}
.vgi-brand .bm-emblem{opacity:0}                         /* the joined panes are the logo; the sign-in logo takes over at the end */
.vgi-brand .bm-mark{opacity:0;animation:vgiRise .3s cubic-bezier(.33,0,.2,1) .95s forwards}
.vgi-brand .bm-sheen{display:none}
.vgi-brand .bm-depth,.vgi-brand .bm-rim{opacity:0;animation:vgiShow .3s ease-out .95s forwards}
/* each pane is its own layer (clipped to its outline from script) carrying its own light, so the reflection and the
   edge fringe travel with the pane and never float in the gaps */
.vgi-pane{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.vgi-pane .vgi-piece{position:absolute;inset:0;width:100%;height:100%}
.vgi-pane.p-left{animation:vgiPaneL .95s linear forwards}
.vgi-pane.p-centre{animation:vgiPaneC .95s linear forwards}
.vgi-pane.p-right{animation:vgiPaneR .95s linear forwards}
/* 0–0.25 s: the three panes appear apart, still; 0.25–0.95 s: they close in with a gentle stagger and decelerate */
@keyframes vgiPaneL{0%{opacity:0;transform:translate(-42px,4px)}26%{opacity:1;transform:translate(-42px,4px);animation-timing-function:cubic-bezier(.3,0,.12,1)}100%{opacity:1;transform:none}}
@keyframes vgiPaneC{0%{opacity:0;transform:translate(0,-30px)}32%{opacity:1;transform:translate(0,-30px);animation-timing-function:cubic-bezier(.3,0,.12,1)}100%{opacity:1;transform:none}}
@keyframes vgiPaneR{0%{opacity:0;transform:translate(42px,4px)}37%{opacity:1;transform:translate(42px,4px);animation-timing-function:cubic-bezier(.3,0,.12,1)}100%{opacity:1;transform:none}}
/* the light: one sweep from left to right, reaching the left pane first, then the centre, then the right; on each
   pane a narrow crisp reflection with a soft falloff crosses the glass face (masked to the glass), and a thin
   cyan / violet / warm-gold fringe runs along the edges it lights (masked to the pane outlines) */
.vgi-glint,.vgi-fringe{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vgi-glint{-webkit-mask:var(--vg-panes) center/100% 100% no-repeat;mask:var(--vg-panes) center/100% 100% no-repeat}
.vgi-fringe{-webkit-mask:var(--vg-edges) center/100% 100% no-repeat;mask:var(--vg-edges) center/100% 100% no-repeat}
.vgi-glint::before,.vgi-fringe::before{content:"";position:absolute;top:-12%;bottom:-12%;left:0;opacity:0;transform:translateX(-120%) skewX(-12deg)}
.vgi-glint::before{width:26%;background:linear-gradient(90deg,rgba(225,242,255,0) 0%,rgba(225,242,255,.10) 28%,rgba(236,247,255,.42) 44%,rgba(255,255,255,.95) 49%,rgba(255,255,255,.95) 51%,rgba(236,247,255,.42) 56%,rgba(225,242,255,.10) 72%,rgba(225,242,255,0) 100%)}
.vgi-fringe::before{width:20%;background:linear-gradient(90deg,transparent 0%,rgba(255,196,110,.95) 30%,rgba(255,255,255,.95) 48%,rgba(100,228,255,1) 60%,rgba(165,125,255,.95) 76%,transparent 100%)}
.p-left .vgi-glint::before,.p-left .vgi-fringe::before{animation:vgiSweep .5s cubic-bezier(.4,0,.6,1) .32s forwards}
.p-centre .vgi-glint::before,.p-centre .vgi-fringe::before{animation:vgiSweep .5s cubic-bezier(.4,0,.6,1) .46s forwards}
.p-right .vgi-glint::before,.p-right .vgi-fringe::before{animation:vgiSweep .5s cubic-bezier(.4,0,.6,1) .6s forwards}
@keyframes vgiSweep{0%{opacity:0;transform:translateX(-120%) skewX(-12deg)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(420%) skewX(-12deg)}}
#vg-intro .intro-skip{position:absolute;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:2;width:auto;min-height:44px;padding:0 16px;font-size:15px;color:#e8e6e1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);box-shadow:none;transition:opacity 200ms ease}
#vg-intro .intro-skip:focus-visible{outline:2px solid #e8e6e1;outline-offset:2px}
@keyframes vgiRise{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes vgiShow{to{opacity:1}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
/* the exit: the charcoal clears, Skip and the ray leave; the logo itself moves by a transform set from script */
.intro.leaving{pointer-events:none}
.intro.leaving .vgi-bg,.intro.leaving .intro-skip{opacity:0}
.intro.leaving .vgi-brand{transition:transform 600ms cubic-bezier(.4,0,.2,1),color 600ms cubic-bezier(.4,0,.2,1),opacity 600ms ease}
.intro.fade-only.leaving .vgi-brand{opacity:0;transform:scale(.98)}
/* reduced motion: the assembled logo, still; the overlay fades */
.intro.still .vgi-pane,.intro.still .vgi-brand .bm-mark{animation:none;opacity:1;transform:none}
.intro.still .vgi-glint,.intro.still .vgi-fringe{display:none}
.intro.still .vgi-brand .bm-depth,.intro.still .vgi-brand .bm-rim{animation:none;opacity:1}
.intro.still.leaving{animation:introOut 300ms ease forwards}
.intro.still.leaving .vgi-brand{transition:none}
/* hidden tab: decorative animation pauses (the hard timeout still ends the overlay) */
body.vg-hidden .intro *,body.vg-hidden .intro *::before{animation-play-state:paused}

/* home */
.hello h2{font-size:var(--ios-t-title1);margin:4px 0 0}
.hello p{color:var(--muted);margin:0 0 12px}
.clock{border-width:1px;position:relative;overflow:hidden}
.clock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line-2);border-radius:var(--r) 0 0 var(--r)}
.clock.on{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--surface) 90%,var(--ok))}
.clock.on::before{background:var(--ok)}
.ctop{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.ctop>div{display:flex;flex-direction:column;min-width:0}
.cdot{width:10px;height:10px;border-radius:50%;background:var(--ios-gray);margin-top:7px;flex:none;box-shadow:none}   /* a status dot: no halo */
.clock.on .cdot{background:var(--ios-green);box-shadow:none}
.state{font:700 var(--ios-t-title2)/1.2 var(--font-ui)}
.checking{font-weight:600;color:var(--accent);display:flex;gap:8px;align-items:center}
.checking::before{content:"";width:16px;height:16px;border:2.5px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex:none}
.res{display:flex;gap:8px;border:1px solid;border-radius:var(--r-s);padding:10px 12px;margin:10px 0}
.res>div{min-width:0}
.res.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok);background:var(--ok-soft)} .res.bad{border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn);background:var(--warn-soft)}
.res button{color:var(--ink)}
.res.ok .ic{animation:popIn 420ms var(--ease) both}
.job .jhead{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.job .jhead h3{min-width:0;overflow-wrap:anywhere}
.ifacts{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.ifacts li{display:flex;gap:12px;align-items:flex-start}
.ifacts li .ic{color:var(--accent);margin-top:1px;background:var(--accent-soft);border-radius:var(--ios-r-s);padding:5px;width:32px;height:32px}
.ifacts li div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.ifacts b{font:700 var(--ios-t-footnote) var(--font-ui);color:var(--muted)}
.callout{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:var(--r-s);padding:10px 12px;margin:12px 0 4px}
.callout .ic{color:var(--accent);margin-top:2px}
.callout div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.callout b{font:700 var(--ios-t-footnote) var(--font-ui);color:var(--accent)}
.bring{margin:4px 0;padding-left:22px}
.bring li{margin:3px 0}
.maplink{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
details.more{margin:10px 0;border-top:1px solid var(--line);padding-top:4px}
details summary{min-height:46px;display:flex;align-items:center;cursor:pointer;font:600 var(--ios-t-body) var(--font-ui);color:var(--accent)}
.ack{margin-top:12px}
.readok,.warnline{display:flex;gap:8px;align-items:center;font-weight:600;margin:6px 0}
.readok{color:var(--ok)} .warnline{color:var(--warn)}
.empty{text-align:center;padding:28px 16px;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r);margin:0 0 14px;background:color-mix(in srgb,var(--surface) 55%,transparent)}
.empty .ic{width:44px;height:44px;margin:0 auto 6px;display:block;color:var(--accent);opacity:.8}
.empty b{color:var(--ink)}
.empty.small{padding:16px}
.rowbtn{justify-content:flex-start;text-align:left;background:var(--surface);min-height:64px}
.rowbtn>span{flex:1;min-width:0}
.chev{margin-left:auto;color:var(--muted)}

/* materials */
.search{position:relative;margin:4px 0 0}
.search .ic{position:absolute;left:12px;top:16px;color:var(--muted)}
.search input{padding-left:42px}
.mlist{list-style:none;margin:8px 0;padding:0;display:grid;gap:10px}
.mcard{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;background:var(--surface);padding:10px;margin:0;min-height:96px;border-radius:var(--r);font-family:var(--font-body);font-weight:400;box-shadow:var(--sh-card);border-color:var(--line)}
.mthumb{width:76px;height:76px;border-radius:var(--ios-r);overflow:hidden;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 1px 2px rgba(22,34,44,.06) inset}
.mthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mthumb.none{color:var(--muted);font-size:var(--ios-t-caption1);text-align:center;align-content:center;gap:2px}
.mthumb.big{width:100%;height:auto;aspect-ratio:16/10;max-width:100%}
.mthumb.big img{object-fit:contain;background:var(--raised)}
.mthumb.big.none .ic{width:40px;height:40px}
.mbody{display:flex;flex-direction:column;gap:2px;min-width:0}
.mname{font:700 var(--ios-t-body)/1.2 var(--font-ui);overflow-wrap:anywhere}
.mcode,.mfact,.mplace{font-size:var(--ios-t-subhead);color:var(--muted);overflow-wrap:anywhere}
.mcode{font-variant-numeric:tabular-nums}
.mplace{display:flex;gap:4px;align-items:center}
.mplace .ic{width:15px;height:15px}
.qty{font:400 var(--ios-t-subhead)/1.15 var(--font-ui);text-align:right;color:var(--ink);max-width:82px}
.qty b{display:block;font-size:var(--ios-t-title1);font-weight:700;font-variant-numeric:tabular-nums}
.qty.zero b{color:var(--warn)}
.qty.unknown{color:var(--muted);font-style:italic}
.sys{display:inline-flex;gap:2px;font-size:var(--ios-t-subhead);color:var(--ink);white-space:nowrap}
.sys b{font-weight:700}
.sys-CG450 b{color:var(--sys450)} .sys-CG451 b{color:var(--sys451)}
.board{margin:18px 0 6px}
.board h3{font-size:var(--ios-t-title3);margin:0}
.bsys h4{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 8px;font-size:var(--ios-t-body)}
.btiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.btile{flex-direction:column;align-items:stretch;gap:4px;padding:8px;margin:0;background:var(--surface);height:100%;text-align:left;font-weight:400}
.btile img{width:100%;height:64px;object-fit:contain;background:var(--surface-2);border-radius:var(--ios-r-s)}
.bname{font-weight:700;font-size:var(--ios-t-callout)}
.zarea h3{font-size:var(--ios-t-body);margin:16px 2px 8px}
.zlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.zrow{justify-content:flex-start;text-align:left;background:var(--surface);margin:0;min-height:58px}
.zrow>span:first-of-type{flex:1;min-width:0}
.zrow .ic:first-child{color:var(--accent)}

/* sheets (full-screen panels) */
.sheet{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);animation:sheetIn var(--t-mid) var(--ease) both}
.sbar{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sbar .back{width:auto;min-height:44px;margin:0 0 0 -4px;border:0;background:none;color:var(--ios-blue);padding:0 8px;box-shadow:none;font-weight:var(--ios-w-regular);gap:4px}
.sbody{overflow:auto;padding:14px 16px calc(24px + env(safe-area-inset-bottom,0px));max-width:640px;width:100%;margin:0 auto;-webkit-overflow-scrolling:touch}
.shead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.shead h2{font-size:var(--ios-t-title1);margin:0;min-width:0;overflow-wrap:anywhere}
.sub{font-size:var(--ios-t-title3);margin:20px 0 6px}
.facts{margin:10px 0;display:grid;gap:0;background:var(--surface);border:0;border-radius:var(--ios-r);padding:2px 16px;box-shadow:none}
.facts.small{font-size:var(--ios-t-subhead)}
.frow{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:.5px solid var(--ios-separator)}
.frow:first-child{border-top:0}
.frow dt{font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font);color:var(--ios-label)}
.frow dd{margin:0;overflow-wrap:anywhere;color:var(--ios-label-2);text-align:end}
.facts.small .frow dt{font-size:var(--ios-t-subhead);line-height:var(--ios-lh-subhead)}
.frow.is-trunc dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
/* Cuenta (accountHtml): iOS settings — one group of rows, info rows, language and appearance segmented, password group */
.vgp-acct-rows{margin:0 0 18px}
.vgp-acct-rows>.rowbtn{position:relative;margin:0;min-height:var(--ios-row-h)}
.vgp-acct-rows>.rowbtn+.rowbtn::before{content:"";position:absolute;top:0;left:56px;right:0;border-top:.5px solid var(--ios-separator);pointer-events:none}
.vgp-acct-facts{margin:0 0 4px}
.vgp-acct-lang{margin:0 0 4px}
.vgp-acct-pw{margin:0 0 18px}
.vgp-acct-pw .vg-cell-label{flex:0 0 auto;min-width:72px}
.vgp-acct-pw .vg-cell .vg-input{text-align:start;margin:0}
.vgp-acct-pw .vgp-acct-pwgo{justify-content:flex-start;font-weight:var(--ios-w-regular)}
.vgp-acct-out{margin:0 0 12px}
.vgp-acct-foot{margin:0 var(--ios-gutter) 24px}
img.full{width:100%;height:auto;border-radius:var(--ios-r)}
.fx-chips button .sw,.fx-item .sw{width:16px;height:16px;flex:none}
.sheet .fx-chips button{width:auto;margin:0;min-height:44px}
.sheet .fxa-ctl button,.sheet .fxa-dots button{width:auto;margin:0}
.sheet .fxa-dots button{min-height:44px;min-width:44px}
.fx-item h3{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--ios-t-body)}
.fx-item h3 span{font-weight:400;color:var(--muted)}
.fx-item+.fx-item{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}

/* photos */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.bigbtn{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-height:96px;margin:0;border-radius:var(--ios-r);border:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:var(--glass-soft);color:var(--accent);font:700 var(--ios-t-body) var(--font-ui);cursor:pointer;text-align:center;transition:transform var(--t-fast) var(--ease),background-color var(--t-fast)}
.bigbtn:active{transform:scale(.985);background:var(--accent-soft)}
.bigbtn .ic{width:32px;height:32px}
.vh:focus-visible+.bigbtn,.bigbtn:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.picked{list-style:none;margin:8px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.picked li{position:relative}
.picked img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--ios-r);display:block;box-shadow:var(--sh-1)}
.picked video{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--ios-r);display:block;background:#101218}
.picked .x{position:absolute;top:4px;right:4px;width:44px;min-height:44px;height:44px;padding:0;margin:0;border-radius:50%;background:var(--raised)}
.choices{display:grid;gap:8px}
.choice{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px;border:1px solid var(--line);border-radius:var(--ios-r);background:var(--raised);font-weight:400;cursor:pointer;box-shadow:var(--sh-1)}
.choice input{width:24px;min-height:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.choice span{display:flex;flex-direction:column}
.choice:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),var(--sh-1);background:var(--glass-soft)}
.ups,.rows,.hlist{list-style:none;margin:0;padding:0}
.ups li,.rows li{border-top:1px solid var(--line);padding:10px 0;overflow-wrap:anywhere}
.ups li:first-child,.rows li:first-child{border-top:0}
.rows.card li{padding:10px 0}
.rows.small li{font-size:var(--ios-t-subhead);padding:6px 0}
.vg-trail-note { margin: 0 0 14px; }
.vg-trail-controls { display: flex; align-items: end; gap: 10px; margin-bottom: 14px; }
.vg-trail-picker { display: grid; gap: 6px; flex: 1; max-width: 24rem; min-width: 0; }
.vg-trail-picker select { width: 100%; min-width: 0; min-height: 44px; border-radius: var(--ios-r); text-overflow: ellipsis; }
.vg-trail .vg-trail-today { min-height: 44px; width: auto; border-radius: 999px; padding-inline: 16px; }
.vg-trail .vg-trail-today[aria-pressed="true"] { background: #1666c5; color: #fff; }
.vg-trail-group { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--ios-r); padding: 14px 16px; background: var(--surface-2); }
.vg-trail-group h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size:var(--ios-t-callout); }
.vg-trail-group h3 small { display: block; color: var(--accent); font-size:var(--ios-t-caption1); margin-bottom: 3px; }
.vg-trail-count { border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size:var(--ios-t-caption1); font-variant-numeric: tabular-nums; }
.vg-trail-group li { line-height: 1.5; padding-block: 10px; }
.vg-trail-empty { margin: 9px 0 0; }
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.thumb{display:block;width:96px;height:96px;padding:0;margin:0;border-radius:var(--ios-r);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
img.broken{opacity:.3}

/* hours */
.big-num{font:400 var(--ios-t-body) var(--font-ui);margin:0}
.big-num b{font-size:46px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;border-top:1px solid var(--line);padding:10px 0}
.hrow:first-child{border-top:0}
.hrow>div{display:flex;flex-direction:column}
.hrow p{grid-column:1 / -1;margin:0}
.hdur{font:700 var(--ios-t-title3) var(--font-ui);font-variant-numeric:tabular-nums}

/* admin */
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--ios-t-subhead)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:8px 6px 8px 0;border-top:1px solid var(--line)}
.tbl th{color:var(--muted);font:700 var(--ios-t-footnote) var(--font-ui);border-top:0}
form.inline{margin-top:6px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:8px;align-items:center}
.prow select{margin:0}
.steps{padding-left:22px;margin:6px 0} .steps li{margin:4px 0}
label.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}
label.chk input{width:24px;min-height:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--accent)}
.planwrap{max-width:360px;margin:8px auto}
svg.plan{width:100%;height:auto;display:block;touch-action:manipulation;cursor:crosshair}
.plan-bg{fill:var(--bg);stroke:var(--line)}
.plan-grid line{stroke:var(--line);stroke-width:1}
.plan-r{fill:var(--accent);fill-opacity:.14;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5}
.plan-pin path{fill:var(--warn)} .plan-pin circle{fill:var(--surface)}
.plan-prop circle{fill:var(--sys451)} .plan-conf circle{fill:var(--ok)}
svg.plan text{fill:var(--ink);font:var(--ios-t-footnote) var(--font-ui)}

/* bottom navigation */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;background:color-mix(in srgb,var(--surface) 88%,transparent);border-top:1px solid var(--line);padding:4px 4px env(safe-area-inset-bottom,0px);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 -8px 24px -18px rgba(22,44,64,.35)}
.tabs button{position:relative;flex:1;flex-direction:column;gap:3px;margin:0;border:0;border-radius:var(--ios-r);min-height:62px;background:none;font-size:var(--ios-t-footnote);line-height:1.1;padding:6px 2px;color:var(--muted);min-width:0;box-shadow:none;transition:color var(--t-fast),transform var(--t-fast) var(--ease)}
.tabs button .ic{width:24px;height:24px;padding:0;border-radius:999px;transition:background-color var(--t-fast),transform var(--t-fast) var(--ease)}
.tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabs button[aria-current="page"]{color:var(--accent)}
.tabs button[aria-current="page"] .ic{background:var(--accent-soft);box-shadow:0 0 0 7px var(--accent-soft)}
.tabs button[aria-current="page"] span{font-weight:700}
.tabs button:active{transform:scale(.96)}
.tabs .dot{position:absolute;top:6px;left:calc(50% + 8px);min-width:20px;height:20px;border-radius:var(--ios-r-s);background:var(--warn);color:#fff;font:700 var(--ios-t-caption1)/20px var(--font-ui);font-style:normal;padding:0 5px;box-shadow:0 0 0 2px var(--surface)}
@media (min-width:700px){.tabs{justify-content:center}.tabs button{max-width:130px}}

/* page transitions (tab/sheet changes); nothing moves when the person prefers reduced motion */
main.enter{animation:pageIn 200ms var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sheetIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  *:not(.intro),*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .vgi-pane,.vgi-brand .bm-mark{animation:none!important;opacity:1;transform:none}
  .vgi-glint,.vgi-fringe,.brandmark .bm-sheen{display:none}
  .vgi-brand .bm-depth,.vgi-brand .bm-rim{animation:none!important;opacity:1}
  .tabs button:active,button:active:not(:disabled){transform:none}
}

/* ---------- milestone 3: People and Daily reports (admin) ---------- */
.card.inner{background:var(--surface-2);box-shadow:none;margin:10px 0 0;padding:12px}
.card.inner h3{margin:0 0 6px;font-size:var(--ios-t-body)}
.pplist,.drlist{list-style:none;margin:0 0 8px;padding:0}
.pprow{border-top:1px solid var(--line);padding:10px 0}
.pprow.off .ppname b{color:var(--muted)}
.pptop{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.ppname{flex:1 1 200px;min-width:0;display:flex;flex-direction:column}
.ppname .fine{overflow-wrap:anywhere}
.pptop .link{flex:none;min-height:44px}
.flag{display:flex;gap:6px;align-items:flex-start;color:var(--warn);font-weight:600;margin:6px 0}
.flag svg{width:18px;height:18px;flex:none;margin-top:2px}
button.danger{border-color:color-mix(in srgb,var(--warn) 50%,transparent);color:var(--warn)}
.rows li.needs{border-left:4px solid var(--warn);padding-left:8px}
.drcard h3{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.drcard .frow dd{overflow-wrap:anywhere}
.drcard .frow:has(.drph){grid-template-columns:1fr}
.drph{display:flex;flex-wrap:wrap;gap:6px}.drph .thumb{width:100%;height:auto;padding:0}.drph img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain;border-radius:var(--ios-r-s)}

/* ---------- design milestone: states and confirmations ---------- */
.skel{display:grid;gap:12px;padding:4px 0}
.sk-line,.sk-card{border-radius:var(--r-s);background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 60%,var(--surface)) 45%,var(--surface-2) 90%);background-size:220% 100%;animation:shimmer 1.3s linear infinite}
.sk-line{height:22px;width:60%} .sk-line.w40{width:40%} .sk-line.w30{width:30%}
.sk-card{height:150px;border-radius:var(--r);border:1px solid var(--line)} .sk-card.tall{height:260px}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
.msg .ic,.readok .ic{animation:popIn 420ms var(--ease) both}
.clock.just .cdot{animation:ring 900ms var(--ease) 1}
.clock.just{animation:settle 700ms var(--ease) 1}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
@keyframes settle{0%{transform:scale(.992)}60%{transform:scale(1.004)}100%{transform:none}}
.maplink{display:inline-flex;gap:6px;align-items:center;min-height:44px;padding:0 14px 0 10px;margin-top:4px;border:0;border-radius:999px;background:var(--ios-blue-tint);color:var(--ios-blue-text);font:600 var(--ios-t-subhead) var(--font-ui);text-decoration:none}   /* tinted capsule (it is tapped), no outline */
.maplink .ic{width:18px;height:18px}
.maplink:active{background:var(--accent-soft)}
.ifacts li .ic.ok{color:var(--ok);background:var(--ok-soft)}
@media (prefers-reduced-motion: reduce){.sk-line,.sk-card{animation:none}.clock.just,.clock.just .cdot,.msg .ic,.readok .ic{animation:none}}

/* ======================= Vision Glass cube (vgc-*): the branded loader and the sign-in "pending" mark =======================
   Composition (after the dexter-st "please wait" glass-cube reference, written here from scratch): a larger transparent
   six-sided glass shell that rotates continuously, with "Loading…" / "Cargando…" on its faces, and a smaller branded
   core suspended inside it: a cube in steel blue / cyan that carries the authentic logo on its vertical faces, turns
   more slowly the other way and glows softly. The outer text and the inner logos hide their back faces, so no mirrored
   lettering is ever seen through the glass. A light sweep and a soft ground shadow complete it. All names are vgc-. */
.vgc{position:relative;width:230px;height:256px;display:grid;place-items:center;perspective:1150px;perspective-origin:50% 44%;overflow:visible;--vgc-s:150px;--vgc-h:75px;--vgc-c:72px;--vgc-ch:36px}
.vgc-stage{position:relative;width:var(--vgc-s);height:var(--vgc-s);transform-style:preserve-3d;animation:vgcEnter 900ms var(--ease) both}
.vgc-cube,.vgc-inner{position:absolute;inset:0;transform-style:preserve-3d}
.vgc-cube{animation:vgcSpin 7.5s linear infinite;will-change:transform}
.vgc-inner{inset:calc((var(--vgc-s) - var(--vgc-c)) / 2);animation:vgcSpinInner 14s linear infinite;will-change:transform}
.vgc-f,.vgc-t{position:absolute;inset:0;border-radius:var(--ios-r)}
/* the glass shell: both sides of every pane are visible, so the edges of all six faces read through each other */
.vgc-cube .vgc-f{background:linear-gradient(135deg,rgba(255,255,255,.42) 0%,rgba(236,247,252,.16) 38%,rgba(190,194,198,.14) 100%);border:1px solid rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(27,33,38,.09),inset 0 -10px 22px -14px rgba(27,33,38,.4);-webkit-backdrop-filter:blur(.7px);backdrop-filter:blur(.7px)}
.vgc-cube .vgc-top{background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(234,246,252,.28))}
.vgc-cube .vgc-bottom{background:rgba(27,33,38,.12)}
/* the words sit on their own panes just outside the glass, back faces hidden: never mirrored through the shell */
.vgc-t{display:grid;place-items:end center;padding-bottom:17px;border:0;background:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;font:600 var(--ios-t-subhead)/1 var(--font-ui);color:var(--accent-deep);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.vgc-t.vgc-dots{font-size:var(--ios-t-title2);color:var(--accent)}
.vgc-front{transform:translateZ(var(--vgc-h))} .vgc-back{transform:rotateY(180deg) translateZ(var(--vgc-h))} .vgc-right{transform:rotateY(90deg) translateZ(var(--vgc-h))} .vgc-left{transform:rotateY(-90deg) translateZ(var(--vgc-h))}
.vgc-top{transform:rotateX(90deg) translateZ(var(--vgc-h))} .vgc-bottom{transform:rotateX(-90deg) translateZ(var(--vgc-h))}
.vgc-t.vgc-front{transform:translateZ(calc(var(--vgc-h) + 1px))} .vgc-t.vgc-back{transform:rotateY(180deg) translateZ(calc(var(--vgc-h) + 1px))} .vgc-t.vgc-right{transform:rotateY(90deg) translateZ(calc(var(--vgc-h) + 1px))} .vgc-t.vgc-left{transform:rotateY(-90deg) translateZ(calc(var(--vgc-h) + 1px))}
/* the branded core: a smaller cube; the logo on its vertical faces (back faces hidden), tinted glass top and bottom, a soft glow */
.vgc-inner .vgc-f{border-radius:var(--ios-r-s);background:linear-gradient(145deg,rgba(234,246,252,.96) 0%,rgba(207,233,245,.96) 100%);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 22px -2px rgba(190,194,198,1);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.vgc-inner .vgc-top,.vgc-inner .vgc-bottom{background:linear-gradient(145deg,rgba(190,194,198,.9),rgba(27,33,38,.92));backface-visibility:visible;-webkit-backface-visibility:visible}
.vgc-inner .vgc-front{transform:translateZ(var(--vgc-ch))} .vgc-inner .vgc-back{transform:rotateY(180deg) translateZ(var(--vgc-ch))} .vgc-inner .vgc-right{transform:rotateY(90deg) translateZ(var(--vgc-ch))} .vgc-inner .vgc-left{transform:rotateY(-90deg) translateZ(var(--vgc-ch))}
.vgc-inner .vgc-top{transform:rotateX(90deg) translateZ(var(--vgc-ch))} .vgc-inner .vgc-bottom{transform:rotateX(-90deg) translateZ(var(--vgc-ch))}
.vgc-f img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;display:block;border-radius:var(--ios-r-s);background:#fff}
.vgc-f .ptext{position:absolute;inset:4px;display:grid;place-content:center;background:#fff;border-radius:5px;font:700 12px/1 var(--font-ui);letter-spacing:.04em;color:#1b2126;text-align:center}
.vgc-f .ptext small{display:block;font:600 6px/1.4 var(--font-ui);letter-spacing:.16em;color:#5a636c;margin-top:2px}
.vgc-glow{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(190,194,198,.7),rgba(190,194,198,0) 68%);filter:blur(7px);animation:vgcGlow 2.6s ease-in-out infinite;pointer-events:none}
.vgc-sweep{position:absolute;inset:-10% -40%;pointer-events:none;background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.5) 50%,transparent 56%);transform:translateX(-70%);animation:vgcSweep 700ms ease-out 420ms both;mix-blend-mode:screen}
.vgc-shadow{position:absolute;left:50%;bottom:2px;width:178px;height:30px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(22,44,64,.36),rgba(22,44,64,0) 68%);filter:blur(3px);animation:vgcShadow 900ms var(--ease) both}
@keyframes vgcEnter{0%{opacity:0;transform:translateY(18px) scale(.86)}100%{opacity:1;transform:none}}
@keyframes vgcSpin{0%{transform:rotateX(-20deg) rotateY(-32deg)}50%{transform:rotateX(-27deg) rotateY(148deg)}100%{transform:rotateX(-20deg) rotateY(328deg)}}
@keyframes vgcSpinInner{0%{transform:rotateX(12deg) rotateY(-18deg)}100%{transform:rotateX(12deg) rotateY(-378deg)}}
@keyframes vgcGlow{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes vgcSweep{to{transform:translateX(70%)}}
@keyframes vgcShadow{0%{opacity:0;transform:translateX(-50%) scale(.6)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
/* (the cube is no longer used by the intro: the brand intro is vgi-* above; the 22 px cube still marks a pending request) */
body.vg-hidden .vgc *{animation-play-state:paused}
/* no 3D transforms available: the branded core alone, flat, instead of a broken cube */
@supports not (transform-style: preserve-3d){.vgc-cube,.vgc-sweep,.vgc-inner .vgc-f:not(.vgc-front){display:none}.vgc-inner{inset:30px;animation:none;transform:none}.vgc-inner .vgc-front{transform:none}.vgc-stage{animation:introTurn 900ms var(--ease) both}}
/* small continuous cube while a real sign-in request is pending (removed on success or error) */
.vgc-mini{position:relative;width:22px;height:22px;perspective:120px;flex:none;margin-right:2px;--vgc-s:22px;--vgc-h:11px;--vgc-c:10px;--vgc-ch:5px}
.vgc-mini .vgc-stage{width:22px;height:22px;animation:none}
.vgc-mini .vgc-cube{animation:vgcLoop 1.6s linear infinite}
.vgc-mini .vgc-inner{animation:vgcLoopInner 1.6s linear infinite}
.vgc-mini .vgc-f{border-radius:3px;border-width:1px;-webkit-backdrop-filter:none;backdrop-filter:none}
.vgc-mini .vgc-cube .vgc-f{background:rgba(255,255,255,.35)}
.vgc-mini .vgc-inner .vgc-f{border-radius:2px;background:linear-gradient(145deg,#b9bdc1,#1b2126);box-shadow:none}
@keyframes vgcLoop{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}
@keyframes vgcLoopInner{from{transform:rotateX(16deg) rotateY(0)}to{transform:rotateX(16deg) rotateY(-360deg)}}

/* ======================= EN / SPN language switch (vgl-*) =======================
   A glass capsule: the knob slides over the active language; when switching, the outgoing letters are drawn into
   the knob (compress + a brief blur), then resolve into the new abbreviation. Translation happens at once; the
   switch only animates on top. Reduced motion: no animation. */
.vgl{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;width:108px;height:44px;padding:0;margin:0;border-radius:999px;background:var(--ios-fill);box-shadow:none;vertical-align:middle;flex:none}
.vgl-opt{position:relative;z-index:1;margin:0;width:auto;min-width:0;min-height:44px;height:100%;padding:0;border:0;background:transparent;box-shadow:none;border-radius:999px;font:700 var(--ios-t-subhead)/1 var(--font-ui);color:var(--muted);transition:color 320ms var(--ease);cursor:pointer}
.vgl-opt[aria-pressed="true"]{color:transparent}
.vgl-opt:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px;color:var(--ink)}
.vgl-opt[aria-pressed="true"]:focus-visible{color:transparent}
.vgl:focus-within{box-shadow:0 0 0 2px var(--ios-focus-ring)}
.vgl-knob{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:999px;display:grid;place-items:center;z-index:2;pointer-events:none;background:var(--ios-seg-thumb);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);transform:translateX(0)}
.vgl[data-lang="es"] .vgl-knob{transform:translateX(100%)}
.vgl-lbl,.vgl-ghost{grid-area:1/1;font:700 var(--ios-t-subhead)/1 var(--font-ui);color:var(--ink)}
.vgl-ghost{opacity:0}
.vgl[data-fx] .vgl-knob{animation:vglSlide 460ms var(--ease) both}
.vgl[data-fx="en-es"] .vgl-knob{--vgl-from:0%;--vgl-to:100%}
.vgl[data-fx="es-en"] .vgl-knob{--vgl-from:100%;--vgl-to:0%}
.vgl[data-fx] .vgl-ghost{animation:vglOut 300ms ease-in both}
.vgl[data-fx] .vgl-lbl{animation:vglIn 320ms var(--ease) 190ms both}
@keyframes vglSlide{from{transform:translateX(var(--vgl-from))}to{transform:translateX(var(--vgl-to))}}
@keyframes vglOut{0%{opacity:1;transform:scaleX(1);filter:blur(0)}100%{opacity:0;transform:scaleX(.2);filter:blur(2.5px)}}
@keyframes vglIn{0%{opacity:0;transform:scaleX(.2);filter:blur(2.5px)}100%{opacity:1;transform:none;filter:blur(0)}}
.vgl-wrap{display:inline-flex;align-items:center;gap:10px}
.vgl-name{font:600 var(--ios-t-subhead)/1.2 var(--font-ui);color:var(--muted);min-width:56px}
.langs{display:flex;align-items:center;justify-content:center;gap:12px;background:transparent;border:0;box-shadow:none;padding:0;margin:14px 0 10px}
.langs .ic{display:none}
.langs.big .vgl{width:124px;height:48px}
.langs.big .vgl-opt{min-height:48px}
.langs.big .vgl-opt,.langs.big .vgl-lbl,.langs.big .vgl-ghost{font-size:var(--ios-t-subhead)}
.topr .vgl{width:100px}
@media (prefers-reduced-motion: reduce){.vgl[data-fx] .vgl-knob,.vgl[data-fx] .vgl-ghost,.vgl[data-fx] .vgl-lbl{animation:none}.vgl-opt{transition:none}}

/* ======================= flat Apple finish (replaces the «liquid glass» stage C, 2026-11-07) =======================
   Primary = filled systemBlue (a big button may be a capsule); secondary = gray fill; destructive = red tint; fields =
   tertiary fill; segmented = fill track + white / #636366 thumb; tab bar = the system bar material, the current tab is
   blue. Pressed only darkens (no scale, no sweep, no sheen). Colours are vg-apple-base.css tokens: one block for both themes. */
button.primary,button.huge{border-radius:var(--ios-r-full);border-color:transparent;background:var(--ios-blue-fill);color:var(--accent-ink);box-shadow:none}
button.primary:active:not(:disabled),button.huge:active:not(:disabled){filter:brightness(.9)}
button.primary:disabled,button.huge:disabled{opacity:.4}
button.huge{min-height:66px;font-size:var(--ios-t-title2)}
:where(button):not(:where(.primary,.huge,.link,.subtle,.vgl-opt,.tabs *,.seg *,.langs *)),:where(.btn){background:var(--ios-fill);border-color:transparent;box-shadow:none}
button.danger{background:var(--ios-red-tint);border-color:transparent;color:var(--ios-red-text);box-shadow:none}
button.subtle{background:transparent;box-shadow:none}
:where(input):not(:where([type=checkbox],[type=radio],[type=file])),:where(select,textarea){box-shadow:none;background:var(--ios-fill)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--ios-focus-ring)}
.tabs{background:var(--ios-bar);box-shadow:none;border-top:.5px solid var(--ios-separator)}
.tabs button[aria-current="page"]{color:var(--accent)}
.tabs button[aria-current="page"] .ic{background:none;box-shadow:none}
.sbar{box-shadow:0 .5px 0 var(--line)}
.msg.bad{background:var(--ios-red-tint)}
.msg.ok{background:var(--ios-green-tint)}
.empty{background:none;box-shadow:none}
/* brand: the sign-in plaque keeps its soft lift (logo art) */
.hero .plaque{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 30px -14px rgba(27,33,38,.55),0 0 0 8px rgba(255,255,255,.55),0 0 0 9px rgba(27,33,38,.08)}
.langs{margin:16px 0 12px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero .plaque{box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 14px 30px -14px rgba(0,0,0,.8),0 0 0 8px rgba(255,255,255,.06),0 0 0 9px rgba(190,194,198,.12)}}
:root[data-theme="dark"] .hero .plaque{box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 14px 30px -14px rgba(0,0,0,.8),0 0 0 8px rgba(255,255,255,.06),0 0 0 9px rgba(190,194,198,.12)}

/* ======================= Flow button (vg-flow): the owner's reference, in plain CSS =======================
   Rest: transparent capsule, thin dark outline, dark text, a small arrow at the right. On hover / keyboard focus /
   touch press: a dark circle grows from the centre and covers the button (behind the text and arrows), the text turns
   white and shifts right, the right arrow leaves to the right while a second one enters from the left, and the capsule's
   ends square to 12 px. Release or exit returns everything. Timings from the reference: container 600 ms
   cubic-bezier(.23,1,.32,1); text 800 ms ease-out; circle 800 ms cubic-bezier(.19,1,.22,1); arrows 800 ms
   cubic-bezier(.34,1.56,.64,1); press scale .95. Touch: .is-on is set on pointerdown (no hover-first tap) and cleared
   after release; the click fires at once, the animation never delays it. Arrows are decorative (aria-hidden). */
.vg-flow.vg-flow{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:48px;padding:0 32px;border-radius:100px;border:1.5px solid rgba(51,51,51,.4);background:transparent;color:#111;box-shadow:none;cursor:pointer;transition:border-color 600ms cubic-bezier(.23,1,.32,1),color 600ms cubic-bezier(.23,1,.32,1),border-radius 600ms cubic-bezier(.23,1,.32,1),transform 150ms ease;-webkit-tap-highlight-color:transparent}
.vg-flow.vg-flow::before,.vg-flow.vg-flow::after{display:none}                 /* no glossy layers from the capsule treatment */
.vg-flow.vg-flow>*{position:relative;z-index:1}
.vg-flow.vg-flow .fl-txt,.vg-flow.vg-flow .fl-txt *{color:inherit}
.vg-flow.vg-flow .fl-txt{display:inline-flex;align-items:center;gap:8px;transform:translateX(-12px);transition:transform 800ms ease-out,color 600ms cubic-bezier(.23,1,.32,1);white-space:nowrap}
.vg-flow.vg-flow .fl-circle{position:absolute;z-index:0;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:#111;opacity:0;transition:width 800ms cubic-bezier(.19,1,.22,1),height 800ms cubic-bezier(.19,1,.22,1),opacity 800ms cubic-bezier(.19,1,.22,1);pointer-events:none}
.vg-flow.vg-flow .fl-arr{position:absolute;z-index:9;top:50%;width:16px;height:16px;margin-top:-8px;color:#111;transition:left 800ms cubic-bezier(.34,1.56,.64,1),right 800ms cubic-bezier(.34,1.56,.64,1),color 600ms cubic-bezier(.23,1,.32,1);pointer-events:none}
.vg-flow.vg-flow .fl-arr svg{width:16px;height:16px;display:block;background:none;padding:0;border-radius:0;box-shadow:none;margin:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vg-flow.vg-flow .fl-a1{right:16px} .vg-flow.vg-flow .fl-a2{left:-25%}
/* the "on" state: hover on pointer devices, keyboard focus, or a touch press (.is-on) */
@media (hover:hover){.vg-flow.vg-flow:hover:not(:disabled){border-color:transparent;color:#fff;border-radius:var(--ios-r)}
  .vg-flow.vg-flow:hover:not(:disabled) .fl-txt{transform:translateX(12px)} .vg-flow.vg-flow:hover:not(:disabled) .fl-circle{width:max(220px,120%);height:auto;aspect-ratio:1/1;opacity:1}
  .vg-flow.vg-flow:hover:not(:disabled) .fl-arr{color:#fff} .vg-flow.vg-flow:hover:not(:disabled) .fl-a1{right:-25%} .vg-flow.vg-flow:hover:not(:disabled) .fl-a2{left:16px}}
.vg-flow.vg-flow:focus-visible,.vg-flow.vg-flow.is-on:not(:disabled){border-color:transparent;color:#fff;border-radius:var(--ios-r);outline:3px solid rgba(27,33,38,.45);outline-offset:3px}
.vg-flow.vg-flow.is-on:not(:disabled){outline:none}
.vg-flow.vg-flow:focus-visible .fl-txt,.vg-flow.vg-flow.is-on:not(:disabled) .fl-txt{transform:translateX(12px)}
.vg-flow.vg-flow:focus-visible .fl-circle,.vg-flow.vg-flow.is-on:not(:disabled) .fl-circle{width:max(220px,120%);height:auto;aspect-ratio:1/1;opacity:1}
.vg-flow.vg-flow:focus-visible .fl-arr,.vg-flow.vg-flow.is-on:not(:disabled) .fl-arr{color:#fff}
.vg-flow.vg-flow:focus-visible .fl-a1,.vg-flow.vg-flow.is-on:not(:disabled) .fl-a1{right:-25%}
.vg-flow.vg-flow:focus-visible .fl-a2,.vg-flow.vg-flow.is-on:not(:disabled) .fl-a2{left:16px}
.vg-flow.vg-flow:active:not(:disabled){transform:scale(.95);background:transparent;box-shadow:none;filter:none}
.vg-flow.vg-flow:disabled{opacity:.6;cursor:default;filter:none}
/* dark theme: light outline and text; the fill becomes light with dark text so contrast stays readable */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vg-flow.vg-flow{border-color:rgba(255,255,255,.42);color:#e8e6e1}
  :root:not([data-theme="light"]) .vg-flow.vg-flow .fl-arr{color:#e8e6e1} :root:not([data-theme="light"]) .vg-flow.vg-flow .fl-circle{background:#e8e6e1}
  :root:not([data-theme="light"]) .vg-flow.vg-flow:focus-visible,:root:not([data-theme="light"]) .vg-flow.vg-flow.is-on:not(:disabled),:root:not([data-theme="light"]) .vg-flow.vg-flow:focus-visible .fl-arr,:root:not([data-theme="light"]) .vg-flow.vg-flow.is-on:not(:disabled) .fl-arr{color:#111}
  @media (hover:hover){:root:not([data-theme="light"]) .vg-flow.vg-flow:hover:not(:disabled),:root:not([data-theme="light"]) .vg-flow.vg-flow:hover:not(:disabled) .fl-arr{color:#111}}}
:root[data-theme="dark"] .vg-flow.vg-flow{border-color:rgba(255,255,255,.42);color:#e8e6e1}
:root[data-theme="dark"] .vg-flow.vg-flow .fl-arr{color:#e8e6e1} :root[data-theme="dark"] .vg-flow.vg-flow .fl-circle{background:#e8e6e1}
:root[data-theme="dark"] .vg-flow.vg-flow:focus-visible,:root[data-theme="dark"] .vg-flow.vg-flow.is-on:not(:disabled),:root[data-theme="dark"] .vg-flow.vg-flow:focus-visible .fl-arr,:root[data-theme="dark"] .vg-flow.vg-flow.is-on:not(:disabled) .fl-arr{color:#111}
@media (hover:hover){:root[data-theme="dark"] .vg-flow.vg-flow:hover:not(:disabled),:root[data-theme="dark"] .vg-flow.vg-flow:hover:not(:disabled) .fl-arr{color:#111}}
@media (prefers-reduced-motion: reduce){.vg-flow.vg-flow,.vg-flow.vg-flow .fl-txt,.vg-flow.vg-flow .fl-circle,.vg-flow.vg-flow .fl-arr{transition:none!important}.vg-flow.vg-flow .fl-txt{transform:none!important}}
button.primary.big.vg-flow{width:100%;min-height:56px;font-size:var(--ios-t-title3)}
button.primary.big.vg-flow .vgc-mini{margin-right:0}

/* ======================= accent and primary actions (Apple base, 2026-11-07; was «monochrome interface») =======================
   The accent tokens are systemBlue (vg-apple-base.css). Poncheo's primary actions (button.primary / .huge, .btnlike.primary)
   are filled blue; flowify() no longer runs in Poncheo. The Workshop's own action tiles (.btnlink, #teamsbtn, .action-*,
   .inv-addbig) keep their outlined capsule until the Workshop is converted. The 3D scene's materials are untouched. */
:root{--accent:var(--ios-blue);--accent-ink:var(--ios-on-accent);--accent-deep:var(--ios-blue);--accent-soft:var(--ios-blue-tint);--glass:#9a9d9f;--glass-soft:var(--ios-blue-tint);--stem:#1b2126;--sys450:#3a3f44;--sys451:#6b6660;--sh-primary:0 0 0 0 transparent}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glass:#8a9096;--stem:#e8e6e1;--sys450:#c9cdd0;--sys451:#b3aea6}}
:root[data-theme="dark"]{--glass:#8a9096;--stem:#e8e6e1;--sys450:#c9cdd0;--sys451:#b3aea6}
button.primary,button.huge,.btnlike.primary{background:var(--accent);border:0;color:var(--accent-ink);box-shadow:none;border-radius:var(--ios-r-full)}
.btnlink,#teamsbtn,.action-add,.action-3d,.inv-addbig{background:transparent;border:1.5px solid rgba(51,51,51,.4);color:#111;box-shadow:none;border-radius:100px}
button.primary::before,button.primary::after,button.huge::before,button.huge::after,.btnlink::before,.btnlink::after,#teamsbtn::before,#teamsbtn::after,.action-add::before,.action-add::after,.action-3d::before,.action-3d::after{display:none}
button.primary:active:not(:disabled),button.huge:active:not(:disabled),.btnlike.primary:active{filter:brightness(.9);box-shadow:none}
.btnlink:active,#teamsbtn:active,.action-add:active,.action-3d:active{background:transparent;filter:none;box-shadow:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btnlink,:root:not([data-theme="light"]) #teamsbtn,:root:not([data-theme="light"]) .action-add,:root:not([data-theme="light"]) .action-3d,:root:not([data-theme="light"]) .inv-addbig{background:transparent;border-color:rgba(255,255,255,.42);color:#e8e6e1}}
:root[data-theme="dark"] .btnlink,:root[data-theme="dark"] #teamsbtn,:root[data-theme="dark"] .action-add,:root[data-theme="dark"] .action-3d,:root[data-theme="dark"] .inv-addbig{background:transparent;border-color:rgba(255,255,255,.42);color:#e8e6e1}
/* the flow label keeps icons and multi-line text inside the moving span */
.vg-flow.vg-flow .fl-txt{white-space:normal;text-align:left}
.vg-flow.vg-flow .fl-txt>span:only-child{white-space:nowrap}
/* language selector (Apple base): an iOS segmented control — gray fill track, white / #636366 thumb; the focus ring is
   drawn inside the capsule so nothing protrudes. Tokens follow the theme: no dark copy. */
.vgl,.langsw.vgl{background:var(--ios-fill);box-shadow:none}
.vgl-knob{background:var(--ios-seg-thumb);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
.vgl-lbl,.vgl-ghost,.langsw.vgl span,.langsw.vgl .vgl-knob{color:var(--ink)}
.vgl-opt,.langsw.vgl .vgl-opt{color:var(--muted)}
.vgl-opt:focus-visible{outline:none;color:transparent}
.vgl-opt[aria-pressed="false"]:focus-visible{color:var(--ink)}
.vgl:focus-within,.langsw.vgl:focus-within{box-shadow:inset 0 0 0 2px var(--ios-blue)}
.vgl-knob{transition:transform 260ms cubic-bezier(.2,.8,.2,1)}
/* the sign-in logo: no tile, ring or heavy frame; the authentic image on its own with a quiet shadow; the recurring
   reflection stays clipped inside the rounded logo */
.plaque,.hero .plaque{background:#fff;border:0;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 24px -16px rgba(0,0,0,.35);outline:none}
.plaque img{width:100%;height:100%;object-fit:contain;display:block}
.hero .plaque{width:136px;height:170px;border-radius:28px;margin:4px auto 16px;padding:0}   /* the logo file is 4:5: the plaque takes its shape, nothing is cropped */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plaque,:root:not([data-theme="light"]) .hero .plaque{box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 28px -16px rgba(0,0,0,.8)}}
:root[data-theme="dark"] .plaque,:root[data-theme="dark"] .hero .plaque{box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 28px -16px rgba(0,0,0,.8)}
/* clock in / out: the big flow capsule */
button.huge.vg-flow{min-height:64px;font-size:var(--ios-t-title2)}

/* Native dropdowns: gradients alone leave a transparent popup surface on some
   browsers. Keep the closed-control glass finish, with an opaque fallback and
   matching native option colors. Theme overrides follow the app's existing rules. */
:root{--native-select-bg:var(--ios-bg-2);--native-select-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--native-select-scheme:dark}}
:root[data-theme="dark"]{--native-select-scheme:dark}
:root select,:root:not([data-theme="light"]) select{
  color:var(--ink);background-color:var(--native-select-bg);color-scheme:var(--native-select-scheme)
}
select option,select optgroup{color:var(--ink);background-color:var(--native-select-bg)}
select:not(:disabled) option:checked:not(:disabled){color:HighlightText;background-color:Highlight}
:root select:disabled,#me-sel:disabled,select:disabled option,select option:disabled,select optgroup:disabled{
  color:GrayText;background-color:var(--native-select-bg)
}

/* ======================= dates and times inside cards on phones (2026-10-12) =======================
   1. Native date / time / date-and-time fields: iOS Safari gives them an intrinsic width and centred text that can push
      past the card; they now shrink to the card, left-align their value and keep their height when empty.
   2. The attendance table becomes stacked rows on narrow screens (person on top, Entrada / Salida side by side, each
      with its own label), so a day and a time never get squeezed into an 80 px column.
   3. Grid and flex rows that hold dates may shrink; the day pill on a job card keeps to one line. */
input[type="date"],input[type="time"],input[type="datetime-local"]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;min-height:50px;text-align:left}
input[type="date"]::-webkit-date-and-time-value,input[type="time"]::-webkit-date-and-time-value,input[type="datetime-local"]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.3em}
input[type="date"]::-webkit-datetime-edit,input[type="time"]::-webkit-datetime-edit,input[type="datetime-local"]::-webkit-datetime-edit{padding:0;max-width:100%;overflow:hidden}
label:has(> input[type="date"]),label:has(> input[type="time"]),label:has(> input[type="datetime-local"]){min-width:0}
.grid2>*,.prow>*,.actions2>*{min-width:0}
.job .jhead .pill{flex:none;white-space:nowrap}
.state{overflow-wrap:normal}
@media (max-width:520px){
  .tblwrap{overflow-x:visible}
  .tbl,.tbl tbody{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:10px 0;border-top:1px solid var(--line)}
  .tbl tbody tr:first-child{border-top:0}
  .tbl td{display:block;padding:0;border:0;min-width:0}
  .tbl td:first-child{grid-column:1 / -1;font-weight:700}
  .tbl td[data-l]::before{content:attr(data-l);display:block;font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);color:var(--ios-label-2)}
  .tbl td:has(> form.fixform){grid-column:1 / -1}
}

/* location help after a punch that could not get an accurate fix (2026-10-13) */
.lochelp{margin:8px 0 2px;color:var(--ink)}
.lochelp summary{min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--ink);cursor:pointer}
.lochelp ul{margin:4px 0 0;padding-left:18px;display:grid;gap:6px;font-size:var(--ios-t-subhead);line-height:1.35}
.lochelp b{font-weight:700}

/* net hours: elapsed / break / net, side by side */
.hday{grid-template-columns:minmax(0,1fr)}
.hcalc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0 2px;padding:0}
.hcalc>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hcalc dt{font:400 var(--ios-t-caption1) var(--font-ui);color:var(--muted,inherit);opacity:.8}
.hcalc dd{margin:0;font:600 var(--ios-t-callout) var(--font-ui);font-variant-numeric:tabular-nums}
.hcalc dd b{font-weight:700}
.brkform{display:grid;gap:8px;margin-top:8px}
.hday details>summary{cursor:pointer;margin-top:6px}

/* Aprobar plan del día (day-approval.js): iOS grouped lists; people and jobs are a multi-select (.vg-check), the yes/no is a switch */
.da-page{margin:0 0 24px}
.da-page>h2{margin:4px 0 6px}
.da-intro{margin:0 0 4px;font:var(--ios-w-regular) var(--ios-t-subhead)/var(--ios-lh-subhead) var(--ios-font);color:var(--ios-label-2)}
.da-status{margin:0 0 8px;min-height:0;font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);color:var(--ios-label-2)}
.da-status:empty{display:none}
.da-page .vg-group-head{margin-inline:var(--ios-gutter)}
.da-page fieldset.vg-group{margin-inline:0;padding:0;min-width:0}
.da-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.da-page .vg-cell .vg-input[type=date],.da-page .vg-cell .vg-input[type=time]{flex:0 1 auto;min-height:0;margin:0;color:var(--ios-blue-text);text-align:end}
.da-page .vg-cell .vg-select{margin:0}
.da-page .vg-cell.is-field textarea.vg-input{flex:1 1 100%;min-height:88px;margin:0;text-align:start}
.da-page .da-pick{align-items:flex-start}
.da-page .da-pick .vg-check{margin-top:0}
.da-page .da-pick b{font-weight:var(--ios-w-regular)}
.da-page .da-pick .pre{white-space:pre-line}
.da-page .vg-group.has-icons .vg-cell+.vg-cell,.da-page .da-list .vg-cell+.vg-cell{--vg-cell-inset:calc(var(--ios-gutter) + 22px + 12px)}
.da-page .da-list .vg-cell:not(.da-pick){--vg-cell-inset:var(--ios-gutter)}
.da-page .da-confirm .vg-cell-label{font:var(--ios-w-regular) var(--ios-t-subhead)/var(--ios-lh-subhead) var(--ios-font)}
.da-page button.vg-cell{margin:0;width:100%;justify-content:flex-start;font-weight:var(--ios-w-regular);min-height:var(--ios-row-h)}
.da-page .da-submit{display:flex;width:100%;margin:0 0 22px;white-space:nowrap}
.da-page .da-foot{margin-top:0}
.da-revoke{margin:0 0 22px}
.da-revoke>summary{list-style:none;background:var(--ios-bg-2);border-radius:var(--ios-r);color:var(--ios-red-text)}
.da-revoke>summary::-webkit-details-marker{display:none}
.da-revoke[open]>summary{margin-bottom:8px}

/* Pedir corrección de salida (corrFormHtml): one grouped list, the send button full width, Cancelar as a text button */
#corr .corr-group{margin:8px 0 12px;background:var(--ios-bg-3)}
#corr .corr-cell{flex-wrap:wrap;gap:4px 12px}
#corr .corr-cell .vg-cell-label{flex:1 1 auto}
#corr .corr-cell .vg-input{flex:1 1 170px;margin:0;color:var(--ios-label);min-width:0}
#corr .corr-cell.is-field .vg-input{flex-basis:100%;text-align:start}
#corr .corr-actions{display:grid;gap:4px;justify-items:stretch}
#corr .corr-actions>button{margin:0;white-space:nowrap}
#corr .corr-actions>button.link{justify-self:center}

/* Corregir turno (fixFormHtml, inside an attendance record): a full-width grouped list under the record, then the save button */
.fixform{display:block;margin:10px 0 4px}
.fixform>.vg-group{margin:0 0 10px;background:var(--ios-bg-3)}
.fixform .fx-cell{flex-wrap:wrap;gap:4px 12px}
.fixform .fx-cell .vg-cell-label{flex:1 1 auto}
.fixform .fx-cell .vg-input{flex:1 1 180px;margin:0;color:var(--ios-label);min-width:0}
.fixform .fx-cell.is-field .vg-input{flex-basis:100%;text-align:start}
.fixform .fx-sub{flex-basis:100%;font-size:var(--ios-t-footnote);line-height:var(--ios-lh-footnote)}
.fixform>button.primary{width:100%;margin:0;white-space:nowrap}