/* ==========================================================================
   Rego Studio CRM
   One stylesheet, no build step, no CDN. Written so the whole admin works
   the same on a studio laptop and on a phone at a market stall.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces: neutral grey, no warmth. */
  --sand:        #FAFAFA;
  --paper:       #FFFFFF;
  --line:        #E6E6E6;
  --line-soft:   #F0F0F0;
  --wash:        #FAFAFA;   /* table headers, inert cells, card footers */

  /* Ink */
  --ink:         #1A1A1A;
  --ink-2:       #4A4A4A;
  --ink-3:       #757575;
  --ink-4:       #A3A3A3;

  /* Highlight for active nav, selected rows and today. Neutral, so it reads
     as emphasis rather than as a second brand colour. */
  --hl:          #EFEFEF;
  --hl-strong:   #E4E4E4;

  /* The accent. Near black rather than a hue, so colour in this interface
     only ever means status. Figma: Button / Primary. */
  --accent:        #1A1A1A;   /* primary fill                     */
  --accent-hover:  #3E3E3E;   /* primary hover                    */
  --accent-tint:   #EFEFEF;

  /* Button greys, straight from the Figma button set. */
  --btn-secondary:         #EBEBEB;
  --btn-secondary-pressed: #D7D7D7;
  --btn-outline-line:      #C8C8C8;

  /* Icon frame on every metric card. One pair, no exceptions. */
  --chip-bg:   #EFEFF1;
  --chip-ink:  #626363;

  /* Kept as aliases so nothing that still names clay breaks. */
  --clay:        #1A1A1A;
  --clay-dark:   #3E3E3E;
  --clay-tint:   #EFEFEF;

  /* Status tones. These carry meaning, so they keep their colour, on neutral
     grey tints rather than warm ones. */
  --green:       #3F8F5F;  --green-tint:  #ECF3EE;
  --amber:       #B07D1A;  --amber-tint:  #F5F0E4;
  --rose:        #C0483F;  --rose-tint:   #F6EBEA;
  --sky:         #3A7CA5;  --sky-tint:    #EAF0F4;
  --violet:      #7A5AA8;  --violet-tint: #EFECF4;
  --slate:       #6B7280;  --slate-tint:  #EFEFF1;
  --olive:       #6E7F4F;  --olive-tint:  #EFF1EB;
  --plum:        #96476E;  --plum-tint:   #F4EBF0;
  --teal:        #3B8785;  --teal-tint:   #EAF1F1;

  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   16px;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .04);
  --shadow:      0 2px 8px rgba(0, 0, 0, .06);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, .13);

  --sidebar-w:   232px;
  --header-h:    60px;
  --tabbar-h:    64px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

.icon { display: block; flex: none; }
/* Icons used inline inside a sentence rather than as a flex child. */
.icon-inline { display: inline-block; vertical-align: -2px; margin-right: 3px; }

:focus-visible {
  outline: 2px solid var(--ink-3);
  outline-offset: 2px;
  border-radius: 4px;
}

.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;
}

/*
 * `hidden` has to win. The mobile drawer is a class that sets `display: block`
 * at narrow widths, and a class beats the user agent's rule for the attribute,
 * which would leave the drawer permanently open on a phone.
 */
[hidden] { display: none !important; }

/* ── App shell ──────────────────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px;
  border-bottom: 1px solid var(--line-soft);
}
/* The mark is the real logo now: a black monogram inside a yellow ring, on a
   transparent field. No dark tile behind it, which would swallow the
   monogram, and no radius, because the artwork is already a circle. */
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { min-width: 0; }
.brand-name { display: block; font-weight: 600; font-size: 14px; letter-spacing: -.01em; line-height: 1.25; }
.brand-sub  { display: block; font-size: 10.5px; color: var(--ink-4); margin-top: 1px; letter-spacing: .02em; line-height: 1.3; }

.nav {
  flex: 1;
  padding: 14px 10px;
  overflow-y: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 12px 10px 6px;
}
.nav-label:first-child { padding-top: 2px; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  font-size: 13.5px;
  transition: background .14s ease, color .14s ease;
}
.nav-item:hover { background: var(--line-soft); color: var(--ink); }
.nav-item .icon { color: var(--ink-4); transition: color .14s ease; }
.nav-item:hover .icon { color: var(--ink-2); }

.nav-item.active {
  background: var(--hl);
  color: var(--ink);
  font-weight: 550;
}
.nav-item.active .icon { color: var(--ink); }

.nav-count {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  background: var(--line-soft); color: var(--ink-3);
  padding: 1px 7px; border-radius: 4px;
}
.nav-item.active .nav-count { background: var(--paper); color: var(--ink-2); }

.sidebar-foot { border-top: 1px solid var(--line-soft); padding: 10px; }

.account {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background .14s ease;
}
.account:hover { background: var(--line-soft); }
.account-name { display: block; font-size: 13px; font-weight: 550; line-height: 1.3; }
.account-role { display: block; font-size: 11px; color: var(--ink-4); line-height: 1.3; }

/* ── Main column ────────────────────────────────────────────────────────── */

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

