/* Hobby Horse Academy: Events (same app tokens). */
.hs-events { --ev-card: #121214; --ev-raise: #1c1c1e; --ev-ease: cubic-bezier(0.23, 1, 0.32, 1); --ev-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ev-green: #5fd29b; }

/* tabs + add */
.hs-events .ev-bar { display: flex; align-items: center; gap: 10px; }
.hs-events .ev-tabs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: var(--ev-card); }
.hs-events .ev-tab { min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--hha-muted); font: 600 14.5px / 1 var(--hha-font-body); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.hs-events .ev-tab.is-on { background: #fff; color: #000; }
.hs-events .ev-add { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: #d4148a; color: #fff !important; font: 700 14.5px / 1 var(--hha-font-body); cursor: pointer; white-space: nowrap; }
.hs-events .ev-add svg { width: 20px; height: 20px; }

/* cards */
.hs-events .ev-list { display: grid; gap: 10px; }
.hs-events .ev-card { border-radius: 20px; background: var(--ev-card); overflow: hidden; animation: ev-in 360ms var(--ev-ease) both; }
.hs-events .ev-card:nth-child(2) { animation-delay: 40ms; } .hs-events .ev-card:nth-child(3) { animation-delay: 80ms; } .hs-events .ev-card:nth-child(4) { animation-delay: 120ms; }
@keyframes ev-in { from { opacity: 0; transform: translateY(8px); } }
.hs-events .ev-open { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border: 0; background: transparent; color: var(--hha-ink); text-align: left; cursor: pointer; font: inherit; }
.hs-events .ev-date { display: grid; justify-items: center; align-content: center; height: 60px; border-radius: 14px; background: var(--ev-raise); line-height: 1; }
.hs-events .ev-mon { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hha-muted); }
.hs-events .ev-day { font-size: 24px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.hs-events .ev-text { display: grid; gap: 5px; min-width: 0; }
.hs-events .ev-title { font: 700 16.5px / 1.25 var(--hha-font-display); letter-spacing: -0.01em; text-wrap: balance; }
.hs-events .ev-flag { margin-right: 6px; }
.hs-events .ev-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--hha-muted); }
.hs-events .ev-place { display: inline-flex; align-items: center; gap: 4px; }
.hs-events .ev-place svg { width: 15px; height: 15px; }
.hs-events .ev-desc { font-size: 14px; line-height: 1.45; color: #c7c7cc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-events .ev-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 14px 84px; }
.hs-events .ev-by { flex-basis: 100%; font-size: 13px; color: var(--hha-muted); }
.hs-events .ev-pending .ev-card { box-shadow: inset 0 0 0 1.5px rgba(255, 207, 90, 0.45); }

/* buttons */
.hs-events .ev-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font: 700 14.5px / 1 var(--hha-font-body); cursor: pointer; text-decoration: none !important; transition: transform 160ms var(--ev-ease); }
.hs-events .ev-btn:active, .hs-events .ev-add:active, .hs-events .ev-submit:active { transform: scale(0.97); }
.hs-events .ev-btn--pink { background: #d4148a; color: #fff !important; }
.hs-events .ev-btn--ok { background: var(--ev-green); color: #04140c !important; }
.hs-events .ev-btn--ghost { background: var(--ev-raise); color: var(--hha-ink) !important; }

/* empty state */
.hs-events .ev-empty { display: grid; justify-items: center; gap: 10px; padding: 34px 22px; border-radius: 22px; background: var(--ev-card); text-align: center; }
.hs-events .ev-empty-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--ev-raise); color: #ff3d9a; }
.hs-events .ev-empty-ico svg { width: 32px; height: 32px; }
.hs-events p.ev-empty-title { margin: 4px 0 0; font: 700 20px / 1.2 var(--hha-font-display); color: var(--hha-ink) !important; }
.hs-events p.ev-empty-sub { margin: 0 0 8px; max-width: 32ch; font-size: 15px; line-height: 1.45; color: var(--hha-muted) !important; }

/* calendar */
.hs-events .ev-cal { padding: 14px; border-radius: 22px; background: var(--ev-card); }
.hs-events .ev-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hs-events p.ev-cal-title { margin: 0; font: 700 18px / 1 var(--hha-font-display); color: var(--hha-ink) !important; }
.hs-events .ev-cal-nav { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ev-raise); color: var(--hha-ink); cursor: pointer; }
.hs-events .ev-cal-nav svg { width: 18px; height: 18px; }
.hs-events .ev-cal-week, .hs-events .ev-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hs-events .ev-cal-week span { text-align: center; font-size: 12px; font-weight: 600; color: var(--hha-muted); padding: 4px 0 6px; }
.hs-events .ev-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--hha-ink); font: 600 15px / 1 var(--hha-font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.hs-events .ev-cell.is-empty { cursor: default; }
.hs-events .ev-cell.has-ev { background: var(--ev-raise); }
.hs-events .ev-cell i { position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: #ff3d9a; }
.hs-events .ev-cell.is-today span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #fff; }
.hs-events .ev-cell.is-picked { background: #fff; color: #000; }
.hs-events .ev-cell.is-picked i { background: #d4148a; }
.hs-events .ev-day-list { margin-top: 16px; display: grid; gap: 10px; }
.hs-events p.ev-day-h { margin: 0; font: 700 17px / 1.2 var(--hha-font-display); color: var(--hha-ink) !important; }
.hs-events p.ev-day-none { margin: 0; color: var(--hha-muted) !important; font-size: 14.5px; }
.hs-events .ev-mini-list { display: grid; gap: 8px; }
.hs-events .ev-mini { display: grid; gap: 4px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--ev-card); color: var(--hha-ink); text-align: left; font: inherit; cursor: pointer; }
.hs-events .ev-mini-title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.hs-events .ev-mini-meta { font-size: 13px; color: var(--hha-muted); }

/* sheets */
.hs-events .ev-sheet { position: fixed; inset: 0; z-index: 10001; }
.hs-events .ev-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); opacity: 0; transition: opacity 260ms ease; }
.hs-events .ev-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #161618;
  transform: translateY(100%); transition: transform 380ms var(--ev-drawer);
}
.hs-events .ev-sheet.is-open .ev-sheet-bg { opacity: 1; }
.hs-events .ev-sheet.is-open .ev-sheet-panel { transform: translateY(0); }
.hs-events .ev-grab { display: block; width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: #3a3a3e; }
.hs-events .ev-x { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ev-raise); color: var(--hha-ink); cursor: pointer; }
.hs-events .ev-x svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
  .hs-events .ev-sheet-panel { left: 50%; right: auto; bottom: 50%; width: min(560px, 92vw); border-radius: 26px; transform: translate(-50%, 54%) scale(0.98); opacity: 0; transition: transform 320ms var(--ev-ease), opacity 220ms ease; }
  .hs-events .ev-sheet.is-open .ev-sheet-panel { transform: translate(-50%, 50%); opacity: 1; }
  .hs-events .ev-grab { display: none; }
}

