/* src/styles/views/toolkit.css — owned by T6 (Toolkit view). Scope every rule under .view-toolkit. */

/* ── Hub: tile grid ─────────────────────────────────────────────────────────── */
.view-toolkit .tk-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap, 12px);
  margin-top: var(--s-5);
}
@media (min-width: 600px) { .view-toolkit .tk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.view-toolkit .tk-tile {
  position: relative; display: flex; flex-direction: column; gap: var(--s-1);
  min-height: 148px; padding: var(--s-4); border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.view-toolkit a.tk-tile:hover { border-color: var(--line-strong); }
.view-toolkit a.tk-tile:active { background: var(--surface-pressed); }
.view-toolkit a.tk-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.view-toolkit .tk-tile-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: auto; padding-bottom: var(--s-4); }
.view-toolkit .tk-tile-icon { color: var(--text-2); }
.view-toolkit .tk-tile-kanji { font-family: var(--font-mincho); font-size: var(--fs-caption); line-height: 1; color: var(--text-3); letter-spacing: .08em; }
.view-toolkit .tk-tile-title {
  font-family: var(--font-sans); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}
.view-toolkit .tk-tile-value {
  font-family: var(--font-sans); font-size: var(--fs-stat); line-height: var(--lh-stat); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.view-toolkit .tk-tile-zone { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-title-3); }
.view-toolkit .tk-tile-sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
.view-toolkit .tk-tile-soon { min-height: 104px; border-style: dashed; background: transparent; color: var(--text-3); }
.view-toolkit .tk-tile-soon .tk-tile-icon, .view-toolkit .tk-tile-soon .tk-tile-title { color: var(--text-3); }
.view-toolkit .tk-tile-soon .tk-tile-head { padding-bottom: var(--s-3); }
.view-toolkit .tk-grid-soon { margin-top: 0; }

/* ── Section screens ────────────────────────────────────────────────────────── */
.view-toolkit .tk-back {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; margin-left: -6px; padding-right: var(--s-3);
  font-size: var(--fs-small); font-weight: 500; color: var(--text-2); text-decoration: none;
}
.view-toolkit .tk-back:hover { color: var(--text); }
.view-toolkit .tk-section .page-head { margin-top: 0; }

/* ── Before you go ──────────────────────────────────────────────────────────── */
.view-toolkit .tk-progress { display: grid; gap: var(--s-2); margin: var(--s-5) 0 var(--s-3); }
.view-toolkit .tk-progress-count { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.view-toolkit .tk-progress-bar { position: relative; height: 2px; background: var(--line); overflow: hidden; }
.view-toolkit .tk-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--text); transition: width var(--dur-2) var(--ease-out); }

.view-toolkit .tk-todos { list-style: none; margin: 0; padding: 0; }
.view-toolkit .tk-todo { padding: var(--s-2) 0 var(--s-3); border-top: 1px solid var(--line); }
.view-toolkit .tk-todo:last-child { border-bottom: 1px solid var(--line); }
.view-toolkit .tk-todo .checkbox-label { font-weight: 500; }
.view-toolkit .tk-todo.is-done .checkbox-label { color: var(--text-3); font-weight: 400; }
.view-toolkit .tk-todo-due:empty { display: none; }
.view-toolkit .tk-due {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.view-toolkit .tk-due.is-overdue, .view-toolkit .tk-due.is-today { color: var(--accent-text); font-weight: 600; }
.view-toolkit .tk-todo-more { padding-left: 36px; display: grid; gap: var(--s-2); }
.view-toolkit .tk-todo-note { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); max-width: 60ch; }
.view-toolkit .tk-todo.is-done .tk-todo-note { color: var(--text-3); }
.view-toolkit .tk-todo-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.view-toolkit .tk-todo-links:empty { display: none; }
.view-toolkit .tk-todo-links .link-ext,
.view-toolkit .tk-daylink { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); }
.view-toolkit .tk-daylink { color: var(--text-2); text-decoration: none; }
.view-toolkit .tk-daylink:hover { color: var(--text); }

/* ── Gaps ───────────────────────────────────────────────────────────────────── */
.view-toolkit .tk-gap-group { margin-top: var(--s-5); }
.view-toolkit .tk-gap-date {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px; margin: 0;
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--line-strong);
}
.view-toolkit a.tk-gap-date:hover { color: var(--text); }
.view-toolkit .tk-gap-chev { margin-left: auto; color: var(--text-3); }
.view-toolkit .tk-gap-list { list-style: none; margin: 0; padding: 0; }
.view-toolkit .tk-gap {
  display: flex; align-items: baseline; gap: var(--s-3); padding: 10px 0;
  font-size: var(--fs-body); line-height: var(--lh-body); border-bottom: 1px solid var(--line);
}
.view-toolkit .tk-gap-mark { flex-shrink: 0; width: 14px; border-bottom: 1.5px dashed var(--text-3); transform: translateY(-5px); }

