/* The Bridge Church Roanoke — Admin styles */

/* ===== Page Builder ===== */
.bnew{display:grid;gap:14px;max-width:480px;}
.bslug{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--surface);}
.bslug span{color:var(--muted);font-weight:600;}
.bslug input{flex:1;border:0;padding:.7em 0;outline:none;background:none;}
.secblock{border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden;background:var(--surface);box-shadow:0 2px 8px rgba(13,37,65,.04);}
.secblock__h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--snow);border-bottom:1px solid var(--line);}
.secblock__tag{font-weight:700;font-size:.85rem;color:var(--ink);}
.secblock__sp{flex:1;}
.secblock__b{padding:14px 16px;display:grid;gap:12px;}
.brow2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.brow2{grid-template-columns:1fr;}}
.fld--check{display:flex;flex-direction:row;align-items:center;gap:8px;}
.fld--check input{width:18px;height:18px;}
.secadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;}
.secadd__lbl{font-weight:600;font-size:.85rem;color:var(--muted);margin-right:2px;}
.secadd__btn{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:.82rem;padding:.5em .85em;border-radius:10px;cursor:pointer;transition:border-color .2s,color .2s;}
.secadd__btn span{font-size:1rem;line-height:1;}
.secadd__btn:hover{border-color:var(--cyan);color:var(--cyan-deep);}
.bimg{width:170px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--page);display:grid;place-items:center;border:1px solid var(--line);margin:4px 0 8px;}
.bimg.is-empty{border-style:dashed;}
.bimg img{width:100%;height:100%;object-fit:cover;}
.bimg span{font-size:.72rem;color:var(--muted);}
.bgal{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px;}
.bgal__it{position:relative;width:88px;height:66px;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
.bgal__it img{width:100%;height:100%;object-fit:cover;}
.bgal__x{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(13,37,65,.78);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;display:grid;place-items:center;}
.bgal__new{position:absolute;bottom:2px;left:2px;background:var(--cyan);color:#fff;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:6px;}
.bgal__add{display:inline-block;border:1.5px dashed var(--line);border-radius:10px;padding:.55em .9em;cursor:pointer;font-weight:600;font-size:.82rem;color:var(--cyan-deep);}
.bgal__add input{display:none;}
.bsave{display:flex;gap:10px;margin:18px 0 8px;position:sticky;bottom:0;background:linear-gradient(to top,var(--snow,#f4f7fa),transparent);padding:12px 0;}
/* Pages manager (drag list) */
.pglist{display:flex;flex-direction:column;gap:8px;}
.pgrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);}
.pgrow.is-drag{opacity:.9;box-shadow:0 14px 34px rgba(13,37,65,.2);}
.pgrow__drag{cursor:grab;color:var(--muted);font-size:1.05rem;touch-action:none;flex-shrink:0;}
.pgrow__main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.pgrow__main strong{color:var(--ink);}
.pgrow__main .muted{font-size:.78rem;}
.pgrow__menu{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted);font-weight:600;flex-shrink:0;}
.pgrow__menu select{font:inherit;font-size:.82rem;padding:.4em .5em;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);}
@media(max-width:760px){.pgrow{flex-wrap:wrap;}.pgrow__main{flex-basis:60%;}}
/* Navigation menus manager */
.menulist{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.menurow{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);}
.menurow.is-drag{opacity:.9;box-shadow:0 14px 34px rgba(13,37,65,.2);}
.menurow__drag{cursor:grab;color:var(--muted);touch-action:none;flex-shrink:0;}
.menurow__badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cyan-deep);background:color-mix(in srgb,var(--cyan) 12%,var(--surface));padding:.3em .6em;border-radius:6px;flex-shrink:0;}
.menurow__label{flex:0 0 auto;width:180px;font:inherit;padding:.45em .6em;border:1px solid var(--line);border-radius:8px;}
.menurow__url{flex:1;min-width:120px;font:inherit;padding:.45em .6em;border:1px solid var(--line);border-radius:8px;}
.menurow__del{margin-left:auto;flex-shrink:0;}
.menuadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.menuadd select,.menuadd input{font:inherit;padding:.55em .7em;border:1px solid var(--line);border-radius:9px;background:var(--surface);}
.menuadd #mAddLabel{flex:1;min-width:160px;}
.menuadd #mAddUrl{flex:1;min-width:160px;}
@media(max-width:680px){.menurow{flex-wrap:wrap;}.menurow__label{width:auto;flex:1;}}
/* Smooth fade between admin pages instead of a hard flash */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:aFadeOut .16s ease both;}
::view-transition-new(root){animation:aFadeIn .28s var(--ease-out,cubic-bezier(.22,1,.36,1)) both;}
@keyframes aFadeOut{to{opacity:0;}}
@keyframes aFadeIn{from{opacity:0;transform:translateY(8px);}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none;}}
:root{
  --navy:#0d2541;--charcoal:#353a47;--cyan:#0092b7;--snow:#f9fafd;
  --slate:var(--charcoal);--teal:var(--cyan);--cyan-deep:color-mix(in srgb,var(--cyan) 60%,var(--navy));--paper:var(--snow);
  --cream:#edf0f5;--cream-2:#e1e6ee;--ink:#0d2541;--muted:#5c6b7a;--line:#dde3ec;
  --surface:#ffffff;--surface-2:#f6f8fc;--page:#edf0f6;
  /* Aliases. Rules around the file reach for these with a hard-coded hex as
     the fallback, which meant they never followed the theme. Pointing them
     at the real tokens leaves the light mode exactly as it was and lets the
     dark one reach them. */
  --accent:var(--cyan);--ink-soft:var(--muted);--surface-1:var(--surface-2);
  /* Status colours, named at last. Pages around the admin had been spelling
     these out in hex one screen at a time, which is why a red stayed red
     when the surface under it went dark. The light values here are the ones
     those pages were already using, so nothing shifts in daylight. */
  /* A softer ink for secondary headings - it was #41506a on four screens,
     which is far enough from --ink that folding the two together would be
     visible in daylight. */
  --ink-2:#41506a;
  --good:#1d7a46;--good-bg:#e5f7ec;--good-line:#bfe6cd;
  --bad:#c0392b;--bad-bg:#fdecea;--bad-line:#f2c5c0;
  --warn:#96601c;--warn-bg:#fffaf0;--warn-line:#f0dcb6;
  --info-bg:#e7f6fb;--info-line:#bcd7e2;
  --f:"Montserrat",system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;
  --r:12px;--rl:18px;--sh:0 1px 2px rgba(13,37,65,.05),0 8px 26px rgba(13,37,65,.06);
}

/* ---------------------------------------------------- the light/dark switch
   Sits in the sidebar foot, which is navy in both themes, so it is styled
   against that rather than against --surface. Auto is the default and defers
   to the Mac; the other two are for the times you want to override it. */
.admtheme{display:flex;gap:2px;margin:0 0 8px;padding:3px;border-radius:999px;background:rgba(255,255,255,.08);}
.admtheme button{flex:1 1 0;font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.6);background:transparent;border:0;border-radius:999px;padding:6px 4px;cursor:pointer;transition:background-color .15s cubic-bezier(.25,1,.5,1),color .15s cubic-bezier(.25,1,.5,1);}
.admtheme button:hover{color:#fff;}
.admtheme button[aria-pressed="true"]{background:rgba(255,255,255,.17);color:#fff;}
.admtheme button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
@media (prefers-reduced-motion:reduce){.admtheme button{transition:none;}}

/* The login card goes dark with everything else, and the navy logo goes with
   it, so swap in the light one. Same picture, drawn for a dark ground. */
html.dark .login__card > img[src*="The Bridge Church-Logo-Dark"]{content:url("/assets/logo-light.png");}

/* ------------------------------------------------------------------ dark admin
   The sidebar was always navy, so in the dark it barely moves; it's the wide
   white expanse of the working area that needed somewhere darker to go.

   Every card in this file now paints with --surface rather than #fff, so this
   block is the whole of it. `color:#fff` was deliberately left alone — those
   labels sit on navy and cyan chrome that stays dark in both modes.

   The switch is manual and per-device: the office password has no member
   record to hang a preference on, so it lives in this browser. */
html.dark{color-scheme:dark;}
/* On <html>, not <body>. An alias like --surface-1:var(--surface-2) is
   resolved where it is declared - :root, which is <html>. With the dark
   values living on <body>, that alias was computed against the daylight
   value and inherited down white, which is why the cards on Access stayed
   bright with dark text on them. Same element, same answer. */
html.dark{
  --navy:#0b1a2b;--snow:#0e151d;--paper:#0e151d;--page:#0e151d;
  --surface:#161e28;--surface-2:#1b2530;
  --cream:#161e28;--cream-2:#1b2530;
  --ink:#eef2f7;--muted:#98a3b0;--line:#2b3644;
  --cyan:#2ba7c9;--cyan-deep:#63c3dd;
  /* The second half of the theme. --sunk is a wash rather than a colour, so
     in the light it darkens and in the dark it has to lighten instead, or
     every recessed panel disappears. Shadows go black for the same reason:
     a navy shadow on a navy surface is not a shadow. */
  --sunk:rgba(255,255,255,.055);
  --muted-2:#93a1b2;
  --e1:0 1px 2px rgba(0,0,0,.5),0 4px 16px -8px rgba(0,0,0,.6);
  --e2:0 16px 44px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);
  --e3:0 20px 40px -12px rgba(0,0,0,.75);
  --ink-2:#c3cedd;
  --good:#5cc98d;--good-bg:#12301f;--good-line:#1f5136;
  --bad:#ff9083;--bad-bg:#3a1d1a;--bad-line:#6b342d;
  --warn:#e6b45f;--warn-bg:#332813;--warn-line:#5c4820;
  --info-bg:#0f2831;--info-line:#1d4a5a;
  --sh:0 1px 2px rgba(0,0,0,.5),0 6px 22px rgba(0,0,0,.42);
  background:var(--page);color:var(--ink);
}
/* Inputs don't inherit the page's colors, so they're the one thing that stays
   stubbornly white and blinding until told otherwise. */
html.dark input,html.dark textarea,html.dark select{
  background:var(--surface-2);color:var(--ink);border-color:var(--line);
}
html.dark input::placeholder,html.dark textarea::placeholder{color:var(--muted);}
/* Date and color pickers draw their own widget chrome from color-scheme. */
html.dark input[type=date],html.dark input[type=time],html.dark input[type=color]{color-scheme:dark;}
html.dark .note.ok{background:color-mix(in srgb,#1d9e75 18%,var(--surface));color:#8ee3c4;}
html.dark .note.err,html.dark .note--warn{background:color-mix(in srgb,#c0392b 20%,var(--surface));color:#ffb4aa;}
html.dark table thead th{background:var(--surface-2);}
html.dark img[src$=".png"],html.dark img[src$=".jpg"]{filter:none;}
*,*::before,*::after{box-sizing:border-box;}*{margin:0;}
/* The browser's own [hidden] rule sits BELOW author styles, so any element we
   give a display to (.pjpanel, .pjboard, .btn…) ignores it. This makes hidden
   mean hidden, everywhere. */
[hidden]{display:none!important;}
/* One place to honour "I'd rather things didn't move". */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
body{font-family:var(--f);background:var(--page);color:var(--ink);line-height:1.55;font-size:15px;-webkit-font-smoothing:antialiased;}
a{color:var(--cyan-deep);text-decoration:none;}
.serif{font-family:var(--serif);font-style:italic;}

/* ===== Sidebar admin shell ===== */
:root{--sideW:236px;}
.adm__side{position:fixed;top:0;left:0;bottom:0;width:var(--sideW);background:var(--navy);color:#fff;display:flex;flex-direction:column;z-index:60;overflow-y:auto;}
.adm__brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;padding:18px 18px 14px;}
.adm__brand img{width:34px;height:34px;flex-shrink:0;}
.adm__brand span{line-height:1.1;font-size:.92rem;}
.adm__brand small{display:block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,238,225,.55);font-weight:600;margin-top:2px;}
.adm__nav{flex:1;padding:4px 10px 10px;}
.adm__grp{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.58);margin:16px 10px 6px;}
.adm__item{display:flex;align-items:center;gap:11px;color:rgba(244,238,225,.82);font-weight:600;font-size:.88rem;padding:.6em .75em;border-radius:9px;transition:background .15s,color .15s;}
.adm__item:hover{background:rgba(255,255,255,.07);color:#fff;}
.adm__item.on{background:var(--cyan);color:#fff;}
.adm__ic{width:19px;height:19px;flex-shrink:0;display:grid;place-items:center;opacity:.9;}
.adm__ic svg{width:19px;height:19px;}
.adm__sidefoot{padding:12px 16px 18px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:8px;}
.adm__sidefoot a{color:rgba(244,238,225,.72);font-weight:600;font-size:.84rem;}
.adm__sidefoot a:hover{color:#fff;}
.adm__sidefoot .out{color:rgba(244,238,225,.5);}
/* who's signed in */
.adm__who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.8rem;font-weight:700;color:rgba(244,238,225,.9);padding-bottom:2px;}
.adm__who em{font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:100px;background:rgba(94,214,229,.22);color:#bff0f7;}
.adm__main{margin-left:var(--sideW);min-height:100vh;overflow-x:clip;}
.adm__scrim{display:none;}
/* mobile top bar (hidden on desktop) */
.adm__bar{display:none;}
@media(max-width:960px){
  .adm__side{transform:translateX(-100%);transition:transform .28s cubic-bezier(.22,1,.36,1);box-shadow:0 0 40px rgba(0,0,0,.3);}
  body.adm-open .adm__side{transform:none;}
  .adm__main{margin-left:0;}
  .adm__bar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:55;background:var(--navy);color:#fff;padding:10px 14px;}
  .adm__burger{border:0;background:rgba(255,255,255,.1);color:#fff;width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center;}
  .adm__burger svg{width:22px;height:22px;}
  .adm__bartitle{font-weight:700;font-size:1rem;}
  .adm__barview{margin-left:auto;color:rgba(255,255,255,.85);font-weight:600;font-size:.85rem;}
  body.adm-open .adm__scrim{display:block;position:fixed;inset:0;background:rgba(7,20,38,.5);z-index:58;}
}

.wrap{max-width:1120px;margin:auto;padding:clamp(20px,3.5vw,38px) clamp(16px,3.5vw,34px);}
.ph{margin-bottom:24px;}
.ph h1{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;}
.ph h1 .serif{color:var(--cyan);font-weight:400;}
.ph p{color:var(--muted);margin-top:4px;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:28px;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);padding:18px 20px;box-shadow:var(--sh);}
.stat .n{font-size:2rem;font-weight:800;color:var(--ink);line-height:1;}
.stat .n.accent{color:var(--cyan);}
.stat .l{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-top:8px;}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh);margin-bottom:24px;overflow:hidden;}
.panel__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.panel__h h2{font-size:1.1rem;font-weight:700;}
.panel__b{padding:18px 20px;}
.muted{color:var(--muted);}

table{width:100%;border-collapse:collapse;font-size:.92rem;}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
tr:last-child td{border-bottom:none;}
.tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:100px;background:var(--cream-2);color:var(--cyan-deep);}
.tag.connect{background:color-mix(in srgb,var(--cyan) 18%,var(--surface));color:var(--cyan-deep);}
.tag.prayer{background:color-mix(in srgb,#7f77dd 20%,var(--surface));color:var(--ink-2);}
.tag.smallgroup{background:var(--good-bg);color:var(--good);}
.tag.contact{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:var(--warn);}
.new-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);margin-right:6px;vertical-align:middle;}
.kv{margin:0;}
.kv div{display:flex;gap:8px;padding:2px 0;}
.kv dt{font-weight:700;color:var(--ink);min-width:120px;}
.kv dd{color:var(--ink);}

/* buttons / forms */
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--navy);color:#fff;border:none;border-radius:100px;padding:.6em 1.15em;font-family:var(--f);font-weight:600;font-size:.88rem;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh);}
.btn--cyan{background:var(--cyan);}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cyan);color:var(--cyan-deep);}
.btn--sm{padding:.4em .8em;font-size:.8rem;}
.btn--danger{background:var(--surface);color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad-line);}
.btn--danger:hover{background:#a3302d;color:#fff;}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.toolbar a.chip{font-size:.85rem;font-weight:600;padding:.45em 1em;border-radius:100px;border:1px solid var(--line);color:var(--muted);}
.toolbar a.chip.on{background:var(--navy);color:#fff;border-color:var(--ink);}

.fld{display:block;margin-bottom:16px;}
.fld .lbl{display:block;font-weight:700;font-size:.82rem;color:var(--ink);margin-bottom:5px;}
.fld .help{font-weight:400;color:var(--muted);font-size:.78rem;}
.fld input[type=file]{font-size:.85rem;color:var(--ink);}
.evimg-prev{margin-bottom:8px;}
.evimg-prev img{max-width:240px;max-height:140px;border-radius:10px;border:1px solid var(--line);display:block;object-fit:cover;}
/* Every text-ish field shares one look. Date/time/number/search used to be left
   out of this list, so they fell back to raw browser chrome and looked foreign
   next to the styled inputs beside them. */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=tel],input[type=url],input[type=number],input[type=date],
input[type=time],input[type=datetime-local],input[type=month],input[type=week],
textarea,select{font:inherit;font-size:.95rem;width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:.6em .8em;color:var(--ink);}
textarea{min-height:90px;resize:vertical;line-height:1.5;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,146,183,.18);}

/* Native date/time pickers: keep the browser's calendar popup (it's good and
   accessible) but mask Chrome's flat grey glyph with our own icon, so the
   trigger is drawn from the same 24px stroke set as the sidebar and actually
   answers a hover instead of only darkening. */
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator,input[type=week]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:1;width:17px;height:17px;padding:0;margin-left:.4em;
  background-image:none;background-color:var(--muted);
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:17px 17px;
  mask-repeat:no-repeat;mask-position:center;mask-size:17px 17px;
  transition:background-color .14s ease,transform .14s var(--ease-out,cubic-bezier(.22,1,.36,1));}
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator,input[type=week]::-webkit-calendar-picker-indicator{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");}
input[type=time]::-webkit-calendar-picker-indicator{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.9V12l3.6 2.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.9V12l3.6 2.2'/%3E%3C/svg%3E");}
/* being anywhere in the field lights the trigger up; landing on it grows it */
input[type=date]:hover::-webkit-calendar-picker-indicator,input[type=datetime-local]:hover::-webkit-calendar-picker-indicator,input[type=month]:hover::-webkit-calendar-picker-indicator,input[type=week]:hover::-webkit-calendar-picker-indicator,input[type=time]:hover::-webkit-calendar-picker-indicator,input[type=date]:focus::-webkit-calendar-picker-indicator,input[type=datetime-local]:focus::-webkit-calendar-picker-indicator,input[type=month]:focus::-webkit-calendar-picker-indicator,input[type=week]:focus::-webkit-calendar-picker-indicator,input[type=time]:focus::-webkit-calendar-picker-indicator{background-color:var(--cyan);}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,input[type=month]::-webkit-calendar-picker-indicator:hover,input[type=week]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover{background-color:var(--cyan-deep);transform:scale(1.14);}
input[type=date]::-webkit-calendar-picker-indicator:active,input[type=datetime-local]::-webkit-calendar-picker-indicator:active,input[type=month]::-webkit-calendar-picker-indicator:active,input[type=week]::-webkit-calendar-picker-indicator:active,input[type=time]::-webkit-calendar-picker-indicator:active{background-color:var(--cyan-deep);transform:scale(.88);}
@media(prefers-reduced-motion:reduce){
  input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,input[type=month]::-webkit-calendar-picker-indicator:hover,input[type=week]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover,input[type=date]::-webkit-calendar-picker-indicator:active,input[type=datetime-local]::-webkit-calendar-picker-indicator:active,input[type=month]::-webkit-calendar-picker-indicator:active,input[type=week]::-webkit-calendar-picker-indicator:active,input[type=time]::-webkit-calendar-picker-indicator:active{transform:none;}
}

/* File pickers — the browser's grey "Choose File" slab becomes a proper button
   on a dashed drop-style field. */
input[type=file]{font:inherit;font-size:.9rem;width:100%;background:var(--surface);border:1.5px dashed var(--line);
  border-radius:10px;padding:.5em .65em;color:var(--muted);cursor:pointer;transition:border-color .12s,background .12s;}
input[type=file]:hover{border-color:var(--cyan);background:var(--surface-2);}
input[type=file]:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,146,183,.18);}
input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:.84rem;margin:0 10px 0 0;
  padding:.5em 1em;border:0;border-radius:8px;background:var(--navy);color:#fff;cursor:pointer;transition:background .12s;}
input[type=file]:hover::file-selector-button{background:var(--cyan-deep,#0a6a83);}
input[type=file]::-webkit-file-upload-button{font:inherit;font-weight:700;font-size:.84rem;margin:0 10px 0 0;
  padding:.5em 1em;border:0;border-radius:8px;background:var(--navy);color:#fff;cursor:pointer;}

/* Color swatches — a rounded chip rather than the default bevelled box. */
input[type=color]{width:46px;height:36px;padding:3px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--surface);cursor:pointer;vertical-align:middle;}
input[type=color]:hover{border-color:var(--cyan);}
input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
input[type=color]::-webkit-color-swatch{border:0;border-radius:6px;}
input[type=color]::-moz-color-swatch{border:0;border-radius:6px;}

/* Sliders pick up the brand color instead of the OS blue. */
input[type=range]{width:100%;accent-color:var(--cyan);height:24px;padding:0;border:0;background:transparent;cursor:pointer;}
input[type=range]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px;}

/* Number fields: keep the spinners but stop them crowding the value. */
input[type=number]{padding-right:.45em;}
.switch{display:flex;align-items:center;gap:10px;font-weight:600;}
.switch input{width:18px;height:18px;accent-color:var(--cyan);}
fieldset{border:1px solid var(--line);border-radius:var(--rl);padding:18px 20px;margin-bottom:20px;}
legend{font-weight:800;padding:0 8px;color:var(--cyan-deep);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;}

.note{border-radius:12px;padding:12px 16px;font-weight:600;margin-bottom:18px;}
.note.ok{background:var(--good-bg);color:var(--good);}
.note.err{background:var(--bad-bg);color:var(--bad);}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(160deg,#0d2541,#0b4f6c);}
.login__card{background:var(--surface);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.3);padding:clamp(28px,5vw,44px);max-width:420px;width:100%;}
.login__card img{width:60px;height:60px;margin-bottom:14px;}
.login__card h1{font-size:1.5rem;}
.login__card p{color:var(--muted);margin:6px 0 22px;font-size:.92rem;}
.login__card .btn{width:100%;justify-content:center;margin-top:6px;padding:.8em;}
/* two ways in: shared office password, or a personal staff account */
.lgtabs{display:flex;gap:4px;background:var(--snow,#f1f5f9);padding:4px;border-radius:100px;margin:4px 0 18px;}
.lgtab{flex:1;border:0;background:none;font:inherit;font-size:.84rem;font-weight:700;color:var(--muted);padding:.55em .4em;border-radius:100px;cursor:pointer;transition:background .15s,color .15s;}
.lgtab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(13,37,65,.14);}
.lgpane{display:none;}
.lgpane.on{display:block;}
.lgforgot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line,#e3e9f0);}
.lgforgot .lbl{font-weight:700;}
.lgforgot .btn{margin-top:2px;}

/* bars (stats) */
.bars{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:10px;}
.bars .bar{flex:1;background:var(--cyan);border-radius:6px 6px 0 0;min-height:3px;position:relative;transition:background .2s;}
.bars .bar:hover{background:var(--cyan-deep);}
.bars .bar span{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.7rem;font-weight:700;color:var(--ink);}
.bars__x{display:flex;gap:6px;margin-top:6px;}
.bars__x div{flex:1;text-align:center;font-size:.62rem;color:var(--muted);}
@media(max-width:640px){.kv div{flex-direction:column;gap:0;}.kv dt{min-width:0;}}

/* form builder + events */
.ev-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:start;}
@media(max-width:860px){.ev-cols{grid-template-columns:1fr;}}
.fieldrow{border:1px solid var(--line);border-radius:var(--rl);padding:14px;margin-bottom:12px;background:var(--surface);}
.fieldrow__head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.fieldrow__label{flex:1;min-width:160px;font-weight:600;}
.fieldrow__head select{width:auto;min-width:130px;}
.fieldrow__btns{display:flex;gap:6px;margin-left:auto;}
.fieldrow__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.fieldrow .opts{margin-top:10px;}
.fieldrow .opts textarea{min-height:84px;}
@media(max-width:640px){.fieldrow__meta{grid-template-columns:1fr;}}

/* media / series */
.seriesrow{display:grid;grid-template-columns:130px 1fr auto;gap:16px;align-items:start;}
.seriesrow__img{width:130px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--page);display:grid;place-items:center;border:1px solid var(--line);}
.seriesrow__img img{width:100%;height:100%;object-fit:cover;}
.seriesrow__none{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.seriesrow__fields{display:grid;gap:10px;min-width:0;}
.upload{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted);font-weight:600;}
.upload input[type=file]{font-size:.85rem;color:var(--ink);}
@media(max-width:640px){.seriesrow{grid-template-columns:1fr;}.seriesrow__img{width:100%;}}

/* ===== Serve ROA opportunity rows ===== */
.sropp{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line);}
.sropp__img{display:flex;flex-direction:column;gap:6px;}
.sropp__thumb{width:100%;aspect-ratio:16/10;border-radius:10px;background:var(--cream-2);background-size:cover;background-position:center;}
.sropp__noimg{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:4px;border:1px dashed var(--line);border-radius:8px;}
.sropp__fields{display:grid;gap:8px;min-width:0;}
.sropp__title{font-weight:700;}
.sropp__fields input,.sropp__fields textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:.55em .7em;font:inherit;background:var(--surface);}
.sropp__btns{display:flex;flex-direction:column;gap:6px;}
@media(max-width:640px){.sropp{grid-template-columns:1fr;}.sropp__img{max-width:200px;}}

/* ===== Quick-fill (paste an email) ===== */
.quickfill{border:1px dashed color-mix(in srgb,var(--cyan) 55%,var(--line));border-radius:12px;padding:12px 14px;margin-bottom:18px;background:color-mix(in srgb,var(--cyan) 5%,var(--surface));}
.quickfill summary{cursor:pointer;font-weight:700;color:var(--cyan-deep);list-style:none;}
.quickfill summary::-webkit-details-marker{display:none;}
.quickfill[open] summary{margin-bottom:4px;}
.quickfill textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:.6em .7em;font:inherit;resize:vertical;background:var(--surface);}
.qf-msg{margin-top:8px;font-size:.82rem;color:var(--cyan-deep);font-weight:600;min-height:1em;}

/* ===== Submissions spreadsheet ===== */
.print-only{display:none;}
.sheet__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.sheet__filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sheet__filters input[type=search]{width:auto;min-width:200px;padding:.5em .8em;border:1px solid var(--line);border-radius:9px;font:inherit;background:var(--surface);}
.sheet__date{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);font-weight:600;}
.sheet__date input{padding:.4em .5em;border:1px solid var(--line);border-radius:8px;font:inherit;}
.sheet__scroll{overflow-x:auto;}
.ssheet{width:100%;border-collapse:collapse;font-size:.85rem;}
.ssheet th,.ssheet td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.ssheet thead th{position:sticky;top:0;background:var(--cream);z-index:1;font-weight:700;color:var(--ink);white-space:nowrap;border-bottom:2px solid var(--cream-2);}
.ssheet th.sortable{cursor:pointer;user-select:none;}
.ssheet th.sortable:hover{color:var(--cyan-deep);}
.ssheet th.sortable::after{content:"\2195";opacity:.3;margin-left:6px;font-size:.85em;}
.ssheet th.sort-asc::after{content:"\2191";opacity:.9;}
.ssheet th.sort-desc::after{content:"\2193";opacity:.9;}
.ssheet tbody tr:hover{background:color-mix(in srgb,var(--cyan) 5%,var(--surface));}
.ssheet tr.is-unread{background:color-mix(in srgb,var(--cyan) 7%,var(--surface));}
.ssheet td{max-width:340px;overflow-wrap:anywhere;}
/* anywhere is right for the columns that hold email addresses and URLs —
   without it one unbreakable string drags the table twice as wide. It is
   wrong for the name column: it tells the layout engine a single character
   is an acceptable width, so on a phone the first column crushed to 73px
   and shredded surnames mid-word. The name keeps whole words as its floor;
   everything else keeps the old behaviour. */
.ssheet td:first-child{overflow-wrap:break-word;}
.ssheet__when{white-space:nowrap;}

/* ===== Print / Save as PDF ===== */
@media print{
  /* Paper is paper. Whatever the screen theme is, a printed roster is black
     on white - so neutralise the dark tokens for the duration of the print. */
  html.dark{--surface:#fff;--surface-2:#fff;--page:#fff;--ink:#000;--ink-2:#222;--muted:#444;--line:#bbb;--sunk:rgba(0,0,0,.04);}

  @page{margin:14mm;}
  .abar,.no-print,.ph,.toolbar,.sheet__bar{display:none !important;}
  body{background:var(--surface);}
  .wrap{max-width:none;padding:0;margin:0;}
  .panel{box-shadow:none;border:none;}
  .panel__b{padding:0;}
  .print-only{display:block;}
  .print-head{margin-bottom:10px;font-size:11pt;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid #333;padding-bottom:6px;}
  .sheet__scroll{overflow:visible;}
  .ssheet{font-size:8.5pt;}
  .ssheet th,.ssheet td{padding:4px 6px;border-bottom:1px solid #ccc;}
  .ssheet thead th{position:static;background:var(--page);color:var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .ssheet td{max-width:none;}
  .ssheet tr{break-inside:avoid;}
  .new-dot{display:none;}
}

/* ===== Dashboard v2 ===== */
.dash__lbl{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px 2px;}
.alertbar{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--cyan) 10%,var(--surface));border:1.5px solid color-mix(in srgb,var(--cyan) 40%,var(--line));border-radius:14px;padding:12px 16px;margin-bottom:22px;color:var(--ink);font-size:.92rem;transition:border-color .2s,box-shadow .2s;}
.alertbar:hover{border-color:var(--cyan);box-shadow:var(--sh);}
.alertbar__dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex-shrink:0;animation:pulse 2s ease infinite;}
@keyframes pulse{50%{opacity:.45;}}
.alertbar__go{margin-left:auto;font-weight:700;color:var(--cyan-deep);white-space:nowrap;}
/* grid-auto-rows:1fr so one card whose title wraps cannot leave the row it is
   in taller than its neighbour. Without it these measured 104/104/68/68 and the
   first thing on the dashboard read as two mismatched pairs. */
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:1fr;gap:12px;margin-bottom:26px;}
.qa__it{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);padding:14px 16px;box-shadow:var(--sh);color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s;}
.qa__it:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 6px 22px rgba(13,37,65,.11);}
.qa__ic{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--cyan) 11%,var(--surface));color:var(--cyan-deep);}
.qa__ic svg{width:20px;height:20px;}
.qa__it strong{display:block;font-size:.9rem;line-height:1.2;}
.qa__it small{display:block;color:var(--muted);font-size:.76rem;margin-top:2px;}
.stat--link{display:block;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s;}
.stat--link:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 6px 22px rgba(13,37,65,.11);}
.stat--hot{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 6%,var(--surface));}
.stat--hot .n{color:var(--cyan-deep);}
.dash2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start;}
@media(max-width:980px){.dash2{grid-template-columns:minmax(0,1fr);}}
/* One column when the account cannot see the left-hand one — an empty 1.4fr
   slot beside a lone panel reads as something failed to load. */
.dash2--one{grid-template-columns:minmax(0,1fr);}
.dash2>*{min-width:0;}                 /* let columns shrink instead of pushing the page wide */
.dash2 .panel__b{overflow-x:auto;}     /* wide tables scroll inside the panel, never off-screen */
.bars--mini{height:90px;padding-top:0;}
tr.is-unread td{background:color-mix(in srgb,var(--cyan) 6%,var(--surface));}

