/* Daily Life Doc, revision 3: the document look. The paper (.doc) with its header, the panel of Measure and Actions (.doc-frame) and the fold,
   bullets (.lns > .ln), the value of an experiment line (.cc: a grey hint word or the answer in ink), underlined values (.lv),
   measurements (.mk-*), findings (.fd), the note, photos and file chips under a bullet, the floating bar (.lbar), and
   the value sheets (.vs-*). Revision 4: every list that can be typed in ends with one faint "Type here" line; the
   experiment's own lines carry a small square bullet; every heading has its info mark right after its name.
   Files: js/ui/lines*.js, chips.js, chip-tap.js, value-sheet.js, photos.js, findings.js. Tokens, durations and keyframes (dd-fade, dd-glow, dd-pop, dd-wait) come from css/base.css.
   Laws: NOTHING changes on hover, and nothing may change a line's width or height when a bullet gains focus. So: no
   :hover rule in this file, the bar floats over the page, and focus only changes colours and transforms. A value of
   an experiment line is words in the line (round 2): the hint word gives way to the answer, as typed words would. ONE underline everywhere: --ul-w thick, --ul-off below. */
:root { --ul-w: 2px; --ul-off: 5px; }

/* ---------- The paper ---------- */
.doc { background: var(--surface); border-radius: 22px; padding: 22px 18px 26px; box-shadow: 0 1px 0 var(--line), 0 22px 44px -36px var(--shadow); }
.doc-top { display: flex; align-items: flex-start; gap: 10px; }
.doc-names { flex: 1; min-width: 0; }
.doc-title { font-size: var(--t-xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
h1.doc-title[role="button"] { cursor: pointer; transition: opacity var(--m-step) ease; }
h1.doc-title[role="button"]:active { opacity: .6; }
textarea.doc-title-in { display: block; width: 100%; border: 0; padding: 0; background: none; resize: none; overflow: hidden; outline: none; }
.doc-title-in::placeholder, .doc-sum-in::placeholder { color: var(--ink3); opacity: .8; }
/* The one-line summary under the name. */
.doc-sum { margin-top: 3px; font-size: var(--t-s); line-height: 22px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input.doc-sum-in { display: block; width: 100%; height: 22px; border: 0; padding: 0; background: none; outline: none; }
.doc-slot { flex: none; display: flex; align-items: center; gap: 6px; min-height: 28px; }
.doc-mark { position: relative; flex: none; font-size: var(--t-2xs); font-weight: 600; line-height: 1.3; padding: 3px 8px; border-radius: 7px; background: var(--pc-bg); color: var(--pc-d); }
button.doc-mark { transition: transform var(--m-press) var(--ease-out); }
button.doc-mark::after { content: ''; position: absolute; inset: -10px; }
button.doc-mark:active { transform: scale(0.92); }
.doc-timing { margin-top: 10px; font-size: var(--t-s); line-height: 28px; color: var(--ink2); }
.doc-sec { margin-top: 24px; scroll-margin-top: 16px; }
.doc-h.sect { margin: 0 0 6px; }
/* The info mark sits right after the section's name, in every heading. */
.doc-h.sect > span { flex: none; min-width: 0; max-width: calc(100% - 70px); }
/* Measure and Actions: one calm panel at the top of the document in the place's tint (no outline). Inside it the
   two halves are document lines like every other section; a hairline and a little air part them, the headings are
   small, and a clear break follows before Tracking. */
.doc-frame { margin: 20px -6px 0; padding: 16px 16px 12px; border-radius: 22px; background: color-mix(in srgb, var(--pc-bg) 46%, var(--surface)); }
.doc-frame + .doc-sec { margin-top: 30px; }
.doc-frame > .doc-sec { margin-top: 8px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--pc) 30%, transparent); }
.doc-frame > .doc-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Round 3, change 26 (open fault 37): on Today the day's sections stand 28 px apart (css/today.css), and that rule
   also pushed the Actions 28 px away from the last Measure line inside the tinted panel. Inside the panel the two
   parts keep the panel's own 8 px, so the room above the divider matches the room under it. */
.today-doc .doc-frame > .doc-sec + .doc-sec { margin-top: 8px; }
.doc-frame .doc-h.sect { min-height: 26px; margin: 0 0 6px; gap: 9px; font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em; color: var(--pc-d); }
.doc-frame .doc-h .tile { width: 26px; height: 26px; border-radius: 9px; background: var(--surface); }
.doc-frame .doc-h .tile svg { width: 15px; height: 15px; }
/* The fold: the whole document under one row, "Experiment". The body's height glides (a grid row from 0fr to 1fr). */
.doc-fold { width: 100%; min-height: 50px; padding: 0 14px 0 16px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--pc-bg); color: var(--pc-d);
  font-size: var(--t-m); font-weight: 600; text-align: left; transition: transform var(--m-press) var(--ease-out); }
