/* PJM admin kit: distilled from pjmdesigns.biz (pjm.css + admin.css), Oct 2026.
   Exact rules copied from the live files; only the section headers are new.
   Later sections override earlier ones on purpose (same order as the live files). */


/* ===== hidden must hide (pjm.css) ===== */
/* [hidden] must actually hide.
 *
 * The attribute is only display:none in the browser's default stylesheet, and any
 * explicit display in our CSS overrides it. Every .pjm-field is display:flex, so
 * setting el.hidden = true did nothing visually — the field stayed on screen while
 * the JS disabled it. The result was a form with visible boxes you couldn't type in.
 */
[hidden]{display:none !important}

/* ===== tokens (pjm.css) ===== */
:root{
  --ink:#0A0E1A;
  --ink-2:#161E33;
  --steel:#5B6780;
  --steel-dk:#707D99;   /* steel legible on --ink — 4.66:1 */
  --zinc:#C0C9DA;
  --paper:#EDF0F6;
  --paper-2:#E1E6F0;

  --brand:#00A0FF;      /* logo mid-blue — brand fills, dark backgrounds */
  --brand-lt:#00C8FF;   /* logo cyan */
  --brand-dk:#000159;   /* logo indigo */
  /* #00A0FF only manages 2.46:1 on --paper, so link text uses a darkened
     sibling at the same 202deg hue. Reads as the same blue, passes AA. */
  --brand-ink:#0070B2;  /* link text on light — 4.64:1 */

  --stamp:#B42318;      /* rush / alert. one job. A plain red, not rust: 6.6:1 on white */
  --live:#167349;       /* running: 5.13:1 on --paper, 5.86:1 on white */

  --rule:rgba(10,14,26,.13);
  --rule-strong:rgba(10,14,26,.28);
  --rule-dk:rgba(237,240,246,.14);

  --disp:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --data:var(--body);   /* was IBM Plex Mono; labels and figures now use the text face */
  --code:ui-monospace,'SF Mono',Menlo,Consolas,monospace;   /* literal code only */

  --shell:1240px;
}

/* ===== base (pjm.css) ===== */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-variant-numeric:tabular-nums;
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px}

/* ===== utilities (pjm.css) ===== */
.pjm-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.pjm-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:var(--data);font-size:13px;
}
.pjm-skip:focus{left:0}

.pjm-shell{max-width:var(--shell);margin:0 auto;padding:0 28px}
.pjm-ta-r{text-align:right}
.pjm-mt-24{margin-top:24px}
.pjm-mt-26{margin-top:26px}
.pjm-mt-28{margin-top:28px}

