/* ui/Theme — the skin: what every block's panels, chips, selections and gauges are made of.
   Contract: ./Theme.spec.md (The skin). Load this AFTER the last block stylesheet.

   The blocks own their layout and their type; this file owns the material, in one place, so a
   panel in the HUD and a panel in the Studio are the same plate. It declares no token and no
   face (those are theme.css's), and it never lays anything out. */

/* ------------------------------------------------------------- plates --- */

/* A panel is a plate: matte, seamed in black, lit on its top edge, riveted at its corners. */
:is(.sp-run__card, .sp-offer__card, .sp-studio__confirm-card, .sp-settings__panel, .sp-board,
    .sp-bpg__card, .sp-bpg__new, .sp-bpg__note, .sp-bpg__empty, .sp-more__panel, .sp-build, .sp-vote, .sp-quick-chat,
    .sp-releases__panel, .sp-howto__panel, .sp-signin__panel, .sp-signin__merge, .sp-leaderboard, .sp-pilot-profile__panel,
    .sp-hud__match, .sp-hud__minimap, .sp-hud__vitals, .sp-hud__hint, .sp-hud__tip, .sp-hud__toast,
    .sp-adna__panel, .sp-update__panel, .sp-bpb__panel, .sp-bpb__stage-area, .sp-card) {
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-seam);
  background: var(--sp-rivets), var(--sp-plate);
  box-shadow: var(--sp-bevel);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* A plate that holds one line of text has no rivets: at that size they read as punctuation. */
:is(.sp-hud__match, .sp-hud__hint, .sp-hud__tip, .sp-hud__toast, .sp-bpg__note, .sp-board) { background: var(--sp-plate); }

/* A chip, a tag, a small control: a small plate, no rivets. */
:is(.sp-feed__entry, .sp-hud__badge, .sp-hud__call, .sp-threat__label, .sp-hud__chat, .sp-hud__invite, .sp-hud__net,
    .sp-settings__gear, .sp-run__stat, .sp-studio__tile, .sp-studio__inspector, .sp-signin__row, .sp-vote__button,
    .sp-bpb__kind, .sp-bpb__weapon, .sp-bpb__heading, .sp-bpb__step) {
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-seam);
  background: var(--sp-space-1);
  box-shadow: inset 0 1px 0 var(--sp-edge-light), 0 2px 0 var(--sp-edge-dark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* A row of tabs or a switch stands in a socket. */
:is(.sp-studio__tabs, .sp-howto__tabs, .sp-bpb__modes, .sp-bpb__order-modes, .sp-bpb__skin) {
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-seam);
  background: var(--sp-well);
  box-shadow: var(--sp-inset);
}

/* Tabs are square-shouldered here, never pills. */
:is(.sp-howto__tab, .sp-leaderboard__tab, .sp-studio__tab) { border-radius: 2px; }

/* A scrim under a sheet or a dialog: the bay with the lights down, never a blur. */
:is(.sp-settings__scrim, .sp-more__scrim, .sp-ops-sheet__scrim, .sp-adna__scrim, .sp-pilot-profile__scrim, .sp-update__scrim) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------------------------------------------------------- selection --- */

/* What is selected, current or on is arc blue (--sp-select), never the ship's orange or the
   currency's brass. A selected tab or switch half is a lit plate with dark lettering. */
:is(.sp-studio__tab[aria-selected="true"], .sp-howto__tab[aria-selected="true"], .sp-leaderboard__tab[data-selected],
    .sp-bpb__mode[aria-pressed="true"], .sp-bpb__order-mode[aria-pressed="true"],
    .sp-bpb__skin-mode[aria-pressed="true"]) {
  color: var(--sp-ink);
  background: var(--sp-select);
  border-color: var(--sp-seam);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 40%, transparent);
}

/* A selected tile, option or tool keeps its face and takes a blue edge and a blue wash. */
:is(.sp-studio__tile[data-selected="true"], .sp-settings__option[data-selected="true"],
    .sp-bpb__kind[aria-pressed="true"], .sp-bpb__weapon[aria-pressed="true"],
    .sp-bpb__heading[aria-pressed="true"], .sp-offer__card[data-selected="true"], .sp-bpg__card[data-selected="true"]) {
  border-color: var(--sp-select);
  background: color-mix(in srgb, var(--sp-select) 14%, var(--sp-space-1));
  box-shadow: 0 0 0 1px var(--sp-select), 0 2px 0 var(--sp-edge-dark);
}
.sp-settings__option[data-selected="true"] .sp-settings__option-mark {
  background: radial-gradient(circle, var(--sp-select) 0 45%, transparent 46%);
  border-color: var(--sp-select);
}
.sp-howto__class-blocks i[data-on="true"] { border-color: var(--sp-select); background: var(--sp-select); }

/* -------------------------------------------------------------- gauges --- */

/* A meter is a gauge set into the plate: a dark well with an inset shadow, a square fill. */
:is(.sp-meter, .sp-run__mastery-bar, .sp-run__mission-bar, .sp-bpb__rule-bar, .sp-bpb__meter-bar) {
  border-radius: 2px;
  background-color: var(--sp-well);
  box-shadow: var(--sp-inset);
}
:is(.sp-meter__fill, .sp-run__mastery-bar > *, .sp-run__mission-bar > *) { border-radius: 1px; }

