/* ================================================================
   GCIT Portal Kit design system (CW #2560495)
   Tokens from GCIT-Dev/gcit-design-tokens (gcitLight / gcitDark):
   navy #143D60 primary, teal ring/accents, coral destructive.
   Legacy Tailwind utilities used across the admin templates are
   remapped onto the tokens below, so every page re-themes without
   per-template changes; component classes (btn, badge, stat-card, table, form) are
   redefined portal-kit style in plain CSS.
   ================================================================ */
:root {
    --background: #ffffff;
    --foreground: hsl(0 0% 10%);
    --card: #ffffff;
    --muted: hsl(210 40% 96%);
    --muted-foreground: hsl(215 16% 47%);
    --secondary: hsl(210 40% 96%);
    --primary: hsl(208 65% 23%);
    --primary-foreground: #ffffff;
    --destructive: hsl(12 67% 63%);
    --border: hsl(220 13% 91%);
    --input: hsl(220 13% 91%);
    --ring: hsl(174 62% 47%);
    --sidebar: #fafafa;
    --sidebar-foreground: #0a0a0a;
    --sidebar-accent: #eeefef;
    --sidebar-accent-foreground: #171717;
    --sidebar-border: #e5e5e5;
    --radius: 0.625rem;
    --text-2: hsl(215 16% 30%);
    --primary-tint: hsl(208 65% 23% / 0.08);
    --primary-tint-strong: hsl(208 65% 23% / 0.14);
    --warning: hsl(38 92% 40%);       /* waiting on a person (approval dots) */

    /* ---- Type scale (maps the existing hardcoded sizes) ---- */
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --font-heading: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* ---- Spacing scale (4px base) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* ---- Elevation (retire the copy-pasted 0 1px 2px shadow) ---- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / .08);
    --shadow-pop: 0 8px 24px -4px rgb(0 0 0 / .12);

    /* ---- Radius (single --radius, formalized calc pattern) ---- */
    --radius-sm: calc(var(--radius) - 0.25rem);
    --radius-md: var(--radius);
    --radius-lg: calc(var(--radius) + 0.25rem);

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 120ms;
    --dur: 200ms;
}
.dark {
    color-scheme: dark;
    --background: hsl(208 60% 12%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(208 55% 16%);
    --muted: hsl(208 35% 22%);
    --muted-foreground: hsl(215 20% 70%);
    --secondary: hsl(208 35% 22%);
    --primary: hsl(174 62% 47%);
    --primary-foreground: hsl(208 65% 12%);
    --destructive: hsl(12 67% 53%);
    --border: hsl(208 35% 22%);
    --input: hsl(208 35% 26%);
    --ring: hsl(174 62% 47%);
    --sidebar: hsl(208 60% 9%);
    --sidebar-foreground: hsl(0 0% 92%);
    --sidebar-accent: hsl(208 45% 18%);
    --sidebar-accent-foreground: hsl(0 0% 98%);
    --sidebar-border: hsl(208 40% 18%);
    --text-2: hsl(215 20% 82%);
    --primary-tint: hsl(174 62% 47% / 0.10);
    --primary-tint-strong: hsl(174 62% 47% / 0.16);
    --warning: hsl(38 90% 58%);

    /* Elevation on dark: same structure, higher alpha so shadows read on navy */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .35);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / .40);
    --shadow-pop: 0 8px 24px -4px rgb(0 0 0 / .45);
}

html, body { font-family: Inter, system-ui, sans-serif; }
body { background-color: var(--background); color: var(--foreground); }
h1, h2, h3, .font-heading, .stat-value { font-family: Poppins, Inter, sans-serif; }

/* ---- Legacy utility remap → tokens (light AND dark via vars) ---- */
html .bg-white { background-color: var(--card); }
html .bg-gray-50 { background-color: var(--background); }
html .bg-gray-50\/40 { background-color: color-mix(in srgb, var(--muted) 40%, transparent); }
html .bg-gray-50\/60 { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }
html thead.bg-gray-50, html .bg-gray-50.sticky, html div.bg-gray-50:not(body) { background-color: color-mix(in srgb, var(--muted) 55%, var(--card)); }
html .bg-gray-100 { background-color: var(--muted); }
html .bg-blue-50, html .bg-blue-50\/60 { background-color: var(--primary-tint); }
html .bg-blue-100 { background-color: var(--primary-tint-strong); }
html .bg-black\/5 { background-color: color-mix(in srgb, var(--foreground) 6%, transparent); }
html .hover\:bg-gray-50:hover { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
html .hover\:bg-gray-100:hover { background-color: var(--muted); }
html .hover\:bg-gray-200:hover { background-color: color-mix(in srgb, var(--muted) 80%, var(--border)); }

html .text-gray-900, html .text-gray-800 { color: var(--foreground); }
html .text-gray-700, html .text-gray-600 { color: var(--text-2); }
html .text-gray-500 { color: var(--muted-foreground); }
html .text-gray-400 { color: color-mix(in srgb, var(--muted-foreground) 75%, transparent); }
html .text-gray-300 { color: color-mix(in srgb, var(--muted-foreground) 45%, transparent); }
html .hover\:text-gray-700:hover, html .hover\:text-gray-900:hover { color: var(--foreground); }

html .border-gray-300 { border-color: var(--input); }
html .border-gray-200, html .border-blue-100 { border-color: var(--border); }
html .border-gray-100, html .border-gray-50 { border-color: color-mix(in srgb, var(--border) 60%, transparent); }
html .divide-gray-200 > * + *, html .divide-gray-100 > * + * { border-color: color-mix(in srgb, var(--border) 70%, transparent); }
html .border-blue-200 { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }

html .text-blue-600, html .text-blue-700, html .text-blue-800 { color: var(--primary); }
html .hover\:text-blue-700:hover, html .hover\:text-blue-800:hover { color: color-mix(in srgb, var(--primary) 80%, var(--foreground)); }
html .bg-blue-600 { background-color: var(--primary); }
html .hover\:bg-blue-700:hover { background-color: color-mix(in srgb, var(--primary) 88%, black); }
html .text-blue-500 { color: var(--ring); }
html .bg-blue-500 { background-color: var(--ring); }
html .hover\:bg-blue-600:hover { background-color: color-mix(in srgb, var(--ring) 85%, black); }
html .ring-blue-200 { --tw-ring-color: color-mix(in srgb, var(--ring) 35%, transparent); }
html .focus\:ring-blue-500:focus { --tw-ring-color: var(--ring); }
html .focus\:border-blue-500:focus { border-color: var(--ring); }

/* ---- Portal-kit component layer (Card / Tabs / Alert anatomy) ---- */
.pk-card {
    background-color: var(--card); color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 0.125rem);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.pk-card-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    /* UX-3a: wrap so a wide title + multi-button action cluster drops the
       actions onto a second line on phone instead of crushing the title to
       one-word-per-line and clipping the last button. Inert on desktop —
       wrapping only triggers when the row can't fit. */
    flex-wrap: wrap; gap: 0.5rem 0.75rem;
}
/* UX-3a: let a multi-button action cluster inside a card header wrap too, so a
   3+ button row (e.g. Registered agents) drops buttons onto a second line on
   phone instead of clipping the last one off the right edge. `.flex` is the
   action cluster's own class; the title block is a plain <div>, so it is
   untouched. Inert on desktop — wrapping only triggers when the row overflows. */
