/* Mom & Calm — calendar: quick add, filters, month, phone week list, time grid, event sheets. */

.head-actions { display: flex; gap: 8px; align-items: center; }

/* quick add */
.quick {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px;
  border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--line);
  box-shadow: var(--shadow-1); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.quick:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.quick-ico { font-size: 1.1rem; }
.quick-input { border: 0; padding: 8px 0; min-height: 40px; background: transparent; box-shadow: none !important; flex: 1; min-width: 0; }
.quick-help { width: 36px; color: var(--ink-3); border-color: transparent; }

/* filter chips */
.cal-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.cal-filter::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 3px 14px 3px 3px;
  border-radius: var(--r-pill); border: 1.5px solid var(--m); background: var(--m-wash); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 450; transition: opacity var(--t-fast), filter var(--t-fast);
}
.filter-chip .avatar { width: 34px; height: 34px; font-size: 1.05rem; }
.filter-chip[aria-pressed="false"] { background: transparent; border-color: var(--line); color: var(--ink-3); }
.filter-chip[aria-pressed="false"] .avatar { filter: grayscale(1); opacity: 0.55; }

/* card + toolbar */
.cal-card { padding: 14px; }
.cal-toolbar { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "nav title" "views views"; gap: 10px; align-items: center; margin-bottom: 12px; }
.cal-toolbar .group { grid-area: nav; display: flex; gap: 4px; align-items: center; }
.cal-title { grid-area: title; font-size: var(--fs-lg); text-align: right; }
.cal-views { grid-area: views; width: 100%; }
.cal-views button { flex: 1; padding: 0 8px; }
@media (min-width: 700px) {
  .cal-toolbar { grid-template-columns: auto 1fr auto; grid-template-areas: "nav title views"; }
  .cal-title { text-align: left; font-size: var(--fs-xl); }
  .cal-views { width: auto; }
}
.cal-body { outline: none; touch-action: pan-y; }
.cal-body:focus-visible { box-shadow: 0 0 0 3px var(--focus); border-radius: 12px; }

/* pills (shared) */
.cal-pill {
  display: flex; align-items: center; min-width: 0; width: 100%; padding: 2px 7px; border: 0;
  border-radius: 7px; background: var(--m-wash); color: var(--ink);
  border-left: 3px solid var(--m); font-size: 0.72rem; line-height: 1.35; text-align: left;
}
.cal-pill .pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-pill[data-kind="gift"] { background: transparent; border-left-style: dashed; color: var(--ink-2); }
.cal-pill[data-kind="birthday"] { background: var(--gold-wash); border-left-color: var(--m-gold); }

/* month */
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-mhead { text-align: center; font-size: var(--fs-xs); color: var(--ink-3); padding-bottom: 4px; }
.cal-mcell {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 64px; padding: 5px 4px 6px;
  border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink); text-align: left; overflow: hidden;
}
.cal-mcell:hover { background: var(--surface-sunk); }
.cal-mcell[data-out] { background: transparent; color: var(--ink-3); }
.cal-mcell[data-out] .cal-mitems { opacity: 0.55; }
.cal-mnum { font-size: var(--fs-sm); padding-left: 3px; }
.cal-mcell[data-today] { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-mcell[data-today] .cal-mnum { color: var(--accent-ink); font-weight: 700; }
.cal-mitems { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-mitems .cal-pill, .cal-more { display: none; }
.cal-mdots { display: flex; gap: 3px; flex-wrap: wrap; padding-left: 3px; }
.cal-mdots .dot { width: 7px; height: 7px; }
.cal-more { font-size: 0.68rem; color: var(--ink-2); padding-left: 4px; }
@media (min-width: 700px) {
  .cal-month { gap: 5px; }
  .cal-mcell { min-height: 108px; padding: 7px 6px; }
  .cal-mitems .cal-pill, .cal-more { display: flex; }
  .cal-mdots { display: none; }
}

/* phone week list */
.cal-agenda { display: flex; flex-direction: column; }
.ag-day { border-top: 1px solid var(--line); padding: 10px 0; }
.ag-day:first-child { border-top: 0; padding-top: 0; }
.ag-head { display: flex; align-items: center; gap: 12px; padding: 4px 2px; border: 0; background: transparent; color: var(--ink); width: 100%; text-align: left; }
.ag-num { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); font-size: 1.15rem; flex: none; }
.ag-day[data-today] .ag-num { background: var(--accent); color: var(--on-accent); }
.ag-wd { font-weight: 450; margin-right: 8px; }
.ag-today { background: var(--accent-wash); color: var(--accent-ink); min-height: 22px; }
.ag-items { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0 52px; }
.ag-empty { margin: 2px 0 0 52px; border: 0; background: transparent; color: var(--ink-3); font-size: var(--fs-sm); padding: 6px 0; text-align: left; min-height: 36px; }
.ev-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
  border: 0; border-radius: 14px; background: var(--m-wash); color: var(--ink); border-left: 4px solid var(--m);
}
.ev-time { flex: none; min-width: 52px; font-size: var(--fs-sm); color: var(--ink-2); padding-top: 1px; }
.ev-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-title { font-weight: 450; }
.ev-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-2); }
.ev-sub .dot { width: 8px; height: 8px; }

