/* The door tablet.
 *
 * THE TOKENS ARE THE SUITE'S, copied from lullaby-app's app.css, where the
 * comment says it: "every application in the suite should share them". Two
 * applications in one building that disagree about what red means is worse than
 * either of them being ugly.
 *
 * WHAT IS DIFFERENT HERE, and why:
 *
 *   EVERYTHING IS BIGGER. Touch targets are 44px minimum and mostly much more.
 *   The office app is used with a mouse by somebody sitting down; this is used
 *   with a thumb by somebody holding a toddler.
 *
 *   THE GRID IS THE PAGE. Steven: "you see a grid of the children and that is
 *   the button you click on to open them up, makes it real easy for as a glance
 *   find who you need and click." So the tile is the primary control and gets
 *   the most design attention in this file.
 *
 *   IT IS DARKER AT THE EDGES. A tablet in a corridor is looked at from two
 *   metres away as often as from thirty centimetres, and a bright full-white
 *   page is a lamp. The chrome is the brand green; the grid sits on the light
 *   surface.
 */

:root{
  /* Meaning — identical to the office app. Do not diverge these. */
  --bg:#f6f7f9; --ink:#1a1d21; --muted:#6b7280; --line:#e4e7ec;
  --brand:#2f6f4e; --brand-soft:#e8f2ec; --accent:#b45309;
  --red:#b42318; --red-soft:#fef3f2; --amber:#b54708; --amber-soft:#fffaeb;
  --green:#067647; --green-soft:#ecfdf3; --blue:#175cd3; --blue-soft:#eff8ff;
  --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  --surface:#fff; --sunk:#f7f8f9; --rail:#f2f4f7; --rail-2:#eceff3;
  --ink-2:#475467; --ink-3:#98a2b3; --ink-4:#b9bfc9;
  --edge-red:#fecdca; --edge-green:#a6f4c5; --edge-amber:#fedf89; --edge-blue:#b2ddff;
  --on-dark:#fff;
  /* Door-only: the smallest thing a thumb may be asked to hit. */
  --touch:48px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  /* A mounted tablet should not rubber-band or select text when a thumb

/* A PHONE, held in one hand, often outdoors. So: one column, bigger type than
   the tablets, and generous tap targets. The tokens above are the suite's —
   shared deliberately, because a colour that means one thing on a door tablet
   and another on a parent's phone is worse than either being ugly. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);
  font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
#root{min-height:100vh;display:flex;flex-direction:column}
#root.loading{align-items:center;justify-content:center;color:var(--muted)}

.envbar{background:var(--accent);color:var(--on-dark);padding:5px 14px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;text-align:center}
.bar{background:var(--brand);color:var(--on-dark);padding:13px 16px;
  display:flex;align-items:center;gap:12px;
  padding-top:max(13px,env(safe-area-inset-top))}
.bar h1{font-size:17px;margin:0;font-weight:600}
.back{min-height:40px;background:rgba(255,255,255,.14);color:var(--on-dark);
  border:0;border-radius:8px;font:inherit;font-weight:600;padding:0 13px;cursor:pointer}
.linkish{margin-left:auto;background:none;border:0;color:var(--on-dark);
  font:inherit;text-decoration:underline;cursor:pointer;opacity:.9;min-height:40px}

.page{flex:1 1 auto;padding:16px;display:flex;flex-direction:column;gap:14px;
  max-width:560px;width:100%;margin:0 auto;
  padding-bottom:max(24px,env(safe-area-inset-bottom))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.card h2{margin:0 0 6px;font-size:20px}
.card h3{margin:0 0 8px;font-size:15px;letter-spacing:.01em}
.hint{color:var(--muted);font-size:14px;margin:8px 0 0}
.said{margin:0;font-size:16px}
.empty{color:var(--muted);text-align:center;padding:30px 0}

/* A child, as a row. Not a grid: a parent has one, two, maybe three children,
   and a grid of two faces is a grid for the sake of it. */
.kid{-webkit-appearance:none;appearance:none;font:inherit;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;cursor:pointer;display:flex;gap:14px;align-items:center}
.kid:active{background:var(--sunk)}
.kid-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.kid .nm{font-weight:600;font-size:17px}
.kid .sub,.who .sub{color:var(--muted);font-size:14px}
.pic{width:64px;height:64px;flex:0 0 auto;border-radius:50%;
  background:var(--rail) center/cover no-repeat;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-4);font-size:20px;font-weight:600}
.pic.none{border-style:dashed}
.who{display:flex;gap:14px;align-items:center}
.who h2{margin:0;font-size:22px}

.chip{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;
  border-radius:20px;align-self:flex-start}
.chip.grn{background:var(--green-soft);color:var(--green);border:1px solid var(--edge-green)}
.chip.gry{background:var(--rail);color:var(--ink-2);border:1px solid var(--line)}

.fl{display:block;margin:12px 0 0;font-size:14px;font-weight:600;color:var(--ink-2)}
.in{display:block;width:100%;margin-top:5px;font:inherit;padding:12px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.in:focus{outline:2px solid var(--brand);outline-offset:1px}
.wrong{color:var(--red);font-size:14px;font-weight:600;margin:10px 0 0;min-height:1.3em}

.btn{min-height:48px;padding:0 18px;font:inherit;font-weight:600;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer}
.btn.pri{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.btn.wide{width:100%;margin-top:14px}

.log,.people{margin:0;padding:0;list-style:none}
.log li,.people li{padding:8px 0;border-bottom:1px solid var(--line)}
.log li:last-child,.people li:last-child{border-bottom:0}
.meta{display:block;color:var(--muted);font-size:14px;margin-top:2px}

.note{background:var(--amber-soft);border:1px solid var(--edge-amber);
  border-left:3px solid var(--amber);border-radius:8px;padding:12px 14px;font-size:15px}
.note.bad{background:var(--red-soft);border-color:var(--edge-red);border-left-color:var(--red)}
.note b{color:var(--amber)}.note.bad b{color:var(--red)}