/* pocket/web-v2/css/today.css — TODAY (P01, design §4.1, §10). Visual target: prototype/head.html,
   the `.col` / `.ask` / `.rcpt` / `.rows` / `.tonight` family, drawn through the kit tokens. Every
   colour is a token (tokens.css, both themes); every class is prefixed `td-` so no rule can reach
   another page's markup or a document a sheet renders. Touch targets are 44px, inputs 16px (iOS zoom). */

.td-body, .td-layer, .td-lede-box, .td-rcpts { display: block; }
.td-layer:empty { display: none; }
.td-root { padding-top: 40px; }

.td-eyebrow { font-size: 13px; color: var(--ink3); }
.td-h1 {
  font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 350;
  font-size: 42px; line-height: 1.08; letter-spacing: -.018em; margin: 4px 0 0; color: var(--ink);
}
.td-lede { font-size: 17px; line-height: 1.6; color: var(--ink2); margin: 14px 0 0; max-width: 60ch; }

.td-sec { margin: 0; }
.td-sh { display: flex; align-items: center; gap: 12px; margin: 44px 0 10px; min-height: 32px; }
.td-sh h2 { font-size: 13px; font-weight: 600; color: var(--ink3); margin: 0; flex: 1; letter-spacing: .01em; }

.td-door, .td-tl, .td-navb, .td-proj, .td-brief-open {
  background: none; border: 0; color: var(--ink3); font-size: 13.5px; cursor: pointer;
  min-height: 44px; padding: 0 8px; font-family: inherit;
}
.td-door:hover, .td-tl:hover, .td-navb:hover, .td-proj:hover, .td-brief-open:hover { color: var(--ink); }
.td-proj { color: var(--ink); font-weight: 500; padding: 0; min-height: 32px; }
.td-navb { width: 32px; padding: 0; min-height: 32px; font-size: 18px; border-radius: 8px; }
.td-navb:hover { background: var(--sunk); }

.td-setup, .td-brief, .td-fold {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px;
  padding: 4px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  font-size: 14.5px; color: var(--ink2);
}
.td-setup { border-color: var(--you); }
/* the body's own health (rel139): a stopped clock or a stale CLI — a line, never a button */
.td-health { color: var(--ink); padding-top: 10px; padding-bottom: 10px; }
.td-setup-t, .td-brief-t { flex: 1; min-width: 0; }
.td-brief-open { flex: 1; text-align: left; color: var(--ink); font-size: 14.5px; padding: 0; }
.td-fold { border-style: dashed; background: none; color: var(--ink3); }

/* the hold receipt */
.td-rcpt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 14.5px; color: var(--ink2);
  padding: 4px 0; border-bottom: 1px solid var(--line);
}
.td-ck { color: var(--done); }
/* the decision reads whole: it takes the row and wraps; the timer and the two doors wrap below it on a
   phone instead of squeezing it to two words */
.td-rcpt-t { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.td-rcpt-t b { color: var(--ink); font-weight: 600; }
.td-left { font-size: 13px; color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the ask card */
.td-ask {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh);
  padding: 22px 24px 18px; margin-top: 6px; animation: pk-in .3s ease-out both;
}
.td-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 2px; font-size: 13px; color: var(--ink3); }
.td-top > * { white-space: nowrap; }
.td-kind { color: var(--you); font-weight: 500; }
.td-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.td-pos { padding: 0 6px; font-variant-numeric: tabular-nums; }
.td-q {
  font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 40; font-weight: 400;
  font-size: 25px; line-height: 1.25; color: var(--ink); margin: 10px 0 0; letter-spacing: -.005em;
}
.td-q[data-long] { font-size: 20px; }
.td-mine { margin: 14px 0 0; font-size: 15px; color: var(--ink); display: flex; gap: 10px; }
.td-mine::before { content: "✦"; color: var(--you); }
.td-ctx { margin: 8px 0 0; font-size: 15px; color: var(--ink2); }
.td-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.td-sp { flex: 1; }
/* the trailing text links (Later / Read the full note / Revise / Discuss) as ONE flex item, so
   they wrap as a group instead of splitting off one at a time — his report: with the Russian
   strings in force, the Discuss link's own translation orphaned alone on its own line while its
   siblings still fit above it (the word itself lives only in lang/ru.js). */
.td-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 390px) {
  .td-links { flex-basis: 100%; justify-content: flex-start; margin-top: 4px; }
}

