/* ABBI.027 Keeneland September 2026 field sheet.
   Palette and type inherited from the Saratoga sheet so the team reads a familiar page.
   Every colour is defined on bare :root first, then redefined for dark, so the
   default (system) state and the explicit toggle both resolve. */
:root{
  --paper:#E9EBEE; --surf:#FFFFFF; --surf2:#F3F5F7; --line:#CDD3D9; --line2:#E2E6EA;
  --ink:#12181D; --ink2:#4E5A63; --ink3:#7C878F;
  --claret:#7A2233; --vet:#8F5406; --buy:#1C5A3B; --open:#41505C; --gone:#9AA4AB;
  --vet-bg:#F6EDDE; --buy-bg:#E4EFE8; --against-bg:#F5E7E9; --open-bg:#E6EAEE;
  --pending:#8F5406; --pending-bg:#F6EDDE;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:Georgia,"Iowan Old Style",Palatino,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F1317; --surf:#171D22; --surf2:#1D242A; --line:#2A333B; --line2:#222A31;
  --ink:#E7EBEE; --ink2:#A9B4BC; --ink3:#7C888F;
  --claret:#D3697C; --vet:#DCA24A; --buy:#63B189; --open:#8FA0AC; --gone:#5C666D;
  --vet-bg:#241D10; --buy-bg:#13241B; --against-bg:#26161A; --open-bg:#1A2026;
  --pending:#DCA24A; --pending-bg:#241D10;
}}
:root[data-theme="dark"]{
  --paper:#0F1317; --surf:#171D22; --surf2:#1D242A; --line:#2A333B; --line2:#222A31;
  --ink:#E7EBEE; --ink2:#A9B4BC; --ink3:#7C888F;
  --claret:#D3697C; --vet:#DCA24A; --buy:#63B189; --open:#8FA0AC; --gone:#5C666D;
  --vet-bg:#241D10; --buy-bg:#13241B; --against-bg:#26161A; --open-bg:#1A2026;
  --pending:#DCA24A; --pending-bg:#241D10;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);
     -webkit-text-size-adjust:100%;overflow-x:hidden}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:40;background:var(--surf);border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:baseline;gap:.75rem;padding:.6rem .9rem .4rem;flex-wrap:wrap}
