/* ============================================================================
   funding-calendar.css — the Funding Calendar panel (dashboard.html)

   Spec:   docs/superpowers/specs/2026-08-27-funding-calendar-design.md
   Look:   dev-assets/data-surfaces-2026-08-26/01-eligibility-clock.html (Context A,
           approved by Khalid 2026-08-26). This file is that mockup's Context A,
           namespaced and hardened for the real page.

   ── Three things about this file that are load-bearing ────────────────────────

   1. ⚠ position:sticky IS SILENTLY DEAD ON THIS PAGE. main.css sets
      overflow-x:hidden on BOTH html and body, which disables sticky for every
      descendant in Chromium. The mockup's `.cal-spy-inner{position:sticky}` would
      have scrolled away with the page and looked like a design choice, not a bug.
      The rail is therefore position:fixed with JS-computed left/top/maxHeight
      (follow -> pin -> park), exactly like .dash-rail__in does two columns over.
      js/funding-calendar-panel.src.js owns those values every frame.
      See docs/DURABLE-GOTCHAS.md and css/dashboard.css:426.

   2. EVERY component rule is at >= (0,0,2,0). dashboard.css and main.css carry
      element-qualified rules (`.dash-x h3`, `.quiz-step p`, 0,0,1,1) that silently
      beat any single-class rule on a nested component. A failed DEMOTION hides
      where a failed promotion would not: it reads as a design choice. So every
      rule below is `.gcal <thing>`, never a lone class.

   3. Local tokens with FALLBACKS, never bare page tokens and never hardcoded
      brand constants. A component that hardcodes a brand colour cannot respect a
      page-scoped token, and a :root default loses to load order. The var()
      fallback is the correction. (docs/DURABLE-GOTCHAS.md)

   Widths are driven by MEASURED PANEL WIDTH, not viewport media queries: the
   dashboard grows a 248px rail at >=1200px, so the panel's own width does not
   track the viewport. The panel module toggles .gcal--wide / .gcal--tight from a
   ResizeObserver. (container-type would have been the CSS-native answer, but
   `container-type: inline-size` applies `contain: layout`, which makes the element
   a containing block for position:fixed descendants and would break the rail.)
   ========================================================================== */

.dash-funding-calendar[hidden] { display: none !important; }

