/* castomo visualiser: the app's own layout on top of the dashkit slice in /assets/kit.
   Every colour comes from a dashkit token (the castomo theme, all four modes), so light,
   dark and high contrast follow for free. Layout: one grid, three panels on a desktop,
   one panel at a time behind a tab bar on a phone. */

/* Person colours: twelve fixed slots. The first six are dashkit's Okabe–Ito game
   colours (told apart under the common colour-vision deficiencies, the same in every
   theme); the next six the theme's chart ramp. Only ever a dot or a ring, never text. */
.who-0 { --who: var(--game-1); } .who-1 { --who: var(--game-2); } .who-2 { --who: var(--game-3); }
.who-3 { --who: var(--game-5); } .who-4 { --who: var(--game-6); } .who-5 { --who: var(--game-4); }
.who-6 { --who: var(--chart-1); } .who-7 { --who: var(--chart-2); } .who-8 { --who: var(--chart-3); }
.who-9 { --who: var(--chart-4); } .who-10 { --who: var(--chart-5); } .who-11 { --who: var(--chart-6); }

.noscript { padding: var(--s3); text-align: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--who, var(--ink-3)); flex: none; }
.card {
  background: var(--paper-2);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: var(--setup-card-pad, var(--s3));
}

/* ---------------------------------------------------------------- lobby */
.lobby {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--s5) var(--s2) var(--s4);
  display: grid;
  gap: var(--s4);
}
.lobby-hero { display: grid; gap: var(--s1); }
.brand { display: inline-flex; align-items: center; gap: var(--s0); font-weight: 700; color: var(--accent-ink); letter-spacing: .02em; }
/* Each line is one clause and never wraps by itself; the size scales so the longest fits a phone. */
.lobby-hero h1 { font-size: clamp(1.25rem, 5.2vw, var(--t5)); line-height: 1.1; color: var(--ink); }
.lobby-hero h1 .line { white-space: nowrap; }
.lede { font-size: var(--t1); color: var(--ink-2); max-width: 62ch; }
.lobby-cards { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.lobby-card { display: grid; gap: var(--s2); min-width: 0; }
.lobby-card h2 { display: flex; align-items: center; gap: var(--s0); }
.lobby-card.center { max-width: 460px; margin: 0 auto; width: 100%; }
.lobby-foot { display: flex; justify-content: center; }
.lang-switch { display: flex; gap: var(--s0); }
.lang-switch .is-current { color: var(--ink); background: var(--press); cursor: default; }
@media (max-width: 760px) {
  .lobby { padding-top: var(--s4); }
  .lobby-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- room shell */
/* A column, not a grid: the notice and the tab bar come and go, and a grid would shift its rows. */
#app:has(.room-grid) { height: 100dvh; display: flex; flex-direction: column; }
.room-grid { flex: 1; }
.room-bar {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--bar-h);
  padding: 0 var(--s2);
  border-bottom: var(--rule-w) solid var(--rule);
  background: var(--paper-2);
}
.room-bar .home { display: inline-grid; place-items: center; width: var(--target); height: var(--target); border-radius: 50%; color: var(--ink-2); }
.room-bar .home:hover { background: var(--hover); color: var(--ink); }
.room-title { font-size: var(--t2); min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-tools { display: flex; align-items: center; gap: var(--s0); }
.people { list-style: none; display: flex; align-items: center; margin-inline-end: var(--s0); }
.people li + li { margin-inline-start: -6px; }
.avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: var(--t-3); font-weight: 700; color: var(--game-ink);
  background: var(--who); border: 2px solid var(--paper-2);
}
.people .more { font-size: var(--t-2); color: var(--ink-3); margin-inline-start: var(--s-1); }
.room-notice {
  display: flex; align-items: center; gap: var(--s0); padding: var(--s0) var(--s2);
  background: color-mix(in oklab, var(--bad) 12%, var(--paper-2)); color: var(--ink); border-bottom: var(--rule-w) solid var(--rule);
}

.room-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(300px, 400px);
  min-height: 0;
}
.panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; background: var(--paper); }
.panel + .panel { border-inline-start: var(--rule-w) solid var(--rule); }
.panel-map { background: var(--paper-2); }
.panel-chat { grid-template-rows: auto minmax(0, 1fr) auto; }
.panel-head { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; padding: var(--s1) var(--s2); border-bottom: var(--rule-w) solid var(--rule); }
.panel-head h2 { font-size: var(--t1); display: flex; align-items: center; }