.top h1{margin:0;font:600 15px/1.2 var(--sans);letter-spacing:.01em}
.top .sub{color:var(--ink3);font-size:12px}
.top .spacer{flex:1}
.livedot{font:11px/1 var(--mono);color:var(--ink3);display:inline-flex;align-items:center;gap:.35rem;
         padding:.25rem .5rem;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.livedot b{width:7px;height:7px;border-radius:50%;background:var(--buy);display:inline-block}
.livedot.stale b{background:var(--vet)}
.livedot.off b{background:var(--claret)}
.livedot.off{color:var(--claret);border-color:var(--claret)}

/* ---- day tabs ---- */
.tabs{display:flex;gap:.25rem;overflow-x:auto;padding:0 .9rem .5rem;
      -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tabs button{flex:0 0 auto;background:var(--surf2);color:var(--ink2);border:1px solid var(--line);
             border-radius:7px;padding:.4rem .6rem;font:12px/1.15 var(--sans);cursor:pointer;
             text-align:left;min-width:74px}
.tabs button b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.tabs button .n{font:11px/1 var(--mono);color:var(--ink3)}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
.tabs button[aria-selected="true"] b,.tabs button[aria-selected="true"] .n,
.tabs button[aria-selected="true"]{color:var(--paper)}
.tabs .dark{opacity:.55;font-style:italic}

/* ---- filter bar ---- */
.filters{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem .9rem;background:var(--surf2);
         border-bottom:1px solid var(--line)}
.filters input,.filters select{font:12px var(--sans);padding:.35rem .45rem;border:1px solid var(--line);
         border-radius:6px;background:var(--surf);color:var(--ink);min-width:0}
.filters input[type=search]{flex:1 1 160px}
.filters .clear{background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink2);
         font:12px var(--sans);padding:.35rem .55rem;cursor:pointer}
.count{padding:.4rem .9rem;color:var(--ink3);font:11px/1.4 var(--mono)}

/* ---- board ---- */
.boardwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.board{border-collapse:collapse;width:100%;min-width:640px;background:var(--surf)}
.board th{position:sticky;top:0;z-index:5;background:var(--surf2);text-align:left;
          font:600 10px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;
          color:var(--ink3);padding:.45rem .5rem;border-bottom:1px solid var(--line);cursor:pointer;
          white-space:nowrap}
.board th[aria-sort]:after{content:"";margin-left:.25rem}
.board th[aria-sort="ascending"]:after{content:"\25B2"}
.board th[aria-sort="descending"]:after{content:"\25BC"}
.board td{padding:.45rem .5rem;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:top}
.board tr.brow{cursor:pointer}
.board tr.brow:hover td{background:var(--surf2)}
.board .hip{font:600 13px var(--mono);white-space:nowrap}
.board .ped{font-family:var(--serif);line-height:1.25}
.board .ped em{font-style:normal;color:var(--ink3);font-size:11px;display:block}
.board .num{font-family:var(--mono);text-align:right;white-space:nowrap;font-size:12px}
.board .marks{white-space:nowrap;font:11px var(--mono)}
.chip{display:inline-block;padding:.05rem .3rem;border-radius:4px;font:10px/1.5 var(--mono);
      border:1px solid var(--line);color:var(--ink2)}
.chip.vet{background:var(--vet-bg);color:var(--vet);border-color:var(--vet)}
.chip.buy{background:var(--buy-bg);color:var(--buy);border-color:var(--buy)}
.chip.out{background:var(--against-bg);color:var(--claret);border-color:var(--claret)}
.chip.pending{background:var(--pending-bg);color:var(--pending);border-color:var(--pending);
              animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.chip.pending{animation:none}}
tr.isout td{opacity:.45;text-decoration:line-through}

/* ---- drawer (the per-hip brief) ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;
       transition:opacity .18s;z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--paper);
        transform:translateX(100%);transition:transform .2s;z-index:51;display:flex;flex-direction:column}
.drawer.on{transform:none}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}
.drawer header{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:var(--surf);
        border-bottom:1px solid var(--line);position:sticky;top:0}
.drawer header .hipno{font:700 15px var(--mono)}
.drawer header .nm{font-family:var(--serif);font-size:14px;flex:1;min-width:0;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer header button{background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink2);
        font:12px var(--sans);padding:.3rem .5rem;cursor:pointer}
.dbody{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.9rem;flex:1}
.dbody h3{font:600 11px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
        margin:1.2rem 0 .4rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.dbody h3:first-child{margin-top:0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.2rem .7rem;font-size:13px}
.kv dt{color:var(--ink3);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.kv dd{margin:0}
.prose{font-family:var(--serif);font-size:13.5px;line-height:1.45}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.9rem;padding:0 .9rem}
.dbody table{border-collapse:collapse;width:100%;font-size:12px;min-width:340px}
.dbody th{text-align:left;font:600 10px var(--sans);letter-spacing:.05em;text-transform:uppercase;
        color:var(--ink3);border-bottom:1px solid var(--line);padding:.3rem .35rem}
.dbody td{padding:.3rem .35rem;border-bottom:1px solid var(--line2)}
.bt{font-weight:700;text-transform:uppercase;font-size:11.5px}
.btp{font-style:italic}
.pedgrid{font:11.5px/1.35 var(--mono);white-space:pre;overflow-x:auto;
        -webkit-overflow-scrolling:touch;background:var(--surf);padding:.6rem;border-radius:7px;
        border:1px solid var(--line)}
.absent{color:var(--ink3);font-style:italic;font-size:12px}
.src{color:var(--ink3);font:10px var(--mono);margin-top:.2rem}
.ctl{display:flex;gap:.5rem;flex-wrap:wrap;padding:.7rem .9rem;background:var(--surf);
     border-top:1px solid var(--line)}
.ctl button{flex:1 1 auto;border:1px solid var(--line);border-radius:7px;background:var(--surf2);
     color:var(--ink);font:13px var(--sans);padding:.55rem .4rem;cursor:pointer;min-height:44px}
.ctl button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ctl button.v[aria-pressed="true"]{background:var(--vet);border-color:var(--vet);color:#fff}
.ctl button.b[aria-pressed="true"]{background:var(--buy);border-color:var(--buy);color:#fff}

.banner{padding:.55rem .9rem;font:12px var(--sans);background:var(--vet-bg);color:var(--vet);
        border-bottom:1px solid var(--vet)}
.banner.err{background:var(--against-bg);color:var(--claret);border-color:var(--claret)}
.banner button{margin-left:.5rem;font:12px var(--sans);background:none;border:1px solid currentColor;
        border-radius:5px;color:inherit;padding:.15rem .45rem;cursor:pointer}
.empty{padding:2rem .9rem;text-align:center;color:var(--ink3);font-size:13px}
@media (max-width:520px){
  .board .hide-s{display:none}
  .drawer{width:100%}
}

/* ---------------------------------------------------------------------------
   The "show your working" strip, carried over from the live Saratoga sheet.
   Each tile is a label + a number, and pressing it opens the reasoning and the
   actual lots the number was built from. This is the part of that sheet the team
   uses most: it lets a buyer argue with a figure instead of just reading it.
   --------------------------------------------------------------------------- */
.brief-head{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.7rem}
.brief-head .who{flex:1;min-width:0}
.brief-head .who h3{margin:0;font-family:var(--serif);font-size:16px;line-height:1.25;font-weight:600}
.brief-head .who .x{color:var(--ink3);font-weight:400}
.brief-head .meta{margin:.2rem 0 0;font-size:11.5px;color:var(--ink3)}
.pill{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;background:var(--open-bg);color:var(--open);
  white-space:normal;line-height:1.35;max-width:45%;text-align:center}
.t-vet .pill{background:var(--vet-bg);color:var(--vet)}
.t-buy .pill{background:var(--buy-bg);color:var(--buy)}
.t-out .pill{background:var(--against-bg);color:var(--claret)}

.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;
  align-content:start;margin-bottom:1rem}
