/* ==========================================================================
   EOIR Calendar Sync — page styles
   ==========================================================================
   Loaded AFTER style.css, so it leans on the site's tokens (--accent-color,
   --title-color, --text-color, --alpha-* type scale) and only adds what this
   page needs. Everything is prefixed .ec-* so nothing here can leak into the
   marketing site or the blog. The FAQ block and the header pill are the two
   exceptions: those reuse site-wide markup and are tuned at the bottom.

   There are NO style="" attributes and NO <style> blocks on this page — the
   Content-Security-Policy in the HTML has no 'unsafe-inline'. Anything that
   needs a computed value (a progress width, a popover position) is set from
   JavaScript via element.style, which CSP does not police.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   Local names so the whole page can be retuned in one place, each falling back
   to a literal when the site-wide variable is missing.
   -------------------------------------------------------------------------- */
.eoir-calendar-page {
  --ec-ink: var(--title-color, #07112B);
  --ec-body: var(--text-color, #545963);
  --ec-muted: #6f7684;
  --ec-faint: #98a0ae;

  --ec-line: #e3e7ee;
  --ec-line-soft: #edf0f5;
  --ec-surface: #ffffff;
  --ec-surface-2: #f7f8fb;
  --ec-page: #fbfbfd;

  --ec-accent: var(--accent-color, #127ca6);
  --ec-accent-ink: #0d5f80;
  --ec-accent-soft: rgba(18, 124, 166, .085);
  --ec-accent-line: rgba(18, 124, 166, .24);

  --ec-ok: #1a7f4b;
  --ec-ok-soft: #e7f4ec;
  --ec-warn: #a86200;
  --ec-warn-soft: #fdf3e2;
  --ec-danger: #c0362c;
  --ec-danger-soft: #fdecea;
  --ec-grey-soft: #eef0f4;

  --ec-r-lg: 20px;
  --ec-r: 14px;
  --ec-r-sm: 9px;

  --ec-shadow: 0 1px 2px rgba(7, 17, 43, .04), 0 12px 32px rgba(7, 17, 43, .06);
  --ec-shadow-lift: 0 2px 6px rgba(7, 17, 43, .06), 0 26px 60px rgba(7, 17, 43, .12);

  background: var(--ec-page);
}

/* The hidden attribute must always win. Components below set their own display
   (flex, grid, inline-flex), which silently outranks the UA's
   [hidden] { display: none }. */
/* The roots as well as their descendants: a component that sets its own
   display (flex, grid, inline-flex) silently outranks the UA's
   [hidden] { display: none }, and an attribute selector on a descendant never
   reaches the element carrying the attribute. */
#main-content [hidden],
.ec-console [hidden],
.ec-cal [hidden],
.ec-setup [hidden] { display: none !important; }

.ec-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ec-offscreen { position: absolute; left: -9999px; top: 0; }

/* One visible focus treatment for everything this page owns. */
.ec-top :focus-visible,
.ec-section :focus-visible {
  outline: 2px solid var(--ec-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   Elements marked [data-reveal] start hidden and are revealed by
   eoir-calendar-sync.js. The .reveal-ready class is added by that script on
   load: without JS the rules below never apply, so content stays visible
   rather than being permanently invisible. Nothing above the fold carries
   [data-reveal] — the console must paint on the first frame.
   -------------------------------------------------------------------------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
}

.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.ec-shell {
  width: 100%;
  max-width: var(--max-width-desktop, 1240px);
  margin: 0 auto;
}

/* The site header is `position: fixed` and taller than it looks: min-height 70
   plus its own padding, so 118px at the default breakpoint, 122px from 1400px,
   126px from 1800px, and 110/102px on tablet/mobile. style.css clears it with
   200px of hero padding; the console needs the same kind of room or the H1
   starts underneath it. These numbers are that clearance plus breathing space,
   not decoration — check them again if style.css changes the header. */
.ec-top {
  padding: 168px 40px 72px;
  background: var(--ec-page);
}

.ec-section {
  padding: 100px 60px;   /* same rhythm as the original .eoir-lp-section */
}
@media (min-width: 1400px) { .ec-section { padding: 160px 120px; } }

.ec-lands { background: var(--ec-surface); }
.ec-data { background: var(--ec-page); }

/* --------------------------------------------------------------------------
   Masthead — deliberately small. The console is the hero.
   -------------------------------------------------------------------------- */
/* The console is the product, but the page still has to open with some
   confidence: full-size headline, centred, and the two branded buttons as the
   one obvious thing to press. A left-aligned 40px head with the tool crammed
   underneath read as an admin screen, not a product. */
.ec-masthead {
  max-width: 1200px;
  margin: 0 auto 56px;
  text-align: center;
}

.ec-h1 {
  font-size: var(--alpha-heading-h0);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ec-ink);
  margin: 0 0 22px;
}

.ec-lead {
  font-size: var(--alpha-body-medium);
  line-height: 1.6;
  color: var(--ec-body);
  margin: 0 auto 26px;
  max-width: 720px;   /* same measure as the original hero-description */
}

/* The two marks people scan for, stated rather than sold — no button, so the
   page still has exactly one call to action. */
.ec-works {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--ec-ink);
}

.ec-works-label {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-regular, 400);
  color: var(--ec-faint);
}

.ec-works-item { display: inline-flex; align-items: center; gap: 9px; }

.ec-works-item img { display: block; width: 24px; height: 24px; object-fit: contain; }

.ec-fineprint {
  font-size: var(--alpha-body-xs);
  color: var(--ec-faint);
  margin: 0;
}

/* The console sits on a tint rather than straight on the page, so it reads as
   a product being shown rather than a form to fill in — the job the live
   page's blue slab was doing. */
.ec-showcase {
  background: linear-gradient(180deg, #d5ebf7 0%, #e4f2fa 100%);
  border-radius: 28px;
  padding: 28px;
}

@media (max-width: 860px) { .ec-showcase { padding: 16px; border-radius: 20px; } }
@media (max-width: 640px) { .ec-showcase { padding: 10px; border-radius: 16px; } }

/* --------------------------------------------------------------------------
   Buttons — one family, three weights
   -------------------------------------------------------------------------- */
.ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 20px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.ec-btn svg { flex: 0 0 auto; }

.ec-btn-primary { background: var(--ec-accent); border-color: var(--ec-accent); color: #fff; }
.ec-btn-primary:hover { background: var(--ec-accent-ink); border-color: var(--ec-accent-ink); color: #fff; }

.ec-btn-quiet {
  background: var(--ec-surface);
  border-color: var(--ec-line);
  color: var(--ec-ink);
}
.ec-btn-quiet:hover { background: var(--ec-surface-2); border-color: #d3d8e2; }

.ec-btn-danger { background: var(--ec-danger); border-color: var(--ec-danger); color: #fff; }
.ec-btn-danger:hover { background: #a72c23; border-color: #a72c23; }

.ec-btn:disabled,
.ec-btn[disabled] { opacity: .55; cursor: default; }

/* Spinner for any async button, drawn from custom properties so it survives
   whatever the label colour is. */
.ec-btn.is-busy { position: relative; pointer-events: none; }

/* The spinner REPLACES the button's own icon rather than joining it. The busy
   state adds a ::before spinner, and the button's inline <svg> stayed where it
   was, so "Syncing…" sat behind two marks — one turning, one not — reading as
   two separate things happening. */
.ec-btn.is-busy svg { display: none; }

.ec-btn.is-busy::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: .8;
  animation: ecSpin .7s linear infinite;
}

@keyframes ecSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ec-btn.is-busy::before { animation-duration: 2s; }
}

.ec-linkbtn {
  display: inline-block;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--ec-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ec-linkbtn:hover { color: var(--ec-accent-ink); }
.ec-linkbtn-quiet { color: var(--ec-muted); }
.ec-linkbtn-quiet:hover { color: var(--ec-danger); }

/* Disconnect: visible enough to find, quiet enough not to invite. Bordered so
   it reads as a control at a glance, neutral until hovered, then red at the
   point the visitor is actually reaching for it. */
.ec-dangerlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  color: var(--ec-muted);
  background: var(--ec-surface);
  border: 1px solid var(--ec-line);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.ec-dangerlink:hover {
  color: var(--ec-danger);
  border-color: var(--ec-danger);
  background: var(--ec-danger-soft);
}
.ec-dangerlink:focus-visible {
  outline: 2px solid var(--ec-danger);
  outline-offset: 2px;
}

.ec-iconbtn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--ec-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ec-iconbtn:hover { background: var(--ec-surface-2); color: var(--ec-ink); }

.ec-textbtn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--ec-ink);
  background: var(--ec-surface);
  border: 1px solid var(--ec-line);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: background .18s ease;
}
.ec-textbtn:hover { background: var(--ec-surface-2); }

/* --------------------------------------------------------------------------
   Skeletons
   -------------------------------------------------------------------------- */
.ec-skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef0f4 0%, #f6f7fa 40%, #eef0f4 80%);
  background-size: 300% 100%;
  animation: ecShimmer 1.4s ease-in-out infinite;
}

.ec-skel-stack { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.ec-skel-row { height: 16px; }
.ec-skel-row:nth-child(even) { width: 72%; }
.ec-skel-block { height: 64px; border-radius: var(--ec-r-sm); }
.ec-skel-chip { height: 12px; margin: 2px 5px; border-radius: 4px; }

@keyframes ecShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ec-skel { animation: none; background: #eef0f4; }
}

.ec-spin {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid var(--ec-line);
  border-top-color: var(--ec-accent);
  animation: ecSpin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) { .ec-spin { animation-duration: 2s; } }

/* ==========================================================================
   THE CONSOLE
   ========================================================================== */
/* The first column is `auto`: it follows the setup card's own width, and THAT
   is what animates between states. Plain grid-template-columns will not
   interpolate between minmax() and a length, and a registered custom property
   would work but cannot be verified in every renderer; width can. */
.ec-console {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ec-console > .ec-setup {
  box-sizing: border-box;
  width: 380px;
  transition: width .45s cubic-bezier(.22, .61, .36, 1), padding .45s cubic-bezier(.22, .61, .36, 1);
}

/* Setup still to do: the checklist gets the width and the emphasis. */
.ec-console.is-setup > .ec-setup { width: 460px; }

/* Focus mode: the calendar takes the width and the checklist collapses to a
   rail of step markers (1 2 3 4) down the left, so progress stays visible
   without the prose. Declared with the compound selector so it beats
   .is-setup whatever state the console is in. */
.ec-console.is-focus > .ec-setup,
.ec-console.is-setup.is-focus > .ec-setup { width: 72px; }

.ec-console.is-focus .ec-setup {
  padding: 16px 0;
  display: flex;
  justify-content: center;
  cursor: pointer;            /* clicking the rail brings the checklist back */
}
/* Everything but the markers goes, INCLUDING any status note: a red error
   squeezed into a 72px rail is what the "broken red container" was. */
.ec-console.is-focus .ec-setup-head,
.ec-console.is-focus .ec-setup-foot,
.ec-console.is-focus .ec-skel-stack,
.ec-console.is-focus .ec-step-body,
.ec-console.is-focus .ec-step-state,
.ec-console.is-focus .ec-setup-note,
.ec-console.is-focus .ec-coach { display: none !important; }

/* Entering focus: markers pop into the rail one after another and the
   calendar settles into its new width. Leaving: the step text fades back. */
@keyframes ecRailIn { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ecCalIn  { from { opacity: .6; transform: scale(.992); } to { opacity: 1; transform: none; } }
@keyframes ecFadeIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.ec-console.is-focus .ec-step-mark { animation: ecRailIn .38s cubic-bezier(.2, .7, .3, 1) both; }
.ec-console.is-focus .ec-step:nth-child(2) .ec-step-mark { animation-delay: .06s; }
.ec-console.is-focus .ec-step:nth-child(3) .ec-step-mark { animation-delay: .12s; }
.ec-console.is-focus .ec-step:nth-child(4) .ec-step-mark { animation-delay: .18s; }
.ec-console.is-focus .ec-cal { animation: ecCalIn .45s cubic-bezier(.22, .61, .36, 1) both; }
.ec-console.was-focus .ec-step-body { animation: ecFadeIn .35s cubic-bezier(.2, .7, .3, 1) .1s both; }
/* While the card is being morphed its own box is driven from JS; keep the
   content from spilling out of the smaller frame mid-flight. */
.ec-setup { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .ec-console > .ec-setup { transition: none; }
  .ec-console.is-focus .ec-step-mark,
  .ec-console.is-focus .ec-cal,
  .ec-console.was-focus .ec-step-body { animation: none; }
}

.ec-console.is-focus .ec-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ec-console.is-focus .ec-step { padding: 0; gap: 0; }
/* the connector now runs between stacked markers */
.ec-console.is-focus .ec-step::before {
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
  bottom: -16px;
}
.ec-console.is-focus .ec-step:last-child::before { display: none; }
.ec-console.is-focus .ec-step.is-current .ec-step-mark { width: 30px; height: 30px; font-size: 13px; }

/* Mid-setup the checklist is the subject. It says so by staying opaque while
   the calendar dims (.ec-cal.is-preview below) rather than by lifting off the
   page on a shadow. */
.ec-console.is-setup .ec-setup {
  border-color: var(--ec-line-strong, var(--ec-line));
}

/* The example docket is scenery until it holds real hearings. Enough to sit
   back, not so much that it looks switched off. */
.ec-cal.is-preview { opacity: .9; }

/* --------------------------------------------------------------------------
   Setup checklist
   -------------------------------------------------------------------------- */
.ec-setup {
  background: var(--ec-surface);
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-r-lg);
  padding: 24px;
  /* No shadow. The 1px border already separates this from the page, and two
     large drop-shadowed slabs side by side made the panel look like it was
     hovering over the section rather than sitting in it. */
  /* Sticky so the current step stays beside the calendar while it is scrolled.
     By the time it sticks the header is in its .scrolled state (102px, 106px
     above 1800px), so the offset has to clear that — at 88px the card slid
     under the header instead of stopping below it. */
  position: sticky;
  top: 118px;
}

.ec-setup-head { margin-bottom: 18px; }

/* A label for the card, not the message. The message is whichever step is
   current, and that is what has to be the biggest thing here. */
.ec-setup-title {
  font-size: 11px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ec-faint);
  margin: 0 0 3px;
}

.ec-setup-sub { font-size: 13px; color: var(--ec-faint); margin: 0; line-height: 1.5; }

.ec-steps { list-style: none; margin: 0; padding: 0; }

.ec-step {
  display: flex;
  gap: 13px;
  padding: 0 0 18px;
  position: relative;
}

/* The rail between the markers — this really is a sequence, so it gets one. */
.ec-step::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--ec-line);
}

.ec-step:last-child { padding-bottom: 0; }
.ec-step:last-child::before { display: none; }
.ec-step.is-done::before { background: var(--ec-ok); opacity: .35; }

.ec-step-mark {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--font-weight-bold, 700);
  background: var(--ec-grey-soft);
  color: var(--ec-muted);
  border: 2px solid var(--ec-surface);
  box-shadow: 0 0 0 1px var(--ec-line);
}

.ec-step-mark em { font-style: normal; }

.ec-step.is-done .ec-step-mark {
  background: var(--ec-ok);
  color: #fff;
  box-shadow: 0 0 0 1px var(--ec-ok);
}

.ec-step.is-current .ec-step-mark {
  background: var(--ec-accent);
  color: #fff;
  box-shadow: 0 0 0 1px var(--ec-accent), 0 0 0 5px var(--ec-accent-soft);
}

.ec-step-body { min-width: 0; flex: 1 1 auto; padding-top: 2px; }

.ec-step-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  /* Same token as the detail beneath it. A finished step's title and its detail
     are one sentence of information, and 14.5px over 13px was a distinction too
     small to read as deliberate — semibold and the darker ink do that work. */
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin: 0 0 3px;
  line-height: 1.35;
}

