/* 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
     slides. Selection is re-enabled on the things worth reading. */
  -webkit-user-select:none; user-select:none; overscroll-behavior:none;
}
#root{min-height:100%;display:flex;flex-direction:column}
#root.loading{align-items:center;justify-content:center;color:var(--muted)}

/* ------------------------------------------------------------------ chrome */
.bar{
  flex:0 0 auto; background:var(--brand); color:var(--on-dark);
  padding:10px 16px; display:flex; align-items:center; gap:14px;
  /* A notch or a rounded corner must not eat the back button. */
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
.bar h1{font-size:17px;margin:0;font-weight:600;letter-spacing:.01em}
.bar .where{margin-left:auto;font-size:13px;opacity:.85}
.envbar{
  flex:0 0 auto;background:var(--accent);color:var(--on-dark);
  padding:5px 16px;font-size:12.5px;font-weight:600;letter-spacing:.03em;text-align:center;
}

/* A back button big enough to hit without looking. */
.back{
  min-height:var(--touch); min-width:var(--touch);
  background:rgba(255,255,255,.14); color:var(--on-dark);
  border:0; border-radius:var(--radius); font:inherit; font-weight:600;
  padding:0 16px; cursor:pointer;
}
.back:active{background:rgba(255,255,255,.26)}

/* ------------------------------------------------------------------- tabs */
/* HERE and NOT HERE, as Steven asked: not a dimmed tile in one list, but a
   position. Absent children are out of the way rather than greyed out, because
   a grid of thirty faces with eight dimmed still makes you scan all thirty. */
.tabs{flex:0 0 auto;display:flex;gap:8px;padding:12px 16px 0}
.tabs button{
  min-height:var(--touch); padding:0 18px; font:inherit; font-weight:600;
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--radius); cursor:pointer;
}
.tabs button[aria-pressed=true]{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.tabs .count{opacity:.7;font-weight:500;margin-left:7px}

/* ------------------------------------------------------------------- grid */
.grid{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; gap:12px; padding:12px 16px 24px;
  padding-bottom:max(24px,env(safe-area-inset-bottom));
  /* As many as fit at a readable size. A face below about 110px stops being a
     face you can compare against a person. */
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  align-content:start;
}
.tile{
  -webkit-appearance:none; appearance:none; font:inherit; text-align:left;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:10px; cursor:pointer; display:flex; flex-direction:column; gap:8px;
  min-height:var(--touch);
}
.tile:active{background:var(--sunk);transform:scale(.985)}
.tile .pic{
  width:100%; aspect-ratio:1; border-radius:8px;
  background:var(--rail) center/cover no-repeat;
  border:3px solid transparent;   /* the allergy border lands here */
  display:grid; place-items:center; color:var(--ink-4); font-size:26px; font-weight:600;
}
/* NO PHOTOGRAPH IS A STATE, NOT A GAP. Consent is required for a child's
   photograph and some families will say no, so some tiles will always be blank
   and that has to look deliberate rather than broken. Initials, dashed. */
.tile .pic.none{border-style:dashed;border-color:var(--line);background:var(--sunk)}
.tile .nm{font-weight:600;font-size:14.5px;line-height:1.25}
.tile .sub{font-size:12px;color:var(--muted)}

/* THE ALLERGY BORDER. Steven: "some kind of boarder around the image and a chip
   with glance info". Amber for an allergy, red when it is severe or there is an
   EpiPen — the distinction migration 0008 insists on, because "the ones that
   stop a child breathing are not the same as an intolerance". */
/* SOLID, even when there is no photograph. The dashed border means "no
   photograph"; a dashed RED border read as "missing, and something is wrong"
   rather than "severe allergy". Two signals on one edge have to differ in more
   than colour, so the allergy takes the line style back. */
.tile.allergy .pic,.tile.severe .pic{border-style:solid}
.tile.allergy .pic{border-color:var(--amber)}
.tile.severe  .pic{border-color:var(--red)}

.chip{
  display:inline-block; font-size:11.5px; font-weight:600; line-height:1.5;
  padding:2px 8px; border-radius:20px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chip.amb{background:var(--amber-soft);color:var(--amber);border:1px solid var(--edge-amber)}
.chip.red{background:var(--red-soft);color:var(--red);border:1px solid var(--edge-red)}
.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)}
.chip.blu{background:var(--blue-soft);color:var(--blue);border:1px solid var(--edge-blue)}

.empty{padding:40px 16px;text-align:center;color:var(--muted)}

/* ------------------------------------------------------------- one child */
.child{flex:1 1 auto;overflow-y:auto;padding:16px;padding-bottom:max(24px,env(safe-area-inset-bottom));
  -webkit-user-select:text;user-select:text}
