/* AWP Hub design system — token names and values follow the Atlassian Design System
   (atlassian.design): 4px spacing grid, ADS type scale, ADS light/dark color tokens. */

/* ---------- tokens ---------- */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --radius: 6px;
  --radius-lg: 12px;

  --surface: #FFFFFF;
  --surface-sunken: #F7F8F9;
  --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFF;
  --surface-hover: #091E420F;
  --surface-pressed: #091E4224;
  --text: #172B4D;
  --text-subtle: #44546F;
  --text-subtlest: #626F86;
  --text-inverse: #FFFFFF;
  --border: #091E4224;
  --border-bold: #C1C7D0;

  --brand: #0C66E4;
  --brand-hover: #0055CC;
  --brand-pressed: #09326C;
  --brand-subtlest: #E9F2FF;
  --selected: #E9F2FF;
  --selected-text: #0C66E4;

  --danger: #C9372C;
  --danger-hover: #AE2E24;
  --danger-subtlest: #FFECEB;
  --danger-text: #AE2E24;
  --success: #1F845A;
  --success-subtlest: #DCFFF1;
  --success-text: #216E4E;
  --warning-subtlest: #FFF7D6;
  --warning-text: #A54800;
  --info-subtlest: #E9F2FF;
  --info-text: #0055CC;
  --purple-subtlest: #F3F0FF;
  --purple-text: #5E4DB2;
  --neutral-subtle: #091E420F;

  --shadow-raised: 0 1px 1px #091E4240, 0 0 1px #091E424F;
  --shadow-overlay: 0 8px 12px #091E4226, 0 0 1px #091E424F;
}

[data-theme="dark"] {
  /* black-tone dark theme: neutral near-black surfaces, hairline borders that
     don't glow (inputs use --border-bold, so it must stay dark) */
  --surface: #0E0E0E;
  --surface-sunken: #080808;
  --surface-raised: #161616;
  --surface-overlay: #1C1C1C;
  --surface-hover: #FFFFFF0F;
  --surface-pressed: #FFFFFF1F;
  --text: #E4E4E4;
  --text-subtle: #ADADAD;
  --text-subtlest: #878787;
  --text-inverse: #0E0E0E;
  --border: #FFFFFF1A;
  --border-bold: #3A3A3A;

  --brand: #579DFF;
  --brand-hover: #85B8FF;
  --brand-pressed: #CCE0FF;
  --brand-subtlest: #1C2B41;
  --selected: #1C2B41;
  --selected-text: #579DFF;

  --danger: #F87168;
  --danger-hover: #FD9891;
  --danger-subtlest: #42221F;
  --danger-text: #FD9891;
  --success: #4BCE97;
  --success-subtlest: #1C3329;
  --success-text: #7EE2B8;
  --warning-subtlest: #332E1B;
  --warning-text: #F5CD47;
  --info-subtlest: #1C2B41;
  --info-text: #85B8FF;
  --purple-subtlest: #2B273F;
  --purple-text: #B8ACF6;
  --neutral-subtle: #FFFFFF14;

  --shadow-raised: 0 1px 1px #00000066, 0 0 1px #00000066;
  --shadow-overlay: 0 8px 16px #000000A6, 0 0 1px #000000CC;
}

/* ---------- reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--text);
  background: var(--surface);
  min-height: 100vh;
}
h1 { font-size: 20px; line-height: 24px; font-weight: 600; }
h2 { font-size: 17px; line-height: 22px; font-weight: 600; }
h3 { font-size: 15px; line-height: 20px; font-weight: 600; }
h4 { font-size: 14px; line-height: 20px; font-weight: 600; }
small, .small { font-size: 12px; line-height: 16px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { vertical-align: middle; }
::placeholder { color: var(--text-subtlest); }

/* ---------- forms (ADS: 40px controls, 1px border, 6px radius, 2px focus ring) ---------- */
.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
input, select, textarea {
  font: inherit;
  color: var(--text);
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-bold);
  border-radius: 9px;
  padding: 5px 10px;
  min-height: 34px;
  transition: border-color .1s, box-shadow .1s;
}
input:hover, select:hover, textarea:hover { background: var(--surface-sunken); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: var(--surface);
}
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23738496' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
}
textarea { resize: vertical; min-height: 80px; }
input[type="search"] { min-height: 0; }
.req { color: var(--danger); }
.field-error { display: none; color: var(--danger-text); font-size: 12px; margin-top: var(--sp-1); }
form.show-errors :user-invalid { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
form.show-errors :user-invalid ~ .field-error { display: block; }
/* custom checkboxes & radios (match the 1px-border / brand-fill control language) */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none;
  border: 1px solid var(--border-bold); background: var(--surface);
  cursor: pointer; transition: background .1s, border-color .1s;
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover:not(:checked), input[type="radio"]:hover:not(:checked) { background: var(--surface-sunken); }
input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: var(--brand); background-color: var(--brand); }
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
[data-theme="dark"] input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5' fill='none' stroke='%230E0E0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--surface); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none;
}
input[type="radio"]:checked:focus-visible { box-shadow: inset 0 0 0 3px var(--surface); }
.check { display: flex; gap: var(--sp-2); align-items: center; font-size: 14px; }

/* a switch, for a choice that changes what an action will do rather than
   adding a value to a form — "send this onward when you save" reads as a
   setting, and a tick box next to a button reads as another button */
.switch { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; cursor: pointer; user-select: none; }
.switch > input[type="checkbox"] {
  width: 30px; height: 18px; border-radius: 9px; position: relative;
  border: 1px solid var(--border-bold); background: var(--surface-sunken);
  background-image: none; transition: background-color .15s, border-color .15s;
}
.switch > input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .15s;
}
.switch > input[type="checkbox"]:checked { background-color: var(--brand); border-color: var(--brand); background-image: none; }
.switch > input[type="checkbox"]:checked::after { transform: translateX(12px); }
.switch > input[type="checkbox"]:hover:not(:checked) { background-color: var(--surface-sunken); border-color: var(--text-subtlest); }

/* ---------- buttons ---------- */
.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 9px;
  background: var(--neutral-subtle);
  color: var(--text);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--surface-pressed); text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
[data-theme="dark"] .btn-primary { color: var(--text-inverse); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-subtle { background: transparent; color: var(--text-subtle); }
.btn-subtle:hover { background: var(--surface-hover); }
.btn-sm { padding: 2px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- remix icons: alignment + contextual sizes ---------- */
[class^="ri-"], [class*=" ri-"] { font-size: 15px; line-height: 1; vertical-align: -0.14em; }
.icon-btn [class^="ri-"] { font-size: 18px; }
.side-link [class^="ri-"] { font-size: 17px; }
.side-link .side-pin { margin-left: auto; font-size: 11px; color: var(--text-subtlest); }
.topbar-search [class^="ri-"], .board-search [class^="ri-"], .chat-search [class^="ri-"] { font-size: 15px; }
.due-chip [class^="ri-"] { font-size: 12px; }
.avatar-empty [class^="ri-"] { font-size: 13px; }
.btn-sm [class^="ri-"] { font-size: 13px; }

/* ---------- avatar / lozenge / icons ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: hsl(var(--hue, 210), 55%, 45%);
  color: #fff; font-size: 10px; font-weight: 700; flex: none;
}
.avatar-lg { width: 32px; height: 32px; font-size: 12px; }
.lozenge {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  border-radius: var(--radius); padding: 1px 6px; line-height: 16px; white-space: nowrap;
}
.lozenge-neutral { background: var(--neutral-subtle); color: var(--text-subtle); }
.lozenge-info { background: var(--info-subtlest); color: var(--info-text); }
.lozenge-success { background: var(--success-subtlest); color: var(--success-text); }
.lozenge-warning { background: var(--warning-subtlest); color: var(--warning-text); }
.lozenge-danger { background: var(--danger-subtlest); color: var(--danger-text); }
.lozenge-purple { background: var(--purple-subtlest); color: var(--purple-text); }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-rows: 48px 1fr; grid-template-columns: 220px 1fr; height: 100vh; }
.topbar {
  grid-column: 1 / -1;
  height: 48px; /* explicit — the chat layout's flex column doesn't impose the grid row height */
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  z-index: 20;
}
.topbar .logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: 15px; color: var(--text); padding: 0 var(--sp-2); }
.topbar .logo:hover { text-decoration: none; }
.topbar-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-2);
  width: min(560px, 42vw);
}
.topbar-search {
  flex: 1; display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border-bold); border-radius: 9px;
  padding: 0 var(--sp-3); color: var(--text-subtlest); height: 32px;
}
.topbar-search:focus-within { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.topbar-search input { border: none; padding: 0; background: none; height: 100%; min-height: 0; }
.topbar-search input:focus, .topbar-search input:hover { border: none; box-shadow: none; background: none; }
.topbar-spacer { flex: 1; }
.collapse-btn { display: inline-flex; }
.shell.side-collapsed .sidebar { display: none; }
.shell.side-collapsed { grid-template-columns: 0 1fr; }
.icon-btn {
  background: none; border: none; cursor: pointer; color: var(--text-subtle);
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.icon-btn:hover { background: var(--surface-hover); text-decoration: none; }

.sidebar {
  grid-row: 2; grid-column: 1;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-2);
  overflow-y: auto;
}
.side-section { margin-bottom: var(--sp-5); }
.side-section + .side-section { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.side-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-subtlest); padding: var(--sp-1) var(--sp-2) var(--sp-2);
}
.side-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-2); border-radius: 8px; margin-bottom: 1px;
  color: var(--text-subtle); font-weight: 500;
}
.side-link svg { flex: none; color: var(--text-subtlest); }
.side-link:hover { background: var(--surface-hover); text-decoration: none; }
.side-link.active { background: var(--selected); color: var(--selected-text); }
.side-link.active svg { color: var(--selected-text); }
.side-link .side-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link.muted-link { color: var(--text-subtlest); }
.proj-badge {
  width: 20px; height: 20px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--hue, 210), 65%, 50%), hsl(calc(var(--hue, 210) + 40), 65%, 40%));
  color: #fff; font-size: 9px; font-weight: 700;
}
.proj-badge-lg { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; }

.main { grid-row: 2; grid-column: 2; overflow-y: auto; background: var(--surface); padding: var(--sp-6); }
.main-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.main-header .sub { color: var(--text-subtlest); font-size: 12px; }
.breadcrumbs { font-size: 12px; color: var(--text-subtlest); margin-bottom: var(--sp-2); }
.breadcrumbs a { color: var(--text-subtlest); }

/* mobile shell */
.menu-btn { display: none; }
.backdrop { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .shell.side-collapsed { grid-template-columns: 1fr; }
  .main { grid-column: 1; }
  .menu-btn { display: inline-flex; }
  .logo-text { display: none; }
  .sidebar {
    position: fixed; top: 48px; left: 0; bottom: 0; width: 260px; z-index: 30;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .shell.side-collapsed .sidebar { display: block; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-overlay); }
  .backdrop.show { display: block; position: fixed; inset: 48px 0 0 0; background: #091E4266; z-index: 25; }
  .main { padding: var(--sp-4); }
}

/* ---------- cards / tables ---------- */
.card {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-3);
}
/* Cards that follow one another down the page space themselves, because every
   page that stacks them wants the same gap and asking each view to remember
   mb-4 means half of them do not — which is how a form's sections ended up
   welded together.
   A card inside a grid or a flex row is spaced by its container's gap and is
   deliberately not matched here: only direct children of the content column,
   or of a form in it, are in the flow this rule is about.
   :where() keeps the whole thing at zero specificity, so an mb-2 or an mt-4 in
   the markup still wins. */
:where(.main > .card, .main > form > .card,
       .demo-main > .card, .demo-main > form > .card) { margin-bottom: var(--sp-4); }
:where(.main > .card:last-child, .main > form > .card:last-child,
       .demo-main > .card:last-child, .demo-main > form > .card:last-child) { margin-bottom: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; }
/* the line editor on a document: it has a tax picker, a quantity, a unit and a
   rate that all need room, and squeezing them to fit a narrow window makes every
   one of them unusable. The wrapper already scrolls, so let it. */
.table-wrap table.lines { min-width: 940px; }
/* and a picker in one of those cells shows one line, clipped — never a label
   wrapped over three rows because the column is 64px wide */
