/* emf-schedule/style.css
   Tool-specific styles. Tokens and shared components come from the injected
   base.css; the app frame (.app, .app__bar) from app.css. Everything below
   the app bar is this tool's own layout: a scrolling screen, a bottom tab
   bar (all widths — this tool is app-shaped on desktop too), and sheets. */

/* ---- frame -------------------------------------------------------------
   The whole app scrolls as one surface, so the top bar (back link, status
   pill) scrolls away and only the filter chips stay pinned. The bottom tab
   bar is fixed to the viewport instead. */

.app {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Kill double-tap zoom on the whole surface; pinch is blocked by the
     viewport meta in installed apps */
  touch-action: manipulation;
}

/* While an overlay is open, the page behind it holds still */
.app--locked {
  overflow: hidden;
}

/* Natural height content inside the scrolling app frame; bottom padding
   keeps the last cards clear of the fixed tab bar. The min-height keeps
   the page always just-overflowing, so a classic scrollbar is permanently
   present (no appear/disappear layout shift) while overlay scrollbars
   waste no width — better than reserving a scrollbar-gutter. */
.emf-body {
  flex: none;
  min-height: calc(100dvh + 1px);
  padding-bottom: calc(3.2rem + env(safe-area-inset-bottom, 0px));
}

.emf-screen {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Sticky header rows: the day strip and the filter chips keep their fixed
   heights so the layers stack predictably (all rem, so they scale together) */
:root {
  --emf-days-h: 3.2rem;
  --emf-chips-h: 2.5rem;
}

.emf-view {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* Desktop: the list column widens enough for every filter chip to fit on
   one line; timeline mode takes the full width for more lanes */
@media (min-width: 861px) {
  .emf-view {
    max-width: 53rem;
  }

  .emf-view--wide {
    max-width: none;
    padding: 0 1.5rem 2rem;
  }
}

/* The injected nav's back link must not wrap in the slim bar; below 480px
   the tab bar names the app, so the bar title yields the space */
[data-tools-nav] {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .app__title {
    display: none;
  }
}

/* Installed as an app: no browser to go back to, so drop the site nav and
   let the title hold the bar at any width */
.app--standalone [data-tools-nav] {
  display: none;
}

.app--standalone .app__title {
  display: block;
}

/* ---- status pill (in the static app bar) -------------------------------- */

.emf-status {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey-mid);
  background: var(--white);
  border: 2px solid var(--grey-light);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
}


.emf-status:active {
  background: var(--grey-bg);
}

.emf-status:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.emf-status[data-tone="warn"] {
  color: var(--black);
  border-color: var(--black);
}

.emf-status[data-tone="busy"] {
  color: var(--grey-mid);
  border-style: dashed;
}

/* ---- bottom tab bar ------------------------------------------------------ */

.emf-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0;
  background: var(--white);
  border-top: 1px solid var(--grey-light);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  z-index: 10;
}

.emf-tabbar__btn {
  flex: 1;
  max-width: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.8rem 0.25rem;
  border: none;
  border-top: 3px solid transparent;
  background: transparent;
  color: var(--grey-mid);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.emf-tabbar__icon {
  display: block;
}

/* Screen-reader-only label for the icon tab */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Five tabs need a slightly smaller label on narrow phones */
@media (max-width: 420px) {
  .emf-tabbar__btn {
    font-size: 0.8rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }
}


.emf-tabbar__btn:active {
  background: var(--grey-bg);
}

.emf-tabbar__btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.emf-tabbar__btn--on {
  color: var(--black);
  border-top-color: var(--accent);
  background: var(--grey-bg);
}

/* ---- day strip ------------------------------------------------------------ */

/* The day strip scrolls away (day switching happens at the top of a list);
   only the chips row stays pinned */
.emf-days {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: var(--emf-days-h);
  background: var(--white);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.emf-days::-webkit-scrollbar {
  display: none;
}

/* The strips overflow by design when narrow — fade the trailing edge so a
   half-clipped pill reads as "more this way", not breakage. When content
   fits, nothing sits in the fade zone and the mask is invisible. */
.emf-days,
.emf-chips {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 1rem), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 1rem), transparent);
}

