/* Team calendar demo. Page chrome uses the four brand values (see pages.css).
   The calendar's people colors are a muted product palette, set in demo.js. */
.dm{background:var(--navy)}
.dm-top{background:var(--navy);color:var(--ivory)}
.dm-intro{padding:40px 0 44px}
.dm-intro h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,4.4vw,60px);line-height:1.05;letter-spacing:-.03em}
.dm-intro p{margin-top:12px;color:var(--muted-dark);font-size:18px}

.dm-main{background:var(--paper);color:var(--navy);padding:40px 0 72px}
.dm-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.dm-cal-wrap{background:var(--ivory);border:1px solid var(--line-light);border-radius:14px;padding:18px;box-shadow:0 2px 4px #0a193010,0 14px 34px -14px #0a193038}
.dm-foot{margin-top:28px;font-size:14px;color:var(--slate)}
.dm-foot a{color:var(--navy);border-bottom:1px solid var(--copper);font-weight:600}
.dm-noscript{padding:20px}

/* FullCalendar on brand */
.dm .fc{--fc-border-color:color-mix(in srgb,var(--slate) 22%,var(--ivory));--fc-today-bg-color:var(--copper-wash);--fc-page-bg-color:var(--ivory);--fc-button-bg-color:var(--ivory);--fc-button-border-color:var(--line-light);--fc-button-text-color:var(--navy);--fc-button-hover-bg-color:var(--copper-wash);--fc-button-hover-border-color:var(--copper);--fc-button-active-bg-color:var(--copper-wash);--fc-button-active-border-color:var(--copper);font-family:var(--text);font-size:13px}
.dm .fc .fc-toolbar-title{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.01em}
.dm .fc .fc-button{border-radius:999px;padding:6px 14px;font-weight:600;font-size:13px;box-shadow:none;text-transform:none}
.dm .fc .fc-button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.dm .fc .fc-button-group>.fc-button{border-radius:0}
.dm .fc .fc-button-group>.fc-button:first-child{border-radius:999px 0 0 999px}
.dm .fc .fc-button-group>.fc-button:last-child{border-radius:0 999px 999px 0}
.dm .fc .fc-col-header-cell-cushion{color:var(--slate);font-weight:600;padding:8px 4px}
.dm .fc .fc-daygrid-day-number{color:var(--slate);font-size:12px}
.dm .fc .fc-daygrid-day{cursor:pointer;transition:background-color .15s var(--ease)}
@media(hover:hover) and (pointer:fine){.dm .fc .fc-daygrid-day:hover{background:color-mix(in srgb,var(--copper) 6%,var(--ivory))}}
.dm .fc .fc-daygrid-day-frame{min-height:96px}
.dm .fc .fc-daygrid-event{border-radius:5px;margin:1px 3px 2px;padding:0;border-width:1px}
.dm .fc .fc-daygrid-more-link{color:var(--navy);font-weight:600}
.ev-in{display:flex;gap:6px;align-items:baseline;padding:2px 6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1.35}
.ev-in b{font-weight:700}
.ev-in span{opacity:.86;overflow:hidden;text-overflow:ellipsis}
.ev-mine{box-shadow:inset 0 0 0 2px #fff8f0aa}
.ev-gap{border-style:dashed !important;border-width:1.5px !important}
.ev-gap .ev-in b{font-weight:700}
.dm .fc .ev-mine{cursor:grab}

/* Panel */
.dm-panel{position:sticky;top:24px;display:grid;gap:18px}
.dm-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;background:var(--ivory);border:1px solid var(--line-light);border-radius:14px;overflow:hidden}
.dm-step{padding:18px 20px;border-top:1px solid var(--line-light)}
.dm-step:first-child{border-top:0}
.dm-step h2{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}
.dm-step > p{margin:4px 0 0 30px;font-size:14px;color:var(--slate)}
.dm-check{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--slate) 55%,var(--ivory));position:relative;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.dm-step.is-done .dm-check{background:var(--navy);box-shadow:none}
.dm-step.is-done .dm-check::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid var(--ivory);border-width:0 2px 2px 0;transform:rotate(45deg)}

