/* server/public/css/Tangles-llc_intellectual_property.css */
:root{
  --bg:#f8fafc; --card:#ffffff; --ink:#0f172a; --muted:#475569;
  --accent:#06b6d4; --accent-2:#7c3aed; --success:#16a34a; --danger:#dc2626;
  --border: rgba(15,23,42,.1);
  --radius: 16px;
  --shadow: 0 8px 18px rgba(2,6,23,.08);
  font-synthesis-weight:none;
  color-scheme: light;
}

html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font: clamp(14px, 1.6vw, 16px)/clamp(1.5, 2.2vw, 1.7)
        system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
}

a{ color:var(--accent); }
.wrap{ max-width: clamp(760px, 92vw, 1000px); margin:0 auto; padding: clamp(20px, 5vw, 32px) clamp(12px, 4vw, 20px); }

/* Header */
#closeBtn{
  position:absolute; top: clamp(6px, 2.5vw, 10px); right: clamp(10px, 5vw, 20px);
  font-size: clamp(16px, 4.2vw, 20px);
  background:transparent; border:none; cursor:pointer; line-height:1; color:var(--ink);
}
header{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1px solid var(--border); border-radius:var(--radius);
  padding: clamp(16px, 4.5vw, 24px) clamp(12px, 4vw, 16px);
  box-shadow:var(--shadow);
  background:#ff4d6d; color:#fff;
}
.logo{
  width: clamp(32px, 6vw, 40px);
  height: clamp(32px, 6vw, 40px);
  border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid; place-items:center; box-shadow:var(--shadow);
  margin-top:6px; color:#fff; font-size: clamp(14px, 3.6vw, 18px);
}
.title{
  color:red;
  font-family: inherit;
  font-weight:900;
  font-size: clamp(24px, 5vw, 36px);
  letter-spacing: clamp(.2px, .6vw, 2px);
  margin: clamp(8px, 2vw, 12px) 0 clamp(2px, .8vw, 4px);
}
header h1{ margin: clamp(4px, 1.6vw, 6px) 0 clamp(2px, 1.2vw, 4px); font-size: clamp(20px, 4.5vw, 28px); }
header p{ margin: clamp(4px, 1.6vw, 8px) 0 0; color:#fff; }

/* Cards & layout */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.hero{ padding: clamp(14px, 3.6vw, 22px); }
.hero p{ margin: clamp(4px, 1.4vw, 6px) 0; color:var(--muted); }

.grid{ display:grid; grid-template-columns:1fr; gap: clamp(12px, 3.2vw, 18px); margin-top: clamp(12px, 3.2vw, 18px); }
@media (min-width:860px){ .grid{ grid-template-columns: 2fr 1fr; } }

.block{ padding: clamp(14px, 3.6vw, 22px); border-top:1px solid var(--border); }
.block:first-child{ border-top:none; }

h2{ margin:0 0 clamp(8px, 2.6vw, 12px); font-size: clamp(18px, 3.6vw, 22px); }
h3{ margin: clamp(12px, 3.2vw, 18px) 0 clamp(6px, 2vw, 8px); font-size: clamp(16px, 3vw, 18px); }

ul{ padding-left: clamp(14px, 3.6vw, 18px); margin: clamp(6px, 2vw, 8px) 0; }
.muted{ color:var(--muted); }

.toc a{ display:inline-block; margin: clamp(4px, 1.6vw, 6px) clamp(6px, 2.4vw, 10px) 0 0; }

/* Details/Accordion */
.accordion{ border-top:1px dashed var(--border); }
details{ border-bottom:1px dashed var(--border); padding: clamp(10px, 2.8vw, 14px) 2px; }
summary{ cursor:pointer; list-style:none; font-weight:600; }
summary::-webkit-details-marker{ display:none; }
details[open] summary{ color:var(--accent); }

.pill{ display:inline-block; border:1px solid var(--border); border-radius:999px; padding: 2px clamp(8px, 2.6vw, 10px); margin:0 clamp(6px, 2.4vw, 8px) clamp(6px, 2.4vw, 8px) 0; color:var(--muted); font-size: clamp(11px, 2.4vw, 12px); }
.callout{ border-left:3px solid var(--accent); padding: clamp(10px, 3vw, 14px); background:#eef9fc; border-radius:10px; }

.footer{ margin-top: clamp(18px, 5vw, 26px); padding: clamp(12px, 3.6vw, 18px); color:var(--muted); text-align:center; }
code{ background:#f1f5f9; padding: 2px clamp(4px, 1.8vw, 6px); border-radius:6px; }