/* =========================================================
   wurkr.ai
   Pine and brass on cool paper. Display face is Bricolage
   Grotesque; utility metadata is set in mono so status lines
   read like a personnel record.
   ========================================================= */

:root{
  --pine:#0E4F45;
  --pine-lift:#136055;
  --pine-deep:#07332C;
  --pine-wash:#EFF5F3;
  --brass:#C08A22;
  --brass-lift:#D69A2A;
  --brass-soft:#F3E4C2;
  --brass-wash:#FDF8EC;
  --brass-line:#E4D2A6;
  --rose:#A5382C;
  --rose-soft:#F7E3E0;
  --sky:#2C6690;

  --canvas:#F1F2EF;
  --surface:#FFFFFF;
  --surface-2:#FAFAF8;
  --surface-3:#F5F6F3;
  --line:#E3E5E0;
  --line-strong:#CBCEC8;

  --ink:#10201D;
  --ink-2:#4B5B57;
  --ink-3:#7E8B87;
  --ink-4:#A2ADA9;
  --ink-on-dark:#EAF0EE;
  --ink-on-dark-2:#9DB5AF;

  --r-xs:5px; --r-sm:7px; --r:10px; --r-md:12px; --r-lg:15px; --r-xl:22px;
  --shadow-1:0 1px 2px rgba(16,32,29,.05);
  --shadow-2:0 2px 6px rgba(16,32,29,.06), 0 10px 28px rgba(16,32,29,.07);
  --shadow-3:0 24px 60px rgba(7,51,44,.18);
  --ease:cubic-bezier(.2,.8,.3,1);

  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --rail-w:256px;
  --topbar-h:60px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--body);
  background:var(--canvas);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--pine);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
button{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.022em;font-weight:600;}
h1{font-size:29px;line-height:1.16;}
h2{font-size:20px;line-height:1.25;}
h3{font-size:16.5px;line-height:1.3;}
p{margin:0 0 12px;}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px;}
::selection{background:var(--brass-soft);color:var(--pine-deep);}

/* Utility metadata — the "personnel record" voice */
.meta{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.meta--link{color:var(--ink-3);}
.meta--link:hover{color:var(--pine);text-decoration:none;}
.muted{color:var(--ink-2);}
.dim{color:var(--ink-3);}
.mono{font-family:var(--mono);}
.right{text-align:right;}
.center{text-align:center;}
.nowrap{white-space:nowrap;}
.hide{display:none !important;}

/* =========================================================
   Left rail
   ========================================================= */
/* The rail is four regions and only ONE of them scrolls.
   Every hire adds a row to the team list, so that is the region given the
   flexible height — the navigation under it must be in the same place whether
   you employ two people or ten. It used to be the other way round: the team
   block had a fixed height that grew with each hire, and the nav below it was
   the thing that scrolled, so it was squeezed into whatever was left. */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail-w);
  background:var(--pine);color:var(--ink-on-dark);
  display:flex;flex-direction:column;z-index:40;overflow:hidden;
  border-right:1px solid rgba(0,0,0,.16);
}
.rail__brand,.rail__top,.rail__crewhead,.rail__nav,.rail__foot{flex:none;}
.rail__top{padding:2px 12px 0;}
.rail__mid{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
}
.rail__brand{
  display:flex;align-items:center;
  padding:19px 20px 15px;text-decoration:none;
}
.rail__brand:hover{text-decoration:none;}
.rail__word{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.03em;color:#fff;}
.rail__word span{color:var(--brass);}

.rail__section{padding:2px 12px 4px;}
.rail__section > .meta{padding:8px 8px 7px;color:rgba(157,181,175,.8);}

/* =========================================================
   The team, in the rail
   =========================================================
   One row per employee — the row opens their section, the speech bubble opens
   their conversation. There used to be two entries for every person: a tall
   tile up here and a link in the nav below. Two entries per hire is what made
   the rail unusable at five employees.
   ========================================================= */
.rail__crewhead{
  display:flex;align-items:center;gap:8px;padding:14px 20px 6px;
}
.rail__crewhead .meta{flex:1;color:rgba(157,181,175,.8);}
.rail__crewadd{
  width:20px;height:20px;border-radius:6px;flex:none;
  display:grid;place-items:center;font-size:10px;
  color:rgba(234,240,238,.55);text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
}
.rail__crewadd:hover{color:var(--brass);border-color:var(--brass);text-decoration:none;}

/* The one region that gives. min-height keeps it from vanishing entirely on a
   short screen; overscroll-behavior keeps a flick here from scrolling the page
   underneath once it reaches the end. */
.rail__crew{
  /* Capped, so a roster of twenty can never push Settings out of the window.
     Past the cap this list scrolls inside itself and the nav below does not
     move — which is the whole point. */
  flex:0 1 auto;min-height:64px;max-height:46vh;
  overflow-y:auto;overscroll-behavior:contain;
  padding:0 12px 6px;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.rail__crew::-webkit-scrollbar{width:6px;}
.rail__crew::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px;}
.rail__crew::-webkit-scrollbar-track{background:transparent;}

.crewrow{
  display:flex;align-items:stretch;gap:2px;margin-bottom:3px;border-radius:10px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.crewrow:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);}
