/* me.css — the Me tab only (REVAMP-DESIGN §2.6, §11 WP11).
 *
 * Every class is prefixed `me-`; nothing here may leak into another tab. The
 * rows are the kit's (`ui.navRow`, base.css); this file places them and draws
 * what only Me has: the colour swatches, the row marks, the switches, the goal
 * list, the unit and appearance choices, the phase rail, the Sync and
 * Overrides lists, the ledger count and the import form.
 *
 * Greyscale, with the person's accent where §4.1 lets it paint (a switch that
 * is on and a chosen option are done controls: the accent fill or its wash
 * with an ink edge; the now node of the phase rail) and red only where §4.1
 * lets it: a field whose value is not a usable number. Every size is a token,
 * and nothing is set under 13px (cli/test_layout_rules.py).
 */

/* ------------------------------------------------------------------ face - */

.me-face { display: grid; gap: var(--s-2); }

/* The colour: its name on the right, eight swatches under it. */
.me-colour { display: grid; gap: var(--s-2); padding-top: var(--s-1); }

.me-colour-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.me-colour-label {
  font: var(--t-row);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.me-colour-value { font: var(--t-sub); color: var(--ink-2); }

/* Eight swatches, each a 44px target drawn as a 34px disc; the chosen one
 * wears an ink ring cut from the ground by a 2px gap, and a check in the
 * colour a label on that fill takes (--on-accent clears 4.9:1 on all eight).
 *
 * FOUR TO A ROW UNTIL THERE IS ROOM FOR EIGHT. Eight 44px targets need 352px
 * of column, which the 390 phone (358) and the 420 wide face (376) have and a
 * 320 phone (288) does not; there, two rows of four keep every colour at the
 * 44px floor. The rule answers to the COLUMN (a container query). */
.me-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-1) 0;
}

@container (min-width: 352px) {
  .me-swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.me-swatch {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.me-swatch-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--swatch);
  color: var(--on-accent);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
}

.me-swatch-tick {
  opacity: 0;
  transform: scale(.5);
  stroke-width: 2.5;
  transition: opacity 140ms var(--ease), transform 180ms var(--ease);
}

.me-swatch:active .me-swatch-dot { transform: scale(.9); }

.me-swatch[aria-pressed="true"] .me-swatch-dot {
  box-shadow: 0 0 0 2px var(--chart-ground), 0 0 0 4px var(--ink);
}
.me-swatch[aria-pressed="true"] .me-swatch-tick { opacity: 1; transform: none; }

.me-swatch:focus-visible { outline: none; }
.me-swatch:focus-visible .me-swatch-dot {
  box-shadow: 0 0 0 2px var(--chart-ground), 0 0 0 4px var(--accent-ink);
}

/* The rows: four runs (help, the settings, the phone's lock, the Lab) with
 * air between them. Each row carries its mark on a small grey tile, and the
 * hairline between two rows starts where the words do, so the marks read as
 * one column (the A pass). */
.me-rows {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-3);
}

.me-rows .me-lead {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink-2);
}
.me-rows .me-lead svg { width: 18px; height: 18px; }

.me-run .me-row + .me-row { border-top: 0; }
.me-run .me-row + .me-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: 44px;
  right: 0;
  height: 1px;
  background: var(--line);
}
.me-run .me-row[data-pane-open]::after,
.me-run .me-row[data-pane-open] + .me-row::after { background: transparent; }
.me-rows .me-row[data-pane-open] .me-lead { color: var(--ink); }

/* ------------------------------------------------------------ the screens - */

/* On a screen the card's box and title go (base.css `.screen-body > .card`);
 * in a shell with no screens the card keeps both. */
.me-card { display: grid; gap: var(--s-3); }

.me-note {
  font: var(--t-sub);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Something the person asked for is not going to happen (notifications
 * blocked, a file that cannot be read). Said plainly in ink, with the next
 * step: red is only past a limit or for a destructive action (§4.1, §6). */
.me-warn {
  font: 560 var(--t-sub-size)/1.45 var(--font);
  color: var(--ink);
  text-wrap: pretty;
}

/* The one reason a screen's controls will not do what they say, set above
 * them on a tile (§5 "Callout"). */
.me-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 14px var(--s-4);
  border-radius: var(--r-tile);
  background: var(--surface);
  box-shadow: var(--lift);
}
.me-callout-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink-2);
}
.me-callout .me-warn { padding-top: 5px; font-weight: 400; color: var(--ink-2); }
.me-callout .me-warn-head { font-weight: 600; color: var(--ink); }