/* ── Emergency ──────────────────────────────────────────────────────────────── */
.view-toolkit .tk-sos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap, 12px); margin: var(--s-5) 0 var(--s-3); }
.view-toolkit .tk-sos-btn {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1); min-height: 132px; padding: var(--s-4);
  border-radius: var(--r-3); background: var(--text); color: var(--surface); text-decoration: none;
}
.view-toolkit .tk-sos-btn:active { opacity: .85; }
.view-toolkit .tk-sos-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.view-toolkit .tk-sos-number { font-family: var(--font-sans); font-weight: 600; font-size: 56px; line-height: 56px; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.view-toolkit .tk-sos-label { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; opacity: .8; }
.view-toolkit .tk-section-emergency .note { margin-top: var(--s-2); }

.view-toolkit .tk-calls { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.view-toolkit .tk-call-item { border-bottom: 1px solid var(--line); }
.view-toolkit .tk-call {
  display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-2) 0;
  color: var(--text); text-decoration: none;
}
.view-toolkit .tk-call:active { background: var(--surface-pressed); }
.view-toolkit .tk-call:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }
.view-toolkit .tk-call-glyph {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--text-2);
}
.view-toolkit .tk-call-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.view-toolkit .tk-call-label { font-size: var(--fs-body); line-height: 22px; font-weight: 600; }
.view-toolkit .tk-call-sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
.view-toolkit .tk-call-number {
  flex-shrink: 0; font-size: var(--fs-time); line-height: var(--lh-time); font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.view-toolkit .tk-call-note { margin: -4px 0 var(--s-3) 52px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); max-width: 60ch; }
.view-toolkit .tk-inline-tel { color: var(--text-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (max-width: 399px) {
  .view-toolkit .tk-call { flex-wrap: wrap; }
  .view-toolkit .tk-call-number { margin-left: 52px; margin-top: -6px; }
}

/* ── Clocks ─────────────────────────────────────────────────────────────────── */
.view-toolkit .tk-clocks { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--line); }
.view-toolkit .tk-clock {
  display: flex; align-items: center; gap: var(--s-3); min-height: 72px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line);
}
.view-toolkit .tk-clock-glyph { flex-shrink: 0; display: grid; place-items: center; width: 28px; color: var(--text-3); }
.view-toolkit .tk-clock-city { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-2); }
.view-toolkit .tk-clock-name { font-family: var(--font-serif); font-size: 20px; line-height: 26px; }
.view-toolkit .tk-here { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.view-toolkit .tk-here[hidden] { display: none; }
.view-toolkit .tk-here-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.view-toolkit .tk-clock-right { display: grid; justify-items: end; gap: 2px; }
.view-toolkit .tk-clock-time { font-family: var(--font-sans); font-weight: 600; font-size: 28px; line-height: 32px; font-variant-numeric: tabular-nums lining-nums; }
.view-toolkit .tk-clock-offset { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }

/* ── Taxi cards ─────────────────────────────────────────────────────────────── */
.view-toolkit .tk-taxis { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--card-gap, 12px); }
.view-toolkit .tk-taxi {
  width: 100%; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); color: var(--text); font: inherit; cursor: pointer;
}
.view-toolkit .tk-taxi:hover { border-color: var(--line-strong); }
.view-toolkit .tk-taxi:active { background: var(--surface-pressed); }
.view-toolkit .tk-taxi:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.view-toolkit .tk-taxi-main { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--s-1); }
.view-toolkit .tk-taxi-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }
.view-toolkit .tk-taxi-name { font-family: var(--font-serif); font-size: var(--fs-title-3); line-height: var(--lh-title-3); }
.view-toolkit .tk-taxi-ja { font-size: var(--fs-jp-body); line-height: var(--lh-jp-body); color: var(--text-2); overflow-wrap: anywhere; }
.view-toolkit .tk-taxi-open {
  flex-shrink: 0; display: grid; justify-items: center; gap: 2px; min-width: 56px; padding: var(--s-2);
  border-radius: var(--r-2); background: var(--text); color: var(--surface);
  font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; letter-spacing: .04em;
}

/* ── Good to know ───────────────────────────────────────────────────────────── */
.view-toolkit .tk-knows { display: grid; gap: var(--card-gap, 12px); margin-top: var(--s-5); }
.view-toolkit .tk-know { display: grid; gap: var(--s-3); }
.view-toolkit .tk-know-title { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 22px; font-weight: 600; }
.view-toolkit .tk-know-title .icon { flex-shrink: 0; margin-top: 2px; color: var(--text-2); }
.view-toolkit .tk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.view-toolkit .tk-stat { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-2); background: var(--surface-inset); }
.view-toolkit .tk-stat-value { font-size: var(--fs-stat); line-height: var(--lh-stat); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.view-toolkit .tk-stat-label { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); }
.view-toolkit .tk-know-body { margin: 0; font-size: var(--fs-small); line-height: 22px; color: var(--text-2); max-width: 64ch; }
.view-toolkit .tk-know-link { margin: 0; }
.view-toolkit .tk-know-link .link-ext { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); }

