/* Daily Life Doc: Atlas (js/atlas/atlas.js, atlas-totry.js), round 6 and round 8. One sheet of paper with thirteen
   sections of plain lines (Health under three quiet sub-headings) and, last, To try, closed with a count. The
   bullets and the suggestion "Move to …" are css/lines.css; this file adds the paper's measures, the air and the
   hairlines between the sections, the sub-headings of Health, the quiet word under Measurements and lab reports
   while a file is read, the heading of To try (a button with the count and a chevron), the soft tint of a line
   that is new to this account, the chevron of a line that opens something (a To try line its entry, a measurement
   its history), the quiet word "file" of a lab file's line, the history sheet of a measurement
   (js/atlas/measure-sheet.js, round 9) and the version mark in the header's second line.
   Colours only through tokens and --pc-*. Nothing here changes on hover, and nothing changes a box's size:
   states are colour, opacity and transform only. */

/* ---------- The paper ---------- */
.at-doc { padding: 14px 18px 16px; }
.at-doc .at-sec { margin-top: 0; scroll-margin-top: 24px; }
.at-doc .at-sec + .at-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.at-doc .sect.doc-h { margin: 2px 0 4px; }
/* Bullets sit under the middle of the heading's tile. */
.at-lines { padding-left: 11px; }
.at-doc .ln { scroll-margin-top: 96px; }
.at-doc .lns { min-height: 34px; }
/* A long title ("Measurements and lab reports") wraps under itself, beside the tile, on a narrow phone. */
.at-doc .sect.doc-h { align-items: flex-start; }
.at-doc .sect.doc-h > span { padding-top: 2px; line-height: 24px; text-wrap: balance; }

/* ---------- The sub-headings of Health: quiet words over their own list, on the bullets' left edge ---------- */
.at-sub { margin-top: 10px; }
.at-sec > .sect + .at-sub { margin-top: 4px; }
.at-subh { margin: 0 0 0 11px; font-size: var(--t-sm); font-weight: 500; line-height: 24px; color: var(--ink2); }

/* ---------- Measurements and lab reports: the quiet word while the app reads a file ---------- */
.at-wait { margin: 2px 0 0 26px; min-height: 24px; font-size: var(--t-sm); line-height: 24px; animation: dd-fade 240ms ease both; }

/* Round 9: a lab file's line reads "Blood test September · file": the files are one quiet word after the words
   (js/ui/lines-row.js, `fileWord`); a tap on the word opens the file. Inline, never the strip's row of tiles. */
