/* THE FRONT DOOR'S OWN STYLESHEET.

   IT SITS BENEATH `shell.css` AND MAY NEVER OVERRIDE A TOKEN. A second token
   set is a second design system, and two of those in one suite is how "the
   same app in two colours" starts. Every value below is a `var(--…)` from the
   shell; there is no colour literal in this file and none may be added.

   NOTHING HERE IS SHELL CHROME. The header, the way home, the Account menu,
   the banner rows and the signed-out page are all styled in `shell.css`, at
   HQ's word — putting a rule for one of them here is exactly the copying scar
   this repo exists to end. What this file styles is the door's OWN furniture:
   the tiles grid, the sign-in card, and the PEOPLE screen's rows.

   THE ONE CLASS THIS FILE USES BUT DOES NOT DEFINE is `.muted-line`. The shell
   PRINTS it (chrome.js's signed-out page) and `shell.css` names it in a
   comment as one of its own, but no rule for it was ever written — so it is
   unstyled everywhere in the suite, not just here. Reported to HQ as a shell
   defect rather than patched here, because a per-app copy of a shell rule is
   the thing that must not happen.

   PHONE FIRST. The grid is two columns at 320px and never one: a launcher
   whose tiles stack into a long list is a launcher you scroll instead of
   glance at. */

/* ================= THE TILES GRID ================= */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
}
@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A tile is a real anchor, so it is keyboard-reachable, long-pressable and
   openable in a new tab — everything a launcher's face should be. */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 116px;
  padding: var(--sp-4) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  transition: transform var(--dur-press) ease, background var(--dur-press) ease;
}
.tile:active { transform: scale(0.97); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:active { transform: none; }
}

/* A COMING-SOON TILE IS NOT AN ANCHOR AT ALL (the worker renders a <div>), so
   greyed is only the LOOK — the refusal is structural. */
.tile-soon { opacity: 0.55; box-shadow: none; }

/* The app's colour as a solid block with the cream mark on it. `--tile-color`
   is set inline by the worker from the registry, and only ever from a plain
   6-digit hex: registry text does not get to write CSS. */
.t-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile-color, var(--muted));
  color: var(--bg);
  flex: none;
}
.t-icon svg { width: 26px; height: 26px; display: block; }
/* The fallback face: a mark name nothing has learned becomes the app's first
   letter on the warm grey. Never blank, never broken — a tile you cannot name
   is still a tile you can tap. */
.t-letter { font-size: var(--fs-lg); font-weight: 700; line-height: 1; }

.t-name {
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.25;
}
.t-note {
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-2xs);
  text-transform: uppercase;
  color: var(--muted);
}

/* ================= THE SIGN-IN CARD ================= */
/* It centres on the screen because it is the ONLY thing on it. The door's
   sign-in page draws no header at all — the front door IS home, so there is no
   way home to offer. */
.signin-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.signin-card {
  width: 100%;
  max-width: 380px;
  text-align: left;
}
/* A plain picture, not a link: aria-hidden in the markup, decorative here. */
.signin-mark {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}

/* ================= SMALL SHARED FURNITURE ================= */
/* The hint under a field, and the non-red counterpart of the shell's
   `.field-error` for an answer that is not a refusal. */
.field-hint {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.field-note {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--accent);
}

/* A tick box and its words, as one 44px glove target (the gloves rule). */
.tick {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.tick input { width: 20px; height: 20px; flex: none; accent-color: var(--brand); }

/* A state word on a person's row. */
.tag {
  display: inline-block;
  margin: 0 var(--sp-1) var(--sp-1) 0;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-2xs);
  font-weight: 650;
  color: var(--muted);
}
/* SWITCHED OFF is the one state that must be unmistakable at a glance: it is
   the difference between "this person can sign in" and "this person cannot". */
.tag-off {
  background: var(--red-tint);
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  color: var(--danger);
}

/* ================= THE PEOPLE SCREEN ================= */
.sub {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-2xs);
  text-transform: uppercase;
  color: var(--muted);
}

.people-list, .activity-list { list-style: none; margin: 0; padding: 0; }

.person {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
}
.person-name { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.person-tags { margin: var(--sp-1) 0 0; }
.person-line { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--text); }
.person-line .k, .access .k {
  display: inline-block;
  min-width: 68px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-2xs);
  text-transform: uppercase;
  color: var(--muted);
}

/* The write controls `app.js` draws on top of the rendered row. They wrap on a
   phone rather than shrinking: a 44px target that has been squeezed to fit is
   not a 44px target. */
.row-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.access {
  flex: 1 1 100%;
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.access p { margin: 0 0 var(--sp-1); }

.add-person { margin-bottom: var(--sp-3); }
.add-person > summary { list-style: none; cursor: pointer; display: inline-flex; }
.add-person > summary::-webkit-details-marker { display: none; }
.add-person form { margin-top: var(--sp-3); }

/* THE JOURNAL. Append-only, newest first, and it is read rather than worked —
   so it is quiet on purpose: small, muted, and it never competes with the
   people list above it for a thumb. */
.activity-row {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.activity-row .a-ts { color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-row .a-actor { font-weight: 700; }
.activity-row .a-action { color: var(--brand-strong); font-weight: 650; }
.activity-row .a-detail { color: var(--muted); }