*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:#f4f1eb;color:#17212b}.top{height:78px;background:#fff;border-bottom:1px solid #dedbd4;display:flex;align-items:center;padding:0 34px;justify-content:space-between}.brand{display:flex;align-items:center;gap:15px}.mark{width:46px;height:46px;border:2px solid #b58b4c;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-weight:700}.brand strong{display:block;font-family:Georgia,serif;font-size:19px}.brand small{color:#68727b;letter-spacing:.08em}.dev{font-size:12px;background:#edf2f5;padding:7px 10px;border-radius:20px;color:#53606b}main{min-height:calc(100vh - 78px);display:grid;place-items:center;padding:32px}.card{width:min(620px,100%);background:#fff;border:1px solid #ddd9d1;border-radius:16px;box-shadow:0 12px 38px rgba(31,35,38,.08);padding:38px}.eyebrow{font-size:12px;letter-spacing:.14em;color:#a27c45;font-weight:700;margin-bottom:12px}h1{font-family:Georgia,serif;font-size:34px;margin:0 0 8px;font-weight:500}.sub{color:#68727b;margin:0 0 28px;line-height:1.5}label{display:block;font-size:13px;font-weight:700;margin:15px 0 8px}.pinrow{display:flex;gap:8px;align-items:center}.pinrow input{flex:1}.pinrow .togglePin{width:auto;min-width:82px;margin:0;height:52px;background:#e9ecec;color:#23313a;padding:0 12px}select,input{width:100%;height:52px;border:1px solid #cfcac0;border-radius:9px;background:#fff;padding:0 15px;font-size:16px;color:#17212b}button{margin-top:18px;width:100%;height:52px;border:0;border-radius:9px;background:#17384b;color:#fff;font-weight:700;font-size:15px;cursor:pointer}button:disabled{opacity:.45}.secondary{background:#e9ecec;color:#23313a}.status{margin-top:18px;padding:13px 14px;border-radius:8px;background:#f6f5f2;color:#65717a;font-size:13px}.error{background:#fff0ee;color:#9b3328}.success{background:#edf6ef;color:#27613b}.hidden{display:none}.field-wide{width:min(1040px,100%)}.daily-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;align-items:end}.jobrow-grid{display:grid;grid-template-columns:2fr .7fr 2fr auto;gap:12px;align-items:end}.jobrow-grid label{margin-top:0}.jobrow-grid .removeJob{width:auto;min-width:120px;margin:0}.office-grid{display:grid;grid-template-columns:1.1fr 1fr 1.5fr .7fr;gap:12px;align-items:end}.office-grid label{margin-top:0}.office-entry{border:1px solid #e0dcd4;border-radius:10px;padding:13px 15px;margin-top:10px;display:grid;grid-template-columns:1fr 1.4fr .7fr 2fr auto;gap:10px;align-items:center}.office-entry button{margin:0;width:auto;height:40px}.summary-actions{display:flex;gap:14px;margin-top:14px}.summary-actions button{margin-top:0}.week-table{width:100%;border-collapse:collapse;margin-top:18px}.week-table th,.week-table td{text-align:left;padding:11px 8px;border-bottom:1px solid #e4e0d8;font-size:13px}.week-table th{color:#68727b;font-size:12px;text-transform:uppercase}.summary-total{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.summary-total div{background:#f6f5f2;border-radius:9px;padding:14px}.summary-total strong{display:block;font-size:20px}.history-toggle{width:auto;min-width:140px;padding:0 18px}.week-summary-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:18px}.week-summary-day{background:#f6f5f2;border:1px solid #e4e0d8;border-radius:10px;padding:14px 10px;text-align:center}.week-summary-day span{display:block;color:#68727b;font-size:12px;text-transform:uppercase;font-weight:700}.week-summary-day strong{display:block;font-size:22px;margin-top:6px}.week-summary-day small{display:block;color:#68727b;margin-top:4px}.foot{text-align:center;color:#8a918f;font-size:12px;margin-top:22px}@media(max-width:760px){.daily-grid,.jobrow-grid,.summary-total,.office-grid,.office-entry{grid-template-columns:1fr}.week-summary-grid{grid-template-columns:repeat(2,1fr)}.summary-actions{flex-direction:column}.jobrow-grid .removeJob{width:100%;margin-top:8px}.top{padding:0 18px}.brand strong{font-size:15px}.card{padding:28px 22px}h1{font-size:29px}}@media(max-width:600px){body{min-width:0}.top{height:64px;padding:0 14px}.mark{width:40px;height:40px;flex:0 0 40px}.brand{gap:10px;min-width:0}.brand strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand small{display:none}.dev{font-size:10px;padding:5px 8px}main{min-height:calc(100dvh - 64px);display:block;padding:14px 12px 28px}.card,.field-wide{width:100%;padding:22px 16px;border-radius:12px;box-shadow:0 6px 22px rgba(31,35,38,.07)}h1{font-size:27px}.sub{margin-bottom:20px}select,input,button{min-height:48px;font-size:16px}button{height:auto;padding:13px 14px}.pinrow{align-items:stretch}.pinrow .togglePin{height:auto;min-width:74px}.week-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.week-summary-day{padding:12px 8px}.summary-total{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.historynav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.historynav button{width:100%;min-width:0}.week-table{min-width:720px}.office-entry{padding:12px;gap:8px}.office-entry>div:last-child{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.office-entry button{width:100%;min-height:44px}.summary-actions{gap:8px}.status{overflow-wrap:anywhere}.field-wide form>button,.field-wide>button{width:100%}#appModal{padding:12px!important}#appModal>div{padding:22px 16px!important}}@media(max-width:380px){.week-summary-grid,.summary-total{grid-template-columns:1fr}.brand strong{max-width:190px}}
@media(max-width:600px){
  .daily-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .daily-grid>div{min-width:0}
  .daily-grid>div:first-child{grid-column:1/-1}
  .daily-grid input,.daily-grid select{min-width:0;max-width:100%;width:100%}
  input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
  #fieldCard label{margin:11px 0 6px}
  #fieldCard .status{margin-top:12px;padding:10px 12px}
  #fieldCard button{margin-top:12px}
  #fieldCard .summary-actions{margin-top:12px}
  #fieldCard #jobRows:empty+#addJob{margin-top:12px}
}

