/* Layout "Office": editorial and calm. Big serif figures, the equity curve beside the week, then the positions. */
[data-layout=office] .kpis{display:grid;grid-template-columns:2fr 1fr 1fr 1fr}
[data-layout=office] .kpis>*,[data-layout=office] .grid2>*{min-width:0}
[data-layout=office] .kpi{position:relative;padding:24px 26px 22px;display:flex;flex-direction:column;gap:10px}
[data-layout=office] .kpi+.kpi:before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--ln)}
[data-layout=office] .kpi .l{display:flex;align-items:center;gap:10px;font:700 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}
[data-layout=office] .kpi .v{font:500 34px/1 var(--serif);letter-spacing:-.005em;white-space:nowrap}
[data-layout=office] .kpi .s{min-height:18px;font:600 12.5px var(--sans);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-layout=office] .kpi .mini{margin-top:auto;height:34px}
[data-layout=office] .k-eq{display:grid;grid-template-columns:minmax(0,1fr) 136px;grid-template-rows:auto auto 1fr;column-gap:16px}
[data-layout=office] .k-eq .l{grid-column:1/-1}
[data-layout=office] .k-eq .v{font-size:66px;color:var(--eq);display:flex;align-items:baseline}
[data-layout=office] .k-eq .cents{font-size:.5em;color:var(--tx3);margin-left:1px}
[data-layout=office] .k-eq .s{align-self:end}
[data-layout=office] .mini-eq{grid-column:2;grid-row:2/4;align-self:end;width:136px;height:58px;overflow:visible}
.mini-eq .ln{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini-eq .ar{fill:var(--acc-soft)}
.mini-eq .end{fill:var(--acc)}.mini-eq .halo{fill:var(--acc-soft)}
.mini-bars{display:flex;align-items:flex-end;gap:2px}
.mini-bars i{flex:1;min-width:2px;border-radius:2px 2px 1px 1px;background:var(--acc);opacity:.5;transition:height .8s var(--ease),opacity .3s}
.mini-bars i.dn{background:var(--neg);opacity:.85}
.mini-bars i.now{opacity:1}
.mini-bars i.gh{background:var(--trk);opacity:1}
.mini-bars.wk{gap:6px}
.mini-un{display:flex;flex-direction:column;justify-content:space-between;padding:1px 0}
.mini-un .u{display:grid;grid-template-columns:12px 1fr;align-items:center;gap:8px;height:9px}
.mini-un .coin{width:12px;height:12px;font-size:5px}
.mini-un .b{position:relative;height:6px;border-radius:3px;background:var(--trk)}
.mini-un .b:before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--ln2)}
.mini-un .b i{position:absolute;top:0;bottom:0;border-radius:3px;transition:width .9s var(--ease),left .9s var(--ease)}

[data-layout=office] .grid2{display:grid;grid-template-columns:7fr 5fr;gap:16px;margin-top:16px}
[data-layout=office] .eqcard{display:flex;flex-direction:column;min-height:330px;overflow:hidden}
.eqhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 0}
.eqhead .when{font:700 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}
.eqhead b{display:block;font:var(--display-w) 30px/1 var(--display);letter-spacing:var(--display-ls);margin-top:8px}
.eqhead em{display:block;font:600 13px var(--sans);font-style:normal;margin-top:8px;color:var(--tx3)}
.eqbox{position:relative;flex:1;min-height:200px}
.eqbox canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
[data-layout=office] .weekcard{display:flex;flex-direction:column;min-height:330px}
.dotkey{display:inline-flex;align-items:center;gap:7px}
.dotkey i{width:8px;height:8px;border-radius:50%;background:var(--dot)}
[data-layout=office] .plist{margin-top:16px;scroll-margin-top:24px}
[data-layout=office] .closed{margin-top:16px;overflow:hidden;scroll-margin-top:24px}

[data-layout=office] .enter>*{animation:rise .6s var(--out) backwards}
[data-layout=office] .enter>*:nth-child(2){animation-delay:.05s}[data-layout=office] .enter>*:nth-child(3){animation-delay:.1s}
[data-layout=office] .enter>*:nth-child(4){animation-delay:.15s}[data-layout=office] .enter>*:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

@media (max-width:1180px){
  [data-layout=office] .grid2{grid-template-columns:1fr}
  [data-layout=office] .weekcard{min-height:280px}
  [data-layout=office] .kpis{grid-template-columns:repeat(3,1fr)}
  [data-layout=office] .k-eq{grid-column:1/-1;border-bottom:1px solid var(--ln)}
  [data-layout=office] .kpi:nth-child(2):before{display:none}
  [data-layout=office] .prow,[data-layout=office] .phead{grid-template-columns:minmax(160px,1fr) minmax(260px,2fr) minmax(120px,.8fr) 16px;column-gap:20px}
}
@media (max-width:900px){
  .tbl th:nth-child(2),.tbl td:nth-child(2),.tbl th:nth-child(4),.tbl td:nth-child(4){display:none}
}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .shell .rail{display:none}
  main.page{padding:18px 16px 30px}
  .mbar{display:flex}
  .greet{font-size:34px;margin-bottom:18px}
  [data-layout=office] .k-eq .v{font-size:54px}
}
@media (max-width:640px){
  [data-layout=office] .kpis{grid-template-columns:1fr}
  [data-layout=office] .k-eq{grid-column:auto;grid-template-columns:1fr}
  [data-layout=office] .kpi:not(.k-eq){flex-direction:row;justify-content:space-between;align-items:center;padding:16px 22px}
  [data-layout=office] .kpi:not(.k-eq) .s,[data-layout=office] .kpi .mini,[data-layout=office] .mini-eq{display:none}
  [data-layout=office] .kpi:not(.k-eq) .v{font-size:28px}
  [data-layout=office] .kpi:before{display:none}
  [data-layout=office] .kpi:not(.k-eq)+.kpi{border-top:1px solid var(--ln)}
  .phead{display:none}
  .prow{grid-template-columns:1fr auto 14px!important;grid-template-areas:"a p c" "s s s";row-gap:16px;padding:16px 18px;column-gap:12px}
  .prow .asset{grid-area:a}.prow .pv{grid-area:p}.prow .chev{grid-area:c}.prow .standbox{grid-area:s}
  .stand .end{min-width:0}
  .week{gap:3px;padding:16px 12px}.wd .dots{grid-template-columns:repeat(3,7px)}
  .tbl .hide,.tbl .rescol{display:none}.tbl th,.tbl td{padding:0 14px}.tbl .asset small{display:block}.tbl .mres{display:inline}.tbl td{height:66px}
  .tfoot,.foot{flex-direction:column}
  .eqhead{flex-direction:column-reverse}
  .ch{padding:18px 18px 0}
  .ch .r{display:none}
}