/* ================= Social layer, phase one =================
   Styles for the bottom nav, the record sheet, the profile and the
   signed out feed. Lifted from social-mockup.html so the result matches
   the locked design rather than resembling it.

   Nothing in here restyles the bowl, the numerals or the hint line
   beyond lifting the hint clear of the nav, and dimming the bowl while
   the length picker is open. */

/* The palette, both grounds of it, now lives in the :root block at the top of
   index.html: one place to read, one place to change. --text-mid, --line,
   --card and --ground moved there whole. What is left here are the two
   measurements this file owns. */
:root {
  --navh: 62px;

  /* One column on a wide screen. The app is drawn at phone width, and on a
     desktop the views ran the full width of the window, which put a history
     row's duration and its date half a screen apart. 420px is not a new
     number: the ··· panel in index.html has always been that wide.

     Applied as padding rather than a max-width, because the sheet's children
     set margin with the shorthand, which would keep resetting margin-inline
     back to zero. Padding also leaves backgrounds and the scroll bar meeting
     the edges of the window, where they belong.

     --edge is negative on a phone, so each use pairs it with the gutter that
     screen already had: max() picks the old value there and the column on a
     desktop, and nothing about the phone layout moves. */
  --measure: 420px;
  --edge: calc((100% - var(--measure)) / 2);
}

/* ============ bottom nav ============ */
/* THE NAV SITS ABOVE THE SCREENS AND UNDER THE DECISIONS, which is what its
   z-index says. It used to be 8, below the person view's 9 and the detail's 11,
   and that was invisible only because those two screens hid it. Since it stays
   on them it has to be over them, so three numbers moved together and every
   relation between them is the one it was:

     .lgm-view 6 · #lgmAuthView 7 · #lgmFriendsView 7 · #lgmPersonView 9
     · #lgmDetail 11 · #lgmNav 12 · #panel 13 (index.html) · #lgmSheet 14

   The panel is still over the nav and the sheet is still over the panel. */
#lgmNav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  height: calc(var(--navh) + env(safe-area-inset-bottom));
  padding-top: 11px;
  padding-bottom: env(safe-area-inset-bottom);
  /* The bar itself stays the full width of the window so its blur and its
     hairline still meet both edges. Only the three buttons move inwards. */
  padding-inline: max(0px, var(--edge));
  border-top: 1px solid var(--hair);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 1.2s ease;
}
#lgmNav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.35s ease;
}
#lgmNav button.on { color: var(--gold); }
#lgmNav .lgm-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0;
}
#lgmNav button.on .lgm-dot { opacity: 1; }

/* THE NAV GOES ON THE THREE THAT ARE NOT PLACES, AND ONLY THOSE THREE.
   Friends, a person and a meditation are screens you are in, and it stays on
   them. Meditating, the record sheet and signing in are things you are part way
   through: leaving a way out of them sideways is how somebody ends up with a
   half described meditation or an account with no profile row.

   Signing in adds its own rule where it is defined, further down.

   The ··· menu on a person is the fourth, and it is the same kind of thing as
   the sheet: a decision, and one that must be answered or dismissed rather than
   walked away from sideways. It also has to go for a plain reason of geometry:
   the menu rises to the bottom edge of the screen, so a nav left standing would
   sit over the top of it and take `close` with it. */
body.lgm-meditating #lgmNav,
body.lgm-sheet #lgmNav,
body.lgm-person-menu #lgmNav {
  opacity: 0;
  pointer-events: none;
}
/* The 1.2s fade above belongs to a meditation starting, where slow is the whole
   point. Here it is the wrong length, and for a reason of geometry rather than
   taste: the menu covers only the bottom of the screen, so for that whole second
   and a bit a fading nav sits over the top of `close`.

   Only on the way out. The rule stops applying the moment the class goes, so the
   nav comes back on the usual slow fade, which is exactly what it already does
   when a meditation ends. */
body.lgm-person-menu #lgmNav { transition: opacity 0.18s ease; }

/* the hint line sits above the nav rather than behind it */
#hint {
  bottom: max(11vh, calc(env(safe-area-inset-bottom) + 88px));
}

/* ============ the two rows on the timer screen ============
   Session length, and the interval bell that used to be two taps away behind
   the ··· for no reason other than that it was there first. Both are set before
   you sit, so both are revealed by the same tap on the numerals.

   Each carries a quiet label, because two unlabelled rows of numbers under a
   clock is a puzzle. The pills themselves are the ones renderSettings() has
   always built: buildOpts does not care which element it draws into, so nothing
   in index.html's script changed to move them here. */
#lgmOpts { display: none; }
body.lgm-editing #lgmOpts { display: block; }
#lgmOpts .opts { max-width: 272px; margin: 0 auto; }
#lgmOpts .lgm-optgroup + .lgm-optgroup { margin-top: 1.8vh; }
.lgm-optlbl {
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 0.7rem;
}
body.lgm-editing #stage { gap: 3.4vh; }
body.lgm-editing #bowlWrap { opacity: var(--bowl-dim); }
body.lgm-editing #time { color: var(--gold); }

#bowlWrap { transition: opacity 0.4s ease; }
#time { transition: opacity 2s ease, color 0.35s ease; cursor: pointer; }