/* Same height as the filter chips below, so the rows read as one system */
.emf-days__tab {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.8rem;
  border: 2px solid var(--grey-light);
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  white-space: nowrap;
}


.emf-days__tab:active {
  background: var(--grey-bg);
}

.emf-days__tab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.emf-days__tab--on {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* A quiet accent dot marks today's tab */
.emf-days__tab--today::after {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.05rem;
}

/* The pinned row: fixed controls (timeline's venue chips) in fixed slots,
   the filter chips scrolling beside them — fixed controls must never sit
   inside a scrolling strip or narrow phones hide them off the right edge */
.emf-chips-row {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: var(--emf-chips-h);
  background: var(--white);
}

.emf-chips-row .emf-chips {
  position: static;
  flex: 1;
  min-width: 0;
}





/* ---- filter chips ----------------------------------------------------------- */

.emf-chips {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: var(--emf-chips-h);
  background: var(--white);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}


.emf-chips::-webkit-scrollbar {
  display: none;
}

.emf-chip {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--grey-light);
  border-radius: 999px;
  background: var(--white);
  color: var(--grey-mid);
  cursor: pointer;
  white-space: nowrap;
}


.emf-chip:active {
  background: var(--grey-bg);
}

.emf-chip:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.emf-chip--on {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}


/* The Going chip is the strongest signal — it earns the accent when on */
.emf-chip--fave.emf-chip--on {
  background: var(--accent);
  border-color: var(--accent);
}

.emf-chip--clear {
  border-style: dashed;
}

/* Narrow phones: the fave chips shrink to their star glyphs (the labels
   live on in aria) */
@media (max-width: 480px) {
  .emf-chip--fave .emf-chip__label {
    display: none;
  }

  .emf-chip--fave .emf-chip__glyph {
    font-size: 1rem;
  }

  .emf-chip--fave {
    padding: 0.25rem 0.55rem;
  }
}

/* "n finished events hidden — show" at the top of today's list */
.emf-hiddenline {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grey-mid);
  background: none;
  border: none;
  border-bottom: 1px dashed var(--grey-light);
  padding: 0.5rem 0;
  text-align: center;
  cursor: pointer;
}

.emf-hiddenline:active {
  background: var(--grey-bg);
}

.emf-hiddenline:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* ---- time groups + list ---------------------------------------------------- */

.emf-list {
  padding-top: 0.35rem;
  padding-bottom: 1rem;
}

.emf-group__time {
  position: sticky;
  top: var(--emf-chips-h); /* sits under the pinned filter chips */
  z-index: 5;
  margin: 0;
  padding: 0.35rem 0;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--grey-mid);
  background: var(--white);
  border-bottom: 1px solid var(--grey-light);
}

.emf-group__list {
  margin-bottom: 0.4rem;
}

/* ---- session card ------------------------------------------------------------ */

.emf-card {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  border-bottom: 1px solid var(--grey-light);
}

.emf-card--past {
  opacity: 0.55;
}

.emf-card--on {
  box-shadow: inset 3px 0 0 var(--accent);
}

.emf-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.7rem;
  padding: 0.6rem 0.25rem 0.6rem 0.5rem;
  font: inherit;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}


.emf-card__main:active {
  background: var(--grey-light);
}

.emf-card__main:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.emf-card__times {
  flex: none;
  width: 3rem;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.emf-card__start {
  font-weight: 700;
  font-size: 0.95rem;
}

.emf-card__end {
  font-size: 0.8rem;
  color: var(--grey-mid);
}

/* Now view: compact countdown under the times ("8m left", "in 1h05") */
.emf-card__countdown {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--grey-mid);
  white-space: nowrap;
}

.emf-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.emf-card__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
}

/* Going items carry a soft accent wash so commitments stand out in a scan */
.emf-card--going {
  background: color-mix(in srgb, var(--accent) 6%, var(--white));
}

