/* QX9.org - Max 960px layout. WCAG 2.2 AA/AAA. */

/* ── Outfit font (latin only, woff2, hosted on Google Fonts CDN) ── */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Reset ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; }
.nw { white-space: nowrap; }

html {
  font-size: 20px;
  line-height: 1.6;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ── Variables ── all foreground colors >= 4.5:1 on their backgrounds */

:root {
  --bg: #FAFAF9; --panel: #FFF;
  --border: #C0BDBA; --border-light: #D8D6D3; --grid-dot: #DDD;
  --text: #1A1917; --text-secondary: #333130; --text-dim: #4A4744;
  --rose: #A04042; --rose-light: #D4A0A2; --rose-dark: #7A2F31;
  --charcoal: #2D2B29;
  --badge-bg: #e8e0da; --badge-text: #4a4a4a;
  --note-bg: #F5F4F2;
  --card-dissector-bg: #D6E6F5; --card-dissector-border: #3A6A9A;
  --card-diagrams-bg: #E2D8F5; --card-diagrams-border: #5A3A9A;
  --card-arch-bg: #CCF0F0; --card-arch-border: #1A6A70;
  --font-ui: 'Outfit', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'DejaVu Sans Mono', monospace;
}

/* ── Accessibility ── */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rose); color: #FFF;
  padding: 0.5rem 1rem; font-weight: 700;
  text-decoration: none; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

*:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --text-dim: #333; --border: #888; --border-light: #999; }
}

/* ── Print ── */

