/* Симуляція (workers/web/src/lens/simulate.ts, whatif.ts): a deal played step by step, and the
   trial run of a prepared action. PixelKit, charcoal theme, the tokens of src/css.ts: square
   corners, no shadows, no gradients. A changed figure is marked by a small square and a word, the
   colour is the mark, never the text. No line is drawn: what a step stands on is said in words
   with a link to that step.
   Without the script the page is the list of steps, every one open. The script adds .is-live to
   the section and then one step is shown at a time. */

/* The two tabs: the chosen one has a 2 px ink underline. */
.sim-tabs{display:flex;flex-wrap:wrap;gap:0 28px;margin:-4px 0 20px;border-bottom:1px solid var(--hair);max-width:1180px}
.sim-tabs a{display:inline-flex;align-items:center;min-height:44px;margin-bottom:-1px;font:500 14px var(--mono);color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.sim-tabs a:hover{color:var(--ink)}
.sim-tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.sim-pick{margin:0 0 16px;max-width:1180px}
.sim-pick a{white-space:normal}
.sim-pick .nb{white-space:normal}
.sim-deal{margin-bottom:16px}

/* The controls of the playback: a row of buttons, the slider, the numbers of the steps, where the playback is. */
.sim-player{position:sticky;top:var(--bar);z-index:5;margin:0 0 20px;padding:10px 0 8px;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--hair);max-width:1180px}
.sim-keys{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sim-keys .btn[data-do=play]{min-width:112px}
.sim-keys a.btn{text-decoration:none}
.sim-keys a.btn[aria-disabled]{opacity:.4;cursor:default;pointer-events:none}
.sim-speed{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--faint)}
.sim-speed select{min-height:44px;padding:8px 10px;background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:0;font:14px var(--sans)}
.sim-slide{display:block;margin:4px 0 0}
.sim-slide input{display:block;width:100%;min-height:36px;margin:0;accent-color:var(--ink)}
/* One number per step, in the order of the slider. The shown step has a blue bar; a step it stands on has a square. */
.sim-ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.sim-ticks a{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;border-top:2px solid var(--hair);font:500 12px var(--mono);color:var(--faint);text-decoration:none}
.sim-ticks a:hover{color:var(--ink);background:var(--card)}
.sim-ticks a[aria-current]{color:var(--ink);border-top-color:var(--blue)}
.sim-ticks a.is-from{color:var(--ink)}
.sim-ticks a.is-from::before{content:"";position:absolute;top:4px;left:calc(50% - 3px);width:6px;height:6px;background:var(--mint)}
.sim-ticks a.is-from{padding-top:8px}
.sim-now{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 24px;margin:4px 0 0;font:500 13px/1.5 var(--mono);color:var(--muted)}
.sim-hint{font-size:12px}

.sim-steps{list-style:none;margin:0;padding:0;min-width:0;max-width:1180px}
.sim-step{margin:0 0 28px;padding:14px 0 0;border-top:1px solid var(--rule);scroll-margin-top:calc(var(--bar) + 16px)}
.sim.is-live .sim-step{scroll-margin-top:calc(var(--bar) + 200px)}
.sim-step:focus{outline:none}
.sim-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:baseline;margin:0 0 12px}
.sim-no{margin:0;font:500 12px var(--mono);color:var(--faint)}
.sim-head h3{margin:0;font:600 17px/1.3 var(--sans);color:var(--ink)}
.sim-when{grid-column:2;margin:2px 0 0;font:500 12px/1.5 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.sim-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,.9fr);gap:8px 28px;align-items:start}
.sim-col{min-width:0}
.sim-col h4{margin:0 0 6px;font:500 12px var(--mono);color:var(--faint)}
.sim-col h4:not(:first-child){margin-top:14px}
.sim-text{margin:0;max-width:640px;overflow-wrap:anywhere}
.sim-links,.sim-recs{list-style:none;margin:0;padding:0;font-size:14px}
.sim-links li,.sim-recs li{padding:5px 0;border-top:1px solid var(--hair);overflow-wrap:anywhere}
.sim-links a{font:500 13px var(--mono)}
table.sim-t{width:100%;border-collapse:collapse;font-size:14px}
.sim-t th{padding:4px 8px 4px 0;text-align:left;font:500 12px var(--mono);color:var(--faint);border-bottom:1px solid var(--hair)}
.sim-t td{padding:5px 8px 5px 0;vertical-align:top;border-bottom:1px solid var(--hair);overflow-wrap:anywhere}
.sim-t th.num,.sim-t td.num{text-align:right;padding-right:0}
.sim-t td:first-child .mono{white-space:nowrap}

