/* חדשות יהיה בסדר: the room around the TV. Night navy, sea turquoise, sunset orange, Jerusalem stone. */

/* The fonts are ours to serve (fonts/, SIL Open Font License: fonts/OFL-*.txt), Hebrew and Latin only, so a viewer's
   page asks no one else for anything (2026-10-09). Rubik is one variable file for every weight. */
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(fonts/rubik-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(fonts/rubik-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Secular One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/secular-one-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Secular One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/secular-one-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --room: #0e1222;
  --room-2: #151b36;
  --card: #1a2142;
  --line: #2c3766;
  --text: #ecebe4;
  --muted: #9aa0b4;
  --brand: #13a8b4;
  --brand-dark: #0b6f79;
  --orange: #ff7a2f;
  --stone: #e8d6ad;
  --on-air: #ef3e5c;
  --badge-red: #c42645;
  --display: "Secular One", "Rubik", system-ui, sans-serif;
  --body: "Rubik", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--room); }
body {
  margin: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, #1b2450, var(--room) 70%);
  color: var(--text);
  font: 16px/1.55 var(--body);
  min-height: 100vh;
}
a { color: var(--brand); }
button { font: inherit; cursor: pointer; }

/* Two columns: the masthead on the right (where Hebrew starts), the logo and the name over the menu, staying put
   while the page scrolls; the channel on the left, the TV at the very top. */
.room {
  max-width: 1280px; margin: 0 auto; padding: 12px 16px 64px;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 28px; align-items: start;
}
.channel { min-width: 0; }

