/* Commonplace — one stylesheet.
   Reference object: a field notebook. Cream paper, ink, one accent.
   No status colours: this product does not grade, so it does not use green
   and red to mean good and bad. Motion is small, fast, and always earns its
   place by explaining what just happened. */

/* --------------------------------------------------------------- tokens */
:root {
  --paper:      #FAF7F1;
  --paper-2:    #F3EEE4;
  --paper-3:    #EAE3D6;
  --ink:        #211E1A;
  --ink-2:      #4A443C;
  --ink-3:      #7D7566;
  --rule:       #DDD5C6;
  --accent:     #A8654A;   /* clay — overridden per child */
  --accent-soft:#E8D5CB;
  --accent-ink: #FFFFFF;
  --shadow:     0 1px 2px rgba(33,30,26,.06), 0 6px 20px rgba(33,30,26,.05);
  --shadow-lift:0 2px 6px rgba(33,30,26,.08), 0 16px 40px rgba(33,30,26,.10);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-pill: 999px;
  --measure: 34rem;
  --t-fast: 120ms; --t: 200ms; --t-slow: 420ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="dark"] {
  --paper:      #16150F;
  --paper-2:    #1E1C16;
  --paper-3:    #2A271F;
  --ink:        #EFE9DC;
  --ink-2:      #C3BBAA;
  --ink-3:      #8E8677;
  --rule:       #36322A;
  --accent:     #D79877;
  --accent-soft:#3A2F27;
  --accent-ink: #16150F;
  --shadow:     0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
  --shadow-lift:0 2px 6px rgba(0,0,0,.36), 0 16px 40px rgba(0,0,0,.44);
}

/* The active child's colour flows through the whole app via --accent, so you
   can tell whose book you are in at a glance without reading the name. The
   transition is slow enough to register as "the book changed". */
html { transition: none; }
:root { --accent-t: color var(--t-slow) var(--ease); }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
body { transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease); }

h1,h2,h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 1em; max-width: var(--measure); }
a  { color: var(--accent); text-underline-offset: 3px; }
small, .small { font-size: .82rem; }
hr { border: 0; border-top: 1px dashed var(--rule); margin: 1rem 0; }

.chrome { font-family: var(--sans); letter-spacing: .01em; }
.muted  { color: var(--ink-3); }
.dim    { color: var(--ink-2); }

/* ---------------------------------------------------------------- layout */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem max(.9rem, env(safe-area-inset-left)) .55rem max(.9rem, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.topbar .brand {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  letter-spacing: .012em; display: flex; align-items: center; gap: .45rem;
}
.brand .mark { width: 15px; height: 15px; flex: none; stroke: var(--accent); transition: stroke var(--t-slow) var(--ease); }

/* child switcher */
.kidbtn {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: auto;
  font-family: var(--sans); font-size: .84rem; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: .26rem .7rem .26rem .5rem; cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.kidbtn:hover { background: var(--paper-3); }
.kidbtn .swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kidbtn .caret { width: 9px; height: 9px; opacity: .5; }

.swatch { display: inline-block; border-radius: 50%; background: var(--sw, var(--accent)); }

main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.1rem 1rem 7.5rem; }
.view { animation: viewIn var(--t-slow) var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .69rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); padding: .6rem .2rem .55rem;
  display: flex; flex-direction: column; align-items: center; gap: .22rem;
  transition: color var(--t) var(--ease);
  position: relative;
}
.tabbar button svg { width: 20px; height: 20px; transition: transform var(--t) var(--ease); }
.tabbar button[aria-selected="true"] { color: var(--accent); }
.tabbar button[aria-selected="true"] svg { transform: translateY(-1px) scale(1.06); }
.tabbar button[aria-selected="true"]::after {
  content: ''; position: absolute; top: 0; left: 50%; width: 18px; height: 2px;
  background: var(--accent); border-radius: 0 0 2px 2px;
  transform: translateX(-50%) scaleX(0); transform-origin: center;
  animation: tabMark var(--t) var(--ease) forwards;
}
@keyframes tabMark { to { transform: translateX(-50%) scaleX(1); } }
.tabbar .dot {
  position: absolute; top: .5rem; right: calc(50% - 16px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pop var(--t) var(--ease) both;
}

/* -------------------------------------------------------------- controls */
button, input, textarea, select { font: inherit; color: inherit; }

.btn {
  font-family: var(--sans); font-size: .88rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .62rem 1.05rem; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink);
  cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease),
                              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover { background: var(--paper-3); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--paper-2); }
