:root{color-scheme:light;--blue:#1765b5;--ink:#23384e;--muted:#617389;--line:#dce5ef;--paper:#fff;--bg:#f3f7fc}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.65}button,input,select,textarea{font:inherit;touch-action:manipulation}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #d99927;outline-offset:3px}.site-header{max-width:620px;margin:auto;padding:24px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:11px;font-size:25px;font-weight:750;letter-spacing:-.6px}.brand-mark{background:var(--blue);color:white;border-radius:12px;padding:3px 9px;font-size:23px}.badge{font-size:10px;color:var(--blue);border:1px solid var(--line);border-radius:30px;padding:5px 10px}main{max-width:620px;margin:auto;padding:16px 18px 0}h1{font-size:25px;line-height:1.45;margin:0 0 18px}h2{font-size:19px;margin:0 0 16px}h3{font-size:17px;margin:0 0 14px}p{margin:0 0 16px}.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 18px;margin-bottom:18px;box-shadow:0 5px 24px #23384e04}.field,fieldset{margin:0 0 23px}.field>label,legend{display:block;font-size:15px;font-weight:650;margin-bottom:9px}input:not([type=radio]),select,textarea{width:100%;min-width:0;min-height:50px;border:1px solid #bbcbdc;border-radius:8px;background:white;padding:12px;color:var(--ink);font-size:16px}textarea{min-height:100px;resize:vertical}small,.muted{color:var(--muted);font-size:13px}small{display:block;margin-top:6px}fieldset{border:0;padding:0;min-width:0}legend{padding:0}.choices{display:flex;gap:10px;flex-wrap:wrap}.choices label{flex:1;display:flex;align-items:center;gap:9px;border:1px solid #bbcbdc;border-radius:8px;min-height:52px;padding:12px;font-size:15px;cursor:pointer}.choices.long{flex-direction:column}.choices label:has(input:checked){border-color:var(--blue);background:#edf5ff;color:var(--blue)}input[type=radio]{accent-color:var(--blue);width:20px;height:20px;flex-shrink:0;margin:0}button{border:1px solid #bfd1e5;border-radius:9px;padding:14px 16px;background:white;color:var(--blue);font-weight:650;min-height:50px;width:100%;margin-bottom:12px}button.primary{background:var(--blue);color:white;border-color:var(--blue)}button:hover{filter:brightness(.96)}button.link{border:0;background:transparent;text-decoration:underline}.button-row{display:flex;gap:8px}.button-row button{padding:10px 5px}.error,.success,.notice{padding:16px;border-radius:10px;margin:0 0 20px;overflow-wrap:anywhere}.error{background:#fff1ef;border:1px solid #e7b1a9;color:#872f26}.success{background:#e8f5ee;border:1px solid #afd4bd}.notice{background:#eaf3ff;color:#285785}.status{font-size:28px;color:var(--blue);font-weight:700;margin:4px 0 16px}dl{margin:0}dl>div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid #edf1f6}dt{color:var(--muted);font-size:14px;flex:1}dd{margin:0;flex:1;text-align:right;overflow-wrap:anywhere;white-space:pre-wrap}.history{text-align:left;color:var(--ink);position:relative;padding-right:35px}.history strong,.history small{display:block}.history:after{content:'›';position:absolute;right:15px;top:35%;font-size:24px;color:var(--blue)}.month-nav{display:flex;align-items:center;gap:12px;margin-bottom:18px}.month-nav button{width:52px;margin:0}.month-nav strong{text-align:center;flex:1}#testing{margin:30px 0 0;padding:16px;border:2px dashed #b6bdc7;border-radius:10px;background:#eef0f3;font-size:13px}#testing summary{cursor:pointer;font-weight:700}#testing p{margin-top:12px}#testing input{margin:8px 0 12px}.danger{color:#a2372e;border-color:#dcaea8}footer{text-align:center;font-size:11px;color:var(--muted);padding:28px 0}.identity{margin-bottom:20px}.work-card{border-left:3px solid var(--blue)}@media(max-width:360px){main{padding:16px 12px 0}.card{padding:18px 14px}.choices{gap:6px}.choices label{padding:10px 8px}dl>div{gap:10px}}
button:disabled{opacity:.55;cursor:wait}.master-row{padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid var(--line)}.work-card small{margin-bottom:18px}details:not(#testing){margin:16px 0}details:not(#testing)>summary{cursor:pointer;color:var(--blue);padding:8px 0}details[open]>summary{margin-bottom:12px}.choices.long label{width:100%}h3{margin-top:18px}.notice{overflow-wrap:anywhere}

/* Continuous, phone-first forms and an always available history return link. */
#screen-form>section,.work-section,.rest-section{padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:20px}#screen-form>.card{background:transparent;border:0;box-shadow:none;padding:18px 0;border-radius:0}#screen-form h2{padding-top:18px}.list-header{position:sticky;top:0;z-index:10;background:var(--bg);padding:12px 0 4px}.list-header h1{margin-bottom:8px}.list-header button{margin-bottom:8px}.month-nav button:nth-child(2){flex:1;width:auto}.history{scroll-margin-top:150px}section>h3{margin-top:20px}small{margin-bottom:14px}

/* Field use: generous targets, quiet surfaces, and a clear action hierarchy. */
:root{--blue:#125ca6;--muted:#526579}
body{font-size:16px}
main{padding-bottom:max(24px,env(safe-area-inset-bottom))}
.site-header{padding-top:18px;padding-bottom:20px}
h1{font-size:26px;font-weight:750;margin-bottom:24px}
h2{line-height:1.5}
.field,fieldset{margin-bottom:28px}
.field>label,legend{font-size:16px;line-height:1.6;margin-bottom:10px}
input:not([type=radio]),select{min-height:56px}
input,select,textarea,fieldset,.work-section{scroll-margin-top:90px}
input[type=hidden]{display:none}
small,.muted{font-size:14px;line-height:1.7}
.choices{gap:12px}
.choices label{min-height:56px;font-size:16px;padding:14px 12px;line-height:1.5}
.choices label:has(input:checked){border:2px solid var(--blue);padding:13px 11px;font-weight:700;background:#eaf3fc}
.choices label:has(input:focus-visible){outline:3px solid #d99927;outline-offset:3px}
button{min-height:54px;line-height:1.5;margin-bottom:14px;overflow-wrap:anywhere}
button.primary{min-height:60px;font-size:18px;font-weight:750}
#screen-form>button[type=submit]{margin-top:24px;margin-bottom:20px}
button.back-button{background:transparent;border-color:transparent;color:var(--muted);font-weight:500;text-decoration:underline;text-underline-offset:4px}
details:not(#testing)>summary{min-height:48px;padding:12px 8px;font-weight:650}
#screen-form>section.report-section,#screen-form>div.report-section{padding:0 0 24px;margin:32px 0;border-bottom:1px solid var(--line)}
#screen-form .report-heading{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;background:var(--bg);border-top:2px solid var(--blue);border-bottom:1px solid var(--line);padding:14px 0;margin:0 0 24px;font-size:21px}
.report-heading span{font-size:14px;color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.report-section{scroll-margin-top:calc(var(--home-nav-height) + 8px)}
#screen-form .report-heading{padding:0;margin-bottom:0}
#screen-form .report-heading button{display:flex;align-items:center;gap:12px;min-height:56px;width:100%;margin:0;padding:12px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:inherit;text-align:left}
#screen-form .report-heading button:disabled{cursor:default}
.report-heading .report-check{margin-left:auto}
.report-heading .report-partial{margin-left:auto;font-size:13px;color:var(--muted)}
.report-section:not(.is-open) .report-heading{position:static}
.report-section-body{padding-top:24px}
.report-overview{border-left:3px solid var(--line);padding-left:14px;margin-bottom:18px}
.report-overview h2{font-size:16px;margin-bottom:6px}
.report-overview dl>div{padding:4px 0;border:0;gap:12px}
.report-overview dt{font-size:14px;flex:0 0 100px}
.report-overview dd{font-size:15px;text-align:left}
.work-section>dl{margin-bottom:24px}
.report-section .work-section:last-child{border:0;margin-bottom:0;padding-bottom:0}
.list-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);margin-bottom:22px;padding:10px 0}
.list-header h1{font-size:24px;margin:0}
.list-header button{width:auto;min-width:112px;margin:0}
.month-nav{gap:8px}
.month-nav button{min-width:52px;padding:12px 8px}
.history{padding:18px 34px 18px 16px;scroll-margin-top:90px}
.history strong{font-size:18px}
.history small{font-size:14px;margin:6px 0 0;color:var(--ink);font-weight:400}
.card{box-shadow:none;border-radius:10px}
.error{border-left:4px solid #a2372e;font-weight:650;scroll-margin-top:90px}
input:user-invalid,select:user-invalid,textarea:user-invalid{border:2px solid #a2372e;background:#fff8f7}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border:2px solid #a2372e;background:#fff8f7}
fieldset:has(input[aria-invalid="true"]) legend{color:#872f26}
@media(max-width:360px){main{padding-left:14px;padding-right:14px}.choices{gap:8px}.choices label{padding:14px 10px}.choices label:has(input:checked){padding:13px 9px}.report-overview dt{flex-basis:88px}.button-row{flex-wrap:wrap}.button-row button{flex:1;min-width:80px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.field-error{color:#872f26;font-weight:650}

/* Native time values also align left on iOS Safari. */
input[type=time]{text-align:left}
input[type=time]::-webkit-date-and-time-value{text-align:left}
/* The full visible control is a real date/month input hit target. */
.native-picker{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;border:1px solid #bfd1e5;border-radius:9px;background:white;color:var(--blue);font-weight:650;margin-bottom:14px}
.month-nav .native-picker{flex:1;margin:0}
.native-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.native-picker input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0}
.native-picker:focus-within{outline:3px solid #d99927;outline-offset:3px}

/* All entered values use the same alignment, including native date controls. */
input,select,textarea{text-align:left}
input::-webkit-date-and-time-value{text-align:left}
button[data-action="midday"]{white-space:pre-line}

/* Keep each value and its individual edit action on the same phone-width row. */
.business-edit-row{position:relative;min-height:48px}
.business-edit-row>dl{padding-right:86px}
.business-edit-row>dl>div{min-height:48px;align-items:center;gap:8px}
.business-edit-row dt{flex:0 0 auto;white-space:nowrap}
.business-edit-row dd{min-width:0;font-variant-numeric:tabular-nums}
.business-edit-row>.business-vehicle-change{position:absolute;right:0;top:0;width:86px;height:48px;min-height:48px;margin:0;padding:0 4px;border:0;background:transparent;color:var(--blue);font-weight:650;text-align:right}
.business-vehicle-controls{padding-top:12px}
.business-native-picker{position:absolute;right:0;top:0;width:86px;height:48px;color:var(--blue);font-weight:650;white-space:nowrap}
.business-native-picker>span{position:absolute;right:0;top:4px;display:flex;align-items:center;justify-content:flex-end;width:86px;height:48px;padding:0 4px;pointer-events:none}
.business-native-picker>.field{position:absolute;inset:0;margin:0}
.business-native-picker>.field>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.business-native-picker>.field>input,.business-native-picker>.field>select,.business-time-picker>input{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer}
.business-native-picker:not(.business-time-picker){top:-4px;width:100%;height:56px}
.business-native-picker:focus-within{outline:none}
.business-native-picker:focus-within>span{outline:3px solid #d99927;outline-offset:3px}
.business-time-picker{top:-4px;width:100%;height:56px}
.business-time-picker>span{position:absolute;right:0;top:4px}
.business-time-picker>.field>input,.business-time-picker>input{min-height:56px}
.business-edit-row>[data-vehicle-extra]:not(:empty){padding-top:12px}
.master-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.master-name-row>h2,.master-name-row>p{margin:0;min-width:0;overflow-wrap:anywhere}
.master-name-row>button{width:auto;flex:0 0 auto;margin:0;padding:12px 8px;white-space:nowrap}

/* Shared home navigation stays above section and history headings. */
:root{--home-nav-height:68px}
.home-nav{position:sticky;top:0;z-index:20;min-height:var(--home-nav-height);display:flex;align-items:center;justify-content:flex-end;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:18px}
.home-nav button{width:auto;margin:0;text-align:right}
.list-header,#screen-form .report-heading{top:var(--home-nav-height)}
.history{scroll-margin-top:150px}

/* Constrain native iOS date/time controls and shrinking flex children themselves. */
main,#app,#screen-form,.field,.report-section,.work-section,.rest-section,.business-edit-row,details{min-width:0;max-width:100%}
input:not([type=radio]),select,textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
input[type=time],input[type=date],input[type=datetime-local],input[type=month]{display:block;width:100%;max-width:100%;min-width:0;font-size:16px}
input::-webkit-date-and-time-value{min-width:0;white-space:normal}
input::-webkit-datetime-edit{min-width:0;padding:0}
.choices label,.month-nav .native-picker,dl dt,dl dd{min-width:0;overflow-wrap:anywhere}
.native-picker{max-width:100%;min-width:0}
#app h1,#app h2,#app h3,#app p,legend{overflow-wrap:anywhere}
.home-date{text-align:left;padding:18px 0 32px}
.home-date .home-today{font-size:14px;color:var(--muted);margin:0 0 4px}
.home-date .home-date-value{font-size:22px;font-weight:700;margin:0}

/* Give native WebKit controls a definite track instead of their intrinsic width. */
.field{display:grid;grid-template-columns:minmax(0,1fr)}
.field>input,.field>select,.field>textarea{min-width:0;max-width:100%;box-sizing:border-box}
input[type=time],input[type=date],input[type=datetime-local],input[type=month]{-webkit-appearance:none;appearance:none}
input::-webkit-date-and-time-value{display:block;width:100%;max-width:100%;min-width:0}
input::-webkit-datetime-edit{display:block;width:100%;max-width:100%;min-width:0}
.button-row>button,.list-header>*,.report-heading>*{min-width:0}
.master-name-row>h2,.master-name-row>p{flex:1 1 0}
