/* ============================================================================
   Strata — strata.css
   Version : 1.0.0
   Date    : 2026-04-02

   Styles spécifiques au service Strata.
   Dépend de vnct-design-system.css pour les variables et composants de base.

   Structure :
   1. Article — Layout & Typography
   2. Callouts — Style Obsidian
   3. Code blocks — Highlight.js integration
   4. Tables — Obsidian-style
   5. Wikilinks & Embeds
   6. Task lists
   7. Tags
   8. Auth wall
   9. Home page
   10. Admin panel
   11. Utility
   ============================================================================ */

/* ============================================================================
   1. ARTICLE — Layout & Typography
   ============================================================================ */

.strata-article {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

@media (max-width: 768px) {
  .strata-article {
    padding: var(--space-4) var(--space-4);
  }
}

.strata-article__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.strata-article__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .strata-article__title {
    font-size: var(--text-2xl);
  }
}

.strata-article__meta {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.strata-article__tags {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Article content — inherited markdown styles */
.strata-article__content {
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.strata-article__content h1 {
  font-size: var(--text-2xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.strata-article__content h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.strata-article__content h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.strata-article__content h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.strata-article__content p {
  margin-bottom: var(--space-4);
}

.strata-article__content ul,
.strata-article__content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.strata-article__content li {
  margin-bottom: var(--space-2);
}

.strata-article__content li > ul,
.strata-article__content li > ol {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.strata-article__content blockquote {
  border-left: 3px solid var(--accent);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.strata-article__content hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-8) 0;
}

.strata-article__content a {
  color: var(--accent);
  text-decoration: none;
}

.strata-article__content a:hover {
  text-decoration: underline;
}

.strata-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.strata-article__content code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.9em;
  background: var(--bg-tertiary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--accent);
}

.strata-article__content pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: var(--text-sm);
}

/* Highlight (==text==) */
.strata-article__content mark {
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
  color: var(--text-primary);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

/* Footnotes */
.strata-article__content .footnotes {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Kbd */
.strata-article__content kbd {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-xs);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
  box-shadow: 0 1px 0 var(--border-default);
}

/* ============================================================================
   2. CALLOUTS — Style Obsidian
   ============================================================================ */

.strata-callout {
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  overflow: hidden;
}

.strata-callout__title {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.strata-callout__body {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.strata-callout__body p:last-child {
  margin-bottom: 0;
}

/* Collapsible callouts */
.strata-callout details summary {
  cursor: pointer;
  list-style: none;
}

.strata-callout details summary::before {
  content: '▶';
  display: inline-block;
  margin-right: var(--space-2);
  font-size: 0.7em;
  transition: transform var(--duration-fast) ease;
}

.strata-callout details[open] summary::before {
  transform: rotate(90deg);
}

/* Callout types */
.strata-callout--note,
.strata-callout--info,
.strata-callout--todo {
  border-color: #4a9eff40;
  background: #4a9eff08;
}
.strata-callout--note .strata-callout__title,
.strata-callout--info .strata-callout__title,
.strata-callout--todo .strata-callout__title {
  color: #4a9eff;
}

.strata-callout--abstract,
.strata-callout--summary,
.strata-callout--tldr {
  border-color: #00d4aa40;
  background: #00d4aa08;
}
.strata-callout--abstract .strata-callout__title,
.strata-callout--summary .strata-callout__title,
.strata-callout--tldr .strata-callout__title {
  color: #00d4aa;
}

.strata-callout--tip,
.strata-callout--hint,
.strata-callout--important {
  border-color: #00d4aa40;
  background: #00d4aa08;
}
.strata-callout--tip .strata-callout__title,
.strata-callout--hint .strata-callout__title,
.strata-callout--important .strata-callout__title {
  color: #00d4aa;
}

.strata-callout--success,
.strata-callout--check,
.strata-callout--done {
  border-color: #30d06040;
  background: #30d06008;
}
.strata-callout--success .strata-callout__title,
.strata-callout--check .strata-callout__title,
.strata-callout--done .strata-callout__title {
  color: #30d060;
}

.strata-callout--question,
.strata-callout--help,
.strata-callout--faq {
  border-color: #e8d44d40;
  background: #e8d44d08;
}
.strata-callout--question .strata-callout__title,
.strata-callout--help .strata-callout__title,
.strata-callout--faq .strata-callout__title {
  color: #e8d44d;
}

.strata-callout--warning,
.strata-callout--caution,
.strata-callout--attention {
  border-color: #f0a03040;
  background: #f0a03008;
}
.strata-callout--warning .strata-callout__title,
.strata-callout--caution .strata-callout__title,
.strata-callout--attention .strata-callout__title {
  color: #f0a030;
}

.strata-callout--failure,
.strata-callout--fail,
.strata-callout--missing {
  border-color: #f0405040;
  background: #f0405008;
}
.strata-callout--failure .strata-callout__title,
.strata-callout--fail .strata-callout__title,
.strata-callout--missing .strata-callout__title {
  color: #f04050;
}

.strata-callout--danger,
.strata-callout--error {
  border-color: #f0405060;
  background: #f0405010;
}
.strata-callout--danger .strata-callout__title,
.strata-callout--error .strata-callout__title {
  color: #f04050;
}

.strata-callout--bug {
  border-color: #ff607040;
  background: #ff607008;
}
.strata-callout--bug .strata-callout__title {
  color: #ff6070;
}

.strata-callout--example {
  border-color: #a080ff40;
  background: #a080ff08;
}
.strata-callout--example .strata-callout__title {
  color: #a080ff;
}

.strata-callout--quote,
.strata-callout--cite {
  border-color: var(--border-default);
  background: var(--bg-secondary);
}
.strata-callout--quote .strata-callout__title,
.strata-callout--cite .strata-callout__title {
  color: var(--text-secondary);
}

/* Light theme adjustments */
[data-theme="light"] .strata-callout {
  border-width: 1px;
}

/* ============================================================================
   3. CODE BLOCKS
   ============================================================================ */

.strata-code-block {
  position: relative;
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.strata-code-block pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--bg-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.strata-code-block code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.strata-code-lang {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: 0 var(--radius-md) 0 var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================================
   4. TABLES
   ============================================================================ */

.strata-table-wrap {
  margin: var(--space-4) 0;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}

.strata-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.strata-table th {
  background: var(--bg-tertiary);
  font-weight: var(--font-semibold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  white-space: nowrap;
}

.strata-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
}

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

.strata-table tr:hover td {
  background: var(--surface-hover);
}

/* ============================================================================
   5. WIKILINKS & EMBEDS
   ============================================================================ */

.strata-wikilink {
  color: var(--accent);
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  font-size: 0.95em;
  text-decoration: none;
}

a.strata-wikilink:hover {
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
  text-decoration: none;
}

.strata-embed {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.strata-embed__icon {
  flex-shrink: 0;
}

/* ============================================================================
   6. TASK LISTS
   ============================================================================ */

.strata-article__content input[type="checkbox"] {
  margin-right: var(--space-2);
  accent-color: var(--accent);
}

.strata-task {
  margin: var(--space-2) 0;
  padding: var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
}

.strata-task__check {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.strata-task--cancelled {
  color: var(--text-muted);
}

.strata-task--deferred {
  color: var(--text-secondary);
}

/* ============================================================================
   7. TAGS
   ============================================================================ */

.strata-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--accent);
  background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* ============================================================================
   8. AUTH WALL
   ============================================================================ */

.strata-auth {
  max-width: 400px;
  margin: var(--space-16) auto;
  text-align: center;
  padding: 0 var(--space-4);
}

.strata-auth__icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.strata-auth__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.strata-auth__desc {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.strata-auth__form {
  text-align: left;
}

.strata-auth__error {
  color: var(--danger);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* ============================================================================
   9. HOME PAGE — Standard VNCT layout
   ============================================================================ */

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-4);
}

.header { text-align: center; margin-bottom: var(--space-10); }

.logo {
  font-size: var(--text-2xl); font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.logo span { color: var(--accent); }

.subtitle {
  color: var(--text-muted); font-size: var(--text-sm);
  font-weight: var(--font-light); letter-spacing: 0.5px;
}

.strata-home__hint {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* ============================================================================
   10. ADMIN PANEL
   ============================================================================ */

.strata-admin {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

@media (max-width: 768px) {
  .strata-admin {
    padding: var(--space-4);
  }
}

.strata-admin__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.strata-admin__header h1 {
  font-size: var(--text-2xl);
}

@media (max-width: 768px) {
  .strata-admin__header {
    flex-direction: column;
    align-items: stretch;
  }

  .strata-admin__header h1 {
    font-size: var(--text-xl);
    text-align: center;
  }

  .strata-admin__header > div {
    display: flex;
    justify-content: center;
  }
}

.strata-admin__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.strata-admin__article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .strata-admin__article {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .strata-admin__article-actions {
    justify-content: flex-start;
    gap: var(--space-3);
  }
}

.strata-admin__article-info {
  flex: 1;
  min-width: 0;
}

.strata-admin__article-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .strata-admin__article-title {
    white-space: normal;
    overflow: visible;
    font-size: var(--text-sm);
  }
}

.strata-admin__article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  min-width: 0;
}

/* Slug : peut rétrécir avec ellipsis si trop long */
.strata-admin__article-meta code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

/* Date, séparateurs, badge : pas de rétrécissement */
.strata-admin__article-meta > span {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .strata-admin__article-meta {
    flex-wrap: wrap;
  }

  .strata-admin__article-meta code {
    word-break: break-all;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

.strata-admin__article-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.strata-admin__panel {
  margin-bottom: var(--space-6);
}

/* ============================================================================
   11. UTILITY
   ============================================================================ */

.strata-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

.strata-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-default);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: strata-spin 0.8s linear infinite;
}

@keyframes strata-spin {
  to { transform: rotate(360deg); }
}

.strata-empty {
  text-align: center;
  padding: var(--space-16) var(--space-4);
}

.strata-empty__icon {
  font-size: 3rem;
  margin-bottom: var(--space-2);
}

/* Mermaid dark/light */
[data-theme="dark"] .mermaid {
  filter: invert(0);
}

/* Print styles */
@media print {
  .vnct-nav-desktop,
  .vnct-header-mobile,
  .vnct-fab,
  .vnct-fab-menu,
  .vnct-fab-overlay,
  .vnct-version-badge {
    display: none !important;
  }

  .strata-article {
    max-width: 100%;
    padding: 0;
  }

  .strata-callout {
    break-inside: avoid;
  }

  .strata-code-block {
    break-inside: avoid;
  }
}