/* ui/Garage: Torks's home, centre stage (2026-10-19): the driver in the middle of the top bar, the
   bot in the middle of the floor with DRIVE under it, the doors to its left, the jobs to its right. */
.tk-garage {
  display: grid;
  grid-template-columns: minmax(250px, 300px) 1fr minmax(260px, 300px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top top" "left stage jobs";
  column-gap: 28px;
  row-gap: 8px;
  padding: 22px 32px 24px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 55%, color-mix(in srgb, white 55%, transparent) 0, transparent 60%),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tk-sun) 55%, transparent) 0 18px, color-mix(in srgb, var(--tk-ink) 70%, transparent) 18px 36px) bottom / 100% 10px no-repeat,
    linear-gradient(color-mix(in srgb, var(--tk-ink) 6%, transparent) 2px, transparent 2px) 0 0 / 64px 64px,
    linear-gradient(90deg, color-mix(in srgb, var(--tk-ink) 6%, transparent) 2px, transparent 2px) 0 0 / 64px 64px,
    var(--tk-ground);
  overflow: hidden;
}

/* The top bar: the brand, the driver badge in the middle, the Bolts and the two pop-ups' buttons. */
.tk-garage__top {
  grid-area: top;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 20px;
}
.tk-garage__brand { display: flex; flex-direction: column; gap: 6px; }
.tk-garage__tagline { margin: 0; font: 600 14px/1.3 var(--tk-font-ui); }
.tk-garage__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 300px;
  padding: 10px 18px 8px;
  border-top: 8px solid var(--tk-sun);
}
.tk-garage__badge .tk-menu__driver { border: 0; box-shadow: none; padding: 0; background: none; }
.tk-garage__badge .tk-menu__driver-level { font-size: 20px; }
.tk-garage__name { display: flex; width: 100%; }
.tk-garage__name-input {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  border-bottom: 2px dashed color-mix(in srgb, var(--tk-ink) 35%, transparent);
  background: transparent;
  font: 700 17px/1.2 var(--tk-font-ui);
  text-align: center;
  color: var(--tk-ink);
}
.tk-garage__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tk-garage__corner { display: flex; gap: 10px; justify-content: flex-end; align-items: stretch; }
.tk-garage__icon { min-width: 48px; font: 400 22px/1 var(--tk-font-display); }
.tk-garage__link {
  padding: 0;
  border: 0;
  background: none;
  font: 700 13px/1 var(--tk-font-ui);
  color: var(--tk-sky);
  cursor: pointer;
}

/* The wordmark. */
.tk-garage__wordmark { display: flex; gap: 6px; }
.tk-garage__letter {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tk-ink);
  box-shadow: inset 0 3px 0 color-mix(in srgb, white 40%, transparent), 0 3px 0 var(--tk-ink);
  box-sizing: border-box;
  font: 400 35px/1 var(--tk-font-display);
  color: var(--tk-ink);
}
.tk-garage__wordmark[data-size="small"] .tk-garage__letter { width: 40px; height: 40px; font-size: 24px; }
.tk-garage__letter[data-tone="coral"] { background: var(--tk-coral); }
.tk-garage__letter[data-tone="sun"] { background: var(--tk-sun); }
.tk-garage__letter[data-tone="teal"] { background: var(--tk-teal); }
.tk-garage__letter[data-tone="sky"] { background: var(--tk-sky); }
.tk-garage__letter[data-tone="lime"] { background: var(--tk-lime); }