/* ============ full screen views ============ */
.lgm-view {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: none;
  flex-direction: column;
  background: var(--ground);
  padding-bottom: calc(var(--navh) + env(safe-area-inset-bottom));
}
.lgm-view.on { display: flex; }

/* the detail view is pushed over the top of whatever opened it, and has a back
   arrow AND the nav: it is a place, so the way out sideways stays.

   Above the person view's 9, not the 7 it used to be. Since 14 August 2026 a
   meditation opens from three places and one of them is a friend's profile, so
   anything lower would open it underneath the screen it was tapped on.

   No padding-bottom of its own any more: .lgm-view already pads by the nav plus
   the safe area, and the composer is a flex child of this view rather than
   something pinned over it, so it lands directly above the nav with no
   arithmetic. */
#lgmDetail { z-index: 11; }

.lgm-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + 16px) max(22px, var(--edge)) 18px;
}
.lgm-head h2 {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lgm-head .lgm-ico {
  width: 24px; height: 24px;
  display: flex; align-items: center;
  background: none; border: none; padding: 0;
  color: var(--text-dim);
  cursor: pointer;
}
.lgm-head .lgm-spacer { width: 24px; flex: none; }
/* The ··· in the corner of a person's header, the same mark and the same
   position #settingsBtn uses on the timer and the gear uses on the you page.
   The trailing letter-spacing after the last dot widens the box past the
   glyphs, so the indent puts them back on the centre the gear sits on. */
.lgm-head .lgm-dots {
  justify-content: center;
  font-family: inherit;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  line-height: 1;
  text-indent: 0.1em;
}
/* .lgm-ico sets display, which outranks the browser's own [hidden] rule. Same
   trap the block further down gathers, and it bites here because the ··· is
   hidden on anybody who is not an accepted friend. */
.lgm-head .lgm-ico[hidden] { display: none; }

.lgm-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 max(22px, var(--edge)) 28px;
}

/* ============ monograms ============
   An assigned colour, never a photo. Gives each person something you
   recognise at a glance while costing nothing to store. */
