/* ==========================================================================
   PTODesk Design System
   Imported from claude.ai/design project 96527ea2-7599-4009-91e6-bd71f2bfa0a5
   ("PTODesk Design System"). Token values are verbatim from that project.

   Design law (from readme.md CONTENT/VISUAL FUNDAMENTALS):
     - White pages, gray-scale chrome. Brand blue #2330eb is an ACCENT.
     - Primary buttons are gray-900, NOT blue.
     - Mint = approved, amber = pending, rose = denied/destructive.
     - Newsreader (serif) headings, Instrument Sans body.
     - Controls .5rem radius, cards .75rem, 1px gray-200 borders.
     - Sentence case, no emoji, no exclamation points.
     - Shadows subtle. Motion 150-200ms. Press scale(.97). Focus 4px ring.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand blue — core is 700 (#2330eb) */
  --color-brand-50:#f7f7fe; --color-brand-100:#ecedfd; --color-brand-200:#cfd0fc;
  --color-brand-300:#a4a7f9; --color-brand-400:#8d90f7; --color-brand-500:#5e63f3;
  --color-brand-600:#4147f1; --color-brand-700:#2330eb; --color-brand-800:#121b98;
  --color-brand-900:#0b106a; --color-brand-950:#162455;

  /* Neutral gray — UI chrome, borders, buttons */
  --color-gray-50:#f9fafb; --color-gray-100:#f3f4f6; --color-gray-200:#e5e7eb;
  --color-gray-300:#d1d5db; --color-gray-400:#9ca3af; --color-gray-500:#6b7280;
  --color-gray-600:#4b5563; --color-gray-700:#374151; --color-gray-800:#1f2937;
  --color-gray-900:#111827;

  /* Slate — cool neutral for overlays/data */
  --color-slate-50:#f8fafc; --color-slate-100:#f1f5f9; --color-slate-200:#e2e8f0;
  --color-slate-300:#cad5e2; --color-slate-400:#90a1b9; --color-slate-500:#62748e;
  --color-slate-600:#45556c; --color-slate-700:#314158; --color-slate-800:#1d293d;
  --color-slate-900:#0f172b;

  /* Mint green — success / approved */
  --color-mint-100:#e9ffe5; --color-mint-200:#c8ffbe; --color-mint-300:#96dc89;
  --color-mint-500:#47aa09; --color-mint-600:#3f9608; --color-mint-700:#318500;
  --color-mint-800:#246700;

  /* Amber — pending / warning */
  --color-amber-400:#fcbb00; --color-amber-500:#f99c00;
  --color-amber-600:#dd7400; --color-amber-700:#b75000;

  /* Rose — denied / destructive */
  --color-rose-400:#ff667f; --color-rose-500:#ff2357;
  --color-rose-600:#e70044; --color-rose-800:#a30037;

  --color-white:#fff; --color-black:#000;

  /* Semantic aliases */
  --color-primary:var(--color-brand-700);
  --surface-page:var(--color-white);
  --surface-subtle:var(--color-gray-50);
  --surface-card:var(--color-white);
  --surface-inverse:var(--color-gray-900);
  --surface-brand-tint:var(--color-brand-50);
  --border-default:var(--color-gray-200);
  --border-subtle:var(--color-gray-100);
  --border-strong:var(--color-gray-300);
  --text-heading:var(--color-gray-900);
  --text-body:var(--color-gray-700);
  --text-muted:var(--color-gray-500);
  --text-inverse:var(--color-white);
  --text-link:var(--color-brand-700);
  --status-approved:var(--color-mint-600); --status-approved-bg:var(--color-mint-100);
  --status-pending:var(--color-amber-600);  --status-pending-bg:#fff7e0;
  --status-denied:var(--color-rose-600);    --status-denied-bg:#ffeef1;
  --status-info:var(--color-brand-600);     --status-info-bg:var(--color-brand-100);

  /* Type */
  --font-heading:"Newsreader","Newsreader Fallback",Georgia,serif;
  --font-body:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem; --text-6xl:3.75rem; --text-7xl:4.5rem;
  --font-weight-light:300; --font-weight-normal:400; --font-weight-medium:500;
  --font-weight-semibold:600; --font-weight-bold:700; --font-weight-extrabold:800;
  --tracking-tighter:-.05em; --tracking-tight:-.025em; --tracking-normal:0em; --tracking-wide:.025em;
  --leading-tight:1.25; --leading-snug:1.375; --leading-normal:1.5; --leading-relaxed:1.625;

  /* Spacing */
  --spacing:.25rem;
  --container-max:80rem;

  /* Radii */
  --radius-xs:.125rem; --radius-sm:.25rem; --radius-md:.375rem; --radius-lg:.5rem;
  --radius-xl:.75rem; --radius-2xl:1rem; --radius-3xl:1.5rem; --radius-4xl:2rem;
  --radius-full:9999px;
  --radius-control:var(--radius-lg);
  --radius-card:var(--radius-xl);

  /* Shadows */
  --shadow-xs:0 1px 1px #0000000d;
  --shadow-sm:0 1px 2px #00000026;
  --shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
  --shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
  --shadow-menu:var(--shadow-md);

  /* Focus rings */
  --ring-neutral:0 0 0 4px var(--color-gray-100);
  --ring-strong:0 0 0 4px var(--color-gray-300);
  --ring-brand:0 0 0 4px var(--color-brand-200);

  /* Motion */
  --duration-fast:150ms;
  --duration-base:200ms;
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-expo:cubic-bezier(.23,1,.32,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  --press-scale:.97;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4 {
  font-family:var(--font-heading);
  color:var(--text-heading);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-tight);
  margin:0;
  text-wrap:balance;
}
h5,h6 { font-family:var(--font-body); font-weight:var(--font-weight-semibold); color:var(--text-heading); margin:0; }
p { margin:0; }
a { color:var(--text-link); text-decoration:none; transition:color var(--duration-base) var(--ease-in-out); }
a:hover { color:var(--color-brand-800); }
img,svg { display:block; max-width:100%; }
code,kbd,pre { font-family:var(--font-mono); }
::selection { background:var(--color-brand-100); color:var(--color-brand-900); }

