/* ui/Studio — the Hangar studio. Contract: ./Studio.spec.md.
   Mobile first: the stage, the inspector, then the tiles in one column; side by side from 900 px.
   Tokens only (ui/Theme C8). */

.sp-studio {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 16px 16px 20px;
  box-sizing: border-box;
  color: var(--sp-text);
  overflow-y: auto;
}

.sp-studio__head {
  display: grid;
  gap: 10px;
}

.sp-studio__title {
  margin: 0;
  font: 700 14px/1 var(--sp-font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sp-studio__note {
  margin: 4px 0 0;
  font: 400 12px/1.3 var(--sp-font-ui);
  color: var(--sp-text-dim);
}

.sp-studio__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
  background: color-mix(in srgb, var(--sp-space-1) 80%, transparent);
}

.sp-studio__tab {
  /* Each tab as wide as its word needs, the row shared out: a long name (Blueprints) is not cut
     to a short one's width. */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  font: 700 13px/1 var(--sp-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sp-text-dim);
  background: transparent;
  border: 0;
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-studio__tab[aria-selected="true"] {
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-accent) 32%, var(--sp-space-2));
}

.sp-studio__tab:focus-visible, .sp-studio__tile:focus-visible, .sp-studio__point:focus-visible {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: 2px;
}

.sp-studio__body {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.sp-studio__stage-wrap {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.sp-studio__stage {
  width: min(100%, 300px);
  aspect-ratio: 1;
}

.sp-studio__inspector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  background: color-mix(in srgb, var(--sp-space-1) 80%, transparent);
  box-sizing: border-box;
}

.sp-studio__name { margin: 0; font: 700 16px/1.2 var(--sp-font-display); }
.sp-studio__tier { margin: 2px 0 0; font: 600 12px/1 var(--sp-font-ui); color: var(--sp-text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.sp-studio__tier[data-tier="rare"] { color: var(--sp-rarity-rare); }
.sp-studio__tier[data-tier="epic"] { color: var(--sp-rarity-epic); }
.sp-studio__tier[data-tier="legendary"] { color: var(--sp-rarity-legendary); }
.sp-studio__item-note { margin: 4px 0 0; font: 400 13px/1.3 var(--sp-font-ui); color: var(--sp-text-dim); }

.sp-studio__primary {
  min-width: 0;
  min-height: 48px;
  padding: 0 20px;
}

.sp-studio__primary:disabled { opacity: 0.45; cursor: default; }

.sp-studio__ghost {
  min-height: 44px;
  padding: 0 14px;
  font: 600 14px/1 var(--sp-font-ui);
  color: var(--sp-text);
  background: transparent;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-studio__ghost:disabled { opacity: 0.4; cursor: default; }

.sp-studio__buy-wrap { display: grid; justify-items: end; gap: 4px; }
.sp-studio__short { font: 400 12px/1 var(--sp-font-mono); color: var(--sp-text-dim); }
.sp-studio__worn, .sp-studio__earned { font: 600 13px/1 var(--sp-font-ui); color: var(--sp-text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.sp-studio__worn { color: var(--sp-up); }

.sp-studio__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

.sp-studio__tile {
  --hull: var(--sp-accent);
  --accent: var(--sp-accent);
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  padding: 8px 6px;
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-space-1) 78%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-studio__tile[data-selected="true"] { border-color: var(--sp-accent); box-shadow: 0 0 var(--sp-glow-sm) color-mix(in srgb, var(--sp-accent) 40%, transparent); }
/* Look: the other section's item the stage still tries on. Dashed, so it is not colour alone. */
.sp-studio__tile[data-tried="true"] { border: 1px dashed var(--sp-accent-2); }
.sp-studio__tile[data-owned="false"] { color: var(--sp-text-dim); }

.sp-studio__swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hull) 55%, var(--accent) 55%);
  border: 1px solid var(--sp-line-strong);
}

.sp-studio__tile-name { font: 600 13px/1.2 var(--sp-font-ui); text-align: center; }
.sp-studio__tile-state { font: 400 12px/1 var(--sp-font-mono); color: var(--sp-text-dim); }
.sp-studio__tile[data-worn="true"] .sp-studio__tile-state { color: var(--sp-up); }
.sp-studio__empty { margin: 0; color: var(--sp-text-dim); font: 400 14px/1.3 var(--sp-font-ui); }

.sp-studio__outline { display: grid; gap: 10px; justify-items: center; align-content: start; }
.sp-studio__outline-intro { margin: 0; font: 400 14px/1.4 var(--sp-font-ui); color: var(--sp-text-dim); text-align: center; max-width: 40em; }

.sp-studio__editor {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  background: color-mix(in srgb, var(--sp-space-0) 70%, transparent);
  touch-action: none;
}

.sp-studio__editor-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.sp-studio__point {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}

.sp-studio__point-dot {
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  border-radius: 50%;
  background: var(--sp-text);
  border: 2px solid var(--sp-accent);
  box-sizing: border-box;
}

.sp-studio__point[data-axis="true"] .sp-studio__point-dot { border-color: var(--sp-accent-2); }
.sp-studio__point[aria-pressed="true"] .sp-studio__point-dot { background: var(--sp-accent-2); transform: scale(1.3); }

.sp-studio__count { margin: 0; font: 400 13px/1 var(--sp-font-mono); color: var(--sp-text-dim); }
.sp-studio__toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.sp-studio__confirm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: color-mix(in srgb, var(--sp-space-0) 60%, transparent);
}

.sp-studio__confirm-card {
  display: grid;
  gap: 14px;
  width: min(100%, 380px);
  padding: 18px;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
  background: var(--sp-space-1);
}

.sp-studio__confirm-text { margin: 0; font: 600 16px/1.3 var(--sp-font-ui); }
.sp-studio__confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* The Blueprints tab: the builder fills it; a guest's prompt sits centred. */
.sp-studio__blueprints { min-height: min(70vh, 640px); }
.sp-studio__page-actions { display: flex; justify-content: flex-end; align-items: center; }
.sp-studio__guest { justify-items: center; text-align: center; padding: 32px 16px; }
.sp-studio__guest-text { margin: 0; max-width: 36ch; color: var(--sp-text-dim); font: 500 15px/1.4 var(--sp-font-ui); }

@media (min-width: 900px) and (min-height: 500px) {
  .sp-studio { padding: 12px 24px 24px; }
  .sp-studio__head { grid-template-columns: 1fr minmax(360px, 480px); align-items: end; }
  .sp-studio__body { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; }
  .sp-studio__items { max-height: calc(100vh - 262px); overflow-y: auto; padding-right: 4px; }
  /* Look: the two sections scroll as one list beside the stage; their own lists do not. */
  .sp-studio__look { max-height: calc(100vh - 262px); overflow-y: auto; padding-right: 4px; }
  .sp-studio__look .sp-studio__items { max-height: none; overflow-y: visible; padding-right: 0; }
  .sp-studio__confirm { place-items: center; }
}

/* Skins (docs/blueprints.md §7): tiles grouped under a heading each (the sets, then each module
   kind), every tile the module or the ship in that skin, drawn by the parent. */
.sp-studio__item[data-group] { display: contents; }

.sp-studio__group {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font: 600 13px/1 var(--sp-font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sp-text-faint);
}

.sp-studio__item[data-group] .sp-studio__tile { min-width: 0; }

/* A paint's tile with art: the pilot's own ship in that paint (docs/blueprints.md §7.2), small. */
.sp-studio__tile[style] .sp-studio__tile-art { max-width: 64px; }

.sp-studio__tile-art {
  display: block;
  width: 100%;
  max-width: 96px;
  aspect-ratio: 1;
  border-radius: var(--sp-radius-sm);
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--sp-accent) 14%, transparent), transparent 70%);
}

