/* The app you carry around only: the editing sheet and the sign-in panel.
   The wall can neither edit nor sign in, and does not load this. */

/* -------------------------------- editing ----------------------------- */
/* The wall has no keyboard, so none of this is ever seen there. It is for the
   phone in your pocket and the laptop on the table, which are the same app —
   tap a day to see it, tap an entry to change it. */
#sheet {
  position: fixed; inset: 0; z-index: 55;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(8, 10, 14, .38);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
#sheet.on { display: flex; }
#sheet .card {
  width: min(96vw, 40rem); max-height: 92vh; overflow-y: auto;
  /* Not `var(--panel, #f7f4ee)`: --panel was never defined anywhere, so the
     fallback always won and the sheet was cream in every theme. At night that
     put near-white ink on cream — a dialog you could open and not read. */
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--glass-edge);
  border-radius: 1.2rem 1.2rem 0 0;
  padding: 1.2rem 1.2rem 1.6rem;
  box-shadow: 0 -12px 40px rgba(0,0,0,.28);
}
@media (min-width: 40rem) {
  #sheet { align-items: center; }
  #sheet .card { border-radius: 1.2rem; }
}
#sheet .bar { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .9rem; }
#sheet .bar h3 { margin: 0; font-size: 1.25rem; flex: 1 1 auto; }
#sheet .x {
  border: 0; background: transparent; color: var(--ink-dim);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
#sheet .entries { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem; }
#sheet .entry {
  display: grid; grid-template-columns: 5.5rem .3rem 1fr; gap: .6rem; align-items: center;
  padding: .55rem .5rem; border-radius: .6rem; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
#sheet .entry:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); }
#sheet .entry .t { font-size: .85rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
#sheet .entry .b { align-self: stretch; border-radius: 999px; background: var(--c, var(--blue)); }
#sheet .entry .n { font-weight: 600; }
#sheet .entry .w { font-size: .8rem; color: var(--ink-dim); }
#sheet .none { color: var(--ink-dim); font-style: italic; margin-bottom: .9rem; }

#sheet label { display: block; font-size: .78rem; font-weight: 700;
               letter-spacing: .04em; text-transform: uppercase;
               color: var(--ink-dim); margin: .7rem 0 .25rem; }
#sheet input[type=text], #sheet input[type=date], #sheet input[type=time],
#sheet input[type=number], #sheet input[type=email], #sheet input[type=search],
#sheet select, #sheet textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
  padding: .55rem .6rem; border-radius: .5rem;
  border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); color: var(--ink);
}
#sheet textarea { min-height: 3.4rem; resize: vertical; }
#sheet .row { display: flex; gap: .6rem; }
#sheet .row > * { flex: 1 1 0; }
#sheet .check { display: flex; align-items: center; gap: .5rem; margin-top: .8rem;
                font-size: .95rem; font-weight: 600; }
#sheet .check input { width: 1.1rem; height: 1.1rem; }
#sheet .who { display: flex; flex-wrap: wrap; gap: .4rem; }
#sheet .who button {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: .35rem .8rem; border-radius: 999px;
  border: 2px solid var(--c, var(--blue)); background: transparent; color: var(--ink);
}
#sheet .who button[aria-pressed="true"] { background: var(--c, var(--blue)); color: #fff; }
#sheet .acts { display: flex; gap: .6rem; margin-top: 1.2rem; }
#sheet .acts button {
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  padding: .7rem 1rem; border-radius: .6rem; border: 0;
}
#sheet .go   { flex: 1 1 auto; background: var(--blue); color: #fff; }
#sheet .add  { width: 100%; background: var(--blue); color: #fff; border: 0;
               font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
               padding: .7rem 1rem; border-radius: .6rem; }
#sheet .del  { background: transparent; color: var(--red); border: 1px solid var(--red); }
#sheet .cancel { background: transparent; color: var(--ink-dim); border: 1px solid var(--glass-edge); }
#sheet .why  { min-height: 1.2rem; margin-top: .6rem; font-size: .88rem; color: var(--red); }
#sheet .note { font-size: .9rem; color: var(--ink-dim); }
#sheet .note a { color: var(--blue); }

/* On the wall nothing is clickable, so nothing pretends to be. */
body.no-edit .day, body.no-edit .chip, body.no-edit .ev { cursor: default; }
body.can-edit .day, body.can-edit .chip, body.can-edit .ev { cursor: pointer; }

/* A screen four metres away with no keyboard carries no controls. The wall is
   for reading; everything you can press lives on the phone. */
body.wall .more,
body.wall .swap { display: none !important; }
/* "now" beside an entry that is already running: the row is already set larger
   and bolder for exactly that, so the badge said it twice — and boxed, it read
   as a button on a screen with nothing to press. */
body.wall .ev .in.happening { display: none; }
body.wall, body.wall * { cursor: none; }

/* ------------------------------- sign in ------------------------------ */
/* Only ever seen where the calendar is reachable from outside the house: on
   the wall there is no password, and this markup stays hidden forever. */