.ec-step.is-todo .ec-step-title { color: var(--ec-muted); }

/* The one instruction on the page. It has to outrank the finished steps above
   it, so it takes the next token up: --alpha-body-small, 20px on a desktop and
   15px on a phone, against the xs the other steps use. The detail no longer
   needs its own size — inheriting xs keeps the current step in the same scale
   as the rest instead of nudging it by a pixel. */
.ec-step.is-current .ec-step-title {
  font-size: var(--alpha-body-small);
  letter-spacing: -.01em;
  margin-bottom: 5px;
}

.ec-step.is-current .ec-step-mark {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

/* Status is spelled out, not left to the marker colour alone. */
.ec-step-state {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ec-faint);
}

.ec-step.is-done .ec-step-state { color: var(--ec-ok); }
.ec-step.is-current .ec-step-state { color: var(--ec-accent); }

.ec-step-detail {
  /* The site's own step in the type scale rather than a number picked here.
     --alpha-body-xs is 16px on a desktop and steps down to 13px on a phone
     (style.css), so this line grows where there is room for it and stays where
     the hardcoded 13px used to be on the smallest screens. */
  font-size: var(--alpha-body-xs);
  line-height: 1.55;
  color: var(--ec-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

.ec-step-act { margin-top: 14px; }

.ec-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ec-act-hint {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ec-faint);
  margin: 10px 0 0;
}

.ec-act-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ec-muted);
  padding: 10px 0;
}

