/* styles.css - the Tool Portal design system.
 * ---------------------------------------------------------------------------
 * GENERATED FILE: built from the sections in `_css/` by `python build_css.py`.
 * Edit the section you care about in `_css/` and re-run that script rather than
 * editing this file, so the order inside it can never drift.
 *
 * The look: *delicate but modern*. Hairline borders instead of heavy ones,
 * layered low-alpha shadows instead of one dark blur, a restrained accent used
 * for meaning rather than decoration, generous rhythm, and tabular numerals
 * wherever numbers are read rather than admired.
 *
 * The sections, in order:
 *
 *   01 tokens      every design decision: colour, shape, depth, rhythm, motion
 *   02 base        element defaults, focus, selection, skip link
 *   03 layout      container, page header, sections, panels
 *   04 typography  headings, lede, links, code, help text
 *   05 decoration  the page aura, hairlines, glass surfaces
 *   06 buttons     every button style, one place
 *   07 cards       cards, pills, stats, KPI
 *   08 content     lists, steps, FAQ, tables, breadcrumb, avatar
 *   09 timeline    activity and log timelines
 *   10 mock        the CSS product "screenshot"
 *   11 motion      entrance, skeletons, reduced motion
 *   12 forms       Django-rendered fields
 *   13 sharing     share codes, teams, rights, versions
 *   14 components  page header, notice, tabs, search, key-value, empty state
 *   15 admin       Django admin badges and the drag & drop zone
 *   16 print       print rules
 *
 * Naming: `tp-` = Tool Portal component, `portal-` = the older names that
 * templates and the admin still use.  New markup uses `tp-`.
 */

/* ===========================================================================
 * 1. Tokens
 * ---------------------------------------------------------------------------
 * One place to change the whole product.  Anything a component needs to know
 * about colour, shape, depth, rhythm or motion is named here - and never as a
 * literal inside a component.
 * ===========================================================================*/
:root {
  color-scheme: light dark;

  /* -- brand -------------------------------------------------------------- */
  --tp-accent: #4f46e5;
  --tp-accent-hover: #4338ca;
  --tp-accent-soft: #eef0ff;
  --tp-accent-line: #d9dcfb;
  --tp-accent-ink: #3730a3;
  --tp-accent-2: #7c3aed;          /* violet, the middle of the gradient */
  --tp-accent-3: #0ea5e9;          /* sky, the cool end */

  /* -- surfaces ----------------------------------------------------------- */
  --tp-bg: #fbfbfd;
  --tp-surface: #ffffff;
  --tp-surface-2: #f5f6f8;
  --tp-sunken: #f8f9fb;
  --tp-glass: rgb(255 255 255 / 0.72);
  --tp-field: #ffffff;

  /* -- ink ---------------------------------------------------------------- */
  --tp-ink: #0f1117;
  --tp-ink-soft: #4b5563;
  --tp-ink-faint: #6b7280;
  --tp-ink-ghost: #9aa1ac;

  /* -- hairlines ---------------------------------------------------------- */
  --tp-line: rgb(15 17 23 / 0.08);
  --tp-line-strong: rgb(15 17 23 / 0.14);
  --tp-line-accent: rgb(79 70 229 / 0.28);

  /* -- status ------------------------------------------------------------- */
  --tp-ok: #059669;   --tp-ok-bg: #e7f8f0;   --tp-ok-ink: #04614a;
  --tp-warn: #b45309; --tp-warn-bg: #fdf3e0; --tp-warn-ink: #8a4708;
  --tp-stop: #dc2626; --tp-stop-bg: #fdecec; --tp-stop-ink: #9b1c1c;
  --tp-info-bg: #eef4ff; --tp-info-ink: #1d4ed8;

  /* -- shape -------------------------------------------------------------- */
  --tp-radius-xs: 0.375rem;
  --tp-radius-sm: 0.5rem;
  --tp-radius: 0.75rem;
  --tp-radius-lg: 1rem;
  --tp-radius-xl: 1.25rem;
  --tp-radius-2xl: 1.5rem;

  /* -- depth: many soft layers, never one dark blur ------------------------ */
  --tp-shadow-xs: 0 1px 1px rgb(15 17 23 / 0.04);
  --tp-shadow-sm: 0 1px 2px rgb(15 17 23 / 0.04), 0 1px 3px rgb(15 17 23 / 0.03);
  --tp-shadow-md: 0 2px 4px rgb(15 17 23 / 0.03), 0 6px 16px -8px rgb(15 17 23 / 0.12);
  --tp-shadow-lg: 0 4px 8px rgb(15 17 23 / 0.04), 0 18px 40px -20px rgb(15 17 23 / 0.22);
  --tp-shadow-pop: 0 6px 12px rgb(15 17 23 / 0.06), 0 30px 60px -30px rgb(15 17 23 / 0.28);
  --tp-ring: 0 0 0 3px rgb(79 70 229 / 0.16);

  /* -- rhythm ------------------------------------------------------------- */
  --tp-container: 76rem;
  --tp-reading: 40rem;
  --tp-gutter: 1.25rem;
  --tp-section: 4rem;
  --tp-block: 1.25rem;

  /* -- type --------------------------------------------------------------- */
  --tp-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --tp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --tp-leading: 1.65;
  --tp-tracking-tight: -0.02em;
  --tp-tracking-caps: 0.09em;

  /* -- motion ------------------------------------------------------------- */
  --tp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tp-dur-fast: 0.14s;
  --tp-dur: 0.22s;
  --tp-dur-slow: 0.5s;

  /* -- the one gradient that ties the product together -------------------- */
  --tp-brand-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 46%, #0ea5e9 100%);
  --tp-brand-gradient-soft: linear-gradient(135deg, #eef0ff 0%, #f6f0ff 46%, #eaf7ff 100%);
  --tp-hairline-gradient: linear-gradient(90deg, transparent, var(--tp-line-strong), transparent);
}

@media (min-width: 640px) {
  :root { --tp-gutter: 1.75rem; --tp-section: 5rem; --tp-block: 1.5rem; }
}

@media (min-width: 1024px) {
  :root { --tp-gutter: 2rem; --tp-section: 6.5rem; }
}

/* Dark mode is a class on <html>, so a page can also be forced into one theme. */
.dark {
  --tp-bg: #08090c;
  --tp-surface: #101116;
  --tp-surface-2: #181a20;
  --tp-sunken: #0c0d12;
  --tp-glass: rgb(16 17 22 / 0.72);
  --tp-field: #14161c;

  --tp-ink: #f5f6f8;
  --tp-ink-soft: #a9b0bd;
  --tp-ink-faint: #838b99;
  --tp-ink-ghost: #666d7a;

  --tp-line: rgb(255 255 255 / 0.09);
  --tp-line-strong: rgb(255 255 255 / 0.16);
  --tp-line-accent: rgb(129 140 248 / 0.35);

  --tp-accent-soft: #191a3d;
  --tp-accent-line: #33357a;
  --tp-accent-ink: #c7d2fe;

  --tp-ok-bg: #06251c;   --tp-ok-ink: #6ee7b7;
  --tp-warn-bg: #2c1f06; --tp-warn-ink: #fcd34d;
  --tp-stop-bg: #2c0f11; --tp-stop-ink: #fca5a5;
  --tp-info-bg: #101c3d; --tp-info-ink: #a5c4fd;

  --tp-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.5);
  --tp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --tp-shadow-md: 0 2px 6px rgb(0 0 0 / 0.5), 0 12px 28px -14px rgb(0 0 0 / 0.7);
  --tp-shadow-lg: 0 4px 10px rgb(0 0 0 / 0.5), 0 26px 54px -26px rgb(0 0 0 / 0.85);
  --tp-shadow-pop: 0 8px 18px rgb(0 0 0 / 0.55), 0 40px 80px -40px rgb(0 0 0 / 0.9);
  --tp-ring: 0 0 0 3px rgb(129 140 248 / 0.28);

  --tp-brand-gradient-soft: linear-gradient(135deg, #171834 0%, #1d1533 46%, #0d2233 100%);
}


/* ===========================================================================
 * 2. Base
 * ===========================================================================*/
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: var(--tp-font);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tp-bg);
  color: var(--tp-ink);
  line-height: var(--tp-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Numbers in tables, stats and code read in columns, not in a proportional
 * font - this is the difference between a professional table and a toy one. */
.tp-nums,
.tp-stat__value,
.tp-table td,
.tp-table th { font-variant-numeric: tabular-nums; }

img, svg, video { max-width: 100%; height: auto; }

::selection { background: rgb(79 70 229 / 0.16); }

/* A focus ring that is visible without shouting. */
:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 2px;
  border-radius: var(--tp-radius-xs);
}