table.lines .ts-control { white-space: nowrap; overflow: hidden; flex-wrap: nowrap; }
table.lines .ts-control > .item { overflow: hidden; text-overflow: ellipsis; }
/* the list of choices is not bound by the column the picker sits in: "GST CGST
   1.5% (1.5%)" over three lines in a 150px cell is unreadable, and the dropdown
   floats above the table anyway */
table.lines .ts-dropdown { min-width: 230px; width: max-content; max-width: 320px; }
table.lines .ts-dropdown .option { white-space: nowrap; }
table.list { width: 100%; border-collapse: collapse; }
table.list { font-size: 13px; }
table.list th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-subtle);
  background: var(--surface-sunken);
  padding: 7px var(--sp-3); border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.list td { padding: 8px var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list tr.rowlink { cursor: pointer; }
table.list tr.rowlink:hover { background: var(--surface-hover); }

.empty {
  text-align: center; color: var(--text-subtlest); padding: var(--sp-8);
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
}

/* ---------- board ---------- */
.board-toolbar { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.board-search {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border-bold); border-radius: 8px; padding: 0 var(--sp-2);
  color: var(--text-subtlest); height: 32px; width: 200px;
}
.board-search:focus-within { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.board-search input { border: none; padding: 0; background: none; height: 100%; min-height: 0; }
.board-search input:focus, .board-search input:hover { border: none; box-shadow: none; background: none; }
.avatar-stack { display: flex; }
.avatar-stack .avatar {
  width: 28px; height: 28px; font-size: 11px; border: 2px solid var(--surface); cursor: pointer;
  margin-left: -6px; transition: transform .1s; padding: 0; font-family: inherit;
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar:hover { transform: translateY(-2px); }
.avatar-stack .avatar.on { outline: 2px solid var(--brand); outline-offset: 1px; }

.board { display: flex; gap: var(--sp-3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--sp-4); }
.board-col {
  background: var(--surface-sunken); border-radius: 16px;
  width: 270px; flex: none; padding: var(--sp-2);
  display: flex; flex-direction: column; max-height: calc(100vh - 230px); min-height: 140px;
}
.board-col-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
}
.board-col-head .count {
  font-weight: 500; font-size: 12px; color: var(--text-subtlest);
  background: var(--neutral-subtle); border-radius: 14px; padding: 0 7px;
}
.board-cards { overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); min-height: 8px; flex: 1; }
.board-col.dragover { outline: 2px dashed var(--brand); outline-offset: -2px; }
.tcard {
  background: var(--surface-raised); border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 10px var(--sp-3);
  cursor: pointer; display: block; color: inherit;
  transition: box-shadow .12s ease;
}
.tcard:hover { text-decoration: none; box-shadow: 0 4px 8px #091E421F; }
[data-theme="dark"] .tcard:hover { background: var(--surface-overlay); box-shadow: none; }
.tcard.dragging { opacity: .4; }
.tcard.filtered { display: none; }
.tcard-title { color: var(--text); font-size: 13.5px; line-height: 18px; margin-bottom: var(--sp-2); word-break: break-word; }
.card-avatars { display: flex; margin-left: auto; }
.card-avatars .avatar { width: 24px; height: 24px; font-size: 10px; margin-left: -6px; border: 2px solid var(--surface-raised); }
.tcard-timer .card-avatars .avatar { border-color: var(--brand-subtlest); }
.avatar-more { font-size: 9px; }
.card-avatars .avatar:first-child { margin-left: 0; }
.avatar-more { background: var(--neutral-subtle); color: var(--text-subtle); }
.avatar-empty {
  background: var(--neutral-subtle); color: var(--text-subtlest);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; margin-left: auto; flex: none;
}
.tcard-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.tcard-meta { display: flex; align-items: center; gap: 6px; row-gap: 5px; flex-wrap: wrap; }
.tcard-key { font-size: 12px; color: var(--text-subtlest); font-weight: 600; white-space: nowrap; }
.tcard-meta .avatar { margin-left: auto; width: 24px; height: 24px; font-size: 10px; }
.due-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--sp-2);
  font-size: 11px; font-weight: 500; color: var(--text-subtle);
  background: var(--neutral-subtle); border-radius: var(--radius); padding: 2px 6px;
}
.due-chip.overdue { background: var(--danger-subtlest); color: var(--danger-text); }
.col-create {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
  padding: 6px var(--sp-2); border: none; border-radius: var(--radius);
  background: none; color: var(--text-subtle); font: inherit; font-weight: 500; cursor: pointer; text-align: left;
}
.col-create:hover { background: var(--surface-hover); }
.col-quick { margin-top: var(--sp-2); }
.col-quick textarea {
  background: var(--surface-raised); border-radius: var(--radius-lg); border: 2px solid var(--brand);
  box-shadow: var(--shadow-raised); font-size: 14px;
}
@media (max-width: 900px) {
  .board-col { width: 82vw; max-height: none; }
  .topbar-center { position: static; transform: none; width: auto; margin-left: auto; }
  .topbar-search { display: none; }
  .collapse-btn { display: none; }
}

/* ---------- task detail ---------- */
.task-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-8); align-items: start; }
@media (max-width: 1000px) { .task-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.task-title { font-size: 26px; line-height: 32px; font-weight: 600; margin: var(--sp-3) 0 var(--sp-6); }
.task-section { margin-bottom: 36px; }
.task-section > .row:first-child, .task-section > h4:first-child { margin-bottom: var(--sp-3); }
.task-desc { white-space: pre-wrap; color: var(--text); line-height: 22px; }
.side-panel .card { margin-bottom: var(--sp-4); padding: var(--sp-5); }
.detail-row { display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.detail-row > span:first-child { font-size: 12px; font-weight: 600; color: var(--text-subtlest); }
.detail-row select, .detail-row input { padding: 4px 8px; min-height: 32px; }
.detail-row select { padding-right: 30px; background-position: right 8px center; }
.add-subtask summary { list-style: none; cursor: pointer; }
.add-subtask summary::-webkit-details-marker { display: none; }
.add-subtask[open] summary { display: none; }

/* click-to-edit affordances */
.task-title { border-radius: 9px; padding: 2px 6px; margin-left: -6px; cursor: text; }
.task-title:hover { background: var(--surface-hover); }
.title-input {
  font-size: 26px; line-height: 32px; font-weight: 600; padding: 2px 6px;
  border: 2px solid var(--brand); border-radius: 9px; min-height: 0; width: 100%;
}
.task-desc.editable { border-radius: 9px; padding: var(--sp-2); margin: calc(-1 * var(--sp-2)); cursor: text; }
.task-desc.editable:hover { background: var(--surface-hover); }

/* status button (side panel primary action) */
.status-btn { font-weight: 600; gap: var(--sp-2); }
.status-btn.st-neutral { background: var(--neutral-subtle); color: var(--text-subtle); }
.status-btn.st-info { background: var(--info-subtlest); color: var(--info-text); }
.status-btn.st-purple { background: var(--purple-subtlest); color: var(--purple-text); }
.status-btn.st-warning { background: var(--warning-subtlest); color: var(--warning-text); }
.status-btn.st-success { background: var(--success-subtlest); color: var(--success-text); }

/* activity tabs */
.tabbar { display: flex; gap: var(--sp-1); border-bottom: 2px solid var(--border); }
.tab {
  font: inherit; font-weight: 500; color: var(--text-subtle);
  background: none; border: none; cursor: pointer;
  padding: 6px var(--sp-3); margin-bottom: -2px; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--brand); border-bottom-color: var(--brand); }
a.tab { text-decoration: none; }
a.tab:hover { text-decoration: none; color: var(--text); }
.tab-count {
  font-size: 11px; background: var(--neutral-subtle); color: var(--text-subtlest);
  border-radius: 12px; padding: 0 6px;
}

/* comment composer (collapsed until focused) */
.composer { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.composer-collapsed { cursor: text; color: var(--text-subtlest); }
.add-menu-item { display: block; padding: 6px var(--sp-4); cursor: pointer; }
.add-menu-item:hover { background: var(--surface-hover); }
.ctime-inline { font-size: 12px; color: var(--text-subtlest); font-weight: 400; margin-left: 4px; }

.comment { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.comment-body { flex: 1; min-width: 0; }
.comment-head { font-size: 12px; color: var(--text-subtlest); margin-bottom: 2px; }
.comment-head b { color: var(--text); font-size: 13px; }
.comment-text { white-space: pre-wrap; word-break: break-word; }

/* ---------- tabbed task view (dense) ---------- */
.tv { display: flex; flex-direction: column; margin: calc(-1 * var(--sp-6)); height: calc(100vh - 48px); }
.drawer-body .tv { margin: 0; height: auto; flex: 1; min-height: 0; }
/* one dense row: breadcrumbs + tabs share the header line */
.tv-top {
  flex: none; background: var(--surface);
  display: flex; align-items: stretch; gap: var(--sp-4);
  padding: var(--sp-1) var(--sp-6) 0;
  border-bottom: 1px solid var(--border);
}
.drawer-body .tv-top { padding: 0 44px 0 var(--sp-6); min-height: 48px; }
@media (max-width: 900px) {
  .tv { margin: calc(-1 * var(--sp-4)); }
  .tv-top { padding: 0 var(--sp-4); }
  .drawer-body .tv-top { padding: 0 44px 0 var(--sp-4); border-radius: 0; }
}
.tv-top .breadcrumbs { margin: 0; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-tabs { display: flex; gap: 2px; margin-bottom: -1px; }
.tv-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-subtle);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 7px var(--sp-3); cursor: pointer;
}
.tv-tab:hover { color: var(--text); }
.tv-tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.tv-pane { display: flex; flex-direction: column; }
.tv-pane[data-tv-pane="info"] { flex: 1; min-height: 0; overflow-y: auto; }
.tv-pane[data-tv-pane="info"] .composer {
  position: sticky; bottom: 0; z-index: 5; background: var(--surface);
  margin: var(--sp-4) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5));
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
}

.tv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; flex: 1; }
.tv-main { padding: var(--sp-4) var(--sp-6) var(--sp-5); min-width: 0; }
.tv-side { border-left: 1px solid var(--border); padding: var(--sp-4) var(--sp-6) var(--sp-5) var(--sp-4); }
@media (max-width: 1000px) {
  .tv-grid { grid-template-columns: 1fr; }
  .tv-side { border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 900px) {
  .tv-main { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .tv-side { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}
.tv-titlerow { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tv-titlerow .task-title {
  font-size: 19px; line-height: 26px; font-weight: 600; margin: 0;
  padding: 2px 6px; margin-left: -6px; border-radius: 7px; cursor: text;
}
.tv-titlerow .task-title:hover { background: var(--surface-hover); }
.tv-chips { margin-bottom: var(--sp-3); }
.tv-side-actions { margin-bottom: var(--sp-3); }
.tv-fields { border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-2) var(--sp-3); }
.fld { padding: 5px 0; }
.fld > span:first-child { display: block; font-size: 12px; font-weight: 600; color: var(--text-subtlest); margin-bottom: 4px; }
.fld select, .fld input { width: 100%; min-height: 32px; padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.fld select { padding-right: 26px; background-position: right 6px center; }
.fld-ro { font-size: 13px; }
.fld .ts-control { min-height: 32px; padding: 3px 8px; font-size: 13px; border-radius: 8px; }
.tv-stamp { margin-top: var(--sp-2); padding: 0 var(--sp-1); }
.input-sm { min-height: 30px; padding: 4px 10px; font-size: 13px; }
/* inline filters inside headings: Tom Select matches .input-sm height and sheds the heading's bold */
h3 .ts-wrapper { font-weight: normal; }
h3 .ts-wrapper.single .ts-control, h3 .ts-wrapper.multi .ts-control, h3 .ts-wrapper .ts-control {
  min-height: 30px; padding: 3px 8px; font-size: 13px;
}
/* compact filter inputs: date/month pickers must not stretch to the global 100% input width */
.input-sm[type="date"] { width: 136px; }
.input-sm[type="month"] { width: 150px; }

/* denser sections, divided edge to edge */
.task-section {
  border-top: 1px solid var(--border);
  margin: 0 calc(-1 * var(--sp-6));
  padding: var(--sp-3) var(--sp-6) var(--sp-4);
}
@media (max-width: 900px) {
  .task-section { margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}
.task-section > .row:first-child, .task-section > h4:first-child { margin-bottom: var(--sp-2); }
.section-head h4 { font-size: 13px; }
.section-head [data-desc-edit] { opacity: 0; }
.task-section:hover .section-head [data-desc-edit] { opacity: 1; }
.task-desc { line-height: 21px; }
.composer { margin-top: var(--sp-2); gap: var(--sp-2); }

/* ---------- agent pane: fills the view, composer pinned to the bottom ---------- */
/* (mobile paddings for the agent pane regions) */
.tv-pane-agent { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tv-pane-history { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-6); display: block; }
/* history as a timeline: dot rail + connecting line */
.timeline { max-width: 72ch; }
.tl-item { position: relative; padding: 0 0 var(--sp-4) var(--sp-6); }
.tl-item::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: -4px;
  width: 2px; background: var(--border);
}
.tl-item:last-child::before { display: none; }
.tl-dot {
  position: absolute; left: 0; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--brand); background: var(--surface);
}
.tl-body { display: flex; align-items: baseline; gap: var(--sp-2); font-size: 13px; line-height: 19px; }
.tl-body .avatar { width: 18px; height: 18px; font-size: 8px; align-self: flex-start; }
.tl-text { min-width: 0; }
.tl-time { white-space: nowrap; margin-left: auto; }
.ag-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-6); border-bottom: 1px solid var(--border);
  font-size: 13px; flex: none;
}
.ag-meta-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38ch; }
.ag-conv {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--sp-4) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3);
}
/* A column flex container shrinks its children to fit, and this one always
   overflows — a run is hundreds of lines. So every line was squeezed to two
   pixels of itself: the tool lines showed as dots and the text was clipped
   through the middle. Nothing in here shrinks; the container scrolls instead. */