.lgm-av {
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--av-ink);
  background: linear-gradient(150deg, #8a7248, #c9a25e);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.28);
}
.lgm-av.s26 { width: 26px; height: 26px; font-size: 0.56rem; }
.lgm-av.s30 { width: 30px; height: 30px; font-size: 0.62rem; }
.lgm-av.s36 { width: 36px; height: 36px; }
.lgm-av.s88 { width: 88px; height: 88px; font-size: 1.4rem; }
.lgm-av.p1 { background: linear-gradient(160deg, #4a3d2a 0%, #7d6340 45%, #c9a25e 100%); }
.lgm-av.p2 { background: linear-gradient(160deg, #33403a 0%, #5d7060 50%, #a9b39a 100%); }
.lgm-av.p3 { background: linear-gradient(160deg, #4a2f2a 0%, #8a5a48 55%, #d0a086 100%); }
.lgm-av.p4 { background: linear-gradient(160deg, #2f3a4a 0%, #566d84 55%, #9fb5c8 100%); }
/* no name yet: an empty bronze ring rather than a placeholder letter */
.lgm-av.blank { background: none; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.3); }

/* ============ pills ============ */
.lgm-pill {
  border: 1px solid rgba(var(--text-rgb), 0.16);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.lgm-pill.sel { border-color: var(--gold-dim); color: var(--gold); }
.lgm-pill.wide { width: 100%; padding: 0.85rem; text-align: center; }
.lgm-pill.plain { border-color: transparent; }
.lgm-pill.danger { border-color: transparent; color: var(--danger); }
.lgm-pill.danger.armed { border-color: var(--danger-edge); color: var(--danger-lit); }

.lgm-lbl {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px;
}

/* ============ who sees this ============ */
.lgm-opts {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.lgm-who { margin: 26px 0 11px; text-align: center; }

/* ============ the record sheet ============ */
/* z-index 14, up from 12 with the nav and the ··· panel. Still the top of the
   stack: nothing may cover the sheet. */
#lgmSheet {
  position: fixed;
  inset: 0;
  z-index: 14;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 0 max(30px, var(--edge));
  background: var(--ground);
}
/* A keyframe rather than a transition on an added class. If the phone was
   asleep when the last bell rang, the frame callback that would have
   started a transition never runs, and the sheet would sit half faded and
   still swallow taps. An animation cannot get stuck part way, and the fill
   is forwards rather than both on purpose: if animation were suppressed
   altogether the sheet falls back to its base opacity of 1, visible and
   usable, instead of holding an invisible frame over the screen. */
#lgmSheet.on {
  display: flex;
  animation: lgmSheetIn 0.9s ease forwards;
}
@keyframes lgmSheetIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#lgmSheet .lgm-done {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}
#lgmSheet .lgm-big {
  text-align: center;
  font-size: 3.4rem;
  font-weight: 100;
  color: var(--gold);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  margin: 14px 0 6px;
}
#lgmSheet .lgm-stamp {
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

#lgmNote {
  display: block;
  width: 100%;
  margin-top: 34px;
  min-height: 116px;
  padding: 15px 16px;
  border: 1px solid rgba(var(--text-rgb), 0.13);
  border-radius: 16px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  resize: none;
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-user-select: text;
  user-select: text;
}
#lgmNote::placeholder { color: var(--text-dim); }
#lgmNote:focus { border-color: rgba(var(--gold-rgb), 0.4); }

.lgm-sheet-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* ============ profile ============ */
.lgm-prof-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 4px;
}
.lgm-prof-name {
  font-size: 1.24rem;
  font-weight: 200;
  letter-spacing: 0.03em;
  margin-top: 18px;
}
.lgm-stats { display: flex; margin: 28px 0 26px; }
.lgm-stat { flex: 1; text-align: center; }
.lgm-stat .n {
  font-size: 1.5rem;
  font-weight: 100;
  color: var(--gold);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.lgm-stat .l {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 7px;
}

/* the history grid.
   Seven rows, a column per week, the week you are in at the right. How many
   columns is measured rather than set: 11px squares and 3px gaps is 14px a
   week, which is 23 weeks in a 375px phone's 331px column and 30 in the 420px
   one on a desktop. lgmPaintGrid does that arithmetic and writes the columns
   on, so this file never names a number of weeks. */
.lgm-grid {
  --sq: 11px;
  --gap: 3px;
  margin: 0 0 16px;
}
/* the attribute alone cannot hide a grid, the same reason .lgm-stats[hidden]
   needs its own rule further down */
.lgm-grid[hidden] { display: none; }
.lgm-grid .gm {
  display: grid;
  gap: var(--gap);
  height: 8px;
  margin-bottom: 5px;
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lgm-grid .gm span { white-space: nowrap; }
.lgm-grid .gg {
  display: grid;
  gap: var(--gap);
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--sq));
}
.lgm-grid .sq {
  width: var(--sq);
  height: var(--sq);
  border-radius: 2.5px;
  background: var(--sq0);
}
/* Four steps rather than a smooth ramp: the eye reads bands and cannot read a
   gradient of forty values. Mixed from the app's own bronze, which is what lets
   the whole grid follow the ground without a second palette. The thresholds are
   10, 20 and 40 minutes, which are the lengths the timer already offers. */
.lgm-grid .sq.s1 { background: rgba(var(--gold-rgb), 0.26); }
.lgm-grid .sq.s2 { background: rgba(var(--gold-rgb), 0.46); }
.lgm-grid .sq.s3 { background: rgba(var(--gold-rgb), 0.70); }
.lgm-grid .sq.s4 { background: rgba(var(--gold-rgb), 1); }
/* A day that has not arrived draws nothing at all. An empty square on Friday
   when it is Wednesday marks you absent from a day that has not happened. */
.lgm-grid .sq.void { background: none; }

/* the way in to friends.
   A button since the sign in work, so the hairlines it always had are now the only
   borders it may keep: a button brings its own on all four sides. */
.lgm-friends-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 24px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  border-left: 0;
  border-right: 0;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}
/* By id, not by position: the stack of monograms sits in front of this sentence,
   and a first-child rule would hand the growing to the stack. */
#lgmFriendsText { flex: 1; }
.lgm-friends-row .chev { display: flex; color: var(--text-dim); }

/* The row is never disabled now. Signed out it opens sign in, signed in it opens
   the friends screen, and both are somewhere real for the chevron to point. */

/* ============ history ============ */
.lgm-hist {
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 15px 0;
  border: none;
  border-bottom: 1px solid var(--hair);
  background: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.lgm-hist .d { width: 46px; flex: none; text-align: center; }
.lgm-hist .d .dd { font-size: 1rem; font-weight: 200; color: var(--text); }
.lgm-hist .d .mm {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 3px;
}
.lgm-hist .m { flex: 1; min-width: 0; }
.lgm-hist .m .t {
  font-size: 0.94rem;
  font-weight: 200;
  letter-spacing: 0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.lgm-hist .m .n {
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ detail ============ */
.lgm-detail-dur {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 16px;
}
.lgm-detail-dur .n {
  font-size: 2.4rem;
  font-weight: 100;
  color: var(--gold);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.lgm-detail-dur .u {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lgm-detail-note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin-top: 14px;
  white-space: pre-wrap;
}
/* .empty went with "No note": a meditation without one now shows nothing at all. */
.lgm-detail-foot {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}

.lgm-crow { display: flex; align-items: center; gap: 11px; }
.lgm-cname { font-size: 0.92rem; font-weight: 400; letter-spacing: 0.01em; color: var(--text); }
.lgm-cmeta { font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-dim); margin-top: 2px; }

/* ============ empty states ============ */
.lgm-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 38px 8vh;
  text-align: center;
}
.lgm-empty .g { color: var(--gold-dim); opacity: 0.6; }
.lgm-empty h3 {
  font-size: 0.98rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--text);
}
.lgm-empty p {
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 30ch;
}

/* ============ signing in ============
   Laid over whatever opened it, with a back arrow instead of the nav, the
   same way the detail view behaves. */
#lgmAuthView { z-index: 7; padding-bottom: env(safe-area-inset-bottom); }
body.lgm-auth #lgmNav { opacity: 0; pointer-events: none; }

.lgm-auth-step { display: none; max-width: 21rem; margin: 0 auto; }
.lgm-auth-step.on { display: block; }

.lgm-auth-copy {
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-dim);
  margin: 4px 0 28px;
}
.lgm-auth-copy b { color: var(--text-mid); font-weight: 400; }

.lgm-field {
  display: block;
  width: 100%;
  padding: 0.6rem 0.2rem;
  border: none;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.16);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-user-select: text;
  user-select: text;
}
.lgm-field::placeholder { color: var(--text-dim); }
.lgm-field:focus { border-bottom-color: var(--gold-dim); }

/* text-indent cancels the trailing letter space, so six digits sit centred */
.lgm-code {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 200;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  font-variant-numeric: tabular-nums;
}

/* The rule sits under the whole row rather than under the field, so the handle
   line matches the name line above it instead of starting after the @. */
.lgm-handle-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.16);
  transition: border-color 0.3s ease;
}
.lgm-handle-wrap:focus-within { border-bottom-color: var(--gold-dim); }
.lgm-handle-wrap .lgm-field { border-bottom: none; }
.lgm-handle-wrap .at { color: var(--text-dim); font-size: 1rem; font-weight: 300; }

