/* ============================================================================
   ULTRABASIC LABS — portal layer
   Loaded AFTER site.css, on /admin/ and /portal/ only. Never on the marketing
   site.

   site.css is a marketing stylesheet: it has no table, no sidebar, no tabs, no
   modal, no toast, no badge, no boxed input, no checkbox, no empty state, no
   pagination — and no semantic colour whatsoever. This file adds exactly those
   things and nothing else, composing from site.css tokens so the two read as
   one product.

   House rules inherited from site.css and kept here:
     · flat and hairline-separated — a rule, not a box; a box, not a shadow
     · shadows only on floating chrome (modal, drawer, menu, toast)
     · 11px / 700 / .07em uppercase for micro-labels
     · weight does the work, not colour
     · every interactive element keeps the global :focus-visible ring

   Naming: everything is prefixed `p-` so it can never collide with a marketing
   component. State classes follow the site's `is-*` convention.
   ========================================================================= */

:root {
  /* ---- SEMANTIC STATUS -----------------------------------------------
     Tuned against the existing pastels (--mint, --butter, --ice, --blush)
     rather than lifted from a generic UI kit, so a status pill sits inside
     the Pink dawn system instead of beside it. Each pair is a soft surface
     plus a text tone that clears 4.5:1 on it. Status only — these are not
     general-purpose colours. */
  --ok:      #1f7a4d;  --ok-soft:      #d8f4df;
  --warn:    #8a6300;  --warn-soft:    #fdf0c0;
  --danger:  #a32020;  --danger-soft:  #ffe0dc;
  --info:    #1f5f88;  --info-soft:    #d2f4ff;
  --busy:    #8a3d78;  --busy-soft:    #f7e1f7;
  --muted:   #5c5c5c;  --muted-soft:   #f1f1f1;

  --rail-w: 244px;
  --topbar-h: 68px;
  --p-r: 4px;              /* the portal's default radius — matches --r-card */
  --shadow-float: 0 18px 48px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .05);
}

/* ============================================================ app frame == */
body.p-app {
  background: var(--canvas);
  min-height: 100vh;
  min-height: 100dvh;
}

.p-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- rail -- */
.p-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
  background: var(--cream);
  padding: 22px 0 14px;
}

.p-rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.p-rail-brand > a { flex: none; display: block; }
.p-rail-brand .logo { width: 108px; height: auto; color: var(--ink); }
/* The client portal puts the company name in here, so it has to survive a long
   one: never wrap the pill, shrink and ellipsis instead. */
.p-rail-tag {
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fog);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 3px 8px;
  background: var(--canvas);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-rail-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.p-rail-group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fog);
  padding: 18px 10px 8px;
}
.p-rail-group:first-child { padding-top: 4px; }

.p-nav {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--p-r);
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.p-nav svg { width: 17px; height: 17px; flex: none; opacity: .62; }
.p-nav:hover { background: var(--canvas); color: var(--ink); }
.p-nav.is-active { background: var(--ink); color: #fff; }
.p-nav.is-active svg { opacity: 1; }
.p-nav-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--cotton);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.p-nav.is-active .p-nav-count { background: var(--bubblegum); }
.p-nav-count:empty, .p-nav-count[hidden] { display: none; }

.p-rail-foot { padding: 12px 12px 0; border-top: 1px solid var(--hairline); }

/* the signed-in user, bottom of the rail */
.p-who {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--p-r);
  text-align: left;
  transition: background .18s var(--ease);
}
.p-who:hover { background: var(--canvas); }
.p-who-text { min-width: 0; flex: 1; }
.p-who-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-who-sub {
  display: block;
  font-size: 11px;
  color: var(--fog);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- main -- */
.p-main { min-width: 0; display: flex; flex-direction: column; }

.p-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--topbar-h);
  padding: 0 clamp(20px, 3vw, 40px);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.p-topbar-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.012em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.p-view { padding: clamp(22px, 3vw, 38px) clamp(20px, 3vw, 40px) 96px; flex: 1; }