/* ── Settings ───────────────────────────────────────────────────────────────── */
.view-toolkit .tk-settings { margin-top: var(--s-5); padding-block: 0; }
.view-toolkit .tk-setting { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); padding: var(--s-4) 0; }
.view-toolkit .tk-setting + .tk-setting { border-top: 1px solid var(--line); }
.view-toolkit .tk-setting-text { flex: 1 1 180px; min-width: 0; }
.view-toolkit .tk-setting-title { margin: 0; font-size: var(--fs-body); line-height: 22px; font-weight: 600; }
.view-toolkit .tk-setting-sub { margin: 2px 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
.view-toolkit .tk-setting-control { flex: 0 0 auto; }
.view-toolkit .tk-data-line { margin: var(--s-4) 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }

/* ── Desktop ────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .view-toolkit .tk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .view-toolkit .tk-knows { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .view-toolkit .tk-taxis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .view-toolkit .tk-tile, .view-toolkit .tk-progress-fill { transition: none; }
}
/* Inline numbers inside notes: enlarge the hit area to 44px without moving the text. */
.view-toolkit .tk-inline-tel { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* ── Currency ───────────────────────────────────────────────────────────────── */
.view-toolkit .tk-fx { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.view-toolkit .tk-fx-stack { display: flex; align-items: center; gap: var(--s-3); }
.view-toolkit .tk-fx-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.view-toolkit .tk-fx-rows.is-flipped { flex-direction: column-reverse; }
.view-toolkit .tk-fx-row {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-inset);
}
.view-toolkit .tk-fx-row:focus-within { border-color: var(--line-strong); }
.view-toolkit .tk-fx-cur { flex-shrink: 0; display: grid; gap: 1px; min-width: 44px; }
.view-toolkit .tk-fx-code { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: .08em; }
.view-toolkit .tk-fx-name { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-3); }
.view-toolkit .tk-fx-amount {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-stat); line-height: var(--lh-stat); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; text-align: right; padding: var(--s-1) 0;
}
.view-toolkit .tk-fx-amount:focus { outline: none; }
.view-toolkit .tk-fx-swap { flex-shrink: 0; flex-direction: column; gap: 0; }
.view-toolkit .tk-fx-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.view-toolkit .tk-fx-chip {
  min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font: 500 var(--fs-small)/1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums; cursor: pointer;
}
.view-toolkit .tk-fx-chip:hover { border-color: var(--line-strong); color: var(--text); }
.view-toolkit .tk-fx-chip:active { background: var(--surface-pressed); }
.view-toolkit .tk-fx-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.view-toolkit .tk-fx-caption { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }

