/* Research page composition. Reuses the portfolio's canonical components;
   no replacement tokens, fonts, button styles, or card variants. */
.research-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-block: var(--s-6) var(--s-5); }
.research-hero .o-hero-page-title { max-width: 22ch; }
.research-hero-copy { min-width: 0; }
.research-preview { background: var(--surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--shadow-card); padding: var(--s-5); min-width: 0; }
.research-preview-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--hairline); }
.research-preview-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--hairline); }
.research-preview-row strong { display: flex; align-items: center; gap: var(--s-3); }
.research-signal { width: var(--s-2); height: var(--s-2); border-radius: var(--r-full); background: var(--accent); }
.research-preview-note { display: flex; flex-direction: column; gap: var(--s-2); background: var(--accent-soft); border-radius: var(--r-2); padding: var(--s-4); margin-top: var(--s-5); }
.research-preview-note .t-eyebrow { color: var(--accent-text); }
.research-preview-foot { margin-top: var(--s-4); }
.research-jump { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); margin-top: var(--s-5); font-size: var(--t-body-s); }
.research-columns { gap: var(--s-7); }
.research-measures { border-top: 1px solid var(--hairline); }
.research-measures > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); padding-block: var(--s-5); border-bottom: 1px solid var(--hairline); }
.research-measures dt { display: flex; align-items: baseline; gap: var(--s-5); font-size: var(--t-title-m); font-weight: var(--w-medium); line-height: var(--lh-snug); }
.research-measures dt .t-eyebrow { flex-shrink: 0; }
.research-measures dd { margin: 0; color: var(--ink-soft); font-size: var(--t-body-m); line-height: var(--lh-relaxed); }
.research-steps { list-style: none; padding: 0; gap: var(--s-5); }
.research-steps li { border-top: 1px solid var(--hairline); padding-top: var(--s-4); }
.research-example { margin-top: var(--s-7); padding: var(--s-5); border: var(--card-border); border-radius: var(--card-radius); background: var(--bg-tinted); gap: var(--s-7); align-items: center; }
.research-citation { background: var(--bg-tinted); border: var(--card-border); border-radius: var(--r-2); padding: var(--s-4); overflow-wrap: anywhere; }
.research-provenance { margin-top: var(--s-7); }
.research-home-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.page-research :is(section, h2)[id], #research { scroll-margin-top: var(--s-9); }
@media (max-width: 800px) {
  .research-hero, .research-home-grid { grid-template-columns: 1fr; }
  .research-hero { padding-top: var(--s-7); }
  .research-columns, .research-example { gap: var(--s-5); }
  .research-measures > div { grid-template-columns: 1fr; gap: var(--s-3); }
}
@media print {
  .page-research :is(.o-header, .o-footer, .research-jump) { display: none; }
  .page-research [data-reveal] { opacity: 1 !important; transform: none !important; }
  .page-research .research-hero { grid-template-columns: 1fr; }
  .page-research :is(.research-preview, .o-card-archetype) { break-inside: avoid; }
}

