/* ============================================================================
   The cockpit's own layer - the /home app shell, ported from the approved
   Partner Cockpit proposal (24 Aug 2026). Every colour and face is a token
   from /css/tokens.css; this file only lays the shell out. The three-column
   frame: sidebar 216, main fluid, Emil's rail 316 - the rail carries the
   REAL Agent, so its column scrolls on its own.
   ============================================================================ */

/* The app shell (25 Aug 2026): the frame is viewport-fixed and every column
   scrolls INSIDE itself - main, sidebar and Emil's rail each own their
   scrollbar, so the composer never leaves the screen however long the page
   or the thread gets (the CEO had to scroll after every message). Below
   860px the shell returns to normal document flow. */
.ck {
  height: 100vh;
  height: 100dvh;
  background: var(--rbl-paper);
  color: var(--rbl-ink);
  font-family: var(--rbl-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── The proving-ground banner ── */
.ck__trial {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(90deg, var(--rbl-signal-bg), transparent 70%);
  border-bottom: 1px solid var(--rbl-copper);
  flex-wrap: wrap;
}
.ck__trial-k {
  font-family: var(--rbl-font-data);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rbl-signal);
  font-weight: 600;
  white-space: nowrap;
}
.ck__trial-t { color: var(--rbl-mute); flex: 1 1 320px; min-width: 0; font-size: 12.5px; }
.ck__trial-t b { color: var(--rbl-ink-2); font-weight: 600; }
.ck__trial-cta {
  font-family: var(--rbl-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--rbl-action-ink);
  background: var(--rbl-action);
  border-radius: var(--rbl-radius-control);
  padding: 9px 15px;
  text-decoration: none;
  white-space: nowrap;
}
.ck__trial-ghost {
  font-family: var(--rbl-font-data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rbl-mute);
  text-decoration: none;
  white-space: nowrap;
}

/* ── The frame ── */
.ck__frame {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 340px;
  width: 100%;
}
/* Pages where Emil IS the main column (/expert) drop the rail rather than
   render the same thread twice side by side. */
.ck__frame--norail { grid-template-columns: 238px minmax(0, 1fr); }

/* ── Sidebar ── */
.ck__side {
  border-right: 1px solid var(--rbl-line);
  background: var(--rbl-inset);
  padding: 18px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
}
.ck__brand { padding: 4px 10px 16px; }
.ck__studio {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--rbl-panel);
  border: 1px solid var(--rbl-line);
  border-radius: 9px;
}
.ck__studio-name { font-family: var(--rbl-font-display); font-weight: 700; font-size: 12.5px; color: var(--rbl-ink); }
.ck__studio-sub { font-family: var(--rbl-font-data); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--rbl-faint); margin-top: 3px; }
.ck__g {
  font-family: var(--rbl-font-data);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rbl-faint);
  padding: 14px 10px 6px;
}
.ck__i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--rbl-mute);
  font-size: 12.5px;
  text-decoration: none;
}
a.ck__i:hover { color: var(--rbl-ink); background: var(--rbl-panel); }
.ck__i--on {
  background: var(--rbl-signal-bg);
  color: var(--rbl-ink);
  font-weight: 600;
  border: 1px solid var(--rbl-line-strong);
}
.ck__chip {
  font-family: var(--rbl-font-data);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--rbl-line);
  color: var(--rbl-faint);
  white-space: nowrap;
}
.ck__chip--new { color: var(--rbl-success); border-color: var(--rbl-line-strong); }

/* ── The rebuilt map (28 Aug 2026): journey steps, door notes, the progress
      count and Emil's line. Notes wear the portal rail's register. ── */
.ck__g--j { display: flex; justify-content: space-between; align-items: baseline; }
.ck__g-n { font-family: var(--rbl-font-data); font-size: 8.5px; letter-spacing: .02em; text-transform: none; color: var(--rbl-signal); }
.ck__i-l { display: flex; flex-direction: column; min-width: 0; }
.ck__i-note {
  font-family: var(--rbl-font-data);
  font-size: 8.5px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--rbl-faint);
  margin-top: 1px;
}
.ck__i--step { padding-left: 28px; position: relative; }
.ck__i-n {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 14px;
  text-align: center;
  font-family: var(--rbl-font-data);
  font-size: 8.5px;
  color: var(--rbl-faint);
}
.ck__i-n--done { color: var(--rbl-success); }
.ck__i--set { margin-top: 10px; }
.ck__side-emil {
  margin-top: 14px;
  padding: 11px 10px 0;
  border-top: 1px solid var(--rbl-line);
  font-size: 11.5px;
  color: var(--rbl-faint);
  text-decoration: none;
}
.ck__side-emil:hover { color: var(--rbl-mute); }

/* ── Main column ── */
.ck__main {
  padding: 22px 26px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
/* On a wide screen the content sits centred in its column instead of pinned
   to the sidebar with a dead zone beside it (CEO, 25 Aug 2026). Every direct
   child is capped and centred; reading panes keep their own tighter measure. */
.ck__main > * {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}
.ck__main > .pane { max-width: 880px; }
.ck__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ck__h1 {
  font-family: var(--rbl-font-display);
  font-weight: 800;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--rbl-ink);
  margin: 0;
}
.ck__date { font-family: var(--rbl-font-data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-faint); }

.ck__card {
  background: var(--rbl-panel);
  border: 1px solid var(--rbl-line);
  border-radius: 12px;
  padding: 16px 18px;
}
.ck__read { border-color: var(--rbl-copper); }
.ck__from { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ck__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 1px solid var(--rbl-line-strong);
}
.ck__who { font-family: var(--rbl-font-data); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-faint); }
.ck__who b { display: block; font-family: var(--rbl-font-display); font-size: 12.5px; letter-spacing: .02em; color: var(--rbl-ink); }
.ck__item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--rbl-line);
  color: var(--rbl-mute);
  align-items: start;
}
.ck__item-n { font-family: var(--rbl-font-data); font-size: 10.5px; color: var(--rbl-signal); padding-top: 1px; }
.ck__item b { color: var(--rbl-ink); }
.ck__act {
  font-family: var(--rbl-font-data);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rbl-signal);
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid var(--rbl-line-strong);
  border-radius: 7px;
  text-decoration: none;
}
.ck__act:hover { background: var(--rbl-action); color: var(--rbl-action-ink); border-color: var(--rbl-action); }

.ck__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ck__tile { background: var(--rbl-panel); border: 1px solid var(--rbl-line); border-radius: 11px; padding: 14px 16px; }
.ck__tile-v { font-family: var(--rbl-font-data); font-size: 22px; font-weight: 600; color: var(--rbl-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ck__tile-k { font-family: var(--rbl-font-data); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-faint); margin-top: 6px; line-height: 1.5; }

.ck__row2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.ck__ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ck__ph-t { font-family: var(--rbl-font-display); font-weight: 700; font-size: 13.5px; color: var(--rbl-ink); }
.ck__tag {
  font-family: var(--rbl-font-data);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2.5px 8px;
  border-radius: 999px;
  border: 1px solid var(--rbl-line-strong);
  color: var(--rbl-signal);
  white-space: nowrap;
}
.ck__ads { display: flex; gap: 10px; }
.ck__ad {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--rbl-raised), var(--rbl-inset));
  border: 1px solid var(--rbl-line);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.ck__ad-bar { position: absolute; top: 8px; left: 8px; width: 18px; height: 2px; background: var(--rbl-copper); }
