/* ============================================================================
   ULTRABASIC LABS — the portals in the Untitled UI design language, worn in
   the studio's own colours and type
   Loaded last on the three portal pages. studio.css is the system's structure
   (the rail, the panel, the pages and their parts); this file is its skin,
   taken from Untitled UI: their grey scale, the success, warning, error and
   blue families, shadow-xs and the skeuomorphic edge on buttons, 8px controls
   and 12px cards with a hairline and an extra small shadow, underlined and
   segmented tabs, pill badges with a dot, grey-headed tables.

   The structure is Untitled UI's; the materials are the studio's. The grey
   scale is the brand's warm neutrals (stone, blush, cotton, the hairline and
   the edge, down to ink), the one primary action is ink, and ink marks
   counts, links, focus and selection (the foil is the brand colour), the status families are the brand's
   pastels with their inks, and the type is Merriweather Light for titles and
   numbers and Plus Jakarta Sans for everything else. The rail and section
   panel keep the stone.

   Most of the change is the tokens: studio.css draws everything from the
   --d-* names and the site's --font / --font-title, so re-pointing those
   inside the app moves every page at once. The component rules below are
   for the shapes a token cannot carry.
   ========================================================================= */

.d-app, .p-modal, .p-drawer, .p-menu, .p-toasts, .p-scrimlayer {
  /* Untitled UI's scale, in the brand's warm neutrals */
  --u25: #fdfcfa; --u50: #faf9f6; --u100: #f0ede6; --u200: #e9e6df; --u300: #d9d4ca; --u400: #b5b0a6;
  --u500: #8e8a82; --u600: #56534d; --u700: #3d3b37; --u800: #2b2926; --u900: #161616;
  /* The accent is ink. The brand's colour is the foil (--brand-foil in
     site.css), and the foil cannot be a flat accent: it needs area and a
     dark anchor, so it runs on progress fills and the brand marks only (see
     the foil notes in portal.css). Everything that was periwinkle — links,
     counts, focus, selection, the "busy" status — is the warm ink scale. */
  --ub25: #faf9f6; --ub50: #f0ede6; --ub100: #e9e6df; --ub200: #d9d4ca; --ub300: #b5b0a6; --ub500: #56534d; --ub600: #161616; --ub700: #161616;
  /* status: the brand's pastels, their inks, a mid tone for the dot */
  --uok50: #eaf8ee; --uok200: #bfe8cb; --uok500: #2fa866; --uok700: #1f7a4d;
  --uwarn50: #fdf6db; --uwarn200: #f6e39a; --uwarn500: #d9a400; --uwarn700: #8a6300;
  --uerr50: #fdeceb; --uerr200: #f6cfcc; --uerr500: #e5484d; --uerr700: #b4262b;
  --ublue50: #e8f8ff; --ublue200: #b5e5f7; --ublue500: #3b9bd0; --ublue700: #1f5f88;
  --ushadow-xs: 0 1px 2px rgba(22, 22, 22, .05);
  --ushadow-sm: 0 1px 3px rgba(22, 22, 22, .08), 0 1px 2px -1px rgba(22, 22, 22, .08);
  --ushadow-lg: 0 12px 16px -4px rgba(22, 22, 22, .08), 0 4px 6px -2px rgba(22, 22, 22, .03), 0 2px 2px -1px rgba(22, 22, 22, .04);
  --ushadow-xl: 0 20px 24px -4px rgba(22, 22, 22, .08), 0 8px 8px -4px rgba(22, 22, 22, .03), 0 3px 3px -1.5px rgba(22, 22, 22, .04);
  --uskeu: inset 0 0 0 1px rgba(22, 22, 22, .16), inset 0 -2px 0 rgba(22, 22, 22, .05);
  --uring: 0 0 0 4px var(--ub100);

  /* the studio's names, pointed at theirs */
  --d-ink: var(--u900);
  --d-ink-2: var(--u600);
  --d-ink-3: var(--u500);
  --d-line: var(--u200);
  --d-edge: var(--u300);
  --d-hover: var(--u50);
  --d-accent: var(--ub600);
  --d-accent-soft: var(--ub50);
  --d-accent-ink: var(--ub700);
  --d-r: 8px;
  --d-r-card: 12px;
  --d-r-win: 16px;
  --d-pop: var(--ushadow-lg), 0 0 0 1px rgba(22, 22, 22, .06);
  --ink: var(--u900); --ink-2: var(--u600); --ink-3: var(--u500);
  --accent: var(--ub600); --accent-soft: var(--ub50); --accent-ink: var(--ub700);
  --app-line: var(--u200);

}
/* Right of the rail and panel the page is white; the stone stays the quiet
   surface it has always been. */
