/* Firm Portal — pack styles.
   Only what the engine primitives do not already cover. Everything below uses
   the engine's tokens so light, dark and the accent all follow along.

   The one token this pack overrides is --accent-on. The engine's default ink
   for text sitting on the accent is a near black tuned for an amber pack; on a
   slate blue at 36% lightness it measures 2.1:1. White measures 7.7:1, so the
   light theme swaps it. The dark theme's accent is a pale blue, where the
   engine's near black is already correct, so that one is restated as it was.
*/

:root { --accent-on: #fff; }
[data-theme="dark"] { --accent-on: hsl(222 20% 8%); }

/* ---------------------------------------------------------- small bits -- */

/* The page title has to stay readable: the toggle, the client picker and the
   primary action are all in the top bar, and the engine lets the titles shrink
   to nothing before it will wrap them. */
@media (min-width: 901px) { .top__titles { min-width: 150px; } }
@media (min-width: 1200px) { .top__titles { min-width: 190px; } }

.linkbtn {
  border: 0; background: none; padding: 0;
  font: inherit; font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  text-align: left;
}
.linkbtn:hover { text-decoration-thickness: 2px; }

.input--slim { height: 30px; font-size: 12.5px; padding: 0 24px 0 9px; width: auto; min-width: 128px; max-width: 200px; }

.kvs { display: flex; flex-direction: column; }
.kvs .kv + .kv { border-top: 1px solid var(--line-2); }

.detail { display: flex; flex-direction: column; gap: 18px; }
.detail__top { display: flex; align-items: flex-start; gap: 12px; }
.detail__v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.detail__vs { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.detail__sec { display: flex; flex-direction: column; gap: 9px; }
.detail__bar { display: flex; flex-wrap: wrap; gap: 6px; }
.detail__chips { gap: 6px; }

.minilist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.minilist li + li { border-top: 1px solid var(--line-2); }
.minilist__i, .minilist__plain {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 11px;
  border: 0; background: none; text-align: left; font: inherit; color: var(--ink);
}
.minilist__i { cursor: pointer; }
.minilist__i:hover { background: var(--surface-2); }
.minilist__t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minilist__d { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.minilist__v { font-size: 12px; font-weight: 600; white-space: nowrap; }

.notecard {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 12px; border-left: 3px solid var(--accent-soft-2);
}

.lineswrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; }
.lines { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 340px; }
.lines th, .lines td { padding: 8px 11px; border-bottom: 1px solid var(--line-2); text-align: left; }
.lines thead th { font: 700 10px var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); background: var(--surface-2); }
.lines tfoot td { border-bottom: 0; color: var(--ink-2); }
.lines tfoot tr:first-child td { border-top: 1px solid var(--line); }
.lines__tot td { font-weight: 700; color: var(--ink); font-size: 13px; }
.lines tbody tr:last-child td { border-bottom: 0; }
.gstnote { font: 500 11px var(--mono); color: var(--ink-mute); margin-top: 8px; }

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

.faceseg {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); padding: 2px; gap: 2px; flex: 0 0 auto;
}
.faceseg__b {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px; border: 0; border-radius: 999px;
  background: none; cursor: pointer;
  font: 600 12px var(--sans); color: var(--ink-mute);
}
.faceseg__b:hover { color: var(--ink); }
.faceseg__b.is-on { background: var(--accent); color: var(--accent-on); box-shadow: var(--shadow-1); }
.faceseg__b.is-on .ic { opacity: 1; }
.faceseg__b .ic { opacity: 0.7; }

.facewho {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 11.5px; color: var(--ink-mute);
}
.facewho__l { font: 700 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }

/* --------------------------------------------------------- matter board -- */

.boardbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.boardbar .tbl__search { flex: 1 1 220px; min-width: 0; }
.boardbar .input--slim { flex: 0 0 auto; }
.boardbar__hint { font-size: 11.5px; color: var(--ink-mute); flex: 0 0 auto; }

