/* =====================================================================
   /commands: every command, by category, with search.
   Same family as the rest of the site: flat dark cards, quiet chips, one
   cyan accent. Cards line up in a grid and keep their arguments and
   permissions at the bottom so rows read evenly.
   ===================================================================== */
.cmds{padding:calc(env(safe-area-inset-top,0px) + 130px) 20px 110px}
.cmds__wrap{max-width:1110px;margin:0 auto}

/* header: the same voice as the other pages (centred title with one gradient word, one line
   under it), with the search right beneath */
.cmds__head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:640px;margin:0 auto}
.cmds__h{font-family:var(--hero);font-weight:700;font-size:clamp(36px,5vw,54px);letter-spacing:-.05em;line-height:1.05;color:#f4f4f6}
.cmds__sub{margin-top:14px;font-size:15.5px;color:rgba(237,237,237,.62)}
.cmds__search{position:relative;display:flex;align-items:center;width:min(520px,100%);height:50px;margin-top:30px;border-radius:14px;background:#111212;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .25s ease,background-color .25s ease}
@media (hover:hover){.cmds__search:hover{background:#131415}}
.cmds__search:focus-within{box-shadow:inset 0 0 0 1px rgba(166,228,245,.4),0 0 0 4px rgba(166,228,245,.06)}
.cmds__search>svg{position:absolute;left:16px;width:17px;height:17px;color:rgba(237,237,237,.5);pointer-events:none}
.cmds__search input{width:100%;height:100%;padding:0 46px 0 44px;border:0;background:transparent;color:#ededed;font:400 15px/1 var(--sans)}
.cmds__search input:focus{outline:none}
.cmds__search input::placeholder{color:rgba(237,237,237,.4)}
.cmds__search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cmds__search kbd{position:absolute;right:12px;min-width:24px;height:24px;display:grid;place-items:center;border-radius:7px;font:500 12px/1 var(--mono);color:rgba(237,237,237,.55);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:opacity .2s ease}
.cmds__search:focus-within kbd{opacity:0}

/* categories: one bar (like bleed's), items with the phone menu's tinted icon chips. The chosen
   item simply gets a lighter box; nothing slides or flashes. Drag it, scroll it, or use the arrows. */
.cmds__bar{position:relative;margin-top:44px;border-radius:18px;background:#111212;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.cmds__tabs{display:flex;gap:4px;padding:7px;overflow-x:auto;scrollbar-width:none;cursor:grab;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
.cmds__tabs::-webkit-scrollbar{display:none}
.cmds__tabs.is-dragging{cursor:grabbing}
.cmds__tabs.is-dragging .cmds__tab{pointer-events:none}
.cmds__tab{flex:none;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px 0 10px;border-radius:13px;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,box-shadow .2s ease}
@media (hover:hover){.cmds__tab:hover{background:rgba(255,255,255,.03)}}
.cmds__ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11px;background:rgba(166,228,245,.08);box-shadow:inset 0 0 0 1px rgba(166,228,245,.16)}
.cmds__ico svg{width:18px;height:18px;color:var(--acc)}
.cmds__lbl{font:600 15.5px/1 var(--display);letter-spacing:-.01em;color:rgba(237,237,237,.7);white-space:nowrap;transition:color .2s ease}
.cmds__num{min-width:28px;height:22px;padding:0 7px;display:grid;place-items:center;border-radius:7px;font:600 12px/1 var(--sans);color:rgba(237,237,237,.6);background:rgba(255,255,255,.06)}
@media (hover:hover){.cmds__tab:hover .cmds__lbl{color:#ededed}}
.cmds__tab.is-on{background:#1b1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cmds__tab.is-on .cmds__lbl{color:#fff}
.cmds__tab.is-on .cmds__num{color:#ededed;background:rgba(255,255,255,.1)}
.cmds__tab:focus{outline:none}
.cmds__tab:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 2px rgba(166,228,245,.5)}
.cmds__arrow{position:absolute;top:50%;z-index:2;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;border-radius:50%;color:#ededed;background:#1d1e20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 20px -8px #000;opacity:0;pointer-events:none;transition:opacity .2s ease,background-color .2s ease}
.cmds__arrow svg{width:16px;height:16px}
@media (hover:hover){.cmds__arrow:hover{background:#27282a}}
.cmds__arrow--l{left:10px}.cmds__arrow--r{right:10px}
.cmds__bar.has-l .cmds__arrow--l,.cmds__bar.has-r .cmds__arrow--r{opacity:1;pointer-events:auto}

/* the cards */
/* every card is five rows of one shared grid (subgrid), so the name, description, arguments,
   permissions and aliases line up across a row of cards, like the pricing cards */
.cmds__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:16px;margin-top:22px}
.cmd{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;min-width:0;padding:22px 22px 20px;border-radius:18px;background:linear-gradient(180deg,#121314,#0f1011);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transition:box-shadow .25s ease,background-color .25s ease}
@media (hover:hover){.cmd:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}}
.cmd[hidden]{display:none}
.cmds__grid{transition:opacity .22s ease}
.cmds__grid.is-fading{opacity:0;transition:opacity .12s ease}
.cmd__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cmd__name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:#f4f4f6;overflow-wrap:anywhere}
.cmd__gem{width:17px;height:17px;flex:none;color:#7dd3fc}
.cmd__mod{color:rgba(237,237,237,.62)}
.cmd__copy{position:relative;flex:none;width:30px;height:30px;margin:-4px -6px 0 0;display:grid;place-items:center;border-radius:8px;color:rgba(237,237,237,.45);transition:color .2s ease,background-color .2s ease}
@media (hover:hover){.cmd__copy:hover{color:#fff;background:rgba(255,255,255,.06)}}
.cmd__copy svg{position:absolute;width:16px;height:16px;transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.cmd__ic-done{opacity:0;transform:scale(.6);color:#7be8b8}
.cmd__copy.is-done .cmd__ic-copy{opacity:0;transform:scale(.6)}
.cmd__copy.is-done .cmd__ic-done{opacity:1;transform:none}
.cmd__desc{align-self:start;margin-top:7px;font-size:14px;line-height:1.5;color:rgba(237,237,237,.62)}
.cmd__row{display:grid;gap:7px;align-content:start;padding-top:12px}
.cmd__row--first{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.cmd__k{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(237,237,237,.6)}
.cmd__chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font-size:12.5px;font-weight:500;white-space:nowrap}
.chip--arg{font-style:italic;color:#d6f2fa;background:rgba(166,228,245,.08);box-shadow:inset 0 0 0 1px rgba(166,228,245,.12)}
.chip--perm{color:#ededed;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cmd__none{font-size:12.5px;color:rgba(237,237,237,.6)}
.cmd__alias{padding-top:10px;font-size:12px;color:rgba(237,237,237,.6)}
.cmd__alias:empty{padding-top:0}
.cmd__alias code{margin-left:3px;padding:1px 6px;border-radius:5px;font:500 11.5px/1.6 var(--mono);color:#e8f6fb;background:rgba(255,255,255,.06)}

.cmds__empty{padding:70px 20px;text-align:center;border-radius:16px;background:#111212}
.cmds__empty-t{font-size:16px;color:#ededed}
.cmds__empty-s{margin-top:8px;font-size:14px;color:rgba(237,237,237,.55)}
.cmds__reset{color:#fff;text-decoration:underline;text-decoration-color:rgba(166,228,245,.45);text-underline-offset:3px}

@media (max-width:980px){.cmds__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .cmd{grid-row:auto;display:flex;flex-direction:column;padding:20px 18px 18px}
  .cmds__arrow{display:none}
  .cmds__tab{height:52px;gap:10px;padding:0 14px 0 8px}
  .cmds__ico{width:34px;height:34px}
  .cmds{padding:calc(env(safe-area-inset-top,0px) + 104px) 12px 90px}
  .cmds__search{width:100%;height:48px;margin-top:24px}
  .cmds__search kbd{display:none}
  .cmds__bar{margin-top:32px}
  .cmds__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.cmds__grid,.cmds__grid.is-fading{transition:none}}

/* Category icons: just the glyph, no chip behind it (like bleed's bar). One filled set
   (Phosphor fill, plus the ticket and the Tier 2 gem drawn to match), grey like the label,
   white on the chosen item. */
.cmds__tab{gap:10px;padding:0 16px 0 16px}
.cmds__ico{width:20px;height:20px;border-radius:0;background:none;box-shadow:none}
.cmds__ico svg{width:19px;height:19px;color:rgba(237,237,237,.55);transition:color .2s ease}
@media (hover:hover){.cmds__tab:hover .cmds__ico svg{color:#ededed}}
.cmds__tab.is-on .cmds__ico svg{color:#fff}
@media (max-width:640px){
  .cmds__tab{gap:9px;padding:0 14px}
  .cmds__ico{width:19px;height:19px}
  .cmds__ico svg{width:18px;height:18px}
}

/* Aliases: a small arrow beside the name opens a floating panel under it, so the card itself
   never changes height. "None" is dimmed so empty rows fade into the background. */
.cmd{position:relative}
.cmd.is-alts{z-index:5}
.cmd__hd{position:relative}
.cmd__more{flex:none;width:22px;height:22px;margin-left:-3px;display:inline-grid;place-items:center;border-radius:6px;color:rgba(237,237,237,.5);transition:color .2s ease,background-color .2s ease}
.cmd__more svg{width:15px;height:15px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cmd.is-alts .cmd__more{color:#fff;background:rgba(255,255,255,.06)}@media (hover:hover){.cmd__more:hover{color:#fff;background:rgba(255,255,255,.06)}}
.cmd.is-alts .cmd__more svg{transform:rotate(180deg)}
.cmd__pop{position:absolute;top:calc(100% + 8px);left:-6px;display:grid;gap:8px;max-width:calc(100% + 12px);padding:11px 12px 12px;border-radius:12px;background:#1a1b1d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 14px 30px -12px #000;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.cmd__pop.is-in{opacity:1;transform:none}
.cmd__pop[hidden]{display:none}
.cmd__alts{display:flex;flex-wrap:wrap;gap:5px}
.cmd__alts code{padding:3px 8px;border-radius:6px;font:500 12px/1.5 var(--mono);color:#e8f6fb;background:rgba(255,255,255,.06);white-space:nowrap}
.cmd__none{color:rgba(237,237,237,.32)}
@media (prefers-reduced-motion:reduce){.cmd__pop,.cmd__more svg{transition:none}}