/* details */
.hs-events .ev-info { display: grid; gap: 10px; padding-top: 6px; }
.hs-events p.ev-info-date { margin: 0; font-size: 14px; font-weight: 700; color: #ff3d9a !important; }
.hs-events .ev-info-title { margin: 0; padding-right: 44px; font: 800 24px / 1.15 var(--hha-font-display) !important; letter-spacing: -0.02em; color: var(--hha-ink); }
.hs-events p.ev-info-place { margin: 0; font-size: 15px; color: var(--hha-ink) !important; }
.hs-events p.ev-info-desc { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: #c7c7cc !important; }
.hs-events p.ev-info-by { margin: 0; font-size: 13px; color: var(--hha-muted) !important; }
.hs-events .ev-info-actions { display: grid; gap: 8px; margin-top: 8px; }
.hs-events .ev-info-actions .ev-btn { min-height: 50px; font-size: 15.5px; }

/* add form */
.hs-events .ev-form { display: grid; gap: 14px; padding-top: 4px; }
.hs-events .ev-form-title { margin: 0; padding-right: 44px; font: 800 24px / 1.15 var(--hha-font-display) !important; color: var(--hha-ink); }
.hs-events p.ev-form-sub { margin: -6px 0 0; font-size: 14px; color: var(--hha-muted) !important; }
.hs-events .ev-field { display: grid; gap: 6px; }
.hs-events .ev-field > span { font-size: 14px; font-weight: 600; color: var(--hha-ink); }
.hs-events .ev-field small { font-weight: 400; color: var(--hha-muted); }
.hs-events .ev-field input, .hs-events .ev-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid #2c2c30 !important; border-radius: 14px !important;
  background: #0d0d0f !important; color: var(--hha-ink) !important; font: 16px / 1.4 var(--hha-font-body) !important; color-scheme: dark; box-shadow: none !important;
}
.hs-events .ev-field textarea { resize: vertical; min-height: 110px; }
.hs-events .ev-field input:focus, .hs-events .ev-field textarea:focus { outline: none; border-color: #ff3d9a !important; }
.hs-events .ev-field input::placeholder, .hs-events .ev-field textarea::placeholder { color: #8e8e93; }
.hs-events .ev-field .is-bad { border-color: #ff6b6b !important; }
.hs-events .ev-err { font-style: normal; font-size: 13px; color: #ff8a8a; min-height: 0; }
.hs-events .ev-err:empty { display: none; }
.hs-events .ev-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-events p.ev-form-msg { margin: 0; font-size: 14px; color: #ff8a8a !important; }
.hs-events p.ev-form-msg:empty { display: none; }
.hs-events .ev-submit { min-height: 54px; border: 0; border-radius: 999px; background: #d4148a; color: #fff; font: 700 17px / 1 var(--hha-font-body); cursor: pointer; transition: transform 160ms var(--ev-ease), opacity 200ms ease; }
.hs-events .ev-submit[disabled] { opacity: 0.6; }
.hs-events .ev-done { display: grid; justify-items: center; gap: 10px; padding: 24px 6px 6px; text-align: center; }
.hs-events .ev-done-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--ev-green); color: #04140c; animation: ev-pop 520ms var(--ev-ease) both; }
.hs-events .ev-done-ico svg { width: 32px; height: 32px; }
@keyframes ev-pop { from { transform: scale(0.6); opacity: 0; } }
.hs-events p.ev-done-title { margin: 6px 0 0; font: 800 22px / 1.2 var(--hha-font-display); color: var(--hha-ink) !important; }
.hs-events p.ev-done-sub { margin: 0 0 10px; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--hha-muted) !important; }

/* toast */
.hs-events .ev-toast {
  position: fixed; z-index: 10002; left: 50%; top: calc(70px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -20px); opacity: 0;
  padding: 12px 20px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform 320ms var(--ev-ease), opacity 240ms ease;
}
.hs-events .ev-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .hs-events .ev-open:hover, .hs-events .ev-mini:hover { background: #18181b; }
  .hs-events .ev-cell:not(.is-empty):not(.is-picked):hover { background: #26262a; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-events .ev-card, .hs-events .ev-done-ico { animation: none !important; }
  .hs-events .ev-sheet-panel, .hs-events .ev-toast { transition: opacity 200ms ease !important; }
}

/* small phones: the add button becomes a round + so the three tabs keep their room */
@media (max-width: 480px) {
  .hs-events .ev-add { width: 48px; padding: 0; justify-content: center; }
  .hs-events .ev-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hs-events .ev-add svg { width: 22px; height: 22px; }
  .hs-events .ev-tab { font-size: 14px; }
}

/* "Add an event" on phones: a floating card that fits the screen, with a little room on every side */
@media (max-width: 767px) {
  .hs-events .ev-sheet-panel {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100svh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 10px 18px 20px; border-radius: 24px; transform: translateY(calc(100% + 24px));
  }
}

/* the add-event form on phones: nothing overflows, date fields stack when narrow */
.hs-events .ev-form, .hs-events .ev-field, .hs-events .ev-two { min-width: 0; max-width: 100%; }
.hs-events .ev-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hs-events .ev-field input, .hs-events .ev-field textarea, .hs-events .ev-field select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.hs-events .ev-field input[type="date"] { min-height: 48px; display: block; color-scheme: dark; }
@media (max-width: 420px) { .hs-events .ev-two { grid-template-columns: minmax(0, 1fr); } }
.hs-events .ev-sheet-panel, .hs-events .ev-form > * { box-sizing: border-box; }