.ck__ad-txt { position: absolute; left: 8px; bottom: 8px; right: 8px; }
.ck__ad-a1 { font-family: var(--rbl-font-display); font-weight: 800; font-size: 10px; text-transform: uppercase; color: var(--rbl-ink); line-height: 1.15; }
.ck__ad-a2 { font-family: var(--rbl-font-data); font-size: 7.5px; color: var(--rbl-signal); margin-top: 3px; letter-spacing: .06em; text-transform: uppercase; }
.ck__meta { margin-top: 12px; font-size: 11.5px; color: var(--rbl-mute); line-height: 1.6; }
.ck__meta b { color: var(--rbl-ink-2); }
.ck__btnrow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ck__btn {
  font-family: var(--rbl-font-ui); font-size: 12px; font-weight: 600;
  color: var(--rbl-action-ink); background: var(--rbl-action);
  border-radius: 7px; padding: 7px 13px; text-decoration: none;
}
.ck__btn--ghost { background: transparent; color: var(--rbl-mute); border: 1px solid var(--rbl-line); }

.ck__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck__q { background: var(--rbl-raised); border: 1px solid var(--rbl-line); border-radius: 9px; padding: 10px 12px; font-size: 11px; color: var(--rbl-mute); line-height: 1.45; }
.ck__q b { display: block; color: var(--rbl-ink-2); font-size: 11.5px; margin-bottom: 2px; }

.ck__strip {
  display: flex; align-items: center; gap: 12px;
  background: var(--rbl-panel); border: 1px solid var(--rbl-line);
  border-radius: 12px; padding: 13px 18px; flex-wrap: wrap;
}
.ck__led { width: 9px; height: 9px; border-radius: 50%; background: var(--rbl-success); flex: none; }
.ck__strip-t { font-size: 12.5px; color: var(--rbl-mute); flex: 1 1 300px; min-width: 0; }
.ck__strip-t b { color: var(--rbl-ink); }

/* ── Emil's rail: the REAL Agent lives here ── */
.ck__rail {
  border-left: 1px solid var(--rbl-line);
  background: var(--rbl-inset);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
.ck__rail-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--rbl-line);
}
.ck__rail-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--rbl-line-strong); }
.ck__rail-w { flex: 1; min-width: 0; }
.ck__rail-w b { display: block; font-family: var(--rbl-font-display); font-size: 13px; color: var(--rbl-ink); }
.ck__rail-w span { font-family: var(--rbl-font-data); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-success); }
.ck__rail-full {
  font-family: var(--rbl-font-data); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rbl-signal); text-decoration: none; white-space: nowrap;
}
/* The rail is a fixed pane like /expert: the thread scrolls inside the
   Agent, the composer never moves. The rail body itself must not scroll. */
.ck__rail-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 6px 12px 12px; }
.ck__rail-body .agent--surface { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 0; background: transparent; max-width: none; }
/* the thread scrolls inside the rail; the composer stays put */
.ck__rail-body .convo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* the Agent adapts; keep its column readable in the narrow rail */
.ck__rail-body .convo__chips { gap: 6px; }
.ck__rail-body .chip { padding: 7px 10px; font-size: 13px; }
.ck__rail-body .composer__bar textarea { font-size: 14px; padding: 10px 12px; }
.ck__rail-body .convo { padding-top: 12px; }

/* ── The location check, in the cockpit ── */
.ck__check-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ck__check-input {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--rbl-inset);
  border: 1px solid var(--rbl-line-strong);
  border-radius: var(--rbl-radius-control);
  padding: 11px 14px;
  font-family: var(--rbl-font-body);
  font-size: 13.5px;
  color: var(--rbl-ink);
}
.ck__check-input::placeholder { color: var(--rbl-faint); }
.ck__check-input:focus { outline: 1px solid var(--rbl-copper); outline-offset: 0; }
.ck__check-btn {
  font-family: var(--rbl-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rbl-action-ink);
  background: var(--rbl-action);
  border: 0;
  border-radius: var(--rbl-radius-control);
  padding: 11px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.ck__check-sugs { display: flex; flex-direction: column; margin-top: 8px; border: 1px solid var(--rbl-line); border-radius: 9px; overflow: hidden; }
.ck__check-sug {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: var(--rbl-panel);
  color: var(--rbl-ink);
  border: 0;
  border-top: 1px solid var(--rbl-line);
  font-family: var(--rbl-font-data);
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
}
.ck__check-sug:first-child { border-top: 0; }
.ck__check-sug:hover { background: var(--rbl-raised); }
.ck__check-hint {
  font-family: var(--rbl-font-data);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rbl-faint);
  margin: 10px 0 0;
}

/* ── The account door, quiet at the sidebar's foot ── */
.ck__door {
  margin-top: auto;
  padding: 16px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ck__door-mail {
  font-family: var(--rbl-font-data);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--rbl-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck__door-act {
  font-family: var(--rbl-font-data);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rbl-mute);
  text-decoration: none;
  width: fit-content;
}
.ck__door-act:hover { color: var(--rbl-ink); }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .ck__frame { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ck__rail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rbl-line); max-height: 40vh; }
}
@media (max-width: 860px) {
  /* a phone scrolls the document, app-shell columns stop */
  .ck { height: auto; min-height: 100vh; overflow: visible; }
  .ck__frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ck__main { overflow-y: visible; }
  .ck__rail { max-height: 70vh; }
  .ck__side { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--rbl-line); gap: 6px; padding: 12px 14px; overflow-y: visible; }
  .ck__brand { flex: 1 0 100%; padding: 0 0 8px; }
  .ck__studio { display: none; }
  /* group labels read as word soup inline - the pills carry the map alone */
  .ck__g { display: none; }
  .ck__i { border: 1px solid var(--rbl-line); border-radius: 3px; padding: 7px 10px; }
  /* On the pill row the journey and the notes fold away - the pill carries
     the name alone, and steps drop their number gutter. */
  .ck__i-note { display: none; }
  .ck__i--step { padding-left: 10px; }
  .ck__i-n { display: none; }
  .ck__side-emil { display: none; }
  .ck__i--on { border-color: var(--rbl-signal); }
  .ck__tiles { grid-template-columns: repeat(2, 1fr); }
  .ck__row2 { grid-template-columns: 1fr; }
}

/* ── The members desk + the week (25 Aug 2026): the technology pack's
   preview surfaces. Same rules as the rest of the shell - tokens only,
   data face for figures, and capabilities are labels, never controls. ── */
