/*
  🎉 Events in the app (event-ui.js): the 🎉 where a task's tick would be, the time range and "On now"
  chips, the editor's event parts (✓ Task · 🎉 Event, When, Where, Details with its Markdown preview,
  📅 Add to calendar), the card someone you share an event with sees, and the Schedule's event blocks
  and 🎉 Events strip. Events wear the purple accent (--purple) so they read apart from tasks. Light and
  dark follow choreboy.css's tokens. Loaded after the other stylesheets.
*/

:root { --ev: var(--purple); --ev-soft: color-mix(in srgb, var(--purple) 12%, var(--surface)); --ev-line: color-mix(in srgb, var(--purple) 38%, transparent); }

/* ---------- a row ---------- */

/* The tick's place: a 🎉 that does nothing (an event isn't ticked off). */
.tick.is-event { border: 0; background: none; cursor: default; color: inherit; font-size: 1rem; line-height: 1; width: 22px; height: 22px; display: grid; place-items: center; }
.tick.is-event:hover { border: 0; color: inherit; }
.tick.is-event:not(.on):hover::after { content: none; }
.tick.is-event.is-over { filter: grayscale(.7); opacity: .55; }
.task.is-event { box-shadow: inset 3px 0 0 var(--ev-line); }
.task.is-event.is-done { box-shadow: none; }
.task.is-event.is-done .task-title { text-decoration: none; }
.task.is-ended { opacity: .62; }
.chip.ev-time { color: var(--text-2); }
.chip.ev-state { background: var(--ev-soft); color: var(--ev); border-color: var(--ev-line); font-weight: 650; }
.chip.ev-state.ended { background: var(--surface-2); color: var(--text-3); border-color: var(--border); font-weight: 500; }
.chip.ev-fin { color: var(--text-3); }
.chip.ev-badge, .chip.ev-page { background: var(--ev-soft); color: var(--ev); border-color: var(--ev-line); }
.chip.ev-where { max-width: 18rem; }

/* ---------- the editor ---------- */

