/* SS Online tactical map window (js/ui/pages/map.js, layout 'map': no rail, no tabs; Proposed 2026-10-09).
   One chamfered dark frame filling the window body: the canvas (terrain, regions, grid, route, player) under a layer
   of label buttons (regions, exits, services), with overlays: the plate (top left), zoom tools (top right), the
   legend (bottom left, folds), the hint / destination bar (bottom right; bottom on portrait).
   Tokens only (css/ui-tokens.css). Sizes in --u; touch targets from --tap / --tap-sm. */

.gwin[data-win="map"] .gwin-region[data-region="map"] > .gwin-rin {
  overflow: visible;
}

.mp {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  --mp-pad: calc(12 * var(--u));
  --ic: calc(30 * var(--u));
}
html[data-input="touch"] .mp {
  --ic: max(32px, calc(34 * var(--u)));
}

/* ------------------------------------------------------------------------------------------------ the frame */
.mp-frame {
  --c: var(--cut-lg);
  --bd: var(--line-strong);
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.mp-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background:
    linear-gradient(135deg, transparent calc(var(--c) * 0.7071 - 0.6px), var(--bd) 0 calc(var(--c) * 0.7071 + 0.6px), transparent 0),
    linear-gradient(315deg, transparent calc(var(--c) * 0.7071 - 0.6px), var(--bd) 0 calc(var(--c) * 0.7071 + 0.6px), transparent 0),
    #070b0c;
  box-shadow: inset 0 0 0 1px var(--bd);
}
/* amber ticks on the two uncut corners, a hazard strip on the top edge */
.mp-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --tl: calc(18 * var(--u));
  background:
    linear-gradient(var(--accent), var(--accent)) top right / var(--tl) 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 2px var(--tl) no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / var(--tl) 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 2px var(--tl) no-repeat;
}
.mp-stage {
  position: absolute;
  inset: 1px;
  overflow: hidden;
  -webkit-clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.mp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}
.mp-canvas.is-grab {
  cursor: grabbing;
}
.mp-u {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100 * var(--u));
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ------------------------------------------------------------------------------------------------ labels */
.mp-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.mp-mk {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--f-head);
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.mp-mk.is-off {
  visibility: hidden;
}
.mp-mk:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* region label: name, level (difficulty colour), monster kinds */
.mp-zone {
  --dc: var(--good);
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u));
  isolation: isolate;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  transition: filter var(--t-fast) var(--ease);
}
.mp-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-clip-path: polygon(calc(7 * var(--u)) 0, 100% 0, 100% calc(100% - calc(7 * var(--u))), calc(100% - calc(7 * var(--u))) 100%, 0 100%, 0 calc(7 * var(--u)));
  clip-path: polygon(calc(7 * var(--u)) 0, 100% 0, 100% calc(100% - calc(7 * var(--u))), calc(100% - calc(7 * var(--u))) 100%, 0 100%, 0 calc(7 * var(--u)));
  background:
    linear-gradient(var(--dc), var(--dc)) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(232, 237, 230, 0.06), transparent 70%),
    rgba(6, 10, 11, 0.84);
}
html[data-input="touch"] .mp-zone {
  min-height: var(--tap-sm);
  justify-content: center;
}
.mp-zone.d-easy { --dc: var(--dim); }
.mp-zone.d-fair { --dc: var(--good); }
.mp-zone.d-hard { --dc: var(--exp); }
.mp-zone.d-deadly { --dc: var(--bad); }
.mp-zn {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.1;
}
.mp-zn .mp-host {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  fill: var(--bad);
}
.mp-zl {
  display: inline-flex;
  align-items: baseline;
  gap: calc(7 * var(--u));
  line-height: 1.1;
}
.mp-lv {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--dc);
  letter-spacing: 0.02em;
}
.mp-kinds {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--dim);
}
html[data-tier="phone"] .mp-kinds {
  display: none;
}
html[data-tier="phone"] .mp-zn {
  font-size: var(--fs-sm);
}
html[data-tier="phone"] .mp-zone {
  padding: calc(3 * var(--u)) calc(9 * var(--u)) calc(4 * var(--u));
}

