/* GlassHood — Architecture portal.
   The .pd-* product-detail system (fixed sizes/widths). Portal-only additions
   (scope-line, impl-grid, code, can-cannot, detail-block, page-title) follow the
   same type scale: body text 19px, headings 22px, logo 64px, text column
   max-width 800–880px. */
/* Lato from the same two files the site serves (website/FONTS.txt), so the masthead renders the same
   on every page and the page loads nothing from outside its own address. */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/architecture/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/architecture/fonts/lato-700.woff2) format('woff2')}
:root{
  --blue:#0c41cd; --navy:#000055; --orange:#e75a1e;
  --bg:#ffffff; --card:#f7f8fa; --text:#1a1a2e; --sub:#555555;
  --muted:#f0f1f4; --border:#e0e2e8; --max:1120px;
  /* The site's masthead and footer (REQ-GHA-018 clause 14): the same values as the site. */
  --nav-sub:#6b7280; --site-max:1120px; --masthead-h:96px;
}
@media (max-width:900px){:root{--masthead-h:84px}}
@media (max-width:768px){:root{--masthead-h:72px}}
*{box-sizing:border-box}
html{overflow-y:scroll}
body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:"Lato",sans-serif;font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}
/* The page's column lines up with the site's pages: the title starts where theirs does. */
.container{max-width:var(--max);margin:0 auto;padding:64px 24px 96px}

/* Button */
a.button{display:inline-block;padding:12px 20px;border-radius:12px;border:1px solid rgba(0,0,0,.12);
  background:transparent;color:var(--sub);font-weight:500;font-family:inherit;font-size:19px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease}
a.button:hover{background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.12);text-decoration:none}
a.button:focus{outline:none}
a.button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Product-detail page system (.pd-*) */
.pd-page{color:var(--text)}
.pd-header{display:block;margin-bottom:16px}
.pd-logo-link{display:inline-block;text-decoration:none}
.pd-logo{height:64px;width:auto;object-fit:contain;display:block}
.pd-page-title{font-size:22px;font-weight:700;color:var(--navy);margin:14px 0 0;letter-spacing:-.01em}

.pd-hero{font-size:22px;font-weight:400;line-height:1.35;color:var(--text);max-width:none;margin:20px 0 14px;letter-spacing:-.005em}
.pd-hero .accent{color:var(--text)}
.scope-line{font-size:19px;line-height:1.55;color:var(--sub);max-width:none;margin:0 0 28px}

/* Architecture visual (in the Implementation reveal) */
.hero-diagram{margin:18px 0 24px}
.hero-diagram img{display:block;width:100%;height:auto;max-width:none;margin:0 auto}
.diagram-caption{font-size:19px;line-height:1.5;color:var(--sub);max-width:none;margin:12px auto 0;text-align:center}

/* Overview card grid — 2x2 (1-col mobile) */
.pd-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:24px}
@media(min-width:768px){.pd-cards{grid-template-columns:repeat(2,1fr);gap:20px}}
.pd-card,.pd-card *{text-decoration:none!important}
.pd-card{position:relative;overflow:hidden;display:flex;gap:18px;padding:24px;background:#fff;
  border:1px solid var(--border);border-radius:12px;color:inherit;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pd-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06);border-color:var(--blue)}
.pd-card-icon{flex:0 0 auto;width:52px;height:52px;border-radius:12px;background:rgba(0,0,85,.06);
  color:var(--blue);display:flex;align-items:center;justify-content:center;transition:transform .18s ease}
.pd-card:hover .pd-card-icon{transform:scale(1.05)}
.pd-card-body{flex:1;min-width:0}
.pd-card-title{font-size:22px;font-weight:700;margin:0 0 10px;color:var(--text);letter-spacing:-.01em}
.pd-card-summary{font-size:19px;line-height:1.5;color:var(--sub);margin:0}
.pd-card-summary::after{content:"Click to read the section →";display:block;margin-top:14px;
  font-size:19px;font-weight:500;color:rgba(0,0,0,.25);transition:opacity .15s ease}