/* Skip-to-content link: invisible until it is focused. */
.portal-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--tp-radius) 0;
  background: var(--tp-accent);
  color: #fff;
  font-weight: 600;
}

.portal-skip-link:focus { left: 0; }

/* Remove the default summary marker on our own disclosures. */
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ===========================================================================
 * 3. Layout
 * ---------------------------------------------------------------------------
 * The page skeleton: a container, a section rhythm, a two-column shell with an
 * optional sticky rail, and the standard page header that every private page
 * shares (partials/_page_head.html).
 * ===========================================================================*/
.tp-container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--tp-container);
  padding-inline: var(--tp-gutter);
}

.tp-container--narrow { max-width: 56rem; }
.tp-reading { max-width: var(--tp-reading); }

.tp-section {
  margin-bottom: var(--tp-section);
  scroll-margin-top: 5.5rem;   /* clears the sticky header when jumping */
}

.tp-section__head {
  max-width: var(--tp-reading);
  margin-bottom: 2.25rem;
}

.tp-divider { height: 1px; border: 0; margin: 0; background: var(--tp-line); }

/* A hairline that fades out at both ends - used between stacked blocks. */
.tp-hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--tp-hairline-gradient);
}

.tp-panel-section {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-2xl);
  background: var(--tp-surface);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--tp-shadow-sm);
}

@media (min-width: 640px) {
  .tp-panel-section { padding: 2.5rem 2.25rem; }
}

/* The private pages all start with the same header block. */
.tp-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.tp-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tp-page-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

/* Two-column page skeleton with an optional sticky rail on wide screens. */
.tp-cols { display: grid; gap: var(--tp-block); }

@media (min-width: 1024px) {
  .tp-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .tp-cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-cols--rail-first { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .tp-sticky { position: sticky; top: 5.5rem; }
}

.tp-stack { display: grid; gap: var(--tp-block); }
.tp-stack--tight { gap: 0.75rem; }
.tp-stack--loose { gap: 2rem; }

/* The multi-up grids used across the pages, so cards always line up. */
.tp-grid { display: grid; gap: var(--tp-block); }

@media (min-width: 640px) {
  .tp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .tp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===========================================================================
 * 4. Typography
 * ===========================================================================*/
.tp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: var(--tp-glass);
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tp-ink-soft);
  backdrop-filter: blur(8px);
}

.tp-eyebrow__dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 999px;
  background: var(--tp-accent);
  box-shadow: 0 0 0 3px rgb(79 70 229 / 0.16);
}

.tp-eyebrow--warn { border-color: rgb(180 83 9 / 0.3); color: var(--tp-warn-ink); }
.tp-eyebrow--warn .tp-eyebrow__dot { background: var(--tp-warn); box-shadow: 0 0 0 3px rgb(180 83 9 / 0.16); }
.tp-eyebrow--ok { border-color: rgb(5 150 105 / 0.28); color: var(--tp-ok-ink); }
.tp-eyebrow--ok .tp-eyebrow__dot { background: var(--tp-ok); box-shadow: 0 0 0 3px rgb(5 150 105 / 0.16); }

.tp-display {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--tp-ink);
}

.tp-h1 { font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.14; font-weight: 700; letter-spacing: -0.028em; color: var(--tp-ink); }
.tp-h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; color: var(--tp-ink); }
.tp-h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.012em; color: var(--tp-ink); }
.tp-h4 { font-size: 0.9375rem; line-height: 1.4; font-weight: 600; color: var(--tp-ink); }

h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }

.tp-lede {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--tp-ink-soft);
}

.tp-muted { color: var(--tp-ink-soft); }
.tp-faint { color: var(--tp-ink-faint); }
.tp-ghost-text { color: var(--tp-ink-ghost); }

/* Small caps label, used above value blocks. */
.tp-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tp-tracking-caps);
  text-transform: uppercase;
  color: var(--tp-ink-faint);
}

.tp-small { font-size: 0.8125rem; line-height: 1.55; }
.tp-help { font-size: 0.75rem; line-height: 1.5; color: var(--tp-ink-faint); }