.doc-top + .doc-fold { margin-top: 16px; }
.doc-fold:active { transform: scale(0.985); }
.doc-fold i { flex: none; width: 20px; height: 20px; transition: transform var(--m-add) var(--ease-out); }
.doc-fold[aria-expanded="true"] i { transform: rotate(180deg); }
.doc-fold-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--m-add) var(--ease-out), opacity var(--m-step) ease; }
.doc-fold-body.open { grid-template-rows: 1fr; opacity: 1; }
.doc-fold-in { min-height: 0; overflow: hidden; overflow: clip; margin: 0 -6px; padding: 0 6px; }
.doc-fold-in > :first-child { margin-top: 14px; }
.doc-notes-t, textarea.doc-notes-in { font-size: var(--t-s); line-height: 1.6; color: var(--ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-notes-t { min-height: 28px; padding-left: 15px; }
.doc-notes-t.can { cursor: text; }
.doc-notes-t a, .fdx a { color: var(--focus); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* A web address inside a Library entry's text: shown short (the scheme hidden, a long one cut with an ellipsis). */
.fdx a.fd-a { display: inline-block; max-width: min(100%, 30ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.fd-sch { font-style: normal; font-size: 0; }
.doc-notes-t.is-empty::before { content: attr(data-ph); color: var(--ink3); opacity: .8; }
textarea.doc-notes-in { display: block; width: 100%; border: 0; padding: 0 0 0 15px; background: none; resize: none; overflow: hidden; outline: none; animation: dd-fade 160ms ease both; }

/* ---------- Bullets ---------- */
.lns { display: flex; flex-direction: column; min-height: 34px; }
.ln { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; border-radius: 8px; scroll-margin: 24px 0 96px; }
.ln-dot { flex: none; width: 5px; height: 5px; margin-top: 11.5px; border-radius: 50%; background: var(--ink3); transition: background-color var(--m-step) ease, transform var(--m-step) var(--ease-out), opacity var(--m-step) ease; }
.ln.on .ln-dot { background: var(--pc-d); transform: scale(1.5); }
.ln-main { flex: 1; min-width: 0; }
/* Every line of words is 28 px tall, with or without a chip in it. */
.ln-t { min-height: 28px; font-size: var(--t-m); line-height: 28px; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.ln.can .ln-t, .ln.can .ln-note { cursor: text; }
.ln-t.clamp, .ln-note.clamp, .fdx.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp, 3); line-clamp: var(--clamp, 3); overflow: hidden; }
/* The one faint empty line at the end of every list that can be typed in ("Type here"). */
.lns > .ln:last-child .ln-t.is-empty::before { content: attr(data-ph); float: left; height: 0; color: var(--ink3); opacity: .8; pointer-events: none; }
/* A line the experiment wrote: a small square in the place's colour (the patient's own lines keep the round dot). */
.doc-exp .ln-dot { width: 6px; height: 6px; margin-top: 11px; border-radius: 1.5px; background: var(--pc); }
/* Such a line picked by a tap on its words (Today): a soft ground drawn around it, nothing moves. */
.ln.picked { background: color-mix(in srgb, var(--pc-bg) 70%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc-bg) 70%, transparent); }
.ln.picked .ln-dot { transform: scale(1.35); }
.doc-exp .ln { transition: background-color var(--m-step) ease, box-shadow var(--m-step) ease; }
.ln:has(> .ln-main > .ln-t.is-empty):not(.on) .ln-dot { opacity: .45; }
.ln-more { display: block; min-height: 26px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; animation: dd-fade 200ms ease both; }
/* The note: quieter and smaller, two lines until "more". */
.ln-note { --clamp: 2; min-height: 21px; padding-bottom: 2px; font-size: var(--t-s); line-height: 21px; color: var(--ink2); white-space: pre-wrap; overflow-wrap: anywhere; outline: none; animation: dd-fade 200ms ease both; }
.ln-note.clamp { padding-bottom: 0; }
.ln-note:empty::before, .ln-note.is-empty::before { content: 'Note'; float: left; height: 0; color: var(--ink3); opacity: .8; pointer-events: none; }
.ln-meta { display: flex; margin: 2px 0 3px; }
/* A web address in a line's words or in its note (round 5): a link that opens in a new tab; the saved text stays
   plain. It is shown shortened and never breaks the 28 px line. */
.ln-a { color: var(--focus); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ln-a:active { opacity: .6; }
/* The one quiet suggestion under a line that belongs in another place (Atlas, "Move to Medicines"): plain words
   in the place's colour, no box and no fill. It is hidden while the line is typed in. */
.ln-move { display: flex; margin: -2px 0 4px; color: var(--pc-d); animation: dd-fade 240ms ease both; }
.ln.on .ln-move { display: none; }
.ln-move button { position: relative; height: 24px; color: inherit; transition: opacity var(--m-press) ease; }
.ln-move button::after { content: ''; position: absolute; inset: -10px -12px; }
.ln-move button:active { opacity: .55; }
.ln-move-go { padding: 0; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
/* A changed line flashes once in the place's colour (DD.lines.flash). The glow is a shadow, so nothing moves. */
.ln.flash { animation: dd-glow var(--m-flash) ease-out 1; }
/* A line the AI is writing again pulses softly; the new sentence then fades in. */
.ln.busy .ln-t { animation: dd-wait 1100ms ease-in-out infinite; }
.ln-t.swap { animation: dd-fade 360ms ease both; }

/* ---------- The one underline: a value inside a sentence, a marker's value, a number in a line of settings ---------- */
.lv, .fd { text-decoration-line: underline; text-decoration-thickness: var(--ul-w); text-underline-offset: var(--ul-off); text-decoration-skip-ink: none; border-radius: 4px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--m-step) ease, text-decoration-color var(--m-step) ease; }
.lv { text-decoration-color: var(--pc); }
button.lv { display: inline; font-weight: 600; color: var(--ink); }
.lv:active { background: var(--pc-bg); }
/* Underlines that just arrived (the AI read the line) fade in; a value that was just changed flashes. */
.vin .lv, .vin .fd { animation: lv-in 700ms ease both; }
@keyframes lv-in { from { text-decoration-color: transparent; } }
.lv-flash { animation: lv-flash var(--m-flash) ease-out 1; }
@keyframes lv-flash { 0%, 25% { background-color: var(--pc-bg); box-shadow: 0 0 0 3px var(--pc-bg); } 100% { background-color: transparent; box-shadow: 0 0 0 3px transparent; } }

/* ---------- Findings (Library): the same underline, coloured by tag; an overlap is a second underline below ---------- */
.fdx { font-size: var(--t-m); line-height: 28px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fdx a { text-decoration: none; }
.fd[data-tag="helped"] { text-decoration-color: var(--good); }
.fd[data-tag="nothelped"] { text-decoration-color: var(--bad); }
.fd[data-tag="worse"] { text-decoration-color: var(--bad-d); text-decoration-style: dashed; }
.fd[data-tag="totry"] { text-decoration-color: var(--try); }
.fd.fd-2 { text-underline-offset: calc(var(--ul-off) + 5px); }
.fd.dim { text-decoration-color: var(--line); }
.fd:active { background: var(--soft); }
.fd-more { margin-top: 2px; }
/* The live box: the underlines are drawn on a layer behind the box, under the very same words. */
.fd-live { position: relative; display: block; }
/* In a text box the lines sit closer than in a document, so the underlines sit closer to the words. */
.fd-mirror { --ul-off: 3px; position: absolute; inset: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; color: transparent; pointer-events: none; }
.fd-mirror .fd { transition: none; }
.fd-live > .fd-box { position: relative; display: block; width: 100%; margin: 0 !important; background: transparent !important; scrollbar-width: none; }

/* ---------- A value of an experiment line (js/ui/chips.js) ----------
   Words in the line, never a box. Round 5: no underline where a value is read or answered (Today, the experiment's
   page, a kept version): while open, a grey hint word ("hours", "1–10", "time", "mood"; Yes/No is the two words
   "Yes No", class `x`); once answered, ink (class `v`). The editor's word (`.cc.is-type`) is the same grey word,
   with no underline. A press tints the value in the place's
   colour (a shadow, so nothing moves). The recipe: wiki/frontend-experiments.md section 4.3. */
.cc { margin-left: 4px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--m-step) ease, box-shadow var(--m-step) ease; }
button.cc, .cc button { display: inline; line-height: inherit; text-align: inherit; vertical-align: baseline; }
/* The space before a value carries the gap (js/ui/lines-row.js): a space that ends a line takes no room, so a value
   that wraps onto its own line starts exactly where the words above start. */
.cc-sp { word-spacing: 4px; }
.cc-sp + .cc { margin-left: 0; }
.cc .x { color: var(--ink3); }
/* DF1: a hint that would repeat the line's words is a small icon (js/ui/chips.js). */
.cc .x-ic { display: inline-grid; place-items: center; vertical-align: -3px; }
.cc .x-ic svg { width: 18px; height: 18px; }
.cc .v { color: var(--ink); font-weight: 500; }
.cc.yn > * + * { margin-left: 12px; }
/* The words are small targets: each button is as tall as its line and takes a little room at its sides for the
   finger (nothing is drawn there; nothing above or below, or the line would count as longer than its box). */
button.cc, .cc.yn > button { position: relative; }
button.cc::after, .cc.yn > button::after { content: ''; position: absolute; inset: 0 -6px; }
.cc:active { background: var(--pc-bg); box-shadow: 0 0 0 3px var(--pc-bg); }
.cc.is-read { cursor: default; }
.cc.is-read:active { background: none; box-shadow: none; }
/* A Mood: its small face before its word. */
.cc .mood { width: 18px; height: 18px; vertical-align: -3.5px; margin-right: 5px; }
/* A value that just changed flashes once in the place's colour (the same flash as .lv-flash). */
.cc.pop { animation: lv-flash var(--m-flash) ease-out 1; }

/* ---------- Photos and files ---------- */
.ph-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 4px; }
.ph-t { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--soft); color: var(--ink2); transition: transform var(--m-press) var(--ease-out); }
.ph-t:active { transform: scale(0.95); }
.ph-t img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 260ms ease; }
.ph-t.in img { opacity: 1; }
/* A file: a chip with its name and size. */
.ph-t.doc { width: auto; max-width: 100%; height: 34px; padding: 0 11px 0 9px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 500; color: var(--ink); animation: dd-fade 200ms ease both; }
.ph-t.doc svg { flex: none; width: 16px; height: 16px; color: var(--ink2); }
.ph-t.doc span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-t.doc small { flex: none; font-size: var(--t-2xs); font-weight: 500; color: var(--ink2); }
.ph-big { max-height: 62vh; object-fit: contain; background: var(--soft); }
.ph-text { max-height: 40vh; overflow-y: auto; font-size: var(--t-s); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- The bar that floats while a bullet is edited: Photo · File · Note · Remove ---------- */
.lbar { position: fixed; left: 50%; top: 0; z-index: 46; display: flex; gap: 1px; padding: 4px; border-radius: 17px; background: var(--ink); color: var(--on-ink);
  box-shadow: 0 14px 30px -14px var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 12px) scale(0.96);
  transition: opacity 180ms ease, transform 240ms var(--ease-out), visibility 0s linear 240ms; }
.lbar.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 180ms ease, transform 240ms var(--ease-out), visibility 0s; }
.lbar button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 11px; border-radius: 13px; font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  transition: background-color var(--m-step) ease, transform var(--m-press) var(--ease-out), opacity var(--m-step) ease; }
.lbar button:active { background: rgba(125, 135, 150, .3); transform: scale(0.94); }
.lbar button[disabled] { opacity: .4; cursor: default; }
.lbar svg { flex: none; width: 16px; height: 16px; }
/* The bar stays inside the frame with the app's side gutter (js/ui/lines-bar.js sets the same measure), and on a
   narrow phone its four buttons draw closer so that "Remove" ends before the gutter. */
