/* =====================================================================
   The Lead Center system (ascension-estates admin/leads) in TeamBlinc
   colors: off-white ground, white cards lifted by one soft shadow, navy
   ink, light blue as the single accent. Fills, space and the lift separate things; no borders,
   no hairlines. One easing curve. Every control is 44px tall with the
   same radius and font; form inputs are 54px at 17px so iOS never zooms.
   ===================================================================== */
:root{
  /* White and light blue: a cool white ground, white cards, light blue accent,
     navy ink. Red is for errors only. Every color on the page is one of these tokens; the *-rgb
     triplets feed rgba() for tints and shadows. */
  --ink-rgb:15,34,54;--blue-rgb:100,181,240;--bg-rgb:244,248,252;
  --bg:#F4F8FC;--card:#FFFFFF;--media:#EAF2FA;
  --inset:rgba(var(--ink-rgb),.04);--field:rgba(var(--ink-rgb),.05);--press:rgba(var(--ink-rgb),.07);
  --scrim:rgba(var(--ink-rgb),.32);--ink:#0F2236;--ink-soft:#3A4B5E;--ink-2:#66727F;--ink-3:rgba(var(--ink-rgb),.40);
  --accent:#64B5F0;--accent-strong:#4A9FDF;--accent-text:#1E6DB0;--chip:rgba(var(--blue-rgb),.18);
  --btn-bg:#64B5F0;--btn-ink:#0F2236;--btn-press:#4A9FDF;
  --toast-bg:#0F2236;--toast-ink:#FFFFFF;
  --danger:#C0392B;--ok:#2E8B57;
  --seg-bg:rgba(var(--ink-rgb),.06);--seg-on:#FFFFFF;--seg-shadow:0 1px 4px rgba(var(--ink-rgb),.14);
  --lift:0 9px 18px -11px rgba(var(--ink-rgb),.34),0 1px 3px rgba(var(--ink-rgb),.05);
  --r-nested:12px;--r-card:16px;--r-hero:24px;--ease:cubic-bezier(.2,.8,.2,1);
  --ctl:44px;
  --font-display:'Marcellus',Georgia,'Times New Roman',serif;
  --font-body:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);min-height:100vh;-webkit-tap-highlight-color:transparent;font-variant-numeric:lining-nums}
button,input,select,textarea{font-family:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
a{color:var(--accent-text)}
.wrap{max-width:1180px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 120px max(24px,env(safe-area-inset-left))}
.dim{color:var(--ink-2)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------- controls */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--ctl);padding:0 16px;border:0;border-radius:var(--r-nested);
  background:var(--field);color:var(--ink);font:600 15px/1.1 var(--font-body);white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:transform .14s var(--ease),background-color .2s var(--ease),opacity .2s var(--ease)}
.btn:active{transform:scale(.98);background:var(--press)}
.btn.primary{background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--lift)}
.btn.primary:active{background:var(--btn-press)}
.btn.soft{background:var(--chip);color:var(--accent-text)}
.btn.on-paper{background:var(--card);box-shadow:var(--lift)}
.btn.link{background:none;color:var(--accent-text);padding:0 4px}
.btn.danger{background:none;color:var(--danger);padding:0 4px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.btn[aria-busy=true]{opacity:.6;cursor:progress}
.tbadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--btn-ink);font:700 12px/1 var(--font-body);font-variant-numeric:tabular-nums}
.ibtn{position:relative;display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);border:0;border-radius:var(--r-nested);background:var(--field);color:var(--ink);cursor:pointer;flex:none;text-decoration:none;transition:transform .14s var(--ease)}
.ibtn:active{transform:scale(.92)}
.ibtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ibtn.on-paper{background:var(--card);box-shadow:var(--lift)}
.fld{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--ctl);padding:0 12px 0 14px;border-radius:var(--r-nested);background:var(--card);box-shadow:var(--lift);min-width:0}
.fld svg{flex:none;width:18px;height:18px;stroke:var(--accent-strong);fill:none;stroke-width:2;stroke-linecap:round}
.fld input{flex:1;min-width:0;height:var(--ctl);border:0;background:none;font:500 16px/1 var(--font-body);color:var(--ink);caret-color:var(--accent-strong);-webkit-appearance:none;appearance:none}
.fld input::placeholder{color:var(--ink-2);opacity:1}
.fld input::-webkit-search-cancel-button{-webkit-appearance:none}
.fld:has(input:focus){box-shadow:var(--lift),0 0 0 2px var(--accent-strong)}
.fld input:focus-visible{outline:none}
.fld .clr{position:relative;flex:none;width:26px;height:26px;border:0;border-radius:999px;background:var(--field);color:var(--ink-2);font-size:16px;line-height:1;cursor:pointer}
.fld .clr::after{content:'';position:absolute;inset:-9px}
/* A dropdown: a native select laid over a face that says what it is. */
.selx{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl);padding:0 34px 0 14px;border-radius:var(--r-nested);background:var(--card);box-shadow:var(--lift);
  font:600 15px/1.2 var(--font-body);color:var(--ink);white-space:nowrap;max-width:100%;min-width:0;cursor:pointer}
