/* OpenClinicalHistory — components
   The repeated blocks inside sections. Their grid containers
   (.cols, .split, .os-two, .bio-grid) live in layout.css. */

/* ---- record vs person panels ---- */
.panel{border:1px solid var(--line); border-radius:14px; padding:26px; background:var(--film); position:relative; overflow:hidden}
.panel .h{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:18px}
.panel.record{background:#080b12}
.panel.record .h{color:var(--bone-dim)}
.panel.record .lines{font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:2.0;
  color:#66738a; margin:0; white-space:pre-wrap}
.panel.record::after{content:""; position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(180deg, transparent, #080b12 88%)}
.panel.record .more{position:absolute; left:26px; bottom:20px; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--bone-dim)}
.panel.person{border-top:2px solid var(--amber)}
.panel.person .h{color:var(--amber)}
.panel.person ul{list-style:none; margin:0; padding:0}
.panel.person li{padding:12px 0; border-top:1px solid var(--line);
  font-family:"Newsreader",Georgia,serif; font-size:20px; color:var(--bone-bright)}
.panel.person li:first-child{border-top:0}
.panel.person .foot{margin:18px 0 0; font-size:15px; color:var(--bone)}

/* ---- is / isn't cards ---- */
.card{background:var(--film); border:1px solid var(--line); border-radius:14px; padding:26px}
.card.is{border-top:2px solid var(--amber)}
.card.isnt{border-top:2px solid var(--line-2)}
.card h3{font-size:15px; letter-spacing:.02em; margin:0 0 16px; color:var(--bone-bright)}
.card.isnt h3{color:var(--bone-dim)}
.card ul{list-style:none; margin:0; padding:0}
.card li{padding:10px 0 10px 26px; position:relative; font-size:15.5px; border-top:1px solid var(--line)}
.card li:first-child{border-top:0}
.card.is li::before{content:"+"; position:absolute; left:2px; color:var(--amber); font-family:"IBM Plex Mono",monospace}
.card.isnt li::before{content:"\2212"; position:absolute; left:2px; color:var(--bone-dim); font-family:"IBM Plex Mono",monospace}

/* ---- two-up info cards ---- */
.os-card{border:1px solid var(--line); border-radius:14px; padding:24px; background:var(--film)}
.os-card .h{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:12px}
.os-card p{margin:0; font-size:15.5px; color:var(--bone)}

/* ---- pipeline ---- */
.pipe{position:relative; margin-top:44px; padding-left:8px}
.pipe-rail{position:absolute; left:23px; top:12px; bottom:12px; width:2px; background:var(--line)}
.stage{position:relative; display:grid; grid-template-columns:48px 1fr; gap:26px;
  padding:22px 0 34px; opacity:.34; transform:translateY(14px); transition:opacity .6s, transform .6s}
.stage.lit{opacity:1; transform:none}
.node{position:relative; z-index:2; width:48px}
.node .num{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--bone-dim); position:absolute; left:0; top:26px}
.node .ring{width:16px; height:16px; border-radius:50%; border:2px solid var(--line-2);
  background:var(--ink); margin:2px 0 0 15px; transition:.5s}
.stage.lit .node .ring{border-color:var(--amber); background:var(--amber);
  box-shadow:0 0 18px 3px rgba(255,158,46,.55)}
.stage.lit .node .num{color:var(--amber)}
.stage-body h3{font-size:20px; margin:0 0 8px}
.stage-body p{margin:0 0 14px; color:var(--bone); max-width:56ch; font-size:16px}
.chip{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  color:var(--bone-dim); background:var(--film2); border:1px solid var(--line);
  border-radius:7px; padding:6px 11px}
.chip .k{color:var(--amber-2)}
.pipe-payoff{margin-top:10px; padding:22px 24px; border-radius:14px;
  background:linear-gradient(90deg, rgba(255,158,46,.10), rgba(255,158,46,.02));
  border:1px solid rgba(255,158,46,.28); font-size:17px; color:var(--bone-bright)}
@media(max-width:620px){
  .stage{grid-template-columns:36px 1fr; gap:16px}
  .pipe-rail{left:17px} .node{width:36px} .node .ring{margin-left:9px} .node .num{font-size:11px}
}

/* ---- trace rows ---- */
.trace{margin-top:34px; border:1px solid var(--line); border-radius:14px; background:var(--film); overflow:hidden}
.trace-row{display:grid; grid-template-columns:150px 1fr; gap:0; border-top:1px solid var(--line)}
.trace-row:first-child{border-top:0}
.trace-row .k{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim); padding:18px 20px; background:#080b12;
  border-right:1px solid var(--line)}
.trace-row .v{padding:18px 22px; font-size:15.5px; color:var(--bone); overflow-wrap:anywhere}
.trace-row .v.raw{font-family:"Newsreader",Georgia,serif; font-size:18px; color:#9daabf; font-style:italic}
.trace-row .v.code{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--bone-bright)}
.trace-row .v .k2{color:var(--amber-2)}
.trace-row.out{background:linear-gradient(90deg, rgba(255,158,46,.09), rgba(255,158,46,.01))}
.trace-row.out .v{color:var(--bone-bright)}
@media(max-width:640px){
  .trace-row{grid-template-columns:1fr}
  .trace-row .k{border-right:0; border-bottom:1px solid var(--line); padding:12px 20px}
  .trace-row .v{padding:14px 20px}
}

/* ---- key/value fact lists ---- */
.bio-facts{list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--line)}
.bio-facts li{border-bottom:1px solid var(--line); padding:13px 0; font-size:15.5px;
  display:flex; gap:16px; align-items:baseline}