.ck__mem { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ck__mem-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.ck__tblwrap { overflow-x: auto; }
.ck__tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ck__tbl th {
  font-family: var(--rbl-font-data); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rbl-faint); text-align: left;
  padding: 4px 10px 8px; border-bottom: 1px solid var(--rbl-line);
}
.ck__tbl td { padding: 8px 10px; border-bottom: 1px solid var(--rbl-line); color: var(--rbl-mute); vertical-align: top; white-space: nowrap; }
.ck__tbl td b { color: var(--rbl-ink); font-weight: 600; display: block; }
.ck__tbl-sub { font-family: var(--rbl-font-data); font-size: 9px; letter-spacing: .06em; color: var(--rbl-faint); }
.ck__tbl tbody tr { cursor: pointer; }
.ck__tbl tbody tr:hover td { background: var(--rbl-raised); }
.ck__tr--on td { background: var(--rbl-signal-bg); }
.ck__tr--on td:first-child { box-shadow: inset 2px 0 0 var(--rbl-copper); }

.ck__pill {
  font-family: var(--rbl-font-data); font-size: 8px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--rbl-line-strong); color: var(--rbl-mute); white-space: nowrap;
}
.ck__pill--ok { color: var(--rbl-success); }
.ck__pill--new { color: var(--rbl-signal); }
.ck__pill--off { color: var(--rbl-faint); }
.ck__pill--pause { color: var(--rbl-copper-400, var(--rbl-copper)); }
.ck__pill--due { color: var(--rbl-attention); background: var(--rbl-attention-bg); }
.ck__due { color: var(--rbl-attention); }

.ck__det { border-color: var(--rbl-line-strong); }
.ck__det-sub { font-family: var(--rbl-font-data); font-size: 9.5px; letter-spacing: .06em; color: var(--rbl-faint); margin: -4px 0 4px; }
.ck__det-block { border-top: 1px solid var(--rbl-line); padding: 10px 0 4px; margin-top: 8px; }
.ck__det-h { font-family: var(--rbl-font-data); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rbl-faint); margin-bottom: 6px; }
.ck__det-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 12px; color: var(--rbl-mute); }
.ck__det-row b { color: var(--rbl-ink-2); font-weight: 600; text-align: right; }
.ck__det-row--sub { font-size: 11px; color: var(--rbl-faint); }
.ck__det-row--sub b { color: var(--rbl-mute); font-weight: 500; }
.ck__det-note { font-size: 11px; color: var(--rbl-faint); line-height: 1.5; margin: 6px 0 0; }
.ck__det-visits { display: flex; flex-wrap: wrap; gap: 6px; }
.ck__det-visits span {
  font-family: var(--rbl-font-data); font-size: 10px; color: var(--rbl-mute);
  border: 1px solid var(--rbl-line); border-radius: 6px; padding: 3px 8px;
}

.ck__caps, .ck__lists { display: flex; flex-wrap: wrap; gap: 8px; }
.ck__lists { margin-top: 12px; }
.ck__cap {
  font-family: var(--rbl-font-data); font-size: 10px; letter-spacing: .04em;
  color: var(--rbl-ink-2); background: var(--rbl-raised);
  border: 1px solid var(--rbl-line); border-radius: 999px; padding: 5px 11px;
}

.ck__offer { border-top: 1px solid var(--rbl-line); padding: 10px 0 6px; }
.ck__offer:first-of-type { border-top: 0; padding-top: 0; }
.ck__offer-name { font-family: var(--rbl-font-display); font-weight: 700; font-size: 12.5px; color: var(--rbl-ink); margin-bottom: 4px; }
.ck__offer-name span { font-family: var(--rbl-font-body); font-weight: 400; font-size: 11.5px; color: var(--rbl-faint); }

.ck__wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.ck__wk-day { background: var(--rbl-raised); border: 1px solid var(--rbl-line); border-radius: 9px; padding: 8px; min-width: 0; }
.ck__wk-h { font-family: var(--rbl-font-data); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--rbl-ink-2); margin-bottom: 6px; }
.ck__wk-h span { display: block; color: var(--rbl-faint); font-size: 8px; margin-top: 1px; }
.ck__wk-slots { display: flex; flex-direction: column; gap: 4px; }
.ck__wk-slot {
  font-family: var(--rbl-font-data); font-size: 10px; text-align: center;
  color: var(--rbl-ink-2); background: var(--rbl-panel);
  border: 1px solid var(--rbl-line); border-radius: 5px; padding: 3px 0;
}
.ck__wk-more { font-family: var(--rbl-font-data); font-size: 8.5px; text-align: center; color: var(--rbl-faint); padding-top: 2px; }
.ck__hours-row { display: block; font-family: var(--rbl-font-data); font-size: 10.5px; color: var(--rbl-mute); padding-top: 3px; }

@media (max-width: 1180px) {
  .ck__wk { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .ck__mem { grid-template-columns: 1fr; }
  .ck__wk { grid-template-columns: repeat(2, 1fr); }
}

/* ── The operable layer (25 Aug 2026): the desk acts, the board books, the
   team is edited. Controls look like controls; capabilities stopped being
   labels the day they became buttons. ── */
.ck__mem-bar { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ck__mem-bar .ck__mem-search { flex: 1 1 200px; margin-bottom: 0; }
.ck__mem-bar .ck__btn { border: 0; cursor: pointer; }
.ck__btnrow .ck__btn, .ck__btnrow button.ck__btn { border: 0; cursor: pointer; font-family: var(--rbl-font-ui); }
.ck__btnrow button.ck__btn--ghost { background: transparent; color: var(--rbl-mute); border: 1px solid var(--rbl-line); }
.ck__btnrow button.ck__btn--ghost:hover { color: var(--rbl-ink); border-color: var(--rbl-line-strong); }
.ck__btn--danger { background: transparent; color: var(--rbl-error); border: 1px solid var(--rbl-error) !important; }

.ck__det-select { width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 12.5px; }
.ck__btnrow .ck__det-select { flex: 1 1 180px; width: auto; }
.ck__actpanel { margin-top: 12px; padding: 12px 14px; background: var(--rbl-raised); border: 1px solid var(--rbl-line); border-radius: 9px; }
.ck__actpanel .ck__det-note { margin: 0 0 10px; }
.ck__signup { margin-bottom: 12px; }

/* the team page */
.ck__tm { border-top: 1px solid var(--rbl-line); padding: 13px 0 14px; }
.ck__tm:first-of-type { border-top: 0; }
.ck__tm--form { border-top: 1px dashed var(--rbl-line-strong); }
.ck__tm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ck__tm-name { color: var(--rbl-ink); font-size: 13.5px; font-weight: 600; }
.ck__tm-role { font-family: var(--rbl-font-data); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rbl-faint); margin-left: 10px; }
.ck__tm-facts { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12px; color: var(--rbl-mute); }
.ck__tm-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.ck__tm-lab { display: flex; flex-direction: column; gap: 5px; font-family: var(--rbl-font-data); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-faint); }
/* THE COLUMN-LABEL TRAP (hit twice now - tm-lab 25 Aug, gw__field same day):
   ck__check-input's flex-basis (1 1 240px, a WIDTH in its native row) becomes
   HEIGHT inside any column-flex label, and the control grows 240px tall.
   Every column-flex label that wraps a form control joins this selector list
   the day it is born - do not fix it per page again. */
.ck__tm-lab .ck__check-input { padding: 9px 12px; font-size: 12.5px; }
.ck__tm-lab .ck__check-input,
.gw__field .ck__check-input { width: 100%; box-sizing: border-box; flex: 0 0 auto; }