.pd-card:hover .pd-card-summary::after{opacity:0}
.pd-card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s ease;pointer-events:none;border-radius:inherit}
.pd-card:hover .pd-card-overlay{opacity:1}
.pd-card-overlay-text{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;
  padding:10px 14px;border-radius:12px;font-size:19px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.12);white-space:nowrap}

/* Quiet live-view line */
.live-view-note{font-size:19px;line-height:1.55;color:var(--sub);max-width:none;margin:22px 0 0}
.arch-cta{margin:24px 0 0}

/* Progressive disclosure */
.pd-hidden-until-reveal{display:none}
.pd-page.revealed .pd-hidden-until-reveal{display:block;margin-top:44px}

/* Detail sections */
.pd-section{padding:28px 0;scroll-margin-top:24px}
.pd-section:first-of-type{padding-top:8px}
.pd-section h2{font-size:22px;font-weight:700;color:var(--blue);margin:0 0 18px;letter-spacing:-.01em}
.pd-section p{font-size:19px;line-height:1.55;color:var(--sub);max-width:none;margin:0 0 16px}

/* Lists */
ul.tight{margin:0 0 16px;padding-left:24px;max-width:none}
ul.tight li{font-size:19px;line-height:1.55;color:var(--sub);margin:8px 0}

/* In-reveal note */
.note{font-size:19px;line-height:1.55;color:var(--sub);max-width:none;margin:8px 0 16px;padding:16px 20px;
  background:var(--muted);border-radius:8px}

/* Code block (sanitized config) — monospace */
.code-label{font-size:19px;font-weight:700;color:var(--navy);margin:18px 0 6px}
pre.code{background:#f4f6fa;border-left:3px solid var(--blue);border-radius:4px;padding:18px 20px;
  font-size:16px;line-height:1.55;font-family:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace;
  color:#1a1a2e;overflow-x:auto;margin:8px 0;max-width:none;white-space:pre}

/* CAN / CANNOT threat model */
.can-cannot{display:grid;grid-template-columns:1fr;gap:14px;margin:10px 0 18px;max-width:none}
@media(min-width:720px){.can-cannot{grid-template-columns:1fr 1fr}}
.cc-col{padding:20px 22px;border-radius:8px;font-size:19px;line-height:1.55}
.cc-can{background:rgba(12,65,205,.06);border:1px solid rgba(12,65,205,.18)}
.cc-cannot{background:rgba(231,90,30,.06);border:1px solid rgba(231,90,30,.2)}
.cc-col h4{margin:0 0 10px;font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cc-can h4{color:var(--blue)}
.cc-cannot h4{color:var(--orange)}
.cc-col ul{margin:0;padding-left:22px}
.cc-col li{margin:7px 0;color:var(--text)}

/* Implementation-detail bindings grid */
.impl-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 18px;max-width:none}
@media(min-width:680px){.impl-grid{grid-template-columns:1fr 1fr}}
.impl-item{display:flex;gap:16px;padding:14px 18px;background:rgba(0,0,0,.025);border-radius:6px;font-size:19px;line-height:1.55}
.impl-item>strong{flex:0 0 130px;color:var(--navy)}
/* On phones the label sits above its value, so a long name such as app.glasshood.ai never widens the page. */
@media(max-width:480px){.impl-item{flex-direction:column;gap:2px}.impl-item>strong{flex:none}}

/* Collapsible "detail" block (identity mechanism) */
details.detail-block{margin:10px 0;max-width:none}
details.detail-block>summary{cursor:pointer;padding:6px 0;font-size:19px;font-weight:700;color:var(--navy);list-style:none}
details.detail-block>summary::-webkit-details-marker{display:none}
details.detail-block>summary::before{content:"\25B8\00a0";color:var(--navy)}
details.detail-block[open]>summary::before{content:"\25BE\00a0"}
details.detail-block>div{padding:4px 0 0}

footer{margin:48px 0 36px;padding-top:20px;border-top:1px solid var(--border);font-size:17px;line-height:1.55;color:var(--sub);max-width:none}

@media(max-width:768px){.container{padding:40px 24px 64px}.pd-logo{height:52px}}

/* --- Architecture-reference eyebrow + integrated diagrams (REQ-GHA-015 merge) --- */
.pd-eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin:14px 0 0}
.pd-eyebrow::before{content:"";width:24px;height:2px;background:var(--blue);opacity:.55;display:inline-block}