.emf-card--going .emf-card__title {
  font-weight: 700;
}

.emf-card__meta {
  font-size: 0.8rem;
  color: var(--grey-mid);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

.emf-card__names {
  font-size: 0.8rem;
  color: var(--grey-mid);
}

.emf-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

/* Recording marks on cards and blocks: black at partial opacity, so they
   darken whatever they sit on (white cards and the pink going wash
   alike); the not-recorded exception runs at full strength */
.emf-rec {
  display: inline-flex;
  align-items: center;
  margin-left: 0.2rem;
  color: var(--black);
  opacity: 0.45;
}

.emf-rec--none {
  opacity: 1;
}

/* The recording is out — the camera turns accent at full strength */
.emf-rec--published {
  color: var(--accent);
  opacity: 1;
}

.emf-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--grey-mid);
  border: 1px solid var(--grey-light);
  border-radius: 3px;
  padding: 0 0.3rem;
  white-space: nowrap;
}

.emf-badge--video {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--white));
}

/* The near-me chip's navigation arrow sits on the text baseline */
.emf-chip__nearicon {
  vertical-align: -0.1em;
}

/* Near me is a mode, not a filter — it wears the accent to say so */
.emf-chip--near {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--white));
}

.emf-chip--near.emf-chip--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.emf-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey-mid);
  background: var(--grey-bg);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

.emf-tag--on {
  color: var(--accent);
  background: var(--white);
  padding-left: 0;
}

.emf-tag--clash::before {
  content: "⚠ ";
}

.emf-tag--clash {
  color: var(--black);
}

.emf-tag--seen {
  background: var(--white);
  padding-left: 0;
}

/* Long-running drop-ins render compact — one-line title, no speakers,
   tighter padding — so all-day items stop dominating the list */
.emf-card--compact .emf-card__main {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  align-items: center;
}

.emf-card--compact .emf-card__title {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emf-card--compact .emf-card__names {
  display: none;
}

.emf-card--compact .emf-card__meta {
  font-size: 0.72rem;
}

.emf-card--compact .emf-card__start {
  font-size: 0.8rem;
  font-weight: 600;
}

.emf-card--compact .emf-card__end {
  font-size: 0.72rem;
}

.emf-card--compact .emf-card__countdown {
  display: none;
}

.emf-card--compact .emf-star {
  min-height: 2.2rem;
}

/* ---- timeline layout ---------------------------------------------------------------
   Blocks sized by duration in side-by-side lanes; the whole board scrolls
   horizontally inside this container (never the page). */

/* The "By venue" control sits in the pinned row's fixed slot */
.emf-chip--fixed {
  flex: none;
}

/* Venue swimlane headers: pinned below the chips row, scroll-synced
   horizontally with the board (sticky can't cross an overflow-x container) */
.emf-timeline-heads {
  position: sticky;
  top: var(--emf-chips-h);
  z-index: 5;
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid var(--grey-light);
}

.emf-timeline-heads__inner {
  display: flex;
}

.emf-timeline-heads__cell {
  flex: none;
  width: 9.5rem;
  padding: 0.3rem 0.4rem 0.3rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--grey-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* All-day drop-ins collapse to one line; the list opens as a sheet */
.emf-timeline__allday {
  margin: 0.5rem 0;
  font-size: 0.85rem;
}

.emf-listsheet__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.1rem;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--grey-light);
  color: inherit;
  cursor: pointer;
}

.emf-listsheet__row:active {
  background: var(--grey-bg);
}

.emf-listsheet__row:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.emf-listsheet__title--interested {
  font-weight: 700;
}

.emf-listsheet__title--going {
  font-weight: 700;
  color: var(--accent);
}

.emf-listsheet__meta {
  flex: none;
  max-width: 9rem;
  font-size: 0.75rem;
  color: var(--grey-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Venue picker rows */
.emf-venuepick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--grey-light);
  cursor: pointer;
}

/* Timeline mode: the view drops its side padding entirely (the board is a
   full-width surface); the control rows carry their own indent, and the
   pinned rows' backgrounds span the whole screen — nothing can peek
   through beside them while scrolling */
