/* Tand's web client: its whole look. See docs/web-client.md. */
:root {
  color-scheme: light;
  --bg: #fdfdfc;
  --card: #ffffff;
  --ink: #000000;
  --muted: #6b6b68;
  --rule: rgba(0, 0, 0, 0.1);
  --soft: #efefec;
  --chip: rgba(0, 0, 0, 0.1);
  --sky: #d6effc;
  --muted-sky: #50504d; /* quiet text on the sky field: --muted there falls short of 4.5:1 */
  --lilac: #c79bd3;
  --lilac-ink: #3b1648;
  --teal: #16c1bb;
  --teal-ink: #0a7f7a;
  --bad: #b3261e;
  --bad-soft: #fbeae8;
  --on-bad: #ffffff;
  --ring: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.08);
  --lift: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
  --bar: rgba(0, 0, 0, 0.18);
  --bar-on: rgba(0, 0, 0, 0.4);
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* Code in messages, coloured by Kirari: Tand's lilac, teal and sky, deepened to read on --soft. */
  --kirari-text: var(--ink);
  --kirari-keyword: #7a2e8e;
  --kirari-type: #0a7f7a;
  --kirari-function: #1d5fa8;
  --kirari-string: #2f7a3a;
  --kirari-number: #a8530a;
  --kirari-comment: var(--muted);
  --kirari-punctuation: #50504d;
  --kirari-operator: #50504d;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0c0c0c;
    --card: #171717;
    --ink: #f4f4f1;
    --muted: #9a9a95;
    --rule: rgba(255, 255, 255, 0.12);
    --soft: #1f1f1e;
    --chip: rgba(255, 255, 255, 0.14);
    --sky: #10283a;
    --muted-sky: #a3b3bf;
    --lilac: #3a2145;
    --lilac-ink: #ecd3f3;
    --teal-ink: #4fd8d2;
    --bad: #ff8a80;
    --bad-soft: #3a1714;
    --on-bad: #0c0c0c;
    --ring: 0 0 0 1px rgba(255, 255, 255, 0.12);
    --lift: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.5);
    --bar: rgba(255, 255, 255, 0.2);
    --bar-on: rgba(255, 255, 255, 0.4);
    --kirari-keyword: #d7a6e6;
    --kirari-type: #4fd8d2;
    --kirari-function: #8cc4f0;
    --kirari-string: #a8d48a;
    --kirari-number: #f0b878;
    --kirari-punctuation: #b0b0aa;
    --kirari-operator: #b0b0aa;
  }
}
* { box-sizing: border-box; }
/* How wide the messages run: a readable column, or the whole width (chosen in the team sheet). */
:root { --measure: 760px; }
:root.wide { --measure: none; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button:disabled { cursor: default; }
::selection { background: var(--sky); color: var(--ink); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* The small type of the interface: monospace capitals, as on a label. */
.caps, .btn, .tag, .status, .marks, .fold, #with, #link, #older, nav h2 {
  font: 12px/1.5 var(--mono);
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 6px 0 10px;
  border-radius: 4px;
  background: var(--card);
  box-shadow: var(--ring);
  white-space: nowrap;
  transition: background-color 120ms, opacity 120ms, color 120ms;
}
.btn:hover { background: var(--soft); }
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn.solid { background: var(--ink); color: var(--bg); box-shadow: none; }
.btn.solid:hover { opacity: 0.85; }
.btn.solid:disabled { opacity: 0.28; }
kbd {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--chip);
  font: 11px/18px var(--mono);
  text-align: center;
}
.btn.solid kbd { background: rgba(128, 128, 128, 0.45); }
.tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 2px;
  background: var(--teal);
  color: #000;
  font-size: 11px;
}
.mark {
  flex-shrink: 0;
  width: 22px;
  height: 15px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.brand { display: flex; align-items: center; gap: 7px; font-size: 22px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
a.brand { text-decoration: none; align-self: flex-start; }
/* Line icons, drawn in the text's colour. */
.ico { display: inline-grid; place-items: center; flex-shrink: 0; }
.ico svg, svg.ico { width: 18px; height: 18px; }

/* Scrollbars: thin, no track, faint until the pointer is over what scrolls. */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--bar) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;
  border-radius: 5px;
  background-clip: content-box;
}
*:hover::-webkit-scrollbar-thumb { background-color: var(--bar); }
::-webkit-scrollbar-thumb:hover { background-color: var(--bar-on); }

/* Who are you: asked once. */
#door, #gate {
  min-height: 100%;
  background: var(--sky);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: clamp(20px, 6vw, 72px);
}
#gate { background: var(--lilac); color: var(--lilac-ink); }
.fields { display: grid; gap: 12px; max-width: 420px; margin: 0 0 14px; }
.fields label { display: grid; gap: 5px; }
.fields label > span { font: 12px/1.5 var(--mono); letter-spacing: 0.015em; text-transform: uppercase; color: var(--muted); }
.fields small { color: var(--muted); font-size: 12.5px; }
.secretform input {
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: var(--card);
  box-shadow: var(--ring);
  color: var(--ink);
}
.secretform input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Signing in, joining, starting a team: one thing asked on the sky, beside a glimpse of the app
   on its own ground, the door it opens. */
#auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
#auth.alone { grid-template-columns: minmax(0, 1fr); }
#auth .side {
  background: var(--sky);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(clamp(20px, 4vw, 52px) + env(safe-area-inset-top)) clamp(20px, 5vw, 64px) calc(clamp(20px, 3vw, 36px) + env(safe-area-inset-bottom)) calc(clamp(20px, 5vw, 64px) + env(safe-area-inset-left));
}
#auth .authbody { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 400px; padding-block: 40px; }
#auth .kicker { margin: 0 0 14px; color: var(--muted-sky); }
#auth .kicker:empty { display: none; }
#auth h1 { margin: 0 0 14px; font-size: clamp(34px, 4.6vw, 52px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
#auth .sub { margin: 0 0 26px; max-width: 30em; font-size: 16px; opacity: 0.8; }
#auth .fields { max-width: none; gap: 14px; margin-bottom: 18px; }
#auth .fields label > span, #auth .fields small { color: var(--muted-sky); }
#auth input { height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--card); box-shadow: var(--ring); color: var(--ink); }
#auth input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
#auth .pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 14px; border-radius: 8px; background: var(--card); box-shadow: var(--ring); font-size: 15px; }
#auth .pick:hover { background: var(--soft); }
#auth .pick small { color: var(--muted); font-size: 13px; margin-left: auto; }
#auth .go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 15.5px; font-weight: 500; transition: opacity 120ms; }
#auth .go:hover { opacity: 0.88; }
#auth .go:disabled { opacity: 0.4; }
#auth .go svg { width: 18px; height: 18px; flex: none; }
#auth .go kbd { background: rgba(128, 128, 128, 0.45); }
#auth .go:focus-visible { outline-offset: 3px; }
#auth .fieldmsg { color: var(--muted-sky); }
#auth .fieldmsg.bad { color: var(--bad); }
#auth .alt { margin: 14px 0 0; font-size: 15px; }
#auth .alt button, #auth .help a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#auth .help { width: 100%; max-width: 400px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted-sky); }
#auth .help summary { display: flex; align-items: center; gap: 8px; width: fit-content; color: var(--ink); cursor: pointer; list-style: none; }
#auth .help summary::-webkit-details-marker { display: none; }
#auth .help summary::before { content: "+"; width: 10px; font: 13px var(--mono); }
#auth .help[open] summary::before { content: "–"; }
#auth .help ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; }
#auth .help b { color: var(--ink); font-weight: 500; }
#auth .from { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 10px 12px; border-radius: 10px; background: var(--card); box-shadow: var(--ring); font-size: 14px; }
#auth .from .av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lilac); color: var(--lilac-ink); font-weight: 600; font-size: 13px; text-transform: uppercase; }