.bio-facts .t{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim); min-width:96px}
@media(max-width:560px){.bio-facts li{flex-direction:column; gap:6px}}

/* ---- photograph ---- */
.photo{margin:0; position:relative}
.photo img{display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid var(--line-2);
  filter:saturate(.88) contrast(1.02) brightness(.94);
  -webkit-mask-image:linear-gradient(180deg,#000 78%, rgba(0,0,0,.86) 100%);
  mask-image:linear-gradient(180deg,#000 78%, rgba(0,0,0,.86) 100%)}
.photo figcaption{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em;
  color:var(--bone-dim); margin-top:12px}

/* ---- screenshots ----
   NOTE: site.css declared .shot twice; the two blocks were both applying,
   so the figure and the image each carry a border. Merged here exactly as it
   rendered, so nothing moves. If the double border wasn't intentional, drop
   the border/radius from either .shot or .shot img. */
.shot{margin:0; border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  background:#04050a; box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.shot img{display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid var(--line-2); background:#05060a; box-shadow:0 18px 50px -24px rgba(0,0,0,.9)}
.shot figcaption{padding:14px 18px; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--bone-dim); background:var(--film);
  margin-top:12px; max-width:64ch}
.shot figcaption b{color:var(--bone-bright); font-weight:600}
.shot-wide{margin-top:34px}
.shot-bleed img{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  border-right:0; border-top-right-radius:0; border-bottom-right-radius:0}
.shot-two{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin-top:22px; align-items:start}
@media(max-width:820px){.shot-two{grid-template-columns:1fr}}
.synthetic{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.04em;
  color:var(--bone-dim); margin:18px 0 0; border-left:2px solid var(--amber-deep); padding-left:14px; max-width:62ch}

/* ---- walkthrough video slot ---- */
.video-slot{margin-top:22px; border:1px dashed var(--line-2); border-radius:14px;
  padding:22px 24px; color:var(--bone-dim); font-size:15px; background:var(--film)}
.video-frame{position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; border:1px solid var(--line-2)}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---- work in progress ---- */
.wip{border:1px dashed var(--line-2); border-radius:14px; padding:26px; background:var(--film);
  font-size:16px; color:var(--bone-dim); max-width:60ch}
.wip strong{color:var(--bone-bright); font-weight:600}

/* ---- module blocks ---- */
.module{padding-top:40px; border-top:1px solid var(--line); margin-top:40px}
.module:first-of-type{border-top:0; margin-top:0; padding-top:0}
.module h3{font-size:23px; margin:0 0 6px; display:flex; align-items:baseline; gap:14px}
.module h3 .n{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--amber); letter-spacing:.1em}
.module > p{margin:0 0 18px; max-width:62ch; font-size:16px}

/* ---- layer library ---- */
.naming{font-family:"IBM Plex Mono",monospace; font-size:clamp(13px,1.8vw,16px);
  background:var(--film2); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; margin:0 0 10px; color:var(--bone-dim); overflow-x:auto; white-space:nowrap}
.naming .p{color:var(--bone-bright)}
.naming .s{color:var(--amber-2)}
.naming-key{display:flex; gap:26px; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); margin:0 0 26px}
.taxo{list-style:none; margin:26px 0 0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:0 32px}
.taxo li{border-top:1px solid var(--line); padding:12px 0; font-size:15.5px; display:flex; gap:14px; align-items:baseline}
.taxo .t{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--amber-2); min-width:104px}
@media(max-width:720px){.taxo{grid-template-columns:1fr}}