.ag-conv > * { flex: 0 0 auto; }
.ag-empty { color: var(--text-subtlest); font-size: 13px; text-align: center; margin: auto 0; }
/* your reply: compact bubble, right */
.ag-user { align-self: flex-end; max-width: 78%; text-align: right; }
.ag-user .bubble { text-align: left; white-space: pre-wrap; }
.ag-user .w { font-size: 11px; color: var(--text-subtlest); text-align: right; margin-bottom: 2px; }
/* agent output: flowing prose, no card */
.ag-agent { align-self: stretch; max-width: 78ch; font-size: 14px; line-height: 21px; }
.ag-agent p { margin: 0 0 var(--sp-2); }
.ag-agent p:last-child { margin: 0; }
.ag-agent ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); }
.ag-agent li { margin-bottom: 2px; }
.ag-agent code { font-family: var(--font-mono); font-size: 12.5px; background: var(--neutral-subtle); border-radius: 7px; padding: 1px 4px; }
.ag-agent pre { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 9px; padding: var(--sp-2) var(--sp-3); overflow-x: auto; margin: 0 0 var(--sp-2); }
.ag-agent pre code { background: none; padding: 0; font-size: 12px; line-height: 17px; }
/* claude-code style event line: dot + dim mono text */
.ag-tool {
  align-self: stretch; font-family: var(--font-mono); font-size: 11.5px; line-height: 17px;
  color: var(--text-subtlest); padding: 1px 0 1px var(--sp-3);
  border-left: 2px solid var(--border); margin: 2px 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* reasoning: watched while it happens, folded away once it is over */
.ag-think { align-self: stretch; margin: 2px 0; }
.ag-think > summary {
  list-style: none; cursor: pointer; width: max-content;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-subtlest); padding: 2px 0;
}
.ag-think > summary::-webkit-details-marker { display: none; }
.ag-think > summary::after { content: ' \2304'; }
.ag-think[open] > summary::after { content: ' \2303'; }
.ag-think > div {
  white-space: pre-wrap; font-size: 12.5px; line-height: 19px;
  color: var(--text-subtle); border-left: 2px solid var(--border);
  padding: 2px 0 2px var(--sp-3); margin-top: 2px;
}
/* while it is still arriving it reads as live rather than as a record of
   something already decided */
.ag-think[data-live] > summary { color: var(--text-subtle); }
.ag-think[data-live] > div { border-left-color: var(--border-bold); }
.ag-denied {
  align-self: stretch; font-size: 12.5px; line-height: 18px;
  padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0;
  background: var(--warning-subtlest); color: var(--warning-text);
  border-left: 3px solid var(--warning-text); border-radius: 3px;
}
.ag-event {
  display: flex; gap: 8px; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--text-subtlest);
}
.ag-event::before { content: "\25CF"; color: var(--border-bold); font-size: 9px; }
.ag-bar {
  display: flex; gap: var(--sp-2); align-items: center; flex: none;
  padding: var(--sp-2) var(--sp-6) var(--sp-3); border-top: 1px solid var(--border); background: var(--surface);
}
.ag-bar input { border: none; background: var(--surface-sunken); border-radius: 16px; min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
.ag-bar input:focus { border: none; box-shadow: inset 0 0 0 1px var(--brand); }

/* ---------- agent session (threaded conversation) ---------- */
.console-wrap {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--surface-raised);
}
.console-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-sunken); border-bottom: 1px solid var(--border);
}
.session-chip {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-subtlest);
  background: var(--neutral-subtle); border: none; border-radius: var(--radius);
  padding: 2px 8px; cursor: copy;
}
.session-chip:hover { background: var(--surface-pressed); color: var(--text); }
.console-empty { text-align: center; color: var(--text-subtlest); font-size: 13px; padding: var(--sp-6) 0; }
.console-send {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff;
}
.console-send:hover { background: var(--brand-hover); color: #fff; }
[data-theme="dark"] .console-send { color: var(--text-inverse); }
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); animation: pulse 1.5s infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- HR: people & profile ---------- */
.avatar-xl { width: 56px; height: 56px; font-size: 20px; }
.person-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.person-head h1 { margin: 0; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.kv { display: flex; align-items: baseline; gap: var(--sp-2); padding: 3px 0; font-size: 13px; }
.kv > span:first-child { color: var(--text-subtlest); width: 130px; flex: none; }
.kv b { font-weight: 600; }
.kv .icon-btn { margin-left: auto; }
.addr { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 0; }
.addr .icon-btn { opacity: 0; }
.addr:hover .icon-btn { opacity: 1; }

.to-req {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  font-size: 13px; flex-wrap: wrap;
}
.stat-tiles { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.stat-tile {
  border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-2) var(--sp-4);
  min-width: 110px;
}
.stat-tile b { font-size: 20px; line-height: 24px; display: block; }
.stat-tile span { font-size: 11px; color: var(--text-subtlest); text-transform: uppercase; letter-spacing: .3px; }

.score-pills { display: flex; gap: var(--sp-1); }
.score-pill input { display: none; }
.score-pill span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-bold); font-weight: 600; cursor: pointer;
}
.score-pill input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="dark"] .score-pill input:checked + span { color: var(--text-inverse); }

.pay-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pay-table td { padding: 5px 0; border-bottom: 1px solid var(--border); }
.pay-table .pay-total td, .pay-table tr:last-child td { border-bottom: none; font-weight: 700; }
.pay-net {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--success-subtlest); color: var(--success-text);
  border-radius: 10px; padding: var(--sp-3) var(--sp-4); font-size: 15px;
}
.pay-net b { font-size: 20px; }
@media print {
  .sidebar, .topbar, .no-print, #timerBar, .drawer, .drawer-backdrop { display: none !important; }
  .main { padding: 0; overflow: visible; }
  .shell { display: block; height: auto; }
  .payslip { border: none; box-shadow: none; max-width: none !important; }
}

/* ---------- public careers ---------- */
.careers-wrap { max-width: 720px; margin: 0 auto; padding: var(--sp-8) var(--sp-4); }
.careers-head { text-align: center; margin-bottom: var(--sp-8); }
.careers-head h1 { margin-top: var(--sp-4); }
.careers-card {
  display: flex; align-items: center; gap: var(--sp-4);
  border: 1px solid var(--border); border-radius: 14px;
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
  color: var(--text); background: var(--surface-raised);
}
.careers-card:hover { text-decoration: none; border-color: var(--brand); }
.careers-wrap > .card { padding: var(--sp-6); }
.careers-wrap h1 { font-size: 24px; line-height: 1.3; margin-bottom: var(--sp-1); }
.careers-wrap > p { margin-bottom: var(--sp-4); }
.careers-wrap > h3 { margin-top: var(--sp-6); }
.careers-back { position: absolute; left: 0; top: 8px; }
.careers-head > a[aria-label] { display: block; }
.careers-head .muted { margin-top: var(--sp-1); }
.careers-head .row { margin-top: var(--sp-3); }
/* legacy/Quill filler paragraphs add phantom gaps on public job pages */
.careers-wrap .rich p:empty, .careers-wrap .rich p:has(> br:only-child) { display: none; }
.careers-wrap .rich h2 { margin: var(--sp-6) 0 var(--sp-2); font-size: 17px; }
.careers-wrap .rich h2:first-child { margin-top: 0; }
.careers-wrap .rich h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: 14.5px; }
.careers-wrap .rich ul, .careers-wrap .rich ol { margin: 0 0 var(--sp-3); padding-left: 22px; }
.careers-wrap .rich li { margin-bottom: 6px; }
.careers-wrap .rich p { margin-bottom: var(--sp-3); }

.pin-on { color: var(--brand); }

/* ---------- rollouts ---------- */
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
/* grid children size to their content by default, so one long PR title would
   push the whole column wide instead of being clipped inside it */