.gcal {
    /* Palette: the dashboard's own tokens, each with the mockup value as the
       fallback so this renders correctly on any host that lacks them. */
    --gcal-paper:      var(--dash-paper, #FFFCF7);
    --gcal-paper-warm: #FFF9F0;
    --gcal-cream:      var(--dash-cream, #FAF8F4);
    --gcal-cream-dk:   var(--dash-cream-dark, #F2EBE0);
    --gcal-ink:        var(--dash-ink, #1A1714);
    --gcal-ink-2:      var(--dash-ink-secondary, #5C5549);
    --gcal-ink-3:      var(--dash-ink-muted, #706660);
    --gcal-line:       rgba(28, 25, 23, 0.10);
    --gcal-line-soft:  rgba(28, 25, 23, 0.07);
    --gcal-forest:     var(--dash-forest, #2D6A4F);
    --gcal-forest-dk:  var(--dash-forest-deep, #1A4731);
    --gcal-forest-lt:  #D8F3DC;
    --gcal-forest-glow: rgba(45, 106, 79, 0.10);
    --gcal-sienna:     var(--dash-rose, #C4532B);
    --gcal-sienna-dk:  #A3401F;
    --gcal-sienna-lt:  rgba(196, 83, 43, 0.09);
    --gcal-gold:       var(--dash-gold, #B8860B);
    --gcal-gold-lt:    rgba(184, 134, 11, 0.07);
    --gcal-gold-bd:    rgba(184, 134, 11, 0.28);
    --gcal-navy:       var(--dash-navy, #264673);
    --gcal-navy-lt:    rgba(38, 70, 115, 0.08);
    --gcal-serif:      var(--dash-font-display, 'Fraunces', Georgia, serif);
    --gcal-mono:       var(--dash-font-data, 'IBM Plex Mono', ui-monospace, monospace);
    --gcal-r:          var(--dash-radius, 10px);
    --gcal-r-lg:       var(--dash-radius-lg, 16px);
    --gcal-r-full:     9999px;
    --gcal-sh:         var(--dash-shadow-sm, 0 1px 3px rgba(26, 23, 20, 0.04));

    /* The rail's own column width, read back by JS so one number governs both. */
    --gcal-rail-w:     200px;

    color: var(--gcal-ink);
    min-width: 0;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.gcal .gcal-head { margin: 0 0 14px; }

.gcal .gcal-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gcal-forest);
}
.gcal .gcal-head__eyebrow svg { flex: none; }

.gcal .gcal-head__title {
    font-family: var(--gcal-serif);
    font-weight: 600;
    font-size: 25px;
    line-height: 1.22;
    letter-spacing: -0.012em;
    color: var(--gcal-ink);
    margin: 7px 0 7px;
}

.gcal .gcal-head__sub {
    color: var(--gcal-ink-2);
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 62ch;
    margin: 0;
}

/* ── "do this month" strip ──────────────────────────────────────────────── */

.gcal .gcal-now {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--gcal-forest-dk);
    color: #EAF4EE;
    border-radius: var(--gcal-r-lg);
    padding: 15px 20px;
    margin: 0 0 14px;
}
.gcal .gcal-now__lbl {
    flex: none;
    font-family: var(--gcal-mono);
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.78;
}
.gcal .gcal-now__txt {
    flex: 1 1 240px;
    min-width: 0;
    font-size: 14.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.gcal .gcal-now__txt b { font-weight: 600; }
.gcal .gcal-now__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: #FFF;
    color: var(--gcal-forest-dk);
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: var(--gcal-r-full);
    text-decoration: none;
    border: 1px solid transparent;
}
.gcal .gcal-now__cta:hover,
.gcal .gcal-now__cta:focus,
.gcal .gcal-now__cta:visited,
.gcal .gcal-now__cta:active {
    /* Sitewide `a:hover{color:var(--sienna)}` repaints any anchor we do not pin. */
    color: var(--gcal-forest-dk);
}
.gcal .gcal-now__cta:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }

/* The empty near term is the COMMON case, not a fault, and it must not read as
   one. Same strip, lower voltage: a statement of where the reader stands and a
   push toward the part of the panel that is actually working for them. */
.gcal .gcal-now--quiet {
    background: var(--gcal-cream-dk);
    color: var(--gcal-ink);
    border: 1px solid var(--gcal-line-soft);
}
.gcal .gcal-now--quiet .gcal-now__lbl { color: var(--gcal-ink-3); opacity: 1; }
.gcal .gcal-now--quiet .gcal-now__cta {
    background: var(--gcal-forest);
    color: #FFF;
}
.gcal .gcal-now--quiet .gcal-now__cta:hover,
.gcal .gcal-now--quiet .gcal-now__cta:focus,
.gcal .gcal-now--quiet .gcal-now__cta:visited,
.gcal .gcal-now--quiet .gcal-now__cta:active { color: #FFF; }
.gcal .gcal-now--quiet .gcal-now__cta:focus-visible { outline-color: var(--gcal-forest); outline-offset: 3px; }

/* ── the incorporation-date prompt ──────────────────────────────────────────
   The one input that turns ranges into dates, asked where the ranges are. Styled
   as an ASIDE, not a card: it must read as us asking for help, not as a second
   offer stacked on the panel (two offer-shaped blocks under ~120px apart read as
   a paywall — measured 2026-07-28). */

.gcal .gcal-incorp {
    background: var(--gcal-paper-warm);
    border: 1px solid var(--gcal-gold-bd);
    border-left: 3px solid var(--gcal-gold);
    border-radius: var(--gcal-r);
    padding: 15px 17px;
    margin: 0 0 14px;
    min-width: 0;
}
.gcal .gcal-incorp__h {
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gcal-ink);
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}
.gcal .gcal-incorp__p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--gcal-ink-2);
    margin: 0 0 12px;
    max-width: 62ch;
    overflow-wrap: anywhere;
}
.gcal .gcal-incorp__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.gcal .gcal-incorp__lab {
    flex: 1 1 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gcal-ink-2);
}
.gcal .gcal-incorp__date {
    flex: 1 1 170px;
    min-width: 0;
    max-width: 240px;
    min-height: 44px;
    font: inherit;
    font-size: 14px;
    color: var(--gcal-ink);
    background: #FFF;
    border: 1px solid var(--gcal-line);
    border-radius: var(--gcal-r);
    padding: 8px 11px;
}
.gcal .gcal-incorp__date:focus-visible {
    outline: 2px solid var(--gcal-forest);
    outline-offset: 2px;
}
.gcal .gcal-incorp__save,
.gcal .gcal-incorp__skip {
    flex: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: var(--gcal-r-full);
    cursor: pointer;
}
.gcal .gcal-incorp__save {
    background: var(--gcal-forest);
    color: #FFF;
    border: 1px solid var(--gcal-forest);
}
.gcal .gcal-incorp__save:hover { background: var(--gcal-forest-dk); }
.gcal .gcal-incorp__save[disabled] { opacity: 0.55; cursor: default; }
.gcal .gcal-incorp__skip {
    background: transparent;
    color: var(--gcal-ink-3);
    border: 1px solid var(--gcal-line);
}
.gcal .gcal-incorp__skip:hover { background: var(--gcal-cream-dk); color: var(--gcal-ink-2); }
.gcal .gcal-incorp__save:focus-visible,
.gcal .gcal-incorp__skip:focus-visible {
    outline: 2px solid var(--gcal-forest);
    outline-offset: 2px;
}
.gcal .gcal-incorp__month {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gcal-ink-2);
    cursor: pointer;
    min-height: 44px;
}
.gcal .gcal-incorp__month input { width: 17px; height: 17px; flex: none; accent-color: var(--gcal-forest); }
.gcal .gcal-incorp__month input:focus-visible { outline: 2px solid var(--gcal-forest); outline-offset: 2px; }
.gcal .gcal-incorp__err {
    font-size: 12.5px;
    line-height: 1.5;
    color: #C0392B;
    margin: 8px 0 0;
    overflow-wrap: anywhere;
}
.gcal .gcal-incorp__err[hidden] { display: none; }
.gcal .gcal-incorp__quiet { margin: 0 0 10px; }

/* ── the card shell ─────────────────────────────────────────────────────── */

.gcal .gcal-card {
    background: var(--gcal-paper);
    border: 1px solid var(--gcal-line-soft);
    border-radius: var(--gcal-r-lg);
    box-shadow: var(--gcal-sh);
    min-width: 0;
}

.gcal .gcal-card__top {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 17px 22px 14px;
    border-bottom: 1px solid var(--gcal-line-soft);
}
.gcal .gcal-card__h {
    font-family: var(--gcal-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--gcal-ink);
    margin: 0;
}
.gcal .gcal-card__rng {
    font-family: var(--gcal-mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--gcal-ink-3);
    margin-left: auto;
    overflow-wrap: anywhere;
}

.gcal .gcal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
}
.gcal--wide .gcal-body {
    grid-template-columns: var(--gcal-rail-w) minmax(0, 1fr);
}

/* ── the scroll-spy timeline rail (the signature element) ───────────────── */

.gcal .gcal-spy {
    min-width: 0;
    max-width: 100%;
}

/* NARROW: a horizontal period strip. The rail cannot pin without a viewport to
   pin against, and five stacked rows above the content is furniture on a phone
   (the mockup's own annotation makes exactly this argument about event count).
   Same DOM, same buttons, laid on its side. */
.gcal .gcal-spy__in {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--gcal-line-soft);
}
.gcal .gcal-spy__h {
    /* The "Timeline" heading only earns its space in rail mode. */
    display: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gcal-ink-3);
    margin: 0 0 12px;
}

.gcal .gcal-spy__item {
    flex: none;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    position: relative;
    min-height: 44px;
    max-width: 220px;
    padding: 7px 12px 7px 9px;
    border: 1px solid var(--gcal-line-soft);
    border-radius: var(--gcal-r);
    background: var(--gcal-cream);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.gcal .gcal-spy__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(28, 25, 23, 0.25);
    background: var(--gcal-paper);
    margin-top: 4px;
    position: relative;
    z-index: 1;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.gcal .gcal-spy__when {
    display: block;
    font-family: var(--gcal-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--gcal-ink-3);
    overflow-wrap: anywhere;
}
.gcal .gcal-spy__what {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gcal-ink-2);
    margin-top: 1px;
    overflow-wrap: anywhere;
}
.gcal .gcal-spy__n {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: var(--gcal-ink-3);
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.gcal .gcal-spy__item:hover .gcal-spy__what { color: var(--gcal-ink); }
.gcal .gcal-spy__item:focus-visible {
    outline: 2px solid var(--gcal-forest);
    outline-offset: 2px;
}
.gcal .gcal-spy__item[data-state="past"] .gcal-spy__dot {
    background: var(--gcal-forest);
    border-color: var(--gcal-forest);
}
.gcal .gcal-spy__item[data-state="active"] {
    border-color: var(--gcal-forest);
    background: var(--gcal-paper);
}
.gcal .gcal-spy__item[data-state="active"] .gcal-spy__dot {
    background: var(--gcal-forest);
    border-color: var(--gcal-forest);
    box-shadow: 0 0 0 4px var(--gcal-forest-glow);
}
.gcal .gcal-spy__item[data-state="active"] .gcal-spy__what { color: var(--gcal-ink); }
.gcal .gcal-spy__item[data-state="active"] .gcal-spy__when {
    color: var(--gcal-forest);
    font-weight: 500;
}

/* WIDE: the real rail. .gcal-spy is the reserved grid cell; .gcal-spy__in is
   position:fixed and JS owns left/top/width/max-height every frame. */
.gcal--wide .gcal-spy {
    border-right: 1px solid var(--gcal-line-soft);
    border-bottom: none;
}
.gcal--wide .gcal-spy__h { display: block; }
.gcal--wide .gcal-spy__in {
    position: fixed;
    top: 96px;                 /* placeholder only; JS owns this */
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    /* ⚠ NOT `overscroll-behavior: contain`. The rail sits directly beside the
       reading column, so a member scrolling with the pointer over it is common.
       With chaining blocked, the page STOPS the moment the rail's own (usually
       zero) scroll runs out: the wheel does nothing and the page appears frozen.
       Measured in the QA harness, which could not scroll past 600px with the
       cursor at x=400. Chaining is the correct default here. */
    overscroll-behavior: auto;
    padding: 20px 16px 20px 18px;
    border-bottom: none;
}
.gcal--wide .gcal-spy__in.is-clipped {
    /* Pinned near the end of the column the rail SHRINKS and cuts its last row.
       Without a cue that reads as breakage rather than as scroll. */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.gcal--wide .gcal-spy__in::-webkit-scrollbar { width: 6px; }
.gcal--wide .gcal-spy__in::-webkit-scrollbar-thumb {
    background: rgba(28, 25, 23, 0.18);
    border-radius: 3px;
}
.gcal--wide .gcal-spy__item {
    display: grid;
    max-width: none;
    width: 100%;
    /* A rail row is a control. A one-line row measured 35px tall, which is under
       the 44px floor even though it is 200px wide. */
    min-height: 44px;
    align-content: start;
    padding: 0 0 20px;
    border: none;
    border-radius: 0;
    background: none;
}
.gcal--wide .gcal-spy__item:last-child { padding-bottom: 0; }
/* the connecting thread */
.gcal--wide .gcal-spy__item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: -2px;
    width: 2px;
    background: rgba(28, 25, 23, 0.12);
}
.gcal--wide .gcal-spy__item:last-child::before { display: none; }
.gcal--wide .gcal-spy__item[data-state="past"]::before { background: rgba(45, 106, 79, 0.35); }
.gcal--wide .gcal-spy__item[data-state="active"] { border-color: transparent; background: none; }
.gcal--wide .gcal-spy__item:focus-visible { outline-offset: 3px; border-radius: 6px; }

/* ── the agenda ─────────────────────────────────────────────────────────── */

.gcal .gcal-agenda {
    padding: 20px 22px 6px;
    min-width: 0;
}
.gcal--tight .gcal-agenda { padding: 16px 14px 4px; }

.gcal .gcal-period {
    padding-bottom: 26px;
    /* The rail pins under the nav; a jump must not land the heading under it. */
    scroll-margin-top: 104px;
}
.gcal .gcal-period:last-child { padding-bottom: 6px; }
/* Rail jumps move focus INTO the period so the next Tab continues from there.
   It is only ever focused programmatically and the scroll is the sighted
   feedback, so the UA ring would be noise. Interactive children keep theirs. */
.gcal .gcal-period:focus { outline: none; }

.gcal .gcal-period__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 13px;
}
.gcal .gcal-period__dt {
    font-family: var(--gcal-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--gcal-ink);
    margin: 0;
    overflow-wrap: anywhere;
}
.gcal .gcal-period__tag {
    font-family: var(--gcal-mono);
    font-size: 10.5px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gcal-ink-3);
    border: 1px solid var(--gcal-line);
    border-radius: var(--gcal-r-full);
    padding: 2px 9px;
    overflow-wrap: anywhere;
}
.gcal .gcal-period__tag--mile {
    color: var(--gcal-forest-dk);
    border-color: var(--gcal-forest);
    background: var(--gcal-forest-lt);
}
.gcal .gcal-period__rule {
    flex: 1 1 20px;
    min-width: 20px;
    height: 1px;
    background: var(--gcal-line);
}
.gcal .gcal-period__n {
    flex: none;
    font-family: var(--gcal-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--gcal-ink-3);
}

