/* ==========================================================================
   Tadpole UI widgets: the product, scoped under .tp-app so it never leaks
   into the marketing site, plus the neutral frame each widget plays in.

   Sections:
   1. Slot, frame, canvas and cursor (the same in every theme)
   2. Natural sizes: --dw by --dh for each widget, by the width of its slot
   3. .tp-app: the app's own variables and a scoped reset
   4. Ported Tadpole component CSS (frontend origin/main, file named above each)
   5. Widget layout glue (what react-big-calendar, Radix and the page shell
      would otherwise provide), one block per widget
   Utilities (Tailwind) come from ui-tw.css, built by tools/build-ui-tw.sh.
   Widgets are pictures that play: nothing inside them hovers, focuses or
   takes a click, so this file has no :hover or :focus rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Slot, frame, canvas and cursor
   -------------------------------------------------------------------------- */
/* The slot reserves its height before ui.js runs: ::before takes the widget's
   aspect ratio (section 2), so nothing below it ever moves (no layout shift). */
:root { --tp-frame-shadow: 0 0 0 1px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .06), 0 18px 40px -18px rgba(15, 23, 42, .32); }
[data-tp-widget] {
  container: tps / inline-size;
  position: relative; display: block; min-width: 0;
}
[data-tp-widget]::before {
  --max: 1.15;
  content: ""; display: block;
  width: min(100%, calc(var(--dw) * var(--max) * 1px)); margin-inline: auto;
  aspect-ratio: var(--dw) / var(--dh);
}
/* The frame: a plain window, the same in every theme. ui.js sets its width. */
.tp-frame {
  position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: var(--tp-frame-shadow);
  pointer-events: none; cursor: default; user-select: none; -webkit-user-select: none;
}
.tp-frame--phone { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
/* A still product picture written into a page: the same frame, at its own size. */
.tp-still { position: relative; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--tp-frame-shadow); container: tpw / inline-size; }
.tp-still > .tp-window { height: auto; }
.tp-frame--scene { background: #EEF0F3; }
/* The canvas: the widget at its natural size, scaled to the frame (ui.js). */
.tp-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; container: tpw / inline-size; }
.tp-window { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; text-align: left; }
.tp-frame--phone .tp-window, .tp-frame--scene .tp-window { background: none; }
.tp-frame--phone .tp-window { overflow: visible; }

.tp-cursor {
  position: absolute; left: 0; top: 0; z-index: 70;
  margin: -4px 0 0 -6px; opacity: 0; transition: opacity 200ms ease;
}
.tp-cursor.is-on { opacity: 1; }
.tp-cursor svg { display: block; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transition: transform 120ms ease; transform-origin: 6px 4px; }
.tp-cursor.is-down svg { transform: scale(.84); }
.tp-cursor__ring {
  position: absolute; left: 6px; top: 4px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 2px solid rgba(93, 126, 242, .7); animation: tp-ring 480ms cubic-bezier(.165, .84, .44, 1) forwards;
}
@keyframes tp-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* --------------------------------------------------------------------------
   2. Natural sizes. Each widget is drawn --dw by --dh (CSS pixels) and scaled
   to its slot, up to --max. Narrow slots (under 520 px) get the phone layout,
   wide ones the desktop layout, and full-width slots (960 px and up) the
   roomiest layout. Heights hold the tallest moment of each loop.
   -------------------------------------------------------------------------- */
[data-tp-widget="claude"]::before { --dw: 600; --dh: 560; }
[data-tp-widget="calendar"]::before { --dw: 720; --dh: 464; }
[data-tp-widget="availability"]::before { --dw: 640; --dh: 448; }
[data-tp-widget="booking"]::before { --dw: 780; --dh: 780; }
[data-tp-widget="formbuilder"]::before { --dw: 900; --dh: 800; }
[data-tp-widget="publicform"]::before { --dw: 360; --dh: 700; --max: 1; }
[data-tp-widget="billing"]::before { --dw: 720; --dh: 648; }
[data-tp-widget="plan"]::before { --dw: 600; --dh: 368; }
[data-tp-widget="payroll"]::before { --dw: 720; --dh: 650; }
[data-tp-widget="rates"]::before { --dw: 600; --dh: 314; }
[data-tp-widget="inbox"]::before { --dw: 760; --dh: 756; }
[data-tp-widget="reply"]::before { --dw: 600; --dh: 668; }
[data-tp-widget="compose"]::before { --dw: 560; --dh: 614; }
[data-tp-widget="sync"]::before { --dw: 680; --dh: 646; }
[data-tp-widget="people"]::before { --dw: 780; --dh: 790; }
[data-tp-widget="onboarding"]::before { --dw: 640; --dh: 424; }
[data-tp-widget="crm"]::before { --dw: 780; --dh: 490; }
@container tps (max-width: 519px) {
  [data-tp-widget]::before { --max: 1.06; }
  [data-tp-widget="claude"]::before { --dw: 360; --dh: 560; }
  [data-tp-widget="calendar"]::before { --dw: 400; --dh: 512; }
  [data-tp-widget="availability"]::before { --dw: 380; --dh: 452; }
  [data-tp-widget="booking"]::before { --dw: 380; --dh: 796; }
  [data-tp-widget="formbuilder"]::before { --dw: 380; --dh: 880; }
  [data-tp-widget="billing"]::before { --dw: 380; --dh: 692; }
  [data-tp-widget="plan"]::before { --dw: 380; --dh: 446; }
  [data-tp-widget="payroll"]::before { --dw: 380; --dh: 620; }
  [data-tp-widget="rates"]::before { --dw: 380; --dh: 326; }
  [data-tp-widget="inbox"]::before { --dw: 380; --dh: 782; }
  [data-tp-widget="reply"]::before { --dw: 380; --dh: 736; }
  [data-tp-widget="compose"]::before { --dw: 380; --dh: 646; }
  [data-tp-widget="sync"]::before { --dw: 380; --dh: 664; }
  [data-tp-widget="people"]::before { --dw: 380; --dh: 746; }
  [data-tp-widget="onboarding"]::before { --dw: 380; --dh: 520; }
  [data-tp-widget="crm"]::before { --dw: 380; --dh: 474; }
}
@container tps (min-width: 960px) {
  [data-tp-widget="calendar"]::before { --dw: 1040; --dh: 464; }
  [data-tp-widget="availability"]::before { --dw: 1040; --dh: 448; }
  [data-tp-widget="booking"]::before { --dw: 1000; --dh: 704; }
  [data-tp-widget="formbuilder"]::before { --dw: 1100; --dh: 784; }
  [data-tp-widget="billing"]::before { --dw: 1040; --dh: 656; }
  [data-tp-widget="payroll"]::before { --dw: 1040; --dh: 650; }
  [data-tp-widget="inbox"]::before { --dw: 1040; --dh: 756; }
  [data-tp-widget="sync"]::before { --dw: 1040; --dh: 646; }
  [data-tp-widget="people"]::before { --dw: 1100; --dh: 750; }
  [data-tp-widget="crm"]::before { --dw: 1040; --dh: 466; }
}

/* --------------------------------------------------------------------------
   3. The app: variables from frontend/src/index.css, and a scoped reset
   -------------------------------------------------------------------------- */