.mc__top { display: flex; align-items: flex-start; gap: 8px; }
.mc__t { flex: 1; font-size: 12.5px; font-weight: 600; line-height: 1.32; color: var(--ink); }
.mc__fee { font: 600 11.5px var(--mono); white-space: nowrap; color: var(--ink); }
.mc__client { font-size: 11.5px; color: var(--ink-2); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc__m { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mc__f { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.mc__due { font: 500 10.5px var(--mono); color: var(--ink-mute); white-space: nowrap; }
.mc__due.is-late { color: var(--bad); font-weight: 700; }
.mc__due.is-soon { color: var(--warn); font-weight: 600; }
.mc__open {
  margin-left: auto; border: 0; background: none; padding: 2px; cursor: pointer;
  color: var(--ink-mute); border-radius: 5px; display: grid;
}
.mc__open:hover { background: var(--accent-soft); color: var(--accent-ink); }
.mc__miss {
  display: inline-flex; align-items: center; gap: 3px;
  font: 700 10px var(--mono); color: var(--bad);
  background: var(--bad-soft); border-radius: 999px; padding: 1px 7px;
}
.mc__miss--ok { color: var(--ok); background: var(--ok-soft); }

.staffchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); font-weight: 500; min-width: 0; }
.staffchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staffchip .avatar { font-weight: 700; }

.stagebar { display: flex; gap: 3px; }
.stagebar__s {
  flex: 1; min-width: 0;
  border: 0; border-radius: 4px; cursor: pointer;
  padding: 6px 4px 7px;
  background: var(--surface-2); color: var(--ink-mute);
  font: 600 10.5px var(--sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 3px solid var(--line);
}
.stagebar__s:hover { color: var(--ink); }
.stagebar__s.is-done { color: var(--ink-2); border-bottom-color: var(--st-c, var(--accent)); }
.stagebar__s.is-on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }

/* ------------------------------------------------------------ checklist -- */

.chk { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.chk__i {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 11px; border: 0; background: none;
  text-align: left; font: inherit; cursor: pointer;
}
.chk li + li .chk__i { border-top: 1px solid var(--line-2); }
.chk__i:hover { background: var(--surface-2); }
.chk__b {
  width: 17px; height: 17px; border-radius: 5px; flex: 0 0 auto;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  color: transparent; background: var(--surface);
}
.chk__i.is-done .chk__b { background: var(--ok); border-color: var(--ok); color: #fff; }
.chk__l { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); }
.chk__i.is-done .chk__l { color: var(--ink-mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.chk__d { font: 500 10.5px var(--mono); color: var(--ink-mute); white-space: nowrap; }

/* ------------------------------------------------------------ documents -- */

.docrow { display: flex; align-items: center; gap: 9px; min-width: 0; }
.docrow__ic { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface-2); color: var(--ink-mute); }
.docrow__ic--sign { background: var(--accent-soft); color: var(--accent-ink); }
.docrow__ic--late { background: var(--bad-soft); color: var(--bad); }
.docrow__ic--ok { background: var(--ok-soft); color: var(--ok); }
.docrow__t { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docrow__s { font-size: 11px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docrow__txt { min-width: 0; }

.missing { display: flex; flex-direction: column; }
.missing__i {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line-2);
  background: none; text-align: left; font: inherit; cursor: pointer;
}
.missing li:last-child .missing__i { border-bottom: 0; }
.missing__i:hover { background: var(--surface-2); }
.missing__t { flex: 1; min-width: 0; }
.missing__tt { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.missing__ts { display: block; font-size: 11px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.missing__n { font: 700 11px var(--mono); color: var(--bad); background: var(--bad-soft); border-radius: 999px; padding: 2px 8px; flex: 0 0 auto; }

/* -------------------------------------------------------------- chasers -- */

.msgbubble {
  padding: 10px 12px; border-radius: 3px 12px 12px 12px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12.5px; line-height: 1.5; white-space: pre-wrap;
}
.msgbubble--in { border-radius: 12px 3px 12px 12px; background: var(--surface-2); color: var(--ink-2); }
.msgwho { display: block; font: 700 9.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-bottom: 4px; }

.seq { display: flex; flex-direction: column; gap: 0; }
.seq__i { display: flex; gap: 11px; position: relative; padding-bottom: 14px; }
.seq__i:last-child { padding-bottom: 0; }
.seq__i:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 2px; width: 1.5px; background: var(--line); }
.seq__n {
  width: 25px; height: 25px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-2);
  font: 700 11px var(--mono); z-index: 1;
}
.seq__b { flex: 1; min-width: 0; padding-top: 3px; }
.seq__t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.seq__x { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.45; }

.pauserow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line-2); }
.pauserow:last-child { border-bottom: 0; }
.pauserow__t { flex: 1; min-width: 0; }
.pauserow__tt { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pauserow__ts { display: block; font-size: 11px; color: var(--ink-mute); }

/* ------------------------------------------------------------- ageing --- */

.ageing { display: flex; flex-direction: column; gap: 9px; }
.ageing__r { display: grid; grid-template-columns: 108px minmax(0, 1fr) 84px 58px; gap: 10px; align-items: center; }
.ageing__l { font-size: 12px; color: var(--ink-2); }
.ageing__v { font-size: 12.5px; font-weight: 600; text-align: right; }
.ageing__n { font-size: 11px; color: var(--ink-mute); text-align: right; }

/* ------------------------------------------------------------ proposals -- */

.prop {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 20px 22px;
}
.prop__head { display: flex; align-items: flex-start; gap: 14px; border-bottom: 1px solid var(--line-2); padding-bottom: 14px; margin-bottom: 14px; }
.prop__firm { font: 700 13px var(--display); letter-spacing: -0.01em; color: var(--ink); }
.prop__firms { font-size: 11px; color: var(--ink-mute); margin-top: 3px; line-height: 1.5; }
.prop__ref { margin-left: auto; text-align: right; }
.prop__refn { font: 600 12px var(--mono); color: var(--ink); }
.prop__refd { font-size: 11px; color: var(--ink-mute); margin-top: 3px; }
.prop__t { font: 700 17px var(--display); letter-spacing: -0.015em; color: var(--ink); }
.prop__scope { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin-top: 8px; }

/* --------------------------------------------------------- staff cards -- */

.people { display: flex; flex-direction: column; gap: 10px; }
.person { display: flex; align-items: center; gap: 11px; }
.person__t { flex: 1; min-width: 0; }
.person__n { font-size: 13px; font-weight: 600; color: var(--ink); }
.person__r { font-size: 11.5px; color: var(--ink-mute); }
.person__a { display: flex; gap: 5px; flex: 0 0 auto; }

.staffrows { display: flex; flex-direction: column; }
.staffrows__i { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-bottom: 1px solid var(--line-2); }
.staffrows__i:last-child { border-bottom: 0; }
.staffrows__n { font: 500 11px var(--mono); color: var(--ink-mute); white-space: nowrap; }
.staffrows__v { font: 600 12px var(--mono); white-space: nowrap; min-width: 62px; text-align: right; }

/* ========================================================= client view == */

.portal { display: flex; flex-direction: column; gap: 18px; max-width: 1020px; }

.portal__band {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}
.portal__who { flex: 1; min-width: 0; }
.portal__h { font: 700 19px/1.2 var(--display); letter-spacing: -0.02em; color: var(--accent-ink); }
.portal__s { font-size: 12.5px; color: var(--accent-ink); opacity: 0.85; margin-top: 4px; }
/* One picker, two homes: the top bar on a desktop, the portal band on a phone
   where the top bar has room for the toggle and nothing else. */
.portal__pick { display: none; }

.portal__badge {
  font: 700 9.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); border: 1px solid var(--accent-soft-2);
  border-radius: 999px; padding: 4px 10px; background: var(--surface);
}

.asks { display: flex; flex-direction: column; }
.ask {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-2);
}
.ask:last-child { border-bottom: 0; }
.ask__ic {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.ask__ic--sign { background: var(--warn-soft); color: var(--warn); }
.ask__ic--pay { background: var(--ok-soft); color: var(--ok); }
.ask__t { flex: 1; min-width: 0; }
.ask__tt { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ask__ts { display: block; font-size: 12px; color: var(--ink-mute); margin-top: 3px; }
.ask__a { flex: 0 0 auto; }

.pmatter { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; background: var(--surface); }
.pmatter + .pmatter { margin-top: 10px; }
.pmatter__h { display: flex; align-items: flex-start; gap: 10px; }
.pmatter__t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.pmatter__s { font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; }
.pstep { display: flex; gap: 4px; margin-top: 12px; }
.pstep__s { flex: 1; min-width: 0; text-align: center; }
.pstep__b { height: 5px; border-radius: 3px; background: var(--line); }
.pstep__s.is-done .pstep__b { background: var(--accent); }
.pstep__s.is-on .pstep__b { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-2); }
.pstep__l { display: block; font: 600 9.5px var(--sans); color: var(--ink-mute); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstep__s.is-on .pstep__l { color: var(--accent-ink); }

.thread { display: flex; flex-direction: column; gap: 12px; }
.thread__i { display: flex; gap: 10px; }
.thread__i--me { flex-direction: row-reverse; }
.thread__b { max-width: 78%; min-width: 0; }
.thread__i--me .thread__b { text-align: right; }
.thread__m { font: 500 10.5px var(--mono); color: var(--ink-mute); margin-top: 4px; }
.reply { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.reply__row { display: flex; justify-content: flex-end; }

/* the simulated file picker and signing pad */
.drop {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 22px 18px; text-align: center; background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.drop__ic { color: var(--ink-mute); }
.drop__t { font-size: 13px; font-weight: 600; color: var(--ink); }
.drop__s { font-size: 12px; color: var(--ink-mute); max-width: 40ch; line-height: 1.5; }
.filechip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--surface); text-align: left;
}
.filechip__ic { color: var(--accent-ink); flex: 0 0 auto; }
.filechip__t { flex: 1; min-width: 0; font: 600 12.5px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.filechip__s { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }

.doc {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: 18px 20px;
  max-height: 260px; overflow: auto;
}
.doc__h { font: 700 13px var(--display); color: var(--ink); margin-bottom: 4px; }
.doc__m { font: 500 10.5px var(--mono); color: var(--ink-mute); margin-bottom: 12px; }
.doc p { font-size: 12.5px; line-height: 1.65; color: var(--ink-2); margin-bottom: 10px; }
.doc p:last-child { margin-bottom: 0; }

.signpad {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.signpad__l { font: 700 9.5px var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mute); }
.signpad__v { font: 400 26px/1.3 var(--display); color: var(--ink); min-height: 34px; letter-spacing: 0.01em; }
.signpad__v.is-empty { color: var(--ink-mute); font-size: 15px; }
.signpad__r { font-size: 11px; color: var(--ink-mute); border-top: 1px solid var(--line); padding-top: 8px; }

.paycard {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
}
.paycard__ic { color: var(--ink-2); flex: 0 0 auto; }
.paycard__t { flex: 1; min-width: 0; }
.paycard__tt { font-size: 13px; font-weight: 600; color: var(--ink); }
.paycard__ts { font: 500 11.5px var(--mono); color: var(--ink-mute); margin-top: 2px; }
.paytot { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.paytot__l { font-size: 12.5px; color: var(--ink-2); }
.paytot__v { margin-left: auto; font: 700 22px var(--mono); color: var(--ink); }
.paynote { font-size: 11.5px; color: var(--ink-mute); margin-top: 10px; line-height: 1.5; }

.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.steps__s { display: flex; align-items: center; gap: 6px; font: 600 11px var(--sans); color: var(--ink-mute); }
.steps__n { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font: 700 10px var(--mono); }
.steps__s.is-on { color: var(--accent-ink); }
.steps__s.is-on .steps__n { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.steps__s.is-done .steps__n { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps__line { flex: 1; height: 1px; background: var(--line); min-width: 12px; }

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

@media (max-width: 900px) {
  /* The top actions scroll horizontally on a phone and the engine anchors them
     to the right, so the face toggle is ordered last: it is the one control
     that must never be the one hidden off the edge. */
  /* Reserve the room the toggle plus the page action actually need, so a long
     view title shrinks instead of pushing the toggle off the edge. */
  .top__titles { max-width: 44vw; }
  .top__a { min-width: 156px; }
  .top__a .faceseg { order: 8; }
  .top__a .faceseg__b { padding: 0 11px; font-size: 11.5px; }
  .top__a .faceseg .ic { display: none; }

  .top__a .js-toppick { display: none; }
  .top__a .btn, .top__a .btnbar { order: 9; }
  .portal__pick { display: block; flex: 1 1 100%; max-width: none; }

  .ageing__r { grid-template-columns: 92px minmax(0, 1fr) 72px; }
  .ageing__n { display: none; }
  .boardbar__hint { display: none; }
  .prop { padding: 15px 16px; }
  .prop__head { flex-wrap: wrap; }
  .prop__ref { margin-left: 0; text-align: left; }
  .portal__band { padding: 14px 16px; }
  .portal__h { font-size: 17px; }
  .ask { flex-wrap: wrap; gap: 10px; }
  .ask__a { width: 100%; }
  .ask__a .btn { width: 100%; }
  .pstep__l { font-size: 8.5px; }
  .thread__b { max-width: 88%; }
  .stagebar { flex-wrap: wrap; }
  .stagebar__s { flex: 1 1 30%; }
  .steps__s span:not(.steps__n) { display: none; }
}