/* ClearCalc: "Behind these decisions" and the Outcome, built from the Tandm page's own pieces
   (planogram step dots, surface cards, outcome tiles and the problem → answer table). */

/* ---------- Behind these decisions ---------- */
.cs.cs.cs section > * + .bd { margin-top: var(--r-sub) !important; }
.bd .bd-head { max-width: 62ch; }
.bd .bd-head .kicker { margin: 0 0 6px; }
.bd .bd-head h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; }
.bd .bd-head p:last-child { margin: 0; }

/* the three stages as a rail, using the planogram's step dots */
.bd-track { list-style: none; margin: 40px 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bd-track::before { content: ""; position: absolute; top: 20px; left: 20px; right: 20px; height: 1px; background: var(--line); }
.bd-track li { position: relative; display: grid; align-content: start; gap: 4px; padding-top: 56px; }
.bd-dot {
  position: absolute; top: 0; left: 0; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line);
  font: 500 14px/1 var(--font-display); color: var(--text);
}
.bd-track .bd-dot { border-color: transparent; }
.bd-track li:nth-child(1) .bd-dot { background: var(--card-yellow); }
.bd-track li:nth-child(2) .bd-dot { background: var(--card-lavender); }
.bd-track li:nth-child(3) .bd-dot { background: var(--card-mint); }
.bd-track b { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); }
.bd-track span:not(.bd-dot) { font-size: var(--fs-card); color: var(--muted); }

