/* castoMIND — only what castomo-dashkit does not already draw.
   Everything else — the shell, cards, lists, forms, badges, tables, meters,
   dialogs, the assistant and the drawings — is the kit's (public/dashkit),
   in castoMIND's theme (teal and coral) and its Occupation art.
   Every value here is a kit token; the one exception is the brand stage's
   preview, whose colours are the brand's own data (views/brand.js says why). */

/* ---------- Sign in ---------- */
.auth-title { font-size: var(--t3); }
/* The welcome words and the sign-in button are two separate beats: a clear pause between them. */
.auth-card > .stack-sm + * { margin-top: var(--s3); }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s0); }

/* ---------- Page furniture ---------- */
/* The page's rhythm (GUIDELINES §0.18): a screen puts its blocks straight into
   #view, so one rule spaces them all — every block one gap below the one
   before. Vertical margins collapse in block flow, so a block that asks for
   more (a kit `.section`, a section of tiles) gets exactly that, never the sum. */
#view > * + * { margin-top: var(--gap); }
#view > * + .section { margin-top: var(--s5); }
/* A section of tiles is set off by more than the gap between its own tiles,
   on both sides, or the block after it reads as one more tile. */
#view > * + .tile-section, #view > .tile-section + * { margin-top: var(--s4); }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); color: var(--ink-3); }
.muted { color: var(--ink-3); font-weight: 500; }
.form-group { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: var(--rule-w) solid var(--rule); }
.form-group > legend { float: left; width: 100%; margin-bottom: var(--s0); font-weight: 700; }
.form-group > legend + * { clear: both; }
/* Save stays in reach at the foot of a long stage form. */
.form-actions { position: sticky; bottom: var(--s2); z-index: 2; padding: var(--s1); border-radius: var(--radius-card); background: color-mix(in oklab, var(--paper) 86%, transparent); backdrop-filter: blur(8px); width: fit-content; max-width: 100%; }
.bullets { display: grid; gap: var(--s-1); padding-inline-start: var(--s3); color: var(--ink-2); }
.noscript { padding: var(--s4); text-align: center; }
.settings-stack { max-width: 880px; }
/* A page's tabs inside a grid would otherwise be as wide as the whole tab row,
   which never wraps: at zero the row scrolls inside itself, as the kit means it to. */
.page-tabs { min-width: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); }
.section-head h2 { font-size: var(--t2); }
.block-title { display: flex; align-items: center; gap: var(--s0); font-size: var(--t2); }
.block-title .ci { --ci-size: 20px; color: var(--accent-ink); }
/* A step's one action names the step in full; on a phone it wraps inside its button (§0.14). */
@media (max-width: 640px) {
  .steps .btn { max-width: 100%; white-space: normal; text-align: start; padding-block: 8px; }
}

/* ---------- Lists with actions ---------- */
.list > li { flex-wrap: wrap; }
.list > li > .btn-row { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .list > li > .btn-row { flex-basis: 100%; justify-content: flex-start; padding-inline-start: 0; }
}

/* ---------- Disclosure ---------- */
.disclosure summary { width: fit-content; min-height: 44px; display: flex; align-items: center; color: var(--accent-ink); font-size: var(--t-1); font-weight: 650; cursor: pointer; }
.disclosure[open] summary { margin-bottom: var(--s0); }

/* ---------- Ideas: the hand-off from castomind.com ---------- */
.handoff:empty { display: none; }
.handoff-busy { display: flex; flex-direction: row; align-items: center; gap: var(--s3); }
.handoff-busy dk-art { --art-size: 132px; }
@media (max-width: 560px) { .handoff-busy { flex-direction: column; align-items: flex-start; gap: var(--s1); } }

