/* checkin.css — the day's check-in (js/checkin.js): the weigh-in sheet, its
 * Details, the movement screen and the doses screen (REVAMP-DESIGN §2.2.2).
 * Used by Today and by Progress, so it is its own sheet, prefixed checkin-.
 *
 * The kit (chips, pills, fields, ticks, the sheet) is base.css's and is only
 * placed here. Colours are the tokens; the chosen context wears the kit's
 * done chip (the accent wash with an accent-ink edge); nothing is red. No
 * text under 13px; widths answer to the sheet's own container.
 */

.checkin { display: grid; gap: 14px; min-width: 0; }

.checkin-label { font: 450 var(--t-sub-size)/1.3 var(--font); color: var(--ink-2); }
.checkin-hint { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
.checkin-line { margin: 0; font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.checkin-empty { margin: 0; font: var(--t-body); color: var(--ink-2); }

/* The context chip and where it came from, side by side (the mock's
 * "Fasted morning | Going by the clock: before 10:00. Tap to change."). */
.checkin-context-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.checkin-context { flex: none; }
.checkin-why { margin: 0; min-width: 0; font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
.checkin-contexts[hidden],
.checkin-fasted[hidden] { display: none; }
.checkin-fasted { display: grid; gap: 8px; }

/* The prints: one field, or three side by side under triplicate. The field
 * is the kit's input, drawn as a tile with its name over the number. */
.checkin-trip { margin: 0; }
.checkin-prints { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.checkin-prints.checkin-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checkin-print {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px transparent;
  cursor: text;
}
.checkin-print:focus-within { box-shadow: inset 0 0 0 2px var(--accent-ink); background: var(--surface); }
.checkin-print-name { font: var(--t-cap); color: var(--ink-2); }
.checkin-print-box { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
/* input.checkin-weigh-lb outranks the kit's `input.input` box: the tile is
 * the field, the number sits in it bare. */
input.checkin-weigh-lb {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 600 20px/1.2 var(--font);
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
input.checkin-weigh-lb:focus { outline: none; }
input.checkin-weigh-lb::-webkit-inner-spin-button,
input.checkin-weigh-lb::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.checkin-unit { flex: none; font: 450 var(--t-sub-size)/1 var(--font); color: var(--ink-2); }

/* Urine specific gravity: the words left, an empty field right. */
.checkin-usg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 12px;
}
.checkin-usg-words { display: grid; gap: 2px; min-width: 0; }
.checkin-usg-words .checkin-label { color: var(--ink); }
.checkin-usg { min-width: 0; }

.checkin-notice[hidden] { display: none; }
.checkin-notice {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.checkin-notice-head { margin: 0; font: 560 var(--t-body-size)/1.4 var(--font); color: var(--ink); }

/* Details: the conditions as pre-set chips (never paragraphs), the scale's
 * panel as a two-column grid. */
.checkin-cond { display: grid; gap: 8px; min-width: 0; }
.checkin-panel { display: grid; gap: 8px; }
.checkin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

@container (max-width: 300px) {
  .checkin-prints.checkin-three { grid-template-columns: minmax(0, 1fr); }
  .checkin-grid { grid-template-columns: minmax(0, 1fr); }
  .checkin-context-row { flex-wrap: wrap; }
}

/* The movement screen's list, and the doses screen's rows. */
.checkin-list { display: grid; }
.checkin-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 0;
}
.checkin-item + .checkin-item { border-top: 1px solid var(--line); }
.checkin-item-text { flex: 1 1 auto; min-width: 0; font: var(--t-body); }
.checkin-remove { flex: none; }

.checkin-dose-list { display: grid; }
/* The rail's groups on the doses screen: a quiet head with its count, the
 * way the rail names them, and the rows under it. */
.checkin-dose-group { display: grid; min-width: 0; }
.checkin-dose-group + .checkin-dose-group { margin-top: 6px; }
.checkin-dose-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font: 600 var(--t-sub-size)/1.3 var(--font);
  color: var(--ink-2);
}
.checkin-dose-count { font: 450 var(--t-cap-size)/1.3 var(--font); color: var(--ink-2); }
.checkin-dose {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 6px 0;
}
.checkin-dose + .checkin-dose { border-top: 1px solid var(--line); }
.checkin-dose-name { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; font: var(--t-row); }
.checkin-dose-amount { flex: none; display: flex; align-items: center; gap: 6px; }
.checkin-amount { width: 88px; min-width: 0; }
.checkin-law {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font: var(--t-sub);
  color: var(--ink);
}