*{box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;max-width:1120px;margin:auto;padding:28px;color:#152b3b;background:#deedf8}header img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px}nav{display:flex;flex-wrap:wrap;gap:12px 22px;margin:20px 0 36px}a{color:#003f75}nav [aria-current]{font-weight:bold}h1{font-size:2.3rem;margin:8px 0 12px}h2{font-size:1.05rem;margin:0}p{line-height:1.55}.eyebrow{font-size:.75rem;letter-spacing:.14em;color:#42647c;font-weight:bold}form,.plot{background:#fff;border:1px solid #bed0de;border-radius:12px;padding:22px;margin-top:24px}.fields{display:flex;align-items:end;flex-wrap:wrap;gap:16px}label{display:flex;flex-direction:column;gap:8px;flex:1;min-width:180px;font-size:.85rem;font-weight:bold}input,select,button{font:inherit;border:1px solid #91aabc;border-radius:6px;padding:10px;color:#153950;background:#fff;min-height:42px}input,select{width:100%}button{cursor:pointer}button:hover:not(:disabled){background:#edf5fa;border-color:#235d82}button:disabled{opacity:.45;cursor:default}.primary{background:#064b74;color:#fff}.primary:hover:not(:disabled){background:#123e5a}.quick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0}.quick span{font-size:.82rem;margin-right:4px}.quick button{padding:6px 14px}.hint{font-size:.82rem;color:#526779}#status{min-height:24px}#status.error{color:#9b2727}.plot-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:16px}.canvas-wrap{height:380px;position:relative;touch-action:pan-y}.toolbar,.exports{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.toolbar button{font-size:.84rem}#use-zoom{margin-left:auto;border-color:#16648b;color:#064b74}footer{border-top:1px solid #b5c1cc;margin-top:36px;padding-top:18px;font:italic .85rem Georgia,serif;color:#526779}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #2488b8;outline-offset:3px}@media(max-width:700px){body{padding:16px}header img{object-fit:contain;height:auto}nav{gap:12px;font-size:.88rem;margin-bottom:24px}h1{font-size:1.9rem}form,.plot{padding:16px}.fields{gap:12px}label{min-width:100%;width:100%}.canvas-wrap{height:300px}#use-zoom{margin-left:0}.exports button{width:100%}}
/* Period selection: choose a start, then a duration or explicit end. */
.period-group{border:2px solid #4799d0;border-radius:20px;padding:20px;margin-bottom:18px}
.period-date{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.5fr);align-items:center;gap:20px;font-size:.95rem;min-width:0}
.period-date input{min-width:0}
.period-end{margin-bottom:30px}
.period-end .quick{margin:0;gap:16px}
.period-end .quick span{font-size:.95rem}
.duration-buttons{display:flex;flex-wrap:wrap;gap:10px;flex:1}
.duration-buttons button{flex:1;white-space:nowrap;min-height:48px;font-size:1rem}
.period-or{text-align:center;margin:8px 0;font-size:1rem}
@media(max-width:700px){.period-group{padding:16px;border-radius:16px}.period-date{grid-template-columns:minmax(0,1fr);gap:10px}.period-end .quick{display:block}.duration-buttons{margin-top:12px;gap:8px}.duration-buttons button{flex:1 1 70px}.period-or{margin:12px 0}}

.display-options{border:2px solid #4799d0;border-radius:16px;padding:16px}
.duration-buttons button{font-weight:700}
.period-end .period-date{font-weight:400}
.period-end .quick span{font-weight:700}