/* Gedeelde blokkoppen, gebaseerd op de hiërarchie van Verkeer en Pathé. */
.content-block-heading {
  display: grid;
  justify-items: start;
  gap: 3px;
  margin: 0 0 12px;
  text-align: left;
}

.content-block-heading.is-inline {
  margin: 0;
}

.content-block-eyebrow {
  display: block;
  margin: 0;
  color: var(--accent2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.content-block-title,
.content-block-heading .content-block-title,
.has-content-heading .content-block-title {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.private-note-title .content-block-title {
  text-transform: none !important;
}

.news-title-refresh.has-content-heading {
  display: grid;
  gap: 3px;
  height: auto;
  padding: 0;
  color: inherit;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.news-title-refresh.has-content-heading:hover,
.news-title-refresh.has-content-heading:focus-visible {
  color: inherit;
  background: transparent;
  transform: none;
}

.search-shell.has-content-heading {
  display: grid;
  align-items: stretch;
  gap: 12px;
  padding: 24px 20px !important;
}

.search-shell.has-content-heading .content-block-heading {
  padding: 0;
}

.search-shell.has-content-heading .google-search-input {
  width: 100%;
}

.weather-block-heading {
  padding-right: 42px;
}

.private-note-title {
  min-width: 0;
}

.weather-google-title .content-block-eyebrow {
  margin-bottom: 3px;
}

/* In Nord gebruikt een ingeschakelde nieuwsbron dezelfde statuskleur als
   de hoverstatus van de profielknoppen in het blok Over mij. */
body.theme-nord .news-panel .news-filter-button[data-news-filter].is-active,
body.theme-nord .news-panel .news-filter-button[data-news-filter].is-active:hover,
body.theme-nord .news-panel .news-filter-button[data-news-filter].is-active:focus-visible,
body.theme-nord .news-panel:hover .news-filter-button[data-news-filter].is-active,
body.theme-nord .news-panel:focus-within .news-filter-button[data-news-filter].is-active {
  color: var(--text) !important;
  background: var(--control-hover) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Swatch in het themamenu: Tweakers-rood, linkblauw en tech-limoen. */
.theme-menu-swatch.is-tweakers {
  background:
    linear-gradient(135deg, #b20d3b 0 50%, #22272b 50% 72%, #d7e52f 72% 86%, #5bbaf0 86% 100%);
  border-color: #4a5258;
}

/* Het isometrische canvas staat achter de portal en reageert niet op invoer. */
.tweakers-circuit-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.theme-tweakers .tweakers-circuit-grid {
  display: block !important;
}

body.theme-tweakers.background-effects-disabled .tweakers-circuit-grid {
  display: none !important;
}

/* Semantisch palet, afgeleid van de actuele donkere Tweakers-vormtaal. */
body.theme-tweakers {
  --bg: #1f2427;
  --panel: #2d3236;
  --panel-secondary: #24292d;
  --control: #202529;
  --control-hover: #343a3f;
  --control-active: #b20d3b;
  --border: #3d454a;
  --text: #f4f6f7;
  --muted: #b9c2c8;
  --accent: #5bbaf0;
  --accent2: #d7e52f;
  --on-accent: #ffffff;
  --clock-hand-accent: #d7e52f;
  --shadow: rgba(0, 0, 0, 0.34);
  --success: #62ad45;
  --warning: #f0b43c;
  --error: #df315d;
  --focus-ring: rgba(91, 186, 240, 0.5);
  --weather-bg: #24292d;
  --weather-item-active: #343a3f;
  --weather-line-temperature: #d7e52f;
  --weather-line-rain: #5bbaf0;
  --weather-line-wind: #df315d;
  --weather-fill-temperature: rgba(215, 229, 47, 0.16);
  --weather-fill-rain: rgba(91, 186, 240, 0.15);
  --weather-fill-wind: rgba(223, 49, 93, 0.13);
  min-height: 100%;
  color: var(--text);
  color-scheme: dark;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background:
    radial-gradient(circle at 14% 18%, rgba(178, 13, 59, 0.1), transparent 32rem),
    radial-gradient(circle at 84% 76%, rgba(91, 186, 240, 0.08), transparent 34rem),
    var(--bg);
}

body.theme-tweakers #shader,
body.theme-tweakers .nord-letter-sea,
body.theme-tweakers .material-bezier-sea,
body.theme-tweakers .lcd-crystal-sea {
  display: none !important;
}

body.theme-tweakers .portal {
  position: relative;
  z-index: 2;
  color: var(--text);
  background: rgba(31, 36, 39, 0.94);
  border: 1px solid #41494e;
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(12px);
}

body.theme-tweakers .portal::after,
body.theme-tweakers :is(
  .card,
  .news-panel,
  .status-footer,
  .about-me-panel,
  .search-shell,
  .private-note-panel,
  .weather-panel,
  .traffic-panel,
  .pathe-panel,
  .llm-chat-panel
)::before {
  display: none;
}

/* De bordeauxrode kop refereert aan de vaste navigatiebalk van Tweakers. */
body.theme-tweakers .header {
  position: relative;
  padding: 16px 18px;
  overflow: hidden;
  background: linear-gradient(105deg, #b20d3b 0%, #a50b36 68%, #86102f 100%);
  border: 1px solid #cf2854;
  border-radius: 6px;
  box-shadow: inset 0 -3px 0 #d7e52f;
}

body.theme-tweakers .header::after {
  position: absolute;
  inset: auto -8% -42px 38%;
  height: 88px;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(30deg, transparent 48%, rgba(215, 229, 47, 0.22) 49% 51%, transparent 52%) 0 0 / 62px 36px,
    linear-gradient(150deg, transparent 48%, rgba(91, 186, 240, 0.16) 49% 51%, transparent 52%) 0 0 / 62px 36px;
  opacity: 0.72;
}

body.theme-tweakers .header > * {
  position: relative;
  z-index: 1;
}

body.theme-tweakers h1,
body.theme-tweakers .subtitle,
body.theme-tweakers .header-date,
body.theme-tweakers #header-time {
  color: #ffffff;
  text-shadow: none;
}

body.theme-tweakers .title-dot,
body.theme-tweakers .llm-chat-eyebrow,
body.theme-tweakers .traffic-eyebrow,
body.theme-tweakers .pathe-eyebrow,
body.theme-tweakers .content-block-eyebrow {
  color: #d7e52f;
}

body.theme-tweakers .clock-box {
  color: #ffffff;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.theme-tweakers .analog-clock :is(.clock-face, .clock-tick) {
  stroke: rgba(255, 255, 255, 0.62);
}

body.theme-tweakers .analog-clock :is(.clock-hour, .clock-minute) {
  stroke: #ffffff;
}

body.theme-tweakers .analog-clock .clock-second {
  stroke: #d7e52f;
}

/* Alle hoofdkaarten gebruiken dezelfde compacte kaarttaal. */
body.theme-tweakers :is(
  .card,
  .news-panel,
  .status-footer,
  .about-me-panel,
  .search-shell,
  .search-suggestions,
  .private-note-panel,
  .weather-panel,
  .dashboard-block-library,
  .traffic-panel,
  .pathe-panel,
  .llm-chat-panel
) {
  color: var(--text);
  background: var(--panel) !important;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px var(--shadow);
  backdrop-filter: none;
}

body.theme-tweakers :is(
  .card,
  .news-panel,
  .status-footer,
  .about-me-panel,
  .search-shell,
  .private-note-panel,
  .weather-panel,
  .traffic-panel,
  .pathe-panel,
  .llm-chat-panel
):hover,
body.theme-tweakers :is(
  .status-footer,
  .about-me-panel,
  .search-shell,
  .private-note-panel,
  .weather-panel,
  .traffic-panel,
  .pathe-panel,
  .llm-chat-panel
):focus-within {
  background: #30363a !important;
  border-color: #5bbaf0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  transform: none;
}

body.theme-tweakers :is(
  .traffic-column,
  .traffic-item,
  .pathe-day,
  .pathe-movie,
  .news-list a,
  .weather-google-day,
  .llm-message,
  .llm-chat-messages,
  .private-note-text-wrap,
  .status-item
) {
  color: var(--text);
  background: var(--panel-secondary) !important;
  border-color: var(--border);
  border-radius: 4px;
  box-shadow: none;
}

/* Pathé-dagkolommen gebruiken dezelfde compacte vlakken als de overige kaarten. */
body.theme-tweakers .pathe-day {
  overflow: hidden;
  background: #24292d !important;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: none;
}

body.theme-tweakers .pathe-day-head {
  color: var(--text);
  background: #202529;
  border-bottom-color: var(--border);
}

body.theme-tweakers .pathe-day-head strong {
  color: #ffffff;
}

body.theme-tweakers .pathe-day-head span {
  color: var(--muted);
}

body.theme-tweakers .pathe-film {
  background: transparent;
  border-bottom-color: var(--border);
}

body.theme-tweakers .pathe-film:hover,
body.theme-tweakers .pathe-film:focus-within {
  background: #2d3236;
}

/* Posters zijn standaard zwart-wit; hover en focus brengen de originele kleur terug. */
body.theme-tweakers .pathe-poster-button,
body.theme-tweakers .pathe-poster-button:hover,
body.theme-tweakers .pathe-poster-button:focus-visible {
  background: transparent !important;
}

body.theme-tweakers .pathe-poster-button::after {
  display: none !important;
  content: none !important;
}

body.theme-tweakers .pathe-film-poster {
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: normal;
}

body.theme-tweakers .pathe-film:hover .pathe-film-poster,
body.theme-tweakers .pathe-film:focus-within .pathe-film-poster {
  filter: none;
  mix-blend-mode: normal;
}

body.theme-tweakers :is(
  .news-list a,
  .weather-google-day,
  .pathe-movie,
  .traffic-item
):hover,
body.theme-tweakers :is(
  .news-list a,
  .weather-google-day,
  .pathe-movie,
  .traffic-item
):focus-visible {
  color: var(--text);
  background: #333a3f !important;
  border-color: #5bbaf0;
  transform: none;
}

/* Nieuws blijft een rustige lijst in plaats van een reeks donkere kaarten. */
body.theme-tweakers .news-list a {
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

body.theme-tweakers .news-list a:hover,
body.theme-tweakers .news-list a:focus-visible {
  background: transparent !important;
  border-bottom-color: var(--border);
}

/* Tweakers gebruikt dezelfde binnenruimte als de gedeelde Googleblok-layout. */
body.theme-tweakers .search-shell.has-content-heading {
  height: auto;
  min-height: 0;
}

body.theme-tweakers .search-shell.has-content-heading .google-search-input {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #485158;
}

/* Serverwaarden staan direct op het hoofdpaneel, zonder donkere tegels. */
body.theme-tweakers .status-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  align-items: start;
  gap: 14px 12px;
}

body.theme-tweakers .status-footer .status-item {
  width: auto;
  min-width: 0;
  align-items: flex-start;
  padding: 2px 0;
  text-align: left;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Links en titels krijgen het kenmerkende heldere Tweakers-blauw. */
body.theme-tweakers :is(
  a,
  .news-title,
  .pathe-program-link,
  .pathe-time-link,
  .llm-message a
) {
  color: #67c2f4;
}

body.theme-tweakers :is(a, .news-title):hover,
body.theme-tweakers :is(a, .news-title):focus-visible {
  color: #a8ddf8;
}

body.theme-tweakers :is(
  .label,
  .content-block-title,
  .news-title-refresh,
  .weather-google-title h2,
  .traffic-head h2,
  .pathe-panel-head h2,
  .llm-chat-head h2,
  .about-me-heading h2
) {
  color: #ffffff;
}

body.theme-tweakers :is(.muted, .news-time, .traffic-item p, .traffic-footer, .pathe-updated, .llm-chat-hint) {
  color: var(--muted);
}

body.theme-tweakers .news-title-refresh.has-content-heading,
body.theme-tweakers .news-title-refresh.has-content-heading:hover,
body.theme-tweakers .news-title-refresh.has-content-heading:focus-visible {
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

/* Bediening: compact, recht en met bordeauxrode actieve status. */
body.theme-tweakers :is(
  button,
  input,
  textarea,
  .news-filter-button,
  .news-source,
  .weather-tab,
  .weather-google-day,
  .private-note-tab,
  .private-note-tab-add,
  .private-note-format-button,
  .private-note-button,
  .service-dialog-button,
  .weather-city-option,
  .style-press-button,
  .theme-menu-option,
  .about-me-links a
) {
  color: var(--text);
  background-color: var(--control);
  border-color: #485158;
  border-radius: 4px;
  box-shadow: none;
}

body.theme-tweakers :is(
  button,
  input,
  textarea,
  .news-filter-button,
  .weather-tab,
  .private-note-tab,
  .private-note-format-button,
  .service-dialog-button,
  .weather-city-option,
  .style-press-button,
  .theme-menu-option,
  .about-me-links a
):hover,
body.theme-tweakers :is(
  button,
  input,
  textarea,
  .news-filter-button,
  .weather-tab,
  .private-note-tab,
  .private-note-format-button,
  .service-dialog-button,
  .weather-city-option,
  .style-press-button,
  .theme-menu-option,
  .about-me-links a
):focus-visible {
  color: #ffffff;
  background-color: var(--control-hover);
  border-color: #5bbaf0;
  outline-color: var(--focus-ring);
  box-shadow: none;
  transform: none;
}

body.theme-tweakers :is(
  .news-filter-button.is-active,
  .weather-tab.is-active,
  .private-note-tab.is-active,
  .private-note-format-button.is-active,
  .weather-google-day.is-active,
  .weather-city-option.is-selected,
  .service-dialog-button.is-primary
) {
  color: #ffffff !important;
  background: #b20d3b !important;
  border-color: #df315d !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.24) !important;
}

body.theme-tweakers .news-panel:hover .news-filter-button[data-news-filter].is-active,
body.theme-tweakers .news-panel:focus-within .news-filter-button[data-news-filter].is-active {
  color: #ffffff !important;
  background: #b20d3b !important;
  border-color: #df315d !important;
  transform: none !important;
}

body.theme-tweakers .news-source,
body.theme-tweakers .news-panel:hover .news-source[data-source] {
  color: #d7e52f;
  background: #202529;
  border-color: #4a5258;
  box-shadow: none;
}

/* Compacte, volwaardige weertabs zonder de oude onderstreepte tabopmaak. */
body.theme-tweakers .weather-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.theme-tweakers .weather-tabs .weather-tab,
body.theme-tweakers .weather-tabs .weather-tab:hover,
body.theme-tweakers .weather-tabs .weather-tab:focus-visible {
  width: auto;
  min-height: 32px;
  padding: 0 12px !important;
  border: 1px solid #485158 !important;
  border-radius: 4px;
  box-shadow: none;
}

body.theme-tweakers .weather-tabs .weather-tab.is-active,
body.theme-tweakers .weather-tabs .weather-tab.is-active:hover,
body.theme-tweakers .weather-tabs .weather-tab.is-active:focus-visible {
  color: #ffffff !important;
  background: #b20d3b !important;
  border-color: #df315d !important;
  box-shadow: none !important;
}

body.theme-tweakers .weather-tabs .weather-tab::after {
  display: none !important;
  content: none !important;
}

body.theme-tweakers .news-list a:hover .news-source,
body.theme-tweakers .news-list a:focus-visible .news-source {
  color: #1f2427;
  background: #d7e52f;
  border-color: #d7e52f;
}

body.theme-tweakers .news-head,
body.theme-tweakers .llm-chat-head,
body.theme-tweakers .llm-chat-form,
body.theme-tweakers .traffic-column-head {
  border-color: var(--border);
}

body.theme-tweakers .google-search-input,
body.theme-tweakers .llm-chat-input,
body.theme-tweakers .private-note-pin,
body.theme-tweakers .private-note-text,
body.theme-tweakers .private-note-text-wrap,
body.theme-tweakers .service-field input,
body.theme-tweakers .service-field textarea,
body.theme-tweakers .service-icon-search {
  color: var(--text);
  background: #1d2225 !important;
  border-color: #485158;
}

body.theme-tweakers :is(
  .google-search-input,
  .llm-chat-input,
  .private-note-pin,
  .private-note-text,
  .service-field input,
  .service-field textarea
)::placeholder {
  color: #8f9aa1;
}

body.theme-tweakers .search-suggestion-button:hover,
body.theme-tweakers .search-suggestion-button.is-active {
  color: #ffffff;
  background: #353c41;
}

body.theme-tweakers .card .icon {
  color: #d7e52f;
  filter: none;
}

body.theme-tweakers .card:hover .icon {
  color: #ffffff;
}

/* Verkeer gebruikt hetzelfde palet, met duidelijke semantische signalen. */
body.theme-tweakers .traffic-panel {
  --traffic-surface: #24292d;
  --traffic-surface-strong: #24292d;
  --traffic-inner-border: #424a50;
  --traffic-road: #b20d3b;
  --traffic-closure: #df315d;
  --traffic-jam: #f0b43c;
  --traffic-roadworks: #d7e52f;
  --traffic-radar: #5bbaf0;
}

body.theme-tweakers .traffic-road {
  color: #ffffff;
  border-radius: 3px;
}

body.theme-tweakers .traffic-summary span,
body.theme-tweakers .traffic-column-head > span {
  color: var(--muted);
  background: #202529;
  border-color: var(--border);
  border-radius: 4px;
}

/* Pathé behoudt zijn rode betekenis, maar binnen dezelfde kaarttaal. */
body.theme-tweakers .pathe-day-label,
body.theme-tweakers .pathe-more-days,
body.theme-tweakers .llm-chat-send {
  color: #ffffff;
  background: #b20d3b;
  border-color: #df315d;
  border-radius: 4px;
}

body.theme-tweakers .pathe-time-link {
  background: #202529;
  border-color: #485158;
  border-radius: 3px;
}

body.theme-tweakers .pathe-time-link:hover,
body.theme-tweakers .pathe-time-link:focus-visible {
  color: #1f2427;
  background: #d7e52f;
  border-color: #d7e52f;
}

/* Chat, notities, dialogs en menu's delen dezelfde vlakverdeling. */
body.theme-tweakers .llm-message.user {
  color: #ffffff;
  background: #8f1034 !important;
  border-color: #c52853;
}

body.theme-tweakers .llm-message.assistant {
  background: #24292d !important;
}

body.theme-tweakers .llm-message.system {
  color: #d7e52f;
  background: #252b2e !important;
  border-color: #59622d;
}

body.theme-tweakers :is(.service-dialog, .pathe-poster-dialog)::backdrop {
  background: rgba(10, 12, 13, 0.76);
  backdrop-filter: blur(5px);
}

body.theme-tweakers :is(
  .service-dialog-form,
  .pathe-poster-dialog-inner,
  .theme-menu,
  .dashboard-block-library
) {
  color: var(--text);
  background: #2d3236 !important;
  border: 1px solid #485158;
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

body.theme-tweakers .theme-menu-option.is-selected {
  color: #ffffff;
  background: #b20d3b;
  border-color: #df315d;
}

body.theme-tweakers .service-icon-choice {
  color: var(--text);
  background: #24292d;
  border-color: #485158;
  border-radius: 4px;
}

body.theme-tweakers .service-icon-choice.is-selected {
  color: #1f2427;
  background: #d7e52f;
  border-color: #d7e52f;
}

body.theme-tweakers .weather-chart-line-temperature {
  stroke: var(--weather-line-temperature);
}

body.theme-tweakers .weather-chart-line-rain {
  stroke: var(--weather-line-rain);
}

body.theme-tweakers .weather-chart-line-wind {
  stroke: var(--weather-line-wind);
}

body.theme-tweakers .weather-current-icon,
body.theme-tweakers .weather-google-day-icon {
  color: #d7e52f;
}

body.theme-tweakers .background-effect-speed input {
  accent-color: #d7e52f;
}

body.theme-tweakers .background-effect-speed {
  background: #202529;
  border-color: #485158;
  border-radius: 4px;
  box-shadow: none;
}

body.theme-tweakers ::selection {
  color: #ffffff;
  background: #b20d3b;
}

body.theme-tweakers * {
  scrollbar-color: #596168 #202529;
}

@media (max-width: 700px) {
  .search-shell.has-content-heading {
    padding: 14px 12px !important;
  }

  body.theme-tweakers .header {
    padding: 14px;
  }

  body.theme-tweakers #portal-title {
    max-width: 100%;
    font-size: 23px;
    letter-spacing: -0.035em;
  }

  .content-block-title,
  .content-block-heading .content-block-title,
  .has-content-heading .content-block-title {
    font-size: 20px;
  }
}

@media (min-width: 701px) {
  body.theme-tweakers .status-footer {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
  }

  body.theme-tweakers .status-footer .status-item {
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
  }

  body.theme-tweakers .status-footer .status-item > b,
  body.theme-tweakers .status-footer .status-item > span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-tweakers *,
  body.theme-tweakers *::before,
  body.theme-tweakers *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}