/* point marker: icon on the point, text to its right (.is-flip: left; .is-compact: icon only) */
.mp-pt {
  --mc: var(--info);
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  translate: calc(var(--ic) / -2) calc(-50% + var(--dy, 0px));
}
.mp-pt.c-service {
  --mc: var(--svc, var(--text));
}
.mp-pt.is-closed {
  --mc: var(--accent-dim);
}
.mp-pt.is-flip {
  flex-direction: row-reverse;
  translate: calc(-100% + var(--ic) / 2) calc(-50% + var(--dy, 0px));
}
/* text raised / lowered beside the icon: the icon stays on its point */
.mp-pt .mp-ic {
  translate: 0 calc(-1 * var(--dy, 0px));
}
.mp-pt.is-compact {
  translate: -50% -50%;
}
.mp-pt.is-compact .mp-tx {
  display: none;
}
.mp-ic {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--ic);
  height: var(--ic);
  color: var(--mc);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}
.mp-ic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: radial-gradient(circle at 50% 40%, rgba(232, 237, 230, 0.12), transparent 70%), rgba(6, 10, 11, 0.9);
  box-shadow: inset 0 0 0 1.5px var(--mc);
}
/* touch: a 44 px hit area around the icon */
html[data-input="touch"] .mp-ic::after {
  content: "";
  position: absolute;
  inset: calc((44px - var(--ic)) / -2);
}
.mp-icr {
  display: grid;
  place-items: center;
  width: 64%;
  height: 64%;
}
.mp-svg,
.mp-icr .gglyph {
  width: 100%;
  height: 100%;
  fill: currentColor;
  overflow: visible;
}
.mp-svg .g2 {
  opacity: 0.45;
}
.mp-lk {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 42%;
  height: 42%;
  padding: 1px;
  background: var(--bg);
  color: var(--accent);
}
.mp-tx {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: calc(3 * var(--u)) calc(9 * var(--u)) calc(4 * var(--u));
  line-height: 1.15;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.mp-pt.is-flip .mp-tx {
  align-items: flex-end;
}
.mp-tx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-clip-path: polygon(0 0, calc(100% - calc(6 * var(--u))) 0, 100% calc(6 * var(--u)), 100% 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - calc(6 * var(--u))) 0, 100% calc(6 * var(--u)), 100% 100%, 0 100%);
  background: linear-gradient(90deg, var(--mc), var(--mc)) left / 2px 100% no-repeat, rgba(6, 10, 11, 0.86);
}
.mp-pt.is-flip .mp-tx::before {
  background: linear-gradient(90deg, var(--mc), var(--mc)) right / 2px 100% no-repeat, rgba(6, 10, 11, 0.86);
}
.mp-tx b {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text);
}
.mp-tx small {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-label);
  color: var(--dim);
}
.mp-pt.is-closed .mp-tx b {
  color: var(--dim);
}

@media (hover: hover) and (pointer: fine) {
  .mp-zone:hover {
    filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(255, 178, 30, 0.45)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  }
  .mp-zone:hover .mp-zn,
  .mp-pt:hover .mp-tx b {
    color: var(--accent);
  }
  .mp-pt:hover .mp-ic::before {
    box-shadow: inset 0 0 0 2px var(--accent);
  }
}
.mp-mk.is-pressed {
  filter: brightness(1.25);
}

/* ------------------------------------------------------------------------------------------------ overlays */
.mp-plate,
.mp-legend,
.mp-foot > div {
  position: relative;
  isolation: isolate;
}
.mp-plate::before,
.mp-legend::before,
.mp-dest::before,
.mp-hint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --cc: var(--cut-md);
  -webkit-clip-path: polygon(var(--cc) 0, 100% 0, 100% calc(100% - var(--cc)), calc(100% - var(--cc)) 100%, 0 100%, 0 var(--cc));
  clip-path: polygon(var(--cc) 0, 100% 0, 100% calc(100% - var(--cc)), calc(100% - var(--cc)) 100%, 0 100%, 0 var(--cc));
  background:
    linear-gradient(135deg, transparent calc(var(--cc) * 0.7071 - 0.6px), var(--line-strong) 0 calc(var(--cc) * 0.7071 + 0.6px), transparent 0),
    linear-gradient(315deg, transparent calc(var(--cc) * 0.7071 - 0.6px), var(--line-strong) 0 calc(var(--cc) * 0.7071 + 0.6px), transparent 0),
    linear-gradient(180deg, var(--text-a04), transparent calc(80 * var(--u))),
    var(--glass);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* plate: map number, kind, level range, name, where the pilot is */