.d-main, .p-modal, .p-drawer { --d-white: #fff; }
.d-app { color: var(--u900); }
body.p-app { background: #fff; }

/* ------------------------------------------------------------ rail/panel -- */
.d-rail-item { color: var(--u600); font-weight: 500; }
.d-rail-item.is-active { color: var(--u900); font-weight: 600; }
.d-rail-item.is-active .d-rail-icon { background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); }
.d-rail-badge { background: var(--ub600); }
.d-sub-head h2 { font-weight: var(--title-weight); letter-spacing: -.01em; }
.d-sub-item { font-size: 15px; font-weight: 600; color: var(--u700); border-radius: 6px; }
.d-sub-item svg { color: var(--u500); }
.d-sub-item:hover { background: rgba(255, 255, 255, .7); color: var(--u900); }
.d-sub-item.is-active { background: #fff; color: var(--u900); box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); }
.d-count { background: var(--u50); color: var(--u700); box-shadow: inset 0 0 0 1px var(--u200); font-weight: 500; }
.d-avatar { background: var(--u100); color: var(--u600); box-shadow: inset 0 0 0 1px rgba(22, 22, 22, .08); }

/* ---------------------------------------------------------------- top bar -- */
.d-top { border-bottom: 1px solid var(--u200); box-shadow: none; }
.d-top.is-scrolled { box-shadow: var(--ushadow-xs); }
.d-where-mark { background: #fff; color: var(--u500); box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); border-radius: 8px; }
.d-where-trail { font-size: 14px; }
.d-where-trail a, .d-where-trail li > span:not(.d-where-sep) { color: var(--u600); font-weight: 600; border-radius: 6px; }
.d-where-trail a:hover { background: var(--u50); color: var(--u700); }
.d-where-trail .is-now > span:not(.d-where-sep) { color: var(--u900); background: var(--u100); font-weight: 650; }
.d-where-sep { color: var(--u300); }
.d-search { background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u300); color: var(--u500); font-size: 16px; }
.d-search:hover { background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u400); }
.d-search svg { color: var(--u500); }
.d-search kbd { background: #fff; box-shadow: inset 0 0 0 1px var(--u200); color: var(--u400); font-weight: 500; border-radius: 4px; }
.d-bell { color: var(--u500); }
.d-bell:hover, .d-bell[aria-expanded="true"] { background: var(--u50); color: var(--u700); }
.d-bell-n { background: var(--d-you); }
.d-org { background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u300); }
.d-org-mark { background: var(--u900); border-radius: 6px; }
.d-new { background: var(--u900); box-shadow: var(--ushadow-xs), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .2); font-weight: 600; }
.d-new:hover, .d-new[aria-expanded="true"] { background: var(--u800); }

/* --------------------------------------------------------------- headings -- */
.d-title, .d-app .p-title { font-family: var(--font-title); font-size: 32px; line-height: 1.12; font-weight: var(--title-weight); letter-spacing: -.028em; color: var(--u900); }
.d-lede, .d-app .p-sub { font-size: 16px; color: var(--u600); }
.d-lede b, .d-app .p-sub b { color: var(--u900); font-weight: 600; }
.d-section-title, .d-app .p-section-head h2 { font-size: 18px; line-height: 28px; font-weight: 650; letter-spacing: -.01em; color: var(--u900); }
.d-section-title svg { color: var(--u500); }