.td-chip {
  min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
  transition: border-color .15s;
}
.td-chip:hover { border-color: var(--ink4); }
.td-chip.td-pri { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.td-chip.td-plain { background: var(--card); color: var(--ink); }
.td-chip.td-small { min-height: 44px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.td-chip.td-danger { color: var(--you); border-color: var(--you); }
/* the note beside a choice — its OWN line under just that button (his report: it read as one
   pill in two typefaces; not the card-level `.td-mine` ✦ line above every button — this is
   per-choice, prototype's other named placement). */
.td-chip-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.td-chip-note { font-size: 12px; color: var(--ink3); padding: 0 2px; }
/* the EXAMPLE under a choice (board line 12, 2026-09-28): one concrete outcome in the option's own
   words — the same quiet line as the note, set apart from it only by voice, never by weight. */
.td-chip-example { font-size: 12px; color: var(--ink3); padding: 0 2px; font-style: italic; }
.td-chip:focus-visible, .td-door:focus-visible, .td-tl:focus-visible, .td-stop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.td-laters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.td-in {
  flex: 1; min-width: 160px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); padding: 0 12px; font-size: 16px; color: var(--ink); outline: 0; font-family: inherit;
}
.td-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.td-clear { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: 22px; color: var(--ink2); padding: 18px 0; }
.td-quiet { margin: 6px 0; font-size: 15px; color: var(--ink3); }

/* Moving now */
.td-rows { border-top: 1px solid var(--line); }
.td-flight { border-bottom: 1px solid var(--line); }
.td-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 6px 4px; }
.td-row-t { background: none; border: 0; text-align: left; font-size: 15px; color: var(--ink); min-height: 44px; padding: 0; cursor: pointer; font-family: inherit; }
.td-row-n { display: block; }
.td-sub { display: block; font-size: 13px; color: var(--ink3); margin-top: 1px; }
.td-r { font-size: 13px; color: var(--ink3); white-space: nowrap; }
.td-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink4); display: inline-block; flex-shrink: 0; position: relative; }
.td-dot.td-you { background: var(--you); }
.td-dot.td-pulse { background: var(--run); }
.td-dot.td-pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--run); opacity: .25;
  animation: td-breathe 2s ease-in-out infinite;
}
@keyframes td-breathe { 0%, 100% { transform: scale(.8); opacity: .12; } 50% { transform: scale(1.15); opacity: .3; } }
.td-stop {
  min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; color: var(--ink2); cursor: pointer; font-family: inherit;
}
.td-stop:hover { color: var(--you); border-color: var(--you); }
.td-worker {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  background: none; border: 0; text-align: left; padding: 4px 4px 4px 26px; min-height: 44px; font-size: 13.5px;
  color: var(--ink2); cursor: pointer; font-family: inherit;
}
.td-worker:hover { background: var(--sunk); }
.td-wn { color: var(--ink3); font-variant-numeric: tabular-nums; }
.td-wt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tonight */
.td-tonight { font-size: 15px; color: var(--ink2); }
.td-job { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.td-jn { color: var(--ink); }

/* the only-you sheet */
.td-pop-scrim {
  position: fixed; inset: 0; z-index: 35; border: 0; padding: 0; cursor: default;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.td-pop {
  position: fixed; z-index: 36; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 520px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: auto;
  background: var(--card); border-radius: 24px; box-shadow: var(--shl); padding: 24px 24px 18px;
}
.td-pop-q {
  font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 60; font-weight: 350;
  font-size: 26px; line-height: 1.2; margin: 6px 0 0; color: var(--ink);
}

/* the act the sheet carries: name, the command in a box he can select, then Copy / Open */
.td-act { margin: 16px 0 0; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--sunk); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.td-act-t { font-size: 13px; color: var(--ink3); }
.td-act-cmd {
  margin: 0; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.45; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text;
}
.td-act-note { margin: 0; font-size: 13px; color: var(--ink3); }

@media (max-width: 600px) {
  .td-root { padding-top: 28px; }
  .td-h1 { font-size: 34px; }
  .td-lede { font-size: 16px; }
  .td-ask { padding: 18px 18px 14px; border-radius: 20px; }
  .td-q { font-size: 22px; }
  .td-sh { margin-top: 38px; }
  .td-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .td-row > .td-r { display: none; }
}