.ev-type-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem; margin: .7rem 0 .2rem; }
.seg.ev-type button.active { color: var(--ev); }
.ev-type-lock { margin: .6rem 0 .2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ev-hint { margin: .35rem 0 0; }
.ev-editor .ed-title-row { margin-bottom: .2rem; }
.ev-when { margin-top: .9rem; }
.ev-when .date-row .input[type=date] { min-width: 0; }
.ev-allday-note { align-self: center; font-size: .78rem; }
.ev-ends { min-width: 0; }
.ev-len { margin: .35rem 0 0; }
.ev-noend { margin: .2rem 0 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--text-2); }
.ev-zone { margin: .7rem 0 0; }
.ev-tz { margin-top: .4rem; max-width: 22rem; }
.ev-far { margin: .4rem 0 0; color: var(--warn); }
.ev-where-search { display: flex; gap: .4rem; align-items: stretch; }
.ev-where-search .input { flex: 1; min-width: 0; }
.ev-err { margin: .35rem 0 0; color: var(--bad); }
.ev-results { margin-top: .45rem; }
.ev-claude { margin: .45rem 0 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ev-place-row { margin-top: .5rem; }
.ev-place { max-width: 22rem; }
.ev-picked { margin: .55rem 0 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.ev-picked.on-map > span:first-child { font-weight: 600; }
.ev-nomap { margin: .3rem 0 0; color: var(--warn); }
.ev-details { margin-top: 1.1rem; }
.ev-details-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ev-details-head .field-label { flex: 1 1 16rem; }
.ev-md-hint { margin: .3rem 0 .2rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; }
.ev-preview { min-height: 5.5rem; padding: .55rem .75rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.ev-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed-private-row { margin-top: .9rem; }
.ed-private-row .small-muted { margin: .3rem 0 0; }
.ev-cal-row { margin-top: 1rem; }

/* 📅 Add to calendar: a small menu that opens under its button. */
.ev-cal { margin: .2rem 0 .8rem; }
.ev-cal > summary { list-style: none; display: inline-flex; cursor: pointer; }
.ev-cal > summary::-webkit-details-marker { display: none; }
.ev-cal-menu { display: flex; flex-direction: column; gap: .3rem; margin-top: .45rem; max-width: 26rem; }
.ev-cal-item { display: block; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 550; }
.ev-cal-item:hover { border-color: var(--ev); background: var(--ev-soft); }
.ev-cal-note { margin: .4rem 0 0; max-width: 32rem; }

/* ---------- Markdown (ChoreMarkdown.toHtml: the details) ---------- */

.ev-md { overflow-wrap: anywhere; line-height: 1.5; }
.ev-md > :first-child { margin-top: 0; }
.ev-md > :last-child { margin-bottom: 0; }
.ev-md p, .ev-md ul, .ev-md ol, .ev-md blockquote { margin: .45rem 0; }
.ev-md h1, .ev-md h2, .ev-md h3, .ev-md h4, .ev-md h5, .ev-md h6 { margin: .8rem 0 .3rem; line-height: 1.25; }
.ev-md h1, .ev-md h2 { font-size: 1.1rem; }
.ev-md h3 { font-size: 1rem; }
.ev-md h4, .ev-md h5, .ev-md h6 { font-size: .94rem; }
.ev-md .md-domain { color: var(--text-3); font-size: .85em; }
.ev-md ul, .ev-md ol { padding-left: 1.3rem; }
.ev-md li { margin: .15rem 0; }
.ev-md blockquote { padding: .1rem .8rem; border-left: 3px solid var(--ev-line); color: var(--text-2); }
.ev-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; padding: .05rem .3rem; border-radius: 5px; background: var(--sunken); }
.ev-md hr { border: 0; border-top: 1px solid var(--border); margin: .8rem 0; }
.ev-md a { color: var(--accent-text); }
.ev-plain { white-space: pre-wrap; }

/* ---------- the card (someone else's event) ---------- */

.ev-card .ed-head .panel-title { overflow-wrap: anywhere; }
.ev-sec { margin: 0 0 1rem; }
.ev-k { margin: 0 0 .3rem; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.ev-sec .small-muted { margin: .2rem 0 0; }
.ev-when-line { margin: 0; font-size: 1.02rem; font-weight: 600; }
.ev-until { color: var(--ev); font-weight: 650; }
.ev-addr { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ev-addr-text { overflow-wrap: anywhere; font-weight: 550; }
.ev-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.ev-links .btn { text-decoration: none; }
.ev-more { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0 0 1rem; }
.ev-who { margin: .2rem 0 0; }
.ev-gone { margin: -.3rem 0 .9rem; padding: .5rem .75rem; border-radius: var(--radius); background: var(--bad-soft); color: var(--bad); font-weight: 600; }

/* ---------- 🗓️ Schedule ---------- */

/* An event's block: drawn from its own time, never moved or ticked. */
.sch-block.sch-event { background: var(--ev-soft); border-color: var(--ev-line); border-left-color: var(--ev); cursor: pointer; }
.sch-block.sch-event.over { background: var(--surface-2); border-color: var(--border); border-left-color: var(--text-3); color: var(--text-3); box-shadow: none; opacity: .75; }
.sch-block.sch-event.over .sch-block-time { color: var(--text-3); }
.sch-block.sch-event:focus-visible { outline-color: var(--ev); }
/* 🎉 Events: the day's all-day ones, and the later days of longer ones. */
.sch-events { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; margin: -.2rem 0 1rem; padding: .55rem .8rem; border-radius: var(--radius-lg, 14px); background: var(--ev-soft); border: 1px solid var(--ev-line); }
.sch-events-k { font-weight: 700; font-size: .86rem; color: var(--ev); margin-right: .15rem; }
.sch-ev { display: inline-flex; align-items: baseline; gap: .35rem; max-width: 100%; padding: .25rem .6rem; border: 1px solid var(--ev-line); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 .84rem var(--font); cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.sch-ev small { font-weight: 500; color: var(--text-2); }
.sch-ev:hover { border-color: var(--ev); }
.sch-ev.over { opacity: .6; }

/* ---------- 📌 Upcoming ---------- */

.up-row.is-event .up-date { box-shadow: inset 0 0 0 1px var(--ev-line); }

/* ---------- phones ---------- */

@media (max-width: 760px) {
  .ev-where-search { flex-wrap: nowrap; }
  .ev-tz, .ev-place { max-width: 100%; width: 100%; }
  .ev-links .btn { flex: 1 1 auto; justify-content: center; }
  .ev-cal-menu { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-cal-item, .sch-ev { transition: none; }
}