/* ---------- Ideas: the idea in hand ---------- */
.idea-words { max-width: var(--measure); color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.idea-words + .meter { margin-top: var(--s2); }
.meter + .steps { margin-top: var(--s2); }
.task-list > li { align-items: flex-start; }
.task-check { padding-top: 2px; min-height: 44px; }
.task-new { margin-top: var(--s2); padding-top: var(--s1); border-top: var(--rule-w) solid var(--rule); }

/* ---------- Tiles: ideas, and the things Build and Launch make ----------
   One tile shape for a collection (GUIDELINES §5e): a head (icon and badges),
   a title, what it is, where it stands, and its actions on the foot — so a
   row of tiles lines up its buttons whatever the length of the words above.
   A status reads from the tile's top edge as well as its badge (never colour
   alone: the badge says it in words). */
.itile-grid, .ttile-grid { align-items: stretch; }
.itile, .ttile {
  --tone: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--s3) var(--s2);
  overflow: clip;
  min-width: 0;
}
.itile::before, .ttile::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tone); }
@media (max-width: 560px) { .itile, .ttile { padding: var(--s2); } }
.itile-head, .ttile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s1); min-width: 0; }
.itile-icon, .ttile-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-ink); }
.itile-icon .ci, .ttile-icon .ci { --ci-size: 22px; }
.itile-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; }
.itile-title, .ttile-title { margin-top: var(--s0); font-size: var(--t1); line-height: 1.3; overflow-wrap: anywhere; }
.itile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.itile-words, .ttile-what { color: var(--ink-2); overflow-wrap: anywhere; }
.itile-words { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.itile-progress { display: grid; gap: 6px; }
.itile-progress .meter-top { color: var(--ink-2); font-size: var(--t-1); }
.itile-progress .meter-track { height: 6px; }
.itile-foot, .ttile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); margin-top: auto; padding-top: var(--s1); border-top: var(--rule-w) solid var(--rule); }
.itile-foot { justify-content: flex-end; }
.itile[data-current="true"] { --tone: var(--accent-ink); }
.ttile-state { display: grid; gap: var(--s0); color: var(--ink); }
.ttile-state p { margin: 0; overflow-wrap: anywhere; }
.ttile-state a { font-weight: 650; }
.ttile[data-status="available"] { --tone: var(--accent-ink); }
.ttile[data-status="making"] { --tone: var(--info); }
.ttile[data-status="ready"] { --tone: var(--ok); }
.ttile[data-status="failed"] { --tone: var(--bad); }
.ttile[data-status="unknown"] { --tone: var(--warn); }
/* What is not here yet or not switched on stays flat: nothing to press, nothing to wait for. */
.ttile:is([data-status="later"], [data-status="off"]) { box-shadow: none; background: var(--paper-2); border: var(--rule-w) dashed var(--rule-strong); }
.ttile:is([data-status="later"], [data-status="off"]) .ttile-icon { background: var(--field); color: var(--ink-3); }
.ttile:is([data-status="later"], [data-status="off"]) .ttile-state { color: var(--ink-2); }
/* A made thing's snippet, address or key, and the button that copies it. */
.copy-field { display: grid; gap: 4px; min-width: 0; }
.copy-field small { color: var(--ink-3); font-size: var(--t-1); font-weight: 600; }
.copy-row { display: flex; gap: var(--s0); align-items: center; min-width: 0; }
.copy-row .input { flex: 1; min-width: 0; }
.copy-value { flex: 1; min-width: 0; padding: 6px var(--s1); border-radius: var(--radius-sm); background: var(--field); font-size: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runs-line { margin: 0; }
.build-flash:empty { display: none; }
/* No hole in the last row (§0.13): a last tile alone in a three-column row takes the row, a pair shares it. */
@media (min-width: 861px) {
  :is(.itile-grid, .ttile-grid, .name-grid, .agent-grid, .number-grid, .plan-grid).cols-3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  :is(.itile-grid, .ttile-grid, .name-grid, .agent-grid, .number-grid, .plan-grid).cols-3 > :last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* ---------- A stage: the head, the job, the versions ---------- */
.stage-meta .btn { margin-inline-start: auto; }
@media (max-width: 560px) { .stage-meta .btn { margin-inline-start: 0; } }
.job-card { display: flex; flex-direction: row; align-items: center; gap: var(--s3); }
.job-card dk-art { --art-size: 150px; }
.job-words { flex: 1; min-width: 0; }
@media (max-width: 560px) { .job-card { flex-direction: column; align-items: flex-start; gap: var(--s1); } .job-card dk-art { --art-size: 120px; } }
/* Work under way with no end the page can know: a band that travels, never a percentage it would invent. */
.job-bar { position: relative; height: 6px; margin-top: var(--s1); border-radius: var(--radius-pill); background: var(--field); overflow: hidden; }
.job-bar > span { position: absolute; inset-block: 0; inset-inline-start: 0; width: 38%; border-radius: inherit; background: var(--accent); animation: cm-travel 1.6s var(--ease) infinite; }
@keyframes cm-travel { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
:root[dir="rtl"] .job-bar > span { animation-name: cm-travel-rtl; }
@keyframes cm-travel-rtl { from { transform: translateX(100%); } to { transform: translateX(-270%); } }
@media (prefers-reduced-motion: reduce) { .job-bar > span { animation: none; width: 100%; opacity: .45; } }
:root[data-motion="reduce"] .job-bar > span { animation: none; width: 100%; opacity: .45; }
.version-list > li[data-current="true"] { background: var(--accent-wash); border-radius: var(--radius-control); }
.version-list .list-main b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Reading a stage: prose at a readable measure, small headings with their icon. */
.stage-read { display: grid; gap: var(--gap); }
.prose-stack { display: grid; gap: var(--s3); }
.prose-block { display: grid; gap: var(--s0); max-width: var(--measure); }
.prose-block h3 { display: flex; align-items: center; gap: var(--s0); font-size: var(--t0); }
.prose-block h3 .ci { --ci-size: 18px; color: var(--accent-ink); }
.prose-block p { margin: 0; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.read-back-text { max-width: var(--measure); font-size: var(--t1); line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
/* What could kill it is tinted, not edged: a side border on a rounded card reads as a crease. */
.risk-card { background: color-mix(in oklab, var(--warn) 8%, var(--paper-2)); }
.risk-card .bullets li::marker { color: var(--warn); }
.plan-tile { display: grid; align-content: start; gap: var(--s0); min-width: 0; }
.plan-tile h3 { font-size: var(--t1); overflow-wrap: anywhere; }
.plan-price { margin: 0; color: var(--accent-ink); font-size: var(--t2); font-weight: 750; overflow-wrap: anywhere; }
.number-grid { list-style: none; margin: 0; padding: 0; }
.number-tile { display: grid; align-content: start; gap: 4px; min-width: 0; }
.number-tile b { overflow-wrap: anywhere; }
.number-tile p { margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.number-index { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 750; font-size: var(--t-1); }

/* Editing a stage: a repeated group is a row with its own head and Remove. */
.stage-edit .textarea { min-height: 0; }
.repeater { display: grid; gap: var(--s1); }
.repeater-list { display: grid; gap: var(--s2); }
.repeater-row { display: grid; gap: var(--s1); min-width: 0; margin: 0; padding: var(--s2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius-control); background: var(--paper-2); }
.repeater-head { display: flex; align-items: center; gap: var(--s1); }
.repeater-title { flex: 1; min-width: 0; }
.repeater-head .icon-btn { min-width: 44px; min-height: 44px; }

/* ---------- Name ---------- */
.name-reason { margin: 0; max-width: var(--measure); color: var(--ink-2); }
.name-reason b { color: var(--ink); }
.name-tile { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.name-tile[data-chosen="true"] { box-shadow: 0 0 0 2px var(--ok), var(--shadow-pop); }
.name-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s0); }
.name-word { font-size: var(--t2); line-height: 1.2; overflow-wrap: anywhere; }
.name-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.name-tagline { margin: 0; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.name-why { margin: 0; color: var(--ink-2); font-size: var(--t-1); overflow-wrap: anywhere; }
.domains { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.domain { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s1); padding: 6px var(--s1); border-radius: var(--radius-sm); background: var(--field); }
.domain-name { font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.domain .badge { white-space: normal; text-align: start; }
.name-handle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; color: var(--ink-2); }
.name-handle .ci { --ci-size: 16px; }
.name-handle small { color: var(--ink-3); font-size: var(--t-2); font-style: italic; }
.name-foot { margin-top: auto; padding-top: var(--s1); border-top: var(--rule-w) solid var(--rule); }
.name-foot .hint { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ok); font-weight: 650; }
.domains-note { display: flex; gap: var(--s0); align-items: flex-start; max-width: var(--measure); }
.domains-note .ci, .team-note .ci { --ci-size: 18px; flex: none; margin-top: 2px; }

/* ---------- Brand ---------- */
.swatch-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); margin: 0 0 var(--s2); padding: 0; list-style: none; }
@media (max-width: 420px) { .swatch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swatch-tile { display: grid; gap: 4px; min-width: 0; }
.swatch-chip { display: block; height: 64px; border-radius: var(--radius-control); background: var(--swatch); box-shadow: inset 0 0 0 var(--rule-w) var(--rule-strong); }
.swatch-tile b { font-size: var(--t-1); }
.swatch-tile code { color: var(--ink-3); font-size: var(--t-1); }
.preview-grid { gap: var(--s1); }
/* The brand on the grounds its contrast was measured against: the brand's own colours, as data. */
.brand-preview { display: grid; gap: 6px; margin: 0; min-width: 0; }
.brand-preview figcaption { color: var(--ink-3); font-size: var(--t-1); font-weight: 600; }
.brand-preview-page { display: grid; justify-items: start; gap: var(--s0); padding: var(--s2); border-radius: var(--radius-control); background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 var(--rule-w) var(--rule-strong); min-width: 0; }
.brand-preview-mark { display: block; line-height: 0; }
.brand-preview-name { font-size: var(--t1); overflow-wrap: anywhere; }
.brand-preview-accent { margin: 0; color: var(--accent-text); font-weight: 650; overflow-wrap: anywhere; }
.brand-preview-button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s2); border-radius: var(--radius-pill); background: var(--fill); color: var(--on-fill); font-weight: 700; font-size: var(--t-1); }
.mark-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s1); }
.mark-sizes figure { display: grid; justify-items: center; gap: 6px; margin: 0; }
.mark-sizes figcaption { color: var(--ink-3); font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.ratio-list > li { align-items: center; }
.ratio-sample { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-control); font-weight: 800; box-shadow: inset 0 0 0 var(--rule-w) var(--rule-strong); }
.ratio-value { font-weight: 750; font-variant-numeric: tabular-nums; }
.voice-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.voice-words li { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.brand-tagline { display: flex; gap: var(--s0); align-items: flex-start; margin: var(--s2) 0 0; font-size: var(--t1); font-style: italic; overflow-wrap: anywhere; }
.brand-tagline .ci { --ci-size: 18px; flex: none; color: var(--accent-ink); }
.seed-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s1); }
.seed-row .field { flex: 1 1 12rem; min-width: 0; }
.color-pick { width: 56px; height: 44px; padding: 2px; border: var(--rule-w) solid var(--rule-strong); border-radius: var(--radius-control); background: var(--field); cursor: pointer; }

