/* Main column: view tabs (a select on narrow columns), the Coming Up list with its event filter, the Open Now view,
   and the Rolling / Career Grants / Major Funders cards. Field-guide styling per redesign/HANDOFF.md.
   Rows color themselves through --row (stone for program dates, lake blue for applications). */

/* ── Wrapper + view tabs: index tabs along a rule ──────────────────────────────────────────── */
.pg{display:flex;flex-direction:column;gap:18px;padding:4px 2px 8px}
.pg-sw{display:flex;gap:4px;padding:0 0 0 2px;border-bottom:1px solid var(--rule)}
.pg-sw button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;font:inherit;font-size:14px;font-weight:500;border:1px solid transparent;border-bottom:0;margin-bottom:-1px;background:none;color:var(--muted);padding:5px 12px 6px;border-radius:3px 3px 0 0;cursor:pointer;white-space:nowrap}
.pg-sw .tb-ic{flex:none;opacity:.85}
.pg-sw button:hover{color:var(--ink)}
.pg-sw button.on{background:var(--paper-2);border-color:var(--card-line);color:var(--ink)}
.pg-sw button.on .tb-ic{color:var(--forest);opacity:1}
.pg-sw button[data-tab="opennow"] .tb-ic{color:var(--apps);opacity:1}
.pg-sw button:focus-visible{outline:2px solid var(--forest);outline-offset:1px}
.pg-view{align-self:stretch;margin-bottom:-4px;max-width:100%}
.pg-view .vn,.fg-viewsel .vn{margin-left:6px;font-size:11.5px;font-weight:500;color:var(--muted)}
.pg-view .vn-dark,.fg-viewsel .vn-dark{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;border-radius:999px;background:var(--apps);color:var(--cream);font-size:11px;font-weight:700;line-height:16px}
/* Narrow column: the tabs become a dropdown (a button and a listbox, styled like the header menu) */
.fg-viewsel{display:none;position:relative}
.fg-vs-btn{display:flex;align-items:center;gap:9px;width:100%;height:44px;padding:0 14px;border:1px solid var(--card-line);border-radius:4px;background:var(--paper-2);color:var(--forest);font-family:var(--f-display);font-size:17px;font-weight:600;text-align:left;cursor:pointer}
.fg-vs-t{flex:1;min-width:0}
.fg-vs-btn:hover{border-color:#A79E86}
.fg-vs-btn:focus-visible{outline:2px solid var(--forest);outline-offset:1px}
.fg-vs-btn[aria-expanded="true"]{border-color:var(--forest)}
.fg-vs-chev{flex:none;transition:transform .18s}
.fg-vs-btn[aria-expanded="true"] .fg-vs-chev{transform:rotate(180deg)}
.fg-vs-ic{flex:none;color:var(--forest)}
.fg-vs-btn .vn,.fg-vs-list .vn{margin-left:0}
.fg-vs-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;margin:0;padding:4px;list-style:none;background:var(--paper-2);border:1px solid var(--card-line);border-radius:4px;box-shadow:0 12px 32px rgba(31,51,36,.22)}
.fg-vs-list[hidden]{display:none}
.fg-vs-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:3px;color:var(--ink);font-size:15.5px;font-weight:600;cursor:pointer;outline:none}
.fg-vs-list li .fg-vs-ic{color:var(--muted)}
.fg-vs-list li:hover,.fg-vs-list li:focus-visible,.fg-vs-list li:focus{background:var(--hover-stone)}
.fg-vs-list li.on{color:var(--forest)}
.fg-vs-list li.on .fg-vs-ic{color:var(--forest)}
.fg-vs-ck{flex:none;visibility:hidden;color:var(--forest)}
.fg-vs-list li.on .fg-vs-ck{visibility:visible}
.fg-vs-list li[data-tab="opennow"] .fg-vs-ic{color:var(--apps)}
@media (prefers-reduced-motion:reduce){.fg-vs-chev{transition:none}}

