/* Page-local styles for /builds/circlewise/ (Task 4).
   Uses tokens and classes from theme.css; new shared shapes carry a
   "candidate for theme.css" comment. Phone first, then 768 and 1100. */

/* ---------- masthead variant: name, "Back", "All builds", booking ---------- */
.case-mast { display: flex; align-items: center; gap: var(--space-3); }
.case-mast__back {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-label);
  letter-spacing: var(--track-label); text-transform: var(--case-label); color: var(--ink);
}
.case-mast__back::before { content: '\2190\00a0' / ''; font-family: var(--font-mono); } /* ←, silent for screen readers */
/* 320 px (WCAG reflow): the nameplate and the link must fit side by side, so the link may wrap and drops its arrow */
@media (max-width: 379px) {
  .case-mast__back { white-space: normal; text-align: right; line-height: 1.3; }
  .case-mast__back::before { content: none; }
}
.case-mast__back:hover { text-decoration: underline; }
/* "All builds" (/builds/): the same small label as "Back", no arrow */
.case-mast__all {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-label);
  letter-spacing: var(--track-label); text-transform: var(--case-label); color: var(--ink);
}
.case-mast__all:hover { text-decoration: underline; }
/* 320 to 379 px: the three items share the row, so the gap tightens and both links may wrap, like "Back" above */
@media (max-width: 379px) {
  .case-mast { gap: var(--space-2); }
  .case-mast__all { white-space: normal; text-align: right; line-height: 1.3; }
}
.case-mast__book { display: none; }
@media (min-width: 640px) { .case-mast__book { display: inline-flex; } }

/* ---------- head ---------- */
.case-head { padding-block: var(--space-4) var(--space-5); }
.case-head .wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.case-head__kick { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-2); padding-top: var(--space-2); border-top: var(--rule-w) solid var(--rule); }
.case-head__title { max-width: 15em; font-size: clamp(36px, 6vw + 14px, var(--fs-display)); }
html[data-look="apple"] .case-head__kick { border-top: 0; padding-top: 0; justify-content: flex-start; gap: 0 .3em; color: var(--ink-3); font-size: 17px; }
html[data-look="apple"] .case-head__kick span + span::before { content: "· "; }

/* key facts: a hairline definition grid. candidate for theme.css (.facts) */
.case-facts { display: grid; grid-template-columns: 1fr; margin: var(--space-2) 0 0; border-top: var(--rule-w) solid var(--rule-soft); }
.case-facts > div { padding: 14px 0; border-bottom: var(--rule-w) solid var(--rule-soft); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.case-facts dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 768px) {
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
}
@media (min-width: 1100px) {
  .case-head { padding-block: var(--space-5); }
  .case-facts { grid-template-columns: 1fr 2fr 1.4fr 1.4fr; column-gap: var(--space-3); }
}

/* ---------- top measure row: the usage cells follow the article-level flag ---------- */
.case[data-usage-ok="true"] .measure__item--usage { display: flex; }
@media (min-width: 768px) {
  .case[data-usage-ok="true"] .case-measure .measure__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-look="editorial"] .case[data-usage-ok="true"] .case-measure .measure__item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  html[data-look="editorial"] .case[data-usage-ok="true"] .case-measure .measure__item:nth-child(n+4) { border-top: var(--rule-w) solid var(--rule-soft); }
}

/* ---------- body: table of contents + one reading column ---------- */
.case-body { display: flex; flex-direction: column; gap: var(--space-4); }
.case-toc { padding: var(--space-2) 0; border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule-soft); }
.case-toc ol { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2); counter-reset: toc; }
.case-toc li { counter-increment: toc; }
.case-toc a { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); font-size: 15px; }
.case-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.case-toc a:hover { text-decoration: underline; }
.case-toc a[aria-current="true"] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }
html[data-look="apple"] .case-toc { border: 0; border-top: var(--rule-w) solid var(--rule); padding: var(--space-2) 0; } /* plain list, not another tile */
.case-main { min-width: 0; }
.case-body.band { padding-top: var(--space-4); }
@media (min-width: 1100px) { .case-body.band { padding-top: var(--space-5); } }
@media (min-width: 1100px) {
  .case-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .case-toc { position: sticky; top: 92px; }
  .case-toc ol { grid-template-columns: 1fr; }
  .case-toc a { min-height: 36px; }
}