@media print {
  body { background: #FFF; width: 100%; padding: 0; font-size: 11pt; }
  .skip-link, .footer-nav { display: none; }
  .page-header, .page-footer, .card { break-inside: avoid; }
}

/* ── Layout ── */

body {
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(circle, var(--grid-dot) 0.5px, transparent 0.5px) 0 0 / 24px 24px,
    var(--bg);
  max-width: 960px; width: 100%;
  margin: 0 auto;
  padding: 1.25rem 2rem 2.5rem;
}

/* ── Shared ── */

code {
  font-family: var(--font-mono); font-size: 0.78rem;
  background: var(--note-bg); border: 1px solid var(--border-light);
  border-radius: 3px; padding: 0.05rem 0.3rem;
}

/* ── Header ── */

.page-header {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 1.25rem 1.25rem 1rem; margin-bottom: 1.25rem;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 260px; position: relative; overflow: hidden;
}

.header-title { display: flex; flex-direction: column; position: relative; z-index: 1; }

.header-subtitle {
  font-family: var(--font-ui); font-size: .9rem; font-weight: 300;
  color: var(--text-secondary); line-height: 1.3;
  letter-spacing: 0.06em; padding-left: 0.5em;
  background: linear-gradient(var(--border-light), var(--border-light)) top left / 65% 1px no-repeat;
  margin-top: 0.7em; padding-top: 0.4em;
}

.header-logo {
  position: absolute; right: -4px; top: 52%;
  transform: translateY(calc(-50% + 2px));
  height: 100%; width: auto;
  object-fit: contain; pointer-events: none;
}

/* ── QX9 wordmark (header + footer) ── */

.qx9-mark {
  font-family: var(--font-ui); font-weight: 700; font-size: 2.2rem;
  white-space: nowrap; line-height: 1;
  margin: -0.1em; margin-top: .6em; margin-left: .2em;
}
.qx9-mark .qx   { color: var(--charcoal); }
.qx9-mark .nine  { color: var(--rose); }
.qx9-mark .org   { color: var(--text-dim); font-size: 0.78rem; }

/* ── Back link (subpages only) ── */

.header-back { width: 100%; padding-left: 0.8em; margin-bottom: 0.8em; }
.header-back a { font-family: var(--font-mono); font-size: 0.70rem; color: var(--rose); text-decoration: none; }
.header-back a:hover { text-decoration: underline; }

/* ── Section labels ── */

.section-label {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 1.35rem 0 0.55rem;
  font-size: 1rem; font-weight: 600; color: var(--text-secondary);
}
.section-label::before { content: '\25C6'; color: var(--rose); font-size: 0.55rem; }
.section-label::after  { content: ''; flex: 1; height: 1px; background: var(--rose-light); opacity: 0.5; }

.wip-tag {
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
  color: var(--text-dim); background: var(--badge-bg);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 0.1rem 0.35rem; letter-spacing: 0.05em;
  vertical-align: middle;
}

/* ── Prose ── */

.prose {
  font-size: 0.88rem; line-height: 1.7; color: var(--text-secondary);
  margin: 0.2rem 0 0.5rem; padding-left: 3.1rem;
}
#about, #about + .prose { font-family: var(--font-ui); }

.prose strong  { color: var(--text); font-weight: 600; }
.prose code    { font-size: 0.82rem; }
.prose a       { color: var(--rose); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

.prose .aside {
  display: block; margin-top: 0.5rem;
  padding: 0.5rem 0.75rem; background: var(--note-bg);
  border-left: 3px solid var(--rose); border-radius: 0 3px 3px 0;
  font-size: 0.82rem; color: var(--text-dim);
}
.prose .aside strong { color: var(--text-secondary); }

/* ── Card grid ── */

.card-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin: 0.3rem 0 0.5rem 3.1rem; }

.card { border-radius: 4px; border: 2px solid; padding: 0.75rem 1rem; overflow: hidden; }
.card.dissector    { background: var(--card-dissector-bg); border-color: var(--card-dissector-border); }
.card.diagrams     { background: var(--card-diagrams-bg);  border-color: var(--card-diagrams-border); }
.card.architecture { background: var(--card-arch-bg);      border-color: var(--card-arch-border); }

.card-subheader {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0.25rem 0 0.1rem;
}
.card-subheader::before { content: '\25C6'; color: var(--rose); font-size: 0.45rem; }
.card-subheader::after  { content: ''; flex: 1; height: 1px; background: var(--rose-light); opacity: 0.45; }

.card h3 {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.88rem;
  margin-bottom: 0.4rem; padding-bottom: 0.3rem; line-height: 1.35;
  color: var(--text); border-bottom: 1px solid var(--border-light);
}
.card p { font-size: 0.82rem; line-height: 1.65; color: var(--text-dim); margin-bottom: 0.4rem; }
.card p strong { color: var(--text-secondary); }

/* ── Card badges & links ── */

.card-meta { display: flex; gap: 0.45rem; margin-bottom: 0.75rem; flex-wrap: wrap; }

.shield {
  display: inline-flex; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 0.65rem; font-weight: 400;
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: default;
}
a.shield { cursor: pointer; transition: opacity 0.15s ease; }
a.shield:hover  { opacity: 0.85; }
a.shield:active { opacity: 0.7; }

.shield-label { background: #555; color: #FFF; padding: 0.25rem 0.4rem; }
.shield-value  { background: var(--badge-bg); color: var(--badge-text); padding: 0.25rem 0.4rem; }
.shield-value.license { background: #97CA00; color: #333; }
.shield-value.info    { background: #007EC6; color: #FFF; }

.card-links { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.card-links a {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: #FFF; text-decoration: none;
  padding: 0.25rem 0.65rem; background: var(--rose);
  border: 1px solid var(--rose-dark); border-radius: 4px;
  transition: background-color 0.15s ease;
}
.card-links a:hover  { background: var(--rose-dark); }
.card-links a:active { background: #662526; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }

/* External-link icon */
a.ext::after {
  content: ""; display: inline-block;
  width: 0.7em; height: 0.7em; margin-left: 0.3em; vertical-align: 0.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1h6v6m-1-5L7 9M13 9v5a1 1 0 01-1 1H2a1 1 0 01-1-1V4a1 1 0 011-1h5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1h6v6m-1-5L7 9M13 9v5a1 1 0 01-1 1H2a1 1 0 01-1-1V4a1 1 0 011-1h5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Diagram table ── */

.diagram-table { border-collapse: collapse; width: 100%; margin-bottom: 0.4rem; }
.diagram-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.diagram-table td,
.diagram-table th {
  font-family: var(--font-mono); font-size: 0.75rem;
  padding: 0.1rem 0.4rem; border-bottom: 1px solid var(--border-light);
  color: var(--text-dim); vertical-align: top; text-align: left; font-weight: normal;
}
.diagram-table tbody th { color: var(--rose); font-weight: 600; white-space: nowrap; width: 3.5rem; }

/* ── Node table ── */

.node-table { border-collapse: collapse; width: calc(100% - 3.1rem); margin: 0.2rem 0 0.5rem 3.1rem; font-size: 0.78rem; }
.node-table th { text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid var(--border); padding: 0.25rem 0.5rem; }
.node-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border-light); color: var(--text-dim); vertical-align: top; }
.node-table td:first-child { font-family: var(--font-mono); color: var(--rose); font-weight: 600; }
.node-table td:nth-child(2) { white-space: nowrap; }

/* ── Note box ── */

.note-box {
  background: var(--note-bg); border: 1px solid var(--border-light); border-radius: 4px;
  padding: 0.6rem 0.85rem; margin: 0 0 0.75rem 3.1rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  line-height: 1.65; color: var(--text-secondary);
}
.note-box strong  { color: var(--text); }
.note-box a       { color: var(--rose); text-decoration: none; }
.note-box a:hover { text-decoration: underline; }
.note-right       { display: block; text-align: right; }

/* ── Footer ── */

.page-footer {
  background: var(--panel); border: 1px solid var(--border-light); border-radius: 4px;
  padding: 0.45rem 0.85rem; margin-top: 1.25rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.3rem;
  font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em;
}
.page-footer .qx9-mark     { font-size: 0.75rem; margin: 0; line-height: inherit; }
.page-footer .qx9-mark .org { font-size: 0.6rem; }

.footer-nav   { flex: 1; display: flex; justify-content: space-evenly; }
.footer-nav a { color: var(--rose); text-decoration: none; font-size: 0.65rem; }
.footer-nav a:hover { text-decoration: underline; }

/* ── Mobile ── */

@media (max-width: 900px) { .header-subtitle { max-width: 60%; } }

@media (max-width: 720px) {
  body { padding: 0.75rem 1rem 1.5rem; }
  .page-header { height: auto; padding: 1rem; }
  .header-logo { height: 140px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .qx9-mark { font-size: 1.6rem; margin-left: 0; }
  .prose { padding-left: 0; }
  .card-grid { margin-left: 0; }
  .node-table { width: 100%; margin-left: 0; }
  .node-table td:nth-child(2) { white-space: normal; }
  .note-box { margin-left: 0; }
  .node-table, .diagram-table { display: block; overflow-x: auto; }
}