/* Masthead */
.masthead { position: sticky; top: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.brand-logo {
  font: 26px/1 var(--display);
  background: var(--brand); color: #fff; padding: 8px 10px 6px;
  box-shadow: 0 4px 0 var(--brand-dark), 0 4px 0 2px var(--orange);
  display: inline-flex; align-items: center; gap: 6px;
}
#brandMark { width: 18px; height: 20px; image-rendering: pixelated; }
.brand-name { font: 26px/1.15 var(--display); margin: 0; }
.brand-tag { margin: 4px 0 0; color: var(--stone); font-size: 15px; }
/* The menu: a column of buttons under the name. */
.jump { display: flex; flex-direction: column; gap: 8px; }
.jump a {
  display: block; padding: 9px 14px; border-radius: 8px;
  background: #151b36; border: 1px solid #2c3766; color: var(--text); text-decoration: none; font-weight: 500;
}
.jump a:hover, .jump a:focus-visible { border-color: var(--brand); color: #fff; }


/* The TV */
.tv {
  background: linear-gradient(180deg, #2a2f44, #1c2033);
  border: 2px solid #3a4160; border-radius: 18px; padding: 16px 16px 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* As wide as the window's height lets the picture, the whole of the captions and the bar of buttons under them show
     on load: 210 px for the room's top, the TV's frame, two lines of captions and the bar, and 42 px of frame beside
     the picture. */
  max-width: calc((100vh - 210px) * 16 / 9 + 42px); margin-inline: auto;
}
.screen {
  position: relative; aspect-ratio: 16 / 9; background: #050507; overflow: hidden;
  border-radius: 10px; border: 3px solid #0a0c14;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 115% 90% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.5));
}
.power {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px;
  background: rgba(5, 5, 7, 0.55);
}
.screen[data-state="on"] .power { display: none; }
#powerBtn {
  font: 22px/1 var(--display); padding: 14px 26px 12px; border: 0;
  background: var(--orange); color: #1a0d04; box-shadow: 0 5px 0 #a8461a;
}
#powerBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8461a; }
.power-note { margin: 0; color: var(--stone); font-size: 13px; text-shadow: 0 1px 2px #000; }

.captions {
  min-height: 74px; margin-top: 6px; padding: 8px 12px;
  background: #090b14; border: 1px solid #262c45; border-radius: 6px;
}
.cap-name { margin: 0; color: var(--orange); font-weight: 700; font-size: 14px; min-height: 1.4em; }
.cap-text { margin: 0; font-size: 19px; line-height: 1.45; }

.cabinet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.cab-status { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-air); box-shadow: 0 0 8px var(--on-air); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.cab-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.cab-btn { background: #12162a; color: var(--text); border: 1px solid #343b5c; border-radius: 5px; padding: 5px 12px; font-size: 14px; }
.cab-btn:hover:not(:disabled) { border-color: var(--brand); }
.cab-btn:disabled { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.play-state { color: var(--stone); }
.transcript { margin-top: 8px; color: var(--muted); font-size: 14px; }
.transcript summary { cursor: pointer; color: #b9bfd6; }
.transcript ol { margin: 6px 0 0; padding-inline-start: 20px; max-height: 16em; overflow-y: auto; color: var(--text); }
.ai-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.cap-source { margin: 4px 0 0; color: var(--muted); font-size: 13px; min-height: 1.3em; }

/* Full screen: the whole set, the picture as big as the room the captions and the buttons leave under it, measured by
   the grid, not guessed (a guess of 190 px left the picture 5 px high at 844×390, review 2026-10-09). On a short screen
   the captions and the buttons get smaller, and the source line goes. */
.tv:fullscreen {
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center;
  height: 100vh; height: 100dvh; border: 0; border-radius: 0; padding: 2vh 3vw; max-width: none; margin: 0;
}
.tv:fullscreen .screen { height: 100%; width: auto; max-width: 100%; max-height: calc(94vw * 9 / 16); align-self: center; }
.tv:fullscreen .captions, .tv:fullscreen .cabinet { width: min(100%, 1280px); }
.tv:fullscreen .transcript, .tv:fullscreen .ai-note { display: none; }
.tv:fullscreen .cap-text { font-size: 24px; }
@media (max-height: 560px) {
  .tv:fullscreen { padding: 6px 12px; }
  .tv:fullscreen .captions { margin-top: 6px; padding: 4px 10px; }
  .tv:fullscreen .cap-name { font-size: 12px; }
  .tv:fullscreen .cap-text { font-size: 16px; line-height: 1.35; }
  .tv:fullscreen .cap-source { display: none; }
  .tv:fullscreen .cabinet { padding-top: 4px; }
  .tv:fullscreen .cab-btn { padding: 3px 10px; font-size: 13px; }
}
/* Upright, the width is what limits the picture: the set stands together in the middle of the screen. */
@media (orientation: portrait) {
  .tv:fullscreen { grid-template-rows: auto auto auto; align-content: center; }
  .tv:fullscreen .screen { height: auto; width: 100%; max-height: none; }
}

/* A play the browser refused: a button to give it the click it wants (the screen takes the click too). */
.unblock {
  position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  font: 18px/1 var(--display); padding: 10px 18px 8px; border: 0;
  background: var(--orange); color: #1a0d04; box-shadow: 0 4px 0 #a8461a;
}

/* Sources */
.sub-title { font: 16px var(--display); color: var(--stone); margin: 10px 0 6px; }
.story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.story { display: flex; align-items: baseline; gap: 10px; background: var(--card); padding: 8px 12px; border-inline-start: 4px solid transparent; transition: background 0.2s; }
.story.on-air { border-inline-start-color: var(--orange); background: #241f3a; }
.story .outlet { font-weight: 700; font-size: 13px; color: #04161a; background: var(--brand); padding: 1px 7px; white-space: nowrap; }
.story-title { color: var(--text); text-decoration: none; }
a.story-title:hover { text-decoration: underline; }
.story-empty { color: var(--muted); background: var(--card); padding: 8px 12px; font-size: 14px; }
.story-note { color: var(--muted); padding: 4px 12px 8px; font-size: 14px; }
/* The question form's bot trap: off the page for people (and screen readers), there for a bot that fills every field. */
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sections */
.sec { margin-top: 28px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 12px; }
.sec-head h2 { font: 24px var(--display); margin: 0 0 4px; }
.sec-sub { margin: 0; color: var(--muted); font-size: 14px; }
.fine { color: var(--muted); font-size: 13px; }

/* Guide: a channel's schedule page (PNN's layout; our colours, pixels and words). Pixel text is drawn by js/guide.js
   in each element's CSS colour. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
canvas.px { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
[data-pixel] { margin: 0; }

.guide { background: #0b1024; border: 3px solid var(--line); box-shadow: 0 6px 0 #070a18; padding-bottom: 14px; }
.g-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  padding: 16px 18px 14px; background: #0e1430; border-bottom: 4px solid var(--line);
}
.g-h { color: var(--text); }
.g-sub { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }
.g-clock { display: grid; justify-items: center; gap: 4px; margin-inline-start: auto; }
.g-date { margin: 0; color: var(--stone); font-size: 13px; font-weight: 700; }
.g-big { color: var(--orange); }
.g-tag { color: var(--stone); width: 170px; }

.g-scroll { overflow-x: auto; padding: 10px 12px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.g-track { position: relative; min-width: 100%; width: max-content; }
.g-strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; min-width: 100%; }
.g-slot { flex: var(--grow, 1) 0 112px; display: flex; flex-direction: column; }
.g-at { margin: 0 0 6px; height: 18px; padding-inline-start: 2px; color: #c6cbe0; font-size: 13px; font-weight: 700; }
.g-block {
  position: relative; flex: 1; min-height: 250px; overflow: hidden;
  padding: 10px 10px 96px; background: #1d2756; border: 2px solid #33417e; color: var(--text);
}
.g-slot.aired .g-block { background: #171f48; border-color: #2a3670; }
.g-slot.aired .g-block > :not(.g-art) { opacity: 0.72; }
.g-slot.now .g-block { background: var(--stone); border-color: #c9b07e; color: #2a2010; }
.g-slot.empty { flex-grow: 1; }
/* Informational badges in white need a darker red than the on-air dot to read (5.7:1, past WCAG AA). */
.g-badge { display: inline-block; margin-bottom: 8px; padding: 3px 5px; background: var(--badge-red); color: #fff; border: 2px solid #8f1d33; }
.g-name { margin: 0 0 6px; }
.g-range { margin: 0; color: var(--orange); font-size: 13px; font-weight: 700; direction: ltr; text-align: right; }
.g-slot.now .g-range { color: #a8461a; }
.g-flag { display: inline-block; margin: 4px 0 0; padding: 0 5px; background: #33417e; color: var(--stone); font-size: 11px; font-weight: 700; }
.g-slot.now .g-flag { background: #c9b07e; color: #2a2010; }
.g-blurb {
  margin: 4px 0 0; color: #b9bfd6; font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.g-slot.now .g-blurb { color: #4a3c22; }
.g-art { position: absolute; left: 0; bottom: 0; }
.g-needle { position: absolute; top: 22px; bottom: 0; width: 2px; background: var(--on-air); box-shadow: 0 0 6px var(--on-air); pointer-events: none; }

.g-rail {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px 22px; margin: 12px 12px 0; padding-top: 16px;
  background: linear-gradient(90deg, #4a5aa0 0 1px, transparent 1px) 0 0 / 24px 7px repeat-x, linear-gradient(#4a5aa0, #4a5aa0) 0 0 / 100% 2px no-repeat;
}
.g-rail-label { color: var(--brand-light, #7fe0e6); padding-top: 18px; }
/* The list scrolls on a narrow screen; its padding keeps the ticks up to the rail inside it. */
.g-chips { list-style: none; margin: -16px 0 0; padding: 16px 0 0; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: thin; }
.g-chip { position: relative; display: grid; justify-items: center; gap: 4px; }
.g-chip::before { content: ""; position: absolute; top: -16px; left: calc(50% - 1px); width: 2px; height: 12px; background: #7fb0e6; }
.g-chip-when { min-height: 18px; color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.g-chip-name { padding: 3px 10px; background: #1d2756; border: 2px solid #4a5aa0; font-size: 13px; font-weight: 700; white-space: nowrap; }
.g-chip.writing .g-chip-name { border-color: var(--orange); color: var(--orange); }
.g-chip-none { padding-top: 16px; color: var(--muted); font-size: 14px; }

.g-cards { display: grid; grid-template-columns: 1.35fr 1.2fr 0.7fr; gap: 16px; margin: 26px 12px 0; align-items: stretch; }
.g-card { position: relative; border: 3px solid #33417e; box-shadow: 0 0 0 3px #0b1024, 0 0 0 5px #33417e; }
.g-now { padding: 34px 18px 16px; background: var(--stone); color: #2a2010; border-color: #c9b07e; box-shadow: 0 0 0 3px #0b1024, 0 0 0 5px #c9b07e; }
.g-tab { position: absolute; top: -16px; inset-inline-start: 16px; padding: 6px 8px; background: var(--badge-red); color: #fff; border: 2px solid #2a1010; }
.g-now-body { display: grid; grid-template-columns: 144px 1fr; gap: 18px; align-items: start; }
.g-thumb { width: 144px; height: 144px; border: 3px solid #2a2010; }
.g-now-show { color: #2a2010; }
.g-now-range { margin: 10px 0 0; font-size: 20px; font-weight: 700; direction: ltr; text-align: right; }
.g-now-title { margin: 4px 0 0; color: #4a3c22; font-size: 16px; }
.g-now-times { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; padding-top: 12px; border-top: 2px solid #c9b07e; }
.g-now-times[hidden] { display: none; }
.g-when { display: flex; align-items: center; gap: 10px; margin: 0; }
.g-when + .g-when { border-inline-start: 2px solid #c9b07e; padding-inline-start: 12px; }
.g-icon { width: 27px; height: 27px; }
#gIconGlass { width: 21px; }
.g-when-label { display: block; white-space: nowrap; color: #6a5a38; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.g-when-value { display: block; white-space: nowrap; font-size: 18px; font-weight: 700; }
.g-onair { margin: 14px 0 0; padding-top: 10px; border-top: 2px dashed #c9b07e; font-size: 15px; }
.g-onair-label { color: #c42645; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-inline-end: 6px; }

.g-next { background: #1d2756; }
.g-next-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--brand); }
.g-next-title { color: #04161a; }
.g-next-link { color: #04161a; font-size: 13px; font-weight: 700; text-decoration: none; }
.g-next-link:hover { text-decoration: underline; }
.g-next-list { list-style: none; margin: 0; padding: 0 14px; }
.g-next-list li { display: grid; grid-template-columns: 52px 40px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 2px solid #2a376e; }
.g-next-list li:last-child { border-bottom: 0; }
.g-next-when { color: var(--orange); font-size: 15px; font-weight: 700; }
.g-next-name { color: var(--text); }
.g-next-blurb { margin: 3px 0 0; color: #b9bfd6; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-next-list li.g-next-none { display: block; color: var(--muted); font-size: 14px; }

.g-poster { display: grid; justify-items: center; align-content: start; gap: 12px; padding: 14px; background: #0e1430; }
#gPoster { width: 100%; max-width: 192px; height: auto; aspect-ratio: 64 / 88; border: 2px solid #2a3670; }
.g-poster-tag { color: var(--orange); text-align: center; width: 100%; display: grid; justify-items: center; }
.guide-foot { margin: 14px 12px 0; color: var(--muted); font-size: 14px; }

/* Cast */
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.person { background: var(--card); padding: 12px; display: grid; justify-items: center; text-align: center; gap: 6px; }
.person canvas { width: 120px; height: 120px; image-rendering: pixelated; background: #24305e; border-bottom: 3px solid var(--brand); }
.person h3 { margin: 0; font: 18px var(--display); }
.person .role { margin: 0; color: var(--orange); font-size: 13px; font-weight: 700; }
.person .bio { margin: 0; color: var(--muted); font-size: 14px; }

/* Viewer services */
.tabs { display: flex; gap: 4px; }
.tab { background: var(--room-2); color: var(--muted); border: 1px solid var(--line); border-bottom: 0; padding: 8px 14px; }
.tab[aria-selected="true"] { background: var(--card); color: var(--text); border-top: 3px solid var(--orange); }
.tabpanel { background: var(--card); border: 1px solid var(--line); padding: 14px; }
.mail-form { display: grid; gap: 10px; }
.mail-form label { display: grid; gap: 4px; font-weight: 500; font-size: 15px; }
.mail-form input, .mail-form textarea {
  font: inherit; background: #0e1226; color: var(--text); border: 1px solid #39426a; padding: 8px 10px; border-radius: 4px;
}
.lede { margin: 0; }
.form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-foot .fine { margin: 0; }
.send { background: var(--brand); color: #04161a; border: 0; padding: 8px 18px; font-weight: 700; box-shadow: 0 3px 0 var(--brand-dark); }
.toast { margin-top: 10px; background: #241f3a; border-inline-start: 4px solid var(--orange); padding: 8px 12px; }

.about p, .contact p { max-width: 70ch; }
.about-list { max-width: 70ch; margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.about-list li::marker { color: var(--brand); }

@media (max-width: 900px) {
  .g-cards { grid-template-columns: 1fr 1fr; }
  .g-poster { display: none; }
  /* Too narrow for a column beside the TV: the masthead goes back over it, the menu in a row. */
  .room { display: block; }
  .masthead { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
  .brand { flex-direction: row; align-items: center; gap: 12px; }
  .jump { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .jump a { padding: 6px 10px; font-size: 14px; }
}

@media (max-width: 640px) {
  .g-cards { grid-template-columns: 1fr; }
  .g-now-body { grid-template-columns: 96px 1fr; gap: 12px; }
  .g-thumb { width: 96px; height: 96px; }
  .g-tag { display: none; }
  .g-rail { grid-template-columns: 1fr; }
  .g-rail-label { padding-top: 0; }
  .cap-text { font-size: 17px; }
  .tv { padding: 10px 10px 8px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}