.tp-gradient-text {
  background: var(--tp-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tp-link { font-weight: 500; color: var(--tp-accent); text-underline-offset: 3px; }
.tp-link:hover { text-decoration: underline; }
.dark .tp-link { color: #a5b4fc; }

.tp-link--danger { color: var(--tp-stop); }
.dark .tp-link--danger { color: #fca5a5; }
.tp-link--quiet { color: var(--tp-ink-soft); }
.tp-link--quiet:hover { color: var(--tp-ink); }

.tp-kbd {
  display: inline-block;
  border: 1px solid var(--tp-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--tp-radius-xs);
  background: var(--tp-surface);
  padding: 0.05rem 0.4rem;
  font-family: var(--tp-mono);
  font-size: 0.75rem;
  color: var(--tp-ink);
}

.tp-code {
  font-family: var(--tp-mono);
  font-size: 0.8125em;
  background: var(--tp-surface-2);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-xs);
  padding: 0.08rem 0.35rem;
  color: var(--tp-ink);
}

/* A block of code or a JSON sample. */
.tp-pre {
  margin: 0;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-sunken);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-family: var(--tp-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--tp-ink-soft);
}

/* ===========================================================================
 * 5. Backgrounds and decoration
 * ---------------------------------------------------------------------------
 * Deliberately restrained: two faint blobs, a hairline grid, a glass panel.
 * If it competes with the content, it is too loud.
 * ===========================================================================*/
.portal-glow,
.tp-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.portal-glow::before,
.portal-glow::after,
.tp-glow::before,
.tp-glow::after {
  content: "";
  position: absolute;
  width: 26rem;
  height: 26rem;
  border-radius: 9999px;
  filter: blur(100px);
  opacity: 0.22;
}

.portal-glow::before,
.tp-glow::before {
  top: -13rem;
  left: -9rem;
  background: radial-gradient(circle, #818cf8, transparent 70%);
}

.portal-glow::after,
.tp-glow::after {
  top: -7rem;
  right: -11rem;
  background: radial-gradient(circle, #38bdf8, transparent 70%);
}

.dark .portal-glow::before,
.dark .portal-glow::after,
.dark .tp-glow::before,
.dark .tp-glow::after { opacity: 0.16; }

/* The soft aura behind the top of every page.  It fades out at its bottom edge,
 * so it never shows a hard line where the box ends. */
.tp-aura {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 20rem;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}

.tp-aura__blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.32;
}

.tp-aura__blob--indigo { left: -7rem; top: -11rem; height: 18rem; width: 18rem; background: rgb(129 140 248 / 0.5); }
.tp-aura__blob--sky { right: -6rem; top: -9rem; height: 16rem; width: 16rem; background: rgb(56 189 248 / 0.42); }

.dark .tp-aura__blob { opacity: 0.24; }

/* Faint grid pattern for section backgrounds. */
.portal-grid-bg,
.tp-grid-bg {
  background-image:
    linear-gradient(to right, var(--tp-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tp-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* A frosted panel: used for the sticky header and floating toolbars. */
.tp-glass {
  background: var(--tp-glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* A quiet wash for hero bands, built from the brand gradient at low opacity. */
.tp-wash {
  background-image: var(--tp-brand-gradient-soft);
}

/* ===========================================================================
 * 6. Buttons
 * ---------------------------------------------------------------------------
 * One button definition, five intents.  Every button on the site comes from
 * here, so a "primary" action looks identical on the landing page, in the
 * admin-adjacent screens and in a team page.
 * ===========================================================================*/
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--tp-radius-sm);
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tp-dur-fast) var(--tp-ease),
    border-color var(--tp-dur-fast) var(--tp-ease),
    box-shadow var(--tp-dur-fast) var(--tp-ease),
    color var(--tp-dur-fast) var(--tp-ease),
    transform var(--tp-dur-fast) var(--tp-ease);
}

.tp-btn:active { transform: translateY(1px); }
.tp-btn[disabled],
.tp-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.tp-btn--primary {
  background: var(--tp-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgb(15 17 23 / 0.12), 0 8px 20px -12px rgb(79 70 229 / 0.75);
}

.tp-btn--primary:hover { background: var(--tp-accent-hover); }

.tp-btn--gradient {
  background: var(--tp-brand-gradient);
  color: #fff;
  box-shadow: 0 1px 2px rgb(15 17 23 / 0.12), 0 10px 24px -14px rgb(79 70 229 / 0.8);
}

.tp-btn--gradient:hover { filter: brightness(1.05); }

.tp-btn--ghost {
  border-color: var(--tp-line-strong);
  background: var(--tp-surface);
  color: var(--tp-ink);
  box-shadow: var(--tp-shadow-xs);
}

.tp-btn--ghost:hover { background: var(--tp-surface-2); border-color: var(--tp-line-accent); }

.tp-btn--quiet {
  background: transparent;
  color: var(--tp-ink-soft);
  padding-inline: 0.65rem;
}

.tp-btn--quiet:hover { background: var(--tp-surface-2); color: var(--tp-ink); }

.tp-btn--light { background: #fff; color: var(--tp-accent-hover); box-shadow: var(--tp-shadow-sm); }
.tp-btn--light:hover { background: #f3f4ff; }

.tp-btn--danger { background: var(--tp-stop); color: #fff; }
.tp-btn--danger:hover { filter: brightness(0.93); }

.tp-btn--danger-quiet {
  border-color: rgb(220 38 38 / 0.3);
  background: transparent;
  color: var(--tp-stop);
}

.tp-btn--danger-quiet:hover { background: var(--tp-stop-bg); }

.tp-btn--sm { padding: 0.35rem 0.7rem; font-size: 0.8125rem; border-radius: var(--tp-radius-xs); }
.tp-btn--lg { padding: 0.75rem 1.4rem; font-size: 0.9375rem; border-radius: var(--tp-radius); }
.tp-btn--block { width: 100%; }
.tp-btn--icon { padding: 0.45rem; }

/* An icon-only square control, used in the sticky header. */
.tp-icon-btn {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border: 1px solid var(--tp-line-strong);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface);
  color: var(--tp-ink-soft);
  cursor: pointer;
  transition: background-color var(--tp-dur-fast) var(--tp-ease),
    color var(--tp-dur-fast) var(--tp-ease), border-color var(--tp-dur-fast) var(--tp-ease);
}

.tp-icon-btn:hover { background: var(--tp-surface-2); color: var(--tp-ink); border-color: var(--tp-line-accent); }

/* The small line under the brand name in the header.  Hidden on a phone, where
 * the header needs its width for the menu buttons. */
.tp-brand-sub {
  display: none;
  margin-top: 0.1rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-ink-ghost);
}

@media (min-width: 640px) {
  .tp-brand-sub { display: block; }
}

/* A row of segmented links, used for "my circle / only me" style switches. */
.tp-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface-2);
  padding: 0.15rem;
}

.tp-segment__item {
  border-radius: var(--tp-radius-xs);
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tp-ink-soft);
  text-decoration: none;
  transition: background-color var(--tp-dur-fast) var(--tp-ease), color var(--tp-dur-fast) var(--tp-ease);
}

.tp-segment__item:hover { color: var(--tp-ink); }

.tp-segment__item[aria-current="page"],
.tp-segment__item.is-active {
  background: var(--tp-surface);
  color: var(--tp-ink);
  box-shadow: var(--tp-shadow-xs);
}

/* ===========================================================================
 * 7. Cards, pills, stats
 * ===========================================================================*/
.tp-card {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--tp-shadow-sm);
}

.tp-card--flush { padding: 0; overflow: hidden; }
.tp-card--flat { box-shadow: none; }
.tp-card--sunken { background: var(--tp-sunken); box-shadow: none; }

.tp-card--accent {
  border-color: var(--tp-accent-line);
  background: linear-gradient(180deg, var(--tp-accent-soft), var(--tp-surface) 68%);
}

.tp-card--interactive {
  transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease),
    border-color var(--tp-dur) var(--tp-ease);
}

.tp-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--tp-line-accent);
  box-shadow: var(--tp-shadow-md);
}

/* Older name, still used by the admin templates. */
.portal-lift {
  transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}

.portal-lift:hover { transform: translateY(-2px); }

.tp-card--danger {
  border-color: rgb(220 38 38 / 0.25);
  background: linear-gradient(180deg, var(--tp-stop-bg), var(--tp-surface) 70%);
}

/* An accent stripe down the left edge: used to tie a card to a team colour. */
.tp-card--stripe { border-inline-start-width: 3px; border-inline-start-color: var(--tp-accent); }

.tp-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tp-card__icon {
  display: grid;
  place-items: center;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  border-radius: var(--tp-radius);
  background: var(--tp-accent-soft);
  color: var(--tp-accent-ink);
  font-size: 1.15rem;
}