.ro-grid > * { min-width: 0; }
@media (max-width: 900px) { .ro-grid { grid-template-columns: 1fr; } }
.ro-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
}
.ro-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ro-item-head { display: flex; align-items: center; gap: var(--sp-2); width: 100%; }
.ro-item-title { font-size: 13.5px; }
.ro-item-foot { display: flex; align-items: center; gap: var(--sp-2); width: 100%; }
/* settled steps step back: the eye belongs on whatever is still waiting */
.ro-item.state-done .ro-text, .ro-item.state-done .ro-code,
.ro-item.state-skipped .ro-text, .ro-item.state-skipped .ro-code { color: var(--text-subtlest); }
.ro-item.state-skipped .ro-item-title { text-decoration: line-through; }
.ro-item.state-pending { border-color: var(--border-bold); }
.ro-code {
  font-family: var(--font-mono); font-size: 12px; line-height: 17px;
  background: var(--surface-sunken); border-radius: 6px; padding: 6px 10px;
  white-space: pre-wrap; word-break: break-word; width: 100%;
}
.ro-text { font-size: 13.5px; }
.ro-del { opacity: 0; }
.ro-item:hover .ro-del { opacity: 1; }
.ro-pr {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px var(--sp-3); margin-bottom: var(--sp-2); min-width: 0;
}
.ro-pr-key { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.ts-model { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ts-model-name { flex: 1 1 55%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the id gives way before the name does — the name is what is being read */
.ts-model .small { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-pr { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ts-pr-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-pr-manual { margin-top: var(--sp-2); }
.ro-pr-manual > summary { cursor: pointer; width: max-content; }
/* a PR title can be a paragraph — one line here, the rest on hover */
.ro-pr .gl-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 13px; }
.ro-prs form input { min-width: 0; }
.ro-kind-pills { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.ro-pill {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-bold); background: var(--surface);
  color: var(--text-subtle); border-radius: 999px; padding: 2px 10px;
}
.ro-pill:hover { background: var(--surface-sunken); }
.ro-pill.on { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="dark"] .ro-pill.on { color: var(--text-inverse); }
.ro-add #roTitle { width: 100%; margin-bottom: var(--sp-2); }
.ro-add textarea { width: 100%; min-height: 90px; font-family: var(--font-mono); font-size: 12.5px; }
.ro-add textarea[data-plain] { font-family: var(--font); font-size: 13.5px; }
.ro-editor { height: 140px; border: 1px solid var(--border-bold); border-radius: 9px; overflow: hidden; }
.ro-add .row { margin-top: var(--sp-3); }
.ro-elig-row {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px dashed var(--border); border-radius: 10px;
  padding: 6px var(--sp-2) 6px var(--sp-3); margin-bottom: var(--sp-2);
  font-size: 13.5px;
}

/* ---------- ledger group rows ---------- */
tr.group-row td {
  background: var(--surface-sunken) !important;
  padding: 6px var(--sp-3) !important;
  font-size: 12.5px;
}
tr.group-row .proj-badge { margin-right: 4px; }
tr.group-row .group-check, tr.group-row .proj-badge { vertical-align: middle; }
tr.group-row .group-check { margin-right: 8px; }
tr.ledger-ts td { background: var(--surface-sunken); padding-top: 4px !important; padding-bottom: 4px !important; }
.ledger-table td { padding-top: 4px; padding-bottom: 4px; }
.ledger-table td:last-child .row { justify-content: flex-end; }
.ledger-ts-row { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 0 3px var(--sp-5); font-size: 12.5px; }
.tr-track-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 4px; }
.tr-track-row .act-track { flex: 1; }
.tr-name { display: flex; align-items: center; gap: 6px; width: 150px; flex: none; font-size: 12.5px; overflow: hidden; white-space: nowrap; }
.tr-name .avatar { width: 20px; height: 20px; font-size: 8px; }
.tr-total { width: 56px; flex: none; text-align: right; font-size: 12.5px; }
.tr-scale-inset { margin-left: 158px; margin-right: 64px; }
.ts-detail summary { cursor: pointer; }
.ts-detail .ledger-ts-row { padding-left: 0; font-size: 12px; }
.ts-detail .ledger-ts-row .grow { min-width: 4px; }
.ledger-ts-row .avatar { width: 18px; height: 18px; font-size: 8px; }

/* ---------- knowledge base ---------- */
.kb-body { max-width: 860px; line-height: 1.6; }
.cm-text table, .kb-body table, .ql-editor table { border-collapse: collapse; margin: 6px 0; max-width: 100%; }
.cm-text td, .cm-text th, .kb-body td, .kb-body th, .ql-editor td, .ql-editor th {
  border: 1px solid var(--border-bold); padding: 4px 8px; font-size: 13px; }
.kb-body pre { background: var(--surface-sunken); border-radius: 8px; padding: var(--sp-3); overflow-x: auto; }
.kb-body img { max-width: 100%; }

/* ---------- operations glance ---------- */
.org-logo { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: var(--surface-sunken); flex: none; }
a.stat-tile { color: inherit; }
a.stat-tile:hover { background: var(--surface-hover); text-decoration: none; }
.gl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.gl-masonry { columns: 2; column-gap: var(--sp-4); }
@media (max-width: 1000px) { .gl-masonry { columns: 1; } }
.gl-masonry .gl-card { break-inside: avoid; margin-bottom: var(--sp-4); }
@media (max-width: 1000px) { .gl-grid { grid-template-columns: 1fr; } }
.gl-card { border: 1px solid var(--border); border-radius: 16px; padding: var(--sp-4); background: var(--surface); }
.gl-card h3 { margin: 0 0 var(--sp-3); font-size: 13.5px; }
.gl-card h3 > a { float: right; font-size: 12px; font-weight: 500; }
.gl-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.gl-bar { flex: 1; background: var(--brand); border-radius: 3px 3px 0 0; min-height: 2px; }
.gl-bar.alt { background: var(--text-subtlest); }
.gl-pair { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.gl-labels { display: flex; gap: 6px; margin-top: 4px; }
.gl-labels span { flex: 1; text-align: center; font-size: 10px; color: var(--text-subtlest); white-space: nowrap; overflow: hidden; }
.gl-stack { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--surface-sunken); }
.gl-stack span { min-width: 2px; }
.gl-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: 12px; color: var(--text-subtle); }
.gl-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }
.gl-row { display: flex; align-items: center; gap: var(--sp-2); padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.gl-row:last-child { border-bottom: none; }
.gl-row:hover { background: var(--surface-hover, rgba(128, 128, 128, .07)); }
.gl-row .gl-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gl-row .avatar { width: 22px; height: 22px; font-size: 9px; }

/* group heading on an agent card. A band, because the groups under it are rows
   that read alike and a grey line of text does not separate them */
.gl-group {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) 0 0; padding: 4px 8px;
  background: var(--surface-sunken); border-left: 3px solid var(--border-bold);
  border-radius: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-subtle);
}
.gl-group span { color: var(--text-subtlest); font-weight: 500; letter-spacing: 0; }
.gl-group.warn { background: var(--warning-subtlest); border-left-color: var(--warning-text); color: var(--warning-text); }
.gl-group.warn span { color: var(--warning-text); }
/* the rest of a truncated group, opened in place */
.gl-more > summary {
  padding: 5px 0; font-size: 12px; color: var(--text-subtlest); cursor: pointer;
  list-style: none; user-select: none;
}
.gl-more > summary::-webkit-details-marker { display: none; }
.gl-more > summary i { vertical-align: -1px; transition: transform .12s; display: inline-block; }
.gl-more[open] > summary i { transform: rotate(180deg); }
.gl-more > summary:hover { color: var(--text-subtle); }
/* full-bleed rule: pulled out to the card's edges, so it reads as a division of
   the card rather than another row-width border like the ones between tasks */
.gl-split { margin: var(--sp-4) calc(var(--sp-4) * -1) 0; border-top: 1px solid var(--border-bold); }

/* ---------- reports ---------- */
.report-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtlest); margin: var(--sp-5) 0 var(--sp-2); }
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.report-card { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.report-card:hover { background: var(--surface-hover); text-decoration: none; }
.report-card i { font-size: 20px; color: var(--brand); line-height: 1.2; }
.report-card b { display: block; font-size: 13.5px; color: var(--text); }
.report-card > span > span { font-size: 12px; color: var(--text-subtle); }
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .report-cols { grid-template-columns: 1fr; } }
.act-track { position: relative; height: 18px; background: var(--surface-sunken); border-radius: 6px; overflow: hidden;
  background-image: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / var(--hours, 24))); }
.act-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-subtlest); margin-top: 3px; font-variant-numeric: tabular-nums; }
.act-block { position: absolute; top: 2px; bottom: 2px; background: var(--brand); border-radius: 3px; min-width: 2px; opacity: .85; }
.act-block.live { background: var(--danger); }
a.act-block:hover { opacity: 1; }
tr.row-hi td { background: var(--selected); }
.tip { position: fixed; z-index: 400; background: var(--text); color: var(--surface); font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap; display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.day-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.day-card-head { padding: var(--sp-3) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--border); }
/* the border is a divider before the entries table — with nothing below (dashboard) it would double the card edge */
.day-card-head:last-child { border-bottom: none; }
.day-card-head h4 { margin: 0 0 var(--sp-2); }
.bar-h { height: 8px; background: var(--brand); border-radius: 4px; min-width: 2px; display: inline-block; vertical-align: middle; }
.bar-h.alt { opacity: .45; }
tr.group-row:hover { background: none; }

/* ---------- payrun conflict grouping ---------- */
.conflict-emp { padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.conflict-emp:first-of-type { border-top: none; }
.conflict-row { margin-left: 32px; }

/* ---------- floating active-timer bar ---------- */
.timer-bar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 50; display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface-overlay); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 8px 6px 16px; box-shadow: var(--shadow-overlay);
  max-width: min(560px, calc(100vw - 32px));
}
.timer-bar-task { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text); min-width: 0; }
.timer-bar-task:hover { text-decoration: none; }
.timer-bar-task b { font-size: 12px; color: var(--text-subtle); }
.timer-bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.timer-bar-time { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.timer-bar .btn { border-radius: 999px; }
.tcard-timer { background: var(--brand-subtlest); }

/* ---------- checklist builder dialog ---------- */
.dialog-wide { width: min(760px, calc(100vw - 32px)); }
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 700px) { .cl-grid { grid-template-columns: 1fr; } }
.field-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-subtlest); margin-bottom: var(--sp-2); }
.cl-row {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px var(--sp-2) 6px var(--sp-3); margin-bottom: var(--sp-2);
  background: var(--surface-raised);
}
.cl-box { width: 15px; height: 15px; border: 1px solid var(--border-bold); border-radius: 5px; flex: none; }
.cl-input { border: none; background: none; min-height: 24px; padding: 0; font-size: 13.5px; }
.cl-input:focus, .cl-input:hover { border: none; box-shadow: none; background: none; }
.cl-del { opacity: 0; }
.cl-row:hover .cl-del, .cl-row:focus-within .cl-del { opacity: 1; }
.cl-preview {
  background: var(--surface-sunken); border-radius: 12px;
  padding: var(--sp-4); min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.cl-preview .checklist { background: var(--surface); width: 100%; }
.kbd {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--border-bold); border-radius: 5px; padding: 1px 5px;
}

/* ---------- chat checklists ---------- */
.checklist {
  border: 1px solid var(--border); border-radius: 12px;
  padding: var(--sp-2) var(--sp-3); min-width: 260px; max-width: 380px;
  background: var(--surface-raised);
}
.checklist-head { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-1); font-size: 13px; }
.checklist-item { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 0; cursor: pointer; font-size: 13.5px; }
.checklist-item > span { flex: 1; min-width: 0; word-break: break-word; }
.checklist-item.done > span { text-decoration: line-through; color: var(--text-subtlest); }
.checklist-item small { white-space: nowrap; }
.checklist-addrow {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--border);
  color: var(--text-subtlest);
}
.checklist-addrow input { border: none; background: none; min-height: 22px; padding: 0; font-size: 13px; }
.checklist-addrow input:focus, .checklist-addrow input:hover { border: none; box-shadow: none; background: none; }
.cl-hint { margin: 0; }
#clAdd { margin-bottom: 0; }

/* ---------- dropdown (native details) ---------- */
details.dd { position: relative; }
details.dd > summary { list-style: none; cursor: pointer; }
details.dd > summary::-webkit-details-marker { display: none; }
details.dd[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 39; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 200px; background: var(--surface-overlay); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay); padding: var(--sp-2) 0;
}
.dd-menu a, .dd-menu button {
  display: block; width: 100%; text-align: left; padding: 5px var(--sp-3); font-size: 13px;
  color: var(--text); background: none; border: none; font: inherit; cursor: pointer;
}
.dd-menu a:hover, .dd-menu button:hover { background: var(--surface-hover); text-decoration: none; }
.dd-head { padding: var(--sp-2) var(--sp-4); font-size: 12px; color: var(--text-subtlest); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-1); }