.topbar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.topbar-sub { font-size: 12px; color: var(--ink-4); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.content { padding: 24px; flex: 1; }
.content-narrow { max-width: 880px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

/*
 * Figma: Button (629:10570). Four styles, five states.
 * 12/6 padding, 6px radius, 6px gap, 13/16 Inter Medium, 14px icon, which
 * computes to a 28px control. That is right at a desk and too small under a
 * thumb, so the whole set steps up to 40px on a phone.
 */
/*
 * The bare `.btn` is the Outline style, because that is what the hundreds of
 * plain buttons already in the app are. Secondary is opt in.
 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 28px; padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--btn-outline-line);
  background: #fff;
  color: var(--ink);
  font-size: 13px; font-weight: 500; line-height: 16px;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
.btn:hover  { background: #fff; color: var(--ink); border-color: var(--ink-4); }
.btn:active { background: var(--btn-secondary); transform: translateY(1px); }
.btn:focus-visible { border-color: var(--accent); outline: none; }

.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover  { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:active { background: var(--accent); border-color: var(--accent); }
.btn-primary:focus-visible { border-width: 2px; padding: 5px 11px; }

.btn-secondary {
  background: var(--btn-secondary); border-color: transparent; color: var(--ink);
}
.btn-secondary:hover  { background: #fff; }
.btn-secondary:active { background: var(--btn-secondary-pressed); }
.btn-secondary:focus-visible { border-color: var(--accent); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink); }
.btn-ghost:hover  { background: transparent; }
.btn-ghost:active { background: transparent; }
.btn-ghost:focus-visible { border-color: var(--accent); }

.btn-dark { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-dark:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn-danger { background: #fff; border-color: #EFD8D5; color: var(--rose); }
.btn-danger:hover { background: var(--rose-tint); color: var(--rose); }

/* The filled destructive button inside the confirm modal. Figma 630:11130. */
.btn-danger-solid {
  background: #F04438; border-color: #F04438; color: #fff;
  font-weight: 600; border-radius: 8px; padding: 8px 16px;
}
.btn-danger-solid:hover { background: #D92D20; border-color: #D92D20; color: #fff; }

.btn-sm   { min-height: 26px; padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px; }
.btn-icon.btn-sm { padding: 5px; }
.btn-block { width: 100%; }
.btn:disabled, .btn.is-disabled { opacity: .4; pointer-events: none; }

@media (max-width: 900px) {
  /* A 28px target is not reachable with clay on your hands. */
  .btn    { min-height: 40px; padding: 11px 14px; }
  .btn-sm { min-height: 36px; padding: 9px 12px; }
  .btn-icon { padding: 11px; }
  .btn-icon.btn-sm { padding: 9px; }
  .btn-primary:focus-visible { padding: 10px 13px; }
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px 20px; }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.card-head h2 { font-size: 14px; font-weight: 600; }
.card-head .spacer { margin-left: auto; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--line-soft); }

/* ── Stat tiles ─────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 14px; min-height: 108px;
}
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat-label { font-size: 13px; color: var(--ink-3); }
/*
 * The icon frame on every metric card, and everywhere else the same shape is
 * used. One fill and one ink, with no exceptions: the tone classes still
 * resolve so nothing breaks, but they no longer change what you see. Colour
 * in this interface means status, and a metric is not a status.
 */
.stat-chip {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--chip-bg);
  color: var(--chip-ink);
}
.stat-chip[class*="tint-"] { background: var(--chip-bg); color: var(--chip-ink); }
.stat-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.stat-value { font-size: 27px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.stat-sub { font-size: 11.5px; font-weight: 500; color: var(--ink-4); padding-bottom: 2px; text-align: right; }
.stat-sub.up   { color: var(--green); }
.stat-sub.down { color: var(--rose); }

/* Tinted chips, shared by stat tiles and anything else needing a soft chip. */
.tint-clay   { background: var(--hl);          color: var(--clay); }
.tint-green  { background: var(--green-tint);  color: var(--green); }
.tint-amber  { background: var(--amber-tint);  color: var(--amber); }
.tint-rose   { background: var(--rose-tint);   color: var(--rose); }
.tint-sky    { background: var(--sky-tint);    color: var(--sky); }
.tint-violet { background: var(--violet-tint); color: var(--violet); }
.tint-slate  { background: var(--slate-tint);  color: var(--slate); }
.tint-olive  { background: var(--olive-tint);  color: var(--olive); }
.tint-plum   { background: var(--plum-tint);   color: var(--plum); }
.tint-teal   { background: var(--teal-tint);   color: var(--teal); }

/* ── Badges ─────────────────────────────────────────────────────────────── */

/* Chips. Square cornered at 4px and medium weight, so a status reads as a
   label rather than a pill. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
  white-space: nowrap;
}
.badge-clay   { background: var(--hl);          color: var(--ink-2); }
.badge-green  { background: var(--green-tint);  color: var(--green); }
.badge-amber  { background: var(--amber-tint);  color: #9A6A12; }
.badge-rose   { background: var(--rose-tint);   color: var(--rose); }
.badge-sky    { background: var(--sky-tint);    color: var(--sky); }
.badge-violet { background: var(--violet-tint); color: var(--violet); }
.badge-slate  { background: var(--slate-tint);  color: var(--slate); }

.dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.dot-clay { background: var(--ink-3); }  .dot-green { background: var(--green); }
.dot-amber { background: var(--amber); } .dot-rose { background: var(--rose); }
.dot-sky { background: var(--sky); }     .dot-violet { background: var(--violet); }
.dot-slate { background: var(--slate); }

/* ── Avatars ────────────────────────────────────────────────────────────── */

.avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: 99px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-2);
  background: var(--hl-strong);
  overflow: hidden;
}
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-lg { width: 52px; height: 52px; font-size: 17px; }
/* Tone classes are kept as no-ops so existing markup stays valid. */
/* Every avatar is the same light grey. The tone class is still written out,
   so a future theme could colour them again, but a wall of coloured initials
   reads as decoration rather than information. */
.avatar-clay, .avatar-olive, .avatar-slate,
.avatar-plum, .avatar-teal, .avatar-amber { background: var(--hl-strong); color: var(--ink-2); }

.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--paper); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.toolbar {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.toolbar .spacer { margin-left: auto; }

.search {
  position: relative;
  flex: 1 1 240px; max-width: 340px;
}
.search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-4); }
.search input {
  width: 100%; height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.search input::placeholder { color: var(--ink-4); }
.search input:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--hl-strong); }

.seg {
  display: inline-flex; padding: 3px;
  background: var(--line-soft); border-radius: var(--radius-sm);
}
.seg a {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  transition: background .14s ease, color .14s ease;
}
.seg a.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
  font-size: 12.5px; color: var(--ink-3);
  transition: all .14s ease;
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.field { margin-bottom: 15px; }
.field label, .label {
  display: block;
  font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  margin-bottom: 6px;
}
.hint { font-size: 11.5px; color: var(--ink-4); margin-top: 5px; }

.input, .select, .textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 14px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--hl-strong);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }

.select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C736B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.row-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.row-full { grid-column: 1 / -1; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--clay); flex: none; }

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .addon {
  display: grid; place-items: center;
  padding: 0 12px;
  border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--line-soft);
  font-size: 13px; color: var(--ink-3);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table th {
  text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4);
  padding: 11px 18px;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--wash); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .muted { color: var(--ink-3); font-size: 13px; }
.table .strong { font-weight: 550; }
.table .nowrap { white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; }

.cell-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-person .who { min-width: 0; }
/* Flex rather than block so an inline badge ("you") sits beside the name
   instead of dropping to its own line and pushing the row out of alignment. */
.cell-person .who b { display: flex; align-items: center; gap: 6px; font-weight: 550; font-size: 13.5px; }
.cell-person .who span { display: block; font-size: 12px; color: var(--ink-4); }

/* ── Kanban ─────────────────────────────────────────────────────────────── */

.board {
  display: flex; gap: 14px;
  overflow-x: auto; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.board-col {
  flex: 0 0 272px; min-width: 272px;
  background: var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
  align-self: flex-start;
  max-height: calc(100vh - 260px);
  display: flex; flex-direction: column;
}
.board-col.drop { outline: 2px dashed var(--ink-4); outline-offset: -3px; }
.board-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 11px;
  font-size: 12.5px; font-weight: 600;
}
.board-head .count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.8); color: var(--ink-3);
  padding: 1px 8px; border-radius: 4px;
}
.board-body { overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }

.lead-card, .board-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: box-shadow .16s ease, transform .16s ease;
}
.lead-card:hover, .board-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.lead-card.dragging, .board-card.dragging { opacity: .45; }
.lead-card h4, .board-card h4 { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.lead-card .sub, .board-card .sub { font-size: 12px; color: var(--ink-4); margin-bottom: 9px; }
.lead-card .meta, .board-card .meta {
  display: flex; align-items: center; gap: 8px;
  padding-top: 9px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--ink-3);
}
.lead-card .value, .board-card .value { font-weight: 600; color: var(--ink); }