.emf-screen .emf-view--board {
  padding-left: 0;
  padding-right: 0;
}

.emf-view--board .emf-days,
.emf-view--board .emf-chips-row,
.emf-view--board .emf-timeline__allday,
.emf-view--board .emf-empty {
  padding-left: 1rem;
  padding-right: 1rem;
}

.emf-timeline {
  overflow-x: auto;
  /* Never scroll vertically inside the board — the page grows instead */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.4rem;
}

/* Zero-width sticky rails holding the edge markers; their children
   overflow visibly without shifting the lanes */
.emf-timeline__edgecol {
  position: relative;
  flex: none;
  width: 0;
  z-index: 3;
}

.emf-timeline__edgecol--left {
  position: sticky;
  left: 2.2rem; /* hugs the hours column */
}

.emf-timeline__edgecol--right {
  position: sticky;
  right: 0;
}

/* A subtle accent tick in line with off-screen events' times */
.emf-timeline__edgemark {
  position: absolute;
  width: 0.22rem;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.35;
  cursor: pointer;
}

.emf-timeline__edgecol--left .emf-timeline__edgemark {
  left: 0;
}

.emf-timeline__edgecol--right .emf-timeline__edgemark {
  left: -0.22rem;
}

.emf-timeline__edgemark:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 1px;
  opacity: 1;
}

/* The board always paints the full visible width — with one lane the grey
   canvas still runs edge to edge (lanes grow; blocks keep their lane) */
.emf-timeline__inner {
  position: relative;
  display: flex;
  min-width: 100%;
}

.emf-timeline__hours {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: none;
  width: 2.2rem;
  background: var(--white);
}

.emf-timeline__hour {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.62rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--grey-mid);
  padding-left: 0.4rem;
}

/* The lanes sit on a light grey canvas so the white blocks read clearly */
.emf-timeline__lanes {
  position: relative;
  flex: 1 0 auto;
  background: var(--grey-bg);
}

.emf-timeline__gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--grey-light);
}

/* The now marker spans the hours column too, its time pinned at the left */
.emf-timeline__now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  border-top: 2px solid var(--accent);
  pointer-events: none;
}

.emf-timeline__now-label {
  position: sticky;
  left: 0;
  display: inline-block;
  transform: translateY(-55%);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--white);
  padding: 0 0.25rem 0 0;
}

.emf-timeline__block {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  overflow: hidden;
}

/* Children keep their natural height — when a block is too small for all
   three lines, the venue clips off the end rather than flex-shrink
   cropping the title mid-line */
.emf-timeline__block > * {
  flex-shrink: 0;
}

.emf-timeline__block {
  text-align: left;
  font: inherit;
  padding: 0.25rem 0.4rem;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-left: 2px solid var(--grey-light);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
}

.emf-timeline__block:active {
  background: var(--grey-bg);
}

.emf-timeline__block:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  z-index: 4;
}

.emf-timeline__block--interested {
  border-color: var(--grey-mid);
  border-left: 4px solid var(--black);
}

.emf-timeline__block--interested .emf-timeline__block-title {
  font-weight: 700;
}

.emf-timeline__block--going {
  background: color-mix(in srgb, var(--accent) 14%, var(--white));
  border-color: var(--accent);
  border-left: 4px solid var(--accent);
}

.emf-timeline__block--going .emf-timeline__block-title {
  font-weight: 700;
}

/* On now: the whole outline warms up (the canvas behind is grey) */
.emf-timeline__block--on {
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.emf-timeline__block--past {
  opacity: 0.55;
}

.emf-timeline__block-time {
  font-size: 0.65rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--grey-mid);
  white-space: nowrap;
}

