:root {
  --ink: #25313a;
  --muted: #596873;
  --green: #304d61;
  --green-dark: #263f51;
  --sage: #e5edf1;
  --clay: #a8543e;
  --line: #d9dcd9;
  --paper: #f7f5f0;
  --white: #fffefa;
  --sand: #efeeea;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 15px/1.55 'DM Sans', system-ui, sans-serif;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--green); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.18; }
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin: 0; }
h2 { font-size: clamp(1.65rem, 3vw, 2rem); margin-bottom: 5px; }
h3 { font-size: 1.55rem; margin-bottom: 8px; }
h4 { font-size: 1.08rem; margin-bottom: 0; font-weight: 700; }
.muted { color: var(--muted); }
.eyebrow {
  margin: 0 0 9px;
  color: var(--clay);
  font: 700 .7rem/1.3 'DM Sans', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.app-header, .app-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px max(24px, calc((100vw - 1180px)/2));
}
.app-header { background: var(--white); border-bottom: 1px solid var(--line); }
.app-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .79rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
}
.mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--clay);
  border-radius: 50% 50% 46% 46%;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
}
.header-date { font-size: .82rem; color: var(--muted); }
.app-shell {
  max-width: 1228px;
  min-height: calc(100vh - 122px);
  margin: auto;
  padding: 54px 24px 78px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 25px;
}
.page-heading > p { max-width: 285px; margin: 0 0 5px; color: var(--muted); }
.question-form {
  padding: 24px;
  background: #e9f0f3;
  border: 1px solid #cddbe2;
  border-radius: 18px;
  margin-bottom: 48px;
}
.step-progress {
  width: fit-content;
  margin: -8px 0 22px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--green-dark);
  font-size: .78rem;
  font-weight: 700;
}
.step-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.context-error { min-height: 1.2em; margin: 12px 0 0; color: #a8543e; font-size: .85rem; }
.step-actions .primary-button { min-width: 140px; }
.results-back { margin-bottom: 18px; }
.work-grid.asking-step { display: block; max-width: 720px; margin: 0 auto; }
.asking-step .context-section { min-height: 330px; padding: 36px; }
.asking-step #context-fields { display: block; }
.asking-step #context-fields > label { font-size: 1.08rem; }
.asking-step #context-fields input { margin-top: 6px; min-height: 56px; font-size: 1.06rem; }
.question-form label { font-size: .88rem; }
.question-row { display: flex; gap: 10px; margin-top: 8px; }
.question-row input { min-height: 54px; font-size: 1.05rem; }
.question-row button { min-width: 132px; }
label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: .84rem;
  font-weight: 700;
}
input, textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #bfc9ce;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 400;
}
input:focus, textarea:focus { border-color: var(--green); }
input::placeholder, textarea::placeholder { color: #66737c; }
textarea { min-height: 104px; resize: vertical; }
.primary-button, .secondary-button, .quiet-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  min-height: 42px;
  padding: 9px 16px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
}
.primary-button { background: var(--green); color: #fff; }
.primary-button:hover:not(:disabled) { background: var(--green-dark); }
.secondary-button { background: var(--sage); color: var(--green-dark); }
.secondary-button:hover:not(:disabled) { background: #d4e2e9; }
.quiet-button { background: var(--sand); color: var(--ink); }
.quiet-button:hover { background: #e2e1dd; }
.icon-button {
  width: 35px;
  min-height: 35px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 1.2rem;
}
.icon-button:hover { background: var(--sand); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.section-head h2, .section-head h3 { overflow-wrap: anywhere; }
.section-head.compact { margin-bottom: 17px; }
.section-head.compact p { font-size: .86rem; margin: 5px 0 0; }
#workspace > .section-head { margin-bottom: 29px; }
.food-path {
  padding: 25px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--white);
}
.food-path > p.muted { margin: 0 0 19px; font-size: .9rem; }
.food-path-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.food-path-choice {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf9f6;
  color: var(--ink);
  text-align: left;
}
.food-path-choice:hover { border-color: var(--green); background: #f0f5f7; }
.food-path-choice[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--sage); }
.food-path-choice strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.18rem; line-height: 1.2; }
.food-path-choice span { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.question-tools { display: flex; flex-wrap: wrap; gap: 9px; }
.topic-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.topic-choice {
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf9f6;
  color: var(--ink);
  font: 700 .98rem/1.3 'DM Sans', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.topic-choice:hover { border-color: var(--green); background: var(--sage); }
.food-other-entry { margin-top: 16px; padding: 18px; border-radius: 12px; background: var(--sand); }
.food-other-row { display: flex; gap: 10px; margin-top: 8px; }
.food-other-row button { flex: 0 0 auto; }
.food-other-entry p { margin: 7px 0 0; font-size: .83rem; }
.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(270px, .85fr);
  gap: 24px;
  align-items: start;
}
.work-main { min-width: 0; }
.context-section, .memory-section {
  padding: 27px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--white);
  box-shadow: 0 5px 20px #25313a08;
}
.context-section > p, .memory-section > p {
  max-width: 630px;
  margin-bottom: 20px;
  font-size: .9rem;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}
.field-grid .wide { grid-column: 1 / -1; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.actions .muted { font-size: .83rem; }
.location-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 11px; margin-top: 17px; }
.location-controls label { min-width: 130px; }
.location-controls select {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #bfc9ce;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}
.location-controls .muted { flex: 1 1 220px; font-size: .83rem; }
.memory-section { background: #f0f1f0; }
.memory-section .empty-state { background: #fffefa; }
.memory-card {
  padding: 15px 18px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: 10px;
  background: var(--white);
}
.memory-card strong { display: block; overflow-wrap: anywhere; }
.memory-card p { margin: 7px 0 0; font-size: .86rem; overflow-wrap: anywhere; }
.memory-card button { margin-top: 12px; }
.results-section { padding-top: 16px; }
.results-section h3 { margin-bottom: 3px; }
.source-note {
  margin: 4px 0 17px;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--sage);
  color: #304d61;
  font-size: .83rem;
}
.option-form {
  padding: 22px;
  margin: 12px 0 17px;
  border: 1px solid #cfdae0;
  border-radius: 14px;
  background: #f0f5f7;
}
.option-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.decision-context {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
.decision-context h4 { margin: 0 0 10px; }
.decision-context-list { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: 7px 16px; margin: 0; font-size: .85rem; }
.decision-context-list dt { color: var(--muted); }
.decision-context-list dd { margin: 0; overflow-wrap: anywhere; }
.empty-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px;
  border: 1px dashed #bdc7cc;
  border-radius: 12px;
  background: var(--white);
  color: var(--muted);
}
.option-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 4px 16px #25313a08;
}
.option-card.selected {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green), 0 4px 16px #25313a0b;
  background: #f6fafb;
}
.option-card h4 { margin: 0; overflow-wrap: anywhere; }
.option-card p { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.option-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.option-top h4 { flex: 1 1 170px; }
.option-top > .muted {
  order: -1;
  width: 100%;
  color: var(--clay);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.option-tools { display: flex; flex-shrink: 0; margin-left: auto; }
.option-tools .icon-button:first-child { width: 42px; font-size: .75rem; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fact {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f3f2;
}
.fact span { display: block; color: var(--muted); font-size: .71rem; }
.fact strong { font-size: .85rem; overflow-wrap: anywhere; }
.option-card .missing-facts { color: var(--muted); font-size: .77rem; }
.option-card .match-note { color: var(--green-dark); font-size: .8rem; font-weight: 700; }
.option-card .select-option { width: 100%; margin-top: auto; }
.source-link { font-size: .82rem; }
.choice-panel {
  position: sticky;
  top: 20px;
  padding: 23px;
  border: 1px solid #cddbe2;
  border-radius: 17px;
  background: #e9f0f3;
}
.choice-panel > p.muted { font-size: .88rem; }
.selection-label {
  margin: 20px 0 3px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.choice-panel > strong { display: block; font-size: 1.12rem; overflow-wrap: anywhere; }
.choice-panel label { margin: 23px 0 6px; }
.choice-panel button { width: 100%; margin-top: 12px; }
.save-status { min-height: 1.2em; margin: 8px 0 0; color: var(--green); font-size: .84rem; }
.history { margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--line); }
.history h2 { font-size: 1.55rem; }
.history-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
}
.history-item p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.history-item strong { overflow-wrap: anywhere; }
@media (max-width: 850px) {
  .work-grid { grid-template-columns: 1fr; }
  .choice-panel { position: static; }
  .option-list { grid-template-columns: 1fr; }
  .food-path-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #food-other { grid-column: 1 / -1; min-height: 80px; }
}
@media (max-width: 600px) {
  .app-header, .app-footer { padding: 14px 16px; }
  .app-footer { align-items: start; flex-direction: column; }
  .app-shell { padding: 35px 16px 55px; }
  .page-heading { display: block; }
  .page-heading > p { margin-top: 12px; }
  .question-form { padding: 17px; margin-bottom: 36px; }
  .question-row { flex-direction: column; }
  .question-row button { width: 100%; }
  .section-head { align-items: start; flex-wrap: wrap; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .wide { grid-column: auto; }
  .context-section, .memory-section { padding: 20px; }
  .asking-step .context-section { min-height: 300px; padding: 24px; }
  .food-path { padding: 20px; }
  .food-path-choices { grid-template-columns: 1fr; }
  .topic-choices { grid-template-columns: 1fr; }
  #food-other { grid-column: auto; }
  .food-path-choice { min-height: 90px; }
  .food-other-row { flex-direction: column; }
  .source-note { line-height: 1.5; }
}

/* Dark LED theme: keep the original blue accent, with light drawn from it. */
:root {
  --led: #80c8ed;
  --ink: #edf6fb;
  --muted: #a9bdc9;
  --green: #304d61;
  --green-dark: #263f51;
  --sage: #142632;
  --clay: #80c8ed;
  --line: #294559;
  --paper: #05080c;
  --white: #0d1720;
  --sand: #16222c;
  --glow: #80c8ed;
}
html { background: #05080c; color-scheme: dark; }
body {
  background: radial-gradient(circle at 50% -170px, #162d3e 0, #081018 31%, #05080c 72%) fixed;
}
a { color: #91d6f5; }
:focus-visible { outline-color: var(--glow); box-shadow: 0 0 0 5px #80c8ed33; }
.app-header {
  background: #070d13e8;
  border-bottom-color: #3b6e8b;
  box-shadow: 0 1px 18px #3b8ab244;
}
.app-footer { background: #070d13; border-top-color: #294e65; }
.wordmark { color: var(--ink); text-shadow: 0 0 12px #80c8ed77; }
.mark {
  color: #f4fbff;
  background: var(--green);
  box-shadow: 0 0 0 1px #8bd4f0, 0 0 14px #6fc6f3aa, 0 0 30px #3c95c066;
}
h1, h2, h3 { text-shadow: 0 0 22px #4eabc344; }
.eyebrow { color: #90d8f8; }
.question-form, .choice-panel {
  color: var(--ink);
  background: linear-gradient(145deg, #101f2a, #0a141d);
  border: 1px solid #477792;
  box-shadow: 0 0 0 1px #47779233, 0 0 22px #2e729355, inset 0 1px #a4e4ff1c;
}
.step-progress, .source-note {
  background: #132d3c;
  color: #b5e7fb;
  border: 1px solid #427d9e;
  box-shadow: 0 0 14px #3e9aca44;
}
.context-error { color: #ffaeae; }
input, textarea, .location-controls select {
  color: var(--ink);
  background: #09131c;
  border: 1px solid #45657a;
  box-shadow: inset 0 1px 7px #020608;
}
input::placeholder, textarea::placeholder { color: #8ca6b6; }
input:focus, textarea:focus, .location-controls select:focus {
  border-color: #8bd4f0;
  outline: none;
  box-shadow: 0 0 0 2px #80c8ed55, 0 0 20px #61b8dc66;
}
.primary-button {
  color: #f4fbff;
  background: var(--green);
  border: 1px solid #7ac4e6;
  box-shadow: 0 0 12px #59b7e288, inset 0 1px #b7eaff44;
}
.primary-button:hover:not(:disabled) {
  background: #426e89;
  box-shadow: 0 0 19px #74cffaee, 0 0 32px #4b9fc077;
}
.secondary-button, .quiet-button {
  color: #dff4fe;
  background: #132938;
  border: 1px solid #426f89;
  box-shadow: 0 0 9px #469ac044;
}
.secondary-button:hover:not(:disabled), .quiet-button:hover {
  color: #fff;
  background: #1d3b4e;
  box-shadow: 0 0 17px #67bfe588;
}
.icon-button { color: #b7d2df; }
.icon-button:hover { color: #fff; background: #1a3342; box-shadow: 0 0 9px #6dbfe077; }
.food-path, .context-section, .memory-section, .decision-context,
.option-card, .history-item, .empty-state {
  color: var(--ink);
  background: #0d1720;
  border-color: #315269;
  box-shadow: 0 0 0 1px #78c8eb0b, 0 0 18px #2a749033;
}
.food-path-choice, .topic-choice {
  color: var(--ink);
  background: #0b1a25;
  border-color: #385e75;
}
.food-path-choice:hover, .topic-choice:hover {
  background: #173344;
  border-color: #8bd4f0;
  box-shadow: 0 0 16px #65bfe277;
}
.food-path-choice[aria-pressed="true"] {
  background: #18394c;
  border-color: #8bd4f0;
  box-shadow: inset 0 0 0 1px #8bd4f0, 0 0 18px #65bfe299;
}
.food-other-entry, .option-form { color: var(--ink); background: #122634; border: 1px solid #3e6983; }
.memory-card { background: #10212d; border-color: #315269; border-left-color: #80c8ed; }
.memory-section .empty-state { background: #0d1720; }
.option-card.selected {
  background: #132d3c;
  border-color: #8bd4f0;
  box-shadow: inset 0 0 0 1px #8bd4f0, 0 0 22px #65bfe277;
}
.option-top > .muted { color: #90d8f8; }
.fact { background: #172a36; border: 1px solid #2e5369; }
.option-card .match-note, .save-status { color: #a5e3fb; }
.history { border-top-color: #315269; }

/* LED accents follow the visitor's selection; surfaces and body text stay dark/light. */
:root {
  --green: color-mix(in srgb, var(--led) 36%, #0b1720);
  --green-dark: color-mix(in srgb, var(--led) 28%, #0b1720);
  --clay: var(--led);
  --glow: var(--led);
  --line: color-mix(in srgb, var(--led) 27%, #14202a);
}
body { background: radial-gradient(circle at 50% -170px, color-mix(in srgb, var(--led) 17%, #081018) 0, #081018 31%, #05080c 72%) fixed; }
a, .eyebrow, .option-top > .muted, .option-card .match-note, .save-status { color: color-mix(in srgb, var(--led) 85%, white); }
:focus-visible { box-shadow: 0 0 0 5px color-mix(in srgb, var(--led) 20%, transparent); }
.app-header { border-bottom-color: color-mix(in srgb, var(--led) 48%, #14202a); box-shadow: 0 1px 18px color-mix(in srgb, var(--led) 27%, transparent); }
.app-footer { border-top-color: var(--line); }
.wordmark { text-shadow: 0 0 12px color-mix(in srgb, var(--led) 48%, transparent); }
.mark { box-shadow: 0 0 0 1px var(--led), 0 0 14px color-mix(in srgb, var(--led) 67%, transparent), 0 0 30px color-mix(in srgb, var(--led) 36%, transparent); }
h1, h2, h3 { text-shadow: 0 0 22px color-mix(in srgb, var(--led) 27%, transparent); }
.question-form, .choice-panel { border-color: var(--led); box-shadow: 0 0 0 1px color-mix(in srgb, var(--led) 38%, transparent), 0 0 24px color-mix(in srgb, var(--led) 43%, transparent), inset 0 1px color-mix(in srgb, var(--led) 12%, transparent); }
.page-heading > p { color: color-mix(in srgb, var(--led) 72%, white); }
.step-progress, .source-note { background: color-mix(in srgb, var(--led) 15%, #0c1720); color: color-mix(in srgb, var(--led) 72%, white); border-color: color-mix(in srgb, var(--led) 50%, #14202a); box-shadow: 0 0 14px color-mix(in srgb, var(--led) 26%, transparent); }
input:focus, textarea:focus, .location-controls select:focus { border-color: var(--led); box-shadow: 0 0 0 2px color-mix(in srgb, var(--led) 33%, transparent), 0 0 20px color-mix(in srgb, var(--led) 40%, transparent); }
.primary-button { border-color: var(--led); box-shadow: 0 0 12px color-mix(in srgb, var(--led) 54%, transparent), inset 0 1px color-mix(in srgb, var(--led) 25%, transparent); }
.primary-button:hover:not(:disabled) { background: color-mix(in srgb, var(--led) 47%, #0b1720); box-shadow: 0 0 19px color-mix(in srgb, var(--led) 84%, transparent), 0 0 32px color-mix(in srgb, var(--led) 48%, transparent); }
.secondary-button, .quiet-button { border-color: color-mix(in srgb, var(--led) 48%, #14202a); box-shadow: 0 0 9px color-mix(in srgb, var(--led) 28%, transparent); }
.secondary-button:hover:not(:disabled), .quiet-button:hover { background: color-mix(in srgb, var(--led) 20%, #0b1720); box-shadow: 0 0 17px color-mix(in srgb, var(--led) 50%, transparent); }
.icon-button:hover { background: color-mix(in srgb, var(--led) 18%, #0b1720); box-shadow: 0 0 9px color-mix(in srgb, var(--led) 48%, transparent); }
.food-path, .context-section, .memory-section, .decision-context, .option-card, .history-item, .empty-state { border-color: color-mix(in srgb, var(--led) 34%, #14202a); box-shadow: 0 0 0 1px color-mix(in srgb, var(--led) 4%, transparent), 0 0 18px color-mix(in srgb, var(--led) 20%, transparent); }
.food-path-choice, .topic-choice { border-color: color-mix(in srgb, var(--led) 37%, #14202a); }
.food-path-choice:hover, .topic-choice:hover { background: color-mix(in srgb, var(--led) 18%, #0b1720); border-color: var(--led); box-shadow: 0 0 16px color-mix(in srgb, var(--led) 46%, transparent); }
.food-path-choice[aria-pressed="true"], .option-card.selected { background: color-mix(in srgb, var(--led) 17%, #0b1720); border-color: var(--led); box-shadow: inset 0 0 0 1px var(--led), 0 0 18px color-mix(in srgb, var(--led) 56%, transparent); }
.food-other-entry, .option-form, .fact { border-color: color-mix(in srgb, var(--led) 38%, #14202a); }
.memory-card { border-color: var(--line); border-left-color: var(--led); }
.history { border-top-color: var(--line); }
.question-form input,
input,
textarea,
.location-controls select { border-color: var(--led); }
input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--led) 38%, #b8b0a7); }
.header-controls { display: flex; align-items: center; gap: 20px; }
.led-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.led-picker select { color: var(--ink); background: #09131c; border: 1px solid var(--led); border-radius: 8px; padding: 6px 24px 6px 10px; box-shadow: 0 0 9px color-mix(in srgb, var(--led) 35%, transparent); cursor: pointer; }
.led-picker select:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
@media (max-width: 600px) {
  .header-controls { gap: 8px; }
  .header-date { display: none; }
  .led-picker { font-size: .75rem; gap: 5px; }
}

/* Warm charcoal is a neutral, slightly brown canvas for beige and warm-white LEDs. */
html[data-background="warm"] {
  --paper: #0b0908;
  --white: #191511;
  --sand: #201a15;
  --ink: #f5eee6;
  --muted: #c2b5a8;
}
html[data-background="warm"] body {
  background: radial-gradient(circle at 50% -170px, color-mix(in srgb, var(--led) 13%, #241a13) 0, #15110e 34%, #0b0908 76%) fixed;
}
html[data-background="warm"] .app-header { background: #100d0bea; }
html[data-background="warm"] .app-footer { background: #100d0b; }
html[data-background="warm"] .question-form,
html[data-background="warm"] .choice-panel { background: linear-gradient(145deg, #211a15, #15110e); }
html[data-background="warm"] .food-path,
html[data-background="warm"] .context-section,
html[data-background="warm"] .memory-section,
html[data-background="warm"] .decision-context,
html[data-background="warm"] .option-card,
html[data-background="warm"] .history-item,
html[data-background="warm"] .empty-state,
html[data-background="warm"] .memory-section .empty-state { background: #191511; }
html[data-background="warm"] input,
html[data-background="warm"] textarea,
html[data-background="warm"] .location-controls select,
html[data-background="warm"] .led-picker select { background: #100d0b; }
html[data-background="warm"] .food-path-choice,
html[data-background="warm"] .topic-choice { background: #1c1713; }
html[data-background="warm"] .food-other-entry,
html[data-background="warm"] .option-form,
html[data-background="warm"] .fact,
html[data-background="warm"] .memory-card { background: #241d17; }
html[data-background="warm"] .secondary-button,
html[data-background="warm"] .quiet-button,
html[data-background="warm"] .step-progress,
html[data-background="warm"] .source-note { background: color-mix(in srgb, var(--led) 10%, #1b1510); }
html[data-background="warm"] .secondary-button:hover:not(:disabled),
html[data-background="warm"] .quiet-button:hover,
html[data-background="warm"] .food-path-choice:hover,
html[data-background="warm"] .topic-choice:hover { background: color-mix(in srgb, var(--led) 17%, #1b1510); }
html[data-background="warm"] .food-path-choice[aria-pressed="true"],
html[data-background="warm"] .option-card.selected { background: color-mix(in srgb, var(--led) 15%, #1b1510); }
@media (max-width: 600px) {
  .app-header { flex-wrap: wrap; }
  .header-controls { width: 100%; }
  .led-picker { flex: 1; min-width: 0; flex-direction: column; align-items: stretch; }
  .led-picker select { width: 100%; min-width: 0; }
}