.tp-app {
  --green-rgb: 0, 197, 107; --green: rgb(var(--green-rgb));
  --primary: var(--green); --primary-rgb: var(--green-rgb);
  --secondary: #606c80; --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0;
  --grey: #b2b6c5; --error: #ee787a; --golden: #e6a25b; --golden-rgb: 230, 162, 91; --lightgreen: #66d899;
  --orange-rgb: 237, 137, 65; --orange: rgb(var(--orange-rgb));
  --purple: #90a9fb; --purple-rgb: 144, 169, 251;
  --indigo: #5d7ef2; --indigo-rgb: 93, 126, 242;
  --pink: #ffc8c6; --pink-rgb: 255, 209, 207;
  --navy: #458abb; --navy-rgb: 69, 138, 187;
  --dark-blue: #62acff; --dark-blue-rgb: 98, 172, 255;
  --red: #d86560; --red-rgb: 216, 101, 96;
  --blue: #7bfbf3; --blue-rgb: 144, 251, 245;
  --slate-blue: #abd5de; --slate-blue-rgb: 171, 213, 222;
  --yellow: #fbdf7b; --yellow-rgb: 251, 228, 144;
  --gray: #f4f5f6; --gray-rgb: 244, 245, 246;
  --medium-gray: #d9d9d9; --medium-gray-rgb: 217, 217, 217;
  --dark-gray: #606c80; --dark-gray-rgb: 96, 108, 128;
  --skyblue: #3db7e3; --skyblue-rgb: 61, 183, 227;
  --color-rgb: var(--medium-gray-rgb);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; letter-spacing: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-align: left; color: #000;
}
.tp-app, .tp-app *, .tp-app ::before, .tp-app ::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
.tp-app :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; text-wrap: initial; }
.tp-app :is(p, blockquote, figure, dl, dd, ul, ol, hr) { margin: 0; }
.tp-app :is(ul, ol) { list-style: none; padding: 0; }
.tp-app table { border-collapse: collapse; text-indent: 0; border-color: inherit; }
.tp-app :is(th, td) { padding: 0; text-align: inherit; }
.tp-app th { font-weight: inherit; }
.tp-app :is(b, strong) { font-weight: bolder; }
.tp-app hr { height: 0; border-top-width: 1px; color: inherit; }
.tp-app :is(svg, img) { display: block; }
.tp-app .tp-i { width: 15px; height: 15px; flex: none; }
.tp-app [hidden] { display: none !important; }
.tp-app .small-text { font-weight: 500; font-size: 12px; line-height: 16px; }
.tp-app .header { font-family: "Montserrat", sans-serif; }
.tp-app .tp-ph { color: #9ca3af; }
.tp-app .tp-glow { animation: tp-glow 1.2s ease-out; }
@keyframes tp-glow { 0% { box-shadow: 0 0 0 0 rgba(0, 197, 107, .55); } 100% { box-shadow: 0 0 0 10px rgba(0, 197, 107, 0); } }
.tp-app .tp-spinner { display: block; width: 18px; height: 18px; margin: 0 auto; border-radius: 50%; border: 2.5px solid #d1d5db; border-top-color: #5d7ef2; animation: tp-spin 700ms linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-app .tp-status { display: inline-flex; justify-content: center; }
.tp-app .tp-status svg { width: 20px; height: 20px; }
.tp-app .tp-status--paid { color: var(--green); }
.tp-app .tp-status--failed { color: var(--red); }
.tp-app .tp-status--pending { color: #FFB341; }
/* What a typed-in field looks like while the story types in it (the app's focus ring). */
.tp-app .tp-focus { border-color: #a5b4fc !important; box-shadow: 0 0 0 3px rgba(199, 210, 254, .5); }
.tp-app .is-sel { background: rgba(93, 126, 242, .18); }

/* A quiet line at the foot of a window that says what just happened. */
.tp-app .tp-foot {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 9px 14px; border-radius: 10px; background: #F3F6F4;
  color: #1f2937; font-size: 14px; font-weight: 500; line-height: 1.35;
}
.tp-app .tp-foot__pip { width: 9px; height: 9px; border-radius: 50%; background: #00C56B; flex: none; box-shadow: 0 0 0 4px rgba(0, 197, 107, .18); }
.tp-app .tp-foot__pip--gray { background: #9CA3AF; box-shadow: 0 0 0 4px rgba(156, 163, 175, .2); }

/* Index.css .input (Tailwind @apply, written out) */
/* :where() keeps .input below the utilities, as @layer components does in the app. */
:where(.tp-app) .input {
  width: 100%; line-height: 1.75rem; background: #fff; border: 1px solid #d1d5db; border-radius: .375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); padding: .5rem .75rem; font-size: .875rem;
}
:where(.tp-app) .input-label { display: block; font-size: .875rem; font-weight: 500; line-height: 1.5rem; color: #262626; }

/* --------------------------------------------------------------------------
   4. Ported Tadpole component CSS
   -------------------------------------------------------------------------- */
/* components/Button/index.css */
.tp-app .button {
  display: inline-flex; justify-content: center; align-items: center; gap: .35rem;
  padding: .5rem 1.5rem; border-radius: 8px; border: 1px solid transparent;
  line-height: 20px; font-weight: 600; font-size: 14px; text-align: center; white-space: nowrap;
  background-color: var(--button-color) !important; color: var(--button-color-contrast) !important;
  transition: all .15s ease-in;
}
.tp-app .button svg { width: 15px; height: 15px; }
.tp-app .button--xs { padding: .1rem .75rem; border-radius: 6px; font-size: 11px; }
.tp-app .button--small { padding: .25rem .9rem; border-radius: 6px; font-size: 12px; }
.tp-app .button--green { --button-color: var(--primary); --button-color-rgb: var(--primary-rgb); --button-color-contrast: var(--white); }
.tp-app .button--gray { --button-color: var(--gray); --button-color-rgb: var(--gray-rgb); --button-color-contrast: var(--black); }
.tp-app .button--purple { --button-color: var(--purple); --button-color-rgb: var(--purple-rgb); --button-color-contrast: var(--white); }
.tp-app .button--dark-blue { --button-color: var(--dark-blue); --button-color-rgb: var(--dark-blue-rgb); --button-color-contrast: var(--white); }
.tp-app .button--dark-gray { --button-color: var(--dark-gray); --button-color-rgb: var(--dark-gray-rgb); --button-color-contrast: var(--white); }
.tp-app .button--skyblue { --button-color: var(--skyblue); --button-color-rgb: var(--skyblue-rgb); --button-color-contrast: var(--white); }
.tp-app .button--black { --button-color: var(--black); --button-color-rgb: var(--black-rgb); --button-color-contrast: var(--white); }
.tp-app .button--hollow { background-color: transparent !important; border-color: var(--button-color) !important; color: var(--button-color) !important; }
.tp-app .dialog--actions { margin-top: 1.25rem; display: flex; flex-direction: row; gap: .5rem; }

/* components/Avatar/index.css */
.tp-app .avatar--root { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; overflow: hidden; border-radius: 100%; border: 1px solid black; background-color: white; }
.tp-app .avatar--default { width: 45px; height: 45px; }
.tp-app .avatar--fallback { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: white; color: var(--green); font-size: 15px; line-height: 1; font-weight: 500; }

/* components/PersonPill/index.css */
.tp-app .person-pill { display: inline-block; max-width: 100%; overflow: hidden; padding: 0 .5rem; border: 1px solid; border-radius: 9999px; font-size: 11px; font-weight: 500; line-height: 18px; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.tp-app .person-pill--green { border-color: rgba(var(--green-rgb), .35); background-color: rgba(var(--green-rgb), .08); color: #07854b; }
.tp-app .person-pill--blue { border-color: rgba(var(--dark-blue-rgb), .45); background-color: rgba(var(--dark-blue-rgb), .1); color: #2b77cf; }
.tp-app .person-pill--gold { border-color: rgba(var(--golden-rgb), .5); background-color: rgba(var(--golden-rgb), .12); color: #a35f17; }
.tp-app .person-pill--orange { border-color: rgba(var(--orange-rgb), .4); background-color: rgba(var(--orange-rgb), .08); color: #c0601c; }
.tp-app .person-pill--gray { border-color: #d1d5db; background-color: #f3f4f6; color: #4b5563; }

/* components/Tag/TagChip/index.css */
.tp-app .tag { display: inline-block; padding: .6rem 1rem; border-radius: 8px; font-size: 14px; background-color: rgb(var(--color-rgb)); color: rgb(var(--black-rgb)); }
.tp-app .tag.purple { --color-rgb: var(--purple-rgb); color: var(--white); }
.tp-app .tag.blue { --color-rgb: var(--dark-blue-rgb); color: var(--white); }
.tp-app .tag.medium { padding: .45rem 1rem; border-radius: 8px; font-size: .875em; font-weight: bold; }

/* components/MessageDeliveryTag/index.css */
.tp-app .delivery-tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: 11px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.tp-app .delivery-tag.sent { color: rgb(var(--indigo-rgb)); background-color: rgba(var(--indigo-rgb), .08); border: 1px solid rgba(var(--indigo-rgb), .3); }

/* components/ToggleGroup/index.css */
.tp-app .toggle-group { --toggle-group-color: var(--purple); --toggle-group-color-rgb: var(--purple-rgb); --toggle-group--radius: 4px; display: inline-flex; border-radius: var(--toggle-group--radius); }
.tp-app .toggle-group--green { --toggle-group-color: var(--green); --toggle-group-color-rgb: var(--green-rgb); }
.tp-app .toggle-group--item { padding: .55rem .75rem; color: var(--toggle-group-color); background-color: transparent; border: 2px solid var(--toggle-group-color); display: flex; font-size: 15px; font-weight: 600; line-height: 1; align-items: center; justify-content: center; transition: background-color .2s, color .2s; }
.tp-app .toggle-group--item:first-child { border-top-left-radius: var(--toggle-group--radius); border-bottom-left-radius: var(--toggle-group--radius); }
.tp-app .toggle-group--item:not(:first-child) { margin-left: -2px; }
.tp-app .toggle-group--item:last-child { border-top-right-radius: var(--toggle-group--radius); border-bottom-right-radius: var(--toggle-group--radius); }
.tp-app .toggle-group--item[data-state="on"] { background-color: var(--toggle-group-color); color: var(--white); }

/* components/Dialog/index.css: the panel look, used by Message Students. */
.tp-app .dialog-content { background-color: white; border-radius: 6px; padding: 25px; }

/* components/Dashboard/PeoplePanel/index.css (media queries become container queries) */
.tp-app .people-panel__search { position: relative; flex: 1; min-width: 0; }
.tp-app .people-panel__search-icon { position: absolute; top: 50%; left: .75rem; transform: translateY(-50%); color: #9ca3af; }
.tp-app .people-panel__tabs { display: flex; gap: 1.75rem; margin-top: 1.25rem; overflow: hidden; box-shadow: inset 0 -1px 0 #e5e7eb; }
.tp-app .people-panel__tab { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem 0 .6rem; border-bottom: 3px solid transparent; color: #9a9a9a; font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .15s ease, border-color .15s ease; }
.tp-app .people-panel__tab[data-state="active"] { color: var(--black); border-bottom-color: var(--skyblue); }
.tp-app .people-panel__count { min-width: 1.5rem; padding: 0 .4rem; border-radius: 9999px; background-color: #ececec; color: #6b7280; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.tp-app .people-panel__tab[data-state="active"] .people-panel__count { background-color: rgba(var(--skyblue-rgb), .15); color: #1d8ab3; }
.tp-app .people-panel__tab--onboarding[data-state="active"] { border-bottom-color: var(--purple); }
.tp-app .people-panel__tab--onboarding[data-state="active"] .people-panel__count { background-color: rgba(var(--purple-rgb), .15); color: #6d3fb6; }
.tp-app .people-panel__body { margin-top: 1rem; }
.tp-app .people-panel__empty { padding: 2.5rem 1rem; color: #6b7280; font-size: 14px; text-align: center; }
.tp-app .people-panel__table-wrap { overflow: hidden; border: 1px solid #e5e7eb; border-radius: .75rem; background-color: var(--white); }
.tp-app .people-panel__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tp-app .people-panel__table th { padding: .75rem; border-bottom: 1px solid #e5e7eb; color: #374151; font-weight: 600; text-align: left; white-space: nowrap; }
.tp-app .people-panel__table td { padding: .75rem; border-bottom: 1px solid #f1f1f1; color: #1f2937; vertical-align: middle; }
.tp-app .people-panel__table tbody tr:last-child td { border-bottom: none; }
.tp-app .people-panel__person { display: flex; align-items: center; gap: .75rem; }
.tp-app .people-panel__person .avatar--default { flex-shrink: 0; width: 2rem; height: 2rem; }
.tp-app .people-panel__person .avatar--root { border-color: #d1d5db; }
.tp-app .people-panel__person .avatar--fallback { font-size: 12px; }
.tp-app .people-panel__name { display: block; max-width: 14rem; overflow: hidden; color: #111827; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.tp-app .people-panel__family { display: flex; flex-wrap: nowrap; gap: 4px; max-width: 14rem; overflow: hidden; }
.tp-app .people-panel__family > * { flex-shrink: 0; max-width: 100%; }
.tp-app .people-panel__meeting { display: flex; max-width: 15rem; }
.tp-app .people-panel__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 6px; color: #9ca3af; }
.tp-app .people-panel__icon-slot { flex-shrink: 0; width: 1.75rem; height: 1.75rem; }
.tp-app .people-panel__task-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background-color: #f3f4f6; color: #6b7280; }
.tp-app .people-chip { display: inline-block; padding: 0 .5rem; border: 1px solid; border-radius: 9999px; font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.tp-app .people-chip--alert { border-color: rgba(var(--red-rgb), .4); background-color: rgba(var(--red-rgb), .08); color: #b4433e; }
.tp-app .people-chip--request { border-color: rgba(var(--orange-rgb), .45); background-color: rgba(var(--orange-rgb), .1); color: #9a4f0a; }
.tp-app .people-chip--task { border-color: rgba(var(--orange-rgb), .45); background-color: rgba(var(--orange-rgb), .1); color: #9a4f0a; }
.tp-app .people-chip--overdue { border-color: rgba(var(--red-rgb), .4); background-color: rgba(var(--red-rgb), .08); color: #b4433e; }
.tp-app .people-chip--kind-task { border-color: #d1d5db; background-color: #f3f4f6; color: #4b5563; }
.tp-app .people-step { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .5rem; border: 1px solid #fcd34d; border-radius: 9999px; background-color: #fef9c3; color: #854d0e; font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.tp-app .people-step svg { width: 12px; height: 12px; }
.tp-app .people-step--done { border-color: rgba(var(--green-rgb), .45); background-color: rgba(var(--green-rgb), .1); color: #15803d; }
.tp-app .people-missing { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-bottom: .75rem; }
.tp-app .people-missing__label { color: #4b5563; font-size: 12px; font-weight: 600; }
.tp-app .people-missing__total { display: inline-block; font-variant-numeric: tabular-nums; }
.tp-app .people-missing__chip { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border: 1px solid #d1d5db; border-radius: 9999px; background-color: white; color: #4b5563; font-size: 12px; font-weight: 500; line-height: 1.5; transition: border-color .15s, background-color .15s, color .15s; }
.tp-app .people-missing__chip--on { border-color: var(--purple); background-color: rgba(var(--purple-rgb), .12); color: #5b2fa3; }
.tp-app .people-missing__count { color: #6b7280; font-size: 11px; }

/* components/Dashboard/Calendar/index.css */
.tp-app .calendar--day-separator { font-weight: 300; color: var(--grey); }
.tp-app .calendar--day-current { border-radius: 100%; }
.tp-app .calendar--day-current.purple { background-color: var(--purple); color: var(--white); }
.tp-app .calendar--day-event { position: relative; padding: .25rem; border-radius: 8px; background-color: rgba(var(--calendar--day-event-color), .15) !important; border: 2px solid rgb(var(--calendar--day-event-color)) !important; border-top: 6px solid rgb(var(--calendar--day-event-color)) !important; height: 100%; }
.tp-app .calendar--day-title { white-space: nowrap; }
.tp-app .calendar--day-time { margin-top: .25rem; }
.tp-app .calendar--day-event-blue { --calendar--day-event-color: var(--blue-rgb); }
.tp-app .calendar--day-event-purple { --calendar--day-event-color: var(--purple-rgb); }
.tp-app .calendar--day-event-yellow { --calendar--day-event-color: var(--yellow-rgb); }
.tp-app .calendar--day-event-pink { --calendar--day-event-color: var(--pink-rgb); }
.tp-app .calendar--day-event-slate-blue { --calendar--day-event-color: var(--slate-blue-rgb); }
.tp-app .calendar--day-event:not(b) { font-size: .7em; }

/* pages/org-performance/CRM/visualize/index.css */
.tp-app .visualization-container { width: 100%; padding: 1rem; }
.tp-app .visualization-selector { width: 100%; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; }
.tp-app .visualization-columns { display: flex; gap: 1px; padding: 1rem 0; border-bottom: 1px solid #e5e7eb; }
.tp-app .visualization-column { min-width: 200px; max-width: 200px; border: 1px dotted #e5e7eb; border-right: none; display: flex; flex-direction: column; }
.tp-app .visualization-column:last-child { border-right: 1px dotted #e5e7eb; }
.tp-app .column-header { width: 100%; }
.tp-app .column-header [data-tp-h="h3"] { margin: 0; text-align: center; border-radius: .375rem .375rem 0 0; }
.tp-app .column-content { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; min-height: 300px; }
.tp-app .visualization-column--drop-target { box-shadow: inset 0 0 0 2px #9333ea; }
.tp-app .visualization-card--overlay { box-shadow: 0 10px 20px rgba(0, 0, 0, .12); border-radius: 8px; position: relative; z-index: 30; }
.tp-app .visualization-card .tag { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .5rem; }
.tp-app .board-card-open { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -.5rem -2px 0; border-radius: 6px; color: var(--white); }
.tp-app .board-card-open svg { width: 16px; height: 16px; }
.tp-app .board-column-header { display: flex; border-radius: .375rem .375rem 0 0; }
.tp-app .column-header .board-column-title { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: .375rem; padding: .625rem .75rem; text-align: left; }
/* VisualizationView gives every column name the tallest name's height, so the Actions buttons line up: two lines here. */
.tp-app .board-column-name { align-self: stretch; min-width: 0; min-height: 2.5em; line-height: 1.25; overflow-wrap: break-word; }
.tp-app .board-column-actions { display: inline-flex; flex-shrink: 0; align-items: center; gap: 2px; padding: 2px 6px 2px 9px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 9999px; color: var(--white); font-size: 11px; font-weight: 600; line-height: 16px; }
.tp-app .board-column-actions svg { width: 13px; height: 13px; }
.tp-app .board-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem; margin: .45rem -1rem -.45rem; padding: .5rem .625rem; border: 1px solid rgb(var(--color-rgb)); border-top: none; border-radius: 0 0 8px 8px; background-color: var(--white); font-weight: 500; }
.tp-app .board-chip { display: inline-flex; align-items: center; gap: .25rem; line-height: 18px; }
.tp-app .board-chip svg { flex-shrink: 0; width: 11px; height: 11px; }
.tp-app .board-chip__count { font-weight: 700; }
.tp-app .board-chip--messages { border-color: rgba(43, 119, 207, .4); background-color: rgba(43, 119, 207, .08); color: #2b5f9e; }

/* components/TabNavbar/index.css */
.tp-app .tab-item { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .5rem; padding-bottom: .5rem; border-bottom: 4px solid transparent; }
.tp-app .tab-item.active-tab { border-bottom-color: var(--skyblue); }
.tp-app .tab-text { color: #b8b8b8; }
.tp-app .active-tab-text { color: black; }
.tp-app .tab-item svg { color: #8a8a8a; }
.tp-app .tab-item.active-tab svg { color: #111; }

/* pages/manage/tutors/[id]/TutorPaymentTab/Modals/CustomRates */
.tp-app .custom-tutor-price-dialog { padding: 25px; background: #fff; }
.tp-app .custom-tutor-price-dialog .table { width: 100%; font-family: "Montserrat", sans-serif; }
.tp-app .custom-tutor-price-dialog .table th { padding: 8px 12px; font-weight: 600; }
.tp-app .custom-tutor-price-dialog .table td { padding: 10px 12px; vertical-align: middle; }
.tp-app .tutor-subject-item { font-weight: 500; font-size: 13px; color: gray; }
.tp-app .tutor-subject-title { max-width: 200px; overflow-wrap: break-word; line-height: 1.4; display: block; color: #374151; }

/* --------------------------------------------------------------------------
   5. Widget glue
   -------------------------------------------------------------------------- */
/* Shared form look (FormFieldInput's inputClass, drawn as boxes) */
.tp-app .tp-input { min-height: 46px; display: flex; align-items: center; }
.tp-app .tp-input--select { display: flex; align-items: center; justify-content: space-between; }
.tp-app .tp-input--select svg { color: #6b7280; }
.tp-app .tp-rs {
  display: inline-flex; align-items: center; min-height: 38px; min-width: 120px;
  background: #fff; border: 1px solid #cccccc; border-radius: 4px; color: #333; font-size: 16px;
}
.tp-app .tp-rs__value { flex: 1; padding: 2px 10px; white-space: nowrap; }
.tp-app .tp-rs__sep { align-self: stretch; width: 1px; margin: 8px 0; background: #cccccc; }
.tp-app .tp-rs__chev { display: grid; place-items: center; padding: 8px; color: #cccccc; }
.tp-app .tp-rs__chev svg { width: 20px; height: 20px; fill: currentColor; }
.tp-app .tp-rs--sm { min-height: 34px; font-size: 14px; min-width: 100px; }
.tp-app .tp-rs--lg { min-height: 46px; font-size: 18px; min-width: 230px; border-color: #d1d5db; border-radius: 6px; }

/* ---- Claude ---- */
.tp-app .tp-claude { display: flex; flex-direction: column; height: 100%; background: #FAF9F5; color: #2B2A27; }
.tp-app .tp-claude__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #EBE8E0; }
.tp-app .tp-claude__name { font: 600 15px/1 Inter, sans-serif; letter-spacing: -.01em; }
.tp-app .tp-claude__conn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E7E3D9; font-size: 12.5px; color: #57534E; }
.tp-app .tp-claude__conn i { width: 7px; height: 7px; border-radius: 50%; background: #00C56B; box-shadow: 0 0 0 3px rgba(0, 197, 107, .2); }
.tp-app .tp-claude__body { flex: 1; min-height: 0; overflow: hidden; padding: 20px 20px 10px; display: flex; flex-direction: column; gap: 16px; }
/* In a widget the conversation fades at its top, where it scrolls away. */
.tp-widget .tp-claude__body { -webkit-mask: linear-gradient(transparent, #000 28px); mask: linear-gradient(transparent, #000 28px); }
/* A part scrolled past the top fades out whole (ui.js trim), never half a row. */
.tp-widget .tp-claude__body > *, .tp-widget .tp-claude__msg > * { transition: opacity 260ms ease; }
.tp-app .tp-claude__hello p { color: #78716C; font-size: 14px; line-height: 1.55; max-width: 34em; }
.tp-app .tp-claude__user { align-self: flex-end; max-width: 82%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: #EEEAE0; font-size: 14.5px; line-height: 1.45; }
.tp-app .tp-claude__msg { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; }
.tp-app .tp-claude__p { max-width: 40em; }
.tp-app .tp-claude__tool { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E7E3D9; font-size: 12.5px; color: #57534E; }
.tp-app .tp-claude__tool code { font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #1C1917; }
.tp-app .tp-claude__tool-dot { width: 8px; height: 8px; border-radius: 50%; background: #00C56B; }
.tp-app .tp-claude__tool.is-run .tp-claude__tool-dot { background: #D6D3CC; animation: tp-pulse 900ms ease-in-out infinite; }
@keyframes tp-pulse { 50% { opacity: .35; } }
.tp-app .tp-claude__tool-s { color: #A8A29E; }
.tp-app .tp-claude__table { width: 100%; max-width: 30em; border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px #E7E3D9; overflow: hidden; }
.tp-app .tp-claude__table th { padding: 8px 12px; background: #F5F3EE; color: #44403C; font-weight: 600; text-align: left; border-bottom: 1px solid #ECE8DE; }
.tp-app .tp-claude__table td { padding: 8px 12px; border-bottom: 1px solid #F1EEE6; }
.tp-app .tp-claude__table tr:last-child td { border-bottom: 0; }
.tp-app .tp-claude__table td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 600; }
.tp-app .tp-claude__preview { width: 100%; max-width: 30em; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #E7E3D9; }
.tp-app .tp-claude__preview-t { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #57534E; }
.tp-app .tp-claude__preview dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.tp-app .tp-claude__preview dt { color: #78716C; }
.tp-app .tp-claude__preview dd { color: #1C1917; }
.tp-app .tp-claude__foot { padding: 12px 16px 16px; border-top: 1px solid #EBE8E0; }
.tp-app .tp-claude__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; min-height: 32px; }
.tp-app .tp-claude__chip { padding: 6px 12px; border: 1px solid #E1DDD2; border-radius: 999px; background: #fff; font-size: 13px; line-height: 1.3; color: #292524; }
.tp-app .tp-claude__composer { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E1DDD2, 0 1px 2px rgba(0, 0, 0, .04); transition: box-shadow .2s; }
.tp-app .tp-claude__composer.is-focus { box-shadow: inset 0 0 0 1px #A8A29E, 0 0 0 3px rgba(168, 162, 158, .2); }
.tp-app .tp-claude__input { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.tp-app .tp-claude__input.is-ph { color: #A8A29E; }
.tp-app .tp-claude__send { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #2B2A27; color: #fff; }
.tp-app .tp-claude__send svg { width: 16px; height: 16px; }
@container tpw (max-width: 560px) {
  .tp-app .tp-claude__body { padding: 16px 14px 8px; }
  .tp-app .tp-claude__foot { padding: 10px 12px 12px; }
  /* One row of whole chips. A chip that does not fit wraps to a second row, which
     the row's height hides whole, so no chip is ever cut mid-word. */
  .tp-app .tp-claude__chips { height: 32px; overflow: hidden; }
  .tp-app .tp-claude__chip { flex: none; }
}

/* ---- Calendar ---- */
.tp-app .tp-cal { --hour: 76px; height: 100%; padding: 20px 22px 22px; }
.tp-app .tp-cal__bar .button { padding: .35rem 1rem; font-size: 13px; }
.tp-app .tp-cal__w { padding: .2rem .55rem !important; }
.tp-app .tp-cal__grid { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); column-gap: 12px; margin-top: 6px; }
.tp-app .tp-cal__corner { grid-row: 1; grid-column: 1; }
.tp-app .tp-cal__head { grid-row: 1; display: flex; align-items: center; min-width: 0; padding: 14px 0 12px 2px; font-size: 14px; font-weight: 500; color: #262626; white-space: nowrap; overflow: hidden; }
.tp-app .tp-cal__head .calendar--date-number { display: inline-grid; place-items: center; min-width: 24px; height: 24px; font-size: 13px; }
.tp-app .tp-cal__head .calendar--day-separator { padding: 0 6px; }
.tp-app .tp-cal__short { display: none; }
/* Day names: short below 860 px, so "Wednesday" never clips. */
@container tpw (max-width: 860px) {
  .tp-app .tp-cal__long { display: none; }
  .tp-app .tp-cal__short { display: inline; }
}
.tp-app .tp-cal__gutter { grid-row: 2; grid-column: 1; position: relative; height: calc(var(--hour) * 4); }
.tp-app .tp-cal__gutter span { position: absolute; right: 6px; top: calc(var(--i) * var(--hour)); transform: translateY(-50%); font-size: 12px; color: #606c80; white-space: nowrap; }
.tp-app .tp-cal__col {
  grid-row: 2; position: relative; height: calc(var(--hour) * 4); border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, #ECECEC 0 1px, transparent 1px var(--hour)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--hour) / 2), #F5F5F5 calc(var(--hour) / 2) calc(var(--hour) / 2 + 1px), transparent calc(var(--hour) / 2 + 1px) var(--hour)),
    #fff;
}
.tp-app .tp-cal__ev {
  position: absolute; top: calc(var(--t) * var(--hour) + 1px); height: calc(var(--d) * var(--hour) - 2px);
  left: calc(var(--l, 0%) + 3px); width: calc(var(--w, 100%) - 6px); border-radius: 8px;
}
.tp-app .tp-cal__ev .calendar--day-event { overflow: hidden; line-height: 1.28; color: #111; font-size: 11px; padding: 3px 5px; }
.tp-app .tp-cal__ev .calendar--day-title { display: block; overflow: hidden; text-overflow: ellipsis; }
.tp-app .tp-cal__ev .calendar--day-time { margin-top: 1px; }
.tp-app .tp-cal__ev .mb-1 { margin-bottom: 0; }
.tp-app .tp-cal__ev.is-dragging { z-index: 30 !important; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .18)); }
.tp-app .tp-cal__slot { position: absolute; left: 3px; right: 3px; top: calc(var(--t, 0) * var(--hour)); height: calc(var(--d, 1) * var(--hour)); border: 2px dashed #90a9fb; border-radius: 8px; background: rgba(144, 169, 251, .1); opacity: 0; transition: opacity .2s; }
.tp-app .tp-cal__slot.is-on { opacity: 1; }
/* The phone layout: Wednesday to Friday, where the story happens. */
@container tpw (max-width: 620px) {
  .tp-app .tp-cal { --hour: 80px; padding: 16px 12px 18px; }
  .tp-app .tp-cal__ev .calendar--day-event { font-size: 10.5px; padding: 2px 4px; }
  .tp-app .tp-cal__ev .calendar--day-title, .tp-app .tp-cal__ev .calendar--day-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tp-app .tp-cal__ev .calendar--day-time + .calendar--day-time { white-space: normal; }
  .tp-app .tp-cal__grid { grid-template-columns: 30px repeat(3, minmax(0, 1fr)); column-gap: 6px; }
  .tp-app .tp-cal__head[data-day="0"], .tp-app .tp-cal__head[data-day="1"],
  .tp-app .tp-cal__col[data-day="0"], .tp-app .tp-cal__col[data-day="1"] { display: none; }
  .tp-app .tp-cal__head .calendar--day-separator { padding: 0 4px; }
  .tp-app .tp-cal__gutter span { font-size: 11px; right: 2px; }
  .tp-app .tp-cal__bar .button--hollow:not(.tp-cal__w) { display: none; }
}

/* ---- Availability (TimeGrid) ---- */
.tp-app .tp-av__wrap { height: 100%; padding: 18px; background: #F9FAFB; }
.tp-app .tp-av { --hp: 46px; }
.tp-app .tp-av svg { width: 15px; height: 15px; }
.tp-app .tp-av__row { width: 100%; }
.tp-app .tp-av__corner, .tp-app .tp-av__head { height: 46px; }
.tp-app .tp-av__hour { height: var(--hp); }
.tp-app .tp-av__body { height: calc(var(--hp) * 6); background-image: repeating-linear-gradient(to bottom, #f3f4f6 0, #f3f4f6 1px, transparent 1px, transparent var(--hp)); }
.tp-app .tp-av__free { transform-origin: 50% 0; }
.tp-app .tp-av__booked { z-index: 2; padding-top: 2px; container-type: inline-size; }
.tp-app .tp-av__blabel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-app .tp-av__bini { display: none; font-weight: 600; letter-spacing: .02em; }
@container (max-width: 96px) {
  .tp-app .tp-av__blabel { display: none; }
  .tp-app .tp-av__bini { display: block; }
}
.tp-app .tp-av__box { z-index: 6; left: 4px; right: 4px; padding-top: 3px; transition: border-color .2s, color .2s; }
@container tpw (max-width: 520px) {
  .tp-app .tp-av__wrap { padding: 10px; }
  .tp-app .tp-av__col[data-day="0"], .tp-app .tp-av__col[data-day="1"] { display: none; }
  .tp-app .tp-av .ml-auto { margin-left: 0; }
}

/* ---- Booking page ---- */
.tp-app .tp-bk { min-height: 100%; }
.tp-app .tp-bk__org { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.tp-app .tp-bk__photo { display: inline-grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; font-size: 22px; font-weight: 700; }
.tp-app .tp-bk__photo--sm { width: 44px; height: 44px; font-size: 15px; }
/* OrgLogo without a logo: the org's initials on the accent, a rounded square. */
.tp-app .tp-bk__logo { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 22%; color: #fff; font-size: 17px; font-weight: 700; }
.tp-app .tp-bk__day { transition: background-color .2s, color .2s; }
.tp-app .tp-bk__times > span, .tp-app .tp-bk__times > div { font-size: 14px; }
.tp-app .tp-bk__cal { max-width: 380px; }
.tp-app .tp-bk__chosen .tp-bk__next { display: none; }
.tp-app .tp-bk__chosen { grid-column: span 1; }
/* ZonePicker: the app's Select (react-select control, 16px). */
.tp-app .tp-bk__zone { min-height: 38px; font-size: 16px; color: #111827; }
.tp-app .tp-bk__sep { width: 1px; margin: 4px 0; }
/* PhoneVerifyStep's CheckCircledIcon beside Verified. */
.tp-app .tp-bk__ok { display: inline-flex; }
.tp-app .tp-bk__ok svg { width: 15px; height: 15px; }
/* md: the profile becomes a column beside the picker (a narrower one in a 640 frame). */
@container tpw (min-width: 600px) {
  .tp-app .tp-bk { flex-direction: row; }
  .tp-app .tp-bk__aside { width: 220px; flex-shrink: 0; border-bottom: 0; border-right: 1px solid #e5e7eb; padding: 22px; }
  .tp-app .tp-bk__main { padding: 22px; }
  .tp-app .tp-bk__who { display: block; }
  .tp-app .tp-bk__name { margin-top: 12px; }
  /* The subject under the name is md:hidden; Book session is sm:w-auto. */
  .tp-app .tp-bk__subj { display: none; }
  .tp-app .tp-bk__main .tp-bk__book { display: inline-block; width: auto; }
}
@container tpw (min-width: 760px) {
  .tp-app .tp-bk__aside { width: 270px; padding: 28px; }
  .tp-app .tp-bk__main { padding: 28px; }
}
@container tpw (min-width: 940px) {
  .tp-app .tp-bk__pick { flex-direction: row; }
  .tp-app .tp-bk__cal { width: 360px; flex: none; }
  .tp-app .tp-bk__right { width: 200px; }
  .tp-app .tp-bk__times { display: flex; flex-direction: column; }
  .tp-app .tp-bk__chosen .tp-bk__next { display: flex; }
  .tp-app .tp-bk__bar { display: none !important; }
}
@container tpw (max-width: 560px) {
  .tp-app .tp-bk__bio, .tp-app .tp-bk__aside hr, .tp-app .tp-bk__facts, .tp-app .tp-bk__len { display: none; }
  /* The phone frame has no room for the Time zone picker; the details step still names the zone. */
  .tp-app .tp-bk__tz { display: none; }
  .tp-app .tp-bk__aside { padding: 16px; }
  .tp-app .tp-bk__main { padding: 16px; }
  .tp-app .tp-bk__who .tp-bk__photo { width: 52px; height: 52px; font-size: 17px; }
  .tp-app .tp-bk__who { margin-top: 14px; }
  .tp-app .tp-bk__day { width: 38px; height: 38px; font-size: 14px; }
  .tp-app .tp-bk__pick { gap: 20px; }
}

/* ---- Form builder ---- */
.tp-app .tp-fb { height: 100%; padding: 20px 22px 22px; }
.tp-app .tp-fb__name { padding: 6px 12px; line-height: 1.35; font-size: 22px; }
.tp-app .tp-fb tbody td { vertical-align: middle; }
.tp-app .tp-fb__pv { max-height: 520px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 14px, #000 calc(100% - 56px), transparent); mask: linear-gradient(transparent, #000 14px, #000 calc(100% - 56px), transparent); }
.tp-app .tp-fb__ta { min-height: 44px; font-size: 13px; line-height: 1.4; }
@container tpw (min-width: 880px) {
  .tp-app .tp-fb { grid-template-columns: minmax(0, 1fr) 340px; }
  .tp-app .tp-fb__pv { max-height: 600px; }
}
@container tpw (max-width: 560px) {
  .tp-app .tp-fb { padding: 14px; gap: 16px; }
  .tp-app .tp-fb__who, .tp-app .tp-fb__name, .tp-app .tp-fb tbody[data-key="first"], .tp-app .tp-fb tbody[data-key="last"] { display: none; }
  .tp-app .tp-fb section.p-5 { padding: 14px 10px; }
  .tp-app .tp-fb .p-3 { padding: .45rem .35rem; }
  .tp-app .tp-fb .w-24 { width: 3.75rem; }
  .tp-app .tp-fb__pv { max-height: 300px; padding: 16px; }
  .tp-app .tp-fb td[colspan] { padding-left: 2.5rem; }
}

/* ---- Public form (phone) ---- */
.tp-app .tp-pf { display: flex; flex-direction: column; height: 100%; border-radius: 46px; padding: 11px; background: #14171C; box-shadow: inset 0 0 0 1.5px #3A3F48, 0 24px 48px -18px rgba(15, 23, 42, .45); }
.tp-app .tp-pf__url { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding-top: 10px; border-radius: 36px 36px 0 0; font-size: 12px; font-weight: 500; color: #4b5563; background: #F9FAFB; border-bottom: 1px solid #EEF0F2; }
.tp-app .tp-pf__url svg { width: 10px; height: 10px; }
.tp-app .tp-pf__screen { flex: 1; overflow: hidden; padding: 20px 18px 32px; border-radius: 0 0 36px 36px; background: #fff; }
.tp-app .tp-pf__card { display: grid; gap: 10px; width: 100%; padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.tp-app .tp-pf__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-app .tp-pf__tabs > span { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-weight: 600; color: #6b7280; }
.tp-app .tp-pf__tabs > span.is-on { border: 2px solid #111827; color: #111827; padding: 8px 9px; }
.tp-app .tp-pf__num, .tp-app .tp-pf__row > span { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; color: #6b7280; }
.tp-app .tp-pf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-app .tp-pf__mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #374151; }
.tp-app .tp-pf__demo { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; }
.tp-app .tp-pf__save { justify-self: end; font-size: 13px; font-weight: 600; color: #079455; }
.tp-app .tp-pf__thanks { padding: 120px 8px 20px; text-align: center; }
/* FormFieldInput's focus:border-green-500 focus:ring-green-500 (@tailwindcss/forms draws a 1 px ring) and a typing caret */
.tp-app .tp-pf .tp-pf__focus { border-color: #22c55e; box-shadow: 0 0 0 1px #22c55e; }
.tp-app .tp-pf__caret { flex: none; width: 1.5px; height: 20px; margin-left: 1px; background: #111827; }
.tp-app .tp-check { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1.5px solid #9ca3af; border-radius: 4px; background: #fff; transition: background-color .15s, border-color .15s; }
.tp-app .tp-check.is-on { background: #16a34a url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: #16a34a; }

/* ---- Billing ---- */
/* A person's name and role, as the student and tutor pages head them (payroll uses these). */
.tp-app .tp-bill__name { font: 700 30px/1.1 "Montserrat", sans-serif; color: #575757; }
.tp-app .tp-bill__role { margin-top: 4px; font-size: 19px; color: #575757; }
/* Automatic billing: Financials, Activity (pages/org-performance/PaymentsTab:
   TabNavbar, Statistics, TransactionSettings, Transactions). */
.tp-app .tp-abill { display: flex; flex-direction: column; height: 100%; padding: 18px 22px 20px; }
.tp-app .tp-abill__ic { display: inline-flex; flex: none; }
.tp-app .tp-abill__ic svg { width: 100%; height: 100%; }
.tp-app .tp-abill__tabs .tab-item { margin-bottom: -1px; }
.tp-app .tp-abill__tabs .tab-item .tp-abill__ic svg { color: inherit; }
.tp-app .tp-abill__tabs .tab-text { color: #b8b8b8; }
.tp-app .tp-abill__navsel { display: none; width: 50%; }
.tp-app .tp-abill__panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Statistics/index.css */
.tp-app .tp-abill .StatisticsContainer { font-family: "Montserrat", sans-serif; }
.tp-app .tp-abill { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.tp-app .tp-abill .StatisticsBox { font-size: 12px; font-weight: 600; line-height: 1.4; color: #6b7280; }
.tp-app .tp-abill .StatisticsBox .tp-abill__num { margin-top: 10px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-app .tp-abill__dl { width: 30px; height: 30px; padding: 0; border-radius: 9999px; }
/* TransactionSettings: the native select, drawn. */
.tp-app .tp-abill__select { position: relative; display: inline-block; min-width: 168px; background: #fff; font-size: .9rem; line-height: 1.5; color: #111827; }
.tp-app .tp-abill__select .tp-i { position: absolute; right: 9px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: #374151; }
/* Transactions: rows are whole; the oldest one leaves as a charge lands on top. */
.tp-app .tp-abill__list { overflow: hidden; }
.tp-app .tp-abill table { table-layout: auto; }
.tp-app .tp-abill td { vertical-align: middle; }
.tp-app .tp-abill__date, .tp-app .tp-abill__svc, .tp-app .tp-abill__act { white-space: nowrap; }
/* A calmer read of the same table: Inter like the page, grays instead of black,
   a small light header, hairline rules and tabular figures. Row heights stay
   as they were (20 px marks with 10 px padding in place of 24 px with 8). */
.tp-app .tp-abill__list table { color: #4b5563; }
.tp-app .tp-abill__list thead { box-shadow: none; }
.tp-app .tp-abill__list thead tr { border-bottom: 1px solid #e5e7eb; }
.tp-app .tp-abill__list th { padding-block: 10px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .01em; color: #6b7280; }
.tp-app .tp-abill__list tbody tr { border-bottom-color: #f0f1f3; }
.tp-app .tp-abill__list td { padding-block: 10px; }
.tp-app .tp-abill__list td:is(.tp-abill__who, .tp-abill__amt) { font-weight: 500; color: #374151; }
.tp-app .tp-abill__list td:is(.tp-abill__date, .tp-abill__amt) { font-variant-numeric: tabular-nums; }
.tp-app .tp-abill__list td:is(.tp-abill__date, .tp-abill__svc, .tp-abill__type) { color: #6b7280; }
.tp-app .tp-abill__filter .font-medium { font-size: 14px; color: #4b5563; }
.tp-app .tp-abill__filter .tp-abill__select { font-size: 14px; color: #374151; }
.tp-app .tp-abill__mark { display: block; width: 20px; height: 20px; }
.tp-app .tp-abill__mark--paid { color: var(--green); }
.tp-app .tp-abill__mark--failed { color: var(--red); }
.tp-app .tp-abill__mark--pending { width: 18px; height: 18px; margin-block: 1px; color: #FFB341; }
.tp-app .tp-abill__new td { animation: tp-abill-new 1.4s ease-out; }
@keyframes tp-abill-new { from { background-color: rgba(0, 197, 107, .07); } to { background-color: rgba(0, 197, 107, 0); } }
.tp-app .tp-abill__foot { margin-top: 14px; min-height: 40px; }
.tp-app .tp-abill__type { white-space: nowrap; }
@container tpw (max-width: 820px) {
  .tp-app .tp-abill__svc, .tp-app .tp-abill__act, .tp-app .tp-abill__basis { display: none; }
}
@container tpw (max-width: 560px) {
  .tp-app .tp-abill { padding: 14px 12px 14px; }
  .tp-app .tp-abill__tabs { display: none; }
  .tp-app .tp-abill__navsel { display: inline-flex; }
  .tp-app .tp-abill__basis, .tp-app .tp-abill__export, .tp-app .tp-abill__filter { display: none; }
  .tp-app .tp-abill__stats .grid { column-gap: 12px; }
  .tp-app .tp-abill .StatisticsBox { font-size: 11px; }
  .tp-app .tp-abill .StatisticsBox .tp-abill__num { margin-top: 6px; font-size: 16px; }
  .tp-app .tp-abill__list { margin: 12px 8px 0; }
  .tp-app .tp-abill :is(th, td) { padding-left: 6px; padding-right: 6px; }
  .tp-app .tp-abill__list td { padding-block: 8px; }
  .tp-app .tp-abill__date, .tp-app .tp-abill__act { display: none; }
  .tp-app .tp-abill__who, .tp-app .tp-abill__amt { white-space: nowrap; }
  .tp-app .tp-abill__type { white-space: normal; }
  .tp-app .tp-abill th { width: auto; }
  .tp-app .tp-abill th.tp-abill__type { width: 100%; }
  .tp-app .tp-abill__foot { min-height: 58px; }
}

/* ---- Default payment plan (Settings) ---- */
.tp-app .tp-plan { height: 100%; padding: 26px 28px 28px; font-size: 14px; line-height: 1.5; }
.tp-app .tp-plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tp-app .tp-plan__head [data-tp-h] { font-size: 16px; font-weight: 700; color: #171717; }
.tp-app .tp-plan__status { font-size: 12px; color: #6b7280; }
.tp-app .tp-plan__text { margin-top: 4px; color: #4b5563; }
.tp-app .tp-plan__radios { display: flex; gap: 20px; margin-top: 12px; color: #111827; }
.tp-app .tp-plan__radios > span { display: inline-flex; align-items: center; gap: 8px; }
.tp-app .tp-plan__radios i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #9ca3af; background: #fff; }
.tp-app .tp-plan__radios i.is-on { border-color: #16a34a; background: radial-gradient(#16a34a 0 4px, #fff 4.5px); }
.tp-app .tp-plan__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.tp-app .tp-plan__tg { display: inline-flex; flex-wrap: wrap; border-radius: 9999px; background: #f3f4f6; padding: 2px; }
.tp-app .tp-plan__tg-b { border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 600; line-height: 16px; color: #4b5563; transition: background-color .2s, color .2s, box-shadow .2s; }
.tp-app .tp-plan__tg-b.is-on { background: #fff; color: #15803d; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.tp-app .tp-plan__line { line-height: 30px; color: #111827; }
.tp-app .tp-plan__num { display: inline-block; min-width: 4.5rem; height: 28px; margin: 0 6px; padding: 0 8px; vertical-align: middle; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 14px; line-height: 26px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.tp-app .tp-plan__num.is-focus { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(199, 210, 254, .5); }
.tp-app .tp-plan__foot { margin-top: 18px; }
@container tpw (max-width: 520px) {
  .tp-app .tp-plan { padding: 20px 16px 22px; }
  .tp-app .tp-plan__tg-b { padding: 4px 9px; font-size: 11px; }
}

/* ---- Payroll ---- */
.tp-app .tp-pay { display: grid; align-content: start; gap: 22px; height: 100%; padding: 22px 24px 24px; background: #fff; }
.tp-app .tp-pay__hours table { margin-top: 12px; }
.tp-app .tp-pay__card { padding: 18px; border-radius: 14px; background: #F9F9F9; display: grid; gap: 12px; }
.tp-app .tp-pay__who { display: flex; align-items: baseline; gap: 12px; }
.tp-app .tp-pay__name { font-size: 24px; }
.tp-app .tp-pay__acct { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; color: #374151; }
.tp-app .tp-toggle-blue { position: relative; display: inline-block; width: 40px; height: 22px; border-radius: 11px; background: #5D9BF0; }
.tp-app .tp-toggle-blue i { position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.tp-app .tp-radio-b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.tp-app .tp-radio-c { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #6b7280; background: #fff; }
.tp-app .tp-radio-c.is-on { border-color: #2563eb; background: radial-gradient(circle, #2563eb 0 4.5px, #fff 5px); }
.tp-app .tp-radio-c--deny.is-on { border-color: #dc2626; background: radial-gradient(circle, #dc2626 0 4.5px, #fff 5px); }
@container tpw (max-width: 760px) { .tp-app .tp-pay__stu, .tp-app .tp-pay__deny, .tp-app .tp-pay__f2 { display: none; } }
@container tpw (max-width: 560px) {
  .tp-app .tp-pay { padding: 16px 14px; gap: 18px; }
  .tp-app .tp-pay__time, .tp-app .tp-pay__tut, .tp-app .tp-pay__svc, .tp-app .tp-pay__type { display: none; }
  .tp-app .tp-pay__filters { display: none; }
}

/* ---- Custom rates ---- */
.tp-app .tp-rates__acts { display: flex; gap: .5rem; align-items: center; }
.tp-app .tp-rates__input { display: inline-flex; align-items: center; width: 8rem; height: 2rem; padding: 0 .6rem; font-size: 13px; line-height: 2rem; color: #111827; }
@container tpw (max-width: 520px) {
  .tp-app .custom-tutor-price-dialog { padding: 18px 14px; }
  .tp-app .tp-rates__def { display: none; }
  .tp-app .tp-rates__input { width: 5.25rem; }
  .tp-app .custom-tutor-price-dialog .table :is(th, td) { padding-inline: 6px; }
}

/* ---- Inbox, suggested replies and sync ---- */
.tp-app .tp-in { height: 100%; padding: 18px 20px 20px; background: #F9F9F9; }
.tp-app .tp-in__filters { margin-bottom: 14px; }
.tp-app .tp-in__filters .tp-rs { min-width: 130px; font-size: 15px; }
.tp-app .tp-in__wrap { border: 2px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; }
.tp-app .tp-in__table th, .tp-app .tp-in__table td { vertical-align: middle; }
.tp-app .tp-in__date { width: 17%; }
.tp-app .tp-in__subj { width: 14%; }
.tp-app .tp-in__from { width: 16%; }
.tp-app .tp-in__deliv { width: 16%; }
.tp-app .tp-in__read { width: 8%; }
.tp-app .tp-in__det { width: 6%; }
.tp-app .tp-in__chev svg { transition: transform .2s ease; }
.tp-app .tp-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-app .tp-in__thread { max-height: 300px; overflow: hidden; background: #F9FAFB; }
.tp-app .tp-bubble { font-size: 14px; }
.tp-app .tp-bubble__text { overflow-wrap: anywhere; }
.tp-app .tp-in__ta { min-height: 76px; font-size: 14px; background: #fff; color: #111827; transition: border-color .2s, box-shadow .2s; }
.tp-app .tp-in__ph { color: #d1d5db; }
.tp-app .tp-in__tip svg { width: 14px; height: 14px; }
@container tpw (max-width: 760px) {
  .tp-app .tp-in__subj, .tp-app .tp-in__read { display: none; }
  .tp-app .tp-in__date { width: 22%; }
}
@container tpw (max-width: 560px) {
  .tp-app .tp-in { padding: 12px; }
  .tp-app .tp-in__filters > :not(:last-child) { display: none; }
  .tp-app .tp-in__deliv { display: none; }
  .tp-app .tp-in__date { width: 30%; }
  .tp-app .tp-in__from { width: 34%; }
  .tp-app .tp-in .tp-in__table td.tp-in__content, .tp-app .tp-in .tp-in__table th:nth-child(3) { display: none; }
  .tp-app .tp-in__detail td { padding: 10px; }
  .tp-app .tp-bubble { max-width: 92%; }
}

.tp-app .tp-reply { display: grid; align-content: start; gap: 18px; height: 100%; padding: 22px; background: #F9F9F9; }
.tp-app .tp-reply .tp-in__ta { min-height: 108px; }
@container tpw (max-width: 520px) { .tp-app .tp-reply { padding: 14px; } .tp-app .tp-reply .tp-bubble { max-width: 92%; } }

/* ---- Email and text (define("sync")): the Communication view, its rows, an open
   conversation and the reply box with Claude's suggestion. Only the sync widget
   uses .tp-sync*. Columns follow index.tsx; narrower frames show fewer of them. ---- */
.tp-app .tp-sync { display: flex; flex-direction: column; height: 100%; padding: 24px 28px; background: #fafafa; }
.tp-app .tp-sync__filters { flex: none; }
/* A calmer read, like the Auto-bill table: Inter like the page, grays instead of
   black, a small light header and hairline rules. */
.tp-app .tp-sync { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #4b5563; }
.tp-app .tp-sync__filters .font-medium { font-size: 14px; color: #4b5563; }
.tp-app .tp-sync__wrap { border-width: 1px; border-color: #e5e7eb; }
.tp-app .tp-sync__table thead tr { border-bottom: 1px solid #e5e7eb; box-shadow: none; }
.tp-app .tp-sync__table th { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .01em; color: #6b7280; }
.tp-app .tp-sync__table tbody > tr { border-color: #f0f1f3; }
.tp-app .tp-sync__table td { color: #4b5563; }
.tp-app .tp-sync__table td.tp-sync__date { color: #6b7280; }
.tp-app .tp-sync__table td.tp-sync__content { color: #374151; }
.tp-app .tp-sync__table .tp-sync__chev { color: #6b7280; }
.tp-app .tp-sync__bubble { color: #374151; }
.tp-app .tp-sync__sel { min-width: 160px; min-height: 38px; font-size: 15px; color: #374151; }
.tp-app .tp-sync__sep { width: 1px; margin: 4px 0; }
.tp-app .tp-sync__mark { white-space: nowrap; }
.tp-app .tp-sync__wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #fff; }
/* A row the box would cut fades out whole (trim() in ui.js). */
.tp-app .tp-sync tbody > tr { transition: opacity 260ms ease; }
.tp-app .tp-sync__table :is(th, td) { vertical-align: middle; }
.tp-app .tp-sync__date { width: 11.5%; }
.tp-app .tp-sync__subj { width: 11%; }
.tp-app .tp-sync__content { width: 22%; }
.tp-app .tp-sync__from { width: 14.5%; }
.tp-app .tp-sync__to { width: 14%; }
.tp-app .tp-sync__deliv { width: 12%; }
.tp-app .tp-sync__read { width: 8.5%; }
.tp-app .tp-sync__det { width: 6.5%; }
.tp-app .tp-sync__clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-app .tp-sync__chev { display: inline-flex; vertical-align: middle; transition: transform .2s ease; }
.tp-app .tp-sync__chev.is-open { transform: rotate(180deg); }
.tp-app .tp-sync__thread { max-height: 300px; overflow: hidden; }
.tp-app .tp-sync__bubble { font-size: 15px; line-height: 1.5; }
.tp-app .tp-sync__text { overflow-wrap: break-word; }
.tp-app .tp-sync__ta { min-height: 90px; font-size: 15px; color: #111827; transition: border-color .2s, box-shadow .2s; }
.tp-app .tp-sync__ta.is-sug { min-height: 114px; }
.tp-app .tp-sync__ph { color: #9ca3af; }
.tp-app .tp-sync__sug { color: #d1d5db; }
.tp-app .tp-sync__send { flex: none; }
.tp-app .tp-sync__cap:empty { display: none; }
.tp-app .tp-sync__cap .tp-foot { padding: 7px 12px; font-size: 13px; }
/* Tab going down: the hint lights up for a moment. */
.tp-app .tp-sync__hint.is-pressed { border-radius: 4px; background: rgba(0, 197, 107, .14); box-shadow: 0 0 0 4px rgba(0, 197, 107, .14); }
@container tpw (max-width: 899px) {
  .tp-app .tp-sync__dir, .tp-app .tp-sync__subj, .tp-app .tp-sync__to, .tp-app .tp-sync__read { display: none; }
  .tp-app .tp-sync__date { width: 15%; }
  .tp-app .tp-sync__content { width: 33%; }
  .tp-app .tp-sync__from { width: 20%; }
  .tp-app .tp-sync__deliv { width: 21%; }
  .tp-app .tp-sync__det { width: 11%; }
}
@container tpw (max-width: 520px) {
  .tp-app .tp-sync { padding: 14px 12px; }
  .tp-app .tp-sync__chan, .tp-app .tp-sync__date, .tp-app .tp-sync__content { display: none; }
  .tp-app .tp-sync__from { width: 40%; }
  .tp-app .tp-sync__deliv { width: 38%; }
  .tp-app .tp-sync__det { width: 22%; }
  .tp-app .tp-sync__detail > td { padding: 10px; }
  .tp-app .tp-sync__bubble { max-width: 88%; font-size: 14px; }
  .tp-app .tp-sync__ta { font-size: 14px; }
}

/* ---- Message students (ComposeMessageDialog) ---- */
.tp-app .tp-compose { height: 100%; padding: 28px; }
.tp-app .compose-msg-dialog--title { font-size: 1.75rem; font-weight: bold; margin-bottom: .5rem; color: #4b4b4b; line-height: 1.2; }
.tp-app .tp-compose .input { margin-bottom: .75rem; padding: .5rem .75rem; font-size: 14px; line-height: 1.5rem; min-height: 42px; }
.tp-app .tp-compose__content { min-height: 100px !important; }
.tp-app .tp-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; border: 1px solid #cccccc; border-radius: 4px; background: #fff; }
.tp-app .tp-multi__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 4px; background: #f0f0f0; font-size: 14px; color: #333; }
.tp-app .tp-multi__x { display: grid; place-items: center; width: 20px; height: 20px; color: #555; }
.tp-app .tp-compose__ch { display: flex; gap: 1rem; margin: .25rem 0 1rem; font-size: 15px; }
.tp-app .tp-compose__ch > span { display: flex; align-items: center; gap: 8px; }
.tp-app .tp-compose__box { width: 18px; height: 18px; border: 2px solid #4ade80; border-radius: 4px; background: #fff; transition: background-color .15s; }
.tp-app .tp-compose__box.is-on { background: #4ade80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tp-app .tp-compose .dialog--actions { margin-top: .5rem; }
.tp-app .tp-compose .dialog--actions .button { flex: 1; padding-block: .6rem; font-size: 15px; }
.tp-app .tp-compose__sent { margin-top: 16px; min-height: 40px; }
@container tpw (max-width: 520px) { .tp-app .tp-compose { padding: 20px 16px; } .tp-app .compose-msg-dialog--title { font-size: 1.4rem; } }

/* ---- People ---- */
.tp-app .tp-people { height: 100%; padding: 22px 24px 24px; }
.tp-app .tp-people__search { width: 100%; padding-top: 6px; padding-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 24px; }
.tp-app .tp-people__invite { padding: .5rem 1.1rem; font-size: 15px; }
.tp-app .tp-people .people-panel__search { width: 22rem; flex: none; }
.tp-app .tp-col-next { display: none; }
@container tpw (min-width: 1040px) { .tp-app .tp-col-next { display: table-cell; } }
@container tpw (max-width: 800px) { .tp-app .tp-col-fam { display: none; } }
@container tpw (max-width: 639px) {
  .tp-app .tp-people { padding: 16px 14px; }
  .tp-app .tp-people__head { flex-direction: row; align-items: center; }
  .tp-app .tp-people .people-panel__search { display: none; }
  .tp-app .tp-people__invite { padding: .5rem .8rem; }
  .tp-app .people-panel__tabs { gap: 1.1rem; }
  .tp-app .people-panel__tab { font-size: 14px; }
  .tp-app .people-panel__tab:nth-child(n+4) { display: none; }
  .tp-app .tp-people:not(.tp-onb) .people-panel__table :is(th, td):nth-child(2), .tp-app .tp-people:not(.tp-onb) .people-panel__table :is(th, td):last-child { display: none; }
  .tp-app .people-panel__table :is(th, td) { padding: .6rem .5rem; }
  .tp-app .people-panel__person { gap: .5rem; }
  .tp-app .people-panel__name { max-width: 8.5rem; }
}

/* ---- Onboarding steps ---- */
.tp-app .tp-onb { padding: 22px; }
.tp-app .tp-onb .people-panel__table td { padding-block: .9rem; }
.tp-app .tp-onb__title { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: #111827; }
@container tpw (max-width: 520px) {
  .tp-app .tp-onb { padding: 14px; }
  .tp-app .tp-onb .people-panel__table thead { display: none; }
  .tp-app .tp-onb .people-panel__table, .tp-app .tp-onb .people-panel__table tbody { display: block; }
  .tp-app .tp-onb .people-panel__table tbody tr { display: flex; flex-wrap: wrap; gap: .5rem .75rem; padding: .8rem; border-bottom: 1px solid #f1f1f1; }
  .tp-app .tp-onb .people-panel__table td { padding: 0; border: 0; }
  .tp-app .tp-onb .people-panel__table td:first-child { flex-basis: 100%; }
  .tp-app .tp-onb__type { display: none; }
}

/* ---- CRM ---- */
.tp-app .tp-crm { height: 100%; padding: 20px 20px 8px; }
.tp-app .tp-crm__sel { margin-bottom: .5rem; }
.tp-app .tp-crm__cols { padding-top: .5rem; }
.tp-app .tp-crm .visualization-column { flex: 1 1 0; min-width: 0; max-width: none; }
.tp-app .tp-crm .column-content { min-height: 250px; padding: .85rem; }
.tp-app .tp-crm .tag.medium { font-size: 14px; }
.tp-app .tp-crm__iconbtn { display: inline-grid; place-items: center; width: 44px; height: 32px; border: 1.5px solid #111; border-radius: 6px; }
.tp-app .tp-crm__iconbtn--edit { border-color: #90a9fb; color: #90a9fb; }
@container tpw (max-width: 620px) {
  .tp-app .tp-crm { padding: 14px 12px 6px; }
  .tp-app .tp-crm__col[data-col="0"], .tp-app .tp-crm__col[data-col="3"] { display: none; }
  .tp-app .tp-crm .column-content { padding: .6rem; }
  .tp-app .tp-rs--lg { min-width: 0; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-app *, .tp-app *::before, .tp-app *::after, .tp-cursor, .tp-cursor * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .tp-app .tp-spinner { animation: none; border-top-color: #d1d5db; }
}