/* =====================================================================================================================
   Workshop window "โรงช่าง" (js/ui/pages/workshop.js, id 'workshop', layout 'list-detail'). Page agent P-INV.
   Tokens and components come from css/ui-tokens.css + css/ui-kit.css; this file only lays out the page (ws- prefix).
   One header tab per recipe. List region = what to work on (models, items, option cards); detail region = the recipe
   card: input cells -> output cell, result preview, fee, and the action (portrait: a bottom sheet with a bar under
   the list that opens it).
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- list region */
.ws-lscroll {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 calc(-6 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u));
}
.ws-head {
  margin: calc(16 * var(--u)) 0 calc(8 * var(--u));
}
.ws-lscroll > .ws-head:first-child,
.ws-lscroll > .ws-fxcard + .ws-modes + .ws-head,
.ws-bgroup:first-of-type .ws-head {
  margin-top: calc(4 * var(--u));
}
.ws-note {
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  margin: 0 0 calc(10 * var(--u));
  font: 400 var(--fs-sm) / 1.5 var(--f-body);
  color: var(--dim);
}
.ws-note .gglyph {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(2 * var(--u));
  color: var(--info);
}
.ws-note-top {
  margin-top: calc(2 * var(--u));
}
.ws-warn {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin: calc(10 * var(--u)) 0 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  font: 400 var(--fs-sm) / 1.45 var(--f-body);
  color: var(--text);
  background: rgba(255, 75, 58, 0.1);
  box-shadow: inset 2px 0 0 var(--danger);
}
.ws-warn .gglyph {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(2 * var(--u));
  color: var(--danger);
}
.ws-dim {
  font: 400 var(--fs-sm) / 1.4 var(--f-body);
  color: var(--faint);
}
.ws-count {
  font: 700 var(--fs-body) / 1 var(--f-num);
  color: var(--dim);
  white-space: nowrap;
}
.ws-count.ok {
  color: var(--good);
}
.ws-gain {
  font: 700 var(--fs-lg) / 1 var(--f-num);
  color: var(--accent);
}

/* picker rows: cell + name/sub + right slot */
.ws-rows {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(3 * var(--u));
}
.ws-row.gcard {
  display: grid;
  grid-template-columns: calc(54 * var(--u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: var(--tap);
  padding: calc(7 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u));
  cursor: pointer;
}
.ws-row .gcell {
  width: calc(54 * var(--u));
}
.ws-row-t {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
.ws-row-t b {
  font: 600 var(--fs-body) / 1.25 var(--f-head);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-row-t small {
  font: 400 var(--fs-label) / 1.3 var(--f-body);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-row-r {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.ws-row.is-selected {
  --bd: var(--accent);
}
.ws-row.is-selected .ws-row-t b {
  color: var(--accent);
}

/* wide list regions: picker rows flow into columns instead of one very long row */
html:not([data-orient="portrait"]):not([data-tier="phone"]) .ws-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(380 * var(--u)), 1fr));
}

/* option cards */
.ws-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(190 * var(--u)), 1fr));
  gap: calc(8 * var(--u));
  padding: calc(3 * var(--u));
}
.ws-opt.gcard {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-height: var(--tap);
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  cursor: pointer;
}
.ws-opt-h {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
}
.ws-opt-h .gglyph {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  color: var(--info);
}
.ws-opt-h b {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 var(--fs-body) / 1.25 var(--f-head);
  color: var(--text);
}
.ws-opt-v {
  flex: none;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--info);
}
.ws-opt small {
  font: 400 var(--fs-label) / 1.4 var(--f-body);
  color: var(--dim);
}
.ws-opt.is-selected {
  --bd: var(--accent);
  --fill: linear-gradient(180deg, rgba(255, 178, 30, 0.12), transparent 80%), var(--panel2-a90);
}
.ws-opt.is-selected .ws-opt-h .gglyph,
.ws-opt.is-selected .ws-opt-v {
  color: var(--accent);
}
.ws-opt-now {
  align-self: flex-start;
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* class weapon card + craft inputs */
.ws-fxcard.gcard {
  display: grid;
  grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(12 * var(--u));
  --bd: var(--accent-dim);
}
.ws-fxcard .gcell {
  width: calc(96 * var(--u));
}
.ws-fx-t {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
}
.ws-fx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
}
.ws-fx-name {
  font: 600 var(--fs-xl) / 1.2 var(--f-head);
  color: var(--text);
}
.ws-fx-t > small {
  font: 400 var(--fs-label) / 1.3 var(--f-body);
  color: var(--dim);
}
.ws-fx-opts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin-top: calc(4 * var(--u));
}
.ws-modes {
  margin-top: calc(12 * var(--u));
}
.ws-modes .gseg {
  width: 100%;
}
.ws-modes .gseg > button {
  flex: 1 1 0;
}
.ws-cells {
  --cell: calc(68 * var(--u));
}
.ws-cells .gcell.ws-spare {
  opacity: 0.45;
}
.ws-cells .gcell.ws-use::after {
  /* keep the kit's bracket layer; mark the used inputs with the amber outline instead */
  content: none;
}
.ws-cells .gcell.ws-use {
  --bd: var(--accent-dim);
}