/* The glimpse: drawn with the app's own pieces; a sample before anyone is known. */
#auth .peek { position: relative; display: grid; place-items: center; min-width: 0; padding: 48px clamp(20px, 4vw, 48px); background: var(--bg); }
#auth .peek .label { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 24px; color: var(--muted); }
.glimpse { width: min(100%, 420px); border-radius: 12px; background: var(--card); box-shadow: var(--lift); overflow: hidden; font-size: 14px; }
.glimpse .top { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--rule); font-weight: 600; letter-spacing: -0.01em; }
.glimpse .top .mark { width: 16px; height: 11px; }
.glimpse .top .caps { margin-left: auto; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glimpse .say { padding: 12px 16px; border-top: 1px solid var(--rule); }
.glimpse .top + .say { border-top: 0; }
.glimpse .say .h { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.glimpse .say .h b { font-weight: 600; }
.glimpse .say .h .when { margin-left: auto; color: var(--muted); font-size: 12px; }
.glimpse .say p { margin: 3px 0 0; }
.glimpse .sum { display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--soft); font-size: 13.5px; }
.glimpse .waits { margin-top: 8px; padding: 8px 12px; background: var(--lilac); color: var(--lilac-ink); font-size: 13.5px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.glimpse .roster { padding: 8px 8px 12px; }
.glimpse h5 { margin: 8px 8px 4px; font: 11px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.glimpse .one { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; }
.glimpse .one::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.glimpse .one.you { background: var(--sky); }
.glimpse .one.you::before { background: var(--teal); }
.glimpse .one .caps { margin-left: auto; color: var(--teal-ink); }
.glimpse .at { color: var(--teal-ink); font-weight: 500; }
.glimpse .next { padding: 12px 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13.5px; }
@media (min-width: 861px) { #auth .from { display: none; } }
@media (max-width: 860px) {
  #auth .from:not([hidden]) ~ .kicker { display: none; }
  #auth { grid-template-columns: minmax(0, 1fr); }
  #auth .peek { display: none; }
  #auth .authbody { justify-content: flex-start; padding-block: 12vh 32px; }
}
.secretform { max-width: none; margin-top: 14px; }
.secretform .row { display: flex; gap: 8px; justify-content: flex-end; }
#dmhead { margin-top: 18px; }
.chan .lock { margin-right: 5px; color: var(--muted); font-size: 11px; }
button.tag { border: 0; cursor: pointer; font: inherit; font-size: 11px; }
button.tag:hover { box-shadow: 0 0 0 1px var(--ink); }
#with .private { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-sky); }
#with .private .ico svg { width: 14px; height: 14px; }
.btn .ico svg, .btn svg.ico { width: 16px; height: 16px; }
.cli {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  padding: 6px 6px 6px 12px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--ring);
}
.cli code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 13px/1.5 var(--mono); scrollbar-width: none; }
.cli code::-webkit-scrollbar { display: none; }
/* The team's name stands where the wordmark would; with more than one team it opens the picker. */
nav .brand { width: calc(100% - 4px); margin: -4px 2px 0; padding: 4px 8px; border-radius: 4px; min-width: 0; }
nav button.brand:hover { background: var(--soft); }
nav .brand h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav .brand .caret { margin-left: auto; padding-left: 6px; color: var(--muted); font: 12px/1 var(--mono); }
nav .brand .caret svg { display: block; width: 14px; height: 14px; }

/* The team panel and the sign-in approval: sheets over the chat. */
dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--lift);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.32); }
dialog[open] { animation: rise 140ms ease-out; }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px 22px; background: var(--sky); }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.sheet-head .caps { color: var(--muted-sky); }
.sheet-head .x { margin-left: auto; }
.sheet-body { padding: 6px 22px 22px; }
.sheet-body section { padding: 18px 0 4px; border-bottom: 1px solid var(--rule); }
.sheet-body section:last-child { border-bottom: 0; }
.sheet-body h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 12px/1.5 var(--mono); letter-spacing: 0.015em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.sheet-body h3 > .btn, .sheet-body h3 > .acts { margin-left: auto; }
.sheet-body h3 .acts { display: flex; gap: 6px; }
.sheet-body p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.list { margin: 0 0 12px; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.list li:first-child { border-top: 0; }
.list .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list .sub { color: var(--muted); font-size: 12.5px; }
.list .btn { height: 26px; }
.list .btn.danger:hover { color: var(--bad); }
.made { margin: 0 0 12px; }
.made .cli { max-width: none; }
.made p { margin: 6px 0 0; font-size: 12.5px; }
#door h1, #gate h1 {
  margin: 0 0 28px;
  max-width: 11em;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
#door .sub, #gate .sub { margin: -14px 0 24px; max-width: 30em; font-size: 16px; opacity: 0.8; }
#door .row, #gate .row { display: flex; gap: 8px; align-items: center; max-width: 420px; }
#door input, #gate input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: var(--card);
  box-shadow: var(--ring);
  color: var(--ink);
  outline-offset: 2px;
}
.fieldmsg { min-height: 22px; margin-top: 8px; font-size: 13px; }
.fieldmsg.bad { color: var(--bad); }
#gate .fieldmsg.bad { color: var(--lilac-ink); font-weight: 600; }
input::placeholder, textarea::placeholder { color: var(--muted); }

#app { height: 100dvh; display: flex; }
nav {
  flex: 0 0 264px;
  min-width: 0;
  border-right: 1px solid var(--rule);
  padding: 22px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
nav .brand { margin-bottom: 22px; }
nav h1 { margin: 0; font: inherit; letter-spacing: inherit; }
nav h2 { margin: 0; padding: 0 10px 6px; font-weight: 400; color: var(--muted); }
/* The channels' label, with + at its far right to make one. */
.navhead { display: flex; align-items: center; }
.navhead h2 { flex: 1; }
#addchan { width: 24px; height: 24px; margin: -6px 6px 0 0; border-radius: 5px; display: grid; place-items: center; color: var(--muted); }
#addchan svg { width: 14px; height: 14px; }
#addchan:hover { background: var(--soft); color: var(--ink); }
#newform { margin: 0 0 8px; }
/* On a wide screen the team's menu holds what the foot of the list used to. */
@media (min-width: 721px) {
  #newbtn, #teambtn, #invite { display: none !important; }
  .navfoot:not(:has(> :not([hidden]):not(#newbtn):not(#teambtn):not(#invite))) { display: none; }
}
.brandmenu { width: 260px; }
.brandmenu .row { width: 100%; font-size: 14px; text-align: left; color: var(--ink); text-decoration: none; }
.brandmenu .row svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted); }
.brandmenu .row[aria-checked="true"] { font-weight: 500; }
.brandmenu .row[aria-checked="true"] svg { color: var(--teal-ink); }
.brandmenu .row .from { margin-left: auto; }
.brandmenu .rule { height: 1px; margin: 6px 8px; background: var(--rule); }
.brandmenu .head { padding: 4px 8px 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.chan {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
}
.chan:hover, .chan[aria-current="true"] { background: var(--soft); }
.chan .text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.chan .top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chan .name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.chan .hash { color: var(--muted); }
.chan .when { flex-shrink: 0; color: var(--muted); font: 11px/1.5 var(--mono); letter-spacing: 0.015em; text-transform: uppercase; }
.chan.unread .name { font-weight: 600; }
.chan.unread .when, .chan.unread .last { color: var(--ink); }
.chan[aria-current="true"] .name { text-decoration: underline; text-underline-offset: 4px; }
.chan .last {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.5em;
}
.chan .dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 0; background: transparent; opacity: 1; }
.chan.unread .dot { background: var(--ink); }
.chan.asking .dot { background: var(--lilac); box-shadow: 0 0 0 1px var(--lilac-ink); }
.chan.asking .last { color: var(--ink); }
.navfoot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 4px;
  color: var(--muted);
  font: 12px/1.5 var(--mono);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
}
.navbtn:hover { background: var(--soft); color: var(--ink); }
.navbtn .glyph { width: 14px; text-align: center; font-size: 14px; line-height: 1; }
.navbtn svg.ico { width: 16px; height: 16px; }
.navbtn .arrow { margin-left: auto; opacity: 0; transition: opacity 120ms; }
.navbtn:hover .arrow { opacity: 1; }
/* Naming a new channel: the # is fixed, the rest is tidied as it is typed. */
#newform {
  margin: 0 0 4px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px var(--chip);
  animation: rise 120ms ease-out;
}
#newform .field { display: flex; align-items: center; gap: 1px; height: 36px; padding: 0 4px 0 10px; }
#newform .hash { color: var(--muted); }
#new { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; outline: none; }
#newform kbd { flex-shrink: 0; }
#newhint { padding: 0 10px 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }
#newhint.bad { color: var(--bad); }

#chan { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#panes { flex: 1; min-height: 0; display: flex; }
main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* The header: one lean row on the page. The channel, its views (messages, then its apps), who is at
   work or waiting on you, and the side panel's toggle. */
