/* Phase 2B-1.7A — authenticated rithavo.com shell.
   Purely additive to styles.css (never edited — a separate, unrelated
   workstream touches that file). Reuses the exact same design tokens
   (--g1/g2/g3, --ink*, --surface*, --line*, --r-*, --shadow-*,
   --ease-standard, --font-*) defined there; this file only adds the
   handful of component classes the authenticated pages need that the
   public marketing site never did (a compact top bar instead of the
   full public nav, form fields, status banners, simple tabs). */

.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line);
  background: var(--surface); flex-wrap: wrap;
}
.app-topbar .wordmark { margin-right: 8px; }
.app-tabs { display: flex; gap: 4px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.app-tabs a {
  display: inline-block; padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.app-tabs a:hover { color: var(--ink); background: var(--surface-muted); }
.app-tabs a[aria-current="page"] { color: var(--ink); background: var(--surface-muted); font-weight: 600; }
.app-identity { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--ink-faint); }

.app-main { max-width: 780px; margin: 0 auto; padding: 48px 24px 96px; }
.app-main.app-main-wide { max-width: 980px; }

.app-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.app-field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.app-field input, .app-field textarea, .app-field select {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 12px 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.app-field input:focus, .app-field textarea:focus, .app-field select:focus {
  border-color: var(--g2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2) 18%, transparent);
}
.app-field textarea { min-height: 220px; resize: vertical; line-height: 1.5; }
.app-field .hint { font-size: 0.78rem; color: var(--ink-faint); }

.app-banner { padding: 14px 18px; border-radius: var(--r-sm); font-size: 0.9rem; margin-bottom: 20px; border: 1px solid transparent; }
.app-banner-info { background: var(--surface-muted); color: var(--ink-soft); border-color: var(--line); }
.app-banner-success { background: color-mix(in srgb, #2e8b57 12%, var(--surface)); color: #1f5c3a; border-color: color-mix(in srgb, #2e8b57 35%, var(--line)); }
.app-banner-error { background: color-mix(in srgb, #c0392b 10%, var(--surface)); color: #8a2a1f; border-color: color-mix(in srgb, #c0392b 35%, var(--line)); }
@media (prefers-color-scheme: dark) {
  .app-banner-success { color: #8fd6ac; }
  .app-banner-error { color: #f0a99e; }
}
:root[data-theme="dark"] .app-banner-success { color: #8fd6ac; }
:root[data-theme="dark"] .app-banner-error { color: #f0a99e; }

/* P0.5A: authenticated Home's identity panel. No photo endpoint is
   exposed to rithavo.com today (the sibling's card_settings mirror is
   deliberately minimal — see app/db.py), so this initial-letter avatar
   is the permanent, clean fallback for "no photo" rather than a
   temporary placeholder. */
.app-identity-panel { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.app-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
}
.app-identity-meta { font-size: 0.92rem; color: var(--ink-soft); margin: 4px 0 0; }

.app-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 24px; }
.app-tile { padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.app-tile h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.app-tile p { font-size: 0.85rem; margin: 0; }
.app-tile .tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; }

.app-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.app-list-row { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.app-list-row .meta { font-size: 0.8rem; color: var(--ink-faint); }
.app-empty { padding: 32px; text-align: center; color: var(--ink-soft); font-size: 0.9rem; }
.app-skeleton { color: var(--ink-faint); font-size: 0.9rem; padding: 32px; text-align: center; }

.app-finding { padding: 16px 20px; margin-bottom: 10px; }
.app-finding .dim { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 600; margin-bottom: 4px; }

/* P0 onboarding: upload-vs-manual choice + review/edit entry cards. */
.app-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
@media (max-width: 640px) { .app-choice-grid { grid-template-columns: 1fr; } }
.app-choice-card {
  padding: 32px 24px; text-align: center; cursor: pointer; border: 1px solid var(--line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease; background: var(--surface);
}
.app-choice-card:hover { border-color: var(--g2); box-shadow: var(--shadow-lg); }
.app-choice-card .icon { font-size: 2rem; margin-bottom: 12px; }
.app-choice-card h3 { margin: 0 0 8px; font-family: var(--font-display); color: var(--ink); }
.app-choice-card p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.app-dropzone {
  border: 2px dashed var(--line-strong); border-radius: var(--r-sm); padding: 40px 24px;
  text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.app-dropzone:hover, .app-dropzone.is-dragover { border-color: var(--g2); background: var(--surface-muted); }
.app-dropzone input[type="file"] { display: none; }
.app-entry-card { padding: 20px; margin-bottom: 16px; position: relative; }
.app-entry-card .app-entry-remove {
  position: absolute; top: 12px; right: 12px; font-size: 0.78rem; padding: 4px 10px;
}
.app-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .app-entry-grid { grid-template-columns: 1fr; } }

/* Home/Explore/Admin Integration Phase. */

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.7rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--surface-muted); color: var(--ink-soft); border: 1px solid var(--line);
}
.badge-active { color: #1f5c3a; border-color: color-mix(in srgb, #2e8b57 35%, var(--line)); }
.badge-pending { color: #8a5a1f; border-color: color-mix(in srgb, #c08a2b 35%, var(--line)); }

/* Home: a secondary-navigation rail beside the Explore feed. Desktop:
   fixed-width rail + fluid content. Mobile: the rail collapses above
   the feed via a native <details>, matching this file's existing
   .app-choice-card / dropzone philosophy of zero extra JS for layout. */
.home-shell { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.home-rail-menu summary {
  list-style: none; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); padding: 4px 0 10px; cursor: default;
}
.home-rail-menu summary::-webkit-details-marker { display: none; }
.home-rail-menu summary::marker { content: none; }
.home-rail-links { display: flex; flex-direction: column; gap: 2px; }
.home-rail-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.home-rail-links a:hover { background: var(--surface-muted); color: var(--ink); }
@media (max-width: 720px) {
  .home-shell { grid-template-columns: 1fr; gap: 16px; }
  .home-rail-menu summary {
    cursor: pointer; text-transform: none; font-size: 0.9rem; letter-spacing: normal;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-soft);
  }
  .home-rail-menu[open] summary { border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .home-rail-links { border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 6px; }
}

/* Explore feed — a content grid, deliberately not .app-tile-grid's
   people/product-directory semantics. Product Correction Phase:
   customer-facing filter chips/industry select removed entirely (no
   customer-facing filter UI this phase) — a two-section continuous
   feed ("Relevant to you" then "Explore") replaces them. */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.explore-section-header {
  grid-column: 1 / -1; font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  color: var(--ink); margin: 8px 0 -4px; padding-top: 8px; border-top: 1px solid var(--line);
}
.explore-section-header:first-child { border-top: none; padding-top: 0; }
.explore-card {
  display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer;
}
.explore-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.explore-card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-muted); }
.explore-card-image-fallback { width: 100%; aspect-ratio: 16 / 9; background: var(--gradient); }
.explore-card-body { padding: 16px; }
.explore-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
  background: var(--surface-muted); color: var(--ink-soft); margin-right: 6px;
}
.explore-card-headline { font-size: 1rem; font-weight: 600; margin: 8px 0 6px; line-height: 1.35; color: var(--ink); }
.explore-card-summary { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 8px; line-height: 1.5; }
.explore-card-meta { font-size: 0.75rem; color: var(--ink-faint); }
.explore-empty, .explore-end { text-align: center; color: var(--ink-faint); padding: 40px 20px; }
.explore-story-image { width: 100%; border-radius: var(--r-md); margin: 16px 0 24px; max-height: 400px; object-fit: cover; }
.explore-story-body { font-size: 1rem; line-height: 1.7; white-space: pre-line; color: var(--ink); }
.explore-why-it-matters { margin-top: 24px; padding: 16px 20px; border-left: 3px solid var(--g2); background: var(--surface-muted); border-radius: var(--r-sm); }
@media (max-width: 640px) { .explore-grid { grid-template-columns: 1fr; } }

/* Product Correction Phase — opening a story stays inside Home
   (a modal), never a navigation to app.rithavo.com. */
.explore-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000;
  align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.explore-modal-overlay.open { display: flex; }
.explore-modal {
  position: relative; background: var(--surface); border-radius: var(--r-lg); max-width: 640px; width: 100%;
  padding: 32px; box-shadow: var(--shadow-lg);
}
.explore-modal-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.6rem;
  line-height: 1; cursor: pointer; color: var(--ink-faint);
}
.explore-modal-close:hover { color: var(--ink); }

/* Admin dashboard — simple client-side tabs, no new dependency. */
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.admin-tab-btn {
  padding: 10px 16px; border: none; background: none; cursor: pointer; font-size: 0.88rem;
  color: var(--ink-soft); border-bottom: 2px solid transparent; font-family: inherit;
}
.admin-tab-btn.active { color: var(--ink); border-bottom-color: var(--g2); font-weight: 600; }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }
.admin-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-row-actions .btn { padding: 6px 12px; font-size: 0.78rem; }