/* ---------------------------------------------------------------- buttons -- */
.d-btn, .d-app .btn, .p-modal .btn, .p-drawer .btn {
  height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; gap: 6px;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.d-btn--sm, .d-app .btn--sm, .p-modal .btn--sm { height: 36px; padding: 0 12px; }
.d-btn--primary, .d-app .btn--dark, .p-modal .btn--dark, .p-drawer .btn--dark {
  background: var(--u900); color: #fff;
  box-shadow: var(--ushadow-xs), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .2);
}
.d-btn--primary:hover, .d-app .btn--dark:hover, .p-modal .btn--dark:hover, .p-drawer .btn--dark:hover { background: var(--u800); color: #fff; }
.d-btn--soft, .d-btn--line, .d-app .btn--ghost, .d-app .btn--tint, .p-modal .btn--ghost, .p-drawer .btn--ghost, .d-app .btn--quiet {
  background: #fff; color: var(--u700); box-shadow: var(--ushadow-xs), var(--uskeu);
}
.d-btn--soft:hover, .d-btn--line:hover, .d-app .btn--ghost:hover, .d-app .btn--tint:hover, .p-modal .btn--ghost:hover, .p-drawer .btn--ghost:hover, .d-app .btn--quiet:hover,
.d-btn--soft[aria-expanded="true"], .d-btn--line[aria-expanded="true"] { background: var(--u50); color: var(--u800); }
.d-app .btn--danger, .p-modal .btn--danger { background: var(--uerr500); color: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(22, 22, 22, .05); }
.d-app .btn--danger:hover, .p-modal .btn--danger:hover { background: #d92d20; }
.d-btn:focus-visible, .d-app .btn:focus-visible, .p-modal .btn:focus-visible { outline: none; box-shadow: var(--ushadow-xs), var(--uring); }
.d-iconbtn { color: var(--u400); border-radius: 8px; }
.d-iconbtn:hover, .d-iconbtn[aria-expanded="true"] { background: var(--u50); color: var(--u600); }

/* ------------------------------------------------------ tabs and filters -- */
/* Chips become Untitled's gray button tabs: quiet until chosen, the chosen
   one on a grey fill. Counts are small pill badges. */
.d-chips { gap: 4px; }
.d-chip, .d-app .p-chip, .d-app .p-tab {
  height: 40px; padding: 0 12px; border-radius: 6px; background: transparent; box-shadow: none;
  font-size: 14px; font-weight: 600; color: var(--u500);
}
.d-chip:hover, .d-app .p-chip:hover, .d-app .p-tab:hover { background: var(--u50); color: var(--u700); }
.d-chip.is-on, .d-app .p-chip.is-active, .d-app .p-tab.is-active { background: var(--u50); color: var(--u700); box-shadow: inset 0 0 0 1px var(--u200); }
.d-chip-n, .d-app .p-chip-n, .d-app .p-tab-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 8px; margin-left: 2px;
  border-radius: 999px; background: var(--u100); color: var(--u700); font-size: 12px; font-weight: 500; opacity: 1;
}
.d-chip.is-on .d-chip-n { background: #fff; box-shadow: inset 0 0 0 1px var(--u200); }
.d-filter, .d-app .p-search .p-input {
  height: 40px; border-radius: 8px; background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u300); color: var(--u500); font-size: 16px;
}
.d-filter:focus-within { box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--ub300), var(--uring); }
.d-filter input { font-size: 16px; color: var(--u900); }
.d-filter input::placeholder { color: var(--u500); }