/* ---------------------------------------------------------------- status strip */
.status {
  display: inline-flex; align-items: center; gap: var(--s0);
  margin-inline-start: auto; padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: var(--t-1); color: var(--ink-2); background: var(--frame);
  --ci-size: 16px;
}
.status[data-state="thinking"], .status[data-state="listening"] { color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 10%, var(--paper-2)); }
.status[data-state="frozen"], .status[data-state="capped"] { color: var(--warn); background: color-mix(in oklab, var(--warn) 12%, var(--paper-2)); }
.status[data-state="error"], .status[data-state="offline"] { color: var(--bad); background: color-mix(in oklab, var(--bad) 10%, var(--paper-2)); }

/* ---------------------------------------------------------------- outline (the map) */
.outline-scroll, .feed-scroll { overflow: auto; padding: var(--s2); }
.outline, .outline ul { list-style: none; }
.outline [role="group"] { padding-inline-start: 22px; margin-inline-start: 11px; border-inline-start: var(--rule-w) solid var(--rule); }
.outline [role="treeitem"] { outline: none; }
.node-row {
  display: grid; grid-template-columns: 20px 22px minmax(0, 1fr) auto; align-items: start; gap: 6px;
  padding: 6px 8px; margin: 2px 0; border-radius: var(--radius-control); cursor: default;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.node-row:hover { background: var(--hover); }
[role="treeitem"]:focus-visible > .node-row { box-shadow: 0 0 0 3px var(--focus); }
.twisty { display: grid; place-items: center; width: 20px; height: 22px; color: var(--ink-3); cursor: pointer; --ci-size: 16px; }
.twisty .ci { transition: transform var(--dur) var(--ease); }
[aria-expanded="true"] > .node-row .twisty .ci { transform: rotate(90deg); }
.twisty.none { visibility: hidden; }
.kind { display: grid; place-items: center; height: 22px; --ci-size: 18px; color: var(--ink-3); }
[data-kind="question"] > .node-row .kind { color: var(--info); }
[data-kind="decision"] > .node-row .kind { color: var(--ok); }
[data-kind="risk"] > .node-row .kind, [data-kind="concern"] > .node-row .kind { color: var(--bad); }
[data-kind="task"] > .node-row .kind { color: var(--warn); }
[data-kind="root"] > .node-row .kind { color: var(--accent-ink); }
.node-body { display: grid; gap: 1px; min-width: 0; }
.node-label { color: var(--ink); font-weight: 600; line-height: 1.35; }
.node-text { color: var(--ink-3); font-size: var(--t-1); }
.node-text:empty { display: none; }
.w3 > .node-row .node-label { font-weight: 750; }
.w1 > .node-row .node-label { font-weight: 500; color: var(--ink-2); }
.is-root > .node-row .node-label { font-size: var(--t2); font-weight: 750; }
.is-root > .node-row .twisty { visibility: hidden; }
.node-who { display: flex; gap: 3px; padding-top: 6px; }
.node-who .dot { width: 8px; height: 8px; }
.outline-empty { color: var(--ink-3); padding: var(--s2) var(--s1); max-width: 40ch; }

/* A change glows for 4 s in the colour of the person it came from; a new node grows in,
   a removed one fades out. Reduced motion keeps the glow, drops the movement. */
.node-row.fresh { box-shadow: 0 0 0 2px var(--who); background: color-mix(in oklab, var(--who) 12%, var(--paper-2)); animation: glow 4s var(--ease-out) both; }
@keyframes glow { 0%, 70% { box-shadow: 0 0 0 2px var(--who); } 100% { box-shadow: 0 0 0 2px transparent; background: transparent; } }
.entering > .node-row { animation: grow-in 300ms var(--ease-out) both, glow 4s var(--ease-out) both; }
@keyframes grow-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.leaving { opacity: 0; transform: scale(.98); transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .node-row.fresh, .entering > .node-row { animation: none; }
  .leaving { transition: none; }
}

/* ---------------------------------------------------------------- change feed */
.feed { list-style: none; display: grid; gap: var(--s1); }
.rev { display: grid; gap: 4px; padding: var(--s1); border-radius: var(--radius-control); background: var(--paper-2); border: var(--rule-w) solid var(--rule); }
.rev-head { display: flex; align-items: center; gap: 6px; font-size: var(--t-1); color: var(--ink-3); --ci-size: 15px; }
.rev-head time { margin-inline-start: auto; }
.rev-n { font-weight: 700; color: var(--ink-2); }
.rev-summary { color: var(--ink); }
.rev-counts { font-size: var(--t-2); color: var(--ink-3); }
.rev .btn { justify-self: start; }
.feed-empty { color: var(--ink-3); }

/* ---------------------------------------------------------------- chat */
.messages-scroll { overflow: auto; padding: var(--s1) var(--s2); display: flex; flex-direction: column; }
.older { align-self: center; margin-bottom: var(--s1); }
.messages { list-style: none; display: grid; gap: var(--s1); margin-top: auto; }
.msg { display: grid; gap: 2px; }
.msg-head { display: flex; align-items: center; gap: 6px; font-size: var(--t-1); color: var(--ink-3); --ci-size: 15px; }
.msg-head b { color: var(--ink); }
.msg-head time { margin-inline-start: auto; font-size: var(--t-2); }
.msg-text { white-space: pre-wrap; color: var(--ink); }
.msg-text.is-ask { font-weight: 600; }
.msg-ai { padding: var(--s1); border-radius: var(--radius-control); background: color-mix(in oklab, var(--accent) 7%, var(--paper-2)); border: var(--rule-w) solid color-mix(in oklab, var(--accent) 25%, var(--paper-2)); }
.msg-ai .msg-head { color: var(--accent-ink); }
.msg-to { color: var(--ink-3); }
.msg-sys { text-align: center; font-size: var(--t-1); color: var(--ink-3); }
.msg.erased .msg-text { color: var(--ink-3); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 6px; border-radius: var(--radius-pill); font-size: var(--t-2); color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 9%, var(--paper-2)); --ci-size: 13px; }
.chip-updated { color: var(--info); background: color-mix(in oklab, var(--info) 10%, var(--paper-2)); }
.composer { padding: var(--s1) var(--s2) var(--s2); border-top: var(--rule-w) solid var(--rule); background: var(--paper-2); display: grid; gap: 4px; }
.composer-row { display: flex; gap: var(--s0); align-items: flex-end; }
.composer-input { min-height: var(--control-h); max-height: 160px; resize: none; flex: 1; }
.composer-foot { display: flex; gap: var(--s1); justify-content: space-between; font-size: var(--t-2); color: var(--ink-3); min-height: 1.2em; }
.composer-note { color: var(--warn); text-align: end; }