.btn.small { padding: .38rem .7rem; font-size: .79rem; }
.btn.block { width: 100%; }
.btn.danger { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
             border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { margin-bottom: .95rem; }
.field label { display: block; font-family: var(--sans); font-size: .76rem; letter-spacing: .05em;
               text-transform: uppercase; color: var(--ink-3); margin-bottom: .32rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: .68rem .8rem; border-radius: var(--r);
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
textarea { resize: vertical; min-height: 4.5rem; font-family: var(--serif); }
.hint { font-family: var(--sans); font-size: .76rem; color: var(--ink-3); margin-top: .3rem; }
.err  { font-family: var(--sans); font-size: .82rem; color: var(--accent);
        background: var(--accent-soft); padding: .55rem .7rem; border-radius: var(--r-sm);
        margin: .5rem 0; animation: shake 340ms var(--ease); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)}
                   40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }

/* ------------------------------------------------------------ colour pick */
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.swatches button {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent; background: var(--sw);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
  position: relative;
}
.swatches button:hover { transform: scale(1.1); }
.swatches button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--sw);
  animation: pop var(--t) var(--ease);
}
.swatches button[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px,-2px);
}

/* ---------------------------------------------------------------- capture */
.capture { position: relative; }
.capture textarea {
  min-height: 9.5rem; font-size: 1.06rem; line-height: 1.6; border-radius: var(--r-lg);
  padding: 1rem 1.05rem; background: var(--paper-2); border-color: var(--rule);
}
.capture-bar { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.counter { font-family: var(--sans); font-size: .74rem; color: var(--ink-3); margin-left: auto;
           opacity: 0; transition: opacity var(--t) var(--ease); }
.counter.show { opacity: 1; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.chip {
  font-family: var(--sans); font-size: .79rem; padding: .34rem .72rem;
  border-radius: var(--r-pill); border: 1px solid var(--rule);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--ink)); animation: pop var(--t) var(--ease);
}
@keyframes pop { 0% { transform: scale(.86); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

.rec-wrap { display: flex; align-items: center; gap: .6rem; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.rec-dot.live { animation: breathe 1.5s var(--ease) infinite; }
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.levels { display: flex; align-items: center; gap: 2px; height: 20px; }
.levels i { width: 3px; border-radius: 2px; background: var(--accent); height: 4px;
            transition: height 90ms linear; display: block; }

/* ---------------------------------------------------------------- entries */
.day-head {
  font-family: var(--sans); font-size: .73rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 1.6rem 0 .55rem; display: flex; align-items: center; gap: .6rem;
}
.day-head::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.entry {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: .9rem 1rem; margin-bottom: .55rem; box-shadow: var(--shadow);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
  animation: settle var(--t-slow) var(--ease) both;
}
@keyframes settle { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.entry:hover { box-shadow: var(--shadow-lift); }
.entry .body { white-space: pre-wrap; margin: 0; }
.entry .meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
               margin-top: .55rem; font-family: var(--sans); font-size: .73rem; color: var(--ink-3); }
.entry .meta .tag { padding: .12rem .5rem; border-radius: var(--r-pill); background: var(--paper-3); }
.entry.is-private { border-style: dashed; }
.entry.is-private .body { font-style: italic; }
.entry .acts { display: flex; gap: .2rem; margin-left: auto; opacity: 0; transition: opacity var(--t) var(--ease); }
.entry:hover .acts, .entry:focus-within .acts { opacity: 1; }
@media (hover: none) { .entry .acts { opacity: 1; } }
.entry.removing { animation: fadeOut var(--t) var(--ease) forwards; }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-6px) scale(.97); margin-bottom: -3rem; } }

mark { background: color-mix(in srgb, var(--accent) 24%, transparent); color: inherit; border-radius: 2px; padding: 0 .12em; }

/* ---------------------------------------------------------------- wonders */
.wonder {
  border: 1px solid var(--rule); border-radius: var(--r-lg); padding: .95rem 1rem;
  margin-bottom: .55rem; background: var(--paper-2); box-shadow: var(--shadow);
  animation: settle var(--t-slow) var(--ease) both;
}
.wonder .q { font-size: 1.05rem; margin: 0 0 .5rem; }
.wonder .q::before { content: '“'; color: var(--accent); margin-right: .05em; }
.wonder .q::after  { content: '”'; color: var(--accent); }
.wonder.held { background: repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 9px, var(--paper-3) 9px, var(--paper-3) 10px); }
.states { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .55rem; }
.echo {
  margin-top: .6rem; padding: .55rem .7rem; border-left: 2px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .9rem; animation: slideIn var(--t-slow) var(--ease) both;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 1.05rem 1.1rem; margin-bottom: .9rem; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35rem; }
.stat { display: flex; justify-content: space-between; align-items: center; gap: .6rem;
        padding: .42rem 0; border-bottom: 1px dashed var(--rule); font-family: var(--sans); font-size: .87rem; }
.stat:last-child { border-bottom: 0; }
.stat b { font-weight: 600; }

/* a notice that needs to be read, not dismissed */
.notice {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft); border-radius: var(--r-lg);
  padding: .95rem 1.05rem; margin-bottom: .9rem;
  animation: settle var(--t-slow) var(--ease) both;
}
.notice h3 { margin-bottom: .3rem; }
.notice p { font-size: .9rem; }
.notice p:last-of-type { margin-bottom: .6rem; }