.pk-card-header > .flex { flex-wrap: wrap; }
.pk-card-title { font-family: Poppins, Inter, sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--foreground); line-height: 1.25; }
.pk-card-desc { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.pk-card-content { padding: 1rem 1.25rem; }
.pk-page-header { margin-bottom: 1rem; }
.pk-page-header h1 { font-size: 1.125rem; font-weight: 600; }
.pk-page-header p { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.125rem; }

.pk-tabs { display: inline-flex; gap: 0.25rem; background: var(--muted); padding: 3px; border-radius: var(--radius); }
.pk-tab {
    padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500;
    border-radius: calc(var(--radius) - 0.1875rem); color: color-mix(in srgb, var(--foreground) 60%, transparent);
    cursor: pointer; transition: all .15s; border: 1px solid transparent; white-space: nowrap;
}
.pk-tab:hover { color: var(--foreground); }
.pk-tab.active { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08); }

.pk-alert {
    display: flex; gap: 0.75rem; align-items: flex-start;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); padding: 0.75rem 1rem; font-size: 0.875rem;
}
.pk-alert.destructive { color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 35%, transparent); }

.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
.btn-xs { padding: 0.125rem 0.5rem; font-size: 0.75rem; }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--muted); color: var(--foreground); }

/* Kit table head: subtle muted band inside cards */
.pk-card thead { background: color-mix(in srgb, var(--muted) 55%, var(--card)); }
.pk-card tbody tr:hover { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.pk-card tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }

/* ---- Components (legacy names, portal-kit styling) ---- */
.stat-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}
.stat-value { font-size: 1.5rem; font-weight: 600; color: var(--foreground); line-height: 2rem; }
.stat-label { font-size: 0.75rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }

.table-header, .table-header-r {
    font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.625rem 1rem; text-align: left; white-space: nowrap;
}
.table-header-r { text-align: right; }
.table-cell, .table-num { padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--text-2); }
.table-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Header icon buttons (nav / theme): ≥40px tap target on every device without
   enlarging the glyph — the icon keeps its inline size, only the padding box
   grows to a comfortable touch target (UX-3a #4). */
.pk-icon-btn {
    min-width: 2.5rem; min-height: 2.5rem; padding: 0.375rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Responsive table → stacked cards on phone (UX-3a #1) ----
   Opt-in via class `pk-table-responsive`. All rules live inside the phone
   media query, so tablet/desktop rendering is byte-for-byte unchanged. Each
   data row (a <tr data-slug>) collapses into a labelled card: the column head
   is re-projected per cell via a `data-label` attribute, giving a premium
   label:value read instead of a clipped horizontal-scroll table. */
@media (max-width: 639px) {
    table.pk-table-responsive,
    table.pk-table-responsive tbody,
    table.pk-table-responsive tr,
    table.pk-table-responsive td { display: block; width: 100%; }
    table.pk-table-responsive thead { display: none; }

    /* data rows → cards */
    table.pk-table-responsive tr[data-slug] {
        border: 1px solid var(--border);
        border-radius: calc(var(--radius) - 0.0625rem);
        background: var(--card);
        margin: 0.625rem 0; padding: 0.25rem 0; overflow: hidden;
        cursor: pointer;
    }
    table.pk-table-responsive tr[data-slug] td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; padding: 0.375rem 0.875rem !important;
        text-align: right; border: 0; white-space: normal; word-break: break-word;
    }
    table.pk-table-responsive tr[data-slug] td::before {
        content: attr(data-label);
        flex: 0 0 auto; text-align: left;
        font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em;
        text-transform: uppercase; color: var(--muted-foreground);
    }
    /* first (name) cell reads as the card title — no duplicate label */
    table.pk-table-responsive tr[data-slug] td:first-child {
        display: block; text-align: left;
        font-size: 0.9375rem; font-weight: 600; color: var(--foreground);
        padding: 0.5rem 0.875rem 0.25rem !important;
    }
    table.pk-table-responsive tr[data-slug] td:first-child::before { display: none; }

    /* grouped sub-header rows (agents page) read as section labels, not cards */
    table.pk-table-responsive tr.ag-org-row { margin-top: 0.75rem; }
    table.pk-table-responsive tr.ag-org-row td {
        text-align: left; border: 0; padding: 0.5rem 0.75rem !important;
    }
    table.pk-table-responsive tr.ag-org-row td:empty { display: none; }
}

.badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.125rem 0.5rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}
.badge-green  { background: hsl(160 60% 45% / .14); color: hsl(160 70% 25%); }  /* 30% was 4.2:1 on its tint */
.badge-yellow { background: hsl(46 86% 66% / .22); color: hsl(40 80% 30%); }
.badge-red    { background: hsl(12 67% 63% / .16); color: hsl(12 62% 40%); }
.badge-blue   { background: var(--primary-tint-strong); color: var(--primary); }
.badge-gray   { background: var(--muted); color: var(--muted-foreground); }
.dark .badge-green  { color: hsl(160 60% 65%); }
.dark .badge-yellow { color: hsl(46 86% 70%); }
.dark .badge-red    { color: hsl(12 80% 74%); }

.form-input {
    width: 100%; padding: 0.375rem 0.75rem; font-size: 0.875rem;
    background-color: transparent; color: var(--foreground);
    border: 1px solid var(--input); border-radius: calc(var(--radius) - 0.125rem);
    outline: none; transition: color .15s, box-shadow .15s, border-color .15s;
    box-shadow: var(--shadow-sm);
}
.dark .form-input { background-color: color-mix(in srgb, var(--input) 30%, transparent); }
.form-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
/* Placeholder is text: WCAG 1.4.3 needs >= 4.5:1. The bare muted token is 4.3:1 on a
   --muted panel, so it is nudged 10% toward --foreground (>= 4.9:1 on every token surface,
   still far lighter than entered text). Opaque; opacity:1 overrides browser fading. */
.form-input::placeholder { color: color-mix(in srgb, var(--muted-foreground) 90%, var(--foreground)); opacity: 1; }
select.form-input option { background-color: var(--card); color: var(--foreground); }
.form-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-2); margin-bottom: 0.25rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500;
    border-radius: calc(var(--radius) - 0.125rem);
    transition: all .15s; outline: none; cursor: pointer; white-space: nowrap;
}
.btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.btn:disabled { pointer-events: none; opacity: .5; }
.btn-primary { background-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background-color: color-mix(in srgb, var(--primary) 90%, black); }
.dark .btn-primary:hover { background-color: color-mix(in srgb, var(--primary) 88%, white); }
.btn-secondary { background-color: var(--secondary); color: var(--text-2); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background-color: color-mix(in srgb, var(--secondary) 70%, var(--border)); color: var(--foreground); }
.btn-danger { background-color: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--destructive); }
.btn-danger:hover { background-color: color-mix(in srgb, var(--destructive) 20%, transparent); }