.dm-people{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0 30px}
.dm-chip{border:0;border-radius:999px;background:var(--c);color:#fff8f0;font:600 13px/1 var(--text);padding:8px 13px;cursor:pointer;transition:transform .12s var(--ease),background-color .2s var(--ease)}
.dm-chip:active{transform:scale(.96)}
.dm-chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.dm-rules{border:0;padding:0;margin:14px 0 0 30px;display:grid;gap:8px}
.dm-rules legend{padding:0;margin-bottom:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--slate)}
.dm-rule{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;position:relative}
.dm-rule input{position:absolute;opacity:0;width:1px;height:1px}
.dm-switch{flex:none;width:34px;height:20px;border-radius:999px;background:color-mix(in srgb,var(--slate) 35%,var(--ivory));position:relative;transition:background-color .18s var(--ease)}
.dm-switch::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--ivory);transition:transform .18s var(--ease)}
.dm-rule input:checked + .dm-switch{background:var(--navy)}
.dm-rule input:checked + .dm-switch::after{transform:translateX(14px)}
.dm-rule input:focus-visible + .dm-switch{outline:2px solid var(--copper);outline-offset:2px}
.dm-hint{margin:10px 0 0 30px;font-size:12.5px;color:var(--slate);font-style:italic}
.dm-draft{margin:14px 0 0 30px;border:0;cursor:pointer;font-family:var(--text)}
.dm-draft:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.dm-result{margin:10px 0 0 30px;font-size:14px;color:var(--navy);font-weight:500}
.dm-result:empty{display:none}

.dm-done{background:var(--navy);color:var(--ivory);border-radius:14px;padding:22px 20px}
.dm-done-title{font-family:var(--display);font-size:24px;line-height:1.2}
.dm-done p:not(.dm-done-title){color:var(--muted-dark);font-size:14px;margin:6px 0 16px}
.dm-reset,.dm-text-btn{justify-self:start;background:none;border:0;padding:4px 0;font:600 13px var(--text);color:var(--slate);border-bottom:1px solid currentColor;cursor:pointer}
.dm-reset:hover,.dm-text-btn:hover{color:var(--navy)}
.dm-reset:focus-visible,.dm-text-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* Add-event dialog */
.dm-dialog{border:0;border-radius:16px;padding:0;width:min(360px,calc(100% - 32px));background:var(--ivory);color:var(--navy);box-shadow:0 4px 8px #0a193022,0 24px 60px -12px #0a193066}
.dm-dialog::backdrop{background:#0a193066}
.dm-form{display:grid;gap:14px;padding:24px}
.dm-form h2{font-family:var(--display);font-weight:400;font-size:26px}
.dm-form-date{color:var(--slate);font-size:14px;margin-top:-8px}
.dm-form label{display:grid;gap:6px;font-size:13px;font-weight:600}
.dm-form select{font:400 15px var(--text);padding:10px 12px;border-radius:10px;border:1px solid var(--line-light);background:var(--paper);color:var(--navy)}
.dm-form select:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.dm-form-actions{display:flex;align-items:center;gap:18px;margin-top:4px}
.dm-form-actions .pill{border:0;cursor:pointer;font-family:var(--text)}

@media(max-width:1000px){
  .dm-grid{grid-template-columns:1fr}
  .dm-panel{position:static}
}
@media(max-width:700px){
  .dm-intro{padding:28px 0 32px}
  .dm-main{padding-top:20px}
  .dm-cal-wrap{padding:10px;border-radius:12px}
  .dm .fc .fc-toolbar{flex-wrap:wrap;gap:8px}
  .dm .fc .fc-toolbar-title{font-size:20px}
  .dm .fc .fc-daygrid-day-frame{min-height:150px}
  .ev-in{flex-direction:column;gap:0;white-space:normal;padding:3px 4px;font-size:11px}
  .dm .fc .fc-daygrid-event{margin:1px 2px 2px}
}
.dm-reduce *,.dm-reduce *::after{transition:none !important}
.dm-crumbs{margin-bottom:22px}