.lgm-auth-step .lgm-lbl { margin: 24px 0 2px; }

/* Both hold their height whether or not they say anything, so nothing below
   them jumps as a message appears. */
.lgm-auth-err,
.lgm-auth-note {
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.6;
  min-height: 1.6em;
  margin-top: 10px;
}
.lgm-auth-err  { color: var(--danger-text); }
.lgm-auth-note { color: var(--text-dim); }
.lgm-auth-note.free { color: var(--free); }

.lgm-auth-step .lgm-pill.wide { margin-top: 22px; }
.lgm-pill[disabled] { opacity: 0.5; cursor: default; }

.lgm-auth-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 26px;
}
.lgm-link {
  background: none;
  border: none;
  padding: 4px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(var(--text-rgb), 0.22);
}
.lgm-link[disabled] { opacity: 0.5; cursor: default; text-decoration: none; }

/* the handle under the name on the profile */
.lgm-prof-handle {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-top: 7px;
}

/* the way in, in the slot the handle will fill.
   Not a .lgm-pill variant: it is a one-off at a size that scale does not carry,
   and borrowing .lgm-pill.sel would drag in the wide, plain and danger family it
   has no use for. Bronze because on a screen with a blank ring and no handle it
   is the only thing explaining what is missing. */
.lgm-prof-signin {
  margin-top: 13px;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  background: none;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  padding: 0.44rem 1.25rem;
  cursor: pointer;
}

/* the sign in button under the feed's signed out copy */
.lgm-empty .lgm-pill { margin-top: 8px; }

/* ============ account, in the ··· panel ============ */
.lgm-acct {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.lgm-acct .mail {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--text-mid);
  text-align: center;
  word-break: break-word;
}

/* ============ the name field in the ··· panel ============ */
#lgmNameInput {
  display: block;
  width: 100%;
  max-width: 15rem;
  margin: 0 auto;
  padding: 0.55rem 0.2rem;
  border: none;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.16);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 300;
  text-align: center;
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-user-select: text;
  user-select: text;
}
#lgmNameInput::placeholder { color: var(--text-dim); }
#lgmNameInput:focus { border-bottom-color: var(--gold-dim); }

/* ============ adding a meditation the timer never saw ============
   A retreat, a phone in a locker, a sit at somebody else's house.

   No new gesture and no new colour. Every control here opens in place under the
   thing you tapped, which is the move the bowl screen already makes for session
   length, and everything is built from the existing tokens. */

/* The sheet swaps whole groups of itself in and out with the `hidden` attribute, and
   several of those groups set an explicit display (#lgmNote is block, .lgm-opts and
   .lgm-sheet-actions are flex). An id or class selector outranks the browser's own
   [hidden] rule, so without this they stay on screen while claiming to be hidden.
   The !important is the point rather than a shortcut: hidden should mean hidden
   whatever a later rule has to say about display. */
#lgmSheet [hidden] { display: none !important; }

/* With a panel open the sheet can be taller than a small phone. `safe center` keeps
   it centred when it fits and top-aligns it when it does not, which matters because
   plain `center` pushes the overflow above the scroll origin where it cannot be
   reached. A browser that does not know `safe` drops this line and keeps the
   centring from the rule above, which is exactly today's behaviour. */
#lgmSheet {
  overflow-y: auto;
  justify-content: safe center;
}

/* The duration became a button so it can be tapped in add mode. Disabled in record
   mode, where it is only a readout. `disabled` is safe here: the global dimming is
   scoped to .lgm-pill, which this is not. */
#lgmSheet .lgm-big {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
#lgmSheet .lgm-big:disabled { cursor: default; }

/* the date and the time, each its own tap target */
.lgm-stamp-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.lgm-stamp-edit .lgm-sep { opacity: 0.5; }
.lgm-seg {
  padding: 0 0 3px;
  border: none;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.14);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.lgm-seg.open { color: var(--gold); border-bottom-color: var(--gold-dim); }

/* one open at a time: length, or date, or time, or none */
.lgm-panel { display: none; }
.lgm-panel.on { display: block; }

/* the same nine lengths the bowl screen draws, in the same order */
#lgmLenRow {
  margin: 2px auto 0;
  max-width: 17rem;
}
#lgmLenRow.on {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
#lgmLenRow .lgm-pill {
  min-width: 2.7rem;
  padding: 0.5rem 0.55rem;
  text-align: center;
}

/* ---- the calendar ---- */
#lgmCal { margin: 20px 0 2px; }
.lgm-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lgm-cal-arw {
  display: flex;
  padding: 4px;
  border: none;
  background: none;
  color: var(--gold-dim);
  cursor: pointer;
}
/* dead rather than hidden: the edge of what you can reach should be visible.
   One year back, and nothing in the future. */