/* ---- Status-chip utilities on dark (translucent fills, light text) ---- */
.dark .bg-green-50,  .dark .bg-green-100,  .dark .bg-emerald-100 { background-color: hsl(160 60% 45% / .15); }
.dark .bg-yellow-50, .dark .bg-yellow-100 { background-color: hsl(46 86% 66% / .15); }
.dark .bg-amber-50,  .dark .bg-amber-100  { background-color: hsl(38 92% 50% / .15); }
.dark .bg-orange-50, .dark .bg-orange-100 { background-color: hsl(25 95% 53% / .15); }
.dark .bg-red-50,    .dark .bg-red-100    { background-color: hsl(12 67% 53% / .16); }
.dark .bg-sky-100    { background-color: hsl(199 89% 48% / .18); }
.dark .bg-violet-50, .dark .bg-purple-100 { background-color: hsl(262 83% 66% / .18); }
.dark .bg-indigo-100 { background-color: hsl(239 84% 67% / .18); }
.dark .text-green-700,  .dark .text-green-600, .dark .text-emerald-700 { color: hsl(160 60% 70%); }
.dark .text-yellow-700, .dark .text-yellow-600 { color: hsl(46 86% 70%); }
.dark .text-amber-700,  .dark .text-amber-600  { color: hsl(38 92% 70%); }
.dark .text-orange-600, .dark .text-orange-700 { color: hsl(25 95% 72%); }
.dark .text-red-700,    .dark .text-red-600    { color: hsl(12 80% 74%); }
.dark .text-red-900     { color: hsl(12 80% 80%); }
.dark .text-violet-700, .dark .text-purple-700 { color: hsl(262 83% 80%); }
.dark .text-indigo-700  { color: hsl(239 84% 80%); }
.dark .text-sky-700     { color: hsl(199 89% 70%); }
.dark .border-green-200, .dark .border-green-300 { border-color: hsl(160 60% 45% / .35); }
.dark .border-yellow-200 { border-color: hsl(46 86% 66% / .35); }
.dark .border-red-200, .dark .border-red-300 { border-color: hsl(12 67% 53% / .35); }
.dark .ring-green-200  { --tw-ring-color: hsl(160 60% 45% / .35); }
.dark .ring-yellow-200 { --tw-ring-color: hsl(46 86% 66% / .35); }
.dark .ring-amber-200  { --tw-ring-color: hsl(38 92% 50% / .35); }
.dark .ring-orange-200 { --tw-ring-color: hsl(25 95% 53% / .35); }
.dark .ring-red-200    { --tw-ring-color: hsl(12 67% 53% / .35); }
.dark .ring-sky-200    { --tw-ring-color: hsl(199 89% 48% / .35); }
.dark .ring-violet-200 { --tw-ring-color: hsl(262 83% 66% / .35); }
.dark .ring-gray-200   { --tw-ring-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent); }
.dark .bg-black\/40 { background-color: rgb(0 0 0 / 0.6); }

/* ---- Sidebar (portal-kit shell) ---- */
.pk-sidebar {
    width: 16rem; background-color: var(--sidebar); color: var(--sidebar-foreground);
    border-right: 1px solid var(--sidebar-border);
    display: flex; flex-direction: column;
}
/* Collapsible nav (CW #2567001): hamburger toggle on ALL viewports. Mobile
   (≤768px) gets an off-canvas overlay, collapsed by default. Desktop (>768px)
   toggles the sidebar in/out of the layout; the choice persists in
   localStorage and is applied pre-paint via html.nav-collapsed. */
.pk-nav-toggle { display: inline-flex; }
.pk-scrim { display: none; }
@media (min-width: 769px) {
    html.nav-collapsed .pk-sidebar { display: none; }
}
@media (max-width: 768px) {
    .pk-sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .pk-sidebar.open { transform: translateX(0); box-shadow: 0 0 24px rgb(0 0 0 / 0.35); }
    .pk-nav-toggle { display: inline-flex; }
    .pk-scrim.open {
        display: block; position: fixed; inset: 0; z-index: 40;
        background: rgb(0 0 0 / 0.4);
    }
}
.pk-nav-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem; border-radius: calc(var(--radius) - 0.125rem);
    font-size: 0.875rem; color: var(--sidebar-foreground);
    transition: background-color .15s, color .15s;
}
.pk-nav-item:hover { background-color: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.pk-nav-item.active { background-color: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500; }
.pk-nav-item.active svg { color: var(--ring); }
.pk-nav-item svg { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }

/* ---- Grouped navigation (UX audit 2026-08) ---- */
.pk-nav-group { display: flex; flex-direction: column; gap: 0.125rem; }
.pk-nav-group + .pk-nav-group { margin-top: 0.5rem; }
.pk-nav-group-label {
    padding: 0.375rem 0.75rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
/* A group whose items are all hidden (white-label hidden_sections) collapses away,
   header and all — so a section label never appears with nothing beneath it. */
.pk-nav-group:not(:has(> a.pk-nav-item)) { display: none; }

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted-foreground) 35%, transparent); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* Rounded corners nudged to the kit radius on common card utilities */
html .rounded-lg { border-radius: var(--radius); }
html .rounded-md { border-radius: calc(var(--radius) - 0.125rem); }