/* the day board */
.ck__daynav { display: flex; align-items: center; gap: 10px; }
.ck__daynav .ck__btn--ghost { padding: 4px 11px; cursor: pointer; background: transparent; border: 1px solid var(--rbl-line); color: var(--rbl-mute); border-radius: 7px; }
.ck__daynav-label { font-family: var(--rbl-font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rbl-ink-2); min-width: 160px; text-align: center; }
.ck__boardwrap { overflow-x: auto; }
.ck__board { display: grid; gap: 6px; align-items: stretch; }
.ck__board-h { font-size: 12px; color: var(--rbl-ink); display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
.ck__board-h b { font-family: var(--rbl-font-display); font-weight: 700; }
.ck__board-t { font-family: var(--rbl-font-data); font-size: 10.5px; color: var(--rbl-faint); display: flex; align-items: center; padding-left: 4px; }
.ck__cell { min-height: 44px; }
.ck__cell--off { background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--rbl-inset) 6px, var(--rbl-inset) 12px); border-radius: 7px; }
.ck__slotbtn {
  width: 100%; height: 100%; min-height: 44px; cursor: pointer;
  background: var(--rbl-inset); border: 1px dashed var(--rbl-line); border-radius: 7px;
  color: var(--rbl-faint); font-family: var(--rbl-font-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.ck__slotbtn:hover { color: var(--rbl-signal); border-color: var(--rbl-line-strong); }
.ck__slotbtn--on { border-color: var(--rbl-copper); color: var(--rbl-signal); border-style: solid; }
.ck__bk {
  width: 100%; height: 100%; min-height: 44px; cursor: pointer; text-align: left;
  background: var(--rbl-signal-bg); border: 1px solid var(--rbl-line-strong); border-radius: 7px;
  padding: 6px 10px; display: flex; flex-direction: column; gap: 1px;
}
.ck__bk b { color: var(--rbl-ink); font-size: 12px; font-weight: 600; font-family: var(--rbl-font-body); }
.ck__bk span { font-family: var(--rbl-font-data); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--rbl-signal); }
.ck__bk:hover { border-color: var(--rbl-copper); }
.ck__bk--conflict { background: var(--rbl-attention-bg); border-color: var(--rbl-attention); }
.ck__bk--conflict span { color: var(--rbl-attention); }

/* ── The groundwork (25 Aug 2026): the location desk, the numbers desk, the
   bank plan and the demand test - the four tools rebuilt onto the cockpit
   language. Tokens only, same as everything above. ── */
.gw__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 980px) { .gw__grid { grid-template-columns: 1fr; } }

.gw__ctl { padding: 11px 0 9px; border-top: 1px solid var(--rbl-line); }
.gw__ctl--first { border-top: 0; padding-top: 2px; }
.gw__ctl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gw__ctl-h span { font-family: var(--rbl-font-data); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-mute); }
.gw__ctl-h b { font-family: var(--rbl-font-data); font-size: 15px; font-weight: 600; color: var(--rbl-ink); font-variant-numeric: tabular-nums; }
.gw__range { width: 100%; margin-top: 8px; accent-color: var(--rbl-copper); display: block; }
.gw__hint { font-size: 11px; color: var(--rbl-faint); line-height: 1.55; margin: 5px 0 0; }
.gw__seg { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.gw__seg button {
  min-height: 38px; padding: 0 13px; cursor: pointer;
  font-family: var(--rbl-font-ui); font-size: 12.5px;
  border-radius: var(--rbl-radius-control);
  border: 1px solid var(--rbl-line); background: transparent; color: var(--rbl-ink-2);
}
.gw__seg button[data-on="true"] { border: 1.5px solid var(--rbl-copper); background: var(--rbl-signal-bg); color: var(--rbl-ink); }
.gw__seg button:disabled { opacity: .55; cursor: not-allowed; }

.gw__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rbl-line); font-size: 12.5px; color: var(--rbl-mute); }
.gw__row b { font-family: var(--rbl-font-data); font-size: 12.5px; font-weight: 600; color: var(--rbl-ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.gw__row--strong { color: var(--rbl-ink-2); }
.gw__row--strong b { font-size: 14px; }
.gw__row--good b { color: var(--rbl-success); }
.gw__src { font-family: var(--rbl-font-data); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rbl-faint); white-space: nowrap; }

/* ── Typed entry beside every slider (30 Aug 2026). A slider is for exploring;
   a partner holding a real rent offer of EUR 1,437 has to be able to type it,
   and on a phone a slider cannot hit a precise value at all. ── */
.gw__num { display: inline-flex; align-items: baseline; gap: 4px; }
.gw__num input {
  width: 7.5ch; padding: 3px 6px; text-align: right;
  font-family: var(--rbl-font-data); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--rbl-ink);
  background: var(--rbl-sunken, transparent);
  border: 1px solid var(--rbl-line); border-radius: var(--rbl-radius-control);
}
.gw__num input:focus-visible { outline: 2px solid var(--rbl-copper); outline-offset: 1px; }
.gw__num b { font-family: var(--rbl-font-data); font-size: 11px; color: var(--rbl-faint); font-weight: 500; }
.gw__ctl-read {
  display: block; margin-top: 6px;
  font-family: var(--rbl-font-data); font-size: 10.5px; letter-spacing: .04em;
  color: var(--rbl-ink-2); font-variant-numeric: tabular-nums;
}
.gw__row .gw__num input { width: 6.5ch; font-size: 12.5px; }

/* what moves this most - the ranked levers, recomputed live */
.gw__lever { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rbl-line-strong); }
.gw__lever-h {
  display: block; margin-bottom: 4px;
  font-family: var(--rbl-font-data); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rbl-mute);
}
.gw__lever-off { font-family: var(--rbl-font-ui) !important; font-size: 11px !important; font-weight: 400 !important; color: var(--rbl-faint) !important; text-transform: none; }

/* the cash curve */
.gw__chart { overflow-x: auto; margin-top: 4px; }
.gw__chart svg { display: block; min-width: 560px; }

/* the plan's chapter rail */
.gw__chap { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--rbl-line); font-size: 12.5px; color: var(--rbl-mute); }
.gw__chap:first-of-type { border-top: 0; }
.gw__chap i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gw__chap i[data-s="measured"] { background: var(--rbl-success); }
.gw__chap i[data-s="yours"] { background: var(--rbl-copper); }
.gw__chap i[data-s="open"] { background: transparent; border: 1px solid var(--rbl-line-strong); }
.gw__chap b { color: var(--rbl-ink-2); font-weight: 600; }
.gw__chap .gw__st { margin-left: auto; text-align: right; }

/* the document preview: the daylight register - print is the one place the
   system flips to paper, and the preview shows the page as the bank reads it */