.lgm-cal-arw:disabled { color: rgba(var(--text-rgb), 0.13); cursor: default; }

.lgm-cal-wd,
.lgm-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.lgm-cal-wd span {
  padding-bottom: 8px;
  text-align: center;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb), 0.22);
}
.lgm-cal-days button {
  position: relative;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
  cursor: pointer;
}
.lgm-cal-days button:disabled { color: rgba(var(--text-rgb), 0.13); cursor: default; }
.lgm-cal-days button.sel { color: var(--gold); }
.lgm-cal-days button.sel::before {
  content: '';
  position: absolute;
  top: 3px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
}
/* a day that already has something. Adding the same retreat twice is the likeliest
   mistake this feature makes, and this is what stops it. */
.lgm-cal-days .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-dim);
  opacity: 0;
}
.lgm-cal-days button.has .dot { opacity: 0.75; }
.lgm-cal-foot {
  margin-top: 10px;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgba(var(--text-rgb), 0.22);
}

/* ---- the time ---- */
/* Stepped rather than typed, and minutes move in fives. Nobody remembers a retreat
   starting at 6.37, and a keyboard here would be four taps and a dismiss. */
#lgmStep { margin: 18px 0 2px; }
#lgmStep.on {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.lgm-step-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.lgm-step-unit .v {
  height: 2.1rem;
  min-width: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 100;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.lgm-step-unit.ampm .v { font-size: 0.95rem; }
.lgm-step-ch {
  display: flex;
  padding: 2px;
  border: none;
  background: none;
  color: var(--gold-dim);
  opacity: 0.7;
  cursor: pointer;
}
.lgm-step-ch:disabled { opacity: 0.18; cursor: default; }
.lgm-step-colon {
  padding-bottom: 2px;
  font-size: 1.3rem;
  font-weight: 100;
  color: var(--gold-dim);
}

/* ---- the way in, on the profile ---- */
.lgm-lbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lgm-addlink {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 2px 12px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dim);
  cursor: pointer;
}

/* ---- saved, and again ---- */
.lgm-saved-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.lgm-saved-rule {
  margin: 26px 0 22px;
  border-top: 1px solid var(--line);
}
.lgm-saved-lbl { text-align: center; margin-bottom: 18px; }
/* the row just written, so the eye lands on it without being shouted at */
#lgmSavedList .lgm-hist.fresh {
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 12px;
  background: rgba(var(--gold-rgb), 0.045);
}

/* ============ friends ============
   Finding somebody, and the three groups the answer lands in. Laid over the
   profile with a back arrow, the way signing in and a meditation's detail
   already are, rather than taking a fourth place in the nav.

   Almost nothing here is new furniture. The search row is built like
   .lgm-handle-wrap, a person's row is .lgm-hist with a monogram where the date
   block was, and the round accept and ignore buttons are .lgm-pill bent into a
   circle. The one genuinely new thing is the stack of monograms, which grows
   into the space #lgmFriendsText was given flex: 1 for in phase one. */

/* Neither takes a padding-bottom of its own: both are places, so the nav stays
   on them, and .lgm-view already pads by the nav plus the safe area. */
#lgmFriendsView { z-index: 7; }
/* over the friends list, which is itself over the profile */
#lgmPersonView  { z-index: 9; }

/* a column, so the empty state can take the room the list is not using */
#lgmFriendsView .lgm-body { display: flex; flex-direction: column; }

/* ---- the search row ----
   The rule sits under the whole row rather than under the field, so the
   magnifier shares it with the text. Same reason .lgm-handle-wrap does it. */
.lgm-srch {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0 9px;
  margin-top: 8px;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.16);
  transition: border-color 0.3s ease;
}
.lgm-srch:focus-within { border-bottom-color: var(--gold-dim); }
.lgm-srch .ico { display: flex; flex: none; color: var(--text-dim); }
.lgm-srch:focus-within .ico { color: var(--gold-dim); }