.ec-act-ok,
.ec-act-err {
  font-size: 13px;
  line-height: 1.55;
  border-radius: var(--ec-r-sm);
  padding: 10px 12px;
  margin: 0 0 12px;
}

.ec-act-ok { background: var(--ec-ok-soft); color: #14653c; }
.ec-act-err { background: var(--ec-danger-soft); color: #8f2a22; }
.ec-act-err strong { display: block; margin-bottom: 2px; }

/* ---- provider cards ----------------------------------------------------- */
.ec-providers { display: flex; flex-direction: column; gap: 10px; }

.ec-provider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-r);
  background: var(--ec-surface);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

.ec-provider:hover { border-color: var(--ec-accent-line); background: var(--ec-accent-soft); }

.ec-provider-mark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--ec-r-sm);
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ec-provider-mark img { display: block; width: 24px; height: 24px; object-fit: contain; }

.ec-provider-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.ec-provider-body strong { font-size: 14px; font-weight: var(--font-weight-semibold, 600); color: var(--ec-ink); }
.ec-provider-body small { font-size: 12px; color: var(--ec-muted); }

.ec-provider-go { flex: 0 0 auto; color: var(--ec-faint); display: flex; }
.ec-provider:hover .ec-provider-go { color: var(--ec-accent); }

/* ---- calendar picker ---------------------------------------------------- */
.ec-callist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 210px;
  overflow-y: auto;
  margin: 0 0 14px;
}

/* position:relative so the visually-hidden checkbox inside is absolute to ITS
   OWN row. Without it the nearest positioned ancestor was the sticky setup
   card, every hidden box piled up in that card's top-left corner, and tabbing
   through the list jumped the scroll to the top each time. */
.ec-calopt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-r-sm);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.ec-calopt:hover { border-color: var(--ec-accent-line); }
.ec-calopt.is-picked { border-color: var(--ec-accent); background: var(--ec-accent-soft); }

.ec-calopt input { position: absolute; opacity: 0; pointer-events: none; }

.ec-calopt input:focus-visible ~ .ec-check {
  outline: 2px solid var(--ec-accent);
  outline-offset: 2px;
}

.ec-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #c4cad6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ec-calopt.is-picked .ec-check { border-color: var(--ec-accent); background: var(--ec-accent); }

.ec-calopt.is-picked .ec-check::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.ec-calopt-name {
  min-width: 0;
  font-size: 13.5px;
  color: var(--ec-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-calopt-name em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ec-accent);
  margin-left: 7px;
}

