:root{
  --ink:#12181F; --ink-2:#3D4854; --ink-3:#6B7784;
  --paper:#E8EBEE; --grid:#D3D9DF; --panel:#FFFFFF; --line:#C6CDD4;
  --accent:#0F4C81; --amber:#8A6D1F; --alert:#A4243B; --good:#2F6B4F;
  --shadow:0 1px 2px rgba(18,24,31,.10),0 8px 24px rgba(18,24,31,.07);
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#E4EAF0;--ink-2:#AAB6C2;--ink-3:#7C8894;--paper:#10151A;--grid:#1B232B;
  --panel:#171E26;--line:#2A343E;--accent:#5FA3DC;--amber:#C9A44A;--alert:#E0798F;--good:#6FB791;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);}}
:root[data-theme="dark"]{
  --ink:#E4EAF0;--ink-2:#AAB6C2;--ink-3:#7C8894;--paper:#10151A;--grid:#1B232B;
  --panel:#171E26;--line:#2A343E;--accent:#5FA3DC;--amber:#C9A44A;--alert:#E0798F;--good:#6FB791;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0;display:grid;grid-template-columns:268px 1fr}
#stage{position:relative;overflow:hidden;background:
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/22px 22px,var(--paper)}
#stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#stage canvas.drag{cursor:grabbing}
#rail{position:relative;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;box-shadow:var(--shadow);z-index:20}
.brand{padding:15px 16px 12px;border-bottom:1px solid var(--line)}
.brand .co{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.10em;text-transform:uppercase}
.brand .jb{font-family:var(--cond);font-size:11.5px;color:var(--ink-3);letter-spacing:.03em;margin-top:3px;line-height:1.4}
.grp{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.lbl{font-family:var(--cond);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
button{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.03em;border:1px solid var(--line);
  background:transparent;color:var(--ink-2);padding:8px 6px;border-radius:3px;cursor:pointer;transition:.12s}
button:hover{border-color:var(--ink-3);color:var(--ink)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.issue.off{opacity:.45}
.issue.off .t{text-decoration:line-through}
#tabs{grid-auto-flow:row;gap:4px}
.views{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.views button{padding:7px 2px;font-size:10.5px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row span{font-family:var(--cond);font-size:11.5px;color:var(--ink-2)}
.row b{font-family:var(--mono);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);background:transparent;margin:0}
select{font-family:var(--cond);font-size:11.5px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:5px 6px;border-radius:3px}
.note{font-size:11px;line-height:1.5;color:var(--ink-3)}
.issue{display:flex;gap:9px;align-items:flex-start;padding:7px 8px;border:1px solid transparent;border-radius:3px;cursor:pointer;text-align:left;width:100%;background:none;font-family:var(--sans);color:var(--ink-2);font-weight:400;letter-spacing:0}
.issue:hover{background:rgba(127,140,155,.10);border-color:var(--line)}
.issue[aria-pressed="true"]{background:rgba(164,36,59,.10);border-color:var(--alert)}
.issue .n{font-family:var(--mono);font-size:10.5px;font-weight:600;color:#fff;background:var(--alert);
  min-width:17px;height:17px;border-radius:2px;display:grid;place-items:center;flex:none;margin-top:1px}
.issue .t{font-size:11.5px;line-height:1.42}
.issue .s{display:block;font-family:var(--cond);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.card{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);z-index:3}
#dims{top:14px;right:14px;width:268px;padding:11px 13px}
#dims h3{margin:0 0 8px;font-family:var(--cond);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
td{padding:3px 0;font-size:11.5px;color:var(--ink-2)}
td.v{text-align:right;font-family:var(--mono);font-weight:500;color:var(--ink)}
td.v.bad{color:var(--alert);font-weight:600}
tr.div td{border-top:1px solid var(--line);padding-top:6px}
#detail{left:14px;bottom:14px;max-width:430px;padding:12px 14px;border-left:3px solid var(--alert);display:none}
#detail.on{display:block}
#detail h4{margin:0 0 5px;font-family:var(--cond);font-size:13px;letter-spacing:.02em}
#detail p{margin:0 0 6px;font-size:12px;line-height:1.55;color:var(--ink-2)}
#detail .src{font-family:var(--cond);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
#tb{right:14px;bottom:14px;display:grid;grid-auto-flow:column;overflow:hidden}
#tb div{padding:6px 12px;border-right:1px solid var(--line)}
#tb div:last-child{border-right:0}
#tb dt{margin:0;font-family:var(--cond);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
#tb dd{margin:2px 0 0;font-family:var(--mono);font-size:11.5px;font-weight:600}
.ipin{position:absolute;width:19px;height:19px;border-radius:2px;background:var(--alert);color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:600;display:grid;place-items:center;transform:translate(-50%,-50%);
  z-index:4;cursor:pointer;border:1.5px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.ipin.dim{opacity:.32}
#hint{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;font-size:10.5px;color:var(--ink-3);
  font-family:var(--cond);letter-spacing:.05em;z-index:3;pointer-events:none}
#load{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;
  font-family:var(--cond);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);z-index:5;background:var(--paper)}
#load b{font-size:14px;color:var(--ink-2)}
#load span{font-size:11px;letter-spacing:.06em;text-transform:none;color:var(--ink-3)}
#load::after{content:"";width:120px;height:2px;background:var(--grid);position:relative;overflow:hidden;
  background-image:linear-gradient(90deg,var(--grid) 0 40%,var(--accent) 40% 60%,var(--grid) 60% 100%);
  background-size:250% 100%;animation:ld 1.1s linear infinite}
@keyframes ld{from{background-position:100% 0}to{background-position:-150% 0}}
/* ---- phone and tablet -------------------------------------------------
   This was `grid-template-rows:1fr auto` with the rail laid out as a
   horizontal strip. The rail's tallest group — ten issues on the as-built
   tab, ten change notes on the redesign tab — is taller than a phone, so
   `auto` took the entire screen and the 3D stage collapsed to ZERO pixels
   high. The model was not small on a phone, it was absent.
   The rail is now a bottom drawer: full-width groups, scrolling
   vertically, capped so the stage always keeps at least 60% of the screen.
   The Controls button in the top-left hides it altogether. ------------- */
@media (max-width:940px){
 #app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 #stage{min-height:0}
 #rail{grid-row:2;flex-direction:column;max-height:min(38dvh,320px);
       overflow-y:auto;overflow-x:hidden;border-right:0;border-top:1px solid var(--line)}
 .grp{border-right:0;border-bottom:1px solid var(--line);min-width:0;padding:11px 14px}
 .brand,#dims{display:none}
 #app.railoff #rail{display:none}
 #railToggle{display:inline-block}
 #detail{left:10px;right:10px;bottom:10px;max-width:none;max-height:38dvh;overflow-y:auto}
 /* The drawer is 300px tall and its content is over 1600. What has to be reachable
    without scrolling is the tab switcher and the Run button, so: tabs go on one row
    instead of three, the explanatory notes are clamped to a few scrollable lines,
    and Model and Motion are pinned to the top of the drawer whatever order the
    markup is in. */
 #tabs{grid-auto-flow:column;gap:5px}
 #tabs button{padding:8px 4px;font-size:11px}
 .note{max-height:4.6em;overflow-y:auto}
 #modelGrp{order:-2}
 #motionGrp{order:-1}
 /* the gesture hint is desktop advice and it collides with the titleblock here */
 #hint{display:none}
 #tb{left:auto;right:10px;bottom:10px;grid-auto-flow:column}
 #tb div{padding:5px 9px}
 #tb dd{font-size:10.5px}
 #tb .st dd span{font-size:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- review comment layer ---------------------------------------------
   Carried over from the deployed page. Two deliberate changes:
   the panel-open grid matches this viewer's 268px rail (was 246px), and
   the collapse breakpoint matches this viewer's 940px (was 900px), so
   there is no width band where the rail is horizontal but the comment
   panel still claims a 330px column. ------------------------------------ */
#app.cpanel{grid-template-columns:268px 1fr 330px}
#stage{overflow:hidden}
#ctools{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:6}
#ctools button{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:7px 11px;box-shadow:var(--shadow);cursor:pointer;font-family:var(--cond);font-size:11.5px;font-weight:600;letter-spacing:.06em}
#ctools button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
#ctools .cnt{display:inline-block;margin-left:6px;opacity:.65;font-family:var(--mono);font-size:10.5px}
#stage.marking canvas{cursor:crosshair}
#markhint{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:6;background:var(--accent);color:#fff;border-radius:6px;padding:7px 13px;font-family:var(--cond);font-size:11.5px;font-weight:600;letter-spacing:.05em;box-shadow:var(--shadow)}
.pin{position:absolute;z-index:5;width:25px;height:25px;margin:-31px 0 0 -12px;padding:0;border-radius:50% 50% 50% 2px;transform:rotate(-45deg);background:var(--accent);border:2px solid var(--panel);box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;transition:opacity .12s}
.pin span{transform:rotate(45deg);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;line-height:1}
.pin.done{background:var(--good)}
.pin.sel{outline:3px solid var(--accent);outline-offset:2px}
.pin.behind{opacity:.34}
#cpanel{background:var(--panel);border-left:1px solid var(--line);display:none;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);z-index:3}
#app.cpanel #cpanel{display:flex}
#cpanel header{padding:14px 15px 11px;border-bottom:1px solid var(--line);flex:0 0 auto}
#cpanel header .t{font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
#cpanel header .s{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.45}
#clist{flex:1 1 auto;overflow-y:auto;padding:4px 0 60px}
.thr{border-bottom:1px solid var(--line);padding:12px 15px;cursor:pointer}
.thr:hover{background:var(--paper)}
.thr.sel{background:var(--paper);box-shadow:inset 3px 0 0 var(--accent)}
.thr .hd{display:flex;align-items:baseline;gap:7px;margin-bottom:5px}
.thr .n{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--accent);flex:0 0 auto}
.thr.done .n{color:var(--good)}
.thr .au{font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.03em}
.thr .tm{font-size:10px;color:var(--ink-3);margin-left:auto;font-family:var(--mono);flex:0 0 auto}
.thr .bd{font-size:12px;line-height:1.55;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.thr .meta{font-size:10px;color:var(--ink-3);font-family:var(--mono);margin-top:6px;letter-spacing:.03em}
.rep{margin:9px 0 0 11px;padding-left:11px;border-left:2px solid var(--line)}
.rep .bd{font-size:11.5px}
.thr .acts{margin-top:9px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.thr .acts button{background:0 0;border:1px solid var(--line);border-radius:5px;padding:4px 9px;font-size:10.5px;font-family:var(--cond);font-weight:600;letter-spacing:.05em;color:var(--ink-2);cursor:pointer}
.thr .acts button:hover{border-color:var(--accent);color:var(--accent)}
#cempty{padding:22px 16px;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.cbox{position:absolute;z-index:8;width:300px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:11px}
.cbox textarea{width:100%;box-sizing:border-box;min-height:66px;resize:vertical;border:1px solid var(--line);border-radius:5px;padding:8px;font:inherit;font-size:12px;background:var(--paper);color:var(--ink)}
.cbox textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.cbox .r{display:flex;gap:6px;margin-top:8px;align-items:center}
.cbox .r .who{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbox button{border-radius:5px;padding:6px 11px;font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.05em;cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink-2)}
.cbox button.go{background:var(--accent);border-color:var(--accent);color:#fff}
.cbox button.go.danger{background:var(--alert);border-color:var(--alert)}
.cbox button[disabled]{opacity:.5;cursor:default}
.cbox .ct{font-family:var(--cond);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px}
#scrim{position:fixed;inset:0;background:rgba(18,24,31,.42);z-index:20;display:grid;place-items:center;padding:20px}
#who{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;max-width:370px;box-shadow:var(--shadow)}
#who h2{margin:0 0 7px;font-family:var(--cond);font-size:15px;letter-spacing:.02em}
#who p{margin:0 0 15px;font-size:12px;line-height:1.6;color:var(--ink-2)}
#who input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:5px;padding:9px;font:inherit;font-size:13px;background:var(--paper);color:var(--ink)}
#who input:focus{outline:2px solid var(--accent);outline-offset:-1px}
#who .r{display:flex;justify-content:flex-end;margin-top:13px}
#who button{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:5px;padding:8px 15px;font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.05em;cursor:pointer}
#who button[disabled]{opacity:.5;cursor:default}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--paper);border-radius:6px;padding:9px 15px;font-family:var(--cond);font-size:12px;letter-spacing:.04em;box-shadow:var(--shadow)}
.sect{display:block;width:100%;text-align:left;background:var(--paper);border:0;border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:8px 15px;font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-radius:0}
button.sect.hist{cursor:pointer;margin-top:10px}
button.sect.hist:hover{color:var(--ink);border-color:var(--ink-3)}
.sect .chev{float:right;font-family:var(--mono);font-size:12px;line-height:1}
.thr .n.muted{color:var(--ink-3)}
.thr.done{opacity:1;background:0 0}
.thr.done .bd{color:var(--ink-3)}
.outcome{margin-top:9px;padding:8px 10px;border-radius:5px;background:var(--paper);border-left:3px solid var(--good)}
.outcome.no{border-left-color:var(--alert)}
.badge{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.09em;border-radius:3px;padding:1px 5px;border:1px solid var(--good);color:var(--good)}
.badge.no{border-color:var(--alert);color:var(--alert)}
.outcome .rn{margin-top:6px;font-size:11.5px;line-height:1.55;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.outcome .by{margin-top:5px;font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
.iform{margin-top:10px;padding:10px;border-radius:6px;background:var(--paper);border:1px solid var(--line)}
.iform.danger{border-color:var(--alert)}
.iform .ct{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px}
.iform.danger .ct{color:var(--alert)}
.iform textarea{width:100%;box-sizing:border-box;min-height:62px;resize:vertical;border:1px solid var(--line);border-radius:5px;padding:7px 8px;font:inherit;font-size:12px;line-height:1.5;background:var(--panel);color:var(--ink);display:block}
.iform textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.iform.danger textarea:focus{outline-color:var(--alert)}
.iform .r{display:flex;gap:6px;margin-top:8px;align-items:center}
.iform .r .who{font-size:10px;color:var(--ink-3);font-family:var(--mono);margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iform button{border-radius:5px;padding:5px 10px;font-family:var(--cond);font-size:10.5px;font-weight:600;letter-spacing:.05em;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);flex:0 0 auto}
.iform button.fgo{background:var(--accent);border-color:var(--accent);color:#fff}
.iform button.fgo.danger{background:var(--alert);border-color:var(--alert)}
.iform button[disabled]{opacity:.45;cursor:default}
.thr:hover .iform{background:var(--paper)}
@media (max-width:940px){
  #app.cpanel{grid-template-columns:1fr;grid-template-rows:1fr auto}
  #app.cpanel #cpanel{position:fixed;inset:auto 0 0 0;height:58dvh;border-left:none;border-top:1px solid var(--line);z-index:9}
  #ctools{top:10px;left:10px}
}

/* ---- preliminary marking ----------------------------------------------
   The page it replaces carried a visible PRELIMINARY / NOT FOR
   CONSTRUCTION stamp; this restores it as a titleblock cell so it
   inherits the titleblock's responsive behaviour and cannot collide
   with the dimension or detail cards. It applies to every tab: even the
   as-delivered geometry is a decimated mesh, so nothing here should be
   scaled off. --------------------------------------------------------- */
#tb .st dd{color:var(--alert);line-height:1.15}
#tb .st dd span{display:block;font-family:var(--cond);font-size:8.5px;font-weight:700;letter-spacing:.09em;margin-top:1px}
@media (max-width:700px){
  /* Portrait: four cells would span the whole width and cover a third of the canvas.
     Source and date are secondary; what must stay visible is the state and the
     PRELIMINARY marking. */
  #tb div:nth-child(1),#tb div:nth-child(2){display:none}
}

/* ---------------- design brief: a PANEL beside the model, like the comments one -------
   James, 14 Sep: "the design brief should come up beside the 3d model, not over the top, it
   should come up like the comments section does, from the side, so we can read the brief
   while looking at it." So it is a third grid column, not an overlay on the stage. */
#app.bpanel{grid-template-columns:268px 1fr 430px}
#brief{background:var(--panel);border-left:1px solid var(--line);display:none;
  flex-direction:column;overflow:hidden;box-shadow:var(--shadow);z-index:3}
#app.bpanel #brief{display:flex}
.bhd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.bhd .t{font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bhd button{margin-left:auto;background:none;border:0;color:var(--ink-3);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.bhd button:hover{color:var(--ink)}
.bdoc{overflow-y:auto;padding:16px 18px 60px}
.bh{border-bottom:2px solid var(--ink);padding-bottom:13px;margin-bottom:4px}
.bh .bk{font-family:var(--cond);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.bh h1{margin:4px 0 5px;font-family:var(--cond);font-size:20px;font-weight:700;letter-spacing:.01em}
.bh .bsub{margin:0 0 11px;font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.bh .bsub b{color:var(--alert)}
.bseg{display:flex;flex-wrap:wrap;gap:5px}
.bseg button{background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:5px 9px;cursor:pointer;
  font-family:var(--cond);font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-2)}
.bseg button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.bseg button:disabled{opacity:.55;cursor:default}
.bnote{margin:8px 0 0;font-size:10.5px;line-height:1.45;color:var(--ink-3)}
.bs{margin-top:20px}
.bs h2{margin:0 0 8px;font-family:var(--cond);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);padding-bottom:4px}
.bs p{margin:0 0 8px;font-size:12px;line-height:1.58;color:var(--ink-2)}
.bst{margin:0;padding:0;list-style:none}
.bst li{padding:7px 0;border-bottom:1px solid var(--line)}
.bst li b{display:block;font-family:var(--cond);font-size:11.5px;letter-spacing:.02em;color:var(--ink);margin-bottom:2px}
.bst li span{font-size:12px;line-height:1.5;color:var(--ink-2)}
.brow{margin:0}
.brow div{padding:8px 0;border-bottom:1px solid var(--line)}
.brow dt{margin:0 0 2px;font-family:var(--cond);font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.brow dd{margin:0;font-size:12px;line-height:1.5;color:var(--ink-2)}
table.bkv,table.btb{border-collapse:collapse;width:100%;margin:2px 0 4px}
table.bkv th,table.btb th{text-align:left;font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.03em;color:var(--ink);padding:6px 8px 6px 0;vertical-align:top;border-bottom:1px solid var(--line)}
table.bkv td,table.btb td{font-size:11.5px;line-height:1.45;color:var(--ink-2);padding:6px 8px 6px 0;
  vertical-align:top;border-bottom:1px solid var(--line)}
table.bkv td.n{font-family:var(--mono);font-size:11px;color:var(--ink)}
table.bkv td.c{color:var(--ink-3);font-size:11px}
table.btb thead th{border-bottom:1px solid var(--ink-3)}
ul.bul{margin:0;padding-left:16px}
ul.bul li{font-size:12px;line-height:1.5;color:var(--ink-2);margin-bottom:5px}
.bf{margin-top:26px;padding-top:11px;border-top:1px solid var(--line);font-size:10.5px;line-height:1.55;color:var(--ink-3)}
.bprint{background:var(--ink);border-color:var(--ink)!important;color:#fff!important;margin-left:auto}
@media(max-width:940px){
  #app.bpanel{grid-template-columns:268px 1fr}
  #app.bpanel #brief{position:fixed;inset:0;z-index:40;border-left:0}
}

/* ---------------- hover part labels ---------------- */
#hov{position:absolute;z-index:7;display:none;max-width:330px;padding:10px 12px;pointer-events:none;
  border-left:3px solid var(--accent)}
#hov.on{display:block}
#hov .hn{font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.25}
#hov .hb{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.09em;
  padding:2px 5px;border-radius:2px;margin-left:6px;vertical-align:2px;color:#fff;background:var(--ink-3)}
#hov .hb.buy{background:var(--accent)}
#hov .hm{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);margin-top:5px;line-height:1.45}
#hov .hf{font-size:11.5px;line-height:1.5;color:var(--ink-2);margin-top:6px}
#hov .ho{font-size:11px;line-height:1.5;color:var(--ink-3);margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
#hov .hq{font-family:var(--cond);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}