/* The lead-in that makes a section worth scrolling. */
.gcal .gcal-period__lead {
    font-size: 13px;
    line-height: 1.55;
    color: var(--gcal-ink-2);
    margin: -4px 0 12px;
    max-width: 62ch;
    overflow-wrap: anywhere;
}

/* ⚠ THE ASK SECTION IS THE PRIMARY SURFACE, NOT A FOOTNOTE. For a founder whose
   doors are all 14+ months out — three of the engine's six test personas — the
   near term is legitimately EMPTY and the questions are the whole value: 22 to 29
   asks against 0 dated events is the common shape. It gets the panel's only
   tinted section field so it reads as a place to work, not as leftovers. */
.gcal .gcal-period--ask {
    background: var(--gcal-navy-lt);
    border-radius: var(--gcal-r);
    padding: 16px 16px 6px;
    margin-bottom: 20px;
}
.gcal .gcal-period--ask .gcal-period__tag {
    color: var(--gcal-navy);
    border-color: rgba(38, 70, 115, 0.3);
}
.gcal .gcal-period--ask .gcal-ev { background: #FFF; }
.gcal .gcal-period--ask .gcal-ask { background: var(--gcal-cream); }

/* Contests are terminal and deliberately secondary: real dates, long odds. They
   must never be mistaken for the plan. */
.gcal .gcal-period--contests { opacity: 0.92; }
.gcal .gcal-period--contests .gcal-period__dt {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--gcal-ink-2);
}
.gcal .gcal-period--contests .gcal-ev {
    padding: 11px 13px;
    background: var(--gcal-cream);
    border-left-color: var(--gcal-line);
}
.gcal .gcal-period--contests .gcal-ev__title { font-size: 14px; }