/* Installation belongs to the task-focused developer library. */
.research-hero .o-hero-page-title { font-size: clamp(2rem, 3.3vw, 3.4rem); }
.research-install { min-width: 0; border: var(--card-border); border-radius: var(--card-radius); padding: var(--s-5); background: var(--surface); }
.research-install > h2 { margin-block: var(--s-2) var(--s-4); }
.research-install-item + .research-install-item { border-top: 1px solid var(--hairline); margin-top: var(--s-4); padding-top: var(--s-4); }
.research-install-item h3 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.research-install-item p { margin-block: var(--s-2); }
.research-command { display: flex; align-items: center; gap: var(--s-2); border: 1px solid var(--hairline); border-radius: var(--r-2); padding: var(--s-3); background: var(--bg-tinted); margin-block: var(--s-3); }
.research-command code { min-width: 0; overflow-wrap: anywhere; font-size: .8rem; }
.research-command button { flex-shrink: 0; padding: var(--s-2) var(--s-3); }
.research-copy-status { min-height: 1.3em; margin-top: var(--s-2); }
.research-usage-list { padding-left: 1.3em; }
.research-usage-list li { margin-block: var(--s-3); }
.research-connection { margin-top: var(--s-5); border-top: 1px solid var(--hairline); padding-top: var(--s-4); }
.research-connection summary { cursor: pointer; }
.research-connection p { margin-block: var(--s-3); }
.research-config { padding: var(--s-4); background: var(--bg-tinted); border-radius: var(--r-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; }
@media (max-width: 800px) {
  .research-hero { grid-template-columns: 1fr; gap: var(--s-4); padding-top: var(--s-4); }
  .research-hero .o-hero-page-title { font-size: 1.8rem; }
  .research-hero .o-hero-page-lede { font-size: 1rem; }
  .research-hero-copy .m-cta-pair { margin-top: var(--s-3); }
  .research-install { padding: var(--s-4); }
}
.research-command code { white-space: pre-wrap; }
.research-attribution { width: 100%; border-collapse: collapse; margin-block: var(--s-5); table-layout: fixed; }
.research-attribution caption { text-align: left; margin-bottom: var(--s-3); font-weight: 600; }
.research-attribution th, .research-attribution td { text-align: left; vertical-align: top; padding: var(--s-3); border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.research-attribution th:first-child { width: 28%; }
.research-version-scroll { overflow-x: auto; }
.research-version-scroll .research-attribution { min-width: 34rem; }
.page-research :is(#attribution, #limitations) a { overflow-wrap: anywhere; }
.research-criterion { margin: var(--s-4) 0 var(--s-4) var(--s-3); padding: var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-2); }
.page-research .research-jump { max-width: 1140px; margin-inline: auto; padding-inline: var(--s-5); padding-bottom: var(--s-4); }
.research-criterion summary { cursor: pointer; min-height: 28px; }
.page-research summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.page-research .research-hero-copy > .t-body-m,
.page-research .research-hero-copy > .t-body-s { display: block; }
@media (max-width: 800px) {
  .research-hero-copy > .o-hero-page-lede { display: block; }
  .research-install > h2 { display: block; }
  .research-criterion { margin-left: 0; }
}

/* Useful output balances the opening without decorative filler. */
.research-review-output { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.research-review-output > h2 { margin-block: var(--s-2) var(--s-3); }
.research-output-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.research-output-list > article { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.hard-output-number { color: var(--color-action-text); display: block; padding-bottom: var(--s-4); border-bottom: 1px solid var(--color-border); }
.hard-output-boundary { max-width: 70ch; color: var(--color-text-muted); }
.research-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.research-role-grid .o-persona-card-head { align-items: flex-start; }
.research-role-grid > .o-persona-card:last-child:nth-child(odd) { grid-column: auto; }
.research-rule-links { padding-left: 1.2em; }
.research-rule-links li + li { margin-top: var(--s-3); }
.research-rule-links li { scroll-margin-top: 100px; }
.research-principles { align-items: start; }
@media (max-width: 800px) { .research-output-list { grid-template-columns: 1fr; } }

@media (max-width: 800px) {
  .research-hero { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .research-hero-copy { display: contents; }
  .research-hero-intro { order: 0; }
  .research-install { order: 1; }
  .research-review-output { order: 2; margin-top: 0; }
  .research-hero-copy > .t-body-s { order: 3; margin-top: 0; }
}

/* Earlier purpose-view components retained for the home-page composition. */
.hard-purpose-hero { align-items: center; gap: var(--s-7); }
.hard-purpose-hero .research-hero-copy { display: block; }
.hard-purpose-hero .o-hero-page-lede { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: var(--lh-snug); max-width: 25ch; }
.hard-purpose-hero .research-hero-copy > .t-body-m { max-width: 55ch; }
.hard-surface-example { padding: 0; overflow: hidden; margin: 0; }
.hard-example-window { padding: var(--s-5); background: var(--bg-tinted); border-bottom: 1px solid var(--hairline); }
.hard-example-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--ink-soft); margin-left: auto; }
.hard-example-slots { display: flex; gap: var(--s-2); margin-block: var(--s-4); flex-wrap: wrap; }
.hard-example-slots span { border: 1px solid var(--hairline); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); font-size: var(--t-body-s); background: var(--surface); }
.hard-example-confirm { padding: var(--s-3); text-align: center; border-radius: var(--button-radius); background: var(--ink); color: var(--surface); font-weight: var(--w-medium); }
.hard-surface-example figcaption { padding: var(--s-5); display: grid; gap: var(--s-3); }
.hard-section-intro { max-width: 74ch; display: grid; gap: var(--s-3); }
.hard-structure-example { display: grid; gap: var(--s-4); margin: 0; }
.hard-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-4); list-style: none; padding: 0; }
.hard-flow li { display: grid; gap: var(--s-3); position: relative; padding: var(--s-4); border: var(--card-border); border-radius: var(--r-2); }
.hard-flow .tag { justify-self: start; }
.hard-flow li:not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--s-3)); top: 50%; background: var(--surface); color: var(--ink); z-index: 1; }
.hard-open-question { border-left-color: var(--ink); }
.hard-six { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); counter-reset: review-question; }
.hard-six li { counter-increment: review-question; }
.hard-six li > strong::before { content: counter(review-question) ". "; }
.hard-six li > p { margin-top: var(--s-2); }
.hard-fit { align-self: flex-start; }
.hard-legacy-anchors { height: 0; }
.hard-purpose-hero > *, .page-research .o-hero-page > * { animation: none; opacity: 1; transform: none; }
@media(max-width:800px) {
 .hard-purpose-hero { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
 .hard-purpose-hero .research-hero-copy { display: block; }
 .hard-purpose-hero .o-hero-page-lede { font-size: 1.5rem; }
 .hard-six { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
 .hard-flow { grid-template-columns: 1fr; }
 .hard-flow li:not(:last-child)::after { content: "↓"; top: auto; bottom: calc(-1 * var(--s-3)); right: 50%; }
 .hard-surface-example figcaption, .hard-example-window { padding: var(--s-4); }
}

/* Adoption overview: two buttons plus five direct routes, using Plot controls. */
.hard-adoption-hero { max-width: var(--w-wide); grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); grid-template-areas: "copy art" "routes routes"; gap: var(--s-5) var(--s-6); align-items: start; }
.hard-adoption-hero .research-hero-copy { grid-area: copy; display: flex; flex-direction: column; gap: var(--s-4); align-self: center; max-width: 32rem; }
.hard-adoption-hero .o-hero-page-title { font-size: clamp(2rem, 3.2vw, 3rem); margin-top: 0; }
.hard-adoption-hero .hard-full-name { color: var(--ink-soft); order: 0; }
.hard-adoption-hero .hard-value { margin-top: var(--s-2); max-width: 22ch; }
.hard-adoption-hero .m-cta-pair { margin-top: var(--s-2); }
.hard-adoption-hero .button { min-height: 44px; }
.hard-demo-video { grid-area: art; margin: 0; min-width: 0; width: 100%; align-self: center; justify-self: stretch; overflow: hidden; border-radius: var(--card-radius); background: #000; }
.hard-demo-video-player { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; }
.hard-entry-links { grid-area: routes; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4) var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.hard-entry-links > div { display: grid; gap: var(--s-1); }
.hard-entry-group { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.hard-entry-group .link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-body-m); }
.hard-feature-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); align-items: start; }
.hard-feature-row > * { min-width: 0; }
.hard-feature-row--review > .stack { order: 2; }
.hard-feature-row--review > .hard-quick-panel { order: 1; }
.hard-quick-panel > .t-eyebrow { margin-bottom: var(--s-4); }
.hard-quick-panel .hard-six { gap: var(--s-4); font-size: var(--t-body-s); }
.hard-quick-panel .hard-six li { padding-top: var(--s-3); }
.hard-stop-note { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.hard-feature-row .hard-flow { gap: var(--s-3); }
.hard-feature-row .hard-flow li { padding: var(--s-3); }
/* Read the motivation first, then inspect the three optional practice steps. */
.hard-method-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.hard-method-layout > * { min-width: 0; }
.hard-method-intro { max-width: 42rem; }
.hard-method-intro > h2 { max-width: 26ch; }
.hard-method-review { padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.hard-method-steps { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); counter-reset: method; }
.hard-method-steps li { min-width: 0; display: grid; grid-template-rows: auto auto 1fr; gap: var(--s-3); align-content: start; counter-increment: method; }
.hard-method-steps li::before { content: counter(method); display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--color-action-text); border-radius: var(--r-full); color: var(--color-action-text); font: 14px var(--font-mono); }
.hard-method-steps strong { color: var(--ink); font-weight: var(--w-medium); }
.hard-method-steps p { margin: 0; }
.hard-method-boundary { max-width: 72ch; }
@supports (grid-template-rows: subgrid) {
 .hard-method-steps li { grid-template-rows: subgrid; grid-row: span 3; }
}
.hard-use-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.hard-use-paths > article { min-width: 0; display: flex; flex-direction: column; }
.hard-use-paths .button { margin-top: auto; white-space: normal; text-align: center; min-height: 44px; }
.hard-use-paths .t-body-s { color: var(--ink-soft); padding-bottom: var(--s-4); }
/* Shared rows keep titles, notes and actions aligned when copy wraps. */
@supports (grid-template-rows: subgrid) {
 /* These cards use page typography, not archetype container queries.
    Size containment would prevent their rows from joining the subgrid. */
 .hard-use-paths > article { display: grid; grid-template-rows: subgrid; grid-row: span 5; gap: var(--s-3); container-type: normal; }
 .hard-use-paths .button { align-self: end; }
}
.hard-tool-dialog { width: min(44rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; margin: auto; padding: var(--s-5); color: var(--ink); background: var(--surface); border: var(--card-border); border-radius: var(--card-radius); }
.hard-tool-dialog::backdrop { background: rgb(0 0 0 / .65); }
.hard-tool-dialog[open] { display: flex; flex-direction: column; gap: var(--s-4); }
.hard-tool-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.hard-tool-header .button { flex-shrink: 0; }
.hard-tool-dialog .code-block { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow-y: auto; }
.hard-tool-dialog [data-hard-copy] { margin-bottom: var(--s-3); }
#method, #quick-six { scroll-margin-top: var(--s-9); }
@media (max-width: 800px) {
 .hard-adoption-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art" "routes"; gap: var(--s-5); }
 .hard-adoption-hero .research-hero-copy { display: flex; gap: var(--s-3); align-self: stretch; max-width: none; }
 .hard-adoption-hero .o-hero-page-title { font-size: clamp(1.8rem, 5vw, 2.5rem); }
 .hard-adoption-hero .hard-value { font-size: var(--t-title-l); }
 .hard-entry-links { gap: var(--s-3); padding-top: var(--s-3); }
 .hard-entry-links > div { width: 100%; }
 .hard-entry-group { column-gap: var(--s-4); }
 .hard-feature-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
 .hard-method-layout { gap: var(--s-6); }
 .hard-method-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
 .hard-method-steps li { grid-row: auto; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--s-2) var(--s-3); }
 .hard-method-steps li::before { grid-column: 1; grid-row: 1 / span 2; }
 .hard-method-steps strong, .hard-method-steps p { grid-column: 2; }
 .hard-use-paths { grid-template-columns: minmax(0, 1fr); }
 .hard-use-paths > article { display: flex; grid-row: auto; }
 .hard-use-paths .button { align-self: stretch; }
 .research-role-grid { grid-template-columns: minmax(0, 1fr); }
 .hard-tool-dialog { padding: var(--s-4); }
 .hard-feature-row--review > .stack, .hard-feature-row--review > .hard-quick-panel { order: initial; }
}
@media (max-width: 420px) {
 .hard-adoption-hero .m-cta-pair { gap: var(--s-2); }
 .hard-adoption-hero .button { padding-inline: var(--s-3); font-size: var(--t-body-s); }
 .hard-entry-group { column-gap: var(--s-3); }
 .hard-entry-group .link { font-size: var(--t-body-s); }
 .hard-quick-panel .hard-six { grid-template-columns: 1fr; }
}