.lgm-srch-field {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.lgm-srch-field::placeholder { color: var(--text-dim); }
/* Safari draws its own clear button on a search field; this one is ours */
.lgm-srch-field::-webkit-search-cancel-button { display: none; }

.lgm-srch .clr {
  display: flex;
  flex: none;
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}
/* A class setting display outranks the browser's own [hidden] rule, so without
   this the clear mark sits there over an empty field. Same trap the sheet
   documents at #lgmSheet [hidden]. */
.lgm-srch .clr[hidden] { display: none; }

/* ---- one person, in a list ---- */
.lgm-prow {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 0;
  border: none;
  border-bottom: 1px solid var(--hair);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lgm-prow .who { flex: 1; min-width: 0; }
.lgm-prow .nm {
  font-size: 0.86rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgm-prow .hd {
  margin-top: 3px;
  font-size: 0.71rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}
/* the mutual count on a suggested row, and the only thing that ever sits on the
   handle line beside the handle. A shade brighter than the handle so the number
   is the part that is read, without becoming a second name. */
.lgm-prow .hd b {
  font-weight: 400;
  color: var(--text-mid);
}

/* ---- see all N friends ----
   The row that opens the rest of the list when the shelf below it has capped it
   at three. Quiet, centred, and in the list's own voice: the invite offer that
   branch 4 puts on this screen is a hairline box, and two hairline boxes reading
   as one another is how you tap the wrong one. */
.lgm-morerow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  /* The mockup's box is 13px above and 2px below, which draws a 28px control.
     The extra 16px below and the negative margin that takes it back are the same
     trick the like ring on a feed card uses: the target reaches 44px while the
     words stay exactly where they are drawn, and the label underneath does not
     move. The 16px of target reaches up into that label's own 22px of margin,
     which is empty and not pressable. */
  padding: 13px 0 18px;
  margin-bottom: -16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
}
.lgm-morerow .g { display: flex; }

/* ---- inviting somebody who is not here yet ----
   The box itself is .lgm-actline, the feed's activity line, reused whole. Only
   the margins differ: that one sits at the top of a screen with a list under it,
   this one at the foot with nothing after it. Everything else — the gold
   hairline, the radius, the weight — is the same box on purpose, because it is
   the same kind of thing: one quiet offer at the edge of a screen. */
.lgm-inv { margin: 18px 0 0; }
/* Copied, for the four seconds it says so. Green rather than gold, which is the
   one other colour this app has and means what it means under a free handle:
   that went well. */
.lgm-inv.copied { color: var(--free); border-color: var(--free-line); }
.lgm-inv.copied .g { color: var(--free); }

/* The link, set to be read and checked rather than pressed. Monospace because
   the one question anybody asks of a token is whether two copies of it match. */
.lgm-linkline {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
  word-break: break-all;
}
.lgm-linkline[hidden] { display: none; }

.lgm-inv-note {
  margin-top: 9px;
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-dim);
  text-align: center;
}
.lgm-inv-note[hidden] { display: none; }
#lgmInviteNew { margin-top: 4px; }

/* ---- the line that says what just happened ----
   The same hairline box again, with a monogram in it and nothing to press. Used
   twice: above the form on the details step, naming who invited you, and at the
   top of the you page once a link has been redeemed.

   Not dismissible and not kept. It goes when the screen does, because a thing
   you have to put away is a thing you have to attend to, and this is news rather
   than a state. */
.lgm-said {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 18px;
  padding: 12px 15px;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--text-mid);
}
.lgm-said b { font-weight: 400; color: var(--text); }
/* On the details step the box is the first thing on the screen, so it has
   nothing above it to sit away from, and the sentence under it belongs to it
   rather than to the address line below. Without this the two paragraphs would
   sit 32px apart and read as unrelated. */
#lgmInviteSaid { margin: 0 0 16px; }
#lgmInviteCopy { margin: 0 0 6px; }

/* ---- the streak on a friend's row ----
   Drawn the way a history row draws its date: a number with a small word under
   it. Empty at zero rather than showing a nought, because a nought beside
   somebody's name reads as a report on how little they meditate.

   The block keeps its width when it is empty, on purpose. Without that, names on
   rows above and below a quiet friend would sit at different lengths and the
   column would ripple. */
.lgm-strk {
  width: 32px;
  flex: none;
  text-align: center;
}
.lgm-strk .n {
  font-size: 0.92rem;
  font-weight: 200;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.lgm-strk .l {
  margin-top: 2px;
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- the one action on a row ----
   Bronze while it is a button. Once the request is sent it stops being one and
   becomes a word, which both reports what happened and takes the row out of
   reach of a second tap. */
.lgm-act {
  flex: none;
  padding: 0.34rem 0.82rem;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  background: none;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lgm-act.said {
  border-color: transparent;
  padding-right: 0;
  color: var(--text-dim);
  cursor: default;
}
/* Looks like .said but is still a button. Withdrawing and removing are quiet on
   purpose, since neither is the thing the screen is for, but they are pressable
   and must not claim otherwise with the cursor. */
.lgm-act.quiet {
  border-color: transparent;
  padding-right: 0;
  color: var(--text-dim);
}
.lgm-act[disabled] { opacity: 0.5; cursor: default; }

/* ---- accepting, or not ----
   Yes is ringed in bronze and no is not. Ignoring somebody should not be as
   easy to hit by accident as accepting them. */
.lgm-pair { display: flex; align-items: center; gap: 7px; flex: none; }
.lgm-rnd {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--text-rgb), 0.16);
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}
.lgm-rnd.yes { border-color: var(--gold-dim); color: var(--gold); }
.lgm-rnd[disabled] { opacity: 0.5; cursor: default; }

/* ---- the stack on the profile row ----
   Ringed in the ground colour so three monograms read as overlapping rather
   than as one smudge. s26 is a size .lgm-av already had. */
.lgm-stack { display: flex; flex: none; }
.lgm-stack .lgm-av { position: relative; box-shadow: 0 0 0 2px var(--bg); }
.lgm-stack .lgm-av + .lgm-av { margin-left: -9px; }
/* The first one on top, so the stack fans away from the eye rather than each
   monogram being clipped by the one after it. Three is all the row ever draws. */
.lgm-stack .lgm-av:nth-child(1) { z-index: 3; }
.lgm-stack .lgm-av:nth-child(2) { z-index: 2; }
.lgm-stack .lgm-av:nth-child(3) { z-index: 1; }
/* the count of people waiting on you, the one live thing on that screen */
#lgmFriendsText .waiting { color: var(--gold); }

/* ---- somebody else ----
   NOTHING PRESSABLE SITS UNDER HER NAME. The slot holds `add friend`, `accept`
   or `withdraw`, all of them offers, and on an accepted friend it holds
   nothing at all. Being friends is a fact rather than an offer, and the screen
   says it by showing her numbers and her history, which is exactly what nobody
   else can see. It has no margin when it is empty, so the handle runs straight
   into the three numbers.

   `remove friend` used to be here, in bronze, as the only button on the screen,
   which made the one thing that cannot be undone the most obvious thing on it.
   It is behind the ··· below. */
.lgm-person-act:not(:empty) { margin-top: 14px; }
.lgm-person-act .lgm-act { padding: 0.44rem 1.25rem; font-size: 0.76rem; }

/* ---- what the ··· opens ----
   It rises from the bottom rather than dropping from the corner it was tapped
   in, which was the first drawing and was wrong. A menu anchored under the ···
   lands the words "remove friend" an inch below the name of the person they are
   about, which is the one place on this screen they must not be. Down here they
   are as far from her name as the screen allows.

   Both live inside #lgmPersonView, which is position: fixed; inset: 0, so they
   cover that screen and nothing else. Above the nav within it, and the nav is
   its own fixed element outside, so this covers the profile rather than the app. */
.lgm-scrim {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--scrim);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lgm-menu {
  position: absolute;
  z-index: 7;
  left: 0; right: 0; bottom: 0;
  padding: 8px 0 calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  overflow: hidden;
}
.lgm-menu button {
  display: block;
  width: 100%;
  padding: 15px 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text-mid);
  text-align: center;
  cursor: pointer;
}
.lgm-menu button[disabled] { opacity: 0.5; cursor: default; }
.lgm-menu .leave { color: var(--danger-text); }
/* Armed by the first tap and done by the second, the same two taps and the same
   four seconds that deleting a meditation and deleting a comment already use.

   The width is spelled out because neither obvious value works. The rule above
   sets width: 100%, and a side margin on top of that pushes the pill 32px past
   the right edge. width: auto does not rescue it either: a <button> is
   shrink-to-fit under auto whatever its display, so the pill collapses to the
   width of the words and sits against the left margin. */
