/**
 * CCM Tools — app layer
 *
 * A thin layer on top of frikwork. Rules here only cover things frikwork does
 * not ship: the app shell (header/brand/nav), the dashboard grid, and a few
 * tool-page primitives. Everything else must use frikwork classes directly.
 *
 * Conventions:
 *   - `app-` prefix for every class in this file. `fw-` classes are frikwork's;
 *     never redefine one — extend with an `app-` class alongside it.
 *   - Colours, spacing and radii come from `--fw-*` tokens so light/dark theming
 *     is automatic. No hardcoded hex values.
 */

/* ---------------------------------------------------------------------------
 * The [hidden] attribute must actually hide things
 *
 * `[hidden] { display: none }` is a USER-AGENT rule, so any author-origin
 * `display` on the same element beats it no matter how low its specificity.
 * frikwork sets `display` on most components — `.fw-btn` is inline-flex,
 * `.fw-grid` is grid — so `<button class="fw-btn" hidden>` renders anyway.
 * frikwork patches this per component (`.fw-dropdown__panel[hidden]`,
 * `.fw-command__item[hidden]`, …) rather than globally, so every new component
 * reintroduces the trap.
 *
 * `!important` is correct here, not a shortcut: it is the only way an
 * author-origin rule can reliably outrank another author-origin `display`
 * without an escalating specificity war, and "hidden means hidden" should not
 * be negotiable. normalize.css ships the same rule for the same reason.
 * ------------------------------------------------------------------------ */

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
 * Brand spinner theming
 *
 * The component itself is vendored in `ccm-spinner.css` and is deliberately not
 * edited here. This is the one binding it cannot ship: the bare variant sits on
 * a panel rather than on its own charcoal tile, so its second spoke colour has
 * to follow the app's theme instead of being a fixed white or charcoal.
 * ------------------------------------------------------------------------ */

.ccm-spinner--bare { --ccm-alt: var(--fw-text); }

/* ---------------------------------------------------------------------------
 * Shell
 * ------------------------------------------------------------------------ */

.app-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--fw-space-sm) var(--fw-space-md);
  background: var(--fw-bg-card);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
}
.app-skip:focus { left: var(--fw-space-md); top: var(--fw-space-md); }

.app-main {
  flex: 1 1 auto;
  padding: var(--fw-space-xl) 0 var(--fw-space-xl);
}

.app-container { max-width: 1200px; }
.app-container--wide { max-width: 1600px; }
.app-container--full { max-width: none; }

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--fw-space-sm);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--fw-text);
  text-decoration: none;
  white-space: nowrap;
}
.app-brand:hover { text-decoration: none; color: var(--fw-text); }
.app-brand__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--fw-radius-md);
  background: var(--fw-gradient-primary);
  color: var(--fw-on-primary);
  font-size: 0.95rem;
}
.app-brand__text strong { color: var(--fw-brand-text); font-weight: 700; }

.app-nav { flex: 1 1 auto; justify-content: center; gap: var(--fw-space-xs); }
.app-nav__group { display: inline-block; }
.app-nav__caret { font-size: 0.6rem; opacity: 0.6; margin-left: 0.15rem; }
.app-nav .fw-navlink { cursor: pointer; border: 0; background: none; font: inherit; }

.app-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--fw-space-sm);
  white-space: nowrap;
}

.app-search-btn { gap: var(--fw-space-sm); }
.app-kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-sm);
  font-size: 0.7rem;
  color: var(--fw-text-muted);
  background: var(--fw-bg-2);
}

/* Category dropdown panel — frikwork gives us the panel chrome and positioning,
   we only style the rows inside it. */
.app-dd { min-width: 260px; padding: var(--fw-space-xs); }
.app-dd__item {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  padding: var(--fw-space-sm);
  border-radius: var(--fw-radius-sm);
  color: var(--fw-text-2);
  font-size: 0.88rem;
  text-decoration: none;
}
.app-dd__item:hover { background: var(--fw-bg-hover); color: var(--fw-text); text-decoration: none; }
.app-dd__item.is-active { color: var(--fw-brand-text); }
.app-dd__item span:first-of-type { flex: 1 1 auto; }
.app-dd__item i { color: var(--fw-text-muted); }
.app-dd__item:hover i { color: var(--fw-brand-text); }

.app-badge-legacy {
  flex: 0 0 auto;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-sm);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--fw-text-muted);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Page heading
 * ------------------------------------------------------------------------ */

.app-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fw-space-md);
  flex-wrap: wrap;
  margin-bottom: var(--fw-space-xl);
}
.app-pagehead h1 {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  margin: 0 0 var(--fw-space-xs);
}
.app-pagehead h1 i { color: var(--fw-brand-text); }
.app-pagehead .fw-lead { margin: 0; max-width: 68ch; }
.app-pagehead__actions { display: flex; gap: var(--fw-space-sm); flex-wrap: wrap; }

