/* ══════════════════════════════════════════════════════════════════════════
   THE ASSISTANT, DRAWN — .as-*                            [6.8 · 30 Aug 2026]
   A sheet over the phone (above .m-liveover at z-60), plus the key that opens
   it. Dark, because it is a conversation and not a screen of the app.

   PORT NOTE: the design file wrote every colour as var(--color-X, #hex). Live's
   token names are the short ones in p1/styles.css (--electric, --steel, --turf,
   …), so they are used directly here — a fallback that is always taken is a
   hardcoded colour wearing a token's clothes, and it drifts the first time the
   palette moves. --color-pitch #050505 is live's --iron-deep.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- THE KEY, IN THE APP BAR [6.20c] ----------------------------------------
   DIRECTION A, the owner's pick after living with C. The assistant now costs the
   day ZERO pixels: it rides in the bar that is already there, beside the bell —
   talking to the gym and hearing from the gym are the same kind of thing, so they
   sit together and the lit dot behaves exactly like the bell's. C's line was
   honest but it charged ~49px of every screen, every second, for a thing used
   occasionally; A charges nothing and is on every screen with a bar, including the
   drawer sections C never reached.
   TAP opens the thread · HOLD (400ms) opens it already listening, so voice keeps
   its one-gesture reach without a second control. Sized to .m-burger / .m-bell,
   and scoped under .m-bar so the app-bar button rules cannot win on specificity. */
.m-bar .as-key{width:34px;height:34px;flex:0 0 auto;background:var(--electric);border:1px solid var(--electric);border-radius:7px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;padding:0;-webkit-tap-highlight-color:transparent;transition:background 120ms cubic-bezier(.2,.7,.2,1);}
.m-bar .as-key:hover{background:var(--electric-hover);border-color:var(--electric-hover);}
.m-bar .as-key:active,.m-bar .as-key.hold{background:var(--electric-deep);}
.m-bar .as-key.hold{box-shadow:0 0 0 3px rgba(7,93,198,.34);}
.m-bar .as-key svg{width:17px;height:17px;}
.m-bar .as-key .dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--turf);border:2px solid var(--iron);}

/* ---- THE LINE ABOVE THE BOTTOM BAR [6.20b] ----------------------------------
   DIRECTION C. Honest and thumb-reachable, but it charged every screen ~49px for
   an occasional tool, so A replaced it. BUILT AND EXPORTED, MOUNTED NOWHERE —
   window.IBAssistLine still takes the same { onOpen, dot } contract, so putting it
   back is one line in Shell. Kept because it is the right answer if voice ever
   becomes the primary way in and needs a permanent mic on the floor. */
