/**
 * patterns.css — Pattern-specific styles for thejambot.com
 *
 * Adds to the site's existing design system. Does NOT reset or override base styles.
 * Assumes the site already defines: --card, --bg, --text, --muted, --faint,
 * --border, --accent, --accent-bg, --shadow, --radius, --radius-sm, --sans, --mono.
 *
 * Integration:
 *   1. Add to your existing stylesheet or <link> it after your base CSS
 *   2. The pattern color tokens below work in both light and dark themes
 *   3. Adjust the base token names if your site uses different variable names
 */


/* ===========================================================================
   PATTERN COLOR TOKENS — light mode defaults
   =========================================================================== */

:root {
  /* Knowledge Concentration — terracotta */
  --kc: #B54B2C;
  --kc-bg: rgba(181, 75, 44, 0.06);
  --kc-t: #B54B2C;

  /* Coordination Load — forest green */
  --cl: #4A7A42;
  --cl-bg: rgba(74, 122, 66, 0.06);
  --cl-t: #4A7A42;

  /* Maintenance Gravity — warm brown */
  --mg: #8A7455;
  --mg-bg: rgba(138, 116, 85, 0.06);
  --mg-t: #8A7455;

  /* Semantic Drift — dark gold */
  --sd: #9A7818;
  --sd-bg: rgba(154, 120, 24, 0.06);
  --sd-t: #9A7818;

  /* Ownership Ambiguity — steel blue */
  --oa: #4A6898;
  --oa-bg: rgba(74, 104, 152, 0.06);
  --oa-t: #4A6898;

  /* Rework Loops — muted plum */
  --rl: #8A4870;
  --rl-bg: rgba(138, 72, 112, 0.06);
  --rl-t: #8A4870;
}

/* Dark mode via media query */
@media (prefers-color-scheme: dark) {
  :root {
    --kc: #E08060; --kc-bg: rgba(224, 128, 96, 0.10); --kc-t: #E08060;
    --cl: #A7C080; --cl-bg: rgba(167, 192, 128, 0.10); --cl-t: #A7C080;
    --mg: #C8A878; --mg-bg: rgba(200, 168, 120, 0.10); --mg-t: #C8A878;
    --sd: #D8B848; --sd-bg: rgba(216, 184, 72, 0.10); --sd-t: #D8B848;
    --oa: #7898C4; --oa-bg: rgba(120, 152, 196, 0.10); --oa-t: #7898C4;
    --rl: #C878A8; --rl-bg: rgba(200, 120, 168, 0.10); --rl-t: #C878A8;
  }
}

/* Dark mode via theme toggle */
:root[data-theme="dark"] {
  --kc: #E08060; --kc-bg: rgba(224, 128, 96, 0.10); --kc-t: #E08060;
  --cl: #A7C080; --cl-bg: rgba(167, 192, 128, 0.10); --cl-t: #A7C080;
  --mg: #C8A878; --mg-bg: rgba(200, 168, 120, 0.10); --mg-t: #C8A878;
  --sd: #D8B848; --sd-bg: rgba(216, 184, 72, 0.10); --sd-t: #D8B848;
  --oa: #7898C4; --oa-bg: rgba(120, 152, 196, 0.10); --oa-t: #7898C4;
  --rl: #C878A8; --rl-bg: rgba(200, 120, 168, 0.10); --rl-t: #C878A8;
}

/* Light mode override (when toggle forces light on a dark-OS user) */
:root[data-theme="light"] {
  --kc: #B54B2C; --kc-bg: rgba(181, 75, 44, 0.06); --kc-t: #B54B2C;
  --cl: #4A7A42; --cl-bg: rgba(74, 122, 66, 0.06); --cl-t: #4A7A42;
  --mg: #8A7455; --mg-bg: rgba(138, 116, 85, 0.06); --mg-t: #8A7455;
  --sd: #9A7818; --sd-bg: rgba(154, 120, 24, 0.06); --sd-t: #9A7818;
  --oa: #4A6898; --oa-bg: rgba(74, 104, 152, 0.06); --oa-t: #4A6898;
  --rl: #8A4870; --rl-bg: rgba(138, 72, 112, 0.06); --rl-t: #8A4870;
}


/* ===========================================================================
   PATTERN CARDS — used on patterns.html
   =========================================================================== */

.pattern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 48px;
}

.pattern-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pattern-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(60, 71, 77, .12);
}

/* Per-pattern left border color */
.pattern-card[data-p="KC"] { border-left-color: var(--kc); }
.pattern-card[data-p="CL"] { border-left-color: var(--cl); }
.pattern-card[data-p="MG"] { border-left-color: var(--mg); }
.pattern-card[data-p="SD"] { border-left-color: var(--sd); }
.pattern-card[data-p="OA"] { border-left-color: var(--oa); }
.pattern-card[data-p="RL"] { border-left-color: var(--rl); }