.gcal .gcal-period__more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 2px 0 0;
    padding: 8px 18px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gcal-forest);
    background: transparent;
    border: 1px solid var(--gcal-line);
    border-radius: var(--gcal-r-full);
    cursor: pointer;
}
.gcal .gcal-period__more:hover { background: var(--gcal-cream-dk); }
.gcal .gcal-period__more:focus-visible { outline: 2px solid var(--gcal-forest); outline-offset: 2px; }

/* ── event card ─────────────────────────────────────────────────────────── */

.gcal .gcal-ev {
    border: 1px solid var(--gcal-line-soft);
    border-radius: var(--gcal-r);
    padding: 14px 16px;
    margin: 0 0 10px;
    background: var(--gcal-paper);
    min-width: 0;
}
.gcal .gcal-ev:last-child { margin-bottom: 0; }

.gcal .gcal-ev--close { border-left: 3px solid var(--gcal-sienna); }
.gcal .gcal-ev--open  { border-left: 3px solid var(--gcal-forest); }
.gcal .gcal-ev--cond  { border-left: 3px dashed var(--gcal-gold); background: var(--gcal-paper-warm); }
.gcal .gcal-ev--task  { border-left: 3px solid var(--gcal-ink); background: linear-gradient(180deg, var(--gcal-paper) 0%, var(--gcal-cream-dk) 100%); }
.gcal .gcal-ev--ask   { border-left: 3px solid var(--gcal-navy); }