header {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 48px;
  padding: 0 12px 0 22px;
}
header h2 { align-self: center; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
header .hash { color: var(--muted); }
header .spacer { flex: 1; }
#tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }
.htab { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 9px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.htab:hover { color: var(--ink); }
.htab[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.htab[aria-selected="true"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; border-radius: 1px; background: var(--ink); }
.htab .icon { display: grid; place-items: center; }
.htab .icon .shape { width: 13px; height: 13px; }
.htab .icon > span { font-size: 12px; }
.htab .new { width: 6px; height: 6px; border-radius: 3px; background: var(--teal-ink); }
.htab.add { padding: 0 8px; font-size: 16px; font-weight: 400; }
.htabwrap { flex-shrink: 0; display: flex; align-items: stretch; }
.htabwrap .htab { padding-right: 4px; }
.htabwrap .htab[aria-selected="true"]::after { right: 4px; }
.hmore { align-self: center; display: grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border-radius: 5px; color: var(--muted); }
.hmore .ico, .hmore .ico svg { display: block; width: 16px; height: 16px; }
.hmore:hover, .hmore[aria-expanded="true"] { background: var(--soft); color: var(--ink); }
.agentchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; max-width: 280px; padding: 0 9px; border-radius: 13px; background: var(--soft); font: 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.agentchip .what { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.agentchip .pulse { flex-shrink: 0; width: 6px; height: 6px; border-radius: 3px; background: var(--teal-ink); animation: blink 1.2s ease-in-out infinite; }
.agentchip.asking { background: var(--amber); color: var(--amber-ink); }
.agentchip.asking .what { color: inherit; }
.agentchip.idle { background: none; padding: 0 5px; color: var(--muted); }
.agentsbtn[aria-expanded="true"] { color: var(--ink); }
.agentsmenu { width: 240px; }
.agentsmenu .row { width: 100%; justify-content: space-between; font-size: 14px; text-align: left; }
.agentsmenu .from { font-size: 12px; }
.agentchip:hover { box-shadow: 0 0 0 1px var(--rule); }
@media (prefers-reduced-motion: reduce) { .agentchip .pulse { animation: none; } }
#back { display: none; width: 30px; padding: 0; justify-content: center; font-size: 15px; }
#with { display: flex; gap: 5px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
/* Whether the server is reachable: a quiet line along the header's foot, out of the way of the buttons. */
header { position: relative; }
/* The channel's name, with how the connection is doing right after it. */
.titlebox { display: flex; align-items: center; gap: 4px 8px; min-width: 0; flex-shrink: 0; margin-right: 8px; }
#link { align-self: center; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); font-size: 11px; }
#link:empty { display: none; }
#link button { pointer-events: auto; }
#link .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s ease-in-out infinite; }
#link.lost .pulse { background: var(--bad); }
#link button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font: inherit; letter-spacing: inherit; text-transform: inherit; }
#with .none { color: var(--muted-sky); font: 13px/1.5 var(--sans); text-transform: none; letter-spacing: 0; }
#with .none code { font: 12px/1.5 var(--mono); background: rgba(255, 255, 255, 0.5); padding: 1px 4px; border-radius: 3px; }

#log { --logtop: 26px; flex: 1; overflow-y: auto; padding: var(--logtop) 28px 8px; overscroll-behavior: contain; }
#log > * { max-width: var(--measure); }
.item { margin: 0 0 22px; }
.who .sent { font: 400 12px/1.5 var(--mono); color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.who .sent:empty { display: none; }
.who .sent:not(:empty) + .status::before { content: "· "; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 500; letter-spacing: -0.01em; }
.status, .marks { color: var(--muted); font-weight: 400; }
/* Set a question aside: a quiet word beside its status, like the status itself. */
.dismissbtn { font: 12px/1.5 var(--mono); letter-spacing: 0.015em; text-transform: uppercase; color: var(--muted); padding: 0 5px; margin: 0 -2px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--rule); }
.dismissbtn:hover { color: var(--ink); background: var(--soft); }
@media (pointer: coarse) { .dismissbtn { padding: 4px 8px; } }
.marks { display: flex; gap: 10px; }
.marks button { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; border-radius: 3px; padding: 0 3px; margin: 0 -3px; }
.marks button:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
/* Replying: a quiet action on each turn, a quote above each reply, a chip above the box. */
.replybtn {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 3px;
  color: var(--muted);
  font: 11px/18px var(--mono);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 120ms;
}
.item:hover .replybtn, .item.hover .replybtn, .replybtn:focus-visible { opacity: 1; }
.replybtn:hover { background: var(--soft); color: var(--ink); }
.replybtn .ico { display: none; }
/* On a touch screen it is always there: an icon, with room for a thumb. */
@media (hover: none) {
  .replybtn { opacity: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -11px -12px -11px auto; padding: 0; }
  .replybtn .label { display: none; }
  .replybtn .ico { display: grid; }
}
.quote {
  display: block;
  max-width: 100%;
  margin: 1px 0 2px;
  padding-left: 8px;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quote:hover { color: var(--ink); }
.item.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: var(--sky); } }
#replying {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--measure);
  margin: 0 0 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 6px;
  background: var(--soft);
  font-size: 13px;
}
#replying .text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#replying .close { width: 20px; height: 20px; border-radius: 3px; text-align: center; color: var(--muted); }
#replying .close:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
/* Choices an agent offers with its question. */
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.choice { height: 30px; text-transform: none; letter-spacing: 0; font: 14px/1 var(--sans); }
.choice:disabled { opacity: 0.45; }
.choice.picked { opacity: 1; background: var(--ink); color: var(--bg); box-shadow: none; }
/* A run at work, as a card: where it has got to, a bar, its steps if any, its terminal and Stop. */
.task { margin: 4px 0 6px; border-radius: 8px; background: var(--card); box-shadow: var(--ring); font-size: 14px; overflow: hidden; }
.task-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.task-now { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.task-count, .task-clock { flex-shrink: 0; color: var(--muted); font: 12px/1.5 var(--mono); }
.task-count + .task-clock::before { content: "· "; }
.live-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-ink); animation: blink 1.6s ease-in-out infinite; }
.task-bar { height: 2px; background: var(--rule); overflow: hidden; }
.task-bar i { display: block; height: 100%; background: var(--teal-ink); transition: width 300ms; }
.task-bar.sweep i { width: 40%; background: linear-gradient(90deg, transparent, var(--teal-ink), transparent); animation: sweep 1.8s ease-in-out infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.task-steps-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px 14px 4px; list-style: none; }
.task-steps-list li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.task-steps-list li::before { content: ""; flex-shrink: 0; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--chip); }
.task-steps-list li.done::before { border: 0; background: var(--teal-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.2 2.2L9.5 3.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.2 2.2L9.5 3.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.task-steps-list li.now { color: var(--ink); }
.task-steps-list li.now::before { border-color: var(--chip); border-top-color: var(--teal-ink); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.task-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px 6px 14px; border-top: 1px solid var(--rule); }
.task-what { min-width: 0; flex: 1; color: var(--muted); font: 12px/1.5 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-foot .btn { height: 28px; }
.task-bar + .task-foot { margin-top: 0; border-top: 0; }
/* What an agent did to a page or an app: quiet lines under its turn, the thing named as a way to it. */
.acts { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; font-size: 13px; color: var(--muted); }
.acts-alone .acts { margin: 0; }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.act .ico svg { width: 14px; height: 14px; }
.act .what { min-width: 0; overflow-wrap: anywhere; }
.act .sent { font: 400 12px/1.5 var(--mono); color: var(--muted); white-space: nowrap; }
.actlink { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
.actlink:hover:not(:disabled) { text-decoration: underline; }
.actlink:disabled { color: inherit; }
.actfold { font: 11px/18px var(--mono); letter-spacing: 0.015em; text-transform: uppercase; color: var(--muted); padding: 0 5px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--rule); }
.actfold:hover, .actfold[aria-expanded="true"] { color: var(--ink); background: var(--soft); }
@media (pointer: coarse) { .actfold { padding: 4px 8px; } }
.actlist { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0 7px; padding: 0 0 0 15px; border-left: 1px solid var(--rule); list-style: none; }
/* A message an agent is at work on says so, by its time. */
.item.answering { padding: 8px 12px; margin: -8px -12px 14px; background: color-mix(in srgb, var(--teal-ink) 6%, transparent); border-radius: 8px; }
.onit { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-ink); font: 400 12px/1.5 var(--sans); letter-spacing: 0; }
.onit .live-dot { width: 6px; height: 6px; }
/* A page an agent published: its own working page, in a card, with a way out to a tab. */
.item.attached { margin-top: -14px; }
.pagecard { margin: 6px 0 2px; border-radius: 8px; background: var(--card); box-shadow: var(--lift); overflow: hidden; }
.pagecard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--rule); }
.pagecard-head .glyph { color: var(--teal-ink); font-size: 14px; line-height: 1; }
.pagecard-head .glyph svg { width: 16px; height: 16px; }
.pagecard-head .name { min-width: 0; font-weight: 500; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagecard-head .caps { color: var(--muted); }
.pagecard-head .acts { margin-left: auto; display: flex; gap: 4px; }
.pagecard-head .acts .btn { height: 28px; padding: 0 10px; }
.pagecard iframe { display: block; width: 100%; height: 360px; border: 0; background: #ffffff; }
.pagecard-foot { padding: 6px 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.versions { margin: 0; padding: 0; list-style: none; }
.versions li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.versions li:first-child { border-top: 0; }
.versions .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.versions .sub { color: var(--muted); font-size: 12.5px; }
.versions .live { color: var(--teal-ink); }
.versions .btn { height: 28px; }
/* Apps: a card in the chat when made; pinned, they sit in the rail beside the messages. */
.appcard { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 2px; padding: 12px 14px; border-radius: 8px; background: var(--card); box-shadow: var(--lift); }
.appcard .icon { flex: 0 0 36px; height: 36px; border-radius: 6px; background: var(--sky); display: grid; place-items: center; overflow: hidden; }
.icon .shape { display: block; width: 22px; height: 22px; background: currentColor; color: var(--ink); mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; }
.appcard .text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.appcard .name { font-weight: 500; letter-spacing: -0.01em; }
.appcard .sub { font-size: 13px; color: var(--muted); }
.appcard .acts { display: flex; gap: 6px; margin-left: auto; }
.appcard .acts .btn { height: 30px; padding: 0 10px; }
/* The side panel's toggle: the widgets beside the chat, or the chat beside an app. */
#appsbtn { align-self: center; flex-shrink: 0; width: 32px; height: 28px; padding: 0; justify-content: center; border-radius: 6px; background: none; box-shadow: none; color: var(--ink); }
#appsbtn svg { width: 17px; height: 17px; }
#appsbtn:hover { background: var(--soft); }
#appsbtn[aria-pressed="true"] { background: var(--chip); }
/* The dock: the channel's apps as icons on the right edge, and + to add one from another channel. */
#dock { position: relative; flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; border-left: 1px solid var(--rule); background: var(--soft); }
#dock[hidden] { display: none; }
.dockapp { position: relative; width: 44px; height: 44px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); display: grid; place-items: center; }
.dockapp:hover { box-shadow: 0 0 0 1px var(--ink); }
.dockapp .icon { display: grid; place-items: center; }
.dockapp .icon .shape { width: 20px; height: 20px; }
.dockapp .icon > span { font-size: 18px; }
.dockapp[aria-pressed="true"] { background: var(--ink); box-shadow: none; }
.dockapp[aria-pressed="true"] .icon .shape { color: var(--bg); }
.dockapp[aria-pressed="true"] .icon > span { color: var(--bg); }
.dockapp .badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--lilac-ink); color: var(--bg); font: 10.5px/18px var(--mono); text-align: center; }
#dock .rule { width: 28px; height: 1px; background: var(--rule); }
.dockadd { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 1px dashed var(--muted); color: var(--muted); font-size: 22px; line-height: 1; }
.dockadd:hover, .dockadd[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.dockpanel { position: fixed; z-index: 40; right: 72px; top: 16px; width: 320px; max-height: 70vh; overflow: auto; padding: 8px; border-radius: 8px; background: var(--card); box-shadow: var(--lift); text-align: left; }
.dockpanel .head { padding: 6px 8px 8px; font-weight: 500; }
.dockpanel .none { padding: 4px 8px 10px; font-size: 14px; color: var(--muted); }
.dockpanel .row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; }
.dockpanel .row:hover { background: var(--soft); }
.dockpanel .row .icon { flex: 0 0 32px; height: 32px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; }
.dockpanel .row .icon .shape { width: 18px; height: 18px; }
.dockpanel .text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dockpanel .name { font-weight: 500; }
.dockpanel .from { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dockpanel .btn { height: 32px; }
/* The side view and its apps are on the page itself: an app's own background is transparent, so it
   sits in the channel rather than in a box. */
#rail { position: relative; flex: 0 0 var(--rail, 420px); min-width: 300px; max-width: 72vw; display: flex; flex-direction: column; border-left: 1px solid var(--rule); background: var(--bg); }
/* An app as the main view: it takes the width, and the chat sits beside it, or is put away. */
#app.wide main { flex: 0 0 var(--chatw, 360px); order: 2; min-width: 280px; }
/* As the main view, opened from its tab, the canvas needs no header: the tab names it. */
#app.wide #rail.canvas .railtabs { display: none; }
#app.wide #divider { order: 1; }
/* Between the main view and the side view: dragged (or arrowed) to share the width. */
#divider { position: relative; z-index: 4; flex: 0 0 9px; margin: 0 -4px; cursor: col-resize; touch-action: none; }
#divider::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background 120ms; }
#divider:hover::after, #divider:focus-visible::after, #divider.dragging::after { background: var(--muted); }
#divider:focus-visible { outline: none; }
#divider[hidden] { display: none; }
#app.wide.nochat main { display: none; }
#app.wide #log { --logtop: 18px; padding: var(--logtop) 18px 8px; }
#app.wide #send { padding-left: 14px; padding-right: 14px; }
/* The widgets: no panel of their own, only the cards, on the page beside the chat. */
#rail.widgets { flex: 0 0 var(--widgetsw, 300px); min-width: 0; border-left: 0; background: var(--bg); }
#rail .grip { display: none; }
#rail.widgets .grip, #rail.widgets .railtabs { display: none; }
#rail.widgets .railbody { background: var(--bg); }
#app.wide #rail { flex: 1; max-width: none; }
#rail .grip { position: absolute; z-index: 2; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; }
.railtabs.slim { align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 16px; border-bottom: 0; background: transparent; }
.railtabs .cname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--muted); }
/* An app is an elevated canvas, set a little in from the edges, its name and controls inside it. */
#rail.canvas { margin: 8px 12px 12px 6px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06); overflow: hidden; }
#app.wide #rail.canvas { margin-left: 12px; margin-right: 6px; }
#rail.canvas .railbody, #rail.canvas .history { background: var(--card); }
.railtabs .spacer { flex: 1; }
.railtabs .rb { width: 30px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); }
.railtabs .rb .ico, .railtabs .rb .ico svg { display: block; width: 16px; height: 16px; }
.railtabs .rb:hover, .railtabs .rb[aria-expanded="true"] { background: var(--soft); color: var(--ink); }
.railtabs { display: flex; align-items: flex-end; gap: 2px; padding: 10px 8px 0; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.railtabs::-webkit-scrollbar { display: none; }
.railtab { flex-shrink: 0; display: flex; align-items: center; height: 34px; border-radius: 6px 6px 0 0; color: var(--muted); white-space: nowrap; font-size: 14px; }
.railtab .name { height: 100%; padding: 0 12px; }
.railtab:hover { color: var(--ink); }
.railtab[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: 0 -1px 0 var(--rule); }
.railtab[aria-selected="true"] .name { padding-right: 2px; }
.railtab .more { width: 28px; height: 26px; margin-right: 4px; border-radius: 4px; color: var(--muted); font-weight: 400; text-align: center; letter-spacing: 0.05em; }
.railtab .more:hover, .railtab .more[aria-expanded="true"] { background: var(--soft); color: var(--ink); }
.railmenu { position: absolute; z-index: 5; width: 260px; padding: 6px; border-radius: 8px; background: var(--card); box-shadow: var(--lift); }
.railmenu .about { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.railmenu .sub { font-size: 12.5px; color: var(--muted); }
.railmenu .desc { font-size: 13px; }
.railmenu .movelist { display: flex; flex-direction: column; margin: 0 0 4px 12px; padding-left: 6px; border-left: 1px solid var(--rule); }
/* An app only two people can see: a small lock beside its name, wherever it is named. */
.privmark { display: inline-grid; place-items: center; margin-left: 4px; color: var(--muted); }
.privmark svg { width: 12px; height: 12px; }
.railmenu .menuitem { display: flex; align-items: center; width: 100%; min-height: 36px; padding: 0 8px; border-radius: 4px; font-size: 14px; color: var(--ink); text-decoration: none; }
.railmenu .menuitem:hover { background: var(--soft); }
.railmenu .menuitem[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--teal-ink); }
.history .tabs .back { margin-left: auto; text-transform: none; letter-spacing: 0; font: 13px var(--sans); color: var(--muted); }
.history .tabs .back:hover { color: var(--ink); }
.railtabs .x { margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 4px; text-align: center; color: var(--muted); }
.railtabs .x:hover { background: var(--card); color: var(--ink); }
.railhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px 6px 14px; background: var(--card); border-bottom: 1px solid var(--rule); }
.railhead .text { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.railhead .name { font-weight: 500; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.railhead .sub { font-size: 12px; color: var(--muted); }
.railhead .btn { height: 28px; padding: 0 8px; }
.railhead .btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.railbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px 8px 14px; background: var(--lilac); color: var(--lilac-ink); font-size: 13px; }
.railbar .what { flex: 1; min-width: 0; }
.railbar .btn { height: 28px; }
.railbody { position: relative; flex: 1; min-height: 0; background: transparent; }
.railbody > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: light dark; }
/* A frame shows once its page has loaded, never the blank (white) page before it. */
.railbody > iframe:not(.shown), .pagecard iframe:not(.loaded) { visibility: hidden; }
/* Tand's loading view for an app, until it has drawn: rows like the widgets' skeleton. */
.appskel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; pointer-events: none; }
.appskel[hidden] { display: none; }
.appskel i { display: block; height: 12px; width: 70%; border-radius: 4px; background: var(--soft); animation: shimmer 1.4s ease-in-out infinite; }
.appskel i:first-child { width: 40%; height: 18px; margin-bottom: 6px; }
.appskel i:last-child { width: 45%; }
.railempty { padding: 24px 18px; color: var(--muted); font-size: 14px; }
/* Widgets: glances at apps in a column of small cards. Tand draws each card's head (its name, a
   fold, the glance the widget gives, open); the app draws the body, as tall as it needs. */
