/* ============================================================================
   ULTRABASIC LABS — the portal design system
   Loaded after portal.css on the three portal pages. Everything here is the
   new system; portal.css keeps the older component styles the pages not yet
   rebuilt still lean on, and this file restyles the shared ones (buttons,
   fields, menus, windows, toasts) so an old page and a new one read as the
   same product while the rest are redone one by one.

   The structure is a file manager's: a rail of sections with their names
   under the icons, a panel of the section's views beside it, and a plain
   white page with a top bar (New, search, actions). The brand supplies the
   materials: the site's stone for the rail and the panel, cotton for what is
   selected, blush for soft controls, black for the one primary action and for
   anything that floats dark (the account menu, toasts, tips), periwinkle for
   counts and links, the pastels for tinted cards, and peach ink for you.
   ========================================================================= */

:root {
  --d-ink: #161616;
  --d-ink-2: #56534d;
  --d-ink-3: #8e8a82;
  --d-white: #ffffff;
  --d-stone: #f5f4f0;       /* rail and panel */
  --d-blush: #f0ede6;       /* soft buttons, chips */
  --d-cotton: #e6e2d9;      /* selected rows, pressed soft controls */
  --d-line: #e9e6df;        /* hairlines */
  --d-edge: #d9d4ca;        /* field borders */
  --d-hover: #faf9f6;       /* row hover */
  --d-accent: #161616;      /* ink: counts, links, focus. The brand's colour is the foil, which cannot be flat */
  --d-accent-soft: #f0ede6; /* the warm grey wash */
  --d-accent-ink: #161616;
  --d-you: #f2600c;         /* peach ink: the signed-in person */
  --d-ice: #d2f4ff;   --d-ice-ink: #1f5f88;
  --d-mint: #d8f4df;  --d-mint-ink: #1f7a4d;
  --d-peach: #ffe3d1; --d-peach-ink: #b8480a;
  --d-butter: #fdf0c0; --d-butter-ink: #8a6300;
  --d-dark: #161616;
  --d-dark-2: #2b2926;
  --d-r: 10px;              /* buttons, fields, rows */
  --d-r-card: 14px;
  --d-r-win: 18px;
  --d-pop: 0 0 0 1px rgba(22, 22, 22, .06), 0 16px 40px rgba(22, 22, 22, .14), 0 2px 6px rgba(22, 22, 22, .06);

  /* The older layer's names, pointed at the system, so pages not yet rebuilt
     pick up the same colours. */
  --app-ground: var(--d-stone);
  --app-line: var(--d-line);
  --app-hover: var(--d-hover);
  --ink-2: var(--d-ink-2);
  --ink-3: var(--d-ink-3);
  --accent: var(--d-accent);
  --accent-soft: var(--d-accent-soft);
  --accent-ink: var(--d-accent-ink);
}

/* ================================================================ shell === */
body.p-app { background: var(--d-white); }
.d-app {
  display: grid;
  grid-template-columns: 92px 272px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  background: var(--d-white);
  color: var(--d-ink);
}
.d-app.is-nosub { grid-template-columns: 92px minmax(0, 1fr); }
.d-app.is-nosub .d-sub { display: none; }

/* ---- rail ------------------------------------------------------------------ */
.d-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 18px;
  background: var(--d-stone);
  border-right: 1px solid var(--d-line);
  min-height: 0;
}
.d-logo { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 26px; border-radius: 12px; }
.d-logo img { width: 30px; height: 30px; }
.d-rail-items { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.d-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--d-ink-2);
  text-align: center;
}
.d-rail-icon {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--d-ink-2);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.d-rail-icon svg { width: 23px; height: 23px; }
.d-rail-item:hover .d-rail-icon, .d-rail-item.is-peek .d-rail-icon { background: var(--d-blush); color: var(--d-ink); }
.d-rail-item.is-active { color: var(--d-ink); font-weight: 650; }
.d-rail-item.is-active .d-rail-icon { background: var(--d-cotton); color: var(--d-ink); }
.d-rail-badge {
  position: absolute;
  top: -3px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--d-you);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 0 0 2.5px var(--d-stone);
  font-variant-numeric: tabular-nums;
}
.d-rail-badge[hidden] { display: none; }
.d-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.d-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--d-you);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: transform .15s var(--ease);
}
.d-avatar:hover { transform: scale(1.05); }

/* ---- the section panel ------------------------------------------------------ */
.d-sub {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 22px 14px 14px;
  background: var(--d-stone);
  border-right: 1px solid var(--d-line);
}
.d-sub-head { padding: 4px 12px 18px; }
.d-sub-head h2 {
  font-family: var(--font-title);
  font-weight: var(--title-weight);
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--d-ink);
}
.d-sub-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.d-sub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--d-r);
  font-size: 15px;
  font-weight: 500;
  color: var(--d-ink-2);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.d-sub-item svg { width: 20px; height: 20px; flex: none; color: var(--d-ink-3); }
.d-sub-item:hover { background: rgba(22, 22, 22, .045); color: var(--d-ink); }
.d-sub-item.is-active { background: var(--d-cotton); color: var(--d-ink); font-weight: 600; }
.d-sub-item.is-active svg { color: var(--d-ink); }
.d-sub-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-count {
  flex: none;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--d-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.d-count[hidden] { display: none; }

.d-group { margin-top: 18px; }
.d-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--d-ink);
  text-align: left;
}
.d-group-head:hover { background: rgba(22, 22, 22, .04); }
.d-group-chev { display: inline-flex; color: var(--d-ink-2); }
.d-group-chev svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .18s var(--ease); }
.d-group.is-open .d-group-chev svg { transform: none; }
.d-group-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--d-accent); }
.d-group-dot[hidden], .d-group.is-open .d-group-dot { display: none; }
.d-group-items { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.d-group-items[hidden] { display: none; }

.d-sub-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.d-sub-foot:empty { display: none; }

/* Cards at the foot of the panel: a tinted one for a status, a dark one for
   something to finish. */
.d-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--d-r-card);
  text-align: left;
  width: 100%;
}
.d-card-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.d-card-icon svg { width: 18px; height: 18px; }
.d-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d-card-text b { font-size: 14.5px; font-weight: 650; }
.d-card-text span { font-size: 13px; }
.d-card--ice { background: var(--d-ice); color: var(--d-ice-ink); }
.d-card--ice .d-card-icon { background: rgba(255, 255, 255, .7); }
.d-card--ice .d-card-text span { color: #3b7496; }
.d-card--dark { background: var(--d-dark); color: #fff; }
.d-card--dark .d-card-icon { background: rgba(255, 255, 255, .1); }
.d-card--dark .d-card-text span { color: rgba(255, 255, 255, .65); }
.d-card--dark .d-pct { padding: 1px 8px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 12.5px; font-weight: 650; margin-left: 6px; }
a.d-card:hover, button.d-card:hover { filter: brightness(.98); }

/* ---- main ------------------------------------------------------------------- */
.d-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; background: var(--d-white); }
/* The top bar: where you are on the left, the tools on the right. */
.d-top {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  height: 72px;
  padding: 0 40px;
  background: var(--d-white);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow .2s var(--ease);
}
.d-top.is-scrolled { box-shadow: 0 1px 0 var(--d-line), 0 6px 18px -12px rgba(22, 22, 22, .18); }

.d-where { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.d-where-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--d-stone); color: var(--d-ink); }
.d-where-mark svg { width: 19px; height: 19px; }
.d-where-trail { display: flex; align-items: center; gap: 2px; min-width: 0; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.d-where-trail li { display: flex; align-items: center; gap: 2px; min-width: 0; white-space: nowrap; }
.d-where-trail li:not(.is-now) { flex: none; }
.d-where-trail a, .d-where-trail li > span:not(.d-where-sep) { padding: 5px 7px; border-radius: 8px; color: var(--d-ink-3); font-weight: 500; transition: background .12s var(--ease), color .12s var(--ease); }
.d-where-trail a:hover { background: var(--d-stone); color: var(--d-ink); }
.d-where-trail li:first-child > a, .d-where-trail li:first-child > span { margin-left: -7px; }
.d-where-trail .is-now > span:not(.d-where-sep) { color: var(--d-ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.d-where-trail .is-now { min-width: 0; }
.d-where-sep { display: inline-grid; place-items: center; color: #c3bdb1; }
.d-where-sep svg { width: 14px; height: 14px; }

.d-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.d-menuwrap { position: relative; display: inline-flex; }
.d-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 260px;
  height: 40px;
  padding: 0 8px 0 13px;
  border-radius: var(--d-r);
  background: var(--d-stone);
  color: var(--d-ink-3);
  font-size: 14.5px;
  text-align: left;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.d-search:hover { background: var(--d-blush); }
.d-search:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--d-ink); }
.d-search svg { width: 17px; height: 17px; flex: none; color: var(--d-ink-2); }
.d-search-text { flex: 1; min-width: 0; }
.d-search kbd { font: inherit; font-size: 12px; font-weight: 600; color: var(--d-ink-2); background: var(--d-white); border-radius: 6px; padding: 3px 7px; box-shadow: 0 1px 0 var(--d-edge); }
.d-search kbd:empty { display: none; }
.d-search[hidden] { display: none; }

.d-bell { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--d-r); color: var(--d-ink-2); transition: background .12s var(--ease), color .12s var(--ease); }
.d-bell:hover, .d-bell[aria-expanded="true"] { background: var(--d-stone); color: var(--d-ink); }
.d-bell[hidden] { display: none; }
.d-bell svg { width: 20px; height: 20px; }
.d-bell-n { position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; background: var(--d-you); color: #fff; font-size: 10.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--d-white); }
.d-bell-n[hidden] { display: none; }

.d-org { display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 230px; padding: 0 12px 0 5px; border-radius: var(--d-r); background: var(--d-stone); }
.d-org-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--d-ink); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.d-org-name { font-size: 14px; font-weight: 600; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.d-new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: var(--d-r);
  background: var(--d-ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 650;
  transition: background .15s var(--ease);
}
.d-new:hover, .d-new[aria-expanded="true"] { background: var(--d-dark-2); }
.d-new[hidden] { display: none; }
.d-new svg { width: 17px; height: 17px; }

.d-top-slot { display: flex; align-items: center; }
.d-top-slot:empty { display: none; }
.d-top-actions { display: flex; align-items: center; gap: 10px; }
.d-navtoggle { display: none; width: 22px; height: 16px; position: relative; flex: none; }
.d-navtoggle span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--d-ink); }
.d-navtoggle span:nth-child(1) { top: 0; }
.d-navtoggle span:nth-child(2) { top: 7px; }
.d-navtoggle span:nth-child(3) { top: 14px; }
.d-scrim { display: none; }

.d-view.p-view { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 40px 72px; scrollbar-width: thin; }

/* ======================================================= page furniture === */
.d-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 22px; }
.d-title {
  font-family: var(--font-title);
  font-weight: var(--title-weight);
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--d-ink);
}
.d-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-lede { margin: -12px 0 26px; font-size: 15px; color: var(--d-ink-2); max-width: 70ch; }
.d-lede b { color: var(--d-ink); font-weight: 650; }