.dark .tp-card__icon { color: #c7d2fe; }

.tp-card__icon--brand { background: var(--tp-brand-gradient); color: #fff; }
.tp-card__icon--sm { height: 2rem; width: 2rem; font-size: 0.9rem; border-radius: var(--tp-radius-sm); }
.tp-card__icon--warn { background: var(--tp-warn-bg); color: var(--tp-warn-ink); }
.tp-card__icon--ok { background: var(--tp-ok-bg); color: var(--tp-ok-ink); }

.tp-card__footer {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tp-line);
}

.tp-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tp-card__actions > .tp-btn { flex: 1 1 auto; }

/* -- pills ---------------------------------------------------------------- */
.tp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: var(--tp-surface);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tp-ink-soft);
  white-space: nowrap;
}

.tp-pill--accent { border-color: var(--tp-accent-line); background: var(--tp-accent-soft); color: var(--tp-accent-ink); }
.tp-pill--ok { border-color: transparent; background: var(--tp-ok-bg); color: var(--tp-ok-ink); }
.tp-pill--warn { border-color: transparent; background: var(--tp-warn-bg); color: var(--tp-warn-ink); }
.tp-pill--stop { border-color: transparent; background: var(--tp-stop-bg); color: var(--tp-stop-ink); }
.tp-pill--info { border-color: transparent; background: var(--tp-info-bg); color: var(--tp-info-ink); }

/* A pill with a live dot, for status that changes. */
.tp-pill__dot {
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

/* -- stats and KPI --------------------------------------------------------- */
.tp-stat {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  padding: 1rem 1.15rem;
  box-shadow: var(--tp-shadow-sm);
}

.tp-stat__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tp-tracking-caps);
  color: var(--tp-ink-faint);
}

.tp-stat__value {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--tp-ink);
}

.tp-stat__note { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--tp-ink-faint); }

.tp-stat--accent { border-color: var(--tp-accent-line); background: linear-gradient(180deg, var(--tp-accent-soft), var(--tp-surface) 75%); }

/* KPI strip: a single bordered surface split into cells, so a row of numbers
 * reads as one object rather than five floating boxes. */
.tp-kpi {
  display: grid;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow-sm);
  overflow: hidden;
}

@media (min-width: 640px) {
  .tp-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .tp-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tp-kpi__cell {
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--tp-line);
}

.tp-kpi__cell:first-child { border-top: 0; }

@media (min-width: 640px) {
  .tp-kpi__cell { border-top: 0; border-inline-start: 1px solid var(--tp-line); }
  .tp-kpi__cell:nth-child(2n + 1) { border-inline-start: 0; }
}

@media (min-width: 1024px) {
  .tp-kpi__cell:nth-child(2n + 1) { border-inline-start: 1px solid var(--tp-line); }
  .tp-kpi__cell:first-child { border-inline-start: 0; }
}

/* ===========================================================================
 * 8. Lists, steps, accordion, tables, breadcrumb, avatar
 * ===========================================================================*/
.tp-check-list { display: grid; gap: 0.6rem; }

.tp-check-list > li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.tp-check-list__mark {
  margin-top: 0.15rem;
  display: grid;
  place-items: center;
  height: 1.15rem;
  width: 1.15rem;
  flex: none;
  border-radius: 999px;
  background: var(--tp-ok-bg);
  color: var(--tp-ok-ink);
  font-size: 0.65rem;
  font-weight: 700;
}

.tp-check-list--plain .tp-check-list__mark { background: var(--tp-surface-2); color: var(--tp-ink-faint); }

/* -- steps ---------------------------------------------------------------- */
.tp-steps { display: grid; gap: 0.85rem; }

@media (min-width: 1024px) {
  .tp-steps.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tp-step {
  position: relative;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  padding: 1.25rem 1.35rem 1.4rem;
  box-shadow: var(--tp-shadow-sm);
}

.tp-step__number {
  display: grid;
  place-items: center;
  height: 1.85rem;
  width: 1.85rem;
  flex: none;
  border-radius: var(--tp-radius-sm);
  background: var(--tp-brand-gradient);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 6px 16px -10px rgb(79 70 229 / 0.8);
}

.tp-step__time {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tp-tracking-caps);
  color: var(--tp-ink-ghost);
}

/* -- accordion / FAQ ------------------------------------------------------ */
.tp-faq {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  padding: 1rem 1.25rem;
  box-shadow: var(--tp-shadow-sm);
  transition: border-color var(--tp-dur-fast) var(--tp-ease);
}

.tp-faq:hover { border-color: var(--tp-line-accent); }

.tp-faq > summary,
.portal-faq > summary { cursor: pointer; list-style: none; }
.tp-faq > summary::-webkit-details-marker,
.portal-faq > summary::-webkit-details-marker { display: none; }

.portal-faq-icon { flex: none; line-height: 1; transition: transform var(--tp-dur) var(--tp-ease); }

.tp-faq[open] > summary .portal-faq-icon,
.portal-faq[open] > summary .portal-faq-icon { transform: rotate(45deg); }

/* -- tables --------------------------------------------------------------- */
.tp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.tp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 0.875rem;
}

.tp-table caption { text-align: left; padding-bottom: 0.5rem; color: var(--tp-ink-faint); font-size: 0.75rem; }

.tp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--tp-sunken);
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--tp-line);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tp-tracking-caps);
  color: var(--tp-ink-faint);
  white-space: nowrap;
}

.tp-table tbody th,
.tp-table tbody td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--tp-line);
  vertical-align: middle;
}

.tp-table tbody tr:last-child th,
.tp-table tbody tr:last-child td { border-bottom: 0; }

.tp-table tbody tr { transition: background-color var(--tp-dur-fast) var(--tp-ease); }
.tp-table tbody tr:hover { background: var(--tp-sunken); }

.tp-table td.align-right,
.tp-table th.align-right { text-align: right; }

.tp-card--flush .tp-table thead th:first-child,
.tp-card--flush .tp-table tbody td:first-child { padding-inline-start: 1.5rem; }
.tp-card--flush .tp-table thead th:last-child,
.tp-card--flush .tp-table tbody td:last-child { padding-inline-end: 1.5rem; }

/* -- breadcrumb ----------------------------------------------------------- */
.tp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--tp-ink-faint);
}

.tp-breadcrumb a { color: var(--tp-ink-faint); text-decoration: none; }
.tp-breadcrumb a:hover { color: var(--tp-accent); text-decoration: underline; text-underline-offset: 3px; }

/* -- avatar --------------------------------------------------------------- */
.tp-avatar {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  border-radius: 999px;
  background: var(--tp-brand-gradient);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.tp-avatar--sm { height: 1.75rem; width: 1.75rem; font-size: 0.6875rem; }
.tp-avatar--quiet { background: var(--tp-surface-2); color: var(--tp-ink-soft); }

.tp-avatar-stack { display: inline-flex; align-items: center; }

.tp-avatar-stack > * {
  margin-inline-start: -0.5rem;
  box-shadow: 0 0 0 2px var(--tp-surface);
  border-radius: 999px;
}

.tp-avatar-stack > *:first-child { margin-inline-start: 0; }

.tp-avatar-stack__more {
  display: grid;
  place-items: center;
  height: 1.75rem;
  min-width: 1.75rem;
  padding-inline: 0.35rem;
  border-radius: 999px;
  background: var(--tp-surface-2);
  color: var(--tp-ink-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--tp-surface);
}

/* -- definition list used as a facts panel -------------------------------- */
.tp-kv { display: grid; gap: 0.65rem; font-size: 0.875rem; }

.tp-kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--tp-line);
}