.ln-t .ln-fw { display: inline; margin: 0; white-space: nowrap; }
.ln-fw > i { margin: 0 .3em; font-style: normal; color: var(--ink3); }
.ln-fw-b { font-weight: 500; color: var(--ink2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: 4px; transition: opacity var(--m-press) ease; }
.ln-fw-b:active { opacity: .55; background: var(--pc-bg); }

/* ---------- A line that is new to this account: the soft tint, for this visit ---------- */
/* The same soft tint as a changed line of Today (--tint, css/base.css): quiet, never a block of the place's colour. */
.at-doc .ln.is-new { background: var(--tint); box-shadow: -8px 0 0 var(--tint), 8px 0 0 var(--tint); border-radius: 10px; }
/* Several new lines one after another (the results read from a lab file) are one soft block, not a pile of pills. */
.at-doc .ln.is-new:has(+ .ln.is-new) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.at-doc .ln.is-new + .ln.is-new { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ---------- To try: the heading is one button with the count and a chevron ---------- */
.at-try .sect.doc-h { margin-bottom: 0; }
.at-try-h { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; font-size: var(--t-m); font-weight: 600; text-align: left; color: var(--ink); transition: opacity var(--m-press) ease; }
.at-try-h:active { opacity: .6; }
.at-try-h > span { flex: 1; min-width: 0; }
.at-try-h .at-try-n { flex: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink2); }
.at-try-n.tinted { padding: 2px 8px; border-radius: 10px; background: var(--pc-bg); box-shadow: none; }
.at-try-h .chev { margin-left: 0; transition: transform var(--m-step) var(--ease-out); }
.at-try-l { margin-top: 4px; }
/* A line that opens something has a chevron after its words: a To try line that an update carried opens its entry,
   a measurement opens its history (round 9). */
.at-doc .ln-go .ln-t { cursor: pointer; }
.at-doc .ln-go .ln-t::after { content: ''; display: inline-block; width: .4em; height: .4em; margin: 0 .1em .12em .55em; border: solid var(--ink3); border-width: 1.7px 1.7px 0 0; transform: rotate(45deg); }
.at-doc .ln-go:active .ln-t { opacity: .6; }

/* ---------- The history of a measurement (js/atlas/measure-sheet.js) ----------
   One row per value, newest first: the value large, then its day and where it came from, quiet. No boxes: rows are
   parted by a hairline. A swipe to the left slides the row open on Remove (the red word behind it); on a computer a
   small ✕ shows while the pointer is over the row and does the same. A new row rises in, a removed row fades and the
   gap closes (DD.motion), a corrected row glows. */
.ms-list { margin: 2px 0 6px; }
.ms-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.ms-row:last-child { border-bottom: 0; }
.ms-rise { animation: dd-rise var(--m-add) var(--ease-out) both; }
.ms-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 56px; background: var(--surface); touch-action: pan-y; transition: transform 260ms var(--ease-out); }
.ms-row.drag .ms-in { transition: none; }
.ms-val { flex: none; display: block; min-height: 44px; padding: 0 2px; line-height: 44px; font-size: var(--t-m); color: var(--ink2); white-space: nowrap; transition: opacity var(--m-press) ease; }
.ms-val b { font-size: var(--t-l); font-weight: 600; color: var(--ink); }
.ms-val:active { opacity: .55; }
.ms-when { flex: 1; min-width: 0; text-align: right; font-size: var(--t-sm); color: var(--ink3); overflow-wrap: anywhere; }
.ms-x { flex: none; display: none; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--ink3); opacity: 0; transition: opacity var(--m-step) ease; }
.ms-x svg { width: 14px; height: 14px; }
.ms-rm { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 96px; font-size: var(--t-s); font-weight: 600; color: var(--surface); background: var(--bad); }
/* Behind a shut row the word is hidden, so no edge of it shows under the row's words or while the row rises in. */
.ms-row:not(.open):not(.drag) .ms-rm { visibility: hidden; transition: visibility 0s 260ms; }
.ms-rm:active { opacity: .8; }
/* A computer: the ✕ shows while the pointer is over the row (a phone swipes instead). */
@media (hover: hover) and (pointer: fine) {
  .ms-x { display: grid; }
  .ms-row:hover .ms-x, .ms-row.open .ms-x, .ms-x:focus-visible { opacity: 1; }
  .ms-x:hover { background: var(--soft); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .ms-in { transition: none; } .ms-rise { animation: none; } }

/* ---------- The last line of a patient's Atlas: Sign out, quiet, under the paper ---------- */
.at-foot { margin: 14px 0 0; padding: 0 18px; }
.at-foot .quiet.link { min-height: 44px; font-weight: 500; color: var(--ink2); }

/* ---------- The header's second line on the Atlas tab: "About you · v12" ---------- */
.top-sub .at-mark { position: relative; display: inline-flex; align-items: center; font-weight: 600; color: var(--ink2); transition: opacity var(--m-press) ease; }
.top-sub .at-mark::after { content: ''; position: absolute; inset: -12px -10px; }
.top-sub .at-mark:active { opacity: .5; }

/* ---------- The place sheet's switch "Use for weather" (js/ui/place-sheet.js; an underlined place of About) ----------
   One row under the places, parted by a hairline: the words, and at the right a small switch in the place's colour.
   (The switch's look went with round 2's value sheets; round 9 opens the place sheet again.) */
.pls .pls-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin-top: 4px; padding: 0 4px; border-top: 1px solid var(--line); font-size: var(--t-m); font-weight: 500; text-align: left; color: var(--ink); }
.pls .pls-sw i { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: color-mix(in srgb, var(--ink3) 40%, var(--soft)); transition: background-color var(--m-step) ease; }
.pls .pls-sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px var(--scrim); transition: transform var(--m-step) var(--ease-out); }
.pls .pls-sw[aria-checked="true"] i { background: var(--pc); }
.pls .pls-sw[aria-checked="true"] i::after { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .pls .pls-sw i, .pls .pls-sw i::after { transition: none; } }