/* house.css: the House. Papertrade sectioning in Trade-page element style.
   Tokens as Trade: bg #fffaf3, ink #1a1410, one orange #fe6102. Square, hairline-divided tiles, hatched header bars. */
.view[data-view="house"] .hs{ background:#fffaf3; color:#1a1410; font-family:'Inter','Geist',system-ui,sans-serif; padding:0 !important; margin:0 !important; border:0; box-shadow:none; border-radius:0; }
#house-root{ position:relative; background:#fffaf3; padding:0 !important; margin:0 !important; display:flex; flex-direction:column; }
.hs-tick{ flex:none; overflow:hidden; height:32px; display:flex; align-items:center; border-bottom:1px solid #1a1410; background:#fffaf3; }
.hs-tk{ display:flex; white-space:nowrap; gap:34px; padding-left:34px; animation:hs-mq 42s linear infinite; font:500 12px ui-monospace,Menlo,monospace; width:max-content; color:#1a1410; }
.hs-tick:hover .hs-tk{ animation-play-state:paused; }
.hs-tk span{ display:inline-flex; gap:8px; align-items:center; }
.hs-tk u{ text-decoration:none; font-weight:700; letter-spacing:.6px; }
.hs-tk .s u{ color:#fe6102; }
.hs-tk b{ font-weight:600; }
@keyframes hs-mq{ to{ transform:translateX(-50%); } }

.hs-g{ flex:1 0 auto; display:grid; grid-template-columns:264px 264px minmax(0,1fr); grid-template-rows:420px 280px 230px 420px; gap:1px; background:rgba(26,20,16,.16); border-bottom:1px solid rgba(26,20,16,.16); }
.hs-t{ background:#fffaf3; display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; overflow:hidden; }
.hs-book{ grid-column:1; grid-row:1; } .hs-who{ grid-column:2; grid-row:1; } .hs-px{ grid-column:3; grid-row:1; }
.hs-xp{ grid-column:1 / 3; grid-row:2; } .hs-rd{ grid-column:3; grid-row:2; }
.hs-ex{ grid-column:1 / 4; grid-row:3; }
.hs-tp{ grid-column:1 / 4; grid-row:4; }

.hs-t>header{ flex:none; height:44px; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid #1a1410; background:repeating-linear-gradient(135deg,rgba(26,20,16,.04) 0 1px,transparent 1px 6px),#fffaf3; font:600 11px 'Inter',sans-serif; letter-spacing:.9px; text-transform:uppercase; color:#1a1410; white-space:nowrap; }
.hs-t>header em{ margin-left:auto; font:normal 500 10px 'Inter',sans-serif; letter-spacing:.3px; text-transform:none; color:rgba(26,20,16,.45); overflow:hidden; text-overflow:ellipsis; }
.hs-t>header b{ font:600 15px ui-monospace,Menlo,monospace; letter-spacing:-.2px; text-transform:none; padding:1px 6px; transition:background .6s; }
.hs-t>header b.up{ animation:hs-up .7s ease-out; } .hs-t>header b.dn{ animation:hs-dn .7s ease-out; }
.hs-t>header i{ font:normal 600 11px ui-monospace,Menlo,monospace; letter-spacing:0; text-transform:none; color:rgba(26,20,16,.55); }
@keyframes hs-up{ 0%{ background:#1a1410; color:#fffaf3; } 100%{ background:transparent; } }
@keyframes hs-dn{ 0%{ background:#fe6102; color:#fffaf3; } 100%{ background:transparent; } }

/* controls: square, no pills */
.hs-tabs{ margin-left:auto; display:flex; gap:0; }
.hs-tabs button,.hs-win button{ font:600 11px 'Inter',sans-serif; letter-spacing:.6px; padding:5px 9px; border:1px solid rgba(26,20,16,.2); margin-left:-1px; background:transparent; color:#1a1410; cursor:pointer; border-radius:0; transition:background .15s,color .15s; }
.hs-tabs button:hover,.hs-win button:hover{ background:rgba(26,20,16,.06); }
.hs-tabs button.on,.hs-win button.on{ background:#1a1410; color:#fffaf3; border-color:#1a1410; position:relative; }
.hs-tabs sup{ margin-left:4px; font:500 9px ui-monospace,Menlo,monospace; opacity:.6; }
.hs-win{ margin-left:auto; display:flex; }
.hs-live{ display:inline-flex; align-items:center; gap:7px; font:600 10px 'Inter',sans-serif; letter-spacing:.9px; text-transform:uppercase; color:rgba(26,20,16,.6); }
.hs-live u{ width:7px; height:7px; border-radius:50%; background:#fe6102; animation:hs-pl 1.1s ease-in-out infinite; }
@keyframes hs-pl{ 0%{ box-shadow:0 0 0 0 rgba(254,97,2,.55); } 100%{ box-shadow:0 0 0 9px rgba(254,97,2,0); } }

/* label / value rows */
.hs-rows{ flex:none; }
.hs-row{ display:flex; justify-content:space-between; align-items:baseline; padding:0 14px; height:36px; border-bottom:1px solid rgba(26,20,16,.08); }
.hs-row span{ font:500 12px 'Inter',sans-serif; color:rgba(26,20,16,.62); border-bottom:1px dotted rgba(26,20,16,.35); line-height:1.2; }
.hs-row b,#house-root .hs-row b{ font:600 14px ui-monospace,Menlo,monospace !important; letter-spacing:-.2px; font-variant-numeric:tabular-nums; color:#1a1410; white-space:nowrap; }
.hs-row b.hs-nmv{ font:500 11px 'Inter',sans-serif !important; color:rgba(26,20,16,.45); }
.hs-ls{ flex:1; min-height:0; overflow:hidden; padding:6px 14px 0; }
.hs-lh,.hs-lr{ display:grid; grid-template-columns:44px 1fr 1fr 1fr; gap:4px; align-items:baseline; font-size:11px; height:25px; border-bottom:1px solid rgba(26,20,16,.06); }
.hs-lh{ font:600 9px 'Inter',sans-serif; letter-spacing:.8px; color:rgba(26,20,16,.45); }
.hs-lh span+span,.hs-lr b{ text-align:right; }
.hs-lr span{ font-weight:600; } .hs-lr b{ font:600 11px ui-monospace,Menlo,monospace; }
.hs-lr.tot{ border-top:1px solid #1a1410; border-bottom:0; }
.hs-lr b.n{ color:#fe6102; }
.hs-pad{ padding:12px 14px; }
.hs-sub{ flex:none; height:30px; display:flex; align-items:center; padding:0 14px; border-top:1px solid rgba(26,20,16,.16); border-bottom:1px solid rgba(26,20,16,.16); background:repeating-linear-gradient(135deg,rgba(26,20,16,.04) 0 1px,transparent 1px 6px); font:600 10px 'Inter',sans-serif; letter-spacing:.9px; text-transform:uppercase; }
.hs-who .hs-pad:last-child{ flex:1; min-height:0; overflow:hidden; padding-top:6px; }

/* flow bar + venues + hot contracts (JS-built) */
.hs-fb{ height:12px; background:#fe6102; margin-bottom:8px; }
.hs-fb i{ display:block; height:100%; background:#1a1410; transition:width .8s cubic-bezier(.2,.8,.2,1); }
.hs-fn{ display:flex; justify-content:space-between; font-size:11px; color:rgba(26,20,16,.55); margin-bottom:8px; }
.hs-fn b{ font:600 12px ui-monospace,Menlo,monospace; color:#1a1410; margin-left:4px; }
.hs-vr{ display:grid; grid-template-columns:62px minmax(0,1fr) 52px; gap:8px; align-items:center; font-size:11px; padding:3px 0; }
.hs-vr i{ display:block; height:3px; background:#1a1410; transition:width .8s cubic-bezier(.2,.8,.2,1); }
.hs-vr b{ font:600 11px ui-monospace,Menlo,monospace; text-align:right; }
.hs-ht{ display:grid; grid-template-columns:14px minmax(0,1fr) 26px 52px; gap:6px; align-items:baseline; padding:4px 0; font-size:11px; border-bottom:1px solid rgba(26,20,16,.06); }
.hs-ht em{ font:600 10px ui-monospace,monospace; color:#fe6102; } .hs-ht u{ text-decoration:none; font-size:10px; color:rgba(26,20,16,.45); }
.hs-ht span{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hs-ht b{ font:600 11px ui-monospace,Menlo,monospace; text-align:right; }

/* canvases */
.hs-cvh{ flex:1; min-height:0; position:relative; }
.hs canvas{ display:block; position:absolute; left:12px; top:6px; }

/* fills table */
.hs-th,.hs-r{ display:grid; grid-template-columns:64px 62px minmax(0,1.6fr) 90px 90px 120px; gap:10px; align-items:center; padding:0 14px; }
.hs-th{ flex:none; height:30px; border-bottom:1px solid rgba(26,20,16,.14); font:600 10px 'Inter',sans-serif; letter-spacing:.9px; text-transform:uppercase; color:rgba(26,20,16,.5); }
.hs-th span:nth-child(n+5),.hs-r>span:nth-child(n+5){ text-align:right; }
.hs-tape{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.hs-r{ height:34px; border-bottom:1px solid rgba(26,20,16,.07); font-size:12px; flex:none; }
.hs-r>span:nth-child(n+5){ font:500 12px ui-monospace,Menlo,monospace; }
.hs-ag{ font:11px ui-monospace,Menlo,monospace; color:rgba(26,20,16,.45); }
.hs-sd{ font:700 10px 'Inter',sans-serif; letter-spacing:.8px; text-align:center; padding:3px 0; width:46px; border:1px solid #1a1410; color:#1a1410; }
.hs-r.b .hs-sd{ background:#1a1410; color:#fffaf3; }
.hs-r.s .hs-sd{ background:#fe6102; border-color:#fe6102; color:#fffaf3; }
.hs-in{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-vn{ color:rgba(26,20,16,.55); font-size:11px; }
.hs-nt{ white-space:nowrap; font:600 12px ui-monospace,Menlo,monospace; text-align:right; }
.hs-nn{ font:500 11px 'Inter',sans-serif; color:rgba(26,20,16,.4); }
.hs-new{ animation:hs-inn .9s cubic-bezier(.2,.8,.2,1); }
@keyframes hs-inn{ 0%{ opacity:0; transform:translateY(-20px); background:rgba(254,97,2,.35); max-height:0; } 35%{ opacity:1; background:rgba(254,97,2,.25); } 100%{ background:transparent; transform:none; max-height:40px; } }
.hs-empty{ padding:12px 0; font-size:12px; color:rgba(26,20,16,.45); }

@media (max-width:1100px){
  .hs-g{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .hs-book,.hs-who,.hs-px,.hs-ex,.hs-rd,.hs-tp{ grid-column:auto; grid-row:auto; }
  .hs-px,.hs-ex,.hs-rd,.hs-tp{ grid-column:1 / 3; }
  .hs-px,.hs-ex,.hs-rd{ height:300px; } .hs-tp{ height:480px; }
  .hs-th,.hs-r{ grid-template-columns:50px 54px minmax(0,1fr) 80px; } .hs-th span:nth-child(n+4):not(:last-child),.hs-r>span:nth-child(n+4){ display:none; }
}
@media (prefers-reduced-motion:reduce){ .hs-tk,.hs-live u,.hs-new{ animation:none; } }
/* full-bleed: the stage wrapper pads the view */
body main.stage:has(.view[data-view="house"]:not([hidden])){ padding:0 !important; gap:0 !important; }
body main.stage .view[data-view="house"] .hs{ border:0 !important; }
.hs-px>header{ gap:8px; } .hs-px .hs-live{ display:none; }
.hs-tabs button{ padding:5px 8px; }

/* hero first row of Book */
.hs-rows .hs-row:first-child{ height:auto; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 14px 12px; }
.hs-rows .hs-row:first-child b,#house-root .hs-rows .hs-row:first-child b{ font:600 32px/1 ui-monospace,Menlo,monospace !important; letter-spacing:-1px; }
/* by expiry table */
.hs-xh,.hs-xr{ display:grid; grid-template-columns:90px 56px 56px minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:10px; align-items:center; padding:0 14px; }
.hs-xh{ height:30px; border-bottom:1px solid rgba(26,20,16,.14); font:600 10px 'Inter',sans-serif; letter-spacing:.9px; text-transform:uppercase; color:rgba(26,20,16,.5); }
.hs-xr{ height:34px; border-bottom:1px solid rgba(26,20,16,.07); font:500 12px ui-monospace,Menlo,monospace; }
.hs-xr span:first-child{ font:600 12px 'Inter',sans-serif; }
.hs-lean{ position:relative; height:16px; background:#fe6102; display:block; }
.hs-lean i{ position:absolute; left:0; top:0; bottom:0; background:#1a1410; }
.hs-lean em{ position:absolute; left:6px; top:0; line-height:16px; font:600 10px 'Inter',sans-serif; color:#fffaf3; font-style:normal; }
#hs-xb{ overflow:hidden; flex:1; min-height:0; }
/* concise pass */
.hs-row{ height:30px; }
.hs-row span{ border-bottom:0; font:500 11px 'Inter',sans-serif; letter-spacing:.2px; }
.hs-row b,#house-root .hs-row b{ font:600 12px ui-monospace,Menlo,monospace !important; }
.hs-rows .hs-row:first-child{ padding:12px 14px 10px; }
.hs-rows .hs-row:first-child b,#house-root .hs-rows .hs-row:first-child b{ font:500 30px/1 ui-monospace,Menlo,monospace !important; }
.hs-lh,.hs-lr{ height:22px; grid-template-columns:40px 1fr 1fr 1fr; }
.hs-ls{ padding-top:2px; }
.hs-lr b{ font:500 11px ui-monospace,Menlo,monospace; }
.hs-xh{ height:26px; } .hs-xr{ height:32px; }
.hs-r{ font-size:12px; }
.hs-xr span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; } .hs-lean{ font:500 10px Inter,sans-serif; color:#fffaf3; line-height:16px; padding-left:6px; }

/* rolling digits (Papertrade mechanic: clipped strip, only changed digits animate) */
.hsd,.hsc{display:inline-block;font:inherit;font-style:normal;color:inherit;line-height:1.25;vertical-align:top}
.hsd{width:1ch;height:1.1em;overflow:clip;position:relative;font-variant-numeric:tabular-nums}
.hsd:before{content:"0\a 1\a 2\a 3\a 4\a 5\a 6\a 7\a 8\a 9";white-space:pre;display:block;position:relative;top:calc(var(--d) * -1.1em)}
.hsd[data-roll]:before{animation:.5s ease-out hs-roll}
@keyframes hs-roll{0%{transform:translateY(calc((var(--d) - var(--f)) * 1.1em))}}
@media (prefers-reduced-motion:reduce){.hsd[data-roll]:before{animation:none}}
#house-root hs-d.hsd,#house-root hs-d.hsc{font:inherit !important;letter-spacing:inherit !important;color:inherit !important}
#house-root hs-d.hsd,#house-root hs-d.hsc{line-height:1.1 !important}