.emf-timeline__block-title {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.emf-timeline__block-venue {
  font-size: 0.65rem;
  color: var(--grey-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Short sessions: title only, centred — the y position already tells the
   time, and the sheet has the rest */
.emf-timeline__block--short {
  padding: 0.1rem 0.4rem;
  justify-content: center;
}

.emf-timeline__block--short .emf-timeline__block-title {
  -webkit-line-clamp: 1;
}

/* Snug tier (~30–35 min): everything a notch smaller, so time, title and
   venue all fit inside the block */
.emf-timeline__block--snug {
  padding: 0.15rem 0.35rem;
  gap: 0;
}

.emf-timeline__block--snug .emf-timeline__block-time {
  font-size: 0.58rem;
}

.emf-timeline__block--snug .emf-timeline__block-title {
  font-size: 0.7rem;
  line-height: 1.15;
}

.emf-timeline__block--snug .emf-timeline__block-venue {
  font-size: 0.58rem;
}

/* The forgiving exit: an item unstarred out of a fave-filtered view dims
   and lingers (the star still works to undo), then collapses away just
   before the app removes it */
.emf-card--leaving {
  overflow: hidden;
  animation: emf-card-leave 5s ease forwards;
}

@keyframes emf-card-leave {
  0% { opacity: 1; max-height: 14rem; }
  10% { opacity: 0.4; }
  88% { opacity: 0.4; max-height: 14rem; }
  100% { opacity: 0; max-height: 0; }
}

.emf-timeline__block--leaving {
  animation: emf-block-leave 5s ease forwards;
}

@keyframes emf-block-leave {
  0% { opacity: 1; }
  10% { opacity: 0.35; }
  88% { opacity: 0.35; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .emf-card--leaving,
  .emf-timeline__block--leaving {
    animation: none;
    opacity: 0.4;
  }
}

/* ---- favourite star -------------------------------------------------------------- */

.emf-star {
  flex: none;
  width: 3.2rem;
  min-height: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--grey-mid);
}

.emf-star__glyph {
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.12s ease-out;
}

.emf-star:active .emf-star__glyph {
  transform: scale(1.35);
}

/* Fixed height whether or not a label shows, so the glyph never jumps */
.emf-star__level {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.emf-star--interested {
  color: var(--black);
}

.emf-star--going {
  color: var(--accent);
}


.emf-star:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* Floating jump pill: back to the now line (or to today) from anywhere in
   the schedule. Sits just above the fixed tab bar. */
.emf-jumpnow {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
  white-space: nowrap;
}


.emf-jumpnow:active {
  transform: translateX(-50%) scale(0.96);
}

.emf-jumpnow:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

/* ---- now line ------------------------------------------------------------------ */

.emf-nowline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0;
}

.emf-nowline::before,
.emf-nowline::after {
  content: "";
  flex: 1;
  border-top: 2px solid var(--accent);
}

.emf-nowline__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* ---- search --------------------------------------------------------------------------- */

.emf-search {
  margin-top: 0.9rem;
}

.emf-search__hint {
  font-size: 0.85rem;
  color: var(--grey-mid);
  margin: 0.4rem 0 0.6rem;
}

/* ---- first-run setup card ----------------------------------------------------------- */

.emf-welcome {
  position: relative;
  background: var(--grey-bg);
  border-radius: 3px;
  padding: 1rem 2.4rem 1rem 1rem;
  margin: 0.9rem 0 0.3rem;
}

.emf-welcome__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}

.emf-welcome__body {
  font-size: 0.875rem;
  color: var(--grey-mid);
  margin: 0 0 0.8rem;
}

.emf-welcome__dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.85rem;
  color: var(--grey-mid);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.emf-welcome__step {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 1rem 0 0.3rem;
}

.emf-welcome__soft {
  font-weight: 400;
  color: var(--grey-mid);
}

.emf-welcome__ok {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.4rem 0;
}

.emf-welcome__back {
  font-size: 0.8rem;
  color: var(--grey-mid);
}

.emf-welcome__dismiss:active {
  background: var(--grey-light);
}

.emf-welcome__dismiss:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---- day headings (all-days list + search results) ---------------------------- */

.emf-dayheading {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--grey-mid);
  margin: 0.9rem 0 0.15rem;
}

/* Near me — the distance line on cards, and the mode's own furniture */
.emf-distance {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grey-mid);
}

