/**
 * Live lobby shell tokens and ordered viewport bakes.
 *
 * Media-block order is the density resolution algorithm. Keep these blocks in
 * their signed-off order: broad width, tighter width, then the hard floor.
 */

:root {
  color-scheme: dark;
  --page: #05070a;
  --bar-top: #10141a;
  --bar-bottom: #080b0f;
  --panel: #11161c;
  --panel-deep: #0a0e12;
  --ink: #f6f7f9;
  --muted: #858e99;
  --quiet: #505965;
  --line: rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.14);
  --hairline: rgba(255, 255, 255, 0.08);
  --amber: #ff9d0a;
  --amber-hot: #ffc252;
  --amber-rgb: 255, 157, 10;
  --cyan: #39aef2;
  --cyan-rgb: 57, 174, 242;
  --slant: 9px;
  --danger: #ff665b;
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-raised: 0 10px 24px rgba(0, 0, 0, 0.34);
  --cm-nav-w: 154px;

  --flex-rail-base: 340px;
  --flex-tb-base: 76px;
  --flex-cr-base: 138px;

  --flex-rail-left: 452px;
  --flex-rail-right: 452px;
  --flex-scale-left: 1.3294;
  --flex-scale-right: 1.3294;
  --flex-tb-scale: 1.1184;
  --flex-cr-scale: 1.3768;
  --flex-hero-max: 100%;
  --flex-body-gap: 24px;
  --flex-edge-left: 28px;
  --flex-edge-right: 28px;
  --flex-hud-scale: 1;
  --tb-h: 85px;
  --tb-row-h: 76px;
  --tb-nav-density: 0.95;
  --tb-rail-density: 0.95;

  --ks-card-h: 180px;
  --ks-intel-w: 302px;
  --ks-hex-w: 84px;
  --ks-chrome-scale: 1.2;
  --ks-type-scale: 1;
  --ks-band-gap: 18px;
}

/* golden-laptop-125 */
@media (max-width: 1536px) {
  :root {
    --flex-rail-left: 346px;
    --flex-rail-right: 346px;
    --flex-scale-left: 1.0176;
    --flex-scale-right: 1.0176;
    --flex-tb-scale: 0.9474;
    --flex-cr-scale: 1.2319;
    --flex-hero-max: 100%;
    --tb-h: 72px;

    --ks-card-h: 166px;
    --ks-intel-w: 286px;
    --ks-hex-w: 84px;
    --ks-chrome-scale: 0.85;
    --ks-type-scale: 1;
    --ks-band-gap: 18px;
  }
}

/* comfort-1440 */
@media (max-width: 1440px) {
  :root {
    --flex-rail-left: 376px;
    --flex-rail-right: 376px;
    --flex-scale-left: 1.1059;
    --flex-scale-right: 1.1059;
    --flex-tb-scale: 0.8947;
    --flex-cr-scale: 1.2029;
    --flex-hero-max: 77%;
    --tb-h: 68px;

    --ks-card-h: 138px;
    --ks-intel-w: 232px;
    --ks-hex-w: 62px;
    --ks-chrome-scale: 0.85;
    --ks-type-scale: 1;
    --ks-band-gap: 18px;
  }
}

/* short-1440 */
@media (max-width: 1440px) and (max-height: 700px) {
  :root {
    --flex-rail-left: 318px;
    --flex-rail-right: 318px;
    --flex-scale-left: 0.9353;
    --flex-scale-right: 0.9353;
    --flex-tb-scale: 0.8158;
    --flex-cr-scale: 0.8986;
    --flex-hero-max: 73%;
    --tb-h: 62px;

    --ks-card-h: 138px;
    --ks-intel-w: 282px;
    --ks-hex-w: 62px;
    --ks-chrome-scale: 0.98;
    --ks-type-scale: 0.81;
    --ks-band-gap: 18px;
  }
}

/* probook-1366 */
@media (max-width: 1366px) {
  :root {
    --flex-rail-left: 354px;
    --flex-rail-right: 354px;
    --flex-scale-left: 1.0412;
    --flex-scale-right: 1.0412;
    --flex-tb-scale: 0.8421;
    --flex-cr-scale: 1.1594;
    --flex-hero-max: 73%;
    --tb-h: 64px;

    --ks-card-h: 130px;
    --ks-intel-w: 210px;
    --ks-hex-w: 60px;
    --ks-chrome-scale: 1.1;
    --ks-type-scale: 0.8;
    --ks-band-gap: 18px;
  }
}

/* short-1366 */
@media (max-width: 1366px) and (max-height: 700px) {
  :root {
    --flex-rail-left: 288px;
    --flex-rail-right: 288px;
    --flex-scale-left: 0.8471;
    --flex-scale-right: 0.8471;
    --flex-tb-scale: 0.8158;
    --flex-cr-scale: 0.9565;
    --flex-hero-max: 73%;
    --tb-h: 62px;

    --ks-card-h: 130px;
    --ks-intel-w: 242px;
    --ks-hex-w: 60px;
    --ks-chrome-scale: 0.94;
    --ks-type-scale: 0.8;
    --ks-band-gap: 18px;
  }
}

/* compact-1280 */
@media (max-width: 1280px) {
  :root {
    --flex-rail-left: 334px;
    --flex-rail-right: 334px;
    --flex-scale-left: 0.9824;
    --flex-scale-right: 0.9824;
    --flex-tb-scale: 0.8289;
    --flex-cr-scale: 0.913;
    --flex-hero-max: 77%;
    --tb-h: 63px;
    --tb-nav-density: 0.95;
    --tb-rail-density: 0.95;

    --ks-card-h: 138px;
    --ks-intel-w: 166px;
    --ks-hex-w: 52px;
    --ks-chrome-scale: 0.9;
    --ks-type-scale: 0.78;
    --ks-band-gap: 18px;
  }
}

/* hard-floor — keep last so it wins the signed-off corner. */
@media (max-width: 1024px) and (max-height: 640px) {
  :root {
    --flex-rail-left: 280px;
    --flex-rail-right: 280px;
    --flex-scale-left: 0.8235;
    --flex-scale-right: 0.8235;
    --flex-tb-scale: 0.7237;
    --flex-cr-scale: 0.913;
    --flex-hero-max: 77%;
    --tb-h: 55px;

    --flex-body-gap: 6px;
    --flex-edge-left: 4px;
    --flex-edge-right: 6px;
    --flex-hud-scale: 0.8;

    --ks-card-h: 108px;
    --ks-intel-w: 160px;
    --ks-hex-w: 72px;
    --ks-chrome-scale: 0.78;
    --ks-type-scale: 0.73;
    --ks-band-gap: 18px;
  }
}