/* Demos page: layout filter + layout badges (added with the layout-variety samples). Loaded on /demos/ only. */
.filter-intro{margin:0 0 18px;color:var(--ink-2);max-width:720px}
.filter-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.filter-row .chips{margin-bottom:0}
.filter-lbl{flex:none;width:118px;padding-top:12px;font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.lay-chips button{display:inline-flex;align-items:center;gap:8px}
.lay-chips .wf{width:24px;height:17px;flex:none;color:var(--green)}
.lay-chips button[aria-pressed="true"] .wf{color:#fff}
.lay-chips button,.ind-panel .chips button{white-space:nowrap}
.chips button .n{font-weight:600;opacity:.7}
.ind-filter{margin:4px 0 0 132px}
.ind-tog{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:8px 2px;font:700 14px/1.2 var(--sans);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.ind-tog:hover{color:var(--green-d,var(--green))}
.ind-tog .arr{width:15px;height:15px;transform:rotate(90deg);transition:transform .25s}
.ind-tog[aria-expanded="true"] .arr{transform:rotate(-90deg)}
.ind-cur{color:var(--green);font-weight:800}
.ind-panel{padding:6px 0 2px}
.ind-panel .chips{margin-bottom:0}
.ind-panel .chips button{font-size:14px;padding:8px 13px}
.lay-count{margin:16px 0 22px;font-weight:700;color:var(--ink-3);font-size:15px;min-height:1.4em}
.demo-card.lay-off{display:none}
.demo-card .lay-badge{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border-radius:999px;background:rgba(31,63,30,.88);color:#fff;font:800 12px/1 var(--sans);letter-spacing:.02em;backdrop-filter:blur(6px);box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .4s var(--ease,ease)}
.demo-card .lay-badge .wf{width:22px;height:16px;color:#fbd77a}
.demo-card:hover .lay-badge{transform:translateY(-3px)}
.lay-empty{text-align:center;padding:30px 20px;border:2px dashed var(--line-2);border-radius:var(--r,18px);color:var(--ink-2)}
.lay-empty p{margin:0 0 14px}
@media (max-width:700px){
  .filter-row{flex-direction:column;gap:8px}
  .filter-lbl{width:auto;padding-top:0}
  .ind-filter{margin-left:0}
  .ind-panel .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
  .ind-panel .chips button{flex:none}
  .filter-row .chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .filter-row .chips button{flex:none}
}