/* notification bell */
.bell { position: relative; }
.bell-badge {
  position: absolute; top: -2px; right: -4px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 14px; padding: 0 5px; line-height: 15px; min-width: 15px; text-align: center;
}
.notif-menu { width: 340px; max-height: 420px; overflow-y: auto; }
.notif-menu .dd-head { display: flex; align-items: center; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.notif-tabs { gap: 6px; padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.notif-tabs .btn { width: auto; padding: 2px 10px; }
.notif-tabs .btn.on { background: var(--brand-subtlest); color: var(--brand); }
#mineOnly.on { background: var(--brand-subtlest); color: var(--brand); border-color: var(--brand); }
.notif-menu .dd-head .btn { display: inline-flex; width: auto; padding: 2px 8px; }
.notif { display: block; padding: 6px var(--sp-3); color: var(--text); font-size: 12.5px; line-height: 17px; }
.notif:hover { background: var(--surface-hover); text-decoration: none; }
.notif.unread { background: var(--brand-subtlest); }
.notif .small { display: block; }
.notif-empty { padding: var(--sp-4); text-align: center; }
.pager { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); }
.pager .btn.on { background: var(--brand); color: #fff; }

/* ---------- dialog ---------- */
dialog {
  border: none; border-radius: var(--radius-lg); background: var(--surface-overlay); color: var(--text);
  box-shadow: var(--shadow-overlay); padding: 0; width: min(520px, calc(100vw - 32px));
  margin: auto; /* the * reset removes the UA's centering margin — restore it */
  overflow: visible; /* let Tom Select / mention dropdowns escape the dialog box */
}
/* open dialogs are flex columns capped to the viewport: head and foot stay
   put, only .dialog-body scrolls - content can never push the buttons off
   screen (dialog overflow stays visible for dropdowns, the body clips) */
dialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
dialog[open] > form { display: flex; flex-direction: column; min-height: 0; }
dialog::backdrop { background: #091E4266; }
[data-theme="dark"] dialog::backdrop { background: #000000B3; }
[data-theme="dark"] .drawer-backdrop, [data-theme="dark"] .backdrop.show { background: #000000B3; }
/* elevate the task modal off the black page: remap its surface tokens so every
   child (header, panes, composer, inputs) lifts with it */
[data-theme="dark"] .drawer {
  --surface: #1A1A1A;
  --surface-sunken: #101010;
  --surface-raised: #242424;
  border: 1px solid #FFFFFF21;
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4) 0; flex-shrink: 0; }
.dialog-body { padding: var(--sp-3) var(--sp-4); min-height: 0; overflow-y: auto; }
body:has(dialog[open]) { overflow: hidden; } /* no background scroll behind modals */
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-4); flex-shrink: 0; }
/* the confirm/prompt dialogs that replaced the browser's own */
dialog.ask { width: min(420px, calc(100vw - 32px)); }
dialog.ask .dialog-body { padding: var(--sp-4) var(--sp-5) var(--sp-3); }
dialog.ask .ask-msg { margin: 0; font-size: 14px; line-height: 20px; white-space: pre-line; }
dialog.ask .ask-input { width: 100%; margin-top: var(--sp-3); }
/* drafting: alternatives as cards, so choosing is the obvious act */
dialog.ai-picker { width: min(640px, calc(100vw - 32px)); }
.ai-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 13.5px; line-height: 20px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: var(--sp-3); margin-bottom: var(--sp-2);
}
.ai-card:hover { border-color: var(--brand); background: var(--surface-hover); }
.ai-card-text { display: block; white-space: pre-wrap; }
.ai-card-cta { display: block; margin-top: var(--sp-2); font-size: 11px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
.ai-loading { padding: var(--sp-4) 0; text-align: center; }

/* ---------- secondary rail (KB notes list / Focus journal) — a flush full-height
   column beside the content, exactly like the old crew's kb/focus sidebars ---------- */
.rail-split { display: flex; align-items: stretch; margin: calc(var(--sp-6) * -1); min-height: calc(100vh - 48px); }
.rail {
  width: 280px; flex-shrink: 0;
  border-right: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
.rail-head { display: flex; gap: 6px; align-items: center; height: 44px; padding: 0 var(--sp-2); border-bottom: 1px solid var(--border); flex: none; }
.rail-head b { font-size: 13px; padding-left: 4px; }
.rail-head input { min-height: 28px; font-size: 13px; }
.rail-list { flex: 1; overflow-y: auto; padding: var(--sp-2); }
.rail-section { font-size: 11px; letter-spacing: .05em; color: var(--text-subtlest); padding: 10px 8px 4px; text-transform: uppercase; font-weight: 600; }
.rail-item { display: block; padding: 7px 8px; border-radius: 9px; color: inherit; margin-bottom: 1px; }
.rail-item:hover { background: var(--surface-hover); text-decoration: none; }
.rail-item.active { background: var(--selected); }
.rail-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.rail-title i { color: var(--text-subtlest); font-size: 12px; }
.rail-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rail-snippet { color: var(--text-subtlest); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.rail-main { flex: 1; min-width: 0; padding: var(--sp-6); }
.rail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; }
/* KB note page: editor fills the view, toggles light up when on, read-only gets a quiet banner.
   The class chain must out-rank .quill-box .ql-editor's 96px min-height further down. */
.quill-box.kb-editor .ql-editor { min-height: calc(100dvh - 270px); }
.icon-btn.kb-on { color: var(--brand); }
.kb-readonly {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  background: var(--surface-sunken); border: 1px dashed var(--border);
  border-radius: 9px; padding: 4px 10px; color: var(--text-subtle); font-size: 13px;
}
.kb-body > :first-child { margin-top: var(--sp-3); }
/* the preview body borrows Quill's .ql-editor class so ql-indent-N lists and
   their alpha/roman counters render exactly as authored — minus the editor box */
.kb-body.ql-editor { padding: 0; min-height: 0; height: auto; overflow: visible; }
.kb-body .code-body pre { background: none; border-radius: 0; padding: 0; }
@media (max-width: 900px) {
  .rail-split { flex-direction: column; margin: calc(var(--sp-4) * -1); min-height: 0; }
  .rail { position: static; width: 100%; height: auto; max-height: 280px; border-right: none; border-bottom: 1px solid var(--border); }
  .rail-main { padding: var(--sp-4); }
}

/* task list cell: type icon + key on the first line, the title on its own line below */
.task-cell { display: block; }
.task-cell b { display: block; margin-top: 3px; padding-left: 5px; }

/* ---------- toast ---------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4); z-index: 100; box-shadow: var(--shadow-overlay);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#toast.show { opacity: 1; }

/* ---------- notification enable prompt ---------- */
.notif-prompt {
  position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 330px; max-width: calc(100vw - 48px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-overlay); padding: var(--sp-4);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.notif-prompt.show { opacity: 1; transform: none; pointer-events: auto; }
.notif-prompt p { margin: var(--sp-2) 0 var(--sp-3); color: var(--text-subtle); font-size: 12.5px; }

/* ---------- login ---------- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); padding: var(--sp-4);
}
.login-card {
  background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  width: 400px; max-width: 100%; padding: var(--sp-8);
}
.login-card .logo { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: var(--sp-6); }
.form-error { background: var(--danger-subtlest); color: var(--danger-text); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }

/* ---------- misc ---------- */
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.grow { flex: 1; }
.muted { color: var(--text-subtlest); }
/* every step of the scale, because a class that silently does nothing reads on
   the page as a missing margin and in the markup as a margin that is there */
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.tag-key { font-weight: 600; font-size: 12px; color: var(--text-subtlest); white-space: nowrap; }
.timer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--success-subtlest); color: var(--success-text);
  border-radius: 16px; padding: 2px 12px; min-height: 30px; font-weight: 600; font-size: 12px;
}

/* ---------- task modal (centered, wide) ---------- */
.drawer {
  position: fixed; inset: 0; margin: auto; z-index: 60;
  width: min(1100px, 94vw); height: min(92vh, 900px);
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-overlay);
  display: none; flex-direction: column; overflow: hidden;
}
.drawer.open { display: flex; }
.drawer-top { position: absolute; top: 0; right: 10px; height: 48px; display: flex; align-items: center; z-index: 20; }
.drawer-body { overflow: hidden; padding: 0; flex: 1; display: flex; flex-direction: column; }
.drawer-backdrop {
  display: none; position: fixed; inset: 0; background: #091E4266; z-index: 55;
}
.drawer-backdrop.show { display: block; }
@media (max-width: 900px) {
  .drawer { width: 100vw; height: 100vh; border-radius: 0; }
}

/* ---------- chat-style threads (comments / ticket conversations) ---------- */
.chat { display: flex; flex-direction: column; margin-bottom: var(--sp-4); }
.msg { max-width: 78%; margin-bottom: var(--sp-3); }
.msg-them { align-self: flex-start; }
.msg-me { align-self: flex-end; text-align: right; }
.msg .msg-head { font-size: 11px; color: var(--text-subtlest); margin-bottom: 2px; }
.msg .msg-head b { color: var(--text-subtle); }
.msg-bubble {
  display: inline-block; text-align: left; border-radius: 16px; padding: var(--sp-2) var(--sp-3);
  white-space: pre-wrap; word-break: break-word;
  max-width: min(860px, 100%);
}
/* wide content stays inside the bubble: preformatted blocks wrap or scroll themselves */
.msg-bubble pre { white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-width: 100%; }
.msg-bubble img { max-width: 100%; height: auto; }
.msg-them .msg-bubble { background: var(--neutral-subtle); border-bottom-left-radius: 4px; }
.msg-me .msg-bubble { background: var(--brand-subtlest); border-bottom-right-radius: 4px; }
.msg-bubble .rich { white-space: normal; }
.msg-bubble .rich p { margin: 0 0 4px; }
.msg-bubble .rich p:last-child { margin: 0; }
.msg .c-actions { opacity: 0; transition: opacity .1s; }
.msg:hover .c-actions { opacity: 1; }
/* Jira-style solid mention pill */
.mention {
  display: inline-block; background: var(--brand); color: #fff;
  border-radius: 16px; padding: 0 8px; font-weight: 500; line-height: 18px;
}
[data-theme="dark"] .mention { color: var(--text-inverse); }
.ql-editor .mention { line-height: inherit; }

/* Jira-style flat comment feed */
.cfeed { display: flex; flex-direction: column; }
.cfeed .citem { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); max-width: 82%; }
.cfeed .citem-me { align-self: flex-end; flex-direction: row-reverse; }
.cfeed .cbody { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cfeed .citem-me .cbody { align-items: flex-end; }
.cfeed .chead { font-size: 12px; color: var(--text-subtlest); margin-bottom: 3px; }
.cfeed .chead b { font-size: 12px; color: var(--text-subtle); }
.cfeed .c-actions { margin-top: var(--sp-1); opacity: 0; transition: opacity .1s; }
.cfeed .citem:hover .c-actions { opacity: 1; }
.subtask-row {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); color: inherit; cursor: pointer;
}
.subtask-row:hover { background: var(--surface-hover); text-decoration: none; }
.history-row { padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); }
.history-row:last-child { border-bottom: none; }