/* Look (Colour and Material, one tab): two sections in one scrolling list. A section's heading is
   a level above a kind's sub-heading: larger, brighter, a rule under it. The jump to the other
   section sits on the heading line, so it costs no row. */
.sp-studio__look { display: grid; gap: 20px; align-content: start; min-height: 0; }
.sp-studio__section { display: grid; gap: 10px; min-width: 0; scroll-margin-top: 8px; }

.sp-studio__section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sp-line-strong);
}

.sp-studio__section-title {
  margin: 0;
  font: 700 15px/1 var(--sp-font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sp-text);
}

.sp-studio__section-note { margin: 5px 0 0; font: 400 13px/1.3 var(--sp-font-ui); color: var(--sp-text-dim); }

.sp-studio__jump {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  font: 600 13px/1 var(--sp-font-ui);
  color: var(--sp-text);
  background: transparent;
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-studio__jump:focus-visible { outline: 2px solid var(--sp-accent-2); outline-offset: 2px; }
.sp-studio__jump-arrow { color: var(--sp-accent-2); }
.sp-studio__section .sp-studio__group:first-child { margin-top: 0; }

/* A phone held upright: the stage and the inspector stay in view while the two sections scroll
   under them, so a tile tapped far down the list (every Material tile is) shows on the ship at
   once. The stage is smaller to leave the tiles room; a jump lands its section below it. Not in
   landscape, where a held stage would leave no room for a tile. */
@media (max-width: 899px) and (min-height: 600px) {
  /* The body as tall as its list, so the stage has the whole list to stick through. */
  .sp-studio[data-tab="look"] { grid-template-rows: auto max-content; }
  .sp-studio[data-tab="look"] .sp-studio__stage-wrap {
    position: sticky;
    top: -16px;
    z-index: 1;
    margin: 0 -16px;
    padding: 4px 16px 10px;
    background: var(--sp-space-0);
    border-bottom: 1px solid var(--sp-line);
  }
  .sp-studio[data-tab="look"] .sp-studio__stage { width: min(100%, 190px); }
  /* The action beside the words, never under them: the held block keeps one height. */
  .sp-studio[data-tab="look"] .sp-studio__inspector { flex-wrap: nowrap; padding: 8px 12px; }
  .sp-studio[data-tab="look"] .sp-studio__about { flex: 1 1 0; min-width: 0; }
  .sp-studio[data-tab="look"] .sp-studio__buy-wrap { flex: none; }
  .sp-studio[data-tab="look"] .sp-studio__primary { padding: 0 14px; white-space: nowrap; }
  .sp-studio[data-tab="look"] .sp-studio__section { scroll-margin-top: 316px; }
}

/* A phone held sideways (the way the game is played): too short to stack, so the stage and the
   inspector are a narrow column held beside the list. */
@media (min-width: 600px) and (max-width: 899px) and (max-height: 599px), (min-width: 900px) and (max-height: 499px) {
  /* 375 to 390 px tall: the heading, its note and the tab row stacked took 150 px before any
     tab's own content. The heading and the tabs share one 44 px line and the note is left to the
     taller layouts, so a tab (and the creator inside Blueprints) starts 90 px higher. */
  .sp-studio { gap: 8px; padding: 8px max(12px, env(safe-area-inset-right)) 12px 12px; }
  .sp-studio__head { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .sp-studio__note { display: none; }
  .sp-studio[data-tab="look"] { grid-template-rows: auto max-content; }
  .sp-studio[data-tab="look"] .sp-studio__body { grid-template-columns: 210px minmax(0, 1fr); align-items: start; }
  .sp-studio[data-tab="look"] .sp-studio__stage-wrap { position: sticky; top: 0; }
  .sp-studio[data-tab="look"] .sp-studio__stage { width: min(100%, 150px); }
  .sp-studio[data-tab="look"] .sp-studio__inspector { padding: 8px 10px; }
}