.me-subhead {
  margin-top: var(--s-2);
  font: var(--t-row);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.me-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

/* A corner pill with nothing to do right now (Reset all, Send now). */
.me-reset-all[hidden],
.me-sync-send[hidden] { display: none; }

/* The wide default pane is the Goals screen with nothing to go back to: the
 * head keeps its height so the title sits on the face title's line. */
.me-pane-gap { flex: 1 1 auto; }

/* ------------------------------------------------------------------ goals - */

.me-group + .me-group { margin-top: var(--s-4); }

.me-group-title {
  font: 560 var(--t-cap-size)/1.35 var(--font);
  color: var(--ink-2);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--line);
}

.me-goal-list { display: grid; }

/* A LIST, not a stack of forms: the name on the left, the number on the right
 * with its unit inside the field, one row each. The second row exists only
 * where a goal has something to say: an override quoting the pack it
 * replaced, with the reset beside it; the week's own prices on Calories. */
.me-goal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px var(--s-3);
  padding: var(--s-2) 0;
}
.me-goal + .me-goal { border-top: 1px solid var(--line); }

.me-goal-label {
  grid-column: 1;
  font: var(--t-body);
  font-weight: 560;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The field is the box; the number and its unit sit inside it, the number
 * right-aligned against the unit ("1750 kcal"). One focus ring on the box. */
.me-goal-field {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 136px;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border: 1px solid var(--edge);
  border-radius: var(--r-field);
  background: var(--field-bg);
  cursor: text;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.me-goal-field:focus-within {
  border-color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}

.me-goal-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.me-goal-input:focus { border: 0; box-shadow: none; outline: none; }

.me-goal-unit {
  flex: none;
  font: 450 var(--t-sub-size)/1 var(--font);
  color: var(--ink-2);
}

.me-goal-reset {
  grid-column: 2;
  justify-self: end;
}

/* A note with no reset beside it takes the row's full width. */
.me-goal-note:last-child { grid-column: 1 / -1; }

.me-goal-note {
  grid-column: 1;
  font: var(--t-cap);
  color: var(--ink-2);
  text-wrap: pretty;
}

.me-goal[data-invalid] .me-goal-field {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
.me-goal[data-invalid] .me-goal-input { color: var(--red); }

/* ---------------------------------------------------- units, appearance - */

/* Two choices, each a tile that says the system in the person's own numbers.
 * The chosen one is a done control: the accent wash with an accent-ink edge
 * and a filled check (§4.1). Text on the wash is --ink or --ink-2 only. */
.me-options { display: grid; gap: 10px; }

.me-option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.me-option:active { transform: scale(.985); }
.me-option[aria-pressed="true"] {
  background: var(--accent-wash);
  border-color: var(--accent-ink);
  color: var(--ink);
}
.me-option:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.me-option-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.me-option-title { font: 600 var(--t-row-size)/1.3 var(--font); letter-spacing: -.01em; color: var(--ink); }
.me-option-sub { font: var(--t-sub); color: var(--ink-2); }
.me-option-sample {
  margin-top: 6px;
  font: 560 var(--t-body-size)/1.4 var(--font);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.me-dot { color: var(--ink-2); }
.me-nowrap { white-space: nowrap; }

/* The check: an empty ring, filled in the person's colour when chosen. */
.me-option-radio {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  color: transparent;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.me-option-radio svg { width: 16px; height: 16px; stroke-width: 2.5; }
[aria-pressed="true"] > .me-option-radio,
[aria-pressed="true"] .me-theme-name > .me-option-radio {
  background: var(--accent);
  box-shadow: none;
  color: var(--on-accent);
}

/* Appearance: three small phones, each drawn in its own mode's grounds
 * whatever mode is on screen (base.css --specimen-*), with a pill in the
 * person's colour; System is the two halves side by side. */
.me-themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  padding-top: var(--s-2);
}

.me-theme {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.me-theme:focus-visible { outline: none; }

.me-specimen {
  display: flex;
  width: 100%;
  max-width: 112px;
  aspect-ratio: 5 / 7;
  border-radius: var(--r-tile);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .15s var(--ease), transform .12s var(--ease);
}
.me-theme:active .me-specimen { transform: scale(.97); }
.me-theme[aria-pressed="true"] .me-specimen,
.me-theme:focus-visible .me-specimen {
  box-shadow: 0 0 0 2px var(--chart-ground), 0 0 0 4px var(--accent-ink);
}

.me-specimen-face {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 10px;
}
.me-specimen-face.me-mode-light { background: var(--specimen-light-bg); }
.me-specimen-face.me-mode-dark { background: var(--specimen-dark-bg); }
.me-specimen.me-mode-system .me-specimen-face { padding-inline: 7px; }

.me-specimen-title { display: block; height: 8px; width: 62%; border-radius: 4px; }
.me-specimen-line { display: block; height: 5px; width: 92%; border-radius: 3px; }
.me-specimen-line.me-short { width: 58%; }
.me-mode-light > .me-specimen-title { background: var(--specimen-light-ink); }
.me-mode-dark > .me-specimen-title { background: var(--specimen-dark-ink); }
.me-mode-light > .me-specimen-line { background: var(--specimen-light-line); }
.me-mode-dark > .me-specimen-line { background: var(--specimen-dark-line); }

.me-specimen-card {
  display: grid;
  margin-top: 6px;
  padding: 8px 6px;
  border-radius: 7px;
}
.me-mode-light > .me-specimen-card { background: var(--specimen-light-surface); }
.me-mode-dark > .me-specimen-card { background: var(--specimen-dark-surface); }

.me-specimen-pill {
  display: block;
  height: 11px;
  width: 72%;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}

.me-theme-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font: 520 var(--t-body-size)/1.2 var(--font);
}
.me-theme-name > .me-option-radio { width: 20px; height: 20px; }
.me-theme-name > .me-option-radio svg { width: 14px; height: 14px; }
.me-theme[aria-pressed="true"] .me-theme-name { color: var(--ink); font-weight: 620; }

.me-theme-said {
  font: var(--t-body);
  color: var(--ink);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- reminders - */

.me-reminder-list { display: grid; }

/* One line each: the name and its note, then the time and the switch in two
 * fixed columns at the right, so every time and every switch line up down
 * the list whether or not a row has both. */
.me-reminder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 51px;
  align-items: center;
  gap: 0 var(--s-3);
  padding: var(--s-3) 0;
}
.me-reminder + .me-reminder { border-top: 1px solid var(--line); }

.me-reminder-main { grid-column: 1; display: grid; gap: 2px; min-width: 0; }
.me-reminder-controls { grid-column: 2; display: flex; justify-content: center; }
.me-reminder > .me-toggle { grid-column: 3; }

.me-reminder-label {
  font: var(--t-body);
  font-weight: 560;
  color: var(--ink);
}

.me-reminder-time {
  width: 76px;
  padding-inline: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.me-reminder:not([data-on]) .me-reminder-time { color: var(--ink-2); }

/* A dose's time is the plan's, not a field: the same column, no box. */
.me-reminder-fixed {
  display: inline-grid;
  place-items: center;
  min-height: var(--tap);
  padding: 0;
  font: 560 var(--t-row-size)/1.35 var(--font);
  color: var(--ink);
}

.me-reminder-note {
  font: var(--t-cap);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The switch. The button itself is the 44px tap target; the track it draws is
 * the smaller pill inside it. On is a done control: the person's fill, the
 * knob in the colour a label on that fill takes (--on-accent, both modes). */
.me-toggle {
  position: relative;
  flex: none;
  width: 51px;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.me-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 31px;
  margin-top: -15.5px;
  border-radius: 999px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: var(--surface-2);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}

.me-toggle-knob {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 25px;
  height: 25px;
  margin-top: -12.5px;
  border-radius: 999px;
  /* Food's switch (food.css .food-log-switch): the thumb is --raised with an
   * --ink-3 ring, so off reads as a switch in both modes, not a dark dot. */
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--ink-3);
  transition: transform .15s var(--ease), background-color .15s var(--ease);
}

.me-toggle[aria-checked="true"]::before {
  background: var(--accent);
  box-shadow: none;
  color: var(--on-accent);
}
.me-toggle[aria-checked="true"] .me-toggle-knob {
  transform: translateX(20px);
  box-shadow: none;
  background: var(--on-accent);
}

.me-toggle:focus-visible { outline: none; }
.me-toggle:focus-visible::before { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ink); }

/* ---------------------------------------------------------------- profile - */

.me-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--s-4);
}

.me-fact {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.me-fact-k {
  font: var(--t-cap);
  color: var(--ink-2);
}

.me-fact-v {
  font: var(--t-body);
  font-weight: 560;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The phase plan as the app's rail (§5 "Rail"): a line down the left that
 * stops short of each node, a grey disc for a phase behind, the person's
 * node with its halo for the one they are in, a hollow ring for what is
 * ahead. The line is two pieces per phase so no ground colour has to be
 * guessed to hollow a ring on the face, the pane or a sheet. */
.me-phases { display: grid; padding-top: var(--s-1); }

.me-phase {
  position: relative;
  display: grid;
  gap: var(--s-1);
  padding: 10px 0 14px 30px;
}

.me-phase::before,
.me-phase::after {
  content: "";
  position: absolute;
  left: 6px;
  width: 2px;
  background: var(--line-strong);
}
.me-phase::before { top: 0; height: 9px; }
.me-phase::after { top: 31px; bottom: 0; }
.me-phase:first-child::before,
.me-phase:last-child::after { display: none; }

.me-phase-node {
  position: absolute;
  left: 0;
  top: 13px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--edge);
}
.me-phase[data-state="done"] .me-phase-node { background: var(--ink-3); box-shadow: none; }
.me-phase[data-state="now"] .me-phase-node {
  background: var(--accent-mark);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-mark) 24%, transparent);
}

.me-phase-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  min-height: 22px;
}

