/* Clean and Personal / 15 Hand-Drawn. UI overrides only. */
:root {
  color-scheme: light;
  --paper: #fffdf6;
  --sheet: #ffffff;
  --ink: #242321;
  --muted: #666159;
  --accent: #c94c50;
  --highlight: #ffe3dc;
  --line: #34312c;
  --hand: 'KaiTi', 'STKaiti', 'Segoe Print', cursive;
  --sketch-radius: 9px 15px 8px 12px / 12px 8px 14px 9px;
}
html { scroll-padding-top: 150px; }
body { background: var(--paper); color: var(--ink); line-height: 1.75; }
.stars { display: none; }
.container { max-width: 860px; padding-inline: 28px; }
nav {
  background: var(--paper); border-bottom: 2px solid var(--line);
  backdrop-filter: none; padding: 14px 20px; gap: 8px 12px;
}
nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); background: transparent; border-radius: 4px;
  padding: 8px 12px; font-weight: 650; transition: background .15s ease;
  text-underline-offset: 7px;
}
nav a:hover { color: var(--ink); background: var(--highlight); text-decoration: underline; }
section {
  position: relative; margin: 34px 0; padding: 32px;
  background: var(--sheet); border: 2px solid var(--line);
  border-radius: var(--sketch-radius); box-shadow: 4px 5px 0 var(--line);
  backdrop-filter: none; scroll-margin-top: 12px;
}
h2, h3, #random-quote { font-family: var(--hand); color: var(--ink); }
h2 {
  font-size: clamp(1.55rem, 4vw, 2rem); line-height: 1.45;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 2px dashed #d4c8b9; letter-spacing: .035em;
}
h3, .todo-section h3 { color: var(--ink); font-size: 1.3rem; }
#home { background: transparent; border: 0; box-shadow: none; padding: 26px 4px 14px; }
#home h2 { justify-content: center; border: 0; font-size: clamp(1.8rem, 5vw, 2.8rem); }
#home h2::after { content: ''; position: absolute; top: 90px; width: 130px; border-bottom: 3px solid #ef7675; transform: rotate(-2deg); }
#home > div > p { font-family: var(--hand); color: var(--ink) !important; }
#date-display { color: var(--muted) !important; }
#live-clock { color: var(--ink) !important; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
#next-meet { color: #97403e !important; }
.btn {
  background: var(--sheet); color: var(--ink); border: 2px solid var(--line);
  border-radius: 5px 8px 4px 7px; box-shadow: 3px 3px 0 var(--line);
  min-height: 44px; min-width: 44px; padding: 9px 18px;
  font-size: .95rem; line-height: 1.5; transition: background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--highlight); color: var(--ink); transform: none; box-shadow: 2px 2px 0 var(--line); }
.btn:active { box-shadow: 0 0 0 var(--line); }
.btn:disabled { color: #716e68; background: #eeece6; box-shadow: none; cursor: not-allowed; }
#unlockBtn, #newQuoteBtn, #addTimelineBtn, #sendMsg { background: var(--highlight); }
:where(a, button, input, textarea, select, canvas):focus-visible { outline: 3px solid #a73940; outline-offset: 4px; }
input, textarea, select {
  color: var(--ink); background: var(--paper); border: 1.5px solid #787169;
  border-radius: 5px 8px 5px 7px; min-height: 44px; min-width: 0;
  font-family: inherit; line-height: 1.6; padding: 10px 13px;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #777066; opacity: 1; }
select option { background: var(--paper); color: var(--ink); }
input[type=checkbox] { min-height: 22px; min-width: 22px; accent-color: var(--accent); }
input[type=file] { max-width: 100%; font-size: .9rem; }
input::file-selector-button { border: 1px solid var(--line); padding: 6px 10px; background: var(--highlight); border-radius: 4px; color: var(--ink); }
.field-label { display: block; margin-top: 15px; font-weight: 600; font-size: .9rem; text-align: left; }
#secret .field-label { text-align: center; }
.timeline-item, .wish-item, .weather-card, .reminder-item {
  background: var(--paper); border: 1px solid #c9bdab;
  border-radius: var(--sketch-radius); padding: 16px; color: var(--ink);
}
.weather-card { min-width: min(200px, 100%); }
.weather-duo { gap: 16px; }
.weather-card h3 { margin-bottom: 12px; }
.reminder-item { border: 0; border-bottom: 1px dashed #c9bdab; border-radius: 0; padding: 14px 4px; }
.reminder-item:last-child { border-bottom: 0; }
.wish-item { gap: 12px; align-items: center; flex-wrap: wrap; }
.wish-item > span { overflow-wrap: anywhere; flex: 1 1 160px; }
.todo-section { margin-top: 24px; }
.data-actions { gap: 12px; }
#messages p, #diaryList > div { padding-block: 12px; border-bottom: 1px dashed #c9bdab; overflow-wrap: anywhere; }
small { color: var(--muted); }
.carousel-container { border: 2px solid var(--line); border-radius: var(--sketch-radius); background: #f3eee5; box-shadow: 4px 4px 0 #d5cbbb; }
.carousel-photo-frame { background: #f3eee5; }
.carousel-caption { color: var(--ink); background: var(--sheet); border-top: 1px solid #c9bdab; }
.carousel-caption time { color: var(--muted); }
.carousel-caption strong { font-weight: 650; }
.carousel-btn { width: 44px; height: 44px; border: 2px solid var(--line); background: #fffdf6ed; color: var(--ink); backdrop-filter: none; border-radius: 8px 12px 7px 10px; }
.carousel-btn:hover { background: var(--highlight); }
.carousel-counter { background: var(--ink); color: white; }
.carousel-empty { color: var(--muted); }
.photo-preview { background: #eee7dc; }
.photo-preview:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
#lovewords { background: #fff3ed; }
#random-quote { font-size: clamp(1.4rem, 4vw, 1.85rem); padding: 16px 0; line-height: 1.8; }
#secret { background: #f6f3e9; }
#unlockMsg, #timelineAddMsg { color: #a1303a !important; }
/* The existing renderers emit dark-theme inline colors. Override colors only. */
.container [style*='color:#aaa'], .container [style*='color: #aaa'],
.container [style*='color:#ccc'], .container [style*='color: #ccc'] { color: var(--muted) !important; }
.timeline-header .btn[style*="background:#555"] { background: #eeece6 !important; color: #4b4742; }
.timeline-header .btn[style*="background:#f0c9a0"] { background: var(--highlight) !important; }
#drawCanvas { max-width: 100%; border: 2px solid var(--line) !important; border-radius: var(--sketch-radius) !important; }
.map-container { border: 1px solid var(--line); border-radius: var(--sketch-radius); }
@media (max-width: 600px) {
  .container { padding-inline: 16px; }
  nav { gap: 2px 4px; padding: 8px; }
  nav a { padding: 8px; font-size: .82rem; }
  section { margin-block: 26px; padding: 24px 18px; box-shadow: 3px 4px 0 var(--line); }
  #home h2::after { top: 80px; }
  .btn { padding-inline: 12px; }
  #full-timeline > div:first-child { flex-wrap: wrap; gap: 12px; }
  #message-wall > div:last-of-type { flex-wrap: wrap; }
  #message-wall select, #message-wall input { flex-basis: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}