#signin {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  padding: calc(var(--u) * 3);
}
#signin.on { display: flex; }
#signin .box,
#accept .box {
  width: min(92vw, calc(var(--u) * 42));
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 2);
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(calc(var(--u) * 1.6)) saturate(1.2);
  -webkit-backdrop-filter: blur(calc(var(--u) * 1.6)) saturate(1.2);
  text-align: center;
}
#signin h2, #accept h2 { font-size: calc(var(--u) * 2.6); margin: 0 0 calc(var(--u) * .6); }
#signin p, #accept p { font-size: calc(var(--u) * 1.5); color: var(--ink-dim); margin: 0 0 calc(var(--u) * 2); }
#signin input, #accept input {
  width: 100%; box-sizing: border-box; text-align: center;
  font: inherit; font-size: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 1.1); margin-bottom: calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 1); border: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--glass) 60%, transparent); color: var(--ink);
}
#signin button:not(.linky), #accept button.add, #accept #acGo {
  width: 100%; font: inherit; font-size: calc(var(--u) * 2); font-weight: 700;
  padding: calc(var(--u) * 1.1); border: 0; border-radius: calc(var(--u) * 1);
  background: var(--blue); color: #fff; cursor: pointer;
}
#signin .why, #accept .why { min-height: calc(var(--u) * 2); margin-top: calc(var(--u) * 1);
               font-size: calc(var(--u) * 1.4); color: var(--red); }


/* ===========================================================================
   Who you are: the avatar, its menu, and the two screens behind it
   ---------------------------------------------------------------------------
   None of this exists on the wall. It is loaded by index.html only.
   =========================================================================== */

/* The face, or the initials standing in for one. Always a circle of a known
   size, so the row it sits in never changes height when a picture loads. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6);
  border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--c, var(--gray)); color: #fff;
  font-size: calc(var(--u) * 1.15); font-weight: 700; letter-spacing: .02em;
  line-height: 1; text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2);
             font-size: calc(var(--u) * 1.7); }

.avatar-btn { padding: calc(var(--u) * .2); line-height: 0; }

/* ------------------------------ the flyout ----------------------------- */
#menuScrim { position: fixed; inset: 0; z-index: 60; }
#menu {
  position: fixed; z-index: 61; right: calc(var(--u) * 1.4); top: calc(var(--u) * 1.4);
  min-width: calc(var(--u) * 22); max-width: min(92vw, calc(var(--u) * 30));
  padding: calc(var(--u) * .5);
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--rule); border-radius: calc(var(--u) * 1.1);
  box-shadow: var(--lift);
}
#menu[hidden], #menuScrim[hidden] { display: none; }

