/* Visual design layer shared by the Jornada DFT screens. */
:root{
  --bg:#eef3f5;--ink:#182c3a;--muted:#536977;--line:#d6e3e8;
  --blue:#16695f;--surface:#fff;--green:#08705e;--red:#a7293d;
  --nav:#123b37;--nav-soft:#e0f0ec;--accent:#237f73;
  font-family:"Aptos","Segoe UI",system-ui,sans-serif;
}
[data-theme=dark]{
  --bg:#0f1b23;--ink:#edf8f7;--muted:#abc2c7;--line:#304752;--surface:#172a33;
  --blue:#22796c;--nav:#d9f4ed;--nav-soft:#24463f;--accent:#7fd7c6;
}
body{
  background:radial-gradient(ellipse at 74% 0%,#a4e2d48c,transparent 47%),
    url("circuitos.svg") center top / 360px 248px repeat,
    radial-gradient(ellipse at 7% 76%,#bbd7eb80,transparent 46%),var(--bg)
}
[data-theme=dark] body{
  background:radial-gradient(ellipse at 74% 0%,#18504d82,transparent 48%),
    url("circuitos.svg") center top / 360px 248px repeat,
    radial-gradient(ellipse at 7% 76%,#17324da8,transparent 52%),var(--bg)
}
.top,[data-theme=dark] .top{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.bar{max-width:1120px;min-height:74px}
.brand,.brand strong,[data-theme=dark] .brand{color:var(--ink)}
.brand .mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#113f3c;color:#a7e6d7}
.brand svg,.bar nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bar nav{gap:7px}
.bar nav a,[data-theme=dark] .bar nav a{display:flex;align-items:center;gap:7px;color:var(--muted);border-radius:12px;padding:9px 14px}
.bar nav a:hover,.bar nav a[aria-current],[data-theme=dark] .bar nav a[aria-current]{color:var(--nav);background:var(--nav-soft)}
.bar nav a[aria-current]::after{display:none}

main{width:min(100%,1100px);padding-block:48px}
h1{font-size:clamp(2.25rem,5vw,3.6rem);letter-spacing:-.057em}
.eyebrow,[data-theme=dark] .eyebrow{color:var(--accent);font-weight:800}
.card{border-radius:22px;box-shadow:0 12px 32px #132e3920}
.secondary{background:#e9f2f1;color:#215651;border-color:#cddfdf;--edge:#afc5c6}
.primary:not(:disabled),.theme-control [aria-pressed=true]{
  --edge:#0c4b43;--cast:#0f645449;
  box-shadow:inset 0 1px 0 #ffffff60,0 4px 0 var(--edge),0 8px 12px var(--cast)
}
.secondary:not(:disabled){--edge:#aec9c5;--cast:#2756522a}
[data-theme=dark] .secondary:not(:disabled){--edge:#101e27;--cast:#0d1b2966}
.secondary:not(:disabled),.theme-control [aria-pressed=true]{
  box-shadow:inset 0 1px 0 #ffffff4a,0 4px 0 var(--edge),0 8px 12px var(--cast)
}
.theme-control [aria-pressed=true],[data-theme=dark] .theme-control [aria-pressed=true]{
  --edge:#0c4b43;--cast:#0f645449
}
.primary:not(:disabled):active,.secondary:not(:disabled):active{
  box-shadow:inset 0 2px 4px #0003,0 1px 0 var(--edge),0 2px 4px var(--cast)
}
.filters label,.stack label{color:var(--ink)}
input:not([type=hidden]),select,textarea{border-color:#c2d4dc}
.view-home main{flex:0 0 auto;padding-bottom:0}
.view-home .punch{padding:12px}
.punch-readout{position:relative;overflow:hidden;min-width:0;border-radius:18px;padding:24px;color:#effdfb;
  background:repeating-linear-gradient(90deg,#a4f3de0b 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,#a4f3de0b 0 1px,transparent 1px 26px),
    radial-gradient(ellipse at 92% 8%,#316c6e,transparent 58%),linear-gradient(135deg,#132f3d,#113f3c)}
.punch-readout::after{
  content:"";position:absolute;right:12px;top:12px;width:20px;height:16px;
  border-top:1px solid #b8f7e9a8;border-right:1px solid #b8f7e9a8;pointer-events:none
}
.punch-readout .eyebrow{color:#9fdbce;margin-bottom:13px}
.punch-readout .today{color:#c4dadc;margin-top:16px}
.punch-readout .clock{margin:4px 0 0;color:#f5fffd;font-size:clamp(3rem,8vw,6.1rem);text-shadow:0 0 22px #71eedc33}
.punch .status{background:#deebe9;color:#274850}
.punch .status.active{background:#bcebd6;color:#06543c}
.punch .status.on-break{background:#ffddb9;color:#733908}
.punch-button{min-height:69px}
.punch-button.meal{background-color:#a45514}
.view-home .punch-actions{width:min(100%,1100px);margin:0 auto;padding:15px 24px 24px}
.view-home .punch-main{min-height:88px}
.stats .card{position:relative;padding-left:77px}
.metric-icon{position:absolute;left:23px;top:24px;width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:var(--nav-soft);color:var(--accent);font-size:1.35rem;font-weight:700}
.stats .metric{font-size:clamp(1.04rem,3.2vw,1.65rem)}
.access-grid{display:grid;grid-template-columns:1fr .86fr;gap:20px;align-items:stretch;margin:18px auto;max-width:950px}
.access-visual{padding:32px 37px 15px;position:relative;overflow:hidden;min-width:0;color:#eefdfb;border-radius:24px;
  background:repeating-linear-gradient(90deg,#b1fff30a 0 1px,transparent 1px 27px),
    radial-gradient(ellipse at 80% 72%,#337475,#153941 55%,#112b37);border:1px solid #306667}
.access-visual h1{max-width:10ch;margin:10px 0 12px}
.access-card{margin:0;max-width:none;padding:36px 30px;align-content:center}
.access-card h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:5px 0 8px}
.access-card .primary{justify-content:space-between}
.access-dial{display:block;height:196px;width:100%;margin:4px 0 0}
.dial-ring,.dial-ticks,.dial-pointer{fill:none;stroke:#a3eee0;stroke-width:3;stroke-linecap:round}
.dial-ring.outer{stroke:#7ac3b6;stroke-dasharray:2 8;opacity:.56}
.dial-ticks{stroke:#77b8b3}
.dial-pointer{stroke-width:5}
.dial-dot{fill:#a3eee0}
.view-account main{display:grid;grid-template-columns:1fr .9fr;gap:14px;align-items:start}
.view-account main>.eyebrow,.view-account main>h1,.view-account main>.notice{grid-column:1/-1}
.view-account main>h1{margin:-11px 0 1px}
.view-account .form-card{max-width:none;width:100%;margin:0}
.view-history .records .heading{border-bottom:1px solid var(--line);padding-bottom:10px}
.total{background:var(--nav-soft);color:var(--nav);padding:5px 10px;border-radius:9px}
.scene{background:radial-gradient(ellipse at 50% 26%,#275b60,#142b38 74%);border-color:#6bb2a9}
.scene-art{color:#a5eadb}
.scene[data-icon=unlock] .scene-art,.scene[data-icon=lock] .scene-art{color:#a1f2df}
.scene[data-icon=unlock] .lock-shackle{animation:access-open .88s .19s cubic-bezier(.18,.72,.25,1.22) both}
.scene[data-icon=moon] .scene-art{color:#c3d8ff}
.scene[data-icon=sun] .scene-art{color:#ffdb8c}
.moon-stars{animation:orbit-glow 1.4s ease-in-out infinite}
.sun-rays{transform-origin:60px 55px;animation:solar-rise .95s ease-out both}
.scene::after{
  content:"";display:block;height:3px;border-radius:4px;background:#75dfc8;
  transform-origin:left;margin:4px 18px 5px;animation:scene-progress var(--scene-duration,1500ms) linear both;
}
@keyframes access-open{0%,22%{transform:none}to{transform:translateY(-6px) rotate(-41deg)}}
@keyframes orbit-glow{0%,100%{opacity:.38}48%{opacity:1}}
@keyframes solar-rise{from{opacity:0;transform:rotate(-25deg) scale(.76)}to{opacity:1;transform:none}}
@media(min-width:701px){
  .signed-in .bar{display:grid;grid-template-columns:1fr auto 1fr}
  .signed-in .brand{justify-self:start}
}
@keyframes scene-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dial-settle{0%{transform:rotate(-20deg)}65%{transform:rotate(6deg)}100%{transform:rotate(0)}}
@keyframes gear-settle{0%{transform:rotate(-24deg)}20%{transform:rotate(-44deg)}82%{transform:rotate(190deg)}100%{transform:rotate(180deg)}}
@keyframes push-in{from{opacity:.62;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes push-out{from{opacity:1;transform:none}to{opacity:.2;transform:translateX(-22px)}}
@media(prefers-reduced-motion:no-preference){
  main{animation:push-in .29s cubic-bezier(.16,.78,.24,1) both}
  .page-leaving main{animation:push-out .26s ease-in both}
  .dial-pointer{transform-origin:150px 113px;animation:dial-settle .95s cubic-bezier(.2,.75,.25,1) both}
  .scene-gear{animation:gear-settle .82s ease-out both}
}
@media(max-width:700px){
  .signed-in{--nav-height:calc(68px + env(safe-area-inset-bottom))}
  .bar{min-height:66px;padding:9px 16px}
  main{padding:25px 16px}
  .signed-in main{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .bar nav{position:fixed;z-index:4;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);
    min-height:var(--nav-height);padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -5px 22px #14283c14}
  .bar nav a,.bar nav a[aria-current],[data-theme=dark] .bar nav a{flex-direction:column;gap:2px;justify-content:center;min-height:55px;padding:4px;font-size:.8rem}
  .bar nav svg{width:21px;height:21px}
  .view-home main{padding-top:15px;padding-bottom:calc(168px + var(--nav-height))}
  .view-home main>.notice[data-action-scene]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .view-home .page-title h1{margin-bottom:12px}
  .view-home .punch{padding:8px}
  .punch-readout{padding:10px 14px;text-align:center}
  .punch-readout .eyebrow{margin-bottom:6px}
  .punch-readout .today{margin-top:7px}
  .punch-readout .clock{font-size:clamp(2.9rem,13vw,5rem);line-height:1}
  .view-home .punch-actions{
    position:fixed;z-index:3;bottom:var(--nav-height);left:0;right:0;
    padding:8px 16px 9px;gap:5px;background:var(--surface);border-top:1px solid var(--line)
  }
  .view-home .punch-button{width:100%;min-height:45px;padding-block:7px}
  .view-home .punch-main{min-height:78px}
  .stats .card{display:grid;grid-template-columns:25px 1fr;gap:4px 6px;align-items:center;padding:9px}
  .metric-icon{position:static;width:25px;height:25px;font-size:1rem}
  .stats .eyebrow{font-size:.67rem}
  .stats .metric{grid-column:1/-1;margin-top:0;font-size:1rem}
  .access-grid,.view-account main{grid-template-columns:1fr;gap:12px}
  .access-grid{margin:0}
  .access-visual{padding:19px 19px 20px}
  .access-visual h1{font-size:2.15rem;margin:5px 0 7px}
  .access-dial{position:absolute;right:-26px;top:-28px;width:133px;height:112px;opacity:.43;pointer-events:none}
  .access-card{padding:21px}
}