.me-phase-name {
  font: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}
.me-phase[data-state="done"] .me-phase-name { color: var(--ink-2); font-weight: 560; }

.me-phase-meta {
  font: var(--t-sub);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ------------------------------------------- sync, overrides, proposals - */

.me-sync-state {
  font: var(--t-body);
  color: var(--ink);
  text-wrap: pretty;
}

.me-sync-list,
.me-override-list { display: grid; }

.me-sync-item,
.me-override {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) 0;
}
.me-sync-item + .me-sync-item,
.me-override + .me-override { border-top: 1px solid var(--line); }

.me-sync-what,
.me-override-title {
  font: var(--t-body);
  font-weight: 560;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.me-sync-when,
.me-override-when {
  font: var(--t-sub);
  color: var(--ink-2);
}

.me-override-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
}

.me-override-when { white-space: nowrap; }

.me-sync-why,
.me-override-why {
  font: var(--t-sub);
  color: var(--ink-2);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.me-sync-status:empty { display: none; }
.me-sync-status { font: var(--t-cap); color: var(--ink-2); }

.me-sync-actions,
.me-override .me-actions { margin-top: var(--s-1); }

/* -------------------------------------------------------------------- lab - */

/* Four short runs under their own heads, in §2.6's order. */
.me-lab-rows { display: grid; }

.me-lab-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-6) 0 var(--s-1);
}
.me-lab-head:first-child { padding-top: var(--s-1); }

