:root{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#243e36;background:#f4f7f4;font-synthesis:none;--green:#087b66}*{box-sizing:border-box}body{margin:0}header{max-width:860px;margin:auto;padding:22px 24px;font-size:17px;font-weight:750;display:flex;justify-content:space-between;align-items:center}header span{font-size:11px;color:#728078;font-weight:400}main{max-width:810px;margin:0 auto;padding:22px 24px 40px}h1{font-size:30px;margin:0 0 10px;letter-spacing:-.5px}.lead{color:#61766c;margin:0 0 28px;line-height:1.8}.card{background:white;border:1px solid #dce6df;border-radius:16px;padding:28px;margin-bottom:16px}h2{font-size:18px;display:flex;gap:10px;align-items:center;margin:0 0 20px}.step{background:#eaf3ed;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:14px;color:var(--green)}.date-fields{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;max-width:490px}label{display:block;font-size:13px;font-weight:650}input{font:inherit;color:#243e36;border:1px solid #bfcec5;border-radius:8px;padding:11px;min-height:46px;background:#fff;width:100%;margin-top:7px;min-width:0;font-size:18px}input:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #77bfaa;outline-offset:3px}.hint{font-size:12px;color:#6c7e74;line-height:1.6}.period{margin:22px 0;padding:15px 0;border-top:1px solid #e6ece7;border-bottom:1px solid #e6ece7;font-size:12px;color:#6a7c72}.period strong{display:block;font-size:14px;color:#334f42;margin-top:5px;font-weight:600}.selection{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:25px 0 10px}.selection strong{font-size:22px;color:var(--green)}.selection span{font-size:13px;color:#657e70}input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;margin:4px 0;padding:0;min-height:44px;cursor:ew-resize;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:6px;background:#caddcf}input[type=range]::-moz-range-track{height:8px;border-radius:6px;background:#caddcf}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--green);border:4px solid white;box-shadow:0 0 0 2px var(--green)}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--green);border:3px solid white;box-shadow:0 0 0 2px var(--green)}.ends{display:flex;justify-content:space-between;font-size:11px;color:#688073;line-height:1.7}.ends span:last-child{text-align:right}.ends b{font-size:12px;font-weight:600}.direction{font-size:12px;color:#6a7c70;margin:16px 0 24px}.totals{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dce6df;border-radius:12px;overflow:hidden}.totals>div{padding:22px;text-align:center;background:#f7f9f6}.totals>div.highlight{background:#e3f3e9;color:#066c57}.totals h3{font-size:13px;font-weight:600;margin:0 0 12px}.totals strong{font-size:44px;letter-spacing:-1.5px;display:block;line-height:1.2}.totals span{display:block;font-size:12px;margin-top:12px}.explanation{font-size:14px;line-height:1.8;margin:20px 0}.recovery{font-size:12px;color:#6a7c70;margin:0;padding-top:16px;border-top:1px solid #e6ece7}.recovery strong{display:block;color:#294c3b;font-size:16px;margin-top:6px}.options{padding:18px 24px}.options summary{cursor:pointer;font-size:14px;font-weight:650;min-height:24px}.options p{font-size:13px;color:#63796c;line-height:1.9}.options label{margin-top:20px}.hours{display:flex;align-items:center;gap:10px;max-width:200px}.hours input{max-width:140px}.error{padding:12px;background:#fff0e8;color:#a04020;font-size:13px}footer{font-size:11px;color:#79867e;line-height:1.8;margin:24px 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}svg{display:block;width:100%;margin:20px 0}.actions{display:flex;gap:10px;flex-wrap:wrap}button{padding:11px 14px;min-height:44px;background:#e9f2ec;border:0;border-radius:8px;color:#24523f;cursor:pointer;font:inherit;font-size:12px}textarea{width:100%;margin-top:16px}button:disabled{opacity:.4;cursor:default}@media(max-width:540px){header{padding:18px 16px;font-size:15px}main{padding:14px 12px 24px}h1{font-size:26px}.lead{font-size:13px;margin-bottom:20px}.card{padding:20px 16px}h2{font-size:15px;gap:8px}.date-fields{gap:10px}input{font-size:16px;padding:10px 8px}.selection{flex-wrap:wrap;margin-top:20px}.selection strong{font-size:20px}.selection span{font-size:12px}.totals>div{padding:20px 8px}.totals strong{font-size:38px}.totals h3{font-size:12px}.period strong{font-size:12px}.explanation{font-size:13px}.options{padding:17px 16px}}
/* The first quota, the extra use this week, and the later portion share colors. */
.mobile{display:none}.blue{background:#397fb2}.green{background:#087b66}.future{background:repeating-linear-gradient(135deg,#bac6c8 0 4px,#e7edef 4px 8px)}
.pace-flow{display:flex;gap:12px;align-items:center;padding:14px 16px;background:#f6f9f7;border-radius:10px;margin:0 0 22px}.pace-flow>div{flex:1;display:flex;align-items:center;gap:9px;font-size:12px;color:#617569}.pace-flow strong{display:block;font-size:14px;color:#274838;margin-top:5px}.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.arrow{color:#91a69a}
.totals strong .unit{display:inline;font-size:24px;letter-spacing:0;margin:0}.composition{margin:22px 0}.composition-label,.split-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:650;margin-bottom:9px}.composition-label span:first-child{color:#397fb2}.composition-label span:last-child{color:#087b66}.capacity-track{display:flex;height:18px;background:#eff3ef;border-radius:5px;overflow:hidden}.first-quota{width:50%;background:#397fb2}#addedBar{background:#087b66}.scale{display:flex;justify-content:space-between;color:#7d8c83;font-size:10px;margin-top:7px}.chart-heading{margin-top:28px}.chart-heading h3,.after-quota h3{font-size:15px;margin:0 0 6px}.chart-heading p{font-size:11px;color:#718378;margin:0}#chart svg{margin:6px 0 0}.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#5d7365}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:16px;height:4px;display:inline-block}.after-quota{margin:24px 0;background:#f6f9f7;border-radius:10px;padding:18px}.after-quota h3{margin-bottom:15px}.after-quota p{font-size:12px;color:#697e70;margin:12px 0 0;line-height:1.7}.split-label span:first-child{color:#087b66}.split-label span:last-child{color:#697b80}.split-track{display:flex;height:24px;border-radius:5px;overflow:hidden}#insideBar{background:#087b66}#laterBar{background:repeating-linear-gradient(135deg,#bac6c8 0 5px,#e7edef 5px 10px)}.options .actions{margin-top:16px}@media(max-width:540px){.mobile{display:block}.pace-flow{gap:8px;padding:12px 10px}.pace-flow strong{font-size:12px}.pace-flow>div{font-size:11px;gap:6px}.totals strong .unit{font-size:20px}.after-quota{padding:14px}.totals strong{font-size:34px}.legend{gap:8px;font-size:10px}h1{line-height:1.4}}
.manual-fields{margin:8px 0 16px;max-width:490px}.manual-fields label{font-size:12px}input[aria-invalid=true]{border-color:#b25536}