.widgetpanel { position: absolute; inset: 0; overflow-y: auto; padding: 10px 14px 16px 4px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.wlist { display: flex; flex-direction: column; gap: 8px; }
.wlist:empty { display: none; }
.wcard { flex-shrink: 0; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); padding: 7px 8px 7px 12px; }
.wcard .whead { position: relative; display: flex; align-items: center; gap: 4px; height: 26px; }
.wcard .wname { display: flex; align-items: center; min-width: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; text-align: left; }
.wcard .wname .label { overflow: hidden; text-overflow: ellipsis; }
.wcard .wname:hover .label { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.wcard .wfold { width: 20px; height: 20px; margin-left: 1px; }
.wcard .wfold .ico svg { width: 12px; height: 12px; transition: transform 120ms; }
.wcard.open .wfold .ico svg { transform: rotate(90deg); }
.wcard .wglance { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); white-space: nowrap; }
.wcard .wglance .text { overflow: hidden; text-overflow: ellipsis; }
.wcard .pill { position: relative; flex-shrink: 0; width: 34px; height: 12px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.wcard .pill i { position: absolute; left: 2px; top: 2px; bottom: 2px; min-width: 8px; border-radius: 4px; background: #2f7fd8; }
.wcard .wbtn { flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; }
.wcard .wbtn .ico { display: grid; place-items: center; }
.wcard .wbtn:hover { background: var(--soft); color: var(--ink); }
.wcard .wbtn:disabled { opacity: 0.3; }
/* The handle lies over the end of the head, the glance fading out under it, so nothing moves when
   it shows. */
.wcard .wgrip { position: absolute; top: 1px; right: -4px; width: 52px; height: 24px; padding-right: 4px; display: grid; justify-items: end; align-items: center; border-radius: 0 5px 5px 0; background: linear-gradient(to right, transparent, var(--card) 55%); opacity: 0; pointer-events: none; transition: opacity 120ms; cursor: grab; touch-action: none; }
.wcard .wgrip:hover { background: linear-gradient(to right, transparent, var(--card) 55%); color: var(--ink); }
.wcard .wgrip svg { width: 8px; height: 13px; fill: currentColor; }
/* It shows when the card is hovered, focused or dragged; on touch, where nothing hovers, always. */
.wcard:hover .wgrip, .wcard:focus-within .wgrip, .wcard.dragging .wgrip { opacity: 1; pointer-events: auto; }
@media (hover: none) { .wcard .wgrip { opacity: 1; pointer-events: auto; } }
.wcard.dragging { position: fixed; z-index: 50; margin: 0; box-shadow: 0 0 0 1px var(--rule), 0 12px 32px rgba(0, 0, 0, 0.16); transform: rotate(-1deg) scale(1.02); cursor: grabbing; }
.wcard.dragging.settling { transform: none; box-shadow: 0 0 0 1px var(--rule); }
/* Where the dragged card will land. */
.wghost { flex-shrink: 0; box-sizing: border-box; border-radius: 12px; border: 1.5px dashed var(--muted); background: var(--soft); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .wcard.dragging { transform: none; } }
.wcard.dragging .wgrip { cursor: grabbing; }
.widgetpanel.dragging { user-select: none; -webkit-user-select: none; }
/* Customizing: the cards step aside (their frames keep running) for the list of what to show. */
.widgetpanel.customizing .wlist, .widgetpanel.customizing .widgetnote { display: none; }
.wcustom { padding: 8px 10px 10px 12px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); font-size: 13px; }
.wcustom .chead { display: flex; align-items: center; height: 28px; }
.wcustom .ctitle { flex: 1; font-weight: 600; }
.wcustom .cdone { height: 26px; padding: 0 10px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 500; }
.wcustom .cdone:hover { opacity: 0.85; }
.wcustom .csec { margin: 10px 0 2px; font-size: 12px; color: var(--muted); }
.wcustom .crows { position: relative; }
.wcustom .cnone { padding: 4px 0 2px; font-size: 12px; color: var(--muted); }
.wcustom .crow { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 -6px; padding: 0 6px; border-radius: 8px; background: var(--card); transition: transform 120ms ease; }
.wcustom .crow:hover { background: var(--soft); }
.wcustom .crow.dragging { z-index: 2; transition: none; box-shadow: 0 0 0 1px var(--rule), 0 6px 16px rgba(0, 0, 0, 0.12); cursor: grabbing; }
.wcustom .cgrip { flex-shrink: 0; display: grid; place-items: center; width: 16px; height: 24px; color: var(--muted); cursor: grab; touch-action: none; }
.wcustom .cgrip[hidden] { display: grid; visibility: hidden; }
.wcustom .cgrip svg { width: 8px; height: 13px; fill: currentColor; }
.wcustom .crow .icon { flex-shrink: 0; display: grid; place-items: center; width: 18px; }
.wcustom .crow .icon .shape { width: 14px; height: 14px; }
.wcustom .cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcustom .capp { margin-left: 6px; font-size: 12px; color: var(--muted); }
.wcustom .cswitch { flex-shrink: 0; position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--chip); transition: background 120ms; }
.wcustom .cswitch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 7px; background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 120ms; }
.wcustom .cswitch[aria-checked="true"] { background: var(--teal-ink); }
.wcustom .cswitch[aria-checked="true"]::after { transform: translateX(12px); }
.wcustom .cswitch:focus-visible, .wcustom .cgrip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.widgetfoot .customize { display: inline-flex; align-items: center; gap: 6px; }
.widgetfoot .customize svg { width: 14px; height: 14px; }
.wcard .wbody { position: relative; margin: 2px 0 1px; }
.wcard:not(.open) .wbody { display: none; }
/* The widget's page insets itself 2px at the top and 4px elsewhere, for its focus rings and
   shadows; the frame reaches out as far, so its content lines up with the head. */