/* ── Phrasebook ─────────────────────────────────────────────────────────────── */
.view-toolkit .tk-phrase-group { margin-top: var(--s-6); }
.view-toolkit .tk-phrases { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.view-toolkit .tk-phrase { display: flex; align-items: stretch; gap: var(--s-1); border-bottom: 1px solid var(--line); }
.view-toolkit .tk-phrase-star, .view-toolkit .tk-phrase-speak {
  flex-shrink: 0; display: grid; place-items: center; width: 44px; min-height: 44px;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
}
.view-toolkit .tk-phrase-star:hover, .view-toolkit .tk-phrase-speak:hover { color: var(--text); }
.view-toolkit .tk-phrase-star.is-on { color: var(--text); }
.view-toolkit .tk-phrase-star.is-on .icon { fill: currentColor; }
.view-toolkit .tk-phrase-star:focus-visible, .view-toolkit .tk-phrase-speak:focus-visible,
.view-toolkit .tk-phrase-main:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.view-toolkit .tk-phrase-main {
  flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; padding: var(--s-3) 0; text-align: left;
  border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.view-toolkit .tk-phrase-main:active { background: var(--surface-pressed); }
.view-toolkit .tk-phrase-en { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.view-toolkit .tk-phrase-ja { font-size: var(--fs-jp-body); line-height: var(--lh-jp-body); }
.view-toolkit .tk-phrase-romaji { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }

/* Phrase show-card: reuses .showcard; romaji sits under the big Japanese. */
.tk-phrasecard .showcard-name { font-family: var(--font-jp); }
.tk-phrasecard-romaji { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-title-3); line-height: var(--lh-title-3); color: var(--show-text-2); }
.tk-phrasecard.is-inverted .tk-phrasecard-romaji { color: var(--show-line); }
.tk-phrasecard-spacer { width: 44px; }

/* ── Notes ──────────────────────────────────────────────────────────────────── */
.view-toolkit .tk-note-add { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.view-toolkit .tk-note-input {
  width: 100%; resize: vertical; min-height: 72px; padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-inset); color: var(--text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
}
.view-toolkit .tk-note-input:focus { outline: none; border-color: var(--line-strong); }
.view-toolkit .tk-note-addrow { display: flex; justify-content: flex-end; }
.view-toolkit .tk-note-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--line); }
.view-toolkit .tk-note-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.view-toolkit .tk-note-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.view-toolkit .tk-note-at { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }
.view-toolkit .tk-note-del {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -14px -10px;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
}
.view-toolkit .tk-note-del:hover { color: var(--text); }
.view-toolkit .tk-note-del:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.view-toolkit .tk-note-text { margin: var(--s-1) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 64ch; }

/* ── Calendar export ────────────────────────────────────────────────────────── */
.view-toolkit .tk-cal { margin-top: var(--s-5); display: grid; justify-items: start; gap: var(--s-3); }
.view-toolkit .tk-cal-counts { margin: 0; font-size: var(--fs-stat); line-height: var(--lh-stat); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.view-toolkit .tk-cal-sub { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); max-width: 52ch; }
.view-toolkit .tk-cal-ios { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }

/* ── Offline status (the Ready page) ───────────────────────────────────────── */
/* Verdict + the three checks in one card; versions and caches below; the device controls last, apart. */
.view-toolkit .tk-ready { margin-top: var(--s-5); padding-block: var(--s-5) var(--s-2); }
.view-toolkit .tk-verdict { display: flex; align-items: flex-start; gap: var(--s-3); padding-bottom: var(--s-4); }
.view-toolkit .tk-verdict-mark { flex: 0 0 auto; padding-top: 2px; }
.view-toolkit .tk-verdict-text { min-width: 0; }
.view-toolkit .tk-verdict-title {
  margin: 0; font: 500 var(--fs-title-2)/var(--lh-title-2) var(--font-serif); letter-spacing: -.01em; color: var(--text);
}
.view-toolkit .tk-verdict-detail { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.view-toolkit .tk-ready.is-not-ready .tk-verdict-title { color: var(--accent-text); }
.view-toolkit .tk-ready.is-checking .tk-verdict-title,
.view-toolkit .tk-ready.is-dev .tk-verdict-title { color: var(--text-2); }

.view-toolkit .tk-checks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.view-toolkit .tk-check { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; }
.view-toolkit .tk-check + .tk-check { border-top: 1px solid var(--line); }
.view-toolkit .tk-check .tk-mark { margin-top: 1px; }
.view-toolkit .tk-check-text { display: grid; gap: 2px; min-width: 0; }
.view-toolkit .tk-check-label { font-size: var(--fs-body); line-height: 22px; font-weight: 600; }
.view-toolkit .tk-check-detail { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }
.view-toolkit .tk-check.is-bad .tk-check-detail { color: var(--text-2); }

/* Round mark: filled sumi disc with a tick (ok), shu ring with a cross (missing), plain ring while checking.
   The dev copy's marks stay neutral: missing there is expected, not an alarm. */
.view-toolkit .tk-mark {
  --mark: 24px;
  display: grid; place-items: center; flex: 0 0 auto; width: var(--mark); height: var(--mark); border-radius: 50%;
  border: 1.5px solid var(--line-strong); color: var(--text-3); background: transparent;
}
.view-toolkit .tk-mark.is-ok { background: var(--text); border-color: var(--text); color: var(--surface); }
.view-toolkit .tk-mark.is-bad { border-color: var(--accent-text); color: var(--accent-text); }
.view-toolkit .tk-ready.is-dev .tk-mark.is-bad { border-color: var(--line-strong); color: var(--text-3); }
.view-toolkit .tk-mark .icon { stroke-width: 2.25; }

.view-toolkit.tk-section-offline > .note { margin-top: var(--s-4); }
.view-toolkit .tk-off { margin-top: 0; padding-block: var(--s-2); }
.view-toolkit .tk-off-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.view-toolkit .tk-off-row:last-child { border-bottom: 0; }
.view-toolkit .tk-off-label { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.view-toolkit .tk-off-cell { display: grid; justify-items: end; gap: 2px; text-align: right; min-width: 0; }
.view-toolkit .tk-off-value { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.view-toolkit .tk-off-sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); }
.view-toolkit .tk-off-sub:empty { display: none; }
.view-toolkit .tk-off-actions { margin-top: var(--section-gap); padding-block: 0; }