.me-lab-title {
  font: var(--t-head);
  letter-spacing: -.01em;
  color: var(--ink);
}

.me-lab-meta {
  font: var(--t-cap);
  color: var(--ink-2);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- health - */

/* The one figure first: how much is on disk, then the list that breaks it
 * down. The figure takes the display step at the condensed width (§4.5). */
.me-health-hero {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
}

.me-health-figure {
  font: var(--t-display);
  font-stretch: 85%;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.me-health-words { display: grid; gap: 2px; min-width: 0; }
.me-health-unit { font: var(--t-row); font-weight: 600; color: var(--ink); }
.me-health-sub { font: var(--t-sub); color: var(--ink-2); }

.me-ledger-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px var(--s-4);
  border-top: 1px solid var(--line);
}

.me-ledger {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.me-ledger-name {
  font: var(--t-sub);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.me-ledger-count {
  font: 560 var(--t-sub-size)/1.4 var(--font);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.me-ledger[data-empty] .me-ledger-name,
.me-ledger[data-empty] .me-ledger-count { color: var(--ink-3); font-weight: 400; }

/* ----------------------------------------------------------------- import - */

/* A file input renders its own button: it is drawn as the kit's quiet pill,
 * the file's name beside it, and it still reaches the tap floor. */
.me-import-file {
  display: flex;
  align-items: center;
  padding: 6px var(--s-2) 6px 6px;
  font: var(--t-body);
  color: var(--ink-2);
  line-height: 1.4;
  overflow-x: auto;
  cursor: pointer;
}
.me-import-file::file-selector-button {
  margin-right: var(--s-3);
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--quiet-bg);
  color: var(--ink);
  font: 560 var(--t-body-size)/1.2 var(--font);
  cursor: pointer;
}
.me-import-file:hover::file-selector-button { background: var(--quiet-press); }

/* The ledger picker: the kit's field, the kit's chevron turned down in place
 * of the platform's arrow. */
.me-select { position: relative; display: block; }
.me-select > select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.me-select-chev {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--ink-2);
  transform: rotate(90deg);
  pointer-events: none;
}

.me-import-report {
  display: grid;
  gap: var(--s-2);
}

.me-import-counts {
  font: var(--t-body);
  color: var(--ink-2);
}
.me-import-counts strong {
  font-weight: 620;
  color: var(--ink);
}

.me-import-done {
  font: 560 var(--t-body-size)/1.45 var(--font);
  color: var(--ink);
}

.me-import-rejects {
  display: grid;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
}

.me-import-reject {
  display: grid;
  grid-template-columns: minmax(56px, auto) minmax(0, 1fr);
  gap: var(--s-1) 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.me-import-reject-row {
  font: 560 var(--t-cap-size)/1.45 var(--font);
  color: var(--ink-2);
}

.me-import-reject-why {
  font: var(--t-cap);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- responsive - */

@container (max-width: 376px) {
  .me-goal-field { width: 124px; }
  .me-import-reject { grid-template-columns: minmax(0, 1fr); }
}

/* A 320 phone: the reminder's time and switch keep their columns, the note
 * wraps under the name; the three phones shrink with the column. */
@container (max-width: 300px) {
  .me-reminder { grid-template-columns: minmax(0, 1fr) 68px 51px; gap: 0 var(--s-2); }
  .me-reminder-time { width: 68px; }
  .me-goal-field { width: 112px; }
}

/* A wide pane: the pack's facts four across, so the four about the body sit
 * on one line instead of three and an orphan. */
@container (min-width: 520px) {
  .me-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .me-toggle::before,
  .me-toggle-knob,
  .me-swatch-dot,
  .me-swatch-tick,
  .me-option,
  .me-option-radio,
  .me-specimen,
  .me-goal-field { transition: none; }
}

/* ---------------------------------------- Settings › Security (round 12) --
 * js/security.js. The sync list's grammar: what, then when, a quiet action. */
.me-security { display: grid; gap: var(--s-5); }

.me-sec-head {
  font: var(--t-body);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.me-sec-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
}

.me-sec-row + .me-sec-row { border-top: 1px solid var(--line); }
.me-sec-main { flex: 1; min-width: 0; display: grid; gap: var(--s-1); }

.me-sec-what {
  font: var(--t-body);
  font-weight: 560;
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
}

.me-sec-when { font: var(--t-sub); color: var(--ink-2); margin: 0; }
.me-sec-row.me-sec-current .me-sec-what { color: var(--accent-ink); }
.me-sec-add-faceid { margin: var(--s-2) 0; }

/* Screens (3 Oct, js/security.js): two ways to add one, side by side, and the
 * pair and link sheets. The link is shown once in a read-only field. */
.me-sec-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0; }
.me-sec-sheet { display: grid; gap: var(--s-3); }
.me-sec-sheet-msg { min-height: 1.2em; margin: 0; color: var(--red); }
.me-sec-link-url { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }