/* ==========================================================================
   Popup sheets: the one look every popup on the site shares (sheet.js).

   A dark glass card with a light hairline across its top edge; a head with
   an icon tile, the title and one line under it, over a hairline; the body,
   which scrolls on its own; then the actions in a foot. On phones it rises
   from the bottom of the screen instead. Pages load this the way they load
   nav.css, so no popup restates it.
   ========================================================================== */
.sheet-bg{position:fixed;inset:0;z-index:2147481700;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  background:rgba(3,4,12,.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .22s ease}
.sheet-bg.in{opacity:1}
/* a toast raised while a sheet is open still shows over it */
.toast,.spf-toast{z-index:2147481900 !important}

.sheet{position:relative;width:100%;max-width:460px;margin:auto;display:flex;flex-direction:column;max-height:calc(100dvh - 40px);
  border-radius:22px;overflow:hidden;text-align:left;color:var(--ink,#ECE7F7);
  background:radial-gradient(120% 60% at 50% 0%,rgba(37,99,235,.14),transparent 60%),linear-gradient(180deg,#131a31,#0b1022);
  border:1px solid rgba(147,165,255,.2);box-shadow:0 50px 120px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(14px) scale(.98);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.sheet-bg.in .sheet{transform:none}
.sheet::before{content:"";position:absolute;z-index:2;top:0;left:16%;right:16%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(165,180,252,.7),transparent)}
.sheet.sm{max-width:420px}
.sheet.wide{max-width:760px}
.sheet.xl{max-width:1080px}

/* a popup whose markup lives in the page (.sheet-bg.static): its own script
   shows it by adding .show and hides it by taking .show off; the fade and
   the rise run each time it's shown */
.sheet-bg.static{display:none;opacity:1;transition:none}
.sheet-bg.static.show{display:flex;animation:sheetFade .22s ease both}
.sheet-bg.static.show > .sheet{transform:none;transition:none;animation:sheetRise .32s cubic-bezier(.16,1,.3,1) both}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}
@keyframes sheetRise{from{transform:translateY(14px) scale(.98)}to{transform:none}}
@keyframes sheetRiseUp{from{transform:translateY(40px)}to{transform:none}}

/* ---- head: icon tile, title, one line ---- */
.sheet-head{flex:0 0 auto;display:flex;align-items:center;gap:13px;padding:18px 18px 16px 22px;border-bottom:1px solid rgba(147,165,255,.12);
  background:radial-gradient(90% 140% at 0% 0%,rgba(59,130,246,.14),transparent 60%)}
/* a glyph tile: the accent's own colour on a glass tint of it (--m is its rgb) */
.sheet-mark{--m:125,168,255;flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:rgb(var(--m));
  background:linear-gradient(155deg,rgba(var(--m),.24),rgba(var(--m),.07) 70%);
  box-shadow:inset 0 0 0 1px rgba(var(--m),.3),inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -14px rgba(var(--m),.9)}
.sheet-mark svg{width:21px;height:21px;display:block}
.sheet-mark.teal{--m:94,234,212}
.sheet-mark.violet{--m:180,160,255}
.sheet-mark.red{--m:252,129,129}
.sheet-mark.amber{--m:252,200,90}
/* a picture instead: a round photo with a thin ring in the tone */
.sheet-mark.pfp{width:42px;height:42px;border-radius:50%;overflow:hidden;background:rgba(var(--m),.14);
  box-shadow:0 0 0 2px #121930,0 0 0 3.5px rgba(var(--m),.5),0 10px 24px -12px rgba(var(--m),.8)}
.sheet-mark.pfp > img{width:100%;height:100%;object-fit:cover;display:block}
/* a business's picture (bizmark.js) keeps its rounded square */
.sheet-mark.pfp:has(> .bzm){border-radius:13px}
.sheet-mark.pfp > .bzm{--sz:42px;border-radius:13px;box-shadow:none}
/* the AI gradient mark (base.css .ai-mark) in a tile */
.sheet-mark > .ai-mark{width:20px;height:20px}
.sheet-mark.pfp > .pfp-i{width:100%;height:100%;display:grid;place-items:center;font:650 16px/1 'Geist',system-ui,sans-serif;
  color:hsl(var(--h,225) 85% 84%);background:hsl(var(--h,225) 60% 45% / .28)}
.sheet-head.bare{padding-left:24px}
.sheet-t{flex:1;min-width:0}
.sheet-t h3{margin:0 0 3px;font:600 17px/1.25 'Geist',system-ui,sans-serif;letter-spacing:-.015em;color:#F4F2FB;overflow-wrap:anywhere}
.sheet-t p{margin:0;font-size:12.5px;line-height:1.45;color:#929FC8;overflow-wrap:anywhere}
.sheet-x{flex:0 0 auto;align-self:flex-start;width:32px;height:32px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--muted,#9A8CB8);background:rgba(255,255,255,.04);border:1px solid rgba(147,165,255,.14);transition:color .15s,background .15s,border-color .15s}
.sheet-x:hover{color:var(--ink,#ECE7F7);background:rgba(255,255,255,.08);border-color:rgba(147,165,255,.3)}
.sheet-x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.35)}
.sheet-x svg{width:13px;height:13px}

/* ---- body ---- */
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 22px 20px;
  font-size:13.5px;line-height:1.55;color:#AEB8D8}
.sheet-copy{margin:0 0 12px}
.sheet-copy:last-child{margin-bottom:0}
.sheet-copy b{color:#EEF1FA;font-weight:600}
/* a heading for a group inside the body */
.sheet-sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:20px 0 9px;
  font:600 13px/1.3 'Geist',system-ui,sans-serif;color:#EEF1FA}
.sheet-sh:first-child{margin-top:0}
.sheet-sh small{font-weight:500;font-size:12px;color:var(--faint,#6B5E85)}
/* facts: label on the left, value on the right, one per row */
.sheet-facts{display:flex;flex-direction:column;border:1px solid rgba(147,165,255,.12);border-radius:13px;background:rgba(255,255,255,.02);overflow:hidden}
.sheet-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 13px;border-top:1px solid rgba(147,165,255,.08);font-size:13px}
.sheet-facts > div:first-child{border-top:0}
.sheet-facts > div > span:first-child{flex:0 0 auto;color:var(--muted,#9A8CB8)}
.sheet-facts > div > :last-child{min-width:0;text-align:right;color:var(--ink,#ECE7F7);overflow-wrap:anywhere}
.sheet-facts.two{display:grid;grid-template-columns:1fr 1fr}
.sheet-facts.two > div:nth-child(2){border-top:0}
.sheet-facts.two > div:nth-child(odd){border-right:1px solid rgba(147,165,255,.08)}
@media (max-width:560px){ .sheet-facts.two{grid-template-columns:1fr} .sheet-facts.two > div:nth-child(2){border-top:1px solid rgba(147,165,255,.08)} .sheet-facts.two > div{border-right:0 !important} }
/* a status in words, with a dot: used instead of a pill */
.sheet-dot{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sheet-dot::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--dot,#93A5FF);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot,#93A5FF) 18%,transparent)}
.sheet-dot.ok{--dot:#34D399}
.sheet-dot.warn{--dot:#FBBF24}
.sheet-dot.err{--dot:#F87171}
.sheet-dot.off{--dot:#6B7390}
/* the dot is for what needs a look (amber, red); a fine, finished or
   neutral status is just its words */
.sheet-dot:not(.warn):not(.err)::before{display:none}
/* a note in a tinted box */
.sheet-note{margin:0 0 14px;padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.5;color:#C9D2EE;
  background:rgba(37,99,235,.07);border:1px solid rgba(96,165,250,.2)}
.sheet-note.warn{color:#FDE7B0;background:rgba(245,158,11,.07);border-color:rgba(251,191,36,.26)}
.sheet-note.err{color:#FECACA;background:rgba(239,68,68,.07);border-color:rgba(248,113,113,.28)}
.sheet-note:last-child{margin-bottom:0}

/* ---- fields ---- */
.sheet-field{display:block;margin:0 0 14px}
.sheet-field:last-child{margin-bottom:0}
.sheet-label,.sheet-field > span{display:block;margin:0 0 7px;font:600 12.5px/1.3 'Geist',system-ui,sans-serif;letter-spacing:normal;text-transform:none;color:var(--muted,#9A8CB8)}
.sheet-field > span i{font-style:normal;font-weight:500;color:var(--faint,#6B5E85)}
.sheet-field .spf-dd{display:block;width:100%}
.sheet-input{display:block;width:100%;min-width:0;padding:11px 13px;border-radius:11px;outline:none;font:inherit;font-size:14px;line-height:1.4;color:var(--ink,#ECE7F7);
  background:rgba(6,8,20,.6);border:1px solid rgba(147,165,255,.18);transition:border-color .15s,box-shadow .15s,background .15s}
.sheet-input:focus{border-color:var(--electric,#2563EB);box-shadow:0 0 0 3px rgba(37,99,235,.18);background:rgba(6,8,20,.75)}
.sheet-input::placeholder{color:rgba(154,140,184,.6)}
/* fields in a sheet show focus with their own ring, not base.css's outline;
   number fields lose the browser's spinner */
.sheet :is(input,select,textarea):focus-visible{outline:none}
.sheet input[type=number]{-moz-appearance:textfield;appearance:textfield}
.sheet input[type=number]::-webkit-inner-spin-button,.sheet input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sheet input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.75);cursor:pointer}
textarea.sheet-input{min-height:88px;resize:vertical}
.sheet-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-bottom:14px}
.sheet-row > .sheet-field{margin-bottom:0}
@media (max-width:560px){ .sheet-row{grid-template-columns:1fr;gap:14px 0} }

/* ---- foot: the actions ---- */
.sheet-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:14px 22px 18px;
  border-top:1px solid rgba(147,165,255,.1);background:rgba(255,255,255,.015)}
.sheet-foot .grow{flex:1 1 auto}
.sheet-foot .sheet-hint{margin-right:auto;font-size:12px;color:var(--faint,#6B5E85)}
.sheet-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border-radius:11px;cursor:pointer;text-decoration:none;
  font:600 13.5px/1 'Geist',system-ui,sans-serif;color:#fff;border:1px solid transparent;white-space:nowrap;
  background:linear-gradient(135deg,var(--electric,#2563EB),#1D4ED8);box-shadow:0 10px 24px -12px rgba(37,99,235,.85),inset 0 1px 1px rgba(255,255,255,.2);
  transition:transform .15s ease,box-shadow .2s ease,background .15s,border-color .15s,opacity .2s}
.sheet-btn:hover:not(:disabled){transform:translateY(-1px)}
.sheet-btn:disabled{opacity:.45;cursor:default;transform:none}
.sheet-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.45)}
.sheet-btn.ghost{color:var(--ink,#ECE7F7);background:rgba(37,99,235,.07);border-color:rgba(147,165,255,.2);box-shadow:none}
.sheet-btn.ghost:hover:not(:disabled){background:rgba(37,99,235,.13);border-color:rgba(147,165,255,.42)}
.sheet-btn.danger{background:linear-gradient(135deg,#EF4444,#B91C1C);box-shadow:0 10px 24px -12px rgba(239,68,68,.7),inset 0 1px 1px rgba(255,255,255,.18)}
.sheet-btn svg{width:13px;height:13px}

/* ---- phones: a bottom sheet ---- */
@media (max-width:560px){
  .sheet-bg{align-items:flex-end;padding:0}
  .sheet,.sheet.sm,.sheet.wide,.sheet.xl{max-width:none;margin:0;border-radius:22px 22px 0 0;max-height:92dvh;transform:translateY(40px)}
  .sheet-head{padding:16px 16px 14px 18px}
  .sheet-body{padding:16px 18px 18px}
  .sheet-foot{padding:12px 18px max(16px,env(safe-area-inset-bottom))}
  .sheet-foot .sheet-btn{flex:1 1 0;min-width:0}
  .sheet-foot .grow{display:none}
  .sheet-foot .sheet-hint{flex-basis:100%}
  .sheet-bg.static.show > .sheet{animation-name:sheetRiseUp}
}
@media (prefers-reduced-motion:reduce){
  .sheet-bg,.sheet{transition:none}
  .sheet-bg.static.show,.sheet-bg.static.show > .sheet{animation:none}
  .sheet,.sheet-bg .sheet{transform:none}
}

/* site dropdowns (dropdown.js) inside a sheet take the field look */
.sheet-body .spf-dd{display:block;width:100%}
.sheet-body .spf-dd__btn{padding:11px 13px;border-radius:11px;font-weight:500;font-size:14px;background:rgba(6,8,20,.6);border-color:rgba(147,165,255,.18)}
.sheet-body .spf-dd__btn:hover{border-color:rgba(147,165,255,.34);background:rgba(6,8,20,.7)}