/* ===== buttons (pjm.css) ===== */
.pjm-btn{
  font-family:var(--data);font-size:13px;
  text-decoration:none;display:inline-block;
  background:var(--ink);color:var(--paper);
  padding:11px 18px;border:1px solid var(--ink);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
@media (hover:hover) and (pointer:fine){.pjm-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}}
.pjm-btn--ghost{background:transparent;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.pjm-btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}}
.pjm-btn--invert{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media (hover:hover) and (pointer:fine){.pjm-btn--invert:hover{background:var(--brand);border-color:var(--brand);color:#fff}}

/* ===== boards, tables, states (pjm.css) ===== */
.pjm-board{margin:66px 0 0;border:1px solid var(--rule-strong);background:#fff}
.pjm-board--flush{margin:0}
.pjm-board-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 18px;background:#fff;color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.pjm-board-head h2{font-family:var(--body);font-size:16px;font-weight:600}
.pjm-board-count{font-family:var(--data);font-size:13px;color:var(--steel)}
.pjm-board-head a{color:var(--brand-ink)}
.pjm-home-attn .pjm-board-head,.pjm-home-attn .pjm-board-head .pjm-board-count{color:#fff;border-bottom:0}
.pjm-board-table{width:100%;border-collapse:collapse}
.pjm-board-table th{
  font-family:var(--data);font-size:13px;font-weight:500;
  color:var(--steel);
  text-align:left;padding:9px 18px;border-bottom:1px solid var(--rule);
}
.pjm-board-table td{padding:13px 18px;border-bottom:1px solid var(--rule);vertical-align:middle}
.pjm-board-table tbody tr:last-child td{border-bottom:0}
@media (hover:hover) and (pointer:fine){.pjm-board-table tbody tr:hover{background:var(--paper-2)}}
@media (hover:hover) and (pointer:fine){.pjm-board-table tbody tr:hover .pjm-client{color:var(--brand-ink)}}

.pjm-client{
  font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;
  white-space:nowrap;text-decoration:none;display:inline-flex;align-items:baseline;gap:6px;
}
.pjm-ext{font-family:var(--data);font-size:13px;color:var(--steel)}
.pjm-system{font-size:16px;color:var(--ink-2)}
.pjm-since{font-family:var(--data);font-size:13px;color:var(--steel);text-align:right;white-space:nowrap}
.pjm-statecell{width:1%;white-space:nowrap}

.pjm-state{
  font-family:var(--data);font-size:13px;
  display:inline-flex;align-items:center;gap:7px;
}
.pjm-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pjm-state--live{color:var(--live)}
.pjm-state--live .pjm-dot{position:relative}
.pjm-state--delivered{color:var(--steel)}
.pjm-state--archived{color:var(--steel);opacity:.6}
.pjm-state--work{color:var(--brand-ink)}
.pjm-state--live .pjm-dot::after,.pjm-chat-live::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0;
  animation:pjm-pulse 3.2s ease-out infinite;will-change:transform,opacity;
}
@keyframes pjm-pulse{
  0%{transform:scale(1);opacity:.45}
  70%{transform:scale(3.2);opacity:0}
  100%{transform:scale(3.2);opacity:0}
}
.pjm-board-foot{
  padding:12px 18px;border-top:1px solid var(--rule-strong);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--data);font-size:13px;color:var(--steel);
}
.pjm-board-foot a{
  color:var(--brand-ink);text-decoration:none;border-bottom:1px solid transparent;
  display:inline-block;padding:4px 0;min-height:24px;
}
@media (hover:hover) and (pointer:fine){.pjm-board-foot a:hover{border-bottom-color:var(--brand-ink)}}

/* ===== meta text (pjm.css) ===== */
.pjm-pkg-meta{font-family:var(--data);font-size:13px;color:var(--steel);}

/* ===== confirm (inline, replaces window.confirm) (pjm.css) ===== */
.pjm-confirm{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;vertical-align:middle}
.pjm-confirm-q{font-size:13px;font-weight:600;color:var(--stamp,#B3261E)}
.pjm-confirm .pjm-btn{padding:7px 12px;font-size:13px;cursor:pointer}
.pjm-confirm-yes{background:var(--stamp,#B3261E);border-color:var(--stamp,#B3261E);color:#fff}
@media (hover:hover) and (pointer:fine){.pjm-confirm-yes:hover{background:#8C1D17;border-color:#8C1D17}}
.pjm-confirm .pjm-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ===== notes, empty, busy (pjm.css) ===== */
.pjm-skipnote{font-family:var(--data);font-size:13px;color:var(--steel);margin-top:8px}
.pjm-kv{display:grid;grid-template-columns:120px 1fr;gap:10px 16px;margin-bottom:20px}
.pjm-kv dt{font-family:var(--data);font-size:13px;color:var(--steel);padding-top:3px}
.pjm-kv dd{font-size:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.pjm-empty{padding:26px 18px;color:var(--steel);font-size:16px;background:#fff}
.pjm-btn--tiny{padding:6px 10px;font-size:13px;cursor:pointer}
.pjm-num{text-align:right;white-space:nowrap}
.pjm-num,.pjm-inv-t td:last-child,.pjm-inv-big,.pjm-tier-price,.pjm-pkg-price,.pjm-paybox-v,.pjm-bill-tiles b{font-variant-numeric:tabular-nums}
.pjm-wrap{white-space:normal !important;overflow-wrap:anywhere}
.pjm-btn.is-busy{opacity:.6;cursor:progress}
button,a,.pjm-btn,label,summary{touch-action:manipulation}

/* ===== forms, alerts, shell, stat cards (admin.css) ===== */
/* ---------- forms ---------- */
.pjm-form{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pjm-field{display:flex;flex-direction:column;gap:6px;width:100%}
.pjm-field > span{
  font-family:var(--data);font-size:12px;
  color:var(--steel);
}
.pjm-field input[type=text],
.pjm-field input[type=email],
.pjm-field input[type=password],
.pjm-field input[type=url],
.pjm-field input[type=tel],
.pjm-field input[type=number],
.pjm-field input[type=search],
.pjm-field input[type=date],
.pjm-field input[type=time],
.pjm-field input[type=datetime-local],
.pjm-field input[type=file],
.pjm-field textarea,
.pjm-field select{
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-strong);
  padding:11px 12px;width:100%;border-radius:0;
}
.pjm-field input:focus,.pjm-field textarea:focus,.pjm-field select:focus{
  outline:2px solid var(--brand);outline-offset:1px;background:#fff;
}
.pjm-field small{font-size:12px;color:var(--steel)}
.pjm-form .pjm-btn{border:1px solid var(--ink);cursor:pointer}

/* ---------- alerts ---------- */
.pjm-alert{
  padding:12px 14px;margin-bottom:20px;font-size:14px;
  border-left:3px solid var(--steel);background:#fff;
}
.pjm-alert--error{border-left-color:var(--stamp);color:var(--stamp)}
.pjm-alert--ok{border-left-color:var(--live);color:var(--live)}
.pjm-alert--warn{border-left-color:var(--stamp);color:var(--ink-2);background:#FFF6F5}

/* ---------- shell ---------- */
.pjm-adminshell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.pjm-side{
  background:var(--ink);color:var(--zinc);padding:26px 20px;
  display:flex;flex-direction:column;gap:26px;position:sticky;top:0;height:100vh;
  /* Belt and braces: if the logo and footer alone ever exceed the viewport, the whole
     sidebar scrolls rather than clipping. */
  overflow-y:auto;
}
.pjm-side-mark img{height:30px;width:auto}
/* The nav scrolls; the logo and Sign out stay put.
 *
 * min-height:0 is the whole fix. A flex item defaults to min-height:auto, which means
 * it refuses to shrink below its content — so flex:1 alone made this box grow past the
 * 100vh sidebar and quietly clip. There was nothing to scroll because nothing had
 * overflow, and nothing could shrink. With 23 nav items the bottom ones were simply
 * unreachable. */
.pjm-sidenav{
  display:flex;flex-direction:column;gap:2px;flex:1;
  min-height:0;overflow-y:auto;
  /* A thin scrollbar that doesn't shout on a dark panel. */
  scrollbar-width:thin;scrollbar-color:var(--rule-dk) transparent;
}
.pjm-sidenav::-webkit-scrollbar{width:6px}
.pjm-sidenav::-webkit-scrollbar-thumb{background:var(--rule-dk);border-radius:3px}
.pjm-sidenav::-webkit-scrollbar-track{background:transparent}
.pjm-sidenav a{
  font-family:var(--data);font-size:12px;
  text-decoration:none;color:var(--zinc);padding:10px 12px;border-left:2px solid transparent;
}
@media (hover:hover) and (pointer:fine){.pjm-sidenav a:hover{background:rgba(237,240,246,.06);color:#fff}}
.pjm-sidenav a[aria-current="page"]{
  border-left-color:var(--brand);background:rgba(0,160,255,.1);color:#fff;
}
.pjm-sidenav-g{display:flex;flex-direction:column;gap:2px}
.pjm-sidenav-h{font-family:var(--data);font-size:12px;font-weight:600;color:var(--steel-dk);margin:14px 12px 4px}
.pjm-sidenav-h:first-child{margin-top:0}
.pjm-side-foot{border-top:1px solid var(--rule-dk);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.pjm-side-who{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--paper)}
.pjm-side-ver{font-family:var(--data);font-size:12px;color:var(--steel-dk)}
.pjm-btn--ghostdk{background:transparent;color:var(--zinc);border-color:var(--rule-dk);cursor:pointer}
@media (hover:hover) and (pointer:fine){.pjm-btn--ghostdk:hover{background:var(--brand);border-color:var(--brand);color:#fff}}

.pjm-adminmain{padding:26px 30px 60px;max-width:1180px}
.pjm-adminhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--rule);
}
.pjm-adminhead h1{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;font-size:28px}
.pjm-adminhead-view{
  font-family:var(--data);font-size:12px;
  color:var(--brand-ink);text-decoration:none;
}

/* ---------- stat cards ---------- */
.pjm-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong)}
.pjm-card{background:#fff;padding:20px 18px;text-decoration:none;display:flex;flex-direction:column;gap:6px}
@media (hover:hover) and (pointer:fine){.pjm-card:hover{background:var(--paper)}}
@media (hover:hover) and (pointer:fine){.pjm-card:hover .pjm-card-n{color:var(--brand-ink)}}
.pjm-card-n{font-family:var(--disp);font-weight:800;font-size:32px;letter-spacing:-.04em;line-height:1}
.pjm-card-l{font-family:var(--data);font-size:12px;color:var(--steel)}

/* ===== actions, row actions, link buttons, notes (admin.css) ===== */
.pjm-guarantees code{font-family:var(--code);font-size:13px;background:var(--paper);padding:1px 5px}
.pjm-skipnote{font-family:var(--data);font-size:12px;color:var(--steel);margin-top:8px}
.pjm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pjm-actions form{margin:0}
.pjm-actions .pjm-btn{cursor:pointer}
.pjm-rowacts{display:flex;gap:6px}
.pjm-rowacts form{margin:0}
.pjm-btn--tiny{padding:6px 10px;font-size:13px;cursor:pointer}
.pjm-linkbtn{
  background:none;border:0;padding:0;cursor:pointer;color:var(--brand-ink);
  font-family:var(--data);font-size:12px;
}
@media (hover:hover) and (pointer:fine){.pjm-linkbtn:hover{text-decoration:underline}}

.pjm-empty{padding:26px 18px;color:var(--steel);font-size:14px;background:#fff}
.pjm-note{background:#fff;border:1px solid var(--rule);padding:14px 16px;font-size:14px;color:var(--steel)}
.pjm-note a{color:var(--brand-ink)}
.pjm-tag-rush{
  font-family:var(--data);font-size:12px;
  color:var(--stamp);border:1px solid var(--stamp);padding:1px 5px;margin-left:6px;
}

/* ===== shell on tablets and phones (admin.css) ===== */

@media(max-width:1000px){
  .pjm-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .pjm-adminshell{grid-template-columns:1fr}
  .pjm-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px}
  .pjm-sidenav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%}
  .pjm-sidenav a{border-left:0;border-bottom:2px solid transparent;padding:8px 10px}
  .pjm-sidenav-g{flex-direction:row;flex-wrap:wrap;flex:1 1 100%}
  .pjm-sidenav-h{flex:1 1 100%;margin:10px 10px 0}
  .pjm-sidenav a[aria-current="page"]{border-left:0;border-bottom-color:var(--brand)}
  .pjm-side-foot{border-top:0;padding-top:0;flex-direction:row;align-items:center;gap:14px;flex:1 1 100%}
  .pjm-adminmain{padding:22px 20px 50px}
  .pjm-kv{grid-template-columns:1fr;gap:4px 0}
  .pjm-kv dd{margin-bottom:10px}
}

/* ===== form rows (admin.css) ===== */
.pjm-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ===== tabs, and form rows stacking on a phone (admin.css) ===== */
/* ---------- tabs ---------- */
.pjm-tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule-strong);flex-wrap:wrap}
.pjm-tabs a{
  font-family:var(--data);font-size:12px;
  text-decoration:none;color:var(--steel);padding:10px 14px;border-bottom:2px solid transparent;
}
.pjm-tabs a span{color:var(--ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.pjm-tabs a:hover{color:var(--ink)}}
.pjm-tabs a.is-on{color:var(--ink);border-bottom-color:var(--brand)}

@media(max-width:900px){
  .pjm-kinds{grid-template-columns:1fr 1fr}
  .pjm-reqgrid,.pjm-row2,.pjm-priority{grid-template-columns:1fr}
  .pjm-priority legend{grid-column:1}
  .pjm-portalmain .pjm-nav{display:none}
  .pjm-hist li{grid-template-columns:1fr;gap:2px}
}

/* ===== fix text (admin.css) ===== */
.pjm-fix{font-size:13px;color:var(--stamp)}

/* ===== package rows and inline edit (details/summary) (admin.css) ===== */
.pjm-pkgrow{padding:16px 18px;border-bottom:1px solid var(--rule);background:#fff}
.pjm-pkgrow:last-child{border-bottom:0}
.pjm-pkgrow-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pjm-pkgrow-head .pjm-state{margin-left:8px}
.pjm-pkgrow-edit{margin-top:12px;border-top:1px solid var(--rule);padding-top:10px}
.pjm-pkgrow-edit summary{
  cursor:pointer;font-family:var(--data);font-size:12px;
  color:var(--steel);
}
@media (hover:hover) and (pointer:fine){.pjm-pkgrow-edit summary:hover{color:var(--brand-ink)}}
.pjm-pkgrow-edit[open] summary{color:var(--ink);margin-bottom:6px}

/* ===== three-up rows (admin.css) ===== */
.pjm-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}

/* ===== inline edit under a table row (admin.css) ===== */
.pjm-editrow .pjm-pkgrow-edit{margin-top:0;border-top:0;padding-top:0}

/* ===== stat grid (admin.css) ===== */
.pjm-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule-strong);
  border:1px solid var(--rule-strong);margin-bottom:22px}
.pjm-stat{background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.pjm-stat-n{font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.pjm-stat-l{font-family:var(--data);font-size:12px;color:var(--steel)}

/* ===== dashboard (admin.css) ===== */
/* ---------- dashboard ---------- */
.pjm-board--alert{border-left:3px solid var(--stamp)}
.pjm-todo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--rule-strong);border:1px solid var(--rule-strong)}
.pjm-todo-item{display:flex;align-items:baseline;gap:10px;padding:15px 18px;background:#fff;
  text-decoration:none;transition:background .12s ease}
@media (hover:hover) and (pointer:fine){.pjm-todo-item:hover{background:var(--paper)}}
.pjm-todo-item--urgent{border-left:3px solid var(--stamp)}
.pjm-todo-n{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.03em;
  color:var(--ink);line-height:1}
.pjm-todo-item--urgent .pjm-todo-n{color:var(--stamp)}
.pjm-todo-l{font-size:13px;color:var(--ink-2);line-height:1.3}

/* ---------- dashboard widgets ---------- */
.pjm-wpair{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.pjm-wpair > :only-child{grid-column:1 / -1}
/* On the dashboard the row wrapper owns vertical rhythm, so stat rows shouldn't add their
   own bottom margin (that double-spaced them relative to every other row). */
.pjm-dash .pjm-statgrid{margin-bottom:0}
.pjm-wstat{
  background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:3px;
  text-decoration:none;transition:background .12s ease;
}
@media (hover:hover) and (pointer:fine){.pjm-wstat:hover{background:var(--paper)}}
.pjm-wlist{list-style:none;display:flex;flex-direction:column;gap:1px;background:var(--rule-strong);
  border:1px solid var(--rule-strong)}
.pjm-witem{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:#fff}
.pjm-witem[draggable="true"]{cursor:grab}
.pjm-witem.is-dragging{opacity:.4}
.pjm-witem--off{background:var(--paper)}
.pjm-wgrip{color:var(--steel);font-size:15px;line-height:1.4;user-select:none}
.pjm-winfo{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pjm-winfo strong{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink)}
.pjm-wsize{font-family:var(--data);font-size:12px;color:var(--brand-ink)}
.pjm-wdesc{font-size:12px;color:var(--steel);line-height:1.45}
.pjm-wx,.pjm-wadd{
  background:none;border:1px solid var(--rule-strong);color:var(--steel);cursor:pointer;
  font-family:var(--data);font-size:12px;
  padding:4px 9px;flex-shrink:0;
}
.pjm-wx{font-size:16px;line-height:1;padding:2px 8px;border:0}
@media (hover:hover) and (pointer:fine){.pjm-wx:hover{color:var(--stamp)}}
@media (hover:hover) and (pointer:fine){.pjm-wadd:hover{border-color:var(--brand-ink);color:var(--brand-ink)}}
@media(max-width:900px){ .pjm-wpair{grid-template-columns:1fr} }

/* Lead going cold: a lead sat in new/contacted past 48h. */
.pjm-stale{color:var(--stamp);font-weight:600}

/* ===== phone tab bar (admin.css) ===== */
.pjm-tabbar{display:none}
@media(max-width:900px){
  .pjm-tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:var(--ink);border-top:1px solid var(--rule-dk);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .pjm-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;text-decoration:none;color:var(--zinc);
    font-family:var(--data);font-size:12px;
  }
  .pjm-tab svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .pjm-tab.is-on{color:#fff;box-shadow:inset 0 3px 0 0 var(--brand)}
  .pjm-tab--send svg{background:var(--brand);color:#fff;border-radius:50%;padding:5px;width:32px;height:32px;stroke-width:2.4}
  .pjm-tab--send{color:#fff}
  .pjm-portalmain{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .pjm-chat-launch,.pjm-chat{bottom:calc(72px + env(safe-area-inset-bottom))}
  .pjm-attn li{flex-direction:column;align-items:flex-start}
  .pjm-donelist li{flex-direction:column;gap:2px}
}

/* ===== admin on a phone (admin.css) ===== */
/* admin on a phone: menu folds away, bottom tab bar, bell panel fits the screen */
.pjm-side-toggle{display:none}
@media(min-width:821px){.pjm-tabbar--admin{display:none!important}}
@media(max-width:820px){
  .pjm-side{padding:12px 16px;gap:12px;justify-content:space-between}
  .pjm-side-mark img{height:26px}
  .pjm-side-toggle{
    display:inline-flex;align-items:center;min-height:40px;padding:0 16px;background:transparent;color:#fff;
    border:1px solid var(--rule-dk);font-family:var(--data);font-size:12px;cursor:pointer;
  }
  .pjm-side:not(.is-open) .pjm-sidenav,.pjm-side:not(.is-open) .pjm-side-foot{display:none}
  .pjm-side.is-open .pjm-sidenav a{min-height:40px;display:inline-flex;align-items:center}
  .pjm-adminmain{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .pjm-tab--menu{background:transparent;border:0;cursor:pointer}
  .pjm-bell-panel{position:fixed;left:12px;right:12px;top:72px;width:auto;max-width:none;max-height:calc(100vh - 160px);overflow-y:auto}
}
.pjm-adminmain{min-width:0}
@media(max-width:820px){.pjm-adminshell{grid-template-columns:minmax(0,1fr)}}
.pjm-system .pjm-since{white-space:normal}

/* ===== control sizes: inputs, tiny buttons, inputs inside tables (admin.css) ===== */
.pjm-staged form > select,.pjm-staged form > input[type=text]{
  height:36px;padding:0 10px;border:1px solid var(--rule-strong);font:14px var(--body);color:var(--ink);background:#fff;border-radius:0;box-sizing:border-box;max-width:100%;
}
.pjm-adminmain .pjm-field input:not([type=checkbox]):not([type=radio]):not([type=file]),.pjm-adminmain .pjm-field select{min-height:40px;box-sizing:border-box}
.pjm-adminmain .pjm-btn--tiny{font-size:13px;padding:0 14px;min-height:36px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:middle}
.pjm-form.pjm-bill-row .pjm-btn,.pjm-form.pjm-bill-row .pjm-btn--tiny{min-height:44px}
.pjm-bill-row > form{margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Rule grids: every input on a row lines up, however many lines its label takes. */
.pjm-bill-rules{align-items:start}
.pjm-bill-rules .pjm-field > span{min-height:2.8em;display:flex;align-items:flex-end}
.pjm-bill-rules .pjm-field small{font-size:12px;color:var(--steel);line-height:1.45}
.pjm-bill-wide{grid-column:span 2}
@media(max-width:600px){.pjm-bill-wide{grid-column:auto}}
form.pjm-form > .pjm-board{align-self:stretch;width:100%}
/* Inputs inside tables (extras, care plan allowances, price overrides) */
.pjm-board-table input[type=text],.pjm-board-table input[type=number],.pjm-board-table input[type=email],.pjm-board-table select{
  height:36px;padding:0 10px;border:1px solid var(--rule-strong);font:14px var(--body);color:var(--ink);background:#fff;border-radius:0;box-sizing:border-box;width:100%;min-width:0;max-width:100%
}
.pjm-board-table input[type=number]{max-width:140px}
.pjm-board-table select{max-width:160px}
.pjm-board-table input[type=checkbox]{width:18px;height:18px}

/* ===== refinement: sentence case, softer shapes (admin.css) ===== */
/* ==========================================================================
   Portal and admin refinement (v0.46.1). Same palette, logo and type families
   as the public site's refinement: sentence-case buttons and headings, softer
   shapes (controls 6px, panels 12px), white inputs, real hover and press feedback.
   ========================================================================== */
.pjm-app{--r-ctl:6px;--r-card:12px;--ease:cubic-bezier(.16,1,.3,1)}
.pjm-app h1,.pjm-app h2,.pjm-app h3{text-wrap:balance}

/* buttons */
.pjm-app .pjm-btn{
  font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;
  padding:10px 18px;border-radius:var(--r-ctl);line-height:1.25;
  transition:transform .25s var(--ease),background .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s var(--ease);
}
@media (hover:hover) and (pointer:fine){.pjm-app .pjm-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(0,112,178,.5)}}
.pjm-app .pjm-btn:active{transform:translateY(0) scale(.98);box-shadow:none}
@media (hover:hover) and (pointer:fine){.pjm-app .pjm-btn--ghost:hover,.pjm-app .pjm-btn--ghostdk:hover{box-shadow:none}}
.pjm-app .pjm-btn--tiny,.pjm-app .pjm-adminmain .pjm-btn--tiny{font-size:13px;padding:0 13px;min-height:34px}
.pjm-app .pjm-form.pjm-bill-row .pjm-btn,.pjm-app .pjm-form.pjm-bill-row .pjm-btn--tiny{min-height:42px}

/* panels: rounded, with a sentence-case title in the dark bar */
.pjm-app .pjm-board{border-radius:var(--r-card);overflow:hidden;border-color:var(--rule)}
.pjm-app .pjm-board-head{padding:14px 20px}
.pjm-app .pjm-board-head h2{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.005em;text-transform:none}
.pjm-app .pjm-board-count{font-family:var(--body);font-size:13px;letter-spacing:0}
.pjm-app .pjm-board-table th{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--steel)}
.pjm-app .pjm-board-table tbody tr{transition:background .15s ease}
.pjm-app .pjm-staged{padding:22px 20px}

/* inputs: white, rounded, clear focus */
.pjm-app .pjm-field > span{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.pjm-app .pjm-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.pjm-app .pjm-field textarea,.pjm-app .pjm-field select,
.pjm-app .pjm-bill-row > input[type=text],.pjm-app .pjm-bill-row > select,.pjm-app .pjm-bill-row form > select,.pjm-app .pjm-bill-row form > input[type=text],
.pjm-app .pjm-board-table input[type=text],.pjm-app .pjm-board-table input[type=number],.pjm-app .pjm-board-table select,
.pjm-app .pjm-bill-search input{
  background:#fff;border-radius:var(--r-ctl);transition:border-color .15s ease,box-shadow .15s ease
}
.pjm-app .pjm-field input:focus,.pjm-app .pjm-field textarea:focus,.pjm-app .pjm-field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,160,255,.18);outline:none}
.pjm-app .pjm-field input[type=file]{border-radius:var(--r-ctl)}

/* tiles, alerts, tabs */
.pjm-app .pjm-bill-snap > div,.pjm-app .pjm-paysum-box,.pjm-app .pjm-home-acct,.pjm-app .pjm-home-site,.pjm-app .pjm-home-svc,.pjm-app .pjm-stat,.pjm-app .pjm-client-logo{border-radius:var(--r-card)}
.pjm-app .pjm-bill-snap > div{background:#fff;border-color:var(--rule)}
.pjm-app .pjm-alert{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.pjm-app .pjm-bill-nav a{border-radius:var(--r-ctl);transition:background .15s ease,border-color .15s ease}
@media (hover:hover) and (pointer:fine){.pjm-app .pjm-bill-nav a:hover{border-color:var(--ink)}}
.pjm-app .pjm-confirm{border-radius:var(--r-ctl)}

/* portal top bar and admin side menu: quieter text */
.pjm-app .pjm-nav a{font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none}
.pjm-app .pjm-sidenav a{font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;border-radius:0 var(--r-ctl) var(--r-ctl) 0;transition:background .15s ease,color .15s ease}
.pjm-app .pjm-adminhead-view{font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}

/* portal home: the big "Send an update" card lifts on hover */
.pjm-app .pjm-home-sendbtn{border-radius:var(--r-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.pjm-app .pjm-home-sendbtn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -18px rgba(10,14,26,.55)}}

@media (prefers-reduced-motion:reduce){.pjm-app .pjm-btn,.pjm-app .pjm-home-send{transition:none}.pjm-app .pjm-btn:hover,.pjm-app .pjm-home-sendbtn:hover{transform:none}}
.pjm-app .pjm-kind-box{border-radius:var(--r-ctl);transition:border-color .15s ease,background .15s ease,transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.pjm-app .pjm-kind:hover .pjm-kind-box{transform:translateY(-1px)}}
.pjm-app .pjm-statgrid{border-radius:var(--r-card);overflow:hidden}
.pjm-app .pjm-home-acct-list .pjm-btn{display:inline-flex;align-items:center;vertical-align:middle}
.pjm-app .pjm-prio-box,.pjm-app .pjm-pkgrow,.pjm-app .pjm-filelist li,.pjm-app .pjm-drop{border-radius:var(--r-ctl)}

/* ---- portal dashboard: tighter request rows, aligned columns ---- */

/* ===== number columns (admin.css) ===== */
/* Design review, Oct 2026: number columns (found by charts.js) align right on a real table. */
@media(min-width:901px){ .pjm-board-table td.pjm-num,.pjm-board-table th.pjm-num,.pjm-table td.pjm-num,.pjm-table th.pjm-num{text-align:right;font-variant-numeric:tabular-nums} }
.pjm-reqgrid > div > .pjm-mt-28:first-child{margin-top:0}
.pjm-reqgrid > * > .pjm-board:first-child{margin-top:0}
.pjm-kv dd{min-width:0;overflow-wrap:anywhere}

/* ===== soft depth: toned-down neumorphism (admin.css) ===== */
/* ---------- soft depth: a toned-down neumorphism (matches the public site) ----------
   Panels lift off the page, inputs sit pressed in, buttons press when clicked. Borders, text
   colours and focus rings are unchanged, so tables and forms read exactly as before. */
.pjm-app{--r-ctl:8px;--r-card:14px;
  --neu-hi:rgba(255,255,255,.9);--neu-lo:rgba(22,30,51,.13);
  --neu-raise:-6px -6px 14px var(--neu-hi),8px 10px 22px var(--neu-lo);
  --neu-raise-sm:-2px -2px 6px var(--neu-hi),3px 4px 10px var(--neu-lo);
  --neu-press:inset 2px 2px 5px rgba(22,30,51,.10),inset -2px -2px 5px rgba(255,255,255,.9)}
.pjm-app .pjm-board,.pjm-app .pjm-statgrid,.pjm-app .pjm-cards,.pjm-app .pjm-bill-snap > div,.pjm-app .pjm-paysum-box,
.pjm-app .pjm-home-acct,.pjm-app .pjm-home-site,.pjm-app .pjm-home-svc,.pjm-app .pjm-plat-sum > div,.pjm-app .pjm-checklist,
.pjm-app .pjm-rate,.pjm-app .pjm-home-msg,.pjm-app .pjm-home-sms,.pjm-app .pjm-paybox,.pjm-app .pjm-push--card,.pjm-app .pjm-note{box-shadow:var(--neu-raise)}
.pjm-app .pjm-cards{border-radius:var(--r-card);overflow:hidden}
.pjm-app .pjm-paybox,.pjm-app .pjm-push--card,.pjm-app .pjm-note{border-radius:var(--r-card)}
.pjm-app .pjm-btn{box-shadow:var(--neu-raise-sm)}
@media (hover:hover) and (pointer:fine){.pjm-app .pjm-btn:hover{box-shadow:var(--neu-raise-sm),0 8px 18px -10px rgba(0,112,178,.5)}}
.pjm-app .pjm-btn:active{box-shadow:var(--neu-press)}
.pjm-app .pjm-adminside .pjm-btn,.pjm-app .pjm-side .pjm-btn{box-shadow:none}
.pjm-app .pjm-adminmain input[type=text],.pjm-app .pjm-adminmain input[type=email],.pjm-app .pjm-adminmain input[type=number],.pjm-app .pjm-adminmain input[type=password],.pjm-app .pjm-adminmain input[type=search],.pjm-app .pjm-adminmain input[type=tel],.pjm-app .pjm-adminmain input[type=url],.pjm-app .pjm-adminmain input[type=date],.pjm-app .pjm-adminmain select,.pjm-app .pjm-adminmain textarea,.pjm-app .pjm-portalmain input[type=text],.pjm-app .pjm-portalmain input[type=email],.pjm-app .pjm-portalmain input[type=number],.pjm-app .pjm-portalmain input[type=password],.pjm-app .pjm-portalmain input[type=search],.pjm-app .pjm-portalmain input[type=tel],.pjm-app .pjm-portalmain input[type=url],.pjm-app .pjm-portalmain input[type=date],.pjm-app .pjm-portalmain select,.pjm-app .pjm-portalmain textarea,.pjm-app .pjm-auth-main input[type=text],.pjm-app .pjm-auth-main input[type=email],.pjm-app .pjm-auth-main input[type=number],.pjm-app .pjm-auth-main input[type=password],.pjm-app .pjm-auth-main input[type=search],.pjm-app .pjm-auth-main input[type=tel],.pjm-app .pjm-auth-main input[type=url],.pjm-app .pjm-auth-main input[type=date],.pjm-app .pjm-auth-main select,.pjm-app .pjm-auth-main textarea{box-shadow:var(--neu-press)}
@media (prefers-contrast: more){.pjm-app{--neu-hi:transparent;--neu-lo:rgba(10,14,26,.2)}}
.pjm-app .pjm-sc-step,.pjm-app .pjm-thread-msg{border-radius:12px;box-shadow:var(--neu-raise-sm)}
.pjm-app .pjm-stat{box-shadow:none}
.pjm-app .pjm-wlist{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--neu-raise)}

/* ===== tables on a phone (pjm.css, from its max-width:900px block) ===== */
@media(max-width:900px){
  .pjm-board-table tbody,
  .pjm-board-table tr,
  .pjm-board-table td{display:block;width:100%}
  .pjm-board-table thead{display:none}
  .pjm-board-table tr{border-bottom:1px solid var(--rule);padding:14px 0}
  .pjm-board-table tbody tr:last-child{border-bottom:0}
  .pjm-board-table td{border:0;padding:3px 18px;overflow-wrap:anywhere}
  .pjm-board-table td[data-label]:not([data-label=""]):not(:first-child)::before{content:attr(data-label);display:block;font-family:var(--data);font-size:13px;color:var(--steel)}
  .pjm-board-table td.pjm-num{text-align:left}
  .pjm-since{text-align:left}
  .pjm-statecell{width:auto;padding-top:8px !important}
  .pjm-client{white-space:normal}
}