.why{position:relative;display:block;min-width:0}
.whyb{display:flex;flex-direction:column;gap:2px;background:var(--surf2);
  border:1px solid var(--line);border-radius:4px;padding:6px 8px;cursor:pointer;
  text-align:left;font:inherit;width:100%;min-width:0;color:var(--ink)}
.whyb:hover{border-color:var(--claret)}
.whyb:focus-visible{outline:2px solid var(--claret);outline-offset:1px}
.whyb em{font:500 9.5px/1.25 var(--sans);font-style:normal;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3);overflow-wrap:anywhere}
.whyb b{font:600 13px/1.2 var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.whyb[aria-expanded="true"]{border-color:var(--claret);background:var(--surf)}
.whyp{display:block;margin:.5rem 0 1rem;padding:.7rem;background:var(--surf);
  border:1px solid var(--line);border-radius:5px;font-size:13px;line-height:1.45}
.whyp[hidden]{display:none}
.whyp>b{display:block;color:var(--claret);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.35rem}
.whyp p{margin:.35rem 0}
.whyp .cav{font-size:12px;color:var(--ink2);border-left:2px solid var(--vet);padding-left:.5rem}
.whyp .sub{margin-top:.6rem}
.whyp .sub>b{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:.2rem}
.whyp table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:.3rem}
.whyp th{text-align:left;font:600 9.5px var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);border-bottom:1px solid var(--line);padding:.25rem .3rem}
.whyp td{padding:.25rem .3rem;border-bottom:1px solid var(--line2)}
.whyp td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.whyp tr.rna td{color:var(--ink3);font-style:italic}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:4px;margin-top:.3rem}
.board .tick{font:10px var(--mono);color:var(--ink2)}

