/* App Directory - loaded only by AppsLayout.astro, on top of style.css.
   Kept in its own file (not merged into style.css) so this PR cannot touch
   the CSS the six existing marketing pages depend on. */

.breadcrumbs {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.breadcrumbs .breadcrumb-current {
  color: var(--text-secondary);
}

.apps-hero {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.apps-hero h1 {
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.apps-hero p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Category chip - reuses the pill color language without the sim brand gradients */
.category-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--glass-bg-elevated);
  text-decoration: none;
  white-space: nowrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge-active {
  color: var(--success-text);
  background: var(--success-surface);
  box-shadow: inset 0 0 0 1px var(--success-border);
}

.status-badge-active::before {
  background: #4ade80;
}

.status-badge-maintenance {
  color: var(--warning-text);
  background: var(--warning-surface);
  box-shadow: inset 0 0 0 1px var(--warning-border);
}

.status-badge-maintenance::before {
  background: #fbbf24;
}

.status-badge-abandoned {
  color: var(--danger-text);
  background: var(--danger-surface);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}

.status-badge-abandoned::before {
  background: #fb7185;
}

/* Hub grid */
.apps-grid {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, background 0.3s ease;
}

.app-card:hover {
  transform: translateY(-4px);
  background: var(--glass-bg-elevated);
}

.app-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.app-card-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.app-card-tagline {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  /* Cards share a row height (grid stretch); clamping the tagline keeps the
     middle of every card the same shape instead of 1-3 free-flowing lines. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.app-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.app-card-sims {
  font-size: 0.8rem;
  color: var(--text-muted);
  /* One line, always - the full list lives on the detail page (and in the
     title tooltip on desktop); the card shows the first few + "+N more". */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category grouping headers on the hub */
.category-group {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 40px;
}

.category-group-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
  opacity: 1;
}

/* Dev-status definitions section on the hub */
.status-definitions {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 96px;
  padding: 32px 40px;
  border-radius: var(--radius-card);
}

.status-definitions-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.status-definitions-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-definitions-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.status-definitions-list p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.status-definitions-appeal {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.status-definitions-appeal a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.status-definitions-appeal a:hover {
  color: var(--text-primary);
}

/* Detail page */
.app-detail-header {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.app-detail-header h1 {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.app-detail-tagline {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 620px;
  line-height: 1.6;
}

.app-detail-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.app-detail-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.app-detail-body {
  max-width: 720px;
  margin: 0 auto 64px;
  width: 100%;
}

.app-detail-body p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 16px;
}

.app-detail-body p:last-child {
  margin-bottom: 0;
}

/* Prominent dev-status panel with the backing fact + last-verified date */
.status-panel {
  max-width: 720px;
  margin: 0 auto 64px;
  width: 100%;
  padding: 32px;
  border-radius: var(--radius-card);
}

.status-panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.status-panel-heading h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.status-panel p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 8px;
}

.status-panel p:last-child {
  margin-bottom: 0;
}

.status-panel-verified {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.status-panel-correction {
  margin-top: 16px;
  font-size: 0.9rem;
}

.status-panel-correction a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.status-panel-correction a:hover {
  color: var(--text-primary);
}

/* Facts table */
.facts-table-wrap {
  max-width: 720px;
  margin: 0 auto 64px;
  width: 100%;
  padding: 8px 32px;
  border-radius: var(--radius-card);
}

.facts-table {
  width: 100%;
  border-collapse: collapse;
}

.facts-table tr {
  border-bottom: 1px solid var(--glass-border);
}

.facts-table tr:last-child {
  border-bottom: none;
}

.facts-table th,
.facts-table td {
  text-align: left;
  padding: 16px 0;
  vertical-align: top;
  font-size: 0.95rem;
}

.facts-table th {
  width: 40%;
  color: var(--text-muted);
  font-weight: 500;
}

.facts-table td {
  color: var(--text-primary);
}

.facts-table a {
  color: var(--text-primary);
  text-decoration: underline;
}

.facts-table a:hover {
  color: var(--accent);
}

@media (max-width: 600px) {
  .apps-hero h1,
  .app-detail-header h1 {
    font-size: 2rem;
  }

  .facts-table-wrap,
  .status-panel,
  .status-definitions {
    padding: 24px 20px;
  }
}