/* Settings and Data health, on the language in home.css.

   Settings is one column in the middle of the page: its name over it, and
   under that a part at a time, each saying what it is in a line above its
   card. Arriving from elsewhere, the rail's list is swapped a row at a time
   and the column rises into place, once.

   Data health leads with the one answer (do the books agree with Tally) and
   then lists what is left to do by the thing it is about. A line is told by a
   bare icon and its words; what is missing is said in amber, once on its row. */

/* ---------- the column ---------- */
.set { max-width: 720px; grid-template-columns: minmax(0, 1fr); }
.set > .page-head { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 8px 0 24px; text-align: center; }
.set > .page-head .lead { flex: none; max-width: 100%; }
.set h1.page-title { justify-content: center; margin: 0; font-size: var(--t-title); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.set .page-sub { max-width: 52ch; margin: 8px auto 0; font-size: var(--t-body); line-height: 1.5; text-wrap: balance; }
.set > .page-head .actions { justify-content: center; margin: 0; }
.set-part { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; margin: 0 0 24px; }
.set-about { padding: 0 4px; }
.set-about h2 { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; }
.set-about p { margin-top: 4px; font-size: var(--t-small); line-height: 1.5; }
.set-about .scope { margin-top: 8px; font-size: var(--t-small); }
.set .card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
.set .card.notice { padding: 32px 24px; }
.set .notice b { font-size: var(--t-head); font-weight: 600; }
.set .notice p { font-size: var(--t-body); }
.set .line { padding: 8px 0; font-size: var(--t-body); }
.set .line + .line { border-top: 0; }
.set .line > span:last-child { color: var(--ink); font-weight: 500; }
.set-line { gap: 12px; padding: 8px 0; }
.set-line + .set-line { border-top: 0; }
.set-line .t b, .set .setting b { font-size: var(--t-body); font-weight: 600; }
.set-line .t small, .set .setting small, .set .hint, .set .fld > span, .set-text, .set .empty { font-size: var(--t-small); }
.set-text, .set-points li { font-size: var(--t-body); }
.set-status .who b, .set-later b { font-size: var(--t-head); }
.set-counts { padding-top: 16px; }
.set-counts b { font-size: var(--t-fig); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.set-counts small { font-size: var(--t-small); }
.set .pill, .set .chip { font-size: var(--t-body); }
.set .pill.small, .set .tag, .set .m-later, .set .avatar, .set .you { font-size: var(--t-small); }
.set .field { font-size: var(--t-body); }
.set .linkish { font-size: inherit; }
.set-save { justify-content: center; padding: 0 0 24px; }
.set-save .pill { min-width: 160px; justify-content: center; }
.set .m-list { padding: 8px; border-radius: var(--r-lg); }
.set .m-list a { min-height: 56px; font-size: var(--t-body); }
.set .m-list small { font-size: var(--t-small); }
.set kbd, .set .key-row, .set .note { font-size: var(--t-small); }
/* the keys: their own screen, in the same column */
.in-settings .stage > .page-head, .in-settings .stage > .keys, .in-settings .stage > .note, .in-settings .stage > .hint { max-width: 720px; margin-left: auto; margin-right: auto; }
.in-settings .stage > .page-head { flex-direction: column; align-items: center; gap: 16px; margin-top: 8px; margin-bottom: 24px; text-align: center; }
.in-settings .stage > .page-head .lead { flex: none; }
.in-settings .stage > .page-head h1.page-title { justify-content: center; font-size: var(--t-title); font-weight: 600; letter-spacing: -0.03em; }
.in-settings .stage > .page-head .page-sub { font-size: var(--t-body); }
.in-settings .stage > .keys { grid-template-columns: minmax(0, 1fr); }
.in-settings .stage > .hint { text-align: center; }

/* ---------- arriving: the column a part at a time, the rail's list a row at a time ---------- */
@keyframes set-row { from { opacity: 0; transform: translateX(-10px); } }
@keyframes set-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
  .set.rise > * { animation: set-rise 420ms var(--spring) both; animation-delay: calc(var(--n, 0) * 45ms); }
  .rail-nav.swap > * { animation: set-row 300ms var(--spring) both; animation-delay: calc(var(--i, 0) * 16ms); }
}

/* ---------- Data health: the one answer ---------- */
.hl-top { display: grid; justify-items: center; gap: 8px; margin-bottom: 24px; padding: 32px 24px 8px; text-align: center; }
.hl-seal { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: var(--r-lg); background: var(--ok); color: #fff; }
.hl-seal svg { stroke-width: 2; }
.hl-top.bad .hl-seal { background: var(--bad); }
.hl-head { font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.hl-under { max-width: 52ch; margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--muted); text-wrap: balance; }
.hl-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.hl-checks { justify-self: stretch; margin-top: 16px; border-top: 1px solid var(--hair); }
.hl-checks > summary { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; border-radius: var(--r-ctl); font-size: var(--t-small); color: var(--muted); }
.hl-checks > summary::-webkit-details-marker, .hl-note > summary::-webkit-details-marker { display: none; }
.hl-checks > summary .chev, .hl-note > summary .chev { flex: none; transition: transform 200ms var(--spring); }
.hl-checks[open] > summary .chev, .hl-note[open] > summary .chev { transform: rotate(90deg); }
.hl-checklist { display: grid; gap: 16px 24px; padding: 8px 0 24px; text-align: left; }
.hl-check { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.hl-check b { display: block; font-size: var(--t-body); font-weight: 500; }
.hl-check small { display: block; font-size: var(--t-small); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
@media (min-width: 700px) { .hl-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a bare mark: green done, amber waiting, red wrong */
.hl-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.hl-mark.ok { color: var(--ok); } .hl-mark.wait { color: #946000; } .hl-mark.bad { color: var(--bad); }

/* ---------- what is left to do, by the thing it is about ---------- */
.set .card.hl-groups, .set .card.hl-notes { padding: 8px 24px; }
.hl-group { padding: 16px 0; }
.hl-group + .hl-group { border-top: 1px solid var(--hair); }
.hl-group-head { display: flex; align-items: flex-start; gap: 12px; }
.hl-group-head .t { flex: 1; min-width: 0; }
.hl-group-head .t b { display: block; font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; }
.hl-group-head .t small { display: block; margin-top: 2px; font-size: var(--t-small); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hl-group-head > .pill { flex: none; }
.hl-group > .hl-rows { margin: 8px 0 0 32px; }
.hl-rows { display: grid; }
.hl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; padding: 8px 0; }
.hl-row .t { flex: 1 1 136px; min-width: 0; }
.hl-row .t b { display: block; font-size: var(--t-body); font-weight: 500; overflow-wrap: anywhere; }
.hl-row .t b .linkish { font-weight: 500; }
.hl-row .t small { display: block; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }
.hl-row .t small.miss { color: #946000; font-weight: 500; }
.hl-row .t small.why, .hl-check small.why { color: var(--bad); }
.hl-do, .set form.hl-fix { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.hl-row > * { min-width: 0; }
.hl-fix .field.sm { width: 128px; min-width: 0; height: 32px; }
.set form.hl-fix { min-width: 0; }
/* in Settings an icon stands bare: its colour says how the thing stands, with no box behind it */
.set .ico { width: 20px; height: 20px; background: none; border-radius: 0; }
.set .ico.tone-in { color: var(--ok); } .set .ico.tone-due { color: var(--wait); } .set .ico.tone-bad { color: var(--bad); } .set .ico.tone-plain { color: var(--muted); }
.set .ico svg { width: 20px; height: 20px; }
.hl-skip { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; font-size: var(--t-small); color: var(--muted); transition: background-color 150ms, color 150ms; }
.hl-skip:hover { background: rgba(22, 23, 26, 0.06); color: var(--ink); }
.hl-said { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-body); font-weight: 500; color: var(--ok-ink); }
.hl-said.wait { color: #946000; }
.hl-foot { margin: 8px 0 8px 32px; font-size: var(--t-small); color: var(--muted); }
.hl-clear { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 0; }
.hl-clear p { margin: 0; font-size: var(--t-body); color: var(--muted); }
.hl-aside { margin: -12px 4px 24px; font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
.hl-aside .linkish { margin-right: 8px; color: var(--muted); }
/* a note: nothing to do, opened for the rows behind it */
.hl-note > summary, div.hl-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; list-style: none; }
.hl-note > summary { cursor: pointer; border-radius: var(--r-ctl); }
.hl-note + .hl-note { border-top: 1px solid var(--hair); }
.hl-note .t { flex: 1; min-width: 0; }
.hl-note .t b { display: block; font-size: var(--t-body); font-weight: 600; }
.hl-note .t small { display: block; margin-top: 2px; font-size: var(--t-small); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hl-n { flex: none; font-size: var(--t-body); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.hl-note > .hl-rows { margin: 0 0 16px 32px; }
.hl-note .hl-foot { margin-left: 0; }

/* the answer lands: the seal first, its mark drawn across it */
@keyframes hl-seal { from { opacity: 0; transform: scale(0.6); } }
@keyframes hl-tick { from { stroke-dashoffset: 28; } }
@media (prefers-reduced-motion: no-preference) {
  .set.rise .hl-seal { animation: hl-seal 480ms var(--spring) 120ms both; }
  .set.rise .hl-seal svg path { stroke-dasharray: 28; animation: hl-tick 420ms ease-out 360ms both; }
  .hl-said { animation: set-rise 320ms var(--spring) both; }
}

@media (max-width: 699px) {
  .set > .page-head { margin: 0 0 16px; }
  .set .card, .set .card.hl-groups, .set .card.hl-notes { padding: 16px; }
  .set .card.hl-groups, .set .card.hl-notes { padding-top: 0; padding-bottom: 0; }
  .set-part { margin-bottom: 16px; }
  .hl-top { padding: 24px 16px 0; margin-bottom: 16px; }
  .hl-group > .hl-rows, .hl-note > .hl-rows, .hl-foot { margin-left: 0; }
  .hl-do { justify-content: flex-start; flex: 1 1 100%; max-width: 100%; }
  /* the boxes side by side, then Save and Not needed on one line under them */
  .set form.hl-fix { display: contents; }
  /* a box typed into on a phone is 16, or the page zooms; everything pressed is 44 to the finger */
  .hl-fix .field.sm { flex: 1 1 120px; width: auto; height: 44px; font-size: 16px; }
  .hl-fix .pill.small, .hl-do .pill.small, .hl-skip { height: 44px; }
  .hl-acts .pill { height: 44px; }
}

/* ---------- in Settings the rail is only the way back and the list of settings ---------- */
@media (min-width: 1000px) {
  /* (searching and making things belong to the books; the company stays, since these are its settings) */
  .in-settings .side .rail-search, .in-settings .side .side-new { display: none; }
  .in-settings .side .rail-co { margin-bottom: 8px; }
}

/* ---------- the last strays onto the six sizes, and 44 to the finger on a phone ---------- */
.set .line > span:last-child { font-size: var(--t-body); }
.in-settings .stage > .page-head .pill { font-size: var(--t-body); }
.in-settings .stage kbd, .in-settings .stage .caps i, .in-settings .stage .key-row { font-size: var(--t-small); }
.in-settings .stage .key-row > span:last-child { font-size: var(--t-body); }
@media (max-width: 699px) {
  .set .pill.small { height: 44px; }
  .hl-row .t b .linkish, .hl-aside .linkish { position: relative; }
  .hl-row .t b .linkish::after, .hl-aside .linkish::after { content: ""; position: absolute; inset: -13px 0; }
  .hl-aside { line-height: 2.4; }
}

/* a button beside a box is as tall as the box */
.set .hl-do .pill.small, .set .hl-group-head > .pill.small { height: 32px; }
@media (max-width: 699px) {
  .set .hl-do .pill.small, .set .hl-group-head > .pill.small { height: 44px; }
  /* on a phone Settings is not somewhere to search from either */
  .in-settings #searchBtn { display: none; }
}
/* ---------- the count in the rail ---------- */
@media (min-width: 1000px) {
  /* (it is a mark, not a bar: it keeps its own width beside the name) */
  .rail-item .count { flex: none; }
  /* how many things want a detail filled in is not an alarm: said quietly, where a refused bill is said in red */
  .rail-item .count.quiet { background: rgba(255, 255, 255, 0.16); color: #fff; font-size: var(--t-small); }
}