.gw__doc {
  background: var(--rbl-paper);
  color: var(--rbl-ink-2);
  border-radius: 8px;
  padding: 20px 22px;
  font-size: 12px; line-height: 1.65;
  border: 1px solid var(--rbl-line);
}
.gw__doc h4 { font-family: var(--rbl-font-display); text-transform: uppercase; font-size: 12.5px; margin: 0 0 8px; color: var(--rbl-ink); letter-spacing: .03em; }
.gw__doc p { margin: 0 0 8px; color: var(--rbl-ink-2); }
.gw__doc .gw__tag {
  font-family: var(--rbl-font-data); font-size: 8px; letter-spacing: .06em;
  text-transform: uppercase; background: var(--rbl-raised); color: var(--rbl-mute);
  border-radius: 3px; padding: 1px 5px; white-space: nowrap; border: 1px solid var(--rbl-line);
}
.gw__doc p.gw__src { color: var(--rbl-faint); }
.gw__doc table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 6px 0 10px; }
.gw__doc th { text-align: left; font-family: var(--rbl-font-data); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--rbl-mute); padding: 3px 8px 5px 0; border-bottom: 1px solid var(--rbl-line-strong); }
.gw__doc td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--rbl-line); color: var(--rbl-ink-2); font-variant-numeric: tabular-nums; }

/* the demand test's gate meter */
.gw__meter { height: 12px; background: var(--rbl-raised); border: 1px solid var(--rbl-line); border-radius: 999px; position: relative; }
.gw__meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--rbl-copper); border-radius: 999px; }
.gw__meter-gate { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--rbl-success); }

/* form fields on the plan page */
.gw__field { display: flex; flex-direction: column; gap: 5px; }
.gw__field > span { font-family: var(--rbl-font-data); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-faint); }
.gw__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════
   THE GROWTH LOOP (25 Aug 2026). The CEO read the four stages as
   one closed circuit - found, chosen, answered, told about - and
   asked the sidebar and the pages to wear that shape rather than
   fragments. The strip below renders on every Growth page with
   the current stage lit; the return glyph is word of mouth
   feeding "be found" again.
   ══════════════════════════════════════════════════════════════ */
.ck__gl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 16px; font-family: var(--rbl-font-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.ck__gl-seg { display: inline-flex; align-items: center; gap: 8px; }
.ck__gl-s { color: var(--rbl-mute); text-decoration: none; padding: 4px 10px; border: 1px solid var(--rbl-line); border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.ck__gl-s b { color: var(--rbl-faint); font-weight: 600; }
.ck__gl-s:hover { color: var(--rbl-ink); border-color: var(--rbl-line-strong); }
.ck__gl-s--on, .ck__gl-s--on:hover { color: var(--rbl-action-ink); background: var(--rbl-action); border-color: var(--rbl-action); }
.ck__gl-s--on b { color: var(--rbl-action-ink); }
.ck__gl-arrow { color: var(--rbl-faint); }

/* ── The Google-panel preview on /presence: the profile as a searcher sees it ── */
.ck__gbp { border: 1px solid var(--rbl-line); border-radius: 8px; overflow: hidden; background: var(--rbl-inset); }
.ck__gbp-photos { display: grid; grid-template-columns: 2fr 1fr; gap: 2px; height: 128px; }
.ck__gbp-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck__gbp-body { padding: 12px 14px; }
.ck__gbp-name { font-family: var(--rbl-font-display); font-size: 17px; color: var(--rbl-ink); font-weight: 600; }
.ck__gbp-sub { font-size: 12px; color: var(--rbl-mute); margin-top: 2px; }
.ck__gbp-stars { color: var(--rbl-signal); letter-spacing: .1em; }
.ck__gbp-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ck__gbp-btn { font-family: var(--rbl-font-ui); font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rbl-line-strong); color: var(--rbl-ink-2); background: transparent; }
.ck__gbp-btn--book { background: var(--rbl-action); color: var(--rbl-action-ink); border-color: var(--rbl-action); }

/* ── The mock consent dialog on /campaigns: the connect step, both ways ── */
.ck__consent { border: 1px solid var(--rbl-line-strong); border-radius: 8px; background: var(--rbl-raised); padding: 16px; max-width: 380px; }
.ck__consent-app { font-family: var(--rbl-font-ui); font-size: 13.5px; color: var(--rbl-ink); font-weight: 600; }
.ck__consent-list { margin: 10px 0; padding-left: 18px; font-size: 12.5px; color: var(--rbl-mute); }
.ck__consent-list li { margin-bottom: 3px; }

/* ── The marketing desk's material grid ── */
.ck__assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.ck__asset { border: 1px solid var(--rbl-line); border-radius: 6px; overflow: hidden; background: var(--rbl-inset); display: flex; flex-direction: column; }
.ck__asset img { width: 100%; height: 74px; object-fit: cover; display: block; }
.ck__asset-b { padding: 7px 9px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ck__asset-t { font-size: 11px; color: var(--rbl-mute); line-height: 1.35; }
.ck__asset-up { display: grid; place-items: center; min-height: 122px; border-style: dashed; color: var(--rbl-faint); font-size: 11.5px; text-align: center; padding: 8px; cursor: pointer; }
.ck__mini { font-family: var(--rbl-font-ui); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--rbl-radius-control, 6px); border: 1px solid var(--rbl-line-strong); background: transparent; color: var(--rbl-ink-2); cursor: pointer; align-self: flex-start; }
.ck__mini:hover { border-color: var(--rbl-copper); color: var(--rbl-ink); }

/* ── Call transcripts on /answer-desk ── */
.ck__trans { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; border-left: 2px solid var(--rbl-line); padding-left: 12px; }
.ck__trans-line { font-size: 12.5px; color: var(--rbl-mute); line-height: 1.5; }
.ck__trans-line b { color: var(--rbl-ink-2); font-weight: 600; font-family: var(--rbl-font-data); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; margin-right: 7px; }

/* ── The claims check verdict line, shared by campaigns and the desk ── */
.ck__claims { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ck__claims-hit { font-size: 12.5px; color: var(--rbl-error); background: var(--rbl-error-bg); border-radius: 6px; padding: 8px 11px; line-height: 1.45; }
.ck__claims-hit b { color: var(--rbl-error); }
.ck__claims-ok { font-size: 12px; color: var(--rbl-success); }

/* "Ask Emil" on top of every page - the shell renders it, pages cannot forget it. */
.ck__ask { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--rbl-panel); border: 1px solid var(--rbl-line); border-radius: 8px; }
.ck__ask-face { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--rbl-line-strong); }
.ck__ask-k { font-family: var(--rbl-font-data); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rbl-mute); flex: none; }
.ck__ask-q { font-family: var(--rbl-font-body); font-size: 14px; color: var(--rbl-link); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck__ask-q:hover { color: var(--rbl-ink); text-decoration: underline; }

/* The welcome walk, variant "doors": three starting points, each one a
   message the visitor sends Emil in their own words. */
.ck__walk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.ck__walk-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--rbl-raised); border: 1px solid var(--rbl-line); border-radius: 8px; text-decoration: none; }
.ck__walk-card b { font-family: var(--rbl-font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--rbl-ink); }
.ck__walk-card > span { font-size: 13.5px; line-height: 1.5; color: var(--rbl-mute); }
.ck__walk-go { font-family: var(--rbl-font-data); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-link); margin-top: auto; }
.ck__walk-card:hover { border-color: var(--rbl-line-strong); }
@media (max-width: 860px) { .ck__walk-grid { grid-template-columns: 1fr; } }

