/* ChatFlow Apps view (#apps-view, design A). Needs tokens.css, components.css (rows, chips,
   list states, dialog) and chrome.css (.cf-page) first. Two sections: AviaWin Play (header
   with Open and the one primary, New Login; the one-time password panel; the logins as
   shared rows: username with its status chip, then note · expiry · last login) and Other
   Apps (links only). Colours come from tokens only, so night needs no rules here.

   Status is a word on a chip in the colour language: Active green (.chip-ok), Expired grey
   (.chip-idle), Revoked red (.chip-bad). */

/* The page frame of Settings and Offers: the header spans the page, the content stops at 1200px */
.apps-page > :not(.page-head) { max-width: 1200px; }
.apps-section + .apps-section { margin-top: 40px; }
.apps-section > .card,
.apps-section > div > .card,
.apps-section > div > .list-error { margin-top: 12px; }
.apps-link { color: var(--reply); text-decoration: underline; text-underline-offset: 2px; }
.apps-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- Login rows (the shared .row) ---------- */
.apps-row { gap: 16px; }
.apps-row .row-main { min-width: 160px; }
.apps-user { font-variant-numeric: tabular-nums; }
.apps-row .row-actions button[aria-disabled="true"] { opacity: .5; cursor: progress; }

/* ---------- New Login and Edit Note ---------- */
.apps-dialog { width: 440px; }
.apps-req { font-weight: var(--fw-regular); color: var(--ink-2); }
.apps-days { max-width: 120px; }

/* ---------- The one-time password panel: on the reply tint, until Done ---------- */
.apps-secret {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-color: var(--reply);
  background: var(--reply-tint);
}
.apps-secret-title { margin: 0; font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font); color: var(--ink); }
.apps-secret-title:focus { outline: none; }
.apps-secret-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.apps-secret > .hint { margin-top: -8px; color: var(--ink); }
.apps-cred { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.apps-cred-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apps-cred-row dt { font: var(--fw-semibold) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); }
.apps-cred-row dd { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.apps-code {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: var(--fw-semibold) var(--fs-label)/var(--lh-label) ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
.apps-cred-row .btn,
.apps-secret-actions .btn:not(.btn-primary) { background: var(--bg); }
.apps-msg { font: var(--fw-regular) var(--fs-label)/var(--lh-label) ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; resize: none; }
.apps-secret-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Narrow lists: the actions take their own line under the login ---------- */
#apps-logins { container: apps-list / inline-size; }
@container apps-list (max-width: 559px) {
  .apps-row { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
  .apps-row .row-main { flex: 1 1 100%; }
  .apps-row .row-meta { white-space: normal; overflow-wrap: anywhere; }
}
.apps-links .row-meta { white-space: normal; }
@media (max-width: 559px) {
  .apps-links .row { flex-wrap: wrap; row-gap: 8px; }
  .apps-links .row-main { flex: 1 1 100%; }
}