/* ------------------------------------------------------------------ lists -- */
/* The list becomes Untitled's table card: a bordered card, a grey header
   row of 12px labels, 72px rows on hairlines. */
.d-list { margin-top: 20px; border-radius: 12px; background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); overflow: hidden; }
.d-lhead { padding: 12px 24px; border-bottom: 1px solid var(--u200); background: var(--u50); font-size: 12px; font-weight: 500; color: var(--u600); }
.d-sort { color: var(--u600); }
.d-sort.is-on { color: var(--u700); }
.d-item { padding: 16px 24px; min-height: 72px; border-bottom: 1px solid var(--u200); }
.d-item:last-child { border-bottom: 0; }
.d-item:hover { background: var(--u50); }
.d-cell { font-size: 14px; color: var(--u600); }
.d-who-text b { font-size: 14px; font-weight: 500; color: var(--u900); }
.d-who-text span, .d-meta { font-size: 14px; color: var(--u600); }
.d-meta { font-size: 13px; }
.d-money { font-weight: 500; color: var(--u900); }
.d-late { color: var(--uerr700); }
.d-mark { border-radius: 10px; width: 40px; height: 40px; font-size: 14px; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(22, 22, 22, .06); }
.d-quick { border-radius: 10px; background: #fff; box-shadow: var(--ushadow-lg), 0 0 0 1px var(--u200); }
.d-foot { color: var(--u600); font-size: 14px; }

/* the older tables, the same */
.d-app .p-tablewrap { border-radius: 12px; background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); }
.d-app .p-table th { padding: 12px 24px; background: var(--u50); border-bottom: 1px solid var(--u200); font-size: 12px; font-weight: 500; color: var(--u600); }
.d-app .p-table td { padding: 16px 24px; font-size: 14px; color: var(--u600); border-bottom-color: var(--u200); }
.d-app .p-table .p-t-strong { font-size: 14px; font-weight: 500; color: var(--u900); }
.d-app .p-table .p-t-sub { font-size: 14px; color: var(--u600); }

/* ----------------------------------------------------------------- badges -- */
.d-app .p-badge, .p-modal .p-badge, .p-drawer .p-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;
  background: var(--u50); color: var(--u700); box-shadow: inset 0 0 0 1px var(--u200);
}
.d-app .p-badge::before, .p-modal .p-badge::before, .p-drawer .p-badge::before { width: 6px; height: 6px; margin: 0; background: var(--u500); }
.d-app .p-badge--ok { background: var(--uok50); color: var(--uok700); box-shadow: inset 0 0 0 1px var(--uok200); }
.d-app .p-badge--ok::before { background: var(--uok500); }
.d-app .p-badge--warn { background: var(--uwarn50); color: var(--uwarn700); box-shadow: inset 0 0 0 1px var(--uwarn200); }
.d-app .p-badge--warn::before { background: var(--uwarn500); }
.d-app .p-badge--danger { background: var(--uerr50); color: var(--uerr700); box-shadow: inset 0 0 0 1px var(--uerr200); }
.d-app .p-badge--danger::before { background: var(--uerr500); }
.d-app .p-badge--info { background: var(--ublue50); color: var(--ublue700); box-shadow: inset 0 0 0 1px var(--ublue200); }
.d-app .p-badge--info::before { background: var(--ublue500); }
.d-app .p-badge--busy { background: var(--ub50); color: var(--ub700); box-shadow: inset 0 0 0 1px var(--ub200); }
.d-app .p-badge--busy::before { background: var(--ub500); }
.d-app .p-badge--draft { background: var(--u50); color: var(--u600); }
.d-app .p-badge--draft::before { background: var(--u400); }
/* the studio's small tags follow */
.d-pill { border-radius: 999px; font-weight: 500; font-size: 12px; box-shadow: inset 0 0 0 1px currentColor; }

/* ------------------------------------------------------------------ cards -- */
/* One card: white, a hairline, the extra small shadow, 12px corners. The
   studio's many cards (blocks, tiles, side cards, panels) all take it. */
