/* ==========================================================================
   SCAN Learn — the ten-minute tool modules.  (Build 194)

   Two surfaces, one look: a folded strip beside the tool, and the index page
   that lists all ten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE STRIP, beside a tool.

   It has to read as an offer, not as an alert. The tool pages already use a
   left border in amber for "something needs your attention" and gold for
   "read this before you film" — so this one is cyan and quiet, and it is the
   only element on the page that is closed by default.
   -------------------------------------------------------------------------- */
.tsmod {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-sm);
  margin: 0 0 var(--sp-4, 14px);
}
.tsmod > summary {
  display: flex; align-items: baseline; gap: var(--sp-3, 10px); flex-wrap: wrap;
  padding: 10px 14px; cursor: pointer; list-style: none;
  min-height: 44px;                     /* a real target on a phone */
}
.tsmod > summary::-webkit-details-marker { display: none; }
.tsmod > summary::after {
  content: '›'; margin-left: auto; color: var(--text-muted);
  transform: rotate(90deg); transition: transform .15s ease;
}
.tsmod[open] > summary::after { transform: rotate(-90deg); }
.tsmod > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.tsmod-k {
  font-size: var(--fs-tiny); font-weight: var(--fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--cyan);
}
.tsmod-t { font-weight: var(--fw-bold); color: var(--text); }
.tsmod-m { font-size: var(--fs-tiny); color: var(--text-muted); }

.tsmod-body { padding: 0 14px 14px; }
.tsmod-why { margin: 0 0 var(--sp-3, 10px); color: var(--text-muted); }
.tsmod-steps { margin: 0 0 var(--sp-3, 10px); padding-left: 20px; }
.tsmod-steps li { margin: 6px 0; }
.tsmod-watch {
  margin: 0 0 var(--sp-3, 10px); padding: 10px 12px;
  background: var(--panel); border-radius: var(--r-sm);
  font-size: var(--fs-small); color: var(--text-muted);
}
.tsmod-foot { display: flex; gap: var(--sp-2, 8px); align-items: center; flex-wrap: wrap; }
.tsmod-msg { font-size: var(--fs-small); color: var(--amber); }

/* A module already read stops shouting. The cyan edge goes; the line stays. */
.tsmod.is-done { border-left-color: var(--border); }
.tsmod.is-done .tsmod-k { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   THE INDEX PAGE.
   -------------------------------------------------------------------------- */
.p-tools .ts-count { color: var(--text-muted); }

/* auto-fill, not auto-fit: with three modules left on the last row, auto-fit
   stretches them across the full width and they stop looking like the cards
   above them. */
.ts-grid {
  display: grid; gap: var(--sp-4, 14px);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ts-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 16px;
  display: flex; flex-direction: column;
}
.ts-top { display: flex; align-items: baseline; gap: var(--sp-3, 10px); margin-bottom: 6px; }
.ts-tool {
  font-size: var(--fs-tiny); font-weight: var(--fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--cyan);
}
.ts-min { font-size: var(--fs-tiny); color: var(--text-muted); margin-left: auto; }
.ts-card h2 { font-size: var(--fs-body); margin: 0 0 6px; }
.ts-why { margin: 0 0 var(--sp-3, 10px); color: var(--text-muted); }
.ts-steps { margin: 0 0 var(--sp-3, 10px); padding-left: 20px; }
.ts-steps li { margin: 6px 0; }
.ts-watch {
  margin: 0 0 var(--sp-4, 14px); padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--r-sm);
  font-size: var(--fs-small); color: var(--text-muted);
}
.ts-foot { display: flex; gap: var(--sp-2, 8px); flex-wrap: wrap; margin-top: auto; }

.ts-card.is-done { border-color: var(--green-soft, var(--border)); }
.ts-card.is-done .ts-tool { color: var(--text-muted); }

@media print { .tsmod { display: none; } }