/* The doors, stacked on the left. */
.tk-garage__left { grid-area: left; display: flex; flex-direction: column; gap: 14px; align-self: center; }
.tk-garage__doors { display: flex; flex-direction: column; gap: 12px; }
.tk-garage__door {
  position: relative;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px 8px 30px;
  text-align: left;
  cursor: pointer;
}
.tk-garage__door-mark {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  border-right: 3px solid var(--tk-ink);
}
.tk-garage__door[data-tone="sky"] .tk-garage__door-mark { background: var(--tk-sky); }
.tk-garage__door[data-tone="coral"] .tk-garage__door-mark { background: var(--tk-coral); }
.tk-garage__door[data-tone="sun"] .tk-garage__door-mark { background: var(--tk-sun); }
.tk-garage__door[data-tone="lime"] .tk-garage__door-mark { background: var(--tk-lime); }
.tk-garage__door-name { font: 400 20px/1 var(--tk-font-display); text-transform: uppercase; }
.tk-garage__door { flex-direction: row; align-items: center; justify-content: space-between; }
.tk-garage__door-icon { flex: none; width: 34px; height: 34px; background: var(--tk-ink); }
.tk-garage__door-icon[data-page="workshop"] { background: var(--tk-sky); clip-path: polygon(8% 8%, 72% 8%, 72% 34%, 52% 34%, 52% 96%, 30% 96%, 30% 34%, 8% 34%); }
.tk-garage__door-icon[data-page="paint"] { background: var(--tk-coral); clip-path: polygon(50% 0, 80% 42%, 88% 62%, 80% 82%, 50% 96%, 20% 82%, 12% 62%, 20% 42%); }
.tk-garage__door-icon[data-page="jobs"] { background: var(--tk-sun); clip-path: polygon(6% 55%, 22% 39%, 40% 57%, 78% 15%, 94% 31%, 40% 89%); }
.tk-garage__door-icon[data-page="boards"] { background: var(--tk-lime); clip-path: polygon(14% 4%, 86% 4%, 86% 30%, 64% 54%, 57% 54%, 57% 74%, 74% 80%, 74% 96%, 26% 96%, 26% 80%, 43% 74%, 43% 54%, 36% 54%, 14% 30%); }
.tk-garage__door:hover { background: white; transform: translateX(3px); }
.tk-garage__best { margin: 0; font: 600 13px/1.3 var(--tk-font-ui); color: var(--tk-ink-dim); }

/* The stage: the bot, its plate, DRIVE. */
.tk-garage__stage {
  grid-area: stage;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.tk-garage__showroom { width: min(500px, 56vh); height: auto; aspect-ratio: 1; margin: -40px 0 -50px; cursor: pointer; }
.tk-garage__picker { display: flex; align-items: center; gap: 10px; }
.tk-garage__arrow { min-width: 44px; align-self: stretch; font: 400 22px/1 var(--tk-font-display); }
.tk-garage__plate { display: flex; align-items: center; gap: 8px; padding: 8px 14px; }
.tk-garage__tier {
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tk-sky);
  border: 2px solid var(--tk-ink);
  box-sizing: border-box;
  font: 400 12px/1 var(--tk-font-display);
}
.tk-garage__bot-name { font: 400 22px/1 var(--tk-font-display); text-transform: uppercase; }
.tk-garage__bot-by { font-size: 13px; }
.tk-garage__under { display: flex; align-items: center; gap: 12px; }
.tk-garage__stats { padding: 8px 12px; }
.tk-garage__kind {
  padding: 5px 10px;
  border: 2px solid var(--tk-ink);
  font: 400 13px/1 var(--tk-font-display);
  text-transform: uppercase;
  background: var(--tk-sun);
}
.tk-garage__kind[data-kind="own"] { background: var(--tk-sky); color: var(--tk-paper); }
.tk-garage__kind[data-kind="featured"] { background: var(--tk-teal); }
.tk-garage__drive {
  width: min(420px, 100%);
  height: 88px;
  margin-top: 6px;
  background: var(--tk-coral);
  border: var(--tk-border);
  box-shadow: inset 0 5px 0 color-mix(in srgb, white 35%, transparent), var(--tk-ledge);
  color: var(--tk-paper);
  font: 400 42px/1 var(--tk-font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 var(--tk-ink);
  cursor: pointer;
}
.tk-garage__drive:hover { filter: brightness(1.05); }
.tk-garage__drive:active { transform: translateY(5px); box-shadow: 0 0 0 var(--tk-ink); }
.tk-garage__showroom-line { margin: 0; font-size: 13px; font-weight: 700; text-align: center; max-width: 360px; }

/* The jobs, on the right. */
.tk-garage__jobs { grid-area: jobs; align-self: center; padding: 12px 14px 6px; }
.tk-garage__jobs-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
}
.tk-garage__jobs-title { margin: 0; font: 400 17px/1 var(--tk-font-display); text-transform: uppercase; }
.tk-garage__job {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 2px dashed color-mix(in srgb, var(--tk-ink) 25%, transparent);
}
.tk-garage__job-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 600 14px/1.2 var(--tk-font-ui);
}
.tk-garage__job-pay .tk-menu__bolts { font-size: 14px; gap: 4px; }
.tk-garage__job-pay .tk-menu__bolt { --size: 15px !important; }
.tk-garage__job-bar { display: flex; gap: 3px; }
.tk-garage__seg {
  flex: 1;
  height: 10px;
  background: var(--tk-paper-2);
  border: 2px solid var(--tk-ink);
  box-sizing: border-box;
}
.tk-garage__seg[data-on] { background: var(--tk-sun); }
.tk-garage__job[data-done] .tk-garage__seg { background: var(--tk-lime); }

