/* Both guest rooms (ADR-0059): the guestbook and the family's world map. */
.guest { display: grid; gap: var(--space-6); }
.guest .card h2 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.who { color: var(--ink-soft); margin: 0 0 var(--space-4); }
.who:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.who .btn { flex: 0 0 auto; }

/* ---- writing ---- */
.write { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.write textarea {
  width: 100%; min-height: 6.5rem; padding: var(--space-3); resize: vertical;
  border: 0; border-radius: var(--radius); background: var(--surface-2); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line); font: 400 var(--step-0)/1.5 var(--font-ui);
}
.write .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.write .left { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }
.write .said { min-height: 1.6em; margin: 0; color: var(--accent); }
/* The honeypot: a field no person sees, so only a bot fills it in. */
.write .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- the messages ---- */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.note { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.note p { margin: 0; max-width: none; }
.note-text { font-size: var(--step-0); overflow-wrap: anywhere; white-space: pre-wrap; }
.note-by { margin-top: var(--space-2) !important; color: var(--ink-soft); font-size: var(--step--1); }
.note.waiting { box-shadow: inset 0 0 0 2px var(--line); background: transparent; }
.note-wait { margin-top: var(--space-1) !important; color: var(--warm, var(--accent)); font-size: var(--step--1); font-weight: 700; }
.note-act { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* ---- the map ---- */
.periods { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.periods button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.totals { font: 700 var(--step-1)/1.3 var(--font-display); margin: 0 0 var(--space-1); }
.since { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 var(--space-3); }
.map-box { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--sea); }
.world { display: block; width: 100%; height: auto; touch-action: manipulation; }
.world .sea { fill: var(--sea); }
.world .land { fill: var(--land); stroke: var(--sea); stroke-width: 0.6; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .3s ease; }
/* Five steps from "one visit" to "the most". The colour is the site's own
   accent, mixed into the land, so it belongs to whichever kid's site it is. */
.world .land[data-level="1"] { fill: color-mix(in srgb, var(--accent) 35%, var(--land)); }
.world .land[data-level="2"] { fill: color-mix(in srgb, var(--accent) 52%, var(--land)); }
.world .land[data-level="3"] { fill: color-mix(in srgb, var(--accent) 68%, var(--land)); }
.world .land[data-level="4"] { fill: color-mix(in srgb, var(--accent) 84%, var(--land)); }
.world .land[data-level="5"] { fill: var(--accent); }
.world .land.chosen { stroke: var(--ink); stroke-width: 2; }
.world .dot { stroke-width: 1; }
.world .ring { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: stroke; }
.world .dot[data-level="0"] { opacity: 0; pointer-events: none; }  /* a tiny country shows only once it has visitors */
.map-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.picked { min-height: 1.6em; margin: 0; font-weight: 700; }
.nobody { color: var(--ink-soft); }

.countries { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 700px) { .countries { grid-template-columns: repeat(2, 1fr); } }
.country {
  display: grid; grid-template-columns: 2.25rem 1fr auto; grid-template-rows: auto 6px; align-items: center; column-gap: var(--space-2);
  width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); text-align: left;
  border: 0; border-radius: var(--radius); background: var(--surface-2); color: var(--ink);
  font: 600 var(--step-0)/1.3 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.country[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.country .flag { grid-column: 1; grid-row: 1 / 3; font-size: 1.4rem; line-height: 1; }
.country .name { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.country .num { grid-column: 3; grid-row: 1; font-variant-numeric: tabular-nums; }
.country .bar { grid-column: 2 / 4; grid-row: 2; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--w), var(--line) var(--w)); }

:root { --sea: color-mix(in srgb, var(--surface-2) 70%, var(--bg)); --land: color-mix(in srgb, var(--ink) 16%, var(--surface)); }