/* ================================================================
   PR-1 component/interaction shells (design-token foundation).
   Self-contained, token-only, theme-aware (light + dark), and
   reduced-motion-safe. Later PRs adopt these; adding them here is a
   visual no-op on every current page (nothing references them yet).
   ================================================================ */

/* ---- Page intro (pairs with the existing .pk-page-header) ---- */
.pk-page-desc { font-size: var(--text-sm); color: var(--muted-foreground); line-height: var(--leading-normal); }
.pk-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--muted-foreground); margin-bottom: var(--space-2);
}
.pk-breadcrumb a { color: var(--muted-foreground); }
.pk-breadcrumb a:hover { color: var(--foreground); }
.pk-breadcrumb .pk-breadcrumb-sep { color: color-mix(in srgb, var(--muted-foreground) 55%, transparent); }
.pk-breadcrumb .pk-breadcrumb-current { color: var(--foreground); font-weight: 500; }

/* ---- KPI tile alias over legacy .stat-card visuals ---- */
.pk-stat {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.pk-stat-value { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; color: var(--foreground); line-height: 2rem; }
.pk-stat-label { font-size: var(--text-xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--space-1); }

/* ---- Inline alert / banner (icon slot + text) ---- */
.pk-alert-info, .pk-alert-success, .pk-alert-warn, .pk-alert-danger {
    display: flex; gap: var(--space-3); align-items: flex-start;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); font-size: var(--text-base);
    line-height: var(--leading-normal);
}
.pk-alert-info > svg, .pk-alert-success > svg, .pk-alert-warn > svg, .pk-alert-danger > svg {
    width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;
}
.pk-alert-info {
    background: var(--primary-tint);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
}
.pk-alert-success {
    background: hsl(160 60% 45% / .12);
    border-color: hsl(160 60% 45% / .35);
    color: hsl(160 70% 25%);  /* 30% was under 4.5:1 on this tint */
}
.dark .pk-alert-success { color: hsl(160 60% 70%); }
.pk-alert-warn {
    background: hsl(46 86% 66% / .18);
    border-color: hsl(46 86% 66% / .40);
    color: hsl(40 80% 30%);
}
.dark .pk-alert-warn { color: hsl(46 86% 72%); }
.pk-alert-danger {
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
    border-color: color-mix(in srgb, var(--destructive) 35%, transparent);
    color: var(--destructive);
}
.dark .pk-alert-danger { color: hsl(12 80% 74%); }

/* ---- Empty state (centered icon + title + line + optional action) ---- */
.pk-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-2); padding: var(--space-8) var(--space-4);
    color: var(--muted-foreground);
}
.pk-empty svg { width: 2rem; height: 2rem; color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); }
.pk-empty-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--foreground); }
.pk-empty-desc { font-size: var(--text-sm); color: var(--muted-foreground); max-width: 32rem; line-height: var(--leading-normal); }
.pk-empty-action { margin-top: var(--space-2); }

/* ---- Skeleton loading block (shimmer; static under reduced-motion) ---- */
.pk-skeleton {
    display: block; border-radius: var(--radius-sm);
    background-color: var(--muted);
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--card) 60%, transparent) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: pk-skeleton-shimmer 1.4s var(--ease) infinite;
    min-height: 0.75rem;
}
@keyframes pk-skeleton-shimmer {
    0% { background-position: -150% 0; }
    100% { background-position: 150% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pk-skeleton { animation: none; background-image: none; background-color: var(--muted); }
}

/* ---- Toast (bottom-right, non-blocking) ---- */
.pk-toast-container {
    position: fixed; z-index: 60; right: var(--space-4); bottom: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2);
    max-width: min(24rem, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
}
.pk-toast {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
    line-height: var(--leading-normal); pointer-events: auto;
    opacity: 0; transform: translateY(0.5rem);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pk-toast.pk-toast-show { opacity: 1; transform: translateY(0); }
.pk-toast svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem; }
@media (prefers-reduced-motion: reduce) {
    .pk-toast { transition: none; transform: none; }
}

/* ---- Drawer (right-side slide-over; JS wiring is a later PR) ---- */
.pk-drawer-backdrop {
    position: fixed; inset: 0; z-index: 70;
    background: rgb(0 0 0 / 0.4);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.pk-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
    width: min(28rem, 100vw);
    background: var(--card); color: var(--foreground);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
}
.pk-drawer-open .pk-drawer { transform: translateX(0); }
.pk-drawer-open .pk-drawer-backdrop { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .pk-drawer, .pk-drawer-backdrop { transition: none; }
}

/* ---- Confirm popover shell (soft-reversible actions) ---- */
.pk-confirm {
    background: var(--card); color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: var(--space-4); max-width: 20rem;
    font-size: var(--text-sm); line-height: var(--leading-normal);
}
.pk-confirm-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--foreground); margin-bottom: var(--space-1); }
.pk-confirm-desc { color: var(--muted-foreground); }
.pk-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

/* Tenant desktop navigation keeps destinations available in a compact rail (CW2588132).
   Mobile continues to use the existing modal drawer and its topbar button. */