/* The Monday read, written weekly by the trigger engine for a trading partner. */
.ck__mondayread { padding: 6px 0 2px; }
.ck__mondayread p { margin: 0 0 10px; color: var(--rbl-ink-2); font-size: 13.5px; line-height: 1.6; max-width: 70ch; }
.ck__mondayread p:last-child { margin-bottom: 0; }

/* ── The walk face on a phone (26 Aug 2026): the anonymous funnel puts Emil
   FIRST and the product-map pills after the conversation - the payoff above
   the fold, the complexity still one scroll away. Desktop keeps the sidebar
   left, unchanged. ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ck--mainfirst .ck__frame { display: flex; flex-direction: column; }
  .ck--mainfirst .ck__main { order: 1; }
  .ck--mainfirst .ck__rail { order: 2; }
  .ck--mainfirst .ck__side { order: 3; border-bottom: 0; border-top: 1px solid var(--rbl-line); }
}

/* ── keyword chips on Be chosen (26 Aug 2026): triggers and guards ── */
.ck__kw { display: inline-flex; align-items: center; gap: 6px; font-family: var(--rbl-font-data); font-size: 11px; background: var(--rbl-raised); border: 1px solid var(--rbl-line-strong); border-radius: 999px; padding: 4px 10px; margin: 4px 5px 0 0; color: var(--rbl-ink-2); }
.ck__kw button { background: none; border: 0; color: var(--rbl-faint); cursor: pointer; font-size: 12px; padding: 0; line-height: 1; }
.ck__kw button:hover { color: var(--rbl-ink); }
.ck__kw--neg { color: var(--rbl-error); border-color: rgba(224, 112, 92, .35); }

/* ── The image workshop on Be chosen (26 Aug 2026) ── */
.ck__mk-recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; margin: 12px 0; }
.ck__mk-recipe { text-align: left; background: var(--rbl-inset); border: 1px solid var(--rbl-line); border-radius: 6px; padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ck__mk-recipe b { font-family: var(--rbl-font-ui); font-size: 12.5px; font-weight: 600; color: var(--rbl-ink-2); }
.ck__mk-recipe span { font-size: 11px; color: var(--rbl-faint); line-height: 1.35; }
.ck__mk-recipe:hover { border-color: var(--rbl-line-strong); }
.ck__mk-recipe--on { background: var(--rbl-signal-bg); border-color: var(--rbl-copper); }
.ck__mk-recipe--on b { color: var(--rbl-ink); }
.ck__mk-work { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
.ck__mk-lab { margin-top: 0 !important; }
.ck__mk-drop { width: 100%; aspect-ratio: 1; border: 1px dashed var(--rbl-line-strong); border-radius: 6px; background: var(--rbl-inset); color: var(--rbl-faint); font-size: 11.5px; line-height: 1.45; text-align: center; padding: 10px; cursor: pointer; overflow: hidden; display: grid; place-items: center; }
.ck__mk-drop:hover { border-color: var(--rbl-copper); color: var(--rbl-mute); }
.ck__mk-drop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck__mk-drop i { font-style: normal; font-family: var(--rbl-font-data); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.ck__mk-out { margin-top: 12px; border: 1px solid var(--rbl-line-strong); border-radius: 6px; overflow: hidden; max-width: 420px; }
.ck__mk-out img { width: 100%; display: block; }
@media (max-width: 640px) { .ck__mk-work { grid-template-columns: 1fr; } .ck__mk-drop { aspect-ratio: 16 / 10; } }

/* The room shelf (28 Aug 2026) - the workshop's grammar with one or two drop
   zones, and the disclosure stamped ON the picture so it cannot be cropped
   out of a screenshot by accident. */
.ck__rm-work { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
.ck__rm-work--two { grid-template-columns: 150px 150px minmax(0, 1fr); }
.ck__rm-out { margin-top: 12px; position: relative; border: 1px solid var(--rbl-line-strong); border-radius: 6px; overflow: hidden; max-width: 520px; }
.ck__rm-out img { width: 100%; display: block; }
.ck__rm-stamp { position: absolute; left: 10px; bottom: 10px; font-family: var(--rbl-font-data); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rbl-ink); background: rgba(10, 10, 10, .72); border: 1px solid var(--rbl-line); border-radius: 4px; padding: 5px 9px; }
@media (max-width: 640px) { .ck__rm-work, .ck__rm-work--two { grid-template-columns: 1fr; } .ck__rm-work .ck__mk-drop { aspect-ratio: 16 / 10; } }

/* ══ The stations area (26 Aug 2026) ═══════════════════════════════════════
   The one room in the cockpit that is a showroom rather than a tool: what a
   station costs, who it comes from, what was checked before it could be sold,
   and whether a device the partner already owns comes with him.

   Two type rules from the port hold here as everywhere: the display face is
   the HEADING face only, and it is never set at weight 400. Anything that
   reads as prose takes the body face. */

/* The thirteen items, closed face of the shelf. Two columns on a wide main
   column, one below - a numbered item is a list entry, never a card. */
.ck__st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(292px, 100%), 1fr)); gap: 2px 24px; margin: 14px 0 10px; }
.ck__st-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--rbl-line); }
.ck__st-n { font-family: var(--rbl-font-data); font-size: 10.5px; color: var(--rbl-signal); padding-top: 3px; font-variant-numeric: tabular-nums; }
.ck__st-item b { display: block; font-family: var(--rbl-font-ui); font-size: 12.5px; font-weight: 600; color: var(--rbl-ink); }
.ck__st-item p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--rbl-mute); }

/* The open face: one card per admitted maker. */
.ck__st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; margin: 14px 0 10px; }
.ck__st-card { background: var(--rbl-raised); border: 1px solid var(--rbl-line); border-radius: 11px; padding: 14px 16px; }
.ck__st-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ck__st-card-n { font-family: var(--rbl-font-display); font-weight: 700; font-size: 13.5px; color: var(--rbl-ink); }
.ck__st-card-rows { display: flex; flex-direction: column; gap: 2px; }
/* The card's rows carry prose, not figures, so they are a two-column grid with
   the value LEFT-aligned. The generic .ck__det-row right-aligns its value,
   which is right for a number and wrong for a sentence - a right-aligned
   sentence wrapping onto three lines has a ragged left edge in the middle of
   a card. */
.ck__st-card-rows .ck__det-row { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 12px; align-items: start; }
.ck__st-card-rows .ck__det-row b { max-width: none; text-align: left; font-weight: 500; }
@media (max-width: 560px) { .ck__st-card-rows .ck__det-row { grid-template-columns: 1fr; gap: 2px; } }