/* ---------- sections ---------- */
.case-sec { padding-block: var(--space-4); border-top: var(--rule-w) solid var(--rule-soft); scroll-margin-top: 72px; }
.case-sec:first-child { border-top: 0; padding-top: 0; }
.case-sec > * { margin: 0; }
.case-sec > * + * { margin-top: var(--space-2); }
.case-sec > .h-1 { margin-top: var(--space-1); margin-bottom: var(--space-3); font-size: clamp(28px, 3.2vw + 14px, 44px); line-height: 1.06; }
.case-sec .body { max-width: 36em; }
@media (min-width: 768px) { .case-sec { padding-block: var(--space-5); } }

/* small measure grid inside a section. candidate for theme.css (.measure--sm) */
.case-mini { --fs-value: 30px; max-width: 760px; margin-block: var(--space-3) !important; }
.case-mini .measure__item span { font-size: 14px; }
@media (min-width: 768px) {
  .case-mini { --fs-value: 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-look="editorial"] .case-mini .measure__item { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-left: 0; border-bottom: var(--rule-w) solid var(--rule-soft); }
  html[data-look="editorial"] .case-mini .measure__item:nth-child(even) { padding: var(--space-3) 0 var(--space-3) var(--space-3); border-left: var(--rule-w) solid var(--rule-soft); }
  html[data-look="apple"] .case-mini .measure__item { padding: 24px; }
}
@media (min-width: 1100px) { .case-mini { --fs-value: 40px; } }
html[data-look="apple"] .case-mini { --fs-value: 28px; gap: 10px; }
@media (min-width: 768px) { html[data-look="apple"] .case-mini { --fs-value: 34px; gap: 16px; } }

/* role-attributed quote. candidate for theme.css (.quote) */
.case-quote { display: none; margin-top: var(--space-4) !important; padding-left: var(--space-3); border-left: 3px solid var(--ink); }
.case-quote[data-client-ok="true"] { display: block; } /* needs Circlewise's OK (inventory §11e) */
.case-quote blockquote { margin: 0 0 12px; }
.case-quote blockquote p { margin: 0; font-family: var(--font-display); font-weight: var(--w-head); font-size: var(--fs-h2); line-height: 1.2; letter-spacing: var(--track-head); color: var(--ink); text-wrap: balance; }
html[data-look="apple"] .case-quote { border-left: 0; padding: var(--space-3); background: var(--paper-2); border-radius: var(--radius-tile); }

/* figures: screenshots and the diagram. candidate for theme.css (.fig) */
.case-fig { margin-top: var(--space-4) !important; display: flex; flex-direction: column; gap: 10px; }
.case-fig img { width: 100%; height: auto; border: var(--rule-w) solid var(--rule-soft); border-radius: var(--radius); background: var(--surface); }
.case-fig > a { display: block; }
/* figure captions are sentences: sentence case, not mono caps (same rule as home.css) */
.case-fig figcaption { text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.5; }
html[data-look="apple"] .case-fig figcaption { font-weight: 400; font-size: 14px; }
/* screenshots: greyed in Editorial like the photo; the dialog at no more than its native size (a 2x capture) */
html[data-look="editorial"] .case-fig--shot img { filter: var(--photo-filter); }
.case-fig--native { max-width: 552px; }
html[data-look="apple"] .case-fig img { border-color: transparent; box-shadow: var(--shadow-card); }
.case-shots { display: flex; flex-direction: column; }
.case-shots .case-fig + .case-fig { margin-top: var(--space-4) !important; }
.case-guide { display: none; margin-top: var(--space-4) !important; }
.case[data-guide-ok="true"] .case-guide { display: flex; } /* needs Circlewise's OK (inventory §11c) */
.case-guide .body { color: var(--ink); }