.gcal .gcal-ev__top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.gcal .gcal-ev__kind {
    flex: none;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 3px 8px;
    margin-top: 2px;
    border: 1px solid transparent;
}
.gcal .gcal-ev--open .gcal-ev__kind  { background: var(--gcal-forest-lt); color: var(--gcal-forest-dk); }
.gcal .gcal-ev--close .gcal-ev__kind { background: var(--gcal-sienna-lt); color: var(--gcal-sienna-dk); }
.gcal .gcal-ev--cond .gcal-ev__kind  { background: var(--gcal-gold-lt); color: var(--gcal-gold); border-color: var(--gcal-gold-bd); }
.gcal .gcal-ev--task .gcal-ev__kind  { background: var(--gcal-ink); color: #F5C518; }
.gcal .gcal-ev--ask .gcal-ev__kind   { background: var(--gcal-navy-lt); color: var(--gcal-navy); }

/* The engine's own honesty label on a contest row. Muted by design: it is a
   caveat riding on the item, not a second status. */
.gcal .gcal-ev__chip {
    flex: none;
    font-family: var(--gcal-mono);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--gcal-ink-3);
    background: var(--gcal-cream-dk);
    border-radius: 4px;
    padding: 3px 8px;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* OWNERSHIP CHIP — "You saved this" / "You are working on this".
   ⚠ This is the chip that makes the row THEIRS, and in the muted default it was the
   quietest element on a card whose loudest element was the generic kind badge. On a
   calendar that now mixes programs the member CHOSE with programs we matched them to,
   ownership is the distinction that matters most, so it carries the forest ink the rest
   of the surface reserves for the member's own state. It stays a chip, not a badge: the
   kind badge still leads, this qualifies it. */
.gcal .gcal-ev__chip--own {
    color: var(--gcal-forest-dk);
    background: var(--gcal-forest-lt);
    font-weight: 500;
}


.gcal .gcal-ev__nm { flex: 1 1 190px; min-width: 0; }

.gcal .gcal-ev__title {
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.3;
    color: var(--gcal-ink);
    margin: 0;
    /* Catalogue titles reach 157 characters and contain unbreakable strings. */
    overflow-wrap: anywhere;
}
.gcal .gcal-ev--ask .gcal-ev__title { color: var(--gcal-ink-2); }

.gcal .gcal-ev__why {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gcal-ink-3);
    margin-top: 3px;
    overflow-wrap: anywhere;
}