/* ---- desktop-only card -------------------------------------------------- */
.ec-desktop {
  border: 1px solid var(--ec-accent-line);
  background: var(--ec-accent-soft);
  border-radius: var(--ec-r);
  padding: 14px 15px;
}

.ec-desktop h4 {
  font-size: 14px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin: 0 0 6px;
}

.ec-desktop p { font-size: 13px; line-height: 1.55; color: var(--ec-body); margin: 0 0 12px; }

.ec-copyrow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
}

.ec-copyfield {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ec-ink);
  background: var(--ec-surface);
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-r-sm);
  padding: 8px 11px;
}

.ec-btn.is-done { background: var(--ec-ok-soft); border-color: var(--ec-ok); color: #14653c; }
.ec-btn.is-fail { background: var(--ec-danger-soft); border-color: var(--ec-danger); color: #8f2a22; }

/* ---- all-set footer ----------------------------------------------------- */
.ec-setup-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ec-line-soft); }

.ec-alldone-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin: 0 0 12px;
}

.ec-alldone .ec-act { margin-bottom: 12px; }

/* The line above Disconnect. Quiet and small — it is a caveat, not a heading,
   and the title above it already carries the weight in this block. */
.ec-alldone-note {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ec-muted);
}

.ec-confirm {
  margin-top: 12px;
  border: 1px solid var(--ec-danger);
  background: var(--ec-danger-soft);
  border-radius: var(--ec-r);
  padding: 13px 14px;
}

.ec-confirm p { font-size: 12.5px; line-height: 1.55; color: #7c261f; margin: 0 0 12px; }

.ec-setup-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  border-radius: var(--ec-r-sm);
  padding: 10px 12px;
  color: var(--ec-body);
  background: var(--ec-surface-2);
}

.ec-setup-note.is-ok { background: var(--ec-ok-soft); color: #14653c; }
.ec-setup-note.is-err { background: var(--ec-danger-soft); color: #8f2a22; }
/* Partial success: the action worked, but not for everything asked. */
.ec-setup-note.is-warn { background: var(--ec-warn-soft); color: #7a4700; }

/* ---- the coachmark -------------------------------------------------------
   Pressing Sync before the setup is done points here. A highlight around the
   step only says "look at this"; a bubble with an arrow under the button says
   which thing to press, which is the difference between guiding somebody and
   flashing at them. Positioned from JS (top/left/--ec-coach-arrow-x). */
.ec-coach {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 11px 14px;
  border-radius: 12px;
  background: var(--ec-ink);
  color: #fff;
  box-shadow: 0 10px 30px rgba(7, 17, 43, .28);
  /* The entrance animates TRANSFORM ONLY, never opacity. Any animation can be
     left sitting at 0% — a stalled clock, a throttled tab, a headless render —
     and if that frame said opacity:0 then the one element telling somebody
     what to press would be invisible. Stuck here just means "six pixels high",
     which is fine. Same rule the reveal system at the top of the JS follows:
     nothing important is allowed to depend on an animation completing. */
  animation: ecCoachIn .28s cubic-bezier(.22, .61, .36, 1);
}

.ec-coach[hidden] { display: none; }

.ec-coach-arrow {
  position: absolute;
  top: -6px;
  left: var(--ec-coach-arrow-x, 24px);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 2px 0 0 0;
  background: var(--ec-ink);
  transform: rotate(45deg);
}

.ec-coach-text {
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: var(--font-weight-medium, 500);
}

.ec-coach-x {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ec-coach-x:hover { background: rgba(255, 255, 255, .26); }
.ec-coach :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@keyframes ecCoachIn {
  from { transform: translateY(-6px); }
  to { transform: none; }
}

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

/* ==========================================================================
   THE CALENDAR
   ========================================================================== */
.ec-cal {
  background: var(--ec-surface);
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-r-lg);
  /* Flat, like the setup panel beside it — see the note there. */
  overflow: hidden;
  min-width: 0;
}

.ec-cal-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ec-line);
}

.ec-cal-bar-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ec-cal-bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* It has to disown the data, but it does not have to shout: a saturated amber
   pill was the warmest thing on a cool page and took the eye before the month
   name did. Muted, and it still reads. */
.ec-cal-ribbon {
  font-size: 10.5px;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9a7330;
  background: transparent;
  border: 1px solid rgba(168, 98, 0, .35);
  border-radius: 999px;
  padding: 3px 9px;
  align-self: center;
}

.ec-cal-month {
  font-size: 19px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin: 0;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.ec-cal-count { font-size: 13px; color: var(--ec-muted); }

.ec-cal-nav { display: flex; align-items: center; gap: 4px; }

.ec-focusbtn[aria-pressed="true"] { background: var(--ec-accent-soft); color: var(--ec-accent); }

.ec-cal-note {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ec-body);
  background: var(--ec-surface-2);
  border-bottom: 1px solid var(--ec-line);
}

.ec-cal-note.is-err { color: #8f2a22; background: var(--ec-danger-soft); }
.ec-cal-note.is-ok { color: #14653c; background: var(--ec-ok-soft); }

/* The example docket: the same tool, visibly not the visitor's data. A warm
   hairline all round backs up the ribbon, which is the actual label. */
.ec-cal.is-demo { border-color: rgba(168, 98, 0, .32); }
.ec-cal.is-demo .ec-cal-bar { border-bottom-color: rgba(168, 98, 0, .22); }

/* ---- folds --------------------------------------------------------------
   A 0fr grid row clips to nothing and transitions to 1fr, which is how
   height:auto gets animated without measuring anything in JS. Padding and
   border collapse with it, so a closed fold leaves no seam and opening one
   never shoves the grid down in a single jump. */
.ec-fold {
  display: grid;
  grid-template-rows: 0fr;
  border-bottom: 1px solid transparent;
  transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1),
              border-color .3s ease;
}

.ec-fold.is-open { grid-template-rows: 1fr; border-bottom-color: var(--ec-line); }

/* visibility, not just height: a closed fold is clipped to nothing but its
   buttons and links stayed in the tab order and in the accessibility tree, so
   Tab landed on an invisible "Open Google Calendar". It is switched at the end
   of the close transition and at the start of the open one. */
.ec-fold-body {
  overflow: hidden;
  min-height: 0;
  padding: 0 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease,
              padding .45s cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear .45s;
}

.ec-fold.is-open > .ec-fold-body {
  padding: 15px 16px 18px;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease,
              padding .45s cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .ec-fold, .ec-fold-body, .ec-fold.is-open > .ec-fold-body { transition: none; }
}

/* ---- sync progress ------------------------------------------------------ */
.ec-progress { min-width: 0; }

.ec-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ec-progress-title {
  font-size: 14.5px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin: 0;
}

.ec-progress-pct { font-size: 13px; font-weight: var(--font-weight-semibold, 600); color: var(--ec-accent); }

.ec-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ec-grey-soft);
  overflow: hidden;
  margin-bottom: 14px;
}