@media(max-width:600px){
  .office-grid{grid-template-columns:1fr;min-width:0}
  .office-grid>div{min-width:0;max-width:100%}
  .office-grid input,.office-grid select{min-width:0;max-width:100%;width:100%}
  .office-grid input[type="date"]{display:block;-webkit-appearance:none;appearance:none;box-sizing:border-box;text-align:center;text-align-last:center;padding:0 15px}.office-grid input[type="date"]::-webkit-date-and-time-value{text-align:center;margin:0;width:100%}.office-grid input[type="date"]::-webkit-datetime-edit{display:flex;justify-content:center;width:100%;padding:0}.office-grid input[type="date"]::-webkit-datetime-edit-fields-wrapper{display:flex;justify-content:center}.office-grid input[type="date"]::-webkit-date-and-time-value{height:100%;display:flex;align-items:center;justify-content:center;line-height:normal}.office-grid input[type="date"]::-webkit-datetime-edit{height:100%;align-items:center;line-height:normal}.office-grid input[type="date"]::-webkit-datetime-edit-fields-wrapper{height:100%;align-items:center}
}
.field-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-quick-grid>div{min-width:0}.field-secondary-actions{display:flex;gap:10px}.field-secondary-actions button{flex:1}.field-logout{background:#e9ecec;color:#23313a}
@media(max-width:600px){
  #fieldCard{padding:18px 14px}
  #fieldCard .eyebrow{margin-bottom:7px}
  #fieldCard h1{font-size:25px;margin-bottom:4px}
  #fieldCard .sub{margin-bottom:12px;line-height:1.3}
  #fieldCard .daily-grid{gap:7px 9px}
  #fieldCard select,#fieldCard input{height:46px;min-height:46px;padding:0 11px}
  #fieldCard .field-quick-grid{gap:9px}
  #fieldCard .field-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #fieldCard .field-secondary-actions button{margin-top:10px;min-height:44px;padding:10px 8px}
  #fieldCard #payPeriod{font-size:12px;margin-top:10px;padding:8px 10px}
  #fieldCard #addJob{min-height:44px;padding:10px 12px}
  #fieldCard .field-totals{font-size:12px;padding:9px 10px}
  #fieldCard #submitField{min-height:48px;margin-top:10px}
  #fieldCard .field-logout{min-height:44px;margin-top:8px}
  #fieldCard .jobrow-grid{gap:7px}
}
.office-secondary-actions{display:flex;gap:10px}.office-secondary-actions button{flex:1}
@media(max-width:600px){
  #officeCard{padding:18px 14px}
  #officeCard .eyebrow{margin-bottom:7px}
  #officeCard h1{font-size:25px;margin-bottom:4px}
  #officeCard .sub{margin-bottom:12px;line-height:1.3}
  #officeCard>.status,#officeCard form>.status{font-size:12px;margin-top:10px;padding:8px 10px}
  #officeCard .office-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 9px}
  #officeCard .office-grid>div{min-width:0}
  #officeCard .office-grid>div:first-child{grid-column:1/-1}
  #officeCard .office-grid select,#officeCard .office-grid input,#officeCard>form>input{min-width:0;max-width:100%;width:100%;height:46px;min-height:46px;padding:0 11px}
  #officeCard label{margin:11px 0 6px}
  #officeCard #saveOffice{min-height:48px;margin-top:10px}
  #officeCard #officeDayOff{min-height:44px;margin-top:8px;padding:10px 12px}
  #officeCard .office-entry{margin-top:8px}
  #officeCard .office-review-note{margin-top:10px}
  #officeCard .office-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #officeCard .office-secondary-actions button{margin-top:10px;min-height:44px;padding:10px 8px}
}
.company-logo{width:58px;height:52px;flex:0 0 58px;background:url("/assets/ckb-logo.png") center/contain no-repeat}.mark{display:none}
@media(max-width:600px){.company-logo{width:48px;height:44px;flex-basis:48px}}
.field-bottom-actions{display:flex;gap:10px}.field-bottom-actions button{flex:1}
@media(min-width:601px){.field-day-off{width:100%}.field-bottom-actions{margin-top:8px}}
@media(max-width:600px){.field-bottom-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field-bottom-actions button{margin-top:8px;min-height:44px;padding:10px 8px}}
/* Give the Office entry guidance room before the form controls. */
#officeCard>form>.status:first-child{margin-bottom:14px}
@media(max-width:600px){#officeCard>form>.status:first-child{margin-bottom:10px}}
/* Office Daily Entry guidance spacing */
#officeCard .office-entry-guidance{margin-top:26px;margin-bottom:18px}
@media(max-width:600px){#officeCard .office-entry-guidance{margin-top:16px;margin-bottom:12px}}
/* Keep Office guidance visually separated from the first control row. */
#officeCard .office-entry-guidance{margin:26px 0 24px!important}
#officeCard .office-grid{margin-top:0}
@media(max-width:600px){#officeCard .office-entry-guidance{margin:16px 0 16px!important}}
/* Phase 5B production polish and accessibility */
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8a672f;outline-offset:2px}
button:hover:not(:disabled){filter:brightness(.97)}
.attention-status{background:#fff6df;color:#75510b;border:1px solid #ead39d}
#fieldCard #submitField,#officeCard #saveOffice{box-shadow:0 4px 12px rgba(23,56,75,.12)}
#fieldCard .field-day-off,#officeCard #officeDayOff{background:#eef0ef;color:#23313a}
#fieldCard .field-bottom-actions,#officeCard .office-secondary-actions{margin-top:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Login background presentation. Applies only to employee access screens. */
body:has(#selectCard:not(.hidden)),body:has(#officeLoginCard:not(.hidden)),body:has(#enrollCard:not(.hidden)),body:has(#loginCard:not(.hidden)){background:linear-gradient(rgba(18,28,32,.24),rgba(18,28,32,.34)),url("/assets/ckb-login-background.jpg") center 58%/cover fixed no-repeat}
body:has(#selectCard:not(.hidden)) .top,body:has(#officeLoginCard:not(.hidden)) .top,body:has(#enrollCard:not(.hidden)) .top,body:has(#loginCard:not(.hidden)) .top{background:rgba(255,255,255,.88);backdrop-filter:blur(8px)}
body:has(#selectCard:not(.hidden)) main,body:has(#officeLoginCard:not(.hidden)) main,body:has(#enrollCard:not(.hidden)) main,body:has(#loginCard:not(.hidden)) main{background:transparent}
body:has(#selectCard:not(.hidden)) #selectCard,body:has(#officeLoginCard:not(.hidden)) #officeLoginCard,body:has(#enrollCard:not(.hidden)) #enrollCard,body:has(#loginCard:not(.hidden)) #loginCard{background:rgba(255,255,255,.76);backdrop-filter:blur(7px);box-shadow:0 22px 60px rgba(16,24,28,.30);border-color:rgba(255,255,255,.58)}
@media(max-width:600px){
 body:has(#selectCard:not(.hidden)),body:has(#officeLoginCard:not(.hidden)),body:has(#enrollCard:not(.hidden)),body:has(#loginCard:not(.hidden)){background-position:35% center;background-attachment:scroll}
 body:has(#selectCard:not(.hidden)) main,body:has(#officeLoginCard:not(.hidden)) main,body:has(#enrollCard:not(.hidden)) main,body:has(#loginCard:not(.hidden)) main{min-height:calc(100dvh - 64px);display:grid;place-items:center;padding:18px 12px}
 body:has(#selectCard:not(.hidden)) #selectCard,body:has(#officeLoginCard:not(.hidden)) #officeLoginCard,body:has(#enrollCard:not(.hidden)) #enrollCard,body:has(#loginCard:not(.hidden)) #loginCard{padding:24px 17px;background:rgba(255,255,255,.74);backdrop-filter:blur(7px)}
}