.tp-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.tp-kv dt { color: var(--tp-ink-faint); }
.tp-kv dd { margin: 0; font-weight: 600; text-align: end; }

/* ===========================================================================
 * 9. Timeline
 * ---------------------------------------------------------------------------
 * Used by the dashboard, the account page, the team page and the tool's log.
 * A vertical hairline keeps a long history readable without a box per item.
 * ===========================================================================*/
.tp-timeline { display: grid; gap: 0.9rem; }

.tp-timeline > li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.55;
}

.tp-timeline__mark {
  margin-top: 0.3rem;
  height: 0.5rem;
  width: 0.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--tp-accent);
  box-shadow: 0 0 0 4px var(--tp-accent-soft);
}

/* Variant used by the audit log: an icon per row, on a hairline rail. */
.tp-timeline--rich > li { position: relative; padding-bottom: 0.9rem; }
.tp-timeline--rich > li:last-child { padding-bottom: 0; }

.tp-timeline--rich > li::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 2rem;
  bottom: -0.15rem;
  width: 1px;
  background: var(--tp-line);
}

.tp-timeline--rich > li:last-child::before { display: none; }

.tp-timeline--rich .tp-timeline__icon {
  display: grid;
  place-items: center;
  height: 1.75rem;
  width: 1.75rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--tp-line);
  background: var(--tp-surface);
  font-size: 0.8rem;
}

.tp-timeline__delta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--tp-ink-faint);
}

.tp-timeline__delta b { color: var(--tp-ink-soft); font-weight: 600; }

/* ===========================================================================
 * 10. The hero "product shot"
 * ---------------------------------------------------------------------------
 * Pure CSS, no images: a browser frame with a portal dashboard inside it.
 * It is decoration, so the markup hides it from assistive tech - which means it
 * must never be the only place a fact appears.
 * ===========================================================================*/
.tp-mock {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-xl);
  background: var(--tp-surface);
  box-shadow: var(--tp-shadow-lg);
  overflow: hidden;
}

.tp-mock__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid var(--tp-line);
  background: var(--tp-surface-2);
  padding: 0.55rem 0.85rem;
}

.tp-mock__dots { display: flex; gap: 0.28rem; }

.tp-mock__dots span {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 999px;
  background: var(--tp-line-strong);
}

.tp-mock__url {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: var(--tp-surface);
  padding: 0.2rem 0.7rem;
  font-family: var(--tp-mono);
  font-size: 0.65rem;
  color: var(--tp-ink-ghost);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-mock__body { display: grid; gap: 0.7rem; padding: 0.95rem; }

.tp-mock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.tp-mock__tile {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-surface);
  padding: 0.8rem;
}

.tp-mock__skeleton {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--tp-surface-2);
}

.tp-mock__skeleton--wide { width: 78%; }
.tp-mock__skeleton--mid { width: 56%; }
.tp-mock__skeleton--short { width: 34%; }

.tp-mock__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  background: var(--tp-ok-bg);
  color: var(--tp-ok-ink);
  padding: 0.12rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
}

.tp-mock__icon {
  display: grid;
  place-items: center;
  height: 1.65rem;
  width: 1.65rem;
  flex: none;
  border-radius: var(--tp-radius-sm);
  background: var(--tp-brand-gradient);
  color: #fff;
  font-size: 0.75rem;
}

.tp-mock__line { height: 0.5rem; width: 6.5rem; border-radius: 999px; background: var(--tp-surface-2); }
.tp-mock__line--thin { height: 0.35rem; width: 4rem; }
.tp-mock__line--name { height: 0.55rem; width: 5.5rem; background: var(--tp-line-strong); }
.tp-mock__cta { margin-top: 0.9rem; height: 1.6rem; border-radius: var(--tp-radius-sm); background: var(--tp-accent); }

/* ===========================================================================
 * 11. Motion
 * ---------------------------------------------------------------------------
 * Two effects only: a short entrance that never blocks reading, and a shimmer
 * for placeholders.  Both stop completely for `prefers-reduced-motion`.
 * ===========================================================================*/
.tp-rise { animation: tp-rise-in var(--tp-dur-slow) var(--tp-ease) both; }

.tp-rise--1 { animation-delay: 0.05s; }
.tp-rise--2 { animation-delay: 0.11s; }
.tp-rise--3 { animation-delay: 0.17s; }
.tp-rise--4 { animation-delay: 0.23s; }

@keyframes tp-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.portal-skeleton {
  background: linear-gradient(90deg, var(--tp-surface-2) 25%, var(--tp-surface) 37%, var(--tp-surface-2) 63%);
  background-size: 400% 100%;
  animation: portal-shimmer 1.4s ease infinite;
  border-radius: var(--tp-radius);
}

@keyframes portal-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Respect a visitor who asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .portal-skeleton { animation: none; }
  .portal-lift:hover,
  .tp-card--interactive:hover { transform: none; }
  .tp-rise { animation: none; }
}

/* ===========================================================================
 * 12. Forms
 * ---------------------------------------------------------------------------
 * Django renders the fields; this section makes them look like one product.
 * Every control shares a height, a radius, a focus ring and a placeholder tone.
 * ===========================================================================*/
.portal-form { color: var(--tp-ink); }

.portal-form input[type="text"],
.portal-form input[type="email"],
.portal-form input[type="password"],
.portal-form input[type="number"],
.portal-form input[type="url"],
.portal-form input[type="search"],
.portal-form input[type="datetime-local"],
.portal-form input[type="date"],
.portal-form input[type="file"],
.portal-form select,
.portal-form textarea,
.tp-input,
.tp-select,
.tp-textarea {
  margin-top: 0.3rem;
  width: 100%;
  border: 1px solid var(--tp-line-strong);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-field);
  padding: 0.55rem 0.8rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--tp-ink);
  box-shadow: var(--tp-shadow-xs);
  transition: border-color var(--tp-dur-fast) var(--tp-ease), box-shadow var(--tp-dur-fast) var(--tp-ease);
}

.portal-form textarea, .tp-textarea { min-height: 6rem; resize: vertical; }

.portal-form input:hover, .portal-form select:hover, .portal-form textarea:hover,
.tp-input:hover, .tp-select:hover { border-color: var(--tp-line-accent); }

.portal-form input:focus, .portal-form select:focus, .portal-form textarea:focus,
.tp-input:focus, .tp-select:focus, .tp-textarea:focus {
  border-color: var(--tp-accent);
  outline: none;
  box-shadow: var(--tp-ring);
}

.portal-form input::placeholder,
.portal-form textarea::placeholder,
.tp-input::placeholder { color: var(--tp-ink-ghost); }

.portal-form select, .tp-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.95rem;
}

.portal-form input[type="checkbox"],
.portal-form input[type="radio"] {
  height: 1rem;
  width: 1rem;
  accent-color: var(--tp-accent);
}

.portal-form label { color: var(--tp-ink); }

.portal-form .helptext,
.portal-form .help { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--tp-ink-faint); }

.portal-form .errorlist {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--tp-stop);
  font-size: 0.8125rem;
}

