/* The tray (V3T) and its two Settings cards, Devices and Inbox.
 *
 * Colours from tokens.css only. The wireframe's own language (docs/ui/MOCKUP.html):
 * a card per thing, a small muted time, chips for what was read out of it, the
 * money card on the green wash, and a system line dashed and muted — which is
 * what a muted draft (an OTP, a credit, an unknown number) is here.
 *
 * Nothing on .shell, a view wrapper or .day grows overflow, transform or
 * contain (views.css's note): the sheet is #day-sheet's, position: fixed.
 */

/* ------------------------------------------------------------- the button */

.tray-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}

.tray-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.tray-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The count, as the Pending tab's count is drawn (views.css .tabs__count). */
.tray-btn__count {
  min-width: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--emphasis);
  color: var(--ps-charcoal);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.25rem;
  text-align: center;
}

.tray-btn__count[hidden] {
  display: none;
}

/* ------------------------------------------------------------- the sheet
 *
 * A tall bottom sheet like Close day's (day.css .sheet__card.close): the title
 * and Close keep their places and the cards between them scroll. The note —
 * what came of the last tap — sits between the title and the cards, OUTSIDE
 * their scroll (fidelity review, round 2: after a Confirm low in the list it
 * was scrolled out of view): only .tray__list scrolls. */

.sheet__card.tray-sheet {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  margin-block: auto 0;
  padding: 0;
  overflow: hidden;
}

.sheet__card.tray-sheet:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tray-sheet .sheet__head {
  flex: none;
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.tray-sheet .tray {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.tray-sheet .tray__note {
  flex: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}

.tray-sheet .tray__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

.tray-sheet .sheet__choices {
  flex: none;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

/* -------------------------------------------------------------- the cards */

.tray__note {
  margin: 0 0 var(--space-3);
  color: var(--ok);
  font-size: var(--text-md);
}

.tray__note:empty {
  display: none;
}

.tray__note--error {
  color: var(--danger);
}

.tray__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tray__empty {
  color: var(--ink-muted);
  font-size: var(--text-base);
}

.tray__item {
  flex: none;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* A card holds the focus while it is being saved (tray.js rule 6). */
.tray__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The wireframe's expense card: the green wash, no border. */
.tray__item--expense {
  background: var(--tint-money);
  border-color: transparent;
}

/* A muted draft reads as the wireframe's system line: dashed, quieter. */
.tray__item--muted {
  background: var(--surface);
  border-style: dashed;
  color: var(--ink-muted);
}

.tray__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
}

.tray__source {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* On the money wash --accent is 3.96:1 in dark (fidelity review, measured in
 * Edge); --ok is 4.81:1 light and 5.85:1 dark on --tint-money. */
.tray__item--expense .tray__source {
  color: var(--ok);
}

.tray__when {
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

.tray__kind {
  margin-inline-start: auto;
  color: var(--warn-ink);
  font-weight: 700;
}

.tray__item--muted .tray__kind {
  color: var(--ink-muted);
}

/* What came in, as it came: the SMS's own line breaks, three lines at most.
 * Only this is clamped — it is never what Confirm saves. */
.tray__came {
  display: -webkit-box;
  margin: 0 0 var(--space-2);
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
  white-space: pre-line;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* The draft, WHOLE. For a spoken or relayed item it is the very line Confirm
 * saves, and §3.9 writes nothing the owner has not seen: never clamped (the
 * sheet scrolls instead). */
.tray__headline {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* A line to be saved is body text, not a title. */
.tray__item--line .tray__headline {
  font-weight: 600;
}

.tray__item--muted .tray__headline {
  color: var(--ink-muted);
  font-weight: 600;
}

.tray__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
}

.tray__chip {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
}

.tray__item--expense .tray__chip {
  background: var(--surface);
}

.tray__reason {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* Already in the diary, not yet off the tray (tray.js rule 4): said plainly,
 * in the colour of a saved note. */
.tray__item--saved .tray__reason {
  color: var(--ok);
  font-style: normal;
  font-weight: 600;
}

.tray__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tray__actions .btn {
  flex: 1 1 0;
  width: auto;
  padding-inline: var(--space-2);
}

/* ------------------------------------------------- Settings → Devices */

.devices__tag {
  margin-inline-start: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
}

.devices__token-state {
  margin: var(--space-1) 0 var(--space-2);
}

.devices__token-state.is-active {
  color: var(--ok);
  font-weight: 600;
}

/* The token, shown once: the one orange-edged box on the page. */
.devices__reveal {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 2px solid var(--emphasis-edge);
  border-radius: var(--radius-sm);
  background: var(--tint-warn);
}

.devices__reveal[hidden] {
  display: none;
}

.devices__reveal-title {
  margin: 0 0 var(--space-2);
  color: var(--warn-ink);
  font-weight: 700;
}

.devices__token {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.devices__reveal .btn--primary {
  width: auto;
}

.devices__add {
  margin-top: var(--space-4);
}

/* --------------------------------------------------- Settings → Inbox */

.inbox__sources {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.inbox__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--touch);
  padding: var(--space-2) 0;
  cursor: pointer;
}

.inbox__check {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

/* The app's ring, not Edge's default: rgb(16,16,16) is ~1.1:1 on the dark card
   (fidelity review, round 3). */
.inbox__check:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.inbox__words {
  display: flex;
  flex-direction: column;
}

.inbox__label {
  font-weight: 600;
}

.inbox__senders {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  list-style: none;
}

/* Sender · ending · paid from · remove: one row on a desk, two on a phone,
 * with a rule between senders so a phone's two rows read as one. */
.inbox__sender {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.inbox__sender:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.inbox__paid {
  grid-column: 1 / 2;
}

.inbox__remove {
  grid-column: 2 / 3;
}

@media (min-width: 720px) {
  .inbox__sender {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.4fr) auto;
  }

  .inbox__paid,
  .inbox__remove {
    grid-column: auto;
  }
}

.inbox .btn-row .btn--primary {
  width: auto;
}