.d-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 17px; font-weight: 650; color: var(--d-ink-2); }
.d-section-title svg { width: 20px; height: 20px; color: var(--d-ink-3); }

/* ---- buttons ---------------------------------------------------------------- */
.d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--d-r);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease);
}
.d-btn svg { width: 19px; height: 19px; flex: none; }
.d-btn--primary { background: var(--d-ink); color: #fff; }
.d-btn--primary:hover { background: var(--d-dark-2); }
.d-btn--soft { background: var(--d-blush); color: var(--d-ink); }
.d-btn--soft:hover { background: var(--d-cotton); }
.d-btn--line { background: var(--d-white); color: var(--d-ink); box-shadow: inset 0 0 0 1px var(--d-edge); }
.d-btn--line:hover { background: var(--d-hover); }
.d-btn--sm { height: 36px; padding: 0 13px; font-size: 14px; border-radius: 9px; }
.d-btn--sm svg { width: 17px; height: 17px; }
.d-btn[aria-busy="true"] { opacity: .65; pointer-events: none; }
.d-iconbtn {
  width: 40px;
  height: 40px;
  border-radius: var(--d-r);
  display: inline-grid;
  place-items: center;
  color: var(--d-ink-2);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.d-iconbtn:hover { background: var(--d-blush); color: var(--d-ink); }
.d-iconbtn svg { width: 20px; height: 20px; }

/* The older buttons, reshaped into the system: rounded rectangles, black
   primary, soft blush secondary, no outlines. */
.d-app .btn, .p-modal .btn, .p-drawer .btn {
  border-radius: var(--d-r);
  border: 0;
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
.d-app .btn--sm, .p-modal .btn--sm, .p-drawer .btn--sm { height: 38px; padding: 0 15px; font-size: 14px; }
.d-app .btn--dark, .p-modal .btn--dark, .p-drawer .btn--dark { background: var(--d-ink); color: #fff; }
.d-app .btn--dark:hover, .p-modal .btn--dark:hover, .p-drawer .btn--dark:hover { background: var(--d-dark-2); color: #fff; }
.d-app .btn--ghost, .p-modal .btn--ghost, .p-drawer .btn--ghost { background: var(--d-blush); color: var(--d-ink); }
.d-app .btn--ghost:hover, .p-modal .btn--ghost:hover, .p-drawer .btn--ghost:hover { background: var(--d-cotton); color: var(--d-ink); }
.d-app .btn--tint, .p-modal .btn--tint, .p-drawer .btn--tint { background: var(--d-accent-soft); color: var(--d-accent-ink); }
.d-app .btn--quiet, .p-modal .btn--quiet, .p-drawer .btn--quiet { background: transparent; color: var(--d-ink-2); }
.d-app .btn--quiet:hover, .p-modal .btn--quiet:hover, .p-drawer .btn--quiet:hover { background: var(--d-blush); color: var(--d-ink); }
.d-app .btn--danger, .p-modal .btn--danger { background: #b4262b; color: #fff; }

/* ---- chips ------------------------------------------------------------------ */
.d-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 17px;
  border-radius: 999px;
  background: var(--d-blush);
  color: var(--d-ink);
  font-size: 15px;
  font-weight: 550;
  white-space: nowrap;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.d-chip svg { width: 18px; height: 18px; flex: none; }
.d-chip:hover { background: var(--d-cotton); }
.d-chip.is-on { background: var(--d-ink); color: #fff; }
.d-chip .d-chip-x { margin-left: 2px; opacity: .7; }
.d-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  flex: 0 1 300px;
  min-width: 190px;
  margin-left: auto;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--d-edge);
  color: var(--d-ink-3);
}
.d-filter:focus-within { box-shadow: inset 0 0 0 1.5px var(--d-ink); }
.d-filter svg { width: 17px; height: 17px; flex: none; }
.d-filter input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--d-ink); outline: none; }
.d-filter input::placeholder { color: var(--d-ink-3); }

/* ---- the list --------------------------------------------------------------- */
/* A header row of column names (the sortable ones with their arrow), one
   hairline under it, and rows that open what they are. Hovering a row brings
   up its quick actions at the right, the way a file shows Share. */
.d-list { margin-top: 22px; }
.d-lrow {
  display: grid;
  grid-template-columns: var(--d-cols);
  align-items: center;
  gap: 16px;
}
.d-lhead {
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--d-line);
  font-size: 15px;
  font-weight: 650;
  color: var(--d-ink);
}
.d-sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; }
.d-sort svg { width: 16px; height: 16px; opacity: 0; transition: opacity .12s var(--ease), transform .15s var(--ease); }
.d-sort:hover svg { opacity: .45; }
.d-sort.is-on svg { opacity: 1; }
.d-sort.is-desc svg { transform: rotate(180deg); }
.d-lhead .is-num { justify-self: end; }
.d-item {
  position: relative;
  min-height: 72px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--d-line);
  cursor: pointer;
  transition: background .12s var(--ease);
}
.d-item:hover { background: var(--d-hover); }
.d-item:focus-visible { outline: 2px solid var(--d-accent); outline-offset: -2px; border-radius: 8px; }
.d-cell { min-width: 0; font-size: 14.5px; color: var(--d-ink-2); }
.d-cell.is-num { justify-self: end; text-align: right; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.d-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.d-who-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-who-text b { font-size: 15.5px; font-weight: 600; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-who-text span { font-size: 14px; color: var(--d-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--d-ink-2); line-height: 1.45; }
.d-meta { display: block; margin-top: 3px; font-size: 13px; color: var(--d-ink-3); }
.d-late { color: #b4262b; }

/* A square mark, like a file's icon: initials on a tint chosen from the name. */
.d-mark {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  background: var(--mk, var(--d-blush));
  color: var(--mk-ink, var(--d-ink));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
.d-mark--lg { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }

/* The quick actions a hovered row offers. */
.d-quick {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: var(--d-white);
  box-shadow: var(--d-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s var(--ease);
}
.d-item:hover .d-quick, .d-item:focus-within .d-quick, .d-quick:has([aria-expanded="true"]) { opacity: 1; pointer-events: auto; }
.d-item:has(.d-quick [aria-expanded="true"]) { background: var(--d-hover); z-index: 2; }
.d-quick .d-btn { height: 34px; padding: 0 13px; font-size: 14px; border-radius: 8px; }
.d-quick .d-iconbtn { width: 34px; height: 34px; border-radius: 8px; }

/* Score as a number over a short bar: warm leads read at a glance. */
.d-score { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.d-score b { font-size: 15px; font-weight: 650; color: var(--d-ink); }
.d-score i { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--d-blush); overflow: hidden; }
.d-score i::after { content: ""; display: block; height: 100%; width: var(--v); border-radius: 2px; background: var(--d-ink); }

/* ---- suggested cards -------------------------------------------------------- */
.d-suggest { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 34px; }
.d-sug {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: var(--d-r-card);
  background: var(--d-hover);
  box-shadow: inset 0 0 0 1px var(--d-line);
  text-align: left;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.d-sug:hover { background: var(--d-stone); box-shadow: inset 0 0 0 1px var(--d-cotton); }
.d-sug-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.d-sug-text b { font-size: 16px; font-weight: 600; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-sug-text span { font-size: 14px; color: var(--d-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.d-sug-text small { font-size: 13px; color: var(--d-ink-3); margin-top: 4px; }

/* ---- empty: a dashed place for the thing to arrive ------------------------ */
.d-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 380px;
  margin-top: 22px;
  padding: 48px 24px;
  border: 1.5px dashed #cfc9bd;
  border-radius: var(--d-r-card);
  text-align: center;
}
.d-drop-art { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 24px; background: var(--d-stone); color: var(--d-ink); margin-bottom: 6px; }
.d-drop-art svg { width: 38px; height: 38px; }
.d-drop h3 { font-size: 18px; font-weight: 650; color: var(--d-ink); }
.d-drop p { max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: var(--d-ink-2); }
.d-drop p a, .d-drop p button { font-weight: 650; color: var(--d-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* ---- status: outlined pill with a dot ---------------------------------------- */
.d-app .p-badge, .p-modal .p-badge, .p-drawer .p-badge { font-size: 13px; padding: 4px 11px 4px 10px; box-shadow: inset 0 0 0 1px var(--d-line); color: var(--d-ink-2); }

/* ====================================================== floating things === */
/* Menus: white, grouped, an icon beside each item. The account menu and
   anything else that floats over the product is the dark version. */
.p-menu {
  min-width: 240px;
  padding: 8px;
  border: 0;
  border-radius: var(--d-r-card);
  background: var(--d-white);
  box-shadow: var(--d-pop);
}
.p-menu button, .p-menu a {
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--d-ink);
}
.p-menu svg { width: 20px; height: 20px; opacity: 1; color: var(--d-ink-2); }
.p-menu button:hover, .p-menu a:hover { background: var(--d-stone); color: var(--d-ink); }
.p-menu hr { margin: 6px -8px; border-top-color: var(--d-line); }
.p-menu-head { padding: 10px 12px 12px; }
.p-menu-head strong { font-size: 15.5px; font-weight: 650; }
.p-menu-head span { font-size: 13px; margin-top: 2px; }
.p-menu-hint { margin-left: auto; font-style: normal; font-size: 13px; color: var(--d-ink-3); }
.p-menu .is-danger { color: #b4262b; }
.p-menu .is-danger svg { color: #b4262b; }
.p-menu .is-danger:hover { background: #fdf1ef; }

.p-menu--dark { background: var(--d-dark); box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }
.p-menu--dark button, .p-menu--dark a { color: #fff; }
.p-menu--dark svg { color: rgba(255, 255, 255, .75); }
.p-menu--dark button:hover, .p-menu--dark a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.p-menu--dark hr { border-top-color: rgba(255, 255, 255, .12); }
.p-menu--dark .p-menu-head strong { color: #fff; }
.p-menu--dark .p-menu-head span { color: rgba(255, 255, 255, .6); }

/* Windows: a big title, bold labels, fields with room, Cancel soft and the
   action black at the bottom right. */
.p-scrimlayer { background: rgba(22, 22, 22, .42); }
.p-modal, .p-drawer { border-radius: var(--d-r-win); box-shadow: 0 30px 80px rgba(0, 0, 0, .22); }
.p-modal-head, .p-drawer-head { padding: 28px 32px 10px; border-bottom: 0; }
.p-modal-head h2, .p-drawer-head h2 {
  font-family: var(--font-title);
  font-weight: var(--title-weight);
  font-size: 27px;
  letter-spacing: -.022em;
  color: var(--d-ink);
}
.p-x { width: 40px; height: 40px; color: var(--d-ink); }
.p-x svg { width: 20px; height: 20px; }
.p-modal-body, .p-drawer-body { padding: 14px 32px 20px; }
.p-modal-foot, .p-drawer-foot { padding: 16px 32px 28px; border-top: 0; background: var(--d-white); gap: 10px; }
.p-drawer-foot { border-top: 1px solid var(--d-line); padding-top: 18px; padding-bottom: 22px; }
.p-field { gap: 8px; }
.p-field-label { font-size: 15px; font-weight: 650; color: var(--d-ink); text-transform: none; letter-spacing: 0; }
.p-input, .p-select, .p-textarea {
  font-size: 15.5px;
  padding: 12px 14px;
  border: 1px solid var(--d-edge);
  border-radius: var(--d-r);
  color: var(--d-ink);
}
.p-input:focus, .p-select:focus, .p-textarea:focus { border-color: var(--d-ink); box-shadow: 0 0 0 3px rgba(22, 22, 22, .07); }
.p-field-hint { font-size: 13.5px; color: var(--d-ink-3); }

/* Toasts: dark, wide, with the message and a way to close it. */
.p-toasts { left: 50%; right: auto; bottom: 28px; transform: translateX(-50%); max-width: min(620px, calc(100vw - 32px)); width: max-content; }
.p-toast { border-radius: 12px; background: var(--d-dark); padding: 16px 18px; font-size: 15px; align-items: center; min-width: 360px; }
.p-toast::before { margin-top: 0; width: 8px; height: 8px; }
.p-toast-close { opacity: .8; }

/* ============================================================== phones === */
@media (max-width: 1100px) {
  .d-app { grid-template-columns: 92px 236px minmax(0, 1fr); }
  .d-top { padding: 0 24px; }
  .d-view.p-view { padding: 6px 24px 64px; }
  .d-search { width: 200px; }
}
@media (max-width: 860px) {
  .d-app, .d-app.is-nosub { grid-template-columns: minmax(0, 1fr); }
  .d-rail, .d-sub {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 90;
    transform: translateX(-120%);
    transition: transform .28s var(--ease);
  }
  .d-rail { left: 0; width: 88px; }
  .d-sub { left: 88px; width: min(280px, calc(100vw - 88px)); transform: translateX(calc(-100% - 100px)); }
  .d-app.is-nosub .d-sub { display: none; }
  .d-app.is-nav-open .d-rail, .d-app.is-nav-open .d-sub { transform: none; }
  .d-app.is-nav-open .d-sub { box-shadow: 20px 0 40px rgba(0, 0, 0, .12); }
  .d-scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(22, 22, 22, .35); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
  .d-app.is-nav-open .d-scrim { opacity: 1; pointer-events: auto; }
  .d-navtoggle { display: block; }
  .d-top { height: 60px; padding: 0 12px 0 16px; gap: 10px; }
  /* On a phone the bar keeps the page's name and the tools as icons. */
  .d-where-mark { display: none; }
  .d-where-trail li:not(.is-now) { display: none; }
  .d-where-trail .is-now > span:not(.d-where-sep) { margin-left: -7px; font-size: 16px; }
  .d-tools { gap: 4px; }
  .d-search { width: 40px; padding: 0; justify-content: center; background: none; }
  .d-search-text, .d-search kbd, .d-org-name { display: none; }
  .d-org { padding: 0 5px; background: none; }
  .d-new { width: 40px; padding: 0; justify-content: center; }
  .d-new span { display: none; }
  .d-top-slot { display: none; }
  .d-view.p-view { padding: 4px 16px 56px; }
  .d-title { font-size: 28px; }
  .p-toast { min-width: 0; }
  /* A phone lists who and where it stands; the rest is one tap away. */
  .d-list .d-lrow { grid-template-columns: minmax(0, 1fr) auto !important; gap: 12px; }
  .d-list .d-lrow > :nth-child(2), .d-list .d-lrow > :nth-child(3), .d-list .d-lrow > :nth-child(4) { display: none; }
  .d-item { padding: 12px 4px; }
  .d-quick { display: none; }
  .d-head-actions { width: 100%; margin-left: 0; }
  .d-head-actions .d-btn { flex: 1; }
  .d-filter { width: 100%; margin-left: 0; }
}
/* Touch has no hover: the quick actions never appear, the row opens instead. */
@media (hover: none) { .d-quick { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .d-rail, .d-sub, .d-scrim { transition: none; }
}

/* ======================================================== more parts === */
.d-foot { margin-top: 14px; font-size: 13.5px; color: var(--d-ink-3); }

/* Money set large with its small print, like a bank's balance line. */
.d-figs { display: flex; flex-wrap: wrap; gap: 14px 48px; margin: 0 0 30px; }
.d-figs dt { font-size: 14px; font-weight: 550; color: var(--d-ink-3); }
.d-figs dd { margin-top: 4px; font-family: var(--font-title); font-weight: var(--title-weight); font-size: 30px; letter-spacing: -.025em; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.d-figs small { display: block; margin-top: 2px; font-size: 13px; color: var(--d-ink-3); }
.d-figs .is-danger dd, .d-figs .is-late dd { color: #b4262b; }
.d-figs .is-due dd { color: var(--d-accent-ink); }

/* ============================================================== today === */
/* Today has no section panel of its own: its queue takes the panel's place
   and the panel's material (stone, a hairline to the page), and the item
   being worked sits on the white page beside it. */
.d-view.p-view:has(> .t-desk) { padding: 0; overflow: hidden; display: flex; }
.d-app .t-desk { flex: 1; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); background: var(--d-white); }
.d-app .t-queue { background: var(--d-stone); border-right: 1px solid var(--d-line); }
/* Beside the section panel the queue is white, so the page does not read as
   two grey columns of navigation. */
.d-app:not(.is-nosub) .t-queue { background: var(--d-white); }
.d-app:not(.is-nosub) .t-queue .t-item:hover { background: var(--d-hover); }
.d-app .t-hello { padding: 22px 22px 6px; }
.d-app .t-hello-title { font-size: 26px; letter-spacing: -.024em; }
.d-app .t-hello-sub { font-size: 14px; color: var(--d-ink-3); margin-top: 6px; }
.d-app .t-hello-sub b { color: var(--d-ink); }
.d-app .t-tabs { gap: 8px; padding: 16px 22px 12px; border-bottom: 0; flex-wrap: wrap; overflow: visible; }
.d-app .t-tab {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--d-blush);
  color: var(--d-ink);
  font-size: 14px;
  font-weight: 550;
}
.d-app .t-tab:hover { background: var(--d-cotton); color: var(--d-ink); }
.d-app .t-tab.is-on { background: var(--d-ink); color: #fff; }
.d-app .t-tab.is-on::after { display: none; }
.d-app .t-tab-n { background: transparent; color: inherit; opacity: .6; padding: 0; min-width: 0; font-weight: 600; }
.d-app .t-tab.is-on .t-tab-n { background: transparent; color: #fff; opacity: .7; }
.d-app .t-tab--end { margin-left: 0; background: transparent; color: var(--d-accent-ink); }
.d-app .t-groups { padding: 2px 12px 20px; }
.d-app .t-group-head { padding: 16px 10px 6px; font-size: 13px; font-weight: 650; color: var(--d-ink-2); background: none; }
.d-app .t-group-dot { box-shadow: none; }
.d-app .t-row { width: 100%; margin: 0; padding: 10px 10px; border-radius: 12px; gap: 12px; }
.d-app .t-row:hover { background: rgba(22, 22, 22, .045); }
.d-app .t-row.is-on { background: var(--d-cotton); }
.d-app .t-row-title { font-size: 15px; font-weight: 600; }
.d-app .t-row-sub { font-size: 13.5px; color: var(--d-ink-3); }
.d-app .t-row-meta b { font-size: 13.5px; }
.d-app .t-ava { width: 40px; height: 40px; border-radius: 11px; font-size: 13px; }

.d-app .t-pane { background: var(--d-white); }
.d-app .t-sheet-head { padding: 30px 44px 22px; border-bottom: 1px solid var(--d-line); }
.d-app .t-sheet-title { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 32px; letter-spacing: -.026em; max-width: 30ch; }
.d-app .t-sheet-facts { font-size: 15px; color: var(--d-ink-2); margin-top: 8px; }
.d-app .t-acts { gap: 8px; margin-top: 18px; }
.d-app .t-mark { height: 36px; padding: 0 14px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--d-line); font-size: 14px; color: var(--d-ink-2); }
.d-app .t-act {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  background: var(--d-blush);
  color: var(--d-ink);
  font-size: 14px;
  font-weight: 600;
}
.d-app .t-act:hover { background: var(--d-cotton); color: var(--d-ink); }
.d-app .t-act svg { width: 15px; height: 15px; }
.d-app .t-act--open { margin-left: auto; background: transparent; color: var(--d-ink); padding: 0 8px; }
.d-app .t-act--open:hover { background: var(--d-blush); }
.d-app .t-sheet-body { padding: 28px 44px 30px; }
.d-app .t-sheet-foot { padding: 0 32px 28px; }
.d-app .t-h { font-size: 14px; color: var(--d-ink-2); }
.d-app .t-letter-card { border-radius: 14px; box-shadow: none; background: var(--d-stone); padding: 20px 24px; }
.d-app .t-letter-card blockquote { font-size: 15.5px; }
.d-app .t-letter .t-ava { width: 40px; height: 40px; }
.d-app .t-story li { font-size: 14px; }
.d-app .t-facts > div { background: var(--d-stone); border-radius: 14px; }
.d-app .t-facts dd { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 26px; }
.d-app .t-compose { border-radius: 16px; box-shadow: 0 0 0 1px var(--d-edge), 0 12px 30px rgba(22, 22, 22, .07); }
.d-app .t-compose:focus-within { box-shadow: 0 0 0 1.5px var(--d-ink), 0 12px 30px rgba(22, 22, 22, .08); }
.d-app .t-compose-to { padding: 16px 22px 0; font-size: 14px; }
.d-app .t-compose-subject, .d-app .t-compose-body { padding: 0 22px; }
.d-app .t-compose-subject { font-size: 16px; }
.d-app .t-compose-body { font-size: 15.5px; }
.d-app .t-compose-foot { padding: 10px 12px 12px 22px; }
.d-app .t-actions { border-radius: 16px; box-shadow: 0 0 0 1px var(--d-line); background: var(--d-stone); padding: 14px 14px 14px 22px; }
.d-app .t-actions-note { font-size: 14.5px; }
.d-app .t-kbd kbd { background: var(--d-blush); }
.d-app .t-clear-mark { width: 88px; height: 88px; border-radius: 24px; background: var(--d-stone); color: var(--d-ink); }
.d-app .t-clear h2 { font-size: 32px; }
.d-app .t-clear p { font-size: 15.5px; color: var(--d-ink-2); }
.d-app .t-back { color: var(--d-ink-2); }
@media (max-width: 860px) {
  .d-app .t-desk { grid-template-columns: minmax(0, 1fr); }
  .d-app .t-queue { border-right: 0; }
  .d-app .t-sheet-head { padding: 20px 18px 16px; }
  .d-app .t-sheet-title { font-size: 26px; }
  .d-app .t-sheet-body { padding: 20px 18px; }
  .d-app .t-sheet-foot { padding: 0 10px 12px; }
}

/* ========================================================= record pages === */
/* The record parts from kit.js (clients and the pages that follow it),
   drawn in the system: chips for its views, a square mark, a big name, the
   details column on stone. */
.d-app .k-rhead { gap: 18px; margin: 12px 0 26px; }
.d-app .k-mark { width: 40px; height: 40px; border-radius: 11px; font-size: 13px; }
.d-app .k-mark--lg { width: 60px; height: 60px; border-radius: 16px; font-size: 20px; }
.d-app .k-rhead-name { font-size: 36px; letter-spacing: -.028em; }
.d-app .k-rhead-facts { font-size: 15px; color: var(--d-ink-2); margin-top: 8px; }
.d-app .k-dot { color: #cdc8be; }
.d-app .k-iconbtn { width: 44px; height: 44px; border-radius: var(--d-r); background: var(--d-blush); color: var(--d-ink); box-shadow: none; }
.d-app .k-iconbtn:hover { background: var(--d-cotton); }
.d-app .k-tabs { gap: 8px; flex-wrap: wrap; border-bottom: 0; }
.d-app .k-tab {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--d-blush);
  color: var(--d-ink);
  font-size: 15px;
  font-weight: 550;
}
.d-app .k-tab:hover { background: var(--d-cotton); color: var(--d-ink); }
.d-app .k-tab.is-on { background: var(--d-ink); color: #fff; }
.d-app .k-tab.is-on::after { display: none; }
.d-app .k-tab-n { background: transparent; color: inherit; opacity: .55; padding: 0; min-width: 0; font-size: 13.5px; }
.d-app .k-tab.is-on .k-tab-n { background: transparent; color: #fff; opacity: .7; }
.d-app .k-record { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
.d-app .k-record-main > .k-tabs { margin-bottom: 22px; }
.d-app .k-record-side { gap: 14px; }
.d-app .k-side { padding: 20px 20px 18px; border-radius: var(--d-r-card); background: var(--d-stone); }
.d-app .k-side-head h2 { font-size: 15px; font-weight: 650; }
.d-app .k-side-link { color: var(--d-ink); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }
.d-app .k-drow { grid-template-columns: 116px minmax(0, 1fr); }
.d-app .k-drow dt { font-size: 14px; color: var(--d-ink-3); }
.d-app .k-dval { font-size: 14.5px; }
.d-app .k-dval:hover { background: rgba(22, 22, 22, .05); }
.d-app .k-dempty { color: #b6b1a6; }
.d-app .k-dinput { background: var(--d-white); box-shadow: inset 0 0 0 1.5px var(--d-ink); }
.d-app .k-note { background: var(--d-white); box-shadow: inset 0 0 0 1px var(--d-line); font-size: 14.5px; }
.d-app .k-note:focus { box-shadow: inset 0 0 0 1.5px var(--d-ink); }
.d-app .k-person .k-mark { width: 34px; height: 34px; border-radius: 10px; }
.d-app .k-person-text b { font-size: 14.5px; }
.d-app .k-person .t-act { height: 30px; padding: 0 11px; font-size: 13px; background: var(--d-white); }
.d-app .k-rows { border-top: 1px solid var(--d-line); }
.d-app .k-rowlink { min-height: 68px; padding: 12px 14px; margin: 0; border-radius: 0; border-bottom: 1px solid var(--d-line); gap: 14px; }
.d-app .k-rowlink:hover { background: var(--d-hover); }
.d-app .k-rowlink-main b { font-size: 15.5px; }
.d-app .k-rowlink-main span { font-size: 14px; }
.d-app .k-rowlink-meta { font-size: 15px; }
.d-app .k-panel-actions { margin-top: 20px; }
.d-app .k-empty { margin-top: 4px; padding: 56px 24px; border: 1.5px dashed #cfc9bd; border-radius: var(--d-r-card); }
.d-app .k-empty-mark { width: 72px; height: 72px; border-radius: 20px; background: var(--d-stone); color: var(--d-ink); }
.d-app .k-empty-mark svg { width: 30px; height: 30px; }
.d-app .k-empty h3 { font-size: 18px; }
.d-app .k-empty p { font-size: 15px; color: var(--d-ink-2); }
.d-app .k-feed-day h3 { font-size: 13.5px; color: var(--d-ink-3); }
.d-app .k-feed-row { font-size: 15px; }
@media (max-width: 1100px) {
  .d-app .k-record { grid-template-columns: minmax(0, 1fr); }
}
.d-chip-n { font-size: 13.5px; font-weight: 600; opacity: .55; font-variant-numeric: tabular-nums; }
.d-chip.is-on .d-chip-n { opacity: .7; }

/* ========================================================= proposals ===== */
/* The builder: the editor on the left, the document as the client sees it on
   the right, on stone, like a sheet on a desk. */
.d-money { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.d-cell .p-badge + .d-meta { display: block; margin-top: 4px; }

.pr-head { align-items: flex-start; margin-bottom: 18px; }
.pr-head-text { flex: 1 1 420px; min-width: 0; }
.pr-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 12px; font-size: 14.5px; color: var(--d-ink-2); }
.pr-facts a { color: var(--d-accent-ink); }
.pr-facts a:hover { text-decoration: underline; }
.pr-sep { color: #c9c4b9; }
.pr-total { font-size: 16px; font-weight: 650; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.pr-saved { font-size: 13.5px; color: var(--d-ink-3); white-space: nowrap; }
.pr-live {
  margin: -4px 0 18px; padding: 12px 16px; border-radius: var(--d-r-card);
  background: var(--d-butter); color: var(--d-butter-ink); font-size: 14.5px;
}

.pr-live--late { background: #fde4e2; color: #8f1f24; }
.pr-live b { font-weight: 650; }
.pr-num--code .pr-in { width: 96px; text-align: left; }

/* invoices */
.iv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--d-ink-2); }
.iv-gap { margin-top: 36px; }
.iv-pay { padding-top: 14px; }
.rq-pays { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--d-r-card); background: var(--d-stone); }
.rq-pays span { font-size: 13.5px; color: var(--d-ink-3); }
.rq-pays b { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 26px; letter-spacing: -.02em; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.rq-pays small { font-size: 13px; color: var(--d-ink-3); }
.rq-due { max-width: 220px; }

.pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
.pr-edit { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pr-block { border: 1px solid var(--d-line); border-radius: var(--d-r-card); padding: 20px 22px 22px; background: var(--d-white); }
.pr-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pr-block-head .pr-block-title { margin: 0; }
.pr-block-head .d-btn { margin-left: auto; }
.pr-block-title { font-size: 17px; font-weight: 650; color: var(--d-ink); margin: 0 0 14px; }
.pr-fields { display: flex; flex-direction: column; gap: 14px; }
.pr-fields .p-field { margin: 0; }
.pr-row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.pr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pr-row2 [hidden] { display: none; }
.pr-hint { font-size: 13.5px; color: var(--d-ink-3); margin: 0; }

/* inline inputs: text that becomes a field on hover and focus */
.pr-in {
  width: 100%; font: inherit; color: var(--d-ink); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 6px 8px;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.pr-in:hover { background: var(--d-hover); }
.pr-in:focus { outline: none; background: var(--d-white); border-color: var(--d-ink); box-shadow: 0 0 0 3px rgba(22, 22, 22, .07); }
.pr-in::placeholder { color: #b5b0a6; }
.pr-in--title { font-weight: 600; font-size: 15px; }
.pr-in--sub { font-size: 13.5px; color: var(--d-ink-2); padding-top: 2px; padding-bottom: 2px; }
.pr-in--num { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pr-in--num::-webkit-inner-spin-button { -webkit-appearance: none; }
.pr-in--heading { font-weight: 650; font-size: 16px; }
.pr-in--body { resize: vertical; line-height: 1.55; font-size: 14.5px; color: var(--d-ink-2); }

.pr-line { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--d-line); }
.pr-line:first-child { border-top: 0; padding-top: 0; }
.pr-line-top { display: flex; align-items: center; gap: 8px; }
.pr-line-top .pr-in--title { flex: 1; min-width: 0; }
.pr-line.is-optional .pr-in--title { color: var(--d-ink-2); }
.pr-line.is-optional .pr-amount { color: var(--d-ink-3); }
.pr-amount { font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-line-calc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 4px 0 0 8px; }
.pr-num { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border-radius: 8px; background: var(--d-stone); font-size: 13px; color: var(--d-ink-3); }
.pr-num .pr-in { width: 64px; padding: 5px 8px; font-size: 14.5px; }
.pr-num--rate .pr-in { width: 112px; }
.pr-num .pr-in:hover { background: var(--d-white); }
.pr-x { color: var(--d-ink-3); }
.pr-opt { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 13.5px; color: var(--d-ink-3); cursor: pointer; }
.pr-opt input { accent-color: var(--d-ink); width: 15px; height: 15px; }
.pr-line .d-iconbtn, .pr-section-head .d-iconbtn { width: 34px; height: 34px; border-radius: 8px; opacity: .55; flex: none; }
.pr-line:hover .d-iconbtn, .pr-section:hover .d-iconbtn, .pr-line .d-iconbtn[aria-expanded="true"], .pr-section .d-iconbtn[aria-expanded="true"] { opacity: 1; }

.pr-totals { margin: 14px 0 0 auto; width: min(100%, 300px); display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.pr-totals div { display: flex; justify-content: space-between; color: var(--d-ink-2); }
.pr-totals dd { font-variant-numeric: tabular-nums; }
.pr-totals .is-grand { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--d-line); color: var(--d-ink); font-weight: 650; font-size: 16px; }

.pr-section { border-top: 1px solid var(--d-line); padding: 12px 0 4px; }
.pr-section:first-child { border-top: 0; padding-top: 0; }
.pr-section-head { display: flex; align-items: center; gap: 6px; }

.pr-preview { position: sticky; top: 0; background: var(--d-stone); border-radius: var(--d-r-win); padding: 16px 18px 22px; min-width: 0; }
.pr-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 12px; font-size: 14px; font-weight: 600; color: var(--d-ink-2); }
.pr-paper { max-height: calc(100vh - 200px); overflow-y: auto; border-radius: var(--d-r-card); scrollbar-width: thin; }
.pr-paper .p-doc { max-width: none; box-shadow: 0 1px 2px rgba(22, 22, 22, .06); padding: 34px 34px 30px; font-size: 14px; }

.pr-locked { max-width: 860px; display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.pr-locked .pr-paper { max-height: none; background: var(--d-stone); padding: 18px; border-radius: var(--d-r-win); }
.pr-activity { display: flex; flex-direction: column; max-width: 760px; }
.pr-act { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 6px; border-bottom: 1px solid var(--d-line); color: var(--d-ink); }
a.pr-act:hover { background: var(--d-hover); }
.pr-act-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--d-cotton); box-shadow: 0 0 0 3px var(--d-white), 0 0 0 4px var(--d-line); transform: translateY(-1px); }
.pr-act-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-act-text b { font-weight: 600; font-size: 15px; }
.pr-act-text span { font-size: 13.5px; color: var(--d-ink-3); }
.pr-act-when { font-size: 13.5px; color: var(--d-ink-3); white-space: nowrap; }

@media (max-width: 1280px) {
  .pr-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-preview { position: static; }
  .pr-paper { max-height: none; }
}
@media (max-width: 860px) {
  .pr-row3, .pr-row2 { grid-template-columns: 1fr; }
  .pr-block { padding: 16px 14px 18px; }
  .pr-opt { margin-left: 0; width: 100%; }
  .pr-paper .p-doc { padding: 22px 18px; }
  .pr-saved { display: none; }
  .pr-act { grid-template-columns: 18px minmax(0, 1fr); }
  .pr-act-when { grid-column: 2; }
}

/* ================================================= the older parts ======= */
/* Pages built before the system still use the p-* parts (page heading, cards,
   stats, tables, filter chips, tabs, empty states, banners). Rather than keep
   two looks alive while each is rebuilt, the parts themselves are drawn in the
   system here: the same title, the same chips, the same list rows, the same
   dashed empty state. A page then only needs rebuilding where its layout, not
   its paint, is the problem. */
.d-app .p-head { margin: 14px 0 26px; }
.d-app .p-head-row { align-items: center; gap: 12px; }
.d-app .p-title { font-size: 36px; line-height: 1.08; letter-spacing: -.028em; color: var(--d-ink); }
.d-app .p-sub { margin-top: 10px; font-size: 15px; color: var(--d-ink-2); max-width: 70ch; }
.d-app .p-sub b { color: var(--d-ink); font-weight: 650; }
.d-app .p-crumbs { display: none; } /* the shell draws the crumbs */
.d-app .p-label { font-size: 14px; font-weight: 600; color: var(--d-ink-2); }
.d-app .p-section { margin-top: 40px; }
.d-app .p-section-head h2 { font-family: var(--font); font-size: 17px; font-weight: 650; letter-spacing: -.005em; color: var(--d-ink); }
.d-app .p-quiet { color: var(--d-ink-3); }

/* cards: a hairline on white, or stone when it is a quieter aside */
.d-app .p-card { border-radius: var(--d-r-card); box-shadow: none; border: 1px solid var(--d-line); background: var(--d-white); padding: 20px 22px; }
.d-app .p-card--cream { background: var(--d-stone); border-color: transparent; }
.d-app .p-card--flush { padding: 0; }
.d-app .p-card--link:hover { box-shadow: none; border-color: var(--d-edge); transform: none; background: var(--d-hover); }
.d-app .p-card-head { border-bottom-color: var(--d-line); padding: 16px 22px; }
.d-app .p-card-head h3 { font-size: 16px; font-weight: 650; }
.d-app .p-card-foot { background: var(--d-stone); border-top-color: var(--d-line); }
.d-app .p-card-body { padding: 20px 22px; }

/* numbers: the bank-balance treatment, no gradients */
.d-app .p-stat { border-radius: var(--d-r-card); box-shadow: none; background: var(--d-stone); padding: 18px 20px 20px; }
.d-app .p-stat-cap { font-size: 14px; font-weight: 550; color: var(--d-ink-2); }
.d-app .p-stat-num { letter-spacing: -.025em; color: var(--d-ink); }
.d-app .p-stat-meta { color: var(--d-ink-3); }
.d-app .p-stat--hero { background: var(--d-ice); color: var(--d-ice-ink); }
.d-app .p-stat--hero .p-stat-cap, .d-app .p-stat--hero .p-stat-meta { color: var(--d-ice-ink); }
.d-app .p-tile { border-radius: 10px; }

/* tables: the list rows */
.d-app .p-tablewrap { border-radius: 0; background: none; box-shadow: none; overflow-x: auto; }
.d-app .p-card .p-tablewrap { border-radius: inherit; }
.d-app .p-table { font-size: 14.5px; }
.d-app .p-table th { padding: 0 14px 12px; background: var(--d-white); border-bottom: 1px solid var(--d-line); font-size: 15px; font-weight: 650; color: var(--d-ink); }
.d-app .p-card .p-table th { padding-top: 14px; }
.d-app .p-table td { padding: 16px 14px; border-bottom: 1px solid var(--d-line); color: var(--d-ink-2); }
.d-app .p-table tbody tr:last-child td { border-bottom: 1px solid var(--d-line); }
.d-app .p-card .p-table tbody tr:last-child td { border-bottom: 0; }
.d-app .p-table .p-t-strong { font-size: 15.5px; font-weight: 600; color: var(--d-ink); }
.d-app .p-table .p-t-sub { font-size: 13.5px; color: var(--d-ink-3); margin-top: 3px; }
.d-app .p-table tbody tr.is-link:hover { background: var(--d-hover); }

/* filters and tabs: chips */
.d-app .p-filters { gap: 10px; margin-bottom: 22px; }
.d-app .p-chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 17px; border-radius: 999px; background: var(--d-blush); box-shadow: none; color: var(--d-ink); font-size: 15px; font-weight: 500; }
.d-app .p-chip:hover { background: var(--d-cotton); }
.d-app .p-chip.is-active { background: var(--d-ink); color: #fff; }
.d-app .p-chip-n { opacity: 1; color: var(--d-ink-3); margin-left: 0; font-size: 14px; }
.d-app .p-chip.is-active .p-chip-n { color: rgba(255, 255, 255, .6); }
.d-app .p-search .p-input { height: 42px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--d-edge); background: none; }
.d-app .p-filters .p-search { margin-left: auto; }
.d-app .p-tabs { gap: 8px; border-bottom: 0; flex-wrap: wrap; margin-bottom: 4px; }
.d-app .p-tab { display: inline-flex; align-items: center; height: 42px; padding: 0 17px; border-radius: 999px; background: var(--d-blush); color: var(--d-ink); font-size: 15px; font-weight: 500; }
.d-app .p-tab:hover { background: var(--d-cotton); color: var(--d-ink); }
.d-app .p-tab.is-active { background: var(--d-ink); color: #fff; font-weight: 500; }
.d-app .p-tab::after { display: none; }
.d-app .p-tab-count { color: inherit; opacity: .6; }
.d-app .p-pager { color: var(--d-ink-3); font-size: 14px; }
.d-app .p-pager-btn { background: var(--d-blush); box-shadow: none; border-radius: 8px; }

/* empty: the dashed drop */
.d-app .p-empty { border-radius: var(--d-r-win); background: none; box-shadow: none; border: 1.5px dashed var(--d-edge); padding: 56px 24px; }
.d-app .p-empty-mark { width: 72px; height: 72px; border-radius: 20px; background: var(--d-stone); color: var(--d-ink); }
.d-app .p-empty-mark svg { width: 32px; height: 32px; }
.d-app .p-empty h3 { font-family: var(--font); font-size: 18px; font-weight: 650; letter-spacing: 0; color: var(--d-ink); }
.d-app .p-empty p { color: var(--d-ink-2); font-size: 15px; line-height: 1.55; }

/* banners: a tinted note, no border */
.d-app .p-banner { border: 0; border-radius: var(--d-r-card); background: var(--d-stone); color: var(--d-ink-2); font-size: 14.5px; padding: 14px 18px; }
.d-app .p-banner--warn { background: var(--d-butter); color: var(--d-butter-ink); }
.d-app .p-banner--danger { background: #fde4e2; color: #8f1f24; }
.d-app .p-banner--info { background: var(--d-ice); color: var(--d-ice-ink); }
.d-app .p-banner--ok { background: var(--d-mint); color: var(--d-mint-ink); }
.d-app .p-banner--quiet { background: var(--d-stone); color: var(--d-ink-2); }
.d-app .p-banner b { color: inherit; font-weight: 650; }

.d-app .p-kv > div { border-bottom-color: var(--d-line); }
.d-app .p-kv dt { color: var(--d-ink-3); }
.d-app .p-kv dd { color: var(--d-ink); }

@media (max-width: 860px) {
  .d-app .p-title { font-size: 28px; }
  .d-app .p-filters .p-search { margin-left: 0; width: 100%; }
}

/* ===================================================== client portal ===== */
/* The client's side: a document with its decision beside it, and a home that
   answers "is anything waiting on me" before anything else. */
.cp-doc-head { margin-bottom: 20px; }
.cp-doc-grid { display: grid; grid-template-columns: minmax(0, 820px) minmax(260px, 320px); gap: 28px; align-items: start; }
.cp-doc-paper { background: var(--d-stone); border-radius: var(--d-r-win); padding: 18px; min-width: 0; }
.cp-doc-paper .p-doc { max-width: none; box-shadow: 0 1px 2px rgba(22, 22, 22, .06); }
.cp-doc-side { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 10px; }
.cp-note { margin-bottom: 16px; }
.cp-side-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--d-r-card); background: var(--d-stone); }
.cp-side-card--line { background: none; border: 1px solid var(--d-line); }
.cp-side-cap { font-size: 14px; font-weight: 550; color: var(--d-ink-2); }
.cp-side-num { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 34px; line-height: 1.1; letter-spacing: -.025em; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.cp-side-meta { font-size: 14px; color: var(--d-ink-3); line-height: 1.5; margin-bottom: 8px; }
.cp-side-meta.is-late { color: #b4262b; }
.cp-side-go { width: 100%; height: 46px; font-size: 15.5px; }
.cp-side-card .cp-side-go + .cp-side-go { margin-top: 2px; }
.cp-side-note { font-size: 13.5px; line-height: 1.55; color: var(--d-ink-3); margin: 6px 0 0; }
.cp-side-state { align-self: flex-start; margin-bottom: 8px; padding: 5px 12px; border-radius: 999px; background: var(--d-cotton); font-size: 13.5px; font-weight: 600; color: var(--d-ink-2); }
.cp-side-state.is-ok { background: var(--d-mint); color: var(--d-mint-ink); }
.cp-side-state.is-warn { background: var(--d-butter); color: var(--d-butter-ink); }
.cp-side-link { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--d-accent-ink); }
.cp-modal-text { font-size: 15px; line-height: 1.6; color: var(--d-ink-2); margin: 0 0 18px; }
.cp-modal-text b { color: var(--d-ink); }

.cp-band { margin-bottom: 34px; }
.cp-gap { margin-top: 34px; }
.cp-todos { display: flex; flex-direction: column; border-top: 1px solid var(--d-line); }
.cp-todo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 10px; border-bottom: 1px solid var(--d-line); transition: background .12s var(--ease); }
.cp-todo:hover { background: var(--d-hover); }
.cp-todo-mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--d-accent-soft); color: var(--d-accent-ink); }
.cp-todo-mark.is-late { background: #fde4e2; color: #b4262b; }
.cp-todo-mark svg { width: 22px; height: 22px; }
.cp-todo-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-todo-text b { font-size: 15.5px; font-weight: 600; color: var(--d-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-todo-text span { font-size: 14px; color: var(--d-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-todo-amt { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--d-ink); }

.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.cp-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 8px; }
.cp-aside .d-btn { margin-top: 8px; }
.cp-you { font-size: 16px; font-weight: 650; color: var(--d-ink); }

.cp-proj { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; margin-bottom: 12px; border-radius: var(--d-r-card); background: var(--d-stone); transition: background .12s var(--ease); }
.cp-proj:hover { background: var(--d-blush); }
.cp-proj-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-proj-name { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 22px; letter-spacing: -.02em; color: var(--d-ink); }
.cp-proj-count { font-size: 14px; color: var(--d-ink-3); }
.cp-proj-next { font-size: 15px; color: var(--d-ink-2); }
.cp-proj-next b { color: var(--d-ink); font-weight: 600; }
.cp-proj-update { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--d-white); }
.cp-proj-update span { font-size: 13px; color: var(--d-ink-3); }
.cp-proj-update b { font-size: 15px; font-weight: 600; color: var(--d-ink); }

@media (max-width: 1180px) {
  .cp-doc-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-doc-side { position: static; order: -1; }
  .cp-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-aside { position: static; }
}
@media (max-width: 860px) {
  .cp-doc-paper { padding: 8px; border-radius: var(--d-r-card); }
  .cp-todo { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .cp-todo .d-btn { display: none; }
  .cp-todo-mark { width: 40px; height: 40px; }
}
.cp-todo--plain { grid-template-columns: 44px minmax(0, 1fr) auto; }
.cp-aside .d-btn + .d-btn { margin-top: 6px; }
.cp-home .d-figs { margin-bottom: 34px; }
@media (max-width: 860px) {
  .cp-todo--plain { grid-template-columns: 40px minmax(0, 1fr); }
  .cp-todo--plain .d-meta { display: none; }
}
@media (max-width: 860px) {
  /* Two actions and the ⋯ share one line on a phone. */
  .d-head-actions { flex-wrap: nowrap; }
  .d-head-actions .d-btn { min-width: 0; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d-head-actions .d-iconbtn { flex: none; }
}
/* A project's plan is the page; when the columns stack, the details follow it. */
.pj .k-record-side { order: 2; }

/* ======================================================== partners ======= */
.pt-panel { margin-top: 18px; }
.pt-panel .d-drop { min-height: 260px; margin-top: 0; }
.pt-fine { margin-top: 12px; font-size: 13.5px; color: var(--d-ink-3); line-height: 1.5; }
.pt-switch { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--d-ink); cursor: pointer; }
.pt-switch input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--d-ink); flex: none; }
.pt-order { display: grid; grid-template-columns: auto 90px; align-items: center; gap: 6px 12px; margin-top: 14px; font-size: 14px; color: var(--d-ink-2); }
.pt-order .p-input { height: 38px; }
.pt-order em { grid-column: 1 / -1; font-style: normal; font-size: 13px; color: var(--d-ink-3); }
.pj-inline { display: inline; margin: 0; }
.pa-app { min-width: 0; }
.pa-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-bottom: 30px; }
.pa-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--d-line); min-width: 0; }
.pa-facts dt { font-size: 13.5px; color: var(--d-ink-3); }
.pa-facts dd { font-size: 15px; color: var(--d-ink); overflow-wrap: anywhere; }
.pa-facts a { color: var(--d-accent-ink); }
.pa-message { max-width: 68ch; font-size: 16px; line-height: 1.7; color: var(--d-ink); white-space: pre-wrap; }
.pa-note { font-size: 14.5px; line-height: 1.6; color: var(--d-ink-2); white-space: pre-wrap; }
.cp-side-card .p-select, .cp-side-card .p-textarea { background: var(--d-white); }
@media (max-width: 860px) { .pa-facts { grid-template-columns: 1fr; } }
.pb-lines { border-top: 1px solid var(--d-line); }
.pb-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; gap: 16px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--d-line); font-size: 15px; color: var(--d-ink); }
.pb-line .d-meta { margin: 0; }
.pb-line b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ========================================================= careers ======= */
.ca-count { font-weight: 650; color: var(--d-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.ca-hint { font-size: 13.5px; font-weight: 500; color: var(--d-ink-3); margin-left: 6px; }
.ca-order .p-input { max-width: 120px; }
.ca-paper { background: var(--d-white); padding: 32px 34px; }
.ca-role { font-size: 15px; line-height: 1.65; color: var(--d-ink-2); max-width: 62ch; }
.ca-role h2 { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 30px; line-height: 1.1; letter-spacing: -.025em; color: var(--d-ink); margin: 6px 0 10px; }
.ca-role h3 { font-size: 16px; font-weight: 650; color: var(--d-ink); margin: 24px 0 8px; }
.ca-role p { margin: 0 0 12px; }
.ca-role ul { margin: 0; padding-left: 18px; }
.ca-role li { margin-bottom: 6px; }
.ca-role-meta { font-size: 13.5px; color: var(--d-ink-3); }
.ca-role-pay { font-weight: 650; color: var(--d-ink); }
.ca-role-lede { font-size: 17px; color: var(--d-ink); }
.ca-role-note { font-size: 14px; color: var(--d-ink-3); }

/* ===================================================== applications ====== */
.ap-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ap-stars { display: flex; gap: 2px; margin: 2px 0 12px; }
.ap-stars .p-star { font-size: 26px; }
.ap-rating { color: var(--d-butter-ink); letter-spacing: 1px; }
.ap-hint { display: block; margin-top: 2px; }
.cp-side-go svg { width: 16px; height: 16px; }

/* ============================================================ blog ======= */
.bl-thumb { width: 64px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--d-stone); }
.bl-body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.6; }
.bl-post { font-size: 15.5px; line-height: 1.7; color: var(--d-ink-2); max-width: 64ch; }
.bl-post h2 { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 32px; line-height: 1.1; letter-spacing: -.025em; color: var(--d-ink); margin: 6px 0 12px; }
.bl-post h3 { font-size: 19px; font-weight: 650; color: var(--d-ink); margin: 28px 0 10px; }
.bl-post p { margin: 0 0 14px; }
.bl-post a { color: var(--d-accent-ink); text-decoration: underline; }
.bl-post blockquote { margin: 18px 0; padding-left: 16px; border-left: 3px solid var(--d-ink); font-size: 18px; color: var(--d-ink); }
.bl-post figure { margin: 18px 0; }
.bl-post img { width: 100%; border-radius: 12px; display: block; }
.bl-hero { margin-top: 8px; }

/* ======================================================== settings ======= */
.st { max-width: 1080px; }
.st-group { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding: 30px 0; border-top: 1px solid var(--d-line); }
.st-group:first-of-type { border-top: 0; padding-top: 6px; }
.st-intro h2 { font-size: 17px; font-weight: 650; color: var(--d-ink); }
.st-intro p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--d-ink-3); }
.st-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 22px; border-radius: var(--d-r-card); border: 1px solid var(--d-line); }
.st-card .p-field { margin: 0; }
.st-card .p-field:has(textarea) { grid-column: 1 / -1; }
.st-switch { grid-column: 1 / -1; line-height: 1.5; color: var(--d-ink-3); }
.st-switch b { color: var(--d-ink); font-weight: 600; }
@media (max-width: 960px) {
  .st-group { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-card { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================= templates ======= */
.tp-gap { margin-top: 28px; }
.tp-key { font-size: 13px; color: var(--d-ink-3); }
.tp-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tp-vars code { padding: 3px 8px; border-radius: 6px; background: var(--d-stone); font-size: 12.5px; color: var(--d-ink-2); }
.tp-paper { padding: 0; background: var(--d-white); overflow: hidden; }
.tp-frame { display: block; width: 100%; height: min(760px, calc(100vh - 230px)); border: 0; background: #fff; }
.tp-note { margin-top: 10px; }
.tp-switch { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: var(--d-r); background: var(--d-blush); font-size: 14.5px; font-weight: 500; color: var(--d-ink); cursor: pointer; }
.tp-switch input { width: 16px; height: 16px; accent-color: var(--d-ink); }
.cp-todo-mark.is-quiet { background: var(--d-stone); color: var(--d-ink-2); }
.cp-todo > .p-badge { justify-self: end; }

/* ============================================= client portal: project ===== */
.cpp-plan { list-style: none; margin: 0 0 8px; padding: 0; }
.cpp-plan li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 0 0 22px; }
.cpp-plan li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 1.5px; background: var(--d-line); }
.cpp-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--d-edge); background: var(--d-white); color: #fff; }
.cpp-dot svg { width: 15px; height: 15px; }
.cpp-plan .is-done .cpp-dot { background: var(--d-ink); box-shadow: none; }
.cpp-plan .is-next .cpp-dot { box-shadow: inset 0 0 0 2px var(--d-accent), 0 0 0 4px var(--d-accent-soft); }
.cpp-plan b { display: block; font-size: 16px; font-weight: 600; color: var(--d-ink); padding-top: 3px; }
.cpp-plan .is-done b { color: var(--d-ink-2); }
.cpp-plan span { font-size: 14px; color: var(--d-ink-3); }
.cpp-plan p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--d-ink-2); max-width: 60ch; }
.cpp-task { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--d-line); font-size: 15px; color: var(--d-ink); }
.cpp-task.is-done span:first-child { color: var(--d-ink-3); text-decoration: line-through; }
.cpp-update { padding: 20px 22px; margin-bottom: 12px; border-radius: var(--d-r-card); border: 1px solid var(--d-line); }
.cpp-update > span { font-size: 13.5px; color: var(--d-ink-3); }
.cpp-update h3 { margin: 6px 0 8px; font-size: 18px; font-weight: 650; color: var(--d-ink); }
.cpp-update p { font-size: 15px; line-height: 1.65; color: var(--d-ink-2); white-space: pre-wrap; max-width: 68ch; }
.cpp-files { display: flex; flex-direction: column; margin-top: 6px; }
.cpp-files .cp-file { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; }
.cpp-files .cp-todo-mark { width: 36px; height: 36px; }
.cp-file .cp-todo-mark svg { width: 18px; height: 18px; }
.cp-file { grid-template-columns: 44px minmax(0, 1fr) auto; }
.cp-proj .p-badge { flex: none; }
/* On a review page (an application, a bill) you read before you decide, so
   when the columns stack the decision follows the thing being decided. */
@media (max-width: 1180px) { .cp-doc-grid:has(.pa-app) .cp-doc-side { order: 1; } }

@media (max-width: 860px) { .d-where-trail .is-now .d-where-sep { display: none; } }

/* ================================================= marks, tiles, badges == */
/* A row leads with something that differs from the row above it: a client's
   initials, a date, a file type. The same icon on every row said nothing and
   drew too loud; where an icon is still the right lead (a list of different
   kinds of thing) it is drawn small and light, a symbol and not a sticker. */
.d-mark svg, .d-app .k-mark svg { width: 18px; height: 18px; stroke-width: 1.6; }
.cp-todo-mark svg { width: 19px; height: 19px; }

.d-datetile {
  width: 42px; height: 46px; flex: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 10px; background: var(--d-white); box-shadow: inset 0 0 0 1px var(--d-line);
  overflow: hidden;
}
.d-datetile small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--d-you); line-height: 1; }
.d-datetile b { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 19px; line-height: 1; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.d-datetile.is-late { background: #fdeceb; box-shadow: inset 0 0 0 1px #f6cfcc; }
.d-datetile.is-late small, .d-datetile.is-late b { color: #b4262b; }
.d-datetile.is-none { background: var(--d-stone); box-shadow: none; }
.d-datetile.is-none small { color: var(--d-ink-3); font-size: 14px; }

.d-filemark {
  width: 42px; height: 46px; flex: none;
  display: inline-grid; place-items: end center; padding-bottom: 8px;
  border-radius: 8px 14px 8px 8px; background: var(--d-stone);
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em; color: var(--d-ink-2);
  position: relative;
}
.d-filemark::before { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 0 0 0 5px; background: rgba(22, 22, 22, .07); }
.d-filemark.is-doc { background: #fde4e2; color: #a3262b; }
.d-filemark.is-img { background: var(--d-ice); color: var(--d-ice-ink); }
.d-filemark.is-design { background: var(--d-accent-soft); color: var(--d-accent-ink); }
.d-filemark.is-sheet { background: var(--d-mint); color: var(--d-mint-ink); }
.d-filemark.is-media { background: var(--d-butter); color: var(--d-butter-ink); }
.cpp-files .d-filemark { width: 36px; height: 40px; font-size: 9.5px; padding-bottom: 6px; }
.d-app .k-rowlink .d-datetile, .d-app .k-rowlink .d-filemark { margin-right: 2px; }
.em-pager { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--d-ink-3); }
.em-pager > span { margin-right: auto; }
.d-quick .d-iconbtn + .d-iconbtn, .d-quick .d-btn + .d-iconbtn { margin-left: 2px; }

/* ===================================================== untitled ui ======= */
/* The client page in the Untitled UI layout (#/clients/<id>/untitled): their
   shapes (the grey scale's roles, the status families, shadow-xs, the
   skeuomorphic button edge) in the studio's own colours and type, the same
   way untitled.css dresses the rest of the portal. */
.ub {
  --g25: #fdfcfa; --g50: #faf9f6; --g100: #f0ede6; --g200: #e9e6df; --g300: #d9d4ca; --g400: #b5b0a6;
  --g500: #8e8a82; --g600: #56534d; --g700: #3d3b37; --g800: #2b2926; --g900: #161616;
  /* "Brand" here was periwinkle; it is ink now, the foil being the brand colour. */
  --b50: #f0ede6; --b100: #e9e6df; --b200: #d9d4ca; --b500: #56534d; --b600: #161616; --b700: #161616;
  --xs: 0 1px 2px rgba(22, 22, 22, .05);
  --skeu: inset 0 0 0 1px rgba(22, 22, 22, .16), inset 0 -2px 0 rgba(22, 22, 22, .05);
  color: var(--g900);
  max-width: 1280px;
  padding-bottom: 48px;
}

/* header */
.ub-profile { margin: 4px 0 28px; }
.ub-cover { height: 148px; border-radius: 12px; background: radial-gradient(120% 140% at 0% 0%, #d2f4ff 0%, transparent 55%), radial-gradient(90% 120% at 100% 100%, #ffe3d1 0%, transparent 60%), linear-gradient(120deg, #e9e6df, #f0ede6); }
.ub-profile-row { display: flex; align-items: flex-end; gap: 20px; padding: 0 24px; margin-top: -40px; flex-wrap: wrap; }
.ub-logo { width: 96px; height: 96px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--g900); color: #fff; font-family: var(--font-title); font-size: 30px; font-weight: var(--title-weight); letter-spacing: -.02em; box-shadow: 0 0 0 4px #fff, 0 12px 16px -4px rgba(22, 22, 22, .08), 0 4px 6px -2px rgba(22, 22, 22, .03); }
.ub-profile-text { flex: 1; min-width: 240px; padding-bottom: 4px; }
.ub-profile-text h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-title); font-size: 32px; line-height: 38px; font-weight: var(--title-weight); letter-spacing: -.028em; color: var(--g900); }
.ub-profile-text p { margin-top: 4px; font-size: 16px; color: var(--g600); }
.ub-profile-text a { display: inline-flex; align-items: center; gap: 4px; color: var(--b700); font-weight: 600; }
.ub-profile-text a svg { width: 16px; height: 16px; }
.ub-profile-acts { display: flex; gap: 12px; padding-bottom: 4px; }

/* buttons */
.ub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.ub-btn svg { width: 20px; height: 20px; }
.ub-btn.is-sm { height: 36px; padding: 0 12px; }
.ub-btn.is-sm svg { width: 18px; height: 18px; }
.ub-btn.is-primary { background: var(--g900); color: #fff; box-shadow: var(--xs), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(22, 22, 22, .05); }
.ub-btn.is-primary:hover, .ub-btn.is-primary[aria-expanded="true"] { background: var(--g800); }
.ub-btn.is-secondary { background: #fff; color: var(--g700); box-shadow: var(--xs), var(--skeu); }
.ub-btn.is-secondary:hover, .ub-btn.is-secondary[aria-expanded="true"] { background: var(--g50); color: var(--g800); }
.ub-btn.is-tertiary { color: var(--g600); padding: 0 10px; }
.ub-btn.is-tertiary:hover { background: var(--g50); color: var(--g700); }
.ub-btn.is-icon { width: 40px; padding: 0; }

/* badges */
.ub-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--bd); background: var(--bg); color: var(--fg); letter-spacing: 0; vertical-align: middle; }
.ub-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.ub-badge.is-plain { padding: 0 8px; }
.ub-badge.is-gray { --bg: var(--g50); --bd: var(--g200); --fg: var(--g700); --dot: var(--g500); }
.ub-badge.is-brand { --bg: var(--b50); --bd: var(--b200); --fg: var(--b700); --dot: var(--b500); }
.ub-badge.is-success { --bg: #eaf8ee; --bd: #bfe8cb; --fg: #1f7a4d; --dot: #2fa866; }
.ub-badge.is-warning { --bg: #fdf6db; --bd: #f6e39a; --fg: #8a6300; --dot: #d9a400; }
.ub-badge.is-error { --bg: #fdeceb; --bd: #f6cfcc; --fg: #b4262b; --dot: #e5484d; }
.ub-badge.is-ink { --bg: var(--g900); --bd: var(--g900); --fg: #fff; --dot: #fff; }
.ub-badge.is-blue { --bg: #e8f8ff; --bd: #b5e5f7; --fg: #1f5f88; --dot: #3b9bd0; }

/* metrics */
.ub-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; }
.ub-metric { display: flex; flex-direction: column; gap: 20px; padding: 20px 24px 24px; border-radius: 12px; background: #fff; box-shadow: var(--xs), inset 0 0 0 1px var(--g200); min-width: 0; }
.ub-featured { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--g700); box-shadow: var(--xs), var(--skeu); }
.ub-featured svg { width: 24px; height: 24px; }
.ub-featured.is-lg { width: 48px; height: 48px; border-radius: 50%; background: var(--b100); color: var(--b600); box-shadow: 0 0 0 8px var(--b50); margin-bottom: 16px; }
.ub-metric-label { font-size: 14px; font-weight: 500; color: var(--g600); }
.ub-metric-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.ub-metric-row b { font-family: var(--font-title); font-size: 30px; line-height: 38px; font-weight: var(--title-weight); letter-spacing: -.02em; color: var(--g900); font-variant-numeric: tabular-nums; }
.ub-trend { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 500; box-shadow: var(--xs), inset 0 0 0 1px var(--g300); background: #fff; color: var(--g700); }
.ub-trend svg { width: 12px; height: 12px; }
.ub-trend.is-success svg { color: #2fa866; }
.ub-trend.is-error { color: #b4262b; }
.ub-trend.is-brand { color: var(--b700); }

/* tabs */
.ub-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--g200); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.ub-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 12px; font-size: 14px; font-weight: 600; color: var(--g500); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .12s ease; }
.ub-tabs a:hover { color: var(--g700); }
.ub-tabs a.is-on { color: var(--g900); border-bottom-color: var(--g900); }
.ub-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--g50); box-shadow: inset 0 0 0 1px var(--g200); font-size: 12px; font-weight: 500; color: var(--g700); }
.ub-tabs a.is-on .ub-count { background: var(--g900); box-shadow: none; color: #fff; }

/* cards and tables */
.ub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.ub-main, .ub-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ub-card { border-radius: 12px; background: #fff; box-shadow: var(--xs), inset 0 0 0 1px var(--g200); overflow: hidden; }
.ub-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 19px; border-bottom: 1px solid var(--g200); }
.ub-card-head h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--g900); }
.ub-card-head p { margin-top: 4px; font-size: 14px; color: var(--g600); }
.ub-table-wrap { overflow-x: auto; }
.ub-table { width: 100%; border-collapse: collapse; }
.ub-table th { padding: 12px 24px; background: var(--g50); border-bottom: 1px solid var(--g200); font-size: 12px; font-weight: 500; color: var(--g600); text-align: left; white-space: nowrap; }
.ub-table td { padding: 16px 24px; border-bottom: 1px solid var(--g200); font-size: 14px; color: var(--g600); vertical-align: middle; }
.ub-table tbody tr:last-child td { border-bottom: 0; }
.ub-table tbody tr { cursor: pointer; transition: background .12s ease; }
.ub-table tbody tr:hover { background: var(--g50); }
.ub-table .is-num { text-align: right; }
.ub-cell { display: flex; flex-direction: column; min-width: 0; }
.ub-cell b { font-size: 14px; font-weight: 500; color: var(--g900); }
.ub-cell span, .ub-sub { font-size: 14px; color: var(--g600); }
.ub-sub { display: block; font-size: 12px; }
.ub-num { font-weight: 500; color: var(--g900); font-variant-numeric: tabular-nums; }
.ub-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 44px; }
.ub-empty h3 { font-size: 16px; font-weight: 600; color: var(--g900); }
.ub-empty p { margin: 4px 0 20px; font-size: 14px; color: var(--g600); max-width: 36ch; }
.ub-muted { padding: 16px 24px; font-size: 14px; color: var(--g500); }
.ub-card-head .ub-muted { padding: 0; }
.ub-feed { list-style: none; margin: 0; padding: 8px 24px 16px; }
.ub-feed li { display: flex; gap: 12px; padding: 12px 0; }
.ub-feed p { font-size: 14px; color: var(--g700); }
.ub-feed p b { font-weight: 600; }
.ub-feed time { margin-left: 4px; font-size: 12px; color: var(--g600); }
.ub-feed li > div > span { display: block; margin-top: 2px; font-size: 14px; color: var(--g600); }

/* side */
.ub-dl { padding: 4px 24px 12px; }
.ub-dl div { padding: 12px 0; border-bottom: 1px solid var(--g200); }
.ub-dl div:last-child { border-bottom: 0; }
.ub-dl dt { font-size: 14px; font-weight: 500; color: var(--g700); }
.ub-dl dd { margin-top: 2px; font-size: 14px; color: var(--g600); overflow-wrap: anywhere; }
.ub-dl .ub-muted { padding: 0; color: var(--g400); }
.ub-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.ub-people { list-style: none; margin: 0; padding: 8px 24px 16px; }
.ub-people li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ub-people li > div { display: flex; flex-direction: column; min-width: 0; }
.ub-people b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--g700); }
.ub-people span { font-size: 14px; color: var(--g600); overflow: hidden; text-overflow: ellipsis; }
.ub-avatar { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--g100); color: var(--g600); font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(22, 22, 22, .08); }
.ub-avatar.is-sm { width: 32px; height: 32px; font-size: 12px; }
.ub-online { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #2fa866; box-shadow: 0 0 0 1.5px #fff; }
.ub-input { display: block; width: calc(100% - 48px); margin: 16px 24px 20px; padding: 10px 14px; border: 0; border-radius: 8px; background: #fff; box-shadow: var(--xs), inset 0 0 0 1px var(--g300); font: inherit; font-size: 16px; line-height: 24px; color: var(--g900); resize: vertical; }
.ub-input:focus { outline: none; box-shadow: var(--xs), inset 0 0 0 1px var(--b600), 0 0 0 4px var(--b100); }
.ub-input::placeholder { color: var(--g500); }
.ub-saved { font-size: 12px; }

/* The home pages fill the page like every other page; the side column stays 360. */
.ub-page { max-width: none; }
/* A card head's action sits on the title's line, and a text button's label
   lines up with the card's right edge. */
.ub-page .ub-card-head > .ub-btn, .ub-page .ub-card-head > .ub-seg { margin-top: -4px; }
.ub-page .ub-card-head > .ub-btn.is-tertiary { margin-right: -10px; }

/* page header: the title at display size, supporting text, the buttons */
.ub-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 4px 0 32px; }
.ub-page-head h1 { font-family: var(--font-title); font-size: 30px; line-height: 38px; font-weight: var(--title-weight); letter-spacing: -.02em; color: var(--g900); }
.ub-page-head p { margin-top: 4px; font-size: 16px; color: var(--g600); }
.ub-page-head em { font-style: normal; font-weight: 500; color: #b4262b; }

/* button group: joined buttons, the chosen one on grey */
.ub-seg { display: inline-flex; flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--g300); border-radius: 8px; background: #fff; box-shadow: var(--xs); }
.ub-seg::-webkit-scrollbar { display: none; }
.ub-seg button { flex: none; height: 34px; padding: 0 14px; border: 0; border-left: 1px solid var(--g300); background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--g700); cursor: pointer; white-space: nowrap; }
.ub-seg button:first-child { border-left: 0; }
.ub-seg button:hover, .ub-seg button.is-on { background: var(--g50); color: var(--g800); }

/* list items: a featured icon, two lines, a badge, an action */
.ub-featured.is-sm { width: 40px; height: 40px; flex: none; border-radius: 8px; }
.ub-featured.is-sm svg { width: 20px; height: 20px; }
.ub-items { list-style: none; margin: 0; padding: 0; }
.ub-item { display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--g200); transition: background .12s ease; }
.ub-item:last-child { border-bottom: 0; }
.ub-item:hover { background: var(--g50); }
.ub-item[hidden] { display: none; }
.ub-item-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px 0; color: inherit; }
.ub-item-link .ub-cell { flex: 1; }
.ub-cell b, .ub-cell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* table extras: stacked badges, a progress bar, a clipped cell, late */
.ub-badges { display: inline-flex; gap: 4px; }
.ub-progress { display: flex; align-items: center; gap: 12px; min-width: 120px; }
.ub-progress > span { flex: 1; height: 8px; border-radius: 999px; background: var(--g200); overflow: hidden; }
/* Progress fills and the money bar's "in" take the foil, the brand's own
   recipe from portal.css (.p-progress): the ramp at a fixed 900px so a bar
   starts at the near-black anchor and colours up as it fills. Never on a
   badge, a count or a row: see the foil notes in portal.css. */
.ub-progress i, .ub-split .is-in { background: linear-gradient(90deg, var(--brand-foil)); background-size: 900px 100%; background-repeat: repeat-x; }
.ub-progress i { display: block; height: 100%; border-radius: 999px; }
.ub-progress small { font-size: 14px; font-weight: 500; color: var(--g700); font-variant-numeric: tabular-nums; }
.ub-table .ub-clip { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-page .ub-table td.is-num { white-space: nowrap; }
.ub-page .ub-table th, .ub-page .ub-table td { padding-left: 12px; padding-right: 12px; }
.ub-page .ub-table th:first-child, .ub-page .ub-table td:first-child { padding-left: 24px; }
.ub-page .ub-table th:last-child, .ub-page .ub-table td:last-child { padding-right: 24px; }
.ub-page .ub-progress { min-width: 104px; }
.ub-page .ub-table .ub-clip { max-width: 180px; }
.ub-table td.is-late { font-weight: 500; color: #b4262b; }

/* a card's body, and a grey sub-heading between its parts */
.ub-card-body { display: flex; flex-direction: column; padding: 20px 24px 24px; }
.ub-card-body .ub-metric-row { margin-top: 8px; }
.ub-card-body .ub-sub { margin-top: 4px; font-size: 14px; }
.ub-card-sub { padding: 12px 24px; border-top: 1px solid var(--g200); border-bottom: 1px solid var(--g200); background: var(--g50); font-size: 12px; font-weight: 500; color: var(--g600); }

/* the split bar and its legend */
.ub-split { position: relative; display: flex; gap: 2px; height: 8px; margin-top: 20px; border-radius: 999px; background: var(--g100); }
.ub-split > span { min-width: 4px; border-radius: 999px; }
.ub-legend .is-in { background: linear-gradient(90deg, var(--brand-foil)); background-size: 64px 100%; background-position: -12px 0; }
.ub-split .is-late, .ub-legend .is-late { background: #e5484d; }
.ub-split .is-due, .ub-legend .is-due { background: var(--g300); }
.ub-split .is-pitch, .ub-legend .is-pitch { background: repeating-linear-gradient(-45deg, var(--g300) 0 2px, var(--g100) 2px 5px); }
.ub-split > .ub-split-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; min-width: 0; margin-left: -1px; border-radius: 1px; background: var(--g900); }
.ub-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ub-legend li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--g600); }
.ub-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ub-legend i { width: 8px; height: 8px; border-radius: 50%; }
.ub-legend i.is-tick { width: 2px; height: 12px; margin: 0 3px; border-radius: 1px; background: var(--g900); }
.ub-legend b { font-weight: 500; color: var(--g900); font-variant-numeric: tabular-nums; }

/* people rows that open something, and a list of counts */
.ub-people--links li { padding: 0; }
.ub-people--links a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 0; color: inherit; }
.ub-people--links .ub-cell { flex: 1; }
.ub-people--links .ub-num { font-size: 14px; font-weight: 500; color: var(--g900); }
.ub-stats { list-style: none; margin: 0; padding: 4px 24px 8px; }
.ub-stats li + li { border-top: 1px solid var(--g200); }
.ub-stats a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 500; color: var(--g700); }
.ub-stats a:hover { color: var(--g900); }

.ub-page .ub-featured.is-lg { background: var(--g100); color: var(--g600); box-shadow: 0 0 0 8px var(--g50); }

/* label and value rows, a card's own text, an amount in a list item */
.ub-kvs { list-style: none; margin: 0; padding: 4px 24px 8px; }
.ub-kvs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 14px; color: var(--g600); }
.ub-kvs li + li { border-top: 1px solid var(--g200); }
.ub-kvs b { font-weight: 500; color: var(--g900); font-variant-numeric: tabular-nums; text-align: right; }
.ub-card-body > p { margin: 0 0 16px; font-size: 14px; color: var(--g600); }
.ub-card-body > .ub-btn { align-self: flex-start; }
.ub-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ub-item-amt { flex: none; font-size: 14px; font-weight: 500; color: var(--g900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ub-cell .is-late { color: #b4262b; }

/* the feed, as rows that open what they are about */
.ub-page .ub-feed li { padding: 0; }
.ub-feed-row { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; color: inherit; }
.ub-feed-row > div { min-width: 0; padding-top: 2px; }
.ub-feed-row > div > span { display: block; margin-top: 2px; font-size: 14px; color: var(--g600); }
a.ub-feed-row:hover b { text-decoration: underline; text-decoration-color: var(--g300); text-underline-offset: 3px; }

/* Home, narrower: the side column comes up after Needs you, money beside
   the two count cards; on a phone everything is one column. */
@media (max-width: 1200px) {
  .ub-home .ub-grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .ub-home .ub-main { display: contents; }
  .ub-home .ub-main > :first-child { order: 1; }
  .ub-home .ub-side { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ub-home .ub-side > :first-child { grid-row: span 2; }
  .ub-home .ub-main > :not(:first-child) { order: 3; }
}
@media (max-width: 760px) {
  .ub-home .ub-side { grid-template-columns: minmax(0, 1fr); }
  .ub-home .ub-side > :first-child { grid-row: auto; }
  .ub-page .ub-card-head { flex-wrap: wrap; }
  .ub-page .ub-item .ub-badge { display: none; }
  .ub-page .ub-item .ub-featured { display: none; }
  .ub-page .ub-item { gap: 8px; padding: 0 16px; }
  .ub-page .ub-card-head, .ub-page .ub-card-body { padding-left: 16px; padding-right: 16px; }
  .ub-page .ub-kvs, .ub-page .ub-stats, .ub-page .ub-feed, .ub-page .ub-people { padding-left: 16px; padding-right: 16px; }
  .ub-page .ub-table th:first-child, .ub-page .ub-table td:first-child { padding-left: 16px; }
  .ub-page-head h1 { font-size: 26px; line-height: 32px; }
}

@media (max-width: 1200px) {
  .ub-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ub-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ub-cover { height: 96px; }
  .ub-profile-row { padding: 0 12px; gap: 12px; margin-top: -32px; }
  .ub-logo { width: 72px; height: 72px; font-size: 22px; border-radius: 12px; }
  .ub-profile-text h1 { font-size: 24px; line-height: 32px; }
  .ub-profile-acts { width: 100%; }
  .ub-profile-acts .ub-btn:not(.is-icon) { flex: 1; }
  .ub-metrics { gap: 12px; }
  .ub-metric { padding: 16px; gap: 14px; }
  .ub-metric-row b { font-size: 24px; line-height: 32px; }
  .ub-table th, .ub-table td { padding-left: 16px; padding-right: 16px; }
  .ub-table th:nth-child(3), .ub-table td:nth-child(3) { display: none; }
}