/* The Case Card, in its five variants.
 *
 * One block, modified per variant, because the component is one renderer -- styling each variant
 * as its own block would put the drift the component avoids back into the stylesheet.
 *
 * No JavaScript: the proposition reveal is a <details>, which opens, is keyboard-operable and
 * prints, with nothing loaded. A card that needs a script to show its principle is a card that
 * shows nothing on a slow connection.
 */

.llb-case-card {
  border: 1px solid var(--llb-border, #d8dce3);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1rem;
  background: var(--llb-surface, #fff);
}

.llb-case-card__draft {
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: #fff4e5;
  border: 1px solid #f0b37e;
  color: #8a4b08;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-block;
}

.llb-case-card__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--llb-accent, #1f5f8b);
}

.llb-case-card__taxonomy { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }

.llb-case-card__term {
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0.125rem 0.5rem;
  /* Half of one line's height (1.4 x 0.75rem + 2 x 0.125rem), not 999px: a pill radius is half
     the box height, so a term that wraps to two lines got a rounder corner than its neighbour. */
  border-radius: 0.65rem;
  background: var(--llb-muted-surface, #eef1f5);
  color: var(--llb-muted-text, #48505b);
}

.llb-case-card__name { margin: 0 0 0.25rem; font-size: 1.25rem; line-height: 1.3; }
.llb-case-card__name a { text-decoration: none; }
.llb-case-card__name a:hover, .llb-case-card__name a:focus { text-decoration: underline; }

.llb-case-card__context,
.llb-case-card__citation,
.llb-case-card__relationship {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  color: var(--llb-muted-text, #48505b);
}

.llb-case-card__hook { margin: 0.75rem 0; font-size: 1rem; line-height: 1.5; }

.llb-case-card__proposition {
  margin: 0.75rem 0;
  padding-left: 0.875rem;
  border-left: 3px solid var(--llb-accent, #1f5f8b);
  line-height: 1.5;
}

.llb-case-card__reveal { margin: 0.75rem 0; }
.llb-case-card__reveal summary { cursor: pointer; font-weight: 600; }
.llb-case-card__reveal .llb-case-card__proposition { margin-top: 0.5rem; }

.llb-case-card__time,
.llb-case-card__state {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--llb-muted-text, #48505b);
}

.llb-case-card__cta { margin: 1rem 0 0; }

/* Featured is the front door (section 16), so it is the one that is allowed to be loud. */
.llb-case-card--featured {
  border-width: 2px;
  border-color: var(--llb-accent, #1f5f8b);
  padding: 1.5rem 1.75rem;
}
.llb-case-card--featured .llb-case-card__name { font-size: 1.5rem; }

/* Compact and related appear in lists beside other things and must not shout over them. */
.llb-case-card--compact,
.llb-case-card--related {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.llb-case-card--compact .llb-case-card__name,
.llb-case-card--related .llb-case-card__name { font-size: 1rem; }

.llb-case-card--completed { border-style: dashed; }

.llb-case-deck__count { color: var(--llb-muted-text, #48505b); margin: 0 0 1rem; }
.llb-case-deck__back { margin: 1.5rem 0 0; }

.llb-case-lesson__name { margin: 0 0 0.25rem; line-height: 1.09; }
/* A case name is the one heading on the site that routinely runs to two lines -- "Zecevic v
   Director of Public Prosecutions (Vic)", "Farah Constructions Pty Ltd v Say-Dee Pty Ltd" -- and
   the inherited 1.02 put the underline of the first line into the ascenders of the second.
   1.09 at the rendered 29.6px is the +2px asked for, expressed as a ratio so it holds when the
   heading scales. */
/* The case name links to the judgment when one resolves; when it does not, the same heading
   renders unlinked, so nothing here may depend on the anchor existing. */
.llb-case-lesson__source { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.llb-case-lesson__source:hover, .llb-case-lesson__source:focus-visible { color: var(--ll-accent-dark, #7a4420); }
/* Shared by every link this feature sends off-site, not the lesson's alone -- the study-note
   card carries one too. One rule, because two would drift and only one of them is ever looked at. */
.llb-case-newtab {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The study-note card: what this page is, before the case it is about.
   Deliberately quieter than the lesson -- it is framing a reader passes through once, not
   content competing with the case name directly beneath it. */
.llb-case-intro {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--llb-border, #d8dce3);
  border-left: 4px solid var(--ll-accent, #9a5728);
  border-radius: 8px;
  background: var(--llb-surface, #fff);
  font-family: var(--ll-ui-font);
}
.llb-case-intro__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ll-accent-dark, #7a4420);
}
.llb-case-intro__lead { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; line-height: 1.4; }
.llb-case-intro__body { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--llb-muted-text, #48505b); }
.llb-case-intro__source { margin: 0.6rem 0 0; font-size: 0.875rem; font-weight: 700; }
.llb-case-lesson__context, .llb-case-lesson__citation {
  margin: 0 0 0.25rem; color: var(--llb-muted-text, #48505b); font-size: 0.9375rem;
}
.llb-case-lesson__hook { margin: 1rem 0 1.5rem; font-size: 1.125rem; line-height: 1.5; }
.llb-case-lesson__section { margin: 0 0 1.5rem; }
.llb-case-lesson__section h2 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.llb-case-lesson__section p { margin: 0 0 0.75rem; line-height: 1.6; }
.llb-case-related { margin-top: 2rem; }

/* The case view's right rail. Reference material beside the lesson, not under it.
   Sticky like `.toc-rail`, so the tags and related cases stay reachable while a learner reads
   down a long case. The rail is its own surface, so the cards inside it drop their border --
   a bordered card inside a bordered panel reads as two boxes for one thing. */
.llb-case-rail { font-family: var(--ll-ui-font); align-self: start; }
.llb-case-rail__card { padding: 1rem; }
.llb-case-rail .llb-case-card__taxonomy { margin: 0 0 0.75rem; }
.llb-case-rail__minutes { margin: 0 0 1rem; color: var(--llb-muted-text, #48505b); font-size: 0.875rem; }
.llb-case-rail .llb-case-related { margin-top: 0; }
/* The subject block is the weaker claim and is set quieter than the doctrinal one, so the two
   headings are distinguishable at a glance rather than only by reading them. */
/* The doctrine block leads the rail, so it takes the position the reader reaches first and
   loses the top margin the blocks below it carry. Set at full strength against the quieter
   subject block: this is the strongest relation on the page, not a footnote to the cases. */
.llb-case-rail .llb-case-related--doctrine { margin-top: 0; }
.llb-case-doctrine { list-style: none; margin: 0; padding: 0; }
.llb-case-doctrine li { margin: 0 0 0.85rem; }
.llb-case-doctrine li:last-child { margin-bottom: 0; }
/* Underlined for the same reason the related-case names are: in a rail of short muted lines a
   bold rust word reads as a heading rather than as something to click. */
.llb-case-doctrine__link { font-size: 1rem; text-decoration: underline; text-underline-offset: 0.16em; }
.llb-case-doctrine__summary { display: block; margin-top: 0.15rem; color: var(--llb-muted-text, #48505b); font-size: 0.875rem; line-height: 1.4; }
/* The role line is the doctrine claim and the topic is only its context, so the topic keeps the
   quiet treatment the old "Shared topic" label had and the role reads at normal weight. */
.llb-case-card__relationship span { color: var(--llb-muted-text, #48505b); }
/* A related case a later court disturbed says so BEFORE the student clicks it. Reuses the
   warning treatment defined further down rather than restating it -- only the rail's tighter
   metrics are overridden, because a rail card is a line in a list, not a block under a
   proposition. */
.llb-case-rail .llb-case-rail__heading, .llb-case-rail .llb-case-related h2 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--llb-muted-text, #48505b); margin: 0 0 0.5rem; }
.llb-case-rail .llb-case-card--related { border: 0; padding: 0; margin: 0 0 0.85rem; background: transparent; }
.llb-case-rail .llb-case-card--related:last-child { margin-bottom: 0; }
/* Underlined, unlike a card name elsewhere. In a rail of short muted lines a bold rust word is
   read as a heading, not as something to click -- it was already an anchor and nobody could
   tell. The wider card surfaces keep the undecorated treatment, where the whole card is
   obviously a target. */
.llb-case-rail .llb-case-card--related .llb-case-card__name { font-size: 1rem; margin: 0 0 0.15rem; }
.llb-case-rail .llb-case-card--related .llb-case-card__name a { text-decoration: underline; text-underline-offset: 0.16em; }
/* The relationship's label is quieter than the term it introduces: "Shared topic" is scaffolding
   and the topic is the information. */
.llb-case-card__relationship > span { font-weight: 700; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.06em; opacity: 0.75; }
.llb-case-card__relationship > span::after { content: ':'; }
@media (max-width: 920px) {
  /* One column, so a rail pinned to the viewport would follow the reader up a page it no longer
     sits beside. */
  .llb-case-rail { position: static; }
}

/* Subsequent treatment. The warning variants are the ones that change what a student should do,
 * and they sit directly under the proposition they qualify -- a caution reached after the reader
 * has moved on has cautioned nobody. */
.llb-case-card__treatment {
  margin: 0.5rem 0 9px;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  background: var(--llb-muted-surface, #eef1f5);
}

.llb-case-card__treatment p { margin: 0.5rem 0 0; }
.llb-case-card__treatment .llb-case-card__treatment-effect + p { margin-top: 0.2rem; }

.llb-case-card__treatment.is-warning {
  background: #fff4e5;
  border-left: 3px solid #c8781a;
}

.llb-case-card__treatment-effect {
  font-weight: 700;
  font-size: 0.8125rem;
  display: block;
}

.llb-case-card__treatment.is-warning .llb-case-card__treatment-effect { color: #8a4b08; }

/* Phones: theme.js collapses a long treatment note to its heading; the heading toggles it. */
@media (max-width: 599px) {
  .llb-case-card__treatment.is-collapsible .llb-case-card__treatment-effect { cursor: pointer; }
  .llb-case-card__treatment.is-collapsible .llb-case-card__treatment-effect::after { content: ' \25B4'; }
  .llb-case-card__treatment.is-collapsible.is-collapsed .llb-case-card__treatment-effect::after { content: ' \25BE'; }
  .llb-case-card__treatment.is-collapsed > p { display: none; }
}

/* Progress: the free-tier "what have I done" page. Counts and a list, deliberately -- the
   analysis that would make this a dashboard is the premium product it advertises. */
.llb-progress { padding: 1.25rem; }
/* Grid, not wrapped flex. Wrapped flex left an odd stat stranded at its natural width with a
   ragged gap beside it -- three stats on a phone rendered 2 + 1, the third floating at 112px in
   a 358px row. In a grid the leftover stat occupies a column, so the row reads as a grid with an
   empty cell rather than as an item that fell off the end.
   The row gap is tighter than the column gap for the same reason: an orphan sitting a full
   1.5rem below its neighbours looks like a separate section. */
.llb-progress__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.9rem 1.5rem; margin: 1.25rem 0 2rem; }
.llb-progress__stat { display: flex; flex-direction: column; min-width: 0; }
.llb-progress__value { font: 800 2rem/1.1 var(--ll-header-font); color: var(--ll-ink); }
.llb-progress__label { font-family: var(--ll-ui-font); font-size: 0.8125rem; color: var(--llb-muted-text, #48505b); }
.llb-progress__section { margin: 0 0 1.75rem; }
.llb-progress__section h2 { font-size: 1.125rem; margin: 0 0 0.6rem; }
.llb-progress__taxonomy { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; }
.llb-progress__recent { margin: 0; padding-left: 1.1rem; font-family: var(--ll-ui-font); font-size: 0.9375rem; }
.llb-progress__recent li { margin: 0 0 0.4rem; }
.llb-progress__when { color: var(--llb-muted-text, #48505b); font-size: 0.85em; }
.llb-progress__empty { border-left: 4px solid var(--ll-accent, #9a5728); background: #fff; padding: 1rem 1.15rem; border-radius: 8px; }
.llb-progress__actions { margin: 0.75rem 0 0; }
.llb-progress__primary { font-weight: 700; }

/* The citations card's own rules live in theme.css, NOT here. This file is enqueued only for the
   case-learning, home-v2 and progress templates (functions.php), and the citations card is an
   ARTICLE component -- so every rule for it written here was dead on the page that renders it. */

/* "Ask about this case", in the case's own <h1>.
   METRICS COPIED FROM `.pop-quiz-pill`, not re-chosen: same 1.73em circle, same 2.4px ring, same
   1.1em glyph, same 12px offset. The operator asked for it to match the pop quiz and read-tick
   controls, and two controls that are nearly the same size look like a mistake where two that
   are exactly the same size look like a system.
   Colour is the site accent rather than the pop quiz's orange, because this is a different
   action on a page that already uses the accent for its links -- same shape, different verb. */
.llb-case-lesson__name .case-tutor-pill { display: inline-flex; align-items: center;
  justify-content: center; height: 1.73em; min-width: 1.73em; padding: 0; border-radius: 999px;
  border: 2.4px solid var(--ll-accent, #9a5728); background: transparent;
  color: var(--ll-accent, #9a5728); box-sizing: border-box; vertical-align: .06em;
  margin-left: 12px; line-height: 1; text-decoration: none;
  /* The same declared size as the pop quiz pill, via the same variable, because the two
     must be identical rather than nearly so. Without it this <a> inherits the heading's
     32px and renders at 55px against the quiz pill's 23px. */
  font-size: var(--llb-pill-font, .8333rem);
  transition: box-shadow var(--ll-motion-duration, .15s) ease; }
.case-tutor-pill__icon { width: 1.1em; height: 1.1em; display: block; flex: 0 0 auto; }
.llb-case-lesson__name .case-tutor-pill:hover,
.llb-case-lesson__name .case-tutor-pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(154, 87, 40, .22); outline: none; text-decoration: none; }