*{box-sizing:border-box}body{margin:0;background:#faf8f5;color:#343d37;font-family:Arial,sans-serif}a{color:inherit}button,input,select{font:inherit}.calendar-customizer{max-width:1160px;margin:auto;padding:24px}.calendar-customizer header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:32px;font-size:12px;letter-spacing:.08em}.calendar-customizer header a{letter-spacing:0;text-decoration:none}.calendar-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}.calendar-preview{background:#eee8df;border-radius:20px;padding:48px 32px;text-align:center;position:sticky;top:20px}.calendar-cushion{padding:18px;border-radius:14% 14% 12% 12%;background:#fff;box-shadow:0 18px 35px #534d3926,inset 0 0 20px #534d3910;overflow:hidden}.calendar-cushion canvas{display:block;width:100%;height:auto}.calendar-preview p{font-size:12px;line-height:1.6;color:#716f65;margin:24px 0 0}.calendar-eyebrow{font-size:11px;letter-spacing:.2em;color:#9c6951}.calendar-settings h1{font-family:Georgia,serif;font-weight:400;font-size:38px;line-height:1.12;margin:14px 0}.calendar-settings>p{font-size:14px;line-height:1.7;color:#716f65}.calendar-settings form{display:grid;gap:18px;margin-top:28px}.calendar-settings label{display:grid;gap:8px;font-size:14px}.calendar-settings input:not([type=checkbox]),.calendar-settings select{width:100%;min-width:0;background:white;border:1px solid #d7d9ce;border-radius:8px;padding:12px;color:#343d37}.calendar-settings small{font-size:11px;color:#716f65}.calendar-settings .calendar-approval{display:flex;gap:10px;align-items:flex-start;line-height:1.5}.calendar-approval input{margin-top:4px;accent-color:#343d37}.calendar-primary{display:inline-block;border:0;border-radius:8px;background:#343d37;color:white;padding:15px 22px;cursor:pointer;text-decoration:none;text-align:center}.calendar-primary:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}.calendar-settings .calendar-retention{font-size:11px}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #a56c50;outline-offset:3px}@media(max-width:760px){.calendar-customizer{padding:18px}.calendar-layout{grid-template-columns:1fr;gap:28px}.calendar-preview{position:static;padding:28px;max-width:440px;width:100%;margin:auto}.calendar-settings h1{font-size:32px}.calendar-customizer header{font-size:10px;margin-bottom:20px}}

.calendar-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}.calendar-preview{padding:30px 24px;align-self:start}.calendar-cushion{padding:12px;max-width:500px;margin:auto}.calendar-settings{min-width:0}.calendar-settings h1{font-size:30px;margin:10px 0}.calendar-settings form{gap:16px;margin-top:20px}.calendar-settings>p{margin:10px 0 18px}.calendar-field-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.calendar-field-heading small{font-variant-numeric:tabular-nums}.calendar-settings [data-date-error]{color:#a34226;line-height:1.5}.calendar-settings [aria-invalid=true]{border-color:#a34226;background:#fff9f6}.calendar-preview p{margin-top:18px}.calendar-preview p strong{display:inline-block;color:#343d37;margin-bottom:4px}.calendar-settings [data-calendar-status]{color:#a34226;line-height:1.5}@media(max-width:760px){.calendar-layout{grid-template-columns:1fr;gap:24px}.calendar-preview{padding:22px;max-width:430px}.calendar-settings h1{font-size:28px}}

/* On phones, keep the same live canvas visible while editing the fields below. */
@media(max-width:760px){
  body{overflow:hidden}
  .calendar-customizer{padding:12px 16px;height:var(--calendar-viewport-height,100dvh);display:flex;flex-direction:column}
  .calendar-customizer header{margin-bottom:12px;flex:none}
  .calendar-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:12px;flex:1;min-height:0}
  .calendar-preview{position:static;width:100%;max-width:none;margin:0;padding:8px 12px;border:1px solid #ded7cc;border-radius:12px;box-shadow:0 6px 16px #534d3914}
  .calendar-cushion{width:max-content;max-width:100%;padding:6px;border-radius:12px}
  .calendar-cushion canvas{width:auto;max-width:100%;height:var(--calendar-preview-height,clamp(64px,calc((100dvh - 320px)*.55),220px));object-fit:contain}
  .calendar-preview .calendar-measurements{margin:7px 0 0;font-size:10px;line-height:1.4}
  .calendar-preview .calendar-measurements strong{margin:0}
  .calendar-preview .calendar-preview-help{display:none}
  .calendar-settings{min-height:0;align-self:stretch;overflow-y:auto;overscroll-behavior-y:contain;padding:3px 4px 10px;scroll-padding:8px}
  .calendar-settings h1{font-size:24px;margin:6px 0}
  .calendar-settings>p{font-size:12px;line-height:1.5;margin:6px 0 12px}
  .calendar-settings form{margin-top:12px;gap:14px}
  .calendar-settings input:not([type=checkbox]){font-size:16px;min-height:44px}
}
@media(max-width:760px) and (max-height:680px){
  .calendar-settings>.calendar-eyebrow,.calendar-settings>h1,.calendar-settings>p:not([data-calendar-status]){display:none}
  .calendar-settings form{margin-top:0;gap:12px}
}