.lbar { max-width: calc(100% - 2 * var(--gut)); }
@media (max-width: 380px) { .lbar button { gap: 5px; padding: 0 7px; font-size: var(--t-xs); } }
/* Five buttons (the care team's Document on an Atlas entry): words only at every width, also inside the phone frame
   of a wide window, so "Remove" is never cut (fault WALK-3 #14; css/doc.css drew them closer). */
.lbar:has([data-act="doc"]:not([hidden])) button svg { display: none; }
/* While the bar shows, the page has the bar's room under its last element: the end of the page (the last entries,
   To try, Sign out) can be scrolled clear of the bar. Room at the foot moves nothing that is on screen. */
.phone:has(.lbar.on) .screen { padding-bottom: calc(var(--foot-h) + 40px + 60px); }
.phone:has(.lbar.on) .full:not(.bare) { padding-bottom: 84px; }
/* A fixed line of Today: a quiet first row, "From the experiment", over Photo · File · Note. */
.lbar.has-from { flex-wrap: wrap; justify-content: center; width: max-content; }
.lbar .lbar-from { flex: 0 0 100%; justify-content: center; gap: 2px; height: 34px; margin-bottom: 3px; font-weight: 500; color: color-mix(in srgb, var(--on-ink) 72%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--on-ink) 16%, transparent); border-radius: 13px 13px 4px 4px; }
.lbar .lbar-from svg { width: 13px; height: 13px; }

