/*
 * Addcomposites Wiki Styling — Payload Design System v3.0 overlay
 *
 * Loaded by addcomposites_pm/hooks.py as a web_include_css.
 * Scoped to body[data-path^="addcomposites"] so it only affects the
 * Frappe Wiki pages under our space; other ERPNext web pages are untouched.
 *
 * Source of truth for tokens: ~/.claude/skills/addcomposites-brand/SKILL.md
 */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");

/* ── Tokens ────────────────────────────────────────────────────────────── */
body[data-path^="addcomposites"] {
  --ac-red: #BF3425;
  --ac-red-50: #FDF2F1;
  --ac-red-100: #F5C9C4;
  --ac-red-700: #8A2518;
  --ac-navy: #47577C;
  --ac-navy-50: #E8ECF4;
  --ac-navy-100: #C6CEE0;
  --ac-navy-300: #8A9BBF;
  --ac-navy-700: #2A3550;
  --ac-navy-800: #1C2540;
  --ac-paper: #FBFAF7;
  --ac-paper-1: #F5F3EE;
  --ac-paper-2: #EFEBE2;
  --ac-ink: #0B0D11;
  --ac-ink-muted: #363B48;
  --ac-ink-subtle: #545A69;
  --ac-border: #E2DCCC;

  --ac-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ac-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  --ac-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ── Page canvas + base typography ─────────────────────────────────────── */
body[data-path^="addcomposites"] {
  background: var(--ac-paper);
  color: var(--ac-ink);
  font-family: var(--ac-font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-path^="addcomposites"] a {
  color: var(--ac-red);
  text-decoration: none;
  transition: color 120ms ease;
  border-bottom: 1px solid transparent;
}
body[data-path^="addcomposites"] a:hover {
  color: var(--ac-red-700);
  border-bottom-color: var(--ac-red);
}

/* ── Top navbar ────────────────────────────────────────────────────────── */
body[data-path^="addcomposites"] nav.wiki-navbar {
  background: var(--ac-navy);
  border-bottom: 1px solid var(--ac-navy-700);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
body[data-path^="addcomposites"] nav.wiki-navbar a,
body[data-path^="addcomposites"] nav.wiki-navbar .navbar-brand,
body[data-path^="addcomposites"] nav.wiki-navbar .nav-link {
  color: #FBFAF7;
  border-bottom: none;
}
body[data-path^="addcomposites"] nav.wiki-navbar a:hover,
body[data-path^="addcomposites"] nav.wiki-navbar .nav-link:hover {
  color: #FBFAF7;
  opacity: 0.85;
}
body[data-path^="addcomposites"] nav.wiki-navbar .navbar-brand {
  font-family: var(--ac-font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
}

/* ── Layout: sidebar + main split ──────────────────────────────────────── */
body[data-path^="addcomposites"] aside.doc-sidebar {
  background: var(--ac-paper-1);
  border-right: 1px solid var(--ac-border);
  padding: 1.5rem 1rem 3rem;
  min-height: calc(100vh - 60px);
}
body[data-path^="addcomposites"] main {
  background: var(--ac-paper);
  padding: 2rem 2.5rem 4rem;
  max-width: 820px;
}
@media (min-width: 1200px) {
  body[data-path^="addcomposites"] main {
    padding: 2.5rem 3.5rem 5rem;
  }
}

/* ── Sidebar groups ────────────────────────────────────────────────────── */
body[data-path^="addcomposites"] .sidebar-group {
  margin-bottom: 0.25rem;
}
body[data-path^="addcomposites"] .sidebar-group-container {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 0.25rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 120ms ease;
}
body[data-path^="addcomposites"] .sidebar-group-container:hover {
  background: var(--ac-paper-2);
}
body[data-path^="addcomposites"] .sidebar-group-title {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-ink-muted);
  margin-left: 0.5rem;
}
body[data-path^="addcomposites"] .sidebar-group-container > svg.icon {
  width: 12px;
  height: 12px;
  fill: var(--ac-ink-subtle);
  transition: transform 150ms ease;
}
body[data-path^="addcomposites"] .sidebar-group:not(.collapsed) .sidebar-group-container > svg.icon {
  transform: rotate(90deg);
}
body[data-path^="addcomposites"] .sidebar-group-item-list {
  margin: 0.25rem 0 0.5rem 0.25rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--ac-border);
}
body[data-path^="addcomposites"] .sidebar-group-item-list.hidden {
  display: none;
}
body[data-path^="addcomposites"] .sidebar-item {
  list-style: none;
  margin: 0;
}
body[data-path^="addcomposites"] .sidebar-item a {
  display: block;
  padding: 0.35rem 0.5rem;
  font-size: 13.5px;
  color: var(--ac-ink-muted);
  border-radius: 4px;
  border-bottom: none;
  transition: background 120ms ease, color 120ms ease;
}
body[data-path^="addcomposites"] .sidebar-item a:hover {
  background: var(--ac-paper-2);
  color: var(--ac-ink);
}
body[data-path^="addcomposites"] .sidebar-item.sidebar-item-active a,
body[data-path^="addcomposites"] .sidebar-item-active > a {
  background: var(--ac-red-50);
  color: var(--ac-red);
  font-weight: 500;
  border-left: 2px solid var(--ac-red);
  padding-left: calc(0.5rem - 2px);
}

/* ── Content typography ────────────────────────────────────────────────── */
body[data-path^="addcomposites"] main h1,
body[data-path^="addcomposites"] .wiki-title {
  font-family: var(--ac-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ac-ink);
  margin: 0 0 1.5rem;
}
body[data-path^="addcomposites"] main h2 {
  font-family: var(--ac-font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ac-ink);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ac-border);
}
body[data-path^="addcomposites"] main h3 {
  font-family: var(--ac-font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ac-ink);
  margin: 1.75rem 0 0.5rem;
}
body[data-path^="addcomposites"] main h4 {
  font-family: var(--ac-font-sans);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ac-ink-muted);
  margin: 1.25rem 0 0.4rem;
}