.wcard .wbody iframe { display: block; width: calc(100% + 8px); height: 24px; margin: -2px -4px -4px; border: 0; background: transparent; color-scheme: light dark; }
.wcard .skel, .wcard .broken { display: none; flex-direction: column; gap: 6px; padding: 4px 0; }
.wcard[data-state="loading"] .skel, .wcard[data-state="broken"] .broken { display: flex; }
.wcard[data-state="loading"] iframe, .wcard[data-state="broken"] iframe { position: absolute; visibility: hidden; }
.wcard .skel i { display: block; width: 85%; height: 10px; border-radius: 4px; background: var(--soft); animation: shimmer 1.4s ease-in-out infinite; }
.wcard .skel i:last-child { width: 50%; }
@keyframes shimmer { 50% { opacity: 0.5; } }
.wcard .broken { color: var(--bad); font-size: 13px; text-align: left; }
.widgetpanel.stale .wbody iframe { filter: grayscale(1); opacity: 0.6; }
.widgetnote { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.widgetfoot { display: flex; gap: 14px; padding: 2px 4px; }
.widgetfoot button { font-size: 12px; color: var(--muted); }
.widgetfoot button:hover { color: var(--ink); }
.widgetsnone { padding: 4px 4px 6px; color: var(--muted); font-size: 13px; }
.widgetpick { padding: 6px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); font-size: 13px; }
.widgetpick .head { padding: 4px 6px 6px; font-weight: 600; }
.widgetpick .app { display: flex; align-items: center; gap: 6px; padding: 8px 6px 2px; color: var(--muted); font-size: 12px; }
.widgetpick .app .icon .shape { width: 14px; height: 14px; }
.widgetpick .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 30px; padding: 2px 6px; border-radius: 6px; }
.widgetpick .row:hover { background: var(--soft); }
.widgetpick .row .name { flex: 1; min-width: 100px; }
.widgetpick .row .btn { height: 24px; padding: 0 8px; font-size: 11px; }
.dockapp .icon svg { width: 20px; height: 20px; color: var(--ink); }
.dockapp[aria-pressed="true"] .icon svg { color: var(--bg); }
.history { position: absolute; inset: 0; overflow-y: auto; padding: 0 14px 18px; background: var(--card); }
.history .tabs { position: sticky; top: 0; z-index: 1; display: flex; gap: 4px; margin: 0 -14px 10px; padding: 0 14px; background: var(--card); border-bottom: 1px solid var(--rule); }
.history .tabs button { height: 38px; padding: 0 10px; border-bottom: 2px solid transparent; font: 12px/1.5 var(--mono); letter-spacing: 0.015em; text-transform: uppercase; color: var(--muted); }
.history .tabs button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
.history .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.history .row:first-of-type { border-top: 0; }
.history .row .main { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.history .row .sub { color: var(--muted); font-size: 12px; }
.history .row .btn { height: 26px; padding: 0 8px; font-size: 11px; }
.history .batch { margin: 10px 0 0; padding: 4px 0 0 10px; border-left: 2px solid var(--teal); }
.history .batchhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.history .batchhead .btn { height: 26px; padding: 0 8px; font-size: 11px; }
.history .version { margin: 0 0 10px; padding: 10px 12px; border-radius: 6px; box-shadow: var(--ring); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.history .version.live { background: var(--soft); }
.history .version .top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.history .version .v { font: 500 13px var(--mono); }
.history .version .state { padding: 0 6px; border-radius: 3px; background: var(--chip); font: 10.5px/18px var(--mono); text-transform: uppercase; }
.history .version.live .state { background: var(--teal); color: #000; }
.history .version .state.proposed, .history .version .state.draft { background: var(--sky); color: var(--ink); }
.history .version .when { margin-left: auto; font-size: 12px; color: var(--muted); }
.history .version .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.history .version .btn { height: 26px; padding: 0 8px; font-size: 11px; }
.history pre.diff { margin: 0; max-height: 360px; overflow: auto; padding: 8px; border-radius: 4px; background: var(--soft); font: 11.5px/1.45 var(--mono); white-space: pre; }
.history pre.diff .add { color: var(--teal-ink); }
.history pre.diff .del { color: var(--bad); }
.history .note { margin: 6px 0 12px; font-size: 13px; color: var(--muted); }
.history h3 { margin: 16px 0 4px; font: 12px/1.5 var(--mono); letter-spacing: 0.015em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.history .foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 720px) {
  #rail { position: fixed; inset: 0; z-index: 30; max-width: none; border-left: 0; }
  #rail .grip { display: none; }
  #rail .widebtn { display: none; }
}
/* Threads: the history as its topics, one row each, opening its messages. */
.threads { display: flex; flex-direction: column; margin: 0 -10px 8px; }
.thread { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 9px 10px 10px 30px; border-radius: 6px; text-align: left; position: relative; }
.thread:hover { background: var(--soft); }
.thread .top { display: flex; align-items: baseline; gap: 10px; }
.thread .topic { flex: 1; min-width: 0; font-weight: 500; letter-spacing: -0.01em; }
.thread .count { flex-shrink: 0; font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.thread .gist { font-size: 14px; color: var(--muted); }
.thread .dot { position: absolute; left: 11px; top: 16px; }
.dot { flex-shrink: 0; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; background: var(--muted); opacity: 0.6; }
[data-kind="open"] .dot { background: transparent; border: 2px solid var(--teal-ink); opacity: 1; }
[data-kind="asked"] .dot, [data-kind="asks_you"] .dot { background: var(--lilac-ink); opacity: 1; }
[data-kind="decided"] .dot { background: var(--teal); opacity: 1; }
[data-kind="note"] .dot { background: transparent; border: 1.5px solid var(--muted); }
.thread[aria-expanded="true"] { background: var(--soft); }
.threadbody { margin: 4px 0 12px 20px; padding: 6px 0 0 12px; border-left: 2px solid var(--rule); }
.threadwait { margin-bottom: 10px; color: var(--muted); font: 12px var(--mono); }
.threadclose { margin: 0 0 4px; color: var(--muted); font: 11.5px/18px var(--mono); text-transform: uppercase; letter-spacing: 0.015em; }
.threadclose:hover { color: var(--ink); }
.threadsolo { padding: 6px 10px 8px 30px; }
@media (max-width: 720px) { .threadsolo { padding-left: 24px; } }
.threadfoot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px 0 30px; font-size: 12.5px; color: var(--muted); }
.threadfoot button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
@media (max-width: 720px) {
  .threads { margin: 0 -6px 6px; }
  .thread { padding: 7px 6px 8px 24px; }
  .thread .dot { left: 7px; top: 14px; }
  .thread .topic, .thread .gist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .thread .gist { font-size: 13.5px; }
  .thread .when { display: none; }
  .threadfoot { padding-left: 24px; }
}
.kind { flex-shrink: 0; align-self: center; padding: 0 5px; border-radius: 3px; font: 10px/17px var(--mono); letter-spacing: 0.015em; text-transform: uppercase; white-space: nowrap; }
.catchbar .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.catchbar .topic { font-weight: 500; letter-spacing: -0.01em; }
.catchbar .gist { font-size: 13px; color: var(--muted); }
.catchbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 -10px 10px; padding: 8px 10px; border-radius: 6px; background: var(--card); box-shadow: var(--lift); font-size: 14px; }
.catchbar .what { min-width: 200px; }
.catchbar .nav { display: flex; align-items: center; gap: 4px; font: 12px var(--mono); color: var(--muted); }
.catchbar .btn { height: 30px; }
.catchgap { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; color: var(--muted); font: 11.5px/18px var(--mono); text-transform: uppercase; letter-spacing: 0.015em; }
.catchgap::before, .catchgap::after, .dayrule::before, .dayrule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.catchgap:hover { color: var(--ink); }
.item.drawnon { padding-left: 10px; border-left: 2px solid var(--lilac); }
.item mark { background: #fff1a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.dayrule { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; color: var(--muted); font: 11px/18px var(--mono); text-transform: uppercase; letter-spacing: 0.015em; }
/* Who is at work, pinned flush to the top of the list while their turns are out of view: on the
   page's ground, which fades out below the rows so what scrolls under it does too. */
#working {
  position: sticky;
  top: calc(-1 * var(--logtop));
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  max-width: var(--measure);
  margin: calc(-1 * var(--logtop)) 0 0;
  padding: calc(var(--logtop) + 4px) 0 34px;
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg) calc(100% - 24px), transparent);
  pointer-events: none;
}
#working .working-row { pointer-events: auto; }
#working.empty { visibility: hidden; height: 0; padding: 0; margin: 0; }
#working .caps { color: var(--muted); font-size: 11px; }
.working-row { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 8px; border-radius: 3px; background: var(--soft); font-size: 13px; max-width: 100%; }
.working-row span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.working-row:hover { background: var(--chip); }

