/* NetRichmond public channel directory. Uses shared site typography and color tokens. */
.tvc-page { color: var(--ink, #172c34); }
.tvc-hero .eyebrow { text-transform: uppercase; letter-spacing: .14em; }
.tvc-section { padding-top: 22px; }
.tvc-wrap { max-width: 1120px; }

.tvc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 18px 0 14px; }
.tvc-view-switch { display: inline-flex; align-items: center; border: 1px solid var(--line, #dfe8e3); padding: 4px; border-radius: 10px; background: #f6f9f7; gap: 3px; }
.tvc-view-button { appearance: none; border: 0; border-radius: 7px; padding: 10px 17px; cursor: pointer; color: var(--ink, #172c34); background: transparent; font: 700 13px/1.2 var(--font-body, "DM Sans", sans-serif); }
.tvc-view-button.is-active { color: #fff; background: var(--deep, #16333b); box-shadow: 0 1px 3px rgba(10,30,35,.15); }
.tvc-view-button:focus-visible, .tvc-page input:focus-visible, .tvc-page select:focus-visible, .tvc-page button:focus-visible, .tvc-page a:focus-visible, .tvc-page summary:focus-visible { outline: 3px solid #dfa93e; outline-offset: 2px; }
.tvc-map-link { text-decoration: none; }
.tvc-controls { display: grid; grid-template-columns: minmax(220px, 1.7fr) minmax(190px, 1fr) minmax(165px, .9fr) auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--line, #dfe8e3); border-radius: 12px; background: #fff; box-shadow: 0 3px 14px rgba(25,50,45,.04); }
.tvc-controls label { display: block; margin: 0 0 6px; color: #536965; font-size: 11px; font-weight: 800; }
.tvc-controls input, .tvc-controls select, .tvc-source-card select, .tvc-station-channels select { display: block; width: 100%; min-width: 0; min-height: 39px; padding: 8px 10px; border: 1px solid #d6e1db; border-radius: 8px; color: var(--ink, #172c34); background: #fff; font: 600 12px/1.3 var(--font-body, "DM Sans", sans-serif); }
.tvc-reset { min-height: 39px; white-space: nowrap; }
.tvc-results-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 2px 9px; }
.tvc-results-line p { margin: 0; font-size: 11px; color: #506762; }
.tvc-results-line #tvc-results-count { font-weight: 800; color: var(--deep, #16333b); }
.tvc-results-line .tvc-sort-note { color: #70827c; }
.tvc-channel-list { display: grid; gap: 8px; }
.tvc-channel-row, .tvc-station-card { min-width: 0; overflow: hidden; border: 1px solid #dfe8e3; border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(24,50,43,.035); }
.tvc-channel-row[hidden], .tvc-station-card[hidden], .tvc-empty[hidden] { display: none !important; }
.tvc-channel-main { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 15px; }
.tvc-channel-number, .tvc-station-primary { align-self: center; display: flex; align-items: center; justify-content: center; min-height: 43px; border-radius: 8px; background: #edf5f0; color: var(--deep, #16333b); font: 800 18px/1 var(--font-display, Manrope, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tvc-channel-copy { min-width: 0; }
.tvc-channel-copy h2 { margin: 0; color: var(--deep, #16333b); font: 800 15px/1.3 var(--font-display, Manrope, sans-serif); }
.tvc-channel-copy p { margin: 3px 0 0; color: #60756f; font-size: 11px; line-height: 1.35; }
.tvc-channel-copy small { display: block; margin-top: 4px; color: #778780; font-size: 10px; line-height: 1.4; }
.tvc-on-now { margin-top: 9px; padding: 9px 10px; border: 1px solid #f0d19a; border-left: 3px solid #d98414; border-radius: 8px; background: #fff8eb; color: #3c3d32; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 500px; }
.tvc-on-now-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.tvc-on-now-badge { color: #82500c; background: #ffedca; border-radius: 999px; padding: 3px 7px; font-size: 10px; line-height: 1.2; font-weight: 900; }
.tvc-on-now-network { color: #68736b; font-size: 10px; }
.tvc-on-now-title { color: #173a42; font-size: 12px; line-height: 1.35; }
.tvc-on-now-episode { color: #445c58; font-size: 11px; line-height: 1.35; }
.tvc-on-now-end { color: #6f7970; font-size: 10px; }
.tvc-on-now-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.tvc-on-now-links a { color: #125e57; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.tvc-on-now-note { color: #6f7970; font-size: 9px; line-height: 1.4; }
.tvc-on-now-note a { color: inherit; text-decoration: underline; }

.tvc-status { display: inline-flex; align-items: center; justify-content: center; max-width: 145px; min-width: 90px; padding: 6px 8px; border-radius: 6px; background: #eef1ef; color: #596a64; font-size: 10px; font-weight: 800; line-height: 1.3; text-align: center; }
.tvc-status[data-status="received"] { background: #e1f3e7; color: #246d43; }
.tvc-status[data-status="intermittent"] { background: #fff0d5; color: #88601a; }
.tvc-status[data-status="not-received"] { background: #fbe6e2; color: #954238; }
.tvc-status[data-status="mixed"] { background: #e9e7f7; color: #5e518b; }
.tvc-details-button { appearance: none; padding: 8px 11px; border: 1px solid #d9e5de; border-radius: 7px; color: #156f6c; background: #fff; font: 800 11px/1.2 var(--font-body, "DM Sans", sans-serif); cursor: pointer; }
.tvc-details-button[aria-expanded="true"] { color: #fff; background: var(--deep, #16333b); border-color: var(--deep, #16333b); }
.tvc-channel-details { padding: 0 15px 15px; border-top: 1px solid #edf1ee; background: #fbfdfb; }
.tvc-channel-details[hidden] { display: none; }
.tvc-details-intro { margin: 12px 0; color: #62766f; font-size: 11px; line-height: 1.55; }
.tvc-source-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 210px); align-items: center; gap: 8px 15px; margin-top: 8px; padding: 12px; border: 1px solid #e0e9e3; border-radius: 8px; background: #fff; }
.tvc-source-heading { min-width: 0; }
.tvc-source-heading strong { display: block; color: var(--deep, #16333b); font-size: 12px; }
.tvc-source-heading span { display: block; margin-top: 2px; color: #788880; font-size: 10px; line-height: 1.4; }
.tvc-source-heading label { display: none; }
.tvc-technical { grid-column: 1 / -1; padding-top: 7px; border-top: 1px solid #eff3f0; }
.tvc-technical summary, .tvc-station-channels summary { color: #17716f; font-size: 11px; font-weight: 800; cursor: pointer; padding: 5px 0; }
.tvc-technical dl { display: grid; grid-template-columns: minmax(105px, .5fr) minmax(0, 1fr); gap: 5px 12px; margin: 9px 0; }
.tvc-technical dt { color: #71827b; font-size: 10px; font-weight: 800; }
.tvc-technical dd { margin: 0; color: #344c48; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.tvc-source-links { display: flex; flex-wrap: wrap; gap: 8px 15px; margin: 8px 0 3px; }
.tvc-source-links a, .tvc-technical > a { color: #126f6d; font-size: 10px; font-weight: 800; text-decoration: none; }
.tvc-station-view-note { margin: 0 0 12px; padding: 11px 13px; border-radius: 8px; background: #f3f8f5; color: #506762; font-size: 11px; line-height: 1.5; }
.tvc-station-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: 12px; }
.tvc-station-card { padding: 0; }
.tvc-station-top { display: grid; grid-template-columns: 66px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px; background: linear-gradient(115deg,#f6fbf8,#fff 75%); border-bottom: 1px solid #edf1ee; }
.tvc-station-primary { min-width: 55px; padding: 0 6px; font-size: 16px; }
.tvc-station-top h2 { margin: 0; color: var(--deep, #16333b); font: 800 14px/1.25 var(--font-display, Manrope, sans-serif); }
.tvc-station-top p { margin: 3px 0 0; color: #657972; font-size: 10px; }
.tvc-station-site { padding: 0 14px; color: #76867f; font-size: 10px; line-height: 1.45; }
.tvc-station-channels { padding: 0 13px 12px; }
.tvc-station-channels ul { margin: 5px 0 0; padding: 0; list-style: none; border: 1px solid #e5ede8; border-radius: 8px; overflow: hidden; }
.tvc-station-channels li { display: grid; grid-template-columns: 44px minmax(0,1fr) minmax(125px,150px); align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #edf1ee; }
.tvc-station-channels li:last-child { border-bottom: 0; }
.tvc-mini-number { color: #176e6b; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tvc-mini-copy { min-width: 0; }
.tvc-mini-copy strong { display: block; color: #273f3b; font-size: 10px; line-height: 1.35; }
.tvc-mini-copy small { display: block; margin-top: 2px; color: #788880; font-size: 9px; line-height: 1.35; }
.tvc-station-channels select { min-height: 32px; font-size: 10px; padding: 5px 6px; }
.tvc-station-card > .tvc-technical { display: block; margin: 0 13px; padding: 8px 0 12px; }
.tvc-help { margin: 35px 0 12px; padding-top: 23px; border-top: 1px solid #e1eae4; }
.tvc-help-heading { margin-bottom: 10px; }
.tvc-kicker { color: #52817b; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 900; }
.tvc-help-heading h2 { margin: 5px 0; color: var(--deep, #16333b); font: 800 22px/1.2 var(--font-display, Manrope, sans-serif); }
.tvc-help-heading p { margin: 0 0 13px; color: #6b7e77; font-size: 12px; }
.tvc-help > details { margin-top: 8px; padding: 0 15px; border: 1px solid #e0e9e3; border-radius: 9px; background: #fff; }
.tvc-help > details > summary { padding: 13px 0; color: var(--deep, #16333b); font-size: 12px; font-weight: 800; cursor: pointer; }
.tvc-help-content { padding: 0 0 13px; color: #536862; font-size: 11px; line-height: 1.7; }
.tvc-help-content p { margin: 0 0 10px; }
.tvc-help-content ul { padding-left: 18px; }
.tvc-help-content a { color: #126f6d; font-weight: 700; }
.tvc-bottom-note { margin: 20px 0 0; color: #71827b; font-size: 10px; line-height: 1.5; }
.tvc-sr-only { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media (max-width: 950px) {
  .tvc-controls { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .tvc-reset { width: 100%; }
  .tvc-station-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 650px) {
  .tvc-section { padding-top: 12px; }
  .tvc-toolbar { align-items: stretch; }
  .tvc-view-switch { width: 100%; }
  .tvc-view-button { flex: 1; }
  .tvc-map-link { width: 100%; text-align: center; justify-content: center; }
  .tvc-controls { grid-template-columns: minmax(0,1fr); padding: 12px; }
  .tvc-channel-main { grid-template-columns: 60px minmax(0,1fr) auto; gap: 9px; padding: 10px; }
  .tvc-channel-number { min-height: 42px; font-size: 16px; }
  .tvc-channel-copy h2 { font-size: 13px; }
  .tvc-channel-copy small { font-size: 9px; }
  .tvc-channel-main > .tvc-status { grid-column: 2; justify-self: start; max-width: none; min-width: 0; }
  .tvc-details-button { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .tvc-channel-details { padding: 0 10px 10px; }
  .tvc-source-card { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 10px; }
  .tvc-source-heading label { display: block; margin-top: 8px; color: #536965; font-size: 10px; font-weight: 800; }
  .tvc-source-card select { min-height: 37px; }
  .tvc-results-line { align-items: flex-start; flex-direction: column; gap: 4px; }
  .tvc-station-channels li { grid-template-columns: 44px minmax(0,1fr); align-items: start; }
  .tvc-station-channels li select { grid-column: 2; width: 100%; }
  .tvc-station-top { grid-template-columns: 58px minmax(0,1fr); }
  .tvc-station-top > .tvc-status { grid-column: 2; justify-self: start; }
  .tvc-station-primary { min-width: 50px; }
  .tvc-technical dl { grid-template-columns: 95px minmax(0,1fr); }
}
@media print {
  .tvc-preview-note, .tvc-toolbar, .tvc-controls, .tvc-details-button, .tvc-map-link { display:none !important; }
  .tvc-channel-row, .tvc-station-card { break-inside: avoid; box-shadow:none; }
  .tvc-channel-details[hidden], .tvc-station-list[hidden], .tvc-technical:not([open]) > *:not(summary) { display:block !important; }
  .tvc-help > details:not([open]) > .tvc-help-content { display:none; }
}

/* Public launch layout: channels are the primary view; no reception testing controls. */
.tvc-hero-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tvc-controls { grid-template-columns:minmax(220px,1.7fr) minmax(180px,.8fr) minmax(165px,.9fr) auto; }
.tvc-channel-main { grid-template-columns:76px minmax(0,1fr) auto; }
.tvc-row-details { align-self:center; }
.tvc-row-details > summary { list-style:none; cursor:pointer; padding:8px 11px; border:1px solid #d9e5de; border-radius:7px; color:#156f6c; background:#fff; font:800 11px/1.2 var(--font-body,"DM Sans",sans-serif); white-space:nowrap; }
.tvc-row-details > summary::-webkit-details-marker { display:none; }
.tvc-row-details[open] > summary { color:#fff; background:var(--deep,#16333b); border-color:var(--deep,#16333b); }
.tvc-row-details > .tvc-channel-details { margin-top:10px; border-radius:0 0 10px 10px; }
.tvc-channel-row { padding:0; }
.tvc-channel-row[hidden] { display:none!important; }
.tvc-source-card { display:block; }
.tvc-technical { margin-top:10px; }
.tvc-source-links { margin-top:10px; }
.tvc-bottom-navigation { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin:18px 0 6px; padding:13px 15px; border:1px solid #dfe8e3; border-radius:10px; background:#fff; }
.tvc-bottom-navigation a { font-size:12px; font-weight:800; text-decoration:none; }
.tvc-help { margin-top:32px; }
.tvc-help-content .tv-channel-basics { display:grid; margin:8px 0 0; padding:0; border:0; background:transparent; }
.tv-channel-basics { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.82fr); gap:20px 26px; padding:0; margin:0; border:0; background:transparent; }
.tv-channel-basics-intro h3 { margin:5px 0 8px; color:var(--deep,#16333b); font:800 21px/1.2 var(--font-display,Manrope,sans-serif); }
.tv-channel-basics-intro p { margin:0; color:#4c6262; font-size:13px; line-height:1.7; }
.tv-channel-example { overflow:hidden; align-self:start; border:1px solid #dfe9e3; border-radius:11px; background:#fff; }
.tv-channel-example-title { display:flex; justify-content:space-between; gap:10px; padding:11px 13px; color:#fff; background:var(--deep,#16333b); font-size:10px; font-weight:800; }
.tv-channel-example-title span:last-child { color:#d7e9e0; text-align:right; }
.tv-channel-example-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:9px; align-items:center; padding:9px 13px; border-bottom:1px solid #edf1ee; }
.tv-channel-example-row:last-child { border-bottom:0; }
.tv-channel-example-row > strong { color:var(--teal,#1c7775); font-size:13px; font-variant-numeric:tabular-nums; }
.tv-channel-example-row b { display:block; color:var(--ink,#172c34); font-size:12px; }
.tv-channel-example-row small { display:block; padding-top:2px; color:#687976; font-size:10px; }
.tv-channel-example-row em { padding:4px 6px; border-radius:5px; color:#246d43; background:#e2f4e8; font-size:9px; font-style:normal; font-weight:800; }
.tv-channel-basics-notes { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tv-channel-basics-notes > div { padding-top:13px; border-top:1px solid #dce9e2; }
.tv-channel-basics-notes strong { display:block; color:var(--deep,#16333b); font-size:11px; }
.tv-channel-basics-notes p { margin:5px 0 0; color:#4f6365; font-size:11px; line-height:1.6; }
.tvc-help-content { padding:0 0 15px; }
.tvc-help > details[open] { padding-bottom:0; }
@media(max-width:760px) { .tvc-controls{grid-template-columns:minmax(0,1fr);} .tvc-hero-links .button{width:100%;justify-content:center;} .tvc-channel-main{grid-template-columns:60px minmax(0,1fr) auto;gap:9px;padding:10px;} .tvc-channel-basics{grid-template-columns:minmax(0,1fr);} .tv-channel-basics-notes{grid-template-columns:minmax(0,1fr);gap:10px;} .tv-channel-basics-notes>div{padding-top:9px;} .tvc-bottom-navigation{flex-direction:column;} }
@media(max-width:520px) { .tv-channel-example-title{flex-direction:column;gap:3px;} .tv-channel-example-title span:last-child{text-align:left;} .tvc-channel-copy small{font-size:9px;} }

/* Optional per-source reception tracking, shared with the station directory. */
.tvc-reception-note { margin: 0 0 14px; padding: 10px 13px; border: 1px solid #dfe9e3; border-radius: 8px; background: #f7faf8; color: #62766f; font-size: 11px; line-height: 1.55; }
.tvc-reception-note span { display: inline-block; margin-left: 5px; color: #176e6b; font-weight: 800; }
.tvc-source-reception { display: grid; grid-template-columns: minmax(90px, auto) minmax(140px, 1fr); align-items: center; gap: 8px; margin: 8px 0 10px; padding: 8px 0; border-bottom: 1px solid #eff3f0; }
.tvc-source-reception label { color: #536965; font-size: 10px; font-weight: 800; }
.tvc-source-reception select { min-height: 34px; padding: 6px 8px; font-size: 11px; }
.tvc-status[data-status="untested"] { background: #eef1ef; color: #596a64; }
.tvc-status[data-status="mixed"] { background: #e9e7f7; color: #5e518b; }
@media(max-width:650px) { .tvc-source-reception { grid-template-columns: minmax(0,1fr); gap: 5px; } .tvc-reception-note span { margin-left: 0; } }
@media print { .tvc-source-reception, #tvc-reception-note { display:none!important; } }


/* Hotfix 1.2.1: details content must span the full channel card. The
   reception badge is inserted by JavaScript as another grid item; without
   an explicit full-row placement, the <details> panel collapses to the
   width of its auto-sized grid column and every word wraps vertically. */
.tvc-channel-main > .tvc-row-details {
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  min-width: 0;
}
.tvc-channel-main > .tvc-row-details > summary {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
}
.tvc-channel-main > .tvc-row-details > .tvc-channel-details {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: normal;
  word-break: normal;
}
.tvc-channel-main > .tvc-row-details .tvc-source-card,
.tvc-channel-main > .tvc-row-details .tvc-technical {
  min-width: 0;
}

/* Restore the intended compact channel number and status layout on phones;
   this appears after the public-launch grid override so it wins the cascade. */
@media (max-width: 650px) {
  .tvc-channel-main {
    grid-template-columns: 60px minmax(0, 1fr) auto;
  }
  .tvc-channel-main > .tvc-status {
    grid-column: 2;
    justify-self: start;
  }
  .tvc-channel-main > .tvc-row-details {
    grid-column: 1 / -1;
    width: 100%;
  }
}