/* usage figures and wording that depend on Circlewise's OK (inventory §11b) */
.case-usage { display: none; }
.case[data-usage-ok="true"] .case-usage { display: block; }
.case-usage > * + * { margin-top: var(--space-2); }
.case .if-usage { display: none !important; }
.case[data-usage-ok="true"] .if-usage { display: grid !important; }

/* "What didn't work" and "Next": numbered hairline lists. candidate for theme.css (.list-ruled) */
.case-fails, .case-next { max-width: 44em; list-style: none; padding: 0; margin-top: 0 !important; counter-reset: item; border-top: var(--rule-w) solid var(--rule); }
.case-fails li, .case-next li {
  counter-increment: item; display: grid; grid-template-columns: 2.25em minmax(0, 1fr); gap: var(--space-1);
  padding: var(--space-2) 0; border-bottom: var(--rule-w) solid var(--rule-soft);
  font-size: 18px; line-height: 1.45; color: var(--ink);
}
.case-fails li::before, .case-next li::before { content: counter(item, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; line-height: 2; color: var(--ink-3); }
@media (min-width: 768px) { .case-fails li, .case-next li { font-size: 19px; padding: 20px 0; } }
html[data-look="apple"] .case-fails, html[data-look="apple"] .case-next { border-top-color: var(--rule-soft); }

/* effort counts (review passes, test calls) are not outcome measures: ink, no yellow (DESIGN.md yellow rule) */
.case-mini--plain .measure__item b { background: none; padding-left: 0; padding-right: 0; margin-left: 0; }

/* ---------- architecture diagram: the home page's figure, reused.
   candidate for theme.css (.arch): the same rules live in home.css. SVG from 1100 px, a stacked list below that. ---------- */
.arch { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); }
.arch__svg { display: none; width: 100%; height: auto; }
.arch__svg text { font-family: var(--font-body); }
.arch__svg .arch__title { font-size: 16px; font-weight: 600; }
.arch__svg .arch__sub { font-size: 15px; fill: var(--ink-2); }
.arch__svg .arch__label { font-family: var(--font-body); font-size: 14px; font-weight: 600; fill: var(--ink-3); }
html[data-look="editorial"] .arch__svg .arch__label { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.arch__steps, .arch__steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.arch__node, .arch__group { position: relative; }
.arch__steps > li + li, .arch__group ol > li + li { margin-top: 36px; }
.arch__steps > li + li::before, .arch__group ol > li + li::before {
  content: '\2193' / ''; position: absolute; left: 50%; top: -32px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 20px; line-height: 28px; color: var(--ink);
}
.arch__node { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1.5px solid var(--ink); background: var(--surface); }
.arch__node b { font-weight: 600; font-size: 16px; }
.arch__node span { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.arch__node--split { flex-direction: row; gap: var(--space-2); }
.arch__half { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arch__half + .arch__half { border-left: var(--rule-w) solid var(--rule-soft); padding-left: var(--space-2); }
.arch__group { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border: var(--rule-w) dashed var(--ink); }
.arch__group > .caption { text-transform: none; letter-spacing: 0; font-size: 13px; }
html[data-look="editorial"] .arch__group > .caption { text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--fs-label); }
@media (min-width: 1100px) {
  .arch__svg { display: block; }
  .arch__steps { display: none; }
}
html[data-look="apple"] .arch__svg .arch__box { rx: 14px; fill: var(--surface); stroke: var(--rule); }
html[data-look="apple"] .arch__svg .arch__zone { rx: 24px; fill: var(--paper-2); stroke: transparent; }
html[data-look="apple"] .arch__node { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-card); }
html[data-look="apple"] .arch__group { border: 0; border-radius: var(--radius-tile); background: var(--paper-2); }

/* ---------- closing call to action ---------- */
.case-cta .wrap { display: flex; flex-direction: column; gap: var(--space-3); }
html[data-look="editorial"] .case-cta .wrap { position: relative; padding-top: var(--space-2); }
html[data-look="editorial"] .case-cta .wrap::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: var(--rule-w) solid var(--rule); }
.case-cta .btn-row { margin-top: var(--space-1); }