.pattern-name {
  font: 700 20px/1.2 var(--sans);
  color: var(--text);
  margin-bottom: 6px;
}
.pattern-felt {
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.pattern-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 16px;
}
.pattern-leads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pattern-lead {
  font: 500 11px/1 var(--mono);
  color: var(--faint);
  padding: 4px 8px;
  background: var(--accent-bg);
  border-radius: 6px;
  white-space: nowrap;
}
.pattern-lead.demo {
  color: var(--accent);
  font-weight: 700;
}
.pattern-count {
  font: 11px/1 var(--mono);
  color: var(--faint);
  margin-top: 12px;
}

/* Logogram icon next to pattern name */
.pattern-icon {
  display: inline-block;
  margin-right: 8px;
  vertical-align: -5px;
}
.pattern-icon svg {
  width: 26px;
  height: 26px;
}


/* ===========================================================================
   FILTER BAR — used on writing + portfolio pages
   =========================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
  padding: 4px 0;
}

.f-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 11px/1 var(--mono);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  transition: all 0.15s;
  letter-spacing: 0.04em;
  user-select: none;
}

.f-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  display: inline-block;
}
.f-chip:hover { border-color: var(--muted); }
.f-chip.active { color: #fff; border-color: transparent; }

/* Per-pattern active states */
.f-chip[data-f="ALL"].active { background: var(--muted); color: #fff; }
.f-chip[data-f="KC"].active { background: var(--kc); }
.f-chip[data-f="CL"].active { background: var(--cl); }
.f-chip[data-f="MG"].active { background: var(--mg); }
.f-chip[data-f="SD"].active { background: var(--sd); }
.f-chip[data-f="OA"].active { background: var(--oa); }
.f-chip[data-f="RL"].active { background: var(--rl); }

.f-chip svg {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  margin-right: 2px;
}

.filter-count {
  font: 12px/1 var(--mono);
  color: var(--faint);
  margin-bottom: 16px;
}


/* ===========================================================================
   PATTERN TAG CHIPS — inline on article and portfolio cards
   =========================================================================== */

.p-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 10px/1 var(--mono);
  padding: 3px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.p-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 6px;
  display: inline-block;
}
.p-chip.KC { color: var(--kc-t); background: var(--kc-bg); }
.p-chip.CL { color: var(--cl-t); background: var(--cl-bg); }
.p-chip.MG { color: var(--mg-t); background: var(--mg-bg); }
.p-chip.SD { color: var(--sd-t); background: var(--sd-bg); }
.p-chip.OA { color: var(--oa-t); background: var(--oa-bg); }
.p-chip.RL { color: var(--rl-t); background: var(--rl-bg); }
.p-chip.demo-chip {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

.p-chip svg {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  margin-right: 1px;
  flex-shrink: 0;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}


/* ===========================================================================
   REFRAMING TABLE — "If you've been following this work" section
   =========================================================================== */

.reframe {
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  margin-bottom: 48px;
}
.reframe h3 {
  font: 700 18px/1.3 var(--sans);
  color: var(--text);
  margin-bottom: 6px;
}
.reframe p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 20px;
  max-width: 620px;
}
.reframe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.reframe-table th {
  font: 600 10px/1 var(--mono);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.reframe-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  vertical-align: top;
}
.reframe-table td:first-child {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.reframe-table .role-tag {
  font: 500 10px/1 var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tag-instance    { color: var(--sd-t); background: var(--sd-bg); }
.tag-consequence { color: var(--kc-t); background: var(--kc-bg); }
.tag-method      { color: var(--cl-t); background: var(--cl-bg); }
.tag-entry       { color: var(--mg-t); background: var(--mg-bg); }
.tag-model       { color: var(--oa-t); background: var(--oa-bg); }
.tag-application { color: var(--rl-t); background: var(--rl-bg); }


/* ===========================================================================
   METHOD BLOCK — "Read the trail, not the scoreboard"
   =========================================================================== */

.method-block {
  background: var(--accent-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 24px 28px;
  margin-bottom: 48px;
}
.method-block h3 {
  font: 700 16px/1.3 var(--sans);
  color: var(--text);
  margin-bottom: 8px;
}
.method-block p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.method-block p + p { margin-top: 8px; }


/* ===========================================================================
   HIDDEN STATE — toggled by filter logic
   =========================================================================== */

.article-card.hidden,
.portfolio-card.hidden {
  display: none;
}


/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

@media (max-width: 700px) {
  .pattern-grid { grid-template-columns: 1fr; }
  .pattern-card { padding: 20px; }
  .reframe { padding: 20px; }
  .reframe-table { font-size: 12px; }
}