/* ══════════════════════════════════════════════════
   COMMANDS PAGE
   Layered on top of home.css — reuses its tokens,
   masthead, footer, menu island and info FAB.
══════════════════════════════════════════════════ */

.cmds-page{
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem 1.75rem 5rem;
}

/* ── Head block ── */
.cmds-head{ margin-bottom: 3rem; }

.cmds-page .kicker{
  position: relative;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size: 0.95rem;
  color: var(--purple-deep);
  margin-bottom: 0.9rem;
}

.cmds-page h1{
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.02;
  max-width: 14ch;
  margin-bottom: 1.1rem;
}

.cmds-page .lede{
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 58ch;
}
.cmds-page .lede a{
  color: var(--purple-deep);
  text-decoration: underline;
}
.cmds-page code{
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 0.92em;
  background: var(--paper-2);
  border: 1px solid rgba(34,17,43,0.2);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  color: var(--purple-deep);
}

/* ══════════════════════════════════════════════════
   STATUS BANNER — explains why the list is short
══════════════════════════════════════════════════ */
.status-banner{
  margin-top: 1.5rem;
  padding: 1.15rem 1.35rem;
  background: var(--paper-2);
  border: 2px dashed rgba(34,17,43,0.3);
  border-radius: 14px 14px 14px 3px;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 640px;
}
.status-banner-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
  margin-top: 0.6rem;
  animation: pulse 2.2s ease-in-out infinite;
}
.status-banner-body{
  flex: 1;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
}
.status-banner-body strong{ color: var(--ink); }
.status-banner-body a{
  color: var(--purple-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════
   SEARCH / FILTER
══════════════════════════════════════════════════ */
.cmds-search{
  position: relative;
  margin-top: 1.75rem;
  max-width: 480px;
}

.cmds-search-input{
  width: 100%;
  font-family: 'Shippori Mincho', serif;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 14px 14px 14px 3px;
  padding: 0.75rem 3rem 0.75rem 1rem;
  box-shadow: 3px 3px 0 var(--ink);
  outline: none;
  transition:
    transform 420ms var(--ease-island),
    box-shadow 260ms var(--ease-island),
    background 200ms ease;
}
.cmds-search-input::placeholder{
  color: var(--muted);
  font-style: italic;
  opacity: 0.75;
}
.cmds-search-input:focus{
  background: var(--white);
  transform: translate(-1px,-1px) scale(1.01, 1.005);
  box-shadow: 5px 5px 0 var(--ink);
}

.cmds-search-clear{
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 320ms var(--ease-island),
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}
.cmds-search-clear:hover{
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
  transform: translateY(-50%) scale(1.12);
}
.cmds-search-clear:active{
  transform: translateY(-50%) scale(0.86);
  transition-duration: 240ms;
}

.cmds-search-empty{
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}

/* ══════════════════════════════════════════════════
   COMMAND GROUPS
══════════════════════════════════════════════════ */
.cmd-group{
  margin-bottom: 2.5rem;
  border: 3px solid var(--ink);
  background: var(--paper);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
}

.cmd-group-head{
  padding: 1.1rem 1.5rem;
  background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.cmd-group-head h2{
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--ink);
}
.cmd-group-tag{
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--muted);
}

.cmd-list{ display: flex; flex-direction: column; }

.cmd-row{
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px dashed rgba(34,17,43,0.2);
  transition: background 200ms ease;
}
.cmd-row:last-child{ border-bottom: 0; }
.cmd-row:hover{ background: rgba(124,45,240,0.05); }

/* hidden state (used by the live filter) */
.cmd-row.is-hidden,
.cmd-group.is-hidden{ display: none; }

.cmd-chip{
  display: inline-block;
  font-family: 'Shippori Mincho', serif;
  font-style: italic;
  font-size: 0.88rem;
  background: var(--paper-2);
  border: 1px solid rgba(34,17,43,0.3);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  color: var(--purple-deep);
  flex-shrink: 0;
  min-width: 220px;
  transition:
    transform 420ms var(--ease-island),
    background 200ms ease,
    box-shadow 260ms ease;
  transform-origin: 50% 60%;
}
.cmd-row:hover .cmd-chip{
  background: var(--white);
  box-shadow: 2px 2px 0 rgba(34,17,43,0.15);
  transform: translateY(-1px) scale(1.03, 1.01);
}

.cmd-row p{
  color: var(--muted);
  font-size: 0.95rem;
  flex: 1;
  min-width: 220px;
  margin-top: 0.15rem;
}

/* highlight the matched substring in the chip + copy */
.cmd-row mark{
  background: rgba(124,45,240,0.22);
  color: var(--purple-deep);
  border-radius: 3px;
  padding: 0 1px;
  font-style: inherit;
}

.cmds-page .reveal{ will-change: opacity, transform; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 640px){
  .cmds-page{ padding: 3rem 1.35rem 4rem; }

  .cmd-row{
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  .cmd-chip{ min-width: 0; width: fit-content; }
  .cmd-row p{ margin-top: 0; }
}

@media (prefers-reduced-motion: reduce){
  .cmd-chip,
  .cmds-search-input,
  .cmds-search-clear,
  .status-banner-dot{
    transition: none !important;
    animation: none !important;
  }
  .cmd-row:hover .cmd-chip,
  .cmds-search-input:focus,
  .cmds-search-clear:hover,
  .cmds-search-clear:active{
    transform: none !important;
  }
  .cmds-search-clear:hover,
  .cmds-search-clear:active{ transform: translateY(-50%) !important; }
}