/* ---------- attachments ---------- */
.attach-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.attach-item { position: relative; display: inline-block; }
.attach-del {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border: none; border-radius: 50%; background: var(--text); color: var(--surface);
  font-size: 10px; line-height: 1; cursor: pointer; display: none;
  align-items: center; justify-content: center;
}
.attach-item:hover .attach-del { display: inline-flex; }
.attach-del:hover { background: var(--danger); color: #fff; }
.tcard.touch-dragging { opacity: .4; }
.tcard-ghost {
  position: fixed; z-index: 100; pointer-events: none; width: 250px;
  transform: rotate(2deg); box-shadow: var(--shadow-overlay);
}
.attach-img img { max-width: 160px; max-height: 120px; border-radius: var(--radius-lg); border: 1px solid var(--border); display: block; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 240px; overflow: hidden;
  background: var(--neutral-subtle); color: var(--text); border-radius: var(--radius);
  padding: 4px 10px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis;
}
.attach-chip:hover { background: var(--surface-pressed); text-decoration: none; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pending-files { font-size: 12px; color: var(--text-subtle); }

/* ---------- @mention autocomplete ---------- */
.mention-box { position: relative; }
.mention-menu {
  position: absolute; left: 0; bottom: 100%; z-index: 70; min-width: 220px; max-height: 200px; overflow-y: auto;
  background: var(--surface-overlay); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); padding: var(--sp-1) 0;
}
.mention-menu button {
  display: flex; gap: var(--sp-2); align-items: center; width: 100%; text-align: left;
  padding: 6px var(--sp-3); background: none; border: none; font: inherit; color: var(--text); cursor: pointer;
}
.mention-menu button:hover, .mention-menu button.sel { background: var(--surface-hover); }
.mention-menu small { color: var(--text-subtlest); }

/* ---------- control height alignment ---------- */
.btn { min-height: 32px; }
.btn-sm { min-height: 24px; }
form .row .btn:not(.btn-sm), .reply-bar .btn, .login-card .btn { min-height: 34px; }

/* A small button standing beside a form control belongs to that control's line
   rather than being a row action, so it matches what it sits next to: 34px next
   to a normal input, 30px next to an .input-sm filter bar. Keyed on the row
   actually containing a control — a .row inside a table cell has none, and its
   buttons stay the compact size they are meant to be. */
.row:has(> .field) > .btn-sm { min-height: 34px; }
.row:has(> .input-sm) > .btn-sm,
.row:has(> .input-sm) > .btn:not(.btn-sm) { min-height: 30px; }
.avatar-stack .avatar { width: 32px; height: 32px; }

/* ---------- Tom Select theming (tokens over library defaults) ---------- */
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control, .ts-control {
  border: 1px solid var(--border-bold); border-radius: 9px;
  background: var(--surface); color: var(--text);
  padding: 5px 10px; min-height: 34px; box-shadow: none; font: inherit;
}
.ts-wrapper.focus .ts-control { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ts-control input { color: var(--text); font: inherit; min-height: 0; }
/* the .input-active selector is Tom Select's own, repeated here only to match its
   specificity: its rule sets `background` as a shorthand, which wiped the chevron
   the moment the control was focused — and the clear button goes on reserving the
   space where the chevron had been, so it read as floating in from the edge */
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23738496' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.ts-wrapper.single .ts-control::after { display: none; }
.ts-dropdown {
  background: var(--surface-overlay); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-overlay); margin-top: 4px;
  /* rows paint a full-width background, so without this the highlight on the
     first and last of them squares off the corners the dropdown just rounded */
  overflow: hidden;
}
.ts-dropdown .option, .ts-dropdown .no-results { padding: 8px 12px; }
.ts-dropdown .active { background: var(--surface-hover); color: var(--text); }
.ts-dropdown .selected { background: var(--selected); color: var(--selected-text); }
.ts-wrapper.multi .ts-control > .item {
  background: var(--neutral-subtle); color: var(--text); border-radius: 7px; padding: 2px 6px;
}
.ts-wrapper.multi .ts-control > .item .remove { border-left: 1px solid var(--border); color: var(--text-subtlest); }
.ts-wrapper.multi .ts-control > .item .remove:hover { background: var(--danger-subtlest); color: var(--danger-text); }
/* single-select focus: overlay the search input on the control instead of letting it
   wrap to a second line (which grew the control and shoved the caret below the item) */
.ts-wrapper.single.input-active .ts-control > input {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 5px 30px 5px 10px;
}
/* hide the selected item only while the user is actually typing a query -
   hiding on mere focus made selections invisible until blur */
.ts-wrapper.single.ts-typing .ts-control > .item { visibility: hidden; }
/* Tom Select copies the field's classes onto the wrapper it builds, so a small
   picker took the input's padding and min-height and then rendered a 34px
   control inside that — 42px tall next to 30px inputs, and sitting 4px high of
   them in a flex-end row. The wrapper is a container; the control has the height. */
/* grouped options: without this a group header reads as just another option,
   which is worse than no grouping at all */
.ts-dropdown .optgroup-header {
  padding: 6px 10px 2px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; color: var(--text-subtlest);
}
.ts-dropdown .optgroup + .optgroup .optgroup-header { border-top: 1px solid var(--border); margin-top: 4px; }
/* the first header needs no breathing room above it: the dropdown already sits
   4px clear of the control, and stacking the header's own padding on top of that
   opened a band of empty space where the list should start */
.ts-dropdown .optgroup:first-child .optgroup-header { padding-top: 2px; }
.ts-wrapper.input-sm { padding: 0; min-height: 0; }
.ts-wrapper.input-sm .ts-control { min-height: 30px; padding: 3px 10px; font-size: 13px; }

/* clear button: centred, and genuinely clear of the chevron rather than two
   pixels from it. The library ships it as a bare glyph about 6px wide, which is
   both a cramped hit target and impossible to space reliably, so it gets a box. */
.plugin-clear_button .clear-button {
  /* stretched rather than centred with top:50%: that percentage resolves against
     a box that excludes the border, which landed the button a pixel high. Spanning
     the full height and centring the glyph with flex depends on neither. */
  right: 30px !important; left: auto !important;
  top: 0 !important; bottom: 0; height: auto; transform: none;
  width: 18px; padding: 0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: var(--text-subtlest); opacity: 1;
  /* the library's glyph is U+2A2F, a maths operator centred on the maths axis
     rather than the em box — so it renders a couple of pixels high however the
     box around it is aligned. Hide it and draw the icon the rest of the app
     uses, which is centred on the box it is given. */
  text-indent: -9999px; overflow: hidden;
}
.plugin-clear_button .clear-button::after {
  content: "\eb99"; font-family: remixicon !important; text-indent: 0; float: left;
  width: 100%; text-align: center; font-size: 15px; line-height: 1;
}
.plugin-clear_button .clear-button:hover { background: var(--surface-hover); color: var(--text); }
/* and the value must not run underneath either of them. Tom Select sets this
   padding !important, but composes it from these two variables — so they are what
   to change, rather than an !important of our own answering its one. */
.ts-wrapper.plugin-clear_button .ts-control { --ts-pr-clear-button: 30px; --ts-pr-caret: 24px; }

/* ---------- Quill theming ---------- */
.quill-box .ql-toolbar {
  border: 1px solid var(--border-bold); border-radius: 9px 9px 0 0; background: var(--surface-sunken);
}
.quill-box .ql-container {
  border: 1px solid var(--border-bold); border-top: none; border-radius: 0 0 9px 9px;
  font: inherit; background: var(--surface); color: var(--text); min-height: 96px;
}
.quill-box .ql-editor { min-height: 96px; }
/* the box draws its own focus ring via :focus-within — the browser's default
   contenteditable outline would double it inside the content area */
.ql-editor:focus, .ql-editor:focus-visible { outline: none; }
.quill-box .ql-editor.ql-blank::before { color: var(--text-subtlest); font-style: normal; }
/* composer actions join the editor box as its footer — no gap after the input */
#commentForm .quill-box + .row, #descEdit .quill-box + .row {
  margin-top: 0; padding: var(--sp-2);
  border: 1px solid var(--border-bold); border-top: none; border-radius: 0 0 9px 9px;
}
#commentForm .quill-box .ql-container, #descEdit .quill-box .ql-container { border-radius: 0; }
.ql-snow .ql-stroke { stroke: var(--text-subtle); }
.ql-snow .ql-fill { fill: var(--text-subtle); }
.ql-snow .ql-picker { color: var(--text-subtle); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--brand); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--brand); }
.ql-mention-list-container {
  background: var(--surface-overlay); color: var(--text); border-radius: 12px;
  box-shadow: var(--shadow-overlay); border: 1px solid var(--border); z-index: 90; overflow: hidden;
}
.ql-mention-list-item { padding: 8px 12px; cursor: pointer; }
.ql-mention-list-item.selected { background: var(--surface-hover); }
.rich p { margin-bottom: var(--sp-2); }
.rich p:last-child { margin-bottom: 0; }
.rich ul, .rich ol { padding-left: var(--sp-5); margin-bottom: var(--sp-2); }
.rich blockquote { border-left: 3px solid var(--border-bold); padding-left: var(--sp-3); color: var(--text-subtle); margin-bottom: var(--sp-2); }
.rich pre { background: var(--surface-sunken); border-radius: 9px; padding: var(--sp-3); overflow-x: auto; font-family: var(--font-mono); font-size: 12px; margin-bottom: var(--sp-2); }
.rich a { text-decoration: underline; }

/* ---------- mobile stacked tables ---------- */
@media (max-width: 768px) {
  .table-wrap { border: none; border-radius: 0; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list thead { display: none; }
  table.list tr {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); background: var(--surface-raised);
  }
  table.list td { border: none; padding: 3px 0; display: flex; gap: var(--sp-2); align-items: center; }
  table.list td:empty { display: none; }
  table.list td[data-label]::before {
    content: attr(data-label);
    flex: none; width: 92px; font-size: 12px; font-weight: 600; color: var(--text-subtlest);
  }
}