body[data-path^="addcomposites"] main p {
  margin: 0 0 1rem;
  color: var(--ac-ink);
}
body[data-path^="addcomposites"] main ul,
body[data-path^="addcomposites"] main ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}
body[data-path^="addcomposites"] main li {
  margin-bottom: 0.35rem;
}
body[data-path^="addcomposites"] main li > p {
  margin-bottom: 0.35rem;
}

/* ── Blockquote: red voltage rule, italic ──────────────────────────────── */
body[data-path^="addcomposites"] main blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border: none;
  border-left: 3px solid var(--ac-red);
  background: var(--ac-paper-1);
  color: var(--ac-ink-muted);
  font-style: italic;
}
body[data-path^="addcomposites"] main blockquote > p {
  margin: 0;
  color: var(--ac-ink-muted);
}

/* ── Code: IBM Plex Mono on a paper surface ────────────────────────────── */
body[data-path^="addcomposites"] main code {
  font-family: var(--ac-font-mono);
  font-size: 0.875em;
  background: var(--ac-paper-1);
  border: 1px solid var(--ac-border);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  color: var(--ac-navy-700);
}
body[data-path^="addcomposites"] main pre {
  background: var(--ac-paper-1);
  border: 1px solid var(--ac-border);
  border-left: 3px solid var(--ac-navy);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-family: var(--ac-font-mono);
  font-size: 13px;
  line-height: 1.55;
  margin: 1.25rem 0;
}
body[data-path^="addcomposites"] main pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--ac-ink);
}

/* ── Tables: navy header, paper zebra, warm borders ────────────────────── */
body[data-path^="addcomposites"] main table.table,
body[data-path^="addcomposites"] main table {
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--ac-border);
  border-collapse: collapse;
  font-size: 14px;
}
body[data-path^="addcomposites"] main table thead th {
  background: var(--ac-navy);
  color: #FBFAF7;
  font-family: var(--ac-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.6rem 0.85rem;
  border: none;
}
body[data-path^="addcomposites"] main table tbody td {
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--ac-border);
  vertical-align: top;
}
body[data-path^="addcomposites"] main table tbody tr:nth-child(even) td {
  background: var(--ac-paper-1);
}

/* ── Horizontal rules — red voltage line ───────────────────────────────── */
body[data-path^="addcomposites"] main hr {
  border: none;
  height: 1px;
  background: var(--ac-border);
  margin: 2rem 0;
}

/* ── Wiki-content wrapper ──────────────────────────────────────────────── */
body[data-path^="addcomposites"] .wiki-content,
body[data-path^="addcomposites"] .from-markdown {
  font-family: var(--ac-font-sans);
}

/* ── Hide noisy admin banners for guests ──────────────────────────────── */
body[data-path^="addcomposites"][frappe-session-status="logged-out"] .admin-banner,
body[data-path^="addcomposites"][frappe-session-status="logged-out"] .sidebar-options,
body[data-path^="addcomposites"][frappe-session-status="logged-out"] .sidebar-edit-mode-btn,
body[data-path^="addcomposites"][frappe-session-status="logged-out"] .add-sidebar-page,
body[data-path^="addcomposites"][frappe-session-status="logged-out"] .add-sidebar-group,
body[data-path^="addcomposites"][frappe-session-status="logged-out"] .wiki-edit-control-btn {
  display: none !important;
}

/* ── Small, dense, accidentally good details ───────────────────────────── */
body[data-path^="addcomposites"] main strong {
  font-weight: 600;
  color: var(--ac-ink);
}
body[data-path^="addcomposites"] main em {
  font-style: italic;
  color: var(--ac-ink-muted);
}

/* Anchor links from headings (Frappe adds these) */
body[data-path^="addcomposites"] main h1[id]:hover::after,
body[data-path^="addcomposites"] main h2[id]:hover::after,
body[data-path^="addcomposites"] main h3[id]:hover::after {
  content: "#";
  color: var(--ac-red);
  font-weight: 400;
  margin-left: 0.5rem;
  font-size: 0.7em;
}