.empty { text-align: center; padding: 3rem 1.5rem; color: var(--ink-3); animation: viewIn var(--t-slow) var(--ease) both; }
.empty svg { width: 46px; height: 46px; opacity: .4; margin-bottom: .8rem; }
.empty p { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- auth UI */
.auth { max-width: 24.5rem; margin: 6vh auto; padding: 0 1.2rem 4rem; animation: viewIn var(--t-slow) var(--ease) both; }
.auth .brand-big { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-bottom: 2rem; }
.auth .brand-big svg { width: 38px; height: 38px; stroke: var(--accent); }
.auth .brand-big h1 { font-size: 1.75rem; margin: 0; letter-spacing: .005em; }
.auth .brand-big p { color: var(--ink-3); text-align: center; font-size: .92rem; margin: 0; max-width: 20rem; }
.switcher { text-align: center; margin-top: 1.2rem; font-family: var(--sans); font-size: .85rem; }

.phrase {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: .9rem; margin: .9rem 0; font-family: var(--mono); font-size: .84rem;
}
.phrase span { display: flex; gap: .4rem; align-items: center; }
.phrase span i { color: var(--ink-3); font-style: normal; min-width: 1.15rem; text-align: right; font-size: .74rem; }
.phrase.reveal span { animation: settle var(--t) var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }

.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; max-width: 15rem; margin: 1.2rem auto; }
.pinpad button {
  aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper-2);
  font-family: var(--sans); font-size: 1.22rem; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pinpad button:active { transform: scale(.9); background: var(--accent-soft); }
.pips { display: flex; gap: .65rem; justify-content: center; margin: 1.4rem 0 .4rem; }
.pips i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: all var(--t) var(--ease); }
.pips i.on { background: var(--accent); border-color: var(--accent); transform: scale(1.12); }
.pips.wrong { animation: shake 400ms var(--ease); }

/* --------------------------------------------------------------- toasts  */
#toasts { position: fixed; left: 50%; bottom: calc(4.9rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
          z-index: 90; display: flex; flex-direction: column; gap: .4rem; align-items: center;
          pointer-events: none; width: max-content; max-width: 92vw; }
.toast {
  font-family: var(--sans); font-size: .85rem; padding: .58rem .95rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lift);
  animation: toastIn var(--t) var(--ease) both; display: flex; align-items: center; gap: .5rem;
  text-align: center;
}
.toast.out { animation: toastOut var(--t) var(--ease) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.96); } }

/* --------------------------------------------------------------- dialogs */
dialog {
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper);
  color: var(--ink); padding: 1.3rem; max-width: 30rem; width: calc(100vw - 2rem);
  box-shadow: var(--shadow-lift); max-height: 86dvh; overflow: auto;
}
dialog::backdrop { background: rgba(20,18,14,.42); backdrop-filter: blur(3px); animation: viewIn var(--t) var(--ease); }
dialog[open] { animation: dlgIn var(--t) var(--ease); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.dlg-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.1rem; flex-wrap: wrap; }

/* menu sheet, used by the child switcher */
.sheet { padding: .5rem; }
.sheet button {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  font-family: var(--sans); font-size: .92rem; padding: .62rem .7rem; border: 0;
  background: none; color: var(--ink); border-radius: var(--r); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.sheet button:hover { background: var(--paper-2); }
.sheet button[aria-current="true"] { background: var(--paper-2); font-weight: 600; }
.sheet .swatch { width: 12px; height: 12px; }
.sheet hr { margin: .4rem 0; }

/* --------------------------------------------------------------- helpers */
.row { display: flex; gap: .55rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.sync-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: background var(--t) var(--ease); }
.sync-pip.on { background: var(--accent); }
.sync-pip.busy { animation: breathe 1.1s var(--ease) infinite; background: var(--accent); }
.seg { display: inline-flex; background: var(--paper-3); border-radius: var(--r-pill); padding: 2px; }
.seg button { font-family: var(--sans); font-size: .78rem; padding: .3rem .72rem; border: 0; border-radius: var(--r-pill);
              background: none; color: var(--ink-3); cursor: pointer; transition: all var(--t) var(--ease); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

.warn-box { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r);
            padding: .8rem .9rem; margin: .9rem 0; }
.warn-box p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- print */
@media print {
  :root { --paper: #fff; --paper-2: #fff; --paper-3: #fff; --ink: #000; --rule: #ccc; }
  .topbar, .tabbar, #toasts, .btn, .acts, .no-print { display: none !important; }
  main { max-width: none; padding: 0; }
  .entry, .card, .wonder { break-inside: avoid; box-shadow: none; border: 0; border-bottom: 1px solid #ddd;
                           border-radius: 0; padding-left: 0; padding-right: 0; }
  body { font-size: 11pt; }
  @page { margin: 18mm 16mm; }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
}