/* 3 Tuned -> Special: item picker */
.ws-titems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(230 * var(--u)), 1fr));
  gap: calc(8 * var(--u));
  padding: calc(3 * var(--u));
}
.ws-titem.gcard {
  display: grid;
  grid-template-columns: calc(54 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: var(--tap);
  padding: calc(7 * var(--u)) calc(34 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u));
  cursor: pointer;
}
.ws-titem .gcell {
  width: calc(54 * var(--u));
}
.ws-titem-t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4 * var(--u));
  min-width: 0;
}
.ws-titem-t .ws-otag {
  max-width: 100%;
  white-space: normal;
}
.ws-titem-t small {
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--accent);
}
.ws-titem.is-selected {
  --bd: var(--accent);
}
.ws-titem.is-dup {
  opacity: 0.5;
}
.ws-order {
  position: absolute;
  top: 50%;
  right: calc(8 * var(--u));
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin-top: calc(-11 * var(--u));
  font: 700 var(--fs-sm) / 1 var(--f-num);
  color: var(--accent-ink);
  background: var(--accent);
  -webkit-clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

/* option tags (on cards, results, dialogs) */
.ws-otag {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  min-height: calc(26 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u));
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--text);
  background: linear-gradient(90deg, rgba(57, 198, 217, 0.16), rgba(57, 198, 217, 0.04));
  box-shadow: inset 2px 0 0 var(--info), inset 0 0 0 1px rgba(57, 198, 217, 0.28);
  white-space: nowrap;
}
.ws-otag .gglyph {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  color: var(--info);
  flex: none;
}