/* THE one timing statement for the event. The engine's date.label is the only
   string printed for it: a bucket heading groups, a runway schedules, and only
   this says WHEN. */
.gcal .gcal-ev__when {
    display: block;
    font-family: var(--gcal-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--gcal-ink-2);
    margin-top: 5px;
    overflow-wrap: anywhere;
}
.gcal .gcal-ev--close .gcal-ev__when { color: var(--gcal-sienna-dk); }

.gcal .gcal-ev__amt {
    flex: none;
    max-width: 100%;
    font-family: var(--gcal-mono);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gcal-forest);
    padding-top: 3px;
    overflow-wrap: anywhere;
}
.gcal .gcal-ev--close .gcal-ev__amt { color: var(--gcal-sienna-dk); }

/* ── the prep runway: a date is not a plan, the start-by date is ─────────── */

.gcal .gcal-prep {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed var(--gcal-line);
}
/* Only an action link inside: the rule would separate the card from nothing. */
.gcal .gcal-prep--bare {
    margin-top: 2px;
    padding-top: 0;
    border-top: none;
}

.gcal .gcal-prep__track {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 22px;
}
.gcal .gcal-prep__lead,
.gcal .gcal-prep__end {
    flex: none;
    font-family: var(--gcal-mono);
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--gcal-ink-2);
    white-space: nowrap;
}
.gcal .gcal-prep__lead { padding-right: 9px; }
.gcal .gcal-prep__end  { padding-left: 9px; }

