/* The account page's own rules, after pages.css: its rows, status lines, the tick and the answer box. Tokens only. */
.a-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 8px; }
#a-q { flex: 1 1 100%; }
#a-answer, .a-input { box-sizing: border-box; padding: 7px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--card); border: var(--line-w) solid var(--ink); border-radius: var(--r-chip); }
#a-answer { width: 5.5em; }
#a-answer:focus-visible, .a-input:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
/* each card's one place for messages: at least a line tall, so nothing jumps when it fills */
.a-status { min-height: 1.5em; margin: 6px 0 0; color: var(--soft); }
.a-small { font-size: 13.5px; color: var(--soft); }
.a-tick { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.a-tick input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.a-tick input:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
/* a <button> made to look like the .btn links */
button.btn { font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; }
.btn { display: inline-block; color: var(--ink); }
.btn[hidden] { display: none; }   /* a display above would otherwise show a hidden button */
.btn.plain { background: var(--card); }
.btn.warn { background: var(--coral); }
/* the Devices card (S62): each device a small tile in the card, like the menu's groups */
.a-devs { list-style: none; margin: 0 0 4px; padding: 0; }
.a-dev { margin: 0 0 10px; padding: 10px 14px; background: var(--bg); border: 2px solid var(--ink); border-radius: var(--r-tile); }
.a-dev p { margin: 0 0 4px; }
.a-dev .a-row { margin: 8px 0 0; }
.a-dev-name { overflow-wrap: anywhere; }
.a-this { color: var(--soft); }
.a-edit { margin: 0; }
.a-edit .a-input { flex: 1 1 12em; min-width: 0; }
@media (pointer: coarse) {
  .btn, #a-answer, .a-input, .a-tick { min-height: 44px; box-sizing: border-box; }
  .btn { display: inline-flex; align-items: center; }
}