/* ---------- Team: the founding agents ---------- */
.team-note { display: flex; gap: var(--s0); align-items: flex-start; max-width: var(--measure); }
.agent-card { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.founder-head { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.founder-head h3 { font-size: var(--t1); overflow-wrap: anywhere; }
.agent-role { margin: 0; color: var(--accent-ink); font-weight: 650; font-size: var(--t-1); overflow-wrap: anywhere; }
/* A member's face: initials on a steady hue of their own, in the theme's light and dark alike. */
.agent-face { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: oklch(0.9 0.06 var(--hue)); color: oklch(0.32 0.1 var(--hue)); font-weight: 800; font-size: var(--t-1); letter-spacing: .02em; }
.agent-face.lg { width: 52px; height: 52px; font-size: var(--t1); }
.agent-face.sm { width: 28px; height: 28px; font-size: var(--t-2); }
:root[data-theme="dark"] .agent-face { background: oklch(0.36 0.08 var(--hue)); color: oklch(0.93 0.04 var(--hue)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .agent-face { background: oklch(0.36 0.08 var(--hue)); color: oklch(0.93 0.04 var(--hue)); } }
.agent-focus { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.agent-personality { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.agent-personality .ci { --ci-size: 16px; flex: none; margin-top: 2px; }
.agent-block { display: grid; gap: 4px; }
.agent-block small { color: var(--ink-3); font-size: var(--t-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tool-tag { background: var(--accent-soft); color: var(--accent-ink); }
.agent-first { margin: auto 0 0; padding-top: var(--s1); border-top: var(--rule-w) solid var(--rule); color: var(--ink-2); overflow-wrap: anywhere; }
.agent-first b { color: var(--ink); }
.tool-picks { margin: 0; padding: 0; border: 0; min-width: 0; }
.tool-picks legend { margin-bottom: var(--s0); font-weight: 650; font-size: var(--t-1); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 4px var(--s1); }
.tool-grid .check { min-height: 44px; }

/* ---------- Launch week ---------- */
.week { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.week-day { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--radius-control); background: var(--paper-2); box-shadow: inset 0 0 0 var(--rule-w) var(--rule); }
.week-num { display: grid; justify-items: center; width: 3rem; padding: 4px 0; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-ink); line-height: 1.1; }
.week-num small { font-size: var(--t-2); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.week-num b { font-size: var(--t2); }
.week-title { margin: 0; overflow-wrap: anywhere; }
.week-owner { display: flex; align-items: center; gap: var(--s0); min-width: 0; text-align: start; }
.week-owner > span:not(.agent-face) { display: grid; min-width: 0; }
.week-owner b { font-size: var(--t-1); overflow-wrap: anywhere; }
.week-owner small { color: var(--ink-3); font-size: var(--t-2); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .week-day { grid-template-columns: auto minmax(0, 1fr); gap: var(--s1); padding: var(--s1); }
  .week-owner { grid-column: 2; }
}
.launch-offer { margin: 0 0 var(--s2); max-width: var(--measure); overflow-wrap: anywhere; }

/* ---------- People ---------- */
.role-list { list-style: none; display: grid; gap: var(--s1); }
.role-list li { display: grid; gap: 2px; }
.role-list span { color: var(--ink-2); }
.team-danger { margin-top: var(--s2); padding-top: var(--s2); border-top: var(--rule-w) solid var(--rule); }
.team-danger h3 { font-size: var(--t1); color: var(--bad); }
.seats-line { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2); color: var(--ink-2); }

/* ---------- Settings ---------- */
/* The browser lists ~420 zones; a long one must not widen the form past its card. */
.zone-field { min-width: 0; justify-items: start; }
.zone-field .select { width: 100%; max-width: 100%; }
.zone-field .btn { max-width: 100%; white-space: normal; text-align: start; }
/* facts() says its column count as an attribute, read here above the kit's phone step
   (§0.35: an inline --cols would beat the kit's one-column rule on a phone). */
@media (min-width: 560.02px) {
  .facts[data-cols="1"] { --cols: 1; }
  .facts[data-cols="3"] { --cols: 3; }
  .facts[data-cols="4"] { --cols: 4; }
}
/* A notice's way out sits under its words, one step below. */
.alert-actions { margin-top: var(--s1); }

/* ---------- Phones: one inset a side (GUIDELINES §4d) ---------- */
@media (max-width: 640px) {
  .bullets { padding-inline-start: 1.1em; }
  .repeater-row { padding: var(--s1); }
}
/* Below 400px the page's card runs edge to edge (the kit), so its pad is the one inset a side;
   a tinted box inside it goes out to the card's edges too, rather than stepping in once more. */
@media (max-width: 400px) {
  .repeater-row, .week-day {
    margin-inline: calc(-1 * var(--card-pad));
    padding-inline: var(--card-pad);
    border-radius: 0;
    border-inline-width: 0;
  }
}

/* Two headed lists in one card (the brand's does and does not) stand a step apart. */
.prose-block + .prose-block { margin-top: var(--s2); }
/* A link that carries its icon: the icon beside the words, never under them. */
.ttile-state .link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 44px; }
.ttile-state .link .ci { --ci-size: 18px; }