/* Chapters 03 and 05 · The two kills (figures/two-kills.js): the phone, the three places, the board (the D1 table, whose
   rows are the places and whose column heads are the two kills), the guess. Built on the course tokens and fx.css (the
   stage, the glass phone, the buttons). The static table inside the figure is the no-JS and print version. */

/* ---------- The static version (no JS, print) ---------- */
.tk .fx-fallback[hidden] { display: none; }
.tk-static { margin: 0; }
.tk-static .data-table { min-width: 0; }
.tk-static .data-table tbody th { width: 46%; }
.tk-static td.is-kept, .tk-static td.is-lost { font-weight: 600; }
.tk-static td.is-kept { color: var(--ok); }
.tk-static td.is-lost { color: var(--no); }
.tk-static tr.is-diff > * { background: color-mix(in srgb, var(--os) 7%, var(--surface)); }
@media (max-width: 760px) {
  .tk-static { background: var(--surface) !important; }
  .tk-static .data-table tbody th, .tk-static .data-table thead th:first-child { position: static; box-shadow: none; min-width: 0; }
  .tk-static .data-table th, .tk-static .data-table td { padding: 10px 9px; }
}
.tk-cap { margin: 12px 0 0 !important; }

/* ---------- Layout: the phone, the places, the board ---------- */
.tk .fx__hint { margin-bottom: 16px; padding-right: 48px; }
.tk-top { --w: clamp(136px, 18cqi, 176px); display: grid; grid-template-columns: calc(var(--w) + 24px) 158px minmax(0, 1fr); gap: clamp(14px, 2.6cqi, 28px); align-items: start; }
@container fx (max-width: 780px) {
  .tk-top { grid-template-columns: calc(var(--w) + 16px) minmax(0, 1fr); }
  .tk-board { grid-column: 1 / -1; }
}
.tk-phonecol { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 0; }
.tk-phone { --w: inherit; }
.tk-step { min-height: 2.7em; max-width: 100%; margin: 0 !important; font: 600 .82rem/1.35 var(--font-body); color: var(--ink); text-align: center; text-wrap: balance; }
.tk-step.is-new { animation: fx-in var(--fx-t-short) var(--fx-ease-out) both; }