.dark .portal-form .errorlist { color: #fca5a5; }

/* A field group with a hairline separator, for long forms. */
.tp-fieldset {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  padding: 1.1rem 1.25rem 1.25rem;
}

.tp-legend {
  padding-inline: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tp-tracking-caps);
  color: var(--tp-ink-faint);
}

/* A compact search box with an inline icon. */
.tp-search { position: relative; }

.tp-search__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tp-ink-ghost);
  pointer-events: none;
  display: grid;
  place-items: center;
}

.tp-search input[type="search"],
.tp-search input[type="text"] {
  margin: 0;
  padding-left: 2.25rem;
}

/* ===========================================================================
 * 13. Team sharing: codes, teams, rights, versions
 * ---------------------------------------------------------------------------
 * Everything the sharing screens add, using the tokens above rather than new
 * decisions.  A share code should look like something you would trust with your
 * team's tools, not like a form field.
 * ===========================================================================*/

/* -- the share code -------------------------------------------------------- */
.tp-share-code-card {
  border: 1px solid var(--tp-accent-line);
  border-radius: var(--tp-radius-xl);
  background: linear-gradient(135deg, var(--tp-accent-soft), var(--tp-surface) 62%);
  padding: 1.5rem;
  box-shadow: var(--tp-shadow-sm);
}

.tp-code-chip {
  display: inline-flex;
  align-items: stretch;
  gap: 0.5rem;
  border: 1px dashed var(--tp-accent-line);
  border-radius: var(--tp-radius);
  background: var(--tp-surface);
  padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  box-shadow: var(--tp-shadow-xs);
}

.tp-code-chip__value {
  align-self: center;
  font-family: var(--tp-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--tp-accent-ink);
}

.tp-code-chip__button {
  border: 0;
  border-radius: var(--tp-radius-sm);
  background: var(--tp-accent);
  padding: 0.42rem 0.9rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--tp-dur-fast) var(--tp-ease);
}

.tp-code-chip__button:hover { background: var(--tp-accent-hover); }

/* -- teams ----------------------------------------------------------------- */
.tp-team-avatar {
  display: grid;
  place-items: center;
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-accent-soft);
  color: var(--tp-accent-ink);
  font-weight: 700;
}

.tp-team-avatar--lg { height: 3.25rem; width: 3.25rem; font-size: 1.25rem; border-radius: var(--tp-radius-lg); }
.dark .tp-team-avatar { color: #c7d2fe; }

.tp-team-avatar--sky     { background: #e8f6fe; color: #0369a1; }
.tp-team-avatar--emerald { background: #e6f9f1; color: #047857; }
.tp-team-avatar--amber   { background: #fdf5e4; color: #a16207; }
.tp-team-avatar--rose    { background: #fdeef1; color: #be123c; }
.tp-team-avatar--violet  { background: #f3edfe; color: #6d28d9; }

.dark .tp-team-avatar--sky     { background: #08243a; color: #7dd3fc; }
.dark .tp-team-avatar--emerald { background: #06251e; color: #6ee7b7; }
.dark .tp-team-avatar--amber   { background: #2a1f08; color: #fcd34d; }
.dark .tp-team-avatar--rose    { background: #320f1b; color: #fda4af; }
.dark .tp-team-avatar--violet  { background: #221046; color: #c4b5fd; }

/* -- add somebody by code -------------------------------------------------- */
.tp-add-member {
  display: grid;
  gap: 0.75rem;
  align-items: end;
  border: 1px dashed var(--tp-line-accent);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-sunken);
  padding: 1rem;
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .tp-add-member { grid-template-columns: 2fr 1fr 1.5fr auto; }
}

.tp-add-member input[type="text"],
.tp-add-member input[type="search"],
.tp-add-member select {
  margin-top: 0.25rem;
  width: 100%;
  border: 1px solid var(--tp-line-strong);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-field);
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  color: var(--tp-ink);
}

.tp-add-member__code input {
  font-family: var(--tp-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* -- the four rights ------------------------------------------------------- */
.tp-rights-grid { display: grid; gap: 0.6rem; }

@media (min-width: 640px) {
  .tp-rights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tp-right {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-surface);
  padding: 0.8rem 0.95rem;
  cursor: pointer;
  transition: border-color var(--tp-dur-fast) var(--tp-ease), box-shadow var(--tp-dur-fast) var(--tp-ease),
    background-color var(--tp-dur-fast) var(--tp-ease);
}

.tp-right:hover { border-color: var(--tp-line-accent); box-shadow: var(--tp-shadow-xs); }
.tp-right--wide { grid-column: 1 / -1; }
.tp-right:has(input:checked) { border-color: var(--tp-line-accent); background: var(--tp-accent-soft); }

.tp-right input[type="checkbox"] {
  margin-top: 0.2rem;
  height: 1rem;
  width: 1rem;
  flex: none;
  accent-color: var(--tp-accent);
}

.tp-right__title { display: block; font-size: 0.9375rem; font-weight: 600; }
.tp-right__note { display: block; font-size: 0.75rem; color: var(--tp-ink-faint); }

.tp-rights-list { display: grid; gap: 0.5rem; font-size: 0.875rem; }
.tp-rights-list > li { display: flex; align-items: flex-start; gap: 0.6rem; }

.tp-rights-list__mark {
  display: grid;
  place-items: center;
  height: 1.1rem;
  width: 1.1rem;
  flex: none;
  border-radius: 999px;
  background: var(--tp-surface-2);
  color: var(--tp-ink-faint);
  font-size: 0.65rem;
  font-weight: 700;
}

.tp-rights-list__mark--on { background: var(--tp-ok-bg); color: var(--tp-ok-ink); }

/* -- rights edited inline on a share row ---------------------------------- */
.tp-rights-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.tp-rights-inline__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tp-tracking-caps);
  color: var(--tp-ink-faint);
}

.tp-rights-summary { margin-top: 0.5rem; font-size: 0.875rem; color: var(--tp-ink-soft); }

.tp-share-block {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-sunken);
  padding: 1.1rem 1.2rem;
}

.tp-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-xs);
  background: var(--tp-surface);
  padding: 0.28rem 0.55rem;
  font-size: 0.8125rem;
  cursor: pointer;
}

.tp-check:has(input:checked) { border-color: var(--tp-line-accent); background: var(--tp-accent-soft); }
.tp-check input[type="checkbox"] { height: 0.9rem; width: 0.9rem; accent-color: var(--tp-accent); }
.tp-check--tiny { padding: 0.12rem 0.4rem; font-size: 0.75rem; }

.tp-input--tiny { max-width: 11rem; font-size: 0.75rem; }

/* -- choices --------------------------------------------------------------- */
.tp-choice-grid { display: grid; gap: 0.5rem; }

@media (min-width: 640px) {
  .tp-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tp-choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-surface);
  padding: 0.5rem 0.8rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.tp-choice:has(input:checked) { border-color: var(--tp-line-accent); background: var(--tp-accent-soft); }
.tp-choice input[type="checkbox"] { height: 1rem; width: 1rem; accent-color: var(--tp-accent); }


/* -- versions -------------------------------------------------------------- */
.tp-version-list { display: grid; gap: 0.7rem; }

.tp-version {
  border: 1px solid var(--tp-line);
  border-inline-start: 3px solid var(--tp-accent);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-sunken);
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
}

.tp-version__number {
  margin-inline-end: 0.5rem;
  font-family: var(--tp-mono);
  font-weight: 700;
  color: var(--tp-accent-ink);
}

/* -- the log --------------------------------------------------------------- */
.tp-log { display: grid; }

.tp-log__row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.8rem 0;
  border-top: 1px solid var(--tp-line);
  font-size: 0.875rem;
}

.tp-log__row:first-child { border-top: 0; }

.tp-log__icon {
  display: grid;
  place-items: center;
  height: 1.7rem;
  width: 1.7rem;
  flex: none;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: var(--tp-surface);
  font-size: 0.8rem;
}

.tp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  padding: 0.75rem 0.95rem;
  box-shadow: var(--tp-shadow-sm);
}

.tp-table--tight tbody td,
.tp-table--tight tbody th { padding: 0.5rem 0.7rem; }


/* ===========================================================================
 * 14. Components
 * ---------------------------------------------------------------------------
 * The pieces every page needs, defined once: a notice, a trust strip, an empty
 * state, a toolbar, a status dot, a meter and the feature/integration cards.
 * If two pages need the same thing, it lives here.
 * ===========================================================================*/

/* -- notices --------------------------------------------------------------- */
.tp-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-surface);
  padding: 0.8rem 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tp-ink-soft);
  box-shadow: var(--tp-shadow-xs);
}