.selx .v{overflow:hidden;text-overflow:ellipsis;min-width:0}
.selx>svg{position:absolute;right:13px;top:50%;width:11px;height:11px;margin-top:-5px;stroke:var(--ink-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.selx select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.selx:has(select:focus-visible){box-shadow:var(--lift),0 0 0 2px var(--accent-strong)}
.drawer .selx{background:var(--field);box-shadow:none;display:flex;width:100%;min-height:54px;font-size:16px}
.seg{display:flex;gap:2px;padding:3px;border-radius:var(--r-nested);background:var(--seg-bg);min-height:var(--ctl)}
.seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--ink-2);font:600 15px/1 var(--font-body);cursor:pointer;white-space:nowrap;transition:opacity .2s}
.seg button:active{opacity:.65}
.seg button[aria-pressed=true]{background:var(--seg-on);color:var(--ink);box-shadow:var(--seg-shadow)}
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift);padding:16px 18px;min-width:0}
.card>h3{display:block;font:700 12.5px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin:0 0 12px}
.tag{display:inline-flex;align-items:center;gap:2px;min-height:28px;padding:4px 10px;font-size:14px;line-height:1.3;border-radius:8px;background:var(--inset);color:var(--ink-soft);margin:0 6px 6px 0;max-width:100%;overflow-wrap:anywhere;vertical-align:top}
.chev{width:9px;height:15px;flex:none;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-bar{display:block;height:12px;border-radius:999px;background:var(--media);position:relative;overflow:hidden}
.sk-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(var(--blue-rgb),.22),transparent);transform:translateX(-100%);animation:sk 1.6s var(--ease) infinite}
@keyframes sk{to{transform:translateX(100%)}}
.rise{animation:rise .6s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.x{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:999px;background:none;color:var(--ink-3);cursor:pointer;transition:background-color .2s,color .2s,transform .14s var(--ease)}
.x::after{content:'';position:absolute;inset:-7px}
.x:hover{background:var(--field);color:var(--ink-2)}
.x:active{transform:scale(.92)}
.x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* ------------------------------------------------------------ header */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 10px}
.top h1{font:400 30px/1.1 var(--font-display);letter-spacing:.01em;min-width:0}
.top h1 span{color:var(--accent)}
.top .acts{display:flex;gap:8px;align-items:center;flex:none}
.vnav{display:flex;gap:4px;margin:6px 0 20px}
.vnav a{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:var(--ctl);padding:0 16px;border-radius:var(--r-nested);color:var(--ink-2);font:600 16px/1 var(--font-body);text-decoration:none;transition:background-color .2s var(--ease),color .2s}
.vnav a:hover{color:var(--ink)}
.vnav a.on{background:var(--card);color:var(--ink);box-shadow:var(--lift)}
.me{position:relative}
.me>button{display:grid;place-items:center;width:var(--ctl);height:var(--ctl);border:0;border-radius:999px;background:var(--chip);color:var(--accent-text);font:700 16px/1 var(--font-body);cursor:pointer}
.menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:230px;padding:8px;border-radius:var(--r-card);background:var(--card);box-shadow:0 16px 36px -14px rgba(var(--ink-rgb),.45),0 1px 3px rgba(var(--ink-rgb),.06)}
.menu .who{padding:8px 10px 10px;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.menu a,.menu button{display:flex;width:100%;align-items:center;min-height:var(--ctl);padding:0 10px;border:0;border-radius:10px;background:none;color:var(--ink);font:500 15px/1 var(--font-body);text-decoration:none;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--field)}