.mp-plate {
  position: absolute;
  z-index: 2;
  top: var(--mp-pad);
  left: var(--mp-pad);
  max-width: min(calc(360 * var(--u)), 46%);
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  pointer-events: none;
}
.mp-plate-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
}
.mp-code {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.mp-range {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text);
}
.mp-name {
  position: relative;
  margin: calc(6 * var(--u)) 0 calc(10 * var(--u));
  padding-bottom: calc(8 * var(--u));
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.05;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(72 * var(--u));
  height: calc(3 * var(--u));
  background: var(--hazard);
}
.mp-here {
  --hc: var(--dim);
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: start;
  column-gap: calc(12 * var(--u));
  row-gap: calc(3 * var(--u));
}
.mp-here[data-diff="easy"] { --hc: var(--dim); }
.mp-here[data-diff="fair"] { --hc: var(--good); }
.mp-here[data-diff="hard"] { --hc: var(--exp); }
.mp-here[data-diff="deadly"] { --hc: var(--bad); }
.mp-here-k {
  grid-column: 1 / -1;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  color: var(--dim);
}
.mp-here-v {
  display: inline-flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
  min-width: 0;
}
.mp-here-v b {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-here-v em {
  font-style: normal;
  font-family: var(--f-num);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--hc);
}
.mp-here-g {
  display: inline-flex;
  align-items: baseline;
  gap: calc(5 * var(--u));
  font-family: var(--f-body);
  font-size: var(--fs-label);
  color: var(--dim);
}
.mp-here-g b {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--info);
}