.pr-block, .cp-side-card, .cp-proj, .cp-doc-paper, .pr-preview, .pj-overview, .cpp-update,
.st-card, .pa-app .pa-facts, .d-app .p-card, .d-app .p-stat, .d-app .k-side, .d-app .p-empty, .ub-card {
  border-radius: 12px; background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); border: 0;
}
.cp-side-card--line { background: #fff; }
.pr-preview, .cp-doc-paper { background: var(--u50); }
.d-app .p-card--cream, .d-app .p-stat--hero { background: #fff; color: var(--u900); }
.pa-app .pa-facts { padding: 4px 24px; }
.cp-side-card { padding: 20px 24px; }
.d-figs dd, .cp-side-num, .pj-ov-count b, .d-app .p-stat-num { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: -.025em; color: var(--u900); }

.d-figs > div { border-radius: 12px; background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); padding: 20px 24px; }
.d-figs { gap: 24px; }
.d-figs dt { font-size: 14px; font-weight: 500; color: var(--u600); }
.d-figs dd { font-size: 30px; line-height: 38px; margin-top: 8px; }
.d-figs .is-due dd { color: var(--u900); }
.d-figs .is-late dd, .d-figs .is-danger dd { color: var(--uerr700); }
.pr-block-title, .cp-side-cap { font-size: 16px; font-weight: 600; color: var(--u900); }
.pr-live { border-radius: 12px; background: var(--uwarn50); color: var(--uwarn700); box-shadow: inset 0 0 0 1px var(--uwarn200); font-size: 14px; }
.pr-live--late { background: var(--uerr50); color: var(--uerr700); box-shadow: inset 0 0 0 1px var(--uerr200); }

/* marks and featured icons */
.cp-todo-mark { border-radius: 50%; }
.d-datetile { border-radius: 8px; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); }
.d-datetile small { color: var(--d-you); }
.d-filemark { border-radius: 4px 12px 4px 4px; }
/* The plan bar: done is the one solid colour, the milestone in hand is a
   moving stripe, so a bar with one left to go never reads as full. */
/* The projects list's bar fills with the foil, the portal's progress recipe;
   a finished project keeps its green. */
.pj-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--brand-foil)); background-size: 900px 100%; }
.pj-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--brand-foil)); background-size: 900px 100%; }
.pj-bar.is-full::-webkit-progress-value { background: var(--uok500); }
.pj-bar.is-full::-moz-progress-bar { background: var(--uok500); }
/* The empty state's mark, lilac before, on the warm grey. */
.d-app .p-empty-mark, .p-modal .p-empty-mark { background: var(--u100); color: var(--u700); }
.pj-ov-bar { gap: 3px; }
.pj-ov-bar span { border-radius: 999px; background: var(--u200); }
.pj-ov-bar .is-done, .pj-ov-bar span.is-done { background: var(--u900); }
.pj-ov-bar .is-next {
  background: var(--u100) linear-gradient(-45deg, var(--u300) 25%, transparent 25% 50%, var(--u300) 50% 75%, transparent 75%);
  background-size: 10px 10px;
  animation: pj-bar-go 1.2s linear infinite;
}
.pj-ov-bar .is-late { background: var(--uerr500); }
@keyframes pj-bar-go { to { background-position: 10px 0; } }
@media (prefers-reduced-motion: reduce) { .pj-ov-bar .is-next { animation: none; } }