/* Arrow rotation is pure CSS: per-card bearing minus the live compass
   heading (--emf-heading on :root, written outside the render loop) */
.emf-distance__arrow {
  color: var(--accent);
  transform: rotate(calc((var(--bearing, 0) - var(--emf-heading, 0)) * 1deg));
}

.emf-distance__cardinal {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 1.2em;
  text-align: center;
}

.emf-nearintro {
  background: var(--grey-bg);
  border-radius: 3px;
  padding: 1rem;
  margin: 0.9rem 0 0.3rem;
}

.emf-nearintro__title {
  font-size: 1rem;
  margin: 0 0 0.3rem;
}

.emf-nearintro__note {
  font-size: 0.9rem;
  color: var(--grey-mid);
  margin: 0 0 0.8rem;
}

.emf-nearintro__error {
  font-size: 0.85rem;
  color: var(--black);
  margin: 0.8rem 0 0;
}

.emf-nearcompass {
  margin-top: 0.9rem;
}

.emf-nearfoot {
  font-size: 0.8rem;
  color: var(--grey-mid);
  margin: 1.2rem 0 0.4rem;
}







.emf-empty {
  font-size: 0.9rem;
  color: var(--grey-mid);
  background: var(--grey-bg);
  border-radius: 3px;
  padding: 1.2rem 1rem;
  margin: 0.4rem 0;
}

/* Anchors share the house link look with the button-links below */
.emf-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.emf-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Watch-the-recording link — the sheet's one truly rewarding outbound link */
.emf-link--video {
  color: var(--accent);
  font-weight: 600;
}

.emf-linkbtn {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}


.emf-linkbtn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---- settings ------------------------------------------------------------------------ */

.emf-settings__section {
  margin: 1.4rem 0 2rem;
}

.emf-settings__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.emf-settings__hint {
  font-size: 0.875rem;
  color: var(--grey-mid);
  margin: 0.2rem 0 0.8rem;
}

.emf-settings__meta {
  font-size: 0.8rem;
  color: var(--grey-mid);
  margin: 0.5rem 0 0;
}

.emf-settings__error {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0.5rem 0 0;
}

/* The sync code: monospace, one tap selects the whole thing */
.emf-settings__code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--black);
  background: var(--grey-bg);
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  user-select: all;
  -webkit-user-select: all;
  overflow-wrap: anywhere;
}

/* Share modal — a big scannable QR, phone-to-phone optimised */
.emf-share-icon {
  vertical-align: -0.12em;
  margin-right: 0.3rem;
}

.emf-share {
  text-align: center;
}

.emf-share__qr {
  display: block;
  /* Big enough to scan, never so big the sheet has to scroll — the
     viewport-height cap is what saves short desktop windows */
  width: min(70vw, 42vh, 19rem);
  height: auto;
  margin: 0.8rem auto 0.5rem;
  border: 1px solid var(--grey-light);
  border-radius: 3px;
  image-rendering: pixelated;
}

.emf-share__url {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--grey-mid);
  margin: 0.3rem 0 0.9rem;
  overflow-wrap: anywhere;
}

.emf-share__controls {
  justify-content: center;
}

/* Reminders modal preference groups */
.emf-notify__label {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0.9rem 0 0.35rem;
}

.emf-notify__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

/* ---- boot state ------------------------------------------------------------------------ */

.emf-boot {
  padding: 3rem 1.5rem;
  text-align: center;
}

.emf-boot__note {
  color: var(--grey-mid);
}

