/* Technology — scoped to /technology/. vision-591: only the rules the rendered page uses; site tokens and the site type
   scale throughout; the hero is the shared hero() (hero--tech); status words remain in the catalog key; individual tools use accessible dots.
   Removed with this pass (no markup renders them since annotation 579): the legend story, the ESL story, the orbit,
   the "build a table" demo, the architecture stories, the menu-tool heading. */

/* ---- the hero: the six-area map sits in the hero's aside; the green catalog kicker closes it, directly above the bar ---- */
.hero--tech { padding-bottom:var(--s-4); }
.hero--tech .hero__after { margin-top:var(--s-6); }
.hero--tech .hero__body { max-width:56ch; margin-top:var(--s-4); color:var(--ink); }
/* ---- icons: solid tiles in each area's accent ---- */
.page-technology .app-icon { background:var(--accent, var(--forest)); color:var(--white); border-color:var(--accent, var(--forest)); box-shadow:none; }
.page-technology .app-icon svg { stroke-width:2; }
.page-technology .pill > .icon { box-sizing:content-box; padding:5px; border-radius:var(--r-s); background:var(--forest); color:var(--white); stroke-width:2; }

/* ---- the catalog intro: heading and copy beside the always-visible filters ---- */
.page-technology .section__head { margin-bottom:var(--s-5); }
.catalog-intro { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.catalog-intro .section__head { margin:0; }
.catalog-intro__guide { font-size:var(--t-caption); color:var(--ink-soft); margin:16px 0 0; }
.catalog-intro .filter-panel { padding:12px; margin:0; border-radius:var(--r-l); }
.catalog-intro .filter-row { display:block; padding:0; }
.catalog-intro .filter-row + .filter-row { margin-top:8px; padding-top:8px; }
.catalog-intro .filter-label { display:block; font-size:.75rem; margin-bottom:5px; }
.catalog-intro .pills { gap:4px; }
.catalog-intro .pill { padding:4px 8px; min-height:30px; font-size:.75rem; gap:4px; border-radius:999px; }
.catalog-intro .pill__count { font-size:.7rem; }
.catalog-intro .filter-bottom { margin-top:8px; padding-top:8px; gap:8px; font-size:.75rem; }
.catalog-intro .filter-result, .catalog-intro .filter-clear { font-size:.75rem; margin:0; }
.page-technology .catalog__head { margin:14px 0; }
@media (max-width:760px) { .catalog-intro { grid-template-columns:1fr; gap:18px; } }

/* ---- status: one vocabulary with the cards (Running · Test & validation · Concept), visible in the catalog key ---- */
.tech-status-key { display:flex; flex-wrap:wrap; gap:8px 20px; margin:20px 0 0; font-size:var(--t-caption); line-height:1.6; }
.tech-status-key span { display:flex; align-items:center; gap:8px; }

/* ---- the six areas: a grid of cards; an open area spans the row ---- */
.page-technology .area-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
.page-technology .area[open] { grid-column:1/-1; }
.page-technology .area__summary { display:grid; grid-template-columns:40px minmax(0,1fr) 24px; grid-template-rows:1fr auto; gap:4px 12px; padding:18px 16px; min-height:116px; }
.page-technology .area__summary > .app-icon { width:40px; height:40px; grid-row:1/3; }
.page-technology .area__preview, .page-technology .area__running { display:none; }
.page-technology .area__name { font-size:var(--t-h4); line-height:1.25; }
.page-technology .area__count { display:block; grid-column:2; grid-row:2; font-size:var(--t-caption); margin:0; }
.page-technology .area__summary > .fold__mark { grid-column:3; grid-row:1/3; }
.page-technology .area[open] > .area__summary > .fold__mark::after { transform:rotate(0deg); }
.page-technology .tech-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.page-technology .tech-card__summary { grid-template-columns:minmax(0,1fr) 20px; min-height:52px; padding:12px 14px; gap:10px; }
.page-technology .tech-card__title { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; justify-content:space-between; }
@media (max-width:1023px) { .page-technology .area-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:599px) { .page-technology .area-list, .page-technology .tech-grid { grid-template-columns:1fr; } .page-technology .area__summary { min-height:94px; } }

/* ---- technology for each step: three folds in the step colours ---- */
.page-technology .step-col { padding:14px; align-self:start; }
.page-technology .step-col__head { cursor:pointer; }
.page-technology .step-col__head a { pointer-events:none; text-decoration:none; }
.page-technology .step-col p { margin:8px 0; }
.page-technology .tools-list__item { padding:8px; gap:8px; justify-content:space-between; }
@media (max-width:760px) { .page-technology .step-cols { grid-template-columns:1fr; } }

/* vision-592: the supplied fieldbook's folding paper and line art, on the site's tokens. */
.hero--tech .hero__copy { max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-6); }
.hero--tech .hero__copy h1 { grid-row:span 2; }
.hero--tech .hero__sub, .hero--tech .hero__body { margin:0; }
.hero--tech .hero__copy .btn-row { grid-column:2; }
.fieldbook { padding:var(--s-5) var(--s-2); margin-bottom:var(--s-6); }
.fieldbook__book { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); background:transparent; padding:var(--s-4) 0; filter:drop-shadow(0 14px 9px var(--hairline)); perspective:1800px; }
.fieldbook [hidden] { display:none; }
.fieldbook__page { --fold:4deg; --turn:-8deg; position:relative; min-width:0; height:240px; display:flex; flex-direction:column; align-items:center; padding:var(--s-6) var(--s-2) var(--s-3); border:0; border-right:1px solid var(--hairline); color:var(--forest); background:linear-gradient(90deg,var(--cream),var(--cream-2)); box-shadow:inset -10px 0 18px -14px var(--ink); transform:rotateY(var(--turn)) skewY(var(--fold)); cursor:pointer; transition:transform var(--d-hover) var(--ease); animation:fieldbook-unfold var(--d-reveal) var(--ease) both; }
.fieldbook__page:nth-child(even) { --fold:-4deg; --turn:8deg; background:linear-gradient(90deg,var(--cream-2),var(--cream)); box-shadow:inset 10px 0 18px -14px var(--ink); }
.fieldbook__page:hover, .fieldbook__page:focus-visible { transform:translateY(-8px); z-index:1; }
.fieldbook__tab { position:absolute; top:0; left:var(--s-3); background:var(--gold); color:var(--forest); padding:var(--s-2); font:700 var(--t-caption) var(--font-head); }
.fieldbook__page .t-h4 { margin:var(--s-3) 0 0; }
.fieldbook__art { display:block; width:100%; height:120px; color:var(--ink-soft); margin-top:auto; }
.fieldbook__hint { font:700 var(--t-caption) var(--font-head); }
.fieldbook__spread { display:grid; grid-template-columns:1fr 2fr; background:var(--cream); border:1px solid var(--hairline); box-shadow:var(--shadow-2); }
.fieldbook__cover { display:flex; flex-direction:column; align-items:center; padding:var(--s-6); border-left:var(--s-2) solid var(--forest); background:var(--cream-2); }
.fieldbook__cover .fieldbook__art { height:210px; }
.fieldbook__copy { padding:var(--s-6); }
.fieldbook__tools { list-style:none; margin:var(--s-4) 0; padding:0; }
.fieldbook__tools li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-2); padding-block:var(--s-2); border-bottom:1px solid var(--hairline); font-size:var(--t-body-s); }
@keyframes fieldbook-unfold { from { transform:rotateY(65deg) skewY(var(--fold)); opacity:0; } to { transform:rotateY(0) skewY(var(--fold)); opacity:1; } }
@media(max-width:767px) {
 .hero--tech .hero__copy { display:block; }
 .hero--tech .hero__body { margin-block:var(--s-4); }
 .fieldbook__book { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:var(--s-4); }
 .fieldbook__page { height:184px; }
 .fieldbook__art { height:80px; }
 .fieldbook__spread { grid-template-columns:1fr; }
 .fieldbook__cover { display:none; }
 .fieldbook__copy { padding:var(--s-4); }
}
@media(prefers-reduced-motion:reduce) { .fieldbook__page { animation:none; transition:none; } }
@media print { .fieldbook__page { animation:none; transform:none; } .fieldbook__spread[hidden] { display:block; } }
/* Same page gutter as the other main pages; the two-column title treatment stays. */
.page-technology .hero--tech:not(:has(.hero__aside)) .hero__grid { max-width:var(--container); }
.page-technology .area, .page-technology .area:hover, .page-technology .area[open] { background:transparent; border:0; border-radius:0; box-shadow:none; }
.page-technology .area__summary { background:transparent; }