#desktopNavToggle, .pk-rail-child-icon { display: none; }
.pk-tenant-shell .pk-sidebar-brand { flex-shrink: 0; }
.pk-tenant-shell .pk-sidebar-brand > svg { flex-shrink: 0; }
.pk-tenant-shell .pk-sidebar-brand-copy { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 769px) {
    .pk-tenant-shell #navToggle { display: none; }
    .pk-tenant-shell #desktopNavToggle { display: inline-flex; margin-left: auto; flex-shrink: 0; }
    html.nav-collapsed .pk-tenant-shell .pk-sidebar { display: flex; width: 4.5rem; flex-shrink: 0; }
    html.nav-collapsed .pk-tenant-shell .pk-sidebar-brand { padding: .5rem; flex-direction: column; gap: .5rem; }
    html.nav-collapsed .pk-tenant-shell #desktopNavToggle { margin: 0; }
    html.nav-collapsed .pk-tenant-shell #desktopNavToggle svg { transform: rotate(180deg); }
    html.nav-collapsed .pk-tenant-shell .pk-sidebar-brand-copy,
    html.nav-collapsed .pk-tenant-shell .pk-sidebar-meta { display: none; }
    html.nav-collapsed .pk-tenant-shell .pk-nav-item { font-size: 0; gap: 0; justify-content: center; min-height: 2.75rem; padding: .5rem; margin-left: 0; }
    html.nav-collapsed .pk-tenant-shell .pk-nav-item svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
    html.nav-collapsed .pk-tenant-shell .pk-rail-child-icon { display: block; }
    html.nav-collapsed .pk-tenant-shell .pk-sidebar-footer { padding: .5rem; }
}

/* ================================================================
   "Paper & Ink" theme (portal refresh PR1, CW #2587483).
   Dark behind PORTAL_THEME_PAPER_INK_ENABLED (customer tenants only):
   routes._ctx puts `theme-burli-paper` on <body> only then, so every
   rule below is scoped to that class and is a no-op everywhere else.
   Tokens are ADDED over the kit variables (same names, no renames),
   from docs/design/burli-portal-refresh.md. Contrast figures are WCAG
   2.x and are recomputed by tests/test_portal_theme_paper_ink.py.
   ================================================================ */
.theme-burli-paper {
  /* ── existing portal-kit variables, overridden ── */
  --background: #FBF8F0;            /* paper: the concept image's ground */
  --foreground: #102F4F;            /* ink: 12.8:1 on paper, 13.6:1 on card */
  --card: #FFFFFF;
  --muted: #F4EEE1;                 /* deeper paper: sidebar, stat tiles */
  --muted-foreground: #5A6E81;      /* captions: 5.3:1 on card, 5.0:1 on paper, 4.56:1 on muted.
                                       The design's #5B6F82 measured 4.49:1 on deep paper, under
                                       AA; this is the smallest step darker that clears it on both
                                       paper and deep paper (non-refreshed pages a11y pass). */
  --text-2: #3E566E;                /* secondary text: 7.6:1 on card */
  --secondary: #F4EEE1;
  --primary: #102F4F;               /* primary buttons are ink */
  --primary-foreground: #FFF9E9;    /* cream on ink: 13.0:1 */
  --primary-tint: rgb(16 47 79 / .06);
  --primary-tint-strong: rgb(16 47 79 / .12);
  --destructive: #C2413B;
  --border: #E7E0D1;                /* warm hairline for ordinary cards and rows */
  --input: var(--field-border);     /* field outline (design #8C99A6 is 2.9:1, under 3:1; see
                                       --field-border below); focus uses --ring */
  --ring: #007478;                  /* Burli teal (website accent): 5.6:1 on white */
  --sidebar: #F4EEE1;
  --sidebar-foreground: #102F4F;
  --sidebar-accent: #FFFFFF;        /* active item is a white chip with an ink outline */
  --sidebar-accent-foreground: #102F4F;
  --sidebar-border: #E7E0D1;
  --radius: 0.75rem;                /* 12px: buttons, inputs, nav items */
  /* The kit derives these on :root, where they resolve against the kit's radius; redeclared
     here so the kit components that use them follow the theme's 12px too. */
  --radius-sm: calc(var(--radius) - 0.25rem);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 0.25rem);

  /* ── new variables ── */
  --ink: #102F4F;
  --paper: #FBF8F0;
  --cream: #FFF9E9;                 /* the characters' body colour */
  --accent: #007478;                /* links, success, focus */
  --accent-strong: #00585C;         /* link hover, text on accent tints */
  --accent-tint: #E3F3F1;
  --radius-card: 1.125rem;          /* 18px: cards */
  --radius-hero: 1.375rem;          /* 22px: profile hero */
  --sticker-border: 1.5px solid #102F4F;   /* coworker identity cards only */
  --sticker-shadow: 0 3px 0 #102F4F;       /* 4px on large cards, 5px on the hatchery stage */

  /* Identity tiles: each coworker's colour, taken from its avatar palette. Fills only, never text.
     Ink text on any tile passes AA (sky 7.6:1, sunshine 8.7:1). */
  --tile-sky: #7FCBF7;
  --tile-lagoon: #4DD8E6;
  --tile-seafoam: #95DFCC;
  --tile-coral: #FF8F8D;
  --tile-sunshine: #FFC651;
  --tile-lavender: #B09DE6;

  /* Status pills: background / text / dot. Text passes AA on its background. */
  --status-working-bg: #D9F0EE;  --status-working-fg: #00585C;  --status-working-dot: #007478;
  --status-approval-bg: #FFF0C7; --status-approval-fg: #6E4700; --status-approval-dot: #E09A00;
  --status-idle-bg: #ECEEF1;     --status-idle-fg: #44546A;     --status-idle-dot: #8594A5;
  --status-hatching-bg: #ECE7FA; --status-hatching-fg: #46378A; --status-hatching-dot: #8D78D6;

  /* Access levels (Connections grid, profile). Final vocabulary is an open decision (D2). */
  --access-read-bg: #EFEAE0;     --access-read-fg: #4A4032;
  --access-draft-bg: #E4F2FC;    --access-draft-fg: #1B4F7A;
  --access-okact-bg: #FFF0C7;    --access-okact-fg: #6E4700;
  --access-act-bg: #D9F0EE;      --access-act-fg: #00585C;
}

/* PR1 additions to the design's tokens (still add-only). Paused and "can't reach" were not
   drawn (brief section 4): each gets its own tint AND its own dot shape (hollow ring,
   diamond), and every pill always carries its label, so none is told apart by hue alone.
   D2 settled the access words as Off / Read / Ask first / Act: Ask first reuses the
   "act with OK" colours, Off is a dashed outline on white. */