/* The existing-device lane. */
.ck__st-check { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.ck__st-q { display: flex; flex-direction: column; gap: 7px; }
.ck__st-q input { max-width: 420px; }
.ck__st-q .ck__det-note { margin: 0; }
.ck__st-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.ck__st-opt { font-family: var(--rbl-font-ui); font-size: 12px; text-align: left; background: var(--rbl-inset); border: 1px solid var(--rbl-line); border-radius: 6px; padding: 8px 12px; color: var(--rbl-mute); cursor: pointer; }
.ck__st-opt:hover { border-color: var(--rbl-line-strong); color: var(--rbl-ink-2); }
.ck__st-opt--on { background: var(--rbl-signal-bg); border-color: var(--rbl-copper); color: var(--rbl-ink); font-weight: 600; }

/* The read. The stripe carries the state, so colour is never the only signal -
   the pill names it in words too. */
.ck__st-out { margin-top: 4px; padding: 14px 16px; background: var(--rbl-inset); border: 1px solid var(--rbl-line); border-left-width: 2px; border-radius: 9px; }
.ck__st-out--green { border-left-color: var(--rbl-success); }
.ck__st-out--amber { border-left-color: var(--rbl-copper); }
.ck__st-out--red { border-left-color: var(--rbl-error); }
.ck__st-out-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.ck__st-out-h b { font-family: var(--rbl-font-display); font-weight: 700; font-size: 13.5px; color: var(--rbl-ink); }
.ck__st-out .ck__item { border: 0; }

/* The questions to ask any maker, and the two financing traps. */
.ck__st-ask { padding: 11px 0; border-top: 1px solid var(--rbl-line); max-width: 76ch; }
.ck__st-ask b { display: block; font-family: var(--rbl-font-ui); font-size: 13.5px; font-weight: 600; color: var(--rbl-ink); }
.ck__st-ask p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--rbl-mute); }
.ck__st-traps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 14px 0 4px; }
.ck__st-trap { background: var(--rbl-raised); border: 1px solid var(--rbl-line); border-radius: 9px; padding: 13px 15px; }
.ck__st-trap b { display: block; margin-top: 8px; font-family: var(--rbl-font-ui); font-size: 13px; font-weight: 600; color: var(--rbl-ink); }
.ck__st-trap p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--rbl-mute); }

/* What the room deliberately does not do. */
.ck__st-never { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); gap: 2px 24px; margin: 12px 0 4px; }
.ck__st-nev { padding: 9px 0; border-top: 1px solid var(--rbl-line); }
.ck__st-nev b { display: block; font-family: var(--rbl-font-ui); font-size: 12.5px; font-weight: 600; color: var(--rbl-ink); }
.ck__st-nev p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--rbl-mute); }
.ck__st-mail { margin-top: 12px; padding: 12px 14px; background: var(--rbl-inset); border: 1px solid var(--rbl-line); border-radius: 9px; }
.ck__st-mail .ck__ph { margin-bottom: 8px; }
.ck__st-mail pre { margin: 0; font-family: var(--rbl-font-data); font-size: 11.5px; line-height: 1.7; color: var(--rbl-ink-2); white-space: pre-wrap; word-break: break-word; }

/* What worked (27 Aug 2026): a way in with too few members to judge stays in
   the table and says so, rather than being hidden or read as a finding. */
.ck__tbl tr.ck__tr--thin td { color: var(--rbl-faint); }
.ck__tbl tr.ck__tr--thin td b { color: var(--rbl-mute); font-weight: 500; }


/* ------------------------------------------------------------------------- */
/* The material desk, v2 (28 Aug 2026). One visual per piece, the kit as the  */
/* opening number, and the register grouped the way a partner walks his room. */
/* Class family mt__ so the material page's vocabulary stays in one block.    */

/* The kit, first - because the cost is the surprise, it opens the page. */
/* flex: none is load-bearing: overflow: hidden removes the automatic
   min-height a flex child normally gets, and ck__main is a flex column -
   without it the hero shrinks to its border when the page is long. */
.mt__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); background: var(--rbl-panel); border: 1px solid var(--rbl-line); border-radius: 12px; overflow: hidden; flex: none; }
.mt__hero-l { padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.mt__hero-k { font-family: var(--rbl-font-data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rbl-signal); }
.mt__hero-price { font-family: var(--rbl-font-data); font-size: clamp(34px, 6vw, 52px); font-weight: 600; color: var(--rbl-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.mt__hero-price small { display: block; font-size: 10.5px; font-weight: 400; color: var(--rbl-faint); letter-spacing: .08em; margin-top: 7px; }
.mt__hero-what { font-size: 12.5px; color: var(--rbl-mute); line-height: 1.6; max-width: 46ch; margin: 0; }
.mt__hero-facts { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--rbl-font-data); font-size: 10.5px; color: var(--rbl-faint); letter-spacing: .04em; }
.mt__hero-facts b { color: var(--rbl-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.mt__hero-img { min-height: 230px; background-size: cover; background-position: center; }
@media (max-width: 760px) { .mt__hero { grid-template-columns: 1fr; } .mt__hero-img { order: -1; min-height: 170px; } }

/* The rail: zones as anchors, the format and the market as the two switches. */
.mt__rail { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 10px 2px; margin: 0 -2px; background: color-mix(in srgb, var(--rbl-paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rbl-line); }
.mt__zchip { font-family: var(--rbl-font-ui); font-size: 12px; color: var(--rbl-mute); text-decoration: none; border: 1px solid var(--rbl-line); border-radius: 6px; padding: 7px 12px; background: var(--rbl-inset); white-space: nowrap; }
.mt__zchip:hover { color: var(--rbl-ink); border-color: var(--rbl-line-strong); }
.mt__rail-gap { flex: 1 1 auto; }
@media (max-width: 760px) { .mt__rail { position: static; } .mt__rail-gap { flex: 1 1 100%; } }

/* One product, one picture. The image is the branding; the pill is the file. */
.mt__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(285px, 100%), 1fr)); gap: 13px; margin: 14px 0 8px; }
.mt__pcard { background: var(--rbl-raised); border: 1px solid var(--rbl-line); border-radius: 11px; overflow: hidden; display: flex; flex-direction: column; }
.mt__pimg { aspect-ratio: 3 / 2; overflow: hidden; background: var(--rbl-inset); }
.mt__pimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
@media (hover: hover) { .mt__pcard:hover .mt__pimg img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .mt__pimg img { transition: none; } .mt__pcard:hover .mt__pimg img { transform: none; } }
.mt__pbody { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mt__pbody .ck__st-card-h { margin-bottom: 0; }
.mt__pbody .ck__btnrow { margin-top: auto; padding-top: 4px; }
.mt__gets { font-size: 12px; color: var(--rbl-mute); line-height: 1.55; margin: 0; }
.mt__from { display: flex; align-items: baseline; gap: 8px; }
.mt__from-v { font-family: var(--rbl-font-data); font-size: 15px; font-weight: 600; color: var(--rbl-ink); font-variant-numeric: tabular-nums; }
.mt__prov { font-family: var(--rbl-font-data); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rbl-faint); }

/* The paper shelf: a document row is a thumbnail, the merge facts, one state. */
.mt__docs { display: flex; flex-direction: column; margin-top: 6px; }
.mt__doc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rbl-line); }
.mt__doc:first-child { border-top: 0; }
.mt__thumb { width: 52px; height: 72px; background: #EDEAE4; border-radius: 3px; padding: 7px 6px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 0 var(--rbl-line); }
.mt__thumb i { display: block; height: 2px; border-radius: 1px; background: #C9C5BD; }
.mt__thumb i.h { height: 5px; width: 58%; background: #141311; }
.mt__thumb i.c { background: var(--rbl-copper); width: 78%; }
.mt__doc-t b { display: block; font-family: var(--rbl-font-ui); font-size: 12.5px; font-weight: 600; color: var(--rbl-ink); }
.mt__doc-t p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--rbl-mute); }
.mt__merges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.mt__merge { font-family: var(--rbl-font-data); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rbl-signal); border: 1px solid var(--rbl-line-strong); border-radius: 4px; padding: 2px 6px; }
.mt__doc-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 560px) { .mt__doc { grid-template-columns: 52px minmax(0, 1fr); } .mt__doc-act { grid-column: 2; flex-direction: row; align-items: center; } }