.tp-notice__icon { flex: none; font-size: 0.9rem; line-height: 1.4; }
.tp-notice__body { min-width: 0; flex: 1; }
.tp-notice__title { display: block; font-weight: 600; color: var(--tp-ink); }

.tp-notice--ok   { border-color: color-mix(in srgb, var(--tp-ok) 30%, transparent);     background: var(--tp-ok-bg);   color: var(--tp-ok-ink); }
.tp-notice--warn { border-color: color-mix(in srgb, var(--tp-warn) 30%, transparent);   background: var(--tp-warn-bg); color: var(--tp-warn-ink); }
.tp-notice--stop { border-color: color-mix(in srgb, var(--tp-stop) 30%, transparent);   background: var(--tp-stop-bg); color: var(--tp-stop-ink); }
.tp-notice--info { border-color: color-mix(in srgb, var(--tp-accent) 26%, transparent); background: var(--tp-info-bg); color: var(--tp-info-ink); }

.tp-notice--ok .tp-notice__title,
.tp-notice--warn .tp-notice__title,
.tp-notice--stop .tp-notice__title,
.tp-notice--info .tp-notice__title { color: inherit; }

/* Older names kept so existing markup keeps working. */
.tp-note { border-radius: var(--tp-radius); background: var(--tp-surface-2); padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--tp-ink-soft); }
.tp-note--stop { background: var(--tp-stop-bg); color: var(--tp-stop-ink); }
.tp-note--warn { background: var(--tp-warn-bg); color: var(--tp-warn-ink); }
.tp-note--ok { background: var(--tp-ok-bg); color: var(--tp-ok-ink); }

/* -- status dot ------------------------------------------------------------ */
.tp-dot {
  display: inline-block;
  height: 0.42rem;
  width: 0.42rem;
  flex: none;
  border-radius: 999px;
  background: currentColor;
}

/* -- empty state ----------------------------------------------------------- */
.tp-empty {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  border: 1px dashed var(--tp-line-strong);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-sunken);
  padding: 2.25rem 1.5rem;
  text-align: center;
}

.tp-empty__icon {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: var(--tp-surface);
  font-size: 1.15rem;
}

.tp-empty__title { font-size: 0.9375rem; font-weight: 600; color: var(--tp-ink); }
.tp-empty__text { max-width: 32rem; font-size: 0.875rem; color: var(--tp-ink-soft); }
.tp-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; }

/* -- trust strip ----------------------------------------------------------- */
.tp-trust {
  display: grid;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  overflow: hidden;
  box-shadow: var(--tp-shadow-sm);
}

@media (min-width: 768px) {
  .tp-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tp-trust__item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--tp-line);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tp-ink-soft);
}

.tp-trust__item:first-child { border-top: 0; }

@media (min-width: 768px) {
  .tp-trust__item { border-top: 0; border-inline-start: 1px solid var(--tp-line); }
  .tp-trust__item:first-child { border-inline-start: 0; }
}

.tp-trust__icon { flex: none; font-size: 1rem; line-height: 1.3; }
.tp-trust__value { display: block; font-family: var(--tp-mono); font-size: 1rem; font-weight: 700; color: var(--tp-ink); }
.tp-trust__label { display: block; margin-top: 0.1rem; }

/* -- integration / feature cards ------------------------------------------ */
.tp-feature {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  padding: 1.05rem 1.15rem;
  box-shadow: var(--tp-shadow-sm);
  transition: border-color var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}

.tp-feature:hover { border-color: var(--tp-line-accent); box-shadow: var(--tp-shadow-md); }

.tp-feature__icon {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  flex: none;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-sm);
  background: var(--tp-sunken);
  font-size: 1rem;
}

.tp-feature__title { font-size: 0.9375rem; font-weight: 600; }
.tp-feature__text { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.55; color: var(--tp-ink-soft); }
.tp-feature__meta { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* -- a small labelled badge for "new" / "beta" ---------------------------- */
.tp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--tp-line-accent);
  border-radius: var(--tp-radius-xs);
  background: var(--tp-accent-soft);
  padding: 0.02rem 0.35rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tp-tracking-caps);
  text-transform: uppercase;
  color: var(--tp-accent-ink);
}

.tp-tag--ok { border-color: transparent; background: var(--tp-ok-bg); color: var(--tp-ok-ink); }

/* -- a horizontal meter, for quotas and progress ------------------------- */
.tp-meter {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--tp-surface-2);
  overflow: hidden;
}

.tp-meter__fill { height: 100%; border-radius: 999px; background: var(--tp-brand-gradient); }

/* -- a two-column comparison (before / after) ----------------------------- */
.tp-compare { display: grid; gap: 1rem; }

@media (min-width: 768px) {
  .tp-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tp-compare__col {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-surface);
  padding: 1.15rem 1.25rem;
}

.tp-compare__col--after { border-color: var(--tp-line-accent); background: linear-gradient(180deg, var(--tp-accent-soft), var(--tp-surface) 70%); }
.tp-compare__title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; }

/* -- a quote-style callout for the one sentence that matters ------------- */
.tp-callout {
  border: 1px solid var(--tp-line);
  border-inline-start: 3px solid var(--tp-accent);
  border-radius: var(--tp-radius);
  background: var(--tp-surface);
  padding: 1rem 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tp-ink-soft);
}

.tp-callout strong { color: var(--tp-ink); }

/* -- the sticky sub-header used by long manage pages --------------------- */
.tp-subhead {
  position: sticky;
  top: 4rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--tp-line);
  background: var(--tp-glass);
  backdrop-filter: blur(14px);
  padding-block: 0.6rem;
}

/* -- inline filters and toolbars ----------------------------------------- */
.tp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.tp-toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.tp-actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }


/* ===========================================================================
 * 15. Django admin touches: badges and the drag & drop zone
 * ---------------------------------------------------------------------------
 * The admin is Django's own screen; these are the only places we restyle it, so
 * the badges read the same as the badges in the portal.
 * ===========================================================================*/
.portal-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.portal-badge--active { background: #e7f8f0; color: #04614a; }
.portal-badge--pending { background: #fdf3e0; color: #8a4708; }
.portal-badge--failed { background: #fdecec; color: #9b1c1c; }
.portal-badge--disabled { background: #f1f2f4; color: #4b5563; }

#portal-dropzone {
  border: 2px dashed var(--tp-line-strong);
  border-radius: var(--tp-radius);
  background: var(--tp-sunken);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--tp-dur-fast) var(--tp-ease), background-color var(--tp-dur-fast) var(--tp-ease);
}

#portal-dropzone.dz-drag-hover {
  border-color: var(--tp-accent);
  background: var(--tp-accent-soft);
}

#portal-dropzone .dz-message { margin: 0; font-weight: 600; }

#portal-dropzone-status { margin-top: 0.5rem; color: var(--tp-ink-faint); }

/* ===========================================================================
 * 16. Print
 * ---------------------------------------------------------------------------
 * Everything the portal prints should be the content, on white, at a readable
 * size - no navigation, no decoration, no dark background.
 * ===========================================================================*/
@media print {
  :root,
  .dark {
    --tp-bg: #ffffff;
    --tp-surface: #ffffff;
    --tp-surface-2: #ffffff;
    --tp-sunken: #ffffff;
    --tp-ink: #000000;
    --tp-ink-soft: #333333;
    --tp-ink-faint: #555555;
    --tp-line: #cccccc;
    --tp-line-strong: #999999;
    --tp-shadow-sm: none;
    --tp-shadow-md: none;
    --tp-shadow-lg: none;
  }

  .portal-no-print,
  header,
  footer,
  nav,
  .tp-aura,
  .tp-subhead,
  .tp-filter-bar { display: none !important; }

  body { background: #fff; color: #000; }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after { content: ""; }

  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
}
/* ===========================================================================
 * 17. Plans, rights, limits - and the demo meter
 * ---------------------------------------------------------------------------
 * Pricing is the one place in the product where somebody *decides*, so the cards
 * have to read as an offer rather than a table.  Four restraints do the work:
 *
 *   - the price is the loudest thing on the card, with the period deliberately
 *     quiet beside it, so the eye lands on a number instead of on prose;
 *   - the recommended plan is lifted with accent hairlines, a soft wash and a
 *     badge - never with a different layout - so the three stay comparable;
 *   - **rights are a compact tick list, not prose.** "Teams ✓ / Exports ✓ /
 *     API –" is readable at a glance and in one line per right, which is what
 *     makes three plans comparable without a table;
 *   - **limits and restrictions are stated, quietly.** A plan that lists what it
 *     does not include reads as an offer with an edge; one that lists only
 *     benefits reads as marketing. The restrictions block is deliberately the
 *     smallest type on the card.
 *
 * The demo meter is the same restraint applied to a countdown: a hairline track,
 * a calm accent fill, and tabular figures so the number cannot jitter.
 * ===========================================================================*/
.tp-plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-xl);
  background: var(--tp-surface);
  padding: 1.6rem 1.55rem;
  box-shadow: var(--tp-shadow-sm);
  transition: border-color var(--tp-dur) var(--tp-ease),
    box-shadow var(--tp-dur) var(--tp-ease), transform var(--tp-dur) var(--tp-ease);
}

.tp-plan:hover { transform: translateY(-2px); box-shadow: var(--tp-shadow-md); }

.tp-plan--featured {
  border-color: var(--tp-line-accent);
  background: linear-gradient(180deg, var(--tp-accent-soft), var(--tp-surface) 62%);
  box-shadow: var(--tp-shadow-lg);
}

.tp-plan__head { display: grid; gap: 0.35rem; }

.tp-plan__flag {
  justify-self: start;
  margin-bottom: 0.35rem;
  border-radius: 999px;
  background: var(--tp-accent);
  color: #fff;
  padding: 0.2rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--tp-tracking-caps);
  text-transform: uppercase;
}

.tp-plan__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--tp-tracking-tight);
}

.tp-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.tp-plan__amount {
  font-family: var(--tp-font);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tp-plan__period {
  font-size: 0.82rem;
  color: var(--tp-ink-faint);
}

.tp-plan__blurb {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--tp-ink-soft);
  line-height: 1.55;
}

.tp-plan__best {
  margin-top: 0.3rem;
  font-size: 0.76rem;
  color: var(--tp-ink-ghost);
}

.tp-plan__perks {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  flex: 1;
  font-size: 0.875rem;
  color: var(--tp-ink-soft);
}

.tp-plan__perks li { display: flex; gap: 0.55rem; align-items: flex-start; }

.tp-plan__tick {
  flex: none;
  margin-top: 0.15rem;
  color: var(--tp-ok);
  font-size: 0.8rem;
  line-height: 1.2;
}

.tp-plan__foot { margin-top: 1.35rem; display: grid; gap: 0.6rem; }

.tp-plan__note {
  font-size: 0.75rem;
  color: var(--tp-ink-faint);
  line-height: 1.5;
  text-align: center;
}

/* -- the demo meter -------------------------------------------------------- */
.tp-demo-meter {
  margin-top: 0.85rem;
  height: 5px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tp-line);
}

.tp-demo-meter__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tp-accent), var(--tp-accent-2));
  transition: width var(--tp-dur-slow) var(--tp-ease);
}

.tp-demo-figures {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--tp-ink-soft);
}

.tp-demo-figures strong { font-weight: 600; color: var(--tp-ink); }

/* -- the badge, the rights, the limits and the restrictions ----------------
 * Four small blocks that turned three price cards into three *plans*.  The order
 * on the card is deliberate: offer, then what you may do, then how much of it,
 * then what is missing.  Each uses one type size and one colour, and the block
 * that is "off" is muted rather than hidden - a right you do not have is
 * information, not something to be coy about. */
.tp-plan__badge {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--tp-accent-soft, rgba(79, 70, 229, 0.12));
  color: var(--tp-accent, #4f46e5);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tp-plan__rights {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--tp-line);
  display: grid;
  gap: 0.3rem;
  font-size: 0.86rem;
}

.tp-plan__right dt { display: flex; align-items: baseline; gap: 0.45rem; margin: 0; }
.tp-plan__right dt span { width: 0.9rem; text-align: center; color: var(--tp-ok, #15803d); }
.tp-plan__right--off dt { color: var(--tp-ink-soft); }
.tp-plan__right--off dt span { color: var(--tp-ink-faint, #a1a1aa); }

.tp-plan__limits {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--tp-ink-soft);
}
.tp-plan__limits-label { color: var(--tp-ink); }

.tp-plan__restrictions {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.7rem;
  border-radius: var(--tp-radius-sm, 8px);
  background: var(--tp-surface-2, rgba(0, 0, 0, 0.03));
}
.tp-plan__restrictions-head {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-ink-soft);
}
.tp-plan__restrictions ul { margin: 0; padding-left: 1rem; list-style: disc; }
.tp-plan__restrictions li { font-size: 0.78rem; color: var(--tp-ink-soft); }