.who{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.who .pic{
  width:84px;height:84px;flex:0 0 auto;border-radius:50%;
  background:var(--rail) center/cover no-repeat;border:3px solid transparent;
  display:grid;place-items:center;color:var(--ink-4);font-size:26px;font-weight:600;
}
.who.allergy .pic{border-color:var(--amber)}
.who.severe .pic{border-color:var(--red)}
.who h2{margin:0;font-size:23px;line-height:1.2}
.who .sub{color:var(--muted);font-size:14px;margin-top:3px}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;margin:14px 0;
}
.card h3{margin:0 0 4px;font-size:15px;letter-spacing:.01em}
.card .hint{color:var(--muted);font-size:13px;margin:0 0 10px}

/* MUST NOT BE GIVEN THE CHILD. Never folded away, never mixed in with the
   approved names, and drawn so it cannot be mistaken for one of them at a
   glance. The office app's rule, and it matters more here: this is the screen
   where somebody is standing in front of you. */
.card.barred{background:var(--red-soft);border-color:var(--edge-red);border-left:4px solid var(--red)}
.card.barred h3{color:var(--red)}

.person{
  display:flex;gap:12px;align-items:center;padding:10px 0;
  border-bottom:1px solid var(--line);
}
.person:last-child{border-bottom:0}
.person .pic{
  width:56px;height:56px;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:17px;font-weight:600;
}
/* A face is the evidence an identity document is on file — see the office
   app's docs/PHOTOS.md. A dashed circle says there is none, which is exactly
   what somebody at a door needs to know before releasing a child. */
.person .pic.none{border-style:dashed;border-color:var(--amber);background:var(--amber-soft)}
.card.barred .person .pic{border-color:var(--red)}
.person .nm{font-weight:600}
/* BLOCK, not inline. As spans these ran together on one line, so a barred
   person read as "father - 302-555-0109 Court order - no contact" in a single
   sentence, which is exactly the line somebody has to take in at a glance. */
.person .meta{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.person > span:nth-child(2){min-width:0;flex:1 1 auto}
.person .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.btn{
  min-height:var(--touch);padding:0 16px;font:inherit;font-weight:600;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer;
}
.btn:active{background:var(--sunk)}
.btn.pri{background:var(--brand);color:var(--on-dark);border-color:var(--brand)}
.btn.warn{background:var(--surface);color:var(--red);border-color:var(--edge-red)}
.btn[disabled]{opacity:.5;cursor:default}

.log{margin:0;padding:0;list-style:none;font-size:13.5px}
.log li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.log li:last-child{border-bottom:0}
.log .when{color:var(--muted);flex:0 0 auto;min-width:96px}

/* ------------------------------------------------------------------ modal */
.wrap{
  position:fixed;inset:0;background:rgba(16,24,40,.55);
  display:grid;place-items:center;padding:16px;z-index:10;
}
.modal{
  background:var(--surface);border-radius:14px;box-shadow:0 12px 40px rgba(16,24,40,.28);
  width:min(440px,100%);max-height:92vh;overflow-y:auto;padding:18px;
}
.modal h3{margin:0 0 6px;font-size:18px}
.modal p{margin:0 0 12px;color:var(--ink-2);font-size:14px}
.modal .foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* WHO IS AT THE TABLET. A name is picked and a PIN confirms it — the PIN is
   attribution, not authentication, and the screen should not pretend otherwise:
   it says "who is checking this", not "sign in". */
.people-pick{display:grid;gap:8px;margin-bottom:14px;max-height:34vh;overflow-y:auto}
.people-pick button{
  min-height:var(--touch);text-align:left;padding:0 14px;font:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
}
.people-pick button[aria-pressed=true]{background:var(--brand-soft);border-color:var(--brand);font-weight:600}

.pin{
  width:100%;font:600 28px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.35em;text-align:center;padding:14px;margin-bottom:4px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);
}
.pin:focus{outline:2px solid var(--brand);outline-offset:1px}
.wrong{color:var(--red);font-size:13.5px;font-weight:600;margin:6px 0 0;min-height:1.2em}

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

/* A toast, because a door needs to know the tap landed without reading. */
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:20;
  background:var(--ink);color:var(--on-dark);padding:12px 18px;border-radius:24px;
  font-size:14.5px;font-weight:600;box-shadow:0 8px 24px rgba(16,24,40,.3);
  max-width:calc(100% - 32px);text-align:center;
}
.toast.bad{background:var(--red)}

@media (prefers-reduced-motion:no-preference){
  .tile{transition:transform .08s ease,background .12s ease}
}