/* Brutaliste — moche · pratique · moderne · body.skin-brutaliste */

body.skin-brutaliste {
  --brut-seed: 18;
  --brut-accent: hsl(calc(var(--brut-seed) * 1deg) 100% 50%);
  --brut-accent-inv: hsl(calc(var(--brut-seed) * 1deg) 100% 95%);
  --brut-space: clamp(8px, calc(0.4rem + 1.2vw), 24px);
  --brut-gap: clamp(4px, calc(0.25rem + 0.6vw), 12px);
  --brut-border: clamp(3px, calc(2px + 0.35vw), 7px);
  --brut-font: clamp(14px, calc(0.85rem + 0.25vw), 18px);
  --brut-touch: clamp(40px, calc(2.2rem + 0.5vw), 52px);

  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--brut-font);
  line-height: 1.5;
  color: #000;
  background-color: #f0f0f0;
  background-image:
    url("/skins/brutaliste-grid.svg"),
    repeating-linear-gradient(
      0deg,
      #000 0,
      #000 calc(var(--brut-border) * 0.5),
      transparent calc(var(--brut-border) * 0.5),
      transparent calc(var(--brut-space) * 2)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(var(--brut-space) * 3),
      #ccc calc(var(--brut-space) * 3),
      #ccc calc(var(--brut-space) * 3 + 1px)
    );
  background-size: 32px 32px, auto, auto;
}

body.skin-brutaliste::before {
  content: "BRUTALISTE · CAPTURE < 2s · GROS BOUTONS · CONTRASTE MAX";
  display: block;
  background: #000;
  color: var(--brut-accent);
  font-family: ui-monospace, "Courier New", monospace;
  font-size: clamp(10px, calc(0.55rem + 0.3vw), 13px);
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: calc(var(--brut-gap) + 2px) var(--brut-space);
  border-bottom: var(--brut-border) solid var(--brut-accent);
  text-transform: uppercase;
}

body.skin-brutaliste::after {
  content: "";
  position: fixed;
  right: calc(var(--brut-space) * 0.5);
  bottom: calc(var(--brut-space) * 0.5);
  width: clamp(28px, calc(1.5rem + 1vw), 40px);
  height: clamp(28px, calc(1.5rem + 1vw), 40px);
  background: url("/skins/brutaliste-grid.svg") no-repeat center / contain;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 9999;
  border: var(--brut-border) solid #000;
  box-shadow: calc(var(--brut-gap)) calc(var(--brut-gap)) 0 #000;
}