.fl-user {
  display: flex; align-items: center; gap: calc(var(--u) * .9);
  width: 100%; text-align: left; background: none; border: 0; color: inherit;
  font: inherit; padding: calc(var(--u) * .7) calc(var(--u) * .6);
  border-radius: calc(var(--u) * .7); cursor: pointer;
}
.fl-user:hover { background: var(--glass-2); }
.fl-user-text { display: flex; flex-direction: column; min-width: 0; gap: calc(var(--u) * .1); }
.fl-name { font-size: calc(var(--u) * 1.5); font-weight: 700; }
.fl-sub  { font-size: calc(var(--u) * 1.15); color: var(--ink-faint);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fl-rule { height: 1px; background: var(--rule); margin: calc(var(--u) * .35) calc(var(--u) * .4); }

.fl-item {
  display: flex; align-items: center; gap: calc(var(--u) * .9);
  width: 100%; text-align: left; background: none; border: 0; color: inherit;
  font: inherit; font-size: calc(var(--u) * 1.35);
  padding: calc(var(--u) * .7) calc(var(--u) * .6);
  border-radius: calc(var(--u) * .7); cursor: pointer; text-decoration: none;
}
.fl-item:hover, .fl-item:focus-visible { background: var(--glass-2); outline: none; }
.fl-item svg { flex: 0 0 auto; opacity: .75; }

/* ------------------------------ the family ----------------------------- */
.fam-row {
  display: flex; align-items: center; gap: calc(var(--u) * .9);
  padding: calc(var(--u) * .6) 0;
}
.fam-row + .fam-row { border-top: 1px solid var(--rule); }
.fam-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fam-name { font-size: calc(var(--u) * 1.5); font-weight: 700; }
.fam-sub  { font-size: calc(var(--u) * 1.15); color: var(--ink-faint);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-tag {
  font-size: calc(var(--u) * 1.05); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fam-head {
  font-size: calc(var(--u) * 1.15); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: calc(var(--u) * 1.4) 0 calc(var(--u) * .3);
}
/* The link to copy when no mail is set up. Wraps, because a token is 64
   characters and a line that runs off the edge is a line you cannot copy. */
.fam-link {
  font-size: calc(var(--u) * 1.1); word-break: break-all; user-select: all;
  background: var(--glass-2); border-radius: calc(var(--u) * .5);
  padding: calc(var(--u) * .6); margin-top: calc(var(--u) * .5);
}

/* ---------------------------- picking a color -------------------------- */
/* Only the free ones are ever drawn, so there is no such thing as picking a
   color somebody already has -- the server refuses it too, but a control that
   offers something and then says no is a control that wasted a tap. */
.ac-colors { display: flex; flex-wrap: wrap; justify-content: center;
             gap: calc(var(--u) * .8);
             margin: calc(var(--u) * .2) 0 calc(var(--u) * 1.6); }
.ac-swatch {
  width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8);
  border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  background: var(--c); padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.ac-swatch[aria-checked="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--sheet);
}

#accept { position: fixed; inset: 0; z-index: 70; display: flex;
          align-items: center; justify-content: center;
          background: var(--page); padding: calc(var(--u) * 2); }
#accept[hidden] { display: none; }

.linky {
  background: none; border: 0; color: var(--ink-faint); font: inherit;
  font-size: calc(var(--u) * 1.2); text-decoration: underline; cursor: pointer;
  padding: calc(var(--u) * .4) 0;
}

/* ---------------------------- the settings ----------------------------- */
/* A row of buttons behaving as radios, used wherever there are three or fewer
   answers and they are worth seeing all at once rather than one at a time
   through the slot of a <select>. */
.s-choice {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5);
  margin: calc(var(--u) * .2) 0 calc(var(--u) * 1);
}
.s-choice button {
  flex: 1 1 auto; font: inherit; font-size: calc(var(--u) * 1.35);
  padding: calc(var(--u) * .8) calc(var(--u) * 1);
  border: 1px solid var(--rule); border-radius: calc(var(--u) * .7);
  background: transparent; color: var(--ink); cursor: pointer;
}
.s-choice button[aria-checked="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700;
}

/* The line under a control that says what it is for. Never the only place a
   thing is explained, and never longer than two lines. */
.s-note {
  font-size: calc(var(--u) * 1.15); color: var(--ink-faint);
  margin: calc(var(--u) * -.4) 0 calc(var(--u) * 1); line-height: 1.45;
}

.s-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 7), 1fr));
  gap: calc(var(--u) * .6); margin-bottom: calc(var(--u) * .8);
}
.s-photo {
  position: relative; border: 2px solid transparent;
  border-radius: calc(var(--u) * .6); overflow: hidden; line-height: 0;
}
.s-photo-pick { padding: 0; border: 0; background: none; cursor: pointer;
                display: block; width: 100%; }
.s-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* The one that is pinned. Everything else takes its turn. */
.s-photo.pinned { border-color: var(--blue); }
.s-photo-del {
  position: absolute; top: 2px; right: 2px;
  width: calc(var(--u) * 2); height: calc(var(--u) * 2);
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(10, 12, 16, .55); color: #fff;
  font-size: calc(var(--u) * 1.3); line-height: 1;
}

/* ------------------------- the app bar and the foot --------------------- */
/* Neither exists on the wall: a panel nobody can tap needs no bar to tap and
   signs nothing. Both stick -- the bar to the top, the foot to the bottom --
   and the calendar scrolls between them. Same smoked glass as the panels, so
   what slides underneath shows through instead of vanishing behind a slab. */
#appbar, #appfoot {
  position: sticky; z-index: 8;
  background: color-mix(in srgb, var(--page) 55%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
#appbar {
  top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * .9) calc(var(--u) * .4) calc(var(--u) * .7);
  margin: 0 calc(var(--u) * -1.4);            /* to the screen's edges */
  padding-left: calc(var(--u) * 1.8); padding-right: calc(var(--u) * 1.6);
  border-bottom: 1px solid var(--rule);
}
#appbar .ab-name {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: calc(var(--u) * 1.9); font-weight: 700;
  letter-spacing: .02em; color: var(--ink);
}
#appbar .avatar-btn {
  background: none; border: 0; padding: 0;
  line-height: 0; cursor: pointer; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--glass-edge);
}

#appfoot {
  bottom: 0; margin-top: auto;
  margin-left: calc(var(--u) * -1.4); margin-right: calc(var(--u) * -1.4);
  text-align: center;
  font-size: calc(var(--u) * 1.1); color: var(--ink-faint);
  padding: calc(var(--u) * .7) 0 calc(var(--u) * .8);
  border-top: 1px solid var(--rule);
}
#appfoot a { color: var(--ink-dim); }
/* Paper pads the app 1.6u a side where glass pads 1.4u; the bar and foot
   reach the screen's edge under either. */
body[data-style="paper"] #appbar { margin-left: calc(var(--u) * -1.6); margin-right: calc(var(--u) * -1.6); }
body[data-style="paper"] #appfoot { margin-left: calc(var(--u) * -1.6); margin-right: calc(var(--u) * -1.6); }