/* ============================================================
   Worked examples — layout, side rail, collapsible tables,
   and the embedded research-question builder.
   Loaded after styles.css.
   ============================================================ */

/* ---- date note ---- */
.datenote{font-family:var(--sans); font-size:12.5px; color:var(--muted);
  border-left:2px solid var(--rule); padding:2px 0 2px 12px; margin:0 0 22px;}
.datenote b{color:var(--ink); font-weight:600;}

/* ---- two-column page with a sticky rail ---- */
.ex-layout{display:block;}
@media(min-width:980px){
  .ex-layout{display:grid; grid-template-columns:186px minmax(0,1fr); gap:38px; align-items:start;}
}

.ex-rail{font-family:var(--sans); font-size:13.5px; margin:0 0 26px;}
@media(min-width:980px){
  .ex-rail{position:sticky; top:88px; margin:0;}
}
.ex-rail b{display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px;}
.ex-rail ol{list-style:none; margin:0; padding:0; display:grid; gap:1px;}
.ex-rail a{display:block; color:var(--muted); padding:6px 0 6px 12px;
  border-left:2px solid var(--rule); line-height:1.35;}
.ex-rail a:hover{color:var(--accent); border-left-color:#cdbcdf; text-decoration:none;}
.ex-rail a.on{color:var(--ink); font-weight:600; border-left-color:var(--accent);}
@media(max-width:979px){
  .ex-rail ol{grid-auto-flow:row;}
  .ex-rail{border-bottom:1px solid var(--rule); padding-bottom:16px;}
}

/* ---- sections ---- */
.ex-body > section{scroll-margin-top:96px; margin:0 0 40px;}
.ex-body > section:last-child{margin-bottom:0;}
.ex-body h2{font-family:var(--sans); font-size:1.12rem; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 4px; padding:0 0 9px; border-bottom:1px solid var(--rule);}
.ex-body h3{font-family:var(--sans); font-size:14px; font-weight:700; margin:22px 0 7px;}
.ex-body p{margin:0 0 12px; max-width:74ch;}
.ex-body ul,.ex-body ol{margin:0 0 12px; padding-left:20px; max-width:74ch;}
.ex-body li{margin:0 0 5px;}
.ex-body li::marker{color:var(--accent);}
.ex-body{font-size:16px; line-height:1.62;}

.ex-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
  background:var(--bg-soft); border:1px solid var(--rule); border-radius:3px; padding:0 4px;}

/* ---- number tiles ---- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; margin:16px 0 18px;}
.tiles div{border:1px solid var(--rule); border-top:3px solid var(--accent); border-radius:4px; padding:12px 13px;}
.tiles .v{font-family:var(--sans); font-size:1.5rem; font-weight:700; line-height:1.05; color:var(--accent-dark);}
.tiles .l{font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:5px; line-height:1.35;}

/* ---- note callout ---- */
.ex-body .note{background:var(--accent-tint); border-left:2px solid var(--accent);
  border-radius:0 3px 3px 0; padding:12px 15px; margin:16px 0; font-size:15px;}
.ex-body .note > :last-child{margin-bottom:0;}
.ex-body .note p{max-width:none;}

/* ---- figures ---- */
figure.shot{margin:16px 0 18px; padding:0;}
figure.shot img{width:100%; height:auto; display:block; border:1px solid var(--rule); border-radius:4px;}
figure.shot a{display:block;}
figure.shot figcaption{font-family:var(--sans); font-size:12.5px; color:var(--muted);
  margin-top:9px; line-height:1.55; max-width:80ch;}
figure.shot figcaption b{color:var(--ink);}

/* ---- collapsible reference tables ---- */
details.tbl{border:1px solid var(--rule); border-left:2px solid var(--accent);
  border-radius:0 3px 3px 0; margin:0 0 14px;}