.p-view--narrow { max-width: 860px; }
.p-view--reading { max-width: 720px; }

/* mobile rail toggle — hidden on desktop */
.p-railtoggle { display: none; width: 22px; height: 16px; position: relative; flex: none; }
.p-railtoggle span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.p-railtoggle span:nth-child(1) { top: 0; }
.p-railtoggle span:nth-child(2) { top: 7px; }
.p-railtoggle span:nth-child(3) { top: 14px; }
.p-scrim { display: none; }

/* ========================================================== page furniture */
.p-head { margin-bottom: 26px; }
.p-head-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.p-head-row > .p-head-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.p-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.018em;
  font-weight: 700;
}
.p-sub { margin-top: 8px; font-size: 14.5px; color: var(--charcoal); max-width: 62ch; }

.p-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fog);
}

.p-section { margin-top: 40px; }
.p-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.p-section-head h2 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.008em;
}
.p-section-head .p-section-more { margin-left: auto; }

.p-grid { display: grid; gap: 16px; }
.p-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.p-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.p-grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.p-grid--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; }

/* ----------------------------------------------------------------- card -- */
.p-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  background: var(--canvas);
  padding: 20px 22px;
  min-width: 0;
}
.p-card--cream { background: var(--cream); }
.p-card--flush { padding: 0; overflow: hidden; }
.p-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hairline);
}
.p-card-head h3 { font-size: 14px; font-weight: 700; letter-spacing: -.005em; }
.p-card-head .p-card-more { margin-left: auto; }
.p-card-body { padding: 20px 22px; }
.p-card-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--hairline);
  background: var(--cream);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* KPI tile */
.p-stat {
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  padding: 18px 20px 20px;
  background: var(--canvas);
  min-width: 0;
}
.p-stat-cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fog);
}
.p-stat-num {
  display: block;
  margin-top: 10px;
  font-family: var(--font-head);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.022em;
  font-variant-numeric: tabular-nums;
}
.p-stat-meta { margin-top: 8px; font-size: 12.5px; color: var(--fog); }
.p-stat-meta b { font-weight: 600; color: var(--charcoal); }

/* key/value rows — the detail-panel workhorse */
.p-kv { display: flex; flex-direction: column; }
.p-kv > div {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.p-kv > div:last-child { border-bottom: 0; }
.p-kv dt { color: var(--fog); font-weight: 600; flex: none; min-width: 132px; }
.p-kv dd { font-weight: 500; margin-left: auto; text-align: right; min-width: 0; }
.p-kv dd.num { font-variant-numeric: tabular-nums; }

/* =============================================================== table === */
.p-tablewrap {
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  overflow-x: auto;
  background: var(--canvas);
}
.p-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.p-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 12px 16px;
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fog);
  white-space: nowrap;
}
.p-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.p-table tbody tr:last-child td { border-bottom: 0; }
.p-table .num, .p-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.p-table .p-t-strong { font-weight: 600; color: var(--ink); }
.p-table .p-t-sub { display: block; font-size: 12.5px; color: var(--fog); margin-top: 2px; }
.p-table .p-t-actions { text-align: right; white-space: nowrap; }

/* a whole row that navigates — mirrors .svcrow's hover wash */
.p-table tbody tr.is-link { cursor: pointer; transition: background .16s var(--ease); }
.p-table tbody tr.is-link:hover { background: var(--wash, var(--cream)); }
.p-table tbody tr.is-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* sortable header */
.p-th-sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; }
.p-th-sort svg { width: 11px; height: 11px; opacity: 0; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.p-th-sort:hover svg { opacity: .5; }
.p-th-sort.is-asc svg, .p-th-sort.is-desc svg { opacity: 1; }
.p-th-sort.is-desc svg { transform: rotate(180deg); }

.p-table--compact td { padding: 9px 14px; }
.p-table--compact th { padding: 9px 14px; }

/* ============================================================== badges === */
.p-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--muted-soft);
  color: var(--muted);
}
.p-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.p-badge--plain::before { display: none; }
.p-badge--ok      { background: var(--ok-soft);     color: var(--ok); }
.p-badge--warn    { background: var(--warn-soft);   color: var(--warn); }
.p-badge--danger  { background: var(--danger-soft); color: var(--danger); }
.p-badge--info    { background: var(--info-soft);   color: var(--info); }
.p-badge--busy    { background: var(--busy-soft);   color: var(--busy); }
.p-badge--draft   { background: transparent; color: var(--fog); box-shadow: inset 0 0 0 1px var(--hairline); }

