/* Main column: tab switch, Coming Up list, Rolling / Career Grants / Major Funders cards.
   Base rules copied from the reference design (reference/Launch.dc.html), then its "Launch" override
   block (milestones as hairline rows, Open Now container, event cards), then phone-width rules. */

/* ── Wrapper + tab switch ──────────────────────────────────────────────────────────────────── */
.pg{display:flex;flex-direction:column;gap:18px;padding:4px 2px 8px}
.pg-sw{display:flex;gap:2px;background:#ECEBE5;border-radius:8px;padding:2px}
.pg-sw button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;font:inherit;font-size:13px;font-weight:500;border:0;background:none;color:#6E6D67;padding:4px 12px;border-radius:6px;cursor:pointer;white-space:nowrap}
.pg-sw .tb-ic{flex:none;opacity:.85}
.pg-sw button.on .tb-ic{color:var(--apps);opacity:1}
.pg-sw button:hover{color:#1C1B18}
.pg-sw button.on{background:#FFFFFF;color:#1C1B18;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pg-sw button:focus-visible{outline:2px solid var(--apps);outline-offset:1px}
.pg-view{align-self:flex-start;margin-bottom:-4px;max-width:100%}
.pg-view .vn{margin-left:6px;font-size:11.5px;font-weight:600;color:#8A8983}

/* ── Month sections ────────────────────────────────────────────────────────────────────────── */
.pg-mon{display:flex;flex-direction:column}
.pg-mh{margin:14px 0 8px;padding-top:10px;border-top:1px solid #DCDAD3;font-size:13px;font-weight:600;color:#3A3935}
.pg-mon:first-child .pg-mh{margin-top:2px}
.pg-view + .pg-mon .pg-mh{border-top:0;padding-top:0;margin-top:0}
.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-size:15px;font-weight:600;color:#6E6D67;font-variant-numeric:tabular-nums}

/* ── Rows (base) ───────────────────────────────────────────────────────────────────────────── */
.pg-row{--ink: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:8px;border:1px solid var(--run-line);background:var(--run-soft);color:var(--ink);cursor:pointer;transition:background .12s}
.pg-row.apps{--ink:var(--apps);background:var(--apps-soft);border-color:var(--apps-line)}
.pg-row.now{--ink:var(--apps);background:var(--now-soft);border-color:var(--apps)}
.pg-row.hl{box-shadow:0 0 0 2px var(--ink)}
.pg-row:hover{background:#FFFFFF}
.pg-row.apps:hover,.pg-row.now:hover{background:#F3F6FD}
.pg-open{font:inherit;border:0;background:none;padding:0;cursor:pointer}
.pg-open:focus-visible{outline:2px solid var(--apps);outline-offset:2px;border-radius:4px}
.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(--ink)}
.pg-pi{flex:none;color:var(--ink)}
.pg-blank{display:inline-block;width:18px;height:18px}
.pg-main b{display:block;min-width:0;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-type{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);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:999px;border:1px solid currentColor;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:7px;background:var(--apps-soft);border:1px solid var(--apps-line);color:var(--apps);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.pg-apply:hover{background:#DCE4F4;color:var(--apps)}
.pg-apply svg{opacity:.8}
.pg-apply:focus-visible{outline:2px solid var(--apps);outline-offset:1px}
/* "More info" icon link: only on hover / keyboard focus */
.pg-ic{width:28px;height:28px;border:0;border-radius:6px;background:none;color:var(--ink);display:flex;visibility:hidden;align-items:center;justify-content:center}
.pg-ic:hover{background:rgba(27,27,25,.06);color:var(--ink)}
.pg-item:hover .pg-ic,.pg-row:focus-within .pg-ic{visibility:visible}
.pg-ic:focus-visible{outline:2px solid var(--apps);outline-offset:0}

/* ── Event cards (founder events and program events) ──────────────────────────────────────── */
.pg-row.ev{--ink:#1C1B18;width:100%;font:inherit;text-align:left;background:#FFFFFF;border:1px solid #DCDAD3}
.pg-row.ev:hover,.pg-row.ev:focus-visible{background:#F7F6F2}
.pg-row.ev .pg-pi{color:var(--events,#138A7A)}
.pg-row.ev .pg-type{opacity:1;color:#5F5E58}
.pg-host{display:inline-flex;align-items:center;gap:6px}
.pg-host .pg-hl{width:16px;height:16px;color:#3A3935}
.pg-row.evt{--ink:#1C1B18;background:#FFFFFF;border-color:#DCDAD3}
.pg-row.evt:hover,.pg-row.evt:focus-visible{background:#F7F6F2}
.pg-row.evt .pg-type{opacity:1;color:#5F5E58}
.pg-host{flex:none;font-size:12px;color:#6E6D67;padding-right:8px;white-space:nowrap}

/* ── Program milestones: no container, a hairline from each side; text starts at a shared x ─── */
.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.apps::before,.pg-row.apps::after,.pg-row.start::before,.pg-row.start::after{content:"";flex:1;min-width:24px;height:1px;background:currentColor;opacity:.22}
.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:auto;flex:none;gap:7px}
.pg-row.apps .pg-main b,.pg-row.start .pg-main b{font-size:13px}
.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{font-size:13px;color:#A8A69F}

/* ── Open Now: one hatched container, rows split by thin lines, no day column ─────────────── */
.pg-list:has(.pg-row.now){gap:0;margin-left:34px;border:1px solid var(--apps);border-radius:10px;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,255,255,.45)!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 #DCDAD3;background:#FFFFFF;color:#3A3935;border-radius:8px;padding:6px 12px;cursor:pointer}
.pg-more:hover{border-color:#B4B2AA}
.pg-more:focus-visible{outline:2px solid var(--apps);outline-offset:2px}

/* ── Rolling / Career Grants / Major Funders cards ─────────────────────────────────────────── */
.rs-intro{margin:6px 0 14px;font-size:13px;color:#6E6D67}
.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 #DCDAD3;border-radius:10px;background:#FFFFFF;cursor:pointer;transition:background .12s}
.rs-c:hover{background:#F8F7F3}
.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:#1C1B18}
.rs-main .lg{width:26px;height:26px;margin-top:1px;color:var(--apps)}
.rs-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.rs-t b{font-size:15px;color:var(--apps)}
.rs-org{font-size:12.5px;color:#6E6D67}
.rs-p{font-size:13.5px;line-height:1.45;color:#3A3935}
.rs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.rs-chip{font-size:12px;padding:2px 8px;border-radius:999px;background:#F6F5F1;border:1px solid #E6E4DD;color:#3A3935}
.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:8px;color:#8A8983;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:#E6ECF8;color:#3B5998}
.rs-info:focus-visible{outline:2px solid var(--apps);outline-offset:1px}
.rs-tip{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);padding:4px 8px;border-radius:6px;background:#1C1B18;color:#FFFFFF;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:8px;border:1px solid #D6D4CC;background:#FFFFFF;color:#3A3935;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.rs-btn svg{color:#8A8983}
.rs-btn:hover{background:#F6F5F1;border-color:#B9B7AF}
.rs-btn.apply{background:var(--apps-soft);border-color:var(--apps-line);color:var(--apps);font-weight:600}
.rs-btn.apply svg{color:inherit;opacity:.8}
.rs-btn.apply:hover{background:#DCE4F4;border-color:var(--apps-line);color:var(--apps)}
.rs-btn:focus-visible{outline:2px solid var(--apps);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:580px){
  .pg{padding:4px 0 8px}
  .pg-view{overflow-x:auto;scrollbar-width:none}
  .pg-view::-webkit-scrollbar{display:none}
  .pg-sw button{padding:4px 8px;font-size:12.5px}
  .pg-view .vn{margin-left:4px}
  /* Open Now and event cards: name over detail, actions at the right */
  .pg-list:has(.pg-row.now){margin-left:0}
  .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: left-aligned after a short hairline; long names ellipsize */
  .pg-row.apps::before,.pg-row.start::before{width:12px;min-width:12px}
  .pg-row.apps::after,.pg-row.start::after{min-width:12px}
  /* Milestones wrap to two lines rather than truncating: name first, then the type label */
  .pg-row.apps,.pg-row.start{flex-wrap:wrap;height:auto;min-height:30px;padding:3px 0;row-gap:1px}
  .pg-row.apps::after,.pg-row.start::after{display:none}
  .pg-row.apps .pg-main,.pg-row.start .pg-main{flex:1 1 auto;min-width:0}
  .pg-row.apps .pg-type,.pg-row.start .pg-type{flex:0 0 auto;margin-left:22px}
  /* 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}
}
/* Narrow column: the four tabs (with icons) don't fit on one line, so the switch becomes a 2×2 grid */
@container pgmain (max-width:560px){
  .pg-view{display:grid;grid-template-columns:1fr 1fr;align-self:stretch;overflow:visible}
  .pg-sw button{text-align:center;padding:5px 8px}
}