.ec-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ec-accent);
  transition: width .4s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) { .ec-progress-fill { transition: none; } }

.ec-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.ec-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ec-faint);
}

.ec-stage-mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ec-line);
  background: var(--ec-surface);
}

.ec-stage.is-done { color: var(--ec-body); }
.ec-stage.is-done .ec-stage-mark { border-color: var(--ec-ok); background: var(--ec-ok); }

.ec-stage.is-running { color: var(--ec-ink); font-weight: var(--font-weight-medium, 500); }
.ec-stage.is-running .ec-stage-mark {
  border-color: var(--ec-accent);
  border-top-color: transparent;
  animation: ecSpin .8s linear infinite;
}

.ec-stage.is-failed { color: #8f2a22; }
.ec-stage.is-failed .ec-stage-mark { border-color: var(--ec-danger); background: var(--ec-danger); }

@media (prefers-reduced-motion: reduce) {
  .ec-stage.is-running .ec-stage-mark { animation-duration: 2s; }
}

.ec-stage-label { flex: 1 1 auto; min-width: 0; }
.ec-stage-note { flex: 0 0 auto; font-size: 12px; color: var(--ec-muted); }

.ec-progress-live { font-size: 12.5px; color: var(--ec-muted); margin: 12px 0 0; line-height: 1.5; }

/* ---- completion summary ------------------------------------------------- */
.ec-summary-title {
  font-size: 14.5px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin: 0 0 10px;
}

.ec-summary.is-error .ec-summary-title { color: #8f2a22; }

.ec-chipstats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }

.ec-chipstat {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ec-grey-soft);
  color: var(--ec-body);
}

.ec-chipstat b { font-weight: var(--font-weight-bold, 700); color: var(--ec-ink); }

.ec-chipstat.is-add { background: var(--ec-ok-soft); color: #14653c; }
.ec-chipstat.is-add b { color: #14653c; }
.ec-chipstat.is-upd { background: var(--ec-warn-soft); color: var(--ec-warn); }
.ec-chipstat.is-upd b { color: var(--ec-warn); }
.ec-chipstat.is-del,
.ec-chipstat.is-err { background: var(--ec-danger-soft); color: #8f2a22; }
.ec-chipstat.is-del b,
.ec-chipstat.is-err b { color: #8f2a22; }

.ec-summary-line { font-size: 13px; line-height: 1.6; color: var(--ec-body); margin: 0 0 12px; }
.ec-summary-line strong { color: var(--ec-ink); }

.ec-summary-errs {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ec-muted);
}

/* ---- month grid --------------------------------------------------------- */
.ec-cal-main { position: relative; }

.ec-grid {
  display: grid;
  /* minmax(0,1fr), not 1fr: a track's implicit minimum is its content, so one
     long nowrap chip would silently widen its column and shear the grid. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, minmax(88px, auto));
}

/* Rows exist for ARIA (a grid needs rows); display:contents keeps the cells
   as direct children of the grid so the seven columns stay aligned. */
.ec-grid-row,
.ec-grid-head { display: contents; }

.ec-dow {
  text-align: center;
  font-size: 10.5px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ec-faint);
  padding: 9px 0 8px;
  border-bottom: 1px solid var(--ec-line);
}

.ec-dow abbr { text-decoration: none; border: 0; }

.ec-cell {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--ec-line-soft);
  border-bottom: 1px solid var(--ec-line-soft);
  padding: 5px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  background: var(--ec-surface);
}

.ec-grid-row > .ec-cell:nth-child(7n) { border-right: none; }

.ec-cell.is-out { background: #fcfcfd; }

/* While the feed is in flight the cells hold their shape and carry a skeleton
   chip, so nothing jumps when the real hearings arrive. */
.ec-cell.is-loading { cursor: default; }
.ec-cell.is-loading .ec-cell-num { color: var(--ec-faint); }

.ec-cell.has-events { cursor: pointer; }
.ec-cell.has-events:hover { background: var(--ec-surface-2); }
.ec-cell:focus-visible { outline: 2px solid var(--ec-accent); outline-offset: -2px; border-radius: 2px; }

.ec-cell-num {
  align-self: center;
  font-size: 12px;
  line-height: 1;
  color: var(--ec-body);
  padding: 5px 7px;
  border-radius: 999px;
  margin-bottom: 2px;
  white-space: nowrap;
}

.ec-cell.is-out .ec-cell-num { color: var(--ec-faint); }

.ec-cell.is-today .ec-cell-num {
  background: var(--ec-accent);
  color: #fff;
  font-weight: var(--font-weight-semibold, 600);
}

.ec-cell.is-today { background: var(--ec-accent-soft); }

.ec-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ec-ink);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ec-chip b { font-weight: var(--font-weight-semibold, 600); flex: 0 0 auto; }
.ec-chip.is-cancelled { text-decoration: line-through; color: var(--ec-faint); }

.ec-chip-more {
  align-self: flex-start;
  font-size: 11px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--ec-muted);
  padding: 1px 5px;
}

.ec-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ec-accent);      /* synced */
}

.ec-dot.is-unchanged { background: var(--ec-accent); }
.ec-dot.is-new { background: var(--ec-ok); }
.ec-dot.is-changed { background: #e08c00; }
.ec-dot.is-cancelled { background: #9aa0a6; }

/* ---- day popover -------------------------------------------------------- */
.ec-daypop {
  position: absolute;
  z-index: 6;
  background: var(--ec-surface);
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-r);
  box-shadow: var(--ec-shadow-lift);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 320px;
  max-width: calc(100vw - 24px);
  overflow-y: auto;
}

.ec-daypop-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  padding-right: 30px;
}

.ec-daypop-dow {
  font-size: 10.5px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: .08em;
  color: var(--ec-faint);
}

.ec-daypop-num { font-size: 20px; color: var(--ec-ink); line-height: 1; }

.ec-daypop-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; }

.ec-daypop-ev {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ec-ink);
  padding: 5px 6px;
  border-radius: var(--ec-r-sm);
}

.ec-daypop-ev:hover { background: var(--ec-surface-2); }
.ec-daypop-ev .ec-dot { margin-top: 5px; }
.ec-daypop-ev.is-cancelled .ec-daypop-text b { text-decoration: line-through; color: var(--ec-faint); }

.ec-daypop-text { min-width: 0; display: flex; flex-direction: column; }
.ec-daypop-text b { font-weight: var(--font-weight-semibold, 600); }
.ec-daypop-text small { font-size: 11.5px; color: var(--ec-muted); line-height: 1.45; }

