/* Hangul only: Latin falls through to Coming Soon, and pages without Hangul never fetch this file. */
@font-face {
  font-family: 'GeuriunJeongmaeil';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/2607161334@griun-everydayjeong-rg/griun-everydayjeong-rg/Griun_EverydayJeong-Rg.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}

:root {
  --paper: #d6e9f4;
  --cream: #fbf7ef;
  --cream-deep: #f3eadb;
  --white: #fffdf8;
  --line: #b24a36;
  --line-soft: rgba(178, 74, 54, 0.38);
  --line-faint: rgba(178, 74, 54, 0.14);
  --ink: #4a2c24;
  --muted: #7a5a50;

  --crayon-gold: #f4c24a;
  --crayon-red: #e2654f;
  --crayon-blue: #8bbbe3;
  --crayon-brown: #8a5634;
  --crayon-skin: #f6cfb0;
  --crayon-pink: #f09a86;
  --tint-gold: #fcefc8;

  --star-gold: #f4c24a;
  --star-berry: #ea705b;
  --star-snow: #ffffff;
  --star-sky: #8cc8ee;
  --star-blush: #f4a6bc;

  /* Uneven radii read as a box drawn by hand rather than cut by a machine. */
  --r-card: 16px 5px 18px 6px / 6px 17px 5px 16px;
  --r-field: 10px 4px 12px 5px / 5px 11px 4px 10px;
  --r-pill: 26px 22px 28px 20px / 20px 28px 22px 26px;
  --sketch: 2px 2px 0 var(--line-soft);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.32 0 0 0 0.17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --font-hand: 'GeuriunJeongmaeil', 'Coming Soon', 'Gowun Dodum', system-ui, sans-serif;
  --font-body: 'Gowun Dodum', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;

  --gutter: 16px;
  --column: 520px;
  color-scheme: light;
}

.star--gold, .tag--gold { --c: var(--star-gold); }
.star--berry, .tag--berry { --c: var(--star-berry); }
.star--snow, .tag--snow { --c: var(--star-snow); }
.star--sky, .tag--sky { --c: var(--star-sky); }
.star--blush, .tag--blush { --c: var(--star-blush); }

body[data-season="spring"] { --paper: #dcedea; }
body[data-season="summer"] { --paper: #d2e8f6; }
body[data-season="autumn"] { --paper: #eee4d3; }

*, *::before, *::after { box-sizing: border-box; }

/* The handwriting face has a single weight; synthesized bold smears its crayon strokes. */
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }

/* Column layout so the footer sits at the bottom of the screen even when there is little content. */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100dvh;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}

body:has(dialog[open]) { overflow: hidden; }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.snow {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.flake {
  position: absolute;
  top: -12px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  animation: fall var(--dur) linear var(--delay) infinite;
}

.flake--snow { border-radius: 50%; background: var(--white); opacity: 0.85; }

.flake--petal {
  width: calc(var(--size) * 1.5);
  border-radius: 80% 0 80% 0;
  background: #f6bccb;
  opacity: 0.9;
}

.flake--leaf {
  border: 1px solid var(--line-soft);
  border-radius: 0 80% 0 80%;
  background: var(--leaf);
}

@keyframes fall {
  from { transform: translate3d(0, -4vh, 0) rotate(0deg); }
  to { transform: translate3d(var(--drift), 104vh, 0) rotate(var(--spin, 0deg)); }
}

.topbar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: var(--column);
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 0;
}

.brand {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 19px;
  color: var(--line);
}

.topbar__actions { display: flex; flex: none; gap: 8px; }

.topbar__pill {
  position: relative;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--cream);
  box-shadow: var(--sketch);
  font-size: 14px;
  color: var(--ink);
}

.topbar__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--crayon-red);
  box-shadow: 0 0 0 2px var(--cream);
}

.views {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

body[data-view="tree"] .view--notes,
body[data-view="notes"] .view--tree { display: none; }

.year-nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.year-nav__title {
  margin: 0;
  white-space: nowrap;
  min-width: 7ch;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: var(--line);
}

.year-nav__btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--line);
  border-radius: 48% 52% 50% 46% / 52% 46% 54% 48%;
  background: var(--cream);
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--line);
}

.year-nav__btn:disabled { opacity: 0.3; }

