/* R35. Shared compact mobile geometry, preserving native Figma SVG dimensions. */
.hv-staff{-webkit-text-size-adjust:100%;text-size-adjust:100%;--hvu:calc(1px * var(--hv-density,1));--hvs:var(--hv-density,1)}
.hv-staff .main{max-width:393px;width:100%;padding:calc(12 * var(--hvu)) calc(19 * var(--hvu)) calc(92 * var(--hvu));padding-top:max(calc(12 * var(--hvu)),env(safe-area-inset-top));border:0;min-height:100svh}
.hv-staff .hv-header{min-height:calc(43 * var(--hvu));margin-bottom:calc(17 * var(--hvu));gap:calc(12 * var(--hvu))}
.hv-staff .hv-avatar{width:calc(43 * var(--hvu));height:calc(43 * var(--hvu));font-size:calc(20 * var(--hvu))}
.hv-staff .hv-person{gap:calc(8 * var(--hvu))}.hv-staff .hv-person small{font-size:calc(10 * var(--hvu));line-height:calc(16 * var(--hvu))}.hv-staff .hv-person strong{font-size:calc(17 * var(--hvu));line-height:calc(21 * var(--hvu))}
.hv-staff .hv-bell{width:calc(33 * var(--hvu));height:calc(33 * var(--hvu))}.hv-staff .hv-bell>span{transform:scale(var(--hvs))}
.hv-home .hv-dashboard{display:flex;flex-direction:column;min-height:calc(100svh - 159 * var(--hvu) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.hv-home .hv-clock-card{flex:none;height:calc(165 * var(--hvu));padding-top:calc(20 * var(--hvu));border-radius:calc(20 * var(--hvu))}
.hv-home .hv-clock-card>small{font-size:calc(9.6 * var(--hvu));line-height:calc(15 * var(--hvu))}
.hv-home .hv-clock{font-size:calc(39.6 * var(--hvu));line-height:calc(47 * var(--hvu));letter-spacing:calc(3 * var(--hvu))}
.hv-home .hv-work-status{height:calc(26 * var(--hvu));gap:calc(10 * var(--hvu));margin:calc(7 * var(--hvu)) calc(8 * var(--hvu)) calc(6 * var(--hvu));padding:0 calc(12 * var(--hvu))}
.hv-home .hv-work-status>span{font-size:calc(9 * var(--hvu))}.hv-home .hv-work-status>span .hv-icon{transform:scale(var(--hvs));transform-origin:left center}
.hv-home .hv-work-status small{font-size:calc(7 * var(--hvu))}.hv-home .hv-work-status progress{height:calc(7 * var(--hvu))}
.hv-home .hv-clock-footer{height:calc(44 * var(--hvu));padding:calc(5 * var(--hvu)) calc(5 * var(--hvu)) calc(3 * var(--hvu))}
.hv-home .hv-clock-footer small{font-size:calc(9 * var(--hvu));line-height:calc(15 * var(--hvu))}.hv-home .hv-clock-footer b{font-size:calc(15 * var(--hvu));line-height:calc(17 * var(--hvu))}
.hv-home .hv-dashboard>.hv-today{min-height:calc(55 * var(--hvu));font-size:calc(14 * var(--hvu));padding:calc(8 * var(--hvu)) 0;gap:calc(4 * var(--hvu));flex:none}
.hv-home .hv-dashboard>.hv-today b{font-size:calc(20 * var(--hvu))}.hv-home .hv-dashboard>.hv-today>.hv-dots{transform:scale(var(--hvs))}
.hv-home .hv-feature-card{flex:none;border-radius:calc(16 * var(--hvu))}
.hv-home .hv-quick-grid{gap:calc(8 * var(--hvu));padding:calc(17 * var(--hvu)) calc(16 * var(--hvu)) calc(8 * var(--hvu))}
.hv-home .hv-quick{height:calc(90 * var(--hvu));font-size:calc(10 * var(--hvu));gap:calc(4 * var(--hvu));border-radius:calc(15 * var(--hvu));letter-spacing:calc(.3 * var(--hvu))}
.hv-home .hv-quick-icon{width:calc(48 * var(--hvu));height:calc(48 * var(--hvu))}
.hv-home .hv-quick-icon>.hv-icon{transform:scale(var(--hvs));transform-origin:top left}
.hv-home .hv-quick-icon>span>.hv-icon{transform:scale(var(--hvs))}
.hv-home .hv-more>summary{width:calc(100 * var(--hvu));padding:calc(8 * var(--hvu)) calc(15 * var(--hvu)) calc(5 * var(--hvu));font-size:calc(10 * var(--hvu));line-height:calc(15 * var(--hvu))}
.hv-home .hv-performance{padding:calc(7 * var(--hvu)) calc(20 * var(--hvu)) calc(12 * var(--hvu))}
.hv-home .hv-performance h2{font-size:calc(10 * var(--hvu));line-height:calc(14 * var(--hvu));margin-bottom:calc(8 * var(--hvu))}
.hv-home .hv-metrics{gap:calc(13 * var(--hvu));max-width:none}
.hv-home .hv-metric{position:relative;border-width:calc(6 * var(--hvu));width:calc(64 * var(--hvu));height:calc(64 * var(--hvu));display:grid;place-items:center;flex:none}
.hv-home .hv-metric>div{position:relative;line-height:calc(12 * var(--hvu));max-width:100%}
.hv-home .hv-metric b{font-size:calc(16 * var(--hvu));font-weight:600}.hv-home .hv-metric small{font-size:calc(6 * var(--hvu))}.hv-home .hv-metric span{font-size:calc(7 * var(--hvu));line-height:calc(11 * var(--hvu))}
.hv-home .hv-home-actions{margin-top:auto;padding-top:calc(32 * var(--hvu));flex:none}
.hv-home .hv-last{margin-top:0;border-radius:calc(15 * var(--hvu))}
.hv-home .hv-last h2{font-size:calc(10 * var(--hvu));line-height:calc(14 * var(--hvu));padding:calc(10 * var(--hvu)) calc(18 * var(--hvu)) calc(8 * var(--hvu))}
.hv-home .hv-last h2 .hv-icon{transform:scale(var(--hvs))}
.hv-home .hv-last-row{min-height:calc(49 * var(--hvu));padding:calc(7 * var(--hvu)) calc(18 * var(--hvu));gap:calc(12 * var(--hvu))}
.hv-home .hv-last-row>b{font-size:calc(12 * var(--hvu))}.hv-home .hv-last-row>div{line-height:calc(14 * var(--hvu))}.hv-home .hv-last-row strong{font-size:calc(11 * var(--hvu))}.hv-home .hv-last-row span{font-size:calc(10 * var(--hvu))}.hv-home .hv-status{font-size:calc(9 * var(--hvu));padding:calc(3 * var(--hvu)) calc(5 * var(--hvu))}
.hv-home .hv-empty{min-height:calc(49 * var(--hvu));margin:0;padding:calc(8 * var(--hvu)) calc(18 * var(--hvu));font-size:calc(11 * var(--hvu))}
.hv-home .hv-primary-cta{height:calc(53 * var(--hvu));min-height:44px;margin-top:calc(12 * var(--hvu));font-size:calc(14 * var(--hvu));border-radius:calc(15 * var(--hvu));gap:calc(10 * var(--hvu));font-weight:500;box-shadow:none;flex:none}
.hv-home .hv-primary-cta .hv-icon{transform:scale(var(--hvs))}
.hv-home .hv-quote,.hv-home .main>.hv-tools,.hv-home .hv-attendance-sheet:not([open]){display:none}
.hv-staff .hv-bottom{max-width:393px;min-height:0;height:calc(81 * var(--hvu) + env(safe-area-inset-bottom));padding:calc(10 * var(--hvu)) 0 max(calc(16 * var(--hvu)),env(safe-area-inset-bottom));border-radius:calc(15 * var(--hvu)) calc(15 * var(--hvu)) 0 0;box-shadow:0 -7px 24px #cde8ff55,0 0 5px #00000012}
.hv-staff .hv-bottom a{gap:calc(5 * var(--hvu));min-width:0}
.hv-staff .hv-bottom a .hv-icon{transform:scale(var(--hvs));transform-origin:center top;margin-bottom:calc(-25px + 25 * var(--hvu))}
.hv-staff .hv-bottom small{font-size:calc(8 * var(--hvu));line-height:calc(22 * var(--hvu));letter-spacing:calc(.5 * var(--hvu));font-weight:400}
.hv-staff .hv-bottom a.active small{font-weight:600}
.hv-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(8 * var(--hvu));padding:calc(14 * var(--hvu));}
.hv-more-grid a{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;min-height:calc(91 * var(--hvu));padding:calc(8 * var(--hvu)) calc(3 * var(--hvu));gap:calc(4 * var(--hvu));border-radius:calc(15 * var(--hvu));font-size:calc(9 * var(--hvu));line-height:calc(13 * var(--hvu));letter-spacing:0}
.hv-more-grid a span{display:block}.hv-more-grid a .hv-menu-label{font-size:inherit;line-height:inherit;overflow-wrap:anywhere}
.hv-more-grid .hv-menu-icon{position:relative;width:calc(48 * var(--hvu));height:calc(48 * var(--hvu));flex:none}
.hv-more-grid .hv-menu-icon>.hv-icon{position:absolute;top:0;left:0;transform:scale(var(--hvs));transform-origin:top left}
.hv-more-grid .hv-menu-icon>span{position:absolute;inset:0;display:grid;place-items:center}
.hv-more-grid .hv-menu-icon>span>.hv-icon{transform:scale(var(--hvs))}
.hv-more .hv-metric-help{margin:0;padding:8px 14px 14px;font-size:10px}
.hv-more .hv-metric-help>summary{font-size:10px}
/* The attendance frame opens from its top and keeps the main action within the compact layout. */
.hv-staff .hv-attendance-sheet[open]{--hv-u:var(--hvu);padding-top:max(calc(20 * var(--hvu)),env(safe-area-inset-top));padding-bottom:max(calc(20 * var(--hvu)),env(safe-area-inset-bottom));overflow-x:hidden;overscroll-behavior:contain}
.hv-staff .hv-attendance-sheet .hv-back{min-height:0;width:calc(42 * var(--hvu));height:calc(42 * var(--hvu))}
.hv-staff .hv-attendance-sheet .hv-back .hv-icon{transform:scale(var(--hvs))}
.hv-staff .hv-attendance-sheet .hv-presence-person{margin-top:calc(76 * var(--hvu))}
.hv-staff .hv-attendance-sheet .camera-box video,.hv-staff .hv-attendance-sheet .camera-box img{transform:none}
.hv-staff .hv-attendance-sheet .hv-presence-submit button{min-height:44px}
.hv-staff .hv-attendance-sheet .hv-presence-submit .hv-icon,.hv-staff .hv-attendance-sheet .hv-presence-location>.hv-icon{transform:scale(var(--hvs))}
.hv-staff .hv-attendance-sheet .hv-presence-options{margin-top:calc(10 * var(--hvu))}
.hv-staff .hv-attendance-sheet .hv-presence-options>summary{font-weight:400;font-size:calc(10 * var(--hvu))}
/* Success and employee schedule screens use the same 393 px design width. */
.hv-staff .hv-success{max-width:393px;padding:0 calc(19 * var(--hvu)) calc(40 * var(--hvu));height:100dvh}
.hv-staff .hv-success-symbol{width:calc(233 * var(--hvu));height:calc(233 * var(--hvu));margin:calc(141 * var(--hvu)) auto calc(59 * var(--hvu))}
.hv-staff .hv-success-symbol>.hv-icon{transform:scale(var(--hvs));transform-origin:top left}.hv-staff .hv-success-symbol>span>.hv-icon{transform:scale(var(--hvs))}
.hv-staff .hv-success h2{font-size:calc(30 * var(--hvu));line-height:calc(47 * var(--hvu));margin-bottom:calc(14 * var(--hvu))}
.hv-staff .hv-success>p{font-size:calc(13 * var(--hvu));line-height:calc(20 * var(--hvu));margin-bottom:calc(8 * var(--hvu))}
.hv-staff .hv-success time{font-size:calc(14 * var(--hvu));padding:calc(8 * var(--hvu)) calc(16 * var(--hvu))}
.hv-staff .hv-success .hv-success-thanks{margin:calc(70 * var(--hvu)) auto calc(16 * var(--hvu));max-width:calc(300 * var(--hvu));line-height:calc(20 * var(--hvu))}
.hv-staff .hv-success a{min-height:44px;height:calc(53 * var(--hvu));font-size:calc(14 * var(--hvu));border-radius:calc(15 * var(--hvu))}
.hv-schedule-page .main{display:flex;flex-direction:column}.hv-schedule-page .hv-schedule-top{margin-top:0;flex:none;padding:calc(9 * var(--hvu)) calc(9 * var(--hvu)) calc(10 * var(--hvu));border-radius:calc(15 * var(--hvu))}
.hv-schedule-page .hv-schedule-date{min-height:calc(36 * var(--hvu));font-size:calc(13 * var(--hvu));gap:calc(5 * var(--hvu));padding:calc(5 * var(--hvu)) 0}
.hv-schedule-page .hv-schedule-date>.hv-dots{transform:scale(var(--hvs))}
.hv-schedule-page .hv-schedule-controls{margin-top:calc(13 * var(--hvu));gap:calc(10 * var(--hvu))}
.hv-schedule-page .hv-schedule-controls>div,.hv-schedule-page .hv-schedule-picker>summary{height:calc(50 * var(--hvu));font-size:calc(12 * var(--hvu));line-height:calc(21 * var(--hvu));border-radius:calc(10 * var(--hvu))}
.hv-schedule-page .hv-schedule-controls b{font-size:calc(14 * var(--hvu));line-height:calc(21 * var(--hvu))}
.hv-schedule-page .hv-schedule-card{margin-top:calc(28 * var(--hvu));padding-top:calc(12 * var(--hvu));flex:none}
.hv-schedule-page .hv-schedule-card h2{top:calc(-13 * var(--hvu));font-size:calc(10 * var(--hvu));min-width:calc(156 * var(--hvu));padding:calc(8 * var(--hvu)) calc(12 * var(--hvu))}
.hv-schedule-page .hv-schedule-row{min-height:calc(76 * var(--hvu));padding:calc(15 * var(--hvu)) calc(18 * var(--hvu));gap:calc(12 * var(--hvu))}
.hv-schedule-page .hv-date-badge{width:calc(43 * var(--hvu));min-height:calc(44 * var(--hvu));line-height:calc(17 * var(--hvu));padding:calc(4 * var(--hvu));border-radius:calc(10 * var(--hvu))}
.hv-schedule-page .hv-date-badge strong{font-size:calc(15 * var(--hvu))}.hv-schedule-page .hv-date-badge small{font-size:calc(12 * var(--hvu))}
.hv-schedule-page .hv-schedule-detail>b{font-size:calc(12 * var(--hvu))}.hv-schedule-page .hv-schedule-detail>small{font-size:calc(10 * var(--hvu));margin-top:calc(3 * var(--hvu))}
.hv-schedule-page .hv-break-badge{font-size:calc(8 * var(--hvu))}.hv-schedule-page .hv-tolerance{font-size:calc(9 * var(--hvu));padding:calc(3 * var(--hvu)) calc(6 * var(--hvu))}
.hv-schedule-page .hv-schedule-empty{min-height:calc(330 * var(--hvu));flex:1;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:calc(14 * var(--hvu))}
.hv-schedule-page .hv-overtime-create{margin-top:calc(12 * var(--hvu));flex:none}.hv-schedule-page .hv-overtime-create>summary{height:calc(53 * var(--hvu));min-height:44px;font-size:calc(14 * var(--hvu));font-weight:500}
.hv-schedule-page .hv-schedule-report{font-size:calc(10 * var(--hvu));padding:calc(10 * var(--hvu)) 0}
.hv-schedule-page .hv-open-help{font-size:calc(10 * var(--hvu));margin:8px 4px}.hv-schedule-page .hv-open-help>summary{cursor:pointer;color:#7c8ba0}
.hv-schedule-page .main>.hv-tools{display:none}

.hv-schedule-page .hv-schedule-picker>summary{position:relative}
.hv-picker-dots{position:absolute;left:3px;top:50%;display:flex;flex-direction:column;gap:1px;transform:translateY(-50%) scale(.6)}
.hv-break-icon{position:relative;display:inline-block;width:7px;height:8px;vertical-align:middle;margin-right:2px}
.hv-break-icon>.hv-icon{position:absolute;left:0;top:0;transform:scale(.32);transform-origin:top left}