/* The order drawer. Fixed sheet; the page under it stays where it was. */
.mt__scrim { position: fixed; inset: 0; background: rgba(5, 5, 5, .55); z-index: 40; border: 0; padding: 0; cursor: default; }
.mt__drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(410px, 100vw); background: var(--rbl-panel); border-left: 1px solid var(--rbl-line-strong); z-index: 41; padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.mt__drawer-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mt__drawer-h b { font-family: var(--rbl-font-display); font-weight: 700; font-size: 15px; color: var(--rbl-ink); }
.mt__x { background: transparent; border: 1px solid var(--rbl-line); border-radius: 6px; color: var(--rbl-mute); font-family: var(--rbl-font-data); font-size: 11px; padding: 4px 9px; cursor: pointer; }
.mt__x:hover { color: var(--rbl-ink); border-color: var(--rbl-line-strong); }
.mt__kitpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt__kline { display: flex; justify-content: space-between; gap: 10px; font-family: var(--rbl-font-data); font-size: 11.5px; color: var(--rbl-mute); padding: 7px 0; border-bottom: 1px solid var(--rbl-line); font-variant-numeric: tabular-nums; }
.mt__kline b { color: var(--rbl-ink-2); font-weight: 500; }
.mt__ksum { display: flex; justify-content: space-between; font-family: var(--rbl-font-data); font-size: 13.5px; color: var(--rbl-ink); padding-top: 10px; font-variant-numeric: tabular-nums; }
.mt__pay { font-family: var(--rbl-font-ui); font-size: 13px; font-weight: 600; color: var(--rbl-action-ink); background: var(--rbl-action); border: 0; border-radius: 7px; padding: 12px 16px; cursor: pointer; text-align: center; }
.mt__pay[disabled] { opacity: .55; cursor: default; }
.mt__fine { font-family: var(--rbl-font-data); font-size: 10px; color: var(--rbl-faint); line-height: 1.6; letter-spacing: .02em; margin: 0; }

/* Order history: one row per order, its state spoken plainly. */
.mt__orders { display: flex; flex-direction: column; }
.mt__order { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rbl-line); font-size: 12px; color: var(--rbl-mute); flex-wrap: wrap; }
.mt__order b { font-family: var(--rbl-font-data); color: var(--rbl-ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Settings, the hub (CEO approval, 29 Aug 2026) ──────────────────────
   Nine rooms as rows, the file meter on top, and the (i) that carries the
   optional context a helper line used to spell out. */
.ck__meter { display: flex; align-items: center; gap: 14px; background: var(--rbl-panel); border: 1px solid var(--rbl-line); border-radius: 10px; padding: 12px 16px; margin: 0 0 10px; }
.ck__meter b { font-family: var(--rbl-font-data); font-size: 12.5px; color: var(--rbl-ink-2); font-weight: 500; white-space: nowrap; }
.ck__meter span { font-family: var(--rbl-font-data); font-size: 12px; color: var(--rbl-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck__meter-bar { flex: 1; height: 6px; background: var(--rbl-well, rgba(0,0,0,.35)); border-radius: 3px; position: relative; overflow: hidden; }
.ck__meter-bar i { position: absolute; inset: 0 auto 0 0; background: var(--rbl-copper); border-radius: 3px; }
.ck__meter-open { font-size: 13px; color: var(--rbl-mute); margin: 0 2px 14px; }
.ck__meter-open a { color: var(--rbl-copper-400, var(--rbl-copper)); text-decoration: none; }
.ck__meter-open a:hover { text-decoration: underline; }

.ck__hub { display: flex; flex-direction: column; border: 1px solid var(--rbl-line); border-radius: 12px; overflow: hidden; }
.ck__hub-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 14px; align-items: center; background: var(--rbl-panel); padding: 14px 18px; border-top: 1px solid var(--rbl-line); text-decoration: none; font-size: 13.5px; color: var(--rbl-mute); }
.ck__hub-row:first-child { border-top: 0; }
.ck__hub-row:hover { background: var(--rbl-panel-2, var(--rbl-panel)); }
.ck__hub-row b { font-family: var(--rbl-font-display); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--rbl-ink); }
.ck__hub-row .ck__pill { justify-self: end; }
@media (max-width: 640px) { .ck__hub-row { grid-template-columns: 1fr auto; } .ck__hub-desc { display: none; } }

.ck__hours-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .ck__hours-grid { grid-template-columns: 1fr; } }

.ck__tip { position: relative; display: inline-flex; vertical-align: -2px; margin-left: 6px; }
.ck__tip > button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--rbl-line-2, var(--rbl-line)); background: transparent; color: var(--rbl-faint); font-family: var(--rbl-font-data); font-size: 10px; line-height: 1; cursor: help; padding: 0; }
.ck__tip > button:hover, .ck__tip > button:focus-visible { color: var(--rbl-copper-400, var(--rbl-copper)); border-color: var(--rbl-copper); }
.ck__tip-pop { display: none; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 30; width: 250px; background: var(--rbl-panel); border: 1px solid var(--rbl-line-2, var(--rbl-line)); border-radius: 8px; color: var(--rbl-ink-3, var(--rbl-mute)); font-size: 12.5px; line-height: 1.45; padding: 10px 12px; text-align: left; font-weight: 400; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.ck__tip:hover .ck__tip-pop, .ck__tip:focus-within .ck__tip-pop { display: block; }

/* Material v3 (29 Aug 2026): the buy row on a piece card, and the basket
   button on the rail. The selects reuse the settings vocabulary. */
.mt__buy { display: flex; gap: 7px; align-items: stretch; flex-wrap: wrap; }
.mt__buy .ck__btn { flex: 1 1 auto; }
.mt__qty { flex: 1 1 110px; width: auto; background: var(--rbl-inset); color: var(--rbl-ink); border: 1px solid var(--rbl-line); border-radius: 7px; font-family: var(--rbl-font-data); font-variant-numeric: tabular-nums; }
.mt__basket { font-family: var(--rbl-font-ui); font-size: 12px; font-weight: 600; color: var(--rbl-action-ink); background: var(--rbl-action); border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer; white-space: nowrap; }

/* A cost line the partner names himself. We cannot enumerate what opening a
   business costs him, so the bill takes lines we never thought of. */
.gw__addline {
  width: 100%; padding: 5px 8px;
  font-family: var(--rbl-font-ui); font-size: 12.5px; color: var(--rbl-ink);
  background: transparent; border: 1px dashed var(--rbl-line-strong);
  border-radius: var(--rbl-radius-control);
}
.gw__addline::placeholder { color: var(--rbl-faint); }
.gw__addline:focus-visible { outline: 2px solid var(--rbl-copper); outline-offset: 1px; border-style: solid; }