/* Mommie Dearest layout.

   Reads the design tokens from the schnews theme files (themes.css, theme-styles.css) and
   Clear (theme-clear.css): --bg --surface --border --text --muted --primary --primary-bg
   --on-primary --danger --bg-hover --sel --radius --r-btn --bw ... so every look applies.
   Class names .topbar, .btn and .btn.solid match the ones those files style.

   Built for one older reader: big text, big targets, plain words, a visible focus ring,
   nothing that only works on hover, no button that is only an icon. */

* { box-sizing: border-box; }

/* Text size. fonts.css has its own (small) scale for mailz; this one starts at 21px. */
[data-ui-size="sm"] { --ui-font-size: 18px; }
[data-ui-size="md"] { --ui-font-size: 21px; }
[data-ui-size="lg"] { --ui-font-size: 24px; }
[data-ui-size="xl"] { --ui-font-size: 28px; }

html {
  font-size: var(--ui-font-size, 21px);
  scrollbar-color: var(--sb, auto);
}
html[data-mode="dark"] { color-scheme: dark; }
html[data-mode="light"] { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3 { font-family: var(--font-headline); line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--primary); text-underline-offset: 0.15em; }

/* The ring is always visible, thick, and offset so it never merges with a same-coloured fill. */
:focus-visible {
  outline: 3px solid var(--focus, var(--primary));
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  padding: 0.6rem 1rem;
  background: var(--bg);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-btn);
  z-index: 10;
}
.skip:focus { top: 0.5rem; }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--top-bg, var(--surface));
  color: var(--top-fg, inherit);
  border-bottom: var(--bw) solid var(--border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.25rem;
  min-height: 56px;
}
.brand-logo { height: 3.5rem; width: auto; flex: 0 0 auto; }
.topbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.textsize { display: flex; gap: 0.4rem; }
.textsize .btn { min-width: 56px; padding-inline: 0.8rem; font-size: 1.1rem; }

/* ── Buttons ─────────────────────────────────────────── */
.btn, button {
  font: inherit;
  color: var(--text);
}
.btn {
  min-height: 56px;
  padding: 0.55rem 1.2rem;
  font-weight: 600;
  background: var(--btn-bg, var(--bg-hover));
  border: var(--bw) solid var(--raised-bc, var(--border));
  border-radius: var(--r-btn);
  box-shadow: var(--raised-sh, none);
  cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--hover-bc, var(--primary)); background: var(--btn-bg-hover, var(--bg-hover)); }
.btn.solid {
  background: var(--primary-bg);
  border-color: var(--primary-bg);
  color: var(--on-primary);
}
.btn.solid:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn:disabled { opacity: 0.45; cursor: default; }

/* ── Main ────────────────────────────────────────────── */
main {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  flex: 1 0 auto;
}

/* ── Big choices on the home page ────────────────────── */
.tiles {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  min-height: 9rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--raised-sh, none);
  color: var(--text);
  text-decoration: none;
}
a.tile:hover { border-color: var(--hover-bc, var(--primary)); background: var(--bg-hover); }
.tile-title { font-family: var(--font-headline); font-size: 1.35rem; font-weight: 700; }
.tile-text { color: var(--muted); }
.tile.soon { border-style: dashed; }
.badge {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.15rem 0.7rem;
  border: var(--bw) solid var(--border);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ── "Change how it looks" panel ─────────────────────── */
dialog {
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  padding: 0;
  background: var(--bg);
  color: var(--text);
  border: var(--bwp, var(--bw)) solid var(--panel-bc, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--panel-sh);
}
dialog::backdrop { background: var(--scrim, rgba(0, 0, 0, 0.5)); }
.dialog-form { padding: 1.25rem; }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.look-group { margin-bottom: 1.4rem; }

.look-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.look-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.7rem;
  text-align: left;
  background: var(--bg);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.look-card:hover { border-color: var(--hover-bc, var(--primary)); }
.look-name { font-weight: 700; }
.look-blurb { color: var(--muted); font-size: 0.9rem; }
/* The chosen one is shown by more than colour: a thick border, a tick and the word. */
.look-card[aria-pressed="true"] {
  border: 5px solid var(--primary);
  padding: calc(0.7rem - 3px);
}
.look-card[aria-pressed="true"] .look-name::before { content: "\2713\00a0"; }
.look-card[aria-pressed="true"] .look-name::after { content: " (chosen)"; font-weight: 400; }

/* The sample carries its own data-style/data-theme, so it shows that look whatever the page is. */
.look-sample {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: var(--bg);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-btn);
  font-family: var(--font-ui);
}
.look-sample-text { font-size: 1.5rem; font-weight: 700; }
.look-sample-bar { flex: 1; height: 0.7rem; border-radius: var(--r-pill); background: var(--primary-bg); }