/* ============================================================== forms ==== */
/* site.css only has bottom-ruled fields (.cf-input), which are right for a
   contact form and wrong for a dense one. These are the boxed counterparts. */
.p-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.p-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fog);
  transition: color .2s var(--ease);
}
.p-field:focus-within .p-field-label { color: var(--ink); }
.p-field-req { color: var(--bubblegum-deep); }

.p-input, .p-select, .p-textarea {
  font: inherit;
  font-size: 14.5px;
  width: 100%;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--mist);
  border-radius: var(--p-r);
  padding: 11px 13px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.p-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.p-input::placeholder, .p-textarea::placeholder { color: var(--mist); }
.p-input:focus, .p-select:focus, .p-textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.p-input:disabled, .p-select:disabled, .p-textarea:disabled {
  background: var(--neutral-soft, #f1f1f1);
  color: var(--fog);
  cursor: not-allowed;
}
.p-input.is-error, .p-select.is-error, .p-textarea.is-error { border-color: var(--danger); }

.p-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
}

.p-field-hint  { font-size: 12.5px; color: var(--fog); }
.p-field-error { font-size: 12.5px; color: var(--danger); font-weight: 500; }
.p-field-error:empty, .p-field-hint:empty { display: none; }

/* prefix/suffix, e.g. a currency symbol glued to an amount */
.p-inputgroup {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mist);
  border-radius: var(--p-r);
  overflow: hidden;
  background: var(--canvas);
  transition: border-color .2s var(--ease);
}
.p-inputgroup:focus-within { border-color: var(--ink); }
.p-inputgroup .p-input { border: 0; border-radius: 0; }
.p-inputgroup .p-input:focus { outline: none; }
.p-inputgroup-fix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--cream);
  border-right: 1px solid var(--hairline);
  color: var(--fog);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.p-inputgroup-fix--end { border-right: 0; border-left: 1px solid var(--hairline); }

/* search field with a leading glyph */
.p-search { position: relative; min-width: 0; }
.p-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--fog);
  pointer-events: none;
}
.p-search .p-input { padding-left: 35px; border-radius: var(--r-pill); }

/* checkbox / radio / switch — none of these existed */
.p-check, .p-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.4;
}
.p-check input, .p-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex: none;
  margin: 1px 0 0;
  border: 1px solid var(--mist);
  background: var(--canvas);
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.p-check input { border-radius: 3px; }
.p-radio input { border-radius: 50%; }
.p-check input:checked, .p-radio input:checked { background: var(--ink); border-color: var(--ink); }
.p-check input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}
.p-radio input:checked { box-shadow: inset 0 0 0 3.5px var(--canvas); }
.p-check input:disabled, .p-radio input:disabled { opacity: .45; cursor: not-allowed; }

.p-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 14px; }
.p-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-switch-track {
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--mist);
  position: relative;
  transition: background .2s var(--ease);
}
.p-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .22s var(--ease);
}
.p-switch input:checked + .p-switch-track { background: var(--ink); }
.p-switch input:checked + .p-switch-track::after { transform: translateX(16px); }
.p-switch input:focus-visible + .p-switch-track { outline: 2px solid var(--ink); outline-offset: 3px; }