/* ---------- team chat ---------- */
.side-badge {
  margin-left: auto; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 14px; padding: 0 6px; line-height: 16px;
}
/* dedicated chat layout: full-bleed under the topbar */
.chat-shell { display: flex; flex-direction: column; height: 100dvh; }
.chat-shell .topbar { flex: none; }
.chat-shell .menu-btn, .chat-shell .collapse-btn { display: none; }
.chat-main { flex: 1; min-height: 0; }
.chat-app {
  display: grid; grid-template-columns: 220px 1fr;   /* matches the nav sidebar */
  height: 100%;
  background: var(--surface-raised);
}
.chat-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.chat-list-head { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); height: 44px; flex: none; border-bottom: 1px solid var(--border); }
.chat-list-body { overflow-y: auto; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.chat-item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: 7px var(--sp-2); border: none; border-radius: 9px; margin-bottom: 1px;
  background: none; font: inherit; color: var(--text-subtle); cursor: pointer; text-align: left;
}
.chat-item:hover { background: var(--surface-hover); }
.chat-item.on { background: var(--selected); color: var(--selected-text); }
.chat-item .avatar { width: 24px; height: 24px; font-size: 10px; }
.chat-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-pane-head { display: flex; align-items: center; padding: 0 var(--sp-4); height: 44px; flex: none; border-bottom: 1px solid var(--border); }
.chat-msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sp-4); background: var(--surface); display: flex; flex-direction: column; }
.chat-msgs .console-empty { align-self: center; }
.cm {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); position: relative;
  align-self: flex-start; max-width: min(82%, 640px);
}
.cm-me { align-self: flex-end; flex-direction: row-reverse; }
.cm-me .cm-head { text-align: right; }
.cm .avatar { width: 30px; height: 30px; flex: none; }
.cm-body { min-width: 0; max-width: 100%; }
/* children may not outgrow the bubble cap: pre blocks wrap, true one-liners scroll inside themselves */
.cm-text, .code-block, .checklist { max-width: 100%; }
.cm-text pre, .cm-text .ql-syntax { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
/* code with line numbers: gutter sits OUTSIDE the horizontal scroller so it can never be
   scrolled over; the wrapper scrolls vertically moving both columns together.
   Both columns share the same mono font and a pixel line-height - fractional
   metrics in different fonts drift apart over long blocks. */
/* flex-start is load-bearing: stretch would cap both columns at the 360px viewport,
   and the pre's hidden overflow then clips the last lines while the gutter's visible
   overflow keeps painting numbers past them */
.code-body { display: flex; align-items: flex-start; max-height: 360px; overflow-y: auto; background: #f6f8fa; }
[data-theme="dark"] .code-body { background: #0d1117; }
.code-gutter, .code-body pre, .code-body pre code {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 19px; }
.code-gutter { flex: none; white-space: pre; text-align: right; padding: 12px 8px 12px 12px;
  color: var(--text-subtlest); user-select: none; border-right: 1px solid var(--border); }
.code-body pre { flex: 1; min-width: 0; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden;
  max-height: none; white-space: pre; word-break: normal; }
.code-body pre code.hljs { overflow: visible; background: transparent; padding: 12px; display: block; min-width: max-content; }
.cm .attach-img img { max-width: 100%; height: auto; }
.cm-flash .cm-text, .cm-flash .code-block, .cm-flash .checklist { outline: 2px solid var(--brand); outline-offset: 2px; }
.cm-seen { font-size: 11px; color: var(--text-subtlest); text-align: right; margin-top: 2px; }
.cm-day { position: sticky; top: 0; z-index: 6; align-self: center; width: fit-content;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 12px; margin: var(--sp-2) auto; font-size: 11.5px; font-weight: 600; color: var(--text-subtle); }
.avatar-img { object-fit: cover; padding: 0; border-radius: 50%; background: var(--surface-sunken); }
.person-ava { position: relative; display: inline-block; }
.person-ava-edit { position: absolute; right: -6px; bottom: -6px; }
.person-ava-edit .icon-btn { background: var(--surface); border: 1px solid var(--border); width: 26px; height: 26px; }
.fc-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }
.fc-row .fc-text { flex: 1; }
.fc-row input[type="checkbox"]:checked + .fc-text { text-decoration: line-through; color: var(--text-subtlest); }
.link-card { display: flex; gap: var(--sp-2); align-items: flex-start; border: 1px solid var(--border); border-radius: 10px;
  padding: var(--sp-2); margin-top: 4px; max-width: min(480px, 100%); color: inherit; background: var(--surface); }
.link-card:hover { background: var(--surface-hover); text-decoration: none; }
.link-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.link-card-t { min-width: 0; }
.link-card-t b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card-t span { display: block; font-size: 12px; color: var(--text-subtle); }
.link-card-t small { color: var(--text-subtlest); }
.crew-results { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.crew-result { text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 8px 10px; cursor: pointer; font: inherit; color: var(--text); }
.crew-result:hover { background: var(--surface-hover); }
.crew-result-ex { display: block; color: var(--text-subtle); font-size: 12.5px; margin-top: 2px; }
.crew-files { display: flex; flex-wrap: wrap; gap: var(--sp-3); max-height: 460px; overflow-y: auto; }
.crew-files .attach-img img { max-width: 140px; max-height: 140px; border-radius: 8px; }
.crew-files .crew-file { display: inline-flex; flex-direction: column; gap: 2px; }
.react-free { display: flex; gap: 4px; padding: 4px 6px; border-top: 1px solid var(--border); }
.react-free input { width: 76px; min-height: 26px; padding: 2px 8px; font-size: 14px; }
.react-free button { border: none; background: var(--brand); color: #fff; border-radius: 6px; padding: 0 8px; cursor: pointer; font-size: 12px; }
#chatHeader { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
#chatHeader b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-menu [data-notif] b { color: var(--brand); }
.cm-head b { font-size: 13.5px; }
.cm-time { font-size: 11px; color: var(--text-subtlest); margin-left: 4px; }
.cm-text {
  white-space: pre-wrap; word-break: break-word; line-height: 20px;
  background: var(--neutral-subtle); border-radius: 16px; border-top-left-radius: 4px;
  padding: var(--sp-2) var(--sp-3); width: fit-content;
}
.cm-me .cm-text { background: var(--brand-subtlest); border-radius: 16px; border-top-right-radius: 4px; margin-left: auto; }
.cm-text.rich { white-space: normal; }
.cm-text.rich p { margin: 0 0 4px; }
.cm-text.rich p:last-child { margin: 0; }
.cm-reacts { justify-content: flex-start; }
.cm-me .cm-reacts { justify-content: flex-end; }
.cm-fwd, .cm-quote {
  font-size: 12px; color: var(--text-subtle); border-left: 3px solid var(--border-bold);
  padding: 2px 8px; margin: 4px 0; background: var(--neutral-subtle); border-radius: 0 9px 9px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px;
}
.cm-system { text-align: center; margin: var(--sp-3) 0; }
.cm-system span {
  font-size: 12px; color: var(--text-subtlest); background: var(--neutral-subtle);
  border-radius: 14px; padding: 2px 10px;
}
.cm-reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.react-chip {
  font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-raised); padding: 0 8px; line-height: 20px; cursor: pointer;
}
.react-chip.mine { background: var(--brand-subtlest); border-color: var(--brand); }
/* per-message action styles replaced by the floating #cmActions bar */
.cm-actions .icon-btn { width: 26px; height: 26px; font-size: 13px; }
.react-menu { display: flex; min-width: 0; padding: var(--sp-1); }
.react-menu button { width: auto; padding: 4px 6px; font-size: 16px; border-radius: 9px; }
.chat-replybar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4); border-top: 1px solid var(--border);
  background: var(--brand-subtlest); font-size: 12px;
}
.chat-replybar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer {
  display: flex; gap: var(--sp-2); align-items: flex-end;
  padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border);
}
/* one clean composer box: toolbar and editor share a single rounded border */
.chat-quill {
  min-width: 0;
  border: 1px solid var(--border-bold); border-radius: 16px;
  background: var(--surface); overflow: hidden;
}
.chat-quill:focus-within { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.chat-quill .ql-toolbar {
  border: none; border-bottom: 1px solid var(--border);
  padding: 3px 8px; background: var(--surface-sunken);
}
.chat-quill .ql-toolbar .ql-formats { margin-right: 6px; }
.chat-quill .ql-toolbar button { width: 24px; height: 22px; padding: 2px 3px; }
.chat-quill .ql-toolbar .ql-snippet i, .chat-quill .ql-toolbar .ql-checklist i { font-size: 15px; color: var(--text-subtle); }
.chat-quill .ql-toolbar .ql-snippet:hover i, .chat-quill .ql-toolbar .ql-checklist:hover i { color: var(--brand); }
.chat-quill .ql-container {
  border: none; background: none;
  font: inherit; color: var(--text);
}
.chat-quill .ql-editor {
  min-height: 36px; max-height: 140px; overflow-y: auto; padding: 8px 12px; line-height: 20px;
}
.chat-quill .ql-editor.ql-blank::before { color: var(--text-subtlest); font-style: normal; left: 12px; }
.chat-composer { flex-wrap: wrap; }
.chat-composer > .icon-btn, .chat-composer > .file-btn { margin-bottom: 6px; align-self: flex-end; }
.code-block { border-radius: 12px; overflow: hidden; margin: 4px 0; max-width: 640px; border: 1px solid var(--border); }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-sunken); color: var(--text-subtle); font-size: 11px; padding: 2px 4px 2px 12px;
  border-bottom: 1px solid var(--border);
}
.code-block > pre { margin: 0; max-height: 360px; overflow: auto; }   /* pre-decoration only; decorated pres live in .code-body */
.code-block code.hljs { padding: 12px; font-size: 12.5px; }
.monaco-box { height: 320px; border: 1px solid var(--border-bold); border-radius: 9px; overflow: hidden; }
#snippetDialog { width: min(760px, calc(100vw - 32px)); }
#chatBack { display: none; }
@media (max-width: 900px) { #chatBack { display: inline-flex; } }
.pin-mark { color: var(--text-subtlest); display: inline-flex; }
.pin-btn { color: var(--text-subtlest); }
.pin-btn.pin-on { color: var(--brand); }
#chatHeader { display: flex; align-items: center; gap: var(--sp-2); }

/* sidebar conversation search */
.chat-search {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 var(--sp-3) var(--sp-2);
  border: 1px solid var(--border-bold); border-radius: 9px; padding: 0 var(--sp-2);
  color: var(--text-subtlest); height: 30px;
}
.chat-list-head .chat-search { margin: 0; }
.chat-search:focus-within { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.chat-search input { border: none; background: none; padding: 0; height: 100%; min-height: 0; font-size: 13px; }
.chat-search input:focus, .chat-search input:hover { border: none; box-shadow: none; background: none; }

/* floating message action bar */
#cmActions {
  position: absolute; z-index: 80; display: flex; gap: 2px;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: 12px;
  padding: 2px; box-shadow: var(--shadow-overlay);
}
#cmActions .icon-btn { width: 28px; height: 28px; font-size: 14px; }
.cm-time { font-size: 10.5px; color: var(--text-subtlest); margin-top: 2px; }
.cm-me .cm-time { text-align: right; }
@media (max-width: 900px) {
  .chat-app { grid-template-columns: 1fr; }
  .chat-list { display: none; }
  .chat-app.show-list .chat-list { display: flex; }
  .chat-app.show-list .chat-pane { display: none; }
}

/* ---------- external portal (PWA) ---------- */
.portal { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
.portal-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.portal-header .logo {
  display: flex; align-items: center; gap: var(--sp-2); font-weight: 700;
  color: inherit; text-decoration: none;
}
.portal-header a.logo:hover { text-decoration: none; opacity: .85; }
.portal-header select { width: auto; max-width: 160px; padding: 4px 28px 4px 8px; min-height: 32px; font-size: 13px; background-position: right 8px center; }

/* ---------- the organisation being viewed ----------
   Not a setting among settings: it decides what every figure on the page belongs
   to, so it is tinted, it is the widest thing on the bar, and on a desktop it
   sits in the middle where the eye lands rather than at the end of a row. */
.org-switch { position: relative; }
.org-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--sp-3); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  background: var(--brand-subtlest); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-btn:hover { background: var(--selected); }
.org-btn > i { font-size: 15px; }
.org-switch.one .org-btn { cursor: default; }
.org-switch.one .org-caret { display: none; }

.org-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 280px; max-width: min(380px, calc(100vw - 24px)); padding: var(--sp-1);
  background: var(--surface-overlay); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
}
.org-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-2) var(--sp-3); border: none; border-radius: var(--radius);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.org-item:hover { background: var(--surface-hover); }
.org-item-text { flex: 1; min-width: 0; }
.org-item-name { display: block; font-size: 13.5px; line-height: 19px; }
.org-item-role { display: block; font-size: 11.5px; line-height: 15px; color: var(--text-subtlest); }
.org-item.on .org-item-role { color: var(--brand); opacity: .75; }
/* the tick keeps its column whether or not it is there, so the names line up */
.org-check { flex: none; width: 16px; text-align: center; color: var(--brand); }

/* ---------- a choice made of cards ----------
   Two radio buttons in a row say nothing about what either one means; a card
   has room for the sentence that tells them apart, and is a target somebody can
   hit on a phone. */
.choice-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
/* inside a .field, a label is a caption — these are controls, so they say so
   loudly enough to beat that rule */
.choice-cards .choice-card {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3); margin-bottom: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  font-size: 13.5px; font-weight: 400;
}
.choice-cards .choice-card:hover { background: var(--surface-hover); }
.choice-cards .choice-card input[type="radio"] { margin-top: 2px; }
.choice-cards .choice-card b { display: block; font-size: 13.5px; font-weight: 600; line-height: 18px; }
.choice-cards .choice-card small { display: block; color: var(--text-subtlest); font-size: 11.5px; line-height: 15px; }
.choice-cards .choice-card:has(input:checked) { border-color: var(--brand); background: var(--brand-subtlest); }
@media (max-width: 560px) { .choice-cards { grid-template-columns: 1fr; } }

/* a form's actions sit away from the last field, not against it */
.form-actions { margin-top: var(--sp-4); }

.push-ask .btn { flex: none; }
.org-item.on { color: var(--brand); font-weight: 600; }
.portal-main { flex: 1; padding: var(--sp-4); padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.portal-center { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }

/* On a phone the hub folds a table into labelled rows, which is right for a
   ledger and too much for a ticket: six labels to say what a card said in two
   lines. The columns a phone does not need are dropped, and the ones it keeps
   speak for themselves. */
@media (max-width: 768px) {
  #tList td[data-label="Priority"], #tList td[data-label="Messages"] { display: none; }
  #tList td[data-label="Ticket"]::before,
  #tList td[data-label="Project"]::before,
  #tList td[data-label="Raised by"]::before,
  #tList td[data-label="Status"]::before,
  #tList td[data-label="Updated"]::before { content: none; }
  #tList td[data-label="Ticket"] { display: block; margin-bottom: 6px; }
  /* the rest is one line of context, the way it reads on a card */
  #tList td[data-label="Project"],
  #tList td[data-label="Raised by"],
  #tList td[data-label="Status"],
  #tList td[data-label="Updated"] {
    display: inline-flex; width: auto; vertical-align: middle; padding: 0;
    margin-right: var(--sp-3); color: var(--text-subtlest);
  }
  #tList tr { cursor: pointer; }
}

/* the count on the chosen filter is on a solid button now, where a muted grey
   is invisible */
#tFilters .btn-primary .muted { color: inherit; opacity: .7; }

/* the header buttons carry a word on a wide screen and only their icon on a
   phone, where the row has to fit in a thumb's width */
.portal-header .icon-btn span { display: none; }

/* on a narrow screen the wordmark and the buttons take the row and the
   organisation takes the next one, rather than the buttons falling off the end */
@media (max-width: 640px) {
  .portal-header { flex-wrap: wrap; }
  .portal-header .org-switch { order: 3; width: 100%; }
  .portal-header .org-btn { width: 100%; justify-content: center; }
  .org-menu { left: 0; transform: none; width: 100%; }
}

/* ---------- a ticket, as a record of what was said ----------
   Chat bubbles were the right shape for a phone conversation and the wrong one
   for something a customer comes back to a month later: alternating sides, no
   names worth reading, nothing to scan. This is a thread — who, when, what —
   with the two sides told apart by a tint rather than by which edge they hug. */
.tk-head { margin-bottom: var(--sp-4); }
.tk-head h3 { font-size: 17px; line-height: 24px; }
.tk-head p { margin: 4px 0 0; }

#msgs { padding: 0; }
.tk-msg { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.tk-msg:last-child { border-bottom: none; }
.tk-msg.support { background: var(--surface-sunken); }
.tk-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--neutral-subtle); color: var(--text-subtle);
}
.tk-msg.support .tk-avatar { background: var(--brand-subtlest); color: var(--brand); }
.tk-body { min-width: 0; flex: 1; }
.tk-meta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 3px; font-size: 13px; }
.tk-msg .txt { white-space: pre-wrap; word-break: break-word; }

.tk-composer { margin-top: var(--sp-4); }
.portal-main .card > .field, .portal-main .card > .field-row { margin-bottom: var(--sp-4); }
.portal-main .card > .field:last-child, .portal-main .card > .field-row:last-child { margin-bottom: 0; }
.tk-composer textarea { min-height: 84px; resize: vertical; }
.tk-side .card { margin-bottom: 0; }
.tk-side .kv > span:first-child { width: 88px; }

/* the list is a surface the page carries, not text floating on the page: on a
   sunken background a table with no ground of its own reads as unfinished */
.portal-main .table-wrap { background: var(--surface); }
.portal-main table.list tbody tr { cursor: pointer; }