/* Borderless diagrams. Overview spans the card width; detail scrolls on narrow screens. */
.arch-diagram{margin:6px 0 30px}
.arch-diagram--overview svg{display:block;width:100%;height:auto}
.arch-diagram--detail{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Zone-row detail uses uniform fixed-height boxes sized for the 1070px design width — below it
   the grid compresses and nowrap sublabels spill out of the 34px boxes (the TestRobin-documented
   failure mode). Pin the composition (scoped to .arch-flow, NOT >div, so the legend stays fluid)
   and let narrower viewports use the contained scroll above. */
.arch-diagram--detail .arch-flow{min-width:1070px}
/* detail diagram is now an HTML flexbox flow; small inline arrow svgs render at natural size */
.arch-diagram--detail svg{width:auto;height:auto;min-width:0}
.arch-detail-flow{max-width:880px;margin:0 auto}
.arch-legend{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 18px;
  margin-top:10px;font-size:12px;color:var(--sub)}
.arch-legend span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.arch-legend .ln{width:26px;height:0;border-top:1.8px solid #0c41cd;display:inline-block}
.arch-legend svg{overflow:visible}
.arch-legend .sw i{width:11px;height:11px;border-radius:3px;display:inline-block}
.arch-legend .bk{font-family:ui-monospace,monospace;font-size:9px;font-weight:700;padding:2px 6px;border-radius:8px}

/* ColdVault boxes — persistent gray CTA, hero-card hover parity (lift + shadow + orange border,
   constant 1px apparent border via non-scaling-stroke on the scaled SVG). :focus-visible mirrors
   :hover for keyboard parity. One text element per CTA: only color/fill transitions. */
.cv-link{cursor:pointer;text-decoration:none;transform-box:fill-box;transform-origin:center;transition:transform .18s ease,filter .18s ease}
.cv-link:hover,.cv-link:focus-visible{text-decoration:none;transform:translateY(-2px);filter:drop-shadow(0 6px 20px rgba(0,0,0,.06))}
.cv-link:focus-visible,.cv-html-link:focus-visible{outline:2px solid #e75a1e;outline-offset:2px}
.cv-link text{text-decoration:none}
.cv-link .cv-box{transition:stroke .15s ease}
.cv-link:hover .cv-box,.cv-link:focus-visible .cv-box{stroke:#e75a1e;stroke-width:1;vector-effect:non-scaling-stroke}
.cv-link .cv-hover-btn rect{opacity:0;transition:opacity .15s;fill:#e75a1e}
.cv-link:hover .cv-hover-btn rect,.cv-link:focus-visible .cv-hover-btn rect{opacity:1}
.cv-link .cv-cta{fill:#6e7582;transition:fill .15s}
.cv-link:hover .cv-cta,.cv-link:focus-visible .cv-cta{fill:#fff}
.cv-html-link{cursor:pointer;text-decoration:none;display:block;border-radius:16px;transition:transform .18s ease,box-shadow .18s ease}
.cv-html-link:hover,.cv-html-link:focus-visible{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.cv-html-link>div{transition:border-color .15s}
.cv-html-link:hover>div,.cv-html-link:focus-visible>div{border-color:#e75a1e}
.cv-cta-tab{position:absolute;right:18px;top:-11px;background:#fff;padding:0 9px}
/* Narrow viewports: the tab label and the CTA can't share the border line — drop the CTA into
   the zone flow as a right-aligned line instead of colliding with the truncated tab. */
@media(max-width:640px){.cv-cta-tab{position:static;display:block;background:transparent;padding:0;margin:-8px 0 12px;text-align:right}}
.cv-cta-html{color:#6e7582;position:relative;display:inline-block;z-index:1;transition:color .15s}
.cv-cta-html::before{content:"";position:absolute;inset:-3px -8px;background:#e75a1e;border-radius:6px;opacity:0;transition:opacity .15s;z-index:-1}
.cv-html-link:hover .cv-cta-html,.cv-html-link:focus-visible .cv-cta-html{color:#fff}
.cv-html-link:hover .cv-cta-html::before,.cv-html-link:focus-visible .cv-cta-html::before{opacity:1}

/* Tool names read as code (MCP section). */
.pd-section code{font-family:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace;font-size:.9em;color:var(--navy)}

/* ==== masthead and footer: start ====
   website/public/assets/site.css carries this block word for word; a test keeps them equal. */
.nav{background:#fff;background-image:linear-gradient(to left,var(--border),transparent 95%);
  background-size:100% 1px;background-position:bottom;background-repeat:no-repeat}
.nav-in{max-width:var(--site-max);margin:0 auto;padding:0 24px;height:var(--masthead-h);
  display:flex;align-items:center}
.nav-logo{display:block;flex-shrink:0}
/* The logo is as tall as 9robots.ai's: 43 px, and 39 px below 768 px. Its image is cut so the
   icon and the word have 9robots.ai's proportions and fill the same share of the height. It is
   always shown at full strength, here and in the footer: never faded, not changed when pointed at. */
.nav-logo img{display:block;height:43px;width:auto}
@media (max-width:767px){.nav-logo img{height:39px}}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{padding:6px 12px 4px;border-bottom:2px solid transparent;color:var(--nav-sub);
  font-size:16px;font-weight:500;white-space:nowrap;text-decoration:none;transition:color .15s ease}
.nav-links a:hover{color:var(--orange);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.nav-app{display:flex;align-items:center;gap:16px;margin-left:28px;flex-shrink:0}
.nav-open{display:inline-block;padding:8px 18px;border:1px solid rgba(0,0,0,.12);border-radius:12px;
  color:var(--sub);font-size:16px;font-weight:500;white-space:nowrap;text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease}
.nav-open:hover{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.12);text-decoration:none}
.nav-links a:focus-visible,.nav-open:focus-visible,.nav-logo:focus-visible,.site-footer-link:focus-visible{
  outline:2px solid var(--navy);outline-offset:2px}
.page-title{margin:0 0 16px;font-size:28px;line-height:1.25;font-weight:700;color:var(--blue)}
.footer{margin:0;padding:0;border-top:1px solid var(--border);background:var(--muted);
  font-size:16px;line-height:1.6;color:var(--sub)}
.site-footer-row{max-width:var(--site-max);margin:0 auto;padding:40px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:24px}
.site-footer-brand img{display:block;height:28px;width:auto}
.site-footer-brand p{margin:10px 0 0;font-size:14px;color:var(--nav-sub)}
.site-footer-links{display:flex;flex-wrap:wrap;gap:8px 28px}
.site-footer-link{font-size:14px;color:var(--nav-sub);text-decoration:none;transition:color .15s ease}
.site-footer-link:hover{color:var(--orange);text-decoration:none}
/* Below 768 px the logo and Log in share the first row and the page links take a
   second, so nothing is squeezed (the logo never shrinks); Log in keeps 24 px from the logo.
   From 768 px one row holds everything with at least 32 px between the logo and the links. */
@media (max-width:767px){
  .nav-in{height:auto;flex-wrap:wrap;align-items:center;row-gap:10px;padding-top:14px;padding-bottom:8px}
  .nav-logo{margin-right:24px}
  .nav-links{order:3;width:100%;gap:4px;margin-left:-10px}
  .nav-links a{padding:6px 10px 4px}
  .nav-app{flex-direction:column-reverse;align-items:flex-end;gap:4px;margin-left:auto}
  .site-footer-row{flex-direction:column;align-items:flex-start}
}
/* On phones up to 480 px Log in is a little smaller and keeps at least 12 px from the logo, so
   the logo, as tall as 9robots.ai's, and Log in share the first row from 348 px up; narrower
   phones give Log in a row of its own. */
@media (max-width:480px){
  .nav-logo{margin-right:12px}
  .nav-open{padding:6px 12px;font-size:15px}
}
/* ==== masthead and footer: end ==== */