:root{--page:#f3f7f7;--surface:#fff;--ink:#17343b;--line:#dce7e7;--brand:#087f73;--muted:#61757a}
body{font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--page)}
main{max-width:1200px;gap:28px;padding:32px}h1{font-size:34px;line-height:1.3;letter-spacing:-.7px}h2{font-size:22px;line-height:1.35}.brand{color:var(--brand);font-size:18px}.badge{color:var(--muted)}
nav{gap:20px;font-size:14px}nav a{padding:8px 0;text-decoration:none;border-bottom:2px solid transparent}nav a:hover,nav a:focus-visible{border-color:var(--brand);color:var(--brand)}
.card,.attendance-panel{border-radius:20px;padding:28px;border:1px solid var(--line);background:var(--surface)}.warning{background:#fff3db}.attendance-panel{width:720px;max-width:100%;gap:24px}.attendance-panel .actions{display:grid;grid-template-columns:1fr 1fr;gap:16px}.attendance-panel button{width:100%}.attendance-panel button[value=out]{background:white;color:var(--ink);border-color:var(--line)}
button,.button{background:var(--brand);border-color:var(--brand);border-radius:10px;min-height:48px;padding:12px 20px}button:hover,.button:hover{background:#08665e}input,select,textarea{border-color:var(--line);border-radius:10px}a{color:var(--brand)}.muted,.helptext{color:var(--muted)}.message{border:1px solid var(--line);border-radius:12px;padding:16px}.eyebrow{font-weight:700;font-size:12px;color:var(--brand);text-transform:uppercase;letter-spacing:.06em}.opportunity-result{background:#e7f5f1;padding:24px;border-radius:16px}.opportunity-result strong{font-size:28px}
.auth-page{margin:0;padding:32px}.auth-header,.auth-shell,.auth-footer{max-width:1120px;margin:0 auto}.auth-header{display:flex;justify-content:space-between;gap:20px;padding:0 0 32px}.auth-brand{font-size:18px;font-weight:700;color:var(--brand)}.auth-header span,.auth-footer{font-size:13px;color:var(--muted)}.auth-shell{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(320px,1fr);gap:32px;align-items:start}.auth-story{background:#153c43;color:white;border-radius:20px;padding:40px}.auth-story h2{font-size:42px;line-height:1.2;letter-spacing:-1px}.auth-story p{line-height:1.6;color:#cde5e1}.auth-card{background:white;padding:36px;border-radius:20px;border:1px solid var(--line);overflow-wrap:anywhere}.auth-card form{display:flex;flex-direction:column;gap:12px}.auth-card input:not([type=checkbox]):not([type=radio]),.auth-card select,.auth-card textarea{width:100%;padding:14px;border:1px solid var(--line);border-radius:10px;font:inherit;box-sizing:border-box}.auth-card input[type=checkbox],.auth-card input[type=radio]{width:auto}.auth-card button{width:100%;font:inherit;color:white;cursor:pointer}.auth-card a{color:var(--brand);text-underline-offset:3px}.auth-card img,.auth-card svg{max-width:100%;height:auto}.auth-card table{max-width:100%;display:block;overflow:auto}.auth-footer{padding-top:24px}.auth-card :focus-visible{outline:3px solid #1565c0;outline-offset:3px}.auth-card .errorlist{color:#9a2020}.auth-card h1{font-size:30px}
@media(max-width:700px){main,.auth-page{padding:20px}h1{font-size:28px}.card,.attendance-panel{padding:22px}.auth-shell{grid-template-columns:1fr}.auth-story{display:none}.auth-card{padding:24px}.auth-header{flex-direction:column;gap:8px}.attendance-panel .actions{grid-template-columns:1fr}.filters{grid-template-columns:1fr}}

/* Approved Figma staff view: attendance first; management behind a click. */
main{gap:20px}.badge{font-size:11px;color:var(--muted)}.compact-nav{display:flex;align-items:center;gap:18px;margin:0;font-size:13px;line-height:1.4}.compact-nav>a{padding:4px 0}.management-menu{margin-left:auto;position:relative}.management-menu summary{cursor:pointer;color:var(--brand);padding:6px 0}.management-menu>div{display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;position:absolute;right:0;z-index:5;min-width:210px;box-shadow:0 8px 24px #17343b18}.management-menu>div a{padding:8px}.attendance-heading{display:flex;flex-direction:column;gap:8px}.attendance-heading p,.attendance-heading h1{margin:0}.attendance-panel{align-self:flex-start;gap:18px;margin:0}.attendance-panel h2{margin:0;font-size:24px;color:var(--brand)}.attendance-panel #location-status{font-size:14px;color:var(--muted);line-height:1.5}.attendance-panel .actions{gap:14px}.attendance-panel button{min-height:54px;font-size:16px}.incident-shortcut{display:flex;justify-content:space-between;align-items:center;max-width:720px;font-size:15px;padding:12px 0;text-decoration:none}.workspace-footer{font-size:11px;color:var(--muted);padding-top:12px}.attendance-help{font-size:13px;color:var(--muted);max-width:720px}.attendance-help summary{cursor:pointer;color:var(--brand);padding:8px 0}.attendance-help p{margin:10px 0}.absence-alert{max-width:720px;border-left:3px solid var(--brand);padding:12px 16px;background:white}.record-card{padding:16px 0;border-bottom:1px solid var(--line)}.record-card p{margin:6px 0}.record-actions,.management-links{display:flex;flex-wrap:wrap;gap:14px}.record-actions{font-size:14px}.record-list{min-width:0}
@media(max-width:700px){main{padding:24px 20px;gap:18px}.brand{font-size:18px}.compact-nav{gap:14px;font-size:12px;flex-wrap:wrap}.management-menu{margin-left:0}.management-menu>div{left:0;right:auto}.attendance-heading h1{font-size:30px;line-height:1.25;letter-spacing:-.5px}.attendance-heading .muted{font-size:14px}.attendance-heading .eyebrow{font-size:11px}.attendance-panel{width:100%;padding:24px;border-radius:20px}.attendance-panel h2{font-size:22px}.attendance-panel .actions{grid-template-columns:1fr;gap:12px}table{display:block;overflow-x:auto;max-width:100%}th,td{min-width:120px;overflow-wrap:normal;word-break:normal}.card{min-width:0}.workspace-footer{padding-top:4px}}

@media(max-width:700px){.management-menu[open]{flex-basis:100%;min-width:0;max-width:100%}.management-menu>div{position:static;min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}.management-menu>div a{white-space:normal}}

#location-retry[hidden]{display:none!important}

main,main>*,.compact-nav>*{min-width:0}p,h1,h2,h3,a,.message{overflow-wrap:anywhere}input,select,textarea{max-width:100%}