.technology-wordmark { color:var(--sage); font-family:var(--font-body); font-weight:700; letter-spacing:-.05em; }
.fieldbook__page { border-bottom:7px solid var(--forest); border-top:3px solid var(--forest); box-shadow:inset -10px 0 18px -14px var(--ink),0 4px 0 var(--forest-2); }
.fieldbook__page:nth-child(even) { box-shadow:inset 10px 0 18px -14px var(--ink),0 4px 0 var(--forest-2); }
.fieldbook__page:first-child { border-left:5px solid var(--forest); }.fieldbook__page:last-child { border-right:5px solid var(--forest); }
.fieldbook__cover { padding:var(--s-4); }.fieldbook__cover .fieldbook__art { height:120px; }
.fieldbook__copy { padding:var(--s-4); }.fieldbook__copy .t-lead { font-size:var(--t-body-s); margin-block:var(--s-2); }.fieldbook__tools { margin:var(--s-2) 0; }.fieldbook__tools li { padding-block:var(--s-1); }.fieldbook__copy .btn { min-height:36px; padding:var(--s-2) var(--s-3); font-size:var(--t-body-s); }
.fieldbook__copy .btn-row { margin-top:var(--s-2); }
@media(min-width:768px) { .fieldbook__spread { min-height:272px; } }
/* Single-step chapter navigation; paper edges with projecting gold clips. */
.technology-wordmark { color:var(--pass); }
.fieldbook__page { border-top:0; border-bottom:6px solid var(--forest); border-bottom-left-radius:3px 1px; border-bottom-right-radius:2px 4px; }
.fieldbook__page::after { content:""; position:absolute; bottom:-4px; left:2px; right:2px; height:4px; opacity:.55; background:repeating-linear-gradient(175deg,var(--cream-2) 0 1px,transparent 1px 5px); pointer-events:none; }
.fieldbook__tab { top:-9px; border-radius:3px 3px 1px 1px; box-shadow:inset 0 2px 0 var(--cream-2),2px 3px 3px var(--hairline); }
.fieldbook__page:hover, .fieldbook__page:focus-visible { transform:translateY(-12px) rotateY(var(--turn)) skewY(var(--fold)) scale(1.025); z-index:2; }
.page-technology .area__summary { padding:var(--s-2) var(--s-3); gap:var(--s-3); min-height:0; grid-template-rows:auto; }
.page-technology .area__summary > .app-icon, .page-technology .area__summary > .fold__mark { grid-row:1; }
.page-technology .area__title { display:flex; flex-direction:column; gap:var(--s-1); }
.page-technology .area__name { margin:0; }
.page-technology .area__count { display:block; margin:0; }
.page-technology .area-list { gap:var(--s-2) var(--s-4); }