/* The creator's actions are plates too: Publish the orange one, the rest small dark ones. */
.sp-bpb__action { border: 1px solid var(--sp-seam); background: var(--sp-space-2); box-shadow: inset 0 1px 0 var(--sp-edge-light), 0 3px 0 var(--sp-edge-dark); }
.sp-bpb__action.sp-button--primary { color: var(--sp-ink); border-color: var(--sp-seam); background: linear-gradient(180deg, color-mix(in srgb, var(--sp-action) 86%, white), var(--sp-action) 45%); box-shadow: inset 0 2px 0 color-mix(in srgb, white 35%, transparent), 0 3px 0 color-mix(in srgb, var(--sp-action) 55%, black); }
.sp-bpb__action:disabled, .sp-bpb__action.sp-button--primary:disabled { color: var(--sp-text-faint); background: var(--sp-space-1); border-color: var(--sp-seam); box-shadow: inset 0 1px 0 var(--sp-edge-light); }

/* ------------------------------------------------- the drafting sheet --- */

/* The blueprint creator's board (ui/BlueprintBuilder: the editor in Build, the viewer in Grow, and a
   phone's tier picture) is the one place in the game that is a drawing: blueprint paper, chalk
   lines, registered corners, a centre line. The workshop is everything round it: the sheet lies on
   a plate. Only the board's own box and its cells are named here, nothing about the bar or the
   panels' order. */
.sp-bpb__board {
  --sp-line: var(--sp-sheet-line);
  --sp-line-strong: var(--sp-sheet-line-strong);
  --sp-tick: var(--sp-sheet-ink);
  background:
    linear-gradient(var(--sp-tick), var(--sp-tick)) left top / 12px 2px no-repeat,
    linear-gradient(var(--sp-tick), var(--sp-tick)) left top / 2px 12px no-repeat,
    linear-gradient(var(--sp-tick), var(--sp-tick)) right top / 12px 2px no-repeat,
    linear-gradient(var(--sp-tick), var(--sp-tick)) right top / 2px 12px no-repeat,
    linear-gradient(var(--sp-tick), var(--sp-tick)) left bottom / 12px 2px no-repeat,
    linear-gradient(var(--sp-tick), var(--sp-tick)) left bottom / 2px 12px no-repeat,
    linear-gradient(var(--sp-tick), var(--sp-tick)) right bottom / 12px 2px no-repeat,
    linear-gradient(var(--sp-tick), var(--sp-tick)) right bottom / 2px 12px no-repeat,
    repeating-linear-gradient(0deg, var(--sp-sheet-line-strong) 0 14px, transparent 14px 18px, var(--sp-sheet-line-strong) 18px 21px, transparent 21px 25px) center / 1px 100% no-repeat,
    radial-gradient(ellipse at 50% 45%, var(--sp-sheet-raised), var(--sp-sheet) 75%);
  outline: 1px solid var(--sp-sheet-line-strong);
  outline-offset: -1px;
  box-shadow: 0 0 0 1px var(--sp-seam), 0 4px 0 1px var(--sp-edge-dark);
}
/* The board is sized by what stands over and under it (ui/BlueprintBuilder's --sp-bpb-above and
   --sp-bpb-top, written for a 56 px top bar). On a desktop this look's header and tab row are
   98 px and the floor tape 8 px, the Studio's top padding 8 px less: 42 px more than the creator's
   own figures (which count its row of stage tabs), or Undo and Redo fall under the fold. The row under the board is set a little tighter, so it stays one row. */
@media (min-width: 900px) and (min-height: 500px) {
  .sp-bpb { --sp-bpb-above: 450px; --sp-bpb-top: 298px; }
  .sp-bpb[data-mode="grow"] { --sp-bpb-above: 504px; }
  .sp-bpb__under { gap: 8px; }
  .sp-bpb__skin-mode { min-width: 0; padding: 0 10px; }
}
.sp-bpb__cell { border-radius: 0; }
.sp-bpb__cell[data-axis="true"] { border-color: var(--sp-sheet-line-strong); }
.sp-bpb__cell:hover:not([disabled]) { background: color-mix(in srgb, var(--sp-sheet-ink) 14%, transparent); }
.sp-bpb__cell[data-selected="true"] { box-shadow: inset 0 0 0 2px var(--sp-select); }
.sp-bpb__tier-art {
  background: radial-gradient(ellipse at 50% 45%, var(--sp-sheet-raised), var(--sp-sheet) 75%);
  outline: 1px solid var(--sp-sheet-line-strong);
  outline-offset: -1px;
}

/* ------------------------------------------------------------- controls --- */

/* A slider's thumb and a checkbox are selection: arc blue. */
.sp-root :is(input[type="range"], input[type="checkbox"], input[type="radio"]) { accent-color: var(--sp-select); }

/* A text field is a socket. */
:is(.sp-settings__field, .sp-bpb__name, .sp-bpg__code-input, .sp-signin__input) {
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-seam);
  background: var(--sp-well);
  box-shadow: var(--sp-inset);
}