.theme-burli-paper {
  --status-paused-bg: #E4F2FC;   --status-paused-fg: #1B4F7A;   --status-paused-dot: #1B4F7A;
  --status-unreachable-bg: #FCE8E6; --status-unreachable-fg: #8A241F; --status-unreachable-dot: #C2413B;
  --access-ask-bg: var(--access-okact-bg); --access-ask-fg: var(--access-okact-fg);
  --access-off-bg: #FFFFFF;      --access-off-fg: #5B6F82;
  --human-disc: #EFE7D6;            /* people: initials on a warm disc, never an illustration */
  --radius-roster: 1.25rem;         /* 20px: roster identity cards */
  --radius-stage: 1.625rem;         /* 26px: hatchery stage */
  --control-min: 2.75rem;           /* 44px touch target */
  --control-compact: 2.25rem;       /* 36px compact row buttons */
  /* Two measured corrections (tests/test_portal_theme_paper_ink.py recomputes both):
     the design's caption ink on deep paper is 4.49:1, a hair under AA, so captions ON deep
     paper (sidebar, tab strips) use this slightly darker ink (4.9:1); and the field
     outline #8C99A6 is 2.9:1 on white, under the 3:1 a control boundary needs (WCAG
     1.4.11), so --input itself points at this one (3.6:1 on white, 3.4:1 on paper): every
     field that draws var(--input) (kit, shell and page styles alike) gets the passing
     outline. --muted-foreground itself was later darkened a step too (4.56:1 on deep
     paper), because captions on deep paper turned up outside the sidebar and tab strips
     (Settings and Permissions state chips, the palette hint, Classifiers' hints); the
     sidebar and tab strips keep the darker caption ink above. */
  --caption-on-deep: #56697C;
  --field-border: #7B8897;
  color-scheme: light;
}

/* D8: light only while the theme is on. base.html already ignores a saved dark choice and
   hides the toggle; this pairing keeps the paper palette even if `.dark` reaches <html>
   another way, by undoing the kit's few hard-coded dark rules inside the theme. (The
   custom properties need no repeat: <body> redeclares them, so they win over <html>.) */
.dark .theme-burli-paper { color-scheme: light; }
.dark .theme-burli-paper .form-input { background-color: var(--card); }
.dark .theme-burli-paper .badge-green { color: hsl(160 70% 25%); }
.dark .theme-burli-paper .badge-yellow { color: hsl(40 80% 30%); }
.dark .theme-burli-paper .badge-red { color: hsl(12 62% 40%); }
.dark .theme-burli-paper .pk-alert-success { color: hsl(160 70% 25%); }
.dark .theme-burli-paper .pk-alert-warn { color: hsl(40 80% 30%); }
.dark .theme-burli-paper .pk-alert-danger { color: var(--destructive); }
.dark .theme-burli-paper .btn-primary:hover { background-color: color-mix(in srgb, var(--ink) 86%, white); }

/* ── Shell: deep-paper sidebar; the active item is a softly edged white chip ── */
.theme-burli-paper .pk-nav-item {
    min-height: var(--control-min); padding: 0 0.75rem; gap: 0.75rem;
    border: 1.5px solid transparent; border-radius: var(--radius);
    color: var(--ink); font-weight: 500;
}
.theme-burli-paper .pk-nav-item svg { width: 1.125rem; height: 1.125rem; color: var(--ink); }
.theme-burli-paper .pk-nav-item:hover { background-color: color-mix(in srgb, var(--card) 60%, transparent); color: var(--ink); }
.theme-burli-paper .pk-nav-item.active {
    background-color: var(--sidebar-accent); border-color: var(--border);
    color: var(--ink); font-weight: 600;
}
.theme-burli-paper .pk-nav-item.active svg { color: var(--ink); }
.theme-burli-paper .pk-nav-child {
    /* base.html indents children under the parent's label; the theme's .pk-nav-item padding
       would otherwise out-dent them. Padding + 1.125rem icon + gap = the parent's label edge. */
    min-height: 2.25rem; padding-left: calc(0.75rem + 1.125rem + 0.75rem);
}
.theme-burli-paper .pk-sidebar,
.theme-burli-paper .pk-tabs,
.theme-burli-paper .wk-tabs { --muted-foreground: var(--caption-on-deep); }

/* ── Buttons: primary = ink fill + cream text; secondary = white + soft paper edge;
      ghost = text only. Teal is for links and success, never the primary action. ── */
.theme-burli-paper .btn {
    min-height: var(--control-min); padding: 0.5rem 1rem;
    border: 1.5px solid transparent; border-radius: var(--radius);
    font-weight: 600; box-shadow: none;
    /* Not the kit's `transition: all`: that also animates the outline, so the focus ring
       would fade in from a 3px ink default instead of appearing at once. */
    transition: background-color .15s, border-color .15s, color .15s;
}
.theme-burli-paper .btn-sm { min-height: var(--control-compact); padding: 0.25rem 0.75rem; }
/* Phones: compact buttons keep the full 44px touch target (WCAG 2.5.5 / the design's "inside a 44px hit area"). */
@media (max-width: 639px) { .theme-burli-paper .btn-sm { min-height: var(--control-min); } }
.theme-burli-paper .btn-xs { min-height: 2rem; padding: 0.125rem 0.625rem; }
.theme-burli-paper .pk-icon-btn { min-width: var(--control-min); min-height: var(--control-min); padding: 0.375rem; }
.theme-burli-paper .btn-primary { background-color: var(--ink); border-color: var(--ink); color: var(--cream); }
.theme-burli-paper .btn-primary:hover { background-color: color-mix(in srgb, var(--ink) 86%, white); border-color: color-mix(in srgb, var(--ink) 86%, white); color: var(--cream); }
.theme-burli-paper .btn-secondary { background-color: var(--card); border: 1px solid var(--border); color: var(--ink); box-shadow: none; }
.theme-burli-paper .btn-secondary:hover { background-color: var(--paper); border-color: var(--field-border); color: var(--ink); }
.theme-burli-paper .btn-ghost { background: transparent; border-color: transparent; color: var(--ink); }
.theme-burli-paper .btn-ghost:hover { background: var(--muted); color: var(--ink); }
.theme-burli-paper .btn-danger { border-color: color-mix(in srgb, var(--destructive) 45%, transparent); }

/* ── Focus: one visible teal ring everywhere (WCAG 2.4.7 / 2.4.11) ── */
.theme-burli-paper :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.theme-burli-paper .btn:focus-visible,
.theme-burli-paper .pk-nav-item:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; }
.theme-burli-paper .form-input:focus,
.theme-burli-paper .form-input:focus-visible {
    border-color: var(--ring); outline: 2px solid var(--ring); outline-offset: 1px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 18%, transparent);
}

