/* A calm, focused surface for the shared family plan. */
#event-form{width:min(600px,100%);padding:28px;background:#fffefa;border:1px solid #fff;border-radius:28px;box-shadow:0 24px 90px #27382e30;color:#2e4239}
#event-form .modal-title{margin:-28px -28px 22px;padding:25px 28px 23px;background:linear-gradient(115deg,#e8f0e7,#f2f4e9);border-bottom:1px solid #dce5d9;border-radius:28px 28px 0 0;align-items:center}
#event-form .eyebrow{font-size:10px;letter-spacing:1.8px;color:#61795d;font-weight:700}
#event-form .modal-title h2{font:600 29px/1.15 Georgia,serif;color:#2e4239;margin-top:7px;letter-spacing:-.6px}
#event-form .modal-title .icon-button{background:#ffffffa6;border:1px solid #dce5d9;border-radius:50%;color:#4f6657;width:40px;height:40px;min-height:40px;flex-basis:40px}
#event-form .field{margin-bottom:16px}
#event-form .field label{font-size:12px;font-weight:600;color:#506357;margin-bottom:7px}
#event-form .field input,#event-form .field select{background:#fff;border:1px solid #dce2d8;border-radius:12px;min-height:46px;padding:11px 13px;font-size:15px;color:#30473c;box-shadow:0 2px 3px #293e3003}
#event-form .field input:focus,#event-form .field select:focus{outline:2px solid #8da886;outline-offset:2px;border-color:#8da886}
#event-form #field-title{font-weight:600;font-size:17px}
#event-form .event-time-block{padding:15px 14px 0;margin:3px 0 17px;border:1px solid #e5e8df;border-radius:16px;background:#f3f5ef;gap:12px}
#event-form .event-time-block input{font-size:14px;min-width:0;width:100%}
#event-form .form-divider{display:flex;align-items:center;gap:7px;border-top:1px solid #e7e6dc;padding-top:17px;margin:5px 0 13px;color:#7a7769;font-size:11px}
#event-form .form-divider span{margin-left:auto;font-size:10px;color:#777a70}
#event-form #field-careNote{background:#f8f6f0}
#event-form .actions{border-top:1px solid #e7e6dc;padding-top:18px;margin-top:19px;justify-content:space-between;align-items:center;gap:12px}
#event-form .actions .button{min-height:46px;border-radius:13px;font-size:13px;flex:initial}
#event-form .actions button[type=submit]{background:#365e49;color:#fff;padding:12px 23px;box-shadow:0 4px 10px #365e491a}
#event-form .actions button[type=submit]:hover{background:#284b38}
#event-form .actions #archive{background:transparent;border:1px solid #e7dcd4;color:#936658;padding:11px 16px;box-shadow:none}
@media(max-width:480px){#event-form{padding:20px 16px;border-radius:22px}#event-form .modal-title{margin:-20px -16px 20px;padding:22px 16px;border-radius:22px 22px 0 0}#event-form .modal-title h2{font-size:26px}#event-form .form-divider{flex-wrap:wrap}#event-form .form-divider span{width:100%;margin-left:0}#event-form .actions button[type=submit]{padding:12px 15px}}

@media(min-width:600px) and (max-height:800px){
#event-form .modal-title{padding-top:16px;padding-bottom:16px}#event-form .modal-title h2{font-size:26px}
#event-form .field{margin-bottom:10px}#event-form .field input{min-height:42px;padding:9px 12px}
#event-form .actions{margin-top:12px;padding-top:12px}#event-form .form-divider{padding-top:12px;margin-bottom:10px}
}

/* The essentials are a short form; optional fields remain available on demand. */
#event-form{width:min(800px,100%)}
#event-form .modal-title p{font-size:14px;color:#687765;margin:8px 0 0}
#event-form .event-form-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:start}
#event-form .event-form-main{min-width:0;padding-top:5px}
#event-form .event-time-panel{background:#f0f3e9;border:1px solid #e0e6d6;border-radius:18px;padding:18px;min-width:0}
#event-form .event-time-panel h3{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1.4;margin:0 0 15px;color:#49633d}
#event-form .event-time-panel h3 .icon{width:18px;height:18px}
#event-form .duration-presets{display:flex;gap:6px}
#event-form .duration-presets button{flex:1;min-height:44px;border:1px solid #dce4d3;background:#fffefa;color:#486340;border-radius:10px;font-size:12px}
#event-form .duration-presets button[aria-pressed=true]{background:#365e49;color:white;border-color:#365e49}
#event-form .event-duration-label{font-size:12px;color:#617656;margin:10px 0 0;min-height:18px}
#event-form .event-options{margin-top:20px;border:1px solid #e4e7dc;border-radius:14px;background:#fbfbf5}
#event-form .event-options summary{min-height:48px;cursor:pointer;padding:13px 15px;list-style:none;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#516448}
#event-form .event-options summary::after{content:'+';margin-left:auto;font-size:20px;font-weight:400}
#event-form .event-options[open] summary::after{content:'−'}
#event-form .event-options summary span{font-size:12px;font-weight:400;color:#6e7869}
#event-form .event-options-content{padding:0 16px 5px}
#event-form .event-private-hint{display:flex;align-items:center;gap:7px;font-size:12px;color:#71786a}
#event-form .event-options input:disabled{background:#f0f0e9;color:#818679}
#event-form .actions{margin-top:20px}
@media(max-width:650px){#event-form .event-form-columns{grid-template-columns:minmax(0,1fr);gap:8px}#event-form .event-time-panel{padding:14px}#event-form .event-options summary{flex-wrap:wrap}#event-form .event-options summary span{font-size:11px}#event-form .modal-title h2{font-size:25px}}
/* Date selection belongs to the app; time is always 24-hour. */
.event-datetime{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px}
#event-form .date-choice{min-height:62px;border:1px solid #d8dfd3;border-radius:13px;background:#fffefa;color:#28493a;padding:10px 14px;text-align:left;font:inherit;font-weight:600}
#event-form .clock-choice{margin:0;display:flex;flex-direction:column;border:1px solid #d8dfd3;border-radius:13px;padding:7px 10px;background:#fffefa;font-size:10px;color:#617656;gap:0}
#event-form .clock-choice input{border:0;padding:2px 0;min-height:28px;height:28px;border-radius:0;box-shadow:none;background:transparent;font-size:18px;width:100%;font-variant-numeric:tabular-nums}
.date-calendar{grid-column:1/-1;padding:12px;border:1px solid #d8dfd3;border-radius:15px;background:#fffefa;box-shadow:0 8px 20px #28493a0d}
.date-calendar[hidden]{display:none}
.date-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:14px}
#event-form .date-calendar button{border:0;background:transparent;border-radius:9px;color:#28493a;min-height:38px;font:inherit;padding:4px}
.date-calendar-head button{width:36px;font-size:24px!important}
.date-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.date-calendar-grid>span{font-size:11px;color:#667761;padding:4px 0}
#event-form .date-calendar button:hover{background:#edf2e8}
#event-form .date-calendar button[aria-pressed=true]{background:#365e49;color:#fff}
#event-form .date-calendar button:focus-visible,#event-form .date-choice:focus-visible{outline:2px solid #365e49;outline-offset:2px}