/* time grid */
.tg { --gutter-w: 46px; display: flex; flex-direction: column; }
.tg-head, .tg-allday { display: grid; grid-template-columns: var(--gutter-w) repeat(var(--cols), minmax(0, 1fr)); gap: 0 4px; }
.tg-day {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 0 8px; border: 0; background: transparent; color: var(--ink-2);
  font-size: var(--fs-xs); border-radius: 12px;
}
.tg-num { font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
.tg-day[data-today] { color: var(--accent-ink); }
.tg-day[data-today] .tg-num { color: var(--on-accent); background: var(--accent); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; }
.tg-corner { font-size: 0.65rem; align-self: center; text-align: right; padding-right: 6px; }
.tg-allday { padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 30px; }
.tg-adcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg-scroll { height: min(62dvh, 640px); overflow-y: auto; overscroll-behavior: contain; position: relative; margin-top: 2px; }
.tg-grid {
  position: relative; display: grid; grid-template-columns: var(--gutter-w) repeat(var(--cols), minmax(0, 1fr)); gap: 0 4px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 52px; background-position: 0 0;
}
.tg-hours { position: relative; }
.tg-hours span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 0.66rem; color: var(--ink-3); white-space: nowrap; }
.tg-col { position: relative; border-left: 1px solid var(--line); cursor: copy; }
.tg-col[data-today] { background: color-mix(in srgb, var(--accent-wash) 45%, transparent); }
.tg-ev {
  position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden;
  padding: 4px 6px; border: 0; border-radius: 9px; text-align: left; cursor: pointer;
  background: var(--m-wash); color: var(--ink); border-left: 3px solid var(--m);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--m) 25%, transparent);
  font-size: 0.74rem; line-height: 1.25;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast);
}
.tg-ev:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); z-index: 2; }
.tg-ev-time { color: var(--ink-2); font-size: 0.66rem; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; }
.tg-ev-t {
  font-weight: 500; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.tg-ev-t .fa { font-size: 0.9em; color: var(--ink-2); }
.tg-ev-s .fa { font-size: 0.9em; }
.tg-ev-s { color: var(--ink-2); font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tg-ev-dots { display: flex; gap: 3px; margin-top: auto; }
.tg-ev-dots .dot { width: 6px; height: 6px; }
.now-line { position: absolute; left: -4px; right: 0; height: 2px; background: var(--accent); z-index: 3; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -2px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tg[data-cols="1"] .tg-ev { font-size: 0.85rem; padding: 6px 10px; }
.tg[data-cols="1"] .tg-ev-s { font-size: 0.75rem; }
.tg[data-cols="1"] .tg-ev-time { font-size: 0.75rem; }
/* phone 3-day: narrow columns, so smaller type, 2-line titles, no place line */
.tg[data-cols="3"] .tg-ev { padding: 3px 4px 3px 5px; font-size: 0.68rem; line-height: 1.2; gap: 0; }
.tg[data-cols="3"] .tg-ev-time { font-size: 0.6rem; }
.tg[data-cols="3"] .tg-ev-place { display: none; }
.tg[data-cols="3"] .tg-ev-t .fa { display: none; }
@media (max-width: 400px) {
  .tg[data-cols="3"] .tg-ev { font-size: 0.64rem; padding: 2px 3px 2px 4px; }
}

/* editor bits */
.row-plain { border-top: 0; padding: 0; min-height: 44px; }
.day-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); font-weight: 450; font-size: var(--fs-sm);
}
.day-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.repeat-summary { color: var(--accent-ink); }
.mini-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mini-list li { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 12px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-sm); }
.mini-list .btn-x { width: 30px; min-height: 30px; }
.check-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
@media (max-width: 480px) { .check-add { grid-template-columns: 1fr; } .check-add .select-sm { width: 100%; } }
.field-pair-emoji { grid-template-columns: 1fr 110px; }

/* scope choice */
.scope-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px 16px;
  border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); text-align: left;
}
.scope-opt:hover { border-color: var(--accent); background: var(--accent-wash); }

/* event details */
.detail-band { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--m-wash); border-left: 5px solid var(--m); }
.detail-kind { font-size: 1.6rem; line-height: 1; }
.detail-when { color: var(--ink-2); font-size: var(--fs-sm); }
.detail-time { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-size: var(--fs-xl); line-height: 1.2; }
.member-row { display: flex; flex-wrap: wrap; gap: 6px; }
.member-row .chip { padding-left: 3px; min-height: 32px; }
.member-row .avatar { width: 26px; height: 26px; font-size: 0.85rem; box-shadow: none; }
.leave-by { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: var(--r-pill); background: var(--gold-wash); font-weight: 450; }
.callout-soft { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }

/* quick-add confirm card */
.confirm-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--r-lg); background: var(--m-wash); border: 1.5px solid var(--m); }
.confirm-kind { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
.confirm-title { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-size: var(--fs-2xl); line-height: 1.1; }
.confirm-when { color: var(--ink-2); }
.confirm-time { font-size: var(--fs-lg); font-weight: 500; }
.confirm-card .member-row { margin-top: 6px; }
.help-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.help-kv dd { text-align: left; }

/* birthdays list */
.row-btn { width: 100%; border: 0; background: transparent; color: var(--ink); text-align: left; border-top: 1px solid var(--line); border-radius: 0; }
.row-btn:first-child { border-top: 0; }
.row-btn .row-main { display: flex; flex-direction: column; }
.bday-days { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.bday-days[data-soon] { color: var(--accent-ink); font-weight: 500; }

@media (max-width: 480px) {
  .hide-sm { display: none; }
  .cal-page .page-head { align-items: center; }
}