.lgm-menu .leave.armed {
  width: calc(100% - 32px);
  margin: 4px 16px;
  padding: 13px 16px;
  border: 1px solid var(--danger-edge);
  border-radius: 999px;
}
.lgm-menu .close {
  margin-top: 6px;
  border-top: 1px solid var(--hair);
  color: var(--text-dim);
}
/* empty and taking no room until there is something to say */
.lgm-menu-err {
  padding: 0 20px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--danger-text);
}
.lgm-menu-err:not(:empty) { padding-bottom: 10px; }
.lgm-person-note {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ============ the feed ============
   Lifted from social-mockup.html screens 5 and 6 rather than approximated, which
   is the rule at the top of this file.

   The card is the first filled surface in the app. Everything shipped before it
   is a hairline row on the bare ground, which is why --card sat defined and
   unused in :root from the day the palette was written until this. */

/* ---- the day's activity, at the top ----
   A hairline box rather than a red dot, and gone entirely on a day you have not
   meditated. The one gold rule in the app, which is why it has a token. */
.lgm-actline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 4px 0 16px;
  padding: 12px 15px;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  background: none;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-align: left;
  color: var(--text-mid);
  cursor: pointer;
}
.lgm-actline .g { color: var(--gold-dim); display: flex; flex: none; }
.lgm-actline .t { flex: 1; }
.lgm-actline .chev { color: var(--text-dim); display: flex; flex: none; }

/* ---- the [hidden] trap, in one place ----
   A class that sets `display` outranks the browser's own [hidden] rule, so any
   element with one has to say it again. #lgmSheet at the top of this file and
   .lgm-srch .clr both already carry their own line for exactly this. Every
   remaining case in the app is gathered here rather than scattered.

   All four of the feed's own were found in the browser rather than by reading,
   and one of them mattered: a friend's meditation was drawing the delete button,
   because .lgm-detail-foot is a flex row and hiding it did nothing.

   THE LAST TWO ARE OLDER THAN THIS FILE'S FEED WORK and are fixed here because
   they are the same one-line mistake sitting next to it:

     .lgm-empty  — the friends screen sets #lgmFriendsEmpty.hidden and it has
                   never taken effect, so the empty middle stays behind the list.
     .lgm-stats  — lgmPersonPaint hides #lgmPersonStats on a stranger's profile,
                   deliberately, because a stranger sees no numbers. It has never
                   taken effect either, so the row stayed on screen holding
                   whichever friend's numbers were painted into it last. That is
                   the one mistake that screen can make which does not look like
                   a mistake, and lgmPersonPaint's own comment says so. */
.lgm-actline[hidden],
.lgm-acts[hidden],
.lgm-composer[hidden],
.lgm-detail-foot[hidden],
.lgm-empty[hidden],
.lgm-stats[hidden],
/* Two more from the invite link, and the first is the same mistake again:
   `new link` is a .lgm-morerow, which is a flex row, and it is the first one in
   the app that is HIDDEN rather than built and thrown away. `see all N friends`
   never needed this line because it is created only when it is wanted. */
.lgm-morerow[hidden],
.lgm-said[hidden] { display: none; }

