:root { --ink: #1d2b4a; --sky: #4aa8f0; --horizon: #bfe6ff; --paper: #fffbea; --pressed: #ffd65c; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink); font-family: system-ui, sans-serif; background: linear-gradient(var(--sky), var(--horizon)); }
main { position: relative; width: 100vw; height: 100dvh; }
#world { display: block; width: 100%; height: 100%; outline: none; touch-action: none; image-rendering: pixelated; }
#world[hidden] { display: none; }
#world:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
#world.camera-dragging { cursor: grabbing !important; }
.camera-help {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  max-width: calc(100vw - 32px); box-sizing: border-box; width: max-content;
  margin: 0; padding: 5px 9px; background: #fffbeacc; color: var(--ink);
  font-size: 12px; text-align: center; pointer-events: none;
}
.camera-help[hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bar { position: absolute; z-index: 3; top: 16px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; pointer-events: none; }
.bar h1 { margin: 0 8px 0 0; font-size: 20px; font-weight: 800; letter-spacing: 0.04em; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }
.bar nav { display: flex; flex-wrap: wrap; gap: 8px; }
.bar button, .bar select, .bar .button {
  pointer-events: auto; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bar button[aria-pressed="true"] { background: var(--pressed); }
.places-menu { position: relative; }
.bar button.places-toggle {
  position: relative; z-index: 3; display: block; width: 60px; height: 60px; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  filter: drop-shadow(1px 3px 0 #382a25a6);
}
.places-toggle svg { display: block; width: 100%; height: 100%; }
.places-toggle[aria-expanded="true"] { filter: drop-shadow(0 0 4px #fff1cc) drop-shadow(1px 3px 0 #382a25a6); }
.places-dismiss { position: fixed; z-index: 1; inset: 0; pointer-events: auto; }
.bar nav.places-popup {
  position: absolute; z-index: 2; top: 64px; left: -12px;
  display: grid; gap: 9px; width: min(252px, calc(100vw - 116px));
  max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain;
  box-sizing: border-box; padding: 12px 8px 22px; pointer-events: auto;
  scrollbar-width: thin; scrollbar-color: #8c6845 #4b342642;
}
.bar nav.places-popup[hidden] { display: none; }
/* A post behind the boards, rather than a box around the menu. */
.places-popup::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 10px); width: 20px;
  background: repeating-linear-gradient(90deg, #795334 0 4px, #bc9663 4px 8px, #89623e 8px 12px);
  border: 2px solid #4b3426; box-shadow: inset 2px 0 #edcf9f, 4px 2px 0 #4b3426;
}
/* Flip in discrete frames, like a pixel-game card turning edge-on. The
   stationary button keeps its full hit area throughout the animation. */
.bar button.place-card {
  --plank: #bc9663;
  --grain: url("art/plank-grain-a.svg"); --grain-offset: 0px;
  --point: polygon(2px 4px, 22px 4px, 22px 2px, 60px 2px, 60px 4px, 88px 4px, 88px 2px, 132px 2px, 132px 0, 160px 0, 160px 2px, calc(100% - 26px) 2px, calc(100% - 26px) 6px, calc(100% - 22px) 6px, calc(100% - 22px) 10px, calc(100% - 18px) 10px, calc(100% - 18px) 14px, calc(100% - 12px) 14px, calc(100% - 12px) 18px, calc(100% - 6px) 18px, calc(100% - 6px) 22px, 100% 22px, 100% 26px, calc(100% - 4px) 26px, calc(100% - 4px) 30px, calc(100% - 10px) 30px, calc(100% - 10px) 34px, calc(100% - 16px) 34px, calc(100% - 16px) 40px, calc(100% - 22px) 40px, calc(100% - 22px) calc(100% - 2px), 154px calc(100% - 2px), 154px calc(100% - 4px), 126px calc(100% - 4px), 126px 100%, 84px 100%, 84px calc(100% - 2px), 38px calc(100% - 2px), 38px calc(100% - 4px), 4px calc(100% - 4px), 4px 34px, 0 34px, 0 22px, 2px 22px);
  position: relative; width: 100%; padding: 0; border: 0; background: transparent; box-shadow: none;
  perspective: 480px; filter: drop-shadow(0 2px 0 #4b3426) drop-shadow(2px 4px 0 #382a2570);
}
.bar button.place-card:nth-child(even) {
  --point: polygon(24px 2px, 52px 2px, 52px 0, 90px 0, 90px 2px, 124px 2px, 124px 4px, 158px 4px, 158px 2px, calc(100% - 4px) 2px, calc(100% - 4px) 14px, 100% 14px, 100% 28px, calc(100% - 2px) 28px, calc(100% - 2px) calc(100% - 4px), 174px calc(100% - 4px), 174px calc(100% - 2px), 142px calc(100% - 2px), 142px 100%, 110px 100%, 110px calc(100% - 2px), 72px calc(100% - 2px), 72px calc(100% - 4px), 26px calc(100% - 4px), 26px 40px, 20px 40px, 20px 36px, 14px 36px, 14px 32px, 8px 32px, 8px 28px, 0 28px, 0 24px, 4px 24px, 4px 20px, 10px 20px, 10px 16px, 16px 16px, 16px 10px, 24px 10px);
}
.bar button.place-card:nth-child(3n + 2) { --plank: #ae865c; --grain: url("art/plank-grain-b.svg"); --grain-offset: 8px; }
.bar button.place-card:nth-child(3n) { --plank: #c19e70; --grain: url("art/plank-grain-c.svg"); --grain-offset: -10px; }
.bar button.place-card:nth-child(n + 4) { --grain-offset: 22px; }
.bar button.place-card:nth-child(n + 7) { --grain-offset: -24px; }
.bar button.place-card:nth-child(4n + 3) {
  --point: polygon(4px 2px, 34px 2px, 34px 4px, 66px 4px, 66px 2px, 112px 2px, 112px 0, 148px 0, 148px 2px, calc(100% - 28px) 2px, calc(100% - 28px) 8px, calc(100% - 24px) 8px, calc(100% - 24px) 12px, calc(100% - 18px) 12px, calc(100% - 18px) 16px, calc(100% - 12px) 16px, calc(100% - 12px) 20px, calc(100% - 4px) 20px, calc(100% - 4px) 24px, 100% 24px, 100% 28px, calc(100% - 8px) 28px, calc(100% - 8px) 32px, calc(100% - 14px) 32px, calc(100% - 14px) 36px, calc(100% - 20px) 36px, calc(100% - 20px) 40px, calc(100% - 26px) 40px, calc(100% - 26px) calc(100% - 2px), 168px calc(100% - 2px), 168px 100%, 136px 100%, 136px calc(100% - 4px), 96px calc(100% - 4px), 96px calc(100% - 2px), 50px calc(100% - 2px), 50px calc(100% - 4px), 2px calc(100% - 4px), 2px 30px, 0 30px, 0 18px, 4px 18px);
}
.bar button.place-card:nth-child(4n + 4) {
  --point: polygon(28px 4px, 60px 4px, 60px 2px, 104px 2px, 104px 0, 130px 0, 130px 2px, 162px 2px, 162px 4px, calc(100% - 2px) 4px, calc(100% - 2px) 20px, 100% 20px, 100% 34px, calc(100% - 4px) 34px, calc(100% - 4px) calc(100% - 2px), 166px calc(100% - 2px), 166px calc(100% - 4px), 138px calc(100% - 4px), 138px 100%, 100px 100%, 100px calc(100% - 2px), 64px calc(100% - 2px), 64px calc(100% - 4px), 22px calc(100% - 4px), 22px 40px, 18px 40px, 18px 36px, 12px 36px, 12px 32px, 6px 32px, 6px 28px, 0 28px, 0 24px, 8px 24px, 8px 20px, 14px 20px, 14px 16px, 20px 16px, 20px 10px, 28px 10px);
}
.place-card-turn { display: grid; min-height: 48px; transform-style: preserve-3d; transition: transform 320ms steps(8, end); }
.place-card-front, .place-card-back {
  position: relative; grid-area: 1 / 1; display: grid; place-items: center; padding: 12px 30px;
  clip-path: var(--point); backface-visibility: hidden;
  color: #fff5dc; font-size: 14px; line-height: 1.25; letter-spacing: .025em;
  text-shadow: 1px 1px 0 #4b3426;
  box-shadow: inset 0 4px #edcf9f, inset 0 -4px #795334, inset 2px 0 #d5b082;
  /* Three hand-drawn grain patterns, staggered across the individual boards. */
  background: var(--grain) var(--grain-offset) center / 240px 48px repeat-x, var(--plank);
}
.place-card-front::after, .place-card-back::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: 6px; bottom: 6px; width: 3px; pointer-events: none;
  background: linear-gradient(90deg, #c8b89b 1px, #523a29 1px) top / 3px 3px no-repeat,
    linear-gradient(90deg, #523a29 2px, #c8b89b 2px) bottom / 3px 3px no-repeat;
}
.place-card-back { transform: rotateX(180deg); }
.place-card-back::before { content: attr(data-analogy); }
.place-card.has-analogy:is(:hover, .tap-revealed, :focus-visible) .place-card-turn { transform: rotateX(180deg); }
.bar button.place-card[aria-pressed="true"] { --plank: #c99f50; }
.bar button.place-card:active { filter: drop-shadow(0 1px 0 #4b3426); }
@media (prefers-reduced-motion: reduce) {
  .place-card-turn { transition: none; }
}
.bar .button { text-decoration: none; }
.bar .finances-link {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  filter: drop-shadow(2px 2px 0 #382a25a6);
}
.finances-link svg { display: block; width: 100%; height: 100%; }
.bar .finances-link:hover { filter: brightness(1.08) drop-shadow(2px 2px 0 #382a25a6); }
.bar .finances-link:active { transform: translate(2px, 2px); filter: none; }
.bar button:active { transform: translate(2px, 2px); box-shadow: none; }
.bar .end { margin-left: auto; }
.bar [hidden] { display: none; }
.bar button:focus-visible, .bar select:focus-visible, .bar a:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; font-size: 18px; }
.message[hidden] { display: none; }
.bar .trail { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; font-weight: 600; color: var(--paper); text-shadow: 1px 1px 0 var(--ink); }
.bar .trail[hidden] { display: none; }
.bar .trail button { padding: 2px 8px; font-size: 13px; }
.bar .trail span[aria-current] { padding: 2px 0; }
.tip { position: absolute; z-index: 2; max-width: min(360px, calc(100vw - 32px)); margin: 0; padding: 6px 10px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: var(--paper); font-size: 14px; font-weight: 600; pointer-events: none; }
.tip[hidden] { display: none; }
.tip table { margin-top: 4px; border-collapse: collapse; font-weight: 400; }
.tip td { padding: 0; }
.tip td.amount, .tip td.share { padding-left: 10px; text-align: right; white-space: nowrap; }
.tip td.detail { padding-left: 10px; }
.tip tr.source td.name { padding-left: 12px; font-style: italic; }

/* an example household's banner, under the header's buttons */
.bar .banner { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; color: var(--paper); text-shadow: 1px 1px 0 var(--ink); }
.bar .banner a { pointer-events: auto; color: var(--paper); display: inline-flex; align-items: center; min-height: 44px; }

/* the finances screens: a sheet of paper on the sky, scrolling under the header */
.finances { position: absolute; inset: 0; overflow-y: auto; padding: 72px 16px 32px; }
.finances[hidden] { display: none; }
.sheet { max-width: 520px; margin: 0 auto; padding: 20px 24px 24px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); }
.sheet[hidden] { display: none; }
.sheet h2 { margin: 0 0 12px; font-size: 22px; font-weight: 800; }
.sheet h2:focus { outline: none; }
.sheet p { margin: 0 0 12px; }
.sheet a { color: var(--ink); font-weight: 600; }
.sheet a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
.sheet .notice { padding: 8px 10px; border: 2px solid var(--ink); background: var(--pressed); }
.sheet .currency { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
.sheet .field { margin: 18px 0 0; padding-top: 14px; border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.sheet label { display: block; font-weight: 700; }
.sheet .currency label { display: inline; }
.sheet .hint, .sheet .cover { margin: 2px 0 6px; font-size: 14px; }
.sheet .cover { margin-top: 6px; font-style: italic; }
.sheet .amount { display: flex; align-items: center; gap: 8px; }
.sheet input, .sheet select { min-height: 44px; box-sizing: border-box; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 18px; }
.sheet input { width: 100%; max-width: 240px; text-align: right; font-variant-numeric: tabular-nums; }
.sheet input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 2px #b3261e; }
.sheet input:focus-visible, .sheet select:focus-visible, .sheet a:focus-visible, .sheet button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.sheet .unit { font-weight: 700; }
.sheet .error { margin: 6px 0; color: #b3261e; font-weight: 600; }
.sheet .error[hidden], .sheet .cover[hidden] { display: none; }
.sheet .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.sheet .primary, .sheet .actions .button {
  min-height: 44px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink);
  background: var(--pressed); color: var(--ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.sheet .actions .button { background: var(--paper); }
.sheet .primary:active, .sheet .actions .button:active { transform: translate(2px, 2px); box-shadow: none; }
.sheet .primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--ink); }

/* the details pages' cards: a record each, with its fields, and a line to undo one removed */
.sheet .card { margin: 16px 0 0; padding: 12px 14px 14px; border: 2px solid var(--ink); background: #fff; }
.sheet .card :is(h3, h4) { margin: 0; font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.sheet .group > h3 { margin: 28px 0 0; padding-top: 14px; border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); font-size: 19px; font-weight: 800; }
.sheet .card .field { margin: 10px 0 0; padding-top: 0; border-top: 0; }
.sheet .card input:not([inputmode]), .sheet .card select { width: 100%; max-width: none; text-align: left; }
.sheet .card .remove, .sheet .card .clone, .sheet .add, .sheet .removed button {
  min-height: 44px; margin-top: 12px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink);
  background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.sheet .add { display: block; margin-top: 16px; }
.sheet .add:disabled, .sheet .card .clone:disabled { opacity: 0.5; cursor: not-allowed; }
.sheet .removed { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 16px 0 0; padding: 8px 14px; border: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); }
.sheet .removed button { margin-top: 0; }
.sheet .raised { margin: 6px 0; font-size: 14px; font-weight: 700; }
.sheet .raised[hidden] { display: none; }

.sheet .classification { min-width: 0; }
.sheet .classification-label { display: block; font-weight: bold; }
.sheet .classification > div { margin-top: 10px; min-width: 0; }
.sheet .classification select { width: 100%; max-width: 100%; min-height: 44px; }
.sheet .classification-path { overflow-wrap: anywhere; white-space: normal; }
.sheet select[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 2px #b3261e; }