.peek {
  position: fixed;
  z-index: 20;
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--lift);
  overflow: hidden;
  animation: rise 100ms ease-out;
}
.peek-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--rule); }
.peek-head b { font-weight: 500; letter-spacing: -0.01em; }
.peek-body { max-height: 220px; overflow: auto; padding: 8px 12px 10px; font: 12px/1.6 var(--mono); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.peek-body .note { color: var(--teal-ink); }
.body { white-space: pre-wrap; overflow-wrap: anywhere; }
a.out { color: var(--teal-ink); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a.out:hover { text-decoration-color: currentColor; }
a.out::after { content: "↗"; margin-left: 1px; font-size: 0.8em; vertical-align: 0.15em; }
.said { overflow-wrap: anywhere; }
.said p, .said ul, .said ol, .said pre, .said h3 { margin: 0 0 6px; }
.said h3 { font-size: 15px; font-weight: 500; }
.said ul, .said ol { padding-left: 22px; }
.said code, .body code { font: 13px/1.5 var(--mono); background: var(--soft); padding: 1px 4px; border-radius: 3px; }
.said pre, .body pre { font: 13px/1.5 var(--mono); background: var(--soft); padding: 10px 12px; border-radius: 4px; overflow-x: auto; white-space: pre; }
.said pre code, .body pre code { background: none; padding: 0; }
.body pre { margin: 4px 0; }
/* Kirari's token classes, in the colours above. */
.kirari .kirari-keyword, .kirari .kirari-tag { color: var(--kirari-keyword); }
.kirari .kirari-type, .kirari .kirari-attribute { color: var(--kirari-type); }
.kirari .kirari-function, .kirari .kirari-property, .kirari .kirari-heading { color: var(--kirari-function); }
.kirari .kirari-string, .kirari .kirari-inserted { color: var(--kirari-string); }
.kirari .kirari-number, .kirari .kirari-boolean, .kirari .kirari-null, .kirari .kirari-regex, .kirari .kirari-entity { color: var(--kirari-number); }
.kirari .kirari-comment { color: var(--kirari-comment); font-style: italic; }
.kirari .kirari-punctuation, .kirari .kirari-operator { color: var(--kirari-punctuation); }
.kirari .kirari-deleted { color: var(--bad); }
.said .table { max-width: 100%; margin: 2px 0 8px; overflow-x: auto; border-radius: 4px; box-shadow: var(--ring); }
.said table { border-collapse: collapse; font-size: 14px; line-height: 1.45; overflow-wrap: normal; }
.said th, .said td { padding: 6px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.said th { border-top: 0; background: var(--soft); font-weight: 500; white-space: nowrap; }
.said td { min-width: 4em; }
.said td:last-child, .said th:last-child { min-width: 14em; }
/* A diagram, drawn by Pele in Tand's colors, so it follows light and dark. One wider than the
   chat scrolls sideways in its own box. */
.said .diagram {
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 8px;
  padding: 8px 12px;
  overflow-x: auto;
  border-radius: 4px;
  background: var(--card);
  box-shadow: var(--ring);
  --pele-bg: var(--card);
  --pele-fg: var(--ink);
  --pele-muted: var(--muted);
  --pele-line: var(--muted);
  --pele-surface: var(--soft);
  --pele-surface-alt: color-mix(in srgb, var(--ink) 8%, var(--soft));
  --pele-border: var(--rule);
  --pele-accent: var(--teal-ink);
  --pele-critical: var(--bad);
  --pele-error: var(--bad);
  --pele-font: var(--sans);
  --pele-font-mono: var(--mono);
}
.said .diagram svg { display: block; }
/* A question waits on a field of its own, corner cut. */
.ask {
  width: fit-content;
  margin: 6px 0;
  padding: 10px 26px 10px 14px;
  background: var(--lilac);
  color: var(--lilac-ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.err { color: var(--bad); }
.foldrow { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.fold { display: flex; gap: 8px; min-width: 0; color: var(--muted); text-transform: none; }
.fold .line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold:hover .line { color: var(--ink); }
.fold .cursor { flex-shrink: 0; width: 7px; height: 14px; margin-top: 2px; background: var(--teal); }
.stop { height: 24px; }
.stop:hover { color: var(--bad); }
/* Stopping takes a second, deliberate click. */
.stop.armed { background: var(--bad); color: var(--on-bad); box-shadow: none; }
.stop.armed:hover { color: var(--on-bad); opacity: 0.9; }
/* An agent's work, shown as the window it happened in. */
/* An agent's work, opened under its turn: just the stream, set off by a quiet field. */
.win { margin-top: 6px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.tty {
  padding: 10px 12px;
  font: 12.5px/1.6 var(--mono);
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tty .note { color: var(--teal-ink); }
/* An agent's own terminal, streamed as it runs. Always dark: harnesses colour for a dark screen. */
.win.term { max-width: 100%; margin-top: 8px; border-radius: 8px; background: #0c0c0c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); --bar: rgba(255, 255, 255, 0.2); --bar-on: rgba(255, 255, 255, 0.4); }
.screen { padding: 10px; overflow-x: auto; min-height: 120px; color: #9a9a95; font: 12px/1.5 var(--mono); }
/* Opened inside a working card: the card's middle, edge to edge, between its head and its foot. */
.task .win { margin: 0; border-radius: 0; border-top: 1px solid var(--rule); box-shadow: none; }
.task .win + .task-foot { margin-top: 0; }
.screen .xterm { padding: 0; }
.screen .xterm-viewport { scrollbar-width: thin; scrollbar-color: var(--bar) transparent; }
.screen .xterm-viewport::-webkit-scrollbar-thumb { background-color: var(--bar); }
#older { color: var(--muted); text-align: center; padding-bottom: 14px; }
#empty { color: var(--muted); padding-top: 18vh; font-size: 22px; letter-spacing: -0.01em; line-height: 1.25; max-width: 18em; }

/* Bringing people and agents in (invite.js): the welcome card of an empty chat, the bar above the
   chat while the team has no agent, the header's Add an agent, and the invite sheet. */
.welcome { padding: 8vh 0 24px; max-width: 620px; }
.welcome .kicker { font: 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.015em; color: var(--muted); }
.welcome h2 { margin: 6px 0 10px; font-size: 30px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.12; }
.welcome .lede { margin: 0 0 22px; color: var(--muted); font-size: 16px; max-width: 34em; }
.setup { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: var(--card); box-shadow: var(--lift); overflow: hidden; }
.setup li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 60px; border-top: 1px solid var(--rule); }
.setup li:first-child { border-top: 0; }
.setup .mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--mono); background: var(--soft); color: var(--muted); }
.setup li.done .mark { background: var(--teal); color: #fff; }
.setup li.done .name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule); }
.setup .name { flex: 1; min-width: 0; font-size: 16px; letter-spacing: -0.01em; }
.setup .btn { flex: none; min-width: 84px; justify-content: center; }
.welcome .later { margin-top: 14px; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

#navsetup { margin: 14px 12px 4px; padding: 14px; border-radius: 12px; background: var(--sky); }
#navsetup[hidden] { display: none; }
#navsetup .setuphead b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
#navsetup .setuphead span { display: block; color: var(--muted-sky); font-size: 13px; margin-top: 2px; }
#navsetup .setupacts { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
#navsetup .btn { justify-content: center; width: 100%; }
#navsetup .btn:not(.solid) { background: var(--card); }
#navsetup .btn:disabled { opacity: 0.6; }
#navsetup .later { display: block; margin: 10px auto 0; font-size: 12.5px; color: var(--muted-sky); text-decoration: underline; text-underline-offset: 3px; }
#noagents { display: flex; align-items: center; gap: 12px; margin: 12px 28px 0; padding: 12px 14px; border-radius: 12px; background: var(--sky); flex: none; }
#noagents[hidden] { display: none; }
#noagents .words { flex: 1; min-width: 0; font-size: 14px; color: var(--muted-sky); }
#noagents .words b { color: var(--ink); font-weight: 500; }
#noagents .btn { flex: none; }
.inviteico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--card); color: var(--ink); box-shadow: var(--ring); }
.inviteico svg { width: 18px; height: 18px; }

#with .addagent { height: 30px; padding: 0 12px; gap: 6px; font: 500 13px/1 var(--sans); text-transform: none; letter-spacing: 0; }
#with .addagent .plus { font-size: 16px; line-height: 1; margin-top: -1px; }
.navbtn.invitenav { color: var(--ink); font-weight: 500; }

.invitebody .invitepart { padding: 20px 0 18px; border-bottom: 1px solid var(--rule); }
.invitebody .invitepart:last-child { border-bottom: 0; }
.invitehead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.invitehead h3 { margin: 0; font: 400 20px/1.2 var(--sans); letter-spacing: -0.015em; color: var(--ink); text-transform: none; }
.invitebody p { margin: 0 0 12px; }
.inviteacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.inviteshown:not(:empty) { margin-top: 12px; }
.inviteway { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--soft); }
.inviteway .waytitle { font-weight: 500; font-size: 14px; margin-bottom: 4px; }
.inviteway p { font-size: 13.5px; }
.inviteway .cli { max-width: none; background: var(--card); }
.handoff-text { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; background: var(--card); box-shadow: var(--ring); color: var(--ink); }
.madeacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.madeacts .copied { color: var(--teal-ink); font-size: 13px; }
.invitemore { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.invitemore:hover { color: var(--ink); }
@media (max-width: 720px) {
  .welcome { padding-top: 4vh; }
  .welcome h2 { font-size: 25px; }
  .setup li { flex-wrap: wrap; }
  #noagents { margin: 8px 12px 0; flex-wrap: wrap; }
  #noagents .btn { width: 100%; justify-content: center; }
  #with .addagent { height: 28px; padding: 0 10px; }
}

#send { padding: 8px 28px calc(16px + env(safe-area-inset-bottom)); }
/* A notice sits just above the box: errors stay until dismissed, other news fades. */
#note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: var(--measure);
  margin: 0 0 8px;
  padding: 8px 6px 8px 12px;
  border-radius: 4px;
  background: var(--soft);
  font-size: 13px;
  line-height: 1.45;
  animation: rise 140ms ease-out;
}
#note .glyph {
  flex: 0 0 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 700 10px/13px var(--mono);
  text-align: center;
}
#note .text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#note .close { flex-shrink: 0; width: 20px; height: 20px; margin: -2px 0; border-radius: 3px; text-align: center; color: inherit; opacity: 0.6; }
#note .close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
#note.bad { background: var(--bad-soft); color: var(--bad); }
.compose {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: var(--measure);
  padding: 6px;
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--ring);
  transition: box-shadow 120ms, background-color 120ms;
}
.compose:focus-within { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px var(--chip); }
.compose.offline { background: var(--soft); }
#box {
  flex: 1;
  min-width: 0;
  min-height: 30px;
  max-height: 40vh;
  resize: none;
  padding: 5px 8px;
  border: 0;
  background: none;
  line-height: 1.35;
  outline: none;
}
/* Who or what to complete: agents after @, commands after /. */
#suggest {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  width: min(340px, 100%);
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--lift);
  animation: rise 100ms ease-out;
}
#suggest .head { padding: 4px 8px 6px; color: var(--muted); font: 11px/1.5 var(--mono); letter-spacing: 0.015em; text-transform: uppercase; }
#suggest li[role="option"] { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 4px; cursor: pointer; }
#suggest li[aria-selected="true"] { background: var(--soft); }
#suggest .k { font-weight: 500; white-space: nowrap; }
#suggest .d { min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Beside the name only on a phone: the team button and what waits on you. */
.navtop { display: contents; }
#teamtop, #waiting { display: none; }
#sendbtn .ico { display: none; }