/* file dropzone */
.p-drop {
  border: 1.5px dashed var(--mist);
  border-radius: var(--r-panel);
  padding: 30px 24px;
  text-align: center;
  color: var(--fog);
  font-size: 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  cursor: pointer;
}
.p-drop:hover, .p-drop.is-over { border-color: var(--ink); background: var(--cream); color: var(--ink); }
.p-drop b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.p-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.p-form { display: flex; flex-direction: column; gap: 18px; }
.p-formrow { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.p-formfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
  flex-wrap: wrap;
}
.p-formfoot .p-spacer { margin-left: auto; }

/* =========================================================== feedback ==== */
.p-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--p-r);
  font-size: 14px;
  line-height: 1.5;
  background: var(--muted-soft);
  color: var(--charcoal);
  border-left: 2px solid var(--muted);
}
.p-banner b { color: var(--ink); }
.p-banner--ok     { background: var(--ok-soft);     border-color: var(--ok);     color: #14532d; }
.p-banner--warn   { background: var(--warn-soft);   border-color: var(--warn);   color: #5c4200; }
.p-banner--danger { background: var(--danger-soft); border-color: var(--danger); color: #7a1717; }
.p-banner--info   { background: var(--info-soft);   border-color: var(--info);   color: #14405c; }
.p-banner-close { margin-left: auto; flex: none; color: inherit; opacity: .6; }
.p-banner-close:hover { opacity: 1; }

.p-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 40px));
}
.p-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-radius: var(--r-panel);
  background: var(--deep);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.p-toast.is-in { opacity: 1; transform: none; }
.p-toast::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  flex: none;
  background: var(--mist);
}
.p-toast--ok::before     { background: #58d69a; }
.p-toast--danger::before { background: #ff8f8f; }
.p-toast--warn::before   { background: var(--butter); }
.p-toast-close { margin-left: auto; color: #fff; opacity: .55; flex: none; }
.p-toast-close:hover { opacity: 1; }

/* empty state — generalised from the site's .player--slot placeholder */
.p-empty {
  border: 1.5px dashed var(--mist);
  border-radius: var(--r-panel);
  padding: 46px 28px;
  text-align: center;
}
.p-empty-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cotton);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ink);
}
.p-empty-mark svg { width: 18px; height: 18px; }
.p-empty h3 { font-size: 16px; font-weight: 700; letter-spacing: -.008em; margin-bottom: 6px; }
.p-empty p { font-size: 14px; color: var(--fog); max-width: 44ch; margin: 0 auto; }
.p-empty .btn { margin-top: 20px; }

/* skeleton + spinner */
.p-skel {
  border-radius: var(--p-r);
  background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: pskel 1.3s ease-in-out infinite;
  height: 14px;
}
.p-skel + .p-skel { margin-top: 10px; }
.p-skel--line-sm { width: 40%; }
.p-skel--line-md { width: 70%; }
.p-skel--row { height: 46px; }
@keyframes pskel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.p-spin {
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: pspin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes pspin { to { transform: rotate(360deg); } }
.btn[aria-busy="true"] { pointer-events: none; opacity: .7; }

/* progress */
.p-progress { height: 5px; border-radius: var(--r-pill); background: var(--hairline); overflow: hidden; }
.p-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transition: width .5s var(--ease);
}
.p-progress--ok > i { background: var(--ok); }

/* ========================================================= overlays ====== */
.p-scrimlayer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .34);
  opacity: 0;
  transition: opacity .24s var(--ease);
}
.p-scrimlayer.is-in { opacity: 1; }