/* ===== Sidebar badge ===== */
.adm__badge{margin-left:auto;background:var(--cyan);color:#fff;font-size:.66rem;font-weight:800;min-width:20px;text-align:center;padding:2px 6px;border-radius:100px;line-height:1.4;}
.adm__item.on .adm__badge{background:var(--surface);color:var(--cyan-deep);}

/* ===== General polish ===== */
code{background:var(--cream-2);padding:2px 7px;border-radius:6px;font-size:.85em;color:var(--ink);}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
input:focus,textarea:focus,select:focus{outline:none;}
.btn:active{transform:translateY(0);}
.panel__h h2{letter-spacing:-.01em;}
table tbody tr:hover td,table tr:hover td{background:color-mix(in srgb,var(--navy) 2.5%,transparent);}
.panel table a{font-weight:600;}
.panel .btn{white-space:nowrap;}
/* ---- Instant tooltips ----------------------------------------------------
   The browser's own title tooltip waits ~1s and can't be styled. Any element
   with data-tip gets this pill instead, shown immediately on hover or focus.
   It lives in a fixed-position node on <body>, so a panel's overflow:hidden
   can never clip it (which a CSS ::after tooltip would hit on the top row). */
.admtip{position:fixed;top:0;left:0;z-index:9999;background:#0d2541;color:#fff;
  font:600 .74rem/1 Montserrat,system-ui,sans-serif;letter-spacing:.01em;
  padding:7px 11px;border-radius:100px;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .07s ease,transform .07s ease;
  box-shadow:0 4px 14px rgba(8,20,36,.3);}
.admtip.is-on{opacity:1;visibility:visible;transform:none;}
@media(prefers-reduced-motion:reduce){.admtip{transition:none;}}

/* Notes are sentences, not rows. `display:flex` turned every <strong>, <code> and
   bare text node inside a note into its own column, so the message read across
   three uneven blocks instead of flowing as one paragraph. */
.note{display:block;line-height:1.5;}
.note strong{margin-right:.3em;}
.note code{white-space:nowrap;}
/* Column headings should not fold into three lines while you scroll past them. */
@media (max-width:820px){
  .panel__b{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .panel__b > table:has(th:nth-child(5)) th{white-space:nowrap;}
}

@media(max-width:640px){
  .wrap{padding-inline:14px;}
  .panel__h{padding:13px 15px;}
  .panel__b{padding:14px 15px;overflow-x:auto;}
  th,td{padding:9px 8px;font-size:.86rem;}
  .ph h1{font-size:1.55rem;}
  .cards{grid-template-columns:1fr 1fr;gap:10px;}
  .stat{padding:14px 15px;}
  .stat .n{font-size:1.6rem;}
}

/* ===== Shared additions (polish pass) ===== */
/* Amber "heads-up" note — pairs with .note.ok / .note.err */
.note.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);}
/* One responsive 2-up stat/panel grid (replaces per-page .statgrid2 copies) */
.statgrid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
@media(max-width:900px){.statgrid2{grid-template-columns:1fr;}}
/* Form field pair that collapses on small phones */
.frm2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.frm2{grid-template-columns:1fr;}}
/* Reversed variant of .ev-cols (wider left column) — still collapses on mobile */
.ev-cols--rev{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}
@media(max-width:860px){.ev-cols--rev{grid-template-columns:1fr;}}
/* Green "send" button (announcements, campaigns) */
.btn--send{background:#1d7a46;justify-content:center;}
.btn--send:hover{background:#176a3c;}
/* Section sub-header (used under a page's main .ph, e.g. the Pages editor) */
.subhead{margin:34px 0 14px;}
.subhead h2{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink);font-size:1.4rem;letter-spacing:-.01em;line-height:1.2;}
.subhead h2 .tail{font-style:normal;font-family:var(--f);font-size:.76rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:4px;}
.subhead p{color:var(--muted);margin-top:4px;font-size:.9rem;}
/* Page cards (Pages editor) — promoted from a page-level <style> to shared */
.pagecard{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s;}
.pagecard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(13,37,65,.12);border-color:var(--cyan);}
.pagecard__name{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink);}
.pagecard__links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.pagecard__links a{font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan-deep);text-decoration:none;}
.pagecard__links a:hover{text-decoration:underline;}
.pagecard__edit{color:#fff !important;background:var(--cyan);padding:.4em .8em;border-radius:100px;}
.pagegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px;}
/* Sub-tabs for merged screens (Media, Serve Roanoke, CLC, Campaigns) */
.admtabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:4px;margin:-6px 0 24px;box-shadow:var(--sh);}
.admtabs .admtab{padding:.5em 1.15em;border-radius:100px;font-weight:600;font-size:.86rem;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s;}
.admtabs .admtab:hover{color:var(--ink);}
.admtabs .admtab.on{background:var(--navy);color:#fff;}

/* =========================================================================
   WORKSPACE — projects, documents, calendar
   -------------------------------------------------------------------------
   Three ideas do most of the work here, borrowed from what makes Notion and
   Nimbus feel considered rather than flat:

   1. A radius SCALE, where outer ≈ inner + padding. A panel (16) holds a card
      (12) holds a chip (8) holds a cell (4). Nesting reads as depth.
   2. One color recipe for every tinted thing: fill 14%, border 26%, and text
      mixed 75% toward the ink rather than the raw hue — so an arbitrary color
      stays legible instead of glowing.
   3. Two shadows only. Cards rest on --e1 and rise to --e2 on hover; that
      change of ELEVATION, not color, is what makes them feel physical.
   ========================================================================= */
:root{
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  /* a third text level — labels and meta, quieter than --muted */
  --muted-2:#8794a3;
  /* recessed surface: wells, column backgrounds, day cells */
  --sunk:rgba(13,37,65,.045);
  /* shadows are navy-tinted, never neutral grey — that's what reads as shadow */
  --e1:0 1px 2px rgba(13,37,65,.06),0 4px 16px -8px rgba(13,37,65,.10);
  --e2:0 16px 44px -12px rgba(13,37,65,.26),0 2px 8px rgba(13,37,65,.10);
  --e3:0 20px 40px -12px rgba(13,37,65,.34);
  --spring:320ms cubic-bezier(.22,1.14,.36,1);
  --swift:160ms cubic-bezier(.3,.7,.4,1);
}

/* Everything you can press gives a little. 80ms down, 320ms spring back —
   the asymmetry is what makes it feel physical rather than animated. */
.btn,.pjcardt,.pjcard,.dccard,.calchip,.pjseg__b,.pjscope__b,.lgtab,.inperson,
.inchip,.pjmini,.dcmenu__i,.dcpick__i,.thment__i,.pjmulti__o,.dctree__a{
  transition:transform 300ms var(--spring),background var(--swift),color var(--swift),
             border-color var(--swift),box-shadow var(--swift);
}
.btn:active,.pjcardt:active,.pjcard:active,.dccard:active,.calchip:active,
.pjseg__b:active,.pjscope__b:active,.lgtab:active,.inperson:active,.inchip:active,
.pjmini:active{transform:scale(.96);transition-duration:80ms;}

/* ---------------------------------------------------------------- shared bits */
.wsbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
/* A quiet segmented switch — the Notion "All docs / Table" pattern. */
.pjseg,.pjscope{display:inline-flex;gap:2px;background:var(--sunk);padding:3px;border-radius:var(--r-pill,999px);border-radius:999px;}
.pjseg__b,.pjscope__b{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);
  padding:5px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;}
.pjseg__b:not(.on):hover,.pjscope__b:not(.on):hover{color:var(--ink);background:rgba(255,255,255,.7);}
.pjseg__b.on,.pjscope__b.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(13,37,65,.16);}
.pjav__row{display:inline-flex;align-items:center;}
.pjav{width:22px;height:22px;border-radius:50%;background:var(--c,#7c8ea3);color:#fff;
  font-size:9.5px;font-weight:700;letter-spacing:.02em;display:grid;place-items:center;
  border:2px solid var(--surface);flex:none;font-variant-numeric:tabular-nums;}
.pjav+.pjav{margin-left:-6px;}
.pjav--more{background:#8794a3;}

/* ---------------------------------------------------------------- hub */
.pjempty,.dcempty{text-align:center;padding:44px 24px;}
.pjempty h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.7rem;color:var(--ink);}
.pjempty p{max-width:48ch;margin:10px auto 22px;color:var(--muted);}
.pjnew,.dcnewform{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.pjnew input{max-width:280px;}
.pjbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.pjbar .muted{font-size:13px;font-variant-numeric:tabular-nums;}

.pjbuckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin-bottom:26px;}
.pjb{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 17px;box-shadow:var(--e1);}
.pjb__h{display:flex;align-items:center;gap:8px;}
.pjb__h h2{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0;}
.pjb__n{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--sunk);
  padding:1px 8px;border-radius:999px;font-variant-numeric:tabular-nums;}
.pjb__hint{font-size:12px;color:var(--muted-2);margin:5px 0 0;}
.pjb__more{font-size:12px;margin:9px 0 0;}
.pjb--overdue{border-color:color-mix(in srgb,#c2391b 26%,var(--line));}
.pjb--overdue .pjb__h h2{color:color-mix(in srgb,var(--bad) 75%,var(--ink));}
.pjb--overdue .pjb__n{background:color-mix(in srgb,#c2391b 14%,transparent);color:color-mix(in srgb,var(--bad) 75%,var(--ink));}
.pjb--clear{grid-column:1/-1;text-align:center;padding:34px;}
.pjb--clear h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.4rem;
  color:var(--ink);text-transform:none;letter-spacing:0;}
.pjlist{list-style:none;margin:11px 0 0;padding:0;}
.pjlist li+li{border-top:1px solid var(--line);}
.pjlist a{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:13.5px;color:inherit;flex-wrap:wrap;
  transition:padding-left var(--swift);}
.pjlist a:hover{padding-left:4px;}
.pjlist a:hover .pjlist__t{color:var(--cyan-deep);}
.pjlist__pri{width:6px;height:6px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--ink) 22%,var(--surface));}
.pjlist__pri.pri--low{background:#5b9bd5;}.pjlist__pri.pri--medium{background:#d9a441;}
.pjlist__pri.pri--high{background:#e07b39;}.pjlist__pri.pri--urgent{background:#d1495b;}
.pjlist__t{font-weight:550;flex:1;min-width:120px;}
.pjlist__proj{font-size:11px;font-weight:600;color:var(--muted);background:var(--sunk);padding:1px 8px;border-radius:999px;}
.pjlist__st{font-size:11px;font-weight:650;padding:1px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 26%,transparent);
  color:color-mix(in srgb,var(--c) 75%,var(--ink));}
.pjlist__due{font-size:12px;color:var(--muted-2);font-weight:600;font-variant-numeric:tabular-nums;}
.pjlist__due.is-late{color:color-mix(in srgb,var(--bad) 78%,var(--ink));}

/* project cards */
.pjgrid,.dcrecent{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px;}
.pjcard,.dccard{display:flex;flex-direction:column;gap:7px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);color:inherit;box-shadow:var(--e1);}
.pjcard:hover,.dccard:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:color-mix(in srgb,var(--c,var(--cyan)) 40%,var(--line));}
.pjcard__ic{width:34px;height:34px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#0b8fb0) 13%,var(--surface));color:color-mix(in srgb,var(--c,#0b8fb0) 78%,var(--ink));}
.pjcard__ic svg{width:18px;height:18px;}
.pjcard strong,.dccard strong{font-size:14.5px;font-weight:650;line-height:1.3;}
.pjcard__n{font-size:12px;color:var(--muted-2);font-variant-numeric:tabular-nums;}
.pjcard__bar{height:3px;border-radius:999px;background:var(--sunk);overflow:hidden;}
.pjcard__bar span{display:block;height:100%;border-radius:999px;background:var(--c,#0b8fb0);}
.pjcard--new{border-style:dashed;box-shadow:none;justify-content:center;}
.pjcard--new:hover{transform:none;box-shadow:none;border-color:var(--cyan);}
.pjcard--new .pjcard__ic{background:var(--sunk);color:var(--muted);font-size:1.1rem;font-weight:600;}
.pjcard--new input{font-size:13px;padding:.45em .6em;}

/* ---------------------------------------------------------------- board head */
.pjhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.pjhead__l{display:flex;align-items:center;gap:13px;}
.pjhead__ic{width:44px;height:44px;flex:none;border-radius:var(--r-lg);display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#0b8fb0) 13%,var(--surface));color:color-mix(in srgb,var(--c,#0b8fb0) 78%,var(--ink));}
.pjhead__ic svg{width:22px;height:22px;}
.pjhead p{margin:3px 0 0;font-size:13px;color:var(--muted);}
.pjtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.pjtool{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);}
.pjtools select,.pjtools input[type=search]{width:auto;font-size:13px;padding:6px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);}
.pjtools input[type=search]{min-width:180px;}
.pjchk{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;}
.pjchk input{margin:0;accent-color:var(--cyan);}

/* ---------------------------------------------------------------- kanban */
.pjboard{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:16px;}
.pjcol{flex:0 0 282px;border-radius:var(--r-lg);display:flex;flex-direction:column;
  /* the column is a barely-there well, tinted by its own status color */
  background:color-mix(in srgb,var(--c,#7c8ea3) 9%,var(--sunk));
  border:1px solid color-mix(in srgb,var(--c,#7c8ea3) 24%,var(--line));
  transition:background var(--swift),border-color var(--swift);}
.pjcol.is-over{background:color-mix(in srgb,var(--cyan) 9%,var(--surface));border-color:color-mix(in srgb,var(--cyan) 45%,transparent);}
.pjcol__h{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;}
.pjcol__dot{width:9px;height:9px;border-radius:50%;background:var(--c,#7c8ea3);flex:none;}
/* the title stays ink — the color is carried by the dot, tint and border */
.pjcol__l{font-size:13.5px;font-weight:700;color:var(--ink);flex:1;min-width:0;}
.pjcol__n{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;}
.pjcol__edit{border:0;background:none;color:var(--muted-2);font-size:1rem;line-height:1;cursor:pointer;
  padding:2px 5px;border-radius:var(--r-sm);opacity:0;transition:opacity var(--swift),background var(--swift);}
.pjcol:hover .pjcol__edit,.pjcol__edit:focus-visible{opacity:1;}
.pjcol__edit:hover{background:rgba(255,255,255,.8);color:var(--ink);}
.pjcol__list{padding:2px 9px 9px;display:flex;flex-direction:column;gap:7px;min-height:36px;}
.pjcol__empty{font-size:12px;color:var(--muted-2);text-align:center;padding:12px 0;margin:0;}
.pjcol__add{margin:0 9px 9px;border:1.5px dashed color-mix(in srgb,var(--c,#7c8ea3) 30%,var(--line));
  background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);padding:8px;
  border-radius:var(--r-md);cursor:pointer;transition:border-color var(--swift),color var(--swift),background var(--swift);}
.pjcol__add:hover{border-color:var(--cyan);color:var(--cyan-deep);background:color-mix(in srgb,var(--cyan) 5%,transparent);}

.pjcardt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;
  cursor:pointer;box-shadow:var(--e1);}
.pjcardt:hover{transform:translateY(-3px);box-shadow:var(--e2);}
.pjcardt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.pjcardt.is-dragging{opacity:.4;transform:rotate(2.5deg) scale(1.02);box-shadow:var(--e3);}
.pjcardt.is-done{background:var(--snow);}
.pjcardt.is-done .pjcardt__t{color:var(--muted-2);text-decoration:line-through;text-decoration-thickness:1px;}
.pjcardt__par{font-size:11px;color:var(--muted-2);font-weight:600;display:block;margin-bottom:4px;}
.pjcardt__t{font-size:14px;font-weight:550;line-height:1.35;margin:0;}
.pjcardt__m{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center;}
.pjcardt__m:empty{margin-top:0;}
.pjcardt .pjav__row{margin-top:9px;display:flex;}
/* one recipe for every tinted chip */
.pjtag,.pjpri,.pjdue,.pjsub{font-size:11px;font-weight:650;padding:2px 8px;border-radius:var(--r-sm);
  letter-spacing:.01em;white-space:nowrap;}
.pjtag{background:var(--sunk);color:var(--muted);}
.pjtag--src{background:color-mix(in srgb,var(--cyan) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent);color:color-mix(in srgb,var(--cyan) 75%,var(--ink));}
.pjpri{background:color-mix(in srgb,var(--p) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--p) 26%,transparent);color:color-mix(in srgb,var(--p) 75%,var(--ink));}
.pjpri.pri--low{--p:#5b9bd5;}.pjpri.pri--medium{--p:#d9a441;}
.pjpri.pri--high{--p:#e07b39;}.pjpri.pri--urgent{--p:#d1495b;}
.pjdue{background:var(--sunk);color:var(--muted);font-variant-numeric:tabular-nums;}
.pjdue.is-late{background:color-mix(in srgb,#c2391b 13%,transparent);
  border:1px solid color-mix(in srgb,#c2391b 26%,transparent);color:color-mix(in srgb,var(--bad) 78%,var(--ink));}
.pjsub{background:transparent;border:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums;}
.pjsub.all-done{background:color-mix(in srgb,#3f9e6a 13%,transparent);
  border-color:color-mix(in srgb,#3f9e6a 30%,transparent);color:color-mix(in srgb,#3f9e6a 72%,var(--ink));}
.pjmark{height:2.5px;border-radius:4px;background:var(--cyan);margin:1px 0;}
.pjhint{flex:0 0 248px;font-size:12.5px;color:var(--muted);line-height:1.55;padding:13px;
  border:1.5px dashed var(--line);border-radius:var(--r-lg);}

/* ---------------------------------------------------------------- table */
.pjtablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--e1);padding:4px 6px 12px;}
.pjtable{width:100%;border-collapse:collapse;font-size:14px;}
.pjtable th{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
.pjtable td{padding:5px 12px;border-bottom:1px solid var(--line);vertical-align:middle;}
.pjtable tbody tr{transition:background var(--swift);}
.pjtable tbody tr:hover{background:var(--sunk);}
.pjtable tr:last-child td{border-bottom:0;}
.pjtable tr.is-done .pjtable__title{color:var(--muted-2);text-decoration:line-through;}
.pjtable tr.is-sub .pjtable__t{padding-left:26px;}
.pjtable__arrow{color:var(--muted-2);margin-right:5px;}
.pjtable__t{display:flex;align-items:center;min-width:230px;}
/* Invisible at rest so a long table reads as text; inflates into a field on focus. */
.pjtable__title{border:0;background:none;padding:5px 0;font:inherit;font-weight:550;width:100%;border-radius:var(--r-xs);}
.pjtable__title:focus{outline:none;padding:5px 7px;background:var(--surface);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 40%,transparent);}
.pjtable select,.pjtable input[type=date]{border:0;background:none;padding:4px 6px;font:inherit;font-size:13px;
  width:auto;min-width:110px;border-radius:var(--r-xs);color:var(--ink);}
.pjtable select:hover,.pjtable input[type=date]:hover{background:var(--sunk);}
.pjtable select:focus,.pjtable input[type=date]:focus{outline:none;background:var(--surface);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 40%,transparent);}
.pjtable input[type=date].is-late{color:color-mix(in srgb,var(--bad) 80%,var(--ink));}
.pjmini{border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  padding:4px 8px;border-radius:var(--r-sm);cursor:pointer;display:inline-flex;align-items:center;gap:5px;opacity:.75;}
.pjtable tr:hover .pjmini{opacity:1;}
.pjmini:hover{background:var(--sunk);color:var(--cyan-deep);}
.pjnone{background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:52px 24px;text-align:center;}
.pjnone h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.5rem;color:var(--ink);}
.pjnone p{max-width:50ch;margin:10px auto 0;color:var(--muted);}

/* ---------------------------------------------------------------- side panel */
.pjscrim{position:fixed;inset:0;background:rgba(8,20,36,.32);z-index:80;}
.pjpanel{position:fixed;top:10px;right:10px;bottom:10px;width:min(452px,calc(100vw - 20px));z-index:81;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e2);
  overflow-y:auto;display:flex;flex-direction:column;}
.pjpanel.is-in{animation:pjPanelIn 420ms cubic-bezier(.22,1.14,.36,1) both;}
@keyframes pjPanelIn{
  0%{transform:translateX(44px) scale(.96);opacity:0;border-radius:32px;}
  100%{transform:none;opacity:1;border-radius:var(--r-xl);}
}
.pjpanel__h{display:flex;justify-content:flex-end;padding:12px 14px 0;}
.pjpanel__x{border:0;background:none;font-size:1.5rem;line-height:1;color:var(--muted-2);cursor:pointer;
  padding:2px 8px;border-radius:var(--r-sm);}
.pjpanel__x:hover{background:var(--sunk);color:var(--ink);}
.pjpanel__title{border:0;background:none;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.65rem;line-height:1.2;color:var(--ink);padding:0;margin:2px 24px 14px;
  width:calc(100% - 48px);resize:none;overflow:hidden;}
.pjpanel__title:focus{outline:none;}
.pjpanel__b{padding:0 24px 20px;flex:1;}
.pjpanel__f{padding:16px 24px 24px;border-top:1px solid var(--line);}
/* a fixed label column so every value in the panel starts on the same x */
.pjrow{display:grid;grid-template-columns:106px 1fr;align-items:center;gap:10px;margin-bottom:11px;}
.pjrow--tall{align-items:start;}
.pjrow--tall .pjrow__l{padding-top:6px;}
.pjrow__l{font-size:13px;font-weight:600;color:var(--muted-2);}
.pjrow__v select,.pjrow__v input[type=date]{width:100%;font-size:13.5px;padding:7px 9px;border-radius:var(--r-sm);}
.pjwho,.pjtags,.pjmulti{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.pjchip{display:inline-flex;align-items:center;gap:5px;background:var(--sunk);border-radius:999px;
  padding:2px 4px 2px 2px;font-size:12.5px;font-weight:600;}
.pjchip .pjav{width:20px;height:20px;font-size:9px;border-width:0;}
.pjchip__x{border:0;background:none;color:var(--muted-2);font-size:1rem;line-height:1;cursor:pointer;padding:0 3px;}
.pjchip__x:hover{color:var(--bad);}
.pjwho__add,.pjtags__in{width:auto!important;padding:4px 10px!important;font-size:12.5px!important;border-radius:999px;}
.pjtags__in{width:86px!important;}
.pjtag--edit{display:inline-flex;align-items:center;gap:2px;padding-right:3px;}
.pjmulti__o{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;font-size:12.5px;font-weight:600;cursor:pointer;}
.pjmulti__o input{margin:0;}
.pjmulti__o:has(input:checked){border-color:color-mix(in srgb,var(--cyan) 40%,transparent);
  background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--cyan-deep);}
.pjnotes{width:100%;min-height:104px;padding:9px 11px;font-size:13.5px;line-height:1.6;
  resize:vertical;border-radius:var(--r-sm);}
.pjsubs{display:flex;flex-direction:column;gap:4px;}
.pjsubs__r{display:flex;align-items:center;gap:8px;}
.pjsubs__r input[type=checkbox]{margin:0;flex:none;width:16px;height:16px;accent-color:var(--cyan);}
.pjsubs__t{flex:1;border:0;background:none;padding:4px 6px;font:inherit;font-size:13.5px;
  border-radius:var(--r-xs);width:auto;}
.pjsubs__t:hover{background:var(--sunk);}
.pjsubs__t:focus{outline:none;background:var(--surface);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 40%,transparent);}
.pjsubs__t.is-done{color:var(--muted-2);text-decoration:line-through;}
.pjsubs__x{border:0;background:none;color:transparent;font-size:1rem;line-height:1;cursor:pointer;padding:0 4px;flex:none;}
.pjsubs__r:hover .pjsubs__x,.pjsubs__x:focus-visible{color:var(--muted-2);}
.pjsubs__x:hover{color:var(--bad);}
.pjsubs__add{width:100%;padding:6px 9px!important;font-size:13px!important;border-style:dashed!important;border-radius:var(--r-sm);}
.pjrepeat{display:flex;flex-direction:column;gap:6px;}
.pjrepeat select,.pjrepeat input{width:100%;font-size:13.5px;padding:7px 9px;border-radius:var(--r-sm);}
.pjrepeat__n{font-size:12px;color:var(--muted-2);}
.pjthread{padding:18px 24px 24px;border-top:1px solid var(--line);}
.pjthread__h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;}

/* ---------------------------------------------------------------- modal */
.pjmodal{position:fixed;inset:0;background:rgba(8,20,36,.38);z-index:90;display:grid;place-items:center;padding:20px;}
.pjmodal__c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;
  max-width:580px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:var(--e2);
  animation:pjPop 300ms cubic-bezier(.22,1.14,.36,1) both;}
@keyframes pjPop{0%{transform:scale(.95) translateY(8px);opacity:0;}100%{transform:none;opacity:1;}}
.pjmodal__c h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.5rem;color:var(--ink);margin:0 0 6px;}
.pjmodal__c>p{margin:0 0 18px;font-size:13.5px;color:var(--muted);}
.pjmodal__f{display:flex;gap:8px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap;}
.pjmodal__f .btn:first-child{margin-right:auto;}
.pjmodal__more{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.pjcols{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.pjcols__r,.pjfield{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pjcols__r input[type=color]{width:36px;height:32px;flex:none;padding:2px;}
.pjcols__l{flex:1;min-width:130px;padding:7px 10px!important;font-size:13.5px!important;border-radius:var(--r-sm);}
.pjcols__d{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);flex:none;}
.pjcols__d input{margin:0;accent-color:var(--cyan);}
.pjcols__b{border:1px solid var(--line);background:var(--surface);color:var(--muted);width:30px;height:30px;
  border-radius:var(--r-sm);cursor:pointer;flex:none;font-size:.85rem;line-height:1;}
.pjcols__b:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan-deep);}
.pjcols__b:disabled{opacity:.3;cursor:default;}
/* Second line of a column row: whether landing here emails the requester,
   and the sentence their tracking page shows while it sits in this column. */
.pjcols__say{flex:1 0 100%;display:flex;align-items:center;gap:10px;padding-left:44px;margin-top:2px;}
.pjcols__say input[type=text]{flex:1;min-width:120px;padding:6px 9px!important;font-size:12.5px!important;
  border-radius:var(--r-sm);}
.pjcols__say input[type=text]:disabled{opacity:.45;cursor:not-allowed;}
.pjcols__say .pjcols__d{flex:none;}
@media (max-width:560px){.pjcols__say{padding-left:0;}}
.pjcols__b--x:hover:not(:disabled){border-color:color-mix(in srgb,#c2391b 40%,transparent);color:var(--bad);}
.pjfield select{width:auto;min-width:126px;font-size:13px;padding:7px 9px;border-radius:var(--r-sm);}
.pjtpl{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px;background:var(--snow);}
.pjtpl input,.pjtpl textarea{width:100%;font-size:13.5px;padding:7px 9px;border-radius:var(--r-sm);}
.pjtpl .btn{align-self:flex-start;}
.pjicons{display:flex;flex-wrap:wrap;gap:6px;}
.pjicons__b{width:38px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  cursor:pointer;font-size:11px;font-weight:700;color:var(--muted-2);text-transform:uppercase;}
.pjicons__b:hover{border-color:var(--cyan);color:var(--cyan-deep);}
.pjicons__b.on{border-color:var(--cyan);color:var(--cyan-deep);background:color-mix(in srgb,var(--cyan) 12%,var(--surface));}

/* ---------------------------------------------------------------- toast */
.pjtoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--navy);color:#fff;
  padding:11px 20px;border-radius:999px;font-size:13.5px;font-weight:600;z-index:120;
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;box-shadow:var(--e2);
  max-width:90vw;text-align:center;}
.pjtoast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);}
.pjtoast.is-err{background:#8f2740;}

/* ---------------------------------------------------------------- documents */
.dcbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:22px;}
.dcsearch{display:flex;gap:8px;align-items:center;flex:1;min-width:240px;}
.dcsearch input{flex:1;max-width:400px;border-radius:var(--r-sm);}
.dcnewform input{width:auto;min-width:190px;border-radius:var(--r-sm);}
.dccard__ic{font-size:1.35rem;line-height:1;}
.dccard__x{font-size:12px;color:var(--muted-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dchits{list-style:none;margin:0;padding:0;}
.dchits li+li{border-top:1px solid var(--line);}
.dchits a{display:block;padding:13px 0;color:inherit;}
.dchits a:hover strong{color:var(--cyan-deep);}
.dchits strong{font-size:14.5px;font-weight:650;}
.dchits__in{font-size:11.5px;color:var(--muted-2);margin-left:9px;}
.dchits__x{display:block;font-size:13px;color:var(--muted);margin-top:4px;}
/* page tree */
.dctree{list-style:none;margin:0;padding:0;}
.dctree--sub{margin-left:14px;padding-left:9px;border-left:1px solid var(--line);}
.dctree__a{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:var(--r-sm);
  color:var(--muted);font-size:13.5px;font-weight:550;}
.dctree__a:hover{background:var(--sunk);color:var(--ink);}
.dctree__a.is-on{background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--cyan-deep);font-weight:650;}
.dctree__ic{flex:none;font-size:14px;line-height:1;}
.dctree__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* editor shell */
.dcwrap{display:flex;align-items:flex-start;}
.dcside{display:none;flex:0 0 232px;position:sticky;top:14px;max-height:calc(100vh - 40px);overflow-y:auto;
  padding-right:18px;margin-right:22px;border-right:1px solid var(--line);}
body.dc-side-open .dcside{display:block;}
.dcside__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.dcside__all{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);}
.dcside__x{border:0;background:none;font-size:1.3rem;line-height:1;color:var(--muted-2);cursor:pointer;}
.dcside__new{margin-top:14px;}
.dcside__new input{font-size:13px;padding:7px 9px;border-style:dashed;border-radius:var(--r-sm);}
.dcside__toggle{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);width:32px;height:32px;
  cursor:pointer;color:var(--muted);flex:none;}
.dcside__toggle:hover{border-color:var(--cyan);color:var(--cyan-deep);}
body.dc-side-open .dcside__toggle{display:none;}
.dcmain{flex:1;min-width:0;}
.dchead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:20px;}
.dccrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-2);font-weight:600;}
.dccrumb a{color:var(--muted-2);}
.dccrumb a:hover{color:var(--cyan-deep);}
.dcsaved{font-size:11.5px;color:var(--muted-2);font-weight:600;min-width:56px;}
.dchead__acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
/* the writing column: narrow, generously padded, with room to breathe below */
.dcpage{max-width:760px;margin:0 auto;padding:0 20px 26vh;}
.dctitlerow{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.dcicon{border:0;background:none;font-size:2.3rem;line-height:1;cursor:pointer;padding:2px;
  border-radius:var(--r-sm);flex:none;}
.dcicon:hover{background:var(--sunk);}
.dctitle{font-family:var(--serif);font-style:italic;font-weight:400;font-size:2.5rem;line-height:1.12;
  color:var(--ink);outline:none;flex:1;min-width:0;letter-spacing:-.01em;}
.dctitle:empty::before,.dced:empty::before,.dcimg figcaption:empty::before{content:attr(data-ph);color:var(--muted-2);pointer-events:none;}
.dctitle:focus,.dced:focus{outline:none;}
/* blocks */
.dcblocks{display:flex;flex-direction:column;}
.dcrow{position:relative;display:flex;align-items:flex-start;gap:2px;border-radius:var(--r-sm);margin:1px 0;
  padding-left:calc(var(--ind,0) * 26px);}
.dcrow.is-over::before{content:'';position:absolute;left:44px;right:0;top:-2px;height:2.5px;background:var(--cyan);border-radius:4px;}
.dcrow.is-drag{opacity:.35;}
/* the gutter controls pin to the FIRST line of a multi-line block */
.dchandle,.dcadd{width:22px;flex:none;align-self:flex-start;max-height:26px;margin-top:4px;
  display:grid;place-items:center;border:0;background:none;color:var(--muted-2);font-size:13px;
  opacity:0;cursor:grab;border-radius:var(--r-sm);transition:opacity var(--swift),background var(--swift);}
.dcadd{cursor:pointer;font-size:16px;}
.dcrow:hover .dchandle,.dcrow:hover .dcadd,.dcrow.is-focus .dchandle,.dcrow.is-focus .dcadd,
.dchandle:focus-visible,.dcadd:focus-visible{opacity:1;}
.dchandle:hover,.dcadd:hover{background:var(--sunk);color:var(--ink);}
.dchandle:active{cursor:grabbing;}
.dcbody{flex:1;min-width:0;display:flex;align-items:flex-start;gap:8px;padding:3px 6px;border-radius:var(--r-sm);}
.dced{flex:1;min-width:0;outline:none;line-height:1.6;word-break:break-word;font-size:15px;}
/* space above a heading grows with the heading */
.dcrow--h1 .dced{font-size:1.65rem;font-weight:700;line-height:1.25;margin-top:16px;letter-spacing:-.01em;}
.dcrow--h2 .dced{font-size:1.3rem;font-weight:650;line-height:1.3;margin-top:11px;}
.dcrow--h3 .dced{font-size:1.08rem;font-weight:650;line-height:1.35;margin-top:7px;}
.dcrow--quote .dcbody{border-left:3px solid var(--cyan);padding-left:13px;margin:3px 0;}
.dcrow--quote .dced{color:var(--muted);font-style:italic;}
.dcrow--code .dcbody{background:#0f1b28;border-radius:var(--r-md);padding:12px 14px;margin:4px 0;}
.dcrow--code .dced{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#d6e4f0;white-space:pre-wrap;}
.dcrow--callout .dcbody{background:color-mix(in srgb,var(--cyan) 8%,var(--sunk));
  border:1px solid color-mix(in srgb,var(--cyan) 22%,transparent);border-radius:var(--r-md);padding:12px 14px;margin:4px 0;}
.dcdot,.dcnum{flex:none;color:var(--muted);font-size:15px;line-height:1.6;min-width:16px;}
.dcnum{font-size:13.5px;font-variant-numeric:tabular-nums;}
.dccheck{margin:5px 0 0;flex:none;width:17px;height:17px;accent-color:var(--cyan);}
.dced.is-done{color:var(--muted-2);text-decoration:line-through;}
.dcemoji{border:0;background:none;font-size:1.1rem;line-height:1.5;cursor:pointer;flex:none;padding:0;}
.dchr{width:100%;border:0;border-top:1px solid var(--line);margin:12px 0;}
.dcrow--divider .dcbody:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:var(--r-sm);}
/* media blocks */
.dcmedia{flex:1;min-width:0;}
.dcmedia__in{display:flex;gap:8px;align-items:center;border:1.5px dashed var(--line);border-radius:var(--r-md);padding:10px 12px;}
.dcmedia__in input{flex:1;border:0;background:none;padding:4px 0;}
.dcmedia__in input:focus{outline:none;}
.dcmedia__swap{border:0;background:none;font:inherit;font-size:12px;font-weight:650;color:var(--muted-2);cursor:pointer;padding:5px 0;}
.dcmedia__swap:hover{color:var(--cyan-deep);}
.dcimg{margin:7px 0;}
.dcimg img{max-width:100%;border-radius:var(--r-md);display:block;}
.dcimg figcaption{font-size:12.5px;color:var(--muted-2);margin-top:6px;outline:none;}
.dcembed{position:relative;padding-top:56.25%;border-radius:var(--r-md);overflow:hidden;background:#0f1b28;margin:7px 0;}
.dcembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.dcdoclink{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:7px 11px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--cyan-deep);cursor:pointer;text-align:left;}
.dcdoclink:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 6%,var(--surface));}
.dctablewrap{flex:1;min-width:0;overflow-x:auto;margin:7px 0;}
.dctable{border-collapse:collapse;background:var(--surface);}
.dctable th,.dctable td{border:1px solid var(--line);padding:7px 10px;font-size:13.5px;min-width:110px;outline:none;vertical-align:top;}
.dctable th{background:var(--sunk);font-weight:650;text-transform:none;letter-spacing:0;color:var(--ink);}
.dctable th:focus,.dctable td:focus{background:color-mix(in srgb,var(--cyan) 7%,transparent);border-color:var(--cyan);}
.dctable__acts{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;}
.dchint{font-size:12px;color:var(--muted-2);margin-top:26px;padding-top:16px;border-top:1px solid var(--line);}
.dchint kbd{background:var(--sunk);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-xs);
  padding:1px 6px;font-size:11.5px;font-family:inherit;font-weight:700;}