/* ---- sections under the grid -------------------------------------------- */
/* Both are .ec-fold; these only carry the seam between them. */
.ec-changes { border-top: 1px solid var(--ec-line); }
.ec-month.ec-fold:not(.is-open) { border-bottom-color: transparent; }

.ec-sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ec-sechead h3 {
  margin: 0;
  font-size: 10.5px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ec-faint);
}

/* ── change cards ────────────────────────────────────────────────────────
   Two tinted washes were doing the work of telling a reschedule from a
   cancellation, and a pale amber panel next to a pale red one is a distinction
   nobody can make at a glance — especially side by side down a list.

   So the card itself is neutral: white, one hairline, no left rail. The status
   is carried by the two things the eye actually lands on — a saturated icon
   chip and the heading in the same colour. A red circle beside "Hearing
   cancelled" in red is unmistakable next to an amber circle beside "Hearing
   rescheduled", at any size, and it stops the list reading as a wall of
   warning boxes. */
.ec-change {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-r-sm);
  margin-bottom: 6px;
  background: var(--ec-surface);
}

.ec-change:last-child { margin-bottom: 0; }

/* Scrolls past roughly five cards. Sized in cards rather than vh so a quiet
   week takes the space it needs and a busy one stops taking more. */
.ec-changelist {
  max-height: 336px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ec-changelist:focus-visible {
  outline: 2px solid var(--ec-accent);
  outline-offset: 2px;
  border-radius: var(--ec-r-sm);
}

/* The heading carries the status colour; the body text stays neutral so the
   sentence is still comfortable to read. */
.ec-change.is-cancelled .ec-change-text strong { color: var(--ec-danger); }
.ec-change.is-changed   .ec-change-text strong { color: var(--ec-warn); }
.ec-change.is-new       .ec-change-text strong { color: var(--ec-ok); }

.ec-change-ico {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  /* Filled, not outlined. An outlined chip at 26px reads as a faint ring and
     was the reason the three statuses looked alike from a foot away. */
  background: var(--ec-grey-soft);
  color: var(--ec-muted);
}

.ec-change.is-cancelled .ec-change-ico { background: var(--ec-danger-soft); color: var(--ec-danger); }
.ec-change.is-changed   .ec-change-ico { background: var(--ec-warn-soft);   color: var(--ec-warn); }
.ec-change.is-new       .ec-change-ico { background: var(--ec-ok-soft);     color: var(--ec-ok); }

.ec-change-text { min-width: 0; flex: 1 1 auto; font-size: 12.5px; line-height: 1.5; color: var(--ec-body); }

.ec-change-text strong {
  display: block;
  font-size: 13px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin-bottom: 1px;
}

/* Unread is carried by three things, not just the dot: a left rule, a heavier
   headline, and the dot's own screen-reader label. Colour alone is never the
   only signal. */
/* Unread used to be marked twice — a blue inset bar on the left AND a blue dot
   on the right — in a card that already carried its own status colour. The bar
   is gone (the left edge is the status now) and so is the dot; what is left is
   the heading in bold, which is how an unread item is marked everywhere else. */
.ec-change.is-unread .ec-change-text strong { font-weight: var(--font-weight-bold, 700); }

/* Kept only as a screen-reader hook; it draws nothing. See .ec-change.is-unread. */
.ec-unread { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- example-docket marking --------------------------------------------
   The ribbon and the two section headings say "example" three times between
   them, which is enough. What these do is drain the status colour out, so a
   green "New" chip in the sample never reads as a real hearing to act on. */
.ec-change.is-demo { background: var(--ec-surface-2); }
/* The colour now lives in the chip and the heading, so draining it means
   overriding both — the old rules only reached the glyph and left an example
   card with a green heading and a green disc, reading as a real change. */
.ec-change.is-demo .ec-change-ico,
.ec-change.is-demo.is-cancelled .ec-change-ico,
.ec-change.is-demo.is-changed .ec-change-ico,
.ec-change.is-demo.is-new .ec-change-ico {
  background: var(--ec-grey-soft);
  color: var(--ec-faint);
}
.ec-change.is-demo .ec-change-text strong,
.ec-change.is-demo.is-cancelled .ec-change-text strong,
.ec-change.is-demo.is-changed .ec-change-text strong,
.ec-change.is-demo.is-new .ec-change-text strong { color: var(--ec-muted); }

.ec-row.is-demo .ec-flag {
  opacity: .5;
  background: var(--ec-grey-soft);
  color: var(--ec-muted);
}

/* The whole docket lives in here, so it scrolls rather than running the page
   to several thousand pixels. Capped in vh so it keeps its shape on a laptop
   and on a tall monitor; overscroll-behavior stops a flick at the end of the
   list from carrying on into the page behind it. */
.ec-rowlist {
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ec-rowlist:focus-visible {
  outline: 2px solid var(--ec-accent);
  outline-offset: 2px;
  border-radius: var(--ec-r-sm);
}

/* Month headings ride along inside the scroll, so the visitor always knows
   which month they have scrolled into without counting back from the last one
   they saw. */
.ec-row-month {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 10px 0 4px;
  padding: 5px 10px;
  background: var(--ec-surface, #fff);
  border-bottom: 1px solid var(--ec-line, #dfe3ea);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ec-muted);
}
.ec-row-month:first-child { margin-top: 0; }

.ec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--ec-r-sm);
}

.ec-row:hover { background: var(--ec-surface-2); }

/* A row that is on a calendar is a link. It must not LOOK like a link at rest
   — a docket of underlined blue rows is unreadable — so the affordance is the
   hover state and the arrow, the way a table row that opens something behaves. */
a.ec-row.is-linked {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.ec-row.is-linked:hover { background: var(--ec-surface-2); }
a.ec-row.is-linked:focus-visible {
  outline: 2px solid var(--ec-accent);
  outline-offset: -2px;
}

.ec-row-go {
  flex: 0 0 auto;
  margin-left: 2px;
  color: var(--ec-faint);
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
a.ec-row.is-linked:hover .ec-row-go,
a.ec-row.is-linked:focus-visible .ec-row-go {
  opacity: 1;
  color: var(--ec-accent);
}
/* Touch has no hover, so the arrow is simply always there. */
@media (hover: none) {
  .ec-row-go { opacity: 1; }
}

.ec-row.is-cancelled .ec-row-what strong,
.ec-row.is-cancelled .ec-row-time { text-decoration: line-through; color: var(--ec-faint); }

.ec-row-day {
  flex: 0 0 auto;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.ec-row-day b { font-size: 18px; font-weight: var(--font-weight-regular, 400); color: var(--ec-ink); }
.ec-row-day small { font-size: 9.5px; font-weight: var(--font-weight-medium, 500); letter-spacing: .06em; color: var(--ec-faint); }

.ec-row-time { flex: 0 0 auto; width: 64px; font-size: 12.5px; color: var(--ec-body); }

.ec-row-what { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }

.ec-row-what strong {
  font-size: 13px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--ec-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-row-what small {
  font-size: 11.5px;
  color: var(--ec-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-flag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ec-grey-soft);
  color: var(--ec-muted);
}

.ec-flag.is-new { background: var(--ec-ok-soft); color: var(--ec-ok); }
.ec-flag.is-changed { background: var(--ec-warn-soft); color: var(--ec-warn); }
.ec-flag.is-cancelled { background: var(--ec-danger-soft); color: var(--ec-danger); }

.ec-empty { font-size: 13px; line-height: 1.6; color: var(--ec-muted); margin: 0; padding: 4px 2px; }

.ec-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 2px;
}

.ec-empty-cta p { font-size: 13px; line-height: 1.6; color: var(--ec-body); margin: 0; max-width: 62ch; }
.ec-empty-cta strong { color: var(--ec-ink); }

/* ---- legend ------------------------------------------------------------- */
.ec-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--ec-line);
  background: var(--ec-surface-2);
  font-size: 12px;
  color: var(--ec-muted);
}

.ec-legend li { display: inline-flex; align-items: center; gap: 7px; }

/* ==========================================================================
   THE SECTIONS BELOW THE CONSOLE
   ==========================================================================
   Deliberately not more cards. The console is the one boxed thing on this
   page; below it the work is done by type, measure and white space, so the
   eye keeps going back up to the tool rather than reading four equal-weight
   panels in a row.
   ========================================================================== */
.ec-sectionhead { max-width: none; margin-bottom: 0; }
.ec-sectionhead .ec-h2 { max-width: 560px; line-height: 130%; }
.ec-sectionhead .ec-sectionlede { max-width: 870px; }

.ec-h2 {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium, 500);   /* same as .features-title */
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--ec-ink);
  margin: 0 0 16px;
}
/* the original's highlighted word */
.ec-h2 span {
  background: linear-gradient(110deg, #127CA6 0%, #10182F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ec-sectionlede {
  font-size: var(--alpha-body-medium);
  line-height: 1.65;
  color: var(--ec-body);
  margin: 0;
}

/* ---- the annotated screenshot ------------------------------------------
   A photograph of the real thing beats a drawing of it: this is the shot the
   live page leads its section with, and it says more than a hand-built
   example event ever did. */
.ec-lands-shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 80px 0 64px;
  border-radius: 24px;
  /* The box owns a background, so the space it reserves is never a white flash
     while the first frame is still decoding — or if the file never arrives. */
  background: var(--ec-surface-2);
}

@media (max-width: 640px) { .ec-lands-shot { margin-bottom: 36px; border-radius: 12px; } }

/* ---- new / rescheduled / cancelled --------------------------------------
   Three lines, not three cards. The dot is the only ornament each one gets. */
.ec-states {
  margin: 0;
  border-top: 1px solid var(--ec-line);
}

.ec-states > div {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 8px 40px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ec-line);
}

.ec-states dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--alpha-heading-h5);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin: 0;
}