.gcal .gcal-prep__bar {
    flex: 1 1 40px;
    min-width: 34px;
    height: 8px;
    border-radius: 4px;
    background: repeating-linear-gradient(115deg, rgba(45, 106, 79, 0.30) 0 6px, rgba(45, 106, 79, 0.11) 6px 12px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gcal .gcal-ev--close .gcal-prep__bar {
    background: repeating-linear-gradient(115deg, rgba(196, 83, 43, 0.32) 0 6px, rgba(196, 83, 43, 0.11) 6px 12px);
}
.gcal .gcal-ev--task .gcal-prep__bar {
    background: repeating-linear-gradient(115deg, rgba(28, 25, 23, 0.26) 0 6px, rgba(28, 25, 23, 0.09) 6px 12px);
}

.gcal .gcal-prep__wk {
    position: absolute;
    font-family: var(--gcal-mono);
    font-size: 9.5px;
    letter-spacing: 0.03em;
    line-height: 1.5;
    color: var(--gcal-ink-2);
    background: var(--gcal-paper);
    border: 1px solid var(--gcal-line);
    border-radius: var(--gcal-r-full);
    padding: 1px 8px;
    white-space: nowrap;
}
.gcal .gcal-ev--cond .gcal-prep__wk,
.gcal .gcal-ev--task .gcal-prep__wk { background: var(--gcal-cream-dk); }

.gcal .gcal-prep__cap {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--gcal-forest);
    margin-left: -3px;
    box-shadow: 0 0 0 3px var(--gcal-paper);
}
.gcal .gcal-ev--close .gcal-prep__cap { background: var(--gcal-sienna); }
.gcal .gcal-ev--task .gcal-prep__cap  { background: var(--gcal-ink); }

/* TIGHT: the three-part track cannot survive a 320px phone as one row. Stack the
   labels above and below the bar rather than letting nowrap push the panel wide
   (a nowrap row inside a content-sized chain propagates its intrinsic width UP). */
.gcal--tight .gcal-prep__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
}
.gcal--tight .gcal-prep__lead,
.gcal--tight .gcal-prep__end {
    white-space: normal;
    padding: 0;
    overflow-wrap: anywhere;
}
.gcal--tight .gcal-prep__bar { min-width: 0; margin: 2px 0; }
.gcal--tight .gcal-prep__wk { position: static; align-self: center; }
.gcal--tight .gcal-prep__cap { display: none; }

