/* Structural layout. Do not make assumptions about appearance. */
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--color-bg); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, .button-link, .door, .link-list a, .today-list a {
  min-height: 48px;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}
button, .button-link {
  border: 1px solid var(--color-line);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font: inherit;
  padding: 1rem;
  text-decoration: none;
}
.app-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
}
.hero, .page-header {
  display: grid;
  gap: 1rem;
  padding: 1rem 0 1.2rem;
}
.hero h1, .page-header h1 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: .9;
  margin: .1rem 0 0;
  letter-spacing: .06em;
}
.page-header p, .state-note, .weather-placeholder, footer { color: var(--color-muted); }
.eyebrow {
  margin: 0;
  color: var(--color-accent-strong);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--text-xs);
}
.status-card, .panel {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: 1px solid var(--color-line);
  border-radius: 26px;
  box-shadow: var(--shadow-soft);
}
.status-card { padding: 1rem; display: grid; gap: .35rem; }
.panel { padding: 1rem; margin: 1rem 0; }
h2 { margin: 0 0 .8rem; font-size: var(--text-lg); }
.state-grid, .door-grid, .today-list, .link-list, .action-row {
  display: grid;
  gap: .75rem;
}
.state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.state-button { width: 100%; font-weight: 700; }
.state-button[aria-pressed="true"] {
  border-color: var(--color-accent-strong);
  box-shadow: 0 0 0 2px rgba(241,211,122,.2) inset;
}
.door-grid { grid-template-columns: 1fr; }
.door, .link-list a, .today-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-line);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.door::after, .link-list a::after, .today-list a::after { content: "→"; color: var(--color-accent); }
.door.is-promoted { border-color: var(--color-accent-strong); transform: translateY(-1px); }
.door.is-muted { opacity: .48; }
.today-list a, .link-list a { text-transform: none; letter-spacing: 0; font-weight: 650; }
.back-link { color: var(--color-muted); text-decoration: none; width: fit-content; }
.primary-action {
  width: 100%;
  min-height: 96px;
  font-size: 1.15rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-color: var(--color-accent-strong);
}
.wonder-card { margin-top: 1rem; padding: 1rem; border: 1px solid var(--color-line); border-radius: 22px; background: rgba(255,255,255,.04); }
.wonder-card h2 { font-family: var(--font-heading); font-size: 2rem; margin-top: .35rem; }
.action-row { grid-template-columns: 1fr; margin-top: 1rem; }
.saved-list { display: grid; gap: .75rem; }
.saved-item { padding: .9rem; border: 1px solid var(--color-line); border-radius: 18px; background: rgba(255,255,255,.035); }
footer { text-align: center; padding: 1.5rem .5rem .5rem; font-size: var(--text-sm); }
/* State-dependent visual styling */
body[data-state="recovery"] .state-note::after { content: " Nothing here is a moral test."; }
body[data-state="curious"] .state-note::after { content: " Open the cabinet. Poke reality gently with a stick."; }
body[data-state="building"] .state-note::after { content: " Tools first. Wizard code last. Preferably never."; }
body[data-state="social"] .state-note::after { content: " Hearth mode."; }
body[data-state="bureaucracy"] .state-note::after { content: " Tiny grumpy goblin deployed."; }
@media (min-width: 620px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: end; }
  .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-row { grid-template-columns: repeat(3, 1fr); }
}
@supports not (color: color-mix(in srgb, white, black)) {
  .status-card, .panel { background: var(--color-surface); }
}


/* Observatory V1.5 structural components */
.hero-title { display: flex; align-items: center; gap: .9rem; }
.observatory-seal { width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 0 24px rgba(197,161,93,.18); }
.motto { margin: .3rem 0 0; color: var(--color-accent-strong); font-family: var(--font-heading); }
.stacked-cards { display: grid; gap: .75rem; }
.mini-card {
  padding: .95rem;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.mini-card-title { color: var(--color-accent-strong); text-transform: uppercase; letter-spacing: .12em; font-size: var(--text-xs); margin-bottom: .35rem; }
.mini-card small, .reminder-item small, .saved-item small { color: var(--color-muted); display: block; margin-top: .25rem; }
.section-heading-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.small-button { min-height: 40px; padding: .5rem .8rem; border-radius: 999px; }
.reminder-form { display: grid; gap: .75rem; margin: 1rem 0; }
.reminder-form label, .dropdown-label { display: grid; gap: .35rem; color: var(--color-muted); font-size: var(--text-sm); }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--color-line);
  background: var(--color-surface-soft);
  color: var(--color-text);
  border-radius: 14px;
  padding: .8rem;
  font: inherit;
}
.reminder-group { margin-top: 1rem; }
.reminder-group h3, .wonder-feedback h3 { margin: .5rem 0; color: var(--color-accent-strong); font-size: var(--text-base); }
.reminder-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .75rem;
  align-items: start;
  padding: .75rem 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.reminder-item button { min-height: 36px; padding: .35rem .55rem; border-radius: 999px; }
.reminder-item small { grid-column: 2; }
.impossible-question p:last-child { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.35; }
.secret-note { text-align: center; color: var(--color-accent-strong); letter-spacing: .08em; }
.wonder-feedback { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-line); display: grid; gap: .8rem; }
.rating-row, .tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.rating-row button, .tag-button {
  min-height: 38px;
  border-radius: 999px;
  padding: .45rem .75rem;
  font-size: var(--text-sm);
}
.rating-row button.is-active, .tag-button.is-active {
  border-color: var(--color-accent-strong);
  background: rgba(197,161,93,.18);
}
.birthday-watch { border-color: var(--color-accent-strong); }
body::after {
  content: "THIS HOUSE REMEMBERS NOT WHAT YOU KNEW, BUT WHAT MADE YOU LOVE THE WORLD.";
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%) rotate(-4deg);
  width: min(80vw, 560px);
  pointer-events: none;
  text-align: center;
  color: rgba(243,238,228,.045);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 8vw, 3.5rem);
  line-height: 1.05;
  z-index: -1;
}
@media (min-width: 620px) {
  .stacked-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}