/* Backline rack system: the shared look for every unit in the rack.
   Served at /shared/rack.css by the portal and by each tool's own server. */
/* Direction: Neve 8078 console, Burnham, 1977. Brushed panel, wood cheeks, anodised
     scribble strips, rubber buttons with a lamp in them, recessed meter windows.
     Every surface is either raised or sunk, and one radius (3px) for the whole rack. */
  :root {
    --panel: #2B2F34;
    --panel-hi: #3B4047;
    --panel-lo: #191C20;
    --edge: #0D0F11;
    --recess: #0A0C0E;
    --legend: #D7DBDF;
    --engrave: #8E959C;
    --wood: #6B4327;
    --lamp-red: #FF4433;
    --lamp-amber: #FFB43C;
    --lcd: #7CFFB2;
    --r: 3px;
  }
  * { box-sizing: border-box; }
  /* the room sits on the root element, so a short page has no seam in it */
  html {
    min-height: 100%;
    background:
      radial-gradient(90% 60% at 26% -10%, #3A3F47, #23262B 45%, #131518 78%),
      #101215;
    background-attachment: fixed;
  }
  body {
    margin: 0; min-height: 100vh; background: transparent;
    color: var(--legend);
    font: 500 15px/1.45 "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  }
  .studio { padding: 30px 26px 64px; }

  /* the host plate above the rack: which rig you are looking at */
  .host {
    display: flex; align-items: baseline; gap: 16px;
    width: min(1140px, 100%); margin: 0 auto 14px; padding: 0 2px;
  }
  .host .mark {
    font-size: 16px; font-weight: 700; letter-spacing: .44em; text-transform: uppercase;
    color: #C6CCD2; text-decoration: none; text-shadow: 0 1px 0 #0D0F11, 0 -1px 0 #43494F;
  }
  .host .mark:hover { color: #F0F3F6; }
  .host .where, .host a.where {
    font: 400 11px/1 "IBM Plex Mono", monospace; letter-spacing: .16em;
    text-transform: uppercase; color: #6E757C; text-decoration: none;
  }
  .host a.where:hover { color: #C6CCD2; }
  .host .spacer { flex: 1; }

  /* an empty bay, waiting for the next unit */
  .bay-empty {
    height: 54px; border: 1px dashed #2B3138; border-radius: var(--r);
    display: flex; align-items: center; justify-content: center;
    font: 400 11px/1 "IBM Plex Mono", monospace; letter-spacing: .2em;
    text-transform: uppercase; color: #4E555C;
    background: linear-gradient(#111417, #0C0F12);
    box-shadow: 0 3px 8px #07090B inset;
  }

  /* the rack: two rails, maple cheeks, and whatever is bolted between them */
  .rack {
    position: relative; width: min(1140px, 100%); margin: 0 auto;
    padding: 14px 34px;
    background: linear-gradient(#101316, #0A0D0F);
    border: 1px solid #07090B;
    border-radius: var(--r);
    box-shadow: 0 26px 46px #05070900, 0 22px 40px #06080A, 0 1px 0 #3A4046 inset;
  }
  /* flamed maple cheeks, lit from the same lamp as the panels */
  .rack::before, .rack::after {
    content: ""; position: absolute; top: -8px; bottom: -8px; width: 26px;
    background-image:
      linear-gradient(#00000077, #00000000 16%, #00000000 76%, #000000AA),
      url("/shared/assets/wood.png");
    background-size: auto, 100% 640px;
    background-repeat: no-repeat, repeat-y;
    border: 1px solid #2A1A0F;
    border-radius: 4px;
    box-shadow: 0 16px 28px #06080A;
  }
  .rack::before {
    left: -27px;
    box-shadow: 0 16px 28px #06080A, -1px 0 0 #E0B579 inset, -10px 0 16px #1A0E06 inset;
  }
  .rack::after {
    right: -27px;
    box-shadow: 0 16px 28px #06080A, 1px 0 0 #A9793F inset, -11px 0 18px #180D05 inset;
  }
  /* punched mounting rails behind the gear */
  .rail {
    position: absolute; top: 10px; bottom: 10px; width: 24px;
    background-color: #2E343A;
    background-image:
      linear-gradient(90deg, #444B53, #23282D 60%, #1A1E22),
      radial-gradient(circle at 50% 50%, #05070A 0 3px, #00000000 3.6px);
    background-size: auto, 24px 30px;
    background-repeat: no-repeat, repeat-y;
    border: 1px solid #0A0C0E;
    box-shadow: 0 2px 5px #07090B inset;
  }
  .rail.left { left: 6px; }
  .rail.right { right: 6px; }

  .units { position: relative; display: flex; flex-direction: column; gap: 12px; }

  /* one device: ears bolted to the rails, faceplate between them */
  .unit {
    display: grid; grid-template-columns: 34px 1fr 34px;
    background-image:
      radial-gradient(120% 90% at 22% -20%, #FFFFFF1C, #FFFFFF00 62%),
      linear-gradient(#FFFFFF0A, #00000000 26%, #00000026 78%, #00000044),
      url("/shared/assets/metal.png");
    background-size: auto, auto, 256px 256px;
    background-color: #2B3036;
    border: 1px solid var(--edge);
    border-top-color: #565D65;
    border-radius: var(--r);
    box-shadow:
      0 1px 0 #5C636B inset,
      0 -16px 30px #131518 inset,
      14px 0 22px #3A230E inset,
      -14px 0 22px #2A1A0A inset,
      0 10px 20px #07090B;
  }
  .ear {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 9px 0; background: linear-gradient(90deg, #3E444B, #2C3137 70%, #262B31);
    border-right: 1px solid #14171A; box-shadow: 1px 0 0 #454C54 inset;
  }
  .ear.right { background: linear-gradient(90deg, #262B31, #2C3137 30%, #3A4046);
    border-right: 0; border-left: 1px solid #14171A; }
  .spine {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: #949BA2;
    text-shadow: 0 1px 0 #111417;
  }
  .screw {
    position: relative; width: 12px; height: 12px; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 34% 26%, #B9C0C7, #6A7178 42%, #383D43 72%, #202429);
    box-shadow: 0 1px 2px #080A0C, 0 0 0 1px #14171A;
  }
  .screw::after {
    content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px;
    background: linear-gradient(#171A1D, #3E444A);
    border-radius: 1px;
  }
  .screw.a::after { transform: rotate(38deg); }
  .screw.b::after { transform: rotate(-24deg); }
  .screw.c::after { transform: rotate(71deg); }

  .face { padding: 12px 20px 18px; min-width: 0; }
  .unit-head {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 10px; border-bottom: 1px solid #101316; box-shadow: 0 1px 0 #4B525A;
  }
  .unit-head h2 {
    margin: 0; font-size: 25px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
    color: #E9EDF1; text-shadow: 0 1px 0 #0D0F11, 0 -1px 0 #4E555C;
  }
  .unit-head .model {
    font: 400 11px/1 "IBM Plex Mono", monospace; letter-spacing: .12em;
    text-transform: uppercase; color: var(--engrave); text-shadow: 0 1px 0 #101214;
  }
  .unit-head .spacer { flex: 1; }
  .unit-head .size {
    font: 400 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; color: #767D84;
  }
  .fold {
    padding: 5px 9px; font-size: 12px; line-height: 1;
  }
  .unit.folded .unit-body { display: none; }
  .unit.folded .face { padding-bottom: 12px; }

  .unit.blank .face { padding-bottom: 14px; }
  .unit.blank .unit-head { border-bottom: 0; box-shadow: none; padding-bottom: 0; }
  .unit.blank h2 { color: #9AA1A8; text-shadow: 0 1px 0 #101316; }
  .slot-note {
    margin: 10px 0 0; font: 400 12px/1.5 "IBM Plex Mono", monospace; color: #6E757C;
  }

  .blurb { margin: 0 0 4px; font-size: 16px; color: #C9CFD5; max-width: 76ch; }
  .blurb b { color: #F0F3F6; font-weight: 600; }
  .stamp {
    margin: 6px 0 18px; font: 400 12px/1.6 "IBM Plex Mono", monospace;
    letter-spacing: .02em; color: var(--engrave);
  }
  .stamp em { font-style: normal; color: #B7BEC5; }

  /* sunk bay that holds the working area */
  .bay {
    position: relative;
    background:
      linear-gradient(#00000055, #00000000 12%, #00000000 88%, #0000002E),
      linear-gradient(#171A1E, #1C2126 60%, #15181C);
    border: 1px solid var(--edge);
    border-radius: var(--r);
    box-shadow: 0 6px 12px #0A0C0E inset, 0 1px 0 #4B525A;
    padding: 14px;
  }
  .bay-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--engrave);
    padding-bottom: 10px; border-bottom: 1px solid #0F1215;
    box-shadow: 0 1px 0 #3A4046;
  }

  .drop {
    margin-top: 14px; padding: 46px 22px; cursor: pointer; text-align: center;
    border: 2px dashed #3C4248; border-radius: var(--r);
    background: linear-gradient(#1C2024, #16191D);
  }
  .drop:hover, .drop.over { border-color: #5B636B; background: linear-gradient(#20252A, #191D21); }
  .drop .big { margin: 0 0 4px; font-size: 21px; font-weight: 600; letter-spacing: .06em; color: #E7EBEF; }
  .drop .hint { margin: 0; font: 400 12px/1.5 "IBM Plex Mono", monospace; color: var(--engrave); }

  /* rubber buttons, pressed in the panel */
  button, .btn {
    font: 600 13px/1 "Barlow Condensed", Arial, sans-serif;
    letter-spacing: .14em; text-transform: uppercase;
    color: #E3E7EB; text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; cursor: pointer; border-radius: var(--r);
    border: 1px solid var(--edge);
    background: linear-gradient(#41474E, #2C3137 55%, #262B31);
    box-shadow: 0 1px 0 #626A72 inset, 0 2px 3px #0C0E10;
  }
  button:hover, .btn:hover { background: linear-gradient(#4A5158, #333940 55%, #2B3037); }
  button:active, .btn:active {
    background: linear-gradient(#22262B, #2C3137);
    box-shadow: 0 2px 4px #0A0C0E inset;
  }
  button[disabled] {
    color: #666D74; background: linear-gradient(#2A2E33, #24282D);
    box-shadow: 0 1px 0 #3A4046 inset; cursor: default;
  }
  .lamp {
    width: 7px; height: 7px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #303740, #16191D 70%);
    box-shadow: 0 0 0 1px #0B0D0F inset, 0 1px 0 #454C54;
  }
  .lamp.lit {
    background: radial-gradient(circle at 35% 30%, #D6FFE9, #35D17A 55%, #167A45);
    box-shadow: 0 0 6px #35D17A, 0 0 16px #35D17A55;
  }
  button.lit-red .lamp {
    background: radial-gradient(circle at 35% 30%, #FFC0B4, #FF4433 55%, #C42418);
    box-shadow: 0 0 6px var(--lamp-red), 0 0 15px #FF443366;
  }
  button.lit-amber .lamp {
    background: radial-gradient(circle at 35% 30%, #FFE6B8, #FFB43C 55%, #C77C14);
    box-shadow: 0 0 6px var(--lamp-amber), 0 0 15px #FFB43C66;
  }
  /* a lit button warms the panel around it */
  button.lit-red { border-color: #4A2620; box-shadow: 0 1px 0 #6A4A44 inset, 0 2px 3px #0C0E10, 0 0 12px #FF44331F; }
  button.lit-amber { border-color: #4A3A18; box-shadow: 0 1px 0 #6E5F3A inset, 0 2px 3px #0C0E10, 0 0 12px #FFB43C22; }
  button.big { padding: 12px 22px; font-size: 15px; }

  .job {
    display: flex; align-items: center; gap: 14px; margin-top: 14px;
    font-size: 16px; color: #DFE4E9;
  }
  .job .meta { font: 400 12px "IBM Plex Mono", monospace; color: var(--engrave); }
  .job .spacer { flex: 1; }

  .progress { margin-top: 16px; }
  .meter {
    height: 12px; border-radius: var(--r); border: 1px solid var(--edge);
    background: linear-gradient(#0A0C0E, #121519);
    box-shadow: 0 2px 4px #06080A inset;
    overflow: hidden;
  }
  .meter i {
    display: block; height: 100%; width: 0;
    background: repeating-linear-gradient(90deg, #35D17A 0 6px, #2AB667 6px 8px);
    box-shadow: 0 0 8px #1F7F4A;
    transition: width .3s;
  }
  .status {
    margin-top: 8px; font: 400 12px "IBM Plex Mono", monospace;
    letter-spacing: .1em; text-transform: uppercase; color: var(--engrave);
  }

  /* transport with an LCD read-out */
  .transport {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 14px; padding: 12px; border-radius: var(--r);
    background: linear-gradient(#333940, #262B31);
    border: 1px solid var(--edge);
    box-shadow: 0 1px 0 #555C64 inset, 0 2px 4px #0C0E10;
  }
  .lcd {
    position: relative; overflow: hidden;
    font: 500 15px/1 "IBM Plex Mono", monospace; letter-spacing: .06em;
    color: var(--lcd); text-shadow: 0 0 9px #26A76E, 0 0 20px #14603E;
    background:
      repeating-linear-gradient(#00000000 0 2px, #00000038 2px 3px),
      linear-gradient(#0C1712, #0A1510 55%, #0E1D16);
    border: 1px solid var(--edge); border-radius: var(--r);
    box-shadow: 0 3px 6px #04100A inset, 0 0 14px #0C3A26 inset, 0 1px 0 #4B525A;
    padding: 9px 12px; font-variant-numeric: tabular-nums;
  }
  .lcd::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(112deg, #FFFFFF18 0 22%, #FFFFFF00 40%);
  }
  .transport .spacer { flex: 1; }
  .warn {
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    color: #FF6A55; text-shadow: 0 0 8px #7A2418;
  }

  /* channel strips */
  .strips { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
  .strip {
    display: grid; grid-template-columns: 30px 128px 1fr 210px; align-items: center; gap: 14px;
    padding: 7px 10px; border-radius: var(--r);
    background-image:
      linear-gradient(100deg, #FFFFFF12, #FFFFFF00 38%),
      linear-gradient(#343A41, #2A3036 58%, #23282E);
    background-color: #2A3036;
    border: 1px solid var(--edge);
    box-shadow: 0 1px 0 #59616A inset, 0 3px 5px #0B0D0F, 0 -1px 0 #16191C inset;
  }
  .strip .no {
    font: 500 12px "IBM Plex Mono", monospace; color: var(--engrave);
    text-align: center; text-shadow: 0 1px 0 #111417;
  }
  /* anodised plate, screen printed, catching the same lamp */
  .scribble {
    padding: 7px 9px; border-radius: 2px;
    background-image:
      linear-gradient(103deg, #FFFFFF2E 0 18%, #FFFFFF00 44%),
      linear-gradient(color-mix(in srgb, var(--c) 88%, #FFF), var(--c) 46%,
        color-mix(in srgb, var(--c) 72%, #000));
    color: #0E1013; font-size: 14px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 0 color-mix(in srgb, var(--c) 50%, #FFF);
    border: 1px solid #0C0E11;
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--c) 40%, #FFF) inset,
      0 -1px 0 color-mix(in srgb, var(--c) 55%, #000) inset,
      0 2px 3px #0A0C0E;
  }
  .window {
    position: relative; height: 40px; border-radius: 2px;
    background: linear-gradient(#070A0C, #0C1013 55%, #090C0F);
    border: 1px solid #040608;
    box-shadow: 0 3px 7px #040608 inset, 0 1px 0 #4B525A, 0 0 0 1px #1B1F24;
    overflow: hidden;
  }
  /* glass over the meter: one soft streak from the lamp, nothing more */
  .window::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(104deg, #FFFFFF16 0 16%, #FFFFFF00 34%),
      linear-gradient(#FFFFFF10, #FFFFFF00 30%);
  }
  .window canvas { width: 100%; height: 100%; display: block; }
  .window .head { position: absolute; top: 0; bottom: 0; width: 1px; background: #F2F5F8; }
  .strip.off .scribble { filter: saturate(.18) brightness(.55); }
  .strip.off .window canvas { opacity: .4; }
  .strip.solo { box-shadow: 0 1px 0 #6A727A inset, 0 0 0 1px var(--lamp-amber), 0 2px 3px #0D0F11; }

  .strip .ctrls { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
  .strip .ctrls button { padding: 7px 9px; font-size: 12px; letter-spacing: .1em; gap: 5px; }

  /* fader: sunk groove, moulded cap */
  input[type=range] {
    -webkit-appearance: none; appearance: none; width: 84px; height: 20px;
    background: transparent; cursor: pointer;
  }
  input[type=range]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 2px;
    background: linear-gradient(#0A0C0E, #15181C);
    box-shadow: 0 1px 3px #06080A inset, 0 1px 0 #454B52;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 15px; height: 21px; margin-top: -7.5px; border-radius: 2px;
    background:
      repeating-linear-gradient(#00000000 0 3px, #00000055 3px 4px),
      linear-gradient(#767F88, #454C54 48%, #272C32);
    border: 1px solid #0B0D0F;
    box-shadow: 0 1px 0 #9AA3AC inset, 0 2px 3px #07090B, -1px 0 0 #1B1F24 inset;
  }
  input[type=range]::-moz-range-track {
    height: 6px; border-radius: 2px; background: #0D1013;
  }
  input[type=range]::-moz-range-thumb {
    width: 14px; height: 20px; border-radius: 2px; border: 1px solid #0D0F11;
    background: linear-gradient(#646C74, #3A4046 55%, #2B3036);
  }
  .strip .ctrls a {
    color: var(--engrave); text-decoration: none; font-size: 15px; padding: 0 3px;
    text-shadow: 0 1px 0 #101214;
  }
  .strip .ctrls a:hover { color: #E7EBEF; }

  .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .err {
    margin-top: 12px; font: 400 13px "IBM Plex Mono", monospace; color: #FF6A55;
  }
  .foot {
    display: flex; justify-content: space-between; gap: 18px; margin-top: 16px;
    font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #6B7278;
  }

  @media (max-width: 860px) {
    .console::before, .console::after { display: none; }
    .brand { flex-direction: column; align-items: flex-start; gap: 4px; }
    .brand h1 { font-size: 24px; letter-spacing: .22em; }
    .strip { grid-template-columns: 28px 1fr; row-gap: 10px; }
    .strip .window { grid-column: 1 / -1; }
    .strip .ctrls { grid-column: 1 / -1; justify-content: flex-start; }
  }