/* ============================================================================
   HitchAI — the keyword window (assets/js/keyword-builder.js). Moved here from
   explorer/workstation.css on 2026-10-08 so every surface draws the same window.
   Class names keep the Workstation's `ws-mb` prefix on purpose: its browser
   probe drives them. Colours are hitch-tokens.css tokens only.
   ========================================================================== */
/* The few Workstation controls the window uses, scoped to it so a page that
   does not load workstation.css still draws them. */
.ws-mb .ws-input { width: 100%; box-sizing: border-box; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: .55rem .7rem; font: 400 .85rem var(--sans); }
.ws-mb .ws-input:focus { outline: none; border-color: var(--accent); }
.ws-mb .ws-btn { font: 500 .72rem var(--mono); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .38rem .8rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ws-mb .ws-btn:hover { border-color: var(--ink-faint); }
.ws-mb .ws-btn--acc { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-mb .ws-chip { font: 500 .68rem var(--mono); color: var(--ink-dim); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .28rem .65rem; cursor: pointer; }
.ws-mb .ws-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.ws-mb .ws-sec__chev { display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-faint); border-bottom: 1.5px solid var(--ink-faint); transform: rotate(-45deg); transition: transform .15s; flex: none; margin-left: .15rem; }
.ws-mb__intro { margin: .5rem 0 0; font: 400 .9rem/1.5 var(--sans); color: var(--ink-dim); max-width: 46rem; }
body.ws-mb-on { overflow: hidden; }
.ws-mb[hidden] { display: none; }
.ws-mb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.ws-mb__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px); }
.ws-mb__box { position: relative; width: min(1000px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px color-mix(in srgb, var(--bg) 80%, transparent); overflow: hidden; }
.ws-mb__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.ws-mb__kick { font: 700 .6rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ws-mb__head h2 { margin: .25rem 0 0; font: 400 1.7rem/1.1 var(--serif); color: var(--ink); }
.ws-mb__x { background: none; border: 1px solid var(--line); color: var(--ink-dim); border-radius: 999px; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer; flex: none; }
.ws-mb__x:hover { color: var(--ink); border-color: var(--ink-faint); }
.ws-mb__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; overflow: auto; }
.ws-mb__form { padding: 1.2rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.ws-mb__lbl { display: block; font: 600 .78rem/1.3 var(--sans); color: var(--ink-dim); margin-bottom: .5rem; }
.ws-mb__lbl b { color: var(--ink); }
.ws-mb__ai { padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 10px; }
.ws-mb__airow { display: flex; gap: .5rem; }
.ws-mb__airow .ws-input { flex: 1; min-width: 0; }
.ws-mb__aimsg { font: 400 .74rem/1.5 var(--sans); color: var(--ink-dim); margin-top: .5rem; }
.ws-mb__aimsg:empty { display: none; }
.ws-mb__aimsg.bad, .ws-mb__msg.bad { color: var(--warn); }
.ws-mb__terms { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 46px; padding: .45rem .5rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; cursor: text; }
.ws-mb__terms:focus-within { border-color: var(--accent); }
.ws-mb__chips { display: contents; }
.ws-mb__tin { flex: 1; min-width: 12rem; background: transparent; border: 0; color: var(--ink); font: 400 .88rem var(--sans); padding: .3rem .2rem; }
.ws-mb__tin:focus { outline: none; }
.ws-mb__chip { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .3rem .28rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); font: 500 .8rem var(--sans); max-width: 100%; }
.ws-mb__chip--all { background: color-mix(in srgb, var(--accent-soft) 10%, transparent); border-color: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.ws-mb__chip--none { background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent); border-style: dashed; }
.ws-mb__cw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mb__cn { font: 500 .66rem var(--mono); font-style: normal; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ws-mb__chip button { background: none; border: 0; color: var(--ink-faint); cursor: pointer; width: 20px; height: 20px; border-radius: 999px; font-size: .95rem; line-height: 1; padding: 0; }
.ws-mb__chip button:hover { color: var(--ink); background: var(--line); }
.ws-mb__help { font: 400 .72rem/1.5 var(--sans); color: var(--ink-faint); margin: .45rem 0 0; }
.ws-mb__more { align-self: flex-start; display: inline-flex; align-items: center; gap: .55rem; background: none; border: 0; padding: 0; cursor: pointer; font: 600 .74rem var(--sans); color: var(--ink-dim); }
.ws-mb__more:hover { color: var(--ink); }
.ws-mb__more.open .ws-sec__chev { transform: rotate(45deg); }
.ws-mb__narrow { display: none; flex-direction: column; gap: 1rem; padding-left: .9rem; border-left: 1px solid var(--line); }
.ws-mb__narrow.open { display: flex; }
.ws-mb__namenote { font: 400 .7rem/1.5 var(--sans); color: var(--ink-faint); margin-top: .4rem; }
.ws-mb__namenote:empty { display: none; }
.ws-mb__prev { border-left: 1px solid var(--line); background: var(--bg-soft); padding: 1.2rem 1.3rem 1.4rem; min-width: 0; transition: opacity .15s; }
.ws-mb__prev--busy { opacity: .6; }
.ws-mb__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ws-mb__big { font: 400 1.75rem/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.ws-mb__big--dim { color: var(--ink-dim); }
.ws-mb__k { font: 600 .58rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: .35rem; }
.ws-mb__split { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin: 1.1rem 0 .45rem; background: var(--line); gap: 2px; }
.ws-mb__split--n, .ws-mb__dot--n { background: var(--accent); }
.ws-mb__split--j, .ws-mb__dot--j { background: color-mix(in srgb, var(--accent) 40%, var(--ink-faint)); }
.ws-mb__splitk { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font: 400 .7rem var(--mono); color: var(--ink-dim); }
.ws-mb__dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.ws-mb__wait { font: 400 .72rem/1.5 var(--sans); color: var(--accent-soft); margin: .8rem 0 0; }
.ws-mb__none { font: 400 .8rem/1.55 var(--sans); color: var(--ink-dim); margin: 1rem 0 0; }
.ws-mb__toplbl { margin: 1.3rem 0 .4rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.ws-mb__top { list-style: none; margin: 0; padding: 0; }
.ws-mb__top li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; padding: .45rem 0; border-top: 1px solid var(--line-soft); }
.ws-mb__tt { font: 400 .78rem/1.3 var(--sans); color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ws-mb__tt small { display: block; font: 400 .64rem var(--mono); color: var(--ink-faint); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-mb__tag { font: 600 .56rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 4px; padding: .05rem .3rem; }
.ws-mb__tag--j { color: var(--ink-dim); border-color: var(--line); }
.ws-mb__tv { font: 500 .74rem var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; min-width: 4.2rem; }
.ws-mb__rest { font: 400 .68rem var(--mono); color: var(--ink-faint); margin-top: .5rem; }
.ws-mb__empty p { font: 400 .8rem/1.6 var(--sans); color: var(--ink-dim); margin: .7rem 0 1rem; }
.ws-mb__try { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font: 400 .72rem var(--sans); color: var(--ink-faint); }
.ws-mb__foot { display: flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-top: 1px solid var(--line); background: var(--bg-panel); }
.ws-mb__msg { flex: 1; min-width: 0; font: 400 .74rem var(--sans); color: var(--ink-dim); }
.ws-mb .ws-mb__save { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.ws-mb .ws-mb__save:hover { filter: brightness(1.08); border-color: var(--accent); }
.ws-mb__save:disabled, #ws-mb-use:disabled { opacity: .5; cursor: default; }
.ws-mb .ws-mb__del { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); margin-right: auto; }
@media (max-width: 760px) {
  .ws-mb { padding: 0; place-items: stretch; }
  .ws-mb__box { max-height: 100vh; border-radius: 0; }
  .ws-mb__body { grid-template-columns: 1fr; }
  .ws-mb__prev { border-left: 0; border-top: 1px solid var(--line); }
  .ws-mb__head, .ws-mb__form, .ws-mb__foot { padding-left: 16px; padding-right: 16px; }
  .ws-mb__foot { flex-wrap: wrap; }
  .ws-mb__msg { flex-basis: 100%; }
  .ws-mb__tin { min-width: 8rem; }
}

/* ==== the market builder, BIG and centred (Kevin, 2026-10-07: "make a big center
   keyword modal") — nearly the whole screen, larger type, the program list scrolls
   inside its own pane so the words and the buttons never move ==== */
.ws-mb { padding: 24px; }
.ws-mb__box { width: min(1360px, 100%); height: min(900px, calc(100vh - 48px)); max-height: none; border-radius: 16px; }
.ws-mb__head { padding: 1.5rem 2rem 1.2rem; }
.ws-mb__kick { font-size: .66rem; }
.ws-mb__head h2 { font-size: 2.4rem; }
.ws-mb__x { width: 38px; height: 38px; font-size: 1.35rem; }
.ws-mb__body { flex: 1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; }
.ws-mb__form { padding: 1.6rem 2rem 2rem; gap: 1.5rem; overflow-y: auto; }
.ws-mb__lbl { font-size: .92rem; margin-bottom: .65rem; }
.ws-mb__ai { padding: 1.1rem 1.2rem; }
.ws-mb__ai .ws-input { font-size: .95rem; padding: .7rem .9rem; }
.ws-mb__aimsg, .ws-mb__help, .ws-mb__namenote { font-size: .8rem; }
.ws-mb__terms { min-height: 140px; align-content: flex-start; padding: .7rem .75rem; border-radius: 12px; gap: .45rem; }
.ws-mb__narrow .ws-mb__terms { min-height: 64px; }
.ws-mb__tin { font-size: 1.05rem; min-width: 16rem; padding: .4rem .3rem; }
.ws-mb__chip { font-size: .95rem; padding: .38rem .4rem .38rem .8rem; }
.ws-mb__cn { font-size: .74rem; }
.ws-mb__chip button { width: 24px; height: 24px; font-size: 1.1rem; }
.ws-mb__more { font-size: .85rem; }
#ws-mb-name { font-size: 1rem; padding: .7rem .9rem; }
.ws-mb__prev { display: flex; flex-direction: column; padding: 1.6rem 2rem 1rem; overflow: hidden; }
.ws-mb__prev > * { flex: none; }
.ws-mb__big { font-size: 2.6rem; }
.ws-mb__k { font-size: .62rem; }
.ws-mb__splitk { font-size: .78rem; }
.ws-mb__top { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: -.6rem; padding-right: .6rem; }
.ws-mb__top li { padding: .55rem 0; }
.ws-mb__tt { font-size: .9rem; }
.ws-mb__tt small { font-size: .7rem; }
.ws-mb__tv { font-size: .85rem; }
.ws-mb__empty p { font-size: .95rem; }
.ws-mb__empty .ws-chip { font-size: .8rem; padding: .4rem .8rem; }
.ws-mb__foot { padding: 1rem 2rem; }
.ws-mb__foot .ws-btn { font-size: .82rem; padding: .55rem 1.1rem; }
@media (max-width: 1000px) {
  .ws-mb__body { grid-template-columns: 1fr; overflow-y: auto; }
  .ws-mb__form { overflow: visible; }
  .ws-mb__prev { overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
  .ws-mb__top { overflow: visible; }
}
@media (max-width: 760px) {
  .ws-mb { padding: 0; }
  .ws-mb__box { height: 100vh; border-radius: 0; }
  .ws-mb__head h2 { font-size: 1.8rem; }
  .ws-mb__head, .ws-mb__form, .ws-mb__prev, .ws-mb__foot { padding-left: 16px; padding-right: 16px; }
  .ws-mb__terms { min-height: 96px; }
  .ws-mb__tin { min-width: 8rem; }
  .ws-mb__big { font-size: 2rem; }
}

/* A window with no preview pane (a surface that passes neither `preview` nor
   `empty`) is one column and only as tall as its words. */
.ws-mb__box--solo { width: min(860px, 100%); height: auto; max-height: calc(100vh - 48px); }
.ws-mb__box--solo .ws-mb__body { grid-template-columns: 1fr; overflow-y: auto; }
@media (max-width: 760px) { .ws-mb__box--solo { max-height: 100vh; height: 100vh; } }