details.tbl > summary{font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--accent-dark); cursor:pointer; list-style:none; padding:9px 13px;
  display:flex; align-items:baseline; gap:8px;}
details.tbl > summary::-webkit-details-marker{display:none;}
details.tbl > summary::before{content:"\25B8"; font-size:10px; color:var(--accent);
  transition:transform .12s ease; display:inline-block;}
details.tbl[open] > summary::before{transform:rotate(90deg);}
details.tbl > summary:hover{background:var(--accent-tint);}
details.tbl > summary .n{font-weight:400; color:var(--muted); font-size:12px;}
details.tbl > table{margin:0 13px 13px; width:calc(100% - 26px);}

.ex-body table{width:100%; table-layout:fixed; border-collapse:collapse;
  font-family:var(--sans); font-size:13px; line-height:1.45; margin:0 0 14px;}
.ex-body th,.ex-body td{border-bottom:1px solid var(--rule); padding:6px 8px;
  text-align:left; vertical-align:top; overflow-wrap:anywhere;}
.ex-body th{background:var(--bg-soft); font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);}
.ex-body tr:last-child td{border-bottom:none;}
.obs{color:#1d6b8c; font-weight:600;}
.cond{color:#7a2f8f; font-weight:600;}

/* ---- embedded research-question builder ---- */
.rq{border:1px solid var(--rule); border-top:3px solid var(--accent); border-radius:4px;
  padding:20px 22px; background:#fff; font-family:var(--sans); margin:18px 0;}
.rq h3{margin-top:0;}
.rq label{display:block; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:0 0 5px;}
.rq input[type=text], .rq select{width:100%; font-family:var(--sans); font-size:14px;
  border:1px solid var(--rule); border-radius:3px; padding:8px 10px; background:#fff; color:var(--ink);}
.rq input[type=text]:focus, .rq select:focus{outline:2px solid var(--accent); outline-offset:1px;}
.rq .fields{display:grid; gap:14px; margin:0 0 20px;}
@media(min-width:620px){ .rq .fields{grid-template-columns:1fr 1fr;} .rq .fields .full{grid-column:1/-1;} }
.rq .qbox{background:var(--accent-tint); border-radius:4px; padding:14px 16px; margin:0 0 20px;
  font-family:var(--serif); font-size:1.03rem; line-height:1.5;}
.rq .qbox b{font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); display:block; margin:0 0 7px;}
.rq .feas{display:grid; gap:12px; margin:0 0 18px;}
@media(min-width:620px){ .rq .feas{grid-template-columns:1fr 1fr;} }
.rq .feas .q{font-size:13px; color:var(--ink); margin:0 0 5px; font-weight:400;
  letter-spacing:0; text-transform:none;}
.rq .score{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--rule); padding-top:16px; margin:0 0 16px;}
.rq .band{font-size:15px; font-weight:700; padding:6px 12px; border-radius:3px; color:#fff;}
.rq .pct{font-size:13px; color:var(--muted);}
.rq .meter{flex:1; min-width:140px; height:7px; background:var(--rule); border-radius:4px; overflow:hidden;}
.rq .meter i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s ease;}
.rq .acts{display:flex; gap:9px; flex-wrap:wrap; align-items:center;}
.rq .msg{font-size:12.5px; color:var(--ok); min-height:1em;}
.rq ul.watch{margin:14px 0 0; padding-left:20px; font-size:13px; color:var(--muted);}
.rq ul.watch li{margin:0 0 5px;}
@media print{ .rq .acts,.rq .meter{display:none;} }

/* ---- footer bits ---- */
.ex-foot{font-family:var(--sans); font-size:13px; color:var(--muted);
  border-top:1px solid var(--rule); margin-top:34px; padding-top:16px;}

@media print{
  .ex-rail{display:none;}
  .ex-layout{display:block;}
  details.tbl > summary{display:none;}
  details.tbl > table{display:table !important;}
  details.tbl{border-left-width:1px;}
}