.p-modal {
  position: fixed;
  z-index: 101;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(.985);
  width: min(560px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.p-modal.is-in { opacity: 1; transform: translate(-50%, -50%); }
.p-modal--wide { width: min(860px, calc(100vw - 32px)); }

.p-drawer {
  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(520px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-float);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
}
.p-drawer.is-in { transform: none; }

.p-modal-head, .p-drawer-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
  flex: none;
}
.p-modal-head h2, .p-drawer-head h2 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.012em;
  min-width: 0;
}
.p-x {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.p-x:hover { background: var(--cream); color: var(--ink); }
.p-x svg { width: 15px; height: 15px; }

.p-modal-body, .p-drawer-body { padding: 22px 24px; overflow-y: auto; flex: 1; }
.p-modal-foot, .p-drawer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  background: var(--cream);
  flex: none;
  flex-wrap: wrap;
}
.p-modal-foot .p-spacer, .p-drawer-foot .p-spacer { margin-left: auto; }

/* light dropdown — the site's .slotmenu is dark and built for the black panel */
.p-menu {
  position: absolute;
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-float);
}
.p-menu[hidden] { display: none; }
.p-menu button, .p-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--p-r);
  font-size: 14px;
  text-align: left;
  color: var(--charcoal);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.p-menu button:hover, .p-menu a:hover { background: var(--cream); color: var(--ink); }
.p-menu svg { width: 15px; height: 15px; opacity: .6; flex: none; }
.p-menu hr { border: 0; border-top: 1px solid var(--hairline); margin: 6px 2px; }
.p-menu .is-danger { color: var(--danger); }
.p-menu .is-danger:hover { background: var(--danger-soft); }

/* ============================================================ navigation = */
.p-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.p-tabs::-webkit-scrollbar { display: none; }
.p-tab {
  position: relative;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fog);
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.p-tab:hover { color: var(--charcoal); }
.p-tab.is-active { color: var(--ink); font-weight: 600; }
.p-tab::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.p-tab.is-active::after { transform: scaleX(1); }
.p-tab-count { margin-left: 7px; font-size: 12px; color: var(--fog); font-variant-numeric: tabular-nums; }

.p-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fog); margin-bottom: 14px; flex-wrap: wrap; }
.p-crumbs a { color: var(--fog); transition: color .18s var(--ease); }
.p-crumbs a:hover { color: var(--ink); }
.p-crumbs svg { width: 12px; height: 12px; opacity: .5; }

/* filter chips over a table */
.p-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.p-chip {
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--canvas);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.p-chip:hover { border-color: var(--mist); background: var(--cream); }
.p-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.p-chip-n { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }

.p-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--fog);
}
.p-pager-btns { margin-left: auto; display: flex; gap: 6px; }
.p-pager-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--p-r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.p-pager-btn:hover:not(:disabled) { background: var(--cream); border-color: var(--mist); }
.p-pager-btn:disabled { opacity: .35; cursor: not-allowed; }
.p-pager-btn svg { width: 14px; height: 14px; }

/* ============================================================== misc ===== */
.p-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cotton);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  flex: none;
  overflow: hidden;
  text-transform: uppercase;
}
.p-avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.p-avatar--lg { width: 52px; height: 52px; font-size: 17px; }
.p-avatar--ink { background: var(--ink); color: #fff; }

/* activity / milestone timeline */
.p-timeline { position: relative; padding-left: 26px; }
.p-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--hairline);
}
.p-tl { position: relative; padding: 0 0 22px; }
.p-tl:last-child { padding-bottom: 0; }
.p-tl::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1.5px var(--mist);
}
.p-tl.is-done::before { background: var(--ink); box-shadow: none; }
.p-tl.is-now::before  { background: var(--bubblegum); box-shadow: 0 0 0 3px var(--cotton); }
.p-tl-when { font-size: 12px; color: var(--fog); font-variant-numeric: tabular-nums; }
.p-tl-what { font-size: 14px; margin-top: 2px; }
.p-tl-what b { font-weight: 600; }

