/* The admin, in the shop's own look: the same ground, ink, raspberry and
   cards as site/home.css and site/shop.css, laid out for work instead of
   browsing. Loaded after both, only on /admin pages. */

/* the bar: lettering, the sections, the way out */
.ab{position:sticky;top:0;z-index:200;background:#f8f4f2d1;-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 .5px 0 #4a1f2e1f}
.ab-row{display:flex;align-items:center;gap:16px;max-width:1240px;margin:0 auto;padding:12px 28px 4px}
.ab-wm{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink)}
.ab-wm .pbw{width:150px;height:auto;align-self:center}
.ab-wm .kick{font-size:12px}
.ab-r{margin-left:auto;display:flex;gap:6px}
.ab-l{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;color:var(--ink2);text-decoration:none;cursor:pointer}
.ab-l:hover{color:var(--ink);background:#3b1a240a}
.ab-l svg{width:15px;height:15px}
.an{display:flex;gap:4px;max-width:1240px;margin:0 auto;padding:4px 22px 10px;overflow-x:auto;scrollbar-width:none}
.an::-webkit-scrollbar{display:none}
.an a{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;font-size:15px;color:var(--ink2);text-decoration:none;transition:background .2s,color .2s}
.an a:hover{color:var(--ink);background:#3b1a240a}
.an a[aria-current]{background:linear-gradient(#FFF1F5,#FFD5E0 30%,#F9AFC3 75%,#F8B5C7);box-shadow:0 0 0 1px #A8395B,inset 0 1px 0 #fff;color:#3c0f20;font-weight:560}
.nb{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--rasp);color:#fff;font-size:12px;font-weight:600;letter-spacing:0}

/* the page */
.adm{max-width:1240px;margin:0 auto;padding:28px 28px 96px;display:flex;flex-direction:column;gap:24px}
.adm h1{font-size:44px;line-height:1.05;font-weight:520;letter-spacing:-.045em;text-wrap:balance;text-align:left;white-space:normal;text-shadow:none;padding:0}
.adm h2{font-size:22px;line-height:1.2;font-weight:540;letter-spacing:-.03em}
.adm h2 small{font-size:15px;font-weight:450;color:var(--ink3);letter-spacing:-.01em;margin-left:6px}
.adm .note{text-align:left;margin:0;padding:12px 14px;border-radius:12px;background:#FCE9CB;color:#5a3a12;font-size:15px;white-space:pre-wrap}
.adm .back{align-self:flex-start;margin-bottom:-12px}
.ah{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:8px}
.ah .kick{margin-bottom:8px}
.ah-sub{margin-top:10px;max-width:640px;font-size:17px;line-height:1.55;color:var(--ink2)}
.mute{color:var(--ink3)}
.fine{font-size:14px}
.none{padding:28px 0;text-align:center;color:var(--ink3)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#FBD8E1;color:#5a2236;font-size:12px;font-weight:560;letter-spacing:0;margin-left:8px}

/* a card of work */
.ap{background:linear-gradient(#fff,#fffcfb);border-radius:20px;box-shadow:var(--sh-s);padding:24px 26px 26px;min-width:0}
.ap-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ap-h p{margin-top:4px;font-size:14px;color:var(--ink3);max-width:460px}
.ap-h .chips{flex:none;max-width:100%}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.acts.end{justify-content:flex-end;margin-top:20px}
.acts.split{justify-content:space-between;margin-top:18px}
.acts.split>span{display:flex;align-items:center;gap:14px}
.adm .btn.sm{height:40px;font-size:15px;padding:0 18px 1px;gap:7px}
.adm .btn.sm svg{width:15px;height:15px}
.adm .lnk{gap:6px;font-size:14px}
.adm .lnk svg{width:15px;height:15px}
a.chp{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.chp small{font-size:13px;opacity:.7}
.ib{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:999px;background:none;color:var(--ink2);cursor:pointer}
.ib:hover{background:#3b1a240d;color:var(--ink)}
.ib svg{width:17px;height:17px}

/* the switch */
.sw{position:relative;flex:none;width:46px;height:28px;padding:0;border:0;border-radius:999px;background:#e4dcde;box-shadow:inset 0 1px 2px #3b1a2426;cursor:pointer;transition:background .2s}
.sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(#fff,#f6f2f3);box-shadow:0 1px 3px #3b1a2440;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.sw[aria-checked="true"]{background:linear-gradient(#F49AB2,#E0718F)}
.sw[aria-checked="true"] i{transform:translateX(18px)}
.swl{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500;cursor:pointer}
.swl input{position:absolute;opacity:0;width:1px;height:1px}
.swl input:checked+.sw{background:linear-gradient(#F49AB2,#E0718F)}
.swl input:checked+.sw i{transform:translateX(18px)}
.swl input:focus-visible+.sw{outline:2px solid var(--rasp);outline-offset:3px}
.sws{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:18px}

/* forms */
.adm .flds{gap:14px 16px}
.adm .flds+.flds{margin-top:14px}
.flds.two{grid-template-columns:1fr 1fr;margin-top:16px}
.flds.three{grid-template-columns:repeat(3,1fr)}
.fld select{width:100%;height:48px;border:0;border-radius:14px;padding:0 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink);box-shadow:0 0 0 .5px #3b1a2442,inset 0 1px 2px #3b1a240f}
.fld select:disabled{color:var(--ink3);background:#faf7f7}
.fld input[type=color]{padding:4px;height:44px;cursor:pointer}
.fld small.mute{font-size:13px}
.fld.grow{flex:1;min-width:0}
.fld.sm{width:96px;flex:none}
.adm .err{min-height:0}
.adm .err:not(:empty){margin-top:12px}
.addrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.addrow .fld:not(.grow):not(.sm){width:220px}
.addrow .err{flex-basis:100%;margin:0}
.up{position:relative;cursor:pointer}
.up input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mono.up-case{text-transform:uppercase}

/* overview */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tiles.sm{grid-template-columns:repeat(3,1fr)}
.tile{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:20px;background:#fff;box-shadow:var(--sh-s);text-decoration:none;color:var(--ink);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
a.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
.tile span{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.tile b{font-size:40px;line-height:1.05;font-weight:520;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tiles.sm .tile b{font-size:30px}
.t-pink{background:linear-gradient(160deg,#FFF1F5,#FBD8E1)}
.t-butter{background:linear-gradient(160deg,#FFF8EA,#FCE9CB)}
.t-cream{background:linear-gradient(160deg,#fff,#F5EEEB)}
.t-green{background:linear-gradient(160deg,#F6FAEF,#E6EFD6)}
.t-sky{background:linear-gradient(160deg,#F5F8FD,#DFE8F6)}

/* rows: the overview list, orders, the timeline */
.rows,.orders,.ops,.fls,.msgs,.mini,.tiers{list-style:none;margin:0;padding:0}
.rows li+li,.orders>li+li,.ops>li+li,.fls li+li,.msgs li+li,.tiers li+li{border-top:.5px solid var(--line)}
.row,.ord>summary,.op>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 6px;border-radius:12px;text-decoration:none;color:inherit;cursor:pointer;font-size:15px}
.ord>summary,.op>summary{list-style:none}
.ord>summary::-webkit-details-marker,.op>summary::-webkit-details-marker{display:none}
.row:hover,.ord>summary:hover,.op>summary:hover{background:#3b1a2408}
.ord[open]>summary,.op[open]>summary{background:#3b1a240a}
.r-day{width:104px;font-weight:560}
.r-day.hot{color:var(--rasp)}
.r-slot{width:110px;color:var(--ink2)}
.r-no{width:84px;font-size:14px;font-weight:500}
.r-name{flex:1;min-width:140px;font-weight:500}
.r-when{color:var(--ink2);font-size:14px}
.r-amt{width:78px;text-align:right;font-weight:560;font-variant-numeric:tabular-nums}
.r-hash{font-size:12px;color:var(--ink3)}
.op .r-name{font-weight:400}
.op .r-when{width:112px;text-align:right}
.st{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:560;letter-spacing:-.01em;white-space:nowrap;background:#3b1a240f;color:var(--ink2)}
.st-new{background:#B23656;color:#fff}
.st-baking{background:#FCE9CB;color:#5a3a12}
.st-ready{background:#3E7A4C;color:#fff}
.st-completed{background:#3b1a240f;color:var(--ink2)}
.st-cancelled{background:#3b1a240a;color:var(--ink3);text-decoration:line-through}
.pay-unpaid{background:#FFF1D8;color:#6b4513}
.pay-reported{background:#FCE0A8;color:#5a3a12}
.pay-paid{background:#E6EFD6;color:#2F5E3B}
.ob-sent{background:#3E7A4C;color:#fff}
.ob-failed{background:#B23656;color:#fff}
.en-orders{background:#FBD8E1;color:#5a2236}
.en-products{background:#FCE9CB;color:#5a3a12}
.en-packages{background:#DFE8F6;color:#22406a}
.en-settings{background:var(--ink);color:#fff}
.en-specials,.en-votes{background:#E6EFD6;color:#2F5E3B}
.en-coupons{background:#F4D7E9;color:#6a2350}

/* one order, open */
.ob{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding:16px 6px 26px}
.ob .tk{align-self:start}
.ol li{display:flex;justify-content:space-between;gap:16px}
.ol li.good{color:#3E7A4C}
.ob-side{display:flex;flex-direction:column;gap:14px;font-size:15px}
.ob-c{display:flex;flex-direction:column;gap:4px}
.ob-c a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;word-break:break-all;min-height:32px}
.ob-c a:hover{color:var(--rasp)}
.ob-c svg{width:16px;height:16px;flex:none}
.paybox{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:#F8F4F2;box-shadow:inset 0 0 0 .5px var(--line)}
.paybox .acts{margin-top:6px}

/* menu, vote */
.fl{display:flex;align-items:center;gap:14px;padding:10px 4px}
.fl.off{opacity:.55}
.fl-art{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:14px;background:radial-gradient(90% 90% at 50% 30%,#fff,#F5EEEB);box-shadow:inset 0 0 0 .5px #3b1a241a;overflow:hidden}
.fl-art .tr{width:86%;height:86%}
.fl-art img{width:100%;height:100%;object-fit:cover}
.fl-n{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:2px}
.fl-n b{font-weight:540}
.fl-n small{flex-basis:100%;font-size:13px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink3)}
.price input{width:84px;height:40px;border:0;border-radius:12px;padding:0 10px;font:inherit;font-size:15px;font-weight:540;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;box-shadow:0 0 0 .5px #3b1a2442,inset 0 1px 2px #3b1a240f}
.price input:focus{outline:2px solid #E9849F;outline-offset:1px}
.swatch{width:40px;height:40px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 .5px #3b1a2426}
.bar{flex-basis:100%;height:6px;margin-top:6px;border-radius:999px;background:#3b1a240d;overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F9AFC3,#E0718F)}
.vc{width:120px;text-align:right;font-size:14px;color:var(--ink2);font-variant-numeric:tabular-nums}
.vc b{font-size:17px;color:var(--ink)}

/* the flavor editor */
.ed{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px}
.ed-art{display:flex;flex-direction:column;gap:10px}
.ed-pic{aspect-ratio:1;display:grid;place-items:center;border-radius:20px;background:radial-gradient(90% 90% at 50% 30%,#fff,#F5EEEB);box-shadow:inset 0 0 0 .5px #3b1a241a;overflow:hidden}
.ed-pic .tr{width:80%;height:80%}
.ed-pic img{width:100%;height:100%;object-fit:cover}

/* party boxes */
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.box.off{background:linear-gradient(#fbf9f9,#f6f2f2)}
.box-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:14px}
.box-h .sw{margin-bottom:10px}
.box-h input{font-size:19px;font-weight:540}

/* inbox */
.msg{padding:16px 4px}
.msg.read{opacity:.6}
.msg-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.msg-h .lnk{min-height:0;padding:0}
.msg-h .tag{margin:0}
.msg-h .r{margin-left:auto;font-size:13px}
.msg p{margin-top:8px;white-space:pre-wrap;font-size:15px;line-height:1.55}
.msg .lnk{min-height:32px}
.mini{max-height:360px;overflow-y:auto;font-size:14px}
.mini li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 2px;border-top:.5px solid var(--line)}
.mini li:first-child{border:0}
.mini.out li>span:first-child{display:flex;flex-direction:column;min-width:0}
.mini.out b{font-weight:540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* settings */
.hrs-ed{display:flex;flex-direction:column;gap:8px}
.hr{display:flex;gap:8px}
.hr input{flex:1;min-width:0;height:44px;border:0;border-radius:12px;padding:0 14px;font:inherit;font-size:15px;background:#fff;box-shadow:0 0 0 .5px #3b1a2442,inset 0 1px 2px #3b1a240f}
.hr input:focus{outline:2px solid #E9849F;outline-offset:1px}
.fld .lnk{align-self:flex-start}
.pays{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.pm{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:16px;background:#F8F4F2;box-shadow:inset 0 0 0 .5px var(--line)}
.pm .swl{font-weight:560}
.qrrow{display:flex;align-items:center;gap:12px}
.qrp img{width:56px;height:56px;border-radius:10px;object-fit:cover;box-shadow:inset 0 0 0 .5px var(--line)}
.tiers li{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 2px}
.t-n{flex:1;min-width:120px;display:flex;flex-direction:column}
.t-n b{font-weight:540}
.t-n small{font-size:13px;color:var(--ink3)}
.codes{margin-top:16px;max-height:420px;overflow-y:auto}
.codes li>.mute{font-size:13px}

/* timeline */
.tl-hero{position:relative;padding:36px 36px 32px;border-radius:24px;background:linear-gradient(110deg,#FBD8E1,#FCE9CB 55%,#E6EFD6);box-shadow:var(--sh-s);overflow:hidden}
.tl-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#5a2a3a1f 1px,#0000 1.4px);background-size:24px 24px;pointer-events:none}
.tl-hero>*{position:relative}
.tl-hero .kick{margin-bottom:10px}
.tl-hero .acts{margin-top:22px}
.tl-hero .mute{font-size:14px}
.verify{margin-top:18px;padding:16px 18px;border-radius:16px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.verify.good{background:#ffffffc7;box-shadow:inset 0 0 0 1px #3E7A4C66}
.verify.bad{background:#fff;box-shadow:inset 0 0 0 1.5px #B23656}
.scrub{width:100%;margin:12px 0 6px;accent-color:#E0718F}
.tm-at{font-size:15px}
.tm{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;margin-top:18px}
.tm .lbl{display:block;margin-bottom:6px}
.counts li span{text-transform:none}
.prices{columns:2;column-gap:28px;max-height:320px}
.prices li{break-inside:avoid}
.prices li:first-child{border-top:.5px solid var(--line)}
.prices li.off{color:var(--ink3);text-decoration:line-through}
.prices small{color:var(--ink3)}
.tl-f select{height:40px;border:0;border-radius:999px;padding:0 14px;font:inherit;font-size:14px;background:#fff;box-shadow:0 0 0 .5px #3b1a2438,0 1px 2px #3b1a2414}
.op-b{padding:12px 6px 22px;display:flex;flex-direction:column;gap:12px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba pre{margin:6px 0 0;max-height:280px;overflow:auto;padding:14px;border-radius:14px;background:#F8F4F2;box-shadow:inset 0 0 0 .5px var(--line);font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.op-b .btn{align-self:flex-start}
.pager{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:16px;text-align:center;font-size:14px}

/* sign-in */
.login{min-height:calc(100vh - 220px);display:grid;place-items:center}
.login-c{width:100%;max-width:420px;display:flex;flex-direction:column;gap:16px;padding:34px 32px 30px}
.login-c h1{font-size:34px}
.login-c code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px}
body[data-admin="login"] .ab-row{padding-bottom:12px}

/* the note at the bottom */
.toast{position:fixed;left:50%;bottom:24px;z-index:400;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;box-shadow:var(--sh-l);animation:rise .3s cubic-bezier(.2,.8,.2,1)}
.toast.bad{background:#B23656}

@media (max-width:1099px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .pays{grid-template-columns:1fr 1fr}
  .ob{grid-template-columns:1fr}
}
@media (max-width:899px){
  .ab-row{padding:10px 16px 2px}
  .ab-wm .pbw{width:118px}
  .ab-wm .kick{display:none}
  .ab-l span{display:none}
  .ab-l{width:40px;padding:0;justify-content:center}
  .ab-l[data-logout] span{display:inline}
  .ab-l[data-logout]{width:auto;padding:0 12px}
  .an{padding:2px 10px 8px}
  .adm{padding:20px 16px 72px;gap:18px}
  .adm h1{font-size:32px}
  .ah-sub{font-size:16px}
  .ap{padding:18px 16px 20px;border-radius:18px}
  .two-col,.boxes,.pays,.ed,.tm,.ba{grid-template-columns:1fr}
  .tiles,.tiles.sm{grid-template-columns:1fr 1fr}
  .tile{padding:16px 16px}
  .tile b{font-size:30px}
  .tiles.sm .tile b{font-size:24px}
  .flds.three{grid-template-columns:1fr 1fr 1fr}
  .flds.two{grid-template-columns:1fr 1fr}
  .ed-art{max-width:320px}
  .r-day{width:auto}
  .r-slot{width:auto}
  .r-name{flex-basis:100%;order:-1;min-width:0}
  .ord .r-name,.op .r-name{order:0}
  .r-hash{display:none}
  .op .r-when{width:auto;margin-left:auto}
  .fl{flex-wrap:wrap}
  .fl-n{flex-basis:calc(100% - 66px)}
  .fl .price{margin-left:66px}
  .fl .sw{margin-left:auto}
  .vc{width:auto;margin-left:54px}
  .prices{columns:1}
  .tl-hero{padding:26px 18px 22px;border-radius:20px}
  .addrow .fld:not(.grow):not(.sm){width:100%}
  .addrow .fld.grow{flex-basis:100%}
  .pager{grid-template-columns:1fr 1fr}
  .pager .mute{grid-column:1/-1;grid-row:1}
  .box-h input{font-size:17px}
}