.ec-states dd {
  margin: 0;
  font-size: var(--alpha-body-small);
  line-height: 1.65;
  color: var(--ec-body);
  max-width: 62ch;
}

/* ---- the trust section --------------------------------------------------
   Heading on the left, the answers on the right. A page reads as written by
   somebody when its parts are not all the same size. */
.ec-data-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 40px 80px;
  align-items: start;
}

.ec-data-head { position: sticky; top: 140px; }
.ec-data-head .ec-sectionhead { margin-bottom: 0; }

.ec-facts { margin: 0; }
.ec-facts > div { margin-bottom: 30px; }
.ec-facts > div:last-child { margin-bottom: 0; }

.ec-fact-ico {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}

.ec-facts dt {
  font-size: var(--alpha-body-xs, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--ec-ink);
  margin: 0 0 7px;
  line-height: 1.4;
}

.ec-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ec-body);
  max-width: 66ch;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  /* Every state: one column. The state selectors below are compound so they
     outrank .is-setup, which otherwise kept two columns here and pushed the
     calendar off the right edge of tablets and phones. */
  .ec-console,
  .ec-console.is-setup,
  .ec-console.is-focus,
  .ec-console.is-setup.is-focus { grid-template-columns: minmax(0, 1fr); }
  .ec-console > .ec-setup,
  .ec-console.is-setup > .ec-setup,
  .ec-console.is-focus > .ec-setup,
  .ec-console.is-setup.is-focus > .ec-setup { width: auto; }
  .ec-setup { position: static; }
  /* focus mode on a single column: the rail lies across the top instead */
  .ec-console.is-focus .ec-setup { padding: 12px 16px; }
  .ec-console.is-focus .ec-steps { flex-direction: row; justify-content: center; gap: 26px; }
  .ec-console.is-focus .ec-step::before { display: none; }
  .ec-data-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ec-data-head { position: static; }
}

@media (max-width: 1024px) {
  /* header is 110px at this width */
  .ec-top { padding: 132px 28px 60px; }
  .ec-section { padding: 100px 48px; }
}

@media (max-width: 860px) {
  .ec-states > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; }
  .ec-cal-bar-right { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .ec-syncbtn { margin-left: auto; }
  .ec-grid { grid-template-rows: auto repeat(6, minmax(70px, auto)); }
  .ec-chip b { display: none; }         /* time hidden, dot + name stays */
  .ec-chip { font-size: 10.5px; padding: 1px 3px; gap: 4px; }
}

@media (max-width: 640px) {
  /* header is 102px from 481px up, ~62px below it */
  .ec-top { padding: 116px 18px 48px; }
  .ec-section { padding: 80px 28px; }
  .ec-setup { padding: 18px; border-radius: var(--ec-r); }
  .ec-cal { border-radius: var(--ec-r); }
  .ec-act { flex-direction: column; align-items: stretch; }
  .ec-act .ec-btn { width: 100%; }
  /* The label is just "Sync" at this width (set in JS), so the button fits on
     the toolbar row again and no longer needs a line of its own. */
  .ec-row-time { width: 54px; font-size: 11.5px; }
  .ec-row-day { width: 32px; }
  .ec-flag { display: none; }
  /* A 320px column cannot hold seven chips; the dot is the signal there. */
  .ec-chip, .ec-chip-more { display: none; }
  .ec-cell.has-events::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-accent);
    margin: auto auto 5px;
  }
  .ec-grid { grid-template-rows: auto repeat(6, minmax(52px, auto)); }
}

