/*
 * Left rail information architecture.
 * Keeps the location dossier, resource ledger, manifestation controls and
 * primary commands visually distinct without changing their behavior.
 */

@media (min-width: 781px) {
  .left-control-panel .game-status-hud {
    gap: 0;
  }

  .left-control-panel .game-status-hud > .resource-ledger {
    position: relative;
    grid-column: 1 / -1;
    min-height: 0;
    display: grid;
    grid-template-columns: 0.9fr 0.9fr 1.2fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-right: 0.18rem solid rgba(126, 35, 44, 0.76);
    border-bottom: 1px solid rgba(111, 181, 172, 0.32);
    border-left: 0.18rem solid rgba(105, 199, 190, 0.78);
    background:
      linear-gradient(104deg, rgba(3, 17, 16, 0.96), rgba(2, 8, 8, 0.98) 62%, rgba(28, 7, 10, 0.96)),
      repeating-linear-gradient(90deg, transparent 0 3rem, rgba(102, 179, 171, 0.025) 3rem calc(3rem + 1px));
    box-shadow: inset 0 1px rgba(204, 238, 231, 0.055), inset 0 -1.2rem 2rem rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(0.28rem);
    clip-path: none;
  }

  .resource-ledger > div {
    position: relative;
    min-width: 0;
    padding: 0.36rem 0.56rem 0.34rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
  }

  .resource-ledger > div + div {
    border-left: 1px solid rgba(109, 174, 166, 0.16);
  }

  .resource-ledger .economy-plaque::before,
  .resource-ledger .ritual-price-plaque::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0.62rem;
    left: 0.62rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(107, 207, 197, 0.48), transparent);
  }

  .resource-ledger .ritual-price-plaque::before {
    background: linear-gradient(90deg, rgba(190, 159, 74, 0.45), transparent);
  }

  .resource-ledger span {
    color: rgba(127, 205, 197, 0.76);
    font: 720 0.48rem/1.1 var(--oracle-font-ui, "Yu Gothic UI", Meiryo, sans-serif);
  }

  .resource-ledger span > small {
    display: none;
  }

  .resource-ledger .economy-plaque > strong,
  .resource-ledger .ritual-price-plaque > strong {
    margin-top: 0.2rem;
    color: #e8eee8;
    font: 750 0.78rem/1 var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
    letter-spacing: 0.01em;
    text-shadow: none;
  }

  .resource-ledger .economy-plaque > small,
  .resource-ledger .ritual-price-plaque > small {
    margin-top: 0.1rem;
    color: rgba(180, 194, 188, 0.58);
    font-size: 0.48rem;
  }

  .resource-ledger .contract-price-plaque {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0.2rem 0.45rem;
  }

  .resource-ledger .contract-price-plaque > span {
    grid-column: 1 / -1;
  }

  .resource-ledger .contract-price-plaque b {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    color: rgba(147, 180, 174, 0.54);
    font: 700 0.42rem/1 var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
  }

  .resource-ledger .contract-price-plaque b > strong {
    margin: 0;
    color: #dce9e3;
    font-size: 0.62rem;
    text-shadow: none;
  }

  .left-control-panel .game-command-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding-top: 0;
    border-top-color: rgba(116, 199, 191, 0.44);
    background: linear-gradient(180deg, rgba(4, 14, 13, 0.82), rgba(2, 6, 6, 0.92));
  }

  .left-control-panel .game-command-menu > header {
    grid-column: 1 / -1;
    min-height: 2.3rem;
    align-items: center;
    padding: 0.4rem 0.72rem;
    border-bottom: 1px solid rgba(112, 183, 175, 0.22);
    background:
      linear-gradient(90deg, rgba(8, 36, 33, 0.54), transparent 64%, rgba(45, 9, 14, 0.4)),
      rgba(1, 8, 8, 0.58);
  }

  .left-control-panel .game-command-menu > header span {
    color: rgba(112, 201, 192, 0.62);
    font: 740 0.42rem/1 var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
    letter-spacing: 0.08em;
  }

  .left-control-panel .game-command-menu > header b {
    color: rgba(235, 232, 218, 0.86);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .manifest-control-deck {
    position: relative;
    margin: 0.5rem 0.62rem 0.62rem;
    overflow: hidden;
    border: 1px solid rgba(98, 175, 167, 0.24);
    border-left: 0.18rem solid rgba(105, 205, 195, 0.72);
    background:
      linear-gradient(112deg, rgba(5, 28, 26, 0.74), rgba(2, 10, 10, 0.92) 62%, rgba(35, 8, 12, 0.76)),
      rgba(2, 9, 9, 0.92);
    box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, 0.3);
    grid-column: 1 / -1;
  }

  .manifest-control-deck::before {
    content: "MANIFESTATION CONFIG";
    position: absolute;
    z-index: 2;
    top: 0.34rem;
    right: 0.48rem;
    color: rgba(189, 160, 76, 0.36);
    font: 720 0.31rem/1 var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
    letter-spacing: 0.06em;
    pointer-events: none;
  }

  .manifest-control-deck .background-quick-switch,
  .manifest-control-deck .avatar-media-quick-switch {
    margin: 0;
    padding: 0.36rem 0.48rem 0.38rem;
    border: 0;
    border-left: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .manifest-control-deck .avatar-media-quick-switch {
    gap: 0.3rem;
    border-top: 1px solid rgba(102, 173, 165, 0.18);
  }

  .manifest-control-deck .background-switch-heading,
  .manifest-control-deck .avatar-media-heading {
    align-items: center;
    margin-bottom: 0.24rem;
    padding-right: 4.4rem;
  }

  .manifest-control-deck .avatar-media-heading {
    margin-bottom: 0;
  }

  .manifest-control-deck .background-switch-heading > span,
  .manifest-control-deck .avatar-media-heading > span {
    color: rgba(125, 205, 197, 0.68);
    font-size: 0.39rem;
  }

  .manifest-control-deck .background-state,
  .manifest-control-deck .avatar-media-heading > strong {
    max-width: 8.8rem;
    color: rgba(225, 235, 228, 0.82);
    font-size: 0.48rem;
  }

  .manifest-control-deck .background-option {
    gap: 0;
    padding: 0.1rem;
    border-color: rgba(100, 177, 168, 0.2);
    border-bottom-width: 1px;
    background: rgba(1, 10, 10, 0.72);
  }

  .manifest-control-deck .background-option > i {
    aspect-ratio: 4 / 3;
  }

  .manifest-control-deck .background-option > strong {
    display: none;
  }

  .manifest-control-deck .background-option[aria-pressed="true"] {
    border-color: rgba(146, 235, 224, 0.9);
    border-bottom-color: #c5434d;
    box-shadow: 0 0 0.62rem rgba(88, 219, 206, 0.13);
  }

  .manifest-control-deck .avatar-media-top-row {
    grid-template-columns: minmax(0, 1fr) 5.6rem;
  }

  .manifest-control-deck .avatar-media-slot {
    height: 1.78rem;
    min-height: 1.78rem;
    padding: 0.28rem 0.42rem;
    border-color: rgba(103, 186, 177, 0.34);
    background: rgba(2, 15, 15, 0.48);
  }

  .manifest-control-deck .avatar-media-register.is-compact {
    min-height: 2.05rem;
    padding: 0.36rem 0.52rem;
    gap: 0.38rem;
    overflow: hidden;
    border: 1px solid rgba(116, 226, 214, 0.86);
    border-bottom-color: #d2ad43;
    background:
      linear-gradient(105deg, rgba(23, 91, 84, 0.74), rgba(5, 27, 26, 0.92) 58%, rgba(60, 22, 15, 0.86)),
      rgba(3, 22, 21, 0.94);
    box-shadow:
      inset 0 0 0 1px rgba(221, 255, 247, 0.08),
      0 0 0.72rem rgba(80, 216, 204, 0.2);
    color: #f3f7ec;
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease,
      filter 160ms ease,
      transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .manifest-control-deck .avatar-media-register.is-compact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 16%, rgba(180, 255, 246, 0.16) 48%, transparent 72%);
    transform: translateX(-115%);
    transition: transform 360ms ease;
    pointer-events: none;
  }

  .manifest-control-deck .avatar-media-register.is-compact > span {
    position: relative;
    color: #f4cf58;
    font-size: 1.08rem;
    font-weight: 300;
    text-shadow: 0 0 0.48rem rgba(244, 207, 88, 0.5);
  }

  .manifest-control-deck .avatar-media-register.is-compact > b {
    position: relative;
    color: #f5f8ef;
    font-size: 0.62rem;
    font-weight: 820;
    letter-spacing: 0.035em;
    white-space: nowrap;
  }

  .manifest-control-deck .avatar-media-register.is-compact:hover,
  .manifest-control-deck .avatar-media-register.is-compact:focus-within {
    border-color: #a8fff3;
    border-bottom-color: #f2d36b;
    box-shadow:
      inset 0 0 0 1px rgba(221, 255, 247, 0.16),
      0 0 1rem rgba(95, 238, 222, 0.36);
    filter: brightness(1.14);
    transform: translateY(-1px);
  }

  .manifest-control-deck .avatar-media-register.is-compact:hover::before,
  .manifest-control-deck .avatar-media-register.is-compact:focus-within::before {
    transform: translateX(115%);
  }

  .manifest-control-deck .avatar-media-quick-switch > small {
    display: none;
  }

  .left-control-panel .game-command-menu > button {
    height: 3rem;
    grid-template-columns: 1.85rem minmax(0, 1fr) auto;
    gap: 0.42rem;
    margin: 0;
    padding: 0.38rem 0.5rem 0.38rem 0.42rem;
    border: 0;
    border-top: 1px solid rgba(105, 169, 163, 0.13);
    border-right: 0.18rem solid rgba(126, 35, 44, 0.58);
    background:
      linear-gradient(90deg, rgba(8, 26, 24, 0.3), transparent 48%, rgba(38, 7, 12, 0.24)),
      rgba(1, 7, 7, 0.7);
    box-shadow: none;
    clip-path: none;
  }

  .left-control-panel .game-command-menu > button:first-of-type {
    border-top-color: rgba(114, 195, 187, 0.32);
  }

  .left-control-panel .game-command-menu > button:nth-of-type(even) {
    border-left: 1px solid rgba(105, 169, 163, 0.13);
  }

  .left-control-panel .game-command-menu > button:hover,
  .left-control-panel .game-command-menu > button:focus-visible,
  .left-control-panel .game-command-menu > button.is-active {
    border-right-color: #76d9d0;
    background:
      linear-gradient(90deg, rgba(45, 122, 114, 0.24), rgba(4, 15, 14, 0.72) 68%, rgba(54, 10, 16, 0.42)),
      rgba(1, 8, 8, 0.86);
    filter: none;
    transform: translateX(0.18rem);
  }

  .left-control-panel .game-command-menu > button strong {
    color: #edf3ed;
    font-size: 0.82rem;
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: 0.015em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
  }

  .left-control-panel .game-command-menu > button small {
    display: none;
  }

  .left-control-panel .game-command-menu > button > .command-sigil {
    width: 1.42rem;
    height: 1.42rem;
  }

  .left-control-panel .game-command-menu > button[data-command="compendium"] {
    border-left-width: 0;
  }

  .left-control-panel .game-command-menu > button[data-command="compendium"]::after {
    display: none;
  }
}

@media (max-height: 850px) and (min-width: 781px) {
  .resource-ledger > div {
    padding-block: 0.4rem;
  }

  .left-control-panel .game-command-menu > header {
    min-height: 2.25rem;
    padding-block: 0.4rem;
  }

  .manifest-control-deck {
    margin-block: 0.36rem 0.45rem;
  }

  .manifest-control-deck .background-quick-switch,
  .manifest-control-deck .avatar-media-quick-switch {
    padding-block: 0.42rem;
  }

  .left-control-panel .game-command-menu > button {
    height: 2.9rem;
  }
}

@media (max-width: 780px) {
  .game-status-hud > .resource-ledger,
  .manifest-control-deck {
    display: contents;
  }
}