/* ---------------------------------------------------------------- settings dialog */
.dialog { border: 0; padding: 0; border-radius: var(--radius-card); background: var(--paper-2); color: var(--ink-2); box-shadow: var(--shadow-pop); width: min(480px, calc(100vw - 32px)); }
.dialog::backdrop { background: var(--scrim); }
.dialog-body { display: grid; gap: var(--s3); padding: var(--s3); }
.dialog-body h2 { display: flex; align-items: center; }
.dialog-body section { display: grid; gap: var(--s1); }
.dialog-body section[hidden] { display: none; }
.gap-row { display: flex; align-items: center; gap: var(--s1); }
.gap-row input { flex: 1; accent-color: var(--accent); }
.btn-row.end { justify-content: flex-end; }

/* ---------------------------------------------------------------- phone */
.tabbar { display: none; }
.panel-swap { display: none; }
/* Two columns: the map or the change feed in the first (room-view.js swaps them), the chat
   in the second. */
@media (max-width: 1100px) and (min-width: 761px) {
  .room-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .panel-swap { display: inline-flex; }
  .panel-feed .panel-swap { margin-inline-start: auto; } /* the map's status strip already pushes right */
  .room-grid:not(.show-feed) .panel-feed { display: none; }
  .room-grid.show-feed .panel-map { display: none; }
  .panel-map, .panel-feed { border-inline-start: 0; }
}
@media (max-width: 760px) {
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .panel { display: none; border: 0; }
  .panel.active { display: grid; }
  .room-tools .btn span { display: none; }
  .people { display: none; }
  .tabbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    min-height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: var(--rule-w) solid var(--rule); background: var(--paper-2);
  }
  .tab { display: grid; place-items: center; gap: 2px; border: 0; background: none; color: var(--ink-3); font-size: var(--t-2); min-height: var(--target); }
  .tab[aria-selected="true"] { color: var(--accent-ink); }
}