/* dismantle points chips + build groups */
.ws-pts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.ws-pt {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: calc(30 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--dim);
  background: var(--panel-a72);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ws-pt .gglyph {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  color: var(--accent);
}
.ws-pt b {
  font-size: var(--fs-sm);
  color: var(--text);
}
.ws-pt.ok {
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.ws-pt.ok b {
  color: var(--accent);
}
.ws-bgroup + .ws-bgroup {
  margin-top: calc(6 * var(--u));
}
.ws-bpts {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.ws-bpts .gbar {
  width: calc(90 * var(--u));
}

.ws-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  min-height: calc(160 * var(--u));
  padding: calc(16 * var(--u));
  text-align: center;
  color: var(--faint);
}
.ws-empty .gglyph {
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  opacity: 0.6;
}
.ws-empty b {
  font: 600 var(--fs-lg) / 1.3 var(--f-head);
  color: var(--dim);
}
.ws-empty p {
  margin: 0;
  max-width: calc(360 * var(--u));
  font: 400 var(--fs-sm) / 1.5 var(--f-body);
}

/* portrait: a bar under the list opens the recipe sheet */
.ws-sheetbar {
  display: none;
}

/* -------------------------------------------------------------------------------------------------- detail region */
.ws-dscroll {
  flex: 1 1 auto;
  min-height: 0;
  margin-right: calc(-6 * var(--u));
  padding-right: calc(8 * var(--u));
}
.ws-rtop {
  margin-bottom: calc(12 * var(--u));
}
.ws-rtop .g-eyebrow {
  display: block;
  margin-bottom: calc(4 * var(--u));
}
.ws-rtitle {
  margin: 0;
  font: 600 var(--fs-xl) / 1.3 var(--f-head);
  color: var(--text);
}
.ws-rtext {
  margin: calc(4 * var(--u)) 0 0;
  font: 400 var(--fs-sm) / 1.5 var(--f-body);
  color: var(--dim);
}

/* inputs -> output */
.ws-formula {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  padding: calc(16 * var(--u)) calc(14 * var(--u));
  background:
    repeating-linear-gradient(90deg, var(--text-a04) 0 1px, transparent 1px calc(24 * var(--u))),
    var(--panel-a72);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ws-fin {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
}
/* input and output cells shrink together when the detail column is narrow (tablet, phone, big UI scale) */
.ws-fslot {
  flex: 0 1 calc(60 * var(--u));
  min-width: calc(34 * var(--u));
}
.ws-fslot > .gcell,
.ws-fslot > .ws-ptile {
  width: 100%;
}
.ws-plus {
  flex: none;
  font: 700 var(--fs-lg) / 1 var(--f-num);
  font-style: normal;
  color: var(--faint);
}
.ws-more {
  flex: none;
  margin-left: calc(4 * var(--u));
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--dim);
}
.ws-arrow {
  display: inline-flex;
  flex: none;
  color: var(--accent);
}
.ws-arrow .gglyph {
  width: calc(18 * var(--u));
  height: calc(22 * var(--u));
}
.ws-arrow .gglyph + .gglyph {
  margin-left: calc(-10 * var(--u));
  opacity: 0.5;
}
.ws-fout {
  flex: 0 1 calc(96 * var(--u));
  min-width: calc(60 * var(--u));
}
.ws-fout > .gcell,
.ws-fout > .ws-ptile {
  width: 100%;
}
.ws-outcell {
  filter: drop-shadow(0 0 calc(10 * var(--u)) var(--accent-a35));
}
.ws-outcell.is-mystery .gc-art::after {
  content: "?";
  position: absolute;
  right: -8%;
  bottom: -6%;
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  font: 700 var(--fs-sm) / 1 var(--f-num);
  color: var(--accent-ink);
  background: var(--info);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ws-flabels {
  display: flex;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  margin-top: calc(6 * var(--u));
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--dim);
}
.ws-flabels span:last-child {
  text-align: right;
  color: var(--text);
}

/* a points tile shaped like a cell */
.ws-ptile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: radial-gradient(70% 70% at 50% 45%, rgba(255, 178, 30, 0.16), transparent 75%), var(--panel);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
  -webkit-clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.ws-ptile b {
  font: 700 var(--fs-xl) / 1 var(--f-num);
  color: var(--accent);
}
.ws-fout .ws-ptile b {
  font-size: var(--fs-h1);
}
.ws-ptile small {
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--dim);
}
.ws-ptile.ok {
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* result preview */
.ws-result {
  margin-top: calc(14 * var(--u));
}
.ws-cap {
  display: block;
  margin-bottom: calc(8 * var(--u));
  color: var(--dim);
}
.ws-res-opts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin-bottom: calc(8 * var(--u));
}
.ws-res-opts.is-pool .ws-otag {
  opacity: 0.85;
}
.ws-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: calc(10 * var(--u));
  padding: calc(7 * var(--u)) 0;
  border-bottom: 1px solid var(--line-a60);
  font: 500 var(--fs-sm) / 1.3 var(--f-body);
  color: var(--dim);
}
.ws-change b {
  font: 700 var(--fs-body) / 1 var(--f-num);
  color: var(--text);
  white-space: nowrap;
}
.ws-change b i {
  margin: 0 calc(6 * var(--u));
  font-style: normal;
  color: var(--faint);
}
.ws-change b small {
  margin-left: 2px;
  font-size: var(--fs-label);
  color: var(--dim);
}
.ws-change .gs-delta {
  min-width: calc(44 * var(--u));
  text-align: right;
}
.ws-ptbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-bottom: calc(10 * var(--u));
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--dim);
}
.ws-ptbar b {
  font: 700 var(--fs-body) / 1 var(--f-num);
  color: var(--text);
  white-space: nowrap;
}
.ws-ptbar b i {
  margin: 0 calc(4 * var(--u));
  font-style: normal;
  color: var(--faint);
}
.ws-ptbar b small {
  font-size: var(--fs-label);
  color: var(--dim);
}

/* fee */
.ws-fee {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  font: 600 var(--fs-sm) / 1.2 var(--f-head);
  color: var(--dim);
  background: linear-gradient(90deg, rgba(255, 178, 30, 0.1), transparent 70%);
  box-shadow: inset 2px 0 0 var(--accent);
}
.ws-fee .gglyph {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--accent);
}
.ws-fee b {
  margin-left: auto;
  font: 700 var(--fs-xl) / 1 var(--f-num);
  color: var(--accent);
}
.ws-fee small {
  font: 500 var(--fs-label) / 1 var(--f-num);
  color: var(--faint);
}
.ws-fee.is-short b {
  color: var(--bad);
}
.ws-fee.is-short {
  background: linear-gradient(90deg, rgba(255, 75, 58, 0.1), transparent 70%);
  box-shadow: inset 2px 0 0 var(--danger);
}