/* ---- one meditation, as a card ---- */
/* A div carrying role="button" since 15 August 2026, not the <button> it was:
   the ring inside it became a real control, and a button inside a button is
   invalid. It keeps the two declarations a <button> gave it for free, and gains
   a focus ring, since it no longer gets one either. */
.lgm-card {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 18px 18px 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lgm-card:focus { outline: none; }
.lgm-card:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: 2px; }
/* why a like did not go through, on the card it was made on rather than at the
   foot of a feed thirty cards long. Goes with that card's next repaint. */
.lgm-card-err {
  margin-bottom: 6px;
  font-size: 0.74rem;
  min-height: 0;
}
#lgmFeedList { padding-top: 4px; }

/* Smaller than the detail screen's 2.4rem: on a card it is the hero of one
   meditation among several, not of the screen. */
.lgm-dur {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 15px;
}
.lgm-dur .n {
  font-size: 1.9rem;
  font-weight: 100;
  color: var(--gold);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.lgm-dur .u {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lgm-note {
  margin-top: 11px;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-mid);
  white-space: pre-wrap;
}
/* A card with nothing under the note ends 6px below it, where one with a tally
   row ends 18px and one with a comment ends 20px, because both of those carry
   their own bottom padding. The mockup drew that card once, at the foot of a
   scroll, so the three were never seen in a column together. On a real feed most
   meditations have no likes yet, so it is the common case rather than the rare
   one, and the short card reads as clipped beside the others. 12 here makes it
   18, which is what the tally row already ends on. */
.lgm-card > .lgm-note:last-child { padding-bottom: 12px; }

/* ---- the tally ----
   NOT .lgm-act, which is the friends screen's action pill and has been since
   before this existed. Two classes one letter apart would be found the hard way.

   A count of zero draws no row at all rather than a nought, the same rule the
   streak on a friend's row follows. */
.lgm-acts {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(var(--text-rgb), 0.06);
}
.lgm-tally {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
button.lgm-tally { cursor: pointer; }
button.lgm-tally[disabled] { opacity: 0.5; cursor: default; }
/* liked: the glyph fills, the stroke thickens, and the number goes with it */
.lgm-tally.on { color: var(--gold); }
.lgm-tally svg { display: block; }

#lgmDetailActs { margin-top: 20px; }

/* ---- comments, one flat list ---- */
.lgm-cmt {
  display: flex;
  gap: 10px;
  padding-top: 11px;
}
.lgm-cmt .t {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-mid);
  overflow-wrap: anywhere;
}
.lgm-cmt .t b { color: var(--text); font-weight: 400; }
.lgm-cmt .when {
  margin-top: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
/* the preview on a card: no timestamp, a smaller monogram, a hairline above it */
.lgm-cmt.preview {
  margin-top: -6px;
  padding-bottom: 14px;
  border-top: 1px solid var(--hair);
}

.lgm-cmt-del {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  cursor: pointer;
}
.lgm-cmt-del.armed { color: var(--danger-lit); }
.lgm-cmt-del[disabled] { opacity: 0.5; cursor: default; }

/* ---- the composer ----
   Pinned below the scroller in place of the nav, which this screen hides. */
.lgm-composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  /* no safe-area inset here: #lgmDetail already pads the bottom by it, and
     adding it again lifts the field a thumb's width off the home indicator */
  padding: 14px max(22px, var(--edge)) 16px;
  border-top: 1px solid rgba(var(--text-rgb), 0.07);
}
.lgm-composer .inp {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(var(--text-rgb), 0.16);
  border-radius: 999px;
  padding: 10px 16px;
  background: none;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--text);
}
.lgm-composer .inp::placeholder { color: var(--text-dim); }
/* 16px would be the iOS rule for not zooming on focus, but the field is inside a
   viewport locked with user-scalable=no, so the smaller size is safe here. */
.lgm-composer .inp:focus { outline: none; border-color: var(--gold-dim); }
.lgm-composer .snd {
  flex: none;
  display: flex;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold-dim);
  cursor: pointer;
}
.lgm-composer .snd[disabled] { opacity: 0.5; cursor: default; }

/* ---- while you were away ----
   The other face of the record sheet. It reuses .lgm-saved-line, .lgm-saved-rule
   and .lgm-saved-lbl from the hand-added turnover, because both are the same
   gesture: the form goes, a gold receipt line stays, and what it was hiding
   stands in the room that frees. */
#lgmAway .lgm-saved-lbl { margin-bottom: 6px; }
/* The sheet is centred and does not scroll, so the list is what gives if there
   is more than a screenful. The two buttons underneath must stay reachable. */
#lgmAwayList { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.lgm-away-row { display: flex; gap: 13px; padding: 13px 0; }
.lgm-away-row + .lgm-away-row { border-top: 1px solid var(--hair); }
.lgm-away-row .g { flex: none; padding-top: 3px; color: var(--gold-dim); display: flex; }
.lgm-away-row .m { flex: 1; min-width: 0; }
.lgm-away-row .t {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-mid);
  overflow-wrap: anywhere;
}
.lgm-away-row .t b { color: var(--text); font-weight: 400; }
/* what they actually said, set behind the same gold hairline the activity line
   is drawn with, so a quote reads as theirs rather than as the app's */
.lgm-away-row .q {
  margin-top: 6px;
  padding-left: 11px;
  border-left: 1px solid var(--gold-line);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.lgm-away-row .when {
  margin-top: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}