/* ── Controls: 44px minimum, 12px radius, white fields with a readable outline ── */
.theme-burli-paper .form-input {
    min-height: var(--control-min); padding: 0.5rem 0.75rem;
    background-color: var(--card); border-color: var(--field-border);
    border-radius: var(--radius); box-shadow: none;
}
.theme-burli-paper textarea.form-input { min-height: 5.5rem; }

/* ── Ordinary cards: white, 1px line border, 18px radius, no shadow ──
   (the kit's own cards plus Home's and Settings' page cards; page <style> blocks come
   later in the cascade, so these carry the theme class for specificity) */
.theme-burli-paper .pk-card,
.theme-burli-paper .stat-card,
.theme-burli-paper .pk-stat,
.theme-burli-paper .th-card,
.theme-burli-paper .th-hero,
.theme-burli-paper .tc-card,
.theme-burli-paper .tc-group,
.theme-burli-paper .tc-overview {
    background-color: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: none;
}
.theme-burli-paper .pk-card-header { padding: 1rem 1.375rem; }
.theme-burli-paper .pk-card-content { padding: 1.375rem; }
.theme-burli-paper .pk-card-title { font-size: 1.0625rem; }
.theme-burli-paper a.th-card:hover { border-color: var(--field-border); background: var(--card); }
.theme-burli-paper .pk-tab.active,
.theme-burli-paper .wk-tab.active { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.theme-burli-paper .pk-tab,
.theme-burli-paper .wk-tab { color: var(--text-2); }

/* ================================================================
   Paper & Ink components for later PRs (roster, profile, Home v2,
   access grid). Scoped to the theme; no page uses them yet.
   ================================================================ */

/* ── Tile colours (a coworker's identity colour; fills only, never text) ── */
.theme-burli-paper .pk-tile-sky { --tile: var(--tile-sky); }
.theme-burli-paper .pk-tile-lagoon { --tile: var(--tile-lagoon); }
.theme-burli-paper .pk-tile-seafoam { --tile: var(--tile-seafoam); }
.theme-burli-paper .pk-tile-coral { --tile: var(--tile-coral); }
.theme-burli-paper .pk-tile-sunshine { --tile: var(--tile-sunshine); }
.theme-burli-paper .pk-tile-lavender { --tile: var(--tile-lavender); }
.theme-burli-paper .pk-tile-fill { background-color: var(--tile, var(--tile-sky)); }

/* ── Identity card ("sticker"): ONLY for things that are a coworker ──
   1.5px ink border + flat ink offset shadow + the coworker's tile as a top band carrying
   two white wave lines (the concept art's water). Markup:
     <article class="pk-idcard pk-tile-sky">
       <div class="pk-idcard-band" aria-hidden="true"></div>
       <div class="pk-idcard-body"> avatar, name, role, status … </div>
     </article>  */
.theme-burli-paper .pk-idcard {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background-color: var(--card); color: var(--ink);
    border: var(--sticker-border); border-radius: var(--radius-card);
    box-shadow: var(--sticker-shadow);
}
.theme-burli-paper .pk-idcard-lg { border-radius: var(--radius-roster); box-shadow: 0 4px 0 var(--ink); }
.theme-burli-paper .pk-idcard-hero { border-radius: var(--radius-hero); box-shadow: 0 4px 0 var(--ink); }
.theme-burli-paper .pk-idcard-stage { border-radius: var(--radius-stage); box-shadow: 0 5px 0 var(--ink); }
.theme-burli-paper .pk-idcard-band {
    height: var(--idcard-band, 2.875rem); flex-shrink: 0;
    background-color: var(--tile, var(--tile-sky));
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='46' viewBox='0 0 72 46'%3E%3Cpath d='M0 18q18-6 36 0t36 0' fill='none' stroke='white' stroke-opacity='.75' stroke-width='3'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='46' viewBox='0 0 88 46'%3E%3Cpath d='M0 34q22-6 44 0t44 0' fill='none' stroke='white' stroke-opacity='.45' stroke-width='3'/%3E%3C/svg%3E");
    background-repeat: repeat-x, repeat-x;
    background-size: 72px 46px, 88px 46px;
    background-position: -10px 0, -10px 0;
}
.theme-burli-paper .pk-idcard-lg .pk-idcard-band { --idcard-band: 4.5rem; }
.theme-burli-paper .pk-idcard-body {
    position: relative; display: flex; flex-direction: column; gap: 0.625rem;
    padding: 0.875rem 1rem 1rem;
}
/* A leading avatar sits over the band (its top ~30px up into the water); a card without
   one keeps its text clear of the band. */
.theme-burli-paper .pk-idcard-body > .pk-avatar:first-child { margin-top: -2.75rem; }
.theme-burli-paper .pk-idcard-name {
    font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600;
    color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.theme-burli-paper a.pk-idcard-name:hover { text-decoration: underline; }
.theme-burli-paper .pk-idcard-role { font-size: 0.8125rem; color: var(--muted-foreground); }
/* A coworker still being set up: dashed ink on a lavender tint, no offset shadow. */
.theme-burli-paper .pk-idcard-hatching {
    border-style: dashed; box-shadow: none;
    background-color: color-mix(in srgb, var(--tile-lavender) 16%, var(--card));
}

/* ── Status pill: always a dot AND a label (never colour alone) ──
   <span class="pk-status pk-status-working">Working</span> */
.theme-burli-paper .pk-status {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.1875rem 0.625rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; line-height: 1.25; white-space: nowrap;
    background-color: var(--status-idle-bg); color: var(--status-idle-fg);
    --status-dot: var(--status-idle-dot);
}
.theme-burli-paper .pk-status::before {
    content: ""; flex-shrink: 0; width: 0.4375rem; height: 0.4375rem;
    border-radius: 50%; background-color: var(--status-dot);
}
.theme-burli-paper .pk-status-working { background-color: var(--status-working-bg); color: var(--status-working-fg); --status-dot: var(--status-working-dot); }
.theme-burli-paper .pk-status-approval { background-color: var(--status-approval-bg); color: var(--status-approval-fg); --status-dot: var(--status-approval-dot); }
.theme-burli-paper .pk-status-idle { background-color: var(--status-idle-bg); color: var(--status-idle-fg); --status-dot: var(--status-idle-dot); }
.theme-burli-paper .pk-status-hatching { background-color: var(--status-hatching-bg); color: var(--status-hatching-fg); --status-dot: var(--status-hatching-dot); }
.theme-burli-paper .pk-status-paused { background-color: var(--status-paused-bg); color: var(--status-paused-fg); --status-dot: var(--status-paused-dot); }
.theme-burli-paper .pk-status-paused::before { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--status-dot); }
.theme-burli-paper .pk-status-unreachable { background-color: var(--status-unreachable-bg); color: var(--status-unreachable-fg); --status-dot: var(--status-unreachable-dot); }
.theme-burli-paper .pk-status-unreachable::before { border-radius: 1px; transform: rotate(45deg); }

/* ── Coworker avatar: illustrated circle, ink ring 2px (<48) / 3px (48-119) / 4px (120+),
      presence dot bottom-right at 24% of the diameter (min 9px) with a white border.
   <span class="pk-avatar pk-avatar-60"><img src="…" alt="Aria"><span class="pk-presence pk-presence-working"></span></span>
   The dot is decorative: the status is always also written in words next to it. */
.theme-burli-paper .pk-avatar {
    --avatar-size: 40px; --avatar-ring: 2px;
    position: relative; display: inline-block; flex-shrink: 0;
    width: var(--avatar-size); height: var(--avatar-size);
}
.theme-burli-paper .pk-avatar > img,
.theme-burli-paper .pk-avatar > svg {
    display: block; width: 100%; height: 100%; box-sizing: border-box;
    border-radius: 50%; border: var(--avatar-ring) solid var(--ink);
    background-color: var(--cream); object-fit: cover;
}
.theme-burli-paper .pk-avatar-26 { --avatar-size: 26px; }
.theme-burli-paper .pk-avatar-32 { --avatar-size: 32px; }
.theme-burli-paper .pk-avatar-34 { --avatar-size: 34px; }
.theme-burli-paper .pk-avatar-36 { --avatar-size: 36px; }
.theme-burli-paper .pk-avatar-40 { --avatar-size: 40px; }
.theme-burli-paper .pk-avatar-44 { --avatar-size: 44px; }
.theme-burli-paper .pk-avatar-52 { --avatar-size: 52px; --avatar-ring: 3px; }
.theme-burli-paper .pk-avatar-60 { --avatar-size: 60px; --avatar-ring: 3px; }
.theme-burli-paper .pk-avatar-72 { --avatar-size: 72px; --avatar-ring: 3px; }
.theme-burli-paper .pk-avatar-86 { --avatar-size: 86px; --avatar-ring: 3px; }
.theme-burli-paper .pk-avatar-92 { --avatar-size: 92px; --avatar-ring: 3px; }
.theme-burli-paper .pk-avatar-132 { --avatar-size: 132px; --avatar-ring: 4px; }
.theme-burli-paper .pk-avatar-208 { --avatar-size: 208px; --avatar-ring: 4px; }
.theme-burli-paper .pk-presence {
    position: absolute; right: 1px; bottom: 1px; box-sizing: border-box;
    width: max(9px, calc(var(--avatar-size) * 0.24)); height: max(9px, calc(var(--avatar-size) * 0.24));
    border-radius: 50%; border: 2px solid var(--card);
    background-color: var(--status-idle-dot);
}
.theme-burli-paper .pk-presence-working { background-color: var(--status-working-dot); }
.theme-burli-paper .pk-presence-approval { background-color: var(--status-approval-dot); }
.theme-burli-paper .pk-presence-idle { background-color: var(--status-idle-dot); }
.theme-burli-paper .pk-presence-hatching { background-color: var(--status-hatching-dot); }
.theme-burli-paper .pk-presence-paused { background-color: var(--card); box-shadow: inset 0 0 0 2px var(--status-paused-dot); }
.theme-burli-paper .pk-presence-unreachable { background-color: var(--status-unreachable-dot); }

/* ── Human: initials on a plain warm disc with a 1.5px ink ring. Never an illustration,
      so people and coworkers are always told apart.
   <span class="pk-human pk-human-34" title="Jordan Lee">JL</span> */
.theme-burli-paper .pk-human {
    --human-size: 34px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--human-size); height: var(--human-size); box-sizing: border-box;
    border-radius: 50%; border: 1.5px solid var(--ink);
    background-color: var(--human-disc); color: var(--ink);
    font-size: calc(var(--human-size) * 0.38); font-weight: 600; line-height: 1;
    letter-spacing: 0.01em; text-transform: uppercase;
}
.theme-burli-paper .pk-human-26 { --human-size: 26px; }
.theme-burli-paper .pk-human-32 { --human-size: 32px; }
.theme-burli-paper .pk-human-34 { --human-size: 34px; }
.theme-burli-paper .pk-human-40 { --human-size: 40px; }
.theme-burli-paper .pk-human-44 { --human-size: 44px; }

