/* The playground, on top of jeff.css: a sample feed, and the extension's popup pinned beside it.
   Only the page scrolls; the popup is sized to fit the window, so it's always whole. */
body{font-size:15px}
a{color:inherit}
.top{display:flex;align-items:center;gap:12px;max-width:1160px;height:68px;margin:0 auto;padding:0 24px}
.wordmark{font-size:24px;font-weight:650;letter-spacing:-.04em;line-height:1;text-decoration:none}
.top .home{margin-left:auto;color:var(--muted);font-size:14px;text-decoration:none}
.top .home:hover{color:var(--ink)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"intro popup" "stream popup";column-gap:56px;align-items:start;max-width:1160px;margin:0 auto;padding:24px 24px 96px}
.intro{grid-area:intro;max-width:640px}
.stream{grid-area:stream;max-width:640px}
h1{margin:0 0 10px;font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:1.05}
.intro p{margin:0;color:var(--ink-2);font-size:16px}
.examples-head{margin:24px 0 10px}
.examples{display:flex;flex-wrap:wrap;gap:8px}
.examples .pill{height:auto;min-height:30px;padding:5px 12px;color:var(--ink-2);white-space:normal;text-align:left;cursor:pointer}
.examples .pill:hover{background:var(--soft)}
.examples .pill[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}

/* The popup: the extension's own parts, in a card that never outgrows the window. */
.popup{grid-area:popup;position:sticky;top:20px;display:flex;flex-direction:column;max-height:calc(100vh - 40px);padding:18px 20px 16px;border:1px solid var(--edge);border-radius:22px;background:var(--bg);box-shadow:0 1px 2px #0000000a,0 24px 64px -24px #00000029}
.bar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.bar .wordmark{font-size:21px}
.bar .site{margin-right:auto;color:var(--muted);font-size:14px}
#line{height:74px}
#status{min-height:20px;margin:10px 4px 0}
#status:empty{display:none}
#closed{margin:10px 0 0}
.popup .divider{margin:18px 0 2px}
/* Only the list gives way when the window is short, so the controls under it stay in view. */
.filters{flex:0 1 auto;min-height:64px;margin:0;padding:0;overflow-y:auto;list-style:none;overscroll-behavior:contain}
.filters li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.filters li:last-child{border-bottom:0}
.filters .body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;padding-top:3px}
.filters .name{font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.filters .except{color:var(--muted);font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.filters .receipt{margin-top:5px}
.controls{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto}
.picker{position:relative;display:inline-flex}
.picker .shape{position:absolute;left:10px;top:50%;margin-top:-6px;pointer-events:none}
.action{height:28px;padding:0 24px 0 29px;border:1px solid var(--line);border-radius:999px;appearance:none;background:var(--bg) no-repeat right 8px center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f6f6f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5L8 10l4-3.5'/%3E%3C/svg%3E");font-size:13px;cursor:pointer}
.action:hover{background-color:var(--softer);border-color:var(--edge)}
.remove{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--faint)}
.remove:hover{background:var(--soft);color:var(--ink)}
#empty{margin:8px 0 4px;font-size:14px}
.setting{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;margin-top:12px;border-top:1px solid var(--line)}
.setting+.setting{margin-top:0;border-top:0}
.setting .segments{flex:none;width:228px}
.setting span{display:flex;flex-direction:column}
.setting strong{font-weight:500}
.setting small{color:var(--muted);font-size:13px}

/* The sample feed: plain cards, so the marks are the only design on it. */
.stream-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:36px 0 12px}
.stream-head .label{white-space:nowrap}
.tally{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font:12px/1 var(--mono)}
.tally span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tally .shape{width:10px;height:10px}
.feed{display:grid;gap:10px}
.post{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.who{display:flex;align-items:center;gap:10px;font-size:14px}
.who i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:hsl(var(--hue) 45% 90%);color:hsl(var(--hue) 35% 35%);font-style:normal;font-weight:600}
.who span{color:var(--faint)}
.post p{margin:8px 0 0 44px;line-height:1.5}
.fine{margin:28px 0 0;color:var(--muted);font-size:13px}

/* Narrow windows: one column, the popup between the examples and the feed, and nothing pinned. */
@media (max-width:960px){
  .layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "popup" "stream";row-gap:28px;padding-top:12px}
  .intro,.stream{max-width:none}
  .popup{position:static;max-height:none}
  .filters{overflow:visible}
  .stream-head{margin-top:8px}
}
@media (max-width:480px){
  .top,.layout{padding-left:16px;padding-right:16px}
  h1{font-size:30px}
  .popup{padding:16px 16px 14px}
  .setting .segments{width:204px}
  .post p{margin-left:0}
}