/* A phone: one screen at a time, sized for a thumb. */
@media (max-width: 720px) {
  nav { flex-basis: 100%; border-right: 0; padding: 0; gap: 0; }
  #chan { display: none; }
  #app.open nav { display: none; }
  #app.open #chan { display: flex; }

  /* The channels: the team on its sky field, then the list, then the two ways to begin, at the foot. */
  .navtop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 14px 12px 18px 20px; background: var(--sky); }
  nav .navtop .brand { width: auto; height: 44px; margin: 0; padding: 0; gap: 9px; font-size: 26px; }
  nav button.brand:hover { background: none; }
  nav .brand .caret { margin-left: 0; padding-left: 0; color: var(--muted-sky); }
  nav .navtop .brand { justify-self: start; max-width: 100%; }
  #teamtop { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: rgba(255, 255, 255, 0.55); }
  #waiting { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted-sky); }
  #waiting::before { content: ""; width: 8px; height: 8px; background: var(--lilac); box-shadow: 0 0 0 1px var(--lilac-ink); }
  nav h2 { padding: 18px 20px 6px; }
  #chans, #dms { display: flex; flex-direction: column; padding: 0 10px; }
  .chan { min-height: 64px; padding: 10px; border-radius: 6px; }
  .chan .name { font-size: 16px; }
  .chan .last { font-size: 14px; }
  .chan[aria-current="true"] .name { text-decoration: none; }
  #dms .chan { min-height: 56px; }
  #dmhead { margin-top: 8px; }
  /* A question waiting on you takes the whole row, on the asking field with its corner cut. */
  .chan.asking, .chan.asking:hover { background: var(--lilac); color: var(--lilac-ink); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
  .chan.asking .name { font-weight: 600; }
  .chan.asking .hash { color: inherit; opacity: 0.6; }
  .chan.asking .when, .chan.asking .last { color: inherit; }
  .chan.asking .when::before { content: "Asks you · "; }
  .chan.asking .dot { display: none; }
  .navfoot { position: sticky; bottom: 0; z-index: 2; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); }
  .navfoot > #installhint, .navfoot > #newform { flex-basis: 100%; margin: 0; }
  #teambtn { display: none; }
  #newbtn, #invite { flex: 1 1 0; justify-content: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 6px; background: var(--card); box-shadow: var(--ring); color: var(--ink); }
  #newbtn { background: var(--ink); color: var(--bg); box-shadow: none; }
  #invite { flex-direction: row-reverse; }
  #invite .arrow { display: none; }

  /* A chat: back, then its name with its agents under it, on the sky field; the apps at the right. */
  header { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back title apps" "back with apps"; align-items: start; column-gap: 2px; height: auto; padding: 8px 12px 8px 6px; background: var(--sky); }
  header .hash { color: var(--muted-sky); }
  #tabs, header .spacer { display: none; }
  .titlebox { grid-area: title; align-self: start; flex-shrink: 1; padding-top: 6px; }
  #link { color: var(--muted-sky); font-size: 10.5px; }
  .agentchip { background: rgba(255, 255, 255, 0.55); }
  .agentchip.idle { background: none; color: var(--muted-sky); }
  #back { grid-area: back; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; box-shadow: none; }
  #back .ico svg { width: 22px; height: 22px; }
  header h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 26px; font-weight: 400; letter-spacing: -0.02em; }
  #with { grid-area: with; min-height: 44px; gap: 12px; }
  #with button.tag { position: relative; padding: 0 6px; font-size: 11px; line-height: 20px; }
  #with button.tag::after { content: ""; position: absolute; inset: -12px -6px; }
  #appsbtn { grid-area: apps; width: 44px; height: 44px; margin: 2px 0 0; background: rgba(255, 255, 255, 0.55); }
  #appsbtn svg { width: 20px; height: 20px; }

  #log { --logtop: 16px; padding: var(--logtop) 20px 8px; font-size: 16px; }
  /* An app's card: its name and what it is for take the width, its buttons a row of their own. */
  .appcard { gap: 12px; padding: 14px; }
  .appcard .text { flex-basis: calc(100% - 52px); }
  .appcard .sub { font-size: 14px; }
  .appcard .acts { flex: 1 0 100%; margin-left: 0; }
  .appcard .acts .btn { flex: 1; justify-content: center; height: 44px; }
  .item { margin-bottom: 20px; }
  .who { font-size: 15px; }
  #send { padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
  .compose { padding: 4px 4px 4px 14px; border-radius: 10px; }
  #box { min-height: 44px; padding: 11px 0; font-size: 16px; line-height: 22px; }
  #sendbtn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 8px; }
  #sendbtn .label, #sendbtn kbd { display: none; }
  #sendbtn .ico { display: grid; }
  #sendbtn .ico svg { width: 20px; height: 20px; }

  /* An app: back to its channel above the tabs, and the ⋯ beside the open one's name. */
  .railtabs { flex-wrap: wrap; padding: 4px 8px 0 6px; overflow-x: visible; }
  .railtabs .back { order: -1; flex: 1 0 100%; display: flex; align-items: center; gap: 2px; width: auto; height: 44px; margin: 0 0 6px; padding: 0 10px 0 0; color: var(--ink); font-size: 16px; letter-spacing: -0.01em; text-align: left; }
  .railtabs .back:hover { background: none; }
  .railtabs .back .ico { width: 44px; height: 44px; }
  .railtabs .back .ico svg { width: 22px; height: 22px; }
  .railtabs .back .hash { color: var(--muted); }
  .railtab { height: 44px; font-size: 15px; }
  .railtab .name { padding: 0 14px; }
  .railtab .more { width: 44px; height: 44px; margin-right: 0; }
}
@media (max-width: 720px) and (prefers-color-scheme: dark) {
  #teamtop { background: rgba(255, 255, 255, 0.08); }
}