/* sketches and wireframes: plain surface cards, the same as the site's other expanders */
.bd-peeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.bd-peek { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color .25s ease; }
.bd-peek:hover { border-color: var(--text); }
.bd-peek[open] { grid-column: 1 / -1; }
.bd-peek summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 18px; }
.bd-peek summary::-webkit-details-marker { display: none; }
.bd-peek summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: var(--radius); }
.bd-fan { position: relative; width: 112px; height: 76px; }
.bd-fan img {
  position: absolute; top: 4px; left: 28px; width: 52px; height: 68px; object-fit: cover; object-position: top;
  border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent), 0 6px 14px -8px rgba(0, 0, 0, .35);
  transition: rotate .35s cubic-bezier(.22, 1, .36, 1), translate .35s cubic-bezier(.22, 1, .36, 1);
}
.bd-fan img:nth-child(1) { rotate: -12deg; translate: -22px 4px; }
.bd-fan img:nth-child(3) { rotate: 12deg; translate: 22px 4px; }
.bd-fan.wf img { width: 72px; height: 48px; top: 14px; left: 20px; }
.bd-peek:hover .bd-fan img:nth-child(1) { rotate: -18deg; translate: -30px 2px; }
.bd-peek:hover .bd-fan img:nth-child(3) { rotate: 18deg; translate: 30px 2px; }
.bd-pl { display: grid; gap: 2px; min-width: 0; }
.bd-pl b { font-family: var(--font-display); font-weight: 500; font-size: 17px; }
.bd-pl small { font-size: 14px; line-height: 1.45; color: var(--muted); }
.bd-open { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.bd-open::before { content: "+"; font: 400 20px/1 var(--font-body); }
.bd-peek[open] .bd-open::before { content: "–"; }
.bd-peek .cc-sample { padding: 0 18px 18px; margin: 0; }

@media (max-width: 720px) {
  .bd-track { grid-template-columns: 1fr; gap: 20px; }
  .bd-track::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 1px; height: auto; }
  .bd-track li { padding: 6px 0 0 56px; }
  .bd-peeks { grid-template-columns: 1fr; }
  .bd-peek summary { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .bd-open { display: none; }
  .bd-fan { width: 96px; }
  .bd-fan.wf img { width: 56px; height: 38px; top: 18px; left: 20px; }
  .bd-fan.wf img:nth-child(1) { translate: -16px 4px; }
  .bd-fan.wf img:nth-child(3) { translate: 16px 4px; }
}
@media (prefers-reduced-motion: reduce) { .bd-fan img { transition: none; } }

/* ---------- Outcome: the Tandm problem → answer table, for before → after ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs.cs.cs section > * + :is(.answers, .oc-cols) { margin-top: var(--r-sub) !important; }
.cs.cs.cs section > .prose + .oc-stats { margin-top: var(--r-tt) !important; }
#outcomes .oc-stats { margin-top: 0; }
#outcomes .oc-cols { margin-top: 0; }
.answers h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); }
.answer-table { width: 100%; margin-top: 20px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-card); line-height: 1.55; }
.answer-table thead th {
  text-align: left; padding: 0 20px 12px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.answer-table thead th:first-child { width: 150px; padding-left: 0; }
.answer-table td { padding: 16px 20px; vertical-align: top; border-top: 1px solid var(--line); }
.answer-table td:nth-last-child(2) { background: color-mix(in srgb, var(--card-yellow) 70%, transparent); }
.answer-table td:last-child { background: color-mix(in srgb, var(--card-mint) 70%, transparent); }
.answer-table tbody th {
  text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--text);
}
.answer-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
@media (max-width: 640px) {
  .answer-table, .answer-table tbody, .answer-table tr, .answer-table td, .answer-table th { display: block; width: auto; }
  .answer-table thead { display: none; }
  .answer-table tbody th { padding: 20px 0 8px; border-top: 0; }
  .answer-table td { border-top: 0; padding: 12px 16px; }
  .answer-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .answer-table tr { margin-bottom: 10px; }
  .answer-table tbody tr:last-child td { border-bottom: 0; }
}

/* ---------- Final designs: the same colours as the rest of the site, not ClearCalc's product teal ---------- */
/* role and handoff notes: the outcome lessons' look, with the site's tints */
.cc-facts li, :root[data-theme="dark"] .cc-facts li { border-top: 0; padding: 18px 20px; border-left: 3px solid var(--card-yellow); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.cc-facts li:nth-child(2) { border-left-color: var(--card-lavender); }
.cc-facts li:nth-child(3) { border-left-color: var(--card-mint); }
.cc-facts b, :root[data-theme="dark"] .cc-facts b {
  font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--text); margin-bottom: 6px;
}
.cc-facts p { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-facts li { border-top: 0; } :root:not([data-theme="light"]) .cc-facts b { color: var(--text); } }
@media (max-width: 760px) { .cc-facts { gap: 12px; } }

/* the prototype: a tinted panel and dark buttons, like the Figma prototype on the Tandm page */
.proto { padding: 20px; border: 0; border-radius: var(--radius); background: var(--card-mint); }
.proto-tabs { background: var(--surface); }
.proto-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.proto-frame { border-color: transparent; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .35); }
.proto-status, .proto-hint { color: color-mix(in srgb, var(--text) 70%, transparent); }
/* hotspot: dark ring and a yellow wash, so it stands out on ClearCalc's teal screens */
.proto-spot { border-color: #1b1d22; background: rgba(249, 216, 107, .28); animation-name: proto-pulse-ink; }
.proto-spot:hover { background: rgba(249, 216, 107, .45); }
@keyframes proto-pulse-ink { 0% { box-shadow: 0 0 0 0 rgba(27, 29, 34, .45); } 100% { box-shadow: 0 0 0 14px rgba(27, 29, 34, 0); } }
.proto-spot.flash { animation: proto-flash .5s ease-out 2, proto-pulse-ink 1.6s ease-out 1s infinite; }
.proto-tip { background: #1b1d22; }
.proto-tip::before { border-bottom-color: #1b1d22; }
.proto-end button { border-color: #1b1d22; color: #1b1d22; }
.proto-end button[data-other] { background: #1b1d22; color: #fff; }
@media (prefers-reduced-motion: reduce) { .proto-spot, .proto-spot.flash { animation: none; } }