/* ==========================================================================
   Modal + list scrollbars
   The default chrome sits proud of a rounded card and reads as browser UI
   inside the design. These surfaces get a thin, self-effacing one instead.
   ========================================================================== */
.ec-daypop,
.ec-callist {
  scrollbar-width: thin;
  scrollbar-color: rgba(7, 17, 43, .22) transparent;
}

.ec-daypop::-webkit-scrollbar,
.ec-callist::-webkit-scrollbar { width: 10px; height: 10px; }

.ec-daypop::-webkit-scrollbar-track,
.ec-callist::-webkit-scrollbar-track { background: transparent; }

.ec-daypop::-webkit-scrollbar-thumb,
.ec-callist::-webkit-scrollbar-thumb {
  background: rgba(7, 17, 43, .18);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

.ec-daypop::-webkit-scrollbar-thumb:hover,
.ec-callist::-webkit-scrollbar-thumb:hover {
  background: rgba(7, 17, 43, .32);
  background-clip: content-box;
}

/* ==========================================================================
   SITE CHROME TUNING
   Two blocks that reuse site-wide markup: the header pill and the FAQ.
   ========================================================================== */

/* ---- header pill (Figma: light grey, dark ink) -------------------------- */
#eoirNavConnectBtn,
#eoirNavConnectBtn:hover {
  background: #F2F2F2;
  border-color: #F2F2F2;
  color: #141414;
}

#eoirNavConnectBtn:hover { background: #e8e8e8; border-color: #e8e8e8; }

/* Two labels, one shown at a time. "Sync my EOIR hearings" is most of the
   width of a phone, and shrinking the type to fit made the only control in the
   header the smallest text on the page. The full wording carries the
   aria-label, so what a screen reader announces does not change with the
   viewport. */
.ec-navlabel-short { display: none; }

/* style.css hides the header CTA under 480px because the hamburger takes over
   there. This page has no menu at all — the sync pill IS the header — so it
   stays visible at every size. */
@media (max-width: 768px) {
  .ec-navlabel-full { display: none; }
  .ec-navlabel-short { display: inline; }
}

@media (max-width: 480px) {
  .header-right #eoirNavConnectBtn { display: inline-block; padding: 10px 18px; font-size: 13px; }
}

/* ---- FAQ ---------------------------------------------------------------- */
/* style.css sizes .faq-question / .faq-answer p with var(--body-small), a
   custom property that is never defined anywhere in the stylesheets. The
   declaration is therefore invalid and both fall back to the inherited 16px
   from <body> at every breakpoint. Scoped to .eoir-calendar-page so the FAQ
   matches this page's body copy without changing the homepage. */
/* style.css sizes .faq-title with --alpha-heading-h1 (up to 64px) and centres
   it, because on the homepage the FAQ is the section that has to shout. Here it
   is the last thing on a page whose other headings are 30px and left-aligned,
   so at full size it read as a second hero and pulled the eye straight past the
   content above it. Same size and alignment as every other section head. */
/* Title and header come straight from style.css (h1, centred), exactly as on
   the original EOIR page. style.css gives .faq-section no top padding because
   on the homepage it follows a section that supplies it; here it needs the
   same rhythm as every other section on this page. */
.eoir-calendar-page .faq-section { padding: 100px 60px; }
@media (min-width: 1400px) { .eoir-calendar-page .faq-section { padding: 160px 120px; } }
@media (max-width: 1024px) { .eoir-calendar-page .faq-section { padding: 100px 48px; } }
@media (max-width: 768px)  { .eoir-calendar-page .faq-section { padding: 80px 28px; } }
@media (max-width: 480px)  { .eoir-calendar-page .faq-section { padding: 60px 20px; } }

.eoir-calendar-page .faq-question {
  font-size: var(--alpha-body-small, 17px);
  line-height: 1.45;
}

.eoir-calendar-page .faq-answer p {
  font-size: var(--alpha-body-small, 17px);
  line-height: 1.7;
}

/* The answer's open height is a fixed max-height in style.css (300px), sized
   for 16px text. At the larger size the longest answers clip, so raise the
   ceiling; it is only a transition bound, not a real box. */
.eoir-calendar-page .faq-item-wrapper.active .faq-answer {
  max-height: 640px;
}

.eoir-calendar-page .faq-icon { width: 22px; height: 22px; }

@media (max-width: 768px) {
  .eoir-calendar-page .faq-icon { width: 20px; height: 20px; }
}

/* Security cards section: the shared .capabilities-header only ever held a
   title on the homepage; here it carries a lede too, so give that lede the
   same gap the other section heads use. */
.capabilities-header .ec-sectionlede { margin-top: 16px; max-width: 870px; }
@media (max-width: 480px) { .ec-section { padding: 60px 20px; } }

/* Stop control on the sync progress panel. Quiet by default -- it sits beside a
   percentage the visitor is usually happy to watch -- and only warms on hover,
   so it never competes with the progress itself. */
/* Stop has to be findable at a glance while a sync is running: a grey text
   link at the right edge of the panel was there, correct, and missed. Given a
   real outline it reads as the one control on a panel that is otherwise all
   status. Still quiet enough not to compete with the progress itself. */
/* Cancel sits in the calendar toolbar beside Sync, so it takes .ec-btn's
   geometry and only overrides the colour. Matching that padding and font size
   matters more here than it did in the progress panel: the two buttons are now
   side by side, and a Cancel even slightly shorter than Sync reads as
   misaligned rather than as a smaller control. */
.ec-cancelbtn {
  flex: 0 0 auto;
  background: var(--ec-danger, #b3261e);
  color: #fff;
  border-color: transparent;
  text-decoration: none;
}
.ec-cancelbtn::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  background: currentColor;   /* white square, against the red */
}
.ec-cancelbtn:hover {
  background: var(--ec-danger-ink, #8c1d18);
  color: #fff;
}
.ec-cancelbtn:focus-visible {
  outline: 2px solid var(--ec-danger, #b3261e);
  outline-offset: 2px;
}
/* Mid-cancel the button is disabled but must not fade into the panel: the run
   is still stopping, and a ghost control reads as one that did nothing. */
.ec-cancelbtn[disabled] {
  background: var(--ec-danger, #b3261e);
  color: #fff;
  opacity: .72;
  cursor: default;
}
.ec-progress-head { display: flex; align-items: baseline; gap: 8px; }
.ec-progress-head .ec-progress-pct { margin-left: auto; }

/* The open fold makes .ec-fold-body visible, but the progress panel inside it
   was still resolving to visibility:hidden, so the stage rows and the header
   occupied space and rendered blank. Force the contents of an OPEN fold
   visible; a closed fold still clips and hides through .ec-fold-body. */
.ec-fold.is-open > .ec-fold-body,
.ec-fold.is-open > .ec-fold-body * { visibility: visible; }