/* 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(.tk-run__card, .tk-offer__card, .tk-studio__confirm-card, .tk-settings__panel, .tk-board,
    .tk-bpg__card, .tk-bpg__new, .tk-bpg__note, .tk-bpg__empty, .tk-more__panel, .tk-build, .tk-vote, .tk-quick-chat,
    .tk-releases__panel, .tk-howto__panel, .tk-signin__panel, .tk-signin__merge, .tk-leaderboard, .tk-pilot-profile__panel,
    .tk-hud__match, .tk-hud__minimap, .tk-hud__vitals, .tk-hud__hint, .tk-hud__tip, .tk-hud__toast,
    .tk-adna__panel, .tk-update__panel, .tk-bpb__panel, .tk-bpb__stage-area, .tk-card) {
  border-radius: var(--tk-radius);
  border: 1px solid var(--tk-seam);
  background: var(--tk-rivets), var(--tk-plate);
  box-shadow: var(--tk-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(.tk-hud__match, .tk-hud__hint, .tk-hud__tip, .tk-hud__toast, .tk-bpg__note, .tk-board) { background: var(--tk-plate); }

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

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

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

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

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

/* What is selected, current or on is arc blue (--tk-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(.tk-studio__tab[aria-selected="true"], .tk-howto__tab[aria-selected="true"], .tk-leaderboard__tab[data-selected],
    .tk-bpb__mode[aria-pressed="true"], .tk-bpb__order-mode[aria-pressed="true"],
    .tk-bpb__skin-mode[aria-pressed="true"]) {
  color: var(--tk-ink);
  background: var(--tk-select);
  border-color: var(--tk-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(.tk-studio__tile[data-selected="true"], .tk-settings__option[data-selected="true"],
    .tk-bpb__kind[aria-pressed="true"], .tk-bpb__weapon[aria-pressed="true"],
    .tk-bpb__heading[aria-pressed="true"], .tk-offer__card[data-selected="true"], .tk-bpg__card[data-selected="true"]) {
  border-color: var(--tk-select);
  background: color-mix(in srgb, var(--tk-select) 14%, var(--tk-space-1));
  box-shadow: 0 0 0 1px var(--tk-select), 0 2px 0 var(--tk-edge-dark);
}
.tk-settings__option[data-selected="true"] .tk-settings__option-mark {
  background: radial-gradient(circle, var(--tk-select) 0 45%, transparent 46%);
  border-color: var(--tk-select);
}
.tk-howto__class-blocks i[data-on="true"] { border-color: var(--tk-select); background: var(--tk-select); }

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

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

/* The creator's actions are plates too: Publish the orange one, the rest small dark ones. */
.tk-bpb__action { border: 1px solid var(--tk-seam); background: var(--tk-space-2); box-shadow: inset 0 1px 0 var(--tk-edge-light), 0 3px 0 var(--tk-edge-dark); }
.tk-bpb__action.tk-button--primary { color: var(--tk-ink); border-color: var(--tk-seam); background: linear-gradient(180deg, color-mix(in srgb, var(--tk-action) 86%, white), var(--tk-action) 45%); box-shadow: inset 0 2px 0 color-mix(in srgb, white 35%, transparent), 0 3px 0 color-mix(in srgb, var(--tk-action) 55%, black); }
.tk-bpb__action:disabled, .tk-bpb__action.tk-button--primary:disabled { color: var(--tk-text-faint); background: var(--tk-space-1); border-color: var(--tk-seam); box-shadow: inset 0 1px 0 var(--tk-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. */
.tk-bpb__board {
  --tk-line: var(--tk-sheet-line);
  --tk-line-strong: var(--tk-sheet-line-strong);
  --tk-tick: var(--tk-sheet-ink);
  background:
    linear-gradient(var(--tk-tick), var(--tk-tick)) left top / 12px 2px no-repeat,
    linear-gradient(var(--tk-tick), var(--tk-tick)) left top / 2px 12px no-repeat,
    linear-gradient(var(--tk-tick), var(--tk-tick)) right top / 12px 2px no-repeat,
    linear-gradient(var(--tk-tick), var(--tk-tick)) right top / 2px 12px no-repeat,
    linear-gradient(var(--tk-tick), var(--tk-tick)) left bottom / 12px 2px no-repeat,
    linear-gradient(var(--tk-tick), var(--tk-tick)) left bottom / 2px 12px no-repeat,
    linear-gradient(var(--tk-tick), var(--tk-tick)) right bottom / 12px 2px no-repeat,
    linear-gradient(var(--tk-tick), var(--tk-tick)) right bottom / 2px 12px no-repeat,
    repeating-linear-gradient(0deg, var(--tk-sheet-line-strong) 0 14px, transparent 14px 18px, var(--tk-sheet-line-strong) 18px 21px, transparent 21px 25px) center / 1px 100% no-repeat,
    radial-gradient(ellipse at 50% 45%, var(--tk-sheet-raised), var(--tk-sheet) 75%);
  outline: 1px solid var(--tk-sheet-line-strong);
  outline-offset: -1px;
  box-shadow: 0 0 0 1px var(--tk-seam), 0 4px 0 1px var(--tk-edge-dark);
}
/* The board is sized by what stands over and under it (ui/BlueprintBuilder's --tk-bpb-above and
   --tk-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) {
  .tk-bpb { --tk-bpb-above: 450px; --tk-bpb-top: 298px; }
  .tk-bpb[data-mode="grow"] { --tk-bpb-above: 504px; }
  .tk-bpb__under { gap: 8px; }
  .tk-bpb__skin-mode { min-width: 0; padding: 0 10px; }
}
.tk-bpb__cell { border-radius: 0; }
.tk-bpb__cell[data-axis="true"] { border-color: var(--tk-sheet-line-strong); }
.tk-bpb__cell:hover:not([disabled]) { background: color-mix(in srgb, var(--tk-sheet-ink) 14%, transparent); }
.tk-bpb__cell[data-selected="true"] { box-shadow: inset 0 0 0 2px var(--tk-select); }
.tk-bpb__tier-art {
  background: radial-gradient(ellipse at 50% 45%, var(--tk-sheet-raised), var(--tk-sheet) 75%);
  outline: 1px solid var(--tk-sheet-line-strong);
  outline-offset: -1px;
}

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

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

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