/* the cross-cutting panels (Our data, Market, First-crop sires) */
.panel{padding:.9rem;max-width:44rem}
.panel h3{font:600 11px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 .6rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)}
.panel p{font-size:13.5px;line-height:1.5;margin:.5rem 0}
.panel p.absent{color:var(--ink2);border-left:2px solid var(--vet);padding-left:.55rem;font-style:normal}
.panel p.src{font:10px var(--mono);color:var(--ink3)}
.panel table{border-collapse:collapse;width:100%;font-size:12px;min-width:340px}
.panel th{text-align:left;font:600 10px var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3);border-bottom:1px solid var(--line);padding:.3rem .35rem}
.panel td{padding:.3rem .35rem;border-bottom:1px solid var(--line2);vertical-align:top}
.panel td.num{text-align:right;font-family:var(--mono)}

/* BEGIN CONFORMATION (generated by conf.py — edit conf.py, not here) */
/* ---- conformation: the collapsed head ---- */
.confwrap{margin:1.2rem 0 0;border:1px solid var(--line);background:var(--surf)}
.confhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem;padding:.6rem .7rem;
  cursor:pointer;border-left:4px solid var(--claret);background:var(--open-bg)}
.confhead h4{font:600 13px/1.2 var(--serif);margin:0}
.confhead .sum{font:12px/1.45 var(--sans);color:var(--ink2);flex:1 1 160px;min-width:0}
.confhead .sum.none{color:var(--ink3);font-style:italic}
.confhead .cnt{font:700 10px/1 var(--mono);padding:.25rem .4rem;border-radius:4px;
  background:var(--claret);color:var(--paper);white-space:nowrap}
.confhead .cnt.zero{background:var(--line);color:var(--ink3)}
.confhead .tog{font:700 9.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--claret);white-space:nowrap}
.confhead .draftchip{font:700 9.5px/1 var(--mono);padding:.25rem .4rem;border-radius:4px;
  border:1px solid var(--pending);background:var(--pending-bg);color:var(--pending);white-space:nowrap}
/* a pending write is NEVER shown as a team mark - it is shown as an unfinished send */
.confhead .pendchip{font:700 9.5px/1 var(--mono);padding:.25rem .4rem;border-radius:4px;
  border:1px solid var(--pending);background:var(--pending-bg);color:var(--pending);
  white-space:nowrap;animation:pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.confhead .pendchip{animation:none}}
.cbody{padding:.7rem}
/* ===== the four views =====
   Order is LH | in front | behind | RH, so the near side sits on the LEFT of the screen and
   the off side on the RIGHT - the way the horse stands in front of you. The DOM order never
   changes, so however many columns fit, that correspondence survives.

   The column count is keyed to the CONTAINER, not the viewport. This card lives inside a
   560px drawer that can sit on a 1400px desktop, so a @media rule - which is a viewport
   query - would have put four panels across ~125px each and rendered the labels at 5px.
   The 260px floor is arithmetic: the viewBox is 370 units and the label 16, so a panel
   holds an 11px label down to 370*11/16 = 254px. */
.cviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem;
  margin:0 0 .5rem}
.cview{border:1px solid var(--line);background:var(--surf2);padding:.6rem}
.cview h5{font:700 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 .5rem;text-align:center}
.cdiag{width:100%;height:auto;display:block}
.cdiag .body{fill:var(--open-bg);stroke:var(--ink);stroke-width:2.8;stroke-linejoin:round}
.cdiag .thin{fill:none;stroke:var(--ink);stroke-width:2.2}
.cdiag .limb{fill:none;stroke:var(--ink);stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}
.cdiag .hoof{fill:var(--ink);stroke:none}
.cdiag .ground{stroke:var(--ink3);stroke-width:2}
.cdiag .plumb{stroke:var(--claret);stroke-width:1.8;stroke-dasharray:5 5;opacity:.8}
.cdiag .plumbl{font:600 12px var(--sans);fill:var(--claret);opacity:.85}
.cdiag .lead{stroke:var(--ink3);stroke-width:1.6;opacity:.55}
.cdiag .dot{fill:var(--surf);stroke:var(--ink);stroke-width:2.8}
.cdiag .hit{fill:transparent;cursor:pointer}
/* the label is a click target in its own right, and a much bigger one than the dot.
   16 USER UNITS - see conf.py for why 16 and not less. */
