/* vlipa studio — the company workspace. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:        #ffffff;
  --tint:      #f5f4fc;
  --tint-2:    #edecf9;
  --ink:       #0b0a1a;
  --text:      #101014;
  --muted:     #62626f;
  --faint:     #9a9aa6;
  --line:      #e6e5ef;
  --line-2:    #d7d5ea;
  --brand:     #3532f6;
  --brand-2:   #6b4dff;
  --ok:        #17845a;
  --warn:      #b7791f;
  --danger:    #c8372d;
  --ease:      cubic-bezier(.22, .78, .28, 1);
  --side:      256px;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
p { margin: 0; }
button { font: inherit; }
a { color: var(--brand); }

.app { display: flex; height: 100%; }

/* ---------- sidebar ---------- */

.side {
  width: var(--side);
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--tint);
}

.side__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 12px;
}

/* The company picker is not part of that line: it takes the width under it. */
.copicker { grid-column: 1 / -1; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand img { width: 22px; height: 22px; border-radius: 7px; }

.copicker { display: grid; gap: 8px; }

.copick {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.rolebadge {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tint-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rolebadge--owner { background: rgba(53, 50, 246, .12); color: var(--brand); }
.rolebadge--admin { background: rgba(23, 132, 90, .12); color: var(--ok); }
.rolebadge--guest { background: #f0f0f4; color: var(--faint); }

.nav { flex: 1; display: grid; align-content: start; gap: 2px; padding: 8px 10px; overflow-y: auto; }

.navitem {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: none;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}

.navitem:hover { background: #fff; color: var(--text); }
.navitem[aria-current='true'] { background: #fff; border-color: var(--line-2); color: var(--brand); font-weight: 600; }
.navitem__ico { display: grid; place-items: center; width: 18px; height: 18px; }
.navitem__ico svg { width: 18px; height: 18px; }

.side__foot { display: grid; gap: 10px; padding: 12px 14px 16px; border-top: 1px solid var(--line); }
.me { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12.5px; }
.me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ghostlink {
  padding: 3px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.ghostlink:hover { background: var(--tint-2); color: var(--brand); }
.ghostlink--bad:hover { background: #fdf2f1; color: var(--danger); }

/* ---------- main column ---------- */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.mainbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px clamp(14px, 3vw, 26px);
  border-bottom: 1px solid var(--line);
}

.mainbar h1 { font-size: 19px; font-weight: 700; }
.mainbar__co { margin-left: auto; color: var(--faint); font-size: 13px; }

.burger {
  display: none;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.burger svg { width: 18px; height: 18px; }

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(16px, 2.5vw, 26px) clamp(14px, 3vw, 26px) 40px;
  overflow-y: auto;
}

/* ---------- shared bits ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.btn:hover { background: #2320c9; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn--ghost { background: #fff; border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { background: var(--tint); border-color: var(--brand); color: var(--brand); }
.btn--danger { background: #fff; border-color: rgba(200, 55, 45, .4); color: var(--danger); }
.btn--danger:hover { background: #fdf2f1; border-color: var(--danger); }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn--lg { min-height: 46px; padding: 0 26px; font-size: 15px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.toolbar--sub { padding-top: 4px; }
.toolbar h3 { font-size: 17px; }
.spread { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.grow { margin-left: auto; }
.muted { color: var(--muted); }
.block { display: block; }
.footnote { color: var(--faint); font-size: 12.5px; }
.sectionhead { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.sectionhead .ghostlink { margin-left: auto; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.tabs button {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}

.tabs button:hover { border-color: var(--brand); color: var(--brand); }
.tabs button.is-on { background: rgba(53, 50, 246, .1); border-color: transparent; color: var(--brand); font-weight: 600; }

.empty { padding: 26px 0; color: var(--muted); font-size: 15px; }
.empty--big { display: grid; gap: 12px; place-items: start; margin: auto 0; padding: 40px 0; }
.empty--big h3 { font-size: 20px; color: var(--text); }

.card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.card h4 { font-size: 15.5px; font-weight: 600; }
.card p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

/* ---------- faces ---------- */

/* Somebody's picture where their name is; their initial on a colour worked
   out from the name where there is no picture. */
.face {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 999px;
  object-fit: cover;
}

.face--letter { color: #fff; font-weight: 600; line-height: 1; }

.person { display: flex; align-items: center; gap: 10px; }

/* A person you can open. Left-aligned and unstyled otherwise, because it sits
   in a table cell and should read as the name, not as a button. */
.person--open { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.person--open:hover b { color: var(--brand); text-decoration: underline; }
.person__card.is-open { cursor: pointer; }
.person__card.is-open:hover { border-color: var(--brand); }
.person b { font-weight: 600; }

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 10px; }

.person__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.person__card.is-you { border-color: var(--brand); }
.person__who { display: grid; gap: 2px; min-width: 0; }
.person__who b { font-size: 14.5px; font-weight: 600; }
.person__who .muted { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.person__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Not .me: that is the row at the foot of the sidebar, and narrow mode hides
   its spans — which was quietly hiding half of this card as well. */
.meform { display: flex; align-items: start; gap: 18px; flex-wrap: wrap; }
.facepick { flex: none; }
.meform__side { display: grid; gap: 10px; flex: 1; min-width: 240px; }
.meform__side .muted { font-size: 12.5px; }

/* ---------- a trend over time ---------- */

/* One series over days: an area chart with a crosshair. No legend — there is
   one colour, and the card's heading says what is plotted. */

.trend { display: grid; gap: 6px; margin-top: 14px; }
.trend__plate { position: relative; height: 190px; touch-action: none; }
.trend__face { display: block; width: 100%; height: 100%; }

/* Stretched to the card's width, a circle becomes an egg — the end marker is
   drawn in the box's own units and un-stretched here. */
.trend__face circle { transform-box: fill-box; transform-origin: center; }

.trend__hair {
  position: absolute;
  top: 0;
  bottom: 22px;
  width: 1px;
  background: var(--line-2);
  pointer-events: none;
}

.trend__tip {
  position: absolute;
  top: 8px;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px -16px rgba(12, 11, 40, .5);
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* The value leads; the day follows. */
.trend__tip b { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.trend__tip span { color: var(--muted); font-size: 11.5px; }

.trend__days { display: flex; justify-content: space-between; color: var(--faint); font-size: 11.5px; }

/* The number the card leads with, beside its heading. */
.hero { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hero__num { font-size: 34px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.hero__side { display: grid; gap: 1px; text-align: right; }
.hero__side span { color: var(--muted); font-size: 12px; }

/* ---------- how it is going ---------- */

/* A square per person per day, shaded by how much they finished. Dense on
   purpose: two weeks of seven people has to fit on one screen or nobody
   looks at it. */

.heat { display: grid; gap: 3px; margin-top: 12px; overflow-x: auto; }
.heat__row { display: grid; grid-template-columns: minmax(120px, 170px) repeat(var(--days, 14), minmax(18px, 1fr)) 42px; gap: 3px; align-items: center; }
.heat__row--head { color: var(--faint); font-size: 11px; }

.heat__name { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.heat__name b { overflow: hidden; font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.heat__label { text-align: center; }

.heat__cell {
  display: grid;
  place-items: center;
  height: 24px;
  border-radius: 5px;
  background: var(--tint-2);
  color: transparent;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.heat__cell.is-on { background: color-mix(in srgb, var(--ok) calc(var(--weight, 1) * 100%), var(--tint-2)); color: #fff; }
.heat__total { color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }

.chart--share { display: grid; gap: 9px; }
.share { display: grid; grid-template-columns: minmax(0, 150px) 1fr 44px auto; align-items: center; gap: 10px; }
.share--tight { grid-template-columns: 1fr 44px; min-width: 130px; }
.share__name { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.share__name b { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.share__track { height: 10px; border-radius: 99px; background: var(--tint-2); }
.share__fill { height: 10px; min-width: 2px; border-radius: 99px; background: var(--ok); }
.share__pct { color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.share__note { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }

.grid .num { font-variant-numeric: tabular-nums; text-align: right; }
.grid .num.is-late { color: var(--danger); font-weight: 600; }
.facerow { display: flex; gap: 4px; margin-top: 10px; }
.facerow .face { border: 2px solid #fff; margin-left: -6px; }
.facerow .face:first-child { margin-left: 0; }

/* ---------- the week board ---------- */

/* Seven columns, one for each day, because a task has a day it is due and
   that is how everybody already thinks about the week. Finished work stays
   where it was and goes green rather than moving to a column called Done. */

.weekbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tabs--sm button { padding: 4px 10px; font-size: 12.5px; }
.weekbar b { font-size: 15px; font-weight: 600; }
.weekbar .muted { margin-left: auto; font-size: 13px; }

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.weekday {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--tint);
  transition: background .12s var(--ease), border-color .12s var(--ease);
}

.weekday--today { border-color: var(--brand); background: rgba(53, 50, 246, .05); }
.weekday.is-over { border-color: var(--brand); background: rgba(53, 50, 246, .1); }

.weekday__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.weekday__head b { font-size: 13.5px; font-weight: 600; }
.weekday__date { display: block; color: var(--faint); font-size: 11.5px; }
.weekday__empty { min-height: 24px; }

.weekday__add {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.weekday__add:hover { border-color: var(--line-2); background: #fff; color: var(--brand); }

.daycard {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: grab;
}

.daycard.is-lifted { opacity: .4; }
.daycard--late { border-color: rgba(200, 55, 45, .4); }
.daycard--done { border-color: rgba(23, 132, 90, .35); background: rgba(23, 132, 90, .07); }
.daycard--done .daycard__top b { color: var(--ok); text-decoration: line-through; text-decoration-color: rgba(23, 132, 90, .5); }

.daycard__top { display: flex; align-items: start; gap: 8px; }
.daycard__top b { font-size: 13px; font-weight: 500; line-height: 1.4; }

.tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: 11px;
  cursor: pointer;
}

button.tick:hover { border-color: var(--ok); }
.tick.is-on { border-color: var(--ok); background: var(--ok); color: #fff; }

.daycard__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.daycard__foot .who { color: var(--muted); font-size: 11.5px; }
.daycard__foot .pill { font-size: 10.5px; }

/* Shown rather than revealed on hover: half the people using this are on a
   tablet, where there is no hover to reveal anything with. */
.daycard__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.daycard__acts .ghostlink { font-size: 11.5px; opacity: .75; }
.daycard:hover .daycard__acts .ghostlink { opacity: 1; }

.nodate { margin-top: 18px; }
.nodate h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.nodate__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }

@media (max-width: 1100px) {
  .week { grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); grid-template-columns: none; }
}

/* ---------- charts ---------- */

/* Drawn by hand in assets/js/studio/charts.js — a bar, a ring and a strip,
   which between them answer the only three questions the distribution page
   is asked: who has too much, where the work sits, how far along it is. */

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.chart__card { display: grid; align-content: start; gap: 4px; }
.chart__card--wide { grid-column: 1 / -1; }
.chart__card h3 { font-size: 15.5px; font-weight: 600; }

.chart { margin-top: 12px; }
.chart--bars { display: grid; gap: 9px; }

.bar { display: grid; grid-template-columns: minmax(0, 150px) 1fr 28px; align-items: center; gap: 12px; }
.bar__name { overflow: hidden; color: var(--text); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.bar__track { height: 12px; border-radius: 99px; background: var(--tint-2); }
.bar__fill { display: flex; height: 12px; min-width: 2px; overflow: hidden; border-radius: 99px; }
.bar__part { display: block; height: 100%; }
.bar__value { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.bar__value.is-warn { color: var(--danger); font-weight: 600; }

.ring { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 12px; }
.ring__plate { position: relative; display: grid; place-items: center; flex: none; }
.ring__face { display: block; }
.ring__middle { position: absolute; display: grid; justify-items: center; line-height: 1.15; pointer-events: none; }
.ring__middle b { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.ring__middle span { color: var(--muted); font-size: 12px; }

.ring__keys, .strip__keys { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ring__keys li, .strip__keys li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ring__keys i, .strip__keys i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.ring__keys span, .strip__keys span { color: var(--muted); }
.ring__keys b, .strip__keys b { margin-left: auto; font-variant-numeric: tabular-nums; }

.strip { display: grid; gap: 12px; margin-top: 12px; }
.strip__bar { display: flex; height: 14px; overflow: hidden; border-radius: 99px; background: var(--tint-2); }
.strip__bar span { display: block; height: 100%; }
.strip__keys { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.strip__keys b { margin-left: 6px; color: var(--text); }

/* The distribution's own counters do not go anywhere when clicked, so they
   are not buttons and should not sit up like one. */
.stat--flat { cursor: default; }
.stat--flat:hover { border-color: var(--line); transform: none; }

.card--nudge { margin-top: 14px; border-color: var(--brand); background: linear-gradient(180deg, rgba(53, 50, 246, .05), transparent); }
.card--nudge .btn { margin-top: 12px; }

.panelcard {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.panelcard--danger { border-color: rgba(200, 55, 45, .25); background: #fffafa; }
.panelcard--warn { border-color: rgba(190, 130, 20, .28); background: #fffdf5; }
.panelcard h3 { font-size: 16px; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; }
.field small { color: var(--faint); font-size: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(53, 50, 246, .12);
}

input[disabled], select[disabled] { background: var(--tint); color: var(--muted); }

/* ---------- dashboard ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }

.stat {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}

.stat:hover { border-color: var(--brand); transform: translateY(-2px); }
.stat b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.stat span { color: var(--muted); font-size: 13px; }

/* ---------- tasks ---------- */

.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.board__col { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 16px; background: var(--tint); }
.board__col h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.count { padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--faint); font-size: 11.5px; }

.task { display: grid; gap: 8px; }
.task__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task__due { color: var(--muted); font-size: 12px; }
.task__due.is-late { color: var(--danger); font-weight: 600; }
.task__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.task__foot .who { color: var(--text); font-weight: 500; }
.task__acts { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }

.pill { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pill--todo { background: #f0f0f6; color: var(--muted); }
.pill--doing { background: rgba(53, 50, 246, .12); color: var(--brand); }
.pill--review { background: rgba(183, 121, 31, .14); color: var(--warn); }
.pill--done { background: rgba(23, 132, 90, .12); color: var(--ok); }

/* ---------- tables ---------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.grid { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.grid th, .grid td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid th { color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--tint); }
.grid tr:last-child td { border-bottom: 0; }
.grid .shrink { width: 1%; white-space: nowrap; }
.rolepick,
.deptpick { min-height: 34px; padding: 5px 10px; font-size: 13.5px; }

.cols { display: grid; gap: 8px; }
.cols__row { display: grid; grid-template-columns: 1fr 130px auto; gap: 8px; align-items: center; }

.invites { display: grid; gap: 8px; }
.invite { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.invite code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: .1em; }
.rolecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* ---------- meetings ---------- */

/* The room. Before the call it holds the green room; during it, a grid of
   faces and a bar of controls — all of it ours, because the call is ours.

   Everything we own here is light. A meeting app painted black around a video
   feed looks like a broadcast desk; this one belongs to the rest of the
   studio, which is white. */
.meetstage { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.meetstage.is-live { border-color: var(--line-2); }

.meetstage:fullscreen { border: 0; border-radius: 0; background: var(--tint); }
.meetstage:fullscreen .meetgrid { flex: 1; height: auto; }

.meetstage__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--tint); }
.meetstage__room { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- the faces ---------- */

/* One column for two people, two for up to four, three past that. Enough
   rules to cover a room of six, which is all a mesh call holds. */
.meetgrid {
  display: grid;
  gap: 8px;
  height: 62vh;
  padding: 8px;
  background: var(--tint-2);
  grid-template-columns: 1fr;
}

.meetgrid[data-count='2'] { grid-template-columns: repeat(2, 1fr); }
.meetgrid[data-count='3'], .meetgrid[data-count='4'] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.meetgrid[data-count='5'], .meetgrid[data-count='6'] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }

.tile {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #23262e;
  min-height: 0;
}

.tile__video { width: 100%; height: 100%; object-fit: cover; }

/* A shared screen is a document, not a face: it is shown whole rather than
   cropped to fill the tile. */
.tile--screen .tile__video { object-fit: contain; background: #16181d; }

.tile__off { position: absolute; inset: 0; display: grid; place-items: center; }

/* Whoever is speaking. A ring rather than a colour change, so the picture
   underneath is left alone. */
.tile.is-talking { outline: 3px solid var(--brand); outline-offset: -3px; }

.tile__name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(20, 22, 28, .62);
  color: #fff;
  font-size: 12.5px;
}

.tile__name b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tile__muted { display: inline-flex; width: 14px; height: 14px; color: #ff8b80; }
.tile__muted svg { width: 14px; height: 14px; }
.tile__hand { font-size: 13px; }

.tile__state {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(20, 22, 28, .62);
  color: #fff;
  font-size: 11.5px;
}

/* ---------- the control bar ---------- */

.meetbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.meetbar__count { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.meetbar__count b { color: var(--text); font-variant-numeric: tabular-nums; }
.meetbar__keys { display: flex; align-items: center; justify-content: center; gap: 10px; }
.meetbar__side { display: flex; justify-content: flex-end; }
.meetkey__ico { display: inline-flex; width: 18px; height: 18px; }
.meetkey__ico svg { width: 18px; height: 18px; }

.meetkey {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}

.meetkey svg { width: 21px; height: 21px; }
.meetkey:hover:not(:disabled) { border-color: var(--brand); background: var(--tint); color: var(--brand); }
.meetkey:disabled { opacity: .4; cursor: not-allowed; }

/* Off is the loud state, the way it is in every other meeting app: a muted
   microphone is the thing you need to notice from across the room. */
.meetkey--off { border-color: transparent; background: #fbe9e7; color: #c8372d; }
.meetkey--off:hover:not(:disabled) { border-color: transparent; background: #f7ded9; color: #c8372d; }

.meetkey--end { width: 62px; border-color: transparent; background: #d93b30; color: #fff; }
.meetkey--end:hover:not(:disabled) { border-color: transparent; background: #c8372d; color: #fff; }

.meetkey--plain { width: 40px; height: 40px; border-color: transparent; background: transparent; color: var(--muted); }
.meetkey--plain:hover:not(:disabled) { border-color: transparent; background: var(--tint); color: var(--brand); }

/* ---------- the green room ---------- */

.green { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; padding: 20px; }

.green__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #23262e;
}

.green__video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.green__off { position: absolute; inset: 0; display: grid; place-items: center; }
.green__keys { position: absolute; bottom: 14px; display: flex; gap: 10px; }
.green__side { display: grid; align-content: center; gap: 12px; }
.green__side h3 { font-size: 20px; }

@media (max-width: 860px) {
  .green { grid-template-columns: 1fr; }
  .meetbar { grid-template-columns: 1fr; }
  .meetbar__count, .meetbar__side { display: none; }
  .meetgrid { height: 54vh; }
  .meetgrid[data-count='3'], .meetgrid[data-count='4'],
  .meetgrid[data-count='5'], .meetgrid[data-count='6'] { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
}

/* ---------- chat ---------- */

.chatbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chatpills { display: flex; flex-wrap: wrap; gap: 6px; }

.chatpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
}

.chatpill span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatpill.is-on { border-color: var(--brand); color: var(--brand); }
.chatpill__x { color: var(--faint); font-size: 14px; }
.chatpill__x:hover { color: var(--danger); }

.chatlog { flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 40vh; padding: 8px 0; overflow-y: auto; }

.turn { display: flex; gap: 11px; }
.turn--me { flex-direction: row-reverse; }
.turn__avatar { width: 30px; height: 30px; flex: none; border-radius: 10px; }

.turn__body {
  max-width: min(100%, 58ch);
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.turn--me .turn__body { border-color: rgba(53, 50, 246, .22); background: rgba(53, 50, 246, .07); }
.turn--error .turn__body { border-color: rgba(200, 55, 45, .3); background: #fdf2f1; color: #8d2b23; }
.turn__why { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(200, 55, 45, .18); font-size: 13px; opacity: .85; }

.dots { display: inline-flex; gap: 5px; padding: 4px 0; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: .35; animation: blink 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 45% { opacity: 1; transform: translateY(-2px); } }

.welcome { margin: auto; padding: 20px 0; text-align: center; }
.welcome__photo { width: 76px; height: 76px; border-radius: 24px; box-shadow: 0 20px 44px -26px rgba(53, 50, 246, .8); }
.welcome h2 { margin-top: 16px; font-size: 21px; font-weight: 700; }
.welcome p { margin: 8px auto 0; max-width: 40ch; color: var(--muted); font-size: 14.5px; }
.starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

.starters button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.starters button:hover { border-color: var(--brand); color: var(--brand); }

.composer__box { border: 1px solid var(--line-2); border-radius: 18px; background: #fff; }
.composer__box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(53, 50, 246, .1); }
.composer textarea { border: 0; border-radius: 18px 18px 0 0; min-height: 44px; }
.composer textarea:focus { box-shadow: none; }
.composer__row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 10px; }

.modes { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint); }
.modes button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.modes button[aria-pressed='true'] { background: #fff; color: var(--brand); box-shadow: 0 1px 4px -1px rgba(12, 11, 40, .2); }

.round {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.round svg { width: 18px; height: 18px; }
.round--send { background: var(--brand); border-color: var(--brand); color: #fff; }
.round--send:hover { background: #2320c9; }

/* ---------- what Vlipa produced ---------- */

.btn--ai {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  border-color: transparent;
}

.btn--ai:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--brand-2), var(--brand)); }
.ghostlink--ai { color: var(--brand); }
.ghostlink--ai:hover { background: rgba(53, 50, 246, .1); }

.planlist { display: grid; gap: 10px; max-height: 46vh; overflow-y: auto; }

.planrow {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.planrow__head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.planrow__head input[type='checkbox'] { width: 16px; height: 16px; min-height: 0; }
.planrow__title { font-weight: 600; }
.planrow__detail { color: var(--muted); font-size: 13.5px; }
.planrow__meta { display: grid; grid-template-columns: 1fr 150px; gap: 8px; }

.aiout { display: grid; gap: 10px; justify-items: start; max-height: 52vh; overflow-y: auto; }

.aiout__text {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--tint);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  width: 100%;
}

.task__out { margin-top: 4px; }
.task__out summary { color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.task__out .aiout__text { margin-top: 8px; font-size: 13.5px; }

/* ---------- groups ---------- */

/* ---------- groups ---------- */

/* Groups sit in the same workbench as Studio and Write. Which groups exist is
   the menu's job, so all this holds is the conversation. */
.grouproom {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #fff;
  overflow: hidden;
}

.groupbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.groupbar__title { display: grid; gap: 2px; min-width: 0; }
.groupbar__title h3 { font-size: 16px; font-weight: 600; }
.groupbar__title span { font-size: 12.5px; }
.groupbar__acts { display: flex; gap: 12px; flex: none; }

.grouplog {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 16px 18px;
  overflow-y: auto;
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 24px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 24px no-repeat,
    var(--tint);
  background-attachment: local, local, scroll;
}

.grouplog__empty { display: grid; gap: 4px; margin: auto; text-align: center; color: var(--muted); font-size: 14.5px; }
.grouplog__empty b { color: var(--text); font-size: 15.5px; }

.daymark { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: var(--faint); font-size: 12px; }
.daymark::before, .daymark::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.msg { display: grid; gap: 3px; max-width: min(100%, 62ch); }
.msg--run { margin-top: -6px; }
.msg--me { margin-left: auto; justify-items: end; }
.msg__who { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--faint); }
.msg__who b { color: var(--text); font-size: 13px; font-weight: 600; }

.msg__body {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 14.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--me .msg__body { border-color: rgba(53, 50, 246, .22); background: rgba(53, 50, 246, .08); }

.groupsend {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.groupsend textarea {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 160px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  resize: none;
}

@media (max-width: 780px) {
  .grouplog { min-height: 40vh; }
  .grouplog { max-height: 48vh; }
}


/* ---------- the shared link ---------- */

.linkrow {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}

.linkrow__pre { padding: 0 4px 0 12px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.linkrow input { border: 0; border-radius: 0; font-weight: 600; }
.linkrow input:focus { box-shadow: none; }
.linkrow:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(53, 50, 246, .12); }

/* ---------- modal and toast ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 11, 40, .3);
  backdrop-filter: blur(6px);
}

.modal[hidden] { display: none; }

.modal__box {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 90px -50px rgba(12, 11, 40, .8);
}

.modal__box h3 { font-size: 18px; }
.modal__body { display: grid; gap: 12px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; }

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  z-index: 70;
  transform: translate(-50%, 16px);
  max-width: min(90vw, 460px);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--bad { background: #8d2b23; }

/* ---------- responsive ---------- */

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

@media (max-width: 860px) {
  .burger { display: grid; }

  .side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .26s var(--ease);
    box-shadow: 0 0 60px rgba(12, 11, 40, .25);
  }

  .side.is-open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 45; background: rgba(12, 11, 40, .3); }
  .scrim[hidden] { display: none; }
  .row2 { grid-template-columns: 1fr; }
  .meetstage__frame { height: 52vh; }
}

@media (max-width: 620px) {
  .board { grid-template-columns: 1fr; }
  .linkrow { flex-direction: column; align-items: stretch; }
  .linkrow__pre { padding: 8px 12px 0; }
  .cols__row { grid-template-columns: 1fr 110px auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- the Vlipa fold in the menu ---------- */

.navitem--parent { position: relative; }
.navitem__fold { margin-left: auto; display: grid; place-items: center; width: 16px; height: 16px; color: var(--faint); }
.navitem__fold svg { width: 16px; height: 16px; }
.navitem[aria-current='true'] .navitem__fold { color: inherit; }

.subnav { display: grid; gap: 2px; margin: 2px 0 6px 14px; padding-left: 12px; border-left: 1px solid var(--line); }

.subitem {
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.subitem b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.subitem span { font-size: 11.5px; color: var(--faint); }
.subitem:hover { background: var(--tint); }
.subitem[aria-current='true'] { background: rgba(53, 50, 246, .09); }
.subitem[aria-current='true'] b { color: var(--brand); }

/* ---------- the workbench: Vlipa Studio and Vlipa Write ---------- */

.workbench {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - 150px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.codebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}

.codebar__name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; }
.codebar__name b { font-size: 13.5px; font-weight: 600; }
.codebar__name span { color: var(--faint); white-space: nowrap; }
.codebar__right { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }

.writetitle { min-width: 0; width: 22ch; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: none; font-size: 14px; font-weight: 600; }
.writetitle:hover { border-color: var(--line); background: #fff; }

.sitechip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(23, 132, 90, .1);
  color: #16794f;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.chip {
  /* Laid out rather than inline, so a chip carrying an icon lines it up with
     its label. The text-only ones look exactly as they did. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip--bad:hover { border-color: var(--danger); color: var(--danger); }

/* What Vlipa could not fill in, said before anything is accepted rather than
   discovered later as a column of blanks. */
/* Vlipa offering to take you to a page. It waits to be accepted: a reply that
   moved the screen on its own would be worse than one that only described
   where to go. */
.goto {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(53, 50, 246, .28);
  border-radius: 14px;
  background: rgba(53, 50, 246, .05);
}

.goto__ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; }
.goto__ico svg { width: 19px; height: 19px; }
.goto__text { display: grid; gap: 1px; flex: 1; min-width: 140px; }
.goto__text b { font-size: 14.5px; font-weight: 600; }
.goto__text span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.goto__acts { display: flex; align-items: center; gap: 10px; }

.aigap {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(183, 121, 31, .3);
  border-radius: 10px;
  background: rgba(183, 121, 31, .07);
  color: var(--warn);
  font-size: 13px;
  line-height: 1.5;
}

.aigap::before { content: 'ⓘ'; flex: none; font-size: 13px; line-height: 1.5; }

.codebody {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 330px;
  flex: 1;
  min-height: 0;
}

.codebody--doc { grid-template-columns: minmax(0, 1fr) 340px; }

/* the file rail: names, nothing else */
.filerail { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #fbfbfe; }
.filerail__head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 9px 14px; color: var(--faint); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.filerail__list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 10px; display: grid; gap: 1px; align-content: start; }

.filerow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.filerow:hover { background: rgba(53, 50, 246, .06); }
.filerow.is-on { background: rgba(53, 50, 246, .1); color: var(--brand); font-weight: 600; }
.filerow__kind { flex: none; width: 30px; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.filerow.is-on .filerow__kind { color: var(--brand); }
.filerow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the editor */
.codemain { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.editorhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.editorhead__kind { padding: 2px 7px; border-radius: 6px; background: var(--tint); color: var(--muted); font-size: 10.5px; font-weight: 700; }

.editorwrap { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.gutter {
  display: grid;
  align-content: start;
  padding: 14px 8px 14px 14px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #fcfcfe;
  color: #b6b6cc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: right;
  user-select: none;
}

.editor {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #1c1c34;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  resize: none;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
}

.editor:focus { box-shadow: none; outline: 0; }

/* the document, on the same bench */
.writepage { min-width: 0; min-height: 0; padding: 26px 20px 40px; background: #f6f6fb; overflow-y: auto; }

.writebody {
  display: block;
  width: min(100%, 78ch);
  min-height: 62vh;
  margin: 0 auto;
  padding: 46px 52px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 30px -22px rgba(12, 11, 40, .5);
  color: #1a1a2e;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.85;
  resize: none;
}

.writebody:focus { box-shadow: 0 12px 30px -22px rgba(12, 11, 40, .5); border-color: var(--line-2); }

/* the chat panel, and nothing else */
.agent { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: #fbfbfe; }
.agentlog { flex: 1; min-height: 0; padding: 16px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

.agentwelcome { margin-top: auto; }
.agentstarters { display: grid; gap: 8px; }

.agentstarters button {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.agentstarters button:hover { border-color: var(--brand); color: var(--brand); }

.agentturn p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.agentturn--me { align-self: flex-end; max-width: 92%; padding: 8px 12px; border-radius: 12px; background: rgba(53, 50, 246, .08); }
.agentturn--me p { margin: 0; }

.codeblock, .writeblock { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.codeblock figcaption, .writeblock figcaption { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.codeblock figcaption { border-top: 0; border-bottom: 1px solid var(--line); justify-content: space-between; }
.codeblock__acts { display: flex; gap: 10px; }
.codeblock__acts button, .writeblock figcaption button { border: 0; background: none; color: var(--brand); font: inherit; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
/* A whole file in the conversation is a reference, not the work: it is kept
   short enough to scroll past. */
.codeblock pre { margin: 0; padding: 12px; max-height: 260px; overflow: auto; }
.codeblock code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; color: #1c1c34; }
.writeblock__text { margin: 0; padding: 12px 14px; max-height: 340px; overflow-y: auto; font-size: 13.5px; }

/* What the assistant writes, once the markdown has been turned into writing:
   asterisks become bold, dashes become a list, and nothing shows a marker. */
.prose { white-space: normal; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 9px; white-space: normal; overflow-wrap: anywhere; }
.prose h4 { margin: 14px 0 6px; font-size: 1.02em; font-weight: 650; }
.prose h5 { margin: 12px 0 5px; font-size: .98em; font-weight: 600; color: var(--muted); }
.prose strong { font-weight: 650; }
.prose em { font-style: italic; }
.prose a { color: var(--brand); }
.prose code { padding: 1px 5px; border-radius: 5px; background: var(--tint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.prose__list { margin: 0 0 9px; padding-left: 1.25em; display: grid; gap: 4px; }
.prose__list li { line-height: 1.6; overflow-wrap: anywhere; }
.prose ul.prose__list { list-style: disc; }
.prose ol.prose__list { list-style: decimal; }

.agentsend { padding: 10px 12px 12px; border-top: 1px solid var(--line); background: #fbfbfe; }

.agentbox { border: 1px solid var(--line-2); border-radius: 14px; background: #fff; }
.agentbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(53, 50, 246, .1); }
.agentbox textarea { width: 100%; min-height: 52px; max-height: 170px; padding: 11px 13px 4px; border: 0; border-radius: 14px 14px 0 0; background: none; font-size: 13.5px; resize: none; }
.agentbox textarea:focus { box-shadow: none; }

.agentrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 8px 8px 10px; }
.agentrow .chip { padding: 5px 9px; font-size: 12px; }

.agentmodes { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint); }
.agentmodes button { padding: 4px 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.agentmodes button[aria-pressed='true'] { background: #fff; color: var(--brand); box-shadow: 0 1px 3px -1px rgba(12, 11, 40, .25); }

/* a dropdown that stays on the page instead of taking over the screen */
.pickwrap { position: relative; }

.pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tint);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.pick:hover { border-color: var(--brand); color: var(--brand); }

/* The same list, worn as one of the toolbar's chips rather than as a picker. */
.pick--chip { padding: 6px 8px 6px 11px; border-color: var(--line-2); border-radius: 9px; background: #fff; font-size: 12.5px; font-weight: 400; }
.pick__caret { display: grid; place-items: center; width: 14px; height: 14px; }
.pick__caret svg { width: 14px; height: 14px; }
.pick__logo { flex: none; width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }

/* display: grid would otherwise beat the browser's own [hidden] rule and the
   menu would sit there open. */
.pickmenu[hidden] { display: none; }

.pickmenu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  display: grid;
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(12, 11, 40, .55);
}

/* Opened from a toolbar at the top of the page rather than a bar at the
   bottom of it, the list has to fall rather than rise. */
.pickmenu--down { top: calc(100% + 6px); bottom: auto; }
.pickmenu--right { left: auto; right: 0; }

.pickmenu__item {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.pickmenu__item:hover { background: var(--tint); }
.pickmenu__item.is-on { background: rgba(53, 50, 246, .1); color: var(--brand); font-weight: 600; }
.pickmenu__item small { color: var(--faint); font-size: 11.5px; }

/* An option that carries a logo puts it in a column of its own. */
.pickmenu__item--logo { grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 2px 9px; }
.pickmenu__item--logo .pick__logo { grid-row: span 2; width: 18px; height: 18px; }
.pickmenu__item--logo .pickmenu__label,
.pickmenu__item--logo small { grid-column: 2; }

.sourcelist { display: grid; gap: 2px; margin-top: 10px; }
.source { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.source__n { color: var(--faint); font-weight: 600; }
.source__body { display: grid; gap: 2px; min-width: 0; }
.source__body b { font-size: 13px; }
.source__body a { color: var(--brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) {
  .codebody { grid-template-columns: 150px minmax(0, 1fr); }
  .codebody--doc { grid-template-columns: minmax(0, 1fr); }
  .agent { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: 46vh; }
  .writebody { padding: 30px 26px; }
}

@media (max-width: 700px) {
  .codebody { grid-template-columns: 1fr; }
  .filerail { border-right: 0; border-bottom: 1px solid var(--line); }
  .filerail__list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .writepage { padding: 14px 10px 24px; }
  .writebody { padding: 22px 18px; }
}

/* The printed document. Off screen until the browser prints it. */
.paper { position: absolute; left: -10000px; top: 0; width: 170mm; color: #111; font-family: Georgia, 'Times New Roman', serif; font-size: 11.5pt; line-height: 1.6; }
.paper h1 { font-size: 20pt; font-weight: 700; }
.paper h2 { margin: 14pt 0 4pt; font-size: 13pt; font-weight: 600; }
.paper p { margin: 0 0 8pt; }
.paper__meta { color: #666; font-size: 9.5pt; }
.paper__source { font-size: 10pt; color: #333; }

@media print {
  .side, .mainbar, .toast, .modal, .scrim, .workbench { display: none !important; }
  .app, .main, .view { display: block; margin: 0; padding: 0; background: #fff; }
  .paper { position: static; width: auto; }
  @page { margin: 18mm; }
}

/* Departments: which part of the company a piece of work belongs to. */
.pill--dept { background: rgba(53, 50, 246, .08); color: var(--brand); border-color: transparent; }
.planrow__dept { min-width: 0; }
.planrow__meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }

.deptlist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.deptlist span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
}

.deptlist button { border: 0; background: none; color: var(--faint); font: inherit; cursor: pointer; }
.deptlist button:hover { color: var(--danger); }

@media (max-width: 620px) {
  .planrow__meta { grid-template-columns: 1fr; }
}

/* ---------- the menu, narrowed to its icons ---------- */

.sidefold {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--faint);
  cursor: pointer;
}

@media (hover: hover) {
  .sidefold:hover { border-color: var(--line); color: var(--brand); background: #fff; }
}
.sidefold svg { width: 17px; height: 17px; }

.subitem { grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 9px; }
.subitem__ico { display: grid; place-items: center; width: 18px; height: 18px; color: var(--faint); }
.subitem__ico svg { width: 17px; height: 17px; }
.subitem[aria-current='true'] .subitem__ico { color: var(--brand); }
.subitem__text { display: grid; gap: 1px; min-width: 0; }
.subitem__text b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.subitem__text span { font-size: 11.5px; color: var(--faint); }
.subitem[aria-current='true'] .subitem__text b { color: var(--brand); }

/* Narrow: every label goes, and what is left is a column of icons the same
   size, evenly spaced. */
.app.is-narrow .side { width: 58px; }

.app.is-narrow .side__head {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 6px;
  padding: 12px 0 10px;
  align-items: center;
}

.app.is-narrow .brand { justify-content: center; }
.app.is-narrow .brand span,
.app.is-narrow .copick,
.app.is-narrow .rolebadge,
.app.is-narrow .navitem__label,
.app.is-narrow .navitem__fold,
.app.is-narrow .subitem__text,
.app.is-narrow .side__foot .spread,
.app.is-narrow .me span { display: none; }

.app.is-narrow .sidefold { margin: 0; }

/* The company's logo is the one thing that stays: narrowed, it is the only
   thing on screen saying which company this is. */
.colog { display: none; padding: 0; border: 0; background: none; cursor: pointer; }
.app.is-narrow .colog { display: block; margin: 0 auto 6px; }
.app.is-narrow .copicker { display: grid; justify-items: center; padding: 0; }
.app.is-narrow .nav { padding: 6px; gap: 2px; }

.app.is-narrow .navitem {
  justify-content: center;
  gap: 0;
  width: 46px;
  height: 40px;
  margin: 0 auto;
  padding: 0;
}

/* Narrow with a fold open: the children float out beside the rail, with their
   names, instead of turning into a second column of unlabelled icons. */
.app.is-narrow .nav { position: relative; overflow: visible; }

.app.is-narrow .subnav {
  position: absolute;
  left: 54px;
  z-index: 40;
  top: 0;
  width: 214px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(18, 18, 60, .16);
}

.app.is-narrow .subnav .subitem {
  grid-template-columns: 18px minmax(0, 1fr);
  justify-items: start;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 7px 10px;
}

.app.is-narrow .subnav .subitem__text { display: grid; }

.app.is-narrow .side__foot { padding: 10px 6px; }
.app.is-narrow .me { justify-content: center; }
.app.is-narrow .me button { font-size: 11px; }

/* What a turn did, as opposed to what it said. */
.wrote { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wrote__label { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.wrote__file {
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font: inherit;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}

.wrote__file:hover { border-color: var(--brand); background: var(--tint); }

/* A project with no files in it yet. */
.codeblank {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 40px 24px;
  height: 100%;
  text-align: center;
}

.codeblank h3 { font-size: 15px; font-weight: 600; }
.codeblank p { max-width: 42ch; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.codeblank .spread { justify-content: center; margin-top: 4px; }

.filerail__empty { padding: 10px 12px; color: var(--faint); font-size: 12.5px; line-height: 1.5; }

.workbench--plain { display: grid; place-items: center; padding: 24px; }

/* Nothing here yet: say so in the middle of the space, not along the top of
   it. */
.workbench--plain .empty--big {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 52ch;
  text-align: center;
}

.workbench--plain .empty--big .spread { justify-content: center; margin-top: 6px; }

/* ---------- tables: a spreadsheet ---------- */

/* The strip under the toolbar: where the cursor is, and what is in that cell.
   Narrow on purpose — it is a label, not a panel. */
.sheetbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line-2);
  background: #fff;
  font-size: 12px;
}

.sheetbar__ref {
  display: grid;
  place-items: center;
  width: 58px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--tint);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sheetbar__fx { flex: none; color: var(--faint); font-size: 11.5px; font-style: italic; }

.sheetbar__value {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.sheetbar__value:focus { outline: none; box-shadow: none; }

.sheetstate { color: var(--faint); font-size: 12px; }
.sheetstate.is-bad { color: var(--danger); }

.sheetchosen { display: flex; align-items: center; gap: 10px; flex: none; color: var(--muted); }
.sheetchosen[hidden] { display: none; }

/* The grid. Columns are a fixed width, as in any spreadsheet, but the sheet
   itself always covers the area it is given: a table with two columns should
   look like an empty spreadsheet, not like a spreadsheet with its right-hand
   half missing. The padding column past the last real one takes up whatever
   room is left over. */
.sheetwrap { flex: 1; min-height: 0; overflow: auto; background: #f6f7f9; }

.sheet {
  --cell: 172px;
  --num: 44px;
  display: grid;
  align-content: start;
  width: max-content;
  min-width: 100%;
}

.sheet__head, .sheet__row {
  display: grid;
  grid-template-columns: var(--num) repeat(var(--cols), var(--cell)) minmax(34px, 1fr);
  min-width: max-content;
  height: 28px;
}

.sheet__head { position: sticky; top: 0; z-index: 3; }

.headcell {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  min-width: 0;
  padding: 0 8px;
  border: 0;                      /* a header can be a button, and buttons come with one */
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  background: #f1f3f6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.headcell__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.headcell__more {
  margin-left: auto;
  padding: 0 3px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
}

.headcell:hover .headcell__more { opacity: 1; }
.headcell__more:hover { background: rgba(53, 50, 246, .12); color: var(--brand); }

/* The column the cursor is in, marked the way a spreadsheet marks it. */
.headcell.is-near { background: #dfe3ff; color: var(--brand); }

.headcell--num { position: sticky; left: 0; z-index: 4; justify-content: center; padding: 0; }
.headcell--num input { width: 12px; height: 12px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 3px; accent-color: var(--brand); opacity: .45; }
.headcell--num:hover input, .headcell--num input:checked { opacity: 1; }

.headcell--add {
  justify-content: center;
  padding: 0;
  border-right: 0;
  color: var(--faint);
  font-size: 14px;
  cursor: pointer;
}

.headcell--add:hover { background: #e6e9ef; color: var(--brand); }

.sheet__body { display: grid; align-content: start; }

.rownum {
  position: sticky;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 28px;
  overflow: hidden;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
  background: #f1f3f6;
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rownum.is-near { background: #dfe3ff; color: var(--brand); }

/* The tick sits over the number and only shows when it is wanted. */
.rownum span { grid-area: 1 / 1; }
.rownum input { grid-area: 1 / 1; width: 12px; height: 12px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 3px; accent-color: var(--brand); opacity: 0; }
.sheet__row:hover .rownum span { visibility: hidden; }
.sheet__row:hover .rownum input, .rownum input:checked { opacity: 1; }
.rownum input:checked + span, .rownum:has(input:checked) span { visibility: hidden; }

.cell {
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.cell--pad { border-right: 0; }

.cell input, .cell select {
  width: 100%;
  height: 27px;
  min-height: 0;
  padding: 0 7px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 27px;
}

.cell input:focus, .cell select:focus { outline: none; box-shadow: none; }
.cell--number input { text-align: right; font-variant-numeric: tabular-nums; }

/* A choice cell is a cell until you go to it: the arrow would otherwise be
   drawn down every empty row and the sheet would look like a form. */
.cell select { appearance: none; -webkit-appearance: none; }

.cell:hover select, .cell.is-at select {
  appearance: auto;
  -webkit-appearance: auto;
  padding-left: 4px;
}

/* Numbers do not need their spinner in a grid. */
.cell input[type=number]::-webkit-inner-spin-button,
.cell input[type=number]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.cell input[type=number] { appearance: textfield; -moz-appearance: textfield; }

/* The cell you are in, drawn over its neighbours the way a sheet does it. */
.cell.is-at {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--brand);
}

.sheettabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  border-top: 1px solid var(--line-2);
  background: #f1f3f6;
  overflow-x: auto;
}

.sheettab {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.sheettab b { font-weight: 500; }
.sheettab span { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.sheettab:hover { background: #e6e9ef; }

.sheettab.is-on {
  background: #fff;
  color: var(--brand);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 20, 60, .12);
}

.sheettab.is-on span { color: var(--brand); opacity: .65; }
.sheettab--add { padding: 0 11px; font-size: 15px; }
.sheettab--ai { color: var(--brand); }

.chip--ai { border-color: rgba(53, 50, 246, .3); color: var(--brand); }

/* The table's name sits where a document's title would, and takes only the
   room the name needs. */
.sheetname { width: auto; min-width: 6ch; max-width: 28ch; font-size: 14px; font-weight: 600; }
.sheetname:disabled { border-color: transparent; background: none; color: var(--text); opacity: 1; }

@media (max-width: 860px) {
  .sheet { --cell: 140px; --num: 36px; }
  .sheetbar__ref { width: 46px; }
}

/* ---------- a workbench takes the whole area ---------- */

@media (min-width: 861px) {
  .app.is-full .mainbar { display: none; }
}

.app.is-full .view { padding: 0; gap: 0; }

/* The mailbox scrolls inside its own columns, so the view behind it must not
   scroll as well — until it stacks, where the page is the scroller again. */
@media (min-width: 1081px) {
  .app.is-full .view:has(.mailshell) { overflow: hidden; }
}
.app.is-full .workbench { min-height: 0; border: 0; border-radius: 0; }
.app.is-full .paper { display: none; }

@media print {
  .app.is-full .paper { display: block; }
}

/* ---------- vlipa for one person ---------- */

/* Every page here carries its own heading, so the bar above it would only
   say the same word twice. It stays on a phone, where it is what holds the
   button that opens the menu. */
@media (min-width: 861px) {
  .app--me .mainbar { display: none; }
}

/* The personal app shares this stylesheet: the same chrome, the same chat,
   and these few things the business side has no use for. */

.planbadge {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--tint);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.app.is-narrow .planbadge { display: none; }

#who { display: flex; align-items: center; gap: 8px; min-width: 0; }
#who .who__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pagehead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pagehead h2 { font-size: 22px; }
.pagehead > div:first-child { flex: 1; min-width: 220px; }
.pagehead p { font-size: 13.5px; }

.chatbar__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }

.skillnote {
  padding: 2px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--tint);
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.skillnote:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- skills ---------- */

.skillgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.skillcard {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  /* A skill that is off is still yours; it is simply not speaking. */
  opacity: .62;
  transition: opacity .15s var(--ease), border-color .15s var(--ease);
}

.skillcard.is-on { opacity: 1; border-color: var(--line-2); }
.skillcard__top { display: flex; align-items: flex-start; gap: 12px; }
.skillcard__top > div { flex: 1; min-width: 0; }
.skillcard__top h4 { font-size: 15px; }
.skillcard__top p { font-size: 12.5px; }

.skillcard__text {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  /* Long instructions are common and a card of solid text is unreadable, so
     it shows the beginning and the edit dialog holds the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skillcard__foot { display: flex; align-items: center; gap: 10px; font-size: 12px; }

.switch {
  flex: none;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--tint-2);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}

.switch span {
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 10, 26, .25);
  transition: transform .16s var(--ease);
}

.switch[aria-checked="true"] { background: var(--brand); border-color: var(--brand); }
.switch[aria-checked="true"] span { transform: translateX(18px); }

.card--pick { text-align: left; cursor: pointer; font: inherit; color: inherit; }
.card--pick:hover { border-color: var(--brand); }

/* ---------- history ---------- */

.histlist { display: grid; gap: 6px; }

.histday {
  margin-top: 14px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.histrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
}

.histrow:hover { border-color: var(--line); background: var(--tint); }
.histrow .ghostlink--bad { opacity: 0; }
.histrow:hover .ghostlink--bad, .histrow:focus-within .ghostlink--bad { opacity: 1; }

.histrow__open {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 8px;
  color: inherit;
  text-decoration: none;
}

.histrow__ico { flex: none; color: var(--faint); }
.histrow__ico svg { width: 20px; height: 20px; display: block; }
.histrow__text { display: grid; min-width: 0; }
.histrow__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.histrow__text span { color: var(--muted); font-size: 12.5px; }

/* ---------- picking repositories ---------- */

.repopick {
  display: grid;
  gap: 4px;
  max-height: 46vh;
  overflow-y: auto;
  margin: 4px 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.repopick__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
}

.repopick__row:hover { background: var(--tint); }
.repopick__row.is-on { border-color: var(--brand); background: rgba(53, 50, 246, .06); }

.repopick__row input { flex: none; width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.repopick__text { display: grid; min-width: 0; }
.repopick__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.repopick__text span { color: var(--muted); font-size: 12px; }

/* The chip the editor's bar carries: an icon and, once something is open,
   what it is. */
.chip__ico { display: inline-flex; width: 15px; height: 15px; }
.chip__ico svg { width: 15px; height: 15px; display: block; }
.chip--on { border-color: var(--brand); color: var(--brand); }

/* ---------- repositories, as cards ---------- */

/* Somebody with thirty repositories wants to find one. Full-width rows put
   four on a screen and waste the other two thirds; these tile, so a name is
   found by scanning rather than scrolling. */
.repogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.repocard {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}

.repocard:hover { border-color: var(--brand); transform: translateY(-1px); }
.repocard.is-on { border-color: var(--brand); background: rgba(53, 50, 246, .05); }

.repocard__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.repocard__ico { display: inline-flex; flex: none; width: 17px; height: 17px; color: var(--faint); }
.repocard__ico svg { width: 17px; height: 17px; display: block; }
.repocard:hover .repocard__ico, .repocard.is-on .repocard__ico { color: var(--brand); }

/* The name is what is being looked for, so it gets the room. */
.repocard__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.repocard__open {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
}

/* The owner is the same on nearly all of them, so it sits with the rest of
   the small print rather than in front of the name. */
.repocard__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  padding-left: 25px;
  color: var(--faint);
  font-size: 11.5px;
}

.repocard__meta > span + span::before {
  content: '·';
  margin-right: 8px;
  color: var(--line-2);
}

.repocard__lock { color: var(--warn); }
.repocard__branch { font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .repogrid { grid-template-columns: 1fr; }
}

/* ---------- mail ---------- */

/* The mailbox takes the whole area, the way the editor does: a mail client
   inside a page with a heading above it is a mail client in a letterbox. */
.mailshell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.mailtop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px clamp(12px, 2vw, 20px);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.mailtop h2 { font-size: 18px; }
.mailtop__who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }

/* Two columns: Vlipa on the left with the mailbox in front of it, the mailbox
   itself on the right. Below a laptop they stack, mailbox first — on a phone
   the mail is what you came for and the panel follows it. */
.mailpage {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 0;
  padding: 14px clamp(12px, 2vw, 20px);
}

.mailbox {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.mailbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mailboxes { display: flex; gap: 6px; flex-wrap: wrap; }

.mailsearch {
  flex: 1;
  min-width: 180px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
}

.mailsearch:focus { outline: none; border-color: var(--brand); }

/* ---------- the list ---------- */

.maillist {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.maillist__more { display: block; margin: 12px auto; }

/* When things arrived, as a heading, because that is how a mailbox is read. */
.mailgroup {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 16px 6px;
  background: #fff;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
}

/* One line per message: face, who, what it says, when. The subject and the
   snippet share the middle column and are cut off together, so a long subject
   pushes the snippet out rather than wrapping the row. */
.mailrow {
  position: relative;
  display: grid;
  grid-template-columns: auto 132px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s var(--ease);
}

.mailgroup + .mailrow { border-top: 0; }
.mailrow:hover { background: var(--tint); }
.mailrow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.mailrow.is-open { background: rgba(53, 50, 246, .07); }

.mailrow.is-open::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand);
}

.mailrow .face { flex: none; }

/* The sender's own mark, where a face would be. Square-ish rather than round:
   it is a logo, and a cropped circle makes most of them unreadable. */
.face--mark { border-radius: 7px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 2px; }

.mailrow__who,
.mailrow__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.mailrow__who { color: var(--text); }
.mailrow__subject { color: var(--text); }
.mailrow__snippet { color: var(--faint); }

/* Unread is the one thing a list has to say at a glance. */
.mailrow.is-unread .mailrow__who,
.mailrow.is-unread .mailrow__subject { font-weight: 700; }
.mailrow.is-unread .mailrow__when { color: var(--brand); font-weight: 600; }

.mailrow__star { display: inline-flex; color: var(--warn); }
.mailrow__star svg { fill: currentColor; }

.mailrow__when {
  flex: none;
  min-width: 52px;
  text-align: right;
  color: var(--faint);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* The row's buttons take the place of the time while the pointer is on it, so
   a row stays one line high whether or not anybody is looking at it. */
.mailrow__acts {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  gap: 2px;
  padding-left: 12px;
  background: inherit;
}

.mailrow:hover .mailrow__acts,
.mailrow:focus-within .mailrow__acts { display: flex; }
.mailrow:hover .mailrow__when,
.mailrow:focus-within .mailrow__when { visibility: hidden; }

.mailact {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.mailact:hover { background: var(--tint-2); color: var(--brand); }
.mailact.is-on { color: var(--warn); }
.mailico { display: inline-flex; width: 15px; height: 15px; }
.mailico svg { width: 15px; height: 15px; display: block; }

/* ---------- one message, open ---------- */

.mailread {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.mailread__back { justify-self: start; }
.mailread__head { display: grid; gap: 8px; }
.mailread__head h3 { font-size: 18px; }
.mailread__from { display: flex; align-items: center; gap: 10px; }
.mailread__from p { font-size: 13px; }
.mailread__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.mailread__files { font-size: 12.5px; }

/* Mail is plain text here — its own line breaks, and nothing it contains can
   become markup. */
.mailread__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

/* ---------- Vlipa, beside the mailbox ---------- */

.mailpanel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(53, 50, 246, .05), rgba(107, 77, 255, .02));
}

.mailpanel__log { min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; }

.mailpanel__welcome {
  display: grid;
  gap: 8px;
  place-items: center;
  margin: auto 0;
  padding: 20px 6px;
  text-align: center;
}

.mailpanel__welcome h3 { font-size: 17px; }
.mailpanel__welcome p { font-size: 13px; }

.mailturn {
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13.5px;
}

.mailturn--me { justify-self: end; max-width: 90%; background: var(--brand); border-color: var(--brand); color: #fff; }
.mailturn--bad { border-color: rgba(200, 55, 45, .35); color: var(--danger); }
.mailturn .prose p { font-size: 13.5px; }

/* The message Vlipa wrote, as it will go out. */
.mailturn--draft { display: grid; gap: 8px; border-color: rgba(53, 50, 246, .35); }
.maildraft__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.maildraft__tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.maildraft__warn { color: var(--warn); font-size: 12.5px; }

.maildraft__body {
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 10px;
  background: var(--tint);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.6;
}

.maildraft__acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.maildraft__sent { color: var(--ok); font-size: 12.5px; font-weight: 600; }

.mailpanel__foot { display: grid; gap: 8px; }

.mailpanel__ask {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  resize: none;
}

.mailpanel__ask:focus { outline: none; border-color: var(--brand); }
.mailpanel__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- what is attached ---------- */

.mailclip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mailclip .chip { display: inline-flex; align-items: center; gap: 6px; }

.mailclip__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
}

.mailclip__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailclip__size { color: var(--faint); font-variant-numeric: tabular-nums; }

.mailclip__off {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--tint-2);
  color: var(--muted);
  line-height: 1;
  cursor: pointer;
}

.mailclip__off:hover { background: var(--danger); color: #fff; }

/* ---------- the composer ---------- */

.modal__box:has(.mailcompose) { max-width: 620px; }
.modal__box:has(.mailcompose) textarea { min-height: 180px; resize: vertical; }

/* Add Cc is a link under the To box, not a banner across the dialog. */
.modal__box:has(.mailcompose) .ghostlink { justify-self: start; }

/* display: grid would otherwise beat the browser's own [hidden] rule, and the
   Cc nobody asked for would sit there. */
.field[hidden] { display: none; }

/* Vlipa's row, above the boxes it fills in. */
.mailask {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(53, 50, 246, .25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(53, 50, 246, .06), rgba(107, 77, 255, .05));
}

.mailask__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mailask__row input {
  flex: 1;
  min-width: 180px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.mailask__row input:focus { outline: none; border-color: var(--brand); }
.mailask__note { min-height: 18px; font-size: 12px; }

.mailquote {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--tint);
  padding: 10px 12px;
  font-size: 12.5px;
}

.mailquote summary { cursor: pointer; color: var(--muted); font-weight: 600; }

.mailquote__body {
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
}

@media (max-width: 1080px) {
  /* Stacked, and the mailbox first: the mail is what somebody came for.

     Side by side, each column scrolls inside its own height; stacked, that
     would be two thumbs for one list, so the list runs down the page and the
     page scrolls. */
  .mailshell { height: auto; grid-template-rows: auto auto; }
  .mailpage { grid-template-columns: 1fr; }
  .mailbox { order: -1; display: block; }
  .mailbar { margin-bottom: 10px; }
  .maillist, .mailread { overflow: visible; }
  .mailpanel { min-height: 340px; }
  .mailpanel__log { max-height: 50vh; }
}

@media (max-width: 620px) {
  .mailrow { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; padding: 9px 12px; }
  .mailrow__who { grid-column: 2; }
  .mailrow__text { grid-column: 2 / -1; }
  .mailrow__acts { display: flex; position: static; transform: none; padding: 0; grid-column: 1 / -1; }
  .mailrow:hover .mailrow__when, .mailrow:focus-within .mailrow__when { visibility: visible; }
}