/* ------------------------------------------------------------------ forms -- */
.d-app .p-input, .d-app .p-select, .d-app .p-textarea, .p-modal .p-input, .p-modal .p-select, .p-modal .p-textarea,
.p-drawer .p-input, .p-drawer .p-select, .p-drawer .p-textarea, .d-app .k-note, .ub-input {
  border: 0; border-radius: 8px; background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u300);
  font-size: 16px; color: var(--u900);
}
.d-app .p-input, .d-app .p-select, .p-modal .p-input, .p-modal .p-select, .p-drawer .p-input, .p-drawer .p-select { height: 44px; padding: 0 14px; }
.d-app .p-input:focus, .d-app .p-select:focus, .d-app .p-textarea:focus, .p-modal .p-input:focus, .p-modal .p-select:focus, .p-modal .p-textarea:focus,
.p-drawer .p-input:focus, .p-drawer .p-textarea:focus, .d-app .k-note:focus {
  outline: none; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--ub300), var(--uring);
}
.d-app .p-input::placeholder, .d-app .p-textarea::placeholder, .p-modal .p-input::placeholder, .p-modal .p-textarea::placeholder { color: var(--u500); }
.d-app .p-field-label, .p-modal .p-field-label, .p-drawer .p-field-label { font-size: 14px; font-weight: 500; color: var(--u700); }
.d-app .p-field-hint, .p-modal .p-field-hint, .pr-hint { font-size: 14px; color: var(--u600); }
.pr-in:hover { background: var(--u50); }
.pr-in:focus { border-color: var(--ub300); box-shadow: var(--uring); }
.pr-num { background: var(--u50); box-shadow: inset 0 0 0 1px var(--u200); }