.as-line{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:var(--steel);border-top:1px solid var(--graphite);padding:2px 9px 2px 14px;}
.as-line .ask{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0;min-height:32px;font-family:inherit;color:inherit;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;}
.as-line .ic{flex:0 0 auto;position:relative;display:flex;color:var(--electric-hover);}
.as-line .ic svg{width:17px;height:17px;}
.as-line .ic .dot{position:absolute;top:-3px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--turf);border:1.5px solid var(--steel);}
.as-line .q{flex:1 1 auto;min-width:0;font-size:13px;color:#8A8A8A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.as-line .ask:hover .q{color:#C9CDD3;}
.as-line.job .q{color:#C9CDD3;}
/* the mic is the primary voice affordance on the floor, so it gets the full 44px hit
   target — and the row's own padding comes off to pay for it, landing the line back
   near the 40px the reviewed direction was costed at */
.as-line .mc{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:6px;color:var(--silver);cursor:pointer;}
.as-line .mc svg{width:18px;height:18px;}
.as-line .mc:hover{color:#fff;background:rgba(255,255,255,.06);}
.as-line .mc:active{color:var(--electric-bright);}

/* ---- THE CONTEXTUAL ASK ------------------------------------------------------
   Direction D. Built, and kept because the line does not answer everything: an ask
   that rides ON the thing it can act on carries the sentence with it, so tapping it
   is "do this one" rather than "open a chatbox". EXPORTED, MOUNTED NOWHERE — mount
   window.IBAssistAsk on a card the day we want the ask on the thing as well. */
.as-ctx{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;min-height:44px;background:rgba(7,93,198,.05);border:1px dashed #A9C4E8;border-radius:5px;color:var(--electric);font-family:inherit;cursor:pointer;text-align:left;}
.as-ctx:hover{background:rgba(7,93,198,.09);border-color:var(--electric);}
.as-ctx > svg{flex:0 0 auto;width:15px;height:15px;}
.as-ctx .t{flex:1 1 auto;min-width:0;font-weight:700;font-size:12px;letter-spacing:.02em;}
.as-ctx .g{flex:0 0 auto;color:#8FA9CE;display:flex;}
.as-ctx .g svg{width:14px;height:14px;}
.wb-asks{margin-top:13px;}

/* ---- the sheet ---- */
.as{position:absolute;inset:0;z-index:70;background:var(--steel);display:flex;flex-direction:column;}
.as::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--electric);z-index:2;}
.as-bar{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:15px 14px;background:var(--iron-deep);border-bottom:1px solid var(--graphite);}
/* the drawn notch overlays every full-screen surface — 32px is the app's own hard
   value (.phone .m-bar), because env() resolves to 0 on desktop and would never
   reach a fallback. max() adds the real inset on a device on top of it. */
.phone .as-bar{padding-top:max(32px,calc(15px + env(safe-area-inset-top,0px)));}
.as-av{flex:0 0 auto;width:34px;height:34px;background:var(--electric);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-cond);font-weight:900;font-size:13px;letter-spacing:0.04em;}
.as-bar .nm{font-family:var(--font-cond);font-weight:900;font-size:16px;letter-spacing:0.05em;text-transform:uppercase;color:#fff;line-height:1.1;}
.as-bar .st{font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;color:var(--silver);margin-top:2px;text-transform:uppercase;}
.as-bar .x{margin-left:auto;flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:var(--steel);border:1px solid var(--graphite);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.as-bar .x:hover{border-color:var(--electric);}
.as-bar .x svg{width:15px;height:15px;}

.as-msgs{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:15px 13px 8px;display:flex;flex-direction:column;gap:11px;}
.as-msgs > *{flex:0 0 auto;}
.as-m{max-width:85%;font-size:14px;line-height:1.5;padding:11px 13px;border-radius:4px;text-wrap:pretty;white-space:pre-wrap;}
.as-m.ai{align-self:flex-start;background:var(--gunmetal);color:#E7E9EC;border-left:2px solid var(--electric);}
.as-m.me{align-self:flex-end;background:var(--electric);color:#fff;}
.as-dots{display:inline-flex;gap:4px;align-items:center;}
.as-dots i{width:5px;height:5px;border-radius:50%;background:var(--silver);animation:asB 1s infinite;}
.as-dots i:nth-child(2){animation-delay:.15s}.as-dots i:nth-child(3){animation-delay:.3s}
@keyframes asB{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---- a receipt: what it actually did, and the way back ---- */
/* the receipt's own padding is pulled in on the right so the 44px undo target can
   sit inside it without inflating the card — same trade as the composer mic */
.as-rcpt{align-self:stretch;background:var(--iron);border-left:3px solid var(--turf);padding:11px 6px 11px 13px;display:flex;align-items:flex-start;gap:10px;}
.as-rcpt > svg{flex:0 0 auto;width:16px;height:16px;color:var(--turf);margin-top:2px;}
.as-rcpt.wall{border-left-color:var(--electric);}
.as-rcpt.wall > svg{color:var(--electric-bright);}
.as-rcpt.spent{border-left-color:var(--graphite);opacity:.6;}
.as-rcpt .tx{flex:1 1 auto;min-width:0;}
.as-rcpt .t{font-family:var(--font-cond);font-weight:900;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;color:#fff;line-height:1.1;}
.as-rcpt .d{font-size:12.5px;line-height:1.45;color:#C9CDD3;margin-top:4px;}
/* UNDO IS THE SAFETY NET for every write the assistant makes — bookings, meals, her
   recipe book, a score — so it gets a full 44px target. The label stays small; the
   BOX is what grew. */
.as-rcpt .un{flex:0 0 auto;align-self:center;min-height:44px;min-width:56px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--graphite);border-radius:3px;padding:5px 9px;font-family:var(--font-body,inherit);font-weight:800;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#D3D6DA;cursor:pointer;}
.as-rcpt .un:hover{border-color:var(--electric);color:#fff;}
.as-rcpt .un:disabled{border-color:var(--gunmetal);color:#5a5a5a;cursor:default;}

/* ---- THE LOCK-IN CARD [6.8] ------------------------------------------------
   Replaces .as-ask (the old ring-2 question). EVERYTHING that writes reads back
   here first, so this card is the busiest thing in the thread and its header is
   the promise: nothing's changed yet. Forge (amber) is the "about to overwrite"
   colour and it dresses the whole card, not a per-row flag, because she is being
   asked ONE question about the lot. */
.as-lock{align-self:stretch;background:var(--iron);border:1px solid var(--graphite);border-left:3px solid var(--electric);padding:13px;}
.as-lock.hard{border-left-color:var(--forge);}
.as-lock.wall{border-left-color:var(--electric-bright);}
.as-lock .st{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--silver);}
.as-lock.hard .st{color:var(--forge-bright);}
.as-lock .q{font-family:var(--font-cond);font-weight:900;font-size:17px;letter-spacing:0.03em;text-transform:uppercase;color:#fff;line-height:1.1;margin-top:4px;}
.as-lock ul{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;}
.as-lock li{display:flex;align-items:flex-start;gap:10px;background:var(--gunmetal);padding:9px 11px;}
.as-lock li.hard{background:rgba(217,162,27,.15);}
.as-lock li i{flex:0 0 auto;font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--electric-bright);padding-top:2px;}
.as-lock li.hard i{color:var(--forge-bright);}
.as-lock li span{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.45;color:#E7E9EC;}
.as-lock .s{font-size:11.5px;color:var(--forge-bright);margin-top:9px;}
.as-lock .row{display:flex;gap:8px;margin-top:11px;}
.as-lock button{flex:1 1 0;min-height:44px;border:0;padding:11px;font-family:var(--font-body,inherit);font-weight:800;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-radius:3px;}
.as-lock .go{background:var(--electric);color:#fff;}
.as-lock .go:hover{background:var(--electric-hover);}
.as-lock.hard .go{background:var(--forge);color:var(--iron);}
.as-lock .go:disabled{background:var(--gunmetal);color:#7a7a7a;cursor:default;}
.as-lock .no{background:none;border:1px solid var(--graphite);color:#D3D6DA;}
.as-lock .no:hover{border-color:#fff;color:#fff;}
.as-lock .no:disabled{color:#5a5a5a;cursor:default;}

/* ---- THE CARDS [6.8] -------------------------------------------------------
   A read answers on a card, and so does a built recipe. They share a shell so
   the thread reads as one thing; each one adds its own body. */
.as-card{align-self:stretch;background:var(--iron);border:1px solid var(--graphite);}
.as-card .hd{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border-bottom:1px solid var(--graphite);}
.as-card .hd > svg{flex:0 0 auto;width:17px;height:17px;color:var(--electric-bright);margin-top:1px;}
.as-card .nm{font-family:var(--font-cond);font-weight:900;font-size:16px;letter-spacing:0.03em;text-transform:uppercase;color:#fff;line-height:1.15;}
.as-card .wt{font-size:12px;line-height:1.45;color:var(--silver);margin-top:3px;}
.as-card .lb{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--silver);margin-bottom:6px;}

/* the recipe — the band is a rule, so it is SHOWN */
.as-rec .hd{display:block;}
.as-rec .ver{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--electric-bright);margin-bottom:4px;}
.as-mac{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-bottom:1px solid var(--gunmetal);}
.as-mac .mc{padding:9px 8px;border-right:1px solid var(--gunmetal);}
.as-mac .mc:last-child{border-right:0;}
.as-mac .mc.key{background:rgba(7,93,198,0.10);}
.as-mac .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--silver);}
.as-mac .v{font-family:var(--font-cond);font-weight:900;font-size:19px;color:#fff;line-height:1.1;margin-top:2px;}
.as-mac .mc.key .v{color:var(--electric-bright);}
.as-mac .d{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.02em;color:#8A8A8A;margin-top:2px;}
.as-band{display:flex;align-items:center;gap:8px;padding:9px 13px;background:rgba(30,158,98,0.10);border-bottom:1px solid var(--gunmetal);}
.as-band > svg{flex:0 0 auto;width:15px;height:15px;color:var(--turf-bright,#4ED09A);}
.as-band .t{font-family:var(--font-cond);font-weight:900;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;color:#fff;}
.as-band .s{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:0.04em;color:#9FA4AB;text-align:right;}
.as-moved{padding:11px 13px;border-bottom:1px solid var(--graphite);}
.as-moved ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
.as-moved li{display:flex;gap:9px;align-items:baseline;font-size:12.5px;color:#C9CDD3;}
.as-moved li i{flex:0 0 auto;font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--electric-bright);min-width:38px;}
.as-ing{padding:11px 13px;border-bottom:1px solid var(--graphite);}
.as-ing ul{list-style:none;margin:0;padding:0;}
.as-ing li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid rgba(58,58,58,0.5);font-size:13px;}
.as-ing li:last-child{border-bottom:0;}
.as-ing li b{flex:1 1 auto;min-width:0;font-weight:600;font-size:13px;color:#E7E9EC;}
.as-ing li span{flex:0 0 auto;font-family:var(--font-mono);font-size:11.5px;color:var(--silver);}
.as-steps{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px;}
.as-steps li{font-size:12.5px;line-height:1.5;color:#C9CDD3;}
.as-steps li::marker{color:var(--electric-bright);font-family:var(--font-mono);font-size:10px;}
.as-more{width:100%;min-height:40px;background:none;border:0;border-bottom:1px solid var(--graphite);font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--silver);cursor:pointer;}
.as-more:hover{color:#fff;}

/* THE WAYS OUT — the recipe's three, the shopping card's three. Same control:
   a tap here IS the decision, so each one runs on the spot with a receipt. */
.as-outs{display:flex;gap:1px;background:var(--graphite);}
.as-outs.busy{opacity:.6;}
.as-out{flex:1 1 0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--iron-deep);border:0;padding:9px 5px;font-family:var(--font-body,inherit);color:#D3D6DA;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.as-out svg{flex:0 0 auto;width:16px;height:16px;color:var(--electric-bright);}
.as-out span{font-weight:800;font-size:9.5px;letter-spacing:0.05em;text-transform:uppercase;text-align:center;line-height:1.25;}
.as-out:hover{background:var(--gunmetal);color:#fff;}
.as-out.ghost svg{color:var(--silver);}
.as-out:disabled{color:#6a6a6a;cursor:default;}
.as-out:disabled svg{color:#5a5a5a;}
.as-out.done svg{color:var(--turf);}
.as-outs.done{display:flex;align-items:center;gap:9px;background:var(--iron-deep);padding:12px 13px;}
.as-outs.done > svg{flex:0 0 auto;width:16px;height:16px;color:var(--turf);}
.as-outs.done > span{font-family:var(--font-cond);font-weight:900;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;color:#fff;}

/* the shopping list */
.as-cat{padding:11px 13px;border-bottom:1px solid var(--graphite);}
.as-cat ul{list-style:none;margin:0;padding:0;}
.as-cat li{display:flex;gap:10px;align-items:baseline;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.as-cat li:last-child{border-bottom:0;}
.as-cat li b{flex:1 1 auto;min-width:0;font-weight:600;font-size:13px;color:#E7E9EC;}
.as-cat li span{flex:0 0 auto;font-family:var(--font-mono);font-size:11.5px;color:var(--silver);}

/* a number, read back */
.as-big{display:flex;align-items:baseline;gap:11px;padding:13px;border-bottom:1px solid var(--graphite);}
.as-big .v{font-family:var(--font-cond);font-weight:900;font-size:38px;line-height:.9;color:var(--electric-bright);}
.as-big .l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--silver);}
.as-big .l span{display:block;color:#C9CDD3;margin-top:3px;}
.as-rows{list-style:none;margin:0;padding:6px 13px;}
.as-rows li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.as-rows li:last-child{border-bottom:0;}
.as-rows li b{flex:1 1 auto;min-width:0;font-weight:600;font-size:12.5px;color:#E7E9EC;}
.as-rows .n{flex:0 0 auto;font-family:var(--font-mono);font-size:12px;color:#fff;}
.as-rows .s{flex:0 0 auto;font-size:11px;color:#8A8A8A;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.as-note{padding:0 13px 11px;font-size:12px;line-height:1.45;color:#C9CDD3;}
.as-foot{padding:9px 13px;border-top:1px solid var(--graphite);font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:#8A8A8A;}

/* take me there */
.as-goc{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-left:3px solid var(--electric);}
.as-goc:hover{background:var(--gunmetal);}
.as-goc .tx{flex:1 1 auto;min-width:0;}
.as-goc .pt{font-family:var(--font-mono);font-size:10px;letter-spacing:0.05em;color:var(--electric-bright);margin-top:3px;}
.as-goc .wy{font-size:12px;line-height:1.4;color:var(--silver);margin-top:4px;}
.as-goc .g{flex:0 0 auto;display:flex;color:var(--silver);}
.as-goc .g svg{width:17px;height:17px;}

/* ---- the composer ---- */
.as-comp{flex:0 0 auto;background:var(--iron-deep);border-top:1px solid var(--graphite);padding:9px 11px calc(12px + env(safe-area-inset-bottom,0px));}
.as-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none;}
.as-chips::-webkit-scrollbar{display:none;}
.as-chip{flex:0 0 auto;background:none;border:1px solid var(--graphite);color:#D3D6DA;border-radius:999px;padding:6px 12px;font-family:var(--font-body,inherit);font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap;}
.as-chip:hover{border-color:var(--electric);color:#fff;}
.as-in{display:flex;align-items:center;gap:6px;background:var(--steel);border:1px solid var(--graphite);border-radius:4px;padding:4px 5px 4px 11px;}
.as-in.rec{border-color:var(--electric);}
.as-in input{flex:1 1 auto;min-width:0;background:none;border:0;outline:none;font-family:inherit;font-size:13.5px;color:#fff;}
.as-in input::placeholder{color:#6c6c6c;}
/* EVERY ICON IN THIS FILE IS AN UNSIZED 24-VIEWBOX SVG, so each one needs a box or
   it collapses to nothing — which is exactly what happened to the composer's mic and
   send (6px buttons around 0×0 glyphs), killing dictation once she was in the thread. */
.as-in .mic,.as-in .go{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:6px;background:none;border:0;color:var(--silver);cursor:pointer;}
.as-in .mic svg,.as-in .go svg{width:19px;height:19px;}
.as-in .mic:hover{color:#fff;background:rgba(255,255,255,0.06);}
.as-in .mic.on{color:var(--electric-bright);}
.as-in .go{color:var(--electric-bright);}
.as-in .go:disabled{color:#4a4a4a;cursor:default;}
.as-in .bars{flex:0 0 auto;display:flex;align-items:flex-end;gap:2.5px;height:17px;}
.as-in .bars i{width:3px;background:var(--electric-bright);animation:asW .7s ease-in-out infinite;}
.as-in .bars i:nth-child(1){height:7px;animation-delay:0s}.as-in .bars i:nth-child(2){height:14px;animation-delay:.1s}
.as-in .bars i:nth-child(3){height:17px;animation-delay:.2s}.as-in .bars i:nth-child(4){height:10px;animation-delay:.3s}
@keyframes asW{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* THE WALL, IN ONE LINE — this is where the member is told what the assistant may and
   may not touch, so it has to survive being read on a phone in a gym: 11px and silver
   (7.2:1), not the 8.5px grey it started as (3.9:1, under AA). */
.as-hint{font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--silver,#9A9A9A);text-align:center;margin-top:8px;}
.as-hint.warn{color:var(--forge-bright);}

/* HOW DID THAT MEAL GO [6.8k] — five taps, not a typed answer. Stacked rather
   than the .as-outs row because each one carries a description that decides the
   answer ("right meal, rough portions" is the difference between eyeballed and
   weighed), and five columns would bury it. */
.as-pick{display:flex;flex-direction:column;gap:1px;background:var(--graphite);}
.as-pick.busy{opacity:.6;}
.as-p{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;background:var(--iron-deep);border:0;padding:11px 13px;font-family:inherit;color:#D3D6DA;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:48px;}
.as-p:hover{background:var(--gunmetal);}
.as-p b{flex:0 0 auto;font-weight:700;font-size:13px;color:#fff;}
.as-p span{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--silver);}
.as-p em{flex:0 0 auto;font-style:normal;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--turf);}
.as-p.on b{color:var(--turf);}
.as-p:disabled{cursor:default;}
.as-meal .hd{display:block;}