/* ERCOT Watch — design system.
   Technical-document / data-terminal family: white broadsheet ground, monochrome
   foundation, Switzer for titles + IoskeleyMono for all data, semantic color only
   for status. Synthesized from eigenball (nav + in-cell bars), benchmarklist
   (home dashboard layout), usgraphics (industrial rules), every-iran (palette). */

@font-face {
  font-family: 'IoskeleyMono';
  src: url('/static/fonts/IoskeleyMono-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --mono: 'IoskeleyMono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  --sans: 'Switzer', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --body: -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --ink: #16181c;          /* primary text */
  --ink-2: #51555c;        /* secondary text */
  --muted: #8a8f98;        /* tertiary / labels */
  --faint: #b9bdc4;        /* disabled / 0-values */
  --rule: #e7e8ea;         /* hairline dividers */
  --rule-2: #d2d4d8;       /* stronger dividers */
  --ink-rule: #16181c;     /* the heavy header rule */
  --paper: #ffffff;        /* content background */
  --page: #e9eaec;         /* behind the content box */
  --row-hover: #f7f8f9;
  --fill: #eef0f2;         /* in-cell bar track */

  --accent: #1f4fe0;       /* electric blue — links, active nav, primary accent */
  --accent-soft: #eaf0ff;

  /* Semantic status palette (tinted bg + colored border + text), reused for RR
     status, meeting status, ballot outcome, feed-event accents. */
  --ok-bd: #1a9d4b;  --ok-bg: rgba(26,157,75,.10);  --ok-tx: #0c6e31;
  --no-bd: #d24b46;  --no-bg: rgba(210,75,70,.10);   --no-tx: #9a2e2a;
  --wait-bd: #c08401; --wait-bg: rgba(192,132,1,.12); --wait-tx: #875c00;
  --neu-bd: #9aa0a8; --neu-bg: rgba(22,24,28,.05);    --neu-tx: #565b62;
}

* { box-sizing: border-box; }

html { background: var(--page); }

body {
  font-family: var(--body);
  color: var(--ink);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: 1180px;
  margin: 22px auto 64px;
  background: var(--paper);
  border: 1px solid #c9ccd1;
  box-shadow: 2px 2px 0 0 #d6d8db;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Masthead + nav (two-tier, eigenball) -------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 22px 12px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark .spark { color: var(--accent); }
.masthead .navcounts {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.masthead .navcounts a { color: var(--ink-2); }
.masthead .navcounts a:hover { color: var(--accent); text-decoration: none; }
.masthead .navcounts .n {
  color: var(--muted);
  font-size: 10px;
  vertical-align: super;
  margin-left: 2px;
}
.masthead .spacer { flex: 1; }
.masthead .searchbox {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--rule-2);
  padding: 4px 10px;
}
.masthead .searchbox:hover { border-color: var(--accent); color: var(--accent); }

.tabs {
  display: flex;
  gap: 0;
  padding: 0 14px;
  border-bottom: 2px solid var(--ink-rule);
  overflow-x: auto;
}
.tabs a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 14px 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* ----- Page body ----------------------------------------------------------- */

.main { padding: 20px 22px 28px; }

.pagehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 14px;
  flex-wrap: wrap;
}
.pagehead h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  margin: 0;
  letter-spacing: -.01em;
}
.pagehead .sub { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* Tiny ALL-CAPS section label with a hairline rule (benchmarklist). */
.seclabel {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 5px;
  margin: 26px 0 8px;
  border-bottom: 1px solid var(--ink-rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.seclabel:first-child { margin-top: 4px; }
.seclabel .more { font-weight: 400; letter-spacing: .04em; }
.seclabel .more a { color: var(--muted); }

/* ----- Data tables (eigenball) -------------------------------------------- */

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.grid thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  vertical-align: bottom;
  padding: 4px 10px 6px;
  border-bottom: 1.5px solid var(--ink-rule);
  white-space: nowrap;
}
table.grid thead th.num { text-align: right; }
table.grid tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
table.grid tbody tr:hover { background: var(--row-hover); }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.mono, table.grid td .mono { font-family: var(--mono); }

/* bold-id + grey-title row pattern */
.idcell { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.idcell a { color: var(--ink); }
.idcell a:hover { color: var(--accent); }
.idpill { display: inline-block; font-family: var(--mono); font-weight: 700;
          font-size: 11px; padding: 1px 6px; margin-right: 5px;
          border: 1px solid var(--rule-2); border-radius: 2px;
          color: var(--ink); white-space: nowrap; }
/* The whole title cell is one link; hovering it highlights the id pill and
   the title text. */
.rrlink { color: var(--ink-2); }
.rrlink:hover { color: var(--accent); text-decoration: none; }
/* Keep the type-coloured pill on hover; the title turning accent signals the link. */

/* Titles wrap to full text, so rows grow tall — float every cell to the top. */
.rr-grid tbody td { vertical-align: top; }

/* RR type colour scheme — each revision-request type gets a muted tint (a hue
   per type at consistent saturation/lightness, following the bd/bg/tx pattern of
   the status badges) so the list scans by type at a glance. */
.idpill.t-nprr    { border-color: hsl(222 60% 50%); background: hsl(222 60% 50% / .10); color: hsl(222 55% 38%); }
.idpill.t-nogrr   { border-color: hsl(190 65% 42%); background: hsl(190 65% 42% / .10); color: hsl(190 62% 28%); }
.idpill.t-pgrr    { border-color: hsl(150 52% 40%); background: hsl(150 52% 40% / .10); color: hsl(150 55% 27%); }
.idpill.t-obdrr   { border-color: hsl(95 48% 40%);  background: hsl(95 48% 40% / .12);  color: hsl(95 55% 27%); }
.idpill.t-smogrr  { border-color: hsl(45 78% 42%);  background: hsl(45 78% 42% / .15);  color: hsl(40 82% 31%); }
.idpill.t-vcmrr   { border-color: hsl(25 78% 48%);  background: hsl(25 78% 48% / .12);  color: hsl(22 78% 37%); }
.idpill.t-copmgrr { border-color: hsl(5 70% 52%);   background: hsl(5 70% 52% / .10);   color: hsl(5 65% 42%); }
.idpill.t-rmgrr   { border-color: hsl(330 58% 52%); background: hsl(330 58% 52% / .10); color: hsl(330 55% 42%); }
.idpill.t-lpgrr   { border-color: hsl(285 44% 52%); background: hsl(285 44% 52% / .12); color: hsl(285 44% 44%); }
.idpill.t-rrgrr   { border-color: hsl(255 48% 56%); background: hsl(255 48% 56% / .12); color: hsl(255 45% 46%); }
.idpill.t-scr     { border-color: hsl(220 10% 50%); background: hsl(220 10% 50% / .10); color: hsl(220 10% 38%); }
.title-soft { color: var(--ink-2); }
.titlelink { font-weight: 400; color: var(--ink); }       /* wrapping title link (long meeting names) */
.titlelink:hover { color: var(--accent); }
.titlelink.dim-name { color: var(--muted); }              /* cancelled / rescheduled meetings, dimmed like pro-forma agenda items */
.dim { color: var(--muted); }
.faint { color: var(--faint); }
.datecell { font-family: var(--mono); font-size: 12px; color: var(--ink-2);
            white-space: nowrap; }

/* in-cell magnitude bar */
.bar {
  position: relative;
  background: var(--fill);
  height: 14px;
  min-width: 40px;
  border-radius: 1px;
}
.bar > span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  opacity: .32;
  border-radius: 1px;
}
.bar > b {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink);
  padding: 0 5px;
  line-height: 14px;
}

/* boolean glyphs */
.glyph-yes { color: var(--ok-bd); font-family: var(--mono); }
.glyph-urgent { color: var(--no-bd); font-weight: 700; }
.glyph-no { color: var(--faint); }

/* ----- Status badges ------------------------------------------------------- */

.badge {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1.5px 6px 1px;
  border: 1px solid var(--neu-bd);
  background: var(--neu-bg);
  color: var(--neu-tx);
  border-radius: 2px;
  white-space: nowrap;
  display: inline-block;
}
.badge.s-approved { border-color: var(--ok-bd); background: var(--ok-bg); color: var(--ok-tx); }
.badge.s-rejected { border-color: var(--no-bd); background: var(--no-bg); color: var(--no-tx); }
.badge.s-pending  { border-color: var(--wait-bd); background: var(--wait-bg); color: var(--wait-tx); }
.badge.s-withdrawn,
.badge.s-neutral  { border-color: var(--neu-bd); background: var(--neu-bg); color: var(--neu-tx); }

/* ----- Filter pills (segmented) ------------------------------------------- */

.filters {
  display: flex;
  gap: 12px 34px;
  align-items: center;
  flex-wrap: wrap;
  margin: 2px 0 12px;
  font-family: var(--mono);
}
.filtsel { display: inline-flex; align-items: center; gap: 11px; }
.toggle {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); padding: 4px 12px;
  border: 1px solid var(--rule-2);
}
.toggle:hover { background: var(--row-hover); text-decoration: none; }
.toggle.on { background: var(--no-bg); border-color: var(--no-bd); color: var(--no-tx); }
/* Switch — an iOS-style toggle (track + sliding knob) for the Urgent filter. */
.switch { display: inline-flex; align-items: center; gap: 8px;
          color: var(--ink-2); font-family: var(--mono); font-size: 10px;
          font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.switch:hover { text-decoration: none; }
.switch:hover .switch-track { border-color: var(--no-bd); }
.switch-track { position: relative; flex: none; width: 30px; height: 16px;
                border-radius: 8px; background: var(--fill);
                border: 1px solid var(--rule-2);
                transition: background .12s, border-color .12s; }
.switch-knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px;
               border-radius: 50%; background: var(--muted);
               transition: transform .12s, background .12s; }