/* --------------------------------------------------------- menus, windows -- */
.p-menu { border-radius: 8px; padding: 4px 0; box-shadow: var(--ushadow-lg), 0 0 0 1px var(--u200); background: #fff; }
.p-menu button { margin: 1px 6px; width: calc(100% - 12px); padding: 9px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--u700); }
.p-menu button:hover { background: var(--u50); color: var(--u900); }
.p-menu button svg { color: var(--u500); }
.p-menu .is-danger { color: var(--uerr700); }
.p-menu .is-danger svg { color: var(--uerr500); }
.p-menu .is-danger:hover { background: var(--uerr50); }
.p-menu hr { border-color: var(--u200); margin: 4px 0; }
.p-menu-head { padding: 12px 16px; border-bottom: 1px solid var(--u200); margin-bottom: 4px; }
.p-menu-head strong { font-size: 14px; font-weight: 600; color: var(--u700); }
.p-menu-head span { font-size: 14px; color: var(--u600); }
.p-menu-hint { font-style: normal; color: var(--u500); font-size: 12px; font-weight: 500; }
.p-menu--dark { background: #fff; }
.p-menu--dark button { color: var(--u700); }
.p-menu--dark .p-menu-head strong { color: var(--u700); }

.p-modal, .p-drawer { border-radius: 16px; box-shadow: var(--ushadow-xl); }
.p-modal-head h2, .p-drawer-head h2 { font-family: var(--font-title); font-size: 22px; line-height: 28px; font-weight: var(--title-weight); letter-spacing: -.02em; color: var(--u900); }
.p-modal-foot, .p-drawer-foot { border-top: 1px solid var(--u200); }
.p-toast { background: #fff; color: var(--u900); box-shadow: var(--ushadow-lg), 0 0 0 1px var(--u200); border-radius: 12px; font-size: 14px; font-weight: 600; }
.p-toast-close { color: var(--u400); }
.p-toast--ok::before { background: var(--uok500); }
.p-toast--danger::before, .p-toast--bad::before { background: var(--uerr500); }
.p-toast--warn::before { background: var(--uwarn500); }

/* ----------------------------------------------------------------- empty -- */
.d-drop { border: 0; border-radius: 12px; background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); min-height: 320px; }
.d-drop-art { width: 48px; height: 48px; border-radius: 50%; background: var(--ub100); color: var(--ub600); box-shadow: 0 0 0 8px var(--ub50); margin-bottom: 12px; }
.d-drop-art svg { width: 24px; height: 24px; }
.d-drop h3 { font-size: 16px; font-weight: 600; color: var(--u900); }
.d-drop p { font-size: 14px; color: var(--u600); }
.d-drop p a, .d-drop p button { color: var(--ub700); text-decoration: none; font-weight: 600; }
.d-app .p-empty-mark { width: 48px; height: 48px; border-radius: 50%; background: var(--ub100); color: var(--ub600); box-shadow: 0 0 0 8px var(--ub50); }

/* ------------------------------------------------------------- the rest -- */
.pr-facts a, .pj-facts a, .pj-facts .pj-link, .cp-side-link { color: var(--ub700); font-weight: 600; }
.pr-sep, .pj-sep { color: var(--u300); }
.pr-act-dot { background: var(--u200); }
.pr-totals .is-grand { color: var(--u900); }
.d-app .k-feed-dot { background: var(--u300); }
.d-rail-badge { background: var(--ub600); }
.cp-todo:hover, a.pr-act:hover { background: var(--u50); }
.cp-todos, .ap-list { border-color: var(--u200); }
.d-app .t-queue { background: var(--u50); }
.d-app:not(.is-nosub) .t-queue { background: #fff; }
.d-app .t-item.is-active, .d-app .t-item[aria-current] { background: #fff; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--u200); }

/* ---------------------------------------------------- record tabs, desks -- */
/* A record's sections are Untitled's underline tabs, as on their detail
   pages; the lists' filters stay the grey button tabs above. */
.d-app .k-tabs { gap: 12px; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--u200); scrollbar-width: none; }
.d-app .k-tab { height: auto; padding: 0 4px 12px; border-radius: 0; background: transparent; color: var(--u500); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.d-app .k-tab:hover { background: transparent; color: var(--u700); }
.d-app .k-tab.is-on { background: transparent; color: var(--u900); border-bottom-color: var(--u900); }
.d-app .k-tab-n, .d-app .k-tab.is-on .k-tab-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 8px; margin-left: 6px; border-radius: 999px; background: var(--u50); color: var(--u700); box-shadow: inset 0 0 0 1px var(--u200); font-size: 12px; font-weight: 500; opacity: 1; }
.d-app .k-tab.is-on .k-tab-n { background: var(--u900); color: #fff; box-shadow: none; }
.d-app .k-mark, .d-app .k-person .k-mark { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(22, 22, 22, .06); }
.d-app .k-rhead-name { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: -.028em; }
.d-app .k-side { padding: 20px 24px; }
.d-app .k-side-head h2 { font-size: 16px; font-weight: 600; color: var(--u900); }
.d-app .k-side-link { color: var(--ub700); font-weight: 600; }
.d-app .k-dval:hover { background: var(--u50); }
.d-app .k-dinput { border-radius: 8px; box-shadow: var(--ushadow-xs), inset 0 0 0 1px var(--ub300), var(--uring); }
.d-app .k-rowlink-main b { font-size: 14px; font-weight: 500; color: var(--u900); }
.d-app .k-rowlink-main span, .d-app .k-rowlink-meta { font-size: 14px; color: var(--u600); }
.d-app .k-feed-day h3 { font-size: 14px; font-weight: 600; color: var(--u700); }

.d-app .t-tab { height: 40px; padding: 0 12px; border-radius: 6px; background: transparent; color: var(--u500); font-weight: 600; font-size: 14px; }
.d-app .t-tab:hover { background: var(--u50); color: var(--u700); }
.d-app .t-tab.is-on { background: var(--u50); color: var(--u700); box-shadow: inset 0 0 0 1px var(--u200); }
.d-app .t-tab-n, .d-app .t-tab.is-on .t-tab-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--u100); color: var(--u700); font-size: 12px; font-weight: 500; opacity: 1; }
.d-app .t-hello-title, .d-app .t-sheet-title { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: -.025em; }
.d-app .t-compose { border-radius: 12px; box-shadow: var(--ushadow-lg), 0 0 0 1px var(--u200); }