/*
 * study.css - the study screen, the card deck and the audio bar.
 *
 * Additive to trainer.css, which is enqueued as a dependency and owns every
 * token used here. Nothing in this file redeclares a colour: if the learner
 * has picked one of the six themes, this follows it automatically. Namespaced
 * under .p66 for the same reason trainer.css is.
 */

/* ---------------------------------------------------------------- alarm */
/* The finding that started all of this, and the loudest thing on the page.
   It only renders when there are unattempted marks, so it disappears the
   moment it stops being true - a banner that is always there is wallpaper. */
.p66-study .p66-alarm {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--coral); border-left-width: 5px;
  background: color-mix(in srgb, var(--coral) 8%, var(--pan));
  border-radius: var(--r); padding: 1rem 1.1rem; margin: 0 0 1.25rem;
}
.p66-study .p66-alarm-num {
  font: 700 2.6rem/1 var(--fM); color: var(--coral);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.p66-study .p66-alarm h3 { margin: .1em 0 .3em; color: var(--coral); }
.p66-study .p66-alarm p  { margin: 0; color: var(--ink2); font-size: .93rem; }

/* ----------------------------------------------------------- projection */
.p66-study .p66-proj {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; margin: 0 0 1.75rem;
}
.p66-study .p66-proj > div {
  background: var(--pan); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1rem 1.1rem;
}
.p66-study .p66-proj-num {
  font: 700 2.4rem/1.1 var(--fM); font-variant-numeric: tabular-nums;
  color: var(--ink); margin: .15em 0 .35em;
}
.p66-study .p66-proj p { margin: 0; }

/* ----------------------------------------------------------------- plan */
.p66-study .p66-plan { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: p66step; }
.p66-study .p66-plan-step {
  counter-increment: p66step;
  position: relative; padding: .85rem 1rem .85rem 3rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--pan); margin: 0 0 .6rem;
}
.p66-study .p66-plan-step::before {
  content: counter(p66step);
  position: absolute; left: .9rem; top: .95rem;
  font: 600 .95rem/1 var(--fM); color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
/* A topic never opened is a different KIND of problem from a topic done
   badly, so it does not just sort higher - it looks different. */
.p66-study .p66-plan-step.is-first { border-color: var(--amber); }
.p66-study .p66-plan-step.is-first::before { color: var(--amber); }
.p66-study .p66-plan-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.p66-study .p66-plan-head strong { font-size: 1.02rem; }
.p66-study .p66-plan-step p { margin: .25em 0 0; }
.p66-study .p66-plan-acts { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .6rem !important; }

/* ----------------------------------------------------------- risk table */
.p66-study .p66-tablewrap { overflow-x: auto; margin: 0 0 2rem; }
.p66-study .p66-risk { width: 100%; border-collapse: collapse; font-size: .93rem; }
.p66-study .p66-risk th,
.p66-study .p66-risk td { padding: .5rem .6rem; border-bottom: 1px solid var(--rule); text-align: left; }
.p66-study .p66-risk th { font: 600 .78rem/1.2 var(--fS); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink3); white-space: nowrap; }
.p66-study .p66-risk .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p66-study .p66-risk td.n strong { font-family: var(--fM); }
.p66-study .p66-risk tr.is-untouched td { background: color-mix(in srgb, var(--amber) 9%, transparent); }
.p66-study .p66-risk tr.is-untouched td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.p66-study .p66-risk .p66-mono { color: var(--ink3); margin-right: .35em; }

/* ----------------------------------------------------------- confidence */
.p66-study .p66-conf {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .7rem; margin: 0 0 2rem;
}
.p66-study .p66-conf-cell {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--pan); padding: .85rem .95rem;
}
.p66-study .p66-conf-n {
  display: block; font: 700 1.9rem/1.1 var(--fM);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.p66-study .p66-conf-cell > span:last-of-type { color: var(--ink2); font-size: .9rem; }
.p66-study .p66-conf-cell p { margin: .45em 0 0; color: var(--ink3); }
.p66-study .p66-conf-cell.is-bad  { border-color: var(--coral); }
.p66-study .p66-conf-cell.is-bad  .p66-conf-n { color: var(--coral); }
.p66-study .p66-conf-cell.is-warn { border-color: var(--amber); }
.p66-study .p66-conf-cell.is-warn .p66-conf-n { color: var(--amber); }
.p66-study .p66-conf-cell.is-good .p66-conf-n { color: var(--green); }

.p66-study .p66-study-modes { display: flex; gap: .45rem; flex-wrap: wrap; }

/* The honesty note. Deliberately not hidden away in small print at the very
   bottom of the page - it is the difference between a study aid and a lie. */
.p66-study .p66-honesty {
  border-left: 3px solid var(--rule); padding: .1rem 0 .1rem .8rem;
  margin: 1.5rem 0 0;
}

/* ------------------------------------------------------------ card deck */
.p66-study .p66-deck { margin: 1.75rem 0 0; }
.p66-study .p66-deck-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin: 0 0 .5rem;
}
.p66-study .p66-deck-meta { display: flex; gap: .6rem; align-items: center; }
.p66-study .p66-deck-bar {
  height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; margin: 0 0 .9rem;
}
.p66-study .p66-deck-bar span { display: block; height: 100%; background: var(--cyan); transition: width .2s ease; }
.p66-study .p66-deck-card {
  border: 1px solid var(--ruleH); border-radius: var(--r);
  background: var(--pan); padding: 1.3rem 1.4rem;
}
.p66-study .p66-deck-stem { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; line-height: 1.4; }
.p66-study .p66-deck-prompt { color: var(--ink3); font-size: .9rem; margin: 0 0 .9rem; }
.p66-study .p66-deck-answer {
  font: 600 1.25rem/1.4 var(--fS); color: var(--green);
  border-top: 1px solid var(--rule); padding-top: .9rem; margin: 0 0 .8rem;
}
.p66-study .p66-deck-tip {
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border-radius: var(--rs); padding: .6rem .75rem; margin: 0 0 .7rem; font-size: .95rem;
}
.p66-study .p66-deck-why  { color: var(--ink2); font-size: .95rem; margin: 0 0 .7rem; }
.p66-study .p66-deck-trap { color: var(--amber); font-size: .93rem; margin: 0 0 .9rem; }
.p66-study .p66-deck-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 .8rem; }
.p66-study .p66-deck-foot { margin: .7rem 0 0; }
.p66-study .p66-deck-loading,
.p66-study .p66-deck-empty { color: var(--ink3); }