.cdiag .lbl{font:600 16px var(--sans);fill:var(--ink2);dominant-baseline:middle;cursor:pointer}
.cdiag .lm:hover .dot,.cdiag .lm:focus .dot{fill:var(--claret);stroke:var(--claret)}
.cdiag .lm:hover .lbl,.cdiag .lm:focus .lbl{fill:var(--claret);font-weight:700}
.cdiag .lm.flagged .dot{fill:var(--claret);stroke:var(--claret)}
.cdiag .lm.flagged .lbl{fill:var(--claret);font-weight:700}
.cdiag .lm.lit .dot{fill:var(--vet);stroke:var(--ink)}
/* ---- the checklists ---- */
.cgrp{margin:0 0 .8rem;border:1px solid var(--line);background:var(--surf)}
.cgrp>h5{font:700 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;margin:0;
  padding:.5rem .6rem;background:var(--open-bg);color:var(--ink2);border-bottom:1px solid var(--line)}
.cgrp .ghint{font:11.5px/1.5 var(--sans);color:var(--ink3);margin:0;padding:.45rem .6rem .2rem}
.cgrp.lit{outline:2px solid var(--claret);outline-offset:-1px}
.crow{display:grid;grid-template-columns:22px 1fr auto;gap:.5rem;align-items:start;
  padding:.45rem .6rem;border-top:1px solid var(--line2)}
.crow:first-of-type{border-top:0}
.crow.on{background:var(--vet-bg)}
.crow input[type=checkbox]{width:17px;height:17px;margin:2px 0 0}
.crow .nm{font:600 13px/1.35 var(--sans);color:var(--ink)}
.crow .wh{display:block;font:400 11px/1.45 var(--sans);color:var(--ink3);margin-top:2px}
/* ===== the 1-5 severity scale =====
   Five buttons, not three. They escalate in colour so a 5 is findable by eye in a long
   list, and claret - this sheet's alarm colour - is reserved for the 5. */
.crow .gr{display:flex;gap:3px;flex-shrink:0}
.crow .gr button{font:700 10px/1 var(--mono);width:26px;height:26px;border:1px solid var(--line);
  background:var(--surf);color:var(--ink3);cursor:pointer;border-radius:3px;padding:0}
