/* Showings pages only (/showings and /showings/<name>), owner's brief 2026-10-20 (Knowledge Base\48 §2.2).
   Kept out of theme-com.css, which another session edits. */

/* main page: one row per showing – image left (about 4 of 12 columns), text right (about 8) */
.sh-list { display:flex; flex-direction:column; gap:26px; padding-bottom:40px; }
.sh-row { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:28px; background:var(--panel); border-left:4px solid var(--gold); }
.sh-row .pic { position:relative; display:block; min-height:250px; overflow:hidden; }
.sh-row .pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.sh-row .pic:hover img { transform:scale(1.04); }
.sh-row .pic .tag { position:absolute; left:10px; bottom:10px; background:rgba(15,26,36,.82); color:#fff; font-size:13px; padding:3px 9px; }
.sh-row .txt { padding:20px 24px 20px 0; }
.sh-row h2 { margin:0 0 4px; font-size:28px; }
.sh-row h2 a { color:#fff; text-decoration:none; } .sh-row h2 a:hover { color:var(--gold); }
.sh-row .where { font-size:14px; color:#6f8396; margin:0 0 10px; }
.sh-row .geo { margin:0 0 12px; }
.sh-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px 26px; margin-bottom:14px; }
.sh-cols h3 { font-size:16px; color:var(--gold); margin:0 0 4px; letter-spacing:.3px; }
.sh-cols ul { margin:0; padding-left:18px; font-size:16px; line-height:1.5; }
.sh-cols li b { color:#fff; }
.sh-row .acts { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sh-row .acts .btn i { margin-right:6px; }
@media (max-width:900px) {
  .sh-row { grid-template-columns:1fr; gap:0; }
  .sh-row .pic { min-height:210px; }
  .sh-row .txt { padding:16px; }
  .sh-cols { grid-template-columns:1fr; }
}

/* one showing's page */
/* the "On this page" bar sticks just under the main menu (owner 2026-10-30) and reads as its second row: a darker full-width tray
   with a gold top edge that the gold active menu tab drops into. --kg-navh = the sticky main menu's height (set in _ShowingJump);
   the border-image paints the tray past .wrap to both screen edges without adding sideways scroll. */
.sh-jump { position:sticky; top:var(--kg-navh, 0px); z-index:19; display:flex; flex-wrap:wrap; gap:0 4px; font-size:15px; padding:0; margin-bottom:14px;
  border-image:linear-gradient(var(--gold) 0 3px, var(--ink3, #192530) 3px) fill 0 / / 0 100vmax; box-shadow:0 6px 12px -8px rgba(0,0,0,.6); }
.sh-jump a { position:relative; color:var(--muted); text-decoration:none; padding:13px 12px 11px; }
.sh-jump a:hover { color:var(--gold); }
.sh-jump a.on { color:#fff; }
.sh-jump a.on::after { content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px; background:var(--gold); }
.sh-jump a:focus { outline:none; } .sh-jump a:focus-visible { outline:2px solid var(--gold); outline-offset:-4px; }
.sh-page section { scroll-margin-top:calc(var(--kg-navh, 0px) + 70px); }
.sh-page h2 { margin-top:34px; }
.sh-key { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 6px; }
.sh-key div { background:var(--panel); padding:14px 16px; border-top:3px solid var(--gold); }
.sh-key b { display:block; font:700 30px/1.1 "Open Sans Condensed", Oswald, sans-serif; color:#fff; }
.sh-key span { font-size:14px; color:var(--muted); }
.sh-views { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sh-views figure { margin:0; background:var(--panel); }
.sh-views img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.sh-views figcaption { padding:8px 12px; font-size:14px; }
.sh-views figcaption b { display:block; font-size:15px; }
.sh-coords { width:100%; border-collapse:collapse; font-size:15px; }
.sh-coords th, .sh-coords td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); }
.sh-coords th { color:#fff; font-weight:500; }
.sh-table { width:100%; border-collapse:collapse; font-size:15px; }
.sh-table th, .sh-table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.sh-table th { color:#fff; font-weight:500; white-space:nowrap; }
.sh-table td.n { text-align:right; white-space:nowrap; }
.sh-table tr.hi td { color:#fff; }
.sh-table-wrap { overflow-x:auto; }
.sh-docs { list-style:none; padding:0; margin:0; }
.sh-docs li { padding:8px 0; border-bottom:1px solid var(--line); }
.sh-docs li small { display:block; color:#6f8396; font-size:13px; }
.sh-lock { background:var(--panel); border-left:4px solid var(--btn-line); padding:14px 18px; }
.sh-lock h3 { margin-top:0; }
.sh-tour { background:var(--panel); border-left:4px solid var(--gold); padding:16px 20px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.sh-tour p { margin:0; }
@media (max-width:900px) {
  .sh-key { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sh-views { grid-template-columns:1fr; }
}
/* Reed showing sampling: the three cut samples as cards, and the 2017 cut drawn to scale */
.au-hero { position:relative; margin:18px 0 8px; padding:26px 26px 18px; background:radial-gradient(120% 140% at 0% 0%, rgba(250,193,28,.16), transparent 55%), var(--panel); border-top:3px solid var(--gold); overflow:hidden; }
.au-kicker { margin:0; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); }
.prose .au-title { margin:4px 0 18px; font:700 34px/1.1 "Open Sans Condensed", Oswald, sans-serif; text-transform:uppercase; color:#fff; }
.au-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.au-card { position:relative; display:flex; flex-direction:column; padding:16px 16px 22px; background:rgba(0,0,0,.18); border:1px solid var(--line); }
/* a card's own certificate link (partners), in the same spot as sample-lab.css's "Lab report ›" on the clickable card */
.au-lab { position:absolute; right:14px; top:14px; font-size:12px; color:var(--gold); text-decoration:none; }
.au-lab:hover, .au-lab:focus-visible { text-decoration:underline; }
.au-card.top { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 10px 30px rgba(250,193,28,.18); }
.au-who { font-size:13px; color:var(--muted); min-height:2.4em; }
.au-g { font:700 64px/1 "Open Sans Condensed", Oswald, sans-serif; color:var(--gold); letter-spacing:-1px; margin-top:6px; }
.au-card:not(.top) .au-g { font-size:50px; color:#fff; }
.au-u { font-size:15px; font-weight:600; color:#fff; letter-spacing:.5px; }
.au-w { font-size:14px; color:var(--muted); margin-top:8px; }
.au-w b { color:#fff; }
.au-bar { position:absolute; left:0; bottom:0; height:5px; width:100%; background:rgba(255,255,255,.07); }
.au-bar::after { content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 100%); background:linear-gradient(90deg, var(--gold-d), var(--gold)); transition:width 1.2s cubic-bezier(.2,.8,.2,1); }
/* owner 2026-10-21: "This can be bigger" – as wide as the cards above it (was 640 px) and taller (was 240 px) */
.au-chan { margin:14px 0 18px; padding:52px 24px 16px 52px; background:var(--panel); }
.au-plot { position:relative; height:340px; display:grid; grid-template-columns:1fr 2fr 1fr; gap:3px; align-items:end; border-bottom:2px solid var(--muted);
  background:repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 25%); }
.au-y { position:absolute; left:-34px; bottom:calc(var(--y) * 100%); transform:translateY(50%); font-size:13px; color:var(--muted); }
.au-col { position:relative; height:calc(var(--h) * 100%); background:linear-gradient(to top, var(--gold-d), var(--gold)); transform-origin:bottom; transition:transform 1.1s cubic-bezier(.2,.8,.2,1); }
.au-col.peak { box-shadow:0 0 28px rgba(250,193,28,.45); }
.au-col b { position:absolute; left:0; right:0; top:12px; text-align:center; font:700 28px/1 "Open Sans Condensed", Oswald, sans-serif; color:#17222c; }
.au-col.peak b { font-size:36px; top:-1.3em; color:var(--gold); }
.au-avg { position:absolute; left:-6px; right:-6px; bottom:70.2%; border-top:2px dashed #fff; transition:opacity .6s .9s; }
.au-avg span { position:absolute; right:0; top:4px; font-size:14px; padding:2px 8px; background:var(--panel); color:var(--muted); }
.au-avg b { color:#fff; }
.au-x { display:grid; grid-template-columns:1fr 2fr 1fr; gap:3px; text-align:center; font-size:15px; color:#fff; padding-top:8px; }
.au-x small { display:block; color:var(--muted); font-size:13px; }
.au-span { margin-top:8px; border:1px solid var(--muted); border-top:0; height:8px; text-align:center; }
.au-span span { position:relative; top:6px; padding:0 8px; font-size:12px; color:var(--muted); background:var(--panel); }
/* Reed showing: the best sample (5967, 1994) with its certificate */
.best-teaser a { display:inline-block; padding:8px 14px; border-left:3px solid var(--gold); background:rgba(250,193,28,.08); color:#fff; text-decoration:none; }
.best-teaser a b { color:var(--gold); }
.best-teaser a:hover, .best-teaser a:focus-visible { background:rgba(250,193,28,.16); }
.best { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:24px; align-items:start; margin:18px 0 26px; padding:26px;
  background:radial-gradient(120% 140% at 100% 0%, rgba(250,193,28,.2), transparent 55%), var(--panel); border-top:3px solid var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 10px 30px rgba(250,193,28,.18); scroll-margin-top:90px; }
.best p { margin:0 0 10px; }
.best-g { line-height:1; }
.best-g b { font:700 96px/1 "Open Sans Condensed", Oswald, sans-serif; color:var(--gold); letter-spacing:-2px; }
.best-g span { font-size:20px; font-weight:600; color:#fff; }
.best-w { font-size:14px; color:var(--muted); }
.best-bars { margin:14px 0 8px; display:grid; gap:6px; }
.best-row { display:grid; grid-template-columns:130px 1fr 52px; gap:10px; align-items:center; font-size:13px; color:var(--muted); }
.best-row i { height:14px; background:rgba(255,255,255,.07); position:relative; }
.best-row i::after { content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 100%); background:linear-gradient(90deg, var(--gold-d), var(--gold)); }
.best-row b { color:#fff; font-size:15px; text-align:right; }
.best-cert { margin:0; }
.best-cert img { width:100%; display:block; background:#fff; border:1px solid var(--line); }
.best-cert figcaption { font-size:12px; color:var(--muted); margin-top:6px; text-align:center; }
@media (max-width:700px) {
  .best { grid-template-columns:1fr; padding:20px 16px; }
  .best-g b { font-size:72px; }
  .best-row { grid-template-columns:110px 1fr 46px; }
}
/* before the section scrolls into view (added by script only, so without script the full chart shows) */
.au-wait .au-bar::after { width:0; }
.au-wait .au-col { transform:scaleY(0); }
.au-wait .au-avg { opacity:0; }
@media (prefers-reduced-motion:reduce) { .au-bar::after, .au-col, .au-avg { transition:none; } }
@media (max-width:700px) {
  .au-cards { grid-template-columns:1fr; }
  .au-who { min-height:0; }
  .prose .au-title { font-size:28px; }
  .au-hero { padding:20px 16px 14px; }
  .au-chan { padding:44px 12px 14px 46px; }
  .au-plot { height:240px; }
  .au-col b { font-size:20px; } .au-col.peak b { font-size:26px; }
}
/* the "On this page" tabs on phones and touch screens (owner 2026-10-21, mobile audit suggestion 5, Knowledge Base\Drafts\
   2026-10-21_mobile_audit.md): one row that scrolls sideways, each tab a pill at least 40 px tall instead of 24 px text links */
@media (max-width:900px), (pointer:coarse) {
  .sh-jump { flex-wrap:nowrap; overflow-x:auto; gap:8px; padding:11px 0 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity; }
  .sh-jump::-webkit-scrollbar { display:none; }
  .sh-jump a { flex:0 0 auto; display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border:1px solid var(--line); border-radius:20px;
    background:var(--panel); white-space:nowrap; scroll-snap-align:start; }
  .sh-jump a.on { border-color:var(--gold); color:var(--gold); }
  .sh-jump a.on::after { display:none; }
}

.sh-others { padding-bottom:40px; }
.sh-others .sh-table td:last-child { white-space:nowrap; }
/* the showing's prime photos at the top of the Overview (owner 2026-10-30; Pages/Showings/_PrimePhotos.cshtml) */
.sh-prime{margin:0 0 18px}
.sh-prime-main{display:block;position:relative;border-radius:10px;overflow:hidden;background:#1d2129}
.sh-prime-main img{display:block;width:100%;max-height:460px;object-fit:cover}
.sh-prime-main span{position:absolute;left:0;right:0;bottom:0;padding:18px 14px 9px;color:#fff;font-size:13px;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.sh-prime-more{display:flex;gap:6px;margin-top:6px;overflow-x:auto}
.sh-prime-more img{display:block;width:96px;height:72px;object-fit:cover;border-radius:6px}