/* filters and search read as one control strip rather than two stacked rows */
.tk-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.tk-toolbar #tSearch { width: 240px; }
@media (max-width: 640px) {
  .tk-toolbar #tSearch { width: 100%; }
}
.portal-main table.list tbody tr:hover { background: var(--surface-hover); }

/* ---------- the portal on a desktop ----------
   It was built as a phone app and shown as one everywhere: a 560px strip down
   the middle of a 27" screen, with the other two thirds white. The layout is the
   same app either way — what changes here is that the width is used.

   The header spans the window and centres its own contents with padding, so the
   bar reads as a bar rather than a floating card. Tickets become a grid of
   cards, since a list of one-line rows down a narrow column is the shape a phone
   forces, not the shape the content wants. A conversation stays narrow on
   purpose: nobody reads a message that runs the width of a monitor. */
@media (min-width: 860px) {
  .portal { max-width: none; background: var(--surface-sunken); }
  .portal-header {
    padding-left: max(var(--sp-6), calc((100vw - 1120px) / 2));
    padding-right: max(var(--sp-6), calc((100vw - 1120px) / 2));
  }
  .portal-header { position: relative; }
  .portal-header .logo { font-size: 15px; }
  /* dead centre of the bar, whatever is on either side of it */
  .portal-header .org-switch { position: absolute; left: 50%; transform: translateX(-50%); }
  .portal-header .org-btn { font-size: 13.5px; padding: 6px var(--sp-4); }
  /* glyphs in a row are a guessing game, and a desktop has room to say what they
     do — the theme toggle keeps its icon, being the one nobody has to learn.
     A button with a word in it is not a circle, so its hover is not an ellipse. */
  .portal-header .icon-btn {
    width: auto; height: 34px; gap: 6px; padding: 0 var(--sp-3);
    border-radius: var(--radius); font-size: 13px; font-weight: 500;
  }
  .portal-header .icon-btn span { display: inline; }

  /* a conversation with its facts beside it, rather than under it */
  .tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--sp-5); align-items: start; }
  .portal-main[data-screen="ticket"] { max-width: 1040px; }
  .portal-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--sp-6); }

  /* the list is a table on a desktop and the hub's own CSS folds it back into
     cards below 768px, so there is one markup and two shapes rather than two of
     each */
  #tSearch { max-width: 420px; }
  #tFilters { gap: 6px; }
  /* a list wants the width; a conversation, a form and a settings page want a
     measure somebody can read across without losing the line */
  .portal-main[data-screen="new"],
  .portal-main[data-screen="profile"],
  .portal-main[data-screen="people"] { max-width: 860px; }

  /* signing in is one short form, so it is a card and not a full-width page */
  .portal-center {
    max-width: 380px; margin: 8vh auto 0; min-height: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-6);
  }
}
.otp-input { text-align: center; font-size: 24px; letter-spacing: 8px; font-family: var(--font-mono); }

.gl-bars.mini { height: 26px; margin: 4px 0 6px; }

/* ---------- command bar (cmd/ctrl+F task enquiry) ---------- */
.cmdbar { width: min(600px, calc(100vw - 32px)); margin-top: 12vh; padding: 0; border-radius: 14px; }
.cmdbar-box { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cmdbar-box i { color: var(--text-subtlest); }
.cmdbar-box input { border: none; box-shadow: none; background: none; font-size: 15px; flex: 1; padding: 0; }
.cmdbar-box input:focus { outline: none; box-shadow: none; }
.cmdbar-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdbar-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 9px; border: none; background: none;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.cmdbar-row:hover, .cmdbar-row.on { background: var(--selected); }
.cmdbar-row .gl-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmdbar-empty { padding: 14px; color: var(--text-subtlest); font-size: 13px; text-align: center; }

.ag-offline-note { padding: 6px 12px; border-top: 1px solid var(--border); }

/* agent markdown in comments: long file paths must wrap, wide tables scroll
   inside their own box rather than stretching the bubble */
.rich { overflow-wrap: anywhere; }
.rich .md-table { overflow-x: auto; margin: var(--sp-2) 0; }
.rich .md-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.rich .md-table th, .rich .md-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; }
.rich .md-table th { background: var(--surface-sunken, rgba(128,128,128,.06)); font-weight: 600; white-space: nowrap; }
.rich pre { overflow-x: auto; padding: 10px 12px; border-radius: 8px; background: var(--surface-sunken, rgba(128,128,128,.08)); margin: var(--sp-2) 0; }
.rich pre code { white-space: pre; font-family: ui-monospace, monospace; font-size: 12px; }
.rich code { font-family: ui-monospace, monospace; font-size: 12.5px; background: var(--neutral-subtle, rgba(128,128,128,.14)); padding: 1px 4px; border-radius: 4px; }
.rich pre code { background: none; padding: 0; }
.rich h3, .rich h4, .rich h5, .rich h6 { margin: var(--sp-3) 0 var(--sp-1); font-size: 13.5px; }
.rich hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-3) 0; }

/* approvals: a submitted plan expands in place, no trip to the task */
.plan-row > summary { list-style: none; cursor: pointer; }
.plan-row > summary::-webkit-details-marker { display: none; }
.plan-row > summary .gl-row { border-bottom: none; }
.plan-row[open] > summary .gl-row { border-bottom: 1px solid var(--border); }
.plan-body { padding: 10px 4px 14px 30px; font-size: 13px; }
.plan-row + .plan-row { border-top: 1px solid var(--border); }

/* agents page: collapsible enrollment walkthrough */
.ag-guide > summary { cursor: pointer; font-size: 13.5px; }
.ag-guide .ag-steps { margin: var(--sp-4) 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); font-size: 13px; }
.ag-guide .ag-steps li { line-height: 1.5; }
.ag-guide pre { margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-sunken, rgba(128,128,128,.08)); overflow-x: auto; }
.ag-guide pre code { font-family: ui-monospace, monospace; font-size: 12px; white-space: pre; }

/* plan-first banner shares the Not Doing banner shell; quiet = informational */
.nd-banner.plan-quiet { border-color: var(--border-bold); background: var(--surface-sunken, rgba(128,128,128,.06)); }

/* Not Doing approval banner (task side panel) */
.nd-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--warning, #b7791f); border-radius: 6px; background: color-mix(in srgb, var(--warning, #b7791f) 12%, transparent); font-size: 13px; }

/* Team page */
.team-page { display: flex; flex-direction: column; gap: var(--sp-4); }
.team-page .page-head { margin: 0; }
.team-person-row { cursor: pointer; }
.team-page .gl-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Team page: timesheet entry clock-time chip */
.ts-chip { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--neutral-subtle, rgba(128, 128, 128, .14)); color: var(--text); }
.ts-chip.on { background: var(--success-subtlest, #dcfff1); color: var(--success-text, #216e4e); }

/* dropzone (create-task attachments) */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 2px dashed var(--border-bold); border-radius: 10px; cursor: pointer; color: var(--text-subtlest); font-size: 13px; text-align: center; transition: border-color .15s, background .15s; }
.dropzone i { font-size: 22px; }
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); color: var(--text); }
.dropzone .dz-files { color: var(--text); font-size: 12px; word-break: break-word; }
.dropzone.has-files { border-style: solid; border-color: var(--brand); }

/* ---------- users & agents: grants as pills, and as switches ----------
   Eleven tick columns made the table wider than any screen and told you almost
   nothing per column. What somebody can do is a short list of the things they
   can do, so it is a line of pills under their name — and the row carries the
   same data-search as the row above it, which is how the filter hides the pair
   together without knowing they are a pair. */
.urow-name { display: flex; align-items: center; gap: var(--sp-2); }
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.list td > .pills { margin-left: 30px; } /* clears the avatar, so the pills line up with the name */

/* a pill, not a lozenge: rounded through, in the words a person would say them
   rather than shouted in caps. Green is something they can do, grey is
   something that limits them. */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; line-height: 17px; white-space: nowrap;
  background: var(--success-subtlest); color: var(--success-text);
}
.pill i { font-size: 12px; opacity: .8; margin-left: -1px; }
.pill-muted { background: var(--neutral-subtle); color: var(--text-subtle); }

/* the dialog: who they are on the left, what they may do on the right */
.user-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.perm-title { font-size: 12px; font-weight: 600; color: var(--text-subtlest); margin-bottom: var(--sp-2); }
.perm-col { display: flex; flex-direction: column; gap: 6px; }

/* a permission is a card you flip, not a checkbox in a wall of them */
.perm {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.perm:hover { background: var(--surface-hover); }
.perm > input[type="checkbox"] { order: 2; margin-left: auto; flex: none; }
.perm:has(> input:checked) { border-color: var(--brand); background: var(--brand-subtlest); }
.perm-text { display: flex; flex-direction: column; min-width: 0; }
.perm-text b { font-size: 13px; font-weight: 600; line-height: 18px; }
.perm-text b i { color: var(--text-subtlest); margin-right: 4px; }
.perm:has(> input:checked) .perm-text b i { color: var(--brand); }
.perm-text small { color: var(--text-subtlest); font-size: 11.5px; line-height: 15px; }

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

/* ---------- form grid ----------
   A dialog full of fields, each given its own pixel width, is a dialog where no
   two rows line up — which is what the ledger editor had become. Three tracks,
   fields take one unless they say otherwise, and every input in the column is
   the same width whatever is in it. */
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.form-grid > .field { min-width: 0; }
.form-grid > .col-2 { grid-column: span 2; }
.form-grid > .col-3 { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .col-2, .form-grid > .col-3 { grid-column: auto; }
}

/* ---------- pager ---------- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
}
.pager .btn { display: inline-flex; align-items: center; gap: 2px; }
.pager [aria-disabled] { opacity: .4; pointer-events: none; }
.pager-at { font-size: 12px; color: var(--text-subtlest); padding: 0 var(--sp-2); white-space: nowrap; }
.pager-at b { font-weight: 600; color: var(--text-subtle); }

/* ---------- alert row: something wrong, and the way to deal with it ---------- */
.alert-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--border);
  border-left: 3px solid var(--border-bold); border-radius: var(--radius);
  background: var(--surface);
}
.alert-row > i { font-size: 18px; color: var(--text-subtlest); flex-shrink: 0; }
.alert-row.warn { border-left-color: var(--warning-text); background: var(--warning-subtlest); }
.alert-row.warn > i { color: var(--warning-text); }
.alert-row.warn .muted { color: var(--warning-text); opacity: .85; }

/* a sortable column says so, and says which way it is sorted */
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]:hover { color: var(--text); }
th[data-sort]::after { content: ' \2195'; opacity: .25; font-size: 11px; }
th[data-sort][data-dir=asc]::after { content: ' \2191'; opacity: 1; }
th[data-sort][data-dir=desc]::after { content: ' \2193'; opacity: 1; }

/* ---------------------------------------------------------------------------
   What the ported payment pages still need that the hub had no word for.

   The console itself is written in this application's markup now — main-header,
   card, table.list, lozenge — so nothing below is for its sake. What is left
   serves the customer-facing checkout and the docs page, which are their own
   thing on purpose, and the layout utilities the console's forms leaned on and
   the rest of the hub has since found a use for.
   --------------------------------------------------------------------------- */


.card-header { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.card-title { font-size: 14px; font-weight: 600; }
.card-description { color: var(--text-subtlest); font-size: 12.5px; margin: 2px 0 0; }
.card-content { min-width: 0; }
.card > .table-wrap { margin: 0 calc(-1 * var(--sp-3)); border-left: 0; border-right: 0; border-radius: 0; }

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.field-row, .btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; }
.field-row > .field { flex: 1 1 160px; min-width: 0; margin-bottom: 0; }

.text-muted { color: var(--text-subtlest); }
.text-sm { font-size: 12.5px; }
.mono { font-family: var(--font-mono); font-size: 12px; }

/* the live/test switch, which is the one control the console needs and the hub has no word for */
.pay-strip {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
/* test mode is the state worth noticing, so it is the one that is coloured */
.pay-strip.test { border-color: var(--warning-text); background: var(--warning-subtlest); }
.pay-strip.test .muted { color: var(--warning-text); opacity: .9; }
.seg { display: inline-flex; border: 1px solid var(--border-bold); border-radius: 8px; overflow: hidden; }
.seg-item {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--text-subtle); border: 0; padding: 4px 12px;
}
.seg-item.active { background: var(--brand); color: #fff; }