@media (max-width: 760px) {
  /* A phone: one scrolling column, the chips first, then the bot and DRIVE, the doors, the jobs. */
  .tk-garage { display: flex; flex-direction: column; gap: 16px; padding: 14px; overflow: auto; }
  .tk-garage__top, .tk-garage__left, .tk-garage__stage, .tk-garage__jobs { position: static; width: auto; margin: 0; transform: none; }
  .tk-garage__top { order: -1; grid-template-columns: 1fr; justify-items: center; }
  .tk-garage__left { order: 1; }
  .tk-garage__jobs { order: 2; }
  .tk-garage__badge { min-width: 0; width: 100%; box-sizing: border-box; }
  .tk-garage__letter { width: 36px; height: 36px; font-size: 22px; }
  .tk-garage__drive { height: 72px; font-size: 32px; }
  .tk-garage__door { min-height: 56px; }
  .tk-garage__showroom { width: min(300px, 80vw); margin: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .tk-garage { grid-template-columns: 230px 1fr 250px; column-gap: 16px; padding: 18px 20px; }
  .tk-garage__brand .tk-garage__tagline { display: none; }
}
@media (max-height: 500px) {
  /* A phone on its side (the mobile pass, 2026-10-19): one screen, nothing to scroll. The top bar
     slims, the doors are a narrow column on the left, the bot and DRIVE fill the middle, and the
     jobs panel goes (its door is still there). */
  .tk-garage {
    display: grid;
    grid-template-columns: minmax(150px, 190px) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "top top" "left stage";
    column-gap: 14px;
    row-gap: 4px;
    padding: 8px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .tk-garage__top { order: 0; grid-template-columns: 1fr auto 1fr; justify-items: stretch; gap: 10px; }
  .tk-garage__tagline, .tk-garage__best, .tk-garage__showroom-line, .tk-garage__jobs { display: none; }
  .tk-garage__letter, .tk-garage__wordmark[data-size="small"] .tk-garage__letter { width: 28px; height: 28px; font-size: 17px; }
  .tk-garage__wordmark { gap: 4px; }
  .tk-garage__badge { min-width: 0; width: auto; gap: 2px; padding: 4px 12px 4px; border-top-width: 5px; }
  .tk-garage__badge .tk-menu__driver-level { font-size: 15px; }
  .tk-garage__name-input { font-size: 14px; padding: 2px 4px; }
  .tk-garage__link { font-size: 12px; }
  .tk-garage__icon { min-width: 40px; font-size: 18px; }
  .tk-garage__corner { gap: 6px; }
  .tk-garage__corner > * { min-height: 40px; }
  .tk-garage__left { align-self: center; gap: 8px; order: 0; }
  .tk-garage__doors { gap: 8px; }
  .tk-garage__door { min-height: 44px; padding: 4px 10px 4px 22px; }
  .tk-garage__door-mark { width: 9px; }
  .tk-garage__door-name { font-size: 15px; }
  .tk-garage__door-icon { width: 22px; height: 22px; }
  .tk-garage__stage { gap: 6px; justify-content: center; }
  .tk-garage__showroom { width: min(300px, 60vh); margin: -40px 0 -44px; }
  .tk-garage__plate { padding: 5px 10px; }
  .tk-garage__bot-name { font-size: 17px; }
  .tk-garage__bot-by { font-size: 12px; }
  .tk-garage__drive { width: min(320px, 100%); height: 58px; font-size: 30px; margin-top: 2px; }
}
/* The account's callsign and the badge's links (sign-in, 2026-10-19). */
.tk-garage__callsign { justify-content: center; align-items: center; gap: 6px; font: 700 17px/1.2 var(--tk-font-ui); }
.tk-garage__links { display: flex; gap: 14px; justify-content: center; }
/* The Factory Pass on the balance (the web only): a lit +50% for a member, an outlined invitation. */
.tk-garage__pass {
  align-self: center;
  margin-left: 8px;
  padding: 3px 6px;
  border: 2px solid var(--tk-ink);
  font: 400 12px/1 var(--tk-font-display);
  color: var(--tk-ink);
  text-decoration: none;
  white-space: nowrap;
}
.tk-garage__pass[data-member="true"] { background: var(--tk-sun); }
a.tk-garage__pass { background: var(--tk-paper); }
a.tk-garage__pass:hover { background: var(--tk-sun); }
/* The member's mark beside a callsign: a small sun diamond. */
.tk-pass-mark {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  background: var(--tk-sun);
  border: 2px solid var(--tk-ink);
  transform: rotate(45deg);
  vertical-align: middle;
}