/* ---------- The phone: home, the conversation, the first screen, the recent apps ---------- */
.tk-screen .fx-sb { color: #fff; transition: background-color .2s ease, color .2s ease; }
.tk-screen:is([data-view="conv"], [data-view="list"]) .fx-sb { color: #1d1d27; background: #fdf8ec; }
.tk-layer { position: absolute; inset: 9% 0 0; transition: opacity .26s ease, transform .3s var(--fx-ease-out), filter .24s ease; }
.tk-home {
  padding: 1.3em 1.1em; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 1.2em .7em;
  background: radial-gradient(90% 60% at 10% 0%, rgba(255, 61, 139, .35), transparent 60%), radial-gradient(80% 60% at 100% 30%, rgba(122, 92, 255, .4), transparent 60%), radial-gradient(90% 60% at 40% 110%, rgba(47, 125, 255, .35), transparent 60%), #10121d;
}
.tk-ic { justify-self: center; display: block; width: 2.3em; height: 2.3em; border-radius: .7em; background: var(--c, #3a4058); }
.tk-ic--you { background: linear-gradient(135deg, #fcd34d, #d97706); box-shadow: 0 0 0 .15em rgba(251, 191, 36, .35), 0 .4em 1em rgba(217, 119, 6, .45); }
.tk-app { overflow: hidden; background: #f7f6fb; color: #1d1d27; }
.tk-conv, .tk-list { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .2s ease; }
.tk-bar { flex: none; display: flex; align-items: center; gap: .55em; height: 2.9em; padding: 0 .8em; background: #fdf8ec; border-bottom: 2px solid #f2c45a; font: 700 .98em/1 var(--font-body); color: #1d1d27; }
.tk-chev { flex: none; width: .55em; height: .55em; margin: 0 .1em 0 .2em; border-left: 2px solid #1d1d27; border-bottom: 2px solid #1d1d27; transform: rotate(45deg); }
.tk-av { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: #c9c6d6; }
.tk-av--2 { background: #b8c4d6; } .tk-av--3 { background: #d6c4c4; }
.tk-bubbles { flex: 1; display: flex; flex-direction: column; gap: .6em; padding: .9em .8em; }
.tk-bub { display: block; width: 64%; height: 1.9em; border-radius: .9em; background: #e7e5ef; }
.tk-bub--me { align-self: flex-end; width: 54%; background: #f2b632; }
.tk-bub--s { width: 42%; }
.tk-field { position: relative; flex: none; margin: 0 .6em .9em; min-height: 4.4em; padding: .6em 2.5em .6em .8em; border-radius: 1.1em; border: 1.5px solid #f2b632; background: #fff;
  font: 500 1.24em/1.3 var(--font-body); color: #1d1d27; overflow-wrap: anywhere; }
.tk-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -.14em; background: #d97706; }
.tk-send { position: absolute; right: .45em; bottom: .45em; width: 1.5em; height: 1.5em; border-radius: 50%; background: #f2b632; }
.tk-list { opacity: 0; visibility: hidden; }
.tk-bar--list { font-size: 1.05em; }
.tk-row { display: flex; align-items: center; gap: .6em; padding: .75em .8em; border-bottom: 1px solid #ecebf2; }
.tk-row__t { flex: 1; display: grid; gap: .35em; min-width: 0; }
.tk-row__t > b { font: 700 .95em/1.1 var(--font-body); }
.tk-ln { display: block; width: 82%; height: .5em; border-radius: .3em; background: #dcd9e6; }
.tk-ln--b { width: 44%; background: #b9b5c9; } .tk-ln--s { width: 56%; }
.tk-prev { display: block; min-width: 0; }
.tk-prev__draft { display: none; font: 500 1.05em/1.2 var(--font-body); color: #1d1d27; }
.tk-prev__draft b { color: #b45309; font-weight: 700; }
.has-listdraft .tk-prev__draft { display: block; }
.has-listdraft .tk-prev .tk-ln { display: none; }
.has-listdraft .tk-list > .tk-row:nth-child(2) { background: #fff7e3; box-shadow: inset .22em 0 0 #f2b632; }   /* your app's draft: amber */
/* The views. */
.tk-screen[data-view="home"] .tk-app { opacity: 0; transform: scale(.96); visibility: hidden; transition: opacity .26s ease, transform .3s var(--fx-ease-out), visibility 0s linear .26s; }
.tk-screen[data-view="list"] .tk-conv { opacity: 0; visibility: hidden; }
.tk-screen[data-view="list"] .tk-list { opacity: 1; visibility: visible; }
.tk-screen[data-view="recents"] .tk-home { filter: brightness(.42) saturate(.6); }
.tk-screen[data-view="recents"] .tk-app { transform: scale(.72); border-radius: 1.5em; box-shadow: 0 1.4em 2.6em rgba(0, 0, 0, .5); }
.tk-screen[data-view="recents"] .fx-sb { color: #fff; background: transparent; }
.tk-screen.is-flick .tk-app { transform: translateY(-120%) scale(.72); opacity: 0; transition: transform .4s var(--fx-ease-in), opacity .3s ease .1s; }
.tk-touch { position: absolute; z-index: 5; left: 50%; top: 76%; width: 1.7em; height: 1.7em; margin: -.85em 0 0 -.85em; border-radius: 50%; pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 .45em rgba(255, 255, 255, .22), 0 .15em .5em rgba(0, 0, 0, .45); }
.tk-screen[data-view="recents"] .tk-touch { opacity: 1; transition: opacity .16s ease .26s; }
.tk-screen.is-flick .tk-touch { animation: tk-touch .42s var(--fx-ease-in) both; }
@keyframes tk-touch { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-11em) scale(.9); } }
.tk-app.is-born { animation: tk-born .5s var(--fx-ease-out); }
@keyframes tk-born { from { opacity: 0; transform: scale(.94); } }
/* The outcome, on the phone: back or gone, in words. */
.tk-stamp { position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-4deg); padding: .38em 1em; border-radius: 999px;
  font: 700 calc(var(--w) * .1)/1 var(--font-body); letter-spacing: .02em; color: #fff; box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .35); }
.tk-stamp:empty { display: none; }
.tk-stamp.is-back { background: #17784f; }
.tk-stamp.is-gone { background: #b3261e; }
.fx:not(.fx--still) .tk-stamp:not(:empty) { animation: tk-stamp var(--fx-t-short) var(--fx-ease-pop) both; }
@keyframes tk-stamp { from { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-10deg); } }

/* ---------- The three places: the app's memory (amber, its process), Android's memory (sky), storage ---------- */
.tk-places { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tk-place { position: relative; display: grid; justify-items: start; gap: 6px; min-width: 0; padding: 10px 12px 12px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--fx-plate); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.tk-place__k { font: 700 .66rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tk-place--mem { border: 1.5px solid var(--you); background: color-mix(in srgb, var(--you) 6%, var(--fx-plate)); }
.tk-place--mem .tk-place__k { color: var(--you); }
.tk-place--mem.is-none { border-style: dashed; border-color: var(--rule-strong); background: transparent; }
.tk-place--mem.is-none .tk-place__k { color: var(--ink-3); }
.tk-place--os { border-color: color-mix(in srgb, var(--os) 50%, var(--rule)); }
.tk-place--os .tk-place__k { color: var(--os); }
.tk-proc { font: 600 .72rem/1.3 var(--font-mono); color: var(--ink-2); }
.tk-val { display: flex; max-width: 100%; min-width: 0; }
.tk-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 3px 8px; border-radius: 7px; font: 600 .78rem/1.3 var(--font-body); }
.tk-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-chip--mem > span { white-space: normal; }   /* the draft wraps rather than lose its end: FR « Acheter du lait, appeler Sam » (final fix round 1) */
.tk-chip svg { flex: none; width: 13px; height: 13px; }
.tk-chip--mem { color: var(--ink); background: color-mix(in srgb, var(--you) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--you) 45%, transparent); }
.tk-chip--os { color: var(--os); background: color-mix(in srgb, var(--os) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--os) 45%, transparent); }
.tk-chip--disk { color: var(--you); background: color-mix(in srgb, var(--you) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--you) 45%, transparent); }
.tk-none { font: 600 .9rem/1.3 var(--font-body); color: var(--ink-3); }
.tk-dropped { font: 600 .76rem/1.3 var(--font-body); color: var(--no); }
.tk-dropped s { color: var(--ink-3); text-decoration-color: var(--no); text-decoration-thickness: 1.5px; }   /* only the label is struck */
.tk-place.is-new { animation: tk-new .9s var(--fx-ease-out); }
.tk-place.is-src { border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.tk-place.is-gone { animation: tk-gone .8s ease; }
@keyframes tk-new { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--os) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes tk-gone { 0% { background: color-mix(in srgb, var(--fx-kill) 22%, var(--surface)); border-color: var(--fx-kill); } }
/* The scissors on the app's process: Android's kill, or the process your swipe ends. */
.tk-scis { position: absolute; right: 9px; bottom: 9px; width: 20px; height: 20px; color: var(--fx-kill); opacity: 0; pointer-events: none; }
.tk-scis svg { width: 100%; height: 100%; display: block; }
.tk-place--mem.is-cut { animation: tk-cut .55s var(--fx-ease-in); }
.tk-place--mem.is-cut .tk-scis { animation: tk-snip .85s ease; }
@keyframes tk-cut { 0% { box-shadow: 0 0 0 0 var(--fx-kill); border-color: var(--fx-kill); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fx-kill) 30%, transparent); border-color: var(--fx-kill); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes tk-snip { 0% { opacity: 0; transform: translateX(-14px); } 30% { opacity: 1; transform: none; } 45% { transform: scale(.8) rotate(-10deg); } 60% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- The board: three places by two kills; a row is a choice, a column head is a kill ---------- */
.tk-board { display: grid; gap: 12px; min-width: 0; }
.tk-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 14px; border: 1px solid var(--rule-strong); background: var(--surface); overflow: hidden; font-size: .92rem; line-height: 1.35; }
.tk-table th, .tk-table td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule); }
.tk-table tbody tr:last-child > * { border-bottom: 0; }
.tk-table thead th { padding: 8px 8px; background: var(--surface-2); border-bottom-color: var(--rule-strong); }
.tk-table thead th + th, .tk-table td { width: 28%; }
.tk-table td, .tk-table thead th + th { border-left: 1px solid var(--rule); }
.tk-h0 { padding-left: 12px !important; font: 700 .66rem/1.35 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tk-kill { width: 100%; min-height: 44px; justify-content: flex-start; gap: 7px; padding: 7px 10px; font-size: .86rem; text-align: left; }
.tk-kill svg { width: 17px; height: 17px; color: var(--fx-kill); }
.tk-kill--swipe svg { color: var(--ink-2); }
.fx-btn.tk-kill[aria-disabled="true"] { opacity: .5; }
.tk-pick { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font: 600 .9rem/1.3 var(--font-body); color: var(--ink); }
.tk-pick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tk-pick input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tk-table tr.is-picked > * { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tk-table td { text-align: center; }
.tk-tbd { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed var(--control); vertical-align: middle; }
.tk-table td.is-target { box-shadow: inset 0 0 0 2px var(--accent); }
.tk-table td.is-target .tk-tbd { border-style: solid; border-color: var(--accent); }
.fx:not(.fx--still) .tk-table td.is-target .tk-tbd { animation: tk-pulse 1.1s ease infinite; }
@keyframes tk-pulse { 50% { transform: scale(1.25); } }
.tk-res { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font: 700 .78rem/1.3 var(--font-body); white-space: nowrap; }
.tk-res::before { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font: 700 .66rem/1 var(--font-body); color: #fff; }
.tk-res.is-kept { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, var(--surface)); }
.tk-res.is-kept::before { content: "\2713"; content: "\2713" / ""; background: var(--ok); }
.tk-res.is-lost { color: var(--no); background: color-mix(in srgb, var(--no) 10%, var(--surface)); }
.tk-res.is-lost::before { content: "\2715"; content: "\2715" / ""; background: var(--no); }
:root[data-theme="dark"] .tk-res::before { color: #0b1420; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .tk-res::before { color: #0b1420; } }
.tk-res.is-pop { animation: tk-pop var(--fx-t-short) var(--fx-ease-pop) both; }
@keyframes tk-pop { from { opacity: 0; transform: scale(.6); } }
/* After all six cells: the row that differs, outlined in sky (Android keeps it, Android drops it). */
.tk-table tr.is-diff > * { --tk-line: color-mix(in srgb, var(--os) 60%, transparent); background: color-mix(in srgb, var(--os) 8%, var(--surface)); box-shadow: inset 0 1.5px 0 var(--tk-line), inset 0 -1.5px 0 var(--tk-line); }
.fx:not(.fx--still) .tk-table tr.is-diff > * { animation: tk-glow 1.3s ease .2s; }
@keyframes tk-glow { 40% { background: color-mix(in srgb, var(--os) 24%, var(--surface)); } }
/* The guess, before the replay. */
.tk-guess { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--rule)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tk-guess[hidden] { display: none; }
.tk-guess__q { margin: 0 auto 0 0 !important; font: 600 .98rem/1.3 var(--font-body); color: var(--ink); }
.tk-guess__b { min-width: 76px; }
.fx:not(.fx--still) .tk-guess:not([hidden]) { animation: fx-in var(--fx-t-short) var(--fx-ease-out) both; }
.tk-lesson { min-height: 0; margin: 0 !important; }
.tk-lesson:empty { display: none; }
.tk-g { font-weight: 700; }
.tk-g.is-ok { color: var(--ok); }
.tk-g.is-ko { color: var(--no); }
.tk-reset { position: absolute; z-index: 2; top: clamp(12px, 2.6cqi, 24px); right: clamp(12px, 2.6cqi, 24px); min-height: 40px; min-width: 40px; padding: 6px 10px; }
.tk-reset svg { width: 16px; height: 16px; }

/* A phone (360 to 520): the board fits its stage in EN and FR (the kill's icon above its words), the draft wraps, and a
   shorter phone keeps the replay and the board in one screen (r7-c03-design M1, M2). */
@container fx (max-width: 520px) {
  .tk-top { --w: 124px; }
  .tk-table { font-size: .84rem; }
  .tk-table th, .tk-table td { padding: 8px 6px; }
  .tk-h0 { width: 40%; padding-left: 8px !important; }
  .tk-pick { gap: 6px; font-size: .84rem; }
  .tk-kill { flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 7px; font-size: .78rem; }
  .tk-chip--os > span { white-space: normal; }   /* FR « état sauvegardé » at 360 (r7-c03-french) */
  .tk-kill svg { width: 15px; height: 15px; }
  .tk-res { padding: 2px 7px 2px 3px; font-size: .72rem; }
  .tk-place { padding: 8px 10px 10px; }
}
/* A 360 px phone in French (« Mort décidée par le système »): a little less padding, so the board still fits its stage. */
@container fx (max-width: 330px) {
  .tk-table th, .tk-table td { padding: 7px 4px; }
  .tk-h0 { padding-left: 7px !important; letter-spacing: .06em; }
  .tk-pick { gap: 5px; }
  .tk-kill { padding: 5px 5px; }
  .tk-res { padding-right: 5px; }
}
/* A 320 px phone (French is the widest): the board a size smaller and the stage's side padding trimmed, so the kill
   buttons and their columns stay inside the stage (final fix round 2). */
@container fx (max-width: 300px) {
  .tk > .fx__stage { padding-inline: 10px; }
  .tk-table { font-size: .8rem; }
  .tk-table th, .tk-table td { padding: 6px 3px; }
  .tk-h0 { padding-left: 6px !important; font-size: .58rem; letter-spacing: .03em; }
  .tk-pick { gap: 4px; font-size: .78rem; }
  .tk-pick input { width: 16px; height: 16px; }
  .tk-kill { padding: 4px; font-size: .72rem; }
  .tk-res { gap: 4px; padding: 2px 5px 2px 2px; font-size: .68rem; }
}
/* A wide board in French: the two kill columns a little wider, so « Mort décidée par le système » and « Balayage hors des
   récents » take two lines in their buttons, not three (French stage, 2026-10-27). */
@container fx (min-width: 781px) {
  html[lang="fr"] .tk-table thead th + th, html[lang="fr"] .tk-table td { width: 31%; }
}

/* Presenting: the figure keeps its three columns and a lower phone. */
:root.is-presenting .tk-top { --w: 160px; }
:root.is-presenting .tk .fx__hint { margin-bottom: 10px; }

@media print {
  .tk .fx-fallback[hidden] { display: block !important; }
  .tk.is-mounted > .fx__stage { display: none !important; }
  .tk-static td.is-kept, .tk-static td.is-lost, .tk-static tr.is-diff > * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}