/* ── Panels and modals ──────────────────────────────────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(26, 22, 20, .38);
  backdrop-filter: blur(2px);
  animation: fade-in .18s ease both;
  display: flex; justify-content: flex-end;
}
.overlay.center { align-items: center; justify-content: center; padding: 20px; }

.panel {
  width: min(560px, 100%);
  background: var(--paper);
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slide-in .26s cubic-bezier(.32,.72,0,1) both;
}
.modal {
  width: min(520px, 100%);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: zoom-in .18s ease both;
  max-height: 90vh; display: flex; flex-direction: column;
}
.panel-head, .modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.panel-head h2, .modal-head h2 { font-size: 15px; font-weight: 600; }
.panel-head .close, .modal-head .close { margin-left: auto; color: var(--ink-4); padding: 4px; border-radius: 6px; }
.panel-head .close:hover, .modal-head .close:hover { background: var(--line-soft); color: var(--ink); }
.panel-body, .modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.panel-foot, .modal-foot {
  display: flex; gap: 9px; justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--wash);
  flex: none;
}

@keyframes fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes slide-in { from { transform: translateX(100%) } to { transform: none } }
@keyframes zoom-in  { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }

/* ── Entry motion ───────────────────────────────────────────────────────── */

/*
 * Content lifts in rather than snapping. Applied by app.js on load, which
 * means a page with JavaScript off simply shows everything at once, which is
 * the correct fallback: motion is decoration, never the thing that reveals it.
 *
 * Stagger comes from --enter-delay, set per element. `both` fill holds the
 * element invisible through its own delay, otherwise every card flashes at
 * full opacity first and then animates.
 */
@keyframes enter-up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.js .enter {
  animation: enter-up 420ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}

/* Tap feedback. A card that answers the finger feels solid on a phone. */
.lead-card:active, .board-card:active { transform: scale(.985); }
.stat { transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card { transition: box-shadow .18s ease; }
.nav-item, .tabbar a { -webkit-tap-highlight-color: transparent; }
.tabbar a:active .icon { transform: scale(.88); }
.tabbar a .icon { transition: transform .16s cubic-bezier(.22,1,.36,1); }
.badge { transition: background .14s ease; }

/* The clock button deserves a little life, it is pressed twice a day. */
@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 143, 95, .32) }
  70%      { box-shadow: 0 0 0 9px rgba(63, 143, 95, 0) }
}
.on-clock { animation: pulse-soft 2.4s ease-out infinite; }

/* ── Detail rows ────────────────────────────────────────────────────────── */

.deflist { display: grid; gap: 0; }
.deflist div {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.deflist div:last-child { border-bottom: 0; }
.deflist dt { width: 140px; flex: none; color: var(--ink-4); font-size: 12.5px; }
.deflist dd { margin: 0; flex: 1; min-width: 0; }

.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: var(--line);
}
.timeline li { position: relative; padding-bottom: 16px; }
.timeline li::before {
  content: ''; position: absolute; left: -22px; top: 5px;
  width: 11px; height: 11px; border-radius: 99px;
  background: var(--paper); border: 2px solid var(--clay);
}
.timeline b { display: block; font-size: 13px; font-weight: 550; }
.timeline span { font-size: 12px; color: var(--ink-4); }

/* ── Flash ──────────────────────────────────────────────────────────────── */

.flash-stack {
  position: fixed; top: 16px; right: 16px; z-index: 90;
  display: flex; flex-direction: column; gap: 9px;
  max-width: min(400px, calc(100vw - 32px));
}
/*
 * Toast. Figma 630:10999 (success), 630:11011 (warning), 630:11046 (error).
 * A solid tinted field rather than a white card with a coloured edge: 16px
 * padding, 12px radius, 20px icon, 8px gap, 12px medium text on black.
 */
