/* ══════════════════════════════════════════════════════════
   CLOUD TEMPLATE THEME — Shared design system
   Monochrome dark theme matching CONVO / Pin3D / UNI-MENU.
   Drop-in for all CLOUD SITES pages.
   Override any --var in your page <style> block.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds — CONVO monochrome */
  --bg:          #0a0a0a;
  --panel:       rgba(17, 17, 17, 0.94);
  --panel-soft:  rgba(22, 22, 22, 0.90);
  --surface:     rgba(22, 22, 22, 0.80);
  --surface-hover: rgba(30, 30, 30, 0.95);
  --code-bg:     #111111;

  /* Borders */
  --line:        #252525;
  --line-soft:   rgba(255, 255, 255, 0.06);

  /* Text */
  --text:        #e0e0e0;
  --muted:       #888888;
  --heading:     #f0f0f0;

  /* Accents — subtle, not saturated */
  --accent:      #cccccc;
  --accent-soft: rgba(200, 200, 200, 0.1);
  --accent-2:    #999999;
  --accent-3:    #bbbbbb;
  --danger:      #ff6b6b;

  /* Geometry — tight radii like CONVO (2px) */
  --radius:      6px;
  --radius-sm:   4px;
  --radius-xs:   2px;
  --shadow:      0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-sm:   0 4px 16px rgba(0, 0, 0, 0.4);

  /* Type — monospace primary like UNI-MENU */
  --font:        'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font-mono:   'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --fs-xs:       0.65rem;
  --fs-sm:       0.75rem;
  --fs-base:     0.85rem;
  --fs-lg:       1.05rem;
  --fs-xl:       1.3rem;
  --fs-2xl:      clamp(1.4rem, 3vw, 2rem);
  --fs-3xl:      clamp(1.7rem, 4vw, 2.6rem);

  /* Spacing */
  --sp-xs:       0.25rem;
  --sp-sm:       0.5rem;
  --sp-md:       0.85rem;
  --sp-lg:       1.2rem;
  --sp-xl:       2rem;

  /* Layout */
  --content-w:   min(960px, 94vw);
  --wide-w:      min(1280px, 96vw);
}

/* ─── Base Reset ─── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ─── Layout Shell ─── */

.shell {
  width: var(--content-w);
  margin: 0 auto;
  padding: var(--sp-lg) 0 var(--sp-xl);
}

.shell--wide { width: var(--wide-w); }

/* ─── Typography ─── */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  line-height: 1.25;
}

h1 { font-size: var(--fs-2xl); letter-spacing: 0.04em; font-weight: 800; }
h2 { font-size: var(--fs-xl); letter-spacing: 0.02em; font-weight: 700; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 700; }

p { margin: 0 0 var(--sp-md); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; color: #fff; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: var(--sp-xs);
}

.subtitle {
  color: var(--muted);
  font-size: var(--fs-base);
  max-width: 720px;
  line-height: 1.5;
}

/* ─── Cards & Panels — framed rectangles ─── */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--sp-lg);
  transition: border-color 0.15s;
}

.card:hover { border-color: rgba(255, 255, 255, 0.15); }

.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card--link:hover { text-decoration: none; }

.card__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--sp-xs);
  color: var(--heading);
}

.card__meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card__body {
  margin-top: var(--sp-sm);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* ─── Hero Section ─── */

.hero {
  background: rgba(17, 17, 17, 0.95);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-xl) var(--sp-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-md);
}

.hero h1 { font-size: var(--fs-3xl); }

.hero .subtitle { margin-top: var(--sp-sm); }

/* ─── Grid Layouts ─── */

.grid {
  display: grid;
  gap: var(--sp-md);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ─── Data Tables ─── */

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

.spec-table th,
.spec-table td {
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.spec-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--heading);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.spec-table td { background: rgba(255, 255, 255, 0.02); }
.spec-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.01); }

.spec-table .label {
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
  width: 30%;
}

/* ─── Code Blocks ─── */

.code-block {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: #a6e3a1;
  overflow-x: auto;
  white-space: pre;
  margin: var(--sp-sm) 0 var(--sp-md);
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--heading);
}

/* ─── Tags / Badges ─── */

.badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.badge--accent  { background: rgba(200, 200, 200, 0.08); color: var(--heading); }
.badge--success { background: rgba(102, 242, 178, 0.1); color: #66f2b2; }
.badge--warn    { background: rgba(255, 209, 126, 0.1); color: #ffd17e; }
.badge--danger  { background: rgba(255, 107, 107, 0.1); color: var(--danger); }

/* ─── Stat Chips ─── */

.stats {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-top: var(--sp-md);
}

.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--sp-sm) var(--sp-md);
  min-width: 120px;
}

.stat__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.stat__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-top: 0.1rem;
}

/* ─── Breadcrumb / Nav Bar ─── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--sp-md);
}

.breadcrumb a { color: var(--heading); font-weight: 600; }
.breadcrumb .sep { opacity: 0.3; }

/* ─── Page Nav (top bar within site) ─── */

.page-nav {
  display: flex;
  gap: var(--sp-xs);
  flex-wrap: wrap;
  padding: var(--sp-sm) var(--sp-md);
  background: rgba(17, 17, 17, 0.95);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-md);
}

.page-nav a {
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.page-nav a:hover,
.page-nav a.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--heading);
  text-decoration: none;
}

/* ─── Section Divider ─── */

.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--sp-xl) 0;
}

/* ─── Collapsible Sections ─── */

details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: var(--sp-sm);
}

details summary {
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  font-weight: 700;
  color: var(--heading);
  user-select: none;
  list-style: none;
}

details summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  font-weight: 700;
  color: var(--muted);
}

details[open] summary::before { content: "-"; }

details .detail-body {
  padding: 0 var(--sp-md) var(--sp-md);
}

/* ─── Lists ─── */

ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li {
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
ul.clean li:last-child { border-bottom: none; }

/* ─── Bottom Page Nav ─── */

.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-md) 0;
  margin-top: var(--sp-xl);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.page-footer a {
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--heading);
  font-weight: 600;
  transition: all 0.15s;
}

.page-footer a:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
  .shell { padding: var(--sp-md) var(--sp-sm); }
  .hero { padding: var(--sp-lg) var(--sp-md); }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .spec-table .label { width: auto; }
  .page-nav { gap: 0.2rem; }
  .page-nav a { font-size: var(--fs-xs); padding: 0.3rem 0.4rem; }
  .stats { gap: 0.3rem; }
  .stat { min-width: 100px; padding: 0.35rem 0.5rem; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.5rem; }
  .card { padding: var(--sp-md); }
  .page-footer { flex-direction: column; gap: var(--sp-sm); }
}

/* ─── Touch-friendly ─── */

@media (pointer: coarse) {
  .page-nav a { min-height: 44px; display: flex; align-items: center; }
  .card--link { min-height: 48px; }
  .page-footer a { min-height: 44px; display: inline-flex; align-items: center; }
  details summary { min-height: 44px; display: flex; align-items: center; }
}