.crewrow.is-active{background:rgba(255,255,255,.13);border-color:rgba(192,138,34,.5);}
.crewrow__go{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  padding:8px 4px 8px 8px;color:inherit;text-decoration:none;border-radius:10px 0 0 10px;
}
.crewrow__go:hover{text-decoration:none;}
.crewrow__text{min-width:0;flex:1;}
.crewrow__line{display:flex;align-items:baseline;gap:6px;min-width:0;}
.crewrow__name{
  font-family:var(--display);font-weight:600;font-size:13.5px;color:#fff;
  line-height:1.25;flex:none;max-width:52%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.crewrow__sec{
  font-size:11px;color:var(--ink-on-dark-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.crewrow__sec i{font-size:9px;opacity:.7;margin-right:2px;}
.crewrow.is-active .crewrow__sec{color:var(--brass-soft);}
.crewrow__status{
  font-family:var(--mono);font-size:9px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--brass-soft);margin-top:3px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.crewrow__status.is-quiet{display:none;}
.crewrow__chat{
  flex:none;width:30px;display:grid;place-items:center;border-radius:0 10px 10px 0;
  color:rgba(234,240,238,.4);font-size:11.5px;text-decoration:none;
  border-left:1px solid rgba(255,255,255,.07);
}
.crewrow__chat:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none;}
.crewrow__chat.is-active{color:var(--brass);}
.crewrow .rail__count{margin-left:4px;flex:none;}

/* Worker tile — the signature element, still used on the front desk */
.worker-tile{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 10px;border-radius:12px;margin-bottom:5px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  color:inherit;text-decoration:none;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.worker-tile:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);text-decoration:none;}
.worker-tile.is-active{background:rgba(255,255,255,.12);border-color:rgba(192,138,34,.55);}
.worker-tile__text{min-width:0;flex:1;}
.worker-tile__name{font-family:var(--display);font-weight:600;font-size:14px;color:#fff;line-height:1.2;display:block;}
.worker-tile__role{
  font-size:11.5px;color:var(--ink-on-dark-2);margin-top:1px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.worker-tile__status{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-soft);margin-top:6px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rail__hire{
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:8px 10px;border-radius:10px;margin-top:2px;
  border:1px dashed rgba(255,255,255,.2);
  font-size:12.5px;color:rgba(234,240,238,.62);text-decoration:none;
  transition:all .15s var(--ease);
}
.rail__hire:hover{border-color:var(--brass);color:var(--brass-soft);text-decoration:none;}
.rail__hire i{font-size:10px;}

/* Avatars */
.avatar{
  width:34px;height:34px;border-radius:10px;flex:none;position:relative;
  background:linear-gradient(150deg,#E8D9B4,#C08A22);
  color:var(--pine-deep);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em;
}
.avatar--xs{width:24px;height:24px;border-radius:7px;font-size:9.5px;}
.avatar--sm{width:30px;height:30px;border-radius:9px;font-size:11px;}
.avatar--md{width:38px;height:38px;border-radius:12px;font-size:14px;}
.avatar--lg{width:54px;height:54px;border-radius:16px;font-size:18px;}
.avatar--xl{width:74px;height:74px;border-radius:20px;font-size:24px;}
.avatar--you{background:#E1E6E3;color:var(--ink-2);}
.avatar--ghost{background:var(--surface-3);color:var(--ink-4);border:1px dashed var(--line-strong);}

/* An employee wears the icon of their job, in their own colour, so five of
   them in a list are told apart without reading anything. */
.avatar--tint{background:var(--tint,#0E4F45);color:#fff;}
/* On the dark rail the tint is lifted, so the icon on it goes dark instead. */
.avatar--lift{color:var(--pine-deep);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.avatar__icon{font-size:.52em;opacity:.95;line-height:1;}
.avatar--xs .avatar__icon{font-size:11px;}
.avatar--sm .avatar__icon{font-size:13px;}
.avatar--md .avatar__icon{font-size:16px;}
.avatar--lg .avatar__icon{font-size:22px;}
.avatar--xl .avatar__icon{font-size:30px;}

/* Your own picture fills the square whatever shape it was uploaded as —
   `inherit` so it follows the same corner radius as the size it is wearing. */
.avatar__img,.initials .avatar__img,.msg__av .avatar__img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;
}

.lamp{
  position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;
  border:2.5px solid var(--pine);background:var(--ink-3);
}
.lamp--available{background:#4FBF8B;}
.lamp--working{background:var(--brass);animation:pulse 1.6s ease-in-out infinite;}
.lamp--waiting{background:#5FA8D3;}
.lamp--blocked{background:#E0655A;}
.card .lamp,.panel .lamp,.crew-card .lamp,.thread__head .lamp{border-color:var(--surface);}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.85);}}

.rail__nav{padding:2px 12px 8px;display:flex;flex-direction:column;gap:1px;}
.rail__label{padding:15px 10px 6px;color:rgba(157,181,175,.72) !important;}
.rail__link{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
  color:rgba(234,240,238,.78);font-size:14px;font-weight:500;text-decoration:none;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.rail__link i{width:16px;text-align:center;font-size:13.5px;opacity:.8;}
.rail__link:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none;}
.rail__link.is-active{background:rgba(255,255,255,.13);color:#fff;}
.rail__link.is-active i{color:var(--brass);opacity:1;}
/* Whose thread the Conversation link opens. Quiet, but never a guess. */


.rail__count{
  margin-left:auto;font-family:var(--mono);font-size:10px;
  background:var(--brass);color:var(--pine-deep);border-radius:20px;padding:1px 6px;font-weight:600;
}
.rail__count--quiet{background:rgba(255,255,255,.16);color:#fff;}

.rail__foot{padding:11px 12px 13px;border-top:1px solid rgba(255,255,255,.09);}
.rail__user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#fff;text-decoration:none;font-size:13px;}
.rail__user:hover{background:rgba(255,255,255,.07);text-decoration:none;}
.rail__user .initials{
  width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:none;
  overflow:hidden;
}
.rail__user-text{min-width:0;flex:1;}
.rail__user-name{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rail__user-sub{display:block;font-size:11px;color:var(--ink-on-dark-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rail__user > i{font-size:10px;opacity:.45;}

/* =========================================================
   Shell
   ========================================================= */
.shell{margin-left:var(--rail-w);min-height:100vh;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(241,242,239,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:0 30px;height:var(--topbar-h);display:flex;align-items:center;gap:16px;flex:none;
}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);min-width:0;}
.crumb a{color:var(--ink-2);}
.crumb .sep{color:var(--line-strong);}
.crumb strong{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar__actions{margin-left:auto;display:flex;align-items:center;gap:9px;}

.page{padding:28px 30px 70px;max-width:1240px;width:100%;}
.page--wide{max-width:none;}
.page-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:24px;flex-wrap:wrap;}
/* flex-basis, not a bare flex:1. With min-width:0 and no basis the text column
   shrank to whatever the buttons beside it left over rather than pushing them
   onto their own line, so on a phone a quote title came down the screen one
   word at a time. */
.page-head__text{min-width:0;flex:1 1 320px;}
.page-head h1{margin-bottom:5px;}
.page-head p{color:var(--ink-2);margin:0;max-width:64ch;}
.page-head__actions{display:flex;gap:9px;flex-wrap:wrap;}

.greeting{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.028em;margin:0 0 3px;line-height:1.14;}
.greeting em{font-style:normal;color:var(--pine);}

/* =========================================================
   The office — home is a conversation
   ========================================================= */
body.is-office .shell{height:100vh;overflow:hidden;}
.office{
  flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) 348px;
  gap:20px;padding:20px 30px 22px;
}
.office__main{min-width:0;min-height:0;display:flex;}
.office__side{
  min-width:0;display:flex;flex-direction:column;gap:16px;
  overflow-y:auto;padding-right:2px;
}
.office__side::-webkit-scrollbar{width:8px;}
.office__side::-webkit-scrollbar-thumb{background:#D8DBD5;border-radius:8px;border:2px solid transparent;background-clip:content-box;}

.office__hello{padding:4px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.office__hello p{color:var(--ink-2);margin:0;font-size:14.5px;}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden;flex:none;}
.panel__head{padding:13px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;}
.panel__head h3{flex:1;min-width:0;font-size:15px;}
.panel__body{padding:16px 17px;}
.panel__body--flush{padding:0;}

.nothing{
  display:flex;align-items:center;gap:11px;padding:20px 17px;
  color:var(--ink-3);font-size:13.5px;
}
.nothing i{font-size:14px;color:var(--ink-4);}
/* An empty state with something to read and something to press is a block, not
   a row. .nothing is a one-line "there is nothing here"; four of them grew a
   paragraph and a button underneath and were laid out as three columns for it,
   which left "Nobody has told Iris what is in the bank." one word to a line. */
.nothing--block{flex-direction:column;text-align:center;gap:5px;}
.nothing--block i{font-size:21px;margin-bottom:5px;}
.nothing--block span{font-size:15px;color:var(--ink-2);font-weight:500;}
.nothing--block p{margin:0;}

.plate-row{
  display:flex;gap:12px;align-items:center;padding:12px 16px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .14s var(--ease);
}
.plate-row:last-child{border-bottom:none;}
.plate-row:hover{background:var(--surface-2);text-decoration:none;}
.plate-row__dot{
  width:29px;height:29px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:11px;background:var(--surface-3);color:var(--ink-3);
}
.plate-row--you .plate-row__dot{background:var(--brass-wash);color:#8A6212;box-shadow:inset 0 0 0 1px var(--brass-line);}
.plate-row--her .plate-row__dot{background:var(--pine-wash);color:var(--pine);}
.plate-row__main{flex:1;min-width:0;}
.plate-row__title{
  display:block;font-size:13.5px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.plate-row__sub{
  display:block;font-size:12px;color:var(--ink-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.plate-row__go{font-size:10px;color:var(--ink-4);flex:none;}
.plate-row--you{background:linear-gradient(90deg,rgba(253,248,236,.9),transparent 70%);}

.camp-row{display:flex;align-items:center;border-bottom:1px solid var(--line);}
.camp-row:last-child{border-bottom:none;}
.camp-row__main{flex:1;min-width:0;padding:12px 6px 12px 16px;text-decoration:none;color:inherit;}
.camp-row__main:hover{text-decoration:none;}
.camp-row:hover{background:var(--surface-2);}
.camp-row__title{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.camp-row__sub{display:block;font-size:12px;color:var(--ink-3);margin-top:1px;}
.camp-row__talk{
  flex:none;margin-right:11px;width:28px;height:28px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:var(--ink-4);
  cursor:pointer;font-size:11px;transition:all .14s var(--ease);
}
.camp-row__talk:hover{border-color:var(--line-strong);background:var(--surface);color:var(--pine);}

.mate{
  display:flex;gap:11px;align-items:center;padding:11px 16px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.mate:last-child{border-bottom:none;}
.mate:hover{background:var(--surface-2);text-decoration:none;}
.mate__main{flex:1;min-width:0;}
.mate__name{display:block;font-size:13.5px;font-weight:600;}
.mate__role{display:block;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mate--open{opacity:.72;}
.mate--open .lamp{display:none;}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:9px;border:1px solid transparent;
  font-size:13.5px;font-weight:600;line-height:1.2;cursor:pointer;
  background:var(--pine);color:#fff;text-decoration:none;
  transition:background .15s var(--ease),transform .08s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--pine-lift);text-decoration:none;color:#fff;box-shadow:var(--shadow-1);}
.btn:active{transform:translateY(1px);}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none;}
.btn i{font-size:12px;}

.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.btn--ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--ink-3);}
.btn--quiet{background:transparent;color:var(--ink-2);border-color:transparent;}
.btn--quiet:hover{background:rgba(16,32,29,.06);color:var(--ink);box-shadow:none;}
.btn--brass{background:var(--brass);color:#25190A;}
.btn--brass:hover{background:var(--brass-lift);color:#25190A;}
.btn--danger{background:var(--rose);}
.btn--danger:hover{background:#B94436;}
.btn--sm{padding:6px 11px;font-size:12.5px;border-radius:7px;gap:6px;}
.btn--lg{padding:12px 22px;font-size:15px;border-radius:11px;}
.btn--block{width:100%;}

/* =========================================================
   Surfaces
   ========================================================= */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.card--quiet{background:var(--surface-2);box-shadow:none;}
.card__head{
  padding:15px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.card__head h2,.card__head h3{flex:1;min-width:0;}
.card__body{padding:20px;}
.card__body--flush{padding:0;}
.card__foot{padding:13px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);}

.grid{display:grid;gap:18px;}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid--desk{grid-template-columns:minmax(0,1fr) 400px;align-items:start;}
.stack{display:flex;flex-direction:column;gap:18px;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* Stat tiles */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;}
.stat__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
/* A money figure is longer than a count. It shrinks to fit rather than being
   cut off at the edge of the tile — a total missing its last digit is a wrong
   total, and $29,950.0 is exactly how that looks. */
.stat__value{
  font-family:var(--display);font-size:clamp(18px,1.7vw,26px);font-weight:600;
  letter-spacing:-.03em;line-height:1.15;margin-top:7px;
  /* Sized so a money figure fits on one line. It used to be 30px, which cut
     $29,950.00 off at the tile edge — and a total missing its last digit is a
     wrong total, not a cosmetic problem. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat__unit{font-size:17px;color:var(--ink-3);}
.stat__note{font-size:12.5px;color:var(--ink-2);margin-top:3px;}
.stat__note.up{color:#2F7D57;}
.stat__note.down{color:var(--rose);}

.log-row{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);}
.log-row:last-child{border-bottom:none;}
.log-row__main{flex:1;min-width:0;}
.log-row__text{font-size:13.5px;line-height:1.45;}
.log-row .meta{margin-top:3px;display:block;}

/* =========================================================
   The crew page
   ========================================================= */
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;}
/* A team of one should not read as a mostly-empty grid. */
.crew:has(> .crew-card:only-child){grid-template-columns:minmax(0,620px);}
.crew-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:20px;display:flex;flex-direction:column;gap:15px;
  position:relative;overflow:hidden;
}
.crew-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--tint,var(--pine));
}
.crew-card--open{border-style:dashed;background:transparent;box-shadow:none;}
.crew-card--open::before{opacity:.35;}
.crew-card__top{display:flex;gap:14px;align-items:flex-start;}
.crew-card__id{flex:1;min-width:0;}
.crew-card__id h2{font-size:19px;}
.crew-card__role{font-size:13px;color:var(--ink-2);margin-top:2px;}
.crew-card--hired .avatar--lg{background:linear-gradient(150deg,color-mix(in srgb,var(--tint,#0E4F45) 20%,#F0E2C0),var(--tint,#C08A22));color:#fff;}
.crew-card--open .avatar--lg{background:var(--surface-3);color:var(--tint,var(--ink-4));border:1px dashed var(--line-strong);}
.crew-card__blurb{color:var(--ink-2);font-size:13.5px;line-height:1.55;margin:0;}
.crew-card__does{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.crew-card__does li{display:flex;gap:9px;font-size:13px;color:var(--ink-2);line-height:1.4;}
.crew-card__does i{color:var(--tint,var(--pine));font-size:10px;margin-top:4px;flex:none;}
.crew-card--open .crew-card__does i{color:var(--ink-4);}
.crew-card__stats{display:flex;gap:18px;font-size:12.5px;color:var(--ink-3);}
.crew-card__stats b{font-family:var(--display);font-size:15px;color:var(--ink);font-weight:600;}
.crew-card__foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line);margin-top:auto;
}
.crew-card__alert{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:#8A6212;font-weight:600;
}

/* =========================================================
   Chips
   ========================================================= */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  padding:3px 9px;border-radius:20px;border:1px solid transparent;white-space:nowrap;flex:none;
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;}
.chip--live{background:#E4F3EB;color:#22694A;}
.chip--work{background:var(--brass-soft);color:#7A5410;}
.chip--review{background:#E6EFF7;color:#255E88;}
.chip--wait{background:#F2F1EC;color:#6E6A5C;}
.chip--idle{background:#EEEFEC;color:var(--ink-3);}
.chip--done{background:#EDEDEA;color:#5A6560;}
.chip--bad{background:var(--rose-soft);color:#8A2E23;}

/* =========================================================
   Forms
   ========================================================= */
.field{margin-bottom:16px;}
.label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.help{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.5;}
.input,.textarea,.select{
  width:100%;padding:10px 13px;border:1px solid var(--line-strong);border-radius:9px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(14,79,69,.11);
}
.textarea{min-height:100px;resize:vertical;line-height:1.6;}
.mono-edit{font-family:var(--mono);font-size:13px;line-height:1.7;min-height:52vh;}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%237E8B87' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;}
input[type=color].input{height:40px;padding:4px;cursor:pointer;}
.input--sm{padding:7px 10px;font-size:13px;}
.inline-fields{display:flex;gap:10px;flex-wrap:wrap;}
.inline-fields > *{flex:1;min-width:130px;}

.alert{padding:12px 15px;border-radius:10px;font-size:13.5px;margin-bottom:16px;border:1px solid;}
.alert--bad{background:var(--rose-soft);border-color:#EBC4BE;color:#7E2A20;}
.alert--ok{background:#E4F3EB;border-color:#BFE0CE;color:#1F6244;}
.alert--info{background:#EDF2F7;border-color:#D3DFE9;color:#2A5474;}

/* Choice cards */
.choices{display:grid;gap:9px;}
.choices--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.choice{
  display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
  padding:13px 15px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--surface);cursor:pointer;transition:all .14s var(--ease);
}
.choice:hover{border-color:var(--pine);background:var(--surface-2);}
.choice.is-on{border-color:var(--pine);background:var(--pine-wash);box-shadow:0 0 0 1px var(--pine) inset;}
.choice__tick{
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;margin-top:2px;
  display:grid;place-items:center;font-size:9px;color:transparent;
}
.choice.is-on .choice__tick{background:var(--pine);border-color:var(--pine);color:#fff;}
.choice__label{font-weight:600;font-size:14px;display:block;}
.choice__hint{font-size:12.5px;color:var(--ink-2);display:block;margin-top:2px;line-height:1.45;}

/* Polish selector */
.polish{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.polish__opt{
  border:1px solid var(--line-strong);border-radius:12px;padding:12px 10px 13px;background:var(--surface);
  cursor:pointer;text-align:center;transition:all .14s var(--ease);
}
.polish__opt:hover{border-color:var(--pine);}
.polish__opt.is-on{border-color:var(--pine);background:var(--pine-wash);box-shadow:0 0 0 1px var(--pine) inset;}
.polish__swatch{height:44px;border-radius:7px;background:#fff;border:1px solid var(--line);margin-bottom:9px;padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden;}
.polish__swatch b{display:block;background:var(--ink-3);border-radius:2px;opacity:.4;}
.polish__opt.is-on .polish__swatch b{background:var(--pine);opacity:.55;}
.polish__name{font-size:12px;font-weight:600;line-height:1.25;}

/* Section builder */
.sections-edit{display:flex;flex-direction:column;gap:8px;}
.section-row{
  display:flex;gap:10px;align-items:flex-start;padding:11px 12px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;
}
.section-row__grip{color:var(--line-strong);cursor:grab;padding-top:9px;font-size:12px;}
.section-row__fields{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}
.section-row .input{border-color:transparent;background:transparent;padding:3px 4px;}
.section-row .input:focus{border-color:var(--line-strong);background:var(--surface-2);box-shadow:none;}
.section-row .input--title{font-weight:600;font-size:14.5px;}
.section-row .input--desc{font-size:13px;color:var(--ink-2);}
.section-row__del{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:8px 4px;font-size:13px;}
.section-row__del:hover{color:var(--rose);}
.section-row.is-drag{opacity:.45;}

.pickgroup{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;}
.pickgroup__label{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);min-width:64px;padding-top:6px;flex:none;
}
.pickgroup__opts{display:flex;gap:6px;flex-wrap:wrap;flex:1;}
.pick{
  border:1px solid var(--line-strong);background:var(--surface);border-radius:20px;
  padding:5px 12px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:all .13s var(--ease);font-family:inherit;
}
.pick:hover{border-color:var(--pine);color:var(--ink);}
.pick.is-on{background:var(--pine);border-color:var(--pine);color:#fff;}

.media-pick{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding-top:4px;}
.media-pick__label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-right:3px;
}
.auto-cfg{display:flex;gap:7px;align-items:center;padding-top:4px;flex-wrap:wrap;}
.auto-cfg .select{width:auto;min-width:132px;flex:none;}
.auto-cfg .input{flex:1;min-width:170px;}

.reuse-opt{
  border:1px solid var(--line-strong);background:var(--surface);border-radius:20px;
  padding:3px 10px;font-size:11.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:all .13s var(--ease);font-family:inherit;
}
.reuse-opt:hover{border-color:var(--brass);color:var(--ink);}
.reuse-opt.is-on{background:var(--brass);border-color:var(--brass);color:#25190A;}

.media-opt{
  border:1px solid var(--line-strong);background:var(--surface);border-radius:20px;
  padding:3px 10px;font-size:11.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:all .13s var(--ease);
}
.media-opt i{font-size:9px;}
.media-opt:hover{border-color:var(--pine);color:var(--ink);}
.media-opt.is-on{background:var(--pine);border-color:var(--pine);color:#fff;}

/* Working banner */
.working{
  display:flex;align-items:center;gap:13px;padding:13px 18px;margin-bottom:18px;
  background:var(--brass-wash);border:1px solid var(--brass-line);border-radius:var(--r-lg);
}
.working__dots{display:flex;gap:4px;}
.working__dots i{width:6px;height:6px;border-radius:50%;background:var(--brass);animation:blink 1.3s infinite;}
.working__dots i:nth-child(2){animation-delay:.18s;}
.working__dots i:nth-child(3){animation-delay:.36s;}
.working__text{flex:1;min-width:0;}
.working__title{font-family:var(--display);font-weight:600;font-size:14.5px;display:block;}
.working__note{font-size:12.5px;color:var(--ink-2);margin-top:1px;display:block;}

/* Media slot chips */
.slot{
  display:flex;gap:11px;align-items:center;padding:10px 13px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-bottom:8px;
}
.slot__thumb{
  width:52px;height:40px;border-radius:7px;flex:none;background:var(--surface-3) center/cover no-repeat;
  display:grid;place-items:center;color:var(--ink-3);font-size:12px;border:1px solid var(--line);
}
.slot__meta{flex:1;min-width:0;}
.slot__name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}

/* =========================================================
   Conversation thread
   ========================================================= */
.thread{
  display:flex;flex-direction:column;height:100%;width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);
}
.card > .thread{border:none;border-radius:0;box-shadow:none;}
.thread__head{
  padding:12px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;
  background:var(--surface);flex:none;
}
.thread__who-wrap{flex:1;min-width:0;}
.thread__who{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.15;}
.thread__status{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.thread__body{
  flex:1;overflow-y:auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,#FBFBF9,#F6F7F4);
  min-height:0;
}
.thread__body::-webkit-scrollbar{width:9px;}
.thread__body::-webkit-scrollbar-thumb{background:#D8DBD5;border-radius:9px;border:3px solid transparent;background-clip:content-box;}
.thread--office .thread__body{padding:22px 26px 10px;}

.msg{display:flex;gap:10px;max-width:100%;animation:rise .28s var(--ease);}
@keyframes rise{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
.msg__av{
  width:28px;height:28px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,#E8D9B4,#C08A22);color:var(--pine-deep);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:11px;
}
.msg__av .avatar__icon{font-size:12px;}
.msg__av--you{overflow:hidden;}
.msg__col{min-width:0;flex:1;}
.msg__name{font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.msg__name time{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--ink-4);letter-spacing:.04em;}
.msg__tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  background:var(--pine-wash);color:var(--pine);padding:2px 7px;border-radius:20px;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bubble{
  background:var(--surface);border:1px solid var(--line);border-radius:4px 13px 13px 13px;
  padding:11px 14px;font-size:14px;line-height:1.62;color:var(--ink);
  box-shadow:var(--shadow-1);white-space:pre-line;word-wrap:break-word;overflow-wrap:anywhere;
  max-width:min(70ch,100%);
}
.bubble--typing{padding:4px 6px;}
.bubble strong{font-weight:650;}
.bubble a{text-decoration:underline;}
.bubble__quote{
  display:block;border-left:2px solid var(--line-strong);padding-left:11px;margin:5px 0;
  color:var(--ink-2);font-style:italic;
}
.msg--user{flex-direction:row-reverse;}
.msg--user .msg__col{display:flex;flex-direction:column;align-items:flex-end;}
.msg--user .msg__av{background:var(--pine);color:#fff;}
.msg--user .bubble{background:var(--pine);color:#fff;border-color:var(--pine);border-radius:13px 4px 13px 13px;}
.msg--user .bubble a{color:#fff;}
.msg--user .msg__name{flex-direction:row-reverse;}
.msg--system{justify-content:center;}
.msg--system .bubble{
  background:transparent;border:none;box-shadow:none;color:var(--ink-3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;text-align:center;
}

.bubble__attach{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;}
.msg--user .bubble__attach{border-color:rgba(255,255,255,.2);}

.typing{display:flex;gap:4px;align-items:center;padding:12px 15px;}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.3s infinite;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}

.thread__compose{border-top:1px solid var(--line);padding:12px 14px;background:var(--surface);flex:none;}
.thread--office .thread__compose{padding:13px 20px 14px;}
.compose{display:flex;gap:9px;align-items:flex-end;}
.compose textarea{
  flex:1;border:1px solid var(--line-strong);border-radius:11px;padding:10px 13px;
  font-family:inherit;font-size:14px;resize:none;max-height:190px;min-height:42px;line-height:1.5;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.compose textarea:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(14,79,69,.11);}
.compose__icon{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .14s var(--ease);
}
.compose__icon:hover{border-color:var(--pine);color:var(--pine);}

/* Listening. The ring pulses rather than the button, so the target does not
   move under a thumb that is about to press it again to stop. */
.compose__icon.is-listening{
  border-color:var(--pine);color:#fff;background:var(--pine);
}
.compose__icon.is-listening::after{
  content:"";position:absolute;inset:-4px;border-radius:13px;
  border:2px solid var(--pine);opacity:.5;animation:mic-ring 1.4s ease-out infinite;
}
.compose__icon{position:relative;}
@keyframes mic-ring{
  0%{transform:scale(.86);opacity:.55}
  100%{transform:scale(1.18);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .compose__icon.is-listening::after{animation:none;opacity:.4;}
}
.compose__files{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 9px;}
.compose__files .filechip{padding:5px 9px;font-size:12px;gap:6px;}
.compose__starters{display:flex;gap:7px;flex-wrap:wrap;padding:0 0 10px;}
.starter{
  border:1px solid var(--line-strong);background:var(--surface);border-radius:20px;
  padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  font-family:inherit;transition:all .13s var(--ease);
}
.starter:hover{border-color:var(--pine);color:var(--pine);background:var(--pine-wash);}
.thread.is-dropping{outline:2px dashed var(--pine);outline-offset:-6px;}
.thread.is-dropping .thread__body{background:var(--pine-wash);}

.compose__send{
  width:42px;height:42px;border-radius:11px;border:none;background:var(--pine);color:#fff;
  cursor:pointer;flex:none;transition:background .15s var(--ease);
}
.compose__send:hover{background:var(--pine-lift);}
.compose__send:disabled{opacity:.4;cursor:default;}
.compose__hint{font-size:11px;color:var(--ink-4);margin-top:7px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.compose__hint .wschip{font-size:9.5px;padding:1px 7px;}

/* Inline answer widgets inside the thread */
.answer{margin-top:10px;background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;padding:15px;box-shadow:var(--shadow-1);}
.answer__foot{display:flex;gap:9px;align-items:center;margin-top:14px;flex-wrap:wrap;}
.answer__foot .meta{margin-left:auto;}

/* Onboarding progress */
.progress-rail{display:flex;align-items:center;gap:8px;}
.progress-rail__track{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden;min-width:80px;}
.progress-rail__fill{height:100%;background:var(--brass);border-radius:3px;transition:width .45s var(--ease);}

/* =========================================================
   Tabs
   ========================================================= */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto;}
.tab{
  padding:10px 15px;font-size:14px;font-weight:500;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;white-space:nowrap;
}
.tab:hover{color:var(--ink);text-decoration:none;}
.tab.is-active{color:var(--pine);border-bottom-color:var(--pine);font-weight:600;}
.tab .count{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:5px;}

/* A line under a card's heading saying what the card is for. */
.card__note{
  padding:12px 20px 0;
  font-size:13px;color:var(--ink-2);
}

/* =========================================================
   Tables
   ========================================================= */
.table{width:100%;border-collapse:collapse;font-size:14px;}
.table th{
  text-align:left;padding:10px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table tbody tr:hover{background:var(--surface-2);}
.table .tight{width:1%;white-space:nowrap;}

/* Campaign / issue list rows */
.list-row{
  display:flex;gap:15px;align-items:center;padding:14px 18px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .14s var(--ease);
}
.list-row:last-child{border-bottom:none;}
.list-row:hover{background:var(--surface-2);text-decoration:none;}
.list-row__main{flex:1;min-width:0;}
.list-row__title{font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.015em;display:block;}
.list-row__sub{font-size:12.5px;color:var(--ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.list-row__side{text-align:right;flex:none;}

/* Schedule strip — perforated stubs */
.stubs{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;}
.stub{
  flex:none;width:132px;background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;position:relative;
}
.stub::after{
  content:"";position:absolute;left:11px;right:11px;top:41px;
  border-top:1px dashed var(--line-strong);
}
.stub__day{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.stub__date{font-family:var(--display);font-size:19px;font-weight:600;line-height:1;margin-top:2px;}
.stub__what{font-size:12px;color:var(--ink-2);margin-top:16px;line-height:1.4;}
.stub__what a{display:block;margin-bottom:4px;}
.stub.is-today{border-color:var(--pine);box-shadow:0 0 0 1px var(--pine) inset;}
.stub.is-empty .stub__what{color:var(--ink-4);}

/* =========================================================
   Email preview
   ========================================================= */
.previewer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);}
.previewer__bar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--surface-2);flex-wrap:wrap;
}
.previewer__tip{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#8A6212;
  background:var(--brass-wash);border:1px solid var(--brass-line);border-radius:20px;padding:3px 11px;
}
.previewer__tip i{font-size:10px;}
.seg{display:inline-flex;background:var(--canvas);border:1px solid var(--line-strong);border-radius:8px;padding:2px;gap:2px;}
.seg button{
  border:none;background:transparent;padding:5px 11px;border-radius:6px;font-size:12.5px;font-weight:500;
  color:var(--ink-2);cursor:pointer;
}
.seg button.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);font-weight:600;}
.seg button:disabled{opacity:.45;cursor:not-allowed;}
.seg button i{font-size:11px;margin-right:5px;opacity:.75;}

/* The switch that says which of the two things you are looking at. It is the
   first control on the bar and it is deliberately larger than the device
   toggle beside it — it answers a question the device toggle never raises. */
.seg--scope{background:var(--surface-2);border-color:var(--line-strong);}
.seg--scope button{padding:6px 13px;font-size:13px;}
.seg--scope button.is-on{background:var(--pine);color:#fff;box-shadow:none;}
.seg--scope button.is-on i{opacity:.85;}
/* The device toggle is secondary to the scope switch beside it. */
.seg--device button{padding:5px 10px;font-size:12px;}

/* What a change would affect, said before you make one. */
.scopebar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 14px;border-bottom:1px solid var(--line);
  background:var(--surface);font-size:12.5px;
}
.scopebar__what{font-weight:600;color:var(--ink);}
.scopebar__note{color:var(--ink-3);flex:1;min-width:180px;}
.previewer.is-forked .scopebar{background:var(--brass-wash);border-bottom-color:var(--brass-line);}
.previewer.is-forked .scopebar__what{color:#8A6212;}

/* The decision that belongs to whatever is on screen, kept under it. */
/* The decision about what is on screen, directly under the tabs. It used to sit
   below the preview, which on a full-length email meant scrolling past the whole
   thing to find Approve — the one button the page exists for. */
.previewer__decide{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.previewer__stage{
  background:#E7E9E5;padding:22px;display:flex;justify-content:center;
  min-height:420px;max-height:74vh;overflow-y:auto;overscroll-behavior:contain;align-items:flex-start;
}
.previewer__stage::-webkit-scrollbar{width:10px;}
.previewer__stage::-webkit-scrollbar-thumb{background:#C6CBC4;border-radius:10px;border:3px solid transparent;background-clip:content-box;}
.previewer__frame{
  width:640px;max-width:100%;background:#fff;border-radius:10px;box-shadow:var(--shadow-2);
  transition:width .3s var(--ease);overflow:hidden;flex:0 1 auto;min-width:0;
}
.previewer__frame.is-phone{width:390px;}
.previewer__frame iframe{width:100%;border:none;display:block;min-height:300px;overflow:hidden;}
.inbox-line{padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface);}
.inbox-line__from{font-size:13px;font-weight:600;}
.inbox-line__subject{font-size:15px;font-weight:600;margin-top:3px;font-family:var(--display);letter-spacing:-.015em;}
.inbox-line__pre{font-size:13px;color:var(--ink-3);margin-top:2px;}

/* Review notes */
.note{display:flex;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);}
.note.is-resolved{opacity:.5;}
.note__body{flex:1;font-size:13.5px;line-height:1.55;}
.note__where{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--brass);margin-bottom:3px;}
.note__time{font-family:var(--mono);font-size:10px;color:var(--ink-3);}

/* =========================================================
   Empty states, toasts, modals
   ========================================================= */
.empty{text-align:center;padding:52px 26px;}
.empty__icon{
  width:54px;height:54px;border-radius:17px;background:var(--pine-wash);color:var(--pine);
  display:grid;place-items:center;font-size:20px;margin:0 auto 15px;
}
.empty h3{margin-bottom:6px;}
.empty p{color:var(--ink-2);max-width:46ch;margin:0 auto 18px;}

.toasts{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:9px;}
.toast{
  background:var(--ink);color:#fff;padding:12px 16px;border-radius:11px;font-size:13.5px;
  box-shadow:var(--shadow-3);display:flex;gap:10px;align-items:center;max-width:380px;
  animation:rise .3s var(--ease);
}
.toast i{color:var(--brass);flex:none;}
.toast--bad i{color:#F0938A;}

.overlay{
  position:fixed;inset:0;background:rgba(7,51,44,.42);backdrop-filter:blur(3px);
  z-index:80;display:flex;align-items:center;justify-content:center;padding:22px;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:540px;
  box-shadow:var(--shadow-3);max-height:88vh;display:flex;flex-direction:column;
  animation:rise .28s var(--ease);
}
.modal--wide{max-width:820px;}
.modal__head{padding:19px 24px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;}
.modal__head h2{flex:none;font-size:19px;}
.modal__sub{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.modal__head .icon-btn{margin-left:auto;}
.modal__body{padding:20px 24px;overflow-y:auto;}
.modal__foot{padding:14px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl);}
.icon-btn{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:16px;padding:5px;border-radius:7px;}
.icon-btn:hover{background:rgba(16,32,29,.06);color:var(--ink);}

/* Drop zone */
.dropzone{
  border:1.5px dashed var(--line-strong);border-radius:13px;padding:26px 20px;text-align:center;
  background:var(--surface-2);cursor:pointer;transition:all .16s var(--ease);
}
.dropzone:hover,.dropzone.is-over{border-color:var(--pine);background:var(--pine-wash);}
.dropzone i{font-size:21px;color:var(--ink-3);margin-bottom:9px;display:block;}
.dropzone strong{display:block;font-size:14px;margin-bottom:3px;}
.dropzone span{font-size:12.5px;color:var(--ink-2);}

.filechip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid var(--line);
  border-radius:20px;font-size:12.5px;background:var(--surface);
}
.filechip i{color:var(--ink-3);font-size:11px;}
.filechip.is-loading{opacity:.6;}
.filechip .icon-btn{padding:0 2px;font-size:10px;}

/* Swatches */
.swatches{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{width:30px;height:30px;border-radius:9px;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);padding:0;}
.swatch.is-on{border-color:var(--ink);}

/* =========================================================
   Auth
   ========================================================= */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;}
.auth__pitch{
  background:var(--pine);color:var(--ink-on-dark);padding:52px 56px;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.auth__pitch::after{
  content:"";position:absolute;right:-160px;bottom:-190px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,138,34,.26),transparent 68%);
}
.auth__pitch h1{color:#fff;font-size:42px;line-height:1.06;letter-spacing:-.035em;max-width:12ch;}
.auth__pitch p{color:var(--ink-on-dark-2);max-width:38ch;font-size:15.5px;margin-top:16px;}
.auth__roster{display:flex;flex-direction:column;gap:9px;position:relative;z-index:1;margin-top:34px;}
.auth__form{display:flex;align-items:center;justify-content:center;padding:44px 32px;}
.auth__inner{width:100%;max-width:376px;}
.auth__inner h2{font-size:26px;margin-bottom:5px;}
.auth__inner > p{color:var(--ink-2);margin-bottom:26px;}
.auth__alt{margin-top:22px;font-size:13.5px;color:var(--ink-2);text-align:center;}

/* =========================================================
   The messenger
   =========================================================
   One button, everywhere, and the whole team behind it. What used to sit here
   was a dock onto ONE employee's thread and it hid itself on any page that
   already had a chat on it, which meant the person chasing you was reachable
   from about half the app.
   ========================================================= */
.msgr-launch{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
  background:var(--pine);color:#fff;font-size:19px;
  display:grid;place-items:center;box-shadow:var(--shadow-3);
  transition:transform .16s var(--ease), background .16s var(--ease);
}
.msgr-launch:hover{background:var(--pine-lift);transform:translateY(-2px);}
.msgr-launch__count{
  position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 5px;
  border-radius:99px;background:var(--brass);color:#241703;
  font-family:var(--display);font-size:11.5px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface);
}
/* Something arrived. Two beats, not a loop: a button that pulses forever is a
   button you stop seeing. */
.msgr-launch.is-new{animation:msgrPing .5s var(--ease) 2;}
@keyframes msgrPing{
  0%,100%{transform:none;}
  40%{transform:translateY(-4px) scale(1.06);}
}

.msgr-pop{
  position:fixed;right:22px;bottom:88px;z-index:71;
  display:flex;align-items:flex-start;gap:10px;
  width:320px;max-width:calc(100vw - 32px);padding:12px 12px 12px 13px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-3);cursor:pointer;text-align:left;
  animation:rise .22s var(--ease);
}
.msgr-pop__face{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--tint,var(--pine));color:#fff;font-size:12px;
}
.msgr-pop__text{flex:1;min-width:0;}
.msgr-pop__who{
  display:block;font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:-.01em;
}
.msgr-pop__body{
  display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.msgr-pop__x{
  flex:none;border:none;background:none;cursor:pointer;color:var(--ink-4);font-size:12px;
  padding:2px 3px;border-radius:6px;
}
.msgr-pop__x:hover{color:var(--ink);background:var(--surface-2);}

.msgr{
  position:fixed;right:22px;bottom:22px;z-index:72;
  width:396px;max-width:calc(100vw - 32px);
  height:min(620px,calc(100vh - 92px));
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);overflow:hidden;animation:rise .22s var(--ease);
}
.msgr__head{
  flex:none;display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.msgr__title{
  flex:1;min-width:0;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msgr__back{
  flex:none;border:none;background:none;cursor:pointer;color:var(--ink-2);font-size:13px;
  width:28px;height:28px;border-radius:8px;display:inline-grid;place-items:center;
}
.msgr__back:hover{background:var(--surface-3);color:var(--ink);}

.msgr__list{flex:1;min-height:0;overflow-y:auto;}
.msgrow{
  width:100%;display:flex;align-items:center;gap:11px;padding:12px 16px;
  border:none;border-bottom:1px solid var(--line);background:none;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .12s var(--ease);
}
.msgrow:last-child{border-bottom:none;}
.msgrow:hover{background:var(--surface-2);}
.msgrow__face{flex:none;}
.msgrow__main{flex:1;min-width:0;}
.msgrow__top{display:flex;align-items:baseline;gap:8px;}
.msgrow__name{
  flex:1;min-width:0;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msgrow__ago{flex:none;font-size:11px;color:var(--ink-4);}
.msgrow__last{
  display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msgrow.is-unread .msgrow__name{color:var(--pine);}
.msgrow.is-unread .msgrow__last{color:var(--ink);font-weight:500;}
.msgrow__dot{
  flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--pine);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;
}
/* Waiting on you, but nothing new said. A quieter mark than an unread count,
   because it is a state rather than an event. */
.msgrow__wait{flex:none;color:var(--brass);font-size:12px;}

.msgr__thread{flex:1;min-height:0;display:flex;flex-direction:column;}
.msgr__body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 6px;}
.msgr__compose{
  flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 12px;
  border-top:1px solid var(--line);background:var(--surface-2);
}
.msgr__compose textarea{
  flex:1;min-width:0;resize:none;max-height:120px;
  padding:9px 12px;border:1px solid var(--line-strong);border-radius:10px;
  font-family:inherit;font-size:13.5px;line-height:1.45;background:var(--surface);
}
.msgr__compose textarea:focus{outline:none;border-color:var(--pine);}
/* Its own class rather than the page composer's. They look the same and are
   different controls on the same screen, and a shared class meant "the send
   button" matched two things everywhere. */
.msgr__send{
  width:38px;height:38px;border-radius:10px;border:none;background:var(--pine);color:#fff;
  cursor:pointer;flex:none;transition:background .15s var(--ease);
}
.msgr__send:hover{background:var(--pine-lift);}
.msgr__send:disabled{opacity:.4;cursor:default;}
.msgr__empty{padding:26px 18px;text-align:center;color:var(--ink-3);font-size:13px;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1280px){
  .office{grid-template-columns:minmax(0,1fr) 314px;}
}
@media (max-width:1140px){
  body.is-office .shell{height:auto;overflow:visible;}
  .office{grid-template-columns:1fr;padding:18px 20px 40px;}
  .office__main{height:min(72vh,700px);}
  .office__side{overflow:visible;}
  /* minmax(0,…) rather than 1fr: a plain 1fr track is min-content wide, and the
     preview frame's 640px would push the whole page sideways on a phone. */
  .grid--desk{grid-template-columns:minmax(0,1fr);}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:980px){
  .auth{grid-template-columns:1fr;}
  .auth__pitch{display:none;}
  .crew{grid-template-columns:1fr;}
}
@media (max-width:860px){
  :root{--rail-w:0px;}
  .rail{transform:translateX(-100%);transition:transform .26s var(--ease);width:266px;}
  body.rail-open .rail{transform:none;}
  body.rail-open::after{content:"";position:fixed;inset:0;background:rgba(7,51,44,.35);z-index:35;}
  .shell{margin-left:0;}
  .topbar{padding:0 16px;}
  .page{padding:20px 16px 64px;}
  .office{padding:14px 14px 34px;}
  .office__main{height:min(68vh,620px);}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
  .polish{grid-template-columns:repeat(2,1fr);}
  .choices--2{grid-template-columns:1fr;}
  .rail-toggle{display:inline-flex !important;}
  h1,.greeting{font-size:25px;}
  .thread--office .thread__body{padding:18px 16px 8px;}
  .thread--office .thread__compose{padding:12px 14px;}
}
/* While the messenger is over the whole screen the page behind it holds still.
   Without this, iOS scrolls the body under a fixed panel and the header — with
   the only way out on it — ends up somewhere above the top of the screen. */
body.dock-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
/* Only where it covers the screen. On a desktop it is a panel in the corner and
   the page behind it should still scroll. */
@media (min-width:521px){ body.dock-open{position:static;overflow:auto;} }

@media (max-width:520px){
  .msgr{
    inset:0;right:0;bottom:0;width:100vw;max-width:100vw;
    height:100vh;height:100dvh;   /* dvh: 100vh on iOS is taller than the screen */
    border-radius:0;border:none;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    box-sizing:border-box;
  }
  /* A way out you can actually hit with a thumb, and never under the notch. */
  .msgr__head{position:sticky;top:0;z-index:2;}
  .msgr__head .icon-btn,.msgr__back{width:38px;height:38px;}
  .msgr-launch{right:14px;bottom:14px;}
  .msgr-pop{right:14px;left:14px;width:auto;bottom:80px;}
  .bubble{max-width:100%;}
}
.rail-toggle{display:none;}

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

/* Colour pickers on the look panel */
.swatch-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-bottom:14px;
}
.swatch-field{display:flex;flex-direction:column;gap:5px;cursor:pointer;}
.swatch-field .label{margin:0;font-size:12.5px;}
.swatch-field .help{margin:0;font-size:11px;color:var(--ink-4);}
.swatch-field input[type=color]{
  width:100%;height:38px;padding:3px;border:1px solid var(--line-strong);border-radius:9px;
  background:var(--surface);cursor:pointer;
}
.swatch-field input[type=color]:hover{border-color:var(--pine);}

/* Destructive affordances */
.card--danger{border-color:#E4C7C2;}
.card--danger .card__head{background:#FBF0EE;border-radius:var(--r-lg) var(--r-lg) 0 0;}
.card--danger .card__head h3{color:#8A2E23;}
.icon-btn--danger{color:var(--ink-4);font-size:12px;}
.icon-btn--danger:hover{background:var(--rose-soft);color:var(--rose);}
.list-row > .list-row__main{display:block;padding:0;}

/* Timezone sanity check */
.clockcheck{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:9px;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);
}
.clockcheck__now{font-size:13px;color:var(--ink-2);flex:1;min-width:0;}
.clockcheck__now strong{color:var(--ink);font-variant-numeric:tabular-nums;}

/* =========================================================================
   Quotes — the second employee's surfaces
   ========================================================================= */

/* One priced line, laid out as a row rather than a form so a table of eight
   reads like a table and not like eight forms stacked up. */
.item-row{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) 84px 110px 34px;
  gap:8px;align-items:center;margin-bottom:8px;
}
.item-row .input{padding:8px 10px;font-size:13px;}
.item-row .js-qty,.item-row .js-rate{text-align:right;}

/* The setup panel: four columns of paperwork that collapse to one on a phone. */
.setup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
.setup-h{
  font-family:var(--display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line);
}
.part-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.part-row{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:7px 10px;border-bottom:1px solid var(--line);background:var(--surface);
}
.part-row:last-child{border-bottom:0;}
.part-row .input{padding:6px 9px;font-size:12.5px;}
.part-row__on{display:grid;place-items:center;}

@media (max-width:720px){
  .item-row{grid-template-columns:minmax(0,1fr) 70px 96px 30px;}
  .item-row .js-detail{grid-column:1 / -1;}
}

/* ═══════════════ Document thumbnail ═══════════════
   A quote page is ~860px wide. Dropped into a 300px card it used to render at
   full size and show the left-hand inch of the document and nothing else. It
   renders at its real width now and is scaled to fit, like a thumbnail. */
.doc-thumb{
  position:relative;width:100%;overflow:hidden;border-radius:11px;
  background:#E7E9E5;box-shadow:var(--shadow-2);border:1px solid var(--line);
  aspect-ratio:1 / 1.12;margin-bottom:12px;
}
.doc-thumb iframe{
  position:absolute;top:0;left:0;border:0;display:block;
  transform-origin:top left;pointer-events:none;
  /* Set by JS once the real width is known; this is the un-scaled fallback. */
  width:860px;height:1120px;
}
.doc-thumb__open{position:absolute;inset:0;border-radius:11px;}
.doc-thumb__open:hover{box-shadow:inset 0 0 0 2px var(--brass);}
.doc-thumb::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(231,233,229,0),rgba(231,233,229,.85));
}

/* ═══════════════════════ The front desk ═══════════════════════
   The team and what each of them is on. Everything dense lives on the
   conversation page; nothing here should need reading twice. */
/* `.shell` is a column flex container, so auto side margins stop the item
   stretching and it collapses to content width. Same shape as `.page`. */
.desk{width:100%;max-width:1240px;padding:28px 30px 70px;}
.desk__head{
  margin-bottom:26px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
.desk__digest{flex:none;margin-top:6px;}
@media (max-width:720px){
  .desk__head{flex-direction:column;gap:10px;}
  .desk__digest{margin-top:0;}
}
.desk__head h1{
  font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.035em;
  margin:0 0 4px;color:var(--ink);
}
.desk__head h1 em{font-style:normal;color:var(--brass);}
.desk__head p{margin:0;color:var(--ink-3);font-size:15px;}

.desk__crew{
  display:grid;gap:20px;align-items:start;justify-content:start;
  /* A capped track, not a stretchy one: two employees on a wide screen should
     be two ordinary cards, not two enormous ones — and auto-fill must not hold
     an empty column open beside them. */
  grid-template-columns:repeat(auto-fill,minmax(290px,360px));
}

.mate-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.mate-card:hover{box-shadow:var(--shadow-2);}
.mate-card.is-waiting{border-color:color-mix(in srgb,var(--brass) 55%,var(--line));}

/* The one you start with. Her own colour, at a strength that says "here" and
   not "advertisement": the border takes the tint, a soft ring sits outside it,
   and the body carries the faintest wash of it. Everything else about the card
   — its size, its buttons, its scene — is identical to the rest of the row,
   because she is a colleague and not a banner. */
.mate-card--first{
  border-color:color-mix(in srgb,var(--tint) 60%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 20%,transparent),var(--shadow-1);
}
.mate-card--first:hover{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 28%,transparent),var(--shadow-2);
}
.mate-card--first .mate-card__body{
  background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 10%,var(--surface)),var(--surface) 72%);
}
.mate-card--first.is-waiting{border-color:color-mix(in srgb,var(--brass) 55%,var(--line));}

/* ── The scene: one component, two sizes ──
   'card' wears it across the face of a front-desk card. 'corner' is a small
   window in the header of every other chat — stretched to a full-width banner
   it swallowed the page. */
.scene{position:relative;background:var(--pine-deep);overflow:hidden;flex:none;}
.scene--card{aspect-ratio:16/9;width:100%;border-radius:12px 12px 0 0;}
.scene--corner{
  width:clamp(112px,17vw,168px);aspect-ratio:16/9;border-radius:10px;
  box-shadow:0 1px 3px rgba(7,51,44,.18);
}
/* At the top of a side column, above what is on their desk. */
.scene--panel{
  width:100%;aspect-ratio:16/9;border-radius:14px;
  border:1px solid var(--line);box-shadow:var(--shadow-1);margin-bottom:14px;
}
/* Beside what is on their desk, on a workspace where the conversation needs the
   height more than the picture does. */
.scene--tile{
  width:168px;flex:none;aspect-ratio:16/9;border-radius:12px;
  border:1px solid var(--line);box-shadow:var(--shadow-1);
}
.scene--panel .scene__lamp{top:10px;right:10px;}
.scene--tile .scene__lamp{top:8px;right:8px;width:8px;height:8px;}
.scene--corner .scene__lamp{top:7px;right:7px;width:8px;height:8px;}
/* A role whose film has not been drawn yet. Same shape, same tint, its own
   mark — so the grid stays even and the gap reads as "not drawn yet" rather
   than as a picture that failed to load. */
.scene--none{display:grid;place-items:center;
  background:linear-gradient(150deg, color-mix(in srgb, var(--tint) 82%, #0B1A17) 0%,
                                     color-mix(in srgb, var(--tint) 46%, #0B1A17) 100%);}
.scene__mark{font-size:30px;color:rgba(255,255,255,.62);}
.scene--corner .scene__mark,.scene--tile .scene__mark{font-size:17px;}
.scene video{width:100%;height:100%;object-fit:cover;display:block;}
.scene .js-scene-phone{
  position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.scene .js-scene-phone.is-on{opacity:1;}
.scene__lamp{
  position:absolute;top:11px;right:11px;width:9px;height:9px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(7,51,44,.45);
}
/* Busy is said by the sweep and the line of text, never by freezing the picture
   — a still scene reads as broken, not as calm. */
.scene.is-busy video.js-scene-work{filter:saturate(1.04);}
.scene.is-busy::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  animation:mate-work 2.6s linear infinite;
}
.scene.is-answering::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  animation:mate-reply 1.5s ease-in-out infinite;
}
/* "Working", on the picture. The sweep alone was too quiet to answer the
   question people were actually asking, which was whether anything was
   happening at all. */
.scene__working{
  position:absolute;left:9px;bottom:9px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px 4px 7px;border-radius:20px;
  background:rgba(9,32,28,.72);backdrop-filter:blur(6px);
  color:#F3F1EA;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.scene__working.is-on{opacity:1;transform:none;}
.scene__dots{display:inline-flex;gap:3px;}
.scene__dots i{
  width:3px;height:3px;border-radius:50%;background:var(--brass);
  animation:scene-dot 1.25s ease-in-out infinite;
}
.scene__dots i:nth-child(2){animation-delay:.18s;}
.scene__dots i:nth-child(3){animation-delay:.36s;}
@keyframes scene-dot{ 0%,100%{opacity:.28;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} }

/* On the smallest scene there is no room for the word — the dots carry it. */
.scene--tile .scene__working,
.scene--corner .scene__working{padding:4px 7px;gap:0;left:7px;bottom:7px;}
.scene--tile .scene__working-text,
.scene--corner .scene__working-text{display:none;}

@media (prefers-reduced-motion:reduce){
  .scene__dots i{animation:none;opacity:.85;}
}

.thread__head--scene{align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;}
@keyframes mate-work{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes mate-reply{ 0%,100%{opacity:.25} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .scene .js-scene-phone{transition:none;}
  .scene.is-busy::after,.scene.is-answering::after{animation:none;opacity:.7;}
}

/* The chat panel sits under the scene and takes the rest of the height. */
.thread .scene + .thread__head{border-top:0;}
.thread--card{border:0;height:auto;}
.thread--card .thread__body{max-height:250px;min-height:0;}
.thread--card .thread__head{padding:11px 14px 8px;}
.thread--card .thread__compose{padding:10px 12px 12px;}
.thread--card .compose__hint{font-size:11px;}

.mate-card__doing{padding:2px 0 10px;border-bottom:1px solid var(--line);margin-bottom:10px;}
.mate-card__doing > p{margin:0;font-size:15px;line-height:1.4;color:var(--ink);}
.mate-card__doing > p.mate-card__sub{font-size:13px;color:var(--ink-3);margin-top:2px;}
.mate-card__doing .starter--sm{margin-top:9px;}
.mate-card__body{padding:15px 16px 14px;display:flex;flex-direction:column;gap:9px;flex:1;}
.mate-card__who{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.mate-card__who h2{
  font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0;
}
.mate-card__who span{font-size:12px;color:var(--ink-3);}

.mate-card__doing{margin:0;font-size:15px;line-height:1.4;color:var(--ink);}
.mate-card__sub{margin:0;font-size:13px;color:var(--ink-3);}
.mate-card.is-waiting .mate-card__doing > p:first-child{font-weight:600;}

.mate-card__todo{display:flex;flex-direction:column;gap:5px;}
.mate-card__todo .todo{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;
  background:var(--surface-2);font-size:13px;color:var(--ink-2);text-decoration:none;
}
.mate-card__todo .todo:hover{background:var(--surface-3);color:var(--ink);}
.mate-card__todo .todo i{color:var(--brass);font-size:11px;flex:none;}
.mate-card__todo .todo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.mate-card__reply{
  background:var(--pine-wash);border-radius:11px;padding:11px 13px;
  font-size:14px;line-height:1.5;color:var(--ink-2);
}
.mate-card__reply p{margin:0 0 7px;}
.mate-card__reply p:last-child{margin:0;}

.mate-card__say{display:flex;gap:7px;align-items:center;margin-top:auto;padding-top:2px;}
.mate-card__say input{
  flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:10px;
  padding:9px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);
}
.mate-card__say input:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-wash);}
.mate-card__say button{
  flex:none;width:34px;height:34px;border-radius:9px;border:none;cursor:pointer;
  background:var(--pine);color:#fff;display:grid;place-items:center;font-size:12px;
}
.mate-card__say button:hover{background:var(--pine-lift);}
.mate-card__say button:disabled{opacity:.55;cursor:default;}

.mate-card__foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.starter--sm{font-size:12px;padding:5px 10px;}
.mate-card__more{
  margin-left:auto;font-size:12px;color:var(--ink-3);text-decoration:none;white-space:nowrap;
}
.mate-card__more:hover{color:var(--pine);}
.mate-card__more i{font-size:9px;}

.mate-card--open .mate-card__scene--open img{filter:grayscale(.45) brightness(1.04);opacity:.8;}
.mate-card--open{border-style:dashed;}

.desk__soon{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
}
.soon-chip{
  display:inline-flex;align-items:baseline;gap:7px;padding:6px 11px;border-radius:99px;
  border:1px dashed var(--line-strong);color:var(--ink-3);text-decoration:none;font-size:13px;
}
.soon-chip span{font-size:11px;opacity:.75;}
.soon-chip:hover{border-color:var(--tint,var(--pine));color:var(--ink-2);}

@media (max-width:720px){
  .desk{padding:20px 16px 48px;}
  .desk__head h1{font-size:27px;}
  .desk__crew{grid-template-columns:minmax(0,1fr);gap:16px;}
}
@media (prefers-reduced-motion:reduce){
  .mate-card.is-busy .mate-card__scene::after{animation:none;}
}

/* A data table is as wide as its columns need. On a phone that pushed the whole
   page sideways; now the table scrolls inside its own box and the page does not. */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.scrollx > .table{min-width:520px;}
@media (min-width:721px){ .scrollx > .table{min-width:0;} }


/* Pinned under a chat's header: what they are on, and one thing to say. It has
   to stay in view rather than scroll off with the messages. */
.thread__sub{
  padding:11px 16px 12px;border-bottom:1px solid var(--line);
  background:var(--surface);flex:none;
}
.thread__sub .mate-card__doing{padding:0;border:0;margin:0;}

/* On a phone the icons, the box and the send button in one row leave the box
   too narrow to type in. Give it the full width and put the buttons under it. */
@media (max-width:720px){
  .thread .compose{flex-wrap:wrap;row-gap:8px;}
  .thread .compose textarea{flex:1 0 100%;order:-1;min-height:52px;}
  .thread .compose__send{margin-left:auto;}
  .compose__hint{font-size:11.5px;line-height:1.45;}
}

/* ── When the two columns become one ──
   A single column puts whatever comes second in the markup underneath, and on
   both the conversation page and the workspaces that was the employee: a
   full-width picture of someone at a desk, half a screen tall, sitting below the
   conversation where you would never scroll to it. On a workspace it was worse —
   the chat itself landed under a full-page preview, two thousand pixels down.

   1140px is where .office and .grid--desk drop to one column, so it is where the
   employee goes first and goes small. Same markup, same partials; only the
   arrangement changes. */
@media (max-width:1140px){
  .office__side{
    order:-1;flex-direction:row;flex-wrap:wrap;gap:12px;align-items:flex-start;
  }
  .office__side .scene--panel{width:168px;flex:none;margin-bottom:0;}
  .office__side .panel{flex:1 1 200px;min-width:0;}

  /* On a workspace the conversation comes before the thing it is about. */
  .grid--desk > .workside{order:-1;}
  .workside > .card{min-height:340px;}

  /* The page scrolls here, so a list cut off mid-row buys nothing. */
  .deskrow .panel__body,
  .office__side .panel__body{max-height:none;}
}

/* ── The phone ── */
@media (max-width:720px){
  .office__side .scene--panel,
  .deskrow .scene--tile{width:132px;}
  .office__side .panel,
  .deskrow .panel{flex:1 1 150px;}

  .page-head{gap:12px;margin-bottom:18px;}
  .page-head__actions{width:100%;}

  /* The name keeps the bar; whatever follows it can wait. */
  .crumb{flex-wrap:nowrap;}
  .crumb__aside{display:none;}

  /* Stacked, so a heading and its count stop fighting over one short line. */
  .office__side .panel__head,
  .deskrow .panel__head{display:block;padding:9px 12px 7px;}
  .office__side .panel__head h3,
  .deskrow .panel__head h3{font-size:14px;margin:0;}
  .office__side .panel__head .meta,
  .deskrow .panel__head .meta{display:block;margin:2px 0 0;font-size:10.5px;}
}

/* Somewhere to go from a card: open the campaign, the template, the last issue,
   or start a new one. The front desk used to be able to talk and nothing else. */
.mate-card__quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.quick{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--surface);
  font-size:12.5px;color:var(--ink-2);text-decoration:none;max-width:100%;
}
.quick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.quick i{font-size:10px;color:var(--ink-3);flex:none;}
.quick:hover{border-color:var(--pine);color:var(--pine);}
.quick:hover i{color:var(--pine);}
.quick--go{background:var(--pine);border-color:var(--pine);color:#fff;}
.quick--go i{color:rgba(255,255,255,.8);}
.quick--go:hover{background:var(--pine-lift);border-color:var(--pine-lift);color:#fff;}

/* A card is a scene, a name, a line and a way in — short enough that a roster
   fits on a screen without any of it having to scroll. */
.desk__crew{align-items:start;}
.mate-card__body{gap:8px;}
.mate-card .btn--block{margin-top:2px;}
@media (max-height:760px){ .scene--card{aspect-ratio:2/1;} }

/* The right-hand column: the employee, their desk, then the conversation.
   Sized to fit from where it starts, not from the top of the window — at 80vh
   it ran past the bottom of a laptop screen and the box you type in was the
   part that fell off. It sticks once you scroll, so the room it gives up below
   is background rather than anything you needed. */
.workside{
  display:flex;flex-direction:column;position:sticky;top:80px;
  height:min(calc(100vh - 288px),860px);min-height:420px;
}
/* …and then JavaScript replaces that height with the room the column actually
   has, every time you scroll. The CSS value is what it looks like before the
   script runs and if the script never does — right where the page opens, which
   is the moment that has to be right without help. See W.fitColumns. */
/* 1140px is where .grid--desk drops to one column — the column stops being a
   column there, so it stops being a fixed-height sticky one too. It used to say
   1000px, which left a 140px band where a full-width column was still capped and
   stuck. */
@media (max-width:1140px){ .workside{height:auto;position:static;} }

/* A workspace column: the employee, their desk, then the conversation. The
   chat takes whatever height is left rather than pushing the rest off. */
.workside .panel{flex:none;margin-bottom:14px;}
.workside .panel__body{max-height:190px;overflow-y:auto;}
/* The conversation is the thing that grows. Every card in this column used to
   share the space equally, so a page that put one panel above the chat halved
   it and two panels left 28 pixels of thread — measurably, on Otto's page.
   Only the chat card carries an inline flex:1, and only that one grows now. */
.workside > .card{flex:none;}
.workside > .card[style*="flex:1"]{min-height:220px;}

/* Onboarding's column has no chat under it, so it hugs its content. */
.workside--short{height:auto;}

/* The employee and their desk, side by side above a workspace conversation.
   Stacked they took roughly 350px of a 400px column and the chat got what was
   left, which on a laptop was not enough to hold a reply and the box you type
   in at the same time. */
.deskrow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-bottom:14px;flex:none;}
.deskrow .panel{flex:1 1 208px;min-width:0;margin-bottom:0;}
/* Stacked, because at this width "On her desk" and the count fought each other
   for the same line and the heading broke into three. */
.deskrow .panel__head{padding:9px 12px 7px;display:block;}
.deskrow .panel__head h3{font-size:14px;margin:0;}
.deskrow .panel__head .meta{display:block;margin:2px 0 0;font-size:10.5px;}
.deskrow .panel__body{max-height:132px;}
.deskrow .plate-row{padding:8px 12px;}
.deskrow .nothing{padding:12px;font-size:13px;}
/* On a short window every row of the desk is a row the conversation does not
   get. The list scrolls; the thread cannot. */
@media (max-height:820px){ .deskrow .panel__body{max-height:92px;} }
/* Too narrow to sit beside the desk and still leave it readable? The panel wraps
   under the picture on its own — flex-wrap rather than a width guess, because
   the guess was wrong: it fired where the column had already gone full width and
   blew the tile up into a 700px banner. The picture keeps its size either way. */

/* =========================================================
   The books
   ========================================================= */

/* Right-aligned figures, in the tabular numerals — a column of money that does
   not line up on the decimal point is a column nobody can scan. */
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.table th.num{text-align:right;}
.table .row--head td{background:var(--surface-2);font-size:12.5px;}
.table--book td{padding:11px 16px;}

/* The three figures that answer "how am I doing", on every view of the books. */
.booktop{
  display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
/* The tabs used to sit above this in a card head. They are a page-level strip
   now, so this bar is the top of the card and has to be shaped like it. */
.booktop:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0;}
.booktop__fig{display:flex;flex-direction:column;gap:1px;}
.booktop__label{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.booktop__value{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.booktop__fig--net .booktop__value{color:var(--pine);}
.booktop__fig--net.is-down .booktop__value{color:#8A2E23;}
.is-down{color:#8A2E23;}

/* ---------------------------------------------------------------------------
   Cash flow. The one view here that is about next month rather than last.

   The verdict sentence gets the colour, not the chart: "you run short in
   November" is the thing somebody has to read, and a wall of red bars says
   the same thing less clearly and to nobody in particular.
   --------------------------------------------------------------------------- */
.cashtop{
  display:flex;align-items:stretch;gap:18px;flex-wrap:wrap;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.cashtop__now{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:210px;}
.cashtop__value{
  font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.cashtop__now .meta{font-size:11.5px;}
.cashtop__now .btn{margin-top:6px;}
.cashtop__say{
  flex:1;min-width:260px;display:flex;align-items:center;gap:11px;
  padding:12px 15px;border-radius:11px;font-size:14px;line-height:1.5;
  background:var(--surface);border:1px solid var(--line);
}
.cashtop__say i{font-size:16px;flex:none;}
.cashtop__say--fine i{color:var(--pine);}
.cashtop__say--tight{background:var(--brass-wash);border-color:var(--brass-line);}
.cashtop__say--tight i{color:var(--brass);}
.cashtop__say--short{background:#FBEFED;border-color:#E4C4BF;}
.cashtop__say--short i{color:#8A2E23;}
.cashtop__say--unknown i{color:var(--ink-3);}

/* Two scales, one picture: the balance line has the top band and the weekly
   flows have the bottom one. Drawing both against one scale turns a week's
   spending into a row of stubs beside a balance ten times its size. */
.cashsvg{display:block;margin:18px 18px 4px;overflow:visible;}
.cashsvg__line{fill:none;stroke:var(--pine);stroke-width:2;stroke-linejoin:round;}
.cashsvg__dot{fill:var(--pine);}
.cashsvg__dot.is-down{fill:#8A2E23;}
.cashsvg__zero{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 3;}
.cashsvg__under{fill:#FBEFED;}
.cashsvg__mark{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 4;}
.cashsvg__in{fill:var(--pine);opacity:.75;}
.cashsvg__out{fill:var(--brass);}
.cashsvg__wk{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);}
.cashsvg__ax{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);}
.cashkey{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:2px 18px 4px;font-size:11.5px;color:var(--ink-2);
}
.cashkey span{display:inline-flex;align-items:center;gap:6px;}
.cashkey .meta{margin-left:auto;}
.cashkey__dot{width:8px;height:8px;border-radius:50%;background:var(--pine);display:inline-block;}
.cashkey__sw{width:9px;height:11px;border-radius:2px;display:inline-block;}
.cashkey__sw--in{background:var(--pine);opacity:.75;}
.cashkey__sw--out{background:var(--brass);}

/* Sol. Three kinds of certainty in one bar, stacked so you can see which part
   of a month is a promise and which is a hope — the whole reason the page does
   not add them into one figure and call it revenue. */
.revtop{
  display:flex;align-items:stretch;gap:18px;flex-wrap:wrap;margin-bottom:16px;
  padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);
}
.revtop__fig{display:flex;flex-direction:column;gap:3px;min-width:190px;}
.revbars{display:flex;align-items:flex-end;gap:10px;padding:8px 0 0;min-height:140px;}
.revbar{flex:1;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.revbar__fig{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.revbar__stack{display:flex;flex-direction:column-reverse;justify-content:flex-start;width:34px;}
.revbar__seg{display:block;width:100%;}
.revbar__stack .revbar__seg:first-child{border-radius:0 0 3px 3px;}
.revbar__stack .revbar__seg:last-child{border-radius:3px 3px 0 0;}
.revbar__seg--inv{background:var(--pine);}
.revbar__seg--rec{background:var(--brass);}
.revbar__seg--pipe{background:var(--line-strong);}
.revbar__m{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap;}

.revodds{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;}
.revodds__fig{display:flex;flex-direction:column;gap:2px;min-width:150px;}
.revodds__set{flex:1;min-width:240px;}

/* One job on the list. The tick is the whole interaction — a to-do you have to
   open a panel to finish is a to-do that stays open. */
.todotick{
  width:19px;height:19px;flex:none;border-radius:6px;cursor:pointer;
  border:1.5px solid var(--line-strong);background:var(--surface);
  transition:background .12s,border-color .12s;
}
.todotick:hover{border-color:var(--pine);background:var(--pine-wash,rgba(14,79,69,.08));}
.todotick:active{transform:scale(.94);}
.todotick:disabled{opacity:.5;cursor:default;}

/* Something she read but has not been told to believe. */
.bookbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 18px;border-bottom:1px solid var(--brass-line);background:var(--brass-wash);font-size:13.5px;
}
.bookbar i{color:var(--brass);}
.chip--warn{background:var(--brass-soft);color:#7A5410;}

.book-row.is-waiting{background:var(--brass-wash);}
.book-row.is-waiting:hover{background:var(--brass-wash);}
.book-row__date{white-space:nowrap;font-variant-numeric:tabular-nums;}
.book-row__date .meta{display:block;font-size:10.5px;}
.book-row__what{font-weight:500;}
.book-row__amt{font-variant-numeric:tabular-nums;font-weight:600;}
.book-row__amt--in{color:var(--pine);}
.book-row__amt--out{color:var(--ink);}

/* A heading, small enough that a table of them is still a table. */
.pill{
  display:inline-block;padding:3px 9px;border-radius:20px;background:var(--surface-2);
  border:1px solid var(--line);font-size:11.5px;color:var(--ink-2);white-space:nowrap;
}

/* The tab strip on the books is links rather than buttons — every view is a
   real address you can send someone, or come back to. */
.seg--scope a{
  padding:6px 13px;font-size:13px;border:none;background:none;color:var(--ink-2);
  text-decoration:none;border-radius:7px;display:inline-flex;align-items:center;gap:6px;
}
.seg--scope a:hover{color:var(--ink);text-decoration:none;}
.seg--scope a.is-on{background:var(--pine);color:#fff;}
.seg--scope a.is-on i{opacity:.85;}

/* A tab strip scrolls sideways; it never squashes. .seg is a nowrap flex row,
   so when the row runs out of width the browser shrinks each tab until its
   label breaks — six tabs and a date picker put "Profit and loss" on two lines
   at 1280 and on three at 500. A label is one word as far as this strip is
   concerned, a tab never gives up width, and if the whole strip will not fit
   it takes a sideways scroll rather than growing a second row. */
.seg--scope{max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.seg--scope::-webkit-scrollbar{width:0;height:0;}
.seg--scope > a,.seg--scope > button{flex:none;white-space:nowrap;}

/* The period, on one line. A generic .row wraps, and a date picker is wide
   enough that wrapping turned a filter into four stacked rows. */
.bookdates{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-left:auto;
}
.bookdates .input{width:auto;min-width:0;flex:0 1 148px;}
.bookdates .meta{flex:none;}

@media (max-width:720px){
  .bookdates{width:100%;margin-left:0;}
  .bookdates .input{flex:1 1 auto;}
  .booktop{gap:16px;padding:12px 14px;}
  .booktop__value{font-size:17px;}
  .table--book td{padding:10px 12px;}
}

/* =========================================================
   Dex — records
   ========================================================= */

/* The ready-made shapes, offered when there is nothing yet. */
.starter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;}
.starter{
  display:flex;gap:12px;align-items:flex-start;text-align:left;
  padding:14px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.starter:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1);}
.starter:disabled{opacity:.55;cursor:wait;}
.starter__icon{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--pine);font-size:14px;
}
.starter__text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.starter__name{font-weight:600;font-size:14px;}
.starter__note{font-size:12.5px;color:var(--ink-2);line-height:1.4;}

/* Saved searches, along the top of a table. */
.viewbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:11px 20px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.viewbar .chip{text-decoration:none;}
.viewbar .chip:hover{text-decoration:none;filter:brightness(.97);}

/* A pipeline, as lanes you can drag across. */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;align-items:flex-start;}
.board__lane{
  flex:0 0 236px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px;min-height:120px;
  transition:border-color .12s var(--ease),background .12s var(--ease);
}
.board__lane.is-over{border-color:var(--pine);background:var(--brass-soft);}
.board__head{display:flex;align-items:baseline;gap:7px;margin-bottom:9px;flex-wrap:wrap;}
.board__name{font-weight:600;font-size:13px;}
.board__count{
  font-family:var(--mono);font-size:10px;color:var(--ink-3);
  background:var(--surface);border-radius:20px;padding:1px 7px;
}
.board__sum{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-2);}
.board__cards{display:flex;flex-direction:column;gap:8px;min-height:34px;}

.dcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 11px;cursor:grab;box-shadow:var(--shadow-1);
}
.dcard:hover{border-color:var(--line-strong);}
.dcard.is-held{opacity:.45;cursor:grabbing;}
.dcard__title{font-weight:600;font-size:13px;line-height:1.35;margin-bottom:5px;}
.dcard__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2);}
.dcard__meta .is-late{color:var(--rose);font-weight:600;}

/* Building a table: one row per field. */
.fieldrow{
  display:grid;grid-template-columns:1fr 150px 1fr auto;gap:8px;align-items:center;margin-bottom:8px;
}
.fieldrow .js-fo[hidden]{display:none;}
@media (max-width:720px){
  .fieldrow{grid-template-columns:1fr 1fr auto;}
  .fieldrow .js-fo{grid-column:1 / -2;}
}

/* Reading a file: what he thinks each column is. */
.maplist{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;}
.maprow{display:grid;grid-template-columns:1fr auto 1fr 140px;gap:9px;align-items:center;}
.maprow__from{
  font-family:var(--mono);font-size:12px;background:var(--surface-2);
  border-radius:var(--r-sm);padding:7px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:720px){
  .maprow{grid-template-columns:1fr 1fr;}
  .maprow i{display:none;}
  .maprow__from{grid-column:1 / -1;}
}

/* A row on the list of tables, with its own icon. */
.list-row__icon{
  flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--tint,var(--pine));font-size:13px;
}

/* The card under your finger while it is being moved. */
.dcard--ghost{
  position:fixed;z-index:900;pointer-events:none;opacity:.92;
  box-shadow:0 8px 24px rgba(16,32,29,.22);transform:rotate(-1.5deg);
}

/* =========================================================
   Wren — projects
   =========================================================
   The bar is the only thing on these pages that encodes a number as a shape,
   and it never exceeds its track: at 140% the fill is full and the figure
   beside it says 140%, because a bar drawn past its own container reads as a
   layout bug rather than as bad news.
   ========================================================= */
.pmcard{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;text-decoration:none;color:inherit;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.pmcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);text-decoration:none;}
.pmcard__top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.pmcard__name{flex:1;min-width:0;font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.01em;}
.pmcard__name .meta{display:block;font-family:var(--sans);font-weight:400;letter-spacing:0;margin-top:2px;}
.pmcard__facts{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:11px;font-size:13px;color:var(--ink-2);
}
.pmcard__facts .is-bad{color:var(--rose);}
.pmcard__facts strong{color:var(--ink);font-weight:600;}
.pmcard__date{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;}
.pmcard__date i{opacity:.6;margin-right:4px;}

.pmbar{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;}
.pmbar--big{height:9px;}
.pmbar__fill{display:block;height:100%;border-radius:4px;background:var(--pine);transition:width .3s var(--ease);}
.pmbar__fill.is-over{background:var(--rose);}

.pmdates{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
.pmdates__v{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:5px;}
.pmdates__v.is-bad{color:var(--rose);}

/* One task. The tick is a real button of its own so that marking something
   done and opening it are two different clicks — they used to be one. */
.pmtask{
  display:flex;align-items:flex-start;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line);
}
.pmtask:last-child{border-bottom:none;}
.pmtask:hover{background:var(--surface-2);}
.pmtask.is-done{opacity:.55;}
.pmtask.is-done .pmtask__title{text-decoration:line-through;}
.pmtask.is-late{box-shadow:inset 3px 0 0 var(--rose);}
/* An explicit box, not a box the icon happens to make. The button held nothing
   but an <i>, so when the icon font did not load it collapsed to nothing wide
   and nothing tall — a control that vanishes with a webfont is not a control. */
.pmtask__tick{
  flex:none;background:none;border:none;cursor:pointer;padding:0;font-size:17px;
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-3);line-height:1;transition:color .15s var(--ease);border-radius:50%;
}
.pmtask__tick:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(14,79,69,.18);}
.pmtask__tick:hover{color:var(--pine);}
.pmtask.is-done .pmtask__tick{color:var(--pine);}
.pmtask__main{flex:1;min-width:0;cursor:pointer;}
.pmtask__title{font-size:14.5px;font-weight:500;line-height:1.4;}
.pmtask__sub{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;font-size:12.5px;color:var(--ink-2);}
.pmtask__sub i{opacity:.55;margin-right:4px;}
.pmtask__sub .is-bad{color:var(--rose);}
.pmtask__sub .is-wait{color:var(--brass);}
.pmtask__when{flex:none;text-align:right;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.pmtask__due{white-space:nowrap;}
.pmtask__lands{white-space:nowrap;margin-top:2px;color:var(--ink-3);}
.pmtask__due.is-bad,.pmtask__lands.is-bad{color:var(--rose);font-weight:600;}
.pmtask__more{
  flex:none;background:none;border:none;cursor:pointer;color:var(--ink-3);padding:0;border-radius:6px;
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
}
.pmtask__more:hover{background:var(--surface-3,var(--surface-2));color:var(--ink);}
.pmsep{
  padding:9px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);border-bottom:1px solid var(--line);
}

.pmperson.is-off{opacity:.6;}
.pmperson h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pmfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;}
.pmfacts>div{display:flex;flex-direction:column;gap:4px;font-size:14px;}
.pmnext{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.pmnext__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:7px 0;font-size:13.5px;color:inherit;text-decoration:none;border-bottom:1px solid var(--line);
}
.pmnext__row:last-child{border-bottom:none;}
.pmnext__row:hover{text-decoration:none;color:var(--pine);}

.pmshare{margin-bottom:14px;}
.pmshare:last-child{margin-bottom:0;}
.pmshare__top{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;margin-bottom:6px;}

/* Mira's column. The conversation is her whole surface, so it takes the wide
   side of the desk grid and the height a workspace chat would have had — a
   thread you talk to all day in a card that hugs its content is a thread you
   scroll rather than read. */
.miradesk{height:min(calc(100vh - 250px),820px);min-height:460px;}
.miradesk > .card{flex:1 1 auto;min-height:0;}
@media (max-width:900px){ .miradesk{height:auto;min-height:0;} }

/* An empty state inside a side card, where the full one is taller than the
   card it is explaining. */
.empty--tight{padding:20px 18px;text-align:left;}
.empty--tight p{margin:0;max-width:none;font-size:13.5px;}

.list-row--static{cursor:default;}
.list-row--static:hover{background:transparent;}

/* Working days. Checkboxes styled as a row of keys, because seven stacked
   labelled checkboxes is most of a modal. */
.daypick{display:flex;flex-wrap:wrap;gap:6px;}
.daypick__d{position:relative;cursor:pointer;}
.daypick__d input{position:absolute;opacity:0;pointer-events:none;}
.daypick__d span{
  display:inline-block;padding:7px 12px;border:1px solid var(--line-strong);border-radius:8px;
  font-size:13px;color:var(--ink-2);background:var(--surface);transition:all .12s var(--ease);
}
.daypick__d input:checked+span{background:var(--pine);border-color:var(--pine);color:#fff;}
.daypick__d input:focus-visible+span{box-shadow:0 0 0 3px rgba(14,79,69,.18);}

@media (max-width:720px){
  .pmtask{flex-wrap:wrap;}
  .pmtask__when{width:100%;text-align:left;padding-left:29px;}
  .pmcard__date{margin-left:0;width:100%;}
}

/* =========================================================
   More than one document template
   ========================================================= */
.tpllist{display:flex;flex-direction:column;gap:2px;}
.tplrow{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);
}
.tplrow:hover{border-color:var(--line-strong);}
.tplrow__dot{flex:none;width:10px;height:10px;border-radius:50%;}
.tplrow__main{flex:1;min-width:0;}
.tplrow__name{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;flex-wrap:wrap;}
.tplrow__sub{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px;}

.tplmini{margin-top:10px;display:flex;flex-direction:column;gap:2px;}
.tplmini__row{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:8px;
  border:1px solid transparent;background:none;cursor:pointer;text-align:left;font-size:13.5px;color:var(--ink);
}
.tplmini__row:hover{background:var(--surface-2);border-color:var(--line);}
.tplmini__dot{flex:none;width:8px;height:8px;border-radius:50%;}
.tplmini__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* =========================================================
   Several businesses under one login
   ========================================================= */
.wsswitch{position:relative;margin-bottom:8px;}
.wsswitch__now{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-family:inherit;font-size:13.5px;color:var(--ink);text-align:left;
}
.wsswitch__now:hover{border-color:var(--line-strong);}
.wsswitch__now>i:first-child{color:var(--ink-3);font-size:12px;}
.wsswitch__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.wsswitch__chev{font-size:10px;color:var(--ink-3);}
.wsswitch__menu{
  position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:40;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;
  box-shadow:var(--shadow-lg,0 12px 32px rgba(0,0,0,.14));padding:6px;
  max-height:60vh;overflow-y:auto;
}
.wsswitch__head{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:6px 9px 7px;
}
.wsswitch__item{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:8px;
  border:none;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;
  color:var(--ink);text-align:left;text-decoration:none;
}
.wsswitch__item:hover{background:var(--surface-2);text-decoration:none;}
.wsswitch__item i{font-size:11px;color:var(--ink-3);width:14px;flex:none;}
.wsswitch__item.is-on{font-weight:600;}
.wsswitch__item.is-on i{color:var(--pine);}
.wsswitch__item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wsswitch__item--quiet{color:var(--ink-2);border-top:1px solid var(--line);margin-top:4px;padding-top:10px;border-radius:0 0 8px 8px;}

/* Reading all of them at once. It is not one of the businesses, so it is
   separated from the list rather than being the first thing in it — and the
   hint on the right says which one you are still standing in, because that is
   where anything you write goes. */
.wsswitch__item--all{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:10px;border-radius:8px 8px 0 0;}
.wsswitch__hint{
  flex:none !important;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
}
.wsswitch__now.is-across>i:first-child{color:var(--pine);}

/* Which business a row came from, on the row.
   Every merged view puts one of these on every line. Without it a list of
   twelve things from five companies is a list of twelve things. */
.wschip{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:2px 8px;border-radius:20px;background:var(--surface-2);
  border:1px solid var(--line);font-size:10.5px;color:var(--ink-2);
  white-space:nowrap;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;
}
.wschip i{font-size:8px;opacity:.6;}
a.wschip:hover{border-color:var(--line-strong);color:var(--ink);text-decoration:none;}

/* One line in a merged list.
   The whole row is a link, because everything in it belongs to one business
   and the point of the row is to go there. */
.allrow{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .14s var(--ease);
}
.allrow:last-child{border-bottom:none;}
.allrow:hover{background:var(--surface-2);text-decoration:none;}
.allrow__dot{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--tint,var(--pine));color:#fff;font-size:12px;
}
.allrow__dot.is-waiting{background:var(--brass,#B8860B);}
.allrow__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.allrow__label{
  font-size:13.5px;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.allrow__sub{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.allrow__who{
  flex:none;font-size:12px;color:var(--ink-3);min-width:54px;text-align:right;
}
.allrow__count{flex:none;font-size:12px;color:var(--ink-3);white-space:nowrap;}
.allrow__count.is-waiting{color:#8A6212;font-weight:600;}
@media (max-width:720px){
  .allrow__who{display:none;}
}

/* The sentence a page shows when what is on it cannot be merged — a quote has
   one letterhead, a campaign has one list. Saying nothing here reads as "you
   have one campaign", which is worse than the truth. */
.wsonly{
  display:flex;align-items:center;gap:9px;padding:9px 14px;margin-bottom:14px;
  border:1px solid var(--brass-line);background:var(--brass-wash);border-radius:10px;
  font-size:12.5px;color:#8A6212;
}
.wsonly i{font-size:11px;opacity:.8;}

.wsrow{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);margin-bottom:6px;
}
.wsrow.is-on{border-color:var(--pine);box-shadow:0 0 0 2px rgba(14,79,69,.09);}
.wsrow__main{flex:1;min-width:0;}
.wsrow__name{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.wsrow__sub{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px;}

/* =========================================================
   Whole looks
   ========================================================= */
.lookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;}
.lookcard{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);font-family:inherit;
  transition:border-color .12s var(--ease),box-shadow .12s var(--ease);
}
.lookcard:hover{border-color:var(--line-strong);}
.lookcard.is-on{border-color:var(--pine);box-shadow:0 0 0 2px rgba(14,79,69,.1);}
.lookcard__swatch{flex:none;width:16px;height:16px;border-radius:5px;margin-top:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.lookcard__text{flex:1;min-width:0;}
.lookcard__name{display:block;font-size:13.5px;font-weight:600;}
.lookcard__note{display:block;font-size:12px;color:var(--ink-2);line-height:1.4;margin-top:3px;}

/* Your own picture, in Settings. */
.youpic{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.youpic .avatar{overflow:hidden;}
.youpic__side{flex:1;min-width:0;}

/* =========================================================
   Cal — the calendar
   A week of columns rather than a grid of hours: an hour grid
   needs a scrollbar to show a working day and still hides the
   9am and the 6pm, and what people scan a week for is "what is
   on Thursday", not "where exactly does 2:15 sit".
   ========================================================= */
.calweekhead{display:flex;align-items:center;gap:10px;}
.calweekhead h3{margin:0;}

.calweek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.calday{
  border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;
}
.calday:last-child{border-right:none;}
.calday.is-weekend{background:var(--surface-2);}
.calday__head{
  display:flex;align-items:baseline;gap:6px;padding:9px 10px 7px;
  border-bottom:1px solid var(--line);
}
.calday__dow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);}
.calday__num{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.02em;}
.calday.is-today .calday__num{
  background:var(--pine);color:#fff;border-radius:7px;padding:1px 7px;margin-left:-2px;
}
.calday.is-today .calday__dow{color:var(--pine);font-weight:600;}
.calday__body{
  flex:1;min-height:132px;padding:7px 7px 6px;display:flex;flex-direction:column;gap:5px;
}

/* One entry. The tint is the calendar it came off, set inline. */
.calev{
  display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  padding:5px 7px 6px;border-radius:7px;border:1px solid transparent;
  border-left:3px solid var(--tint,var(--pine));
  background:var(--surface-2);
  background:color-mix(in srgb,var(--tint,#0E4F45) 11%,#fff);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease);
}
.calev:hover{transform:translateY(-1px);box-shadow:0 2px 7px rgba(15,32,28,.09);}
.calev__time{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.02em;}
/* Whose hour it is, in a box the width of a seventh of a week. Smaller
   than the time and clipped rather than wrapped: two lines of company
   name would push the title out of a day. */
.calev__ws{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.calev__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12px;line-height:1.35;color:var(--ink);font-weight:500;word-break:break-word;
}
/* The digest, shown as the email it is. Its own document in a frame, because
   the email's styles are inline and absolute and would otherwise be reasoned
   about against the app's. */
.digestcard{max-width:700px;margin-left:auto;margin-right:auto;}
.digestframe{
  width:100%;height:72vh;min-height:460px;border:0;border-radius:var(--r-lg);display:block;
  background:#F4F2EE;
}

/* Connecting a network. One tile per provider — the sign-in is per provider,
   even where it brings back two networks' accounts. */
.connectrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.connect{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surface);
}
.connect.is-ready{border-color:color-mix(in srgb,var(--tint,#0E4F45) 45%,var(--line));}
.connect__face{display:flex;gap:8px;font-size:22px;color:var(--tint,var(--pine));line-height:1;}
.connect__name{font-family:var(--display);font-weight:600;font-size:14.5px;}
.connect__sub{font-size:11.5px;color:var(--ink-3);line-height:1.35;}
.connect form{margin:0;}

/* The one-off setup, numbered. */
.steps{counter-reset:step;margin:0;padding:0;list-style:none;}
.steps li{
  counter-increment:step;position:relative;padding:0 0 14px 34px;font-size:13.5px;
  line-height:1.5;color:var(--ink);
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:-1px;width:23px;height:23px;
  border-radius:50%;background:var(--pine);color:#fff;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;
}
.copybox{
  display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;margin:6px 0 2px;
}
.copybox code{
  font-family:var(--mono);font-size:12px;color:var(--ink);word-break:break-all;flex:1;
}

/* How far along a planned post is. Only Rue's week uses it — a diary entry is
   either on the calendar or it is not, but a post can be an idea, written,
   approved or missed, and the difference is the whole point of the page. */
.calev__state{
  float:right;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 5px;border-radius:5px;background:var(--surface-2);color:var(--ink-3);
}
.calev__state--approved{background:#E4F0E9;color:#2F7D57;}
.calev__state--posted{background:var(--pine);color:#fff;}
.calev__state--missed{background:#F6E3E3;color:#9A3B3B;}
.calday__add{
  border:1px dashed var(--line-strong);background:transparent;color:var(--ink-3);
  border-radius:7px;padding:3px 0;font-size:13px;line-height:1.2;cursor:pointer;
  opacity:0;transition:opacity .12s var(--ease);
}
.calday:hover .calday__add,.calday__add:focus{opacity:1;}

/* Off somebody else's calendar: nothing here can be changed from this app,
   so it is drawn as a quotation rather than as one of ours. */
.calev.is-theirs{
  background:transparent;border:1px dashed var(--line-strong);
  border-left:3px solid var(--tint,var(--pine));
}
.calev.is-theirs .calev__title{font-weight:400;color:var(--ink-2);}
/* Marked free: on the calendar, but it does not stop a meeting going there. */
.calev.is-free{opacity:.62;}
.calev.is-free .calev__title{text-decoration:none;font-style:italic;}

.calday__add{
  margin-top:auto;border:1px dashed var(--line-strong);background:none;cursor:pointer;
  border-radius:7px;padding:4px 0;color:var(--ink-4);font-size:11px;
  transition:color .12s var(--ease),border-color .12s var(--ease);
}
.calday__add:hover{color:var(--pine);border-color:var(--pine);}
@media (hover:hover){
  .calday__add{opacity:0;}
  .calday:hover .calday__add,.calday:focus-within .calday__add{opacity:1;}
}

/* A phone cannot hold seven columns and stay legible, so the week
   unrolls into days. Empty days shrink to their own heading. */
@media (max-width:720px){
  .calweek{grid-template-columns:1fr;}
  .calday{border-right:none;border-bottom:1px solid var(--line);}
  .calday:last-child{border-bottom:none;}
  .calday__head{border-bottom:none;padding-bottom:2px;}
  .calday__body{min-height:0;padding-top:2px;}
  .calday__add{opacity:1;}
}

/* Who a meeting is with — the ones we already know, one tap each. */
.whochips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.whochip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--ink-2);
  transition:border-color .12s var(--ease),color .12s var(--ease);
}
.whochip i{font-size:10px;color:var(--ink-4);}
.whochip:hover{border-color:var(--pine);color:var(--ink);}
.whochip.is-on{border-color:var(--pine);background:var(--pine-wash);color:var(--pine);font-weight:600;}
.whochip.is-on i{color:var(--pine);}

/* The times Cal found, before they are offered to anybody. */
.calfind{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-strong);}
.calfind__out{margin-top:10px;}
.calfind__out:empty{margin-top:0;}
.calslot{
  display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:6px;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:13.5px;
  transition:border-color .12s var(--ease),background .12s var(--ease);
}
.calslot:last-child{margin-bottom:0;}
.calslot:hover{border-color:var(--line-strong);}
.calslot input{flex:none;width:16px;height:16px;accent-color:var(--pine);cursor:pointer;}
.calslot:has(input:checked){border-color:var(--pine);background:var(--pine-wash);}

/* The time that won. */
.list-row.is-picked{background:var(--pine-wash);box-shadow:inset 3px 0 0 var(--pine);}
.list-row.is-picked:hover{background:var(--pine-wash);}

/* Something that could not be done — an address that bounced, a
   calendar that stopped reading. Said in the line it belongs to. */
.list-row__sub .is-bad,.help.is-bad{color:var(--rose);}

/* A notice standing on its own rather than capping a card wants
   its own edges; capping a card it must not have them. */
.stack > .bookbar{border:1px solid var(--brass-line);border-radius:12px;}

/* =========================================================
   Everything — a map of the work, not another workspace
   ========================================================= */
.evgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;align-items:start;
}
.evcard{overflow:hidden;display:flex;flex-direction:column;}
.evcard__head{
  display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);transition:background .14s var(--ease);
}
.evcard__head:hover{background:var(--surface-2);text-decoration:none;}
.evcard__icon{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--tint,var(--pine));color:#fff;font-size:14px;
}
.evcard__text{flex:1;min-width:0;}
.evcard__title{
  display:block;font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.015em;
}
.evcard__line{display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px;}
.evcard__go{flex:none;font-size:11px;color:var(--ink-4);}
.evcard__head:hover .evcard__go{color:var(--tint,var(--pine));}

.evcard__rows{display:flex;flex-direction:column;}
.evrow{
  display:flex;align-items:center;gap:10px;padding:9px 16px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);transition:background .14s var(--ease);
}
.evrow:last-child{border-bottom:none;}
.evrow:hover{background:var(--surface-2);text-decoration:none;}
.evrow__main{flex:1;min-width:0;}
.evrow__title{
  display:block;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.evrow__sub{
  display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.evrow__meta{flex:none;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;}

.evcard__none{padding:14px 16px;font-size:12.5px;color:var(--ink-3);}
.evcard__foot{
  margin-top:auto;padding:8px 16px;border-top:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);
}
@media (max-width:720px){
  .evgrid{grid-template-columns:1fr;gap:12px;}
}

/* =========================================================
   Nova — the scoreboard
   ========================================================= */
.goalcard{padding:0;overflow:hidden;}
.goalcard__head{
  display:flex;align-items:center;gap:14px;padding:15px 18px 12px;
  text-decoration:none;color:inherit;
}
.goalcard__head:hover{text-decoration:none;background:var(--surface-2);}
.goalcard__text{flex:1;min-width:0;}
.goalcard__name{
  display:block;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.015em;
}
.goalcard__when{display:block;font-size:12px;color:var(--ink-3);margin-top:1px;}
.goalcard__now{flex:none;text-align:right;line-height:1.25;}
.goalcard__now b{
  display:block;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.goalcard__now span{display:block;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.goalcard__line{padding:0 18px 4px;font-size:13px;color:var(--ink-2);line-height:1.5;}
.goalcard__from{
  display:flex;align-items:center;gap:7px;padding:8px 18px 13px;
  font-size:11.5px;color:var(--ink-4);
}
.goalcard__from i{font-size:10px;}

/* The track carries two marks: how much of the number is done, and how much of
   the time is gone. Where they sit relative to each other IS the verdict, so it
   is drawn rather than only asserted in the sentence. */
.goalbar{
  position:relative;height:8px;margin:0 18px;border-radius:99px;background:var(--surface-3);
  overflow:hidden;
}
.goalbar--lg{height:12px;margin:0;}
.goalbar__fill{
  height:100%;border-radius:99px;background:var(--pine);
  transition:width .3s var(--ease);
}
.goalcard.is-behind .goalbar__fill{background:var(--brass);}
.goalcard.is-over   .goalbar__fill{background:var(--rose);}
.goalcard.is-done .goalbar__fill,.goalcard.is-ahead .goalbar__fill{background:var(--pine-lift);}
/* Not clipped by the fill: it has to be readable when it is ahead of it. */
.goalbar__pace{
  position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;
  background:var(--ink);opacity:.45;border-radius:2px;
}

.goalstat{display:flex;flex-wrap:wrap;gap:26px;}
.goalstat > div{min-width:88px;}
.goalstat__k{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
}
.goalstat__v{
  display:block;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;
  margin-top:3px;font-variant-numeric:tabular-nums;
}
.goalstat__v.is-bad{color:var(--rose);}

/* Six columns of history. Bars rather than a line, because a month with nothing
   in it has to be visibly nothing rather than a dip in a curve. */
.spark__plot{
  position:relative;display:flex;align-items:flex-end;gap:10px;height:150px;
  border-bottom:1px solid var(--line-strong);
}
.spark__col{flex:1;display:flex;align-items:flex-end;justify-content:center;height:100%;min-width:0;}
.spark__bar{
  width:100%;max-width:56px;border-radius:6px 6px 0 0;background:var(--pine-wash);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pine) 22%,transparent);
  transition:background .14s var(--ease);
}
.spark__col:hover .spark__bar{background:color-mix(in srgb,var(--pine) 20%,#fff);}
/* A window with nothing in it. Dashes rather than a hairline bar, because a
   hairline reads as "a little" and this is "none". */
.spark__none{width:100%;max-width:56px;height:0;border-top:2px dotted var(--line-strong);}

.spark__axis{display:flex;gap:10px;padding-top:6px;}
.spark__tick{flex:1;min-width:0;text-align:center;}
.spark__n{
  display:block;font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spark__l{display:block;font-size:11px;color:var(--ink-4);margin-top:1px;}
.spark__target{
  position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--brass);
  pointer-events:none;
}
.spark__target span{
  position:absolute;right:0;top:-14px;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brass);background:var(--surface);padding:0 4px;
}

.list-row.is-quiet{opacity:.55;}
.list-row.is-quiet .list-row__title{text-decoration:line-through;}

@media (max-width:720px){
  .goalstat{gap:16px;}
  .goalstat__v{font-size:18px;}
  .spark__plot{height:120px;gap:6px;}
  .spark__axis{gap:6px;}
  .spark__n{font-size:10px;}
}

/* =========================================================
   The messenger — the parts a team needs
   ========================================================= */

/* A group has many speakers, so a message carries a face. A one-to-one had
   two and could get away with none. */
.msgr__body .msg{display:flex;gap:9px;align-items:flex-start;}
.msgr__body .msg--user{justify-content:flex-end;}
.msg__face{
  flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--tint,var(--pine));color:#fff;font-size:11px;margin-top:16px;
}

/* Who is in a group, along the top of it. */
.msgr__people{
  flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:9px 14px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.msgr__chip{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 6px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);font-size:11.5px;color:var(--ink-2);
}
.msgr__chip i{font-size:9px;color:var(--tint,var(--pine));}

/* Being named. Yours is brighter than everybody else's — the whole reason to
   look at a busy conversation is finding where you were wanted. */
.at{color:var(--pine);font-weight:600;}
.at--me{background:var(--brass-soft);color:#7A5410;border-radius:5px;padding:0 3px;}
.msgrow__at{
  flex:none;width:20px;height:20px;border-radius:99px;background:var(--brass);color:#241703;
  font-weight:700;font-size:11px;display:grid;place-items:center;
}

/* The @ picker. Above the box you type in, because below it is under the
   keyboard on a phone. */
.msgr__compose{position:relative;}
.msgr__at{
  position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);z-index:5;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:var(--shadow-3);overflow:hidden;max-height:264px;overflow-y:auto;
}
.msgr__atrow{
  width:100%;display:flex;align-items:center;gap:9px;padding:8px 12px;border:none;
  background:none;cursor:pointer;font-family:inherit;text-align:left;
}
.msgr__atrow.is-on,.msgr__atrow:hover{background:var(--pine-wash);}
.msgr__atface{
  flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--tint,var(--pine));color:#fff;font-size:10px;
}
.msgr__atname{font-size:13.5px;font-weight:500;white-space:nowrap;}
.msgr__atsub{
  flex:1;min-width:0;font-size:11.5px;color:var(--ink-4);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.msgr__picklist{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;}
.msgr__pickrow{
  display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--line);
}
.msgr__pickrow:last-child{border-bottom:none;}
.msgr__pickrow:hover{background:var(--surface-2);}
.msgr__pickrow input{flex:none;width:16px;height:16px;accent-color:var(--pine);}

.msgr-pop.is-at{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft),var(--shadow-3);}

/* =========================================================
   The messenger as its own app
   ========================================================= */
body.msgrapp{
  height:100vh;height:100dvh;margin:0;display:flex;flex-direction:column;
  background:var(--surface-2);overflow:hidden;
}
.msgrapp__bar{
  flex:none;display:flex;align-items:center;gap:12px;padding:0 16px;height:56px;
  background:var(--pine);color:#fff;
}
.msgrapp__mark{display:flex;align-items:center;text-decoration:none;color:#fff;}
.msgrapp__name{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.015em;}
.msgrapp__space{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:9px;padding:5px 10px;font-family:inherit;font-size:12.5px;max-width:220px;
}
.msgrapp__space option{color:var(--ink);}
.msgrapp__space--flat{border-color:transparent;background:none;color:var(--brass-soft);}
.msgrapp__spacer{flex:1;}
.msgrapp__bar .btn--quiet{background:rgba(255,255,255,.12);color:#fff;border-color:transparent;}
.msgrapp__bar .btn--quiet:hover{background:rgba(255,255,255,.22);color:#fff;}
.msgrapp__me{display:flex;align-items:center;gap:8px;}
.msgrapp__me .avatar{background:var(--brass);color:#241703;}
.msgrapp__out{color:rgba(255,255,255,.7);font-size:13px;}
.msgrapp__out:hover{color:#fff;}

.msgrapp__body{flex:1;min-height:0;display:flex;}
/* Standing on its own it is the page, not a panel in a corner: two columns on
   a desktop, one at a time on a phone. */
.msgr--full{
  position:static;width:100%;max-width:none;height:100%;
  border:none;border-radius:0;box-shadow:none;animation:none;
  display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
}
.msgr--full .msgr__head{grid-column:1 / -1;}
.msgr--full .msgr__list{
  grid-column:1;grid-row:2;border-right:1px solid var(--line);background:var(--surface);
}
.msgr--full .msgr__list.hide{display:block !important;}
.msgr--full .msgr__thread{grid-column:2;grid-row:2;background:var(--surface);}
.msgr--full .msgr__thread.hide{display:flex !important;}
.msgr--full #msgrBack{display:none;}
.msgr--full .msgr__body{padding:18px 22px 8px;}
.msgr--full .msgr__compose{padding:12px 18px 16px;}

@media (max-width:820px){
  .msgr--full{grid-template-columns:minmax(0,1fr);}
  .msgr--full .msgr__list{grid-column:1;border-right:none;}
  .msgr--full .msgr__thread{grid-column:1;}
  /* One at a time again, so the back chevron comes back with it. */
  .msgr--full .msgr__list.hide{display:none !important;}
  .msgr--full .msgr__thread.hide{display:none !important;}
  .msgr--full #msgrBack{display:inline-grid;}
  .msgrapp__name{display:none;}
}

/* The page somebody follows an invitation to. */
.joinpage{
  min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--surface-2);
}
.joinpage__card{
  width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--shadow-2);
}
.joinpage__card h2{font-size:24px;margin-bottom:6px;}
.joinpage__sub{color:var(--ink-2);font-size:14px;margin-bottom:22px;line-height:1.55;}
.joinpage__foot{margin-top:20px;font-size:12.5px;color:var(--ink-4);line-height:1.55;}