.pt-container { max-width:var(--container-max); margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px){ .pt-container { padding-inline:1.5rem; } }

/* Serif emphasis — the design system uses real Newsreader italics for accent words */
.pt-em { font-style:italic; font-weight:var(--font-weight-normal); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.pt-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-size:var(--text-sm);
  font-weight:var(--font-weight-medium); line-height:1.25;
  border-radius:var(--radius-control); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background-color var(--duration-base) var(--ease-in-out),
             color var(--duration-base) var(--ease-in-out),
             border-color var(--duration-base) var(--ease-in-out),
             transform var(--duration-fast) var(--ease-out);
}
.pt-btn:active:not(:disabled) { transform:scale(var(--press-scale)); }
.pt-btn:focus-visible { outline:none; }
.pt-btn:disabled,.pt-btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.pt-btn--md { padding:.625rem 1.25rem; }
.pt-btn--sm { padding:.5rem 1rem; }
.pt-btn--lg { padding:.75rem 1.5rem; font-size:var(--text-base); }

.pt-btn--primary { background:var(--color-gray-900); color:#fff; }
.pt-btn--primary:hover:not(:disabled) { background:var(--color-gray-800); color:#fff; }
.pt-btn--primary:focus-visible { box-shadow:var(--ring-strong); }

.pt-btn--secondary { background:#fff; color:var(--color-gray-900); border-color:var(--border-default); }
.pt-btn--secondary:hover:not(:disabled) { background:var(--color-gray-100); color:var(--color-brand-700); }
.pt-btn--secondary:focus-visible { box-shadow:var(--ring-neutral); }

.pt-btn--brand { background:var(--color-brand-700); color:#fff; }
.pt-btn--brand:hover:not(:disabled) { background:var(--color-brand-800); color:#fff; }
.pt-btn--brand:focus-visible { box-shadow:var(--ring-brand); }

.pt-btn--ghost { background:transparent; color:var(--color-gray-700); }
.pt-btn--ghost:hover:not(:disabled) { background:var(--color-gray-100); color:var(--color-gray-900); }
.pt-btn--ghost:focus-visible { box-shadow:var(--ring-neutral); }

.pt-btn--danger { background:var(--color-rose-600); color:#fff; }
.pt-btn--danger:hover:not(:disabled) { background:var(--color-rose-800); color:#fff; }
.pt-btn--danger:focus-visible { box-shadow:0 0 0 4px #ffd4dc; }

/* Inverse — for use on the brand-950 CTA band */
.pt-btn--inverse { background:#fff; color:var(--color-brand-800); }
.pt-btn--inverse:hover:not(:disabled) { background:var(--color-brand-50); color:var(--color-brand-900); }
.pt-btn--inverse:focus-visible { box-shadow:0 0 0 4px rgba(255,255,255,.28); }

.pt-iconbtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:var(--radius-control);
  border:1px solid transparent; background:transparent; color:var(--color-gray-700);
  cursor:pointer;
  transition:background-color var(--duration-base) var(--ease-in-out),
             transform var(--duration-fast) var(--ease-out);
}
.pt-iconbtn:hover { background:var(--color-gray-100); }
.pt-iconbtn:active { transform:scale(var(--press-scale)); }
.pt-iconbtn:focus-visible { outline:none; box-shadow:var(--ring-neutral); }

/* --------------------------------------------------------------------------
   4. Cards & surfaces
   -------------------------------------------------------------------------- */
.pt-card {
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
}
.pt-card__header {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border-subtle);
}
.pt-card__title {
  font-family:var(--font-body); font-size:var(--text-sm);
  font-weight:var(--font-weight-semibold); color:var(--text-heading); margin:0;
  letter-spacing:0;
}
.pt-card__body { padding:1.25rem; }
.pt-card--flush .pt-card__body { padding:0; }

/* Feature tile — 36px rounded-lg with gray-200 border, per the DS icon rule */
.pt-tile {
  width:2.25rem; height:2.25rem; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-control);
  border:1px solid var(--border-default);
  background:#fff; color:var(--color-gray-700);
}
.pt-tile--brand { background:var(--color-brand-50); border-color:var(--color-brand-200); color:var(--color-brand-700); }

/* Hover-reveal feature cell (Features.jsx pattern) */
.pt-featcell {
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.75rem; border-radius:var(--radius-control);
  background:transparent;
  transition:background-color var(--duration-base) var(--ease-in-out);
}
.pt-featcell:hover { background:#fff; }

/* Imagery sits in bordered rounded containers (DS: "Imagery sits in bordered rounded containers") */
.pt-figure {
  border:1px solid var(--border-default);
  border-radius:var(--radius-2xl);
  overflow:hidden;
  background:var(--surface-subtle);
}
.pt-figure img { width:100%; height:auto; }

/* Browser chrome frame used for product screenshots */
.pt-frame { border:1px solid var(--border-default); border-radius:var(--radius-2xl); background:var(--surface-subtle); box-shadow:var(--shadow-md); overflow:hidden; }
.pt-frame__bar { display:flex; gap:.375rem; padding:.625rem .875rem; border-bottom:1px solid var(--border-default); background:#fff; }
.pt-frame__dot { width:.625rem; height:.625rem; border-radius:var(--radius-full); opacity:.85; }

/* --------------------------------------------------------------------------
   5. Badges & tags
   -------------------------------------------------------------------------- */
.pt-badge {
  display:inline-flex; align-items:center; gap:.375rem;
  font-family:var(--font-body); font-size:var(--text-xs);
  font-weight:var(--font-weight-medium);
  padding:.125rem .625rem; border-radius:var(--radius-full); line-height:1.5;
}
.pt-badge::before { content:""; width:.375rem; height:.375rem; border-radius:var(--radius-full); background:currentColor; }
.pt-badge--nodot::before { content:none; }
.pt-badge--approved { background:var(--status-approved-bg); color:var(--color-mint-700); }
.pt-badge--pending  { background:var(--status-pending-bg);  color:var(--status-pending); }
.pt-badge--denied   { background:var(--status-denied-bg);   color:var(--status-denied); }
.pt-badge--info     { background:var(--status-info-bg);     color:var(--color-brand-700); }
.pt-badge--neutral  { background:var(--color-gray-100);     color:var(--color-gray-600); }

.pt-tag {
  display:inline-flex; align-items:center; gap:.375rem;
  font-size:var(--text-xs); font-weight:var(--font-weight-medium);
  padding:.25rem .5rem; border-radius:var(--radius-md);
  background:var(--color-gray-100); color:var(--color-gray-700);
  border:1px solid var(--border-default);
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.pt-label {
  display:block; font-size:var(--text-sm); font-weight:var(--font-weight-medium);
  color:var(--text-heading); margin-bottom:.375rem;
}
.pt-input,.pt-select,.pt-textarea {
  display:block; width:100%;
  font-family:var(--font-body); font-size:var(--text-sm); line-height:1.4286;
  color:var(--text-heading); background:#fff;
  border:1px solid var(--border-default); border-radius:var(--radius-control);
  padding:.625rem .75rem;
  transition:border-color var(--duration-base) var(--ease-in-out),
             box-shadow var(--duration-base) var(--ease-in-out);
}
.pt-input::placeholder,.pt-textarea::placeholder { color:var(--color-gray-400); }
.pt-input:focus,.pt-select:focus,.pt-textarea:focus {
  outline:none; border-color:var(--color-brand-400); box-shadow:var(--ring-brand);
}
.pt-input[aria-invalid="true"] { border-color:var(--color-rose-500); }
.pt-input[aria-invalid="true"]:focus { box-shadow:0 0 0 4px #ffd4dc; }
.pt-select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .625rem center; background-size:1.125rem;
  padding-right:2.25rem;
}
.pt-textarea { min-height:6rem; resize:vertical; }
.pt-help { font-size:var(--text-xs); color:var(--text-muted); margin-top:.375rem; }
.pt-error { font-size:var(--text-xs); color:var(--color-rose-600); margin-top:.375rem; }

.pt-checkbox,.pt-radio {
  appearance:none; width:1rem; height:1rem; flex:none;
  border:1px solid var(--border-strong); background:#fff; cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out);
}
.pt-checkbox { border-radius:var(--radius-sm); }
.pt-radio { border-radius:var(--radius-full); }
.pt-checkbox:checked,.pt-radio:checked { background:var(--color-brand-700); border-color:var(--color-brand-700); }
.pt-checkbox:checked {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size:contain;
}
.pt-radio:checked { box-shadow:inset 0 0 0 3px #fff; }
.pt-checkbox:focus-visible,.pt-radio:focus-visible { outline:none; box-shadow:var(--ring-brand); }

.pt-switch { position:relative; display:inline-flex; align-items:center; cursor:pointer; }
.pt-switch input { position:absolute; opacity:0; width:0; height:0; }
.pt-switch__track {
  width:2.5rem; height:1.375rem; border-radius:var(--radius-full);
  background:var(--color-gray-300); position:relative;
  transition:background-color var(--duration-base) var(--ease-in-out);
}
.pt-switch__track::after {
  content:""; position:absolute; top:.1875rem; left:.1875rem;
  width:1rem; height:1rem; border-radius:var(--radius-full); background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-out);
}
.pt-switch input:checked + .pt-switch__track { background:var(--color-brand-700); }
.pt-switch input:checked + .pt-switch__track::after { transform:translateX(1.125rem); }
.pt-switch input:focus-visible + .pt-switch__track { box-shadow:var(--ring-brand); }

/* --------------------------------------------------------------------------
   7. Dialog / modal
   The DS specifies a slate-900/40 page dim + pop-in on expo ease.
   -------------------------------------------------------------------------- */
.pt-overlay {
  position:fixed; inset:0; z-index:100;
  background:rgba(15,23,43,.4);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  animation:pt-fade var(--duration-base) var(--ease-out);
}
.pt-overlay[hidden] { display:none; }
.pt-dialog {
  background:#fff; border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg); width:100%; max-width:28rem;
  font-family:var(--font-body);
  animation:pt-pop var(--duration-base) var(--ease-expo);
  max-height:calc(100vh - 2rem); display:flex; flex-direction:column;
}
.pt-dialog--wide { max-width:56rem; }
.pt-dialog--xwide { max-width:72rem; }
.pt-dialog__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.25rem 0; }
.pt-dialog__title { font-family:var(--font-body); font-size:var(--text-lg); font-weight:var(--font-weight-semibold); color:var(--text-heading); margin:0; letter-spacing:0; }
.pt-dialog__close {
  border:0; background:none; cursor:pointer; color:var(--color-gray-400);
  padding:.25rem; border-radius:var(--radius-md); font-size:1.25rem; line-height:1;
  transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pt-dialog__close:hover { color:var(--color-gray-700); background:var(--color-gray-100); }
.pt-dialog__body { padding:1rem 1.25rem 1.25rem; color:var(--text-body); font-size:var(--text-sm); line-height:var(--leading-normal); overflow-y:auto; }
.pt-dialog__footer { display:flex; justify-content:flex-end; gap:.5rem; padding:0 1.25rem 1.25rem; }

@keyframes pt-fade { from { opacity:0; } }
@keyframes pt-pop  { from { opacity:0; transform:translateY(4px) scale(.97); } }

/* --------------------------------------------------------------------------
   8. Toast & tooltip
   -------------------------------------------------------------------------- */
.pt-toast-region { position:fixed; bottom:1.25rem; right:1.25rem; z-index:200; display:flex; flex-direction:column; gap:.5rem; }
.pt-toast {
  display:flex; align-items:flex-start; gap:.75rem;
  min-width:18rem; max-width:26rem;
  background:#fff; border:1px solid var(--border-default);
  border-radius:var(--radius-card); box-shadow:var(--shadow-lg);
  padding:.875rem 1rem; font-size:var(--text-sm); color:var(--text-body);
  animation:pt-toast-in var(--duration-base) var(--ease-expo);
}
.pt-toast__accent { width:.25rem; align-self:stretch; border-radius:var(--radius-full); flex:none; background:var(--color-gray-300); }
.pt-toast--success .pt-toast__accent { background:var(--color-mint-600); }
.pt-toast--warning .pt-toast__accent { background:var(--color-amber-500); }
.pt-toast--error   .pt-toast__accent { background:var(--color-rose-600); }
@keyframes pt-toast-in { from { opacity:0; transform:translateY(8px) scale(.97); } }

.pt-tooltip { position:relative; display:inline-flex; }
.pt-tooltip__bubble {
  position:absolute; bottom:calc(100% + .5rem); left:50%;
  transform:translateX(-50%) translateY(4px) scale(.95);
  background:var(--color-gray-900); color:#fff;
  font-size:var(--text-xs); font-weight:var(--font-weight-medium);
  padding:.375rem .5rem; border-radius:var(--radius-control);
  white-space:nowrap; pointer-events:none; opacity:0;
  transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-expo);
  z-index:60;
}
.pt-tooltip:hover .pt-tooltip__bubble,.pt-tooltip:focus-within .pt-tooltip__bubble {
  opacity:1; transform:translateX(-50%) translateY(0) scale(1);
}

/* --------------------------------------------------------------------------
   9. Tabs
   -------------------------------------------------------------------------- */
.pt-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border-default); }
.pt-tab {
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--font-weight-medium);
  color:var(--text-muted); padding:.625rem .875rem;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--duration-base) var(--ease-in-out), border-color var(--duration-base) var(--ease-in-out);
}
.pt-tab:hover { color:var(--text-heading); }
.pt-tab[aria-selected="true"] { color:var(--color-brand-700); border-bottom-color:var(--color-brand-700); }
.pt-tab:focus-visible { outline:none; box-shadow:var(--ring-neutral); border-radius:var(--radius-md); }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.pt-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.pt-table th {
  text-align:left; font-weight:var(--font-weight-medium); color:var(--text-muted);
  font-size:var(--text-xs); text-transform:none; letter-spacing:var(--tracking-wide);
  padding:.75rem 1.25rem; border-bottom:1px solid var(--border-default); white-space:nowrap;
}
.pt-table td { padding:.875rem 1.25rem; border-bottom:1px solid var(--border-subtle); color:var(--text-body); vertical-align:middle; }
.pt-table tbody tr:last-child td { border-bottom:0; }
.pt-table tbody tr { transition:background-color var(--duration-fast) var(--ease-out); }
.pt-table tbody tr:hover { background:var(--surface-subtle); }
.pt-table__num { font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------------------
   11. Header / nav
   -------------------------------------------------------------------------- */
.pt-header {
  position:sticky; top:0; z-index:40;
  background:#fff; border-bottom:1px solid var(--border-default);
  padding:.625rem 0;
  transition:box-shadow var(--duration-base) var(--ease-in-out),
             background-color var(--duration-base) var(--ease-in-out);
}
/* Restrained translucency on scroll only — the DS calls blur "rare", so it is
   used here as a scroll affordance, not as a surface style. */
.pt-header[data-scrolled="true"] {
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  box-shadow:var(--shadow-xs);
}
.pt-navlink {
  font-size:.9375rem; font-weight:var(--font-weight-medium); color:var(--color-gray-700);
  display:inline-flex; align-items:center; gap:.25rem;
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-body);
  transition:color var(--duration-base) var(--ease-in-out);
}
.pt-navlink:hover { color:var(--color-brand-700); }

/* Mega menu — expo ease reveal with slight translate+scale, per DS motion rule */
.pt-menu {
  position:absolute; top:calc(100% + .5rem); left:0;
  background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); box-shadow:var(--shadow-menu);
  padding:.5rem; min-width:20rem;
  opacity:0; transform:translateY(-.25rem) scale(.95); pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-expo), transform var(--duration-base) var(--ease-expo);
  z-index:50;
}
.pt-menu[data-open="true"] { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.pt-menu__item {
  display:flex; gap:.75rem; align-items:flex-start; padding:.5rem;
  border-radius:var(--radius-control); color:var(--text-body);
  transition:background-color var(--duration-fast) var(--ease-out);
}
.pt-menu__item:hover { background:var(--color-gray-50); color:var(--text-body); }

/* --------------------------------------------------------------------------
   11b. Mobile navigation

   One drawer pattern reused by the marketing header, the admin sidebar and the
   app shell. Off-canvas by default below the breakpoint, pinned open above it.
   -------------------------------------------------------------------------- */
.pt-burger {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; flex:none;
  border:1px solid var(--border-default); border-radius:var(--radius-control);
  background:#fff; color:var(--color-gray-700); cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out);
}
.pt-burger:hover { background:var(--color-gray-100); }
.pt-burger:active { transform:scale(var(--press-scale)); }
.pt-burger:focus-visible { outline:none; box-shadow:var(--ring-neutral); }

/* Three bars that morph into a cross when the drawer is open. */
.pt-burger__box { position:relative; width:1.125rem; height:.875rem; }
.pt-burger__bar {
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform var(--duration-base) var(--ease-expo),
             opacity var(--duration-fast) var(--ease-out),
             top var(--duration-base) var(--ease-expo);
}
.pt-burger__bar:nth-child(1) { top:0; }
.pt-burger__bar:nth-child(2) { top:.375rem; }
.pt-burger__bar:nth-child(3) { top:.75rem; }
.pt-burger[aria-expanded="true"] .pt-burger__bar:nth-child(1) { top:.375rem; transform:rotate(45deg); }
.pt-burger[aria-expanded="true"] .pt-burger__bar:nth-child(2) { opacity:0; }
.pt-burger[aria-expanded="true"] .pt-burger__bar:nth-child(3) { top:.375rem; transform:rotate(-45deg); }

/* Scrim behind an open drawer. */
.pt-scrim {
  position:fixed; inset:0; z-index:60;
  background:rgba(15,23,43,.4);
  opacity:0; pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-out);
}
.pt-scrim[data-open="true"] { opacity:1; pointer-events:auto; }

.pt-drawer {
  position:fixed; top:0; bottom:0; left:0; z-index:70;
  width:min(19rem, 86vw);
  background:#fff; border-right:1px solid var(--border-default);
  display:flex; flex-direction:column;
  padding:1rem .875rem;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transform:translateX(-100%);
  transition:transform var(--duration-base) var(--ease-sheet);
}
.pt-drawer[data-open="true"] { transform:translateX(0); }
.pt-drawer--right { left:auto; right:0; border-right:0; border-left:1px solid var(--border-default); transform:translateX(100%); }
.pt-drawer--right[data-open="true"] { transform:translateX(0); }

.pt-drawer__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.875rem; margin-bottom:.375rem; border-bottom:1px solid var(--border-subtle); }
.pt-drawer__link {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem .625rem; border-radius:var(--radius-control);
  font-size:var(--text-base); font-weight:var(--font-weight-medium);
  color:var(--color-gray-800); min-height:2.75rem;
  transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pt-drawer__link:hover { background:var(--color-gray-100); color:var(--color-gray-900); }
.pt-drawer__link[aria-current="page"] { background:var(--color-brand-50); color:var(--color-brand-700); }
.pt-drawer__section { font-size:var(--text-xs); font-weight:var(--font-weight-semibold); color:var(--text-muted); padding:.875rem .625rem .25rem; letter-spacing:var(--tracking-wide); }
.pt-drawer__foot { margin-top:auto; padding-top:.875rem; border-top:1px solid var(--border-subtle); }

/* The drawer is a mobile affordance only — above the breakpoint it is inert. */
@media (min-width:1024px) {
  .pt-burger,
  .pt-scrim,
  .pt-drawer { display:none !important; }
}

/* Body scroll lock while a drawer or dialog is open. */
body[data-locked="true"] { overflow:hidden; }

/* --------------------------------------------------------------------------
   12. Admin / app shell
   -------------------------------------------------------------------------- */
.pt-shell { display:flex; min-height:100vh; background:var(--surface-subtle); }
.pt-sidebar {
  width:15rem; flex:none; background:#fff;
  border-right:1px solid var(--border-default);
  display:flex; flex-direction:column; padding:1rem .75rem;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
/* Below the breakpoint the persistent sidebar is replaced by the drawer. */
@media (max-width:1023px) {
  .pt-sidebar { display:none; }
}
.pt-sidebar__link {
  display:flex; align-items:center; gap:.625rem;
  padding:.5rem .625rem; border-radius:var(--radius-control);
  font-size:var(--text-sm); font-weight:var(--font-weight-medium);
  color:var(--color-gray-700);
  transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.pt-sidebar__link:hover { background:var(--color-gray-100); color:var(--color-gray-900); }
.pt-sidebar__link[aria-current="page"] { background:var(--color-brand-50); color:var(--color-brand-700); }
.pt-sidebar__section { font-size:var(--text-xs); font-weight:var(--font-weight-semibold); color:var(--text-muted); padding:.5rem .625rem .25rem; letter-spacing:var(--tracking-wide); }
.pt-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.pt-topbar { background:#fff; border-bottom:1px solid var(--border-default); padding:.875rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.pt-content { padding:1.5rem; flex:1; }

/* --------------------------------------------------------------------------
   13. Stat / metric
   -------------------------------------------------------------------------- */
.pt-stat { display:flex; flex-direction:column; gap:.25rem; }
.pt-stat__label { font-size:var(--text-xs); color:var(--text-muted); font-weight:var(--font-weight-medium); }
.pt-stat__value { font-family:var(--font-heading); font-size:var(--text-3xl); font-weight:var(--font-weight-medium); color:var(--text-heading); letter-spacing:var(--tracking-tight); font-variant-numeric:tabular-nums; line-height:1.1; }
.pt-stat__sub { font-size:var(--text-xs); color:var(--text-muted); }

/* --------------------------------------------------------------------------
   14. Code / log output (migration runner)
   -------------------------------------------------------------------------- */
.pt-code {
  font-family:var(--font-mono); font-size:var(--text-xs); line-height:1.6;
  background:var(--color-slate-900); color:var(--color-slate-100);
  border-radius:var(--radius-card); padding:1rem 1.25rem;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word; margin:0;
}
.pt-code .ok   { color:var(--color-mint-300); }
.pt-code .warn { color:var(--color-amber-400); }
.pt-code .err  { color:var(--color-rose-400); }
.pt-code .dim  { color:var(--color-slate-400); }
.pt-kbd {
  font-family:var(--font-mono); font-size:var(--text-xs);
  background:var(--color-gray-100); border:1px solid var(--border-default);
  border-bottom-width:2px; border-radius:var(--radius-md);
  padding:.0625rem .3125rem; color:var(--color-gray-700);
}

/* --------------------------------------------------------------------------
   15. Reveal-on-scroll

   Scoped under .js, which is set by an inline script in <head>. Without
   scripting the hidden state is never applied, so a blocked or failed
   ptodesk.js leaves the page fully readable instead of blank.
   -------------------------------------------------------------------------- */
.js .pt-reveal { opacity:0; transform:translateY(.75rem); transition:opacity 420ms var(--ease-out), transform 420ms var(--ease-expo); }
.js .pt-reveal[data-visible="true"] { opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   15b. Responsive

   The design system is desktop-first in its source, so these rules define the
   small-screen behaviour explicitly rather than leaving it to chance.
   -------------------------------------------------------------------------- */

/* Any wide block scrolls inside its own container — the page body must never
   scroll horizontally. */
.pt-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Tables that stack into cards below the breakpoint. Each cell carries its
   column name in data-label, so the header row can be dropped without losing
   meaning. Opt in with .pt-table--stack. */
@media (max-width:767px) {
  .pt-table--stack thead { display:none; }
  .pt-table--stack tbody tr {
    display:block; padding:.875rem 1rem;
    border-bottom:1px solid var(--border-subtle);
  }
  .pt-table--stack tbody tr:last-child { border-bottom:0; }
  .pt-table--stack tbody td {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.25rem 0; border:0; text-align:right;
  }
  .pt-table--stack tbody td::before {
    content:attr(data-label);
    font-size:var(--text-xs); color:var(--text-muted);
    font-weight:var(--font-weight-medium); text-align:left; flex:none;
  }
  .pt-table--stack tbody td:empty { display:none; }
  /* A cell marked as the row's title reads as a heading, not a key/value pair. */
  .pt-table--stack tbody td[data-primary] {
    justify-content:flex-start; padding-bottom:.5rem;
    font-weight:var(--font-weight-semibold); color:var(--text-heading);
  }
  .pt-table--stack tbody td[data-primary]::before { content:none; }
}

@media (max-width:1023px) {
  .pt-content { padding:1rem; }
  .pt-topbar  { padding:.75rem 1rem; }
}

@media (max-width:640px) {
  .pt-container { padding-inline:1rem; }
  .pt-card__body   { padding:1rem; }
  .pt-card__header { padding:.875rem 1rem; }
  .pt-dialog { max-width:100%; max-height:calc(100dvh - 1rem); }
  .pt-dialog__footer { flex-direction:column-reverse; }
  .pt-dialog__footer > * { width:100%; }
  .pt-dialog__footer .pt-btn { width:100%; }

  /* Toasts span the width on a phone rather than floating in a corner. */
  .pt-toast-region { left:.75rem; right:.75rem; bottom:.75rem; }
  .pt-toast { min-width:0; max-width:none; }

  /* Comfortable touch targets. */
  .pt-btn--md { padding:.75rem 1.25rem; }
  .pt-btn--sm { padding:.625rem 1rem; }
  .pt-input, .pt-select, .pt-textarea { padding:.75rem; font-size:1rem; }
  .pt-tab { padding:.75rem .75rem; }

  /* Tabs scroll rather than wrap or squash. */
  .pt-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pt-tabs::-webkit-scrollbar { display:none; }
  .pt-tab { white-space:nowrap; flex:none; }

  .pt-stat__value { font-size:var(--text-2xl); }
}

/* iOS zooms the page when a focused input is under 16px. Never let that happen. */
@media (max-width:767px) {
  input, select, textarea { font-size:16px; }
}

/* --------------------------------------------------------------------------
   15c. Marketing feature panels

   Rich product-UI showcases for the feature and landing pages: a soft tinted
   gradient frame around a floating white card built from the real component
   layer. Tinted gradients here are an explicit, user-approved exception to the
   design system's flat-background rule, scoped to marketing imagery only —
   product and admin surfaces stay flat.
   -------------------------------------------------------------------------- */
.pt-panel {
  position:relative; overflow:hidden;
  border-radius:var(--radius-3xl);
  padding:1.5rem;
}
@media (min-width:640px) { .pt-panel { padding:2.25rem; } }

.pt-panel__title {
  font-family:var(--font-body); font-size:var(--text-xs);
  font-weight:var(--font-weight-semibold); letter-spacing:.07em;
  text-transform:uppercase; color:rgba(15,23,43,.55);
  margin:0 0 1rem;
}
.pt-panel__card {
  background:#fff; border-radius:var(--radius-2xl);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 16px 40px -20px rgba(15,23,43,.28), 0 2px 8px -4px rgba(15,23,43,.10);
}

/* Tints — one per feature family, drawn from the token palette. */
.pt-panel--lavender { background:linear-gradient(150deg,#eef0fe 0%,#e2e5fd 55%,#d4d9fb 100%); }
.pt-panel--indigo   { background:linear-gradient(150deg,#e7e9fe 0%,#d6dafd 55%,#c4cafc 100%); }
.pt-panel--blue     { background:linear-gradient(150deg,#ecedfd 0%,#dddffc 55%,#cfd0fc 100%); }
.pt-panel--peach    { background:linear-gradient(150deg,#fff1e8 0%,#ffe4d3 55%,#ffd7c1 100%); }
.pt-panel--mint     { background:linear-gradient(150deg,#effde9 0%,#ddf8d3 55%,#caf2bc 100%); }
.pt-panel--amber    { background:linear-gradient(150deg,#fff7df 0%,#ffeec0 55%,#ffe3a0 100%); }
.pt-panel--rose     { background:linear-gradient(150deg,#ffeef1 0%,#ffdde3 55%,#ffcbd5 100%); }
.pt-panel--slate    { background:linear-gradient(150deg,#f3f6fa 0%,#e4eaf1 55%,#d4dde8 100%); }

/* Card variant — fills a feature card's header area edge to edge, so the
   artwork reads as part of the card rather than a tile floating inside it. */
.pt-panel--card {
  padding:1.25rem;
  border-radius:0;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.pt-panel--card .pt-panel__card { box-shadow:0 8px 20px -12px rgba(15,23,43,.30); }

/* Decorative corner glow, very faint, keeps large panels from feeling flat. */
.pt-panel::before {
  content:""; position:absolute; top:-30%; right:-15%;
  width:60%; height:80%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.65), transparent);
  pointer-events:none;
}
.pt-panel > * { position:relative; }

/* --------------------------------------------------------------------------
   16. Motion-reduce
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .pt-reveal { opacity:1; transform:none; }
}