/* Lessons 1 and 2 of the six tiles: the cost of each speciality, and the
   order only the ESP agent knew how to enter. Sizes in rem; theme tokens only. */

.s-btn {
  border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--ink);
  border-radius: 0.7rem; padding: 0.55rem 1rem; font: 700 0.85rem/1.25 'Montserrat', Arial, sans-serif;
  letter-spacing: 0.03em; cursor: pointer; text-align: left; transition: border-color 0.2s, background 0.2s, color 0.2s, opacity 0.2s;
}
.s-btn:hover:not(:disabled) { border-color: var(--blue2); }
.s-btn:disabled { cursor: default; }
.s-btn.primary { border-color: #0070C0; background: #0070C0; color: #fff; box-shadow: 0 0.5rem 1.5rem rgba(0, 112, 192, 0.25); }
.s-btn.primary:hover:not(:disabled) { background: #1D6FBC; border-color: #1D6FBC; }
.s-btn.wrong { opacity: 0.45; text-decoration: line-through; }
.fresh { animation: sIn 0.4s ease both; }
@keyframes sIn { from { opacity: 0; transform: translateY(0.3rem); } to { opacity: 1; transform: none; } }

/* Lesson 1: six specialities, each with its minutes, its training and its cost.
   Cost is red, training light red: every speciality is money and time. */
:root { --cost: #c62828; --cost-soft: #fde4e4; --cost-soft-ink: #b4232a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --cost: #ff8a80; --cost-soft: rgba(255, 138, 128, 0.16); --cost-soft-ink: #ffb4ab; } }
:root[data-theme='dark'] { --cost: #ff8a80; --cost-soft: rgba(255, 138, 128, 0.16); --cost-soft-ink: #ffb4ab; }
.s1 { display: grid; gap: 0.9rem; align-content: start; }
.s1-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.s1-card {
  position: relative; display: grid; gap: 0.45rem; align-content: start; text-align: left; min-width: 0;
  padding: 0.85rem 0.95rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--panel-solid);
  font: 600 0.88rem/1.4 'Montserrat', Arial, sans-serif; color: var(--ink); cursor: pointer;
  box-shadow: 0 0.3rem 1rem rgba(0, 80, 160, 0.06); transition: border-color 0.2s, box-shadow 0.2s, opacity 0.4s;
}
.s1-card:hover:not(:disabled) { border-color: var(--blue1); }
.s1-card.kept { border-color: var(--blue2); box-shadow: 0 0 0 0.15rem rgba(0, 112, 192, 0.22); }
.s1-card:disabled { cursor: default; }
.s1-card .cost { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; align-items: center; font-size: 0.72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.s1-card .cost .train { padding: 0.05rem 0.4rem; border-radius: 0.4rem; background: var(--cost-soft); color: var(--cost-soft-ink); }
.s1-card .cost .money { color: var(--cost); }
.s1-total .train b { color: var(--cost-soft-ink); }
.s1-total .money b, .s1-verdict b.money { color: var(--cost); }
.s1-card .tag { display: none; order: -1; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.s1-card.keep .tag, .s1-card.ignore .tag { display: block; }
.s1-card.ignore { opacity: 0.42; }
.s1-card.ignore .what { text-decoration: line-through; text-decoration-color: var(--muted); }
.s1-card.ignore .tag { color: var(--muted); }
.s1-card.keep { background: #0070C0; border-color: #0070C0; color: #fff; box-shadow: 0 0.6rem 1.6rem rgba(0, 112, 192, 0.28); }
.s1-card.keep .cost, .s1-card.keep .tag { color: rgba(255, 255, 255, 0.85); }
.s1-total { display: flex; gap: 1.6rem; flex-wrap: wrap; padding: 0.8rem 1rem; border-radius: 1rem; background: var(--panel); border: 1px solid var(--line); }
.s1-total span { display: grid; gap: 0.15rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.s1-total b { font-size: 1.35rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.s1-hint { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.s1-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.s1-verdict { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.s1-verdict b { font-weight: 800; }
.s1-verdict b.good { color: var(--blue2); }

/* Lesson 2: the e-mail, the agent, the next step, the procedure that grows. */
.s2 { display: grid; gap: 0.85rem; align-content: start; }
.s2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.s2-mail { padding: 0.8rem 1rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--panel-solid); box-shadow: 0 0.3rem 1rem rgba(0, 80, 160, 0.06); }
.s2-mail p { margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.45; }
.s2-mail p + p { font-weight: 500; }
.s2-from { font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; }
.s2-from b { color: var(--ink); font-weight: 700; }
.s2-agent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.s2-agent img { width: 3.6rem; height: auto; }
.s2-bubble {
  margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.9rem 0.9rem 0.9rem 0.25rem; border: 1px solid var(--line);
  background: var(--panel-solid); font-size: 0.85rem; font-weight: 600; line-height: 1.4; min-height: 2.6rem;
}
.s2-task { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: 1rem; background: var(--panel); border: 1px solid var(--line); min-height: 9rem; align-content: start; }
.s2-ask { margin: 0; font-size: 1.15rem; font-weight: 800; }
.s2-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.s2-result { margin: 0; min-height: 1.5rem; font-size: 0.95rem; font-weight: 600; color: var(--blue2); }
.s2-result b { font-weight: 800; }
.s2-chips { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.s2-chip { padding: 0.25rem 0.6rem; border-radius: 0.45rem; border: 1px solid var(--line-strong); color: var(--ink); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.s2-chip.pick { background: #0070C0; border-color: #0070C0; color: #fff; }
.s2-chip.out { opacity: 0.4; text-decoration: line-through; }
.s2-sap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.3rem 0.6rem; padding: 0.6rem 0.8rem; border-radius: 0.7rem; border: 1px solid var(--line); background: var(--panel-solid); font-size: 0.78rem; }
.s2-sap .k { color: var(--muted); font-weight: 600; }
.s2-sap .v { font-weight: 800; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.3s; }
.s2-sap .v.in { opacity: 1; }
.s2-doc { background: var(--paper); color: var(--paper-ink); border-radius: 0.35rem; padding: 0.9rem 1.1rem; box-shadow: 0 0.4rem 1.2rem rgba(0, 80, 160, 0.12); }
.s2-doc h4 { margin: 0 0 0.5rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #0B3760; }
.s2-doc ol { margin: 0; padding-left: 1.2rem; font-size: 0.82rem; line-height: 1.55; }
.s2-doc li { border-radius: 0.25rem; padding: 0 0.25rem; transition: background 0.3s; }
.s2-doc li.hit { background: rgba(0, 112, 192, 0.16); }
.s2-doc li.added { color: #0070C0; font-weight: 700; animation: sIn 0.45s ease both; }
.s2-end { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.s2-done { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--blue2); }

@media (max-width: 860px) {
  .s1-grid, .s2-top { grid-template-columns: minmax(0, 1fr); }
  .s1-total { gap: 1rem; }
  .s2-sap { grid-template-columns: auto minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fresh, .s2-doc li.added { animation: none; }
  .s1-card, .s2-sap .v { transition: none; }
}
.s1-card.keep .cost .money { color: rgba(255, 255, 255, 0.9); }