/* ----------------------------------------------------------- records */
.pp-sent{height:1px;margin-bottom:-1px}
.pp-bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 8px 10px;margin:0 -8px;border-radius:0 0 var(--r-card) var(--r-card);transition:background-color .26s var(--ease),box-shadow .26s var(--ease)}
.pp-bar.stuck{background:rgba(var(--bg-rgb),.82);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);box-shadow:0 10px 20px -18px rgba(var(--ink-rgb),.40)}
.pp-bar .fld{flex:1 1 280px}
.pp-bar .sort{display:flex;gap:6px;flex:none}
.pp-meta{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-height:36px;margin:2px 2px 10px;font-size:14.5px;color:var(--ink-2)}
.pp-meta b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.fchip{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 6px 0 12px;border:0;border-radius:999px;background:var(--chip);color:var(--accent-text);font:600 14px/1 var(--font-body);cursor:pointer}
.fchip i{font-style:normal;font-size:17px;padding:0 4px;line-height:1}
.fchip::after{content:'';position:absolute;inset:-6px 0}
.pp-meta .btn.link{min-height:32px;font-size:14.5px}
.pgrid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:1100px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pt{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 14px;border-radius:var(--r-nested);background:var(--card);box-shadow:var(--lift);color:inherit;text-decoration:none;transition:transform .16s var(--ease)}
.pt:active{transform:scale(.985)}
.pt-m{flex:1;min-width:0;display:grid;gap:4px}
.pt-m b{font:600 16px/1.25 var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-m span{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-d{flex:none;font-size:14px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;text-align:right;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt.sk{pointer-events:none}
/* The mug shot, or the initials until there is one. */
.mug{position:relative;display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;overflow:hidden;background:var(--chip);color:var(--accent-text);font:700 15px/1 var(--font-body);letter-spacing:.02em}
.mug img{width:100%;height:100%;object-fit:cover;display:block}
.mug.xl{width:104px;height:128px;border-radius:var(--r-card);font-size:30px;box-shadow:var(--lift)}
.pp-more{display:flex;justify-content:center;padding:16px 0}
.msg{padding:28px 20px;text-align:center;color:var(--ink-2);font-size:15px;line-height:1.6;background:var(--card);border-radius:var(--r-card);box-shadow:var(--lift)}
.msg b{display:block;color:var(--ink);font:400 23px/1.2 var(--font-display);margin-bottom:12px}

/* ------------------------------------------------------------ record */
.rec-head{display:flex;align-items:flex-end;gap:16px;margin:0 0 18px;flex-wrap:wrap}
.rec-head .back{align-self:flex-start}
.rec-head h2{flex:1 1 240px;min-width:0;font:400 32px/1.1 var(--font-display);overflow-wrap:anywhere;padding-bottom:4px}
.rec-head .acts{display:flex;gap:8px;align-items:center}
.dbanner{background:var(--chip);border-radius:var(--r-nested);padding:12px 14px;font-size:15px;line-height:1.5;margin:0 0 16px;color:var(--ink)}
.dbanner a{font-weight:600}
.rec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.rec-grid .col{display:grid;gap:16px;min-width:0}
@media(max-width:1060px){.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rec-grid .col:nth-child(3){grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
@media(max-width:720px){.rec-grid,.rec-grid .col:nth-child(3){grid-template-columns:1fr}}
/* Label over value, two to a row; long things take the row. */
.kvg{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px 16px}
.kv{display:grid;gap:3px;min-width:0;align-content:start}
.kv.wide{grid-column:1/-1}
.kv .k{font-size:13px;color:var(--ink-2)}
.kv .v{font-size:15.5px;line-height:1.45;overflow-wrap:anywhere}
.kv .v .tag{font-size:14px}
.vic{display:flex;align-items:center;gap:10px;min-height:40px;font-size:15.5px}
.vic+.vic{margin-top:2px}
.vic i{font-style:normal;display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:999px;background:var(--chip);color:var(--accent-text);font:700 13px/1 var(--font-body)}
.art{display:grid;gap:2px;padding:8px 0}
.art a{font:600 15.5px/1.4 var(--font-body);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.art a:hover{text-decoration:underline}
.art span{font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}

/* -------------------------------------------------------------- edit */
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px 12px}
.fl{display:grid;gap:6px;min-width:0;align-content:start}
.fl.wide{grid-column:1/-1}
.fl>.k{font-size:13px;font-weight:600;color:var(--ink-2)}
.in{width:100%;min-width:0;height:54px;padding:0 14px;border:0;border-radius:var(--r-nested);background:var(--field);font:500 17px/1.2 var(--font-body);color:var(--ink);-webkit-appearance:none;appearance:none}
textarea.in{height:auto;min-height:96px;padding:14px;resize:vertical;line-height:1.45}
.in::placeholder{color:var(--ink-2);opacity:1}
.in:focus{box-shadow:0 0 0 2px var(--accent-strong)}
.in:focus-visible{outline:none}
input[type=date].in{padding-right:8px}
.fl .seg{min-height:54px}
.fl .seg button{min-height:48px;font-size:16px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:54px;padding:8px;border-radius:var(--r-nested);background:var(--field)}
.chips:focus-within{box-shadow:0 0 0 2px var(--accent-strong)}
.chips .tag{margin:0;background:var(--card);box-shadow:0 1px 2px rgba(var(--ink-rgb),.08);font-size:15px;padding:4px 4px 4px 10px}
.chips .tag button{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:999px;background:none;color:var(--ink-3);font-size:17px;line-height:1;cursor:pointer}
.chips .tag button:hover{color:var(--danger);background:var(--field)}
.chips input{flex:1 1 120px;min-width:100px;height:36px;border:0;background:none;padding:0 6px;font:500 17px/1.2 var(--font-body);color:var(--ink)}
.chips input:focus-visible{outline:none}
.edit-grid{display:grid;gap:16px;max-width:860px}
.edit-grid .fg{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rows{display:grid;gap:10px}
.rows:empty{display:none}
.vrow,.arow{position:relative;display:grid;gap:8px;padding:10px 46px 10px 10px;border-radius:var(--r-nested);background:var(--inset)}
.vrow{grid-template-columns:96px minmax(0,1fr) minmax(0,1.5fr)}
.arow{grid-template-columns:minmax(0,1fr) 190px}
.arow [data-f=url]{grid-column:1/-1}
.vrow>.x,.arow>.x{position:absolute;top:18px;right:8px}
.vrow .in,.arow .in{height:46px;background:var(--card);font-size:16px}
.vrow .seg{background:var(--card);min-height:46px}
.vrow .seg button{min-height:40px;font-size:15px;padding:0 6px}
.vrow .seg button[aria-pressed=true]{background:var(--btn-bg);color:var(--btn-ink)}
@media(max-width:640px){.vrow{grid-template-columns:84px minmax(0,1fr)}.vrow [data-key=student]{grid-column:1/-1}.arow{grid-template-columns:1fr}}
.addrow{justify-self:start}
.pick{cursor:pointer}
.pick:hover{filter:brightness(.97)}
.pick input{display:none}
.mugwrap{position:relative}
.mugwrap .x{position:absolute;top:-8px;right:-8px;background:var(--card);box-shadow:var(--lift);color:var(--ink-2)}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(var(--bg-rgb),.86);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);box-shadow:0 -10px 20px -18px rgba(var(--ink-rgb),.40)}
.savebar>div{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%;max-width:1132px}
.savebar>div>div{display:flex;justify-content:flex-end;gap:10px;width:100%;max-width:860px;margin-right:auto}
.savebar .btn.primary{min-width:120px}

/* ------------------------------------------------------------- inbox */
.ib-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 12px}
.ib-head .pp-meta{margin:0}
.tlist{display:grid;gap:10px}
.trow{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r-card);background:var(--card);box-shadow:var(--lift);min-width:0;transition:opacity .24s var(--ease),transform .24s var(--ease)}
.trow.gone{opacity:0;transform:scale(.97)}
.trow .who{flex:1;min-width:0;display:grid;gap:4px}
.trow .who a.t{font:700 16.5px/1.35 var(--font-body);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.trow .who a.t:hover{text-decoration:underline}
.trow .who .s{font-size:14px;color:var(--ink-2)}
.trow .who .n{font-size:14.5px;font-weight:600;color:var(--accent-text)}
.trow .who .q{font-size:15px;line-height:1.45;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trow .who .m{justify-self:start;font-size:14.5px;font-weight:600}
.trow .acts{display:flex;gap:6px;align-items:center;flex:none}
@media(max-width:560px){.trow{flex-direction:column;gap:12px}.trow .acts{align-self:stretch}.trow .acts .btn{flex:1}}

/* ------------------------------------------------------------ sheets */
#overlay{position:fixed;inset:0;z-index:80}
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;transition:opacity 240ms var(--ease)}
#overlay.in .scrim{opacity:1}
.drawer{position:fixed;left:0;right:0;bottom:0;margin:0 auto;width:100%;max-width:560px;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--card);color:var(--ink);
  border-radius:var(--r-hero) var(--r-hero) 0 0;padding:12px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -20px 40px -20px rgba(var(--ink-rgb),.35);transform:translateY(16px);opacity:0;transition:transform 280ms var(--ease),opacity 220ms var(--ease)}
#overlay.in .drawer{transform:none;opacity:1}
.drawer .grab{width:38px;height:5px;border-radius:999px;background:rgba(var(--ink-rgb),.14);margin:0 auto 16px}
@media(min-width:761px){
  .drawer{top:50%;bottom:auto;left:50%;right:auto;margin:0;width:min(520px,calc(100vw - 48px));max-height:88vh;border-radius:var(--r-hero);padding:24px 28px 28px;transform:translate(-50%,-47%)}
  #overlay.in .drawer{transform:translate(-50%,-50%)}
  .drawer .grab{display:none}
}
.drawer h2{font:400 27px/1.15 var(--font-display);margin:0 0 18px}
.drawer .body{display:grid;gap:12px}
.drawer .range{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drawer .foot{display:flex;gap:10px;margin-top:20px}
.drawer .foot .btn{flex:1;min-height:52px;font-size:16px}
.drawer .none{font-size:15px;color:var(--ink-2);padding:6px 2px}

/* The one toast, with Undo when there is something to undo. */
.utoast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:95;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);min-height:52px;padding:8px 18px;border-radius:var(--r-card);
  background:var(--toast-bg);color:var(--toast-ink);font:600 15px/1.35 var(--font-body);box-shadow:0 14px 30px -14px rgba(var(--ink-rgb),.6);opacity:0;transform:translate(-50%,12px);transition:opacity .24s var(--ease),transform .24s var(--ease);pointer-events:none}
.utoast.in{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.utoast.err{background:var(--danger)}
.utoast.up{bottom:calc(92px + env(safe-area-inset-bottom))}
.utoast button{flex:none;min-height:36px;margin-right:-8px;padding:0 14px;border:0;border-radius:10px;background:rgba(255,255,255,.16);color:var(--toast-ink);font:700 15px/1 var(--font-body);cursor:pointer}
.signedout{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:14px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--toast-bg);color:var(--toast-ink);font:600 15px/1.3 var(--font-body)}
.signedout a{color:var(--toast-bg);background:var(--toast-ink);border-radius:8px;padding:8px 16px;text-decoration:none}

@media(max-width:760px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .top h1{font-size:25px}
  .rec-head h2{font-size:27px}
  .mug.xl{width:84px;height:104px}
  .pp-bar .fld{flex-basis:100%}
  .pp-bar .sort{flex:1}
  .pp-bar .sort .selx{flex:1}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ----------------------------------------------------------- sign in */
.si{display:flex;flex-direction:column;justify-content:center;gap:22px;min-height:100vh;min-height:100dvh;max-width:420px;margin:0 auto;padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
.si h1{font:400 30px/1.15 var(--font-display);letter-spacing:.01em;text-align:center}
.si h1 span{color:var(--accent)}
.si-card{display:grid;gap:12px;padding:24px;border-radius:var(--r-hero);background:var(--card);box-shadow:var(--lift)}
.si-card .btn.primary{min-height:54px;font-size:16px}
.si-card .btn.link{justify-self:center;min-height:36px;font-size:15px}
.si .in.code{text-align:center;font:700 28px/1 var(--font-body);letter-spacing:.32em;padding-left:calc(14px + .32em)}
.si-to{font-size:15px;color:var(--ink-2);text-align:center;overflow-wrap:anywhere}
.si-err{font-size:14.5px;line-height:1.4;color:var(--danger)}
.si-err:empty{display:none}
.si .in.code::placeholder{color:var(--ink-3)}

/* ---------------------------------------- record header: photo on the edge */
/* The photo lines up with the cards below; on wide screens the back arrow
   sits out in the margin instead of pushing the photo in. */
.rec-head{position:relative}
@media(min-width:1290px){.rec-head .back{position:absolute;left:-64px;top:0}}
.mugwrap .fns.on-photo{position:absolute;left:8px;bottom:8px}

/* --------------------------------------------------------------- sources */
.fns{display:inline-flex;gap:4px;margin-left:8px;vertical-align:1px}
.fns a{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--chip);color:var(--accent-text);font:700 11.5px/1 var(--font-body);letter-spacing:0;text-decoration:none}
.fns a:hover{background:var(--accent);color:var(--btn-ink)}
.fns.on-photo a{background:var(--card);box-shadow:var(--lift)}
.art{display:flex;gap:10px;align-items:flex-start;padding:8px 0;scroll-margin-top:24px}
.art>i{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:999px;background:var(--chip);color:var(--accent-text);font:700 12px/1 var(--font-body);font-style:normal}
.art>div{display:grid;gap:2px;min-width:0}
.art:target{background:var(--chip);border-radius:var(--r-nested);margin:0 -8px;padding:8px}
.covers{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.covers b{font:600 12px/1 var(--font-body);color:var(--ink-soft);background:var(--inset);border-radius:6px;padding:4px 7px}
.covers-pick{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.cv{min-height:34px;padding:0 11px;border:0;border-radius:999px;background:var(--card);color:var(--ink-2);font:600 13.5px/1 var(--font-body);cursor:pointer}
.cv[aria-pressed=true]{background:var(--accent);color:var(--btn-ink)}

/* ----------------------------------------------------------- inbox tabs */
.ib-head .ib-tabs{flex:none;min-height:var(--ctl)}
.ib-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 16px;border-radius:9px;color:var(--ink-2);font:600 15px/1 var(--font-body);text-decoration:none}
.ib-tabs a[aria-selected=true]{background:var(--seg-on);color:var(--ink);box-shadow:var(--seg-shadow)}
.ib-tabs .n{font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ib-head .fld{flex:1 1 240px;max-width:420px}
.trow .acts .btn.on-paper{box-shadow:none;background:var(--field)}

/* ---------------------------------------------------- picker and people */
.pick-list{display:grid;gap:8px;max-height:min(52vh,460px);overflow-y:auto;padding:2px}
.pick-list .pt{box-shadow:none;background:var(--field);min-height:60px}
.drawer .fld{background:var(--field);box-shadow:none}
.invite{display:flex;gap:10px;margin-bottom:16px}
.invite .in{flex:1}
.invite .btn{min-height:54px;padding:0 20px}
.people{display:grid;gap:2px}
.person-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 2px}
.person-row .em{flex:1;min-width:0;font-size:15.5px;overflow-wrap:anywhere}
.person-row .tag{margin:0}

/* Safari fills an empty date field with today; grey it. */
.in[type=date].empty{color:var(--ink-3)}
@media(max-width:560px){.ib-head{flex-wrap:wrap}.ib-head .fld{max-width:none}}

/* ------------------------------------------------------ official records */
.officials .same{margin-left:8px;padding:3px 8px;border-radius:999px;background:var(--inset);color:var(--ink-2);font:600 11px/1 var(--font-body);letter-spacing:.02em;text-transform:none;vertical-align:1px}
.off{display:flex;align-items:center;gap:12px;padding:8px 0}
.off+.off{margin-top:2px}
.off>div{flex:1;display:grid;gap:2px;min-width:0}
.off b{font:600 15px/1.35 var(--font-body)}
.off span{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.off a{font-size:13.5px;font-weight:600;text-decoration:none;justify-self:start}
.off .btn{flex:none;min-height:36px;padding:0 14px}
#editor #officials .card{margin-bottom:16px;max-width:860px}