/* PATTERNS — surface pattern explorer */
.patterns-section{margin-top:34px;scroll-margin-top:24px;}
.patterns-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.patterns-head .section-label{margin-bottom:0;}
.patterns-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
.patterns-select{
  border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:5px 24px 5px 10px;font-family:var(--mono);font-size:10px;font-weight:900;color:#111;
  appearance:none;outline:none;cursor:pointer;min-height:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.patterns-overview{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:14px;
}
.patterns-overview-item{min-width:0;border-left:2px solid #111;padding:2px 0 2px 9px;}
.patterns-overview-label{display:block;font-family:var(--mono);font-size:9px;color:var(--muted2);font-weight:900;letter-spacing:.5px;line-height:1.2;text-transform:uppercase;white-space:nowrap;}
.patterns-overview-value{display:block;margin-top:5px;font-family:var(--mono);font-size:12px;color:#111;font-weight:900;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.patterns-list{border-top:1px solid var(--line);background:#fff;}
.pattern-row{border-bottom:1px solid var(--line);}
.pattern-row.is-empty{opacity:.5;}
.pattern-summary{
  display:grid;grid-template-columns:82px minmax(0,1fr) 24px;gap:12px;align-items:start;
  width:100%;padding:15px 2px;border:0;background:transparent;text-align:left;color:inherit;font:inherit;
}
.pattern-toggle{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.pattern-axis{font-family:var(--mono);font-size:9px;font-weight:900;letter-spacing:.6px;color:var(--muted2);line-height:1.45;text-transform:uppercase;padding-top:2px;}
.pattern-copy{display:block;min-width:0;}
.pattern-main{display:block;font-size:13px;font-weight:500;line-height:1.5;color:#111;word-break:keep-all;}
.pattern-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--muted2);transition:transform .18s ease;}
.pattern-chevron svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pattern-row.is-open .pattern-chevron{transform:rotate(180deg);}
.pattern-panel{padding:0 2px 16px;}
.pattern-panel[hidden]{display:none;}
.pattern-panel-copy{margin-left:94px;min-width:0;}
.pattern-story-line{font-size:13px;font-weight:500;line-height:1.55;color:#111;word-break:keep-all;}
.pattern-story-line+.pattern-story-line{margin-top:3px;}
.pattern-question-row{display:flex;align-items:flex-end;gap:8px;margin-top:9px;}
.pattern-story-line.is-question{flex:1;color:var(--muted);}
.pattern-evidence{display:block;margin-top:5px;font-family:var(--mono);font-size:9px;font-weight:900;line-height:1.45;letter-spacing:.25px;color:var(--muted2);word-break:keep-all;}
.pattern-summary-evidence{padding-right:2px;}
.patterns-empty{padding:18px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;font-weight:900;letter-spacing:.45px;color:var(--muted2);}
.patterns-guest{cursor:pointer;}
.patterns-guest:active{transform:translateY(1px);}

@media (max-width:780px){
  .patterns-head{align-items:flex-start;}
  .patterns-controls{gap:6px;}
  .patterns-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:13px 12px;}
  .patterns-overview-label{font-size:8px;}
  .patterns-overview-value{font-size:10px;}
  .pattern-summary{grid-template-columns:70px minmax(0,1fr) 24px;gap:9px;}
  .pattern-panel-copy{margin-left:79px;}
  .pattern-main{font-size:13px;}
  .pattern-story-line{font-size:13px;}
}

@media (max-width:420px){
  .pattern-summary{grid-template-columns:64px minmax(0,1fr) 24px;}
  .pattern-panel-copy{margin-left:73px;}
}