.switch.on .switch-track { background: var(--no-bg); border-color: var(--no-bd); }
.switch.on .switch-knob { transform: translateX(14px); background: var(--no-tx); }
.switch.on .switch-label { color: var(--no-tx); }
.sorth { color: var(--muted); white-space: nowrap; }
.sorth:hover { color: var(--ink); text-decoration: none; }
.sorth.act { color: var(--accent); }
.pillgroup { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule-2); }
.pillgroup a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 4px 10px;
  border-right: 1px solid var(--rule-2);
}
.pillgroup a:last-child { border-right: none; }
.pillgroup a:hover { background: var(--row-hover); text-decoration: none; }
.pillgroup a.on { background: var(--accent); color: #fff; }
.filterlabel {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.filterselect {
  font-family: var(--mono); font-size: 11px; padding: 4px 8px;
  border: 1px solid var(--rule-2); background: #fff; color: var(--ink);
  max-width: 260px;
}
.filterselect:hover { border-color: var(--accent); }

/* ----- Home dashboard layout (benchmarklist) ------------------------------ */

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.cols3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0 34px; }

/* date-led mini list */
.feedlist { width: 100%; border-collapse: collapse; font-size: 13px; }
.feedlist td { padding: 4px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.feedlist td.d { font-family: var(--mono); font-size: 11.5px; color: var(--muted);
                 white-space: nowrap; width: 1%; padding-right: 12px; }
.feedlist td.r { text-align: right; white-space: nowrap; width: 1%; padding-left: 12px; }
.feedlist .id { font-family: var(--mono); font-weight: 700; }
.feedlist .id a { color: var(--ink); }
.feedlist .id a:hover { color: var(--accent); }

/* snapshot ranked mini-list with bars */
.rank { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rank td { padding: 3px 0; vertical-align: middle; }
.rank td.k { font-family: var(--mono); font-weight: 700; white-space: nowrap;
             padding-right: 12px; width: 1%; }
.rank td.k a { color: inherit; text-decoration: none; }
.rank td.k a:hover { color: var(--accent); text-decoration: underline; }
.rank td.v { font-family: var(--mono); text-align: right; width: 1%;
             padding-left: 10px; color: var(--ink-2); }
.rank .barwrap { background: var(--fill); height: 12px; border-radius: 1px; }
.rank .barwrap > span { display: block; height: 100%; background: var(--accent);
                        opacity: .30; border-radius: 1px; }

/* ----- Committees sitemap (hierarchical) ----------------------------------- */

.sitemap { margin: 8px 0; }
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap ul ul {
  margin: 2px 0 10px 7px;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
}
.sitemap li { padding: 2px 0; }
.sitemap > ul > li { padding: 10px 0 6px; border-top: 1px solid var(--rule); }
.sitemap > ul > li:first-child { border-top: none; }
.cmte-node { color: var(--ink); }
.cmte-node:hover { color: var(--accent); }
.cmte-node .acr { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sitemap > ul > li > .cmte-node {
  font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: -.01em;
}
.sitemap > ul > li > .cmte-node .acr { font-size: 12px; }
.sitemap ul ul .cmte-node { font-size: 13px; color: var(--ink-2); }
.sitemap ul ul .cmte-node:hover { color: var(--accent); }

/* ----- Detail pages -------------------------------------------------------- */

.detailhead { margin: 4px 0 18px; }
.detailhead .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.detailhead h1 {
  font-family: var(--sans); font-weight: 700; font-size: 22px;
  margin: 4px 0 8px; letter-spacing: -.01em; line-height: 1.25;
}
.detailhead h1 .idnum { font-family: var(--mono); }
.metarow { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
           font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.metarow .k { color: var(--muted); }

.factgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
            gap: 10px 28px; margin: 14px 0 8px; }
.fact .k { font-family: var(--mono); font-size: 9.5px; font-weight: 700;
           letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
           display: block; margin-bottom: 1px; }
.fact .v { font-size: 13px; }
.fact .v.mono { font-family: var(--mono); }

.prose { font-size: 13.5px; color: var(--ink-2); max-width: 70ch; line-height: 1.6; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-family: var(--mono); font-size: 11px; padding: 1px 7px;
        border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2); }
.chip a { color: var(--ink-2); }

/* timeline (RR milestones + reused on home where useful) */
.timeline { list-style: none; margin: 6px 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 70px; top: 4px; bottom: 4px;
                    width: 1px; background: var(--rule-2); }
.timeline li { position: relative; padding: 6px 0 6px 92px; min-height: 22px; }
.timeline .when { position: absolute; left: 0; top: 7px; font-family: var(--mono);
                  font-size: 11px; color: var(--muted); width: 64px; text-align: right; }
.timeline .dot { position: absolute; left: 66px; top: 10px; width: 9px; height: 9px;
                 border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.timeline .body { font-size: 13px; }
.timeline .gov { font-family: var(--mono); font-weight: 700; font-size: 11px;
                 color: var(--ink); margin-right: 6px; }
.timeline .next { color: var(--muted); font-size: 12px; }

/* agenda list */
.agenda { list-style: none; margin: 6px 0; padding: 0; font-size: 13px; }
.agenda li { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.agenda .ord { font-family: var(--mono); color: var(--muted); width: 26px;
               text-align: right; flex: none; }
.agenda li.dim { color: var(--muted); }   /* pro-forma items, de-emphasized */
.agenda .itemdocs { list-style: none; margin: 3px 0 2px; padding: 0 0 0 14px;
                    font-size: 12px; }
.agenda .itemdocs li { display: block; border: none; padding: 1px 0; }

/* ----- Search form --------------------------------------------------------- */

.searchform { border: 1px solid var(--rule-2); padding: 14px 16px; margin-bottom: 6px;
              background: #fcfcfd; }
.searchform .row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.searchform .f { display: flex; flex-direction: column; gap: 3px; }
.searchform label { font-family: var(--mono); font-size: 9.5px; font-weight: 700;
                    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.searchform input[type=text], .searchform select {
  font-family: var(--mono); font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--rule-2); background: #fff; color: var(--ink); }
.searchform input.q { min-width: 320px; }
.searchform button {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 7px 18px; background: var(--accent);
  color: #fff; border: 1px solid var(--accent); cursor: pointer; }
.searchform button:hover { background: #1740c4; }
.searchform .check { flex-direction: row; align-items: center; gap: 6px; }

.notice { font-family: var(--mono); font-size: 12px; color: var(--ink-2);
          padding: 10px 0; }
.notice.err { color: var(--no-tx); }
.empty { font-family: var(--mono); font-size: 12.5px; color: var(--muted);
         padding: 22px 0; text-align: center; }

.extlink::after { content: ' ↗'; color: var(--faint); font-size: 11px; }

@media (max-width: 760px) {
  .cols2, .cols3 { grid-template-columns: 1fr; gap: 0; }
  .shell { margin: 0; border-left: none; border-right: none; }
}