/* /tech/assets/tech-shell.css  --  Tech + Engineering pages on the Atlas site shell (18 Oct 2026)
   Adds only what the site's own classes do not cover. Uses the site's tokens
   (--line --orange --muted --ink --dim --panel from /assets/site.css); no colours of its own. */

/* hero ---------------------------------------------------------------- */
.page-hero .tx-pill{white-space:normal;border-radius:14px;margin-top:24px;max-width:640px}
.hero-aside .tx-aside-title{font-size:26px;line-height:1.25;letter-spacing:-.03em;color:var(--ink);margin:0 0 14px}
.hero-aside p+p{margin-top:12px}
.page-hero .actions{margin-top:30px}
body main .actions a.button.ghost{background:#0a1830;border-color:#25507f;color:var(--ink)}
body main .actions a.button.ghost:hover{background:#0f2242;color:var(--ink);border-color:var(--orange)}

/* sections ------------------------------------------------------------ */
.section.tx-small{padding-block:48px}
.section>.actions{margin-top:30px}
.principle-band+.actions{margin-top:30px}
.principle-band p{max-width:none}
.principle-band .text-link{display:inline;white-space:normal}

/* technology tiles (/tech/) --------------------------------------------- */
.tx-tiles{align-items:stretch}
.tx-tiles .info-card{display:flex;flex-direction:column}
.tx-tiles .info-card p:not(.eyebrow){flex:1}
.tx-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--line);margin-top:24px;padding-top:16px}
.tx-foot .badge{white-space:normal;border-radius:12px;max-width:70%}
.tx-foot .text-link{margin:0;gap:10px;white-space:nowrap;font-size:14px}

/* detail cards (sub pages) ----------------------------------------------- */
.tx-grid4{grid-template-columns:repeat(2,1fr)}

/* flow / layers ("trace") ------------------------------------------------ */
.trace article h3{font-size:22px}
.tx-flow{grid-template-columns:repeat(6,1fr);gap:34px 28px}
.tx-flow>article{grid-column:span 2}
.tx-flow>article.tx-wide{grid-column:span 4}
.tx-sub{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.tx-sub li{font-size:14px;line-height:1.6;color:var(--muted);padding-left:14px;border-left:2px solid var(--orange)}
.tx-sub b{color:var(--ink);font-weight:700}
.tx-flow p{font-size:15px}

.tx-example{margin-top:40px;padding:32px}
.tx-example .eyebrow{margin-bottom:16px}
.tx-q{font-size:20px;line-height:1.55;color:var(--ink);max-width:62ch;margin:0 0 24px}
.tx-roles{list-style:none;margin:0 0 24px;padding:0;columns:2;column-gap:40px}
.tx-roles li{break-inside:avoid;font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.tx-roles b{color:var(--ink);font-weight:700}
.tx-roles-note{border-top:1px solid var(--line);padding-top:18px;margin:0;font-size:14px}

/* two-up panels (/engineering/) --------------------------------------------- */
.tx-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tx-two .info-card h3{margin-bottom:18px}
.tx-two .info-card ul{margin:0;padding-left:20px}
.tx-two .info-card li{font-size:15px;line-height:1.65;color:var(--muted);margin-bottom:12px}
.tx-two .info-card li::marker{color:var(--orange)}
.tx-footnote{margin-top:28px;max-width:760px}

/* narrower screens --------------------------------------------------------- */
@media(max-width:1000px){
  .tx-flow{grid-template-columns:repeat(2,1fr)}
  .tx-flow>article,.tx-flow>article.tx-wide{grid-column:auto}
  .tx-flow>article.tx-wide{grid-column:span 2}
  .tx-roles{columns:1}
}
@media(max-width:760px){
  .tx-two,.tx-grid4{grid-template-columns:1fr}
  .tx-sub{grid-template-columns:1fr}
  .tx-flow{grid-template-columns:1fr}
  .tx-flow>article.tx-wide{grid-column:auto}
  .tx-foot{flex-wrap:wrap}
  .tx-foot .badge{max-width:100%}
  .tx-example{padding:24px}
  .hero-aside .tx-aside-title{font-size:23px}
}