/* Round nine: unboxed steps and tool rows; status dots lead the titles. */
.page-technology .step-col, .page-technology .tech-card, .page-technology .tech-card:hover, .page-technology .tech-card[open] { background:transparent; border:0; border-radius:0; box-shadow:none; }
.page-technology .tech-card:target { outline:2px solid var(--gold); outline-offset:2px; }
.page-technology .tech-card__summary { grid-template-columns:10px minmax(0,1fr); min-height:44px; padding:var(--s-2) 0; align-items:center; }
.page-technology .tech-card__summary > .cap-status { margin:0; }
.page-technology .tech-card__title { display:block; }
.page-technology .tech-card__title .fold__mark { display:inline-flex; vertical-align:middle; margin-left:var(--s-2); }
.page-technology .tech-card__body { padding-inline:22px; }

/* Round 10: supplied table navigation beside the introductory copy. */
.hero--tech .hero__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--s-6); }
.hero--tech .hero__copy { display:block; }
.hero--tech .hero__copy h1 { font-size:clamp(2.3rem,4.5vw,4.5rem); }
.hero--tech .hero__sub { margin-top:var(--s-4); }
.hero--tech .hero__copy .btn-row { margin-top:var(--s-5); }
.hero--tech .hero__aside { width:100%; min-width:0; }
.technology-wordmark { display:inline-block; position:relative; white-space:nowrap; padding-right:.5em; }
.technology-wordmark > span:first-child { color:#bd591e; }
.technology-wordmark > span:nth-child(2) { color:var(--pass); }
.technology-wand { position:absolute; width:.55em; height:.55em; right:-.06em; top:.12em; fill:none; stroke:var(--gold-ink); stroke-width:2.5; stroke-linecap:round; transform-origin:25% 80%; animation:wand-arrive 1100ms ease-out both; }
.technology-wordmark > span { animation:wordmark-arrive 850ms ease-out both; }
.technology-wordmark > span:nth-child(2) { animation-delay:100ms; }
@keyframes wand-arrive { from { opacity:0; transform:translate(-.15em,.1em) rotate(-25deg); } to { opacity:1; transform:none; } }
@keyframes wordmark-arrive { from { opacity:.2; } to { opacity:1; } }
.page-technology .area__summary { grid-template-columns:44px minmax(0,1fr); padding:var(--s-3); gap:var(--s-3); }
.page-technology .area__summary > svg { width:44px; height:44px; }
.page-technology .area__name { font-size:var(--t-h4); }
.page-technology .area__name .fold__mark { display:inline-flex; vertical-align:middle; margin-left:8px; width:24px; height:24px; }
.page-technology .area__count { font-size:var(--t-caption); }
@media(max-width:640px) { .hero--tech .hero__grid { grid-template-columns:1fr; gap:var(--s-3); } .hero--tech .hero__aside { max-width:480px; margin-inline:auto; } }
@media(prefers-reduced-motion:reduce) { .technology-wand, .technology-wordmark > span { animation:none; } }
.page-technology .area[open] > .area__summary .area__name .fold__mark::after { transform:rotate(0deg); }

/* Catalog browsing: illustration, horizontal filters, then area navigation. */
.page-technology .hero--tech h1 { font-size:clamp(38px,5.55vw,68px); }
.technology-wordmark { padding-right:.55em; }
.technology-wordmark .wand-letters { color:var(--ink); animation:none; }
.technology-wordmark .wand-letter { color:var(--ink); transition:color .2s; animation:none; }
.technology-wordmark .wand-letter.is-gold { color:var(--gold); }
.technology-wordmark .technology-wand { width:.65em; height:.65em; left:0; right:auto; top:0; animation:none; stroke:none; overflow:visible; }
.catalog .catalog-intro { display:block; }
.catalog .filter-panel { width:100%; margin:30px 0 24px; padding:18px 0; border-block:1px solid var(--hairline); }
.catalog .filter-row { display:flex; align-items:flex-start; gap:18px; }
.catalog .filter-row .pills { flex:1; }
.catalog .filter-label { padding-top:8px; min-width:64px; }
.catalog .pill { display:inline-flex; gap:7px; align-items:center; }
.catalog .pill .capability-status { flex:none; }
.technology-nav { display:none!important; }
.technology-nav.is-catalog-past { display:block!important; position:fixed!important; left:12px; top:var(--catalog-nav-top,100px)!important; width:126px; z-index:85; background:var(--cream,#fbf8f0); border:1px solid var(--hairline); border-radius:12px; padding:8px; }
.technology-nav .step-rail__row { display:flex; flex-direction:column; align-items:stretch; gap:4px; width:100%; padding:0; }
.technology-nav .step-rail__item { justify-content:flex-start; padding:8px 4px; }
@media(min-width:900px){.catalog .area-list,.catalog .catalog__head,.catalog .catalog__empty{margin-left:125px}}
@media(max-width:899px){.technology-nav.is-catalog-past{width:56px;left:2px;padding:4px}.technology-nav .step-rail__name{display:none}.technology-nav .step-rail__item{justify-content:center}.catalog .area-list,.catalog .catalog__head{margin-left:44px}}
@media(max-width:479px){.catalog .filter-row{display:block}.catalog .filter-label{display:block;margin-bottom:8px}.catalog .pills{gap:6px}.catalog .pill{font-size:12px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.technology-wordmark .wand-letter{color:var(--gold)}.technology-wand{display:none}}

/* Area navigation lives in the book and sidebar; sections remain readable. */
.page-technology .area-list{display:block}
.page-technology .area{margin-block:32px}
.page-technology .area__summary{cursor:default;padding:0 0 12px}
.page-technology .area__content{display:block;padding:0}
.page-technology .area[hidden]{display:none}

.catalog-intro>.section__head{text-align:center;display:block}.page-technology .area{margin-block:22px}.page-technology .area__means{margin:0 0 10px;line-height:1.45}.page-technology .tech-grid{row-gap:2px}.page-technology .tech-card__summary{min-height:34px;padding-block:5px;line-height:1.3}

.tech-reference{padding-top:28px}.tech-reference .reference-heading h1{font-size:clamp(32px,4.7vw,64px)}.tech-explorer{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;max-width:1050px;margin:auto}.tech-explorer__caption{text-align:center;color:var(--ink-soft);font-size:14px;margin-top:12px}.tech-explorer__detail ul{list-style:none;padding:0;margin:20px 0}.tech-explorer__detail li{padding:16px 0;border-block-start:1px solid var(--hairline)}.tech-explorer__detail li:before{content:'✓';margin-right:16px;color:var(--forest)}.tech-explorer__detail .t-lead{font-size:20px}.catalog .catalog-intro>.section__head{width:100%;max-width:none;margin-inline:auto;text-align:center}.catalog .catalog-intro>.section__head h2{width:100%;max-width:none;margin-inline:auto}.technology-wordmark{padding-right:0}.technology-wordmark .technology-wand{position:absolute!important;transform:none!important;visibility:hidden;pointer-events:none}.technology-wordmark.is-animating .technology-wand{visibility:visible}@media(max-width:700px){.tech-explorer{grid-template-columns:1fr;gap:24px}.tech-explorer>div:first-child{max-width:440px;margin:auto}.tech-reference .reference-heading h1{font-size:32px}.tech-explorer__detail{padding-inline:12px}}

.catalog-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:center;gap:20px}.catalog-workspace .filter-panel{margin:0;padding:12px 0;border:0}.catalog-workspace .filter-row{display:block;padding:6px 0}.catalog-workspace .filter-label{display:block;padding:0 0 5px}.catalog-workspace .pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.catalog-workspace .pill{font-size:11px;min-height:30px;padding:4px 5px;gap:3px;border-radius:6px;justify-content:space-between}.catalog-workspace .pill__count{font-size:10px}.catalog-workspace .filter-bottom{font-size:11px;margin-top:8px;padding-top:8px}.catalog-workspace .filter-result{font-size:11px}.catalog-perspective{perspective:1500px}.catalog-workspace .mm-catalog{max-width:746.2px;transform:rotateX(30deg);transform-origin:center center}.catalog-workspace .mm-catalog__entry{min-height:100px}.catalog-workspace .mm-catalog__name{font-size:18px}@media(max-width:900px){.catalog-workspace{grid-template-columns:1fr}.catalog-workspace .filter-panel{max-width:700px;margin:auto;width:100%}.catalog-workspace .pills{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-workspace .mm-catalog{transform:rotateX(12deg)}}@media(max-width:500px){.catalog-workspace .pills{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-workspace .mm-catalog{transform:none}}

@media(max-width:900px){.catalog-workspace .catalog-perspective{grid-row:1}.catalog-workspace .filter-panel{grid-row:2}}