/* The Calendar (B10). Colors and fonts come from style.css; the head, the
   buttons and the toast from tasks.css. One thing at a time, room to breathe. */
.calendar-page main { max-width: 1120px; padding-bottom: calc(env(safe-area-inset-bottom) + 110px); } /* room under the floating buttons */
.calendar-page section { margin-top: 12px; }

.cal-bar { display: flex; align-items: center; gap: 4px 8px; margin-top: 14px; }
@media (max-width: 760px) {
  .cal-bar { display: grid; grid-template-columns: 44px 1fr 44px; grid-template-areas: "views views today" "prev title next"; }
  .views { grid-area: views; justify-self: start; }
  #to-today { grid-area: today; justify-self: end; }
  #prev { grid-area: prev; } .cal-title { grid-area: title; } #next { grid-area: next; }
}
.cal-title { flex: 1; margin: 0; font: 600 20px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); text-align: center; min-width: 9em; }
.views { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.views button { border: 0; background: none; padding: 6px 14px; font-size: 15px; color: var(--soft); }
.views button[aria-pressed=true] { background: var(--accent); color: #fff; font-weight: 600; }
.views button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* An event: its title, then its time, quiet. */
.event {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  width: 100%; text-align: left; overflow: hidden;
  border: 0; border-left: 4px solid var(--accent); border-radius: 8px;
  padding: 6px 10px; background: var(--accent-soft); color: var(--ink); font-size: 15px; line-height: 1.3;
}
.event:hover { filter: brightness(.97); }
.event:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.event-title { font-weight: 600; overflow-wrap: anywhere; }
.event-time { color: var(--soft); font-size: 13px; }
.event.short { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 3px; padding-bottom: 3px; }
.event.short .event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.event.short .event-time { white-space: nowrap; overflow: hidden; }
.calendar-page .tasks-head .primary { white-space: nowrap; }
@media (max-width: 420px) { .calendar-page .tasks-head h1 { font-size: 26px; } .calendar-page .tasks-head { gap: 8px; } }
.event.locked { background: var(--card); border-left-color: var(--soft); }

/* The day */
.all-day { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.timeline-wrap { max-height: calc(100vh - 220px); min-height: 320px; overflow-y: auto; border-top: 1px solid var(--line); }
.timeline { position: relative; }
.hour { position: absolute; left: 0; right: 0; height: 48px; border-bottom: 1px solid var(--line); cursor: copy; }
.hour span { position: absolute; left: 0; top: -9px; width: 48px; font-size: 12px; color: var(--soft); background: var(--bg); }
.timeline .event { position: absolute; z-index: 1; cursor: grab; touch-action: pan-y; }
.timeline .event.locked { cursor: pointer; }
.timeline .event[data-dragged] { cursor: grabbing; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.now { position: absolute; left: 52px; right: 0; height: 2px; background: var(--accent); z-index: 2; pointer-events: none; }

/* The week: seven columns on a wide screen, one list down the page on a phone. */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week-day { margin: 0 !important; padding: 8px; border-radius: 12px; min-height: 160px; }
.week-day.is-today { background: var(--card); }
.week-day.drop { outline: 2px dashed var(--accent); }
.week-day h3 { margin: 0 0 6px; font: 600 14px/1.2 var(--sans); }
.day-link { padding: 4px 0; color: var(--ink); }
.is-today .day-link { color: var(--accent); }
.week-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.week .event[draggable=true] { cursor: grab; }
@media (max-width: 760px) {
  .week { grid-template-columns: 1fr; gap: 4px; }
  .week-day { min-height: 0; }
  .week-day ul:empty::after { content: 'Nothing planned'; color: var(--soft); font-size: 14px; }
}

/* The event's box */
.event-box { border: 0; border-radius: 16px; padding: 20px; width: min(440px, calc(100vw - 32px)); background: var(--bg); color: var(--ink); }
.event-box::backdrop { background: rgba(0, 0, 0, .35); }
.event-box h2 { margin: 0 0 12px; font: 600 22px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.event-box label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 14px; color: var(--soft); }
.event-box label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 16px; color: var(--ink); }
.event-box input:not([type=checkbox]), .event-box textarea {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.event-box input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.box-actions { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; }
.danger { color: #b3261e !important; }
.box-error { color: #b3261e; font-size: 15px; margin: 0 0 8px; }
@media (prefers-color-scheme: dark) { .danger, .box-error { color: #ff8a80 !important; } }

/* A subscribed calendar's event: its own colour of line, quiet, locked. */
.event.locked { border-left-color: var(--cal, var(--soft)); }
.event.locked .event-title::before { content: '🔒 '; font-size: 11px; }
.cal-link { font-size: 15px; }

/* Settings: the calendars */
.settings-page code { font-size: 14px; }
.cal-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.cal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--card); border-left: 4px solid var(--cal); }
.cal-main { flex: 1 1 12em; display: flex; flex-direction: column; min-width: 0; }
.cal-name { font-weight: 600; }
.cal-state { color: var(--soft); font-size: 14px; }
.cal-state.bad { color: #b3261e; }
@media (prefers-color-scheme: dark) { .cal-state.bad { color: #ff8a80; } }
.check { display: flex; align-items: center; gap: 8px; }
.check.small { font-size: 15px; color: var(--soft); }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.cal-add { margin-top: 20px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); }
.cal-add h3 { margin: 0 0 12px; font: 600 18px/1.2 var(--serif); }
.cal-add > label:not(.check) { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 14px; color: var(--soft); }
.cal-add input:not([type=checkbox]):not([type=radio]) { font: inherit; font-size: 17px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.how { margin: -4px 0 12px; font-size: 14px; color: var(--soft); }
.how summary { cursor: pointer; color: var(--accent); }
.colors { border: 0; padding: 0; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.colors legend { font-size: 14px; color: var(--soft); padding: 0; margin-bottom: 6px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; background: var(--cal); display: grid; place-items: center; cursor: pointer; }
.swatch input { appearance: none; margin: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.swatch input:checked { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--cal); }
.swatch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cal-add .check { margin-bottom: 12px; font-size: 16px; }

/* Settings: Sync (B11) */
.sync { margin-bottom: 28px; }
.sync-line { font-weight: 600; margin: 12px 0 8px; }
.sync-line.bad { color: #b3261e; }
@media (prefers-color-scheme: dark) { .sync-line.bad { color: #ff8a80; } }
.sync-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 12px; font-size: 15px; }
.sync-facts dt { color: var(--soft); }
.sync-facts dd { margin: 0; overflow-wrap: anywhere; }
.conflict-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.conflict { padding: 10px 12px; border-radius: 12px; background: var(--card); border-left: 4px solid var(--accent); display: grid; gap: 6px; min-width: 0; }
.conflict .what { font-weight: 600; overflow-wrap: anywhere; }
.conflict .value { font-size: 14px; color: var(--soft); overflow-wrap: anywhere; white-space: pre-wrap; max-height: 6.5em; overflow: hidden; }
.conflict .value b { color: var(--ink); font-weight: 600; }
.conflict .acts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sync .hint + .sync-facts { margin-top: 12px; }

/* Google calendars (A3): an event in its calendar's colour; locked ones
   keep the lock. Her own events, once Google is there, are made in this
   app only: a dashed outline. */
.event.google { border-left-color: var(--cal, var(--accent)); background: color-mix(in srgb, var(--cal, var(--accent)) 14%, var(--bg)); }
.event.here-only { outline: 1.5px dashed var(--accent); outline-offset: -1.5px; }
/* Where its change to Google stands: an amber dot while it goes, red when
   it did not, an amber ring when Google changed it meanwhile. */
.event-state { font-size: 12px; color: var(--soft); display: inline-flex; align-items: center; gap: 5px; }
.event-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #d39b1c; flex: none; }
.event.g-failed .event-state::before { background: #b3261e; }
.event.g-conflict { box-shadow: inset 0 0 0 2px #d39b1c; }
.event.short .event-state { font-size: 0; gap: 0; } /* the dot alone */
.g-state { margin: -4px 0 12px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.g-state span { font-weight: 600; }

.event-box select { font: inherit; font-size: 17px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.answer { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.answer span { color: var(--soft); font-size: 14px; margin-right: 4px; }
.answer button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 15px; }
.answer button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.people { margin: 0 0 12px; display: grid; gap: 6px; }
.people-label { font-size: 14px; color: var(--soft); }
.guests { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.guests li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.guests li > span:first-child { flex: 1; overflow-wrap: anywhere; }
.guests .said { font-size: 13px; color: var(--soft); }
.event-box .people input { font: inherit; font-size: 17px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.meet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; }
.scope { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.scope legend { font-size: 14px; color: var(--soft); padding: 0; margin-bottom: 6px; }
.scope label.check { margin: 0; }
.confirm-box p { margin: 0 0 16px; font-size: 17px; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.danger-fill { background: #b3261e !important; border-color: #b3261e !important; color: #fff !important; }