.dcsub,.dcback,.dcthread{max-width:760px;margin:34px auto 0;padding:22px 20px 0;border-top:1px solid var(--line);}
.dcsub h2,.dcback h2,.dcthread h2{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:13px;}
.dcback ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;}
.dcback a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-size:13px;font-weight:600;background:var(--surface);}
.dcback a:hover{border-color:var(--cyan);}
/* slash menu */
.dcmenu{position:absolute;z-index:95;width:312px;max-height:344px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);display:flex;flex-direction:column;
  animation:pjPop 200ms cubic-bezier(.34,1.4,.64,1) both;}
.dcmenu__q{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;
  padding:11px 14px!important;font-size:13.5px!important;}
.dcmenu__q:focus{outline:none;box-shadow:none!important;}
.dcmenu__l{overflow-y:auto;padding:6px;}
.dcmenu__i{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;font:inherit;
  text-align:left;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer;}
.dcmenu__i:hover,.dcmenu__i.on{background:var(--sunk);}
.dcmenu__ic{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:12px;font-weight:700;color:var(--muted);background:var(--surface);}
.dcmenu__tx{display:flex;flex-direction:column;line-height:1.25;}
.dcmenu__tx strong{font-size:13.5px;font-weight:650;}
.dcmenu__tx small{font-size:11.5px;color:var(--muted-2);}
.dcmenu__none{padding:16px;font-size:13px;color:var(--muted-2);text-align:center;}
.dcmenu__del{border:0;border-top:1px solid var(--line);background:none;font:inherit;font-size:13px;
  font-weight:600;color:var(--bad);padding:10px 14px;text-align:left;cursor:pointer;}
.dcmenu__del:hover{background:color-mix(in srgb,#c2391b 7%,transparent);}
.dcpick,.dcoutline{display:flex;flex-direction:column;gap:3px;max-height:330px;overflow-y:auto;margin-top:14px;}
.dcpick__i,.dcoutline__i{display:flex;align-items:center;gap:9px;border:0;background:none;font:inherit;
  font-size:13.5px;text-align:left;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;}
.dcpick__i:hover,.dcoutline__i:hover{background:var(--sunk);color:var(--cyan-deep);}
.dcoutline__i--h2{padding-left:28px;font-size:13px;}
.dcoutline__i--h3{padding-left:46px;font-size:12.5px;color:var(--muted);}
/* read-only render */
.dcp{margin:.5em 0;line-height:1.6;}
.dch1{font-size:1.65rem;font-weight:700;margin:.7em 0 .3em;letter-spacing:-.01em;}
.dch2{font-size:1.3rem;font-weight:650;margin:.6em 0 .25em;}
.dch3{font-size:1.08rem;font-weight:650;margin:.5em 0 .2em;}
.dcl{margin:.35em 0 .35em 1.3em;}
.dcq{border-left:3px solid var(--cyan);padding-left:13px;color:var(--muted);font-style:italic;margin:.5em 0;}
.dctodo{display:flex;gap:9px;align-items:flex-start;margin:.35em 0;}
.dctodo.is-done{color:var(--muted-2);text-decoration:line-through;}
.dcbox{flex:none;width:17px;height:17px;border:1.5px solid var(--line);border-radius:var(--r-xs);
  display:grid;place-items:center;font-size:11px;color:var(--cyan-deep);}
.dccall{display:flex;gap:10px;background:color-mix(in srgb,var(--cyan) 8%,var(--sunk));
  border:1px solid color-mix(in srgb,var(--cyan) 22%,transparent);border-radius:var(--r-md);padding:12px 14px;margin:.5em 0;}
.dccode{background:#0f1b28;color:#d6e4f0;border-radius:var(--r-md);padding:12px 14px;overflow-x:auto;font-size:13px;margin:.5em 0;}

/* ---------------------------------------------------------------- calendar */
.calhead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;}
.caltools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.calnav{display:flex;align-items:center;gap:9px;}
.calnav__b{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--muted);font-size:1.1rem;line-height:1;}
.calnav__b:hover{border-color:var(--cyan);color:var(--cyan-deep);}
.calnav__t{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.5rem;color:var(--ink);min-width:190px;}
.callayers{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.callayers select{width:auto;font-size:13px;padding:6px 10px;border-radius:var(--r-sm);}
.calkey{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px;}
.calkey__i{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted-2);}
.calkey__i i{width:9px;height:9px;border-radius:3px;display:block;}
/* gap-separated cells rather than a shared-border table — each day is an object */
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;grid-auto-rows:minmax(112px,1fr);}
.calgrid__h{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);
  text-align:center;padding:2px 0 6px;}
.calday{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-md);padding:6px;
  display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden;
  transition:background var(--swift),border-color var(--swift);}
.calday:hover{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);}
/* out-of-month days recede whole, rather than needing their own palette */
.calday.is-out{opacity:.45;}
.calday.is-over{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,var(--sunk));
  box-shadow:inset 0 0 0 1px var(--cyan);}
.calday__h{display:flex;align-items:center;justify-content:space-between;}
/* the day number is always a 24px circle, so "today" costs no layout shift */
.calday__n{font-size:12.5px;font-weight:650;color:var(--muted);width:24px;height:24px;
  display:grid;place-items:center;border-radius:50%;flex:none;font-variant-numeric:tabular-nums;}