.crow .gr button.on{border-color:transparent;color:#fff}
.crow .gr button.g1.on{background:#6b665c}
.crow .gr button.g2.on{background:#9C8535}
.crow .gr button.g3.on{background:#BE7526}
.crow .gr button.g4.on{background:#A2432B}
.crow .gr button.g5.on{background:var(--claret)}
.crow[data-on="0"] .gr{opacity:.35;pointer-events:none}
/* ---- the legend: the Architect's definitions, in full, at the point of grading ---- */
.clegend{margin:0 0 .9rem;border:1px solid var(--line);background:var(--surf)}
.clegend>h5{font:700 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;margin:0;
  padding:.5rem .6rem;background:var(--open-bg);color:var(--ink2);border-bottom:1px solid var(--line)}
.clegend .ghint{font:11.5px/1.5 var(--sans);color:var(--ink3);margin:0;padding:.45rem .6rem .3rem}
.lgrow{display:grid;grid-template-columns:26px 1fr;gap:.6rem;align-items:start;padding:.4rem .6rem;
  border-top:1px solid var(--line2)}
.lgn{font:700 10px/26px var(--mono);text-align:center;height:26px;border-radius:3px;color:#fff}
.lgn.g1{background:#6b665c}.lgn.g2{background:#9C8535}.lgn.g3{background:#BE7526}
.lgn.g4{background:#A2432B}.lgn.g5{background:var(--claret)}
.lgt{font:12px/1.5 var(--sans);color:var(--ink2)}
.lgt b{color:var(--ink);text-transform:uppercase;letter-spacing:.04em;font-size:11px;margin-right:5px}
/* ---- notes, other people's records, the footer ---- */
.cnotes{margin:.7rem 0 0}
.cnotes label{font:700 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);display:block;margin-bottom:.3rem}
.cnotes textarea{width:100%;font:13px/1.5 var(--sans);padding:.5rem;border:1px solid var(--line);
  border-radius:4px;background:var(--surf);color:var(--ink);resize:vertical}
.cothers{margin:.8rem 0 0}
.cothers h5{font:700 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 .4rem}
.cothers .orec{border:1px solid var(--line);border-left:3px solid var(--buy);background:var(--surf2);
  padding:.45rem .6rem;margin:0 0 .4rem;font:12px/1.5 var(--sans);color:var(--ink2)}
.cothers .orec b{color:var(--ink);font:700 11px/1 var(--mono);text-transform:uppercase;
  letter-spacing:.05em;margin-right:.4rem}
.cothers .orec em{font-style:normal;color:var(--ink3)}
.cfoot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.8rem 0 0;
  padding-top:.7rem;border-top:1px solid var(--line)}
.cfoot .csave{font:700 11px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  padding:.6rem 1.1rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;border-radius:4px}
.cfoot .cclear{font:600 10px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  padding:.55rem .8rem;border:1px solid var(--line);background:var(--surf);color:var(--ink3);
  cursor:pointer;border-radius:4px}
.cfoot .cst{font:600 11px/1.4 var(--mono);color:var(--ink3);flex:1 1 120px;min-width:0}
.cfoot .cst.ok{color:var(--buy)}
.cfoot .cst.bad{color:var(--claret)}
.cfoot .cst.pend{color:var(--pending)}
/* ---- media ---- */
.cmedia{margin:0 0 .9rem}
.cmedia>h5{font:700 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 .5rem}
.cmedia .absent{font:12px/1.55 var(--sans);color:var(--ink3);margin:0;padding:.55rem .6rem;
  border:1px dashed var(--line);background:var(--surf2);border-radius:4px}
.cphotogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem}
.cphoto{display:flex;justify-content:center;border:1px solid var(--line);background:var(--open-bg);
  padding:.3rem}
/* height-capped, not width-driven: a sale photograph is a 5000px portrait and at full drawer
   width one of them pushes all four schematics below the fold */
.cphoto img{max-height:420px;max-width:100%;width:auto;height:auto;display:block}
.cvideo{margin:.6rem 0 0}
.cvideo video{width:100%;max-height:420px;display:block;background:#000}
.vframe{position:relative;padding-top:56.25%;border:1px solid var(--line);background:#000}
.vframe iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
.cdocs{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cdocs a{font:11px/1 var(--mono);padding:.35rem .5rem;border:1px solid var(--line);border-radius:4px;
  color:var(--ink2);text-decoration:none;background:var(--surf2)}
/* ---- the drawer gives the drawings more room when the card is open on a big screen ---- */
@media (min-width:1000px){#drawer.confwide{width:min(1100px,96vw)}}
@media (max-width:620px){
  /* reclaiming .dbody's side padding is ~28px more drawing, which is the difference between
     a 12px label and an 11px one on a phone */
  .cbody{padding:.5rem}
  .crow{grid-template-columns:22px 1fr}
  .crow .gr{grid-column:2}
}
/* END CONFORMATION (generated) */

/* The collapsed conformation head has to look like something you press. It read as a
   status chip ("Conformation 0 Not inspected OPEN") and the Architect could not find it. */
.confhead{cursor:pointer;border:1px solid var(--claret);border-radius:6px;
  background:var(--surf);padding:.6rem .7rem;display:flex;align-items:center;gap:.5rem}
.confhead:hover{background:var(--surf2)}
.confwrap{margin-bottom:1rem}