/* tools: zoom in / out, centre on the pilot, fit */
.mp-tools {
  position: absolute;
  z-index: 2;
  top: var(--mp-pad);
  right: var(--mp-pad);
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
.mp-tool .gglyph {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

/* legend (folds to its header button) */
.mp-legend {
  position: absolute;
  z-index: 2;
  left: var(--mp-pad);
  bottom: var(--mp-pad);
  width: min(calc(320 * var(--u)), 44%);
  padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
}
.mp-legend[data-open="0"] {
  width: auto;
  padding-bottom: calc(4 * var(--u));
}
.mp-lg-tog {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  width: 100%;
  min-height: var(--tap-sm);
  margin: 0;
  padding: 0 calc(2 * var(--u));
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.mp-lg-tog .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--info);
}
.mp-lg-tog .gglyph:last-child {
  margin-left: auto;
  color: var(--dim);
}
.mp-legend[data-open="0"] .mp-lg-body {
  display: none;
}
.mp-lg-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(6 * var(--u)) calc(12 * var(--u));
  margin: calc(4 * var(--u)) 0 0;
  padding: calc(8 * var(--u)) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.mp-lg-row {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  min-width: 0;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  line-height: 1.2;
  color: var(--text);
}
.mp-lg-row .mp-svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  flex: none;
}
.mp-lg-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-lg-row.k-you .mp-svg { color: #5fdcec; }
.mp-lg-row.k-dest .mp-svg { color: #7fe3f0; }
.mp-lg-row.k-quest .mp-svg { color: var(--accent); }
.mp-lg-row.k-warp .mp-svg,
.mp-lg-row.k-exit .mp-svg,
.mp-lg-row.k-auto .mp-svg { color: var(--info); }
.mp-lg-row.k-svc .mp-svg { color: #e8ad2c; }
.mp-lg-row.k-host .mp-svg { color: var(--bad); }
.mp-lg-diff {
  margin-top: calc(10 * var(--u));
  padding-top: calc(8 * var(--u));
  border-top: 1px solid var(--line);
}
.mp-lg-h {
  display: block;
  margin-bottom: calc(6 * var(--u));
  font-family: var(--f-body);
  font-size: var(--fs-label);
  color: var(--dim);
}
.mp-lg-diff ul {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: calc(4 * var(--u)) calc(12 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-lg-diff li {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font-family: var(--f-body);
  font-size: var(--fs-label);
  color: var(--text);
  white-space: nowrap;
}
.mp-lg-diff i {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  flex: none;
  background: var(--dc);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  -webkit-clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}
.mp-lg-diff .d-easy { --dc: var(--dim); }
.mp-lg-diff .d-fair { --dc: var(--good); }
.mp-lg-diff .d-hard { --dc: var(--exp); }
.mp-lg-diff .d-deadly { --dc: var(--bad); }

/* foot: how to use the map, or the destination bar while walking */
.mp-foot {
  position: absolute;
  z-index: 2;
  right: var(--mp-pad);
  bottom: var(--mp-pad);
  display: flex;
  justify-content: flex-end;
  max-width: calc(100% - 2 * var(--mp-pad));
  pointer-events: none;
}
.mp-foot[data-state="hint"] .mp-dest,
.mp-foot[data-state="dest"] .mp-hint {
  display: none;
}
.mp-hint {
  --cc: var(--cut-sm);
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  font-family: var(--f-body);
  font-size: var(--fs-label);
  color: var(--dim);
  white-space: nowrap;
}
.mp-hint::before {
  --cc: var(--cut-sm);
}
.mp-dest {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u));
  pointer-events: auto;
}
.mp-dest::before {
  box-shadow: inset 0 0 0 1px var(--info-dim);
}
.mp-dest-ic {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  color: #7fe3f0;
  flex: none;
}
.mp-dest-tx {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.mp-dest-tx span {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  color: var(--dim);
}
.mp-dest-tx b {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
}

/* ------------------------------------------------------------------------------------------------ tiers */
html[data-tier="phone"] .mp {
  --mp-pad: calc(8 * var(--u));
}
html[data-tier="phone"] .mp-plate {
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u));
  max-width: min(calc(270 * var(--u)), 46%);
}
html[data-tier="phone"] .mp-name {
  font-size: var(--fs-xl);
  margin: calc(4 * var(--u)) 0 calc(7 * var(--u));
  padding-bottom: calc(6 * var(--u));
}
html[data-tier="phone"] .mp-here-v b {
  font-size: var(--fs-body);
}
html[data-tier="phone"] .mp-legend {
  padding: calc(2 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  width: min(calc(330 * var(--u)), 50%);
}
html[data-tier="phone"] .mp-legend[data-open="0"] {
  width: auto;
  padding-bottom: calc(2 * var(--u));
}
html[data-tier="phone"] .mp-lg-list {
  gap: calc(4 * var(--u)) calc(10 * var(--u));
}
html[data-tier="phone"] .mp-tools {
  gap: calc(6 * var(--u));
}

/* portrait: plate across the top, the tools on the right, the foot across the bottom, the legend above it */
html[data-orient="portrait"] .mp-plate {
  max-width: calc(100% - 2 * var(--mp-pad) - var(--tap-sm) - calc(12 * var(--u)));
}
html[data-orient="portrait"] .mp-foot {
  left: var(--mp-pad);
  justify-content: center;
}
html[data-orient="portrait"] .mp-foot .mp-hint {
  white-space: normal;
  text-align: center;
}
html[data-orient="portrait"] .mp-legend {
  bottom: calc(var(--mp-pad) + var(--tap-sm) + calc(20 * var(--u)));
  width: min(calc(340 * var(--u)), calc(100% - 2 * var(--mp-pad)));
}
html[data-orient="portrait"] .mp-legend[data-open="0"] {
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mp-zone,
  .mp-mk {
    transition: none;
  }
}

/* phone / small sheet: one-line region labels (the map is small); the touch hit area reaches past the label */
.mp.is-small .mp-kinds {
  display: none;
}
.mp.is-small .mp-zone,
html[data-tier="phone"] .mp-zone {
  flex-direction: row;
  align-items: baseline;
  gap: calc(6 * var(--u));
  min-height: 0;
  padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u));
}
.mp.is-small .mp-zn,
.mp.is-small .mp-lv,
html[data-tier="phone"] .mp-zn,
html[data-tier="phone"] .mp-lv {
  font-size: var(--fs-label);
}
html[data-input="touch"] .mp-zone::after {
  content: "";
  position: absolute;
  inset: max(-10px, calc((44px - 100%) / -2)) -4px;
}

/* text under / over the icon (when both sides are taken) */
.mp-pt.is-below,
.mp-pt.is-above {
  flex-direction: column;
  gap: calc(2 * var(--u));
  translate: -50% calc(var(--ic) / -2);
}
.mp-pt.is-above {
  flex-direction: column-reverse;
  translate: -50% calc(-100% + var(--ic) / 2);
}
.mp-pt.is-below .mp-tx,
.mp-pt.is-above .mp-tx {
  align-items: center;
}
.mp-pt.is-below .mp-tx::before,
.mp-pt.is-above .mp-tx::before {
  background: linear-gradient(var(--mc), var(--mc)) top / 100% 2px no-repeat, rgba(6, 10, 11, 0.86);
}
.mp-pt.is-above .mp-tx::before {
  background: linear-gradient(var(--mc), var(--mc)) bottom / 100% 2px no-repeat, rgba(6, 10, 11, 0.86);
}