body.skin-brutaliste .skin-toggle {
  font-family: inherit;
  font-size: clamp(12px, calc(0.7rem + 0.2vw), 15px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: var(--brut-border) solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  padding: calc(var(--brut-gap) + 2px) calc(var(--brut-space) * 0.75);
  min-height: var(--brut-touch);
  box-shadow: calc(var(--brut-gap)) calc(var(--brut-gap)) 0 #000;
  cursor: pointer;
}

body.skin-brutaliste .skin-toggle:hover {
  background: var(--brut-accent-inv);
}

body.skin-brutaliste .skin-toggle:focus-visible {
  outline: calc(var(--brut-border) + 1px) solid var(--brut-accent);
  outline-offset: calc(var(--brut-gap) + 2px);
}

body.skin-brutaliste .skin-toggle[aria-pressed="true"] {
  background: var(--brut-accent);
  color: #000;
  box-shadow: inset calc(var(--brut-gap)) calc(var(--brut-gap)) 0 #000;
}

body.skin-brutaliste .skin-toggle[data-skin="brutaliste"] {
  border-color: var(--brut-accent);
  animation: brutaliste-pulse 1.2s step-end infinite;
}

@keyframes brutaliste-pulse {
  50% { background: #000; color: var(--brut-accent); }
}

/* ——— IdeaPit ——— */
body.skin-brutaliste main {
  background: #fff;
  border: var(--brut-border) solid #000;
  border-radius: 0;
  box-shadow: calc(var(--brut-space) * 0.5) calc(var(--brut-space) * 0.5) 0 #000;
  margin: var(--brut-space);
  padding: var(--brut-space);
  max-width: none;
}

body.skin-brutaliste .page-head {
  background: #fff;
  border: var(--brut-border) solid #000;
  padding: var(--brut-space);
  margin-bottom: var(--brut-space);
  box-shadow: calc(var(--brut-gap) * 2) calc(var(--brut-gap) * 2) 0 #000;
  gap: var(--brut-gap);
}

body.skin-brutaliste h1 {
  font-size: clamp(20px, calc(1.1rem + 0.8vw), 28px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #000;
}

body.skin-brutaliste h1::before {
  content: "■ ";
  color: var(--brut-accent);
}

body.skin-brutaliste .hint {
  background: #000;
  color: #fff;
  border: var(--brut-border) solid #000;
  font-size: clamp(12px, calc(0.65rem + 0.2vw), 15px);
  font-weight: 600;
  padding: calc(var(--brut-gap) + 4px) var(--brut-space);
  margin-bottom: var(--brut-space);
  line-height: 1.5;
}

body.skin-brutaliste h2 {
  background: #000;
  color: #fff;
  border: var(--brut-border) solid #000;
  font-size: clamp(12px, calc(0.7rem + 0.15vw), 15px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: calc(var(--brut-gap) + 2px) var(--brut-gap);
  margin-bottom: var(--brut-gap);
}

body.skin-brutaliste h2::before {
  content: "▸ ";
  color: var(--brut-accent);
}

body.skin-brutaliste textarea,
body.skin-brutaliste input {
  border: var(--brut-border) solid #000;
  border-radius: 0;
  font-size: clamp(14px, calc(0.8rem + 0.15vw), 17px);
  background: #fff;
  padding: calc(var(--brut-gap) + 4px) var(--brut-gap);
  min-height: calc(var(--brut-touch) - 8px);
}

body.skin-brutaliste textarea:focus-visible,
body.skin-brutaliste input:focus-visible {
  outline: calc(var(--brut-border) + 1px) solid var(--brut-accent);
  outline-offset: 2px;
}

body.skin-brutaliste button {
  background: #fff;
  border: var(--brut-border) solid #000;
  border-radius: 0;
  color: #000;
  font-weight: 800;
  font-size: clamp(13px, calc(0.75rem + 0.15vw), 16px);
  padding: calc(var(--brut-gap) + 6px) calc(var(--brut-space) * 0.75);
  min-height: var(--brut-touch);
  box-shadow: calc(var(--brut-gap)) calc(var(--brut-gap)) 0 #000;
}

body.skin-brutaliste button:focus-visible {
  outline: calc(var(--brut-border) + 1px) solid var(--brut-accent);
  outline-offset: 3px;
}

body.skin-brutaliste button[type="submit"] {
  background: var(--brut-accent);
}

body.skin-brutaliste .capture-zone {
  border: var(--brut-border) solid #000;
  background: var(--brut-accent-inv);
  padding: var(--brut-space);
  margin-bottom: var(--brut-space);
}

body.skin-brutaliste .resurface-zone {
  background: #fff;
  border: var(--brut-border) solid #000;
  border-radius: 0;
  padding: var(--brut-space);
  margin: var(--brut-space) 0;
  box-shadow: calc(var(--brut-gap) * 2) calc(var(--brut-gap) * 2) 0 #000;
}

body.skin-brutaliste .tabs {
  background: #fff;
  border: var(--brut-border) solid #000;
  padding: var(--brut-gap);
  gap: var(--brut-gap);
  border-radius: 0;
  border-bottom: var(--brut-border) solid #000;
  margin: var(--brut-space) 0 var(--brut-gap);
}

body.skin-brutaliste .tabs button {
  font-size: clamp(13px, calc(0.75rem + 0.2vw), 16px);
  font-weight: 700;
  color: #000;
  background: #fff;
  border: var(--brut-border) solid #000;
  border-radius: 0;
  padding: calc(var(--brut-gap) + 4px) calc(var(--brut-space) * 0.6);
  min-height: var(--brut-touch);
  box-shadow: calc(var(--brut-gap)) calc(var(--brut-gap)) 0 #000;
  margin-bottom: 0;
}

body.skin-brutaliste .tabs button[aria-selected="true"] {
  background: #000;
  color: #fff;
  border-bottom-color: #000;
  box-shadow: inset 0 0 0 calc(var(--brut-border) * 0.5) var(--brut-accent);
}

body.skin-brutaliste .idea-card {
  border-top: var(--brut-border) solid #000;
  background: #fff;
  padding: var(--brut-space);
  margin: var(--brut-gap) 0;
}

body.skin-brutaliste .idea-card.filter-match {
  background: var(--brut-accent-inv);
  border: var(--brut-border) solid var(--brut-accent);
  border-radius: 0;
  margin: var(--brut-gap) calc(var(--brut-gap) * -1);
  padding: var(--brut-space);
}

body.skin-brutaliste .idea-title {
  color: #000;
  font-size: clamp(15px, calc(0.85rem + 0.2vw), 18px);
  font-weight: 900;
}

body.skin-brutaliste .counter {
  background: #000;
  color: var(--brut-accent);
  border: var(--brut-border) solid #000;
  border-radius: 0;
  font-family: ui-monospace, "Courier New", monospace;
  font-weight: 700;
  padding: calc(var(--brut-gap) * 0.5) var(--brut-gap);
}

body.skin-brutaliste .filter-chip,
body.skin-brutaliste .cloud-chip {
  border: var(--brut-border) solid #000;
  border-radius: 0;
  font-weight: 700;
  padding: calc(var(--brut-gap) + 2px) calc(var(--brut-gap) + 6px);
  min-height: calc(var(--brut-touch) - 16px);
}

body.skin-brutaliste .filter-chip.active,
body.skin-brutaliste .cloud-chip.active {
  background: #000;
  color: #fff;
}

body.skin-brutaliste .counter-palette-item {
  border: var(--brut-border) solid #000;
  border-radius: 0;
  padding: var(--brut-gap);
  min-width: var(--brut-touch);
  min-height: var(--brut-touch);
}

body.skin-brutaliste .cycle-zone {
  border-top: calc(var(--brut-border) * 2) solid #000;
  margin-top: var(--brut-space);
  padding-top: var(--brut-space);
}

body.skin-brutaliste .cycle-toggle {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 100%;
  text-align: left;
  margin-bottom: var(--brut-gap);
}

body.skin-brutaliste .cycle-column {
  background: var(--brut-accent-inv);
  border: var(--brut-border) solid #000;
  border-radius: 0;
  box-shadow: calc(var(--brut-gap)) calc(var(--brut-gap)) 0 #000;
}

body.skin-brutaliste .cycle-card {
  border: calc(var(--brut-border) * 0.5) solid #000;
  border-radius: 0;
  background: #fff;
  padding: var(--brut-gap);
}

body.skin-brutaliste .status {
  color: #000;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  font-size: clamp(12px, calc(0.65rem + 0.15vw), 14px);
}

body.skin-brutaliste a {
  color: #000;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: calc(var(--brut-border) * 0.5);
  text-underline-offset: 3px;
}

body.skin-brutaliste a:visited {
  color: #333;
}

body.skin-brutaliste a:hover {
  color: var(--brut-accent);
  background: #000;
}

body.skin-brutaliste a:focus-visible {
  outline: calc(var(--brut-border) + 1px) solid var(--brut-accent);
  outline-offset: 2px;
}