/* ---------- Value sheets ---------- */
.vs-num { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 22px; background: var(--soft); }
.vs-step { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); transition: transform var(--m-press) var(--ease-out); }
.vs-step:active, .vs-ud:active { transform: scale(0.92); }
.vs-step svg { width: 22px; height: 22px; }
.vs-val { flex: 1; min-width: 0; height: 58px; border-radius: 16px; display: inline-flex; align-items: baseline; justify-content: center; gap: 6px; line-height: 58px; overflow: hidden; }
.vs-val b { display: inline-block; font-size: var(--t-xxl); font-weight: 600; }
.vs-val b.none { color: var(--ink3); font-weight: 500; }
.vs-val small { font-size: var(--t-m); color: var(--ink2); }
.vs-in { flex: 1; min-width: 0; width: 100%; height: 58px; border: 0; border-radius: 16px; background: var(--surface); text-align: center; font-size: var(--t-xxl); font-weight: 600; color: var(--ink); outline: none; }
/* Time and duration: columns of hours and minutes, a button above and below each. */
.vs-time { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 22px; background: var(--soft); }
.vs-col { display: flex; flex-direction: column; align-items: center; gap: 2px; overflow: hidden; }
.vs-ud { width: 72px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface); transition: transform var(--m-press) var(--ease-out); }
.vs-ud svg { width: 20px; height: 20px; }
.vs-ud[data-d="1"] svg { transform: rotate(180deg); }
input.vs-tn::placeholder { color: var(--ink3); opacity: .7; }
input.vs-tn { width: 72px; height: 54px; border: 0; padding: 0; background: none; text-align: center; font-size: var(--t-xxl); font-weight: 600; color: var(--ink); outline: none; }
.vs-col small { margin-top: 4px; font-size: var(--t-sm); font-weight: 500; color: var(--ink2); }
.vs-sep { min-width: 6px; font-size: var(--t-xxl); font-weight: 600; color: var(--ink3); }
.vs-ap { flex-direction: column; margin-left: 8px; background: var(--surface); }
.vs-ap .seg-o { min-width: 58px; }
.vs-rate { display: grid; grid-template-columns: repeat(var(--n, 10), 1fr); gap: 5px; }
.vs-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.vs-r, .vs-d { height: 54px; border-radius: 13px; background: var(--soft); font-size: var(--t-m); font-weight: 600; transition: background-color var(--m-step) ease, color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.vs-d { font-size: var(--t-s); }
.vs-r:active, .vs-d:active { transform: scale(0.93); }
.vs-r[aria-pressed="true"], .vs-d[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.vs-pick { display: block; width: 100%; height: 66px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--soft); text-align: center; font-size: var(--t-xl); font-weight: 600; color: var(--ink); outline: none; }
/* The Type row of the editor's sheet for one line (js/exp/exp-line.js) and the small boxes of a measurement's sheet (js/ui/markers.js). */
.vs-types { display: flex; width: 100%; }
.vs-types .seg-o { flex: 1; min-width: 0; padding: 0 4px; }
.vs-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin-top: 14px; animation: dd-fade 200ms ease both; }
.vs-fields:empty { display: none; }
.vs-f > span { display: block; margin: 0 0 6px 4px; font-size: var(--t-sm); font-weight: 600; color: var(--ink2); }
.vs-f input.tint { height: 50px; padding: 0 12px; border-radius: 14px; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .ln.busy .ln-t { opacity: .6; }
}
/* Round 6 (zone A; js/ui/lines-end.js): the small remove sign at the end of a line of a list that asks for one
   (`removeSign`), and the quiet word a caller may put under a line (`marks` as a function). */
.ln-rm { position: relative; flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink3); transition: opacity var(--m-press) ease, transform var(--m-press) var(--ease-out); }
.ln-rm::after { content: ''; position: absolute; inset: -8px; }
.ln-rm svg { width: 13px; height: 13px; stroke-width: 2.4; }
.ln-rm:active { transform: scale(0.88); opacity: .6; }
.ln-word { font-size: var(--t-2xs); font-weight: 600; letter-spacing: .02em; color: var(--pc-d); }
.ln-meta .ln-word + .src { margin-left: 8px; }