/* ── Event filter: a small segmented control set into the rule above the first month ──────── */
.fg-evtg{display:flex;justify-content:center;position:relative;margin:10px 0 -6px}
.fg-evtg::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--rule)}
.fg-seg{position:relative;display:inline-flex;gap:0;padding:2px;background:var(--paper);border:1px solid var(--card-line);border-radius:4px;box-shadow:0 0 0 6px var(--paper)}
.fg-seg button{font:inherit;font-size:12.5px;font-weight:600;padding:4px 12px;border:0;border-radius:3px;background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
.fg-seg button:hover{color:var(--ink)}
.fg-seg button.on{background:var(--paper-2);color:var(--forest);box-shadow:0 1px 0 rgba(42,41,34,.08);border:1px solid var(--card-line);padding:3px 11px}
.fg-seg button:focus-visible{outline:2px solid var(--forest);outline-offset:1px}

/* ── Phones: Coming Up → Timeline (the Mini-Map), and the calendar at the foot of Coming Up ─── */
.pg-tl{margin-top:6px}
.pg-cal{margin-top:10px;padding-top:14px;border-top:1px solid var(--rule)}

/* ── Month sections ────────────────────────────────────────────────────────────────────────── */
.pg-mon{display:flex;flex-direction:column}
.pg-mh{margin:14px 0 8px;padding-top:10px;border-top:1px solid var(--rule);font-family:var(--f-display);font-variant-caps:small-caps;letter-spacing:.06em;font-size:15px;font-weight:600;color:var(--forest)}
.pg-mon:first-child .pg-mh{margin-top:2px}
.pg-view + .pg-mon .pg-mh,.fg-evtg + .pg-mon .pg-mh{border-top:0;padding-top:0;margin-top:4px}
.pg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pg-item{display:flex;align-items:center;gap:10px}
.pg-day{width:24px;flex:none;text-align:right;font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pg-empty{margin:8px 0 0;font-size:14px;color:var(--muted)}

/* ── Rows (base) ───────────────────────────────────────────────────────────────────────────── */
.pg-row{--row:var(--run);position:relative;flex:1;min-width:0;height:42px;box-sizing:border-box;display:flex;align-items:center;gap:16px;padding:0 6px 0 14px;border-radius:3px;border:1px solid var(--run-line);background:var(--run-soft);color:var(--row);cursor:pointer;transition:background .12s}
.pg-row.apps{--row:var(--apps);background:var(--apps-soft);border-color:var(--apps-line)}
.pg-row.now{--row:var(--apps);background:var(--now-soft);border-color:var(--apps)}
.pg-row.hl{box-shadow:0 0 0 2px var(--row)}
.pg-row:hover{background:var(--hover-paper)}
.pg-row.apps:hover,.pg-row.now:hover{background:#ECF1EF}
.pg-open{font:inherit;border:0;background:none;padding:0;cursor:pointer}
.pg-open:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:3px}
.pg-main{width:260px;flex:none;min-width:0;display:flex;align-items:center;gap:9px;color:inherit;text-align:left}
.pg-main .lg{color:var(--row)}
.pg-pi{flex:none;color:var(--row)}
.pg-blank{display:inline-block;width:18px;height:18px}
.pg-main b{display:block;min-width:0;font-size:15px;font-weight:600;color:var(--row);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-type{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--row);opacity:.75;white-space:nowrap}
.pg-ti{flex:none}
.pg-sp{flex:1}
.pg-acts{display:flex;align-items:center;gap:2px;flex:none}
.pg-inv{font-size:11px;font-weight:600;padding:1px 8px;border-radius:2px;border:1px solid var(--events);color:var(--events);line-height:16px}
.pg-apply{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 12px;margin-right:0;border-radius:3px;background:var(--paper-2);border:1px solid var(--apps);color:var(--apps);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.pg-apply:hover{background:var(--apps);color:var(--cream)}
.pg-apply svg{opacity:.8}
.pg-apply:focus-visible{outline:2px solid var(--forest);outline-offset:1px}
/* "More info" icon link: only on hover / keyboard focus */
.pg-ic{width:28px;height:28px;border:0;border-radius:3px;background:none;color:var(--row);display:flex;visibility:hidden;align-items:center;justify-content:center}
.pg-ic:hover{background:rgba(42,41,34,.06);color:var(--row)}
.pg-item:hover .pg-ic,.pg-row:focus-within .pg-ic{visibility:visible}
.pg-ic:focus-visible{outline:2px solid var(--forest);outline-offset:0}

/* ── Event cards (events and program events): paper cards with a fern spine ───────────────── */
.pg-row.ev,.pg-row.evt{--row:var(--ink);background:var(--paper-2);border:1px solid var(--card-line);box-shadow:inset 3px 0 0 var(--events)}
.pg-row.ev{width:100%;font:inherit;text-align:left}
.pg-row.ev:hover,.pg-row.ev:focus-visible,.pg-row.evt:hover,.pg-row.evt:focus-visible{background:var(--hover-paper)}
.pg-row.ev.hl,.pg-row.evt.hl{box-shadow:inset 3px 0 0 var(--events),0 0 0 2px var(--events)}
.pg-row.ev .pg-pi,.pg-row.evt .pg-pi{color:var(--events)}
.pg-row.ev .pg-type,.pg-row.evt .pg-type{opacity:1;color:var(--muted)}
.pg-host{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding-right:8px;white-space:nowrap}
.pg-host .pg-hl{width:16px;height:16px;color:var(--ink)}

/* ── Program milestones: no container; the name sits in a fixed column so every label starts at the same x.
      Dotted hairlines run from each side and a dotted leader joins the name to its label. ─────────────── */
.pg-row.apps,.pg-row.start{background:none!important;border:0!important;box-shadow:none!important;height:30px;padding:0;gap:10px;justify-content:flex-start}
.pg-row.start{--row:var(--run)}
.pg-row.apps::before,.pg-row.apps::after,.pg-row.start::before,.pg-row.start::after{content:"";flex:1;min-width:24px;height:1px;background:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 5px);opacity:.45}
.pg-row.apps::before,.pg-row.start::before{flex:none;width:calc((100% - var(--msw, 420px)) / 2 - 10px)}
.pg-row.apps .pg-main,.pg-row.start .pg-main{width:250px;flex:none;gap:7px;background:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 5px) 27px 50%/calc(100% - 27px) 1px no-repeat}
.pg-row.apps .pg-main b,.pg-row.start .pg-main b{position:relative;padding-right:7px;font-size:13.5px;background:var(--paper)}
.pg-row.start .pg-main b{color:#5E5949}
.pg-row.apps .pg-type,.pg-row.start .pg-type{margin-left:2px}
.pg-row.apps .pg-sp,.pg-row.apps .pg-acts,.pg-row.start .pg-sp,.pg-row.start .pg-acts{display:none}
.pg-row.apps:hover .pg-main b,.pg-row.apps:focus-within .pg-main b,.pg-row.start:hover .pg-main b,.pg-row.start:focus-within .pg-main b,.pg-row.hl.apps .pg-main b,.pg-row.hl.start .pg-main b{text-decoration:underline}
.pg-item:has(.pg-row.apps) .pg-day,.pg-item:has(.pg-row.start) .pg-day{color:#A79E86}

/* ── Open Now view: one solid soft-blue plate, rows split by thin lines, no day column ─────── */
.pg-list:has(.pg-row.now){gap:0;margin-top:2px;border:1px solid var(--apps);border-radius:4px;overflow:hidden;background:var(--now-soft)}
.pg-list:has(.pg-row.now) .pg-day{display:none}
.pg-list:has(.pg-row.now) .pg-item + .pg-item{border-top:1px solid var(--apps-line)}
.pg-row.now{background:none!important;border:0!important;border-radius:0;box-shadow:none!important}
.pg-row.now:hover{background:rgba(255,253,245,.55)!important}
.pg-row.now .pg-open:focus-visible{outline-offset:1px}

/* ── Show more ─────────────────────────────────────────────────────────────────────────────── */
.pg-more{align-self:flex-start;margin-top:10px;font:inherit;font-size:13px;border:1px solid var(--card-line);background:var(--paper-2);color:var(--ink);border-radius:3px;padding:6px 12px;cursor:pointer}
.pg-more:hover{border-color:#A79E86}
.pg-more:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* ── Rolling / Career Grants / Major Funders cards ─────────────────────────────────────────── */
.rs-intro{margin:6px 0 14px;font-size:14px;color:var(--muted)}
.rs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rs-c{position:relative;display:flex;align-items:flex-end;gap:14px;padding:14px 48px 14px 16px;border:1px solid var(--card-line);border-radius:4px;background:var(--paper-2);cursor:pointer;transition:background .12s}
.rs-c:hover{background:var(--hover-paper)}
.rs-cover{position:absolute;inset:0;z-index:1;border-radius:inherit}
.rs-main{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;color:var(--ink)}
.rs-main .lg{width:26px;height:26px;margin-top:1px;color:var(--forest)}
.rs-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.rs-t b{font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--forest)}
.rs-org{font-size:13px;color:var(--muted)}
.rs-p{font-size:14px;line-height:1.45;color:var(--ink)}
.rs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.rs-chip{font-size:12px;padding:2px 8px;border-radius:2px;background:var(--paper);border:1px solid var(--rule);color:var(--ink)}
.rs-kind{font-weight:600;color:var(--apps);border-color:var(--apps-line)}
.rs-info{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:3px;color:var(--muted);text-decoration:none;transition:background .12s,color .12s}
.rs-info:hover,.rs-info:focus-visible,.rs-c:hover:not(:has(.rs-acts:hover)) .rs-info{background:var(--hover-forest);color:var(--forest)}
.rs-info:focus-visible{outline:2px solid var(--forest);outline-offset:1px}
.rs-tip{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);padding:4px 8px;border-radius:3px;background:var(--ink);color:var(--cream);font-size:12px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.rs-info:hover .rs-tip,.rs-info:focus-visible .rs-tip,.rs-c:hover:not(:has(.rs-acts:hover)) .rs-tip{opacity:1}
.rs-acts{position:relative;z-index:2;flex:none;display:flex;gap:8px;align-items:center;margin-right:-34px}
.rs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border-radius:3px;border:1px solid var(--card-line);background:var(--paper-2);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.rs-btn svg{color:var(--muted)}
.rs-btn:hover{background:var(--hover-stone);border-color:#A79E86}
.rs-btn.apply{border-color:var(--apps);color:var(--apps);font-weight:600}
.rs-btn.apply svg{color:inherit;opacity:.8}
.rs-btn.apply:hover{background:var(--apps);border-color:var(--apps);color:var(--cream)}
.rs-btn:focus-visible{outline:2px solid var(--forest);outline-offset:1px}

@media (prefers-reduced-motion:reduce){.pg-row,.rs-c,.rs-info,.rs-tip{transition:none}}

/* ── Narrow main column (phones, and the 861–1000px range where the left column takes space) ── */
/* Keyed to the column's own width via a container query, not the viewport. */
#main{container:pgmain / inline-size}
@container pgmain (max-width:600px){
  /* Five tabs no longer fit on one line: show the select instead */
  .pg-sw.pg-view{display:none}
  .fg-viewsel{display:block}
}
@container pgmain (max-width:580px){
  .pg{padding:4px 0 8px}
  .pg-list{gap:6px}
  .pg-item{gap:8px}
  .pg-day{width:22px}
  /* Open Now and event cards: name over detail, actions at the right */
  .pg-row.now,.pg-row.ev,.pg-row.evt{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;height:auto;min-height:42px;padding:8px 6px 8px 12px}
  .pg-row.now .pg-main,.pg-row.ev .pg-main,.pg-row.evt .pg-main{width:auto;grid-column:1;grid-row:1}
  .pg-row.now .pg-type,.pg-row.ev .pg-type,.pg-row.evt .pg-type{grid-column:1;grid-row:2;padding-left:27px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .pg-row.evt .pg-type:empty{display:none}
  .pg-row .pg-sp{display:none}
  .pg-row.now .pg-acts,.pg-row.evt .pg-acts,.pg-row.ev .pg-host{grid-column:2;grid-row:1 / span 2;align-self:center}
  .pg-row.ev .pg-host{padding-right:4px}
  /* Milestones: name over label, no hairlines or leaders */
  .pg-row.apps,.pg-row.start{flex-wrap:wrap;height:auto;min-height:30px;padding:4px 0;row-gap:1px}
  .pg-row.apps::before,.pg-row.start::before,.pg-row.apps::after,.pg-row.start::after{display:none}
  .pg-row.apps .pg-main,.pg-row.start .pg-main{width:auto;flex:1 1 100%;min-width:0;background:none}
  .pg-row.apps .pg-type,.pg-row.start .pg-type{flex:1 1 100%;margin-left:27px;font-size:12.5px}
  /* Cards: actions under the text */
  .rs-c{flex-direction:column;align-items:stretch;padding:14px 46px 14px 14px}
  .rs-acts{margin-right:-32px;justify-content:flex-end}
}