/* On a phone, installed or not: clear of the notch and the home bar, no zooming into fields, no
   tap flashes or long-press menus on controls, and no rubber-banding of the whole app. */
html, body { overscroll-behavior: none; }
#app { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
#door, #gate {
  padding-top: calc(clamp(20px, 6vw, 72px) + env(safe-area-inset-top));
  padding-right: calc(clamp(20px, 6vw, 72px) + env(safe-area-inset-right));
  padding-bottom: calc(clamp(20px, 6vw, 72px) + env(safe-area-inset-bottom));
  padding-left: calc(clamp(20px, 6vw, 72px) + env(safe-area-inset-left));
}
button, a, label, .chan { -webkit-tap-highlight-color: transparent; }
button, .navbtn, .tag, .kind, kbd { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px; }
  /* Room for a thumb: nothing to tap is under 44px tall. */
  .btn, .navbtn { min-height: 44px; }
  .choice { padding: 0 16px; font-size: 15px; }
  .fold { align-items: center; min-height: 44px; }
}
@media (max-width: 720px) {
  #rail { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
#installhint { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 10px 10px 10px 12px; border-radius: 6px; background: var(--sky); font-size: 13px; line-height: 1.45; }
#installhint .text { flex: 1; min-width: 0; }
#installhint .share { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; }
#installhint .close { flex-shrink: 0; width: 28px; height: 28px; margin: -4px -4px 0 0; border-radius: 4px; text-align: center; color: var(--muted); }

/* The phone, in the wide screen's style: no sky fields; the team's menu at the top of the list and +
   beside Channels; a lean header with the channel's views as a row of tabs under it; and apps and
   widgets as a sheet over the chat, the chat dimmed behind it. */
@media (max-width: 720px) {
  .navtop { background: none; padding: 10px 10px 6px 12px; }
  nav .navtop .brand { height: 44px; font-size: 22px; }
  #teamtop { display: none !important; }
  .navfoot > #newbtn, .navfoot > #teambtn, .navfoot > #invite { display: none !important; }
  .navfoot:not(:has(> :not([hidden]):not(#newbtn):not(#teambtn):not(#invite))) { display: none; }
  .navhead h2 { padding: 14px 20px 6px; }
  #addchan { width: 44px; height: 36px; margin: 6px 6px 0 0; }
  #addchan svg { width: 16px; height: 16px; }
  #newform { margin: 0 12px 8px; }

  header { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "back title with apps" "tabs tabs tabs tabs"; align-items: center; column-gap: 2px; padding: 2px 6px 0 2px; background: var(--bg); border-bottom: 1px solid var(--rule); }
  header .hash { color: var(--muted); }
  header h2 { align-self: center; padding: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
  .titlebox { align-self: center; padding-top: 0; margin-right: 0; }
  #back { align-self: center; }
  #with { grid-area: with; min-height: 0; gap: 6px; justify-content: flex-end; }
  /* Room for the channel's name: an agent's chip is its name and its state's colour; the rest is
     its title, and in the chat. */
  .agentchip { max-width: 110px; height: 28px; padding: 0 8px; background: var(--soft); }
  .agentchip .what { display: none; }
  .agentchip .name { overflow: hidden; text-overflow: ellipsis; }
  #with { max-width: 46vw; overflow: hidden; }
  .agentsbtn { display: none; }
  #appsbtn { align-self: center; width: 44px; height: 44px; margin: 0; background: none; }
  #appsbtn[aria-pressed="true"] { background: var(--chip); }
  #tabs { grid-area: tabs; display: flex; height: 42px; margin: 0 -6px 0 -2px; padding: 0 8px; }
  .htab { padding: 0 10px; font-size: 14px; }
  .htab[aria-selected="true"]::after { left: 10px; right: 10px; }
  #link { color: var(--muted); }

  #rail { top: calc(env(safe-area-inset-top) + 10px); padding: 0 0 env(safe-area-inset-bottom); border-radius: 16px 16px 0 0; background: var(--card); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.28), 0 -4px 24px rgba(0, 0, 0, 0.12); overflow: hidden; }
  #rail .railtabs.slim { flex-wrap: nowrap; height: 52px; padding: 0 4px 0 18px; }
  #rail .railtabs .cname { font-size: 16px; font-weight: 500; color: var(--ink); }
  #rail .railtabs .rb { width: 44px; height: 44px; }
  #rail .railtabs .rb .ico, #rail .railtabs .rb .ico svg { width: 20px; height: 20px; }
  #rail .railbody { background: var(--card); }
  .widgetpanel { padding: 2px 14px 24px; }
}

/* Attached files (files.js): the button and what is chosen, above the box; images and file cards in
   the chat; the chat as a drop target. */
.compose .attach { flex: none; width: 32px; height: 32px; padding: 0; justify-content: center; box-shadow: none; color: var(--muted); }
.compose .attach:hover { color: var(--ink); }
.compose .attach svg { width: 18px; height: 18px; }
#attached { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--measure); margin: 0 0 8px; }
#attached[hidden] { display: none; }
.pendingfile { display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 5px 6px 5px 5px; border-radius: 8px; background: var(--card); box-shadow: var(--ring); }
.pendingfile img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; flex: none; }
.pendingfile .ext, .filecard .ext { flex: none; width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: var(--soft); font: 600 10px/1 var(--mono); color: var(--muted); letter-spacing: 0.02em; }
.pendingfile .words, .filecard .words { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pendingfile .name, .filecard .name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pendingfile .size, .filecard .size { font: 11.5px/1.3 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pendingfile .x { flex: none; width: 22px; height: 22px; border-radius: 5px; text-align: center; color: var(--muted); font-size: 16px; line-height: 22px; }
.pendingfile .x:hover { background: var(--soft); color: var(--ink); }
.pendingfile.sending { opacity: 0.6; }
.pendingfile.failed { box-shadow: 0 0 0 1px var(--bad); }

.fileitem { margin-bottom: 10px; }
.fileitem + .item.caption { margin-top: -4px; }
.item.caption > .who { display: none; }
.fileimage { display: inline-block; margin-top: 4px; border-radius: 10px; overflow: hidden; box-shadow: var(--ring); background: var(--soft); line-height: 0; max-width: 100%; }
.fileimage img { display: block; max-width: 100%; height: auto; }
.fileimage img:not([width]) { max-width: min(360px, 100%); max-height: 300px; }
.filecard { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 14px 10px 10px; max-width: min(420px, 100%); border-radius: 10px; background: var(--card); box-shadow: var(--ring); text-decoration: none; color: inherit; }
.filecard:hover { box-shadow: var(--lift); }
.filecard .words { flex: 1; }
.filecard .name { font-size: 14px; font-weight: 500; }
.filecard .get { flex: none; font: 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.015em; color: var(--muted); }
main.dropping { box-shadow: inset 0 0 0 2px var(--teal); background: color-mix(in srgb, var(--teal) 6%, transparent); }

/* A choice of two or three, side by side (the app kit's .seg, for Tand's own sheets). */
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--soft); }
.seg > button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 500 13px/1.3 var(--sans); cursor: pointer; white-space: nowrap; }
.seg > button:hover { color: var(--ink); }
.seg > button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--ring); }
@media (pointer: coarse) { .seg > button { min-height: 40px; } }