.flash {
  display: flex; align-items: center; gap: 8px;
  padding: 16px;
  background: #C9F8E2;
  border: 0;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 12px; font-weight: 500; line-height: 1.54;
  color: #000;
  animation: fade-in .2s ease both;
}
.flash.warning { background: #FDE9CE; }
.flash.error   { background: #FFE7E0; }

.flash .icon { flex: none; width: 20px; height: 20px; color: #0B8F55; }
.flash.warning .icon { color: #C77B10; }
.flash.error   .icon { color: #E0523F; }

.flash > span { flex: 1; min-width: 0; }
.flash button { flex: none; color: rgba(0, 0, 0, .45); }
.flash button:hover { color: #000; }

/* ── Empty state ────────────────────────────────────────────────────────── */

.empty { text-align: center; padding: 56px 24px; }
.empty .chip-round {
  width: 48px; height: 48px; margin: 0 auto 14px;
  border-radius: 99px; background: var(--hl); color: var(--ink-3);
  display: grid; place-items: center;
}
.empty h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.empty p { font-size: 13.5px; color: var(--ink-3); max-width: 340px; margin: 0 auto 18px; }

/* ── Progress and meters ────────────────────────────────────────────────── */

.meter { height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 99px; background: var(--ink-3); }
.meter.green i { background: var(--green); }
.meter.amber i { background: var(--amber); }
.meter.rose  i { background: var(--rose); }

/*
 * Column chart, drawn with divs so nothing has to be loaded.
 * Figma 634:11641: 16px bars, fully rounded at 8px, the axis pushed out to a
 * row of its own under a hairline, and a legend carrying the figure.
 */
.bars {
  display: flex; align-items: flex-end; gap: 12px;
  height: 150px; padding-bottom: 4px;
}
.bars .bar {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.bars .bar i {
  display: block; width: 16px;
  background: var(--line-soft);
  border-radius: 8px;
  transition: background .2s ease;
}
.bars .bar.on i { background: var(--accent); }

.chart-axis {
  display: flex; gap: 12px; padding: 8px 0 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.chart-axis span {
  flex: 1; text-align: center;
  font-size: 11px; color: var(--ink-3);
}

.chart-legend { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.chart-legend span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); flex: none; }
.chart-legend b { color: var(--ink); font-weight: 700; }

/* ── Pagination ─────────────────────────────────────────────────────────── */

.pager { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 16px; }
.pager .info { font-size: 12.5px; color: var(--ink-4); }
.pager .links { display: flex; gap: 6px; }

/* ── Print (quotes and invoices) ────────────────────────────────────────── */

.doc-sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 820px;
}
.doc-head { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.doc-title { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.doc-meta { font-size: 13px; color: var(--ink-3); text-align: right; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 28px; }
.doc-parties h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); margin-bottom: 7px; }
.doc-total-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; }
.doc-total-row.grand {
  border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 12px;
  font-size: 17px; font-weight: 600;
}

@media print {
  .sidebar, .topbar, .tabbar, .toolbar, .no-print, .flash-stack { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
  .doc-sheet { border: 0; padding: 0; max-width: none; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

.tabbar, .drawer, .mobile-only { display: none; }

@media (max-width: 900px) {
  .sidebar { display: none; }

  .topbar { padding: 0 14px; height: 56px; }
  .topbar h1 { font-size: 15px; }
  .content { padding: 16px 14px calc(var(--tabbar-h) + 20px); }

  .mobile-only { display: flex; }
  .desktop-only { display: none !important; }

  /* The list screens become card stacks: a table scrolled sideways on a phone
     is unusable, so each row is restacked with its column name as a label. */
  .table-stack thead { display: none; }
  .table-stack tbody tr {
    display: block;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line-soft);
  }
  .table-stack tbody tr:hover { background: transparent; }
  .table-stack td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 4px 0; border: 0; text-align: left;
  }
  .table-stack td::before {
    content: attr(data-label);
    font-size: 11.5px; color: var(--ink-4); font-weight: 500;
    flex: none;
  }
  .table-stack td.num { justify-content: space-between; }
  .table-stack td.primary {
    padding-bottom: 8px;
  }
  .table-stack td.primary::before { display: none; }
  .table-stack td.actions { justify-content: flex-end; padding-top: 9px; }
  .table-stack td.actions::before { display: none; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 13px 14px; min-height: 92px; gap: 10px; }
  .stat-value { font-size: 22px; }
  .stat-label { font-size: 12px; }

  .row, .row-3 { grid-template-columns: 1fr; }

  .board-col { flex: 0 0 82vw; min-width: 82vw; max-height: none; }

  .panel, .modal { width: 100%; }
  .panel { height: 100%; }
  .overlay.center { padding: 0; align-items: flex-end; }
  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; }

  .search { max-width: none; flex: 1 1 100%; }
  .toolbar .spacer { display: none; }

  /* The clock card stacks, and its button spans the width. A primary action
     hanging off the right edge on a phone is a thumb stretch for no reason. */
  .clock-row { flex-direction: column; align-items: stretch !important; }
  .clock-row > form { margin-left: 0 !important; width: 100%; }
  .clock-row > form .input { width: 100% !important; }
  .clock-row .btn { width: 100%; }

  /* The activity feed restacks into a tight two line card. The icon cell and
     the column labels are noise once each row is its own block. */
  .activity-table .act-icon { display: none; }
  .activity-table td::before { display: none; }
  .activity-table td { padding: 2px 0; }
  .activity-table td.primary { padding-bottom: 6px; }
  .activity-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .activity-table td.primary { flex: 1 1 100%; }
  .activity-table td:not(.primary) { flex: 0 0 auto; }

  .doc-sheet { padding: 22px; }
  .doc-head, .doc-parties { grid-template-columns: 1fr; flex-direction: column; gap: 16px; }
  .doc-meta { text-align: left; }

  .flash-stack { top: auto; bottom: calc(var(--tabbar-h) + 12px); left: 12px; right: 12px; max-width: none; }

  /* Bottom tab bar: the five things reached most often on a phone. */
  .tabbar {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10.5px; color: var(--ink-4); font-weight: 500;
  }
  .tabbar a.active { color: var(--clay); }
  .tabbar a .icon { width: 21px; height: 21px; }

  /* Slide-out drawer for everything not on the tab bar. */
  .drawer { display: block; }
  .drawer-panel {
    position: fixed; inset: 0 auto 0 0; z-index: 70;
    width: min(290px, 84vw);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    animation: drawer-in .24s cubic-bezier(.32,.72,0,1) both;
  }
  @keyframes drawer-in { from { transform: translateX(-100%) } to { transform: none } }

  .btn { height: 42px; }
  .btn-sm { height: 34px; }
  .input, .select, .textarea { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming */
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .topbar-actions .btn span { display: none; }
  .topbar-actions .btn { width: 42px; padding: 0; }
}

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

/* ── Login ──────────────────────────────────────────────────────────────── */

.auth {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, #F2F2F2 0%, transparent 62%),
    radial-gradient(700px 400px at 100% 100%, #F4F4F4 0%, transparent 58%),
    var(--sand);
}
.auth-card {
  width: min(400px, 100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(26,22,20,.10);
  padding: 32px;
}
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.auth h1 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.auth .lede { font-size: 13.5px; color: var(--ink-3); margin-bottom: 24px; }
.auth-foot { text-align: center; font-size: 12px; color: var(--ink-4); margin-top: 22px; }

.alert {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--radius-sm);
  font-size: 13px; margin-bottom: 16px;
}
.alert-error { background: var(--rose-tint); color: var(--rose); }
.alert-info  { background: var(--sky-tint);  color: var(--sky); }
.alert-warn  { background: var(--amber-tint); color: #9A6A12; }
.alert-ok    { background: var(--green-tint); color: var(--green); }

/* ── Utilities ──────────────────────────────────────────────────────────── */

.flex  { display: flex; align-items: center; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-0 { margin-top: 0 } .mt-8 { margin-top: 8px } .mt-16 { margin-top: 16px } .mt-24 { margin-top: 24px }
.mb-0 { margin-bottom: 0 } .mb-8 { margin-bottom: 8px } .mb-16 { margin-bottom: 16px } .mb-24 { margin-bottom: 24px }
.muted  { color: var(--ink-3); }
.muted2 { color: var(--ink-4); }
.small  { font-size: 12.5px; }
.tiny   { font-size: 11.5px; }
.strong { font-weight: 600; }
.right  { text-align: right; }
.center { text-align: center; }
.nums   { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Catalogue grid: three or four across on a laptop, two on a phone. A single
   full-width column would give each piece a photo the size of the screen. */
.piece-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 14px;
}
.piece-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* Two lines, then ellipsis: a long piece name should wrap, not be cut at
   the first word, but it must not push the price row out of line either. */
.piece-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

@media (max-width: 900px) {
  .piece-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .piece-grid .card > div:last-child { padding: 11px 12px; }
  .piece-head { flex-direction: column; gap: 5px; }
}

.copybox {
  display: flex; gap: 8px; align-items: stretch;
  margin-top: 10px;
}
.copybox input {
  flex: 1; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--line-soft); color: var(--ink-2);
}

/* ── Activity bell ──────────────────────────────────────────────────────── */

.bell { position: relative; }
.bell-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px;
  background: var(--clay); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.bell.has-new .icon { color: var(--clay); }

@media (max-width: 480px) {
  /* The bell keeps its label-free width even where other buttons shed theirs. */
  .topbar-actions .bell { width: 42px; }
}

/* ── Growth Hub ─────────────────────────────────────────────────────────── */

/* Spacing steps the hub needed that the rest of the app had not asked for. */
.gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.mb-6 { margin-bottom: 6px } .mb-10 { margin-bottom: 10px }
.mb-12 { margin-bottom: 12px } .mb-20 { margin-bottom: 20px }
.mt-12 { margin-top: 12px } .mt-20 { margin-top: 20px }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }

/* Content cards. Wider than catalogue pieces because they carry a sentence of
   hook rather than a photo, and one column on a phone so the hook stays
   readable instead of wrapping every three words. */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}
.content-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.content-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.content-card-body { display: block; padding: 14px 15px 12px; flex: 1; color: inherit; }
.content-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  margin-bottom: 5px; color: var(--ink);
}
.content-hook {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  margin-bottom: 10px;
}
.content-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.content-card-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 9px 15px;
  border-top: 1px solid var(--line-soft);
  background: var(--wash);
}
.content-card-foot form { display: flex; }

/* A hook is the one line that decides whether anything else gets watched, so
   it gets its own block rather than a row in the definition list. */
.quote-block {
  background: var(--wash);
  border-left: 2px solid var(--ink-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
}

/* Carousel studio. The number stays pinned beside the box so a designer can
   count slides down the left edge. */
.slide-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.slide-no {
  flex: none; width: 26px; height: 26px; margin-top: 5px;
  display: grid; place-items: center;
  border-radius: 99px; background: var(--hl-strong);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.slide-no-new { background: transparent; border: 1px dashed var(--line); color: var(--ink-4); }
.slide-row textarea { resize: vertical; }

/* Metric readouts, on the panel and the performance page. */
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 14px;
}
.metric-row p:last-child { font-size: 17px; font-variant-numeric: tabular-nums; }

/* The hub's week strip: seven days across on a laptop, scrollable on a phone
   rather than crushed into unreadable columns. */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.week-day {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  min-height: 108px;
  background: var(--paper);
}
.week-day.is-today { background: var(--hl); border-color: var(--hl-strong); }
.week-day .day-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px;
}

/* Pillar tiles on the hub. */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.pillar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 13px; background: var(--paper); color: inherit;
  transition: border-color .15s ease;
}
.pillar:hover { border-color: var(--ink-4); }
.pillar b { font-size: 12.5px; font-weight: 600; display: block; line-height: 1.3; }
.pillar span { font-size: 11.5px; color: var(--ink-4); }

@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1fr; }
  .week-strip {
    grid-template-columns: repeat(7, 62vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    margin: 0 -16px;
    padding-left: 16px; padding-right: 16px;
  }
  .week-day { scroll-snap-align: start; }
  .pillar-grid { grid-template-columns: 1fr 1fr; }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Permissions board ──────────────────────────────────────────────────── */

/* One block per person rather than a matrix table. A grid of ticks across
   nine columns is unreadable on a phone, and this is a screen the studio
   owner will often open on one. */
.perm-person { padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.perm-person:first-of-type { border-top: 0; }
.perm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.perm-switches {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px 16px;
  transition: opacity .15s ease;
}
.perm-grid.is-following { opacity: .45; }
@media (max-width: 600px) {
  .perm-person { padding: 14px 16px; }
  .perm-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Row actions menu ───────────────────────────────────────────────────── */

/* Built on <details>, so it opens and closes with no JavaScript at all. The
   script only adds the niceties: closing the others, and Escape. An earlier
   version hid the list with the `hidden` attribute and relied on the script
   to reveal it, which meant one stale cached script made every menu dead. */
.menu { position: relative; display: inline-block; }
.menu > summary {
  list-style: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ''; }
.menu[open] > summary { background: var(--line-soft); color: var(--ink); }

.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 194px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 5px;
  text-align: left;
}
.menu-list a,
.menu-list button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--ink-2); text-align: left;
  white-space: nowrap;
}
.menu-list a:hover,
.menu-list button:hover { background: var(--line-soft); color: var(--ink); }
.menu-list .icon { color: var(--ink-4); }
.menu-list a:hover .icon,
.menu-list button:hover .icon { color: var(--ink-2); }
.menu-list button.danger { color: var(--rose); }
.menu-list button.danger:hover { background: var(--rose-tint); }
.menu-list button.danger .icon { color: var(--rose); }
.menu-sep { display: block; height: 1px; margin: 5px 4px; background: var(--line-soft); }
.menu-list form { margin: 0; }

/* A table cell clips an absolutely positioned menu on some browsers, so the
   row it sits in stops clipping while its menu is open. */
tr:has(.menu[open]) td { overflow: visible; }

/* On a narrow screen the menu would hang off the edge of a stacked row, so
   it spans the width instead of anchoring to the button. */
@media (max-width: 700px) {
  .menu { position: static; }
  .menu-list { right: 16px; left: 16px; min-width: 0; }
}

/* The move button on a board card. Down a column of seventy cards the label
   repeated seventy times is noise, so only the arrow shows until the card is
   hovered. The full wording stays in the title for anyone who needs it, and
   keyboard focus reveals it too. */
.board-card-move { border-top: 1px solid var(--line-soft); margin-top: 10px; padding-top: 7px; }
.board-card-move button {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-size: 11.5px; font-weight: 500; color: var(--ink-4);
  transition: color .14s ease;
}
.board-card-move button span {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .2s ease, opacity .16s ease;
}
.board-card:hover .board-card-move button { color: var(--ink-2); }
.board-card:hover .board-card-move button span,
.board-card-move button:focus-visible span { max-width: 180px; opacity: 1; }
.board-card-move button:hover { color: var(--ink); }

/* ── Confirm modal ──────────────────────────────────────────────────────── */

/* Figma 630:11121. Replaces the browser's confirm box, which cannot be
   styled, says "127.0.0.1 says", and reads like an error rather than a
   decision. */
.confirm-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(17, 17, 17, .32);
  display: grid; place-items: center;
  padding: 20px;
  animation: fade-in .14s ease both;
}
.confirm-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 16px 32px rgba(12, 12, 13, .1), 0 4px 8px rgba(12, 12, 13, .05);
}
.confirm-head { display: flex; flex-direction: column; gap: 6px; }
.confirm-head h2 { font-size: 16px; font-weight: 600; color: #1F1F1F; line-height: 1.3; }
.confirm-head p  { font-size: 12px; font-weight: 400; color: #5F6368; line-height: 1.4; }

.confirm-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.confirm-cancel {
  font-size: 13px; font-weight: 600; color: #1F1F1F;
  padding: 8px 0; background: none; border: 0;
}
.confirm-cancel:hover { color: #000; }

@media (max-width: 480px) {
  /* Stacked and full width, with the destructive action last so it is not
     the first thing a thumb lands on. */
  .confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .confirm-actions .btn { width: 100%; }
  .confirm-cancel { width: 100%; text-align: center; }
}


/* ── Filter dropdown ────────────────────────────────────────────────────── */

/*
 * Figma 623:11639. Replaces the native <select> in every toolbar. Built on
 * <details> so it opens with no JavaScript, and every option is a plain link
 * carrying the filter in the query string, so choosing one is a normal page
 * load and the back button behaves.
 */
.dd { position: relative; display: inline-block; }

.dd > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 6px 12px;
  border: 1px solid var(--btn-outline-line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px; font-weight: 500; line-height: 16px; color: var(--ink);
  white-space: nowrap; cursor: pointer;
  transition: border-color .14s ease;
}
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::marker { content: ''; }
.dd > summary:hover { border-color: var(--ink-4); }
.dd[open] > summary { border-color: var(--accent); }
.dd > summary .dd-caret { margin-left: auto; color: var(--ink-4); transition: transform .16s ease; }
.dd[open] > summary .dd-caret { transform: rotate(180deg); }
/* A chosen value is the thing to notice, so it carries the ink weight. */
.dd.is-set > summary { font-weight: 600; }
.dd.is-set > summary .dd-dot {
  width: 6px; height: 6px; border-radius: 99px; background: var(--accent); flex: none;
}

.dd-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 45;
  min-width: 220px; max-width: 280px;
  background: #fff;
  border: 1px solid #DFE4ED;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(12, 12, 13, .1), 0 4px 8px rgba(12, 12, 13, .05);
  overflow: hidden;
}
.dd-head {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 12px 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.dd-head .icon { color: var(--ink-4); }

.dd-search { padding: 0 12px 8px; }
.dd-search label {
  display: flex; align-items: center; gap: 8px;
  background: #F1F3F7; border-radius: 6px; padding: 6px 10px;
}
.dd-search .icon { color: var(--ink-4); }
.dd-search input {
  border: 0; background: none; outline: none; width: 100%;
  font-size: 12px; color: var(--ink);
}
.dd-search input::placeholder { color: var(--ink-4); }

.dd-list { border-top: 1px solid #DFE4ED; padding: 4px 0; max-height: 280px; overflow-y: auto; }
.dd-list a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 12px; color: var(--ink);
}
.dd-list a:hover { background: var(--line-soft); }
.dd-list a .icon { color: var(--ink-4); flex: none; }
.dd-list a.is-on { font-weight: 600; }
.dd-list a.is-on .icon { color: var(--accent); }
.dd-list a .dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-list .dd-none { padding: 10px 12px; font-size: 12px; color: var(--ink-4); }

@media (max-width: 700px) {
  /*
   * A sheet from the bottom rather than a panel hanging off the trigger.
   * Anchoring to a small control near the edge of a narrow screen pushes the
   * list off the side or behind the keyboard; a sheet always lands in the
   * same place and sits within thumb reach.
   */
  .dd-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-width: none; min-width: 0;
    border-radius: 14px 14px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: 0 -12px 32px rgba(12, 12, 13, .16);
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheet-up .18s cubic-bezier(.22, 1, .36, 1) both;
  }
  .dd-head { padding: 16px 16px 10px; font-size: 14px; }
  .dd-search { padding: 0 16px 12px; }
  .dd-search label { padding: 10px 12px; }
  .dd-list { max-height: 54vh; padding: 4px 0 8px; }
  .dd-list a { padding: 13px 16px; font-size: 14px; }

  /* The dimmed field behind the sheet, drawn by the open dropdown itself so
     no extra element is needed. */
  .dd[open] > summary::after {
    content: ''; position: fixed; inset: 0; z-index: 44;
    background: rgba(17, 17, 17, .3);
  }
}

@keyframes sheet-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }


/* ── Donut chart ────────────────────────────────────────────────────────── */

/*
 * Pipeline by stage. Drawn with a conic gradient rather than SVG or a
 * library: one element, no requests, and the sweep animates by interpolating
 * a single custom property.
 */
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

@property --donut-sweep {
  syntax: '<number>'; inherits: false; initial-value: 0;
}

/* The wrapper is unmasked so the figure in the middle survives; only the
   ring itself is masked. */
.donut {
  position: relative; flex: none;
  width: 164px; height: 164px;
  animation: donut-in .75s cubic-bezier(.22, 1, .36, 1) both;
}
.donut-ring {
  position: absolute; inset: 0;
  border-radius: 99px;
  background: conic-gradient(from -90deg, var(--donut-stops));
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 57.5%);
  mask: radial-gradient(circle, transparent 57%, #000 57.5%);
}
@keyframes donut-in {
  from { transform: rotate(-16deg) scale(.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.donut-hole {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  pointer-events: none;
}
.donut-hole b { display: block; font-size: 22px; font-weight: 600; line-height: 1.1; }
.donut-hole span { display: block; font-size: 11px; color: var(--ink-4); margin-top: 2px; }

.donut-key { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.donut-key a, .donut-key div {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 6px;
  font-size: 12.5px; color: var(--ink-2);
  transition: background .14s ease;
}
.donut-key a:hover { background: var(--line-soft); }
.donut-key i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-key .k-name { flex: 1; min-width: 0; color: var(--ink); font-weight: 500; }
.donut-key .k-num  { font-variant-numeric: tabular-nums; color: var(--ink-3); }

.donut-empty {
  width: 164px; height: 164px; border-radius: 99px; flex: none;
  border: 14px solid var(--line-soft);
}

@media (max-width: 600px) {
  .donut-wrap { flex-direction: column; align-items: stretch; }
  .donut, .donut-empty { margin: 0 auto; }
  .donut-key { width: 100%; }
}

/* ── Settings tabs ──────────────────────────────────────────────────────── */

/* A sub header along the top of Settings, one section shown at a time, so the
   page stops being one long scroll of unrelated things. */
.subnav {
  display: flex; gap: 4px; align-items: center;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 12px;
  font-size: 13px; font-weight: 500; color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .14s ease, border-color .14s ease;
}
.subnav a .icon { color: var(--ink-4); }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.subnav a.active .icon { color: var(--ink); }
.subnav .subnav-count {
  font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
  background: var(--line-soft); color: var(--ink-3);
}

/* ── Permissions table ──────────────────────────────────────────────────── */

/* A proper matrix: people down the side, sections across the top, one tick
   per cell. It scrolls horizontally rather than reflowing, because a matrix
   that wraps stops being a matrix. */
.perm-table-wrap { overflow-x: auto; }
.perm-table { border-collapse: separate; border-spacing: 0; min-width: 760px; }
.perm-table th, .perm-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
}
.perm-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 10px 8px;
}
.perm-table th.perm-person, .perm-table td.perm-person {
  position: sticky; left: 0; z-index: 1;
  background: var(--paper);
  text-align: left;
  min-width: 210px;
  box-shadow: 1px 0 0 var(--line-soft);
}
.perm-table thead th.perm-person { z-index: 3; background: var(--wash); }
.perm-table tbody tr:hover td { background: var(--wash); }
.perm-table tbody tr:hover td.perm-person { background: var(--wash); }
.perm-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
.perm-table .perm-locked { color: var(--ink-4); }
.perm-table td.perm-money { box-shadow: inset 1px 0 0 var(--line); }
.perm-table th.perm-money { box-shadow: inset 1px 0 0 var(--line); }
.perm-who { display: flex; align-items: center; gap: 10px; }
.perm-who b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.perm-who span { display: block; font-size: 11px; color: var(--ink-4); }
.perm-table .is-following input { opacity: .35; }

/* On the sign in and activation screens the mark is the only branding on the
   page, so it gets a little more room. */
.auth-brand .brand-mark { width: 46px; height: 46px; }

/* ── The clock face ───────────────────────────────────────────────────
   An analogue dial rather than a number, because a shift is something you
   glance at. The ring fills over the minute, the hand sweeps the second,
   and a pause freezes both rather than hiding them. */
.clock-row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.clock-copy { min-width: 0; }
.clock-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.clock-actions .clock-stop { display: flex; gap: 8px; }
.clock-actions .clock-stop .input { width: 200px; }

.clock-face { position: relative; width: 120px; height: 120px; flex: 0 0 auto; }
.clock-face svg { display: block; }
.dial-track { fill: none; stroke: var(--chip-bg, #EFEFF1); stroke-width: 6; }
.dial-arc {
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  transition: stroke-dashoffset .3s linear;
}
.dial-ticks line { stroke: var(--ink-4); stroke-width: 1.5; stroke-linecap: round; opacity: .45; }
.dial-hand {
  stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  transform-origin: 60px 60px;
}
.clock-read {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}

/* Idle: the dial is there but quiet, so the card does not look broken before
   anybody has clocked in. */
.clock-face:not(.is-running):not(.is-paused) .dial-arc,
.clock-face:not(.is-running):not(.is-paused) .dial-hand { stroke: var(--ink-4); opacity: .3; }
.clock-face:not(.is-running):not(.is-paused) .clock-read { color: var(--ink-4); }

.clock-face.is-paused .dial-arc,
.clock-face.is-paused .dial-hand { stroke: #B4802A; }
.clock-face.is-paused .clock-read { color: #B4802A; }

@media (max-width: 700px) {
  .clock-row { flex-direction: column; align-items: center; text-align: center; }
  .clock-copy { text-align: center; }
  .clock-actions { margin-left: 0; width: 100%; flex-direction: column; }
  .clock-actions form, .clock-actions .btn { width: 100%; }
  .clock-actions .clock-stop { flex-direction: column; }
  .clock-actions .clock-stop .input { width: 100%; }
}

/* ── Password reveal ──────────────────────────────────────────────────
   The eye sits inside the field rather than beside it, so the form keeps one
   column on a phone. Hidden entirely without script, since a button that
   does nothing is worse than no button. */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 42px; }
.pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 34px; height: 34px; display: none;
  align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-4); border-radius: 6px;
}
.pw-eye:hover { color: var(--ink-1); background: var(--wash); }
.pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.js .pw-eye { display: flex; }

/* ── Messages ─────────────────────────────────────────────────────────
   Two columns on a desktop, one on a phone: who you are talking to, and the
   thread itself. Nothing clever, because this is a note to a colleague. */
.msg-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.msg-people { max-height: 70vh; overflow: auto; }
.msg-person {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  color: inherit; text-decoration: none;
}
.msg-person:hover { background: var(--wash); }
.msg-person.active { background: var(--wash); box-shadow: inset 2px 0 0 var(--accent); }
.msg-person b { display: block; font-size: 13px; font-weight: 600; }
.msg-person span.role { display: block; font-size: 11px; color: var(--ink-4); }
.msg-count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-thread { display: flex; flex-direction: column; gap: 10px; padding: 18px; max-height: 56vh; overflow: auto; }
.msg-bubble { max-width: 78%; padding: 10px 13px; border-radius: 10px; background: var(--chip-bg, #EFEFF1); }
.msg-bubble p { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; margin: 0; }
.msg-bubble .msg-when { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-4); }
.msg-bubble.mine { align-self: flex-end; background: var(--accent); }
.msg-bubble.mine p { color: #fff; }
.msg-bubble.mine .msg-when { color: rgba(255,255,255,.62); }
.msg-send { display: flex; gap: 8px; align-items: flex-end; }
.msg-send .textarea { min-height: 44px; }

@media (max-width: 900px) {
  .msg-layout { grid-template-columns: 1fr; }
  .msg-people { max-height: none; }
}

/* A work log entry that has been read and signed off. */
.log-approved { display: inline-flex; align-items: center; gap: 5px; color: #2F7A4F; font-size: 11px; font-weight: 500; }
.log-note {
  margin-top: 8px; padding: 9px 11px; border-radius: 6px;
  background: var(--wash); border-left: 2px solid var(--accent);
}
.log-note p { font-size: 12.5px; line-height: 1.5; margin: 0; white-space: pre-wrap; }
.log-note .who { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-4); }

/* ── Channels and threads ─────────────────────────────────────────────
   Three columns on a desktop: the rooms, the room, and one conversation
   pulled out of it. The panel folds underneath on a laptop and the room
   list collapses to a scrolling strip on a phone. */
.avatar-md { width: 36px; height: 36px; font-size: 13px; border-radius: 9px; }
.avatar-xs { width: 20px; height: 20px; font-size: 9px; border-radius: 5px; }

.chat-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.chat-layout.has-panel { grid-template-columns: 240px minmax(0, 1fr) 360px; }

.chat-rooms { align-self: start; max-height: 74vh; overflow: auto; }
.chat-room {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.chat-room:hover { background: var(--wash); }
.chat-room.active { background: var(--wash); box-shadow: inset 2px 0 0 var(--accent); }
.chat-room-hash { color: var(--ink-4); display: inline-flex; }
.chat-room b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.chat-room-sub { display: block; font-size: 11px; color: var(--ink-4); }
.chat-room-star { color: #B4802A; display: inline-flex; }
.chat-room .msg-count { background: #C7452F; }

.chat-main, .chat-panel { display: flex; flex-direction: column; min-height: 62vh; max-height: 78vh; }

.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.chat-head-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-head-name h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.chat-head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chat-head-tools .search input { width: 170px; }
.chat-star {
  border: 0; background: none; padding: 2px; cursor: pointer;
  color: var(--ink-4); display: inline-flex; border-radius: 4px;
}
.chat-star:hover { color: var(--ink-2); }
.chat-star.on { color: #B4802A; }
.chat-star.on .icon { fill: currentColor; }
.chat-members {
  font-size: 11.5px; color: var(--ink-3);
  background: var(--chip-bg, #EFEFF1); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 4px;
}

.chat-feed { flex: 1 1 auto; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.chat-feed-panel { gap: 12px; }

.chat-day { display: flex; align-items: center; gap: 10px; }
.chat-day::before, .chat-day::after { content: ""; height: 1px; background: var(--line); flex: 1 1 auto; }
.chat-day span { font-size: 11px; font-weight: 600; color: var(--ink-4); }

.chat-system {
  display: flex; align-items: center; gap: 10px;
  padding-left: 48px; font-size: 13px; color: var(--ink-3);
}
.chat-system .icon { color: var(--ink-4); flex: 0 0 auto; }

.chat-msg { display: flex; gap: 12px; align-items: flex-start; }
.chat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.chat-meta { display: flex; align-items: baseline; gap: 8px; }
.chat-meta b { font-size: 14px; font-weight: 700; }
.chat-meta span { font-size: 11.5px; color: var(--ink-4); }
.chat-text { font-size: 14px; line-height: 1.55; color: var(--ink); word-break: break-word; }
.chat-text a { color: #1264A3; }
.chat-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; background: var(--wash); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 1px 5px;
}
.chat-ref { color: #1264A3; font-weight: 500; }
.chat-at { color: #1264A3; background: rgba(18,100,163,.08); border-radius: 3px; padding: 0 3px; font-weight: 500; }
.chat-bullet { color: var(--ink-4); }

.chat-card, .chat-file {
  display: flex; align-items: center; gap: 10px;
  max-width: 460px; padding: 10px 12px;
  background: var(--wash); border: 1px solid var(--line);
  border-radius: 8px; color: inherit; text-decoration: none;
}
.chat-card:hover, .chat-file:hover { border-color: var(--btn-outline-line, #C8C8C8); }
.chat-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  background: var(--chip-bg, #EFEFF1); color: var(--ink-3); border-radius: 7px;
}
.chat-card b, .chat-file b { display: block; font-size: 13px; font-weight: 600; color: #1264A3; }
.chat-card span span, .chat-file span span { display: block; font-size: 11px; color: var(--ink-4); }
.chat-image { display: block; max-width: 320px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.chat-image img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: cover; }

.chat-reactions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-reaction {
  font-size: 12.5px; line-height: 1;
  padding: 4px 8px; border-radius: 12px;
  background: var(--wash); border: 1px solid var(--line);
  cursor: pointer; color: var(--ink-2);
}
.chat-reaction:hover { border-color: var(--btn-outline-line, #C8C8C8); }
.chat-reaction.mine { background: rgba(18,100,163,.09); border-color: rgba(18,100,163,.35); color: #1264A3; }

.chat-react-add > summary {
  list-style: none; cursor: pointer; color: var(--ink-4);
  display: inline-flex; align-items: center;
  padding: 3px 6px; border-radius: 12px; border: 1px solid transparent;
}
.chat-react-add > summary::-webkit-details-marker { display: none; }
.chat-react-add > summary:hover { color: var(--ink-2); border-color: var(--line); background: var(--wash); }
.chat-react-list { display: flex; gap: 2px; padding: 6px; min-width: 0; }
.chat-react-list button {
  border: 0; background: none; font-size: 17px; line-height: 1;
  padding: 5px 6px; border-radius: 6px; cursor: pointer;
}
.chat-react-list button:hover { background: var(--wash); }

.chat-reply-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-4);
  border: 0; background: none; cursor: pointer; padding: 3px 5px; border-radius: 6px;
  text-decoration: none;
}
.chat-reply-btn:hover { color: var(--ink-2); background: var(--wash); }

/* Hover reveals the controls on a desktop; a touch screen keeps them out. */
@media (hover: hover) and (min-width: 760px) {
  .chat-react-add, .chat-reply-btn { opacity: 0; transition: opacity .12s ease; }
  .chat-msg:hover .chat-react-add,
  .chat-msg:hover .chat-reply-btn,
  .chat-react-add[open] { opacity: 1; }
}

.chat-thread-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 8px 3px 3px; border-radius: 14px;
  align-self: flex-start; text-decoration: none;
  border: 1px solid transparent;
}
.chat-thread-link:hover { border-color: var(--line); background: var(--wash); }
.chat-thread-link b { font-size: 12.5px; color: #1264A3; font-weight: 600; }
.chat-thread-link span:last-child { font-size: 11px; color: var(--ink-4); }

.chat-reply-divider { display: flex; align-items: center; gap: 10px; }
.chat-reply-divider span { font-size: 11.5px; color: var(--ink-4); }
.chat-reply-divider i { flex: 1 1 auto; height: 1px; background: var(--line); }

/* ── The composer ─────────────────────────────────────────────────── */
.chat-composer { border-top: 1px solid var(--line); padding: 12px 16px; }
.composer {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); padding: 10px 4px 4px;
}
.composer:focus-within { border-color: var(--ink-3); }
.composer-text {
  width: 100%; border: 0; resize: vertical; outline: none;
  font: inherit; font-size: 14px; line-height: 1.5;
  padding: 0 11px 8px; background: none; color: var(--ink);
  min-height: 42px;
}
.composer-text::placeholder { color: var(--ink-4); }
.composer-bar { display: flex; align-items: center; gap: 8px; padding: 0 6px 2px; flex-wrap: wrap; }
.composer-marks, .composer-tools { display: flex; align-items: center; gap: 2px; }
.composer-tools { margin-left: auto; gap: 4px; }
.composer-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; background: none; border-radius: 5px;
  color: var(--ink-3); cursor: pointer;
}
.composer-btn:hover { background: var(--wash); color: var(--ink); }
.composer-marks { border-right: 1px solid var(--line-soft); padding-right: 6px; margin-right: 2px; }
.composer-files { padding: 4px 12px 2px; }
.composer-also {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 2px; font-size: 12px; color: var(--ink-3);
}
.composer-also input { width: 14px; height: 14px; accent-color: var(--accent); }

.emoji-panel { padding: 10px; width: 250px; }
.emoji-group { font-size: 10.5px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; margin: 6px 2px 4px; }
.emoji-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-row button {
  border: 0; background: none; font-size: 17px; line-height: 1;
  padding: 4px 0; border-radius: 5px; cursor: pointer;
}
.emoji-row button:hover { background: var(--wash); }
.composer-link .menu-list { width: 280px; padding: 10px; }
.composer-link .select { width: 100%; }
.menu-note { display: flex; gap: 7px; align-items: center; font-size: 11.5px; color: var(--ink-4); padding: 4px 6px 8px; }

/* ── A centred modal ──────────────────────────────────────────────── */
.modal-card {
  background: var(--paper);
  text-align: left;
  border-radius: 16px;
  width: min(540px, calc(100vw - 32px));
  margin: auto;
  box-shadow: 0 4px 2px rgba(12,12,13,.05), 0 16px 8px rgba(12,12,13,.1);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-card > form { display: flex; flex-direction: column; min-height: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 28px 0; }
.modal-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.modal-head .close { color: var(--ink-3); display: inline-flex; padding: 4px; border-radius: 6px; }
.modal-head .close:hover { background: var(--wash); color: var(--ink); }
.modal-body { padding: 20px 28px 4px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 28px 24px; }

.switch-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash);
}
.switch-row > span:first-child { flex: 1 1 auto; min-width: 0; }
.switch-row b { display: block; font-size: 13.5px; font-weight: 600; }
.switch-row b + span { display: block; font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
.switch { position: relative; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.switch-track {
  display: block; width: 44px; height: 24px; border-radius: 12px;
  background: var(--line); transition: background .15s ease;
}
.switch-knob {
  display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

.pick-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pick {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 7px; border: 1px solid var(--line); border-radius: 20px;
  font-size: 12.5px; cursor: pointer;
}
.pick:hover { background: var(--wash); }
.pick input { width: 14px; height: 14px; accent-color: var(--accent); }

/* A count that means "new", rather than "how many exist". */
.subnav-count.is-new, .nav-count.is-new { background: #C7452F; color: #fff; }

@media (max-width: 1180px) {
  .chat-layout.has-panel { grid-template-columns: 240px minmax(0, 1fr); }
  .chat-layout.has-panel .chat-panel { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 860px) {
  .chat-layout, .chat-layout.has-panel { grid-template-columns: 1fr; }
  .chat-rooms { max-height: 230px; }
  .chat-main, .chat-panel { max-height: none; min-height: 50vh; }
  .chat-head-tools .search input { width: 120px; }
  .chat-image, .chat-card, .chat-file { max-width: 100%; }
  .modal-head, .modal-body, .modal-foot { padding-left: 20px; padding-right: 20px; }
}