/* The tree sits in the middle of whatever height is left between the year switcher and the dock. */
.view--tree {
  display: flex;
  flex-direction: column;
  /* 64px top bar + 82px floating dock (incl. its bottom offset). */
  min-height: calc(100dvh - 146px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.tree-scene { margin: auto 0; padding: 12px 0 4px; }

.tree-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  /* Room for the hand-drawn frame, which overshoots the drawing on every side. */
  margin: 4px auto 10px;
}

/* Ground, gnome and tree are stacked so the gnome can walk behind the tree and in front of it. */
.tree-ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.frame { filter: url(#crayon); }
.frame__fill { fill: var(--cream); }
.frame__edge { fill: none; stroke: var(--line); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.tree-ground ellipse {
  fill: url(#hatch-snow);
  stroke: var(--line);
  stroke-width: 2;
  filter: url(#crayon);
}

body[data-season="spring"] .tree-ground ellipse { fill: url(#hatch-spring); }
body[data-season="summer"] .tree-ground ellipse { fill: url(#hatch-summer); }
body[data-season="autumn"] .tree-ground ellipse { fill: url(#hatch-autumn); }

.tree {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  overflow: visible;
}

.tree__art { filter: url(#crayon); }

.trunk { fill: url(#hatch-trunk); stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.branch { fill: none; stroke: #9c6440; stroke-width: 5; stroke-linecap: round; }

.crown-outline circle { fill: none; stroke: var(--line); stroke-width: 4.4; }
body[data-season="spring"] .crown--a { fill: url(#crown-spring-a); }
body[data-season="spring"] .crown--b { fill: url(#crown-spring-b); }
body[data-season="summer"] .crown--a { fill: url(#crown-summer-a); }
body[data-season="summer"] .crown--b { fill: url(#crown-summer-b); }
body[data-season="autumn"] .crown--a { fill: url(#crown-autumn-a); }
body[data-season="autumn"] .crown--b { fill: url(#crown-autumn-b); }

.blossoms { display: none; }
body[data-season="spring"] .blossoms { display: inline; }
.blossom circle { fill: #f7bccb; stroke: var(--line); stroke-width: 0.5; }
.blossom .blossom__heart { fill: var(--crayon-gold); stroke: none; }

.tree[data-shape="round"] .tree__top { display: none; }

.tier { stroke: var(--line); stroke-width: 2.2; stroke-linejoin: round; }
.tier--light { fill: url(#hatch-light); }
.tier--mid { fill: url(#hatch-mid); }
.tier--dark { fill: url(#hatch-dark); }

.garland { display: none; }
.tree.is-complete .garland { display: inline; }

.garland__edge { fill: none; stroke: var(--line); stroke-width: 5.4; stroke-linecap: round; }
.garland__rope { fill: none; stroke: var(--crayon-gold); stroke-width: 3; stroke-linecap: round; }
.garland__berry { fill: var(--crayon-red); stroke: var(--line); stroke-width: 1.2; }

.sky-star {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.3;
  stroke-linejoin: round;
  opacity: 0.75;
}

.tree__top path {
  fill: var(--crayon-gold);
  stroke: var(--line);
  stroke-width: 2.2;
  stroke-linejoin: round;
  filter: url(#crayon-fine);
}

#star-layer { filter: url(#crayon-fine); }

.star { cursor: pointer; outline: none; }
.star__hit { fill: transparent; }

.star__shape {
  fill: var(--c);
  stroke: var(--line);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s ease;
}

.star:hover .star__shape { transform: scale(1.15); }

.star:focus-visible .star__hit {
  stroke: var(--line);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.star.is-pending { visibility: hidden; }
.star.is-new .star__shape { animation: pop 0.55s cubic-bezier(0.3, 1.7, 0.5, 1) both; }

@keyframes pop {
  from { transform: scale(0.3); }
  to { transform: scale(1); }
}

.star__ring {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.2;
  stroke-dasharray: 2.6 2.4;
  opacity: 0.8;
}

.burst circle { fill: var(--c); stroke: var(--line); stroke-width: 0.8; }

.flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
}

.flyer__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flyer__svg path {
  fill: var(--c);
  stroke: var(--line);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: url(#crayon-fine);
}

.gnome {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 13.75%;
  aspect-ratio: 44 / 74;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 94.6%;
  will-change: transform;
}

.gnome.is-behind { z-index: 1; opacity: 0.85; }

.gnome__flip { filter: url(#crayon-fine); }

.gnome__boot,
.gnome__coat,
.gnome__face,
.gnome__beard,
.gnome__hat,
.gnome__pom,
.gnome__mitt,
.gnome__held,
.hat__cone,
.hat__crown,
.hat__straw,
.hat__acorn,
.hat__leaf,
.hat__flower circle {
  stroke: var(--line);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.gnome__boot { fill: var(--crayon-brown); }
.gnome__coat { fill: var(--crayon-blue); }
.gnome__face { fill: var(--crayon-skin); }
.gnome__beard { fill: var(--white); }
.gnome__hat { fill: var(--crayon-red); }
.gnome__brim { fill: none; stroke: var(--white); stroke-width: 3.4; stroke-linecap: round; }
.gnome__pom { fill: var(--white); }
.gnome__nose { fill: var(--crayon-pink); }
.gnome__mitt { fill: var(--crayon-gold); transition: transform 0.25s ease; }

.gnome__held { fill: var(--c); opacity: 0; }

.hat { display: none; }
body[data-season="winter"] .hat--winter,
body[data-season="spring"] .hat--spring,
body[data-season="summer"] .hat--summer,
body[data-season="autumn"] .hat--autumn { display: inline; }

.hat__cone { fill: #a8d98f; }
.hat__band { fill: none; stroke: var(--star-blush); stroke-width: 2.8; stroke-linecap: round; }
.hat__flower circle { fill: var(--star-blush); stroke-width: 0.5; }
.hat__flower .hat__flower-heart { fill: var(--crayon-gold); }
.hat__crown,
.hat__straw { fill: #efd27c; }
.hat__ribbon { fill: none; stroke: var(--crayon-red); stroke-width: 2.2; }
.hat__acorn { fill: #b5804f; }
.hat__acorn-lines { fill: none; stroke: #7e4f2c; stroke-width: 0.8; }
.hat__stem { fill: none; stroke: #6b4226; stroke-width: 1.6; stroke-linecap: round; }
.hat__leaf { fill: #e8873e; }

.gnome.is-holding .gnome__held { opacity: 1; }
.gnome.is-carrying .gnome__mitt--front { transform: translate(-3.3px, -40px); }
.gnome.is-carrying .gnome__mitt--back { transform: translate(3.3px, -40px); }

.gnome.is-walking .gnome__body { animation: gnome-bob 0.26s ease-in-out infinite alternate; }
.gnome.is-walking .gnome__boot--front { animation: gnome-step 0.52s ease-in-out infinite; }
.gnome.is-walking .gnome__boot--back { animation: gnome-step 0.52s ease-in-out -0.26s infinite; }
.gnome.is-running .gnome__body { animation-duration: 0.15s; }
.gnome.is-running .gnome__boot--front { animation-duration: 0.3s; }
.gnome.is-running .gnome__boot--back { animation-duration: 0.3s; animation-delay: -0.15s; }

@keyframes gnome-bob {
  to { transform: translateY(-1.2px); }
}

@keyframes gnome-step {
  0%, 100% { transform: translate(-1.6px, 0); }
  50% { transform: translate(1.6px, -2.2px); }
}

.tree-summary {
  margin: 6px auto 0;
  max-width: 30em;
  text-align: center;
  font-size: 15px;
  color: var(--ink);
}

.recap {
  max-width: 420px;
  margin: 10px auto 0;
  padding: 14px 18px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  background: var(--cream) var(--grain);
  box-shadow: var(--sketch);
}

.recap[hidden] { display: none; }

.recap__title {
  margin: 0 0 8px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--line);
}

.recap__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 15px;
}

.recap__list dt { color: var(--muted); }
.recap__list dd { margin: 0; overflow-wrap: anywhere; }

.notes-title {
  margin: 18px 0 4px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: var(--line);
}

.note-year { margin-top: 18px; }

.note-year__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 26px;
  color: var(--line);
}

.note-year__sum {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
}

.tags {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 44px 16px 50px;
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  background: var(--cream) var(--grain);
  box-shadow: var(--sketch);
  color: var(--ink);
  text-align: left;
  transform: rotate(var(--tilt, 0deg));
}

.tag__hole {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

/* A loop of string through the hole, drawn as one arc. */
.tag__hole::after {
  content: '';
  position: absolute;
  left: -22px;
  top: -14px;
  width: 30px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-color: var(--line) transparent transparent var(--line);
  border-radius: 50%;
  transform: rotate(-28deg);
}

.tag__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  overflow: visible;
}

.tag__badge path {
  fill: var(--c);
  stroke: var(--line);
  stroke-width: 1.3;
  stroke-linejoin: round;
  filter: url(#crayon-fine);
}

.tag__date {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.tag__wish {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tag__gift {
  display: block;
  margin: 8px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.tag__memo {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1.5px dashed var(--line-soft);
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tag--large {
  padding: 22px 48px 22px 54px;
  transform: none;
}

.tag--large .tag__hole { background: var(--cream-deep); }

.tag--large .tag__wish {
  display: block;
  font-size: 29px;
  white-space: pre-wrap;
}

.tag--large .tag__gift { font-size: 15px; }

.tag-monthly {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 14px 2px 0;
  font-size: 15px;
}

.tag-monthly[hidden] { display: none; }

.empty {
  margin-top: 24px;
  padding: 24px 20px;
  border: 2px dashed var(--line-soft);
  border-radius: var(--r-card);
  background: rgba(251, 247, 239, 0.6);
  color: var(--ink);
}

.empty p { margin: 0 0 16px; }

.support {
  position: relative;
  /* Clears the floating dock: off-screen at first, never half-hidden behind it. */
  margin: 130px auto 0;
  padding: 0 var(--gutter);
  max-width: 34em;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.support[hidden] { display: none; }
.support__text { margin: 0 0 2px; }

/* Kept small on purpose: a quiet footnote, not a call to action competing with the notes. */
.support__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  color: var(--line);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.support__cup { width: 18px; height: 16px; overflow: visible; filter: url(#crayon-fine); }
.support__bowl { fill: var(--white); stroke: var(--line); stroke-width: 1.8; stroke-linejoin: round; }
.support__matcha { fill: #9cc56a; stroke: var(--line); stroke-width: 1.4; }
.support__foot,
.support__steam { fill: none; stroke: var(--line); stroke-width: 1.8; stroke-linecap: round; }

.dock {
  position: fixed;
  left: 50%;
  /* left: 50% would otherwise cap the shrink-to-fit width at half the screen. */
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--cream) var(--grain);
  box-shadow: var(--sketch);
  transform: translateX(-50%);
}

.dock__tab {
  white-space: nowrap;
  min-width: 64px;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 19px;
  color: var(--muted);
}

.dock__tab[aria-pressed="true"] {
  background: var(--line-faint);
  color: var(--line);
}

.dock__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 22px 0 18px;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--crayon-gold);
  color: var(--ink);
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 22px;
  white-space: nowrap;
}

.dock__add svg { width: 20px; height: 20px; overflow: visible; }

.dock__add path {
  fill: var(--white);
  stroke: var(--line);
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: url(#crayon-fine);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 10px 18px;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--cream);
  box-shadow: var(--sketch);
  color: var(--ink);
  font-size: 15px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.sheet {
  width: 100%;
  max-width: var(--column);
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 2px solid var(--line);
  border-bottom: 0;
  border-radius: 24px 18px 0 0 / 20px 24px 0 0;
  background: var(--cream) var(--grain);
  color: var(--ink);
  color-scheme: light;
  overflow: auto;
  overscroll-behavior: contain;
}

.sheet[open] { animation: sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet::backdrop { background: rgba(110, 80, 70, 0.2); }

@keyframes sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.sheet__inner { padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); }

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sheet__head h2 {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--line);
}

.sheet__close {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  color: var(--line);
}

.sheet__text { margin: 0 0 12px; font-size: 15px; color: var(--muted); }

.sheet__text--warn {
  padding: 10px 12px;
  border: 1.5px dashed var(--line-soft);
  border-radius: var(--r-field);
  background: var(--tint-gold);
  color: var(--ink);
}

.sheet__status { margin: 4px 0 16px; font-size: 15px; }

.sheet__msg:empty { display: none; }
.sheet__msg { margin: 12px 0 0; font-size: 15px; color: var(--line); }
#backup-msg { color: var(--ink); }

.sheet__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.sheet__actions .btn { flex: 1; }
.sheet__actions--stack { flex-direction: column; }

.sheet__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1.5px dashed var(--line-soft);
  border-radius: var(--r-field);
  background: var(--tint-gold);
  color: var(--ink);
  font-size: 15px;
}

.sheet__note[hidden] { display: none; }
.sheet__note p { margin: 0; }
.sheet__note .text-btn { flex: none; }

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.field__label { padding: 0; font-size: 14px; color: var(--muted); }

.field__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-field);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea { resize: vertical; }
.field ::placeholder { color: #a78d84; }

.field input:focus,
.field textarea:focus {
  border-color: var(--line);
  outline: 3px solid var(--line-faint);
  outline-offset: 0;
}

.field .field__wish {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.35;
}

.field input[type="date"] { display: block; text-align: left; }
.field input::-webkit-date-and-time-value { text-align: left; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.money { position: relative; display: block; }
.money input { padding-right: 84px; }

.money__currency {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  width: 76px;
  padding: 0 22px 0 10px;
  border: 0;
  border-left: 1.5px dashed var(--line-soft);
  border-radius: 0 8px 8px 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b24a36' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}

.money__currency:focus-visible { outline: 3px solid var(--line-faint); outline-offset: 0; }

.text-btn {
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--line);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Dashed like a cut-out coupon: it leaves the app for the charity's own page. */
.give-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px dashed var(--line);
  border-radius: var(--r-field);
  background: var(--white);
  color: var(--line);
  font-size: 15px;
  text-align: center;
  text-decoration: none;
}

.give-link::after { content: '↗'; font-size: 14px; }
.give-link[hidden] { display: none; }
.give-link--below { margin-top: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Anchors the visually hidden radio so it can't push the sheet sideways. */
.chip, .swatch { position: relative; }

.chip span {
  display: inline-block;
  padding: 8px 14px;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}

.chip input:checked + span {
  border-color: var(--line);
  background: var(--line);
  color: var(--cream);
}

.chip input:focus-visible + span { outline: 3px solid var(--line); outline-offset: 2px; }

.swatches { display: flex; gap: 6px; }

.swatch {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px dashed transparent;
  border-radius: 50%;
  cursor: pointer;
}

.swatch:has(input:checked) { border-color: var(--line); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--line); outline-offset: 2px; }

.swatch__star { width: 30px; height: 30px; overflow: visible; }

.swatch__star path {
  fill: var(--c);
  stroke: var(--line);
  stroke-width: 1.3;
  stroke-linejoin: round;
  filter: url(#crayon-fine);
}

.btn {
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--line-soft);
  border-radius: var(--r-field);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
}

.btn--primary {
  border-color: var(--line);
  background: var(--crayon-gold);
  box-shadow: var(--sketch);
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 22px;
}

.btn--wide { width: 100%; margin-top: 8px; }

.btn--danger { color: var(--line); }
.btn--danger[data-armed] { border-color: var(--line); background: var(--line); color: var(--cream); }

.org-group { margin-top: 18px; }

.org-group__title {
  margin: 0 0 8px;
  font-family: var(--font-hand);
  font-size: 20px;
  font-weight: 400;
  color: var(--line);
}

.org-items {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-choice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-field);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  text-align: left;
}

.org-choice__sub { flex: none; font-size: 13px; color: var(--muted); }

.chip-btn {
  min-height: 40px;
  padding: 8px 14px;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
}

@media (min-width: 640px) {
  .sheet {
    margin: auto;
    border-bottom: 2px solid var(--line);
    border-radius: 24px 18px 26px 16px / 20px 24px 18px 26px;
  }

  .sheet__inner { padding-bottom: 22px; }
}

@media (min-width: 960px) {
  :root { --column: 1080px; }

  .views {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  body[data-view] .view { display: block; }
  body[data-view] .view--tree { display: flex; min-height: calc(100dvh - 140px); }
  .view--tree { position: sticky; top: 16px; }
  .notes-title { margin-top: 22px; }
  .sheet { max-width: 520px; }
  .dock__tab { display: none; }
}

@media (max-width: 400px) {
  .brand { font-size: 16px; }
}

@media (max-width: 380px) {
  .brand { font-size: 15px; }
  .topbar__pill { padding: 0 11px; }
  .year-nav { gap: 8px; }
  .year-nav__title { min-width: 0; font-size: 28px; }
}

@media (max-width: 359px) {
  .brand { font-size: 14px; }
  .year-nav__title { font-size: 25px; }
  .field-row { grid-template-columns: 1fr; }
  .dock__tab { min-width: 0; padding: 0 10px; }
  .dock__add { gap: 4px; padding: 0 14px 0 12px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
  .star.is-new .star__shape,
  .sheet[open],
  .gnome * { animation: none !important; }
  .gnome__mitt,
  .toast,
  .star__shape { transition: none; }
}