/* ============================================================================================
   📅 CALENDAR PANEL (#cal-sheet) — the cream sheet Zin fills by voice when the user says
   "add this to my calendar".

   SELF-CONTAINED ON PURPOSE. The events feed styles its filter sheet with .fsheet (src/styles.css)
   and the homes feed with .rf-sheet (src/styles-re.css); depending on either would make this panel
   look right on one page and broken on the other. Everything it needs — the cream palette, the
   slide-up sheet, the live-typed fields, the confirm strip, the green check — is declared here and
   SCOPED to #cal-sheet, so the page it lands on only has to add one <link> and the markup.
   Palette matches both existing sheets exactly, so it reads as the same object.
   ============================================================================================ */
#cal-sheet, #cal-backdrop {
  --cream: #FAF5DE; --cream-hi: #FFFDF2; --cink: #2C2820; --cmuted: #968B6E;
  --cline: #EAE1C0; --teal: #0E7E8C; --teal-dk: #0B6675; --teal-soft: #E2F0F1;
  --cease: cubic-bezier(.22, 1, .36, 1);
}

.cal-backdrop { position: absolute; inset: 0; z-index: 40; background: rgba(8, 8, 10, .55); opacity: 0; transition: opacity .38s var(--cease); }
.cal-backdrop.is-open { opacity: 1; }
.cal-backdrop[hidden] { display: none; }

.cal-sheet {
  position: absolute; left: 50%; bottom: 0; z-index: 41; overflow: hidden;
  transform: translateX(-50%) translateY(100%);
  width: 95%; height: 95%; background: var(--cream); color: var(--cink);
  border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  transition: transform .42s var(--cease);
  box-shadow: 0 -8px 40px -12px rgba(0, 0, 0, .45);
}
.cal-sheet.is-open { transform: translateX(-50%) translateY(0); }
/* Load-bearing: the base rule sets display:flex, which would otherwise beat the [hidden] attribute. */
.cal-sheet[hidden] { display: none; }

.cal-grab { display: flex; justify-content: center; padding: 9px 0 3px; flex: 0 0 auto; }
.cal-grab span { width: 42px; height: 4px; border-radius: 3px; background: var(--cline); }

.cal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 20px 10px; flex: 0 0 auto; }
.cal-title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--cink); }
.cal-sub { display: block; font-size: 12.5px; color: var(--cmuted); margin-top: 2px; }
.cal-x { background: none; border: 0; padding: 4px; color: var(--cmuted); cursor: pointer; line-height: 0; }
.cal-x:hover { color: var(--cink); }
.cal-x svg { width: 22px; height: 22px; }

.cal-body { flex: 1 1 auto; overflow-y: auto; padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.cal-note {
  font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #7a5a12;
  background: #FBEFC4; border: 1px solid #E6D496; border-radius: 11px; padding: 10px 12px;
}
.cal-note b { font-weight: 800; }

/* one live-typed field */
.cal-field {
  background: var(--cream-hi); border: 1.5px solid var(--cline); border-radius: 14px;
  padding: 11px 13px 12px; transition: border-color .25s var(--cease), box-shadow .25s var(--cease);
}
.cal-field--details { flex: 1 1 auto; display: flex; flex-direction: column; }
.cal-field.is-active { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft), 0 6px 18px -10px rgba(14, 126, 140, .5); }
.cal-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cmuted); margin-bottom: 5px; }
.cal-field.is-active .cal-label { color: var(--teal-dk); }
.cal-value {
  font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--cink);
  min-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.cal-value--details { min-height: 84px; flex: 1 1 auto; overflow-y: auto; }
.cal-value.is-empty::before { content: attr(data-placeholder); color: #b8ac86; font-style: italic; }
/* the map line is a fact about the invite, not a field the user dictates */
.cal-map { font-size: 12.5px; color: var(--teal-dk); font-weight: 600; word-break: break-all; }
.cal-map[hidden] { display: none; }

.cal-caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: text-bottom; margin-left: 1px;
  background: var(--teal); border-radius: 1px; animation: cal-blink 1.05s steps(2, start) infinite;
}
@keyframes cal-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.cal-listening { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-dk); font-weight: 600; font-size: 12.5px; margin-top: 2px; }
.cal-listening[hidden] { display: none; }
.cal-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cal-eq i { width: 3px; height: 4px; background: var(--teal); border-radius: 2px; animation: cal-eq 900ms ease-in-out infinite; }
.cal-eq i:nth-child(2) { animation-delay: 150ms; }
.cal-eq i:nth-child(3) { animation-delay: 300ms; }
@keyframes cal-eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }

/* confirm strip — nothing is added to, changed in, or removed from a calendar without a spoken YES */
.cal-confirm {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; background: #FBEFC4; border-top: 1px solid #E6D496; animation: cal-slideup .28s var(--cease);
}
.cal-confirm[hidden] { display: none; }
@keyframes cal-slideup { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cal-confirm-q { font-size: 15px; font-weight: 700; color: #6b4e0e; }
.cal-confirm-btns { display: flex; gap: 8px; }
.cal-cbtn { font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 11px; padding: 9px 18px; cursor: pointer; border: 1.5px solid transparent; }
.cal-cbtn--no { background: transparent; color: var(--cmuted); border-color: var(--cline); }
.cal-cbtn--no:hover { color: var(--cink); border-color: var(--cmuted); }
.cal-cbtn--yes { background: var(--teal); color: var(--cream-hi); }
.cal-cbtn--yes:hover { background: var(--teal-dk); }

.cal-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cline); }
.cal-cancel { background: none; border: 0; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--cmuted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cal-cancel:hover { color: var(--cink); }
.cal-save {
  font-family: inherit; font-size: 15px; font-weight: 800; color: var(--cream-hi); background: var(--teal);
  border: 0; border-radius: 13px; padding: 12px 22px; cursor: pointer; transition: background .2s var(--cease);
}
.cal-save:hover { background: var(--teal-dk); }
.cal-save:disabled { background: #c9bf99; cursor: default; }
.cal-save.is-armed { animation: cal-pulse 1.1s ease-in-out infinite; }
@keyframes cal-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 126, 140, .45); } 50% { box-shadow: 0 0 0 7px rgba(14, 126, 140, 0); } }

/* success overlay — animated green check, then auto-close */
.cal-success {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center;
  background: var(--cream); animation: cal-fadein .3s var(--cease);
}
.cal-success[hidden] { display: none; }
@keyframes cal-fadein { from { opacity: 0; } to { opacity: 1; } }
.cal-check svg { width: 92px; height: 92px; }
.cal-check-ring { fill: none; stroke: #1a9e5f; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: cal-draw .5s var(--cease) forwards; }
.cal-check-tick { fill: none; stroke: #1a9e5f; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cal-draw .35s .45s var(--cease) forwards; }
@keyframes cal-draw { to { stroke-dashoffset: 0; } }
.cal-success-msg { font-size: 18px; font-weight: 700; color: var(--cink); margin: 0; opacity: 0; animation: cal-fadein .3s .55s var(--cease) forwards; }
.cal-success-sub { font-size: 13.5px; color: var(--cmuted); margin: 0; opacity: 0; animation: cal-fadein .3s .7s var(--cease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .cal-sheet, .cal-backdrop { transition: none; }
  .cal-caret, .cal-eq i, .cal-save.is-armed { animation: none; }
}