.fw-breadcrumb { margin-bottom: var(--fw-space-md); }

/* ---------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------ */

.app-panel { padding: 0; overflow: hidden; }
.app-panel + .app-panel { margin-top: var(--fw-space-lg); }
.app-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fw-space-md);
  flex-wrap: wrap;
  padding: var(--fw-space-lg);
  border-bottom: 1px solid var(--fw-border);
}
.app-panel__title {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  margin: 0;
  font-size: 1.05rem;
}
.app-panel__title i { color: var(--fw-brand-text); font-size: 0.95em; }
.app-panel__lead { margin: var(--fw-space-xs) 0 0; color: var(--fw-text-muted); font-size: 0.85rem; }
.app-panel__actions { display: flex; gap: var(--fw-space-sm); flex-wrap: wrap; }
.app-panel__body { padding: var(--fw-space-lg); }

/* ---------------------------------------------------------------------------
 * Dashboard
 * ------------------------------------------------------------------------ */

.app-dash-search { position: relative; margin-bottom: var(--fw-space-lg); }
.app-dash-search .fw-input { padding-left: 2.5rem; height: 3rem; font-size: 1rem; }
.app-dash-search__icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fw-text-muted);
  pointer-events: none;
}

.app-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-xl);
}
.app-filter {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--fw-border);
  border-radius: 999px;
  background: transparent;
  color: var(--fw-text-2);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.app-filter:hover { background: var(--fw-bg-hover); color: var(--fw-text); }
.app-filter.is-active {
  background: var(--fw-gradient-primary);
  border-color: transparent;
  color: var(--fw-on-primary);
  font-weight: 600;
}

.app-section { margin-bottom: var(--fw-space-xl); }
.app-section__head {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-md);
}
.app-section__head h2 { margin: 0; font-size: 1rem; letter-spacing: 0.01em; }
.app-section__head i { color: var(--fw-brand-text); }
.app-section__count { color: var(--fw-text-muted); font-size: 0.8rem; }
.app-section__rule { flex: 1 1 auto; height: 1px; background: var(--fw-border); }

.app-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--fw-space-md);
}

.app-tool {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-sm);
  padding: var(--fw-space-lg);
  color: inherit;
  text-decoration: none;
}
.app-tool:hover { text-decoration: none; color: inherit; }
.app-tool__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fw-space-sm); }
.app-tool__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
  color: var(--fw-brand-text);
  font-size: 1.05rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.app-tool:hover .app-tool__icon { background: var(--fw-gradient-primary); color: var(--fw-on-primary); }
.app-tool__flag { color: var(--fw-text-muted); font-size: 0.75rem; }
.app-tool__name { margin: 0; font-size: 0.98rem; line-height: 1.3; }
.app-tool__desc {
  margin: 0;
  flex: 1 1 auto;
  color: var(--fw-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.app-tool__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fw-space-xs); }
.app-tool__uses { margin-left: auto; color: var(--fw-text-muted); }
.app-tool--pending .app-tool__icon { color: var(--fw-text-muted); }

/* ---------------------------------------------------------------------------
 * Tool-page primitives
 * ------------------------------------------------------------------------ */

.app-stat { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--fw-space-lg); }
.app-stat__icon { color: var(--fw-brand-text); font-size: 1.1rem; margin-bottom: var(--fw-space-xs); }
.app-stat__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.app-stat__label { color: var(--fw-text-muted); font-size: 0.8rem; }
.app-stat__hint { color: var(--fw-text-muted); }

.app-output { margin-top: var(--fw-space-md); }
.app-output__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-xs);
}
.app-output--mono { font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

.app-empty { padding: var(--fw-space-xl) var(--fw-space-lg); text-align: center; }
.app-empty i { font-size: 1.8rem; color: var(--fw-text-muted); margin-bottom: var(--fw-space-sm); }
.app-empty h3 { margin: 0 0 var(--fw-space-xs); font-size: 1rem; }
.app-empty p { margin: 0 0 var(--fw-space-md); color: var(--fw-text-muted); font-size: 0.88rem; }

/* Modal size variants layered on frikwork's modal. */
.app-modal--sm .fw-modal__content { max-width: 420px; }
.app-modal--lg .fw-modal__content { max-width: 860px; }
.app-modal--xl .fw-modal__content { max-width: 1200px; }

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .app-main { padding-top: var(--fw-space-lg); }
  .app-pagehead { margin-bottom: var(--fw-space-lg); }
  .app-tools-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 560px) {
  .app-brand__text { display: none; }
  .app-tools-grid { grid-template-columns: 1fr; }
}