.p-money { font-variant-numeric: tabular-nums; font-weight: 600; }
.p-mono  { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.p-quiet { color: var(--fog); }
.p-nowrap { white-space: nowrap; }
.p-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p-divider { height: 1px; background: var(--hairline); border: 0; margin: 24px 0; }
.p-stack   { display: flex; flex-direction: column; gap: 14px; }
.p-row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.p-spacer  { margin-left: auto; }

/* danger button — site.css has no destructive variant */
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #8a1a1a; color: #fff; }
.btn--quiet { color: var(--charcoal); background: transparent; }
.btn--quiet:hover { background: var(--cream); color: var(--ink); }

/* =========================================================== auth pages == */
.p-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.p-auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(28px, 6vw, 88px);
  min-width: 0;
}
.p-auth-inner { width: 100%; max-width: 380px; margin: 0 auto; }
.p-auth-brand { margin-bottom: 44px; display: inline-flex; }
.p-auth-brand .logo { width: 148px; height: auto; color: var(--ink); }
.p-auth h1 {
  font-family: var(--font-head);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 700;
}
.p-auth-sub { margin-top: 12px; font-size: 15px; color: var(--charcoal); }
.p-auth form { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.p-auth .btn { width: 100%; }
.p-auth-alt { margin-top: 22px; font-size: 13.5px; color: var(--fog); }
.p-auth-alt a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.p-auth-note { font-size: 13px; line-height: 1.55; }

.p-auth-media { position: relative; overflow: hidden; background: var(--cream); }
.p-auth-media img { width: 100%; height: 100%; object-fit: cover; }
.p-auth-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
}
.p-auth-quote {
  position: absolute;
  left: clamp(28px, 4vw, 56px);
  right: clamp(28px, 4vw, 56px);
  bottom: clamp(28px, 4vw, 52px);
  color: #fff;
}
.p-auth-quote p { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }
.p-auth-quote span { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }

/* ============================================================= responsive  */
@media (max-width: 1080px) {
  .p-grid--split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .p-shell { grid-template-columns: minmax(0, 1fr); }
  .p-rail {
    position: fixed;
    z-index: 110;
    left: 0;
    top: 0;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
    box-shadow: var(--shadow-float);
  }
  .p-rail.is-open { transform: none; }
  .p-railtoggle { display: block; }
  .p-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(0, 0, 0, .34);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s var(--ease);
  }
  .p-scrim.is-in { opacity: 1; pointer-events: auto; }
  .p-auth { grid-template-columns: minmax(0, 1fr); }
  .p-auth-media { display: none; }
}

@media (max-width: 640px) {
  .p-view { padding: 20px 16px 88px; }
  .p-topbar { padding: 0 16px; gap: 12px; }
  .p-card { padding: 16px 16px; }
  .p-card-head, .p-card-body, .p-card-foot { padding-left: 16px; padding-right: 16px; }
  .p-kv > div { flex-direction: column; gap: 3px; align-items: flex-start; }
  .p-kv dd { margin-left: 0; text-align: left; }
  .p-toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .p-modal { width: calc(100vw - 24px); }
  .p-modal-body, .p-drawer-body, .p-modal-head, .p-drawer-head, .p-modal-foot, .p-drawer-foot {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-skel { animation: none; background: #f2f2f2; }
  .p-spin { animation-duration: 1.6s; }
}

/* ================================================================ print == */
/* Invoices and proposals are "downloaded" by printing to PDF, so the print
   sheet is a real deliverable rather than an afterthought. */
@media print {
  .p-rail, .p-topbar, .p-toasts, .p-scrim, .p-scrimlayer,
  .p-head-actions, .p-tabs, .p-filters, .p-pager, .no-print { display: none !important; }
  .p-shell { display: block; }
  .p-view { padding: 0; max-width: none; }
  .p-card, .p-tablewrap { border: 0; border-radius: 0; }
  .p-table th { background: transparent; border-bottom: 1px solid #000; }
  .p-table td { border-bottom: 1px solid #ddd; }
  .p-badge { border: 1px solid #999; background: transparent !important; color: #000 !important; }
  .p-badge::before { display: none; }
  .print-only { display: block !important; }
  a[href]::after { content: ''; }
  body { background: #fff; }
  @page { margin: 16mm; }
}
.print-only { display: none; }