/*
 * P.LAB Assistant — member UI.
 *
 * LAYOUT comes from the Member Screens canvas and the eleven Member UI rules
 * in Airtable. PALETTE comes from the P.LAB design system, measured off
 * producelikeaboss.com. The canvas's dark ground and orange accent were
 * placeholders; its proportions were not.
 *
 * One mapping decision worth stating, because it is easy to undo by accident:
 * the canvas uses orange as its general-purpose accent — active nav, send
 * button, status pills, flags. In this palette that workhorse role is ACTION
 * TEAL, not gold. The design system restricts gold to a surface, never text,
 * and to one use per screen, because gold means "this one thing". Map the
 * canvas's orange onto gold and gold appears nine times, stops meaning
 * anything, and the status proposal loses its force.
 *
 * Fonts are self-hosted. Loading them from Google would mean every member's
 * browser announcing itself to a third party on a product whose pitch is that
 * their work is private.
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-900-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-900-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2');
}

:root {
  --surface-page: #fffee6;
  --surface-raised: #fffffa;
  --surface-sunken: #f6f4d8;
  --surface-invert: #0a3a42;

  --ink-strong: #0a3a42;
  --ink-body: #3f3a2e;
  --ink-muted: #6f6a5c;
  --ink-faint: #9b9686;
  --ink-on-invert: #fffee6;

  --action: #008080;
  --action-strong: #006a6a;
  --accent-gold: #e7a81e;
  --accent-rust: #c05617;
  --accent-rust-text: #a8490f;

  --line: #ddd9b8;
  --line-strong: #c3bf9c;

  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-raised: 0 1px 2px rgba(10, 58, 66, 0.06), 0 4px 12px rgba(10, 58, 66, 0.05);
  --shadow-lifted: 0 -2px 16px rgba(10, 58, 66, 0.1);

  /* The grid runs tighter than the rest of the app. A six-column sheet at
     body size does not fit, and a spreadsheet should read dense. */
  --sheet-text: 14px;
}

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

/*
 * The `hidden` attribute only sets display:none in the user-agent stylesheet,
 * so any display rule here beats it — and .field and .btn both set one.
 * Without this, hiding an element by setting `hidden` silently does nothing.
 */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--surface-page);
  color: var(--ink-body);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0;
  text-wrap: balance;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

.eyebrow {
  display: block;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent-rust-text);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
}

.btn:hover:not(:disabled) {
  background: var(--action-strong);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--quiet {
  background: transparent;
  color: var(--action-strong);
  border-color: var(--line-strong);
}
.btn--quiet:hover:not(:disabled) {
  background: var(--surface-sunken);
}

.btn--danger {
  background: transparent;
  color: var(--accent-rust-text);
  border-color: transparent;
  font-weight: 400;
}
.btn--danger:hover:not(:disabled) {
  background: rgba(192, 86, 23, 0.08);
}

/* The only button in the product with no undo. It looks like it. */
.btn--wrecking {
  background: var(--accent-rust-text);
  color: #fff;
}
.btn--wrecking:hover:not(:disabled) {
  background: #8d3d0d;
}

.btn--sm {
  padding: 5px 13px;
  min-height: 34px;
  font-size: 13px;
}

.iconbtn {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-muted);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
  font-size: 17px;
  flex-shrink: 0;
}
.iconbtn:hover {
  background: var(--surface-sunken);
  color: var(--ink-strong);
}

/* --------------------------------------------------------------- inputs -- */

.field {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink-body);
  font: inherit;
}
.field:focus {
  outline: 2px solid var(--action);
  outline-offset: -1px;
  border-color: var(--action);
}

.field--area {
  resize: none;
  min-height: 52px;
  max-height: 200px;
  line-height: 1.5;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: var(--space-1);
}

/* ------------------------------------------------------------- sign-in -- */