.calday.is-today .calday__n{background:var(--cyan);color:#fff;}
.calday__add{opacity:0;border:0;background:none;color:var(--muted-2);font-size:1rem;line-height:1;
  cursor:pointer;padding:0 4px;border-radius:var(--r-xs);transition:opacity var(--swift);}
.calday:hover .calday__add,.calday__add:focus-visible{opacity:1;}
.calday__add:hover{background:var(--surface);color:var(--ink);}
.calday__l{display:flex;flex-direction:column;gap:3px;min-height:0;}
/* chips carry color three ways at once: tinted fill, mixed text, solid left edge */
.calchip{display:flex;align-items:center;gap:5px;width:100%;border:0;font:inherit;font-size:11.5px;
  font-weight:600;text-align:left;padding:2px 7px;border-radius:var(--r-sm);cursor:pointer;overflow:hidden;
  border-left:3px solid var(--c,#7c8ea3);
  background:color-mix(in srgb,var(--c,#7c8ea3) 16%,transparent);
  color:color-mix(in srgb,var(--c,#7c8ea3) 78%,var(--ink));}
.calchip:hover{transform:translateX(2px);background:color-mix(in srgb,var(--c,#7c8ea3) 26%,transparent);}
.calchip:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.calchip__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.calchip .pjav{width:16px;height:16px;font-size:8px;border-width:1px;}
.calchip--task{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c,#7c8ea3);color:var(--ink);}
.calchip--task:hover{background:var(--snow);}
.calchip--task.is-done{opacity:.5;}
.calchip--task.is-done .calchip__t{text-decoration:line-through;}
.calchip__dot{width:5px;height:5px;border-radius:50%;background:var(--c,#7c8ea3);flex:none;}
.calchip--cont{opacity:.72;}
.calchip.is-drag{opacity:.4;}
.calmore{border:0;background:none;font:inherit;font-size:11px;font-weight:650;color:var(--muted-2);
  cursor:pointer;text-align:left;padding:1px 6px;}
.calmore:hover{color:var(--cyan-deep);}
.caldaylist{display:flex;flex-direction:column;gap:5px;margin-top:14px;max-height:340px;overflow-y:auto;}
.calfld{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;}
.calfld .lbl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);}
.calfld input,.calfld select,.calfld textarea{width:100%;padding:8px 10px;font-size:13.5px;border-radius:var(--r-sm);}
.calrow{display:grid;grid-template-columns:1fr 1fr;gap:13px;}

/* ---------------------------------------------------------------- threads */
.thread{display:flex;flex-direction:column;gap:13px;}
.thread__err{font-size:12.5px;font-weight:600;color:color-mix(in srgb,var(--bad) 80%,var(--ink));
  background:color-mix(in srgb,#c2391b 8%,transparent);border:1px solid color-mix(in srgb,#c2391b 24%,transparent);
  border-radius:var(--r-sm);padding:8px 11px;margin:0;}
.thfiles{display:flex;flex-direction:column;gap:7px;}
.thfile{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 10px;background:var(--surface);}
.thfile--img{align-items:flex-start;}
.thfile img{width:52px;height:52px;object-fit:cover;border-radius:var(--r-sm);display:block;}
.thfile__m{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35;}
.thfile__m a{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.thfile__m small{font-size:11.5px;color:var(--muted-2);}
.thfile__x{border:0;background:none;color:var(--muted-2);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 5px;flex:none;}
.thfile__x:hover{color:var(--bad);}
.thdrop{display:block;text-align:center;border:1.5px dashed var(--line);border-radius:var(--r-md);padding:10px;
  font-size:13px;font-weight:600;color:var(--muted-2);cursor:pointer;transition:border-color var(--swift),background var(--swift),color var(--swift);}
.thdrop:hover,.thdrop.is-over{border-color:var(--cyan);color:var(--cyan-deep);background:color-mix(in srgb,var(--cyan) 6%,var(--surface));}
.thdrop.is-busy{opacity:.6;pointer-events:none;}
.thdrop:has(:focus-visible){outline:2px solid var(--cyan);outline-offset:2px;}
.thlist{display:flex;flex-direction:column;gap:14px;}
.thlist__none{font-size:13px;color:var(--muted-2);margin:0;}
.thc{display:flex;gap:10px;align-items:flex-start;}
.thc__b{flex:1;min-width:0;}
.thc__h{display:flex;align-items:baseline;gap:8px;margin:0 0 3px;}
.thc__h strong{font-size:13.5px;font-weight:650;}
.thc__h small{font-size:11.5px;color:var(--muted-2);}
.thc__t{font-size:14px;line-height:1.6;word-break:break-word;}
.thc__x{border:0;background:none;color:transparent;font-size:1.05rem;line-height:1;cursor:pointer;padding:0 4px;}
.thc:hover .thc__x,.thc__x:focus-visible{color:var(--muted-2);}
.thc__x:hover{color:var(--bad);}
.thmention{background:color-mix(in srgb,var(--cyan) 15%,transparent);color:var(--cyan-deep);
  font-weight:650;border-radius:var(--r-xs);padding:0 4px;}
.thnew{position:relative;display:flex;flex-direction:column;gap:8px;}
.thnew__t{width:100%;font-size:13.5px;padding:9px 11px;resize:vertical;min-height:60px;border-radius:var(--r-sm);}
.thnew .btn{align-self:flex-start;}
.thment{position:absolute;bottom:100%;left:0;margin-bottom:6px;z-index:20;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e2);padding:6px;
  min-width:196px;max-height:220px;overflow-y:auto;}
.thment__i{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;font:inherit;
  font-size:13.5px;text-align:left;padding:6px 9px;border-radius:var(--r-sm);cursor:pointer;}
.thment__i:hover,.thment__i.on{background:var(--sunk);}

/* ---------------------------------------------------------------- intake */
.informs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.inform{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--muted);}
.inform:hover{border-color:var(--cyan);color:var(--cyan-deep);}
.inform.on{background:var(--navy);border-color:var(--ink);color:#fff;}
.inform__on{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:color-mix(in srgb,#3f9e6a 85%,var(--surface));color:#fff;padding:1px 7px;border-radius:999px;}
.inhelp{font-size:12.5px;color:var(--muted-2);margin:-6px 0 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.inchip{border:1px solid var(--line);background:var(--surface);font:inherit;font-size:11.5px;font-weight:600;
  color:var(--cyan-deep);padding:3px 9px;border-radius:999px;cursor:pointer;}
.inchip:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,var(--surface));}
.inpeople{display:flex;flex-wrap:wrap;gap:6px;}
.inperson{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;}
.inperson:hover{border-color:var(--cyan);}
.inperson input{margin:0;accent-color:var(--cyan);}
.inperson:has(input:checked){border-color:color-mix(in srgb,var(--cyan) 45%,transparent);
  background:color-mix(in srgb,var(--cyan) 11%,var(--surface));color:var(--cyan-deep);}
.inpeople--tight .inperson{font-size:12px;padding:3px 10px;}
.inrules{display:flex;flex-direction:column;gap:13px;margin-bottom:16px;}
.inrule{position:relative;border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:var(--r-md);padding:13px 15px;background:var(--snow);}
.inrule__when{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.inrule__when select,.inrule__when input{width:auto;padding:6px 9px;font-size:13px;background:var(--surface);border-radius:var(--r-sm);}
.inrule__when select{min-width:132px;}
.inrule__when input[type=text]{min-width:130px;flex:1;}
.inrule__k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);flex:none;}
.inrule__x{margin-left:auto;border:0;background:none;color:var(--muted-2);font-size:1.25rem;line-height:1;
  cursor:pointer;padding:0 5px;flex:none;}
.inrule__x:hover{color:var(--bad);}
.inrule__then{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
.inrule__f .lbl,.inrule__g .lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted-2);margin-bottom:5px;}
.inrule__g{display:flex;flex-wrap:wrap;gap:11px;align-items:flex-end;}
.inrule__g select,.inrule__g input{width:auto;min-width:114px;padding:6px 9px;font-size:13px;background:var(--surface);border-radius:var(--r-sm);}
.inrule__stop{display:inline-flex!important;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--muted);cursor:pointer;padding-bottom:6px;}
.inrule__stop input{margin:0;accent-color:var(--cyan);}
.intake .bsave{position:static;background:none;padding:20px 0 4px;}

/* ---------------------------------------------------------------- staff */
.stform__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.strole{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.strole__opt{display:block;border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 15px;cursor:pointer;
  transition:border-color var(--swift),background var(--swift);}
.strole__opt:hover{border-color:var(--cyan);}
.strole__opt:has(input:checked){border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent);}
.strole__opt input{margin-right:9px;accent-color:var(--cyan);}
.strole__opt strong{font-size:14px;font-weight:650;}
.strole__opt em{display:block;font-style:normal;font-size:12.5px;color:var(--muted-2);margin-top:4px;padding-left:25px;}
.stperms{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:18px;padding:16px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--snow);}
.stperms__h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:700;margin:0 0 9px;}
.stperms__all{border:0;background:none;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--cyan-deep);cursor:pointer;text-transform:uppercase;}
.stperms__all:hover{text-decoration:underline;}
.stperm{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:3px 0;cursor:pointer;}
.stperm input{margin:0;flex:none;accent-color:var(--cyan);}
[data-permwrap].is-off{opacity:.5;}
.stacts{display:flex;flex-wrap:wrap;gap:5px;}
.stacts .btn{padding:5px 10px;font-size:12px;}

/* ---------------------------------------------------------------- focus + touch */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.pjcol__edit:focus-visible,.pjcol__add:focus-visible,.pjmini:focus-visible,.pjpanel__x:focus-visible,
.pjchip__x:focus-visible,.pjsubs__x:focus-visible,.pjcols__b:focus-visible,.inchip:focus-visible,
.inrule__x:focus-visible,.pjseg__b:focus-visible,.lgtab:focus-visible,.pjicons__b:focus-visible,
.stperms__all:focus-visible,.pjscope__b:focus-visible,.inform:focus-visible,.dchandle:focus-visible,
.dcadd:focus-visible,.dcside__x:focus-visible,.dcicon:focus-visible,.calnav__b:focus-visible,
.calday__add:focus-visible,.calmore:focus-visible,.thfile__x:focus-visible,.thc__x:focus-visible,
.dcmenu__i:focus-visible,.dcpick__i:focus-visible,.thment__i:focus-visible,.dcoutline__i:focus-visible
{outline:2px solid var(--cyan);outline-offset:2px;}
.inperson:has(:focus-visible),.strole__opt:has(:focus-visible),.pjchk:has(:focus-visible),
.stperm:has(:focus-visible),.pjmulti__o:has(:focus-visible){outline:2px solid var(--cyan);outline-offset:2px;border-radius:999px;}
.strole__opt:has(:focus-visible){border-radius:var(--r-md);}
@media(pointer:coarse){
  .pjpanel__x,.pjchip__x,.pjsubs__x,.inrule__x,.pjcol__edit,.dchandle,.dcadd,.calday__add{
    min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0;opacity:1;}
  .stacts .btn{min-height:40px;}
}
@media(max-width:900px){
  .dcside{position:fixed;top:0;left:0;bottom:0;width:258px;max-width:86vw;background:var(--surface);z-index:70;
    padding:18px;margin:0;box-shadow:var(--e2);max-height:100vh;}
  .dcpage,.dcsub,.dcback,.dcthread{max-width:none;}
  .dctitle{font-size:1.9rem;}
  .dcpage{padding-inline:0;}
}
@media(max-width:860px){
  .pjrow{grid-template-columns:1fr;gap:4px;}
  .pjrow--tall .pjrow__l{padding-top:0;}
  .pjcol{flex-basis:250px;}
  .stform__row,.strole,.calrow{grid-template-columns:1fr;}
  .calgrid{grid-auto-rows:minmax(78px,1fr);gap:4px;}
  .calchip .pjav{display:none;}
  .calnav__t{font-size:1.2rem;min-width:0;}
  .pjpanel{top:0;right:0;bottom:0;border-radius:var(--r-xl) 0 0 var(--r-xl);width:min(452px,100vw);}
}
/* stragglers the sweep caught */
.pjhead__r{display:flex;gap:7px;flex-wrap:wrap;}
.pjtag--more{background:transparent;border:1px solid var(--line);color:var(--muted-2);}
.pjmini--open{font-weight:650;}
.stform{display:block;}
.stperms__g{min-width:0;}
.dcpick__ic{flex:none;font-size:14px;line-height:1;}
/* directory import — what changed last time */
.dirdelta{border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:var(--r-md,12px);
  padding:14px 16px;margin-bottom:16px;background:var(--snow);}
.dirdelta h3{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2,#8794a3);margin:0 0 8px;}
.dirdelta p{font-size:13.5px;line-height:1.6;margin:0 0 6px;}
.dirdelta p:last-child{margin-bottom:0;}
.dirdelta .muted{display:block;font-size:12.5px;margin-top:2px;}
.dirpdf{border:1px solid var(--line);border-radius:var(--r-md,12px);padding:12px 14px;margin-bottom:14px;background:var(--snow);}
.dirpdf summary{cursor:pointer;font-weight:650;font-size:13.5px;color:var(--cyan-deep);}
.dirpdf p{font-size:13px;line-height:1.6;margin:10px 0 0;}
.dirpdf p.muted{font-size:12.5px;}


/* ===== Directory editing =================================================
   479 people is too many for a 15-row preview, so the whole roster is here,
   grouped by family and searchable. Each person opens to reveal their fields
   rather than showing every input at once. */
.dirtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.dirtools input[type=search]{flex:1;min-width:220px;}

.diradd{border:1px solid var(--line);border-radius:var(--r-md,12px);padding:16px;margin-bottom:16px;
  background:var(--surface-2,#fff);}
.diradd[hidden]{display:none;}
.diradd h3{margin:0 0 4px;font-size:1rem;}
.diradd__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px;}
.diradd__g label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;}
.diradd__g label span{color:var(--ink-soft,#5c6b7a);font-weight:600;}
.diradd__g label em{font-weight:400;font-style:normal;opacity:.7;}
.diradd__a{display:flex;gap:8px;}

.dirlist{border:1px solid var(--line);border-radius:var(--r-md,12px);overflow:hidden;}
.dirfam{border-bottom:1px solid var(--line);}
.dirfam:last-child{border-bottom:0;}
.dirfam[hidden]{display:none;}
.dirfam__h{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:color-mix(in srgb,var(--ink,var(--ink)) 3.5%,transparent);}
.dirfam__ph{flex:none;width:38px;height:46px;border-radius:7px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink,var(--ink)) 9%,transparent);}
.dirfam__ph img{width:100%;height:100%;object-fit:cover;display:block;}
.dirfam__ph span{font-size:.78rem;font-weight:700;opacity:.6;}
.dirfam__t{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.dirfam__t strong{font-size:.92rem;overflow-wrap:anywhere;}
.dirfam__t span{font-size:.78rem;}

.dirp{border-top:1px solid var(--line);}
.dirp>summary{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 60px;cursor:pointer;
  font-size:.88rem;list-style:none;}
.dirp>summary::-webkit-details-marker{display:none;}
.dirp>summary:hover{background:color-mix(in srgb,var(--accent,#0092b7) 6%,transparent);}
.dirp__n{font-weight:600;}
.dirp__c{flex:1;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dirp__lock{flex:none;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  padding:2px 7px;border-radius:100px;
  background:color-mix(in srgb,var(--accent,#0092b7) 15%,transparent);
  color:color-mix(in srgb,var(--accent,#0092b7) 75%,var(--ink,var(--ink)));}
.dirp__lock--hid{background:color-mix(in srgb,#c2410c 15%,transparent);color:var(--bad);}
.dirp--hid>summary .dirp__n{opacity:.55;text-decoration:line-through;}

.dirp__b{padding:12px 12px 16px 60px;display:grid;gap:14px;
  background:color-mix(in srgb,var(--ink,var(--ink)) 2%,transparent);}
.dirp__x{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;
  padding-top:12px;border-top:1px dashed var(--line);}
.dirp__ph{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.dirp__ph label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;}
.dirp__ph label span{color:var(--ink-soft,#5c6b7a);font-weight:600;}
.dirp__btns{display:flex;gap:8px;margin-left:auto;}

@media(max-width:640px){
  .dirp>summary{padding-left:12px;}
  .dirp__b{padding-left:12px;}
  .dirp__btns{margin-left:0;}
}


/* ===== Events: last pulled from the church calendar ======================
   Sits under the page heading. Green while the sync is recent, amber once it's
   been quiet for two days — the useful signal isn't "it worked", it's "it
   hasn't run in a while and nobody noticed". */
.evsync{display:flex;align-items:flex-start;gap:11px;margin:0 0 var(--space-lg,20px);
  padding:12px 15px;border-radius:var(--r-md,12px);
  background:color-mix(in srgb,#1d9e75 7%,transparent);
  border:1px solid color-mix(in srgb,#1d9e75 22%,transparent);}
.evsync__dot{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;
  background:#1d9e75;box-shadow:0 0 0 3px color-mix(in srgb,#1d9e75 18%,transparent);}
.evsync__t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.evsync__t strong{font-size:.92rem;color:var(--ink,#0d2541);}
.evsync__t span{font-size:.84rem;color:var(--ink-soft,#5c6b7a);}

.evsync--stale{background:color-mix(in srgb,#ba7517 8%,transparent);
  border-color:color-mix(in srgb,#ba7517 26%,transparent);}
.evsync--stale .evsync__dot{background:#ba7517;
  box-shadow:0 0 0 3px color-mix(in srgb,#ba7517 18%,transparent);}


/* ===== Admin → Access ====================================================
   Who can do what. People are rows that open; groups are cards. The whole
   screen is built so the answer to "why does this person have that?" is
   visible without clicking anything — inherited grants say where they came
   from, rather than appearing as an unexplained tick. */
.acstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;
  margin:0 0 var(--space-lg,20px);}
.acstat>div{background:var(--surface-1,#f6f8fa);border-radius:var(--r-md,12px);padding:13px 15px;}
.acstat b{display:block;font-size:1.5rem;font-weight:700;line-height:1.1;color:var(--ink,#0d2541);}
.acstat span{font-size:.8rem;color:var(--ink-soft,#5c6b7a);}

.aclab{margin:16px 0 7px;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft,#5c6b7a);}
.acsub{margin:12px 0 5px;font-size:.78rem;font-weight:700;color:var(--ink-soft,#5c6b7a);}

.acticks{display:flex;flex-wrap:wrap;gap:7px;}

/* --- Access: App shortcuts as one dropdown --------------------------------
   .acticks is a pill row, which reads well while every option is a single
   word — the admin-section ticks still use it. The app shortcuts each carry a
   line of explanation, and a two-line pill with a 100px radius wraps badly:
   six of them stacked 430px tall on all fourteen cards. Collapsed to one
   control the card is readable at a glance and the descriptions get room.

   The menu is position:fixed and placed by JS on purpose. Both .panel and
   .aclist clip their overflow, so an absolutely positioned menu would be cut
   off at the card's edge. */
.acdd{position:relative}
.acdd__btn{display:flex;align-items:center;gap:9px;width:100%;
  padding:.6em .75em .6em .9em;border:1px solid var(--line,#dbe3ec);border-radius:10px;
  background:var(--surface,#fff);color:inherit;font:inherit;font-size:.88rem;
  text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.acdd__btn:hover{border-color:var(--cyan,#0092b7)}
.acdd__btn:focus-visible{outline:none;border-color:var(--cyan,#0092b7);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan,#0092b7) 22%,transparent)}
.acdd__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acdd__val--none{color:var(--muted,#5c6b7a)}
.acdd__n{flex:none;min-width:1.55em;text-align:center;font-size:.72rem;font-weight:700;
  padding:.18em .45em;border-radius:100px;line-height:1.3;
  background:color-mix(in srgb,var(--cyan,#0092b7) 15%,transparent);color:var(--cyan-deep,#0092b7)}
.acdd__n[hidden]{display:none}
.acdd__chev{flex:none;width:15px;height:15px;color:var(--muted,#5c6b7a);transition:transform .18s}
.acdd.is-open .acdd__btn{border-color:var(--cyan,#0092b7)}
.acdd.is-open .acdd__chev{transform:rotate(180deg)}
.acdd__menu{position:fixed;z-index:60;overflow:auto;overscroll-behavior:contain;
  padding:5px;border:1px solid var(--line,#dbe3ec);border-radius:12px;
  background:var(--surface,#fff);box-shadow:0 12px 34px rgba(13,37,65,.18),0 2px 6px rgba(13,37,65,.08)}
.acdd__menu[hidden]{display:none}
.acdd__opt{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;
  border-radius:8px;cursor:pointer;line-height:1.35}
.acdd__opt:hover{background:var(--cream,#eef1f5)}
.acdd__opt input{margin:2px 0 0;flex:none;cursor:pointer}
.acdd__opt b{display:block;font-size:.87rem;font-weight:600}
.acdd__opt em{display:block;font-style:normal;font-size:.76rem;
  color:var(--muted,#5c6b7a);margin-top:1px}

.acticks label{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;
  padding:.42em .8em;border-radius:100px;background:var(--surface-1,#f6f8fa);
  border:1px solid var(--line,#dbe3ec);cursor:pointer;transition:border-color .15s,background .15s;}
.acticks label:hover{border-color:var(--accent,#0092b7);}
.acticks label:has(input:checked){background:color-mix(in srgb,var(--accent,#0092b7) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent,#0092b7) 40%,transparent);font-weight:600;}
.acticks--tight label{font-size:.8rem;padding:.34em .68em;}
/* Shortcut ticks carry a one-line description, so nobody has to guess what
   "CLC check-in" opens before handing it to somebody. */
.acticks label{flex-direction:column;align-items:flex-start;}
.acticks label em{font-style:normal;font-size:.74rem;opacity:.7;display:block;
  padding-left:1.6em;margin-top:1px;font-weight:400;}
.acticks--tight label{flex-direction:row;align-items:center;}

.acf{display:flex;flex-direction:column;gap:4px;font-size:.82rem;margin-bottom:9px;}
.acf>span{font-weight:600;color:var(--ink-soft,#5c6b7a);}
.acf--inline{margin-top:12px;}
.acmore>summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--accent,#0092b7);
  padding:6px 0;}
.acdel{margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#dbe3ec);
  display:flex;flex-wrap:wrap;gap:7px;}

.actools{margin-bottom:12px;}
.actools input[type=search]{width:100%;max-width:340px;}

.aclist{border:1px solid var(--line,#dbe3ec);border-radius:var(--r-md,12px);overflow:hidden;}
.acp{border-bottom:1px solid var(--line,#dbe3ec);}
.acp:last-child{border-bottom:0;}
.acp[hidden]{display:none;}
/* One wrapping line, not a two column tug of war. Somebody with one shortcut
   and somebody with ten both read the same way: name on the left, chips to the
   right of it, and the chips drop to a line of their own rather than printing
   over the name once they stop fitting. */
.acp>summary{display:flex;align-items:center;justify-content:space-between;gap:9px 14px;
  flex-wrap:wrap;padding:12px 15px;cursor:pointer;list-style:none;}
.acp>summary::-webkit-details-marker{display:none;}
.acp>summary:hover{background:color-mix(in srgb,var(--accent,#0092b7) 5%,transparent);}
.acp--staff>summary{background:color-mix(in srgb,var(--accent,#0092b7) 4%,transparent);}
.acp__who{display:flex;flex-direction:column;min-width:0;flex:1 1 210px;}
.acp__n{font-weight:600;font-size:.94rem;min-width:0;overflow-wrap:anywhere;}
.acp__e{font-size:.8rem;color:var(--ink-soft,#5c6b7a);overflow:hidden;text-overflow:ellipsis;}
.acp__tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;flex:0 1 auto;min-width:0;}
.actag{font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:100px;
  background:color-mix(in srgb,var(--accent,#0092b7) 13%,transparent);
  color:color-mix(in srgb,var(--accent,#0092b7) 78%,var(--ink,var(--ink)));}
.actag--owner{background:color-mix(in srgb,#7f77dd 16%,transparent);color:color-mix(in srgb,#7f77dd 55%,var(--ink));}
.actag--staff{background:color-mix(in srgb,#1d9e75 15%,transparent);color:var(--good);}
.actag--none{background:transparent;color:var(--ink-soft,#5c6b7a);font-weight:500;
  border:1px solid var(--line,#dbe3ec);}

.acp__b{padding:4px 15px 16px;background:color-mix(in srgb,var(--ink,var(--ink)) 2%,transparent);}
.acp__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-lg,20px);}
.acp__f{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:13px;border-top:1px solid var(--line,#dbe3ec);}
.acp__f .muted{font-size:.8rem;}
/* Emailing a set-up link is its own action, kept away from Save so the two
   can't be confused for one another. */
.acp__link{padding:0 15px 16px;background:color-mix(in srgb,var(--ink,var(--ink)) 2%,transparent);}
.acp__link button[disabled]{opacity:.45;cursor:not-allowed;}

.acstaff{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md,12px);
  background:var(--surface-2,#fff);border:1px solid var(--line,#dbe3ec);cursor:pointer;}
.acstaff:has(input:checked){border-color:color-mix(in srgb,#1d9e75 45%,transparent);
  background:color-mix(in srgb,#1d9e75 6%,transparent);}
.acstaff input{margin-top:3px;}
.acstaff span{display:flex;flex-direction:column;gap:2px;}
.acstaff em{font-style:normal;font-size:.8rem;color:var(--ink-soft,#5c6b7a);}

@media(max-width:640px){
  .acp>summary{flex-direction:column;align-items:flex-start;gap:8px;}
  .acp__tags{justify-content:flex-start;}
}


/* ===== Forms: build one, and know where it went =========================
   The commonest confusion with a form builder is "I made it — now what?".
   The address is shown next to the builder with a copy button, so the answer
   is on screen rather than something you have to work out. */
.newform__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.newform__slug{display:flex;align-items:center;gap:0;}
.newform__slug>span{font-family:var(--font-mono,ui-monospace,monospace);font-size:.86rem;
  color:var(--ink-soft,#5c6b7a);background:var(--surface-1,#f6f8fa);
  border:1px solid var(--line,#dbe3ec);border-right:0;
  border-radius:var(--r-sm,9px) 0 0 var(--r-sm,9px);padding:.62em .6em .62em .8em;white-space:nowrap;}
.newform__slug>input{border-radius:0 var(--r-sm,9px) var(--r-sm,9px) 0;min-width:0;}
.ef em{font-style:normal;font-weight:400;opacity:.75;}

.formwhere{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;padding:11px 15px;border-radius:var(--r-md,12px);
  background:color-mix(in srgb,var(--accent,#0092b7) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#0092b7) 20%,transparent);}
.formwhere__k{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft,#5c6b7a);}
.formwhere__u{font-family:var(--font-mono,ui-monospace,monospace);font-size:.92rem;font-weight:600;
  color:var(--accent,#0092b7);text-decoration:none;}
.formwhere__u:hover{text-decoration:underline;}
.formwhere__a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* A dot marks the forms built in the admin, as opposed to the ones wired into
   hand-made pages — only the former can be deleted. */
.chip__dot{opacity:.55;font-size:1.1em;line-height:0;}

/* The light/dark switch in the sidebar foot. Sits with View site and Log out
   because it's a preference about this browser, not about the site. */
.adm__mode{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;cursor:pointer;
  color:rgba(244,238,225,.72);font:600 .84rem var(--f);text-align:left;}
.adm__mode:hover{color:#fff;}
.adm__mode__ic{width:17px;height:17px;flex:none;display:grid;place-items:center;}
.adm__mode__ic svg{width:17px;height:17px;grid-area:1/1;transition:opacity .18s,transform .3s var(--ease-out,ease);}
.adm__mode__ic svg:nth-child(1){opacity:0;transform:rotate(-90deg) scale(.6);}
.adm__mode__ic svg:nth-child(2){opacity:1;transform:none;}
html.dark .adm__mode__ic svg:nth-child(1){opacity:1;transform:none;}
html.dark .adm__mode__ic svg:nth-child(2){opacity:0;transform:rotate(90deg) scale(.6);}
@media(prefers-reduced-motion:reduce){.adm__mode__ic svg{transition:none;}}

/* Hub block styles: a labelled row of choices rather than four bare radios. */
.lstylab{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-right:10px;flex:none;}

/* ---- weeks off, under each weekly rhythm ---- */
.recskip td{padding-top:0;border-top:0;font-size:.85rem}
.recskip__lbl{opacity:.6;margin-right:.5em}
.recskip__none{font-style:normal;opacity:.5}
.recskip__chips{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle;margin-right:8px}
.recskip__chip{display:inline-flex;align-items:center;gap:.4em;background:var(--cream-2,#e3e8ef);
  border-radius:100px;padding:.2em .35em .2em .75em}
.recskip__x{border:0;background:none;font:inherit;line-height:1;cursor:pointer;opacity:.55;padding:0 .3em}
.recskip__x:hover{opacity:1}
.recskip__form{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-right:8px}
.recskip__form input{font:inherit;font-size:.85rem;padding:.2em .4em;border:1px solid var(--line,#dfe4ea);border-radius:6px}
/* Sized so the three of them sit on one line inside a cell that is already
   sharing a row with eight columns; left to their natural width the date
   pickers wrap and the little form reads as three unrelated boxes. */
.recskip__form input[type=date]{width:9.2em}
.recskip__form input[type=text]{width:11em}

/* separates the EasyReg-named settings tabs from our own tools */
.rtabs__div{flex:0 0 auto;align-self:center;width:1px;height:20px;margin:0 6px;background:var(--line,#e3e8ee)}

/* ------------------------------------------------------------- fee boxes
   Each box is one decision, so it gets a visible container. Without one, six
   fee boxes read as a single undifferentiated form and it stops being obvious
   which price belongs to which question. */
.feebox{border:1px solid var(--line,#e3e8ee);border-radius:14px;padding:16px;margin:0 0 14px;background:color-mix(in srgb,var(--navy,var(--ink)) 2%,var(--surface))}
.feebox__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.feebox__n{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-deep,#1d6b83)}
.feebox__row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
@media(max-width:900px){.feebox__row3{grid-template-columns:1fr}}
.feebox__disc{margin-top:12px;border-top:1px dashed var(--line,#e3e8ee);padding-top:10px}
.feebox__disc summary{cursor:pointer;font-size:.85rem;font-weight:700;color:var(--ink-soft,#4a5766)}

/* The sliding underline assumed one unwrapped row of tabs. With ten tabs it
   wraps, and a single travelling bar can no longer point at the right one — the
   active tab carries its own underline, so this is retired rather than fought. */
.rtabs__ink{display:none}

/* payment method — a stack of real choices, not a row of bare radios */
.paymeth{display:grid;gap:8px}
.paymeth__o{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1.5px solid var(--line,#e3e8ee);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
.paymeth__o:hover{border-color:var(--cyan,#2b8aa5)}
.paymeth__o:has(input:checked){border-color:var(--cyan,#2b8aa5);background:color-mix(in srgb,var(--cyan,#2b8aa5) 6%,var(--surface))}
.paymeth__o input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--cyan,#2b8aa5)}
.paymeth__o span{display:grid;gap:1px}
.paymeth__o small{color:var(--muted,#7c8896);font-size:.82rem}
.remdays{display:flex;flex-wrap:wrap;gap:8px}
.remday{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1.5px solid var(--line,#e3e8ee);border-radius:999px;cursor:pointer;font-weight:700;font-size:.86rem}
.remday:has(input:checked){border-color:var(--cyan,#2b8aa5);background:color-mix(in srgb,var(--cyan,#2b8aa5) 8%,var(--surface));color:var(--cyan-deep,#1d6b83)}
.remday input{accent-color:var(--cyan,#2b8aa5)}

/* group caps — label, limit, and how full it already is, on one line */
.grpcaps{margin-top:12px;display:grid;gap:8px}
.grpcap{display:flex;align-items:center;gap:12px}
.grpcap__l{flex:1 1 auto;min-width:0;font-weight:700;color:var(--ink,#0d2541)}
.grpcap__n{flex:0 0 auto;font-size:.82rem;color:var(--muted,#7c8896)}
.grpcap__n.is-full{color:var(--bad);font-weight:700}

/* one email state per block: the toggle and its wording belong together */
.emrow{border:1px solid var(--line,#e3e8ee);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:color-mix(in srgb,var(--navy,var(--ink)) 2%,var(--surface))}
.emrow__t{margin:0 0 8px !important}
.emrow textarea{width:100%}

/* broadcast filters — one row per axis so the stacking stays visible */
.bcfilters{display:grid;gap:14px}
.bcfilters > div{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bcfilters .lbl{flex:0 0 100%;margin:0 0 2px}

/* drag grip — deliberately separate from the row so text stays selectable */
.qgrip{border:0;background:var(--page);color:var(--ink,#0d2541);border-radius:4px;cursor:grab;line-height:1;font-size:.85rem;padding:3px 5px;margin:1px 0;touch-action:none}
.qgrip:active{cursor:grabbing}
.qgrip:focus-visible{outline:2px solid var(--cyan,#2b8aa5);outline-offset:1px}
.qrow.is-dragging{opacity:.55;box-shadow:0 8px 22px rgba(13,37,65,.18)}
#qRows.is-sorting{cursor:grabbing}

/* export column picker — wraps into a tidy field of chips */
.xcols{display:flex;flex-wrap:wrap;gap:8px}

/* The month grid shows names on a wide screen and dates only on a phone, so
   it carries two legends and shows whichever one is telling the truth. */
.clcs-legend--sm{display:none}

/* === CLC volunteer schedule on a phone ====================================
   One rule above all others here: the page scrolls up and down, never across.
   The first pass at this leaned on sideways-scrolling panels, and with six of
   them stacked down one screen a thumb landed on one wherever you swiped — so
   the page appeared to move left and right instead of down. Every wide thing
   below is therefore made to FIT, and no element is left horizontally
   scrollable.

   The panels are built with inline styles, which a media query can't reach —
   hence the !important flags. Nothing here applies above 720px. */
@media (max-width:720px){
  /* Belt and braces: nothing in this screen may pan sideways.
     admin.css already gives every .panel__b overflow-x:auto on small screens —
     sensible for admin pages full of wide tables, but here it made each of the
     seven panels its own sideways scroller. Since everything now fits, that is
     switched off for this screen only.

     'clip' rather than 'hidden' on purpose: with overflow-x:hidden the spec
     computes overflow-y from visible to auto, which turns the element into a
     vertical scroll container and swallows the very up-and-down swipe we are
     trying to give back. 'clip' leaves the other axis alone. */
  .clcs{overflow-x:clip}
  .clcs .panel__b{overflow-x:clip}
  .clcs-scroll{overflow:visible !important}

  /* ---- This week: one row per person ---- */
  .clcs-week{table-layout:auto !important}
  .clcs-week colgroup{display:none}
  .clcs-week,.clcs-week tbody,.clcs-week tr,.clcs-week td{display:block;width:auto}
  .clcs-week tr{padding:11px 2px 13px}
  .clcs-week td{padding:0 !important}
  .clcs-week td:first-child:empty{display:none}
  .clcs-week td:first-child{font-size:.72rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted,#5c6b7a);margin-bottom:7px}
  .clcs-week form{flex-wrap:nowrap !important}
  .clcs-week form input[type=text]{min-width:0 !important;flex:1 1 auto !important}
  .clcs-week td:last-child>div{justify-content:flex-start !important;margin-top:8px}

  /* ---- Who normally serves: Day | Shift | Week A | Week B ----
     Four columns need 640px. Stacked, each shift becomes a small block with
     the day and time as its heading and the two weeks beneath, which is the
     same information in the order somebody reads it out loud. */
  .clcs-rota{min-width:0 !important}
  /* Hide the header row when stacked: read down the page it was four stray
     words above the first shift.

     This used to say ".clcs-rota thead,.clcs-rota tr:first-child" because the
     header was once a bare <tr> with no <thead> around it. The markup grew a
     real <thead>, and from that day the second half of the selector was also
     matching tbody's first row - :first-child counts within a parent, and
     tbody has one too. Monday 1pm-3pm quietly vanished on every phone. */
  .clcs-rota thead{display:none}
  .clcs-rota,.clcs-rota tbody,.clcs-rota tr,.clcs-rota td{display:block;width:auto}
  .clcs-rota tr{padding:10px 0 12px;border-top:1px solid var(--line,#dfe4ea)}
  .clcs-rota td{padding:2px 0 !important}
  /* Counted from the END, never the start. The day cell carries rowspan="3", so
     the second and third shift of each day have three cells, not four — with
     nth-child the Week A column was being labelled Week B on two rows out of
     every three, which is a good deal worse than looking untidy. */
  .clcs-rota td:nth-last-child(4),.clcs-rota td:nth-last-child(3){display:inline-block;
    font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--muted,#5c6b7a)}
  .clcs-rota tr:not(:has(td:nth-last-child(4))) td:nth-last-child(3){margin-left:0}
  .clcs-rota td:nth-last-child(3){margin-left:7px}
  .clcs-rota td:nth-last-child(2)::before{content:'Week A';display:block;font-size:.7rem;
    font-weight:700;color:var(--muted,#5c6b7a);margin:6px 0 3px}
  .clcs-rota td:last-child::before{content:'Week B';display:block;font-size:.7rem;
    font-weight:700;color:var(--muted,#5c6b7a);margin:6px 0 3px}
  .clcs-rota input[type=text]{width:100% !important;min-width:0 !important}

  /* ---- Volunteer contacts: Name | Phone | Email | Note ---- */
  .clcs-vols{min-width:0 !important}
  /* Same story as the rota above: once the roster grew a real <thead>, the
     tr:first-child half started eating the first volunteer row on phones. */
  .clcs-vols thead{display:none}
  .clcs-vols,.clcs-vols tbody,.clcs-vols tr,.clcs-vols td{display:block;width:auto}
  .clcs-vols tr{padding:10px 0 12px;border-top:1px solid var(--line,#dfe4ea)}
  .clcs-vols td{padding:3px 0 !important}
  .clcs-vols input{width:100% !important;min-width:0 !important}
  /* Four unlabelled boxes in a column tell you nothing once the header row is
     gone, so each carries its own. */
  .clcs-vols td:nth-child(2)::before{content:'Phone'}
  .clcs-vols td:nth-child(3)::before{content:'Email'}
  .clcs-vols td:nth-child(4)::before{content:'Note'}
  .clcs-vols td::before{display:block;font-size:.7rem;font-weight:700;
    color:var(--muted,#5c6b7a);margin:5px 0 3px}

  /* ---- This month ----
     Seven columns of names cannot fit, and shrinking them to fit makes them
     unreadable. On a phone the month answers one question — which days still
     have a gap — so it keeps the dates and marks those, and the names stay on
     the week panel above where they can actually be edited. */
  .clcs .vmon{min-width:0 !important;width:100% !important;table-layout:fixed}
  .clcs .vmon th{font-size:.62rem;padding:4px 0 !important}
  .clcs .vmon td{padding:3px 1px !important;vertical-align:top;height:auto}
  .clcs .vmon__dow,.clcs .vmon__wk,.clcs .vmon__t,.clcs .vmon__p{display:none !important}
  .clcs .vmon__n{font-size:.78rem;font-weight:600;text-align:center}
  .clcs .vmon td:has(.is-open){background:color-mix(in srgb,var(--cyan,#0092b7) 13%,transparent);
    border-radius:7px;font-weight:800}
  .clcs-legend{display:none}
  .clcs-legend--sm{display:block}

  /* ---- Tap targets, and no zoom-on-focus ---- */
  .clcs .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  .clcs input[type=text],.clcs input[type=tel],.clcs input[type=email],
  .clcs input[type=number],.clcs input[type=date],.clcs select{
    min-height:38px;font-size:16px !important}

  /* A pill row inside a 100px-radius container looks broken the moment it
     wraps — the last pill hangs outside the curve. A gentler radius lets it
     wrap tidily, which beats making it one more thing that scrolls sideways. */
  .admtabs{flex-wrap:wrap;border-radius:16px;max-width:100%}
}

/* ---- editing a member's name in place ---- */
/* The name column has to keep enough room for a name; squeezed to nothing it
   clips mid-word and reads like a bug rather than a field. */
.mrename{min-width:12ch}
/* A name that is only a first name cannot be matched to a rota, so the field
   is always live rather than hidden behind an edit button - fixing it should
   be the same effort as noticing it. */
.mrename{margin:0}
.mrename input[type=text]{width:100%;min-width:12ch;max-width:230px;font:inherit;font-weight:600;padding:5px 8px;
  border:1px solid transparent;border-radius:7px;background:transparent;color:inherit}
.mrename input[type=text]:hover{border-color:var(--line,#e7ecf2)}
.mrename input[type=text]:focus{border-color:var(--cyan,#0092b7);background:var(--card,#fff);outline:none}
.mrename__warn{display:block;margin-top:2px;font-size:.74rem;line-height:1.35}

/* ─────────────────────────────────────────────────────────────────────────
   Icon weight

   Every icon is drawn inside a 24-unit box, but each one is rendered at a
   different pixel size - so an identical stroke-width in the file lands as a
   different line thickness on screen. Measured before this block: 1.10px on
   the tree carets up to 1.83px on the menu burger, a 66% spread across icons
   sitting inches apart.

   CSS stroke-width beats the SVG attribute, so nothing in the markup has to
   change. Each value below is 1.4 x 24 / rendered-size, which lands every
   icon on the same ~1.4px apparent stroke - near enough to where the sidebar
   already sat that the busiest surface barely moves.
   ───────────────────────────────────────────────────────────────────────── */
/* Every selector reaches the <svg> itself, not its wrapper. Setting stroke-width
   on a parent only offers an inherited value, and inheritance loses to the
   element's own presentation attribute - so a wrapper rule silently does
   nothing. Written both ways so it holds whether the class sits on the svg or
   around it. */
/* The admin icons are filled Phosphor glyphs now, not strokes, so the
   stroke-width tuning that used to live here has nothing left to act on. */
.qa__ic,           .qa__ic svg           { stroke-width: 1.68 }   /* 20px */
.ptree__ico,       .ptree__ico svg       { stroke-width: 1.98 }   /* 17px */
.adm__treebtn,     .adm__treebtn svg     { stroke-width: 2.10 }   /* 16px */
.adm__burger,      .adm__burger svg      { stroke-width: 1.53 }   /* 22px */

/* ─────────────────────────────────────────────────────────────────────────
   Warmth pass

   Three quiet things, none of which should be nameable by the person using
   the admin forty times a week: color that means something, motion short
   enough to feel like response rather than animation, and a little more air.
   ───────────────────────────────────────────────────────────────────────── */

/* Color, doing a job. The active page is the one thing in the sidebar worth
   picking out, so it is the only place the accent appears. */
.adm__l.is-on .adm__ic, .adm__link.is-on .adm__ic,
.adm__l[aria-current] .adm__ic, .adm__link[aria-current] .adm__ic{color:var(--cyan);opacity:1}
.adm__ic{transition:color .14s ease, opacity .14s ease}

/* Section eyebrows carry the accent rather than another grey. */
.panel__h > h2, .panel__h > h3{letter-spacing:-.012em}

/* Motion: response, not animation. Nothing here is longer than a blink, and
   all of it steps aside for anyone who has asked it to. */
.panel{transition:box-shadow .16s ease, border-color .16s ease}
.btn{transition:transform .12s cubic-bezier(.25,1,.5,1), background-color .14s ease, border-color .14s ease, box-shadow .14s ease}
.btn:active{transform:translateY(1px)}
.adm__l, .adm__link{transition:background-color .14s ease, color .14s ease}
.qa__it{transition:transform .16s cubic-bezier(.25,1,.5,1), box-shadow .16s ease, border-color .16s ease}
.qa__it:hover{transform:translateY(-1px)}

/* The save confirmation is the one moment worth easing in - it is the answer
   to "did that work?", and appearing instantly reads as a flicker. */
@keyframes admFlashIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.flash, .msg, .notice{animation:admFlashIn .18s ease both}

@media (prefers-reduced-motion:reduce){
  .panel, .btn, .adm__l, .adm__link, .qa__it, .adm__ic{transition:none}
  .btn:active, .qa__it:hover{transform:none}
  .flash, .msg, .notice{animation:none}
}

/* A little more air between a panel's heading and its contents. */
.panel__h{padding-block:14px}


/* ==========================================================================
   Phone polish
   Measured against a 390px and a 320px viewport with this stylesheet loaded,
   rather than guessed at. The shell, the grids and the panels all held up.
   Three things did not, and each is fixed here at the level it broke.
   ========================================================================== */

/* 1 · Fields stop zooming the page.
   Safari on iPhone magnifies the whole page the moment you focus a control
   whose text is under 16px, and it never zooms back out — you finish typing
   and the admin is left sitting sideways. Every control was 13-15.2px, which
   means every field on every page did this. The !important is deliberate:
   around thirty component rules set their own 13px at class specificity, and
   out-numbering each one by hand would break the first time a new one lands. */
@media (max-width:820px){
  input[type=text],input[type=email],input[type=password],input[type=search],
  input[type=tel],input[type=url],input[type=number],input[type=date],
  input[type=time],input[type=datetime-local],input[type=month],
  input[type=week],input:not([type]),select,textarea{font-size:16px!important}
  input[type=file]{font-size:.95rem!important}
}

/* 2 · Wide tables admit that they scroll.
   Tables in a panel already scrolled sideways below 640px — the campaign
   table is 581px inside a 356px panel — but nothing on screen said so, and a
   column sliced off mid-word reads as missing data, not as more to come.
   These are scrolling shadows. The two opaque gradients are painted with the
   content (background-attachment:local) so they travel with it and slide out
   of the way, uncovering the soft shadows pinned to the edges. The result: a
   shadow on whichever side still has table left, and on no other. It costs
   no wrapper element and no JavaScript. */
@media (max-width:640px){
  .panel__b{
    background-image:
      linear-gradient(to right, var(--surface), transparent),
      linear-gradient(to left,  var(--surface), transparent),
      radial-gradient(farthest-side at 0    50%, rgba(13,37,65,.24), rgba(13,37,65,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(13,37,65,.24), rgba(13,37,65,0));
    background-position:left center,right center,left center,right center;
    background-size:34px 100%,34px 100%,17px 100%,17px 100%;
    background-repeat:no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
}

/* 3 · Controls sized for a thumb.
   Measured: the burger was 38px, the row buttons 26px, and "View site" a
   21px-tall strip of text. 44px is the floor Apple and Google both publish.
   Row buttons sit two to a cell, so they take 34px and get their width back
   instead — enough to hit without turning every table row into a slab. */
@media (pointer:coarse),(max-width:820px){
  .adm__burger{width:44px;height:44px}
  .adm__barview{padding:11px 2px}
  .btn--sm{min-height:34px;padding:.5em 1em}
  .adm__it{min-height:44px}
}


/* Button icons.
   admin_icon() draws on a 24px box at stroke-width 1.7, which is right for a
   19-22px sidebar glyph and too fine at button size. Apparent weight is
   authored-stroke x rendered-px / viewBox, so a 16px icon needs ~2.15 to
   land at the same 1.45px line the nav icons settled on. Sized in em so a
   .btn--sm icon shrinks with its label instead of towering over it. */
.btn svg{width:1.15em;height:1.15em;flex:none;stroke-width:2.15}
.btn--sm svg{stroke-width:2.2}
/* An icon-only button (delete, reorder) would otherwise be a sliver. */
.btn:has(> svg:only-child){padding-inline:.62em}

/* ---- icons: one apparent stroke weight ---------------------------------
   Every icon is drawn in a 24-unit box, so the stroke a person actually sees
   is strokeWidth x renderedSize / 24. Left alone, one shared 1.8 renders at
   1.28px inside a 17px icon and 1.65px inside a 22px one - which is why the
   admin looked subtly uneven without it being obvious why.

   Solving for a constant 1.55px gives each size its own stroke-width. Written
   as the arithmetic rather than the answer, so the next size added is obvious
   and nobody has to reverse-engineer a magic number. */
.adm__mode__ic svg{stroke-width:calc(1.55px * 24 / 17);}
.pjcard__ic svg{stroke-width:calc(1.55px * 24 / 18);}
.qa__ic svg{stroke-width:calc(1.55px * 24 / 20);}
.adm__burger svg,.pjhead__ic svg{stroke-width:calc(1.55px * 24 / 22);}

/* ---- quick actions: all four the same height ---------------------------
   The grid already asks for equal rows, but a subtitle that wraps to a second
   line makes its own row taller than the row beneath it, so the 2x2 came out
   104/104/68/68. Reserving the taller height for every card is what actually
   squares it up; keeping the subtitle to one line stops it happening again. */
.qa__it{min-height:84px;}
.qa__it>span:last-child{min-width:0;}
.qa__it small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- touch targets on phones ------------------------------------------
   Measured at 390px: the row actions on Contacts and Campaigns all sat at 34px
   high - a comfortable mouse target and an uncomfortable thumb one. 40 is the
   compromise: noticeably easier to hit, without making a three-hundred-row
   table half again as long. The buttons are already flex-centred, so a
   min-height keeps the label centred rather than pinning it to the top. */
@media (max-width:820px){
  .btn{min-height:40px;}
  .adm__treefly__x{min-width:40px;min-height:40px;}
}

/* ---- this Sunday --------------------------------------------------------
   Filled in by somebody who has just come off the phone about the roads, on a
   laptop, early. Big targets, no cleverness, and the preview close enough to
   the buttons that reading it is the natural next thing. */
.sa__live{margin:0 0 14px;padding:10px 13px;border-radius:10px;background:rgba(242,193,78,.18);
  border:1px solid rgba(242,193,78,.55);line-height:1.5;}
.sa__live .muted{display:block;margin-top:2px;font-size:.86rem;}
.sa__kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:6px 0 16px;}
.sa__kind{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line,#dfe4ec);background:var(--surface);transition:border-color .15s,background .15s;}
html.dark .sa__kind{background:var(--surface);border-color:var(--line);}
html.dark .sa__kind:hover{border-color:var(--muted-2);}
.sa__kind:hover{border-color:#b9c3d2;}
.sa__kind:has(input:checked){border-color:var(--cyan,#0092b7);background:rgba(0,146,183,.07);}
.sa__kind input{width:17px;height:17px;flex:none;}
.sa__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.sa__grid [hidden]{display:none;}
.sa__acts{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;}
.sa__prev{margin-top:26px;padding-top:20px;border-top:1px solid var(--line,#dfe4ec);}
.sa__prev h3{margin:0 0 4px;font-size:1.05rem;}
.sa__prevrow{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:start;margin-bottom:12px;}
.sa__prevlbl{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#8a97a6);padding-top:9px;}
.sa__phone{padding:11px 13px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line,#dfe4ec);
  display:grid;gap:2px;max-width:420px;}
.sa__phone b{font-size:.92rem;}
.sa__phone span{font-size:.88rem;color:color-mix(in srgb,var(--muted) 85%,transparent);}
.sa__mail{padding:12px 14px;border-radius:11px;background:var(--surface);border:1px solid var(--line,#dfe4ec);max-width:560px;}
.sa__mail b{display:block;margin-bottom:7px;}
.sa__mail pre{margin:0;white-space:pre-wrap;font:inherit;font-size:.9rem;line-height:1.55;color:rgba(68,80,97,.9);}
.sa__reach{margin:16px 0 0;font-size:.94rem;line-height:1.55;}
.sa__reach .muted{display:block;font-size:.86rem;}
.sa__sentnote{margin:12px 0 0;font-size:.92rem;line-height:1.5;}
.sa__sentnote .muted{display:block;font-size:.86rem;}


/* .........................................................
   TUTORIAL VIDEOS
   The button sits at the top of the content column rather than in the top
   bar, because that bar only exists below 960px and the button has to be
   there on a desktop too.
   ......................................................... */
.admtutbar{display:flex;justify-content:flex-end;margin:0 0 -10px}
.admtutbar:empty{display:none}
.adm__bartut{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font:inherit;font-size:.84rem;font-weight:700;padding:7px 14px;border-radius:100px;
  cursor:pointer;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.adm__bartut svg{width:17px;height:17px;flex:none}
.adm__bartut:hover{border-color:#0092b7;box-shadow:0 6px 16px -10px rgba(13,37,65,.5);transform:translateY(-1px)}
.adm__bartut--add{color:var(--muted);font-weight:600;border-style:dashed}
.adm__bartut--add:hover{color:var(--ink)}

.admtut[hidden]{display:none}
.admtut{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;
  background:rgba(7,20,38,.72);backdrop-filter:blur(3px)}
.admtut__box{width:min(920px,100%);background:#0d1117;border-radius:16px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.admtut__head{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;color:#fff}
.admtut__t{font-weight:700;font-size:.95rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admtut__x{border:0;background:rgba(255,255,255,.12);color:#fff;width:34px;height:34px;border-radius:50%;
  font-size:1.35rem;line-height:1;cursor:pointer;flex:none}
.admtut__x:hover{background:rgba(255,255,255,.22)}
.admtut__frame{position:relative;aspect-ratio:16/9;background:#000}
.admtut__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.admtut__yt{display:block;padding:11px 18px;color:rgba(255,255,255,.8);font-size:.82rem;font-weight:600;text-decoration:none}
.admtut__yt:hover{color:#fff}

/* the Tutorials page itself */
.tut{display:grid;gap:2px}
.tut__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;
  padding:12px 2px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.tut__row:first-child{border-top:0}
.tut__name{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.tut__go{font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:none}
.tut__go:hover{color:#0092b7;text-decoration:underline}
.tut__form{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tut__form input{font:inherit;font-size:.86rem;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.tut__form input[name="url"]{width:min(260px,52vw)}
.tut__form input[name="title"]{width:min(200px,42vw)}
.tut__thumb{display:block;width:104px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0d1117;flex:none}
.tut__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tut__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.tut__title{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tut__sub{font-size:.76rem;color:var(--muted)}
.tut__row:has(.tut__thumb){grid-template-columns:minmax(0,1fr) 104px minmax(0,190px) auto}
@media(max-width:760px){
  .tut__row,.tut__row:has(.tut__thumb){grid-template-columns:1fr}
  .tut__form{justify-content:flex-start}
}

.tut__hint{font-size:.85rem;color:var(--muted);margin-top:6px}
.tut__hint strong{color:var(--ink)}

/* saving in the background */
html.is-livebusy{cursor:progress}
html.is-livebusy .adm__main{opacity:.72;transition:opacity .12s}
.admlive__said{position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);z-index:200;
  background:#0d2541;color:#fff;font-weight:700;font-size:.86rem;padding:9px 18px;border-radius:100px;
  box-shadow:0 14px 30px -14px rgba(13,37,65,.7);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s}
.admlive__said.is-on{opacity:1;transform:translate(-50%,0)}
.note.is-flash{animation:admnote .9s ease-out}
@keyframes admnote{0%{transform:scale(.99);box-shadow:0 0 0 0 rgba(0,146,183,.35)}
  40%{box-shadow:0 0 0 7px rgba(0,146,183,0)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){
  .admlive__said,.note.is-flash{transition:none;animation:none}
  html.is-livebusy .adm__main{transition:none}
}