/* fixed actions under the scrolling recipe */
.ws-actions {
  display: flex;
  gap: calc(8 * var(--u));
  flex: none;
  padding-top: calc(12 * var(--u));
  margin-top: calc(4 * var(--u));
  border-top: 1px solid var(--line);
}
.ws-actions:empty {
  display: none;
}
.ws-actions .gbtn {
  flex: 0 1 auto;
  min-width: 0;
}
.ws-actions .ws-go {
  flex: 1 1 0;
  width: auto; /* .gbtn.block is width 100%: as a flex basis that pushed the other buttons out */
  min-height: var(--tap-lg);
  font-size: var(--fs-lg);
}

/* ----------------------------------------------------------------------------------------- dialogs (confirm, done) */
.ws-dlgcells {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin: calc(4 * var(--u)) 0 calc(10 * var(--u));
}
.ws-dlgcells .gcell {
  width: calc(60 * var(--u));
}
.ws-done {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}
.ws-done > .gcell {
  flex: none;
  width: calc(104 * var(--u));
}
.ws-done-t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  min-width: 0;
}
.ws-done-t b {
  font: 600 var(--fs-xl) / 1.25 var(--f-head);
  color: var(--text);
}
.gd-body .ws-done-t p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--dim);
}
.ws-done-o {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
}

/* ------------------------------------------------------------------------------------------------- tiers / layouts */
html[data-tier="phone"] .ws-head {
  margin: calc(12 * var(--u)) 0 calc(6 * var(--u));
}
html[data-tier="phone"] .ws-row.gcard {
  grid-template-columns: calc(46 * var(--u)) minmax(0, 1fr) auto;
  gap: calc(10 * var(--u));
}
html[data-tier="phone"] .ws-row .gcell,
html[data-tier="phone"] .ws-titem .gcell {
  width: calc(46 * var(--u));
}
html[data-tier="phone"] .ws-titem.gcard {
  grid-template-columns: calc(46 * var(--u)) minmax(0, 1fr);
}
html[data-tier="phone"] .ws-opts {
  grid-template-columns: repeat(auto-fill, minmax(calc(170 * var(--u)), 1fr));
}
html[data-tier="phone"] .ws-fxcard.gcard {
  grid-template-columns: calc(72 * var(--u)) minmax(0, 1fr);
  padding: calc(10 * var(--u));
}
html[data-tier="phone"] .ws-fxcard .gcell {
  width: calc(72 * var(--u));
}
html[data-tier="phone"] .ws-fx-name {
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .ws-formula {
  padding: calc(10 * var(--u));
  gap: calc(6 * var(--u));
}
html[data-tier="phone"] .ws-fslot {
  flex-basis: calc(44 * var(--u));
}
html[data-tier="phone"] .ws-plus {
  font-size: var(--fs-sm);
}
html[data-tier="phone"] .ws-fout {
  flex-basis: calc(70 * var(--u));
}
html[data-tier="phone"] .ws-rtitle {
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .ws-rtop {
  margin-bottom: calc(8 * var(--u));
}
html[data-tier="phone"] .ws-actions {
  padding-top: calc(8 * var(--u));
}
html[data-tier="phone"] .ws-actions .ws-go {
  min-height: var(--tap);
  font-size: var(--fs-body);
}
html[data-tier="phone"] .ws-fee {
  margin-top: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
}
html[data-tier="phone"] .ws-cells {
  --cell: calc(56 * var(--u));
}

/* portrait: the list fills the window; the recipe opens as a bottom sheet from the bar under the list */
html[data-orient="portrait"] .ws-sheetbar {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  flex: none;
  padding-top: calc(8 * var(--u));
  margin-top: calc(2 * var(--u));
  border-top: 1px solid var(--line);
  min-width: 0;
}
html[data-orient="portrait"] .ws-sb-t {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 var(--fs-sm) / 1.25 var(--f-head);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-orient="portrait"] .ws-sb-fee {
  flex: none;
  font: 700 var(--fs-body) / 1 var(--f-num);
  color: var(--accent);
}
html[data-orient="portrait"] .ws-sheetbar .gbtn {
  flex: none;
}
html[data-orient="portrait"] .ws-titems,
html[data-orient="portrait"] .ws-opts {
  grid-template-columns: minmax(0, 1fr);
}