/* L4-51: schedule pages (/schedules, /schedules/<page>). Head: eyebrow, title, one line. Board: dark in both themes, like the
   departures board; jump links as board headings (never pills), one section per vendor table with a family filter (JS only) and
   one real table: name with ids as code, the status word (plain text), one column per phase, days on small tiles, links. Under
   760px each row stacks and every phase cell shows its label. Tiles from gates.css, the Action panel from action.css. */
.sc{padding-bottom:72px}
.sc-head{padding:4px 0 30px}
.sc-head .eyebrow{color:var(--ink-3)}
.sc-title{margin:0 0 14px;font-size:clamp(32px,4.2vw,54px);line-height:1.04;letter-spacing:-.035em}
.sc-say{margin:0;max-width:62ch;font:700 clamp(19px,1.9vw,24px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.sc-compare{margin:12px 0 0;max-width:70ch;font-size:16px;color:var(--ink-2)}
.sc-compare a,.sc-how-body a,.sc-data a,.sc-sec-note a{color:var(--link)}

/* The board. --tw here is the small tile size of the days column. */
.sc-board {
  --bd:#0b0907;
  --bd-ink:#ffbf47;
  --bd-text:#efe4d0;
  --bd-dim:#b3a791;
  --bd-line:#ffffff17;
  --tw:16px;
  --g:2px;
  padding:14px clamp(16px,2.6vw,34px) 18px;
  border-radius:24px;
  background:linear-gradient(#ffffff0a,#0000 140px),var(--bd);
  color:var(--bd-text);
  border:1px solid #000;
  box-shadow:inset 0 1px 0 #ffffff14,0 0 0 7px #1d1a16,0 0 0 8px #34302a,0 34px 70px -24px #000c;
}
.sc-board-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;padding:8px 0 14px}
.sc-board-title{display:flex;align-items:center;gap:12px;margin:0;font:800 clamp(24px,2.6vw,34px)/1 var(--display);color:#fff4de}
.sc-glyph{width:26px;height:26px;color:var(--bd-ink)}
.sc-board-meta{margin:0;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bd-dim)}
.sc-jump{display:flex;flex-wrap:wrap;gap:0 30px;border-top:1px solid var(--bd-line);border-bottom:1px solid var(--bd-line)}
.sc-jump a {
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  min-height:52px;
  padding:14px 0 10px;
  font:800 clamp(18px,2vw,24px)/1 var(--display);
  letter-spacing:-.02em;
  color:var(--bd-dim);
  text-decoration:none;
  white-space:nowrap;
}
.sc-jump a:hover{color:#fff4de;box-shadow:inset 0 -4px 0 var(--bd-ink)}
.sc-board a:focus-visible,.sc-select:focus-visible{outline:3px solid var(--bd-ink);outline-offset:3px;border-radius:4px}
.sc-count{font:500 14px var(--mono);letter-spacing:.06em;color:var(--bd-ink)}

/* A section per vendor table */
.sc-sec,.sc-brown{padding-top:26px;scroll-margin-top:90px}
.sc-sec-h{margin:0 0 4px;font:800 26px/1.1 var(--display);color:#fff4de;display:flex;align-items:baseline;gap:10px}
.sc-sec-note{margin:0 0 6px;font-size:15px;color:var(--bd-dim)}
.sc-board .sc-sec-note a{color:var(--bd-text)}
.sc-month{color:var(--bd-text)}
.sc-empty{margin:8px 0 4px;color:var(--bd-dim)}
.sc-empty[hidden],.sc-filter[hidden],.sc-table[hidden],.sc-ended[hidden]{display:none}
.sc-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 0}
.sc-filter-l{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bd-dim)}
.sc-select {
  min-height:44px;
  max-width:100%;
  padding:8px 12px;
  border:1px solid #ffffff2e;
  border-radius:10px;
  background:#16130f;
  color:#fff4de;
  font:600 15px var(--sans);
}
.sc-shown{margin:0;font-size:13px;color:var(--bd-dim)}

/* The tables */
.sc-table{width:100%;border-collapse:collapse;font-size:15px}
.sc-table thead th {
  padding:10px 12px 8px 0;
  text-align:left;
  vertical-align:bottom;
  font:500 11px/1.3 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bd-dim);
}
.sc-table tbody tr{border-top:1px solid var(--bd-line);scroll-margin-top:90px}
.sc-table tbody tr[hidden]{display:none}
.sc-table tbody tr:target{background:#ffffff0f}
.sc-table th[scope=row],.sc-table td{padding:12px 14px 12px 0;vertical-align:baseline;text-align:left}
.sc-name{min-width:16ch;font-weight:400}
.sc-n{display:block;font-weight:800;color:#fff4de}
.sc-codes{display:flex;flex-wrap:wrap;gap:2px 10px}
.sc-codes code,.sc-brown code{background:none;padding:0;font:500 13px/1.45 var(--mono);color:var(--bd-ink);overflow-wrap:anywhere}
.sc-meta{display:block;font:500 12px var(--mono);color:var(--bd-dim)}
.sc-word{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.st-soon .sc-word{color:var(--bd-ink);font-weight:800}
.st-past .sc-word{color:#f3a462}
.st-ended .sc-word,.st-none .sc-word{color:var(--bd-dim)}
.sc-ph{font:500 14px var(--mono);white-space:nowrap;color:var(--bd-text)}
.sc-ph.is-past{color:var(--bd-dim)}
.sc-ph.is-next{color:var(--bd-ink);font-weight:700}
.sc-ph.is-text{white-space:normal;min-width:10ch}
.sc-approx{font:italic 500 13px var(--sans);color:var(--bd-dim)}
.sc-ph.is-next .sc-approx{color:var(--bd-ink)}
.sc-ph.is-empty{color:var(--bd-dim)}
.sc-days{color:var(--bd-ink)}
.sc-days-l{display:none}
.st-ended .sc-n{color:var(--bd-text)}
.sc-go{white-space:nowrap}
.sc-go a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:14px;font-weight:800;color:var(--bd-ink)}
.sc-go a.sc-src{font:500 13px var(--mono);color:var(--bd-dim);text-decoration:underline;text-underline-offset:3px}
.sc-go a:hover{color:#fff4de}
.sc-go a:not(.sc-src)::after {
  content:'';
  width:14px;
  height:14px;
  background:currentColor;
  -webkit-mask:var(--arrow) center/14px no-repeat;
  mask:var(--arrow) center/14px no-repeat;
}
/* The shared 14px arrowRight icon as a mask (one CSS rule, not one SVG per row). */
.sc-go{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' \
stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9m-4-4 4 4-4 4'/%3E%3C/svg%3E")}
.sc-ended{margin-top:14px;border-top:1px solid var(--bd-line)}
.sc-ended>summary {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  cursor:pointer;
  font:800 20px var(--display);
  color:var(--bd-dim);
}
.sc-ended>summary:hover{color:#fff4de}
.sc-brown-list{list-style:none;margin:6px 0 0;padding:0}
.sc-brown-list li{padding:10px 0;border-top:1px solid var(--bd-line)}
.sc-brown-list b{color:#fff4de;margin-right:8px}
.sc-brown-days{display:block;margin-top:2px;font-size:14px;color:var(--bd-ink)}
.sc-brown-days .is-past{color:var(--bd-dim);text-decoration:line-through}

/* Index: one card per vendor table, grouped by page */
.sc-group{margin:22px 0 4px;font:800 22px/1.2 var(--display)}
.sc-group a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff4de;text-decoration:none}
.sc-group a:hover{color:var(--bd-ink)}
.sc-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.sc-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name soon" "what soon" "meta meta";
  gap:4px 12px;
  height:100%;
  padding:14px 16px;
  border:1px solid var(--bd-line);
  border-top:3px solid var(--bd-ink);
  border-radius:14px;
  background:#ffffff06;
  color:var(--bd-text);
  text-decoration:none;
}
.sc-card:hover{background:#ffffff0f}
.sc-card-name{grid-area:name;font:800 22px/1.15 var(--display);color:#fff4de}
.sc-card-what{grid-area:what;font-size:14px;color:var(--bd-dim)}
.sc-card-soon{grid-area:soon;display:flex;align-items:center;gap:6px;align-self:start;--tw:20px}
.sc-card-k{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bd-dim)}
.sc-card-meta{grid-area:meta;font-size:13px;color:var(--bd-ink)}

/* After the board */
.sc-next{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:4px}
.sc-next li{color:var(--ink-2)}
.sc-next a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:10px;font-weight:800;color:var(--link)}
.sc .ga-panel{margin-top:36px}
.sc-action-more{margin:8px 0 0}
.sc-action-more a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800;color:var(--link)}
.sc-how{margin-top:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-how>summary{display:flex;align-items:center;justify-content:space-between;min-height:60px;cursor:pointer;list-style:none;
  font:800 22px var(--display);letter-spacing:-.02em}
.sc-how>summary::-webkit-details-marker{display:none}
.sc-how>summary::after{content:'+';font:500 26px var(--mono);color:var(--ink-3)}
.sc-how[open]>summary::after{content:'–'}
.sc-how-body{padding:4px 0 28px;max-width:80ch;line-height:1.65}
.sc-how-body p{margin:0 0 10px}
.sc-how-h{margin:24px 0 8px;font-size:19px}
.sc-method{margin:0 0 10px;padding-left:22px}
.sc-method li+li{margin-top:8px}
.sc-facts{margin:0 0 10px;display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:6px 16px;font-size:15px}
.sc-facts dt{font-weight:800}
.sc-facts dd{margin:0;color:var(--ink-2)}
.sc-sources{margin:0;padding-left:20px;font-size:15px;color:var(--ink-2)}
.sc-data{margin-top:16px;font-size:14px;color:var(--ink-3)}

/* L4-52: Kubernetes version pages (/schedules/kubernetes/<eks-1-35 | 1-35>) and the version links on the full table. The board
   holds the status word, days left on tiles and every phase as a definition list; sections under it are plain text. The command
   panel comes from action.css (.ga-yaml). */
.sc-n a{color:inherit;text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:4px}
.sc-n a:hover{color:var(--bd-ink)}
.sv-now{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:4px 0 16px}
.sv-status{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:17px;color:var(--bd-text)}
.sv-days{display:flex;align-items:center;gap:10px;margin:0;color:var(--bd-ink);--tw:22px}
.sv-days-k{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bd-dim)}
.sv-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 24px;margin:0;padding:16px 0 6px;
  border-top:1px solid var(--bd-line)}
.sv-phases dt{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bd-dim)}
.sv-phases dd{margin:4px 0 0;font:500 16px var(--mono);color:var(--bd-text)}
.sv-phases dd.is-past{color:var(--bd-dim)}
.sv-phases dd.is-next,.sv-phases .is-next .sc-approx{color:var(--bd-ink);font-weight:700}
.sv-guide{margin-top:16px}
.sv-sec{margin-top:40px;max-width:80ch}
.sv-sec .h3{margin:0 0 12px}
.sv-sec p{margin:0 0 10px;color:var(--ink-2)}
.sv-sec .sc-next{margin-top:8px}
.sv-sec .sc-facts a{color:var(--link)}
.sv-faq{grid-template-columns:1fr;gap:4px}
.sv-faq dd+dt{margin-top:12px}
.sv-cmd{margin-top:8px}
.sv-minors{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:16px 0 0;font:600 15px var(--mono)}
.sv-minors-l{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sv-minors a{display:inline-flex;align-items:center;min-height:44px;color:var(--link)}
.sv-minors [aria-current]{color:var(--ink)}
.sv-names{margin-top:12px}

/* Narrow: each row stacks. Line one: the name and its ids; then the status and the days; then one line per phase with its
   label; then the links. Rows keep their table roles; the header row stays for screen readers (only hidden from view). */
@media(max-width:760px){
  .sc-board{padding:6px 14px 12px;border-radius:18px;--tw:14px}
  .sc-jump{gap:0 18px}
  .sc-table,.sc-table tbody{display:block}
  .sc-table[hidden]{display:none}
  .sc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sc-table tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 0}
  .sc-table th[scope=row],.sc-table td{padding:0}
  .sc-name{flex:1 1 100%;min-width:0}
  .sc-st{flex:1 1 auto;order:1}
  .sc-days{display:flex;align-items:center;gap:8px;margin-left:auto;order:2}
  .sc-ph{order:3}
  .sc-go{order:4}
  .sc-days-l{display:inline;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bd-dim)}
  .sc-ph{flex:1 1 100%;display:flex;justify-content:space-between;gap:12px;white-space:normal}
  .sc-ph::before{content:attr(data-label);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bd-dim)}
  .sc-ph.is-empty{display:none}
  .sc-go{flex:1 1 100%;white-space:normal}
  .sc-facts{grid-template-columns:1fr}
  .sc-cards{grid-template-columns:1fr}
}