/* ------------------------------------------------------------- sign-in -- */
/*
   Mobile first, because most members arrive on a phone and the laptop view is
   the enhancement rather than the design. Everything below the first media
   query is the phone layout.

   The brand band is capped in height on purpose. A full-bleed hero that looks
   good on a 15-inch screen pushes the email field under the fold on a 5-inch
   one, and a sign-in page whose sign-in is off-screen is a broken page however
   handsome it is.
*/

.signin {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* ---- the brand band ---- */

.signin__brand {
  background: var(--surface-invert);
  color: var(--ink-on-invert);
  padding: clamp(20px, 6vw, 32px) var(--space-5) clamp(22px, 7vw, 36px);
  text-align: left;
}

.signin__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(15px, 4.4vw, 19px);
  line-height: 1.1;
}

.signin__tagline {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(10px, 2.9vw, 12px);
  /* Gold is a surface colour on cream (1.9:1) and must never be text there.
     On the inverted deep-teal ground it clears 5:1, which is why this is the
     one place in the app it carries type — and the one accent on this screen. */
  color: var(--accent-gold);
}

.signin__welcome {
  /* EXPLICIT, and it has to be.
     The global `h1, h2, h3` rule sets color: var(--ink-strong), which is
     #0a3a42 — the identical value as --surface-invert, this panel's
     background. Inheriting from .signin__brand does not help, because the
     element rule is more specific than inheritance. The result was deep teal
     text on deep teal: the headline rendered, occupied its full height, and
     was completely invisible. Every test passed. Only the screenshot showed a
     blank panel. */
  color: var(--ink-on-invert);
  margin: clamp(14px, 4vw, 20px) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 6.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

.signin__welcome em {
  display: block;
  margin-top: 8px;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.3;
  letter-spacing: 0;
  max-width: 26ch;
  opacity: 0.93;
}

/* ---- the form side ---- */

.signin__panel {
  display: grid;
  place-items: start center;
  padding: clamp(20px, 6vw, 32px) var(--space-5) var(--space-6);
}

.signin__card {
  width: 100%;
  max-width: 420px;
}

.signin__card h1 {
  font-size: clamp(20px, 5.4vw, 24px);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

.signin__card > p {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 var(--space-5);
}

.signin__form {
  display: grid;
  gap: var(--space-3);
}

/* A 52px control is a comfortable thumb target and stops iOS zooming the page
   on focus, which 16px type also guarantees. Both matter more here than
   anywhere else in the app: this is the one screen every member meets. */
.signin__form .field {
  min-height: 52px;
  font-size: 16px;
}

.signin__form .btn {
  min-height: 52px;
  font-size: 16px;
}

.signin__message {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-body);
}

.signin__foot {
  margin: var(--space-5) 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---- wide screens: form left, brand right ---- */

@media (min-width: 860px) {
  .signin {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }

  /* The brand band is SECOND in the markup order for the phone, and belongs on
     the right on a laptop. Ordering it here rather than reordering the markup
     keeps the phone reading order correct, which is also the reading order a
     screen reader follows. */
  .signin__brand {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-6) clamp(32px, 5vw, 64px);
  }

  .signin__panel {
    grid-column: 1;
    grid-row: 1;
    place-items: center;
    padding: var(--space-6) clamp(32px, 5vw, 64px);
  }

  .signin__wordmark { font-size: 20px; }
  .signin__tagline { font-size: 12px; }
  .signin__welcome { font-size: clamp(32px, 3.4vw, 44px); max-width: 14ch; }
  .signin__welcome em { font-size: clamp(17px, 1.6vw, 21px); max-width: 30ch; }
}

@media (prefers-reduced-motion: no-preference) {
  .signin__card { animation: signin-rise 240ms ease-out both; }
}

@keyframes signin-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- shell -- */

.shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.topbar__brand {
  font: 900 18px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  flex-shrink: 0;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar {
  display: none;
}

.topnav__item {
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-muted);
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.topnav__item:hover:not(:disabled) {
  background: var(--surface-sunken);
  color: var(--ink-strong);
}

.topnav__item--on,
.topnav__item--on:hover {
  background: var(--action);
  color: #fff;
  font-weight: 700;
}

/* December. Visible so you can see where it lives; nothing behind it. */
.topnav__item--off,
.topnav__item--off:hover {
  color: var(--ink-faint);
  cursor: not-allowed;
  background: transparent;
}

.topnav__rule {
  width: 1px;
  height: 18px;
  background: var(--line-strong);
  margin: 0 var(--space-2);
  flex-shrink: 0;
}

.topnav__note {
  padding-left: var(--space-2);
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.topbar__who {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- panes -- */

/*
 * The proportions ARE the rule. Chat is capped; the workspace takes
 * everything else. Rows have to appear in the sheet as the member speaks, and
 * a sheet squeezed into a sidebar does not give you that.
 */
.panes {
  display: flex;
  min-height: 0;
  align-items: stretch;
}

.pane {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pane--chat {
  flex: 1 1 480px;
  max-width: 540px;
  border-right: 1px solid var(--line);
  background: var(--surface-raised);
}

/* Collapsed: the Catalog is a plain spreadsheet on its own. */
.panes[data-chat='closed'] .pane--chat {
  display: none;
}

.pane--work {
  flex: 999 1 560px;
  background: var(--surface-page);
}

.pane__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--line);
}

.pane__title {
  font: 700 15px/1.3 var(--font-body);
  color: var(--ink-strong);
}
.pane__sub {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.pane__scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.reopen {
  align-self: flex-start;
  margin: var(--space-3) var(--space-5) 0;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--action-strong);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.reopen:hover {
  background: var(--surface-sunken);
}

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

.thread {
  display: grid;
  gap: var(--space-4);
}

.msg {
  display: grid;
  gap: var(--space-1);
}

.msg__who {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.msg--assistant .msg__who {
  color: var(--accent-rust-text);
}

.msg__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.55;
}

.msg--member .msg__body {
  color: var(--ink-muted);
}
.msg--refused .msg__body {
  border-left: 3px solid var(--accent-gold);
  padding-left: var(--space-4);
}

.msg__helper {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.thinking {
  color: var(--ink-muted);
  font-size: 14px;
  font-style: italic;
}

.composer {
  border-top: 1px solid var(--line);
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.composer__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.composer__hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
}

/* -------------------------------------------------------------- counts -- */

/*
 * The payoff of Chapter 1: not "30 unfinished songs" but "two nearly there,
 * two needing work, three that were only ideas". These move as rows land.
 */
.counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.count__n {
  font: 900 26px/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.count--lead .count__n {
  color: var(--action);
}
.count__label {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.counts__note {
  margin-left: auto;
  align-self: center;
  font-size: 12px;
  color: var(--ink-faint);
  max-width: 180px;
  line-height: 1.4;
}

/* ------------------------------------------------------------- toolbar -- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.toolbar__count {
  margin-right: auto;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- sheet -- */

.sheet {
  flex: 1;
  overflow: auto;
  padding: var(--space-3) var(--space-4) var(--space-6);
}

table.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--sheet-text);
}

table.grid th {
  text-align: left;
  font: 700 11px/1.3 var(--font-body);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 10px 8px;
  white-space: nowrap;
}

table.grid td {
  padding: 2px;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-body);
}

table.grid tbody tr:hover {
  background: rgba(10, 58, 66, 0.025);
}

/*
 * Every cell is editable, which means every cell is an input. They are styled
 * flat so the sheet reads as a sheet, and gain their edges on focus.
 */
.cell {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 9px 8px;
  font: inherit;
  color: inherit;
  min-height: 38px;
}
.cell:hover {
  border-color: var(--line);
}
.cell:focus {
  outline: none;
  border-color: var(--action);
  background: var(--surface-raised);
}
.cell::placeholder {
  color: var(--ink-faint);
}

.cell--title {
  font-weight: 700;
  color: var(--ink-strong);
}

.cell--select {
  appearance: none;
  cursor: pointer;
}

/* A read-only cell, sized to line up with the editable ones beside it. */
.cell--read {
  padding: 9px 8px;
  min-height: 38px;
}
.cell--muted {
  color: var(--ink-faint);
}

/*
 * The status cell is a real <select> so it stays editable, and carries its
 * status colour so the sheet is still readable at a glance. Same five levels
 * as .pill, differing in lightness rather than hue alone.
 */
.statuscell {
  font-weight: 700;
  font-size: 12.5px;
  border-radius: var(--radius-pill);
  padding: 7px 10px;
  min-height: 34px;
  margin: 2px 0;
}
.statuscell:hover {
  filter: brightness(0.97);
}

.statuscell--idea {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  color: var(--ink-muted);
}
.statuscell--demo {
  background: rgba(231, 168, 30, 0.22);
  border-color: rgba(231, 168, 30, 0.45);
  color: #6b4a00;
}
.statuscell--rough {
  background: rgba(192, 86, 23, 0.14);
  border-color: rgba(192, 86, 23, 0.35);
  color: var(--accent-rust-text);
}
.statuscell--nearly_done {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
.statuscell--released {
  background: var(--surface-invert);
  border-color: var(--surface-invert);
  color: var(--ink-on-invert);
}

.addrow {
  width: 100%;
  text-align: left;
  padding: 12px 10px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: var(--sheet-text);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.addrow:hover {
  background: var(--surface-sunken);
  color: var(--ink-strong);
}

.rowtools {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
  padding-right: var(--space-1);
}

.linkbtn {
  border: 0;
  background: transparent;
  padding: 6px 8px;
  font-size: 12.5px;
  color: var(--action-strong);
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.linkbtn:hover {
  background: var(--surface-sunken);
}
.linkbtn--danger {
  color: var(--accent-rust-text);
}
.linkbtn--danger:hover {
  background: rgba(192, 86, 23, 0.08);
}

/* --------------------------------------------------------------- pills -- */

/*
 * Five statuses that differ in LIGHTNESS, not hue alone — they have to be
 * distinguishable to someone who cannot separate the hues.
 */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pill--idea {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  color: var(--ink-muted);
}
.pill--demo {
  background: rgba(231, 168, 30, 0.22);
  border-color: rgba(231, 168, 30, 0.45);
  color: #6b4a00;
}
.pill--rough {
  background: rgba(192, 86, 23, 0.14);
  border-color: rgba(192, 86, 23, 0.35);
  color: var(--accent-rust-text);
}
.pill--nearly_done {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
.pill--released {
  background: var(--surface-invert);
  border-color: var(--surface-invert);
  color: var(--ink-on-invert);
}
.pill--pointer {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--surface-invert);
}

/* ------------------------------------------------------------- pending -- */

/*
 * Dashed is not decoration. It is the visual half of "nothing persists until
 * they say so" — a proposed row must never be mistakable for a saved one.
 */
tr.pending td {
  background: rgba(231, 168, 30, 0.06);
  border-top: 2px dashed var(--line-strong);
}
tr.pending + tr.pending td {
  border-top-style: dashed;
}

.pending__heard {
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-muted);
  padding: 0 10px 10px;
}

.pending__flag {
  font-size: 11.5px;
  color: var(--accent-rust-text);
  font-weight: 700;
  white-space: nowrap;
  padding: 9px 8px 0;
  line-height: 1.2;
}

/* The flag and the notes field share one cell without stacking into a
   double-height row. */
.pending__flag + .cell {
  padding-top: 2px;
  min-height: 28px;
}

.pendinghead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 10px;
  font-size: 13px;
  color: var(--ink-body);
}

/* ---------------------------------------------------------------- rubric -- */

.rubricrow td {
  padding: 0;
  background: var(--surface-raised);
}

.rubric {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--action);
  display: grid;
  gap: var(--space-2);
}

.rubric__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.rubric__head h3 {
  font-size: 15px;
}

.rubric__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--sheet-text);
}

/*
 * Three states, not two. A blank means "not answered" and is different from a
 * no — the server refuses to score a partial rubric, so a member has to be
 * able to say no out loud rather than leaving a box empty.
 */
.rubric__answer {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}
.rubric__answer button {
  border: 0;
  background: transparent;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
}
.rubric__answer button[aria-pressed='true'] {
  background: var(--action);
  color: #fff;
}
.rubric__answer button.no[aria-pressed='true'] {
  background: var(--accent-rust);
  color: #fff;
}

.rubric__prompt {
  padding-top: 4px;
}

.rubric__open {
  font-size: 13px;
  color: var(--accent-rust-text);
}

/*
 * Gold, used once. The design system allows it as a surface and never as
 * text, and the rule is one per screen — which is why the nav, the buttons
 * and the pills are teal. This is the thing you must not scroll past.
 */
.proposal {
  background: var(--accent-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--surface-invert);
  margin-top: var(--space-2);
}
.proposal h3 {
  font-size: 15px;
  color: var(--surface-invert);
  margin-bottom: var(--space-2);
}
.proposal p {
  margin: 0 0 var(--space-3);
  font-size: var(--sheet-text);
  color: var(--surface-invert);
  line-height: 1.5;
}
.proposal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.proposal .btn--quiet {
  background: rgba(255, 254, 230, 0.92);
  border-color: transparent;
  color: var(--surface-invert);
}

/* --------------------------------------------------------------- empty -- */

.empty {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
  max-width: 52ch;
  margin: var(--space-4) auto;
}

/* --------------------------------------------------------------- toast -- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  background: var(--surface-invert);
  color: var(--ink-on-invert);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: 14px;
  box-shadow: var(--shadow-raised);
  max-width: min(90vw, 620px);
  z-index: 40;
}

/* --------------------------------------------------------------- modal -- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 58, 66, 0.4);
  display: grid;
  place-items: center;
  padding: var(--space-5);
  z-index: 50;
}

.modal__card {
  width: 100%;
  max-width: 460px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-raised);
}
.modal__card h2 {
  font-size: 22px;
  margin-bottom: var(--space-3);
}
.modal__card p {
  font-size: 14px;
  margin: 0 0 var(--space-3);
}
.modal__card em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-rust-text);
}
.modal__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-5);
}

/* ------------------------------------------------------------ sheetbar -- */

/* Phone only. Declared here, shown in the media query. */
.sheetbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-top: 1px solid var(--line-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lifted);
  color: var(--ink-strong);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  z-index: 30;
  min-height: 52px;
}
.sheetbar__hint {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- phone -- */

@media (max-width: 900px) {
  /*
   * No room for two panels. Chat takes the screen and the Catalog pulls up
   * from the bottom — and the bar stays visible the whole time with a live
   * count, so the feedback survives: "7 songs" ticking up as you talk.
   */
  .panes {
    display: block;
    position: relative;
    height: 100%;
  }

  .pane--chat {
    max-width: none;
    height: 100%;
    border-right: 0;
    padding-bottom: 52px;
  }

  .panes[data-chat='closed'] .pane--chat {
    display: flex;
  }

  .pane--work {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 56px;
    background: var(--surface-page);
    border-top: 1px solid var(--line-strong);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lifted);
    transform: translateY(100%);
    transition: transform 220ms ease;
    z-index: 35;
  }

  .panes[data-sheet='open'] .pane--work {
    transform: translateY(0);
  }

  .sheetbar {
    display: flex;
  }

  .topnav__note,
  .counts__note {
    display: none;
  }

  .pane__head,
  .pane__scroll,
  .composer,
  .counts,
  .toolbar {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .counts {
    gap: var(--space-5);
  }

  .iconbtn,
  .reopen {
    display: none;
  }

  /* A six-column sheet does not fit a phone; it scrolls sideways in its box. */
  .sheet {
    overflow-x: auto;
  }
  table.grid {
    min-width: 680px;
  }

  /*
   * The rubric spans every column, so it inherits the table's 680px and its
   * questions run off the screen. Pin it to the viewport instead: nine
   * questions you have to scroll sideways to read are nine questions nobody
   * answers honestly.
   */
  .rubric {
    max-width: calc(100vw - var(--space-6));
  }
  .rubric__item {
    align-items: center;
  }
}

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