/* The state after a step. A figure the step changed has a blue bar and the word. */
.sim-state{margin:0;border-top:1px solid var(--hair)}
.sim-state>div{padding:6px 0 6px 8px;border-bottom:1px solid var(--hair);border-left:2px solid transparent}
.sim-state>div.is-touched{border-left-color:var(--blue)}
.sim-state dt{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.sim-state dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;font-size:15px}
.sim-strip{list-style:none;margin:12px 0 0;padding:0;font:500 12px/1.5 var(--mono)}
.sim-strip li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:0 6px;align-items:center;padding:2px 0}

/* One step at a time once the script runs; «Показати всі кроки» brings the list back. */
.sim.is-live:not(.is-all) .sim-step:not(.is-on){display:none}
.sim.is-live:not(.is-all) .sim-step{border-top:0;padding-top:0}

/* «Що буде, якщо»: the situations, the form of one, the answer in the same three columns. */
.sim-cases{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 24px;border-top:1px solid var(--rule);max-width:1180px}
.sim-cases a{display:block;min-height:44px;padding:10px 0 10px 10px;border-bottom:1px solid var(--hair);border-left:2px solid transparent;color:var(--muted);text-decoration:none}
.sim-cases a:hover{color:var(--ink);background:var(--card)}
.sim-cases a[aria-current]{color:var(--ink);border-left-color:var(--blue)}
.sim-form{display:flex;flex-wrap:wrap;align-items:end;gap:14px 20px;margin:0 0 24px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair);max-width:1180px}
.sim-form .sim-given{flex:1 1 100%;margin:0;display:flex;flex-wrap:wrap;gap:8px 32px}
.sim-form .sim-given div{min-width:0}
.sim-form dt{font:500 12px var(--mono);color:var(--faint)}
.sim-form dd{margin:2px 0 0;overflow-wrap:anywhere}
.sim-form label{display:grid;gap:4px;font:500 12px var(--mono);color:var(--faint)}
.sim-form input,.sim-form select{min-height:44px;min-width:150px;padding:8px 10px;background:var(--card);color:var(--ink);border:0;border-bottom:1px solid var(--rule);border-radius:0;font:15px var(--sans)}
.sim-refused{margin:0 0 20px;padding:12px 0 12px 12px;border-left:2px solid var(--crit);max-width:980px}
.sim-refused p{margin:0}
.sim-refused .st{margin-bottom:4px}

/* Narrow window: the three columns stack, the list of steps goes above them. */
@media (max-width:1180px){
  .sim-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sim-cols>.sim-col:last-child{grid-column:1 / -1}
}
@media (max-width:960px){
  .sim-cols{grid-template-columns:minmax(0,1fr)}
  .sim-cols>.sim-col:last-child{grid-column:auto}
  /* The controls stay at the bottom of the screen, under the thumb; the numbers of the steps would be too small to hit. */
  .sim.is-live{display:flex;flex-direction:column}
  .sim-player{top:auto;bottom:0;order:9;margin:0 calc(-1 * var(--gut));padding:8px var(--gut);border-bottom:0}
  .sim-ticks,.sim-hint{display:none}
  .sim-keys{gap:8px}
  .sim-keys .btn:not(.text){flex:1 1 auto;padding:10px 8px}
  .sim-speed span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sim-now{font-size:12px}
  .sim.is-live .sim-step{scroll-margin-top:calc(var(--bar) + 16px)}
  .sim-form input,.sim-form select{min-width:0;width:100%}
  .sim-form label{flex:1 1 140px}
}