.emf-boot__error {
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ---- detail sheet ------------------------------------------------------------------------ */

.emf-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.emf-sheet {
  position: relative;
  width: 100%;
  max-width: 40rem;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 12px 12px 0 0;
  animation: emf-sheet-in 0.22s ease-out;
}

@keyframes emf-sheet-in {
  from { transform: translateY(2rem); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .emf-sheet {
    animation: none;
  }
}

.emf-sheet__grab {
  flex: none;
  width: 2.4rem;
  height: 4px;
  border-radius: 999px;
  background: var(--grey-light);
  margin: 0.5rem auto 0;
}

.emf-sheet__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.6rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
}

.emf-sheet__head {
  padding-right: 2.2rem; /* clear of the close button */
}

.emf-sheet__badges {
  display: flex;
  gap: 0.4rem;
  margin: 0.3rem 0 0.2rem;
}

.emf-sheet__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.2rem 0;
}

.emf-sheet__names {
  font-size: 0.9rem;
  color: var(--grey-mid);
  margin: 0.1rem 0 0;
}

.emf-sheet__pronouns {
  font-size: 0.8rem;
}

.emf-sheet__facts {
  margin: 0.9rem 0;
}

.emf-sheet__fact {
  display: flex;
  gap: 0.6rem;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

.emf-sheet__fact dt {
  flex: none;
  width: 3.2rem;
  font-weight: 600;
  color: var(--grey-mid);
}

.emf-sheet__fact dd {
  margin: 0;
  min-width: 0;
}

.emf-sheet__fact--clash dd {
  font-weight: 600;
}

/* Collapsible clash list in the sheet — each entry opens that event */
.emf-clashes summary {
  cursor: pointer;
  font-weight: 600;
}

.emf-clashes summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.emf-clashes__item {
  display: block;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  color: inherit;
  background: none;
  border: none;
  padding: 0.35rem 0 0 1.1rem;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.emf-clashes__item:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.emf-sheet__soft {
  color: var(--grey-mid);
  font-weight: 400;
}

/* The title row: heading on the left, the state cluster (big cycling
   star + Went checkbox) tucked to the right */
.emf-sheet__headrow {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.emf-sheet__headmain {
  flex: 1;
  min-width: 0;
}

.emf-sheet__state {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.emf-sheet__state .emf-star {
  width: 2.9rem;
  min-height: 2.4rem;
}

.emf-sheet__state .emf-star__glyph {
  font-size: 1.7rem;
}

.emf-check {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.emf-check__box {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.emf-check__box:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.emf-sheet__description {
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 1rem 0;
}

.emf-sheet__links {
  margin: 1rem 0 0.4rem;
  font-size: 0.9rem;
}

.emf-sheet__close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.9rem;
  border: 2px solid var(--grey-light);
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
}


.emf-sheet__close:active {
  background: var(--grey-bg);
}

.emf-sheet__close:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* On wide screens the sheet becomes a centred dialog */
@media (min-width: 861px) {
  .emf-scrim {
    align-items: center;
    padding: 2rem;
  }

  .emf-sheet {
    border-radius: 12px;
    max-height: 80vh;
  }

  .emf-sheet__grab {
    display: none;
  }
}

/* Hover styles only where a real pointer exists - on touch screens a
   tapped control would otherwise stay stuck in its hover look */
@media (hover: hover) {
  .emf-status:hover {
    border-color: var(--grey-mid);
    color: var(--black);
  }

  .emf-tabbar__btn:hover {
    color: var(--black);
  }

  .emf-days__tab:hover {
    border-color: var(--grey-mid);
  }

  .emf-chip:hover {
    border-color: var(--grey-mid);
    color: var(--black);
  }

  .emf-chip--on:hover {
    color: var(--white);
    border-color: var(--black);
  }

  .emf-chip--near:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  .emf-chip--near.emf-chip--on:hover {
    color: var(--white);
    border-color: var(--accent);
  }

  .emf-card__main:hover {
    background: var(--grey-bg);
  }

  .emf-star:hover .emf-star__glyph {
    transform: scale(1.15);
  }

  .emf-jumpnow:hover {
    filter: brightness(0.92);
  }

  .emf-linkbtn:hover {
    color: var(--accent);
  }

  .emf-link:hover {
    color: var(--accent);
  }


  .emf-sheet__close:hover {
    border-color: var(--black);
  }

  .emf-welcome__dismiss:hover {
    color: var(--black);
    background: var(--grey-light);
  }
}