/* ------------------------------------------------------------ audio bar */
/* Fixed, because the entire point is that the learner has put the phone down
   and is doing something else. It has to stay reachable. */
.p66-audio {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 9999;
  display: flex; gap: .5rem; align-items: center;
  background: var(--pan, #121820); color: var(--ink, #e7eef4);
  border: 1px solid var(--ruleH, #34485a); border-radius: 999px;
  padding: .5rem .75rem .5rem 1rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  font: 500 .88rem/1 var(--fS, system-ui, sans-serif);
  max-width: calc(100vw - 2rem);
}
.p66-audio-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
  .p66-study .p66-alarm { flex-direction: column; gap: .4rem; }
  .p66-study .p66-alarm-num { font-size: 2.1rem; }
  .p66-study .p66-risk th:nth-child(3),
  .p66-study .p66-risk td:nth-child(3) { display: none; }
}

@media print {
  .p66-study .p66-deck, .p66-audio, .p66-study .p66-plan-acts,
  .p66-study .p66-study-modes { display: none !important; }
}

/* A percentage measured on a sliver of a topic is not the same fact as one
   measured across it. "85% right" on 34% coverage reads as safe and is not:
   its effective accuracy is 46%. The badge is what stops the number lying. */
.p66-study .p66-thin {
  display: inline-block; margin-left: .35em; padding: 0 .35em;
  border: 1px solid var(--amber); border-radius: var(--rs);
  color: var(--amber); font: 600 .68rem/1.5 var(--fS);
  text-transform: uppercase; letter-spacing: .05em; vertical-align: middle;
}

/* ---------------------------------------------------------------- nudge */
/* One line at the top of a module page. It is added by a `the_content`
   filter, not by editing the theme, and it renders only while there ARE
   unopened marks - so it removes itself the day it stops being true. */
.p66-nudge {
  border: 1px solid var(--amber, #ffb020);
  border-left-width: 5px;
  background: color-mix(in srgb, var(--amber, #ffb020) 10%, transparent);
  border-radius: var(--r, 10px);
  padding: .7rem .95rem; margin: 0 0 1.1rem;
  font: 400 .95rem/1.5 var(--fS, system-ui, sans-serif);
  color: var(--ink, inherit);
}
.p66-nudge strong { color: var(--amber, #b26a00); }
.p66-nudge a { color: var(--cyan, #0f5c8c); font-weight: 600; }
@media print { .p66-nudge { display: none !important; } }

/* ---------------------------------------------------------------------------
   The written notes - Plans/62.
   Placed above the plan because reading the guide is what a learner does
   BEFORE drilling. Two cards at most today (guide, cheat sheet), so a simple
   auto-fit grid rather than anything cleverer.
   --------------------------------------------------------------------------- */
.p66-study .p66-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .7rem;
  margin: 0 0 .6rem;
}
.p66-study .p66-notes-card {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--line, #d8dee3);
  border-left: 5px solid var(--cyan, #0f5c8c);
  border-radius: var(--r, 10px);
  padding: .8rem .95rem;
  text-decoration: none;
  color: inherit;
  background: var(--card, transparent);
}
.p66-study .p66-notes-card:hover {
  border-color: var(--cyan, #0f5c8c);
  background: color-mix(in srgb, var(--cyan, #0f5c8c) 7%, transparent);
}
.p66-study .p66-notes-card strong {
  font: 700 1rem/1.3 var(--fD, system-ui, sans-serif);
  color: var(--cyan, #0f5c8c);
}
@media print { .p66-study .p66-notes { display: none !important; } }