.seg-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.seg[aria-pressed="true"] {
  border: 5px solid var(--primary);
  padding: calc(0.55rem - 3px) calc(1.2rem - 3px);
  font-weight: 700;
}
.seg[aria-pressed="true"]::before { content: "\2713\00a0"; }

.size-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.size-name { min-width: 7rem; text-align: center; font-weight: 700; }
.size-sample { margin-top: 0.8rem; padding: 0.7rem 1rem; background: var(--surface); border-radius: var(--r-btn); }

@media (max-width: 36rem) {
  .topbar { padding-inline: 0.75rem; }
  main { padding-inline: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Sign in ─────────────────────────────────────────── */
.login { max-width: 34rem; }
/* Two wordmarks (login page and top bar); the one that matches the chosen look is shown
   (data-mode is set in <head>). */
.login-logo {
  display: flex;
  justify-content: center;
  margin: 0 0 1.25rem;
}
.logo-dark { display: none; }
html[data-mode="dark"] .logo-light { display: none; }
html[data-mode="dark"] .logo-dark { display: block; }
.login-logo img { max-width: 100%; max-height: 8rem; width: auto; height: auto; }
.login-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.field-label { font-weight: 700; }
.password-row { display: flex; gap: 0.6rem; }
.field {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0.5rem 0.9rem;
  font: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: var(--bw) solid var(--sunken-bc, var(--border));
  border-radius: var(--r-ctl);
  box-shadow: var(--sunken-sh, none);
}
.field:focus-visible { outline-offset: 2px; }
.form-error {
  margin: 0.4rem 0 0;
  padding: 0.7rem 1rem;
  color: var(--text);
  background: var(--surface);
  border: 4px solid var(--danger);
  border-radius: var(--r-btn);
  font-weight: 600;
}
.form-error::before { content: "Problem: "; color: var(--danger); font-weight: 700; }
.form-error[hidden] { display: none; }
.btn.big { min-height: 64px; font-size: 1.2rem; margin-top: 0.6rem; }

/* ── Banner from Steve ───────────────────────────────── */
.banner {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 4px solid var(--primary);
  border-radius: var(--r-btn);
  font-weight: 700;
}
.banner[hidden], .notice[hidden] { display: none; }
.notice {
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-btn);
  font-weight: 600;
}

/* ── TV and Movies ───────────────────────────────────── */
.back { display: inline-block; padding: 0.6rem 0; min-height: 44px; font-weight: 600; }
.search-form { display: flex; flex-direction: column; gap: 0.5rem; }
.search-row { display: flex; gap: 0.6rem; }
.note { margin: 0.8rem 0; color: var(--muted); font-weight: 600; min-height: 1.5em; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.media-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--raised-sh, none);
}
.poster { flex: 0 0 auto; width: 92px; height: 138px; object-fit: cover; border-radius: var(--r-btn); background: var(--bg-hover); }
.poster.small { width: 60px; height: 90px; }
.poster-none {
  display: flex; align-items: center; justify-content: center;
  border: var(--bw) solid var(--border);
  font-family: var(--font-headline); font-size: 2rem; font-weight: 700; color: var(--muted);
}
.media-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.media-body h3 { margin: 0; }
.media-type { margin: 0; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.media-overview { margin: 0.2rem 0; }
.media-body .btn { margin-top: 0.4rem; }
.media-card.small { padding: 0.7rem 1rem; }

/* The state is in words first. A thick bar at the left and a tint back that up. */
.media-status {
  margin: 0.2rem 0 0;
  padding: 0.3rem 0.8rem;
  border-left: 6px solid var(--primary);
  background: var(--bg-hover);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  font-weight: 700;
}
.media-status[data-state="available"] { border-left-color: var(--primary); background: var(--sel, var(--bg-hover)); }
.media-status[data-state="failed"], .media-status[data-state="declined"], .media-status[data-state="unavailable"] {
  border-left-color: var(--danger);
}
.mine { margin-top: 2.5rem; }
.attribution { margin-top: 2.5rem; color: var(--muted); font-size: 0.8rem; }

/* ── Answers ─────────────────────────────────────────── */
.tiles.one { grid-template-columns: 1fr; margin-top: 1rem; }
.tiles.one .tile { min-height: 0; }

.prose { max-width: 40rem; line-height: 1.65; }
.prose h2 { margin-top: 1.6em; }
.prose h3, .prose h4 { margin-top: 1.3em; }
.prose ol, .prose ul { margin: 0 0 1em; padding-left: 1.6em; }
.prose li { margin-bottom: 0.7em; padding-left: 0.2em; }
.prose li::marker { font-weight: 700; color: var(--primary); }
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1em 0;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
}
.prose blockquote {
  margin: 1em 0;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-left: 8px solid var(--primary);
  border-radius: var(--r-btn);
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose code, .prose pre { font-family: ui-monospace, monospace; background: var(--bg-hover); border-radius: 4px; }
.prose code { padding: 0.05em 0.3em; }
.prose pre { padding: 0.8rem 1rem; overflow-x: auto; }
.prose table { border-collapse: collapse; margin: 1em 0; }
.prose th, .prose td { padding: 0.4rem 0.8rem; border: var(--bw) solid var(--border); text-align: left; }
.prose .faq-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1em 0 0.4em;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.prose .faq-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.answer-actions .btn { text-decoration: none; }

@media print {
  .topbar, .skip, .back, .answer-actions, .banner, dialog, .note { display: none !important; }
  html { font-size: 16pt; color-scheme: light; }
  body { background: #fff; color: #000; display: block; }
  main { max-width: none; padding: 0; }
  .prose a { color: #000; }
  .prose img, .prose .faq-video { break-inside: avoid; border-color: #000; }
  .prose .faq-video iframe { display: none; }
  .prose li::marker { color: #000; }
}

/* The ask sheet */
.ask-top { display: flex; gap: 1rem; margin-bottom: 1rem; }
.big-text { font-size: 1.15rem; }
.dialog-actions.spread { justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.choices { margin: 0 0 1rem; padding: 0.8rem 1rem; border: var(--bw) solid var(--border); border-radius: var(--radius); }
.choices legend { padding: 0 0.4rem; font-weight: 700; }
.choice, .season { display: flex; align-items: center; gap: 0.7rem; min-height: 56px; }
.choice input, .season input { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; accent-color: var(--primary-bg); }
.choice label, .season label { flex: 1; padding: 0.4rem 0; font-weight: 600; }
.choice input:checked + label { font-weight: 700; }
.seasons { list-style: none; margin: 0.4rem 0 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.seasons[hidden] { display: none; }
.season.off label { color: var(--muted); font-weight: 400; }

/* Ask Steve: the chat. Who is speaking is always said in words, never only by colour or side. */
.chat { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.msg {
  max-width: 44rem;
  padding: 0.8rem 1.1rem;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-left-width: 8px;
  border-radius: var(--radius);
}
.msg:focus { outline: none; }
.msg.you { background: var(--bg-hover); border-left-color: var(--primary); }
.msg.steve { border-left-color: var(--secondary); }
.msg.trouble { border-color: var(--danger); }
.msg-who { margin: 0 0 0.4rem; font-weight: 700; font-size: 0.9rem; color: var(--muted); }
.msg-body { font-size: 1.08rem; line-height: 1.6; }
.msg-body p { margin: 0 0 0.7em; }
.msg-body ol, .msg-body ul { margin: 0 0 0.7em; padding-left: 1.5em; }
.msg-body li { margin-bottom: 0.5em; padding-left: 0.2em; }
.msg-body li::marker { font-weight: 700; color: var(--primary); }
.msg-body > :last-child { margin-bottom: 0; }
.msg-help { margin: 0.9rem 0 0; }
.thinking { color: var(--muted); font-weight: 600; }
.ask-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.ask-form textarea.field { flex: none; width: 100%; min-height: 6.5rem; line-height: 1.5; resize: vertical; }
.ask-actions .btn { width: 100%; }
.dialog-form textarea.field { flex: none; width: 100%; line-height: 1.5; resize: vertical; }
.chat-tools { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

@media (max-width: 36rem) {
  .search-row { flex-direction: column; }
  .media-card { flex-direction: column; }
  .media-card.small { flex-direction: row; }
}

/* ── Recipes and Interesting Dishes ──────────────────── */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn.solid { color: var(--on-primary); }
select.field { flex: none; width: 100%; }
.poster.square { width: 112px; height: 112px; }
.dish-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; margin-top: 0.4rem; }
.dish-link { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.dish-summary {
  margin: 0.2rem 0;
  padding: 0.6rem 0.9rem;
  background: var(--bg-hover);
  border-left: 6px solid var(--primary);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  font-weight: 600;
}
.media-status[hidden], .dish-summary[hidden] { display: none; }
.media-body .note:empty { display: none; }
.dishes { margin-top: 2.5rem; }

/* The Recipes page: cards in a grid, the picture across the top. One across on a phone. */
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.5rem 1rem; }
.filter { display: flex; flex-direction: column; gap: 0.5rem; }
.dish-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items: stretch; }
.dish-card { flex-direction: column; gap: 0.8rem; padding: 0; overflow: hidden; }
.dish-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-hover); }
.dish-photo.poster-none {
  display: flex; align-items: center; justify-content: center;
  border: 0; border-bottom: var(--bw) solid var(--border); font-size: 4rem;
}
.dish-card .media-body { padding: 0 1rem 1rem; }
.dish-card .dish-actions { flex-direction: column; align-items: stretch; width: 100%; margin-top: auto; padding-top: 0.4rem; }
.dish-card .dish-actions .btn, .dish-card .dish-link { width: 100%; }
.dish-card .dish-link { display: flex; }
@media (max-width: 36rem) {
  .media-card:has(.poster.square) { flex-direction: column; }
}