/* entry.css — the input side of Steady: log form, live readout, readings list, edit dialog.
   All colour / spacing / type comes from tokens.css; nothing hardcoded. Dark mode is
   automatic (tokens flip). Component shells (.card, .btn, .pill, .icon-btn, .toast) come
   from base.css. See SPEC.md §8 (tokens), §10 (a11y). Owner: Agent B. */

/* =========================================================================
   LOG FORM
   ========================================================================= */

#log-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
}

/* ---------- live readout: the "vitals instrument" (the star) ---------- */

.readout {
  --ro-accent: var(--muted); /* neutral until a category is known */
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ro-accent); /* calm status cue, beyond the glyph colour */
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease);
}
.readout[data-status='good'] { --ro-accent: var(--good); }
.readout[data-status='warning'] { --ro-accent: var(--warning); }
.readout[data-status='serious'] { --ro-accent: var(--serious); }
.readout[data-status='critical'] { --ro-accent: var(--critical); }

.ro-main {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.ro-glyph { flex: 0 0 auto; display: inline-flex; }
.ro-figures { display: flex; flex-direction: column; min-width: 0; }

.ro-nums {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums; /* no width jitter as digits change */
}
.ro-slash { color: var(--muted); font-weight: 500; }
.readout[data-status='empty'] .ro-nums { color: var(--muted); }

.ro-pulse {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ro-cat { align-self: flex-start; }

/* ---------- numeric field row (shared with the edit dialog) ---------- */

.fields {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
}
.field { flex: 1 1 0; min-width: 0; }
.field + .field { margin-left: 0; }
.field:last-child { margin-left: var(--s-2); } /* separate Pulse from the SYS/DIA pair */

.field-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--s-1);
  white-space: nowrap;
}
.lbl-abbr {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lbl-unit { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }

.field-sep {
  flex: 0 0 auto;
  align-self: center;
  padding-top: var(--s-4);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--hairline);
}

.num-input {
  width: 100%;
  min-height: 56px;
  padding: var(--s-2);
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  -moz-appearance: textfield;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-input::placeholder { color: var(--muted); font-weight: 500; }
.num-input:hover { border-color: var(--baseline); }
.num-input:focus { border-color: var(--accent); background: var(--surface); }
/* keep the visible ring for keyboard users; only drop it for pointer/touch focus */
.num-input:focus:not(:focus-visible) { outline: none; }

/* ---------- controls row: period chip + auto-stamp hint ---------- */

.log-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.period-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.period-chip:hover { background: var(--surface); border-color: var(--accent); }
.chip-icon { display: inline-flex; font-size: var(--fs-md); line-height: 0; }
/* tie the period to the app's colour language: morning = orange, evening = violet (§7) */
.period-chip[data-period='morning'] .chip-icon { color: var(--series-morning); }
.period-chip[data-period='evening'] .chip-icon { color: var(--series-evening); }
.chip-auto {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-wash);
  padding: 1px var(--s-2);
  border-radius: var(--r-full);
}

.stamp-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.stamp-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  flex: 0 0 auto;
}

.log-btn { width: 100%; }

/* =========================================================================
   READINGS LIST (grouped by SGT day — the clean "table twin" the dashboard links to)
   ========================================================================= */

#readings-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.day-group { padding: var(--s-3) var(--s-4) var(--s-2); }
.day-group + .day-group { border-top: 1px solid var(--hairline); }

.day-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-1);
}

.reading-rows { list-style: none; display: flex; flex-direction: column; }

.reading-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-2);
}
.reading-row + .reading-row { border-top: 1px solid var(--hairline); }

.row-glyph { flex: 0 0 auto; display: inline-flex; }

.row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.row-headline { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.row-bp {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums; /* rows align */
}
.bp-slash { color: var(--muted); font-weight: 500; margin: 0 1px; }

.row-sub {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.row-period { display: inline-flex; align-items: center; gap: 4px; }
.row-period .tod-i { display: inline-flex; color: var(--muted); font-size: 0.9em; line-height: 0; }
.row-dot { color: var(--hairline); }
.row-time { font-variant-numeric: tabular-nums; }

.row-actions { flex: 0 0 auto; display: flex; gap: var(--s-1); }
.row-action {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.row-action:hover { color: var(--ink); background: var(--surface-2); }
.row-action[data-delete]:hover { color: var(--critical-ink); background: var(--critical-wash); }

/* compact pill for list rows (base.css owns the colours per [data-status]) */
.pill.pill-sm { padding: 2px var(--s-2); font-size: var(--fs-xs); gap: 5px; }
.pill.pill-sm .dot { width: 6px; height: 6px; }

/* =========================================================================
   EMPTY STATE
   ========================================================================= */

#empty-state {
  padding: var(--s-8) var(--s-4);
  background: var(--surface);
  border: 1px dashed var(--border); /* dashed = "placeholder", a non-colour signal */
  border-radius: var(--r-lg);
  text-align: center;
}
.empty-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.empty-glyph { display: inline-flex; opacity: 0.9; margin-bottom: var(--s-1); }
.empty-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.empty-text { max-width: 32ch; color: var(--ink-2); font-size: var(--fs-sm); }

/* =========================================================================
   EDIT DIALOG
   ========================================================================= */

#edit-dialog {
  width: 100%;
  max-width: min(92vw, 460px);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
}
#edit-dialog::backdrop {
  /* theme-stable dark scrim (no token exists for a scrim; `black` keeps it dark in both themes) */
  background: color-mix(in srgb, black 45%, transparent);
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.edit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.edit-title { font-size: var(--fs-md); font-weight: 600; }
.edit-when {
  margin-top: calc(-1 * var(--s-2));
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.edit-period-row { display: flex; align-items: center; gap: var(--s-3); }
.edit-period-label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }

.edit-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.edit-spacer { flex: 1 1 auto; }

@media (prefers-reduced-motion: no-preference) {
  #edit-dialog[open] .edit-form { animation: edit-in var(--dur) var(--ease); }
  @keyframes edit-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
}

/* =========================================================================
   UNDO TOAST (extends base.css .toast, lives in the shared #toast-region)
   ========================================================================= */

.toast-undo { justify-content: space-between; gap: var(--s-3); }
.toast-action {
  flex: 0 0 auto;
  min-height: 32px;
  padding: var(--s-1) var(--s-3);
  border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease);
}
.toast-action:hover { background: color-mix(in oklab, currentColor 16%, transparent); }

/* =========================================================================
   WIDE SCREENS — the log card is sticky in a 380px column (base.css sets the grid).
   Give the readout a touch more presence when there's room.
   ========================================================================= */

@media (min-width: 900px) {
  .ro-nums { font-size: var(--fs-3xl); }
}