.gcal .gcal-prep__note {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gcal-ink-2);
    margin: 8px 0 0;
    overflow-wrap: anywhere;
}
.gcal .gcal-prep__note b { color: var(--gcal-ink); font-weight: 600; }

.gcal .gcal-ev__act {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.gcal .gcal-ev__act,
.gcal .gcal-ev__act:hover,
.gcal .gcal-ev__act:focus,
.gcal .gcal-ev__act:visited,
.gcal .gcal-ev__act:active { color: var(--gcal-forest); }
.gcal .gcal-ev__act:hover { text-decoration: underline; }
.gcal .gcal-ev__act:focus-visible {
    outline: 2px solid var(--gcal-forest);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The amber honesty chip on an estimated date. It gets its OWN line: sharing one
   with the action link crowded a caveat against a call to action, and the caveat
   is the half a reader must not skim past. */
.gcal .gcal-ev__est {
    display: flex;
    width: fit-content;
    align-items: flex-start;
    gap: 5px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--gcal-gold);
    background: var(--gcal-gold-lt);
    border: 1px solid var(--gcal-gold-bd);
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 9px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.gcal .gcal-ev__est svg { flex: none; margin-top: 2px; }

/* ── the ask card: a question is worth more than a date we cannot stand behind ── */

.gcal .gcal-ask {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--gcal-navy-lt);
    border-radius: var(--gcal-r);
}
.gcal .gcal-ask__q {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gcal-ink);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}
.gcal .gcal-ask__q b { font-weight: 600; }

.gcal .gcal-ask__btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.gcal .gcal-ask__btns button {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    padding: 7px 18px;
    min-height: 44px;
    border-radius: var(--gcal-r-full);
    border: 1px solid var(--gcal-navy);
    background: #FFF;
    color: var(--gcal-navy);
    cursor: pointer;
}
.gcal .gcal-ask__btns button:hover { background: var(--gcal-navy); color: #FFF; }
.gcal .gcal-ask__btns button:focus-visible {
    outline: 2px solid var(--gcal-navy);
    outline-offset: 2px;
}
.gcal .gcal-ask__btns button[data-gcal-ans="unsure"] {
    border-color: var(--gcal-line);
    color: var(--gcal-ink-3);
}
.gcal .gcal-ask__btns button[data-gcal-ans="unsure"]:hover {
    background: var(--gcal-cream-dk);
    color: var(--gcal-ink-2);
    border-color: var(--gcal-line);
}
.gcal .gcal-ask__btns button[disabled] { opacity: 0.55; cursor: default; }

/* the answered / skipped receipt — what the tap actually did */
.gcal .gcal-ask__done {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gcal-ink-2);
    margin: 0;
    overflow-wrap: anywhere;
}
.gcal .gcal-ask__done b { color: var(--gcal-ink); font-weight: 600; }
.gcal .gcal-ask__undo {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    min-height: 44px;
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--gcal-navy);
    text-decoration: underline;
    cursor: pointer;
}
.gcal .gcal-ask__undo:focus-visible { outline: 2px solid var(--gcal-navy); outline-offset: 2px; }

.gcal .gcal-period__ask-note {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gcal-ink-3);
    margin: 8px 0 0;
    overflow-wrap: anywhere;
}
.gcal .gcal-period__ask-note b { color: var(--gcal-ink); font-weight: 600; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.gcal .gcal-foot {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 13px 22px;
    border-top: 1px solid var(--gcal-line-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gcal-ink-3);
    min-width: 0;
}
.gcal .gcal-foot__txt { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }

/* ── motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .gcal .gcal-spy__dot { transition: none; }
}