/* ── Access chip (D2): Off / Read / Ask first / Act, always written out ──
   <span class="pk-access pk-access-ask">Ask first</span> */
.theme-burli-paper .pk-access {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.25rem 0.625rem; border-radius: 999px; border: 1px solid transparent;
    font-size: 0.78125rem; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.theme-burli-paper .pk-access-read { background-color: var(--access-read-bg); color: var(--access-read-fg); }
.theme-burli-paper .pk-access-ask { background-color: var(--access-ask-bg); color: var(--access-ask-fg); }
.theme-burli-paper .pk-access-act { background-color: var(--access-act-bg); color: var(--access-act-fg); }
.theme-burli-paper .pk-access-off { background-color: var(--access-off-bg); color: var(--access-off-fg); border: 1px dashed var(--input); }

/* ── Phone touch targets on the refreshed pages (PR9 responsive + a11y pass, CW #2587493) ──
   At 390px every control is at least 44px tall. A card's name link (roster, Home team
   strip) is its own target, not a word in a sentence; the Connections page's compact
   buttons and the approval card's "Review request details" disclosure grow to match. */
@media (max-width: 639px) {
    .theme-burli-paper a.pk-idcard-name { display: inline-flex; align-items: center; min-height: var(--control-min); }
    .theme-burli-paper .cn-btn { min-height: var(--control-min); }
    